Design comparison
Community feedback
- @MikDra1Posted 2 months ago
Well done, here are some things to review:
-
Setting html { background-color: #D5E1EF; } applies a light blue background to the entire HTML document. This creates a soft, calming backdrop. Make sure the contrast between this background and your text is sufficient for readability.
-
The body { height: 520px; width: 330px; background-color: white; text-align: center; margin: auto; margin-top: 15%; border-radius: 25px; } rule centers the content horizontally and adds a top margin of 15% of the viewport height. While the fixed height and width create a defined container, they can limit responsiveness on different screen sizes. Consider using relative units or media queries to make the design more flexible. The border-radius: 25px; gives a smooth, rounded appearance to the container, which is visually appealing.
-
For h2 { text-align: center; font-family: Outfit; font-weight: 700; }, centering the text and using a bold font weight (700) helps the heading stand out. Ensure that the font Outfit is available or included in your project to maintain consistency across different devices.
-
The p { text-align: center; font-size: 15px; font-family: Outfit; font-weight: 400; color: gray; } style centers paragraph text and uses a smaller font size of 15px, which is quite readable but may be small for users with visual impairments. A font size of at least 16px is generally recommended for better accessibility. The use of a lighter font weight (400) and gray color ensures that the text is less prominent, which is good for secondary content.
-
The img { text-align: center; margin-top: 5%; border-radius: 15px; width: 300px; height: 300px; } rule applies a fixed width and height to images, ensuring they are displayed as squares with rounded corners. The margin-top: 5%; adds spacing from the top, but fixed dimensions can limit responsiveness. For better scalability, consider using percentage-based dimensions or max-width for images to ensure they adjust well to various screen sizes.
Hope you found this comment helpful 💗💗💗
Good job and keep going 😁😊😉
0 -
Please log in to post a comment
Log in with GitHubJoin 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