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

Report

0

Accessibility Issues

0

HTML Issues

View Report

Ludivine A’s questions for the community

Feel free to tell me what I could improve !

Community Feedback

P
LiBee 40

@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

P

@Remus432

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

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!