codaqui · thaifurforo · Nov 3, 2024 · Nov 3, 2024 · Nov 3, 2024 · Nov 3, 2024
diff --git a/assets/css/responsividade.css b/assets/css/responsividade.css
diff --git a/assets/css/style.css b/assets/css/style.css
diff --git a/assets/img/animacao-inicio.gif b/assets/img/animacao-inicio.gif
diff --git a/assets/img/background-animacao.png b/assets/img/background-animacao.png
diff --git a/assets/img/background-rodape.png b/assets/img/background-rodape.png
diff --git a/assets/img/codaqui-logo.png b/assets/img/codaqui-logo.png
diff --git a/assets/img/codaqui-logo2.png b/assets/img/codaqui-logo2.png
diff --git a/assets/img/gif_contato.gif b/assets/img/gif_contato.gif
diff --git a/assets/img/imagem-background-segundo-bloco.png b/assets/img/imagem-background-segundo-bloco.png
diff --git a/assets/img/imagem-bottom-inicio.png b/assets/img/imagem-bottom-inicio.png
diff --git a/assets/img/imagem-top-inicio.png b/assets/img/imagem-top-inicio.png
diff --git a/assets/img/pg01-img01.gif b/assets/img/pg01-img01.gif
diff --git a/assets/img/pg01-img02.png b/assets/img/pg01-img02.png
diff --git a/assets/img/pg01-img03.png b/assets/img/pg01-img03.png
diff --git a/assets/img/pg02-img01.png b/assets/img/pg02-img01.png
diff --git a/assets/img/pg02-img02.png b/assets/img/pg02-img02.png
diff --git a/assets/img/pg02-img03.png b/assets/img/pg02-img03.png
diff --git a/assets/img/pg03-img01.png b/assets/img/pg03-img01.png
diff --git a/assets/img/pg03-img02.png b/assets/img/pg03-img02.png
diff --git a/assets/img/pg03-img03.png b/assets/img/pg03-img03.png
diff --git a/assets/img/pg03-img04.png b/assets/img/pg03-img04.png
diff --git a/assets/img/pg03-img05.png b/assets/img/pg03-img05.png
diff --git a/assets/img/pg04-img01.png b/assets/img/pg04-img01.png
diff --git a/assets/img/pg04-img02.png b/assets/img/pg04-img02.png
diff --git a/assets/img/pg04-img03.gif b/assets/img/pg04-img03.gif
diff --git a/assets/img/pg04-img04.png b/assets/img/pg04-img04.png
diff --git a/assets/img/pg04-img05.png b/assets/img/pg04-img05.png
diff --git a/assets/img/pg05-img01.png b/assets/img/pg05-img01.png
diff --git a/assets/img/pg05-img02.png b/assets/img/pg05-img02.png
diff --git a/assets/img/pg05-img03.png b/assets/img/pg05-img03.png
diff --git a/assets/img/pg05-img04.png b/assets/img/pg05-img04.png
diff --git a/assets/img/pg06-img01.png b/assets/img/pg06-img01.png
diff --git a/assets/img/pg06-img02.gif b/assets/img/pg06-img02.gif
diff --git a/assets/img/pg06-img03.png b/assets/img/pg06-img03.png
diff --git a/assets/img/pg06-img04.png b/assets/img/pg06-img04.png
diff --git a/assets/img/pg06-img05.png b/assets/img/pg06-img05.png
diff --git a/assets/img/sinal-preto.png b/assets/img/sinal-preto.png
diff --git a/assets/img/sinal-verde.png b/assets/img/sinal-verde.png
diff --git a/assets/img/sinal.png b/assets/img/sinal.png
diff --git a/assets/js/actionButton.js b/assets/js/actionButton.js
@@ -0,0 +1,42 @@
+document.addEventListener('DOMContentLoaded', function () {
+    // Ajusta para garantir que o site comece no topo ao recarregar
+    if (window.location.hash !== '#inicio') {
+        window.location.hash = '#inicio';
+    }
+
+    const backToTopButton = document.getElementById('backToTop');
+    const whatsappButton = document.getElementById('whatsappButton');
+
+    // Função para exibir ou esconder os botões ao rolar a página
+    function toggleButtons() {
+        const scrollPosition = window.scrollY;
+        if (scrollPosition > 100) {
+            backToTopButton.style.display = 'flex';
+            whatsappButton.style.display = 'flex';
+            setTimeout(() => {
+                backToTopButton.style.opacity = '1';
+                whatsappButton.style.opacity = '1';
+            }, 10);
+        } else {
+            backToTopButton.style.opacity = '0';
+            whatsappButton.style.opacity = '0';
+            setTimeout(() => {
+                backToTopButton.style.display = 'none';
+                whatsappButton.style.display = 'none';
+            }, 500);
+        }
+    }
+
+    // Adiciona o evento de scroll para exibir ou esconder os botões
+    document.addEventListener('scroll', toggleButtons);
+
+    // Ação ao clicar no botão "Voltar ao Topo"
+    backToTopButton.addEventListener('click', function () {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    });
+
+    // Ação ao clicar no botão do WhatsApp
+    whatsappButton.addEventListener('click', function () {
+        window.location.href = 'https://wa.me/5599999999999';
+    });
+});
diff --git a/assets/js/header.js b/assets/js/header.js
@@ -0,0 +1,27 @@
+document.addEventListener('DOMContentLoaded', function () {
+    // Elementos de controle do menu
+    const menuToggle = document.getElementById('menuToggle');
+    const menuAberto = document.querySelector('.menu-aberto');
+    const navLinks = document.querySelectorAll('.nav-menu a');
+    const body = document.body;
+
+    // Abre/fecha o menu ao mudar o estado do checkbox
+    menuToggle.addEventListener('change', function () {
+        if (menuToggle.checked) {
+            menuAberto.classList.add('active');
+            body.classList.add('no-scroll');
+        } else {
+            menuAberto.classList.remove('active');
+            body.classList.remove('no-scroll');
+        }
+    });
+
+    // Fecha o menu ao clicar em um link de navegação
+    navLinks.forEach(link => {
+        link.addEventListener('click', function () {
+            menuToggle.checked = false;
+            menuAberto.classList.remove('active');
+            body.classList.remove('no-scroll');
+        });
+    });
+});
diff --git a/assets/js/menu.js b/assets/js/menu.js
@@ -0,0 +1,14 @@
+document.addEventListener('DOMContentLoaded', function () {
+    // Elementos de controle do menu
+    const menuToggle = document.getElementById('menuToggle');
+    const menuAberto = document.querySelector('.menu-aberto');
+
+    // Abre/fecha o menu ao mudar o estado do checkbox
+    menuToggle.addEventListener('change', function () {
+        if (menuToggle.checked) {
+            menuAberto.classList.add('active');
+        } else {
+            menuAberto.classList.remove('active');
+        }
+    });
+});
diff --git a/assets/js/slidePortfolio.js b/assets/js/slidePortfolio.js
@@ -0,0 +1,39 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const slides = document.querySelectorAll('.slide');
+
+    slides.forEach((slide) => {
+        let currentIndex = 0;
+        const images = slide.querySelectorAll('img');
+        const nextButton = slide.querySelector('.next');
+        const prevButton = slide.querySelector('.prev');
+        const intervalTime = 3000;
+
+        // Função para mostrar a imagem atual
+        function showSlide(index) {
+            images.forEach((img, i) => {
+                img.style.opacity = (i === index) ? '1' : '0';
+            });
+        }
+
+        // Navegação para o próximo slide
+        nextButton.addEventListener('click', () => {
+            currentIndex = (currentIndex + 1) % images.length;
+            showSlide(currentIndex);
+        });
+
+        // Navegação para o slide anterior
+        prevButton.addEventListener('click', () => {
+            currentIndex = (currentIndex - 1 + images.length) % images.length;
+            showSlide(currentIndex);
+        });
+
+        // Slideshow automático
+        setInterval(() => {
+            currentIndex = (currentIndex + 1) % images.length;
+            showSlide(currentIndex);
+        }, intervalTime);
+
+        // Exibe o slide inicial
+        showSlide(currentIndex);
+    });
+});
diff --git a/assets/js/slideSobre.js b/assets/js/slideSobre.js
@@ -0,0 +1,25 @@
+document.addEventListener('DOMContentLoaded', function () {
+    // Clona o elemento com o ID 'headline-scroll' para criar um efeito de rolagem contínua
+    const headlineScroll = document.getElementById('headline-scroll');
+    const clone = headlineScroll.cloneNode(true);
+    headlineScroll.parentNode.appendChild(clone);
+
+    // Define a largura dos elementos com base na largura do conteúdo
+    const scrollWidth = headlineScroll.scrollWidth;
+    headlineScroll.style.width = `${scrollWidth}px`;
+    clone.style.width = `${scrollWidth}px`;
+});
+
+// Cria e adiciona um estilo CSS para a animação de rolagem
+const styleSheet = document.createElement('style');
+styleSheet.type = 'text/css';
+styleSheet.innerText = `
+@keyframes scroll {
+    0% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translateX(-50%);
+    }
+}`;
+document.head.appendChild(styleSheet);
diff --git a/docs/MODELO AUTORIZAÇÃO - HACKATHON.pdf → docs/Modelo-Autorizacao.pdf b/docs/MODELO AUTORIZAÇÃO - HACKATHON.pdf → docs/Modelo-Autorizacao.pdf
diff --git a/... 1º Hackathon Online - Codaqui - 2024.pdf → docs/Regulamento.pdf b/... 1º Hackathon Online - Codaqui - 2024.pdf → docs/Regulamento.pdf
diff --git a/index.html b/index.html
@@ -1 +1,238 @@
-<h1>Hello World!</h1>
+<!DOCTYPE html>
+<html lang="pt-br">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>1º Hackathon Online - Codaqui</title>
+
+    <!--CSS-->
+    <link rel="stylesheet" href="assets/css/style.css">
+    <link rel="stylesheet" href="assets/css/responsividade.css">
+    <link rel="stylesheet" href="inc/font-awesome-4.7.0/css/font-awesome.min.css">
+
+    <!--FONT-->
+    <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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
+
+
+</head>
+
+<body>
+
+    <!--Container Geral-->
+    <div class="container">
+
+        <!--Início-->
+        <main id="inicio" class="inicio">
+            <div class="container-inicio">
+                <div class="animacao-inicio">
+                    <img src="assets/img/animacao-inicio.gif" alt="Animação de pessoa usando notebook">
+                </div>
+                <div class="conteudo-inicio" data-aos="fade-up" data-aos-duration="1000">
+                    <div class="logo">
+                        <img src="assets/img/codaqui-logo.png" alt="">
+                    </div>
+                    <div class="titulo-inicio">
+                        <h1 class="destaque-inicio poppins-medium">Hackathon<br/>Online</h1>
+                    </div>
+                    <div class="paragrafo-inicio" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
+                        <p>1ª edição</p>
+                    </div>
+                </div>
+            </div>
+            <div>
+                <div class="background-top-inicio"></div>
+                <div class="background-bottom-inicio"></div>
+            </div>
+        </main>
+        <!--Fim Início-->
+
+        <!--Sobre-->
+        <section id="sobre" class="sobre">
+            <div class="container-sobre">
+                <div class="conteudo-sobre">
+                    <h1>O que é?</h1>
+                    <div class="textos-sobre">
+                        <img src="assets/img/sinal-verde.png" alt="">
+                        <p>Hackathons são “maratonas de programação” que visam promover a inovação e encontrar soluções para problemas específicos. Ao participar do Hackathon da Codaqui, você terá a oportunidade de expandir o networking e aprender com palestrantes, mentores e demais competidores.</p>
+                    </div>
+                    <div class="textos-sobre">
+                        <img src="assets/img/sinal-verde.png" alt="">
+                        <p>A primeira edição do Hackathon da Codaqui será totalmente online, permitindo a participação de pessoas de todo o país. Para integrar as equipes competidoras, basta ter entre 14 e 18 anos e algum nível de conhecimento em programação e desenvolvimento de soluções tecnológicas. Pessoas de 18 a 20 anos, cursando áreas de tecnologia ou iniciando carreira no setor, também podem se inscrever como líderes de equipe. A inscrição é gratuita e as vagas são limitadas.</p>
+                    </div>
+                    <div class="textos-sobre">
+                        <img src="assets/img/sinal-verde.png" alt="">
+                        <p>Os melhores colocados receberão prêmios, além de visibilidade em nossas redes, ampliando as possibilidades de reconhecimento pelo mercado profissional. Para todos os participantes, é uma ótima oportunidade de enriquecer seu portfólio com o projeto desenvolvido, e seu currículo com a experiência.</p>
+                    </div>
+                    <div class="textos-sobre">
+                        <img src="assets/img/sinal-verde.png" alt="">
+                        <p>Para profissionais com pelo menos dois anos de experiência em tecnologia, o Hackathon é uma excelente oportunidade para compartilhar conhecimento e aprimorar suas habilidades de mentoria e comunicação, essenciais para o desenvolvimento da carreira. Reserve horários na sua agenda para orientar as equipes e tirar dúvidas. Inscreva-se para participar como mentor do Hackathon Codaqui!</p>
+                    </div>
+                </div>
+            </div>
+            <div>
+                <div class="background-segundo-bloco-esquerdo"></div>
+            </div>
+            <div class="background-segundo-bloco-direito"></div>
+        </section>
+        <!--Fim Sobre-->
+
+        <!--Programacao-->
+        <section id="programacao" class="programacao">
+            <div class="container-programacao" data-aos="fade-up" data-aos-duration="1000">
+                <div class="headline-programacao">
+                    <div class="text-headline-programacao" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
+                        <h2>Programação</h2>
+                    </div>
+                </div>
+                <div class="conteudo-programacao">
+                    <div class="box-programacao" data-aos="fade-up" data-aos-delay="300" data-aos-duration="1000">
+                        <img class="icone-programacao" src="assets/img/pg03-img01.png" alt="">
+                        <span>15/11, 09:00</span>
+                        <h3>Abertura</h3>
+                    </div>
+                    <div class="box-programacao" data-aos="fade-up" data-aos-delay="300" data-aos-duration="1000">
+                        <img class="icone-programacao" src="assets/img/pg03-img01.png" alt="">
+                        <span>15/11, 09:00</span>
+                        <h3>Introdução a Git e Github</h3>
+                    </div>
+                    <div class="box-programacao" data-aos="fade-up" data-aos-delay="300" data-aos-duration="1000">
+                        <img class="icone-programacao" src="assets/img/pg03-img01.png" alt="">
+                        <span>15/11, 09:00</span>
+                        <h3>Noções sobre API</h3>
+                    </div>
+                    <div class="box-programacao" data-aos="fade-up" data-aos-delay="300" data-aos-duration="1000">
+                        <img class="icone-programacao" src="assets/img/pg03-img01.png" alt="">
+                        <span>15/11, 09:00</span>
+                        <h3>UX/UI básico</h3>
+                    </div>
+                    <div class="box-programacao" data-aos="fade-up" data-aos-delay="300" data-aos-duration="1000">
+                        <img class="icone-programacao" src="assets/img/pg03-img01.png" alt="">
+                        <span>15/11, 09:00</span>
+                        <h3>Gestão de Produto: da ideia à entrega</h3>
+                    </div>
+                    <div class="box-programacao" data-aos="fade-up" data-aos-delay="300" data-aos-duration="1000">
+                        <img class="icone-programacao" src="assets/img/pg03-img01.png" alt="">
+                        <span>15/11, 09:00</span>
+                        <h3>Promovendo um Ambiente Saudável nas Escolas</h3>
+                    </div>
+                    <br/>
+                    <div class="box-programacao" data-aos="fade-up" data-aos-delay="300" data-aos-duration="1000">
+                        <img class="icone-programacao" src="assets/img/pg03-img02.png" alt="">
+                        <span>15/11, 09:00</span>
+                        <h3>Prazo para envio dos projetos e apresentações</h3>
+                    </div>
+                    <br/>
+                    <div class="box-programacao" data-aos="fade-up" data-aos-delay="300" data-aos-duration="1000">
+                        <img class="icone-programacao" src="assets/img/pg03-img03.png" alt="">
+                        <span>15/11, 09:00</span>
+                        <h3>Apresentações das equipes</h3>
+                    </div>
+                    <div class="box-programacao" data-aos="fade-up" data-aos-delay="300" data-aos-duration="1000">
+                        <img class="icone-programacao" src="assets/img/pg03-img04.png" alt="">
+                        <span>15/11, 09:00</span>
+                        <h3>Premiações e encerramento</h3>
+                    </div>
+                </div>
+            </div>
+            <div class="background-programacao-direito"></div>
+            <div class="background-programacao-esquerdo"></div>
+        </section>
+        <!--Fim Programacao-->
+
+        <!--Desafio-->
+        <section id="servicos" class="servicos">
+            <div class="container-servicos">
+                <div class="headline-servicos" data-aos="fade-up" data-aos-duration="1000">
+                    <div class="titulo-servicos">
+                        <h1>O desafio</h1>
+                    </div>
+                </div>
+                <div class="textos-servicos">
+                    <img src="assets/img/sinal-preto.png" alt="">
+                    <p>O tema do desafio será:<br/><strong>Soluções tecnológicas para combater o bullying nas escolas.</strong></p>
+                </div>
+                <div class="textos-servicos">
+                    <img src="assets/img/sinal-preto.png" alt="">
+                    <p>Os desafios serão desenvolvidos em equipe, com o apoio de nossos monitores.</p>
+                </div>
+                <div class="textos-servicos">
+                    <img src="assets/img/sinal-preto.png" alt="">
+                    <p>Os times poderão desenvolver APIs, LandingPages, MockUps, Protótipos ou o que preferirem na solução proposta.</p>
+                </div>
+                <div class="textos-servicos">
+                    <img src="assets/img/sinal-preto.png" alt="">
+                    <p>Não é necessário que o que foi desenvolvido esteja totalmente funcional na apresentação. A ideia é apenas demonstrar como uma solução tecnológica poderia ajudar a resolver o problema abordado.</p>
+                </div>
+            </div>
+        </section>
+        <!--Fim Desafio-->
+
+        <!--Contato-->
+        <section id="contato" class="contato">
+            <div class="container-contato" data-aos="fade-up" data-aos-duration="1000">
+                <div class="headline-contato" data-aos="fade-up" data-aos-delay="200">
+                    <div class="titulo-contato">
+                        <h1>Participe</h1>
+                    </div>
+                </div>
+                <div class="conteudo-contato" data-aos="fade-up" data-aos-delay="400">
+                    <a target="_blank" href="docs/Regulamento.pdf">
+                        <div class="regulamento-contato">
+                            <h2>Regulamento</h2>
+                            <img src="assets/img/pg05-img02.png" alt="">
+                        </div>
+                    </a>
+                    <a target="_blank" href="https://forms.gle/F7gvZ25yet56ks5j8">
+                        <div class="formulario-contato" data-aos="fade-up" data-aos-delay="600">
+                            <h2>Formulário de inscrição</h2>
+                            <img src="assets/img/pg05-img02.png" alt="">
+                        </div>
+                    </a>
+                </div>
+                <div class="conteudo-contato2" data-aos="fade-up" data-aos-delay="400">
+                    <div class="imagem-contato">
+                        <img src="assets/img/gif_contato.gif" alt="Imagem animada de pergunta e resposta">
+                    </div>
+                    <div class="info-contato" data-aos="fade-up" data-aos-delay="600">
+                        <h2>Dúvidas?<br/>Entre em contato</h2>
+                        <a href="mailto:[email protected]" target="_blank"><img class="img-social-contatos" src="assets/img/pg06-img03.png" alt=""></i> [email protected]</a>
+                        <a href="https://instagram.com/codaqui.dev" target="_blank"><img class="img-social-contatos" src="assets/img/pg06-img04.png" alt=""></i> @codaqui.dev</a>
+                        <a href="http://www.codaqui.dev" target="_blank"><img class="img-social-contatos" src="assets/img/pg06-img05.png" alt=""> www.codaqui.dev</a>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!--Fim Contato-->
+
+        <!--Footer-->
+        <footer class="footer" id="footer">
+            <div class="footer-column credits-column">
+            </div>
+        </footer>
+        <!--Fim Footer-->
+
+    </div>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+
+    <!-- AOS -->
+    <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
+
+    <!-- Inicialização do AOS -->
+    <script>
+        AOS.init();
+    </script>
+
+    <!--JavaScript-->
+    <script src="assets/js/header.js"></script>
+    <script src="assets/js/actionButton.js"></script>
+    <script src="assets/js/menu.js"></script>
+    <script src="assets/js/slideSobre.js"></script>
+    <script src="assets/js/slidePortfolio.js"></script>
+
+</body>
+
+</html>