Skip to content
Submitted over 3 years ago

Stats preview card component

Jannatun Naher Reya•265
@reya3183
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

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
    @brasspetalsPosted over 3 years ago

    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
    Jannatun Naher Reya•265
    @reya3183Posted over 3 years ago

    @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

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