@MikDra1
Posted
Great job on the code! Here are a few suggestions:
-
The use of box-sizing: border-box; for all elements ensures that padding and borders are included in the element's total width and height, which helps prevent layout issues.
-
Defining custom fonts with @font-face is well done. Consider combining similar font definitions to reduce redundancy. Make sure the font files are optimized for web performance.
-
The body background color #f4d04e is vibrant and effective. Setting width: 100%; ensures the body takes up the full viewport width.
-
Using Flexbox to center the .container is effective, but the fixed height of 60rem might cause issues on smaller screens. Consider using min-height or a responsive unit for better adaptability.
-
The .main-card design with border, box-shadow, and border-radius looks modern and clean. Be mindful of the fixed width and ensure it doesn't affect responsiveness. Using percentage-based widths or max-width could improve flexibility.
-
The .text-card styles for headings and links are well thought out. Ensure text color provides good contrast for readability. The hover effect on links changing color to #f4d04e adds a nice touch.
-
The .author-card styling with Flexbox for alignment is effective. Ensure image sizes and spacing are consistent across devices.
Hope you found this comment helpful 💗💗💗
Good job and keep going 😁😊😉
Marked as helpful