Product preview card component

Community feedback

• 

  Ahmed Mohamed 🇵🇸•310

  @ahmedafsaPosted 11 months ago

  Hello @0xmaxx1, Well done!

  Small suggestions to enhance the code further:

  • Regarding the product image It is better to use the <picture> element with <source> tags to make it responsive where based on your screen width, the appropriate image will be loaded instead of the two <img> elements.

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

  • You can use cursor: pointer on the buttons and transition: all 0.3s on the elements with hover effect to apply nice hover effects

  I hope these suggestions are helpful. Best wishes to you!

  0