add textos e slides com info sobre a pyne22 além de pequenitos ajustes

Author: annezao

css/main_v2.css

@@ -312,17 +312,21 @@ body.noturno button.padrao:hover, body.noturno a.padrao:hover  {
     text-transform: uppercase;
 }
 
-div#slide-wrapper {
+div.slide-wrapper {
     position: relative;
     min-height: 300px;
 }
 
-div#slide-wrapper #slide {
+section#sobre .slide-wrapper {
+    margin-bottom: 50px;
+}
+
+div.slide-wrapper #slide {
     padding: 0 2em;
     width: 100%;
 }
 
-div#slide-wrapper svg {
+div.slide-wrapper svg {
     width: 40px
 }
 
@@ -343,6 +347,10 @@ button#next {
     right: -1em;
 }
 
+.cursor-pointer {
+    cursor: pointer;
+}
+
 .items {
     position: absolute;
     top: 50%;
@@ -363,7 +371,6 @@ button#next {
     transition: all 300ms ease-in-out;
     z-index: -1;
     opacity: 0;
-    cursor: pointer;
   }
 
   .item img {
@@ -573,11 +580,6 @@ section#sobre {
     margin-bottom: 3em;
 }
 
-section#sobre img {
-    border-top-right-radius: 30px;
-    border-bottom-left-radius: 30px;
-}
-
 body.noturno footer .footer-wrapper {
     background: #007ED3
 }
@@ -594,6 +596,7 @@ div#cobracaju {
     margin: 6em 0 0;
     width: calc(100% + 75px);
     margin-left: -35px;
+    min-height: 400px;
 }
 
 div#mapa,
@@ -651,6 +654,63 @@ div#mensagem-sucesso {
     min-height: 100px;
 }
 
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    padding-top: 70px;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0, 0, 0);
+    background-color: rgba(0, 0, 0, 0.9);
+    z-index: 11;
+  }
+  
+  .modal-content {
+    margin: auto;
+    display: block;
+    width: 90%;
+    max-width: 1000px;
+  }
+  
+  #modal-caption {
+    margin: auto;
+    display: block;
+    width: 80%;
+    max-width: 700px;
+    text-align: center;
+    color: #ccc;
+    padding: 10px 0 60px;
+    height: 35px;
+  }
+  
+  .close-modal {
+    position: absolute;
+    top: 15px;
+    right: 35px;
+    color: #f1f1f1;
+    font-size: 40px;
+    font-weight: bold;
+    transition: 0.3s;
+  }
+  
+  .close-modal:hover,
+  .close-modal:focus {
+    color: #bbb;
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+
+section#sobre img.main {
+    border-top-right-radius: 30px;
+    border-bottom-left-radius: 30px;
+}
+
+
 /* @media (min-width: 576px) {
 } */
 @media (min-width: 768px) {
@@ -792,6 +852,9 @@ div#mensagem-sucesso {
     footer .linha {
         padding: 0 5em 3em;
     }
+    div#cobracaju {
+        min-height: 650px;
+    }
 }
 @media (min-width: 1800px) {
     .decorations {

img/coworking.jpg

@@ -52,6 +52,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Rowdies:wght@300;400&display=swap" rel="stylesheet">
 
+    <!-- TODO: Minificar stylesheets -->
     <link rel="stylesheet" href="css/main_v2.css">
 
     <script>console.log("\nPython Nordeste 2022\n\nPessoas > Tecnologia\n✊🏿✊🏾✊🏽✊✊🏼✊🏻 🏳️‍🌈🏳️‍⚧️♿\n ")</script>
@@ -159,7 +160,16 @@ <h1>
                     <span class="vermelho">para a comunidade.</span> 
                 </h1>
                 <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac elit orci. Ut non massa eget tortor lobortis imperdiet at non mauris. Suspendisse a commodo lectus. Etiam blandit fringilla pulvinar. Sed ullamcorper, libero eget rutrum auctor, elit purus porttitor felis, vitae maximus ante dolor a velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra.
+                    A Python Nordeste 2022 nasceu com a tarefa de promover o máximo de diversidade e inclusão durante os três dias do evento. 
+                   </p>
+                <p>
+                    Nossa organização, durante todo o processo de criação do evento (desde a escolha da equipe organizadora, definição do local, esquema de palestras, convites de keynotes) se preocupou ao máximo com a entrega de uma PyNE onde realmente fosse possível promover a conexão entre pessoas muito além da entrega de conhecimentos em tecnologia. 
+                </p>
+                <p>
+                    Temos muito orgulho em dizer a todas as pessoas que a PyNE22 é uma edição <b class="rainbow-text">da comunidade, para a comunidade</b>, pois, somos uma edição 100% pautada em pluralidade, diversidade, respeito e inclusão.
+                </p>
+                <p>
+                    Será um imenso prazer fazermos parte deste evento e dividir um pouco da nossa pluralidade. Esperamos todes vocês por aqui!
                 </p>
             </div>
         </section>
@@ -309,10 +319,60 @@ <h1 class="vermelho">
             <h1 class="amarelo">
                 Sobre a PyNE 2022:
             </h1>
-            <img src="img/tiradentes_innovation.jpg" alt="Tiradentes Innovation Center" class="mw-100">
+            <img src="img/tiradentes_innovation.jpg" alt="Tiradentes Innovation Center" class="main mw-100">
+            <p>
+                A PyNE este ano será sediada em Aracaju - Sergipe, a cidade que carrega o título de capital brasileira com maior qualidade de vida e com a orla mais bonita do Brasil.
+            </p>
+            <p>
+                Além disso, a cena musical sergipana conta com grandes nomes, com premiações e indicações nacionais e internacionais. Alguns de nossos grandes nomes são: Isis Broken, The Baggios, Samba do Arnesto e outros. O Estado também conta com inúmeros artistas plásticos e grupos teatrais.
+            </p>
+            <p>
+                Mas, fora as belezas naturais e a cultura regional, Aracaju conta com uma enorme produção científica, sendo referência nacional e tendo até destaques internacionais.
+            </p>
+            <p>
+                E por falar em produção científica, nosso evento ocorrerá no coração de duas das nossas instituições pioneiras em inovação e ensino do estado.
+            </p>
+            <p>
+                O <b>Tiradentes Innovation Center - TIC</b> é pioneiro no Brasil e na América Latina como Centro de Inovação voltado à Educação e conta com espaços físicos confortáveis, criativos e inovadores, que abrangem recursos tecnológicos de última geração, o TIC promove a conexão entre pessoas, startups, empresas e organizações.
+            </p>
             <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac elit orci. Ut non massa eget tortor lobortis imperdiet at non mauris. Suspendisse a commodo lectus. Etiam blandit fringilla pulvinar. Sed ullamcorper, libero eget rutrum auctor, elit purus porttitor felis, vitae maximus ante dolor a velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra.
+                A <b>Universidade Tiradentes – Unit –</b> é a primeira instituição de ensino superior particular criada em Sergipe, Nordeste brasileiro, há 60 anos. Em dezembro de 2018, o Google concedeu o reconhecimento mundial à Universidade Tiradentes como referência na plataforma Google for Education, pois, de forma pioneira no Brasil, a Unit investiu na estruturação de <b lang="en">learning spaces</b> e na integração de ferramentas do Google for Education ao seu sistema acadêmico – estudantes e professores interagem de qualquer lugar, a qualquer hora e de qualquer dispositivo.
             </p>
+
+            <div class="slide-wrapper">
+                <div class="slide items w-100">
+                    <div class="item active" data-src="img/fachada_tic.jpeg">
+                        <img src="img/fachada_tic.jpeg" class="mw-100 open-modal" alt="Fachada Tiradentes Innovation Center" />
+                    </div>
+                    <div class=" item next" data-src="img/coworking.jpg">
+                        <img src="img/coworking.jpg" class="mw-100 open-modal" alt="Coworking do espaço das startups" />
+                    </div>
+                    <div class="item prev" data-src="img/fablab.jpg">
+                        <img src="img/fablab.jpg" class="mw-100 open-modal" alt="Fab Lab" />
+                    </div>
+                    <div class="item prev" data-src="img/videoconferencia">
+                        <img src="img/videoconferencia.jpg" class="mw-100 open-modal" alt="Sala de videoconferência" />
+                    </div>
+                    <div class="button-container">
+                        <button type="button" class="button">
+                            <svg role="img" aria-label="Seta amarela para esquerda" xmlns="http://www.w3.org/2000/svg" width="63.712" height="83.567" viewBox="0 0 63.712 83.567">
+                                <g id="Grupo_29" data-name="Grupo 29" transform="translate(10.482 10.482)">
+                                <line x1="42.748" y2="31.302" fill="none" stroke="#ffc900" stroke-linecap="round" stroke-width="15"/>
+                                <line x1="42.748" y1="31.302" transform="translate(0 31.302)" fill="none" stroke="#ffc900" stroke-linecap="round" stroke-width="15"/>
+                                </g>
+                            </svg>
+                        </button>
+                        <button type="button" class="button">
+                            <svg role="img" aria-label="Seta amarela para direita" xmlns="http://www.w3.org/2000/svg" width="63.712" height="83.567" viewBox="0 0 63.712 83.567">
+                                <g id="Grupo_28" data-name="Grupo 28" transform="translate(199.982 -1659.018)">
+                                <line x2="42.748" y2="31.302" transform="translate(-189.5 1669.5)" fill="none" stroke="#ffc900" stroke-linecap="round" stroke-width="15"/>
+                                <line y1="31.302" x2="42.748" transform="translate(-189.5 1700.802)" fill="none" stroke="#ffc900" stroke-linecap="round" stroke-width="15"/>
+                                </g>
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+            </div>
             <div class="linha">
                 <div class="coluna">
                     <div id="mapa">
@@ -324,10 +384,10 @@ <h2 class="amarelo">
                         Local e Data:
                     </h2>
                     <p>
-                        Endereço: Avenida Murilo Dantas, 300 - Bloco A - Farolândia, Aracaju - SE, 49032-490.
-                    </p>
+                        Endereço: <a href="https://g.page/tiradentesinnovation?share" target="_blank" rel="noopener noreferrer">Avenida Murilo Dantas, 300 - Bloco A - Farolândia, Aracaju - SE, 49032-490</a>.
+                    </p> 
                     <p>
-                        O evento será realizado nos dias 26, 27 e 28 de agosto de 2022.
+                        O evento será realizado nos dias <strong>26, 27 e 28 de agosto de 2022</strong>.
                     </p>
                 </div>
             </div>
@@ -367,15 +427,15 @@ <h3 class="branco text-center">
                             Nossas redes:
                         </h3>
                         <div class="text-center icones">
-                            <a href="https://www.instagram.com/pythonnordeste/">
+                            <a href="https://www.instagram.com/pythonnordeste/" target="_blank" rel="noopener noreferrer">
                                 <img src="img/insta.svg" alt="Instagram">
                             </a>
-                            <a href="https://twitter.com/pythonnordeste">
+                            <a href="https://twitter.com/pythonnordeste" target="_blank" rel="noopener noreferrer">
                                 <img src="img/twitter.svg" alt="Twitter">
                             </a>
                         </div>
                         <div class="text-center icone">
-                            <a href="https://www.linkedin.com/company/pythonnordeste2022/">
+                            <a href="https://www.linkedin.com/company/pythonnordeste2022/" target="_blank" rel="noopener noreferrer">
                                 <img src="img/linkedin.svg" alt="Linkedin">
                             </a>
                         </div>
@@ -389,19 +449,57 @@ <h3 class="branco text-center">
             </div>
         </footer>
     </main>
+    <div id="modal" class="modal">
+        <span class="close-modal">×</span>
+        <img src="" class="modal-content" id="modal-image">
+        <div id="modal-caption"></div>
+    </div>
 
+    <script src="lottie_light.min.js"></script>
     <script>
+        // TODO: Minificar scripts
+        // MODAL
+        const modal = document.getElementById('modal');
+        const modalImg = document.getElementById("modal-image");
+        const modalCaption = document.getElementById("modal-caption");
+
+        function closeModal() {
+            modal.style.display = "none";
+            modalImg.src = "";
+            modalCaption.innerHTML = "";
+        }
+
+        const closeModalElem = document.querySelectorAll(".close-modal");
+        closeModalElem.forEach(function(elem) {
+            elem.onclick = closeModal;
+        })
+
+        modal.onclick = function(event) {
+            if(modal.isSameNode(event.target) && window.getComputedStyle(modal).display != 'none') 
+                closeModal();
+        }
+
         // CAROUSEL
         const slider = document.querySelector(".items");
-        const slides = document.querySelectorAll(".item");
-        const button = document.querySelectorAll(".button");
-        const slidesImages = document.querySelectorAll(".item img");
+        const slides = slider.querySelectorAll(".item");
+        const button = slider.querySelectorAll(".button");
+        const slidesImages = slider.querySelectorAll(".item img");
 
         if(slider && slides) {
             for (let i = 0; i < slidesImages.length; i++) {
-                slidesImages[i].addEventListener("click", (e) => {
-                    window.location = e.target.dataset.href
-                });
+                if(slidesImages[i].classList.contains("clickable")) {
+                    slidesImages[i].onclick = function(e) {
+                        window.location = e.target.dataset.href
+                    };
+                }
+                else if(slidesImages[i].classList.contains("open-modal")) {
+                    slidesImages[i].classList.add("cursor-pointer")
+                    slidesImages[i].onclick = function() {
+                        modal.style.display = "block";
+                        modalImg.src = this.src;
+                        modalCaption.innerHTML = this.alt;
+                    }
+                }
             }
 
             let current = Math.floor(Math.random()*slides.length);
@@ -436,9 +534,7 @@ <h3 class="branco text-center">
             }
             update();
         }
-    </script>
-    <script src="lottie_light.min.js"></script>
-    <script>
+    
         // COBRACAJU
         const cobracaju = document.getElementById('cobracaju');
         const cobracajuObj = {
@@ -484,8 +580,7 @@ <h3 class="branco text-center">
             clearTimeout(resizeInternval);
             resizeInternval = setTimeout(callLoadFunction, 100);
         }, true);
-    </script>
-    <script>
+
         // RABO COBRACAJU
         const raboCobracaju = document.getElementById('rabo');
         const raboCobracajuObj = {
@@ -503,17 +598,15 @@ <h3 class="branco text-center">
             bodymovinInstanceRabo = bodymovin.loadAnimation(raboCobracajuObj)
         }
         loadRaboCobracaju()
-    </script>
-    <script>
+
         // DARKMODE
         const btnDarkmode = document.getElementById("btnDarkmode");
         btnDarkmode.addEventListener('click', function(e) {
             e.preventDefault();
             document.body.classList.toggle("noturno")
             callLoadFunction()
         })
-    </script>
-    <script>
+
         // FALE CONOSCO
         const divCampos = document.getElementById("campos");
         const divMsgForm = document.getElementById("mensagem-sucesso");