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 Sass

#sass/scss

@efecollins

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


Yes, the part where you hover on the img-equilibrium for a cover and a img-view to display was so difficult. Help, please?.

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…

  • To understand more about the hero image hover state, refer it with this example Overlay in Image (If this is still applicable)
  • This line <div class=" attribution"> can be wrap with footer tag or placed it inside the main tag
  • Clean the whitespaces in the code
  • Adjust the margin in main #card ruleset into margin: 10rem auto; and remove the margin placed on the media query
  • Add cursor: pointer for the hover state of the design
  • Increase the font size of h1 into font-size: 22px;

In the brighter side...

  • Well done with the hover state of the design, specially the hero image
  • The project is responsive and utilized the details based on the original design
  • Great job in using Sass for styling, the compositions are well organized
  • The HTML structure is well organized and readable

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

1

@efecollins

Posted

@RioCantre Thank you very much, Rio Cantre. I really appreciate it, your comment just lifted my spirit. I'll do well to make the changes you've advised me to. Thanks once again.

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