Design comparison
Community feedback
- @weslei573Posted 4 months ago
Uma coisa que falta e só voçê dominar mais o CSS que ira melhora seu codigo
0 - @patriciarrsPosted 4 months ago
Greetings, Mutsah! 👋
Good effort on this challenge! 👍 The layout looks good on a range of screen sizes 🙂
I want to suggest taking another look at using semantic HTML on your site as it will also improve accessibility. Currently, you are using
div
tags to wrap other elements, but other tags (for example,main
andfooter
) are more suitable.If you’d like to learn more about how to use semantic HTML on your site, check out this course from web.dev.
The solution has differences from the design. The two most noticeable are the font family and the card height.
- To correctly import the specified font family, add the following to the
head
tag:
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Outfit&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@700&display=swap" rel="stylesheet">
To get the above, you can go to the link you have in your
head
tag and then click "Get font" -> "Get embed code".- To fix the card height you can add the
height
property to the card element to match the design.
Edit: A better practice than adding a fixed
height
to the card, is to have the correct spacing between elements by using themargin
andpadding
properties as needed. To check the spacing between elements, in the Figma files select an element, pressAlt
, and hover another element.I hope you find this helpful.
Happy coding!
0@mue864Posted 4 months ago@patriciarrs Hi, Patricia, thank you for the valuable feedback, I was having troubles in using the font and thanks for pointing that out.
1 - To correctly import the specified font family, add the following to the
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