Skip to content
Submitted over 3 years ago

NFT Preview Card Component - Without Wireframes

P
Arthur•290
@ArthurPog
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

My second HTML & CSS project. I did it without wireframes. I also cheated a bit... I have no idea how to centre the SVGs next to the "ETH" and "time left". So I just moved it up 3px.

Much love!

Code

Please log in to post a comment

Log in

Community feedback

  • Kamasah-Dickson•5,570
    @Kamasah-Dickson

    Your solution look really good but on mobile the upper card snaps, it is not scrollable, I can't see the top of it. I think you should use min height instead of just height and add a margin top to it to fix it. Besides Good job there👍 Happy coding👍

    Marked as helpful
  • akhademik•420
    @akhademik

    for the center the whole thing 1 make body min-height: 100vh, display flex, justify-content center and align item center 2 the same applied to icon and ETH. wrap them around a div and center those element by flex center like i mention above.

    Good luck and happy coding.

    Marked as helpful

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