stats preview card component main

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  Replace <div class="container"> with the main tag to fix the accessibility issues. click here for more on web-accessibility and semantic html

  Give the alt attribute in the img a value. The value of the alt attribute is the description of the image. For decorative images like icons, there is no need to give it an alt value, for more on alt attribute Click here.

  Give .container a max-width 0f 1440px and a width of 80% or a width of 80vw.

  For the color of the image, give . image a background-color of soft violet and give the img a height of 100%, mix-blend-mode: multiply and opacity: 0.8 to the img.

  .image{
  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
• 

  Abdulqudus Sanusi•500

  @qudus2019Posted over 1 year ago

  Congratulations on your solution, Sofiane

  Just few suggestions:

  1. Increase the width of your container
  2. Increase the container text padding
  3. Use mix-blend-mode: multiply to blend the image color

  Marked as helpful

  0