Frontend Mentor - Stats Preview Card Component Solution

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size

Links

• Solution URL: https://www.frontendmentor.io/solutions/stats-preview-card-scss-grid-css-animations-7SCHf2p0a
• Live Site URL: https://fm-stats-preview-card-component.vercel.app/

My process

What started out as a break from a larger project turned into a fun animation experiment! I'll admit I spent an ungodly amount of time messing around with cubic-bezier curves. 😅 The statistics are only animated on the desktop layout, as it felt like a bit too much on mobile.

Built with

• Mobile-first workflow
• SCSS
• CSS Grid
• CSS Keyframe Animations

What I learned

First time implementing:

• mix-blend-mode in combo with opacity to match the header image design
• prefers-reduced-motion to prevent the animations from playing for those who prefer reduced motion

Useful resources

• Cubic Bezier Generator
• CSS-Tricks: 4 Ways to Animate the Color of a Text Link on Hover - reference for the accent text animation
• A Modern CSS Reset

Acknowledgments

Shoutout to ApplePieGiraffe's "Autumn is Here" project for inspiring me to play around with animations on this challenge.