Frontend Mentor - Stats preview card component solution

Solution retrospective
Any Feedback is really appreciated. Also how can i make the image color ?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @darryncodes
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!
Marked as helpful - @judithasitiol
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 !
Marked as helpful - @Batareika007
Hi @Prajwol-Shrestha, you can try to use
filter
for your image tagfilter: 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 cssbackground-blend-mode: multiply
.hope it will help
Marked as helpful
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord