Skip to content
Submitted over 3 years ago

NFT Card Solution using flexbox

itcss, foundation
Pav•0
@itspavit
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

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 :)

Code

Please log in to post a comment

Log in

Community feedback

  • Travolgi 🍕•31,300
    @denielden

    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
  • William Jesus Rivas Duran•230
    @wiridix

    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
  • Web Wizard•5,690
    @rsrclab

    Hello, @itspavit ~

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

    Cheers ~

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