Product preview card component with HTML and CSS

hey 😄, congratulations on completing your first challenge... here are a few tips to make your site better.

1.I see that you have used .container -> height:90vh ...using height:90vh 🚫 is a bad practice you can use min-height:90vh✅ or 100vh.

2.Using the picture element for responsively switching between Images is considered as best practice

<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg">
</picture>

more about picture element here📚

Hope that helps, happy coding🔥🔥

Hello, Nice Solution you've got.. Here's some tips to improve it

HTML :

Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page.

Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.

CSS : You can use Intrinsic Sizing or an accurate Extrinsic Sizing to handle Overflow on your component