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

Preview Card using Flexbox/Vanilla CSS

@fadhlanKhalid

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


How do you get the correct blend mode? Also what's the best practice to set the background image size?

Community feedback

Anar 700

@anar-sol

Posted

Hello! For the picture, I used a background with color and image, then, I used "background-blend-mode: multiply" to specify how to blend the image with the color of the background. Here's the link to the two CSS lines to achieve it: https://github.com/anar-sol/stats-preview-card-component/blob/d0c18aaa1cd1ec712b032fdba1156affec788e57/scss/style.scss#L69

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