Stats preview card component

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

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 💪🏻