Skip to content
Submitted over 2 years ago

Responsive nft preview card, using flex-box

Adriano•38,120
@AdrianoEscarabote
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 really enjoyed doing this project.

The only part that I had a little difficulty was when I had to hover the image, it was a new thing so it was my first contact, I researched a little about it and managed to come up with a solution.

Feel free to give some feedback.

Community feedback

  • Lucas 👾•104,400
    @correlucasPosted over 2 years ago

    Fala Adriano Pereira, parabéns pela solução!

    You did great and your solutions is quite accurate in comparison to the design files.

    There's 2 things that you can consider to change in the card:

    1. The box shadow is slightly different from the design you can use a value close to box-shadow: 5px 5px 15px 5px rgb(0 0 0 / 3%);

    2. Avoid to use width when you expect that your element behave like a flexible one, for example in your card you set the width: 350px that is a fixed value that will not grow or stretch, but if instead of that you use max-width: 350px this means that under 350px this element will stretch and become smaller.

    I hope it helps you!

    Marked as helpful
    2

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