@thomashertog
Posted
This is already looking very good, as well visually like the design given as in the code.
Some small improvements you could make however (in no particular order)
- outside of a main element you don't use semantic elements (you could argue that the introduction at the top of the page is a
<header>
- it feels very weird to have a title at the top that is not a heading (and then the titles of the cards being
<h2>
), so I'd fix this by making your.introduction
into a<header>
with an<h2>
for the.introduction-slogan
and a<p>
for the.introduction-description
- the icons in the cards are added as background-images requiring you to write all sorts of positioning logic in the background position as well as need to accomodate extra padding in the HTML. I feel (but this is my personal opinion and don't know if it's necessarily better) this would be better if they were in the HTML (though hidden for assistive tech because they're clearly decorative and don't add any meaning).
- working with
grid-template-rows: repeat(4, 1fr)
feels a bit squishy since now all your rows will have the same height. That would be bad if one of the cards contained longer content, you might be able to "fix" it withmin-height
on the cards - for a small project like this, it's less relevant, though you might improve on maintainability and/or readability in CSS by working with custom properties (especially for all the colors)
- you could also have a
border-top
property on.card
switching only theborder-top-color
on every card itself for better reusability (only need to changeborder-width
in 1 place) - the design feels a bit weird around the breakpoint, personally (though i don't know if I did it in my own attempt) I'd add another breakpoint for a 2-column layout
Overall, this is already a very nice attempt, keep going and improving
Marked as helpful
@Rock-n-Roll-CRC
Posted
@thomashertog Thank you for your feedback, I appreciate it! π₯