NFT Preview Card Component

Hey Paul, congratulations on completing the challenge! You did a great job 😉

Let me give you some little tips for optimizing your code:

• set background: hsl(217, 54%, 11%) to body
• add main tag and wrap the card for improve the Accessibility
• use img element for the image and not styled div
• to make it look as close to the design as possible add width: 20rem to .main-wrapper class and remove all padding
• You can add the effect :hover creating a div that appears on hover. I used tailwind but you can still see and understand which css properties you can use to do the same. Look here -> my solution
• use p tag instead of h4 for the text of card
• using <hr> for the line is not the best way because this tag have a semantic meaning... in this case use div with border-bottom because this line is decorative
• use flexbox to the body to center the card. Read here -> best flex guide
• after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
• instead of using px or % use relative units of measurement like rem -> read here

Hope this help! Happy coding 😁