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 challenge submission

@sachinkhatrilin

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

@krystonen

Posted

Hi Sachin, Nice job on the challenge!

As I was just doing this challenge myself, I can share some of my thoughts with you as it's still fresh:

  • Look at the report and try to fix the HTML and accessibility issues. These are such useful messages and will make your code better.
  • I see you applied the hover state at once on the image, title and author name. My question to you: what's the purpose of the hover state(s)? When should they change color? When you hover the image, or when you hover the individual elements (image, title, author).
  • I also struggled to have no opacity on the eye icon on hover state. You can check my code how I did it.
  • When you hover the state, the border-radius from the corners are gone.
  • I think the spacing is ok, but some padding may be missing from the bottom and maybe between the image and the title
  • Some distance the arrow icon and the 0.041ETH missing
  • Your separator line has different color ( I would personally avoid using hr for this purpose)
  • On mobile view the padding got smaller around the image

Cheers!

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