
Design comparison
SolutionDesign
Community feedback
- @ExtendoGHPosted about 2 months ago
Hi,
Here are my comments on your work:
Design
- Background color: The current background color is incorrect. You should use the color
#D5E1EF
as specified in the design. - Box alignment: The box is centered horizontally but should also be centered vertically.
- Font family: The project requires the Outfit font family. Additionally, font sizes, parameters such as
line-height
andletter-spacing
, and font colors differ significantly from the design specifications. - Image margin: The margin around the image is too large. It should be
16px
according to the design.
Code
- CSS organization: I recommend moving all CSS code to a separate file for easier style management and better code readability.
- Attribution section: This section should be removed as it is not part of the project design.
- Use of rem units: I suggest using rem units instead of px to make the project more responsive and easier to adjust across different devices. Here’s a useful article on the topic: Link to article. To simplify calculations, you can set
font-size: 62.5%
on thehtml
element, making1rem
equal to10px
. - Global reset: It’s a good idea to include a global style reset at the start of your CSS, for example:
* { margin: 0; padding: 0; box-sizing: border-box; }
0 - Background color: The current background color is incorrect. You should use the color
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