Skip to content
Submitted about 2 months ago

NFT Preview Card Component HTML, CSS, BEM CSS methodology

bem
Bill Casadei•30
@bcasadei
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

Kept it simple, tried to stick to bem methodology is CSS class names.

What challenges did you encounter, and how did you overcome them?

CSS got a little verbose.

What specific areas of your project would you like help with?

Had a small issue with the overlay on the image slightly expanding beyond the image size.

Code

Please log in to post a comment

Log in

Community feedback

  • AymaneOnline•390
    @AymaneOnline

    Good job! Some points where you can improve:

    • Update to font to "Outfit" specified in the style-guide.md in the challenge file.
    • Wrap the card image inside an anchor tag <a> with an href linking to the image URL.
    • I think it would be better to set the min-height of the <body> tag to 100svh instead of 100% because it is best on mobile and doesn't need html { height: 100%; } because 100% sets the minimum height to 100% of the height of the parent element.

    Good luck!

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