Skip to content
Submitted almost 3 years ago

NFT Card Solution using flexbox

Pav•0
@itspavit
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

Please let me know about the mistakes i made so i can improve myself. I did not use a media query as i think it works well enough for both mobile and desktop as it is a single card.

I am still very new to CSS so all suggestions are appreciated. It was very difficult for me to make this it took me about 10 hours in total. The hardest part was to hide the eye icon behind the equilibrium image and add a hover overlay effect. I learned not to give up :)

Community feedback

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

    Hi Pav, great job! Congratulations on completing the challenge ;)

    Try to use flexbox for center the card:

    • remove all margin from mainpage class
    • use flexbox properties to the body. Read here -> flex guide
    • also set min-heigth of body to 100vh because Flexbox aligns to the size of the parent container.

    Overall you did well :)

    Hope this help and happy coding!

    Marked as helpful
    1
  • William Jesus Rivas Duran•230
    @wiridixPosted almost 3 years ago

    Hello! very good job, what I recommend is that the shadow is a little less. To the avatar place a white border and change the text color to the one that comes in the challenge (--soft-blue) and finally to the hover of the image place a transition. The rest is perfect! Keep it up 🙌

    Marked as helpful
    1
  • Web Wizard•5,690
    @rsrclabPosted almost 3 years ago

    Hello, @itspavit ~

    Really great! I couldn't find a thing to say ~

    Cheers ~

    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