<nav>
      <ul>
        <li>
          <a
            href="../HTML5 e CSS3 parte 1 - Crie uma página da Web/index.html"
            >Home</a
          >
        </li>
        <li>
          <a
            href="../HTML5 e CSS3 parte 2 - Posicionamento, listas e navegação/produtos.html"
            >Produtos</a
          >
        </li>
        <li>
          <a
            href="../HTML5 e CSS3 parte 3 - Trabalhando com formulários e tabelas/contato.html"
            >Contato</a
          >
        </li>
      </ul>
    </nav>
  </div>
</header>

<img class="banner" src="./imagens/banner.jpg" />

<main>
  <section class="principal">
    <h2 class="titulo-principal">Sobre a Barbearia Alura</h2>

    <img
      class="utensilios"
      src="./imagens/utensilios.jpg"
      alt="Utensilios de um barbeiro."
    />

    <p>
      Localizada no coração da cidade a
      <strong>Barbearia Alura</strong> traz para o mercado o que há de
      melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura
      já é destaque na cidade e conquista novos clientes a cada dia.
    </p>

    <p id="missao">
      <em>
        Nossa missão é:
        <strong
          >"Proporcionar auto-estima e qualidade de vida aos
          clientes"</strong
        >.
      </em>
    </p>

    <p>
      Oferecemos profissionais experientes e antenados às mudanças no mundo
      da moda. O atendimento possui padrão de excelência e agilidade,
      garantindo qualidade e satisfação dos nossos clientes.
    </p>
  </section>

  <section class="mapa">
    <h3 class="titulo-principal">Nosso estabelecimento</h3>
    <p>Nosso estabelecimento esta localizado no coração da cidade.</p>

    <div class="mapa-conteudo">
      <iframe
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3656.448598130907!2d-46.634653385542414!3d-23.588239368469353!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5a2b2ed7f3a1%3A0xab35da2f5ca62674!2sCaelum%20-%20Escola%20de%20Tecnologia!5e0!3m2!1spt-BR!2sbr!4v1580916426151!5m2!1spt-BR!2sbr"
        width="100%"
        height="300"
        frameborder="0"
        style="border: 0"
        allowfullscreen=""
      ></iframe>
    </div>
  </section>

  <section class="beneficios">
    <h3 class="titulo-principal">Benefícios</h3>

    <div class="conteudo-beneficios">
      <ul class="lista-beneficios">
        <li class="itens">Atendimento ao cliente</li>
        <li class="itens">Espaço diferenciado</li>
        <li class="itens">Localização</li>
        <li class="itens">Profissionais Qualificados</li>
        <li class="itens">Pontualidade</li>
        <li class="itens">Limpeza</li>
      </ul>
      <img src="./imagens/beneficios.jpg" class="imagem-beneficios" />
    </div>

    <div class="video">
      <iframe
        width="100%"
        height="315"
        src="https://www.youtube.com/embed/wcVVXUV0YUY"
        frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen
      ></iframe>
    </div>
  </section>
</main>

<footer>
  <img
    src="../HTML5 e CSS3 parte 2 - Posicionamento, listas e navegação/imagens/logo-branco.png"
  />
  <p class="copyright">© Copyright Barbearia Alura - 2019</p>
</footer>

    <nav>
      <ul>
        <li>
          <a
            href="../HTML5 e CSS3 parte 1 - Crie uma página da Web/index.html"
            >Home</a
          >
        </li>
        <li><a href="produtos.html">Produtos</a></li>
        <li>
          <a
            href="../HTML5 e CSS3 parte 3 - Trabalhando com formulários e tabelas/contato.html"
            >Contato</a
          >
        </li>
      </ul>
    </nav>
  </div>
</header>

<main>
  <ul class="produtos">
    <li>
      <h2>Cabelo</h2>
      <img src="./imagens/cabelo.jpg" />
      <p class="produto-descricao">
        Na tesoura ou máquina, como o cliente preferir
      </p>
      <p class="produto-preco">R$ 25,00</p>
    </li>
    <li>
      <h2>Barba</h2>
      <img src="./imagens/barba.jpg" />
      <p class="produto-descricao">Corte e desenho profissional de barba</p>
      <p class="produto-preco">R$ 18,00</p>
    </li>
    <li>
      <h2>Cabelo+Barba</h2>
      <img src="./imagens/cabelo+barba.jpg" />
      <p class="produto-descricao">Pacote completo de cabelo e barba</p>
      <p class="produto-preco">R$ 35,00</p>
    </li>
  </ul>
</main>

<footer>
  <img src="./imagens/logo-branco.png" />
  <p class="copyright">&copy; Copyright Barbearia Alura - 2019</p>
</footer>

    <nav>
      <ul>
        <li>
          <a
            href="../HTML5 e CSS3 parte 1 - Crie uma página da Web/index.html"
            >Home</a
          >
        </li>
        <li>
          <a
            href="../HTML5 e CSS3 parte 2 - Posicionamento, listas e navegação/produtos.html"
            >Produtos</a
          >
        </li>
        <li><a href="contato.html">Contato</a></li>
      </ul>
    </nav>
  </div>
</header>

<main>
  <form class="formulario-contato">
    <label for="nomesobrenome">Nome e Sobrenome</label>
    <input type="text" id="nomesobrenome" class="input-padrao" required />

    <label for="email">Email</label>
    <input
      type="email"
      id="email"
      class="input-padrao"
      required
      placeholder="seuemail@dominio.com"
    />

    <label for="telefone">Telefone</label>
    <input
      type="tel"
      id="telefone"
      class="input-padrao"
      required
      placeholder="(XX) XXXXX-XXXX"
    />

    <label for="mensagem">Mensagem</label>
    <textarea
      cols="70"
      rows="10"
      id="mensagem"
      class="input-padrao"
      required
    ></textarea>

    <fieldset>
      <legend>Como prefere o nosso contato?</legend>
      <label for="radio-email"
        ><input
          type="radio"
          name="contato"
          value="email"
          id="radio-email"
        />
        Email</label
      >

      <label for="radio-telefone"
        ><input
          type="radio"
          name="contato"
          value="telefone"
          id="radio-telefone"
        />
        Telefone</label
      >

      <label for="radio-whatsapp"
        ><input
          type="radio"
          name="contato"
          value="whatsapp"
          id="radio-whatsapp"
          checked
        />
        Whatsapp</label
      >
    </fieldset>

    <fieldset>
      <legend>Qual horário prefere ser atendido?</legend>
      <select>
        <option value="">Manhã</option>
        <option value="">Tarde</option>
        <option value="">Noite</option>
      </select>
    </fieldset>

    <label class="checkbox"
      ><input type="checkbox" checked /> Gostaria de receber nossas
      novidades por email?</label
    >

    <input type="submit" value="Enviar formulário" class="enviar" />
  </form>

  <table class="formulario-tabela">
    <thead>
      <tr>
        <th colspan="2">Nossos horários</th>
      </tr>
      <tr>
        <th>Dia</th>
        <th>Horário</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Seguda</td>
        <td>8h ~ 20h</td>
      </tr>
      <tr>
        <td>Quarta</td>
        <td>8h ~ 20h</td>
      </tr>
      <tr>
        <td>Sexta</td>
        <td>8h ~ 20h</td>
      </tr>
      <tr>
        <td colspan="2">São Paulo</td>
      </tr>
    </tbody>
  </table>
</main>

<footer>
  <img
    src="../HTML5 e CSS3 parte 2 - Posicionamento, listas e navegação/imagens/logo-branco.png"
    alt="Logo da Barbearia Alura"
  />
  <p class="copyright">&copy; Copyright Barbearia Alura - 2019</p>
</footer>