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

@Krishna4563

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 tried multiple times to add the purple filter using the filter property, but it does'nt change. Any inputs would be appreciated.

Community feedback

@0xabdulkhaliq

Posted

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

CSS 🎨:

  • "I tried multiple times to add the purple filter using the filter property, but it does'nt change.", Let me share my css snippet which may help you to tackle this problem
  • Just add these following css rules
picture {
background: #792BE2;
}

.image {
mix-blend-mode: multiply;
opacity: .75
}
  • Now your component's header image is well blended and mixed with the primary background color as same as the design image they provided.

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Marked as helpful

0

@Krishna4563

Posted

@0xAbdulKhalid Thank You for your valuable feedback. Now it is working !

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