Projeto finalizado

README.md

@@ -1,140 +1,43 @@
-# Landing Page
-Nesse projeto, nosso objetivo é criar uma **Landing Page**, ou seja, um site de **apenas uma página** cujo objetivo é atrair clientes e despertar curiosidade e interesse nos serviços e/ou produtos de uma empresa.
-Durante a construção desse site, serão estudados e praticados os seguintes conteúdos:
-* HTML
-* CSS
-	* Flex
-	* Grid
-* DOM 
+# Landing Page F4Bank
+Nesse projeto, meu objetivo é criar uma **Landing Page**, um site cujo o objetivo é atrair clientes e despertar curiosidade e interesse nos serviços e/ou produtos de um banco fictício.<br/>
 
-# Enunciado
-Você deverá desenvolver uma Landing Page para uma das empresas fictícias apresentadas. 
+## Autora
+<p align ="justify"> :woman:Roberta Corrêa</p>
 
-**Lembre-se:** a Landing Page é a primeira página de um site institucional e deve ter apenas **uma página html com seções diferentes**, ser atrativa para clientes, fornecendo informações sobre a empresa e seus produtos/serviços. 
-
-As empresas fictícias vão desde um banco digital a uma empresa de seguros, passando por um serviço de aluguel de repúblicas para estudantes universitários e uma plataforma de crédito para pessoas empreendedoras de periferia. 
-
-É importante que a página seja construída com criatividade, então não se limite às características fornecidas sobre as empresas fictícias. Para ajudar no desenvolvimento da página, foram disponibilizadas referências de outras Landing Pages; use-as como inspiração!
-
-
-<details>
-   <summary>Empresas fictícias</summary>
-
-
-#### Projeto F4Bank
-
-  O F4Bank é um projeto de um grande banco público brasileiro para competir com as startups que tem surgido, como Nubank, Banco Inter e Banco Neon. Você precisa criar uma landing page que comunique, além da proposta do banco, os produtos "Cartão sem taxa" e "Conta corrente digital", reforçando a segurança de um banco tradicional com décadas de história no país.
-
-[Logo aqui](https://labenu.notion.site/Projeto-Landing-Page-WFS-7b37ff1460e741b1b5e1e049d7df9d69)
-
-
-#### Projeto 4Food
-
-  O 4Food é um projeto de uma grande rede de supermercados que está buscando se digitalizar e criar um sistema de compras e entregas recorrentes por aplicativo. Você precisa criar uma landing page que comunique a velocidade e praticidade da solução, destacando a possibilidade de realizar (i) compras de supermercado online e (ii) compras de comidas prontas com uma frequência semanal.
-
-[Logo aqui](https://labenu.notion.site/Projeto-Landing-Page-WFS-7b37ff1460e741b1b5e1e049d7df9d69)
-
-
-#### Projeto 4Comfort
-
-  4Comfort é uma nova empresa cuja proposta é oferecer o tênis mais confortável possível. Seguindo modelos americanos como Allbirds e Atom, o tênis é voltado para um público que trabalha em ambientes casuais (startups, empresas de tecnologia, escritórios modernos etc.) e se destaca por ser vendido exclusivamente online.
-
-[Logo aqui](https://labenu.notion.site/Projeto-Landing-Page-WFS-7b37ff1460e741b1b5e1e049d7df9d69)
-
-
-#### Projeto F4Life
-
-  F4Life é uma empresa de aluguéis de repúblicas para pessoas universitárias. Similar aos modelos de Quinto Andar e Loft, a empresa realiza reformas e prepara moradias para recepção de pessoas universitárias em um ambiente específico e otimizado para a vida de graduação. Você precisa criar uma landing page que chame a atenção de pessoas que estão na graduação e ofereça os produtos "moradia compartilhada" e "kitnets".
-
-[Logo aqui](https://labenu.notion.site/Projeto-Landing-Page-WFS-7b37ff1460e741b1b5e1e049d7df9d69)
-
-
-#### Projeto Upfour.
-
-  A Upfour é uma empresa que fornece crédito para moradores da periferia começarem seu próprio negócio. Similar a modelos como Creditas, mas concentrado apenas em moradores de periferia, a empresa oferece dois serviços: (i) crédito pessoal ; (ii) sistema de controle e orientação financeira. Você precisa construir um site capaz de atingir esse público em específico, reforçando a oportunidade de mudança de vida e de tornar-se protagonista em seu contexto social.
-
-[Logo aqui](https://labenu.notion.site/Projeto-Landing-Page-WFS-7b37ff1460e741b1b5e1e049d7df9d69)
-
-
-#### Projeto Log4
-
-  A Log4 é uma empresa de uma grande varejista que, após liderar o mercado de móveis, cama, mesa e banho, resolveu entrar no mercado puro de logística para competir com empresas como Loggi e MadeiraMadeira. Seus dois principais produtos são (i) a distribuição rápida de itens pequenos via motoboys/ciclistas e (ii) a distribuição rápida de móveis ou itens de grande tamanho. Você precisa criar um site capaz de comunicar a tradição e confiança do grupo varejista, mas também se posicionar como uma nova solução de tecnologia que traz velocidade aos clientes.
-
-[Logo aqui](https://labenu.notion.site/Projeto-Landing-Page-WFS-7b37ff1460e741b1b5e1e049d7df9d69)
-
-
-#### Projeto 4Cars
-
-  A 4Cars é uma empresa que tem surfado na onda dos apps de motoristas. Sua proposta é oferecer carros para serem alugados por motoristas a um custo razoável, aumentando a oportunidade para quem não têm dinheiro para comprar um carro. Seus concorrentes atuais são empresas tradicionais, como Localiza, e startups, como Kovi. Você tem duas linhas de produto: (i) carros populares e (ii) transporte de luxo. Você precisa criar um site capaz de comunicar modernidade e baixo custo, se posicionando como uma plataforma totalmente digital e de fácil acesso para motoristas jovens que estão buscando entrar nesse mercado.
-
- [Logo aqui](https://labenu.notion.site/Projeto-Landing-Page-WFS-7b37ff1460e741b1b5e1e049d7df9d69)
-
-#### Projeto 4Safe
-
-  A 4Safe é uma empresa focada na digitalização dos produtos de seguridade. Sua proposta é oferecer seguros de vida, de carro e outros para clientes jovens que não gostam da burocracia das seguradoras tradicionais (ex: Porto Seguro). Você tem duas linhas de produto para desenvolver: (i) seguro de vida e (ii) seguro de carro. É importante comunicar um tom jovem, mas, ao mesmo tempo, passando bastante segurança para seus clientes, dada a natureza do produto.
-
-  [Logo aqui](https://labenu.notion.site/Projeto-Landing-Page-WFS-7b37ff1460e741b1b5e1e049d7df9d69)
-   </details>
-O enunciado completo está no Sistema do Estudante, na sessão de Projetos.
+<br/>
 
 ## Lista de requisitos
-A sua Landing Page deve conter:
 
-- [ ] **Uma seção inicial ou principal:** Esta é a seção que visitantes vêem primeiro quando acessam seu site. 
+- [ ] **Uma seção inicial ou principal:** 
 
-- [ ] **Logomarca:** A logomarca fornecida pelo cliente, que deve ser apresentada de forma clara e em um local estratégico da página.	
+- [ ] **Logomarca:** 
 
-- [ ] **Paleta de cores:** Uma paleta de cores baseada na logomarca fornecida pelo cliente.	
+- [ ] **Paleta de cores:** 	
 
-- [ ] **Cabeçalho e Rodapé:** O cabeçalho deve conter informações importantes sobre a sua empresa, como  botões de navegação e opções de contato. Já o rodapé pode incluir informações adicionais, como endereço e links de redes sociais.
+- [ ] **Cabeçalho e Rodapé:**
 
-- [ ] **Redes Sociais:** Incluir pelo menos  2 ícones para redes sociais, visíveis e clicáveis.	
+- [ ] **Redes Sociais:**
 
-- [ ] **Formulário de Contato:** Inclua um formulário de contato para que os visitantes possam se comunicar com a empresa fictícia. O formulário deverá solicitar, no mínimo, um e-mail para contato. (veja um exemplo nesse vídeo: https://coda.io/d/_duQBJ-J3TJr/Funcionalidades_suFtt#_lu2rX)
+- [ ] **Formulário de Contato:**
+
+- [ ] **Responsividade:** 
 
-- [ ] **Responsividade:** Sua landing page deve ser responsiva e adaptável a diferentes tamanhos de tela, como smartphones e desktops. Além disso, é importante testar sua landing page em diferentes dispositivos, como o iPhone 6/7/8 para a versão mobile, e em uma tela de 1280px de largura para a versão desktop.
+- [ ] **Botões:** 
 
-- [ ] **Botões:** Todos os botões devem estar funcionando com alguma lógica javascript.	
-
-- [ ] **Seções:** Conter, pelo menos, 2 seções diferentes.	
-    <details>
-       <summary>Sugestões de Seção (você não precisa se limitar a elas)</summary>
-        * Quem somos
-        * Nossos produtos/serviços
-        * Contato
-        * Nosso time
-        * Trabalhe conosco
-        * Cases de sucesso
-        * Onde estamos
-        * FAQ/Perguntas Frequentes
-        * Promoções
-    </details>
-- [ ] Deploy: O site deve estar publicado na internet através do surge ou outra ferramenta.
-### Instruções para preparar o seu repositório
-
-- Faça o fork desse repositório e realize o clone da sua cópia `seu-nome-de-usuario/projeto-landing-page`.
-   <details>
-   <summary>Quer uma dica?</summary>
-   <img src="https://firebasestorage.googleapis.com/v0/b/assets-conteudo.appspot.com/o/gerais%2Ffork.png?alt=media&token=7030e997-246a-41fe-a75f-2a2ced61e54d" alt="Como adicionar o projeto no repositório"/>
-   </details>
-- Crie os arquivos do projeto dentro deste repo;
-- **Lembre-se de abrir os PRs para seu próprio repositório.**
-- Para isso, você precisará fazer o projeto utilizando **branches**. Não faça as alterações direto na branch ```main```!
-
-### Instruções de entrega
-
-![image](https://user-images.githubusercontent.com/71137294/227530610-a9172cf5-a346-49ec-ac76-e95b207f97b4.png)
-
-1.  [**Crie o surge**](https://vimeo.com/534588331/cb38435bad?embedded=true&source=vimeo_logo&owner=108074337)  do seu projeto e pegue o link da publicação (deploy).
-2. [**Edite o README**](https://www.youtube.com/watch?v=1QKwP0SJK-c&t=3s) do seu projeto:
-    1.  Remova o texto existente no README.
-    2.  Adicione o título do seu projeto.
-    3.  Inclua o link do Surge para acesso ao projeto.
-    4.  Descreva as funcionalidades principais do projeto.
-    5.  Adicione capturas de tela das páginas do projeto nas versões desktop e mobile, e insira-as no README.
+- [ ] **Seções:**
+      <br/>
+## Status do projeto
+
+<p>☑️ Concluído. (Sujeto a updates) <p/>
+
+## Objetivo
+
+<p> Este projeto foi desenvolvido no inicio do curso de desevolvimento web full stack da Labenu, onde meu principal objetivo é por em pratica meus conhecimentos adquiridos durante o primeiro módulo de curso. </p>
+<br/>
 
-1.  Faça um commit com a frase **“[documentação] criei a descrição do projeto”**.
-2.  Abra um novo Pull Request (PR) com a frase **“PR para correção”**.
-3.  Clique em **Merge Pull Request** para enviar todas as suas alterações para a branch main.
-4.  Copie o link do Pull Request e o envie o link do seu PR no [**formulário de entrega**](https://docs.google.com/forms/d/e/1FAIpQLSfziutw6aVuh1sCuG14L5zn-2ds80yMkrgUWhe_aZRaixopdw/viewform).
+## Desenvolvido com:
 
+<p>HTML, CSS e JavaScript <p/>
+
+## Visualização:
+<p> https://landing-page-roberta.surge.sh </p>

Styles/style.css

@@ -0,0 +1,148 @@
+*{
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+    text-decoration: none;
+
+}
+
+header {        
+    padding: 30px 6%;
+    background-color:white;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.Logo {
+    color: rgb(221, 144, 20);
+    font-size: 20px;
+    line-height: 25px;
+    font-family:'Ubuntu', sans-serif; ;
+}
+
+.navlist{
+    display: flex;
+    align-items: center;
+}
+
+.navlist a {
+ color: black;
+ margin: 20px;
+ font-size: 15px;
+ }
+
+ .navlist li {
+    display: inline-block;
+ }
+
+
+ .navlist :hover{
+    color: rgb(221, 144, 20);
+ }
+
+.Logo h1{
+    padding: 7px;
+}
+
+
+/*Criando estilos na main*/
+
+
+main {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    min-height: 90vh;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(245.59deg,#b6580a 0%,#2b1a0e 26.53%, #1b1a1a 75.52%)
+}
+
+article {
+
+    display: flex;
+    max-width: 50%; 
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    flex-direction: column;
+    font-size: 2em;
+}
+
+article h1 {    
+    color: #ffffff;
+}
+
+img {
+    max-width: 500px;
+}
+
+/*estilizando botão abrir-conta*/
+
+#Abrir-conta {
+    background-color: #ffffff;
+    padding: 10px 50px;  /* fundo do botão "abra-conta" espacamento entre texto e botão primeiro altura e depois largura*/
+    border: none; /* Tirar borda do botão "abra-conta"*/
+    font-weight: bolder; /*Força da fonte*/ 
+    border-radius: 20px; /*arredondamento do botão*/
+    cursor: pointer; /*Caracter de dedinho quando se passa o mouse pelo botão da pagina*/
+    margin-top: 50px; /*Margem superior do ultimo enunciado*/
+}
+
+#Abrir-conta:hover{
+    background-color: #b6580a;
+    color: #ffffff; 
+}
+/* Estilização da sessão "Conta-corrente-digital"*/
+
+.Conta-corrente-digital {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+}
+/* Estilização da imagem 2*/
+
+.imagem {
+    flex: 1 ; /*/* Ocupa metade da largura da seção */
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    padding: 30px;
+}
+
+.imagem img {
+    max-width: 100%;
+    padding: 0;
+    margin: 0;
+    border-radius: 30px;
+}
+/* Estilo CSS para o texto */
+
+.texto{
+    flex: 1;
+    padding: 20px;
+    text-align: center;
+    font-size: 1.5em;
+}
+.texto h1{
+    padding: 20px;
+    text-shadow: 2px 2px 4px rgb(0,0,0,0.5);     
+}
+
+.texto a {
+    padding: 20%;
+    color: black;
+}
+
+.texto a:hover{
+    color:#b6580a;
+}
+
+
+
+
+

index.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head> 
+        <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="./Styles/style.css">
+    <!-- Importando fontes do google --> 
+
+    <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=Ubuntu:ital,wght@1,700&display=swap" 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=Poppins:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
+</head>
+<body>
+    <header>
+        <div class="Logo">  
+            <h1> F4 </h1>
+            <h1> Bank </h1>
+        </div>    
+
+        <ul class="navlist">
+            <li> <a href="#"> Sobre nos </a> </li>    
+            <li> <a href="#">Abra sua conta</a></li>    
+            <li> <a href="#"> Contato</a> </li>    
+            <li> <a href="#">Central de ajuda</a> </li>   
+
+        </ul>
+
+    </header>
+
+    <main>
+
+        <article>
+            <h1>
+                Mude para o <br>
+                F4Bank <br>
+                E tenha soluções financeiras para um amanhã melhor!
+            </h1>
+            <button id="Abrir-conta"> 
+                Abra sua conta 
+
+            </button>
+
+        </article>
+
+        <img src="./Assets/projeto 1ª .png" alt="mockup cartão">
+
+    </main>
+
+    <section class="Conta-corrente-digital">
+        <div class="imagem">
+            <img src="./Assets/projeto 2ª .jpg" alt="">
+        </div>
+        <div class="texto">
+            <h1> Conta corrente com o melhor rendimento do Brasil </h1>
+            <p> Com o F4 Bank você facilita a sua vida, investindo, recebendo e pagando o que quiser de um só lugar, de forma segura e gratuita.</p>
+            <a href="#"> Abra sua conta agora mesmo! </a>
+        </div>
+        </section>
+
+</body>
+</html>