Skip to content
Submitted about 3 years ago

"Stat preview card" solution, with desktop-first using CSS grid/flex

Jorge Miguel•410
@notFaceroll
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 didn't know how to apply a mask-layer properly to change the color of the image and ended up making an empty container for a background image to use the linear-gradient property.

Community feedback

  • Pillippa Ignacia Pérez Pons•460
    @PillinPosted about 3 years ago

    Hiii!!, you can try to use mix-blend-mode, there is an example here: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_mix-blend-mode-all. the one that comes closest to it is the multiply =). Also, It isn't similar to the color, but it is closest.

    Marked as helpful
    1
    Jorge Miguel•410
    @notFacerollPosted about 3 years ago

    @Pillin Wow, this is actually great! I didn't knew about blend-modes. Thank you so much for this feedback! :)

    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