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

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

@notFaceroll

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


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

P

@Pillin

Posted

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

@notFaceroll

Posted

@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
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