future4code · MirandaFayra · Aug 24, 2021 · Aug 24, 2021 · Sep 2, 2021 · Sep 2, 2021
diff --git a/README.md b/README.md
@@ -1 +1,20 @@
 # landing-page-template
+Esta é uma Landing page para a marca fictícia F4bank. 
+O trabalho foi desenvolvido por Ayla Silva dos Santos, Hellen Marina Barbosa Ferreira e Wellynton Alves Benicio. O site foi desenvolvido em conjunto, sem separações. Cada dia um componente do grupo ajustava/criava uma parte da página. O Wellynton não esteve tão presente pois estava com problemas de saúde. Mas no geral, todo colaboraram para o término do trabalho.
+O site é responsivo para os iphones 6/7/8 e foi desevolvido com a estratégia desktop first. 
+Ao clicar nos botões do header, o usuário é redirecionado para a página específica que escolheu e na parte Home, ao clicar em Login o usuário tem acesso à página de Login da F4bank. Ao final, ao clicar nos botões de contato, o usuário é redirecionado para suas redes sociais, telefone e email (respectivamente de acordo com os simbolos). 
+https://wonderful-jellyfish.surge.sh/
+![image](https://user-images.githubusercontent.com/86899002/132114284-ef088c63-2a6c-41f9-a6cb-8cb2d22b42bd.png)
+![image](https://user-images.githubusercontent.com/86899002/132114292-433fbb1b-9e84-4dc3-8e5c-96d6a0a60b52.png)
+![image](https://user-images.githubusercontent.com/86899002/132114307-6d011e89-25de-4ffb-9f85-f28757f0b2cc.png)
+![image](https://user-images.githubusercontent.com/86899002/132114318-7928c65f-e7e5-4edd-a092-597f042e487d.png)
+![image](https://user-images.githubusercontent.com/86899002/132114326-8767ba28-550b-4171-bb2a-83d35d1fc002.png)
+![image](https://user-images.githubusercontent.com/86899002/132114335-929350f7-2e91-4941-8ad6-325c307924d5.png)
+![image](https://user-images.githubusercontent.com/86899002/132114341-36f23f37-b8c9-4b11-8fa8-5f196e610506.png)
+![image](https://user-images.githubusercontent.com/86899002/132114347-3a516815-b2dd-4c34-90cb-6e3cf372bf71.png)
+![image](https://user-images.githubusercontent.com/86899002/132114353-0d971c85-c839-45b6-b613-e6a6331a64d2.png)
+![image](https://user-images.githubusercontent.com/86899002/132114361-5962fd03-02d7-4915-b688-0581b2292ea1.png)
+![image](https://user-images.githubusercontent.com/86899002/132114364-5ecdb562-c6c1-4455-b034-e46f85b06a81.png)
+![image](https://user-images.githubusercontent.com/86899002/132114370-8dd3a614-38f9-4249-a68f-92a701502bfa.png)
+![image](https://user-images.githubusercontent.com/86899002/132114376-4758d24f-a89f-48b6-8e1f-3abb96675738.png)
+![image](https://user-images.githubusercontent.com/86899002/132114384-e7711100-031f-4893-82ae-53516da6afb8.png)
diff --git a/f4bank/img/cartão.png b/f4bank/img/cartão.png
diff --git a/f4bank/img/digital-bank.jpg b/f4bank/img/digital-bank.jpg
diff --git a/f4bank/img/digital-bank.png b/f4bank/img/digital-bank.png
diff --git a/f4bank/img/email.png b/f4bank/img/email.png
diff --git a/f4bank/img/f4bank.png b/f4bank/img/f4bank.png
diff --git a/f4bank/img/facebook-logo-3-1.png b/f4bank/img/facebook-logo-3-1.png
diff --git a/f4bank/img/foto1orange.png b/f4bank/img/foto1orange.png
diff --git a/f4bank/img/instragam laranja.png b/f4bank/img/instragam laranja.png
diff --git a/f4bank/img/people happy.jpeg b/f4bank/img/people happy.jpeg
diff --git a/f4bank/img/pix.jpg b/f4bank/img/pix.jpg
diff --git a/f4bank/img/telefone laranja.png b/f4bank/img/telefone laranja.png
diff --git a/f4bank/img/twitter-logo-3.png b/f4bank/img/twitter-logo-3.png
diff --git a/f4bank/index.html b/f4bank/index.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<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="style.css">
+    <title>Home</title>
+</head>
+<body>
+    <header class="header">
+        <menu class="menu-header">
+            <img id="logo-header-home" src="./img/f4bank.png" alt="Logo f4bank">
+            <a href="#Home"><li>Home</li></a>
+            <a href="#QuemSomos"><li>Quem Somos</li></a>
+            <a href="#NossosServiços"><li>Nossos Serviços</li></a>
+            <a href="#Contatos"><li>Contato</li></a>
+
+        </menu>
+    </header>
+
+    <section class="containerHome">
+        <a name="Home"></a>
+        <div class="texto-convite">
+            <h2>Seja F4bank</h2>
+            <p>Menos taxas e burocracia, mais simplicidade e inovação.</p>
+            <br>
+            <a href="login.html"><button id="button-home">LOGIN</button></a>
+        </div>
+        <div class="imagem-home">
+            <img id="img-home" src="./img/foto1orange.png" alt="Mulher Feliz">
+        </div>
+    </section>
+    <section class="containerQuemSomos">
+        <a name="QuemSomos"></a>
+
+
+        <div id="tituloQuemSomos">
+            <h1>Quem Somos</h1>
+        </div>
+        <div class="container2QuemSomos">
+            <div id="lateralEsquerda">
+                <p>
+                    Somos uma empresa de tecnologia, que desenvolve soluções seguras e simples para a sua vida financeira ultilizando uma abordagem inovadora. Queremos que o mundo conheça nosso jeito de transformar a vida das pessoas, nosso jeito de simplificar e reiventar o mundo. 
+                </p>
+            </div>
+            <div id="lateralDireita">
+                <p>
+                    O F4bank surgiu para construir este mundo com você. Trabalhamos com transparência e segurança, construindo produtos justos, tratando nossos clientes como pessoas e não como números. 
+                </p>
+            </div>
+        </div>
+    </section>
+
+    <section class="container3NossosServiços">
+        <a name="NossosServiços"></a>
+        <h1>Nossos Serviços</h1>
+
+        <div class="nossos-serviços">
+
+            <div class="card-serviço">
+                <img class="img-card" src="./img/digital-bank.jpg" alt="Banco Digital">
+                <h2>F4bank Digital</h2>
+                <p>Receba, movimente e guarde seu dinheiro de forma simples e segura.</p>
+            </div>
+
+            <div class="card-serviço">
+                <img class="img-card" src="./img/cartão.png" alt="cartão de crédito">
+                <h2>Cartão de crédito</h2>
+                <p>Fácil, prático e seguro, nosso laranjinha foi feito pra você.</p>
+            </div>
+
+            <div class="card-serviço">
+                <img class="img-card" src="./img/pix.jpg" alt="PIX">
+                <h2>Pix</h2>
+                <p>Não poderia faltar a instantaneidade do pix! Transfira e receba em apenas 1 segundo.</p>
+
+            </div>
+        </div>
+    </section>
+    <section class= "container-contatos">
+        <a name="Contatos"></a>
+        <div class="header-contatos">
+            <h2> Entre em contato conosco por:</h2>
+        </div>
+        <div class="div-cards">
+            <div class="card-contatos">
+               <a href="tel:0000 000 0000"> <img class="img-contatos" src="./img/telefone laranja.png" alt="#"></a>
+               <a href="tel:0000 000 0000"> <p>0000 000 0000</p></a>
+            </div>
+            <div class="card-contatos">
+                <a href="mailto:f4bank@gmail.com"><img class="img-contatos" src="./img/email.png" alt="#"></a>
+                <a href="mailto:f4bank@gmail.com"><p>f4bankajuda@gmail.com</p></a>
+            </div>
+            <div class="card-contatos">
+                <a href="https://www.instagram.com/"><img class="img-contatos"  src="./img/instragam laranja.png" alt="#"></a>
+                <a href="https://www.instagram.com/"> <p>@f4bank</p></a>
+            </div>   
+            <div class="card-contatos">
+                <a href="https://www.facebook.com"><img class="img-contatos" src="./img/facebook-logo-3-1.png"  alt="#"></a>
+                <a href="https://www.facebook.com"><p>F4bank</p></a>
+            </div>  
+            <div class="card-contatos">
+                <a href="https://www.twitter.com.br"><img class="img-contatos"  src="./img/twitter-logo-3.png" alt="#"></a>
+                <a href="https://www.twitter.com.br"><p>@f4bankOficial</p></a>
+            </div>  
+        </div>
+    </section>
+
+<footer>
+          <div class="Transparência">
+            <p>© 2021 F4bank pagamentos S.A</p>
+            <p>00.000.000/0000-00</p>
+
+              </div>
+
+
+              <div class="Ouvidoria">
+                <p> 0000 000 0000</p>
+                <p> ouvidoria@f4bank</p>
+                <p>Atendimento das 9H às 18H</p>
+                  </div>   
+</footer>
+</body>
+</html>
diff --git a/f4bank/index.js b/f4bank/index.js
diff --git a/f4bank/login.html b/f4bank/login.html
@@ -0,0 +1,48 @@
+<!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="style.css">
+    <title>LOGIN</title>
+</head>
+<body>
+    <header class="header-login">
+        <div class="logo-header"> 
+        <a href="index.html"><img id="icone-header" src="./img/f4bank.png" alt="#"></a>
+        </div>
+    </header>
+    <main class="main-login">
+        <div class="login"> 
+            <h1>Faça seu login</h1>
+                <h2>CPF</h2>
+            <input type="text" name="Cpf" placeholder="000.000.000-00" class="caixa">
+             <br> 
+                <h2>Senha</h2>
+             <input type="password" name="senha" placeholder="Digite a senha" class="caixa">
+            <br>
+            <br>
+            <button id="botao-entrar">Entrar</button>
+        </div>
+    </main>
+    <footer>
+
+        <div class="Transparência">
+          <p>© 2021 F4banck pagamentos S.A</p>
+          <p>00.000.000/0000-00</p>
+
+            </div>
+
+
+            <div class="Ouvidoria">
+              <p> 0000 000 0000</p>
+              <p> ouvidoria@f4bank</p>
+              <p>Atendimento das 9H às 18H</p>
+                </div>   
+</footer>
+
+
+
+</body>
+</html>