Product Preview Card

Hello @Gehad28. Congratulations on completing this challenge!!!🎉

To change the product image you can do it in index.html file using the <picture> tag

Example:

<picture>
  <source media="(min-width:650px)" srcset="images/image-product-desktop.jpg">
  <img src="images/image-product-mobile.jpg">
</picture> 

Be sure to add descriptive alt text improves accessibility and screen readers will say the alt text below in the example for people who blind and or visually impaired.

Example: alt="Gabrielle Essence Perfume bottle laying down with a green leaf above and below it">

More info📚:

• HTML picture tag

To improve your index.html file, make sure you use HTML Semantic Tags

Add to cart text should be wrapped in <button> because users are clicking on the <button> to trigger an action to do something

Using a <div> on the website does not explain any of the content

Here is my solution to this challenge: Product preview card component

I hope you find this useful and don't hesitate to reach out if you have any questions

Don't use background images for things like this. You can use display: none to change but it is much more better to use the <picture> tag. The thing I said here is the same as what Rebecca said