Skip to content
Submitted almost 2 years ago

Solution_NFT_preview_card_component

mbedon•80
@mbedon
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

I found difficult the part of the eye and the transparency of the background, I knew that the solution was using opacity, but didn't realize that was creating another div (after a lot of research I finally got it). I used a lot of classes and I don't feel like it was necessary, how I could make it more compact?

Community feedback

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

    Hello Mbedon, You have done a good work! 😁

    Some little tips to improve your code:

    • add main tag and wrap the card for improve the Accessibility
    • also you can use article tag instead of a simple div to the container card for improve the Accessibility
    • remove all margin from 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 on the element with hover effect
    • instead of using px use relative units of measurement like rem -> read here

    Keep learning how to code with your amazing solutions to challenges.

    Hope this help 😉 and Happy coding!

    Marked as helpful
    0
    mbedon•80
    @mbedonPosted almost 2 years ago

    @denielden Thank you, your tips were very helpful.

    1
    Travolgi 🍕•31,400
    @denieldenPosted almost 2 years ago

    @mbedon you are welcome and keep it up :)

    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