Skip to content
Submitted over 2 years ago

NFT card solution

Padawanā€¢160
@soitirakis
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

Hello everyone. I tried to do this challenge as best as possible. I have a problem with the hover effect over the nft image. I do not know why the hover is bigger than the imagine. Imagine is 327331, but the hover is 327333. Why? :) If anyone can check the code quality, what can be improved? Can you check the correctness of the CSS file? T here is any recommended structure or order to write from top to bottom the CSS ? Any other feedback is highly appreciated. Thank you

Community feedback

  • Abdulā€¢8,540
    @SamadeenPosted over 2 years ago

    Hey!! Cheers šŸ„‚ on completing this challenge.. .

    Here are my suggestions..

    • You should use <main class="card"> instead of <div class="card">.
    • You should remove all inline styling and use your stylesheet for that

    This should fix most of your accessibility issues and HTML issues

    . Regardless you did amazing... hope you find this useful... Happy coding!!!

    Marked as helpful
    0
    Padawanā€¢160
    @soitirakisPosted over 2 years ago

    @Samadeen Thank you, it worked,

    0
  • Roberto Yukio Miyamoto Aritaā€¢320
    @RyukioMiyamotoPosted over 2 years ago

    Hey Andrei, good job! To fix the hover overflowing, set the img to display: block to get rid of the whitespace.

    Marked as helpful
    0
    Padawanā€¢160
    @soitirakisPosted over 2 years ago

    @RyukioMiyamoto wow, magic. Thank you

    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