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 Solution

aabc24 220

@aabc24

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


Please tell me how to improve my code...

Community feedback

P
gfunk77 1,200

@gfunk77

Posted

This is great. Congratulations on your solution. I would suggest a few very minor points:

  • You have body: {margin: 0} , you can add margin and padding to your reset:
*, ::after, ::before {
margin: 0;
padding: 0;
box-sizing: border-box
}

You card has a fixed width and height. While it's not an issue at all in this case, consider not using fixed values because they will immediately remove responsiveness. Again, not a big deal here but something to think about.

I don't see the hover states. You can create an overlay on the image for that.

Great job. I loved your solution!

Marked as helpful

1

aabc24 220

@aabc24

Posted

I didn't look at the active states. Thank you, @gfunk77

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