HTML, CSS, Flexbox, Semantic HTML

Community feedback

• 

  IRVINE MESA•1,855

  @DrMESAZIMPosted over 2 years ago

  hi Caio

  This was very good work from you. I do have some suggestions to make the solution as close to perfection as possible on the hover effect on the button lets change the color from the current color of dark blue to dark green

  set >> button: hover{background-color : #040f04}

  inside your file style.css

  I did YouTube video for you improving your coding on the challenge and giving feedback .You can watch it when it premieres on this link

  https://youtu.be/LMZq4c6mKGM

  0
• 

  Vinicius Henrique•590

  @viniciusshenri96Posted over 2 years ago

  @CaioHenrique04 Parabéns por concluir seu primeiro desafio, uma dica pra você é sempre colocar o seu conteúdo principal do HTML dentro da tag <main> para não dar problemas de ACCESSIBILITY ISSUES aqui no frontend Mentor.

  <main>
    <section>
      <div class="card">
        <img class="image-perfume" src="images/image-product-desktop.jpg" alt="Perfume">
        <div class="right">
          <p class="perfume">PERFUME</p>
          <h1>Gabrielle Essence Eau De Parfum</h1>
          <p class="description">A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator
            for the House of
            CHANEL.</p>
          <div class="prices">
            <h2>$149.99</h2>
            <small><s>$169.99</s></small>
          </div>
          <div class="button">
            <img src="/images/icon-cart.svg" alt="Carrinho de Compras">
            <p>Add to Cart</p>
          </div>
        </div>
      </div>
    </section>
  </main>
  
  

  e para preços você pode usar uma tag mais genérica como o <p>, usar <h2> não vai fazer muito sentido, já que é para títulos com algo relacionado, como uma descrição. exemplo:

  <h1>Elementos de cabeçalho</h1>
  <h2>Sumário</h2>
  <p>Algum texto aqui...</p>
  
  <h2>Exemplos</h2>
  <h3>Exemplo 1</h3>
  <p>Algum texto aqui...</p>
  
  <h3>Exemplo 2</h3>
  <p>Algum texto aqui...</p>
  
  <h2>Veja também</h2>
  <p>Algum texto aqui...</p>
  
  

  0