Skip to content
Submitted over 1 year ago

NFT Preview Card using HTML & CSS

Johan Jubin•90
@Johan-Jubin
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Pls bear with the messy CSS, I got a doubt:

  1. How do you vertically position the card without causing scrolling, like I played with all kinds of values with height, but no change (Eventually I resorted to just copy pasting a code I found on yt, which I have no idea how it worked)

If u are kind enough, pls review through my code. Thanks for your feedback!

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Daniel 🛸•44,810
    @danielmrz-dev

    Hello @Johan-Jubin!

    Your project looks great!

    About your question:

    • When you add height: 100vh; to the body, it means that all the content inside of will ocuppy the full height of the screen (100% of the viewport height - vh). If your content height is not higher that the screen, there won't be a scrollbar. So what you did is right.

    I have one more thing to say:

    • Since the image is a clickable element, it's a good practice to add cursor: pointer to it.

    Other than that, my friend, you did an excelent job!

    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