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-component html/css

@mohammed-sarhad-ahmed

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


Greetings, everyone! I'm excited to share my solution for the NFT-component challenge. It took me approximately three hours to complete. I incorporated a significant number of utility-first classes, similar to Tailwind CSS, which greatly enhanced the code's cleanliness and scalability.

One of the more challenging aspects was determining the active state, as this was my initial encounter with the background property. Consequently, it required the three-hour time frame to ensure accuracy. However, I consider this experience a valuable learning opportunity, and I'm open to revisiting this project in the future to further refine the code.

Community feedback

Hana Chong 170

@hana-chong

Posted

Hi Mohammad! Your solution looks great. I would just suggest increasing the border-radius on the edges of the container and image. It also seems like there's supposed to be a shadow behind the main container in the goal design. These should be straightforward fixes, and other than that your code is very readable and organized! I like how you've labeled the different sections in your CSS. Good job!!!

Marked as helpful

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