Submitted over 3 years ago

Stats Preview Card | SCSS & Flexbox | Simple animation

Kris Pietrzak• 340

@krisp-dev

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Stats preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

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!

Community feedback

Anna Leigh• 5,135

@brasspetals

Posted over 3 years ago

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.

Kris Pietrzak• 340

@krisp-dev

Posted over 3 years ago

@brasspetals Thanks for the feedback! I spent more time than I should on the image coloring but it was worth it in the end to make it look as close to the original design as possible.

This was my 4th 'Newbie' challenge and felt like it was getting a bit 'stale' so decided to play around with some really simple animations trying to make it a bit more cool. Was fun to play around with the animations timing and delay to find the perfect combination of sequential animations.

Please log in to post a comment

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