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

"Get interesting insights using this page and grow"

@Baqtiyar

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


This is my message to everyone I have completed the challenge but I was not able to add the accent color to the image so please help me in this and check the overall code and suggest to me something I have done wrong or did in the wrong way Thank-you

Community feedback

Nakoya Wilson 1,530

@nakoyawilson

Posted

You can try using the mix-blend-mode css property to add the accent color to the image using the following steps:

  1. Change the background color of the containing div from blanchedalmond to the accent color:
    .mid3 {
      ...
      background-color: hsl(277, 64%, 61%);
      ...
    }
    
    
  2. Use mix-blend-mode and opacity for the image itself:
    .img {
      ...
      mix-blend-mode: multiply;
      opacity: 0.75; 
    }
    

Marked as helpful

0

@Baqtiyar

Posted

@nakoyawilson Thank-you so much for the reply and I have used the CSS property that you have mentioned and I found it to be very helpful you can't imagine how many CSS properties I have tried to achieve that, so thankyou very much.

0
Nakoya Wilson 1,530

@nakoyawilson

Posted

@Baqtiyar You're welcome! Glad I could be helpful.

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