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

@saifion33

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Rio Cantre 9,690

@RioCantre

Posted

Hello there! Great work with this one. Regarding the solution you submitted, I think you should also take notes of the following…

  • Change the background color of the hover state into background-color: var(--eth-font-color); in #view-img-container rule set and adjust the opacity with 0.8
  • Add border: 1px solid white; and border-radius: 50%; in the .creater-container img rule set
  • Instead of div, alternatively wrap the whole content with main tag . Use semantic tags, for HTML structures, refer it with this one Semantics
  • Wrap this line <div class="main-container"> with main tag and footer tag with this line <div class="attribution">
  • Alternative is to use a tag for the font links.
  • Instead of using hr tag, alternative is to add border top on the creater-container rule set

Above all, The design looks good. Keep it up!

Marked as helpful

0

@saifion33

Posted

@RioCantre Hi Rio. Thanks for your feedback i'll try to make better my solution

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