Skip to content
Submitted almost 3 years ago

Four card feature section

Darhniel•200
@Darhniel
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Getting the right positioning for the desktop screen was the real work in this challenge. Questions:

  1. Hope it was responsive enough for any device you viewed it on?
  2. I used percentages for the positioning and a lot of position absolute. Is there a better way to do this?

Community feedback

  • Aakash Verma•6,710
    @skyv26Posted almost 3 years ago

    Hi! Darnhiel,

    To solve accessibility issues:

    1. wrap everything in your body in <main> OR give role="" to the direct children of your <body> ... Click here to read more here

    2. Don't let alt attribute empty, always add some meaning text in it, so that user able to understand.

    <img src="icon-supervisor.svg">
<img src="icon-team-builder.svg">
<img src="icon-karma.svg">
<img src="icon-calculator.svg">

    Add update above with below:

    <img src="icon-supervisor.svg" alt="**ADD MEANINGFULL TEXT HERE**" />
<img src="icon-team-builder.svg" alt="**ADD MEANINGFULL TEXT HERE**" />
<img src="icon-karma.svg" alt="**ADD MEANINGFULL TEXT HERE**" />
<img src="icon-calculator.svg" alt="**ADD MEANINGFULL TEXT HERE**" />

    Good Luck ;)

    0

Please log in to post a comment

Log in with GitHub

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