Mobile first using flexbox

Hey @SJ-74 👋🏻

I have some suggestions for the project.

• For the icons, add aria-hidden="true”, because they are for decoration. You can read more about aria-hidden here. For example:

<img src="images/icon-supervisor.svg" alt="" aria-hidden="true”>

And in general in alt tags avoid using words like logo, illustration, etc. They become redundant for the user who uses a screen reader.

• Nice touch on :hover effects, but I suggest adding transition: all 0.2s; to the button and the links, this will make :hover smoother.
• Lastly, I suggest increasing the header font-size from 1.5rem to 2.5rem.

I hope this was helpful 👨🏻‍💻 all in all, you did a great job, and there's no proper way to do it. As long as you write a maintainable code, everything can be the proper way here. Cheers 👾

The problem is that you've got a "midcard" container, even on mobile display !

Grid are not that difficult, have a look :

#first-card {
  grid-area: first-card;
}

#second-card {
  grid-area: second-card;
}

#third-card {
  grid-area: third-card;
}

#fourth-card {
  grid-area: fourth-card;
}

...and then, the magic happen !

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-areas:
               ". second-card ."
      "first-card second-card fourth-card"
      "first-card third-card fourth-card"
               ". third-card .";
  }

You can custom your own grids on Layoutit.