Stats-Preview-Card-Component HTML+CSS

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  For the color of the image , wrap the picture tag in a figure tag. <figure><picture><img></picture></figure>

  in the css give the figure tag a background-color of soft violet , give the img a width a height of 100%, object-fit: cover, mix-blend-mode: multiply and opacity of 0.8.

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

  Use relative units like rem or em as unit for the padding, margin, width values instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1

  ---

  

  Dellenar•160

  @dellenarPosted over 1 year ago

  Hey thank you for the feedback. I tried your advice and it worked awesome i totally forget about the mix-blend-mode method. @Hassiai

  Also for the units i'll develop a habit to use em & rem for the padding ad margins rather than pixel.

  Thank you so much for your time.

  1