Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

stats-preview-card-component-main

Oluwatobi 160

@Oluwatobi9034

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


Hello everyone, I have just the frontend mentor stats-preview-card-component-main challenge, please you can suggest to me ways to improve my code. thanks.

Community feedback

@catherineisonline

Posted

It's not vital but I believe you are using the wrong font for your div with class sats, I guess you meant stats, it should be Lexend Deca.

Also, if you want to match the image color you can use mix-blend-mode: multiply; opacity: 0.75; for the image and hsl(277, 64%, 61%); for the cover color

Marked as helpful

1

Oluwatobi 160

@Oluwatobi9034

Posted

@catherineisonline, thanks you a lot for the feedback. I appreciate

0
Adriano 34,090

@AdrianoEscarabote

Posted

Hello Oluwatobi, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

To get closer to the photo overlay effect, you'd better use mix-blend-mode. All you need is the div under the image with this background color: hsl(277, 64%, 61%); and position mix-blend-mode: multiply and opacity: 80% on the image or apply image to activate the overlay by blending the image with the div's color. See the code below:

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

You can read this content which is explaining these effects with mix-blend-mode: click here

To improve the responsiveness of the project we can do this:

.wrapper {
    /* width: 90%;
}

The remainder is excellent.

I hope it's useful. 👍

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