Skip to content
Submitted about 2 years ago

Stats Preview Card Component solution

Agnar•220
@agnar-nomad
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

This was a neat project to practice layout and responsive design, flex properties.

I would appreciate a little help with the images because I was not able to produce that exact same purple colour cover over them.

Second, I did a little experiment with font sizes, to make them responsive. It's not great, but it helps me set myself on a path to build better and think differently.

Community feedback

  • Abhijit Shankhdhar•320
    @im-abhijitPosted about 2 years ago

    hi @agnar-nomad , congrats on completing this challenge

    to achieve same purple color over image use it like this

    .image-div::after { content: ""; position: absolute; inset: 0; background-color: hsl(277, 64%, 61%); mix-blend-mode: multiply; opacity: 0.8; border-radius: 1rem 1rem 0 0; }

    mix-blend-mode: multiply will help in better blending with the background

    Marked as helpful
    1
    Agnar•220
    @agnar-nomadPosted about 2 years ago

    @im-abhijit hello,

    It indeed made it much better. Thank you friend!

    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