finalizar entrega do projeto

README.md

@@ -1,140 +1,33 @@
-# 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 
+# UPFOUR
 
-# Enunciado
-Você deverá desenvolver uma Landing Page para uma das empresas fictícias apresentadas. 
+LINK DO SURGE: combative-fold.surge.sh
 
-**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. 
+## Principais funcionalidades: 
 
-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. 
+barra de navegação com botões que vão para a sua respectiva página. ao passar o mouse em cima, os botões mudam de cor.
+footer com informações de local e redes sociais.
+quando passa o mouse por cima do texto do card, o fundo do cartão ilumina. 
+a página de cadastro tem a função do DOM para obter os dados, validar o cadastro e apagar os dados após o alert.
 
-É 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!
 
+## versão desktop e mobile 
 
-<details>
-   <summary>Empresas fictícias</summary>
-
+![Página inicial iphone](image.png) 
 
-#### Projeto F4Bank
+![página inicial 1280 x 800](image-1.png) 
 
-  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.
+![ágina cadastro 1280 x 800](image-2.png) 
 
-[Logo aqui](https://labenu.notion.site/Projeto-Landing-Page-WFS-7b37ff1460e741b1b5e1e049d7df9d69)
-
+![página cadastro iphone](image-3.png) 
 
-#### Projeto 4Food
+![página conheça nossa história 1280 x 800](image-4.png)
 
-  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.
+![página conheça nossa história iphone](image-5.png)
 
-[Logo aqui](https://labenu.notion.site/Projeto-Landing-Page-WFS-7b37ff1460e741b1b5e1e049d7df9d69)
-
+![página fale conosco 1280 x 800](image-6.png)
 
-#### Projeto 4Comfort
+![página fale conosco iphone](image-7.png)
 
-  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.
-
-## 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. 
-
-- [ ] **Logomarca:** A logomarca fornecida pelo cliente, que deve ser apresentada de forma clara e em um local estratégico da página.	
-
-- [ ] **Paleta de cores:** Uma paleta de cores baseada na logomarca fornecida pelo cliente.	
-
-- [ ] **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.
-
-- [ ] **Redes Sociais:** Incluir pelo menos  2 ícones para redes sociais, visíveis e clicáveis.	
-
-- [ ] **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)
-
-- [ ] **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:** 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.
-
-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).
+obs.: para a navbar e o footer, adicionei uma barra de rolagem para a horizontal, assim ela fica do tamanho normal 
+sem precisar cortar o texto da página. e quando necessário adicionei uma barra de rolagem vertical.
 

cabecalho.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css" type="text/css">
+
+</head>
+<body>
+        <header class="cabecalho">
+            <p>Seja bem vindo a UpFour</p>
+        </header>
+        <ul>
+            <li><a href="index.html"></a></li>
+            <li><a href="cadastro.html"></a></li>
+
+        </ul>
+
+
+</body>
+</html>

cadastro.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>cadastro para simulação de crédito</title>
+    <link rel="stylesheet" href="style.css" type="text/css">
+    <script src="script.js" defer></script>
+</head>
+<body class="cadastro">
+
+    <object type="text/html" data="cabecalho.html"></object>
+
+    <div class="cartao-container">
+        <form id="meuFormulario" onsubmit="return validarUsuario(event)">
+            <div class="cartao">
+                <h2>Cadastro</h2>
+                <label for="nome">Nome:</label>
+                <input type="text" id="nome" name="nome" required>
+
+                <label for="email">E-mail:</label>
+                <input type="email" id="email" name="email" required>
+
+                <label for="dataNascimento">Data de Nascimento:</label>
+                <input type="date" id="dataNascimento" name="dataNascimento" required>
+
+                <label for="sonho">Qual sonho você quer realizar com a UpFour?</label>
+                <textarea id="sonho" name="sonho" required></textarea>
+
+                <input type="submit" value="Cadastrar">
+            </div>
+        </form>
+
+        <div class="cartao">
+            <h2>Construindo seu futuro</h2>
+            <p>Antes de seguir em frente, queremos estar mais próximos de você. Na UpFour, acreditamos que 
+                cada sonho merece atenção especial. Por isso, gostaríamos de conhecer mais sobre suas 
+                aspirações e desejos. Entender o que faz seu coração pulsar mais forte nos ajuda a 
+                oferecer uma experiência personalizada para alcançar seus objetivos. Compartilhe conosco 
+                um pouco sobre os sonhos que você busca realizar, e juntos faremos acontecer.
+            </p>
+        </div>
+    </div>
+
+</body>
+</html>

faleconosco.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>fale conosco</title>
+    <link rel="stylesheet" href="style.css" type="text/css">
+</head>
+<body>
+    <object type="text/html" data="cabecalho.html"></object>
+    <div class="card">
+        <h2>Precisa de ajuda? </h2>
+        <ul class="faq">
+            <li>
+                <h3>Como posso solicitar um empréstimo na UpFour?</h3>
+                <p> Você pode solicitar um empréstimo preenchendo o formulário de solicitação em nossa página principal. Após o envio, nossa equipe entrará em contato para dar continuidade ao processo.</p>
+            </li>
+            <li>
+                <h3>Quais documentos são necessários para solicitar um crédito?</h3>
+                <p> Normalmente, precisamos de documentos de identificação, comprovante de residência e comprovantes de renda. Esses requisitos podem variar, então entre em contato conosco para obter informações específicas.</p>
+            </li>
+            <li>
+                <h3> Qual é o prazo para aprovação do empréstimo?</h3>
+                <p>Resposta: O prazo para aprovação pode variar, mas geralmente nossa equipe trabalha para fornecer uma resposta dentro de 2 a 5 dias úteis após receber todos os documentos necessários.</p>
+            </li>
+            <li>
+                <h3> A UpFour oferece orientação financeira?</h3>
+                <p>Resposta: Sim, além de empréstimos, oferecemos orientação financeira personalizada para ajudar nossos clientes a gerir suas finanças de forma eficaz.</p>
+            </li>
+            <li>
+                <h3>Como faço para entrar em contato com o suporte ao cliente?</h3>
+                <p>Entre contato conosco pelas nossas redes sociais localizadas no canto direito da página inicial.</p>
+            </li>
+        </ul>
+    </div>
+</body>
+</html>

história.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>conheça nossa história</title>
+    <script src="script.js" defer></script>
+    <link rel="stylesheet" href="style.css" type="text/css">
+
+
+</head>
+<body>
+
+    <object type="text/html" data="cabecalho.html"></object>
+    <div class="card">
+        <h2>Conheça nossa história</h2>
+        <p>A UpFour é uma empresa inovadora que visa oferecer oportunidades concretas para os moradores das periferias.
+             Nosso foco é impulsionar o empreendedorismo local, fornecendo acesso a crédito pessoal e um sistema 
+             abrangente de controle financeiro e orientação.
+
+            Nosso compromisso vai além de simplesmente oferecer empréstimos. Acreditamos que cada pessoa tem o 
+            potencial de se tornar um agente de mudança em sua própria comunidade. É por isso que nos dedicamos a 
+            capacitar empreendedores, oferecendo recursos financeiros, conhecimento e suporte necessário para
+            transformar sonhos em realidade.
+
+            Similar a modelos reconhecidos, como o da Creditas, nossa proposta é diferenciada ao concentrar-se
+            exclusivamente nos moradores de áreas periféricas. Queremos romper barreiras, abrir portas e 
+            roporcionar uma verdadeira oportunidade de crescimento para aqueles que muitas vezes são 
+            marginalizados pelo sistema financeiro tradicional.
+
+            Construímos este site como uma ferramenta para alcançar esse público em específico. Aqui,
+            cada visitante encontrará não apenas um serviço de crédito pessoal sob medida, mas também 
+            um sistema completo de orientação financeira. Acreditamos firmemente que é possível transformar vidas e 
+            histórias, capacitando indivíduos a se tornarem protagonistas em seus contextos sociais.
+
+            Junte-se a nós nessa jornada de construção de um futuro mais inclusivo e promissor, onde cada 
+            empreendedor é visto, valorizado e apoiado em sua busca por crescimento e realização.</p>
+    </div>
+
+
+</body>
+</html>