15/09

criadora.css

@@ -1,85 +1,97 @@
-body {
-  font-family: 'Arial', sans-serif;
-  margin: 0;
-  padding: 0;
-  color: black;
-  background: white;
+@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;700&display=swap');
+
+:root {
+--cor-de-fundo-titulo-principal:  #F4D03F; 
+--background-image: linear-gradient(132deg, #F4D03F 0%, #16A085 100%);
+--verde-claro: rgb(0, 255, 0);
+--branco: white;
+--preto: black;
+--botao-ativo: rgb(0, 88, 0);
+--botao-inativo:rgb(0, 51, 0);
+--texto-fundo: rgb(0, 28, 0);
+}
+
+html, body {
+font-family: 'Arial', sans-serif;
+margin: 0;
+padding: 0;
+height: 100%;
+width: 100%;
+color: var(--branco);
+background: var(--preto);
 }
 
 header {
-  color: black;
-  background: white;
-  padding: 10px 0px;
+color: black;
+background: white;
+padding: 10px 0px;
 }
 
 .caixa {
-  position: relative;
-  margin: 0 auto;
-  flex-wrap: wrap;
+position: relative;
+margin: 0 auto;
+flex-wrap: wrap;
 }
 
 .caixa h1 {
-  font-size: 25px;
-  color: rgb(0, 69, 0);
-  padding-left: 85px;
+font-size: 25px;
+color: rgb(0, 69, 0);
+padding-left: 85px;
+padding-bottom: 29px;
 }
 
 .caixa ul {
-  padding-right: 85px;
+padding-right: 85px;
 }
 
 nav {
-  position: absolute;
-  top: 0px;
-  right: 0;
+position: absolute;
+top: 20px;
+right: 0;
 }
 
 nav li {
-  display: inline;
-  margin: 0 0 0 15px;
+display: inline;
+margin: 0 0 0 15px;
 }
 
 nav a {
-  color: black;
-  font-weight: bold;
-  font-size: 20px;
-  text-decoration: none;
+color: black;
+font-weight: bold;
+font-size: 20px;
+text-decoration: none;
 }
 
 nav a:hover {
-  color: rgb(138, 59, 125);
-  text-decoration: underline;
+color: rgb(138, 59, 125);
+text-decoration: underline;
 }
 
 .titulo-principal {
-  background-color: #F4D03F;
-  background-image: linear-gradient(132deg, #F4D03F 0%, #16A085 100%);
-  color: white;
-  padding: 20px;
-  font-size: 16px;
-  flex-wrap: wrap;
-}
-
-.titulo-principal h1{
-  text-align: center;
-  font-size: 50px;
-  opacity: 0; /* Inicialmente invisível */
-  transform: translateY(-50px); /* Posição inicial acima */
-  animation: titleEntrance 1s forwards; /* Animação de entrada */
+font-size: 23px;
+color: white;
+background-color: var(--cor-de-fundo-titulo-principal);
+background-image: var(--background-image);
+flex-wrap: wrap;
+text-align: center;
+font-family: "Chakra Petch", sans-serif;
+font-weight: 400;
+font-style: normal;
+padding: 5px;
 }
 
 h1 {
-  opacity: 0; /* Inicialmente invisível */
-  transform: translateY(-50px); /* Posição inicial acima */
-  animation: titleEntrance 1s forwards; /* Animação de entrada */
+opacity: 0; /* Inicialmente invisível */
+transform: translateY(-50px); /* Posição inicial acima */
+animation: titleEntrance 1s forwards; /* Animação de entrada */
 }
 
 /* Animação de entrada */
 @keyframes titleEntrance {
-  to {
-    opacity: 1; /* Torna o título visível */
-    transform: translateY(0); /* Retorna à posição original */
-  }
+to {
+  opacity: 1; /* Torna o título visível */
+  transform: translateY(0); /* Retorna à posição original */
+}
 }
 
 p {

index.html

@@ -198,49 +198,53 @@ <h2>Conclusão</h2>
             <button class="botao">Adquiriram ética ambiental</button>
           </div>
 
-          <h2>Questões acertadas</h2>
-          <ul>
-            <li>11 equipes jogaram;</li>
-            <li>Todas as equipes responderam pelo menos uma questão;</li>
-            <li>Apenas uma equipe errou uma questão;</li>
-            <li>90% da turma acertou.</li>
-          </ul>
-
-<canvas id="meuGrafico"></canvas>
+          <h2>Estatísticas</h2>
+
+  <div class="estatisticas">
+    <canvas id="meuGrafico"></canvas>
+    <script>
+      var ctx = document.getElementById('meuGrafico').getContext('2d');
+      var meuGrafico = new Chart(ctx, {
+        type: 'pie', // Tipo de gráfico
+        data: {
+          labels: ['Questões acertadas', 'Questões erradas'], // Rótulos
+          datasets: [{
+            label: 'Quantidade de equipes',
+            data: [10, 1], // Dados para o gráfico
+            backgroundColor: [
+              'lightgreen',
+              'lightcoral'
+            ],
 
-<script>
-  var ctx = document.getElementById('meuGrafico').getContext('2d');
-  var meuGrafico = new Chart(ctx, {
-    type: 'pie', // Tipo de gráfico
-    data: {
-      labels: ['Questões acertadas', 'Questões erradas'], // Rótulos
-      datasets: [{
-        label: 'Quantidade de equipes',
-        data: [10, 1], // Dados para o gráfico
-        backgroundColor: [
-          'green',
-          'red'
-        ],
-        borderColor: [
-          'green',
-          'red'
-        ],
-        borderWidth: 1
-      }]
-    },
-    options: {
-      responsive: true, // Gráfico responsivo
-      plugins: {
-        legend: {
-          position: 'top', // Posição da legenda
+            borderColor: [
+              'green',
+              'red'
+            ],
+            borderWidth: 1
+          }]
+        },
+        options: {
+          responsive: true, // Gráfico responsivo
+          plugins: {
+            legend: {
+              position: 'top', // Posição da legenda
+            }
+          }
         }
-      }
-    }
-  });
-</script>
+      });
+    </script>
+    <ul>
+      <li>11 equipes jogaram;</li>
+      <li>Todas as equipes responderam pelo menos uma questão;</li>
+      <li>Apenas uma equipe errou uma questão;</li>
+      <li>90% da turma acertou;</li>
+      <li>A questão errada foi trabalhada novamente para que a equipe pudesse entender o porquê estava errado.</li>
+    </ul>
+  </div>
 
 
         <div class="imagens-conclusão">
+          <h2>Imagens da aplicação do projeto com os alunos do fundamental I</h2>
 
           <div class="carousel-container">
             <div class="carousel-controls left" onclick="changeDepoimento(-1)">&#10094;</div>

style.css

@@ -45,7 +45,7 @@ header {
 
 nav {
   position: absolute;
-  top: 0px;
+  top: 20px;
   right: 0;
 }
 
@@ -94,10 +94,9 @@ h2 {
   background-image: var(--background-image);
   flex-wrap: wrap;
   text-align: center;
-  font-family: "Anton SC", sans-serif;
+  font-family: "Chakra Petch", sans-serif;
   font-weight: 400;
   font-style: normal;
-
 }
 
 .titulo-principal h1 {
@@ -331,7 +330,8 @@ font-size: 22px;
 }
 
 .Resultados {
-  padding: 80px;
+  padding: 60px;
+  width: 100%; /* A largura da div se ajustará ao tamanho da tela */
 }
 
 .Resultados li {
@@ -346,21 +346,33 @@ font-size: 22px;
   text-decoration: none;
 }
 
+.estatisticas {
+  display: flex;
+  justify-content: center; /* Centraliza horizontalmente */
+  align-items: center;    /* Centraliza verticalmente */
+  height: 80vh;          /* Opcional, ajusta a altura da div */
+  padding: 10px;
+}
+
+.estatisticas h2 {
+  padding: 0px;
+}
+
 #meuGrafico {
-  width: 6%; /* Ajuste a largura */
-  height: 5%;
+  max-width: 350px;   /* Largura do gráfico */
+  max-height: 250px;  /* Altura do gráfico */
 }
 
-.Resultados img {
+.imagens-conclusão img {
   display: block;
-  padding: 25px;
-  max-width: 600px;
-  max-height: 550px;
+  padding: 1px;
+  max-width: 300px;
+  max-height: 450px;
 }
 
 .imagens-conclusao {
   font-size: 18px;
-  padding: 10px;
+  padding: 0px;
   color: white;
   background-image: linear-gradient(to right, #4CB8C4 0%, #3CD3AD  51%, #4CB8C4  100%);
 }
@@ -369,37 +381,40 @@ font-size: 22px;
   display: flex;
   flex-direction: column;
   align-items: center; /* Alinhar verticalmente */
-  gap: 20px; /* Espaçamento entre texto e imagem */
+  gap: 0px; /* Espaçamento entre texto e imagem */
+  padding: 0px;
 }
 
 blockquote {
-  padding: 5px;
+  padding: 0px;
   }
 
-  .carousel-container {
-    position: relative;
-    max-width: 700px;
-    margin: auto;
-    text-align: center;
-  }
+.carousel-container {
+  position: relative;
+  max-width: 700px;
+  margin: auto;
+  text-align: center;
+}
 
-  .carousel-controls {
-    position: absolute;
-    top: 50%;
-    font-size: 80px;
-    color: black;
-    padding: 16px;
-    cursor: pointer;
-    transform: translateY(-50%);
-    user-select: none;
-  }
+.carousel-controls {
+  position: absolute;
+  top: 50%;
+  font-size: 70px;
+  color: black;
+  padding: 16px;
+  cursor: pointer;
+  transform: translateY(-50%);
+  user-select: none;
+}
 
   .carousel-controls.left {
-    left: -50px;
+    left: 0px;
+    padding: 0px 0px;
   }
 
   .carousel-controls.right {
-    right: -50px;
+    right: 0px;
+    padding: 0px 0px;
   }
 
   blockquote {
@@ -430,8 +445,8 @@ blockquote {
     background-repeat: no-repeat; /* Evita a repetição da imagem */
     color: white; /* Define a cor do texto */
     text-align: center; /* Centraliza o texto */
-    padding: 50px; /* Adiciona espaço ao redor do texto */
-    height: 700px; /* Define a altura da div */
+    padding: 10px; /* Adiciona espaço ao redor do texto */
+    height: 800px; /* Define a altura da div */
     display: flex;
     justify-content: center;
     align-items: center;
@@ -445,11 +460,11 @@ blockquote {
  .acessar-jogo ul {
     font-size: 25px;
     color: white;
-    padding-top: 420px;
+    padding-top: 400px;
  }
 
  .acessar-jogo h2 {
-  font-size: 60px;
+  font-size: 50px;
   font-family: "Merriweather", serif;
  }