![](https://res.cloudinary.com/dz209s6jk/image/upload/f_auto,q_auto,w_900/Screenshots/camtvh6m0xfavjey3fnb.jpg)
3-Column Preview Card - SCSS, Grid, CSS Animations (Desktop)
Design comparison
Solution retrospective
More animation practice! 😄 Hopefully the screenshot will be ok this time, as the animation is a bit faster than the stats card solution. The animations are only for the "desktop" layout. I think a similar but vertical, "slide down" animation for mobile would be lost on most users due to the smaller screen height and would also be too much movement for a small screen. Let me know what you think!
prefers-reduced-motion
was used to prevent the animations from occuring for those who prefer motion reduced. I also added aria labels to the card links to make them a bit more descriptive, but I'm unsure if this is actually helpful for screenreaders or comes off as redundant. Still learning! 😅
Community feedback
Please log in to post a comment
Log in with GitHubJoin 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