NFT-preview-card-component

Hi @Himanshu-Vishwas,

Congratulations 🎉 for completing another challenge, your NFT card component looks great, and it is great that you used flex to center the card. I have some suggestions/issues I want to address, if you don't mind.

1. It is important to use the correct tags when wrapping your code as landmarks allow blind users, using a screen reader, to jump to sections of a web page. More about that here.
2. In the design provided, the 'Equilibrium #3429' and 'Jules Wyvern' texts should change color when hovered to a cyan color. I would recommend using an a tag for this.

Overall, great work and wish you the best for your future projects so keep coding 👍.

👾Hello Himanshu-Vishwas, Congratulations on completing this challenge!

You’ve done really good work here putting everything together, I’ve some suggestions you can consider applying to your code to improve the html markup/semantic:

Your component is perfect, but is not responsive yet, this is due the fixed width you've applied to the container.

Look both width and max-width the main difference between these properties is that the first(width) is fixed and the second(max-width) is flexible, for example, a component with width: 320px will not grow or shrink because the size will be ever the same, but a container with max-width: 320px or min-width: 320px can grow or contract depending of the property you've set for the container. So if you want a responsive block element, never use width choose or min-width or max-width.

Note that there's no need to use height here, because since you set a height for an element, this means that this element will grow until a certain point and after that the inner content (as texts or images) will start to pop out the element due its fixed height, so isn't necessary to set the height the container height comes from the elements, its paddings and height.

✌️ I hope this helps you and happy coding!