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

#tailwind-css

@Haybuka

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

@Haybuka

Posted

Oh thanks for the feedback.. normally I pay attention to these points you've made while coding (and I also use Chrome light house for audit),but for this project my focus was mainly on the use of tailwindcss, so I allowed myself that liberty. ... Thank you,really appreciate that you took the time.

0
Travolgi 🍕 31,460

@denielden

Posted

Hi Haybuka, I took some time to look at your solution and you did a great job!

Also I have some tips for improving your code:

  • add descriptive text in the alt attribute of the image
  • remove all margin from .main-section class
  • try to use flexbox to the body for center the card. Read here -> best flex guide
  • after add min-heigth: 100vh to body because Flexbox aligns to the size of the parent container
  • try to add a little transition on the element with hover effect

Overall you did well :)

Hope this help and happy coding!

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