Design comparison
Solution retrospective
Thank you for any feedback
Community feedback
- @beowulf1958Posted 4 months ago
Congratulations on completing this challenge. It looks great and is responsive. Your project is also well organized with the folder structure. I do have a few suggestions.
First, the font is all wrong; it displays in the Chrome browser with a default serif font, but the design calls for a sans-serif called "Figtree". I notice that your project hosts the font locally in the "assets" folder, but there is no reference to it in the CSS. You need to call the font with an @font-face after the root in the CSS. Try this:
@font-face { font-family: Figtree; src: url(../fonts/Figtree-VariableFont_wght.ttf); font-weight: normal; font-style: normal; } @font-face { font-family: Figtree; src:url(../fonts/Figtree-VariableFont_wght.ttf); font-weight: bold; font-style: normal; }
Then you add the font-family to the body:
font-family: Figtree;
Also, the design calls for the h1 to change text color when you hover over it.
.text h1:hover { color: rgb(241, 198, 118); }
Lastly, the "container" needs a dark box-shadow. If you google "box-shadow examples" there is a website with box-shadows you can copy. Hope this helps! And keep on coding.
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