A simple component built in HTML and CSS

Community feedback

• 

  Nathan•90

  @AyddanPosted over 1 year ago

  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.

  Marked as helpful

  0

  ---

  

  Sergio Insaurralde•20

  @sergioinsaPosted over 1 year ago

  @Ayddan Excellent return! thank you! I haven't done layout for a long time and your semantic tips on the use of <main> and <h1> were super accurate. Likewise with the case of the content in the <a> element. Thank you for your advice, they are more than welcome!

  0

  

  Nathan•90

  @AyddanPosted over 1 year ago

  @sergioinsa with pleasure

  0