Skip to content
Submitted over 4 years ago

3-Column Preview Card - SCSS, Grid, CSS Animations (Desktop)

Anna Leigh•5,135
@brasspetals
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

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! 😅

Code

Please log in to post a comment

Log in

Community feedback

  • Rayane•1,935
    @RayaneBengaoui

    Hello Anna,

    Once again you came with a nice idea on animations 🙂

    I really like the use of cubic bezier as a timing function to get this "coming back" effect at the end of the animation 😍

    Just on your SASS part, instead of using @import with SASS, it's recommended to use @use because the first one is now deprecated.

    You can find more information on the SASS official documentation (https://sass-lang.com/documentation/at-rules/import) where it's well explained. Also here is a great video of Kevin Powell that shows how to use it (https://www.youtube.com/watch?v=CR-a8upNjJ0).

    Happy coding ! 😃

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hello, Anna! 👋

    It's nice to see you submit another challenge already! 😊 I was actually thinking about that same sort of animation for this challenge (but I guess I'll have to go brainstorming for something else when I come around to this one, LOL)! 😅 Of course—nice job! 👏 Everything's looking good and the animation's great! 😀

    And keep coding (and happy coding, too)! 😁

  • tediko•6,700
    @tediko

    Hello, Anna! 👋

    Well done! Perfect animation, subtle but it brings some life to a project. I am big fan of animations and like to work with them, sometimes i know that I am exaggerating with them but at the end of the day its all just for fun ;) The only thing that i noticed in your project is outline for your button focus. Now outline-width is set to default 1px and it doesn't look good. I would consider to remove it since you change border/background while button is focused or change it to 2px instead.

    Good luck with that, have fun coding! 💪

  • Yuri da Paz Simonin•15
    @yuridapaz

    Great. I love it

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