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

HTML using CSS Grid

deenka 70

@nomatter-py

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Zeena 175

@kushyzee

Posted

You should fix the background image and have it resembling the original design.

  • You can do that by either nesting another div in the <div class="right-section"></div> and giving it a background color of #a95dda. There after you can reduce the opacity to around 0.5 or lower. (Consider changing the hex color to rgba)

  • you can also use background-blend-mode: multiply; in the <div class="right-section"></div> to fix the color

After this you can remove the -webkit-filter property

You did a really good job overall 👍

Marked as helpful

0

deenka 70

@nomatter-py

Posted

@kushyzee Thanks a lot for your advice. I just started my way at learning frontend and I require them. I wasted hours trying to find solution with background image colour. But it turns out to be so simple - "background-blend-mode: multiply;"

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