Skip to content
Submitted about 4 years ago

Stats preview card component

Jannatun Naher Reya•265
@reya3183
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

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 :)

Code

Please log in to post a comment

Log in

Community feedback

  • Anna Leigh•5,135
    @brasspetals

    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!

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