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
socket hang up
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT preview Card

Amir 90

@L0rdix

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


Finally managed to finish this project aswell. Would love to hear some feedback on my aproach to this. And if anyone knows how to fix the overlay would be very helpful. Thanks in advance.

Community feedback

Rio Cantre 9,710

@RioCantre

Posted

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

  • In the .image img ruleset, remove the margin and adjust the width into 100%
  • In the .overlay ruleset, make the width into width: 100%; and height into height: 90%;. Add top: 0;
  • Remove padding: 0 1rem 0 1rem; in the .data and .infos rulesets
  • Adjust the padding into padding: 1rem 0; in the .author ruleset
  • Adjust the padding into padding: 1rem; and margin into margin: 0 1.5rem; in .sec_container ruleset

Other than that...

  • The HTML structure is well organized and readable
  • Proper usage of semantic tags
  • The project is responsive and utilized the details based on the original design
  • The CSS file is well structured and proper usage of properties

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

Marked as helpful

1

Amir 90

@L0rdix

Posted

@RioCantre Thanks for the feedback, will work on fixing those things. Have a great day! And i wish you the best.

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