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 component using CSS flexbox

Shreyas Waykar• 20

@username-copied

Preview site(opens in new window)View code(opens in new window)
Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

NFT preview card component
  • HTML
  • CSS
1newbie
View challenge

Design comparison

SolutionDesign

Community feedback

Rio Cantre• 9,690

@RioCantre

Posted

Hello there! Good job in completing this challenge. Looking at your solution, I would suggest the following for you...

  • Import the attribution style in the CSS file and remove style tag
  • Clean the whistespaces in the code
  • Add the hover state of the design. For the hero image, you can use this as an example Overlay in image. For the fonts, add color: var(--cyan); in .nft__name:hover and .white:hover rule set
  • Remove margin-left: 2.5rem; in .nft__price and .nft__time rule set.
  • Add margin: 0 2.5rem; and padding: 1.5rem 0; in the .nft__details rule set

Hope this helps and Keep it up!

Marked as helpful

0
Shreyas Waykar• 20

@username-copied

Posted

@RioCantre thanks man. Appreciates you.

1

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