Stats Preview Card

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

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

  • The article and header are not needed ❌ in this challenge.

  • 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)

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

  Syntax:

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

  More Info: 📚

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

  • To get the image to look like the FEM example ✅, you are going to want to use the mix-blend-mode along with the multiply value and include a opacity with the value of 0.8 to the image. Lastly, the image’s container must have the background color of hsl(277, 64%, 61%).

  Code:

  img {
    opacity: 0.8;
    mix-blend-mode: multiply;
  }
  
  
  img-container {
    background : hsl(277, 64%, 61%);
  }
  

  • The only heading ⚠️ in this component is the “Get insights that help your business grow” everything else will be wrapped in a paragraph element.

  • 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

  0

  ---

  

  Lucas Santos•70

  @FromlukDevPosted almost 2 years ago

  @vcarames

  Hi, Thanks for taking the time to help me! The <article> is because I like to treat the challenge's components as if they were part of a real web site.

  aria-hidden="true" to "hide" the image I've heard before, but thought it could be optional in this challenge.

  I found the images to be pretty much the same size so I decided to stick with only one.. but I see what you mean now comparing to the layout.

  The mix-blend-mode: multiply; . I didn't know about. I wish you were here heheh.. I struggled with that one. tks :)

  The <h2> instead of the <ul> for some reason I missed.. you right it makes more sense!

  Thanks again! Happy Coding!

  1

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @FromlukDev

  Glad I could help! 😁

  • Sorry I should have been more clear. They are being used incorrectly ❌. In order to use the article element the component needs to be able to make sense on its own and be independently distributable (can be used in on another site).

  This component cannot stand on its own. There’s no sign up button, no company logo, it’s not an add, etc… it needs a full site to make proper sense.

  • This image is definitely decorative. It doesn’t enhance the text in any way.

  Marked as helpful

  0

  

  Lucas Santos•70

  @FromlukDevPosted almost 2 years ago

  @vcarames I got it now! thanks again :)

  0