Stats Preview Component using HTML and CSS

Community feedback

• 

  バレンタイン 😈•64,190

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • Best practice ✅, before moving on to the next challenge, always check your FEM report, to see what is incorrect and update your code with it so that you would not make the same mistake over again. This something that should be done right after submitting your challenge.

  • This challenges requires the use of two images 🎑 at different breakpoints. ⚠️ The picture element will facilitate this.

  Here is an example of how it works: EXAMPLE

  Syntax:

    <picture>
      <source media="(min-width: )" srcset="">
      <img src="" alt="">
    </picture>
  

  More Info: 📚

  https://www.w3schools.com/html/html_images_picture.asp

  • The “image” in this component are purely decorative. ⚠️ Their alt tag should be left blank and have an aria-hidden=“true” to hide them from assistive technology.

  More Info: 📚

  [MDN Aria-Hidden] (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden#description)

  • The statistics at the bottom are a list ⚠️, so it should be built using an unordered List element.

  More Info: 📚

  MDN <ul>: The Unordered List element

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 🎆🎊🪅

  Marked as helpful

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  wrap <div class="attribution"> in the footer tag, to fix the accessibility issue.

  To center the main on the page using flexbox, add min-height: 100vh to the body. And there is no need for flex-wrap.

  Increase the padding value for .card-section e.g padding: 4rem and give it a text align left.

  For the color of the image, wrap the img in a div and give it a class. <div class= "card_image"><img></div>, give the class a background-color of soft violet. and mix-blend-mode: multiply and opacity 0.8 to the img.

  .card-image{
  background-color: hsl();
  }
  img{
  max-width: 100%;
  mix-blend-mode: multiply;
  opacity: 0.8;
  }
  

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1