Product Preview Cart

Great job! I have several improvement suggestions:

• Image looks blurry in your page, you can fix it by adding object-fit:cover; . Like this:

.main-fol .image {
    object-fit:cover;
}

• I see that you only use image-product-desktop.jpg. It would be better switch to image-product-mobile.jpg on mobile screens. You can do it like this:

<picture class="image-wrapper">
  <source
    srcset="./images/image-product-mobile.jpg"
    media="(max-width: 475px)"
  />
  <img src="./images/image-product-desktop.jpg" alt="Perfume"/>
</picture>

• You can use letter-spacing CSS property for 'PERFUME' word.
  • Change <p class="start">P E R F U M E</p> to <p class="start">PERFUME</p> And add this CSS:

.start{
   letter-spacing:4px;
}