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 preview card component solution

@Lachouri

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


Feel free to tell me what I could improve !

Community feedback

P

@Miculino

Posted

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

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

Hope this helps. Keep up the good work!

Marked as helpful

0
LiBee 390

@Li-Bee

Posted

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

0

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