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 component

@reya3183

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Here I face a little bit of a problem, I can not make exact overlay color on like given design. If you can make it, please share it with me. Happy Coding :)

Community feedback

Anna Leigh 5,135

@brasspetals

Posted

Hi, Jannatun Naher Reya! 👋

The image coloring was tricky on this one! For your solution, you actually don't need to use a ::before element. I did this when I was trying to figure out the coloring too.😄

Delete your ::before element and set the background-color of the .image-container to the purple accent color. Then set mix-blend-mode: multiply on .image-container img. Adding an opacity to your .image-container img, somewhere around 0.8, should complete the look!

You might also want to change the font-family on your h1 to match the design. 👍

Hope this helps - and happy coding!

1

@reya3183

Posted

@brasspetals wow!! it works so nicely and perfectly match. I like it. Thank you so much. Have a good day! Happy coding :)

1

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