Responsive stats preview component

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  For the color of the image, Give the aside a background-color of soft violet and add mix-blend-mode: multiply; and opacity of 0.8 to the img. There is no need to give the aside position relative.

  aside{
  background-color: hsl()
  }
  img{
  width: 100%;
  height:100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  opacity: 0.8;
  }
  

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0

  ---

  

  Aayush Kumar•110

  @AK-CHP1Posted almost 2 years ago

  Thanks @Hassiai, that worked.

  1

  

  Startec Pik•30

  @areeb-codePosted almost 2 years ago

  @Hassiai Thanks

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

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

  • 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

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

  • ⚠️For this challenge, there should only be one source inside the picture element.

  • The aside is being used incorrectly ❌ and not needed for this challenge.

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

  Happy Coding! 🎆🎊🪅

  0