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

Project NFT Card

@nemoanderson

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


How do you make the avatar picture responsive?

Community feedback

@ahmedafsa

Posted

Hello @nemoanderson, well done!

Small suggestions to enhance the code further:

  • You're using vh unit for the card height which isn't the best practice; as due to the page's height the card's height gets defined and this can distort its design we want. so consider using pixels (px) or rems (rem). Alternatively it might be better not to set a specific height and let the content determine the appropriate height.

  • The image overlay in the hover effect extends beyond the image's dimensions. You can fix this by using either of:

.image-container {
    border-radius: 25px; /* Adjust based on the image border radius */
    overflow: hidden;
}

OR

.image-overlay {
    border-radius: 25px; /* Adjust based on the image border radius */
}
  • Bonus note: Use transition: all 0.3s on the elements with the hover effect to apply a wonderful transition effect

I hope these suggestions are helpful. Best wishes to you!

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