Skip to content
Submitted over 2 years ago

NFT Product pagee

Crispy-Tofu•60
@Crispy-Tofu
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I needed some help with the active state: making sure that the eye and the overlay would show up. Otherwise it felt like pretty smooth sailing

Code

Please log in to post a comment

Log in

Community feedback

  • P
    visualdennis•8,375
    @visualdenniss

    Hey there,

    Nice work. By default images are display: inline, like text, therefore you need to have it display: block; to get rid of the little space below that (if you look carefully, overlay and image don't match at the very bottom)

    I recommend using a CSS Reset like this at the beginning of each project, so you dont face such issues: Here is great one: https://www.joshwcomeau.com/css/custom-css-reset/

    BONUS TIP: Add a transition like transition: all .4s ease; to .card__image-cover for a smooth change in opacity.

    Hope you find this feedback helpful!

  • Ecem Gokdogan•9,380
    @ecemgo

    Some recommendations regarding your code that could be of interest to you.

    Your accessibility report states that images must have alternate text. So, in order to fix the accessibility issues, your <img> tag should include "alt" = attribute.

    Hope I am 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