Skip to content
Submitted over 2 years ago

NFT preview card component

Chloe•20
@chloeafp
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello! Here's my solution for the NFT preview card component. I learned how to make a transition on an image and practice the display property. I also used media queries that I recently discovered.

Let me know what you think: feedback is always welcomed! :)

Community feedback

  • Travolgi 🍕•31,400
    @denieldenPosted over 2 years ago

    Hi Chloe, great work on this challenge! 😉

    Here are a few tips for improve your code:

    • use main tag for wrap the card and improve the Accessibility and not for wrap the inside content of card
    • using <hr> for the line is not the best way because this tag have a semantic meaning... in this case use div with border-bottom because this line is decorative
    • remove all margin from container-card class
    • use flexbox to the body to center the card. Read here -> best flex guide
    • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
    • add transition also on the text with hover effect

    Overall you did well 😁 Hope this help!

    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