Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Stats Preview Card - SCSS, Grid, CSS Animations

Anna Leighβ€’ 5,135

@brasspetals

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


What was originally a break from a larger project turned into a fun animation experiment! I spent an ungodly amount of time messing around with cubic-bezier curves. πŸ˜… Hopefully they don’t mess up the screenshot.🀞 (Edit: Yep, they did. But only a little! 😁) The statistics are only animated on the desktop layout, as I felt it was a bit too much on mobile.

First time implementing prefers-reduced-motion to prevent animations for those who prefer it reduced. It seems to work when I test it, but please let me know if there’s any goofiness.

Also first time using mix-blend-mode, which seemed to work well in combo with opacity to get close (I hope) to the header image design.

Shoutout to @ApplePieGiraffe for inspiring me to play around more with animations.

As always, any and all feedback is greatly appreciated!

Community feedback

P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

Hey, Anna! πŸ‘‹

Amazing job on this challenge! πŸ‘ I really like the text-fill-color-effect-thingy (πŸ˜…) in the heading and those staggered fade-in animations on the statistics! πŸ˜‰ Everything else is point (as expected)! πŸ™Œ (And thanks for the shoutout, BTW. 😊)

Keep coding (and happy coding, too)! 😁

1

Anna Leighβ€’ 5,135

@brasspetals

Posted

@ApplePieGiraffe Thanks - and credit where credit is due! Your "Autumn is Here" animations were so fun and ~smooth~, I knew I had to try my hand at some of them. πŸ˜„ Using the "-nth child" selector for the staggered animations was really useful, as in previous projects I'd only used a JS loop.

1
P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

@brasspetals

Oh, that's cool (I didn't know you saw that)! 😊 And credit where credit is due: I didn't actually come up with that design and interaction themselvesβ€”I saw a preview of a powerpoint presentation template that I liked and decided to steal it and create it with HTML and CSS instead. 😎 (But it was a fun little exercise.) πŸ˜… And yeah, nth-child is pretty awesome (especially since you can get pretty crazy with the combinations of items that you can select with it)!

1
P
Graceβ€’ 27,590

@grace-snow

Posted

This looks really good, well done πŸ‘

1

P
Graceβ€’ 27,590

@grace-snow

Posted

I don't think you need the paragraphs inside the lis by the way, but they're doing no harm so I wouldn't change them ☺

1
Anna Leighβ€’ 5,135

@brasspetals

Posted

@grace-snow Thank you very much! 😊 I was actually unsure if I should even use an unordered list in this case, or just go for plain, old divs instead. I think I kept the paragraph tags because I hadn't originally used a ul.

For the lis, since the styling is different for the number and label, what would be best to use here?

Thanks for bringing this up as I'd totally forgotten about it once I started working on the animations.

0
P
Graceβ€’ 27,590

@grace-snow

Posted

@brasspetals I would use an unordered list with spans inside (one span wrapping either the number or word) , or 3 paragraphs with a span in the same way. The number and word are designed to be read together so it makes sense to keep them in the same meaningful element I think

1
Anna Leighβ€’ 5,135

@brasspetals

Posted

@grace-snow You're absolutely right that the number and word should be in the same element. Removing the paragraph tags, applying the number styles to the li, and wrapping the word in a span sounds like way to go. Probably save me some lines of code too! πŸ‘

Thanks again, Grace! I love getting into the "nitty gritty" or "nitpicky" (no negative connotation meant) stuff like this. The devil is always in the details. πŸ˜„

0
P
Graceβ€’ 27,590

@grace-snow

Posted

@brasspetals exactly ☺

Tiny details are what drive standards up and really make you stand out to employers

0
Rayaneβ€’ 1,935

@RayaneBengaoui

Posted

Hello Anna,

Your solution looks so great ! πŸ™‚

I really like the effect on the <span> !

I didn't know about prefers-reduced-motion, thank you for sharing this ! πŸ˜ƒ

1

Anna Leighβ€’ 5,135

@brasspetals

Posted

@RayaneBengaoui Thank you for the kind feedback, and you're welcome - happy to share my learning! 😊

1
Nir Tamirβ€’ 45

@nirtamir2

Posted

Awsome! Nice use of the picture element for and srcset attribute. I like that you use opacity + mix-blend-mode: multiply; on the image and color the picture container for the image coloring. It looks great and the animations are great!

1

Anna Leighβ€’ 5,135

@brasspetals

Posted

@nirtamir2 Thank you so much for the kind feedback. 😊 I wish I had known about picture elements when I first started coding - they're so 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