Design comparison
SolutionDesign
Community feedback
- @MikDra1Posted 2 months ago
- The @import rule for Google Fonts can slow down page load times. Using a <link> tag in the HTML <head> might be more efficient.
- Check the contrast between text and background colors to ensure readability. For example, section p with white text on a --Grey-800 background might not have enough contrast.
- The button's hover state changes text color to black on a green background. Ensure this provides sufficient contrast for accessibility.
- The width: clamp(20%, 400px, 90%); and height: fit-content; properties on section are generally fine but may need adjustment if content varies significantly.
- The border-radius: 10rem; on section img creates very rounded corners. Verify this achieves the intended visual effect.
- The .attribution is fixed at the bottom. Ensure this doesn’t overlap other content or cause usability issues on different devices.
- The font sizes for section h1 and section p should be checked to ensure they are appropriate for readability across devices.
- While box-sizing: border-box; is good practice, ensure it's consistently applied to avoid layout issues.
Hope you found this comment helpful 💗💗💗
Good job and keep going 😁😊😉
Marked as helpful1
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord