It's a real shame you've used flexbox for this layout when it is so clearly a css grid challenge. I recommend you try to refactor this using css grid to stretch the skills it is designed to stretch, using a simpler html structure where the 4 cards are 4 direct children of one grid template.
Other points to note:
- the main heading is one h1 split over 2 lines. Wrap half in a strong or span set to display block.
- try not to skip heading levels. Headings should always go in order to communicate the structure of the content correctly to assistive tech and bots. If the main heading is a h1, the cards should all have h2s.
- the cards don't need an extra wrapping div. Keep the html as simple as possible.
- for the top content give it a max width in rem so it scales correctly for all users no matter what their text size settings. This would be instead of setting an explicit width in px.
- get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
- if making the body into a flex container don't forget to set its direction to column.
- Font size must never be in px. This is really important! All of the font sizes look too small in this compared to the design too, as has already been mentioned.
- the cards should not have a width. Their width will be controlled by the grid template when you add it and be 1fr (the grid itself should have a max width in rem).
- do not add hover effects to non-interactive elements! That would imply interactivity but there is nothing interactive shown here. -'the icons should have margin left of auto not an explicit px value.
- mobile styles should be the default. You should then be adding a min-width media query defined in rem or em at the point where there is room for the layout to change. See https://fedmentor.dev/posts/responsive-meaning/ for more info.
0
