Stats preview card component

Community feedback

• 

  Hassia Issah•50,670

  @HassiaiPosted over 1 year ago

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

  <figure><img></figure>
  
  .figure{
  
  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

  0
• 

  Martina•150

  @PastoreMartinaPosted over 1 year ago

  Congratulations on completing the challenge!! 🎉

  You can use the <picture> HTML element to use different pictures with different screen sizes. More about it here.

  For the purple color, you can create a new div as image container and set its background to the violet accent, then set this for the image:

  img {
      mix-blend-mode: multiply;
      opacity: 0.75;    
  }
  

  You can read more about this property here.

  I hope you find this helpful!

  Above all, good job 💪🏻

  0