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

@yunusemrecinar

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 again Yunus, congratulations for your new solution!

Your solution seems great, I can see the level of details you've applied here. Something you can improve is the container image color. To have your image purple with the same overlay effect, you need to use mix-blend-mode to make this color blend between the image and the background-color of the container. See the steps below to apply to the img or picture selector:

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

👋 I hope this helps you and happy coding!

Marked as helpful

1

@yunusemrecinar

Posted

@correlucas Ty so much. Yes I realized this and tried to solve hovewer whatever I tried It didn't work. I couldn't reach the container image color. Btw I tried the code you write and It didn't work.

1
Lucas 👾 104,420

@correlucas

Posted

@Yunuscinar41 This code should be add to the img selector with the image inserted in the html and having a purple div under it.

Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/stats-preview-card-vanilla-css-custom-design-text-animation-RfGBFlMpwK

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