index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- fontes -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=WDXL+Lubrifont+TC&display=swap" rel="stylesheet">
  <!-- fonte roboto -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=WDXL+Lubrifont+TC&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
  <title>Cronos Boxe</title>
 
  <!-- linkcss -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <nav>
     <!-- Botão hamburguer -->
     <input type="checkbox" id="menu-toggle">
     <label for="menu-toggle" class="hamburger">&#9776;</label>
          <ul class="menu">
            <li><a href="#" onclick="mostrarPagina('inicio')">início</a></li>
            <li><a href="#" onclick="mostrarPagina('sobre')">Sobre a Cronos</a></li>
            <li><a href="#" onclick="mostrarPagina('galeria')">Fotos</a></li>
            <li><a href="#" onclick="mostrarPagina('videos')">Vídeos</a></li>
         
          </ul>
          <div class="topo">    
         <!-- Social + Hambúrguer alinhados à esquerda -->
  <div class="topo">    
    <div class="social-icons">
      <a href="https://www.instagram.com/cronosboxe" target="_blank">
        <i class="fa-brands fa-instagram"></i>
      </a>
      <a href="https://wa.me/5521979921544" target="_blank">
        <i class="fa-brands fa-whatsapp"></i>
      </a>
    </div>
  </div>
</nav>
          

          </div>
    </nav>
  </header>

  <main>
   <!-- Página Inicial -->
<section id="inicio" class="pagina">
  <div class="hero-text">
    <img src="./img/cronostransp.png" alt="Cronos Boxe" />
    <p><strong>PROJETO SOCIAL - TREINADOR BRUNO CAVANHA</strong></p>
    <p>"BOXE PARA A TRANSFORMAÇÃO: CAPACITANDO PESSOAS ATRAVÉS DO ESPORTE”</p>
    <a href="https://wa.me/5521979921544" class="btn">Agende sua aula</a>
  </div>
</section>
  
<section id="sobre" class="pagina" style="display: none;">
  <div class="sobre-container">
    <h2>Boxe para a Transformação</h2>
    <p class="subtitulo">“Capacitando pessoas através do esporte”</p>

    <div class="bloco-sobre">
      <div class="texto">
        <h3>Introdução</h3>
        <p>O boxe é uma arte marcial milenar que transcende sua função como esporte, oferecendo benefícios físicos, emocionais e sociais. O projeto social da equipe Cronos Boxe, liderado pelo Treinador Bruno Cavanha, utiliza o boxe como ferramenta de transformação para pessoas em situação de vulnerabilidade, promovendo integração social e desenvolvimento pessoal.</p>
      </div>
      <img src="./img/cronos 1.jpg" alt="Estádio Nilton Santos - Treinamento">
    </div>

    <div class="bloco-sobre">
      <div class="texto">
        <h3>Benefícios do Boxe</h3>
        <p>Além das competições, o boxe ensina disciplina, autocontrole, respeito e superação pessoal. Durante os treinos, os praticantes canalizam sua ansiedade e energia de forma saudável, reduzindo o estresse e aumentando a autoconfiança.</p>
      </div>
      <img src="./img/cronos 2.png" alt="Instituto Acto">
    </div>

    <div class="bloco-sobre">
      <div class="texto">
        <h3>Histórico do Líder</h3>
        <p>Bruno Cavanha, 50 anos, é formado pela ABP (Associação Brasileira de Pugilismo) desde 2020. Possui carreira de destaque treinando atletas em competições nacionais e internacionais, além de atuar com responsabilidade social por meio deste projeto.</p>
      </div>
      <img src="./img/certificado.png" alt="Certificação ABP">
    </div>

    <div class="bloco-sobre">
      <div class="texto">
        <h3>O Projeto</h3>
        <p>Iniciado em 2020 no Estádio Nilton Santos (Engenhão), o projeto impactou dezenas de vidas. Oferece treinamento esportivo com foco em disciplina, condicionamento físico e respeito, além de atividades que desenvolvem autoestima, liderança e inteligência emocional.</p>
      </div>
      <img src="./img/bruno.jpeg" alt="Aula de boxe social">
    </div>
  </div>
</section>

  
  <!-- Galeria -->
<section id="galeria" class="pagina" style="display: none;">
  <h2>Galeria de Fotos</h2>
  <div class="galeria-album">
    <img src="./img/Foto 01.png" alt="Foto 1">
    <img src="./img/Foto 02.png" alt="Foto 2">
    <img src="./img/Foto 03.png" alt="Foto 3">
    <img src="./img/Foto 04.png" alt="Foto 4">
    <img src="./img/Foto 05.png" alt="Foto 5">
    <img src="./img/Foto 06.png" alt="Foto 6">
    <img src="./img/Foto 07.png" alt="Foto 7">
    <img src="./img/Foto 08.png" alt="Foto 8">
    <img src="./img/Foto 09.png" alt="Foto 9">
    <img src="./img/Foto 10.png" alt="Foto 10">
    <img src="./img/foto 11 (1).jpeg" alt="Foto 11">
    <img src="./img/foto 12.jpeg" alt="Foto 12">
    <img src="./img/foto 13.jpeg" alt="Foto 13">
    <img src="./img/foto 14.jpeg" alt="Foto 14">
    <img src="./img/foto 15.jpeg" alt="Foto 15">
    <img src="./img/foto 16.jpeg" alt="Foto 16">
    
    
    <!-- Adicione mais conforme necessário -->
  </div>
</section>


  
    
  
 <!-- Seção de Vídeos com Carrossel -->
 <section id="videos" class="pagina" style="display: none;">
  <h2>Galeria de Vídeos</h2>
  <div class="video-carousel-container">
    <div class="video-carousel-wrapper">

      <div class="video-carousel">
        
          <!-- Torna o slide relativo para posicionamento correto das setas -->
          <div class="video-wrapper">
            

            <video preload="metadata">
              <source src="./img/WhatsApp Video 2025-07-23 at 12.26.50.mp4" type="video/mp4">
              Seu navegador não suporta vídeos.
            </video>
            

            <button class="play-btn" onclick="togglePlay(this)">
              <i class="fa-solid fa-play"></i>
            </button>
            

            
          </div>

          <p>Recado do campeão Acelino Popó Freitas para Cronos Boxe</p>
        
      </div>

    </div>
  </div>
  <!-- Fim do primeiro vídeo -->
  <div class="video-carousel-container">
    <div class="video-carousel-wrapper">

      <div class="video-carousel">
        
           <div class="video-wrapper">
            

            <video preload="metadata">
              <source src="./img/WhatsApp Video 2025-07-23 at 12.32.29.mp4" type="video/mp4">
              Seu navegador não suporta vídeos.
            </video>
            

            <button class="play-btn" onclick="togglePlay(this)">
              <i class="fa-solid fa-play"></i>
            </button>
            

            
          </div>

          <p> Makcenzie Fight Club</p>
        
      </div>

    </div>
  </div>
  <!-- fim segundo vídeo -->
  <div class="video-carousel-container">
    <div class="video-carousel-wrapper">
       <div class="video-carousel">
        
         
          <div class="video-wrapper">
            

            <video preload="metadata">
              <source src="./img/WhatsApp Video 2025-07-23 at 12.32.33.mp4" type="video/mp4">
              Seu navegador não suporta vídeos.
            </video>
            

            <button class="play-btn" onclick="togglePlay(this)">
              <i class="fa-solid fa-play"></i>
            </button>
            
            <p> Instituto Municipal Nise da Silveira</p>
            
          </div>

          <p></p>
        
      </div>

    </div>
  </div>
  <div class="video-carousel-container">
    <div class="video-carousel-wrapper">

      <div class="video-carousel">
        <div class="video-slide ativo">
           <div class="video-wrapper">
            

            <video preload="metadata">
              <source src="./img/WhatsApp Video 2025-07-23 at 12.32.31.mp4" type="video/mp4">
              Seu navegador não suporta vídeos.
            </video>
            

            <button class="play-btn" onclick="togglePlay(this)">
              <i class="fa-solid fa-play"></i>
            </button>
            

           
          </div>

          <p>Instituto Municipal Nise da Silveira</p>
        </div>
      </div>

    </div>
  </div>
</section>
<!-- fim do terceiro vídeo -->
        <!-- Repita para os outros vídeos -->
  
</section>

  
  
  
  </main>

</body>
</script>
<div class="modal" id="modal-imagem">
  <img src="" alt="Imagem ampliada">
</div>
<script>
  const blocos = document.querySelectorAll('.bloco-sobre');

  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('aparecer');
        observer.unobserve(entry.target);
      }
    });
  }, {
    threshold: 0.2
  });

  blocos.forEach(bloco => {
    bloco.classList.add('invisivel');
    observer.observe(bloco);
  });
</script>
<!-- js sobre  -->

<script>
  function mostrarPagina(paginaId) {
    const paginas = document.querySelectorAll('.pagina');
    paginas.forEach(pagina => {
      pagina.style.display = 'none';
    });

    const paginaSelecionada = document.getElementById(paginaId);
    if (paginaSelecionada) {
      paginaSelecionada.style.display = 'block';
    }
  }
  
</script>

<!-- js galeria -->
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const imagens = document.querySelectorAll(".galeria-album img");

    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add("img-visivel");
          observer.unobserve(entry.target);
        }
      });
    }, {
      threshold: 0.1
    });

    imagens.forEach(img => {
      observer.observe(img);
    });
  });
</script>
<script>
  const imagensGaleria = document.querySelectorAll('.galeria-album img');
  const modal = document.getElementById('modal-imagem');
  const modalImg = modal.querySelector('img');

  imagensGaleria.forEach(img => {
    img.addEventListener('click', () => {
      modal.style.display = 'flex';
      modalImg.src = img.src;
      modalImg.alt = img.alt;
    });
  });

  // Fecha o modal ao clicar fora da imagem
  modal.addEventListener('click', (e) => {
    if (e.target !== modalImg) {
      modal.style.display = 'none';
    }
  });
</script>
<script>
  function mostrarVideo(id) {
    // Esconde todos os vídeos
    const todosVideos = document.querySelectorAll('.video-item');
    todosVideos.forEach(v => v.classList.add('oculto'));

    // Mostra o vídeo correspondente
    const videoSelecionado = document.getElementById(id);
    if (videoSelecionado) {
      videoSelecionado.classList.remove('oculto');
    }
  }
</script>
<script>
  let indiceVideoAtual = 0;
  const slides = document.querySelectorAll('.video-slide');

  function mostrarSlide(index) {
    slides.forEach((slide, i) => {
      slide.classList.remove('ativo');
    });

    slides[index].classList.add('ativo');
  }

  function mudarVideo(direcao) {
    indiceVideoAtual += direcao;
    if (indiceVideoAtual < 0) indiceVideoAtual = slides.length - 1;
    if (indiceVideoAtual >= slides.length) indiceVideoAtual = 0;
    mostrarSlide(indiceVideoAtual);
  }

  // Inicializar com o primeiro vídeo visível
  mostrarSlide(indiceVideoAtual);
</script>
<script>
  function playVideo(botao) {
    const video = botao.previousElementSibling;
    video.play();
    botao.style.display = 'none';

    // Oculta o botão se o usuário der play diretamente no vídeo
    video.addEventListener('play', () => {
      botao.style.display = 'none';
    });

    // Mostra novamente se o vídeo for pausado
    video.addEventListener('pause', () => {
      botao.style.display = 'block';
    });

    // Opcional: esconder o botão ao finalizar o vídeo
    video.addEventListener('ended', () => {
      botao.style.display = 'block';
    });
  }
</script>
<script>
  function togglePlay(button) {
    const video = button.previousElementSibling; // pega o <video> que está antes do botão
    const icon = button.querySelector('i');

    if (video.paused) {
      video.play();
      icon.classList.remove('fa-play');
      icon.classList.add('fa-pause');
    } else {
      video.pause();
      icon.classList.remove('fa-pause');
      icon.classList.add('fa-play');
    }
  }
</script>

<script src="script.js"></script>





</html>

<footer>
  <p>© 2025 Cronos Boxe - Todos os direitos reservados</p>
  <div class="social-icons-footer">
    <a href="#"><i class="fab fa-instagram"></i></a>
    <a href="#"><i class="fab fa-whatsapp"></i></a>
  </div>
</footer>