index.html

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="./assets/favicon.png" type="image/x-icon">
  <title>Serenatto</title>
  <link
    href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700&family=Barlow:wght@400;600&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="./styles/main.css">
</head>

<body>

  <header>
    <nav class="navbar">
      <div class="container">
        <a class="navbar-brand" href="#">
          <img src="./assets/logo-maior.png" alt="Logo da cafeteria Serenatto">
        </a>
        <button class="navbar-toggler" aria-label="Menu" id="menu-toggle">
          <span class="hamburger-icon"></span>
        </button>
        <div class="navbar-menu">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#servicos">Serviços</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#produtos">Produtos</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#contato">Contato</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                <div class="dark-mode-switch">
                  <input type="checkbox" id="darkModeToggle">
                  <label for="darkModeToggle" class="toggle-switch">
                    <span class="slider"></span>
                    <span class="toggle-text">Modo noturno</span>
                  </label>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <aside class="sidebar">
      <button class="sidebar-close" aria-label="Close sidebar">&times;</button>
      <a class="sidebar-brand" href="#">
        <img src="./assets/logo-mobile.png" alt="Logo da cafeteria Serenatto">
      </a>
      <ul class="sidebar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#servicos">Serviços</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#produtos">Produtos</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contato">Contato</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <div class="dark-mode-switch">
              <input type="checkbox" id="darkModeToggleSidebar">
              <label for="darkModeToggleSidebar" class="toggle-switch">
                <span class="slider"></span>
                <span class="toggle-text">Modo noturno</span>
              </label>
            </div>
          </a>
        </li>
      </ul>
    </aside>
  </header>

  <main>
    <section class="banner banner-1">
      <div class="banner-content-container">
        <div class="banner-content">
          <img src="./assets/logo-nav.png" alt="">
          <h2>Sua pausa <br> para <span>desfrutar <br> a vida.</span></h2>
          <p>Boas-vindas ao & <strong>Bistrô Serenatto!</strong>
            <br>Um ambiente aconchegante e acolhedor <br> para apreciar um bom café.
        </div>
      </div>
    </section>

    <section class="services" id="servicos">
      <h2>Nossos Serviços</h2>
      <div class="services-container">
        <article class="card">
          <img src="./assets/cafe-e-bistro.png" alt="Balcão de padaria tradicional com alimentos diversos">
          <div class="card-body">
            <h5>Café & Bistrô</h5>
            <p>Nosso bistrô oferece uma ampla variedade de cafés, smoothies, deliciosos salgados e sobremesas. Uma
              excelente opção para quem busca um lugar tranquilo e aconchegante.</p>
          </div>
        </article>

        <article class="card">
          <img src="./assets/buffet.png" alt="Mesa de buffet com alimentos diversos">
          <div class="card-body">
            <h5>Buffet</h5>
            <p>Buffet e catering personalizado para eventos, produções e celebrações. Com um menu variado e adaptável às
              preferências do cliente, atendimento atencioso e profissional.</p>
          </div>
        </article>

        <article class="card">
          <img src="./assets/delivery.png" alt="Caixa aberta armazenando comidas diversas">
          <div class="card-body">
            <h5>Delivery</h5>
            <p>Para quem deseja desfrutar no conforto de casa, oferecemos delivery dos produtos. Com o mesmo cardápio
              variado de sempre, sem perder nosso sabor e padrão de qualidade.</p>
          </div>
        </article>
      </div>
    </section>

    <section class="banner banner-2">
        <h2>Portas abertas para todos os públicos.</h2>
        <p>Nosso espaço é aconchegante, pet friendly, preparado para receber crianças e pessoas com deficiência. 
          Também oferecemos ambiente de coworking!</p>
    </section>

    <section class="products" id="produtos">
      <h2>Nossos produtos</h2>
      <div class="products-container">
        <div class="product-card" data-modal="modal-1">
          <img src="./assets/cafe-tradicional.png" alt="Café preto">
          <h3>Cafés Tradicionais</h3>
        </div>

        <div class="product-card" data-modal="modal-2">
          <img src="./assets/cafe-especial.png" alt="Café expresso">
          <h3>Cafés Especiais</h3>
        </div>

        <div class="product-card">
          <img src="./assets/smoothies.png" alt="Vitaminas variadas">
          <h3>Smoothies e Vitaminas</h3>
        </div>

        <div class="product-card">
          <img src="./assets/paes.png" alt="Pães variados">
          <h3>Pães e Focaccias</h3>
        </div>

        <div class="product-card">
          <img src="./assets/bolo.png" alt="Bolo de morango">
          <h3>Doces</h3>
        </div>

        <div class="product-card">
          <img src="./assets/quiche.png" alt="Torta salgada">
          <h3>Salgados</h3>
        </div>
      </div>
    </section>

    <section class="">
      <img src="../../assets/cafe-graos.png" alt="Grãos de café">
    </section>

    <section class="contact">
      <div class="contact-container">
        <h3>Entre em contato!</h3>
        <form id="contato">
          <div class="form-group">
            <label for="nome">Nome</label>
            <input type="text" id="nome" placeholder="Nome">
          </div>
          <div class="form-group">
            <label for="email">Email</label>
            <input type="email" id="email" placeholder="Email">
          </div>
          <div class="form-group">
            <label for="telefone">Telefone</label>
            <input type="text" id="telefone" placeholder="Telefone">
          </div>
          <div class="form-group">
            <label for="contato-preferencia">Preferência de contato:</label>
            <select id="contato-preferencia">
              <option selected disabled>Escolha uma opção</option>
              <option value="1">WhatsApp</option>
              <option value="2">Email</option>
              <option value="3">Ligação</option>
            </select>
          </div>
          <button type="submit" class="btn">Enviar</button>
        </form>
      </div>
    </section>

    <footer>
      <div class="footer-content">
        <p>&copy; 2023 © Desenvolvido por Alura | Projeto fictício sem fins comerciais.</p>
        <div class="footer-image-container">
          <img src="./assets/whats.png" alt="Ícone do whatsapp">
          <img src="./assets/insta.png" alt="Ícone do instagram">
          <img src="./assets/twitter.png" alt="Ícone do twitter">
        </div>
      </div>
    </footer>
  </main>

  <!-- Modal 1 -->
  <div id="modal-backdrop-1" class="modal-backdrop"></div>
  <dialog id="modal-1" class="modal">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title">Cafés tradicionais</h2>
        <button type="button" class="close-button"  aria-label="Close">×</button>
      </div>
      <div class="modal-body">
        <img src="./assets/cafe-tradicional.png" class="modal-image" alt="Xícara de café preto">
        <p>O café Serenatto é conhecido por seus blends tradicionais e saborosos, que agradam aos amantes da bebida.
          Nossos grãos são cuidadosamente selecionados e torrados para produzir um aroma rico e sabor equilibrado.</p>
        <p>Entre os cafés mais tradicionais da casa, destaca-se o "Café Serenatto", um blend exclusivo de grãos com
          notas de chocolate e caramelo. Outra opção popular é o "Café Italiano", um café expresso encorpado e intenso.
          Já o "Café Cappuccino" é uma escolha clássica para quem prefere uma bebida cremosa e suave.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="close-button">Fechar janela</button>
      </div>
    </div>
  </dialog>

  <!-- Modal 2 -->
  <div id="modal-backdrop-2" class="modal-backdrop"></div>
  <dialog id="modal-2" class="modal">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title">Cafés especiais</h2>
        <button type="button" class="close-button" aria-label="Close">×</button>
      </div>
      <div class="modal-body">
        <img src="./assets/cafe-especial.png" class="modal-image" alt="Xícara de café expresso">
        <p>Somos conhecidos também por nossos cafés especiais, que são cuidadosamente preparados com grãos selecionados
          de alta qualidade e técnicas de preparo precisas.</p>
        <p>Entre as opções de cafés especiais do Café & Bistrô Serenatto, destacamos o café aeropress, que é preparado
          com uma técnica de imersão e pressão, resultando em uma bebida de sabor intenso e aroma acentuado. Outra opção
          popular é o café Hario V60, que é preparado com um filtro de papel em formato de cone e resulta em uma bebida
          limpa e suave, ressaltando as notas sensoriais dos grãos. Além disso, oferecemos uma variedade de bebidas
          geladas, como o café gelado, que é preparado com grãos torrados escuros e servido com gelo e leite, resultando
          em uma bebida refrescante e saborosa.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="close-button">Fechar janela</button>
      </div>
    </div>
  </dialog>

  <script type="module" src="/main.js"></script>
</body>

</html>