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

Responsive NFT Preview Card Component

@jasnoludek

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


EDIT:

Added anchor tags for the interactive elements. Removed media query for desktop version and added max-width to card container. Found solution to improve box-shadows.

-I'm finding the box shadows behind the preview card to be a huge challenge. I can't figure out how to change their border radii to be different than the border radius of the card. Also, the lighter and wider box shadow extends beyond the top of the card in the design. I haven't figured out how to do that yet. -In devtools, at 375px it looks fine, but on my actual phone, which is large, the 0.041 ETH and the 3 days left elements are breaking into 2 rows -Overall, I know there must be a lot of things that can be done better. I appreciate all feedback.

Community feedback

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