Frontend Mentor - Stats preview card component solution

Hi Prajwol,

Nice work on this one, well done!

You should add display: block; to @media (min-width: 1024px) .imgContainer > img to get rid of the little gap appearing at the bottom.

As an alternative option to the overlay approach you could try adding a solid linear-gradient to a background image: background-image: linear-gradient(hsl(277, 64%, 61%), hsl(277, 64%, 61%) ), url(../your/image-filepath); to help you match the image colour.

You would also need to explore background-blend-mode (multiply usually does the trick)

All the best!

Hey ! Nice work on the challenge :) I'm trying to figure out how to colour the image too.. Noticed your font was different.

@font-face { font-family: Inter; src: url("Inter/Inter-VariableFont_slnt,wght.ttf"); }

Hope this helps !

Hi @Prajwol-Shrestha, you can try to use filter for your image tag filter: invert(10%) sepia(80%) saturate(400%) hue-rotate(250deg) brightness(100%) contrast(100%); - it's not perfect but you can play whit it to get perfect result.

or you make background image to imgContainer and add css background-blend-mode: multiply.

hope it will help