From 59843403c6bdfccf9e6a399019a5f0d0dd9a7522 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sibelly=20Vit=C3=B3ria?=
 <133239677+sibellyvih@users.noreply.github.com>
Date: Wed, 15 May 2024 09:05:46 -0300
Subject: [PATCH] atualizando css e html

---
 index.html |  23 +--
 style.css  | 502 +++++++++++++++++++++++++++++------------------------
 2 files changed, 289 insertions(+), 236 deletions(-)

diff --git a/index.html b/index.html
index 19625ce..af52b65 100644
--- a/index.html
+++ b/index.html
@@ -31,7 +31,6 @@ <h1>DICAS DE INTERCÂMBIO</h1>
     </div>
 
     <div class="container">
-
     <main>
       <div class="beneficios">
       <h2>Os benefícios em fazer um intercâmbio</h2>
@@ -54,6 +53,7 @@ <h2>Os benefícios em fazer um intercâmbio</h2>
       <br>
     </div>
     </main>
+      </div>
 
        <div class="depoimentos">
         <div class="carousel-controls left" onclick="changeDepoimento(-1)">&#10094;</div>
@@ -130,14 +130,17 @@ <h2>Depoimentos</h2>
         // Exibe o primeiro depoimento ao carregar a página
         showDepoimento(currentIndex);
       </script>
-
-    <section class="objetivos">
-      <h2 class"objetivo-titulo">Meus objetivos de viagem</h2>
-      <button class="botoes">Países que quero conhecer</button>
-      <button class="botoes">Viagens para esse ano</button>
-      <button class="botoes">Viagens futuras</button>
-      <button class="botoes">Datas de embarque</button>
-    </section>
+      
+      <section class="objetivos-principais">
+       <h2 class="objetivos-principais">Meus Objetivos do ano<span>_</span></h2>
+        <div class="topicos">
+        <button class="topico">Países que quero conhecer</button>
+        <button class="topico">Viagens para esse ano</button>
+        <button class="topico">Viagens futuras</button>
+        <button class="topico">Datas de embarque</button>
+        </div>
+      </section>
+      
       
   <div class="jogo">
     <h2>English Travel Game</h2>
@@ -159,4 +162,4 @@ <h2><strong>Dicas de Intercâmbio<br>
         </footer>
 
        </body>
-      </html>
+      </html>
\ No newline at end of file
diff --git a/style.css b/style.css
index 717dc6e..f6b8fce 100644
--- a/style.css
+++ b/style.css
@@ -1,245 +1,295 @@
 body {
-    font-family: 'Arial', sans-serif;
-    margin: 0;
-    padding: 0;
-    color: black;
-    background: white;
-  }
-  
-  header {
-    color: black;
-    background: white;
-    padding: 20px 0;
-  }
-  
-  .caixa {
-    position: relative;
-    width: 940px;
-    margin: 0 auto;
-  }
-  
-  nav {
-    position: absolute;
-    top: 0px;
-    right: 0;
-  }
-  
-  nav li {
-    display: inline;
-    margin: 0 0 0 15px;
-  }
-  
-  nav a {
-    color: black;
-    font-weight: bold;
-    font-size: 20px;
-    text-decoration: none;
-  }
-  
-  nav a:hover {
-    color: rgb(138, 59, 125);
-    text-decoration: underline;
+  font-family: 'Arial', sans-serif;
+  margin: 0;
+  padding: 0;
+  color: black;
+  background: white;
+}
+
+header {
+  color: black;
+  background: white;
+  padding: 20px 0;
+}
+
+.caixa {
+  position: relative;
+  width: 940px;
+  margin: 0 auto;
+}
+
+nav {
+  position: absolute;
+  top: 0px;
+  right: 0;
+}
+
+nav li {
+  display: inline;
+  margin: 0 0 0 15px;
+}
+
+nav a {
+  color: black;
+  font-weight: bold;
+  font-size: 20px;
+  text-decoration: none;
+}
+
+nav a:hover {
+  color: rgb(138, 59, 125);
+  text-decoration: underline;
+}
+
+h1 {
+    opacity: 0; /* Inicialmente invisível */
+    transform: translateY(-50px); /* Posição inicial acima */
+    animation: titleEntrance 1s forwards; /* Animação de entrada */
   }
-  
-  h1 {
-      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 */
-      }
+
+  /* Animação de entrada */
+  @keyframes titleEntrance {
+    to {
+      opacity: 1; /* Torna o título visível */
+      transform: translateY(0); /* Retorna à posição original */
     }
-  
-  h2 {
-    text-align: center;
-    padding: 20px 0;
-    font-size: 32px;
-  }
-  
-  .titulo-principal {
-    font-size: 30px;
-    color: white;
-    background-color: #8BC6EC;
-    background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
-    padding: 320px 0;
-    text-align: center;
-  }
-  
-  .subtitulo {
-   font-size: 18px;
-   opacity: 0; /* Inicialmente invisível */
-      transform: translateY(-50px); /* Posição inicial acima */
-      animation: titleEntrance 1s forwards; /* Animação de entrada */
-  }
-  
-  .botoes {
-    text-align: center;
   }
 
-  .botao {
-    font-size: 20px;
-    background-image: linear-gradient(to right, #8EC5FC 0%, #A7BFE8  51%, #6190E8  100%);
-    margin: 10px;
-    padding: 5px 5px;
-    transition: 0.5s;
-    background-size: 200% auto;
-    color: black;            
-    box-shadow: 0 0 10px #eee;
-    border-radius: 10px;
-    border: white;
-  }
+h2 {
+  text-align: center;
+  padding: 20px 0;
+  font-size: 32px;
+}
 
-  .botao:hover {
-    background-position: right center; /* change the direction of the change here */
-    color: black;
-    text-decoration: none;
-  }
- 
-  main p {
-    color: black;
-    font-size: 18px;
-    text-align: center;
-    padding: 0px;
-  }
-  
-  .depoimentos {
-    width: 60%;
-    margin: 0 auto;
-    text-align: center;
-    position: relative; /* Adicionado para posicionar as setas */
-  }
+.titulo-principal {
+  font-size: 30px;
+  color: white;
+  background-color: #8BC6EC;
+  background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
+  padding: 320px 0;
+  text-align: center;
+}
 
-  .depoimentos blockquote {
-    display: none;
-  }
+.subtitulo {
+ font-size: 18px;
+ opacity: 0; /* Inicialmente invisível */
+    transform: translateY(-50px); /* Posição inicial acima */
+    animation: titleEntrance 1s forwards; /* Animação de entrada */
+}
 
-  .depoimentos blockquote.active {
-    display: block;
-  }
+.botoes {
+  text-align: center;
+}
 
-  .carousel-controls {
-    font-size: 24px;
-    cursor: pointer;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    transition: transform 0.3s, font-size 0.3s;
-  }
-  
-  .carousel-controls.left {
-    left: 10px;
-    font-size: 40px;
-  }
-  
-  .carousel-controls.right {
-    right: 10px;
-    font-size: 40px;
-  }
+.botao {
+  font-size: 20px;
+  background-image: linear-gradient(to right, #8EC5FC 0%, #A7BFE8  51%, #6190E8  100%);
+  margin: 10px;
+  padding: 5px 5px;
+  transition: 0.5s;
+  background-size: 200% auto;
+  color: black;            
+  box-shadow: 0 0 10px #eee;
+  border-radius: 10px;
+  border: white;
+}
 
-  .carousel-controls:hover {
-    transform: translateY(-50%) scale(1.2); /* Ajuste o valor de escala conforme necessário */
-    font-size: 28px; /* Ajuste o tamanho da fonte conforme necessário */
-  }
+.botao:hover {
+  background-position: right center; /* change the direction of the change here */
+  color: black;
+  text-decoration: none;
+}
 
-  img {
-    max-width: 500px;
-    max-height: 450px;
-    margin: auto;
-    display: block;
-  }
-  
-  figcaption {
-  font: italic smaller sans-serif;
+main p {
+  color: black;
+  font-size: 18px;
+  text-align: center;
   padding: 0px;
+}
+
+.depoimentos {
+  width: 60%;
+  margin: 0 auto;
   text-align: center;
+  position: relative; /* Adicionado para posicionar as setas */
+}
+
+.depoimentos blockquote {
+  display: none;
+}
+
+.depoimentos blockquote.active {
+  display: block;
+}
+
+.carousel-controls {
+  font-size: 24px;
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  transition: transform 0.3s, font-size 0.3s;
+}
+
+.carousel-controls.left {
+  left: 10px;
+  font-size: 40px;
+}
+
+.carousel-controls.right {
+  right: 10px;
+  font-size: 40px;
+}
+
+.carousel-controls:hover {
+  transform: translateY(-50%) scale(1.2); /* Ajuste o valor de escala conforme necessário */
+  font-size: 28px; /* Ajuste o tamanho da fonte conforme necessário */
+}
+
+img {
+  max-width: 500px;
+  max-height: 450px;
+  margin: auto;
+  display: block;
+}
+
+figcaption {
+font: italic smaller sans-serif;
+padding: 0px;
+text-align: center;
+font-size: 18px;
+}
+
+blockquote {
+padding: 5px;
+}
+
+footer {
+  padding: 0px;
+}
+
+ .depoimentos {
   font-size: 18px;
-  }
-  
-  blockquote {
-  padding: 5px;
-  }
-  
-  footer {
-    padding: 0px;
-  }
-  
-   .depoimentos {
-    font-size: 18px;
-    color: white;
-    background: rgb(238, 174, 202);
-    background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);
-  }
-  
-  .content {
-    display: flex;
-    align-items: center; /* Alinhar verticalmente */
-    gap: 20px; /* Espaçamento entre texto e imagem */
-  }
-  
-  .depoimentos_img {
-    max-width: 400px;
-    max-height: 350px;
-    margin: auto;
-    display: block;
-  }
-  
-  .name {
-  font-size: 23px;
-  text-align: right;
-  padding: 5px;
-  }
+  color: white;
+  background: rgb(238, 174, 202);
+  background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);
+}
 
-  .objetivos {
-    display:flex;
-    flex-direction:column;
-    justify-content:center;
-    align-items:center;
-    max-width: 1200px;
-    width: 100%;
-    margin: 0 auto;
-  }
-  
-  .objetivo-titulo {
-    text-align: left;
-    width: 100%;
-    font-size: 32px;
-  }
-  
-  .jogo {
-    text-align: center;
-  }
-  
-  .jogo p {
-    font-size: 20px;
-    padding: 20px;
-  }
-  
-  .rodape {
-    font-size: 18px;
-    padding: 40px 0;
-    text-align: center;
-    background: rgb(50, 48, 96);
-    color: white;
+.content {
+  display: flex;
+  align-items: center; /* Alinhar verticalmente */
+  gap: 20px; /* Espaçamento entre texto e imagem */
+}
+
+.depoimentos_img {
+  max-width: 400px;
+  max-height: 350px;
+  margin: auto;
+  display: block;
+}
+
+.name {
+font-size: 23px;
+text-align: right;
+padding: 5px;
+}
+
+.objetivos-principais {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  max-width: 1200px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.objetivo-titulo {
+  text-align: left;
+  width: 100%;
+  font-size: 32px;
+}
+
+.objetivos-principais span {
+  color: rgb(226,21,57);
+}
+
+.topico {
+  font-family: "Crakra Petch", sans-serif;
+  background-color: #3F51B5;
+  color: white;
+  display: flex;
+  justify-content: center;
+  padding: 1em;
+  font-size: 18px;
+  align-items: center;
+  width: 100%;
+  border-bottom: 4px solid; 
+  border-left: 2px solid; 
+  border-right: 2px solid; 
+  border-top: none;
+}
+
+.topico:first-child {
+  border-radius: 40px 40px 0 0;
+}
+
+@media screen and (min-width: 768px) {
+  .topicos {
+      display: flex;
   }
-  
-  .rodape img {
-    max-height: 40px; /* Ajuste a altura da imagem */
+
+  .topico:first-child {
+      border-radius: 40px 0 0 0;
   }
-  
-  .rodape .redes-sociais {
-    display: flex;
-    justify-content: center; /* Centralizar horizontalmente */
-    margin: 0 20px;
+
+  .topico:last-child {
+      border-radius: 0 40px 0 0;
   }
-  
-  .copyright {
-    color: #FFFFFF;
-    font-size: 13px;
-    margin: 20px 0 0;
-    padding: 10px;
+}
+
+
+.topicos {
+  display: block;
+}
+
+@media screen and (min-width: 768px) {
+  .topicos {
+      display: flex;
   }
+
+
+.jogo {
+  text-align: center;
+}
+
+.jogo p {
+ font-size: 20px;
+  padding: 20px;
+}
+
+.rodape {
+  font-size: 18px;
+  padding: 40px 0;
+  text-align: center;
+  background: rgb(50, 48, 96);
+  color: white;
+}
+
+.rodape img {
+  max-height: 40px; /* Ajuste a altura da imagem */
+}
+
+.rodape .redes-sociais {
+  display: flex;
+  justify-content: center; /* Centralizar horizontalmente */
+  margin: 0 20px;
+}
+
+.copyright {
+  color: #FFFFFF;
+  font-size: 13px;
+  margin: 20px 0 0;
+  padding: 10px;
+}
+}
\ No newline at end of file