schoolofnetcom · Kzovsky · Aug 15, 2024 · Aug 15, 2024 · Aug 15, 2024 · Aug 15, 2024
diff --git a/clientes.html b/clientes.html
@@ -4,10 +4,13 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Clientes - Chatschool</title>
+  <title>Missão - SOS Animal</title>
   <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link href="css/pages/clientes.min.css" rel="stylesheet">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
 </head>
 <body>
 <header id="header" class="page-clientes">
@@ -23,7 +26,7 @@
           <ul>
             <li><a href="/">Home</a></li>
             <li><a href="quem-somos.html">Quem somos</a></li>
-            <li><a href="clientes.html" class="active">Clientes</a></li>
+            <li><a href="clientes.html" class="active">Missão</a></li>
             <li><a href="equipe.html">Equipe</a></li>
             <li><a href="contato.html">Contato</a></li>
           </ul>
@@ -32,73 +35,92 @@
     </div>
     <div class="row">
       <div class="col col-desktop-12 title">
-        <h1>Alta produtividade em tempo real</h1>
+        <h1>Valorizando nossos heróis de patas</h1>
       </div>
     </div>
   </div>
 </header>
 <main>
   <section id="customers" class="section section-center">
-    <h2>Nossos clientes</h2>
-    <p class="subtitle">Lorem ipsum dolor sit amet. Proin gravida nibh vel velit auctor aliquet</p>
+    <h2>Nossa Missão</h2>
+    <p class="subtitle">
+      Nossa missão é transformar a vida de animais abandonados e proporcionar-lhes uma segunda chance para um futuro melhor.<br> Comprometemo-nos a oferecer resgate, cuidado e adoção para animais em situação de vulnerabilidade, trabalhando<br> incansavelmente para garantir que cada um receba o amor e a atenção que merece.
+    </p>
 
     <div class="container">
       <div class="row">
-        <div class="col col-desktop-3 col-3"><img src="images/clientes/icon1.png" alt=""></div>
-        <div class="col col-desktop-3 col-3"><img src="images/clientes/icon2.png" alt=""></div>
-        <div class="col col-desktop-3 col-3"><img src="images/clientes/icon3.png" alt=""></div>
-        <div class="col col-desktop-3 col-3"><img src="images/clientes/icon4.png" alt=""></div>
-      </div>
+        <div class="col col-desktop-3 col-3">
+            <img src="images/clientes/missaoimagem1.jpg" alt="">
+            <h1 class="image-caption">Plano de Ação</h1>
+            <p>Resgatamos e reabilitamos animais abandonados, oferecendo cuidados veterinários e abrigo. Promovemos adoção responsável com campanhas e eventos, e fornecemos suporte contínuo aos adotantes para garantir uma adaptação bem-sucedida. Investimos em educação e conscientização sobre cuidados com animais e adoção, e incentivamos o engajamento comunitário através de eventos e oportunidades de voluntariado.</p>
+        </div>
+        <div class="col col-desktop-3 col-3">
+            <img src="images/clientes/missaoimagem2.jpg" alt="">
+            <h1 class="image-caption">Valores</h1>
+            <p>Nossa plataforma é guiada por compaixão ao tratar cada animal com cuidado e dignidade. Promovemos responsabilidade e transparência em todas as nossas ações, garantindo a confiança e o compromisso com nossos parceiros e adotantes. Valorizamos a dedicação em nosso trabalho, a colaboração com a comunidade, e investimos em educação para prevenir o abandono. Acreditamos no respeito à vida e na inclusividade, envolvendo todos em nossas iniciativas. Operamos com integridade e buscamos a sustentabilidade em nossas práticas para beneficiar tanto os animais quanto o meio ambiente.</p>
+        </div>
+        <div class="col col-desktop-3 col-3">
+            <img src="images/clientes/missaoimagem3.jpg" alt="">
+            <h1 class="image-caption">Visão</h1>
+            <p>Nossa visão é criar um mundo onde todos os animais abandonados tenham acesso a cuidados adequados e encontrem lares seguros e amorosos. Buscamos uma sociedade consciente e responsável, onde a posse responsável e o respeito pelos animais sejam valores amplamente praticados. Queremos transformar a forma como os animais são tratados, promovendo uma cultura de compaixão e apoio, e garantindo que cada animal tenha a oportunidade de viver uma vida digna e feliz.</p>
+        </div>
+        <div class="col col-desktop-3 col-3">
+            <img src="images/clientes/missaoimagem4.jpg" alt="">
+            <h1 class="image-caption">Metas</h1>
+            <p>Estabelecemos metas claras e específicas para orientar nossas ações e medir o sucesso do projeto. Essas metas incluem objetivos como resgatar um número definido de animais abandonados, aumentar a taxa de adoções, e expandir a conscientização através de campanhas educativas. Cada meta é mensurável e tem um prazo determinado, permitindo que acompanhemos o progresso e ajustemos nossas estratégias para alcançar resultados efetivos.</p>
+        </div>
+    </div>
+
 
-      <div class="row">
+      <!-- <div class="row">
         <div class="col col-desktop-3 col-3"><img src="images/clientes/icon5.png" alt=""></div>
         <div class="col col-desktop-3 col-3"><img src="images/clientes/icon6.png" alt=""></div>
         <div class="col col-desktop-3 col-3"><img src="images/clientes/icon7.png" alt=""></div>
         <div class="col col-desktop-3 col-3"><img src="images/clientes/icon8.png" alt=""></div>
-      </div>
-      <div class="row">
+      </div> -->
+      <!-- <div class="row">
         <div class="col col-desktop-3 col-3"><img src="images/clientes/icon1.png" alt=""></div>
         <div class="col col-desktop-3 col-3"><img src="images/clientes/icon2.png" alt=""></div>
         <div class="col col-desktop-3 col-3"><img src="images/clientes/icon3.png" alt=""></div>
         <div class="col col-desktop-3 col-3"><img src="images/clientes/icon4.png" alt=""></div>
-      </div>
+      </div> -->
 
-      <div class="row">
+      <!-- <div class="row">
         <div class="col col-desktop-3 col-3"><img src="images/clientes/icon5.png" alt=""></div>
         <div class="col col-desktop-3 col-3"><img src="images/clientes/icon6.png" alt=""></div>
         <div class="col col-desktop-3 col-3"><img src="images/clientes/icon7.png" alt=""></div>
         <div class="col col-desktop-3 col-3"><img src="images/clientes/icon8.png" alt=""></div>
-      </div>
-      <div class="row">
+      </div> -->
+      <!-- <div class="row">
         <div class="col col-desktop-3 col-3"><img src="images/clientes/icon1.png" alt=""></div>
         <div class="col col-desktop-3 col-3"><img src="images/clientes/icon2.png" alt=""></div>
         <div class="col col-desktop-3 col-3"><img src="images/clientes/icon3.png" alt=""></div>
         <div class="col col-desktop-3 col-3"><img src="images/clientes/icon4.png" alt=""></div>
-      </div>
+      </div> -->
 
-      <div class="row">
+      <!-- <div class="row">
         <div class="col col-desktop-3 col-3"><img src="images/clientes/icon5.png" alt=""></div>
         <div class="col col-desktop-3 col-3"><img src="images/clientes/icon6.png" alt=""></div>
         <div class="col col-desktop-3 col-3"><img src="images/clientes/icon7.png" alt=""></div>
         <div class="col col-desktop-3 col-3"><img src="images/clientes/icon8.png" alt=""></div>
-      </div>
+      </div> -->
     </div>
   </section>
 </main>
 <footer id="footer">
   <div class="container">
     <div class="row">
       <div class="col col-offset-desktop-1 col-desktop-3">
-        <p><a href=""><img src="images/logo.png" alt="Logo da Chatschool"></a></p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fringilla mollis erat, vitae pulvinar nisi laoreet eget. Curabitur at arcu mi. Cras vitae pharetra mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed id felis leo. Maecenas est est, vulputate at congue non, pulvinar eu arcu.</p>
+        <p><a href=""><img src="images/logo.png" alt="Logo da SOS Animal"></a></p>
+        <p>Nossa missão é resgatar, cuidar e encontrar lares amorosos para animais abandonados, proporcionando uma segunda chance para aqueles que mais precisam. Buscamos sensibilizar e envolver a comunidade na luta contra o abandono, promovendo a adoção responsável e oferecendo suporte contínuo aos adotantes. Acreditamos que todos os animais merecem respeito, carinho e uma vida digna, e trabalhamos incansavelmente para transformar essa visão em realidade.</p>
       </div>
       <div class="col col-offset-desktop-1 col-desktop-2 col-2">
         <h3>Menu</h3>
         <nav>
           <ul>
             <li><a href="/" class="active">Home</a></li>
             <li><a href="quem-somos.html">Quem somos</a></li>
-            <li><a href="clientes.html">Clientes</a></li>
+            <li><a href="clientes.html">Missão</a></li>
             <li><a href="equipe.html">Equipe</a></li>
             <li><a href="contato.html">Contato</a></li>
           </ul>
@@ -114,7 +136,7 @@ <h3>Menu</h3>
 </footer>
 
 <div id="copyright">
-  &copy; Chatschool - 2017 - Todos os direitos reservados
+  &copy; SOS Animal - 2024 - Todos os direitos reservados
 </div>
 </body>
 </html>
diff --git a/contato.html b/contato.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Contato - Chatschool</title>
+  <title>Contato - SOS Animal</title>
   <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link href="css/pages/contato.min.css" rel="stylesheet">
@@ -15,15 +15,15 @@
     <div class="row">
       <div class="col col-desktop-3 col-6">
         <a href="index.html">
-          <img src="images/logo.png" alt="Logo da Chatschool">
+          <img src="images/logo.png" alt="">
         </a>
       </div>
       <div class="col col-desktop-9 col-6">
         <nav>
           <ul>
             <li><a href="/">Home</a></li>
             <li><a href="quem-somos.html">Quem somos</a></li>
-            <li><a href="clientes.html">Clientes</a></li>
+            <li><a href="clientes.html">Missão</a></li>
             <li><a href="equipe.html">Equipe</a></li>
             <li><a href="contato.html" class="active">Contato</a></li>
           </ul>
@@ -32,7 +32,7 @@
     </div>
     <div class="row">
       <div class="col col-desktop-12 title">
-        <h1>Alta produtividade em tempo real</h1>
+        <h1>Ajude-nos em nossa missão!</h1>
       </div>
     </div>
   </div>
@@ -41,31 +41,36 @@ <h1>Alta produtividade em tempo real</h1>
   <section class="section section-center">
     <h2>Contato</h2>
     <p class="subtitle">
-      Lorem ipsum dolor sit amet. Proin gravida nibh vel velit auctor aliquet.Lorem ipsum dolor sit amet.<br>
-      Lorem ipsum dolor sit amet. Proin gravida nibh vel velit auctor aliquet.
+      Esta é uma organização que deseja ajudar a todos! <br>Portanto, preencha o formulário abaixo para pedir ajuda ou ajudar alguém!
     </p>
 
     <div class="container">
       <!-- https://github.com/dwyl/html-form-send-email-via-google-script-without-server -->
       <form action="https://script.google.com/macros/s/AKfycbzwr5wrIL9yQUw3Lh83wjqIw05peunLi-iUHiNVMgQ9WgXbj3AM/exec" class="row" method="post">
         <div class="col col-desktop-6 col-6">
           <div class="input-control">
-            <input id="nome" name="nome" type="text" required placeholder="Nome...">
-            <label for="nome">Nome*</label>
+            <input id="nome" name="nome" type="text" required placeholder="Nome">
+            <label for="nome">Nome</label>
           </div>
           <div class="input-control">
-            <input id="email" name="email" type="email" required placeholder="Email...">
-            <label for="email">Email*</label>
+            <input id="email" name="email" type="number" required placeholder="Telefone">
+            <label for="email">Telefone</label>
           </div>
+
           <div class="input-control">
-            <input id="telefone" name="telefone" type="number" placeholder="Telefone...">
-            <label for="telefone">Telefone</label>
+            <select name="tipos" id="telefone">
+            <option value="" disabled selected>--- Selecione uma opção abaixo ---</option>
+            <option value="op1" aria-required="true">Seja um colaborador da causa</option>
+            <option value="op2" aria-required="true">Peça ajuda pelo site</option>
+            <option value="op3" aria-required="true">Ajude alguém pelo site</option>
+            <label for="telefone">Tipo de serviço</label>
+          </select>
           </div>
         </div>
         <div class="col col-desktop-6 col-6">
           <div class="input-control">
             <textarea id="mensagem" name="mensagem" id="" cols="30" rows="10" placeholder="Mensagem..."></textarea>
-            <label for="mensagem">Telefone</label>
+            <label for="mensagem">Mensagem</label>
           </div>
         </div>
         <div class="col col-desktop-12 col-6">
@@ -81,15 +86,15 @@ <h2>Contato</h2>
     <div class="row">
       <div class="col col-offset-desktop-1 col-desktop-3">
         <p><a href=""><img src="images/logo.png" alt="Logo da Chatschool"></a></p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fringilla mollis erat, vitae pulvinar nisi laoreet eget. Curabitur at arcu mi. Cras vitae pharetra mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed id felis leo. Maecenas est est, vulputate at congue non, pulvinar eu arcu.</p>
+        <p>Nossa missão é resgatar, cuidar e encontrar lares amorosos para animais abandonados, proporcionando uma segunda chance para aqueles que mais precisam. Buscamos sensibilizar e envolver a comunidade na luta contra o abandono, promovendo a adoção responsável e oferecendo suporte contínuo aos adotantes. Acreditamos que todos os animais merecem respeito, carinho e uma vida digna, e trabalhamos incansavelmente para transformar essa visão em realidade.</p>
       </div>
       <div class="col col-offset-desktop-1 col-desktop-2 col-2">
         <h3>Menu</h3>
         <nav>
           <ul>
             <li><a href="/" class="active">Home</a></li>
             <li><a href="quem-somos.html">Quem somos</a></li>
-            <li><a href="clientes.html">Clientes</a></li>
+            <li><a href="clientes.html">Missão</a></li>
             <li><a href="equipe.html">Equipe</a></li>
             <li><a href="contato.html">Contato</a></li>
           </ul>
@@ -105,7 +110,7 @@ <h3>Menu</h3>
 </footer>
 
 <div id="copyright">
-  &copy; Chatschool - 2017 - Todos os direitos reservados
+  &copy; SOS Animal - 2024 - Todos os direitos reservados
 </div>
 
 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
@@ -128,6 +133,8 @@ <h3>Menu</h3>
     });
   });
 </script>
+<style>
 
+</style>
 </body>
 </html>
diff --git a/css/buttons.css b/css/buttons.css
@@ -1,5 +1,5 @@
 .btn {
-    background-color: rgb(84, 209, 84);
+    background-color: rgb(120, 41, 211);
     color: #ffffff;
     display: inline-block;
     border-radius: 30px;
@@ -11,7 +11,7 @@
 }
 
 .btn:hover {
-    background-color: rgb(84, 180, 84);
+    background-color: rgb(120, 41, 211);
 }
 
 .btn.orange {

diff --git a/css/icons.css b/css/icons.css
@@ -10,7 +10,7 @@
 .icon-container .material-icons {
     display: block;
     font-size: 85px;
-    color: rgb(84, 209, 84);
+    color: rgb(120, 41, 211);
     position: absolute;
     top: 50%;
     left: 50%;
@@ -29,7 +29,7 @@
     display: block;
     width: 50%;
     height: 60px;
-    border-right: 2px solid rgb(32, 123, 32);
+    border-right: 2px solid rgb(120, 41, 211);
     background: transparent;
     margin-bottom: 10px;
 }