Responsive product card built with pure css and html

Hey there! 👋 Here are some suggestions to help improve your code:

Unfortunately, there are numerous aspects that require improvement. I recommend reading this excellent article as it demonstrates how to correctly structure your HTML for this particular challenge.

How to plan your HTML (1): Product Preview Card

As for you CSS:

• In modern Web Development, all content is built mobile first, in which you style for small screen first and use media-query to style for larger screens. This will ensure that performance and responsiveness are prioritized.

• Font-size should always be in rem as this helps with accessibility.

• The height: 100vh; in the body should be a min-height instead for improved responsiveness.

• There's is no need to apply border-radius multiple times, just apply it to the card container along with overflow: hidden

• Avoid using static properties as they negatively affect responsiveness.

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding! 👾