future4code · MirandaFayra · Aug 28, 2021 · Aug 28, 2021 · Aug 30, 2021 · Aug 30, 2021
diff --git a/README.md b/README.md
@@ -1 +1,68 @@
-# landing-page-template
+# Landing Page da Upfour!
+
+A landing page da Upfour foi desenvolvida utilizando-se do que há de mais moderno em desenvolvimento web, tanto em tecnologias quanto em boas práticas.
+Uma equipe de 4 desenvolvedores pensaram em cada detalhe para tornar a experiência do usuário a melhor possível
+
+
+# Telas
+
+O usuário poderá navegar por **seis** telas:
+
+## Home
+
+Onde será apresentado à empresa através de uma tela limpa e convidativa. Com animações interativas e com um footer contendo informações importantes de contato.
+
+![página Home](https://i.ibb.co/GQqGYFr/home-Header.png)
+
+## Quem Somos
+
+Uma breve história da empresa passando a sua missão num texto curto e direto ao ponto, com um link de convite ao cadastro.
+
+![página Quem Somos](https://i.ibb.co/2qGgVsG/quem-Somos-header.png)
+
+
+## Como Funciona
+
+Aqui o cliente terá uma ideia de como funciona o processo de solicitação do serviço
+
+![página de como funciona](https://i.ibb.co/KzcZm0h/como-Funciona-header.png)
+
+## Cadastro
+
+A ideia é que seja gerada uma integração bem rápida entre usuário e empresa, sem burocracia. Por isso apenas três dados são pedidos ao cliente. Uma senha é gerada automaticamente para que a empresa entre em contato o mais rápido possível por dois meios e para que o cliente tenha acesso à sua área de análise.
+
+![página de cadastro](https://i.ibb.co/jkVjsKs/cadastro-header.png)
+
+
+
+## Login
+
+É nesta área que o cliente fará login para acompanhar o feedback da Upfour
+
+![página de login](https://i.ibb.co/8NRJPLp/login-header.png)
+
+## Análise
+
+Após cadastrar-se, o usuário usará o e-mail fornecido e a senha gerada automaticamente para logar-se no site da Upfour e ter acesso ao feedback da empresa sobre o seu pedido
+
+![página de análise](https://i.ibb.co/CQ99hgh/analise-header.png)
+
+## Footer
+O Footer, como dito anteriormente, dispõe das informações de contato, endereço e redes sociais mais importantes da empresa
+
+![footer](https://i.ibb.co/Lp1BVJk/footer.png)
+
+# O que está funcionando?
+
+* Responsividade
+* Cadastro e Login totalmente funcionais
+* Botão de Logout
+* Animações
+* Transição suave entre telas
+* Página de análise - disponível após o Login
+* Geração de senha
+* Bloqueio da página de análise para usuários não logados
+
+
+# Link
+[upfour.com.br](http://fanatical-market.surge.sh)
diff --git a/analise.html b/analise.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="styles/index.css" />
+    <link rel="stylesheet" href="styles/analise.css" />
+    <script src="js/analise.js" defer></script>
+    <script>
+      localStorage.getItem("logado") ? true : window.location.href='login.html'
+    </script>
+    <title>Upfour</title>
+  </head>
+  <body class='fade-in'>
+    <nav class="cabecalho">
+      <img src="img/photo_2021-08-29_21-18-47.jpg" class="logo" />
+      <ul class="menu">
+        <li><a href="/index.html">Home</a></li>
+        <li><a href="./index.html">Quem somos</a></li>
+        <li><a href="/comoFunciona index.html">Como funciona</a></li>
+        <li><a href="/cadastro.html">Cadastro</a></li>
+      </ul>
+      <button id='button-header-logout' onclick="Logout()" class="login">Logout</button>
+
+    </nav>
+    <!-- <img src="img/emprestimo-negativado.jpg" class="section-img"> -->
+    <div id="analise">
+      <div id="area-de-analise">
+        <table>
+          <tr>
+            <th>Nome</th>
+            <th>Email</th>
+            <th>Telefone</th>
+          </tr>
+          <tr>
+            <td id="TDnome"></td>
+            <td id="TDemail"></td>
+            <td id="TDTelefone"></td>
+          </tr>
+        </table>
+
+        <div class="situacao">
+            <h1 id='h1Nome'></h1>
+            <p>Após contato da nossa equipe, os seus dados ainda estão em análise e em breve <br>divulgaremos nesta mesma página
+                se conseguimos disponibilizar o serviço solicitado. Aguente firme!<br><br>Falta só um pouco.
+            </p>
+            <br><br><br>
+            <h3>Conte conosco!</h3>
+        </div>
+
+        <div id='banner-situacao'>Em análise</div>
+      </div>
+    </div>
+    <footer class="rodape">
+      <div class="blocoRodape">
+        <p class="tituloRodape">Redes Sociais</p>
+        <a href="https://whatsapp.com" target="_blank"><img src="img/whats logo.png" class="redesSociais"></a>
+        <a href="https://linkedin.com" target="_blank"><img src="img/Linkedin logo.png" class="redesSociais"></a>
+        <a href="https://twitter.com" target="_blank"><img src="img/twitter logo.png" class="redesSociais"></a>
+        <a href="https://instagram.com" target="_blank"><img src="img/insta logo.png" class="redesSociais"></a>
+        <a href="https://fb.com" target="_blank"><img src="img/facebook logo.png" class="redesSociais"></a>
+      </div>
+      <div class="blocoRodape">
+        <p class="tituloRodape">Atendimento</p>
+        <br>
+        <p class="">Horário de Atendimento: 8h as 18h de segunda a sexta-feira.</p>
+        <br>
+        <p class="">+55 21 90000-2233</p>
+        <p class="">contato@upfour.com.br</p>
+      </div>
+      <div class="blocoRodape">
+        <p class="tituloRodape">Endereço</p>
+        <br>
+        <p class="endereco">Rua Zaquias Muzaiel, 237 - Cidade Luiza - Jundiaí/SP</p>
+        <img src="img/endereço.jpg" class="imgEnd">
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/cadastro.html b/cadastro.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="styles/index.css" />
+    <link rel="stylesheet" href="styles/cadastro.css" />
+    <script src="js/cadastro.js" defer></script>
+    <title>Upfour</title>
+  </head>
+  <body class="fade-in">
+    <nav class="cabecalho">
+      <img src="img/photo_2021-08-29_21-18-47.jpg" class="logo" />
+      <ul class="menu">
+        <li><a href="/index.html">Home</a></li>
+        <li><a href="./quemSomos.html">Quem somos</a></li>
+        <li><a href="/comoFunciona index.html">Como funciona</a></li>
+        <li><a href="./cadastro.html">Cadastro</a></li>
+      </ul>
+      <button id='button-header' onclick="window.location.href='login.html' " class="login">
+        Login
+      </button>
+      <button id='button-header-logout' onclick="Logout()" class="login">Logout</button>
+
+    </nav>
+    <!-- <img src="img/emprestimo-negativado.jpg" class="section-img"> -->
+    <div id="cadastro">
+      <div class="cadastroForm">
+        <form name="form_cadastro" id="formCadastro">
+          <h1>Cadastre-se conosco</h1>
+          <div>
+            <label for="nameId"> Nome:</label>
+            <input
+              type="name"
+              id="nameId"
+              placeholder="Priscila Sousa"
+              required="required"
+              class="inputForm"
+            />
+          </div>
+          <hr />
+          <div>
+            <label for="telephoneId"> Telefone: </label>
+            <input
+              type="tel"
+              id="telephoneId"
+              placeholder="(xx) x xxxxx - xxxx"
+              class="inputForm"
+            />
+          </div>
+          <hr />
+          <div>
+            <label for="emailId"> E-mail: </label>
+            <input
+              type="email"
+              id="emailId"
+              placeholder="contato@email.com"
+              required="required"
+              class="inputForm"
+            />
+          </div>
+          <hr />
+        </form>
+        <input
+          type="submit"
+          class="enviar"
+          onclick="Cadastrar()"
+          value="enviar"
+        />
+      </div>
+    </div>
+    <footer class="rodape">
+      <div class="blocoRodape">
+        <p class="tituloRodape">Redes Sociais</p>
+        <a href="https://whatsapp.com" target="_blank"><img src="img/whats logo.png" class="redesSociais"></a>
+        <a href="https://linkedin.com" target="_blank"><img src="img/Linkedin logo.png" class="redesSociais"></a>
+        <a href="https://twitter.com" target="_blank"><img src="img/twitter logo.png" class="redesSociais"></a>
+        <a href="https://instagram.com" target="_blank"><img src="img/insta logo.png" class="redesSociais"></a>
+        <a href="https://fb.com" target="_blank"><img src="img/facebook logo.png" class="redesSociais"></a>
+      </div>
+      <div class="blocoRodape">
+        <p class="tituloRodape">Atendimento</p>
+        <br>
+        <p class="">Horário de Atendimento: 8h as 18h de segunda a sexta-feira.</p>
+        <br>
+        <p class="">+55 21 90000-2233</p>
+        <p class="">contato@upfour.com.br</p>
+      </div>
+      <div class="blocoRodape">
+        <p class="tituloRodape">Endereço</p>
+        <br>
+        <p class="endereco">Rua Zaquias Muzaiel, 237 - Cidade Luiza - Jundiaí/SP</p>
+        <img src="img/endereço.jpg" class="imgEnd">
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/comoFunciona index.html b/comoFunciona index.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Como funciona</title>
+    <link rel="stylesheet" href="styles/comoFunciona.css" />
+    <link rel="stylesheet" href="styles/index.css" />
+    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
+    <script src="js/index.js" defer></script>
+  </head>
+  <body class="fade-in">
+    <nav class="cabecalho">
+      <img src="img/photo_2021-08-29_21-18-47.jpg" class="logo" />
+      <ul class="menu">
+        <li><a href="/index.html">Home</a></li>
+        <li><a href="./quemSomos.html">Quem somos</a></li>
+        <li><a href="comoFunciona index.html">Como funciona</a></li>
+        <li><a href="./cadastro.html">Cadastro</a></li>
+      </ul>
+      <button
+        id="button-header"
+        onclick="window.location.href='login.html' "
+        class="login"
+      >
+        Login
+      </button>
+      <button id="button-header-logout" onclick="Logout()" class="login">
+        Logout
+      </button>
+    </nav>
+    <div class="bg">
+      <main>
+        <div class="comoFunciona">
+          <h1 class="comoFunciona">Como Funciona</h1>
+          <h2 class="comoFunciona">
+            A Upfour é uma platamorma de credito pessoal, para que você comece o
+            seu proprio negócio
+          </h2>
+          <h3 class="comoFunciona">Como fazer um empréstimo pessoal?</h3>
+        </div>
+        <div class="conteiner">
+          <img
+            data-aos="slide-up"
+            data-aos-duration="1000"
+            src="imgComofunciona/projeto15.jpg"
+            class="conteiner"
+          />
+          <p data-aos="slide-down" data-aos-duration="1000" class="conteiner">
+            Faça uma simulação
+          </p>
+          <p data-aos="slide-up" data-aos-duration="1000" class="conteiner">
+            Preencha nosso formulario em poucos passos
+          </p>
+          <img
+            data-aos="slide-down"
+            data-aos-duration="1000"
+            src="imgComofunciona/projeto8.jpg"
+            class="conteiner"
+          />
+          <img
+            data-aos="slide-up"
+            data-aos-duration="1000"
+            src="imgComofunciona/projeto6.png"
+            class="conteiner"
+          />
+          <p data-aos="slide-down" data-aos-duration="1000" class="conteiner">
+            Assine o contrato e recebe o dinheiro
+          </p>
+          <p data-aos="slide-upt" data-aos-duration="1000" class="conteiner">
+            Abra seu proprio negócio!
+          </p>
+          <img
+            data-aos="slide-down"
+            data-aos-duration="1000"
+            src="imgComofunciona/projeto17.jpg"
+            class="conteiner"
+          />
+        </div>
+        <footer class="rodape">
+          <div class="blocoRodape">
+            <p class="tituloRodape">Redes Sociais</p>
+            <img src="img/whatsapp-vector.png" class="redesSociais" />
+            <img src="img/linkedin-logo.png" class="redesSociais" />
+            <img src="img/twitter.png" class="redesSociais" />
+            <img src="img/instagram.png" class="redesSociais" />
+            <img src="img/Facebook.png" class="redesSociais" />
+          </div>
+          <div class="blocoRodape">
+            <p class="tituloRodape">Atendimento</p>
+            <br />
+            <p class="">
+              Horário de Atendimento: 8h as 18h de segunda a sexta-feira.
+            </p>
+            <br />
+            <p class="">+55 21 90000-2233</p>
+            <p class="">contato@upfour.com.br</p>
+          </div>
+          <div class="blocoRodape">
+            <p class="tituloRodape">Endereço</p>
+            <br />
+            <p class="endereco">
+              Rua Zaquias Muzaiel, 237 - Cidade Luiza - Jundiaí/SP
+            </p>
+            <img src="img/endereço.jpg" class="imgEnd" />
+          </div>
+        </footer>
+      </main>
+    </div>
+
+    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
+    <script>
+      AOS.init();
+    </script>
+  </body>
+</html>