stats preview card with mobile first approach and css flexbox

👾Hi Oishik Biswas, congrats on completing this challenge!

I've just opened your live site and I can say that you did a great job putting everything together! There's some tips to improve your solution:

Instead of using this code:

.card-image::after {
    content: "";
    inset: 0;
    position: absolute;
    background-color: rgba(157, 0, 255, 0.4);
    z-index: -1;
    border-radius: 0.9rem 0.9rem 0 0;
}

You can add the same effect of the design for the image overlaying it with purple there's a shortcut that is by using mix-blend-mode with the mode multiply and with an opacity around opacity: 82%. See the code below:

img {
mix-blend-mode: multiply;
opacity: 82%;}

✌️ I hope this helps you and happy coding!

Hello, Oishik Biswas! 👋

Before diving into the image overlay, I recommend using picture element for the image instead of using a background image. This way, there's no need to specify any height for an image.

After that, use mix-blend-mode property and reduce the amount of the opacity of the image to 0.75 to make the overlay. This way, you can remove the pseudo-element. As a result, the image will look exact same as the design and with less code.

If you want to see the end result of this approach, you can take a look at the @DarrickFauvel's solution for this challenge.

That's it! I hope this helps! 🙂