Stats Preview Card with HTML and CSS

Solution retrospective
Couldnt quite get the color for the overlay down correctly, irked me good lol. I decided to use a table for the Stats section, is that ok? Or would it be best practice to use another method.? Thanks for your time and input as always
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Sdann26
Hi Brian I'll help you with the color.
It's not too complicated you just need to use mix-blend-mode, which is a CSS attribute that mixes an element with the background color of its parent.
Then you will give your image the following styles:
.hero-img { max-width: 100%; max-height: 85vh; opacity: 0.75; border-radius: 0 0.5rem 0.5rem 0.5rem 0; mix-blend-mode: multiply; }
And then to the parent box the following styles:
#container-hero { background: var(--soft-violet); border-radius: 0 0.5rem 0.5rem 0.5rem 0; }
And that would be all, as you will see it is a little difficult to realize and has a special use case but every day you learn something new, which by the way I can only help you so far, even your design lacks the responsive for mobile view, you can do it with media queries, but try it.
That would be all, I hope I helped you, good luck :D!
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