A simple component built in HTML and CSS

Hi Sergio !

Ive check your code to see if i can help you. First it looks great ! unless the background is not the same color as the design, it looks very cool !

Main tag

in your code you are using the main tag as your component .

The main tag should wrap the main content of the page, but not "be the main content".

I recomend to put your component into the main tag and wrap it with a div

<main>
 <div class="my-component">
    <div>
        <img src="images/image-product-desktop.jpg" class="desk" alt="Image of chanel perfume bottle">
        <img src="images/image-product-mobile.jpg" class="mob" alt="Image of chanel perfume bottle">
    </div>

    <article>
      <p class="tag">PERFUME</p>
      <h1>Gabrielle Essence Eau De Parfum</h1>
      <p>A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</p>
      <div class="price">
        <h1 class="p-off">$149.99</h1>
        <p class="p-list">$169.99</p>
      </div>
      <a href="" class="btn">
        <ul>
          <li><img src="images/icon-cart.svg" alt=""></li>
          <li>Add to Cart</li>
        </ul>
      </a>
    </article>
 </div>
</main>

H1 tags

You are using to many h1 tags in your html.

a page can only contain one h1 tag and it should contain something that clearly tell whats the page is about.

For example in this page, if you have only this component, your first h1 is good. you should not use h1 tags because its biger or have a different style.

List in your link

You have a link for the "Add to cart" button with a list in it.

You are using flex box on this list button you could have done the same with your link tank and have the same result. I dont think the list is usefull here.

<a href="#" class="btn">
   <img src="images/icon-cart.svg" alt />
   Add to cart
</a>

Hope it help

If you or someone have completions/feedbacks to say about my comment, feel free to make correct me.