Skip to content
Submitted almost 3 years ago

3 Column Cards Challenge

iana-8•60
@iana-8
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

Community feedback

  • Jérémy•1,020
    @jrmydixPosted almost 3 years ago

    Hi! Well done!

    If this can help, I have some suggestions:

    • Fix accessibility issues: to do so, add <main> after <body> and close it before your <footer>.
    • Fix card size changing on button hover: change border: none; to border: 2px solid var(--Very-light-gray);

    If you have any questions feel free to ask, I'll try my best to help and answer! 🙂

    Marked as helpful
    0
  • optimusprime202•1,200
    @optimusprime202Posted almost 3 years ago

    Hey @iana-8, Now you’ve figured it out.

    0
  • iana-8•60
    @iana-8Posted almost 3 years ago

    thank you guys for these feedbacks, i really appreciated i do my best to fix this.

    0
  • Travolgi 🍕•31,400
    @denieldenPosted almost 3 years ago

    Hi Iana, I took some time to look at your solution and you did a great job!

    Tip of graphic design: With font-family:" Big Shoulders Display ", cursive the browser will use the Comics Sans font when it doesn't find the first font indicated (you can seen during loading) ... for the designer it's a really awful font!

    • I would rather replace it with a font-family:" Big Shoulders Display ", sans-serif much more similar to the primary font.

    Overall you did well :)

    Hope this help and happy coding!

    0

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