Skip to content
Submitted over 2 years ago

NFT Preview Card

Adriel Murray•90
@AdrielMurray
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

Learned how to use box shadows and the hover selector. Any advice for cleaner code? What can I improve next time?

Community feedback

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

    👾Hello Adriel, congratulations for your solution!

    About your code, you can do only a little fix, changing between <div> to <main> wrapping all the content there, the rest you've used only the necessary elements. For the next challenges you can think about using more semantic block elements as <main> <section> and <article>.

    Note that you nft image is overlapping the container, try to work this image applying the property display: block; and max-width: 100%; to keep the image inside the container and growing 100% of its size.

    Hope it helps you, and happy coding!

    Marked as helpful
    0
  • Prince Roy•1,210
    @iprinceroyyPosted over 2 years ago

    That's great @AdrielMurray. You need to focus on some key points here:-

    1. There should be one heading tag on a web page, if there is no heading element requirement, then set its font size to 0. h1{ font-size: 0; }
    2. The content should be wrapped inside the main landmark to avoid accessibility issues. Like this <body><main>your content goes here......</main></body>.
    3. Set the equilibrium image's width & height to 100%. Some margins around the left & right.
    4. Set nft-card & nft-image width: 100% .nft-card{ width: 100%; overflow: hidden; } .nft-image{ width: 100%; }

    Hope it adds to your learning. Happy coding :)

    Marked as helpful
    0
    Adriel Murray•90
    @AdrielMurrayPosted over 2 years ago

    @iprinceroyy thanks for the advice

    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