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

@caretaker03

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

P
visualdennis 8,375

@visualdenniss

Posted

Hey there Emil,

nice work with the stats preview challenge. Looks also responsive. It seems like you have not implemented the color filter, but you can do that easily with:

  • giving a background color to the .right (container of the img) background: hsl(277, 63%, 61%);

  • then to the img simply give these: mix-blend-mode: multiply; opacity: .75;

hope you find this feedback helpful!

Marked as helpful

1

@benjaminbilgehan

Posted

@visualdenniss I just wanted to give a try and make the life easier for @caretaker03 Emil

Thanks man! I learnt a nice tip from you. @visualdenniss

img {
    width: 100%;
    height: 100%;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    mix-blend-mode: multiply;  /*Added this*/
    opacity: .75; /*Added this*/
    
}

and

.right {
    width: 50%;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
    background: hsl(277, 63%, 61%); /*Added this*/
}

Marked as helpful

1
P
visualdennis 8,375

@visualdenniss

Posted

@benjaminbilgehan Happy to hear it was useful for you! Yes, the code you have share is correctly shows how it can be used.

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