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 using HTML and CSS only

Mikhail 440

@MikeBeloborodov

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 am not sure about my approach to make the provided image having a purpleish tint. I used a div with a purple background with the picture on top and then lowered the opacity of the picture. Is this the best practice?

Community feedback

vintech05 370

@vintech05

Posted

Greetings Mikhail,

I, too, faced the same problem during the making of the purple tint. but I found one solution that makes it less stressful. Let me give you a heads-up.

using the mix-blend-mode property in CSS would greatly help you in finding its exact saturation and colors. also if you want to be more precise, you can use the filter property instead!

img {mix-blend-mode: overlay;}

filter

filter converter

mix and blend

I hope this helps!

Marked as helpful

1

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