Skip to content
Submitted over 3 years ago

3 Column Card Component Using CSS Flexbox, Custom CSS & Animate.css.

Skyz Walker•1,045
@Skyz03
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

It was quite fun to do this challenge as flexbox made it easy to accomplish the responsiveness. Added Animate.css on images for bit of style. Any feedback to take it to the next level is highly appreciated. Thanks in advance for this great community 👍.

Community feedback

  • tediko•6,680
    @tedikoPosted over 3 years ago

    Hello, Sky! 👋

    Congrats on finishing another challenge! I will not keep up with writing feedback if you keep posting this solutions like crazy 😅. Your solution looks very good and also responds well. I really like the slide in animations on your icons 🤩 Here's my few tips:

    • Not sure if I suggested it to you but read about semantic. Semantic elements lead to more consistent code, they are easier to read and improve accessibility.
    • I like that your solution is responsive across different screen sizes but I'd suggest you to add max-width: 580px; to your .container-flex so it doesn't stretch too much. Additionaly you have to add margin: 0 auto; with this to align it center.

    Good luck with that, have fun coding! 💪

    1
    Skyz Walker•1,045
    @Skyz03Posted over 3 years ago

    @tediko Thanks a lot ... Will surely read more on semantic HTML. Really got your second point as once width is added we need that margin: 0 auto to align and I will update that. Thanks again ... Your feedback really motivates to do more and level up. 👍

    1

Please log in to post a comment

Log in with GitHub

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