Skip to content
Submitted about 2 years ago

NFT preview card component

NixyMc•190
@Nix7amcm
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Edit: I've updated my solution based on the recommendations in the feedback, and the reports. While doing this I tinkered with accessibility in general, and definitely learned a lot more in the process! I'm open to more feedback on this, whether things could be improved further, or if I've done anything wrong, particularly in the way I've added and hidden the h1 element.

The method I used to add the hover effect with the svg on the NFT logo image didn't allow the svg opacity to be 1, as it is tied to the background and therefore the opacity of that. I'd appreciate any feedback on this!

Thanks! 😃

Code

Please log in to post a comment

Log in

Community feedback

  • Abdul Khaliq 🚀•72,380
    @0xabdulkhaliq

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have other recommendations regarding your code that I believe will be of great interest to you.

    COMPONENT MEASUREMENTS 📐:

    • The min-width: 100vw property from body element and width: 100% property from main is not necessary. because they both are block level elements which will take the full width of the page by default.
    • So feel free to remove the above mentioned rules, this will help you to write efficient code and makes your code more reusable.

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
  • Mako•360
    @MakoDoli

    Great job! and I would suggest few details to make it even greater:

    1. You can freely remove <a> anchor tag from 'logo-container' and use just {cursor: pointer} property for images.
    2. There is that little stubborn horizontal scroll at the bottom. I suggest to remove {min-width: 100vw} from 'body' styling. It will make scroll disappear and body will still remain of full width. I hope you find this helpful^^ Good luck!
    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