Stats Preview Card Component

👾Hi Diaa Faris, congrats on completing this challenge!

I saw your solution preview site and I think it's already really good. Here’s some tips for you to improve it:

To make your hero image have the same look and the color purple overlay, you need to use mix-blend-mode using the multiply one.The mix-blend-mode CSS property sites how an element's content should blend with the content of the element's parent and the element's background.

Here’s how you can add this to your img selector: img { mix-blend-mode: multiply; opacity: 84%;}

Here's a good article explaining these effects with mix-blend-mode: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

✌️ I hope this helps you and happy coding!

Hi @diaaFaris,

Congrats on completing the challenge

I see what you mean, you can just stack the image and the content with a media query there's not enough space to fit both without making drastic changes. I would also just the following for desktop.

.container {
    max-width: 1024px;
}

and set the padding to 4rem all around on the main .content rule that way it looks closer to the design in terms of size and spacing.

Hope this is helpful.