Skip to content
Submitted over 3 years ago

stats preview card. HTML and CSS grids

Jenna•125
@jamby4546
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

I have no idea how to get the color of the image to be exactly like the design. I overlayed the image at opacity 0.7 to a background of the given color, but it was too light colored so I ended up sampling the design color and trial and error with opacity and brightness until it got as close as I could. Im sure there is a better way, I just couldnt figure it out

Community feedback

  • Manuel Rangel•310
    @manueldavid95Posted over 3 years ago

    Hello :D

    0
  • Anna Leigh•5,135
    @brasspetalsPosted over 3 years ago

    Hi, Jenna! 👋

    For the image coloring, I suggest trying out mix-blend-mode. I believe you should be able to achieve the look with a combo of mix-blend-mode and opacity.

    0

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