Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Stats Preview Card using CSS Flex

@ywsoliman

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Cooger 270

@Cooger17

Posted

Hi! Great solution on this challenge

Here an advice who helped me to deal with image from @correlucas

To get closer to overlay effect on the photo as the Figma Design its better you use mix-blend-mode. All you need is the <div> under the image with this background-color: hsl(277, 64%, 61%); and apply mix-blend-mode: multiply and opacity: 80% on the <img> or <picture> selector to activate the overlay blending the image with the color of the div. See the code bellow:

img { mix-blend-mode: multiply; opacity: 80%; }

Hope it will help you!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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