Stats preview card

Solution retrospective
Hi! In this exercise, I have struggled to do the pink overlay in the picture. I have tried in different ways, none of them worked.
I also struggled to have both sections (columns) with the same width.
I also don't know how to shrink the three columns with stats, a bit more narrow and contained.
If you have any suggestions, I will be happy to know them.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @UDsGitHub
A quick tip for the overlay, is to just use a
filter
style on the image and tint the color with the purple hue. Good luck 👍Marked as helpful - @Nick331102
This is the easiest way I have found for the overlay, but there are other ways try using an inset box shadow box-shadow: inset 0 0 0 1000px rgba(109, 54, 199, 0.596); you can adjust the color.
you can utilize media queries to make your card more responsive, so I would research them.
if you want the columns to be the same width you can display: grid on the container and set grid-template-columns: repeat(2, 1fr)
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