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

Stats preview card component solution using SASS and CSS Grid

@guztrillo

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 couldn't figure out how to match the image overlay color , so I did my best.

Edit: Thanks to Moises in the comments, I fixed the image overlay color using the property mix-blend-mode, which I didn't know until this.

To achieve this I changed the HTML code a little using srcset, because I was using background-image with media queries to change the image.

Community feedback

Moises 60

@devmoises

Posted

Hello @Carlos Guzman, good job!, to apply the image overlay color you can do it by adding the color to a pseudo-element of the parent of the image ".content_img: before {background-color: hsl (277, 64%, 61%)}" and to the image to apply " .img {mix-blend-mode: multiply;} ". Don't forget that the pseudo-element has more properties to make it work like: content = "", position = "absolute", etc.

0

@guztrillo

Posted

@devmoises Hey Moises, thanks for your advice. I didn't know that property, I will try it.

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