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

Galex coderβ€’ 190

@mhmd-aboudalla

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

Lucas πŸ‘Ύβ€’ 104,420

@correlucas

Posted

πŸ‘ΎHello Galex, congratulations for your new solution!

You've a great solution here, the design is perfect!

I saw that you've used position absolute and a pseudo-element to create the purple overlay effect on the image, the code to do it is a bit long, my suggestion for your is to use mix-blend-mode and reach the same effect using two lines of code.

To add the exact same purple overlay effect for the image, matching the design files you've to use mix-blend-mode. See the code below

img 
{
mix-blend-mode: multiply;
opacity: 70%;}

πŸ‘‹ I hope this helps you and happy coding!

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