continuando o conheça do site

aboutus.html

@@ -59,31 +59,35 @@ <h1 class="headline">
     <!-- About us status -->
     <div class="statusContainer">
       <div class="status">
-        <h1><b>360</b> Client</h1>
-        <p>An about page is a key component of every website.</p>
+        <h1><b>13</b> Alunos</h1>
+        <p>Focados em sua jornada na área da técnologia.</p>
       </div>
 
       <div class="status">
-        <h1><b>150+</b> Projects</h1>
+        <h1><b>150+</b> Projetos</h1>
         <p>
-          Page is the first page a visitor sees when they visit your website.
+          Foram realizados muitos projetos em sala de aula.
         </p>
       </div>
 
       <div class="status">
-        <h1><b>20+</b> Countries</h1>
-        <p>It is the perfect spot to get started with your company.</p>
+        <h1><b>Realização</b> Instrutores</h1>
+        <p>Agracer aos instrutores que tiraram as dúvidas e guiando.</p>
       </div>
     </div>
-
+    
     <div class="services">
       <p class="sub-headline">
         Inicialmente, contávamos com vários alunos, mas com o tempo, ficaram aqueles que realmente se interessam pela área. Como idealizadores, reunimos nossos conhecimentos para realizar o evento, com a ajuda da instrutora Bruna Estefani e do Luiz Gustavo. 
       </p>
       <br>
       <div class="aboutusimgContainer">
-        <img src="./img/conheca-1.jpg" alt="" class="conhecaImg" id="Programador" />
-        <img src="./img/conheca-2.jpg" alt="" class="conhecaImg"/>
+        <img src="./img/conheca-1.jpg" alt="" class="imagesBlock" id="Programador"/>
+        <img src="./img/grupo-4.jpg" alt="" class="imagesBlock" id="Programador"/>
+        <img src="./img/grupo-7.jpg" alt="" class="imagesBlock" id="Programador"/>
+        <img src="./img/conheca-2.jpg" alt="" class="imagesBlock" id="Programador"/>
+        <img src="./img/grupo-5.jpg" alt="" class="imagesBlock" id="Programador"/>
+        <img src="./img/grupo-6.jpg" alt="" class="imagesBlock" id="Programador"/>
       </div>
       <br>
       <p class="sub-headline">
@@ -118,21 +122,19 @@ <h1>Ambiente Colaborativo</h1>
           <div class="offerDesc">
             <h1>Avaliação dos alunos</h1>
             <p>
-              What is a Crypto-Mining Malware and Why You MUST Protect Against
-              Them
+              Feedbacks com alunos conhecido como trilha do aprendizado.
             </p>
           </div>
         </div>
       </div>
     </div>
 
-    <!-- Play Video -->
+    <!-- Imagem do grupo -->
     <section class="videoSection">
-      <h1 class="videoSectionHeader">O Video.</h1>
+      <h1 class="videoSectionHeader">O grupo</h1>
       <div class="videoContainer">
         <div class="video">
-          <img src="./img/about-video.jpg" class="thumbnail" alt="" />
-          <img src="./img/video-play-icon-white.svg" class="playIcon" alt="" />
+          <img src="./img/conheca-1.jpg" class="thumbnail imagesBlock" alt="" />
         </div>
         <p>
           No trailer nos deparamos com evolução das ténologias desde o início,
@@ -230,7 +232,7 @@ <h1 class="sectionHeader">Avalie sua Experiência no Site</h1>
             Deixe seu Feedback para os desenvolvedores, Agradecido!
           </p>
         </div>
-        <a href="https://docs.google.com/forms/d/e/1FAIpQLSdYKqUSNiXhlb1R_rwDb-14gPTeM5TWgQZ38eyReqPvOvLxOg/viewform?vc=0&c=0&w=1&flr=0"><button class="btn primaryBtn">Contribua :)</button></a>
+        <a href="https://docs.google.com/forms/d/e/1FAIpQLSdYKqUSNiXhlb1R_rwDb-14gPTeM5TWgQZ38eyReqPvOvLxOg/viewform?vc=0&c=0&w=1&flr=0"><button class="btn primaryBtn">Contribua agora ;)</button></a>
       </div>
 
       <div class="footerlinksContainer">

contact.html

@@ -5,8 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sintec - Inscrição</title>
     <link rel="stylesheet" href="./commonStyle.css">
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="./style.css">
 
+    <link rel="stylesheet" href="./ModalEventos.css">
     <script src="https://kit.fontawesome.com/aa7454d09f.js" crossorigin="anonymous"></script>
     <link rel="shortcut icon" href="./img/logo-mini.ico" type="image/x-icon">
 </head>
@@ -68,7 +69,7 @@ <h2>Regulamento da Maratona</h2>
                 Leia as regras no botão abaixo, terá todas as informações que você precisa:
             </p>
             <div class="regulamentoBtn">
-                <a href=""><button class="btn carouselBtn" >Regulamento</button></a>
+              <button class="btn carouselBtn" onclick="window.dialogMar.showModal();">Regulamento</button>
             </div>
 
             <!-- segundo regulamento -->
@@ -84,7 +85,7 @@ <h2>Regulamento do Campeonato de Jogos</h2>
                 <span class="cinzaText"> Leia as regras no botão abaixo, terá todas as informações que você precisa:</span>
             </p>
             <div class="regulamentoBtn">
-                <a href=""><button class="btn carouselBtn" >Regulamento</button></a>
+                <button class="btn carouselBtn" onclick="window.dialogGame.showModal();">Regulamento</button>
             </div>
 
     </section>
@@ -155,6 +156,40 @@ <h1 class="linkTitle">Resource</h1>
              https://github.com/felipetaua" class="developedBy" target="_blank">felipetauaSystems</a>.</p>
         </div>
     </footer>
+
+    <div class="modal">
+      <!-- Modal dias da semana seg a sexta  dialogGame-->
+    <div class="modal"> 
+        <dialog id="dialogMar">
+            <h2 class="carouselTitle">Maratona - 14/10/2024</h2>
+            <p class="carouselPara">
+            <h3> Abertura do evento</h3>
+            Convidados da área da tecnologia farão um bate-papo com alunos esclarecendo dúvidas mostrando como é o mercado, que erros não cometer é importante guardar as perguntas para se fazer!
+            </p>
+            <br>
+            <p class="carouselPara"><b><i class="fa-solid fa-location-dot"></i> Local</b>: Auditório do SENAC</p>
+            <p class="carouselPara"><b><i class="fa-solid fa-moon"></i> Período</b>: Noturno</p>
+            <p class="carouselPara"><b><i class="fa-solid fa-clock"></i> Horário</b>: Início as 00:00</p>
+
+            <button onclick="window.dialogMar.close();" aria-label="close" class="x">❌</button>
+        </dialog>
+
+        <dialog id="dialogGame">
+            <h2 class="carouselTitle">Campeonato de Jogos - 14/10/2024</h2>
+            <p class="carouselPara">
+            <h3> Abertura do evento</h3>
+            Convidados da área da tecnologia farão um bate-papo com alunos esclarecendo dúvidas mostrando como é o mercado, que erros não cometer é importante guardar as perguntas para se fazer!
+            </p>
+            <br>
+            <p class="carouselPara"><b><i class="fa-solid fa-location-dot"></i> Local</b>: Auditório do SENAC</p>
+            <p class="carouselPara"><b><i class="fa-solid fa-moon"></i> Período</b>: Noturno</p>
+            <p class="carouselPara"><b><i class="fa-solid fa-clock"></i> Horário</b>: Início as 00:00</p>
+
+            <button onclick="window.dialogGame.close();" aria-label="close" class="x">❌</button>
+        </dialog>
+
+    </div>
+
     <script src="https://unpkg.com/scrollreveal"></script>
     <script src="./script.js"></script>    
 </body>

index.html

@@ -255,7 +255,7 @@ <h1 class="sectionHeader">O grupo</h1>
         </div>
 
         <div class="sectionPic dashboardPic">
-            <img src="./img/O-grupo.png" alt="A turma do técnico" class="oGrupoImg">
+            <img src="./img/O-grupo.png" alt="A turma do técnico" class="oGrupoImg imagesBlock">
         </div>
 
     </section>

style.css

@@ -870,3 +870,7 @@ footer {
     font-size: 3.5rem;
   }
 }
+
+.imagesBlock {
+  pointer-events: none;
+}