NFT preview card component

Hi Xhanti, good job! I took some time to look at your code and have some ideas for improving it:

• add main tag and wrap the card for improve the Accessibility
• remove all margin from container class because with flex they are superfluous
• use flexbox to the body for center the card
• after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
• add a little transition on the element with hover effect

Overall you did well 😉

Hope this help and happy coding!

Hi @Singatha good job,

I would recommend looking at the stack overflow question for that, actually, the question is regarding the color of it but you can use border property to help your situation.

If you would like you can have a look at my solution to know how I did it.

• Before submitting the solution you can use HTML validation and CSS validation to find any error in your HTML and CSS file.
• Read Accessibility on MDN to know the importance of it.
• The card is having some issue in making it centre, you can refer to my solution or check For div to extend full height

Enjoy coding...

Hello Xhanti Singatha, good job on the solution and great feedback above.

• Read about semantic. Semantic elements lead to more consistent code, they are easier to read and improve accessibility.
• And for making the <hr> thinner, use border-width: 1px 0 0; on the hr tag to make it thinner.

Good luck with that, have fun coding! 💪