Design comparison
Community feedback
- @beowulf1958Posted 4 months ago
Congratulations on completing this challenge. Project looks great.
I do have a few suggestions, if you are interested. There is a lot of repletion in the code. One of the principles of good practice is called DRY (don't repeat yourself.) Grouping all the styles into a single class makes for clean, readable code that is easy to maintain.
You have several elements with
color: #ffffff;
. Instead of reaping the text color on each element, move the text color to the ".container" class, and the child elements will inherit the color from the parent. This is the power of the cascade in "Cascading Style Sheets."Each button has two classes (and a hover state.) This is redundant; move the background to the ".button" class, and add a style for button hover state. Try this:
.button:hover { background-color: #90d332; color: #141414; }
(the font color is supposed to change to dark gray in the design.) Also, I noticed that you used 'Ariel' instead of "Inter". You can add a Google font to you website using @import :
@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');
Hope this helps.
Marked as helpful0
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