Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT Card

Simon• 20

@simonhja

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


How can i get rid of the extra space at the bottom of the image when hovering?

Community feedback

Naveen Gumaste• 10,480

@NaveenGumaste

Posted

Hay ! Good Job Simon

-> Adjust the box-shadow a bit

These below mentioned tricks will help you remove any Accessibility Issues

-> Add Main tag after body like it should be your container

-> For 1st heading or h1 tag, use header tag and then inside the header put your h1 or h2 etc

-> But use header tag only once in main heading element.

Keep up the good work!

Marked as helpful

1
Rio Cantre• 9,710

@RioCantre

Posted

Hello there! Nice work with this one. Viewing your solution, I would suggest the following for you...

  • Adjust the height in .image__container:hover .image__icon into 99%
  • Wrap the card with specific tag like main for readability

Hope this helps and Keep up the good work!

Marked as helpful

1

Simon• 20

@simonhja

Posted

@RioCantre thank you!

1
Adarsh• 1,560

@adram3l3ch

Posted

U can get rid of the space by

img{
   display:block
}

Marked as helpful

1

Simon• 20

@simonhja

Posted

@adram3l3ch wow that was easy, thank you!

1

Please log in to post a comment

Log in with GitHub
Discord logo

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