Stats Preview Card Component - TailwindCSS
Design comparison
Community feedback
- @correlucasPosted over 2 years ago
๐พHello Florent, congratulations for your solution!
You solution component seems great, you need only to fix 3 issues related to the design:
1.The correct setup for the overlay effect to match the color is using low
opacity
andmix-blend-mode
. In this case you've to add to the<picture>
this code:picture {mix-blend-mode: multiply; opacity: .7'
2.The border is too rounded, try to use a value around
border-radius: 12px;
for the card and the image.3.Use
display: block;
andmax-width: 100%;
for the image, currently the image isn't scaling with the correct proportions, if you've set a fixedheight
you should delete it in order to let the image scale properly.Hope it helps and happy coding!
Marked as helpful0
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