Product-preview-card-component

Community feedback

• 

  Motunrayo Adeneye•880

  @motuncodedPosted about 1 month ago

  Good work

  Here is a list of few suggestions for you

  • The div with the class container can be change to <main>.
  • The heading tag so be in hierarchy so you can change it to this

  <div class="second">
    <h1>PERFUME</h1>
    <h2>Gabrielle Essence Eau De Parfum</h2>
    <p>A floral, solar and voluptuous interpretation composed by Olivier polge, Perfumer-Creator for the house of channel  </p>
     <h3>$149.99</h2>
     <button id="add" type="submit">
     <i class="fa-solid fa-cart-shopping"></i>
     Add to  cart</button>
  </div>
  

  • To achieve responsive image, change the img tag to this and aslo include the alt tag

  <img
    src="images/image-product-mobile.jpg"
    alt="Image-product"
    srcset="images/image-product-mobile.jpg, images/image-product-desktop.jpg"
    sizes="(max-width: 600px) 100vw, 50vw"
  />
  

  • You can add this to the body to center the main container

  body{
  display:flex;
  justify-content:center;
  align-items:center;
  }
  

  Hope this useful

  0