Skip to content
Submitted over 4 years ago

Stats Preview Card | SCSS & Flexbox | Simple animation

Kris Pietrzak•340
@krisp-dev
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Added a few simple animations purely as part of practice, I know they may be impractical but adds just that little bit of interactivity to the design.

Had some trouble finding the perfect blend-mode & filter, let me know if you have found the 'perfect' mix for that image. I ended up using:

mix-blend-mode: multiply; filter: opacity(0.8);

And set the background color of the div to the 'Accent' color from the style-guide.md.

Let me know anything I could improve on!

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Anna Leigh•5,135
    @brasspetals

    Hi, Kris! 👋

    Good job on this one! 👍 Your method for the image coloring is what I did as well, although I think I just used regular opacity rather than filter opacity. Don't think it matters either way.

    The animations are a nice touch, and I hope you had fun playing around with them. I find these smaller challenges are a great place to experiment with them.

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