3-column-card-component - HTML & CSS

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @irudhirn 👋🏻

  I have some quick tips to help you fix the accessibility and some other issues

  • In your markup, <div class="card-container">...</div> should be <main class="card-container">...</main>. So this will fix the accessibility issues. Don't forget to generate a new repot once you fix the issues.
  • Next, the car icons, should have aria-hidden="true”, because they are for decoration. Like the following: <img src="images/icon-luxury.svg" aria-hidden="true"> You can read more about aria-hidden here.
  • And now let's fix the position of the card, and here's the code for that:

  body {
      font-size: 1.5rem;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  

  • One last thing, I suggest adding transition: all 0.2s; to the button and the links, this will make :hover smoother.

  I hope this was helpful 👨🏻‍💻 all in all, you did an excellent job, especially on responsiveness. Cheers 👾

  Marked as helpful

  1