Animações-lading-page

ifpi-picos · Sep 25, 2024 · 3a0b279 · 3a0b279
1 parent 1ca25ab
commit 3a0b279
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 109 deletions.
diff --git a/css/index.css b/css/index.css
@@ -1,4 +1,3 @@
-/* Importação de fontes */
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap");
 
@@ -10,6 +9,7 @@
   text-decoration: none;
   list-style: none;
   scroll-behavior: smooth;
+  scroll-padding-top: 20px;
 }
 
 body {
@@ -42,7 +42,7 @@ button:hover {
   background: #bf5947;
   color: #fff;
   opacity: 70%;
-  transition: background 0.5s, color 0.5s;
+  transition: 0.5s, color 0.5s;
 }
 
 /* Cabeçalho */
@@ -64,6 +64,7 @@ nav {
   backdrop-filter: blur(10px);
   justify-content: center;
   align-items: center;
+  z-index:1;
 }
 
 nav a {
@@ -77,12 +78,15 @@ nav a:hover {
 
 /* Página 1 */
 .pag1 {
-  background-color: #f8d7cd;
+  background-image: linear-gradient(#fabcb0,#f5dcd7);
+  height: 100vh;
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
+}
+
+.anipag1{
   display: flex;
   align-items: center;
   justify-content: space-evenly;
-  height: 100vh;
-  font-family: Verdana, Geneva, Tahoma, sans-serif;
 }
 
 .pag1 button {
@@ -100,16 +104,13 @@ nav a:hover {
 }
 
 
-.topico1, .topico2, .topico3 {
-  margin-top: 70px;
-  height: 310px;
-  margin-bottom: 20px;
-}
-
-.topico1, .topico2, .topico3 {
+.topico1, .topico2, .topico3{
   display: flex;
   flex-direction: row;
   justify-content: space-around;
+  margin-top: 70px;
+  height: 310px;
+  margin-bottom: 20px;
 }
 
 .texto1, .texto2, .texto3 {
@@ -128,27 +129,27 @@ nav a:hover {
   color: #bc6d5d;
 }
 
-/* Rodapé */
-footer {
+/*Página 3 */
+.pag3 {
   background-color: #f8d7cd;
-  width: 100%; /* Ocupa toda a largura da página */
+  width: 100%;
   padding: 30px 0;
   box-sizing: border-box;
 }
 .pf{
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
-  text-align: left; /* Alinha o texto à esquerda */
-  padding-right: 150px; /* Espaço da borda direita */
+  text-align: left; 
+  padding-right: 150px; 
   padding-left: 100px;
-  margin-bottom: 30px; /* Espaço abaixo da seção de perguntas frequentes */
+  margin-bottom: 30px; 
   margin-top: 20px;
 }
 
 .perguntas {
-  text-align: left; /* Alinha o texto à esquerda */
-  padding-right: 150px; /* Espaço da borda direita */
+  text-align: left; 
+  padding-right: 150px; 
   padding-left: 500px;
-  margin-bottom: 100px; /* Espaço abaixo da seção de perguntas frequentes */
+  margin-bottom: 100px; 
 
 }
 
@@ -166,9 +167,9 @@ footer {
 
 .perguntas hr {
   border: 0;
-  height: 1px; /* Ajusta a altura da linha para visualização mais fina */
-  background-color: #36140e; /* Cor da linha */
-  margin: 10px 0; /* Espaçamento em torno da linha */
+  height: 1px; 
+  background-color: #36140e; 
+  margin: 10px 0; 
 }
 
 .perguntas h3 {
@@ -177,21 +178,22 @@ footer {
   font-size: 18px;
 }
 
-.footer-content {
+/*Rodapé*/
+footer {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
-  max-width: 1400px; /* Define a largura máxima para centralizar */
-  margin: 0 auto; /* Centraliza o conteúdo horizontalmente */
-  padding: 0 20px; /* Adiciona um pequeno espaçamento interno nas laterais */
+  max-width: 1400px; 
+  margin: 0 auto;
+  padding: 0 20px;
   box-sizing: border-box;
   margin-top: 50px;
 }
 
 .footer-col {
-  flex: 1; /* Permite que cada coluna ocupe uma quantidade igual de espaço */
-  min-width: 250px; /* Define uma largura mínima para cada coluna */
-  margin: 10px; /* Adiciona margem ao redor das colunas */
+  flex: 1; 
+  min-width: 250px; 
+  margin: 10px; 
 }
 
 .footer-col h3 {
@@ -201,19 +203,19 @@ footer {
   font-size: large;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   color: #36140e;
-  text-align: center; /* Centraliza o título */
+  text-align: center; 
 }
 
 .footer-col p, .footer-col ul {
   color: #36140e;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-size: small;
-  text-align: center; /* Centraliza o texto do parágrafo e lista */
+  text-align: center; 
 }
 
 .footer-col ul {
-  list-style-type: none; /* Remove os marcadores da lista */
-  padding: 0; /* Remove o padding */
+  list-style-type: none; 
+  padding: 0;
 }
 
 .footer-col ul li {
@@ -230,28 +232,28 @@ footer {
 
 .logo-nome {
   display: flex;
-  align-items: center; /* Alinha verticalmente a logo e o nome */
-  justify-content: flex-start; /* Alinha à esquerda */
+  align-items: center; 
+  justify-content: flex-start; 
   flex: 1;
 }
 
 .img-logo img {
-  border-radius: 50%; /* Faz a logo ficar redonda */
-  width: 70px; /* Define o tamanho da logo */
-  height: 70px; /* Define o tamanho da logo */
-  margin-right: 15px; /* Espaço entre a logo e o nome */
+  border-radius: 50%; 
+  width: 70px;
+  height: 70px; 
+  margin-right: 15px; 
   border: 1px solid #000000;
 }
 
 .nome-redes {
   display: flex;
   flex-direction: column;
-  align-items: flex-start; /* Alinha o texto e ícones à esquerda */
+  align-items: flex-start;
 }
 
 .nome-redes h3 {
   margin: 0;
-  font-size: 24px; /* Ajusta o tamanho da fonte do nome */
+  font-size: 24px;
 }
 
 .redes-sociais {
@@ -263,33 +265,3 @@ footer {
   color: #36140e;
   font-size: x-large;
 }
-
-@media (max-width: 768px) {
-  .footer-content {
-    flex-direction: column; /* Empilha as colunas verticalmente */
-    padding: 0 10px;
-  }
-
-  .footer-col {
-    width: 100%; /* Em telas pequenas, ocupa toda a largura */
-    margin: 10px 0;
-  }
-
-  .perguntas {
-    max-width: 100%;
-    margin: 10px 0;
-    padding-right: 0;
-  }
-}
-/* Compensar a altura do cabeçalho fixo ao rolar para as seções */
-html {
-  scroll-behavior: smooth;
-}
-
-body {
-  scroll-padding-top: 80px; /* Ajuste este valor para a altura do seu cabeçalho */
-}
-
-
-
-
diff --git a/index.html b/index.html
@@ -6,15 +6,13 @@
     <title>Pretty Nails</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="css/index.css" />
-    <link rel="stylesheet" href="css/ani.css" />
 </head>
 <body>
     <!--Cabeçalho-->
-    <header>
+    <header class="Cabecalho">
         <nav>
             <a href="#inicio"><strong>Início</strong></a>
             <a href="#sobre"><strong>Sobre</strong></a>
-            <a href="#funcionalidades"><strong>Funcionalidades</strong></a>
             <a href="#Suporte"><strong>Suporte</strong></a>
             <a href="login.html"><button><strong>Cadastre-se</strong></button></a>
         </nav>
@@ -23,14 +21,16 @@
     <main>
         <!--Página 1: menu-->
         <div class="pag1" id="inicio">
-            <div>
-                <h3>A Focus in Beauty vos apresenta:</h3>
-                <h1><span>Pretty Nails!</span></h1>
-                <p>A demora no agendamento acabou!<br> Cadastre-se e aproveite sua experiência.</p>
-                <br>
-                <a href="#sobre"><button><strong>Saiba mais</strong></button></a>
+            <div class="anipag1">
+                <div>
+                    <h3>A Focus in Beauty vos apresenta:</h3>
+                    <h1><span>Pretty Nails!</span></h1>
+                    <p>A demora no agendamento acabou!<br> Cadastre-se e aproveite sua experiência.</p>
+                    <br>
+                    <a href="#sobre"><button><strong>Saiba mais</strong></button></a>
+                </div>
+                <img class="img1" src="imagens/manicure.png" alt="Manicure" />
             </div>
-            <img class="img1" src="imagens/manicure.png" alt="Manicure" />
         </div><!--fim de "pag1"-->
 
         <!--Página 2: sobre mim-->
@@ -72,7 +72,7 @@ <h3> - Valorização do seu trabalho; <br> - Auxílio; <br> - Facilidade; <br> -
         <div class="pag3"></div><!--fim de "pag3"-->
     </main>
 
-    <footer id="Suporte">
+    <div class="pag3" id="Suporte">
         <div class="pf">
             <h1>Perguntas Frequentes</h1>
         </div>
@@ -87,9 +87,10 @@ <h3>Como posso agendar um horário?</h3>
                 <hr>
             </div>
         </div>
+    </div>
         <hr>
 
-        <div class="footer-content">
+        <footer>
             <div class="footer-col logo-nome">
                 <div class="img-logo">
                     <img src="imagens/logo-app.jpg" alt="Logo do App">
@@ -134,29 +135,7 @@ <h3>Nos Contrate</h3>
                 </ul>
             </div>
         </div>
-    </footer>
-    <script>
-        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-          anchor.addEventListener('click', function(e) {
-            e.preventDefault();
-
-            document.querySelector(this.getAttribute('href')).scrollIntoView({
-              behavior: 'smooth',
-              block: 'start' // Garante que a seção fique no topo da tela
-            });
-          });
-        });
-            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-              anchor.addEventListener('click', function(e) {
-                e.preventDefault();
-
-                document.querySelector(this.getAttribute('href')).scrollIntoView({
-                  behavior: 'smooth',
-                  block: 'start' // Garante que a seção fique no topo da tela
-                });
-              });
-            });
-          </script>
-
 </body>
+<script src="js/ani_lading.js"></script>
+<script src="https://unpkg.com/scrollreveal"></script>
 </html>
diff --git a/js/ani_lading.js b/js/ani_lading.js
@@ -0,0 +1,31 @@
+document.addEventListener('DOMContentLoaded', function() {
+
+    ScrollReveal().reveal('.anipag1', {
+        origin: 'top',
+        easing: 'ease-out',
+        duration: 1000,
+        distance: '40%',
+    });
+
+    ScrollReveal().reveal('.topico1', {
+        origin: 'left',
+        easing: 'ease-out',
+        duration: 700,
+        distance: '40%'
+    });
+
+    ScrollReveal().reveal('.topico2', {
+        origin: 'right',
+        easing: 'ease-out',
+        duration: 700,
+        distance: '40%'
+    });
+
+    ScrollReveal().reveal('.topico3', {
+        origin: 'left',
+        easing: 'ease-out',
+        duration: 700,
+        distance: '40%'
+    });
+
+});