Stats preview card component

This is a very nice solution. I have a few points to add:

1)When styling the card container, i think you should always give it a height to prevent it from just spilling out of the screen. 2) For the purple image overlay:

• Place an empty div in the HTML file, just below the image you want it to overlay.
• Then go to the CSS part and style the empty div giving it a color, width(same as the picture you want it to overlay), height(same as the picture you want it to overlay) and set it's position to absolute.

Here is a link to my solution for better understanding: https://github.com/Azikenp/Stats_preview_card.git

👾Hello @WadieBenabdouh, congratulations on your solution!

Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

If you want to 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%, also add to the div containing the background-color: hsl(277, 64%, 61%);` to blend the image + bg color. See the code below:

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

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!