@DylandeBruijn
Posted
@matheusmirandaalmeida
Hiya! 👋
Congratulations on your solution, it looks very close to the design! I can tell you put a lot of effort into it.
Things I like about your solution 🎉
- Use of semantic HTML elements
- Use of CSS custom properties
- Use of grid
Things you could improve ✍️
-
I suggest adding a bit of
padding
to yourbody
element so the card has some space around it on smaller viewports. -
You could add a
min-height: 100vh
to yourbody
element so it takes up the full height of the viewport while still being able to grow when the content inside it grows. -
I suggest using clear descriptive CSS classes like
.card
,.card-title
and.card-description
. -
I suggest changing the code on your
html
andbody
elements to this:
body, html {
display: grid;
min-height: 100vh;
background-color: var(--OffBlack);
place-content: center;
}
I removed the width: 100vw
, because block
elements like html
and body
already take up the full width of their parent elements. place-content: center
is shorthand for align-content: center
and justify-content: center
.
-
Try making your card responsive without media queries.
-
I suggest wrapping your links in a list to make it more semantically meaningful.
I hope you find my feedback valuable, and I would appreciate it greatly if you could mark my comment as helpful if it was! 🌟
Let me know if you have more questions and I'll do my best to answer them. 🙋♂️
Happy coding! 😎
Marked as helpful