Stats preview using HTML & CSS

👾Hello 101Amine, Congratulations on completing this challenge!

You’ve done really good work here putting everything together, I’ve some suggestions to improve the design:

Add the correct size for the container max-width: 1110px to dont have it growing more than it should:

main {
    max-width: 1110px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-inline: 150px;
    background-color: var(--clr-primary-500);
}

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%. See the code below:

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

✌️ I hope this helps you and happy coding!

I've actually struggled hard how to get image to look like that, with the purple layout.

I would love if someone knows how to do it with css, I've tried mix-blend-mode : multiply but it just made it almost completely invisible.

Thanks for that challenge it was pretty interesting, see you in the next one!