Skip to content
Submitted over 1 year ago

NFT preview card component

NixyMc•190
@Nix7amcm
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

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! 😃

Community feedback

  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted over 1 year ago

    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
    1
    NixyMc•190
    @Nix7amcmPosted over 1 year ago

    Thank you! @0xAbdulKhalid

    0
  • Mako•360
    @MakoDoliPosted over 1 year ago

    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
    1
    NixyMc•190
    @Nix7amcmPosted over 1 year ago

    Thank you! @MakoDoli

    1

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