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 Card

@PaulGabriel

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,690

@RioCantre

Posted

Hello there! Good job in completing this challenge. Regarding your solution, I would like you to notice the following…

  • Instead of div, alternatively wrap the whole content with semantic tags, for HTML structures, refer it with this one Semantics. Like this line <div class="outer"> can be wrap with main tag, this <div class="title">Equilibrium #3429</div> with a tag since it has a hover state.
  • Import the attribution style in CSS file and remove the style tag
  • Instead of using root variables, create a new file for variables and use the Sass syntax in naming the properties like from --soft-blue: hsl(215,51%,70%); into $soft-blue: hsl(215,51%,70%);

In the brighter side...

  • Well done with the hover state of the design, specially the overlay of the hero image
  • Great job in utilizing Sass for styling this project. The compositions are looking great
  • The HTML file is clean and readable
  • The project is responsive and utilized the details according to the original design
  • Proper alignment and sizing elements

Above all, the project is done well. Keep up the good work! Cheers!

Marked as helpful

1

@PaulGabriel

Posted

@RioCantre Thank you a lot 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