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 solution

Padawanā€¢ 160

@soitirakis

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


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

@Samadeen

Posted

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

@soitirakis

Posted

@Samadeen Thank you, it worked,

0

@RyukioMiyamoto

Posted

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

@soitirakis

Posted

@RyukioMiyamoto wow, magic. 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