Design comparison
Community feedback
- @Islandstone89Posted 2 months ago
HTML:
-
Every webpage needs a
<main>
that wraps all of the content, except for<header>
andfooter>
. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Wrap the card in a<main>
. -
Remove
<picture>
, it is used when we want the browser to choose between different alternatives of an image, depending on the screen size. A simple<img>
is all you need in this project. -
Wrap the footer text in a
<p>
.
CSS:
-
Including a CSS Reset at the top is good practice.
-
I recommend adding
1rem
ofpadding
on thebody
, to ensure the card doesn't touch the edges on small screens. -
"Outfit" is a sans-serif font, so change
font-family: "Outfit", serif
tofont-family: "Outfit", sans-serif
. -
Remove the margin on the card.
-
On
body
, changejustify-content: space-between
tojustify-content: center
, and addalign-items: center
, so the card gets centered vertically. Also, add agap
of around2rem
to create space between the main and the footer. -
max-width
on the card should be in rem. Around20rem
will work fine. -
Remember that all font sizes must be in rem.
-
Paragraphs have a default value of
font-weight: 400
, so there is no need to declare it. -
Since all of the text should be centered, you only need to set
text-align: center
on the body, and remove it elsewhere. The children will inherit the value. -
It's common to set
display: block
on images. You wouldn't need to set it toinline
, as that is the default value.
Marked as helpful1@marupovdostonPosted 2 months ago@Islandstone89 Men tushundim. Keyingi safar fikringizni inobatga olaman
0 -
- @vaibhu252frontendPosted 2 months ago
code is well structure
Marked as helpful0@marupovdostonPosted 2 months ago@vaibhu252frontend мне приятно услышать твой комментарий
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