Product preview card component using flexbox and vanilla CSS

Hi, @hydrx Congratulations on finishing this project. 🎉🎊You have a great solution there!

Here are my suggestions for you:

1. Something you can do to improve the image that needs to switch between mobile desktop and use <picture> instead of <img> inside a div. For reasons of SEO difficulty and search engines like Google and b localization, it is not a good practice to import this product image with CSS as this will cause an image of the image in google. You can manage both as inside the <picture> tag and use the html to set when images should, configure the max-width device moved from the device (mobile/desktop) Here is a guide on how to use picture: w3schools

1. The element embed must not appear as a descendant of the button element.

I would build the button like this:

<button class="btn"><img src="images/icon-cart.svg" width="25" height="15" alt="shopping cart icon">Add to Cart</button> w3schools

✌️ I hope this helps you and happy coding!