Skip to content
Submitted 20 days ago

Stats Preview Card

pstar8•260
@pstar8
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm proud this project didn't take too long to finish.

What challenges did you encounter, and how did you overcome them?

One major challenge I encountered was how to cast a purple shadow on the image.

What specific areas of your project would you like help with?

Any suggestions on how I can improve are highly welcome.

Community feedback

  • Adriano•38,060
    @AdrianoEscarabotePosted 20 days ago

    Hey pstar8, how’s it going? I was really impressed with your project’s result, though I have some advice that could be helpful:

    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%;
}

    Everything else looks great.

    Hope this helps! 👍

    1
    pstar8•260
    @pstar8Posted 18 days ago

    Hey Adriano, it's going rough, but I'm pushing.

    Thanks for your comments on my solutions. They helped a great deal. I realized this was the solution code after one sleepless night😅.

    Thanks once again.

    1

Please log in to post a comment

Log in with GitHub

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