StatsPreviewCardComponent

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

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

  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.

  There is no need to the .card-component rather give .left-content a padding value for all the sides for a responsive content

  For the color of the image, give .right-content a background-color of soft violet and the img a width and height of 100%, object-fit: cover, mix-blend-mode: multiply and opacity 0.8.

  .right-content{
  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

  1

  ---

  

  Nirmal Roy•70

  @nirmalroyalrichPosted over 1 year ago

  Thank you @Hassiai I was a bit confused about the blending-mode. I will fix it and update it.

  0
• 

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  Nice work there!

  About the color effect on the images, there is an easy way actually that will get you closer result to the design as well:

  • Wrap the image into a container div instead. (You've already did with section-right)
  • Then just give that container of the img a background color like hsl(277, 64%, 61%),
  • then apply this css rules to the img: mix-blend-mode: multiply; opacity: .75;
  • finally add display:block to the img to get rid of little space below it.

  Hope you find my feedback helpful!

  1