NFT preview card component solution


Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
View Challenge

Design Comparison




Accessibility Issues


HTML Issues

View Report

Ludivine A’s questions for the community

Feel free to tell me what I could improve !

Community Feedback

LiBee 40



Really close to the design file. Very good!

I think you need to check your font-family for the "Creation of Jules Wyvern" and make the numbers slightly smaller - but those are all little points. Also make the border around your avatar a bit thinner it is hiding the picture of the person.

Marked as helpful





Hey @Lachouri

Good job on completing this challenge. You've done a really nice job on it and it looks very similar to the original design and all the hover effects work as expected.

Just a few suggestions based on your final solution:

  • Reduce and soften the card's shadow; it's a bit too much

  • Tweak the grey border. Make it more subtle

  • Try to use fixed widths / heights sparingly and instead focus on building layouts that adapt to the content available

  • Apply the basic font size for the entire page using the body or html selector

  • You can use min-height: 100vh on the body element. It's a better practice

Hope this helps. Keep up the good work!

Marked as helpful


Give some feedback to @Lachouri about their solution...

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!