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 card using pure SCSS/CSS

#bem#sass/scss
Esteban 150

@ehmenzala

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Rio Cantre 9,710

@RioCantre

Posted

Hello there! Great work with this one. Regarding the solution you submitted, I think you should know the following notes…

  • For best practice, wrap this line <article class="nft-card"> which is the starting point of the content with main tag. Refer it with this one Semantics
  • Make a separate ruleset for .nft-card__text and add color: var(--soft-blue); or view this line &__image-wrapper &__text in the Sass file if , is needed in between
  • Organized the HTML structure

Other than that...

  • The project is responsive and utilized the details based on the original design
  • Well done with the hover state of the design, specially the hero image
  • Great job in using Sass for styling, the composition is organized and proper usage of sizing elements
  • The alignment of details and elements are done accordingly

Above all, The project is awesome! Keep it up!

1

Esteban 150

@ehmenzala

Posted

@RioCantre Thank you so much for the feedback! 🖤

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