Frontend Mentor - Stats preview card component solution
Design comparison
Solution retrospective
Any Feedback is really appreciated. Also how can i make the image color ?
Community feedback
- @darryncodesPosted almost 3 years ago
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 helpful1 - @judithasitiolPosted almost 3 years ago
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 helpful1 - @Batareika007Posted almost 3 years ago
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 helpful1
Please log in to post a comment
Log in with GitHubJoin 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