Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

four-card-feature-section-master

Allan 80

@hhhallan

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Ken 935

@kenreibman

Posted

Desktop and mobile layouts look great! I don't know if it was intentional but around 1150px the layout of the individual cards become a little strange.

To fix some accessibility issues you have, I would make your <div class="container" to <main class="container"

Heading tags should also be in chronological order (h1, h2, h3, etc) and you are missing an h2 in your document. I suggest you change the h3 into a p or find other text to turn into an h2.

Since the icon images are decoration, I would put:

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

This is for screen readers, which should be taken into account for best practice. You can read more about aria-hidden here

Don't forget to generate a new report !

I hope this helps, keep it up!

Marked as helpful

1

Allan 80

@hhhallan

Posted

@lmaoken Thank you for your help ! I'm gonna fix this later !

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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