labenuexercicios · jjoycel · Apr 26, 2023 · May 4, 2023 · May 5, 2023
diff --git a/assets/artesanato.jpeg b/assets/artesanato.jpeg
diff --git a/assets/cachorro-quente.jpeg b/assets/cachorro-quente.jpeg
diff --git a/assets/confeitaria.jpeg b/assets/confeitaria.jpeg
diff --git a/assets/costureira.jpeg b/assets/costureira.jpeg
diff --git a/assets/crescimento-dinheiro.jpg b/assets/crescimento-dinheiro.jpg
diff --git a/assets/dinheiro.avif b/assets/dinheiro.avif
diff --git a/assets/facebook.png b/assets/facebook.png
diff --git a/assets/ideias.jpg b/assets/ideias.jpg
diff --git a/assets/insta.jpg b/assets/insta.jpg
diff --git a/assets/logo-menor-upfour.jpg b/assets/logo-menor-upfour.jpg
diff --git a/assets/orientação.png b/assets/orientação.png
diff --git a/assets/upFour (1).png b/assets/upFour (1).png
diff --git a/index.html b/index.html
@@ -0,0 +1,104 @@
+<!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">
+  <title>upFour</title>
+
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <main>
+    <div id="cadastro">
+      <button> Cadastre-se e faça sua simulação gratuitamente </button>
+      <!-- pedir nome, email,  -->
+    </div>
+    <header>
+      <img id="logo" src ="assets/upFour (1).png" alt="logo-upfour" >
+
+      <div id="simule">
+        <button><strong>Fale conosco</strong></button>
+        <button><strong>Simulação</strong></button>
+        <button><strong>Área do Usuário</strong></button>
+        <button><strong>Cadastre-se</strong></button>
+        <button><strong>Orientação financeira</strong></button>
+      </div>
+
+    </header>
+    <div>
+
+      <div id="bloco-central">
+        <div id="bloco-1">
+          <h2>Crédito de até 5 mil reais para você iniciar o seu negócio. Oferecemos as menores taxas do mercado.</h2>
+        </div>
+
+        <div id="imagem-dinheiro"> <img src="assets/dinheiro.avif" alt="dinheiro" >
+        </div>
+
+        <div id="bloco-2">
+          <h2> Realize seu sonho com pagamento facilitado em até 60 meses. Casa, carro ou moto como garantia.</h2>
+          <p>Um crédito em dinheiro para que você possa iniciar adquirindo os materiais e/ou ferramentas necessárias
+            para começar</p>
+        </div>
+
+        <div id="imagem-costureira">
+          <img src="assets/costureira.jpeg" alt="costura" >
+        </div>
+
+        <div id="bloco-3">
+          <h2>Orientação Financeira Gratuita</h2>
+          <p>Contamos com uma equipe de especialistas em gerenciamento financeiro para te ajudar no controle dos seus
+            gastos e proventos</p>
+          <button>Cadastre-se e fale com nossos especialistas</button>
+          <img id="orientacao" src="assets/orientação.png" alt="orientacao" /></p>
+        </div>
+
+        <div id="imagem-hotdog">
+          <img src="assets/cachorro-quente.jpeg" alt="hot-dog" >
+        </div>
+
+        <div id="bloco-4">
+          <h2>Pgamento Facilitado</h2>
+          <p>Pagamento em até 60 meses para você que tem uma boa ideia, deseja empreender e precisa daquele
+            empurrãozinho</p>
+          <img id="dinheiro" src="assets/dinheiro.avif" alt="dinheiro" />
+
+        </div>
+
+        <div id="bloco-5">
+          <h2>Acreditamos que a sua mudança de vida influencia e muda a vida de outras pessoas.</h2>
+          <p>Oferecemos crédito especial para que pessoas com renda inferior a três salários mínimos possam iniciar e
+            gerir o próprio negócio</p>
+        </div>
+        <div id="imagem-confeitaria">
+          <img src="assets/confeitaria.jpeg" alt="confeitaria" >
+        </div>
+        <div>
+          <h2>Ideias de negócios</h2>
+          <h3>Ainda não sabe por onde começar?</h3>
+          <p>Existem várias histórias de pessoas que começaram investindo muito pouco em seus negócios e hoje gerenciam
+            grandes empresas. Se você sente que este é o seu momento de empreender mas não sabe por onde começar,
+            separamos algumas opções que podem te ajudar a criar a sua própria marca</p>
+          <div id="imagem-ideias">
+            <img src="assets/ideias.jpg" alt="">
+          </div>
+          <a href="https://blog.cielo.com.br/dicas-e-historias-de-sucesso/como-montar-um-negocio-com-5-mil-reais/">Veja
+            aqui algumas ideias de com começar o proprio negocio</a>
+        </div>
+
+      </div>
+    </div>
+    <footer>
+      <h6> Siga-nos nas nossas redes sociais</h6>
+
+      <a href="https://www.instagram.com/"> <img id="insta" src="assets/insta.jpg" alt="instagram"></a>
+      <a href="https://pt-br.facebook.com/"><img id="facebook" src="assets/facebook.png" alt="facebook"></a>
+
+    </footer>
+  </main>
+</body>
+
+</html>
diff --git a/projeto-upfour-joyce/readme.md b/projeto-upfour-joyce/readme.md
@@ -0,0 +1,10 @@
+# Landing Page
+Nesse projeto, o objetivo foi 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.
+A empresa escolhida foi a "UpFour.", uma empresa fictícia 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. Tendo como proposta 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, a pagina foi especialmente estruturada para atender esses requisitos.
+
+Durante a construção desse site, foram estudados e praticados os seguintes conteúdos:
+* HTML
+* CSS
+	* Flex
+	* Grid
+* DOM 
diff --git a/style.css b/style.css
@@ -0,0 +1,185 @@
+*{
+
+    font-family: Arial, Helvetica, sans-serif;
+    margin: 0;
+    padding: 0;
+
+}
+#logo{
+    width: 20vw;
+}
+
+main{
+    background-color: rgb(31,31,36); 
+
+}
+header{
+    display: flex;
+    color: white;
+    margin-top: 100px;
+   justify-items: end;
+}
+
+
+section{
+    display: flex;
+}
+/* header img{
+
+        width: 50vw;
+        height: 30vh;
+
+} */
+#cadastro button{
+    /* width: 100vw;
+    height: 4vw; */
+    background-color:yellow;
+    font-size: 2rem;
+    position: fixed;
+    height: 100px;
+    width: 100%;
+    top: 0;
+    cursor: pointer;
+
+}
+#cadastro button:hover{
+    background-color: rgb(31,31,36);
+    color: antiquewhite;
+}
+#cadastro button:active{
+    color: gray;
+
+}
+#simule{
+    /* width: 40%; */
+    display: flex;
+
+
+}
+#simule button{
+    background-color: yellow;
+    color: black;
+    font-size: 1.3rem;
+    cursor: pointer;
+    /* width: 0%; */
+    height: 60px;
+    border-radius: 20px;
+
+}
+#simule button:hover{
+    background-color: rgb(31,31,36);
+    color: antiquewhite;
+}
+#simule button:active{
+    color: gray;
+}
+
+#bloco-central{
+    display: grid;
+    grid-template: repeat(4,1fr) / repeat(2,1fr);
+    /* border: 1px solid red; */
+    color: antiquewhite;
+    justify-items: center;
+    align-items:start;
+    margin-top: 200px;
+    width: 100vw;
+
+
+
+
+}
+#bloco-1{
+    height: 500px;
+    /* width: 30vw; */
+    /* background-color: blue; */
+    grid-column: 1/2;
+    grid-row: 1/2;
+    /* border: 2px solid white; */
+    font-size: 1.3rem;
+    text-align: end;
+    border-radius: 20px;
+
+
+}
+#imagem-dinheiro{
+    grid-row: 1/2;
+    grid-column: 2/3;
+    height: 50vh;
+    width: 50vw; 
+    text-align: center;
+    border-radius: 30px;
+}
+#bloco-2{
+    /* background-color: blueviolet; */
+    width: 500px;
+    height: 500px;
+    grid-column: 2/2;
+    grid-row: 2/3;
+    font-size: 2rem;
+    text-align: start;
+
+
+}
+#imagem-costureira{
+    grid-row: 2/3;
+    grid-column: 1/2;
+    text-align: end;
+    border-radius: 30px;
+}
+#bloco-3{
+    /* background-color: aqua; */
+    height: 500px;
+    width: 500px;
+    grid-row: 3/4;
+    grid-column: 1/2;
+    /* border: 2px solid white; */
+    font-size: 2rem;
+    text-align: end;
+
+}
+#imagem-hotdog{
+    grid-row: 3/4;
+    grid-column: 2/2;
+    height: 500px;
+    width: 500px;
+    text-align: start;
+    border-radius: 30px;
+}
+#bloco-5{
+    /* background-color:coral ; */
+    height: 500px;
+    width: 500px;
+    grid-row: 4/5;
+    grid-column: 2/2;
+    /* border: 2px solid white; */
+    font-size: 2rem;
+    text-align: start;
+
+
+}
+#imagem-confeitaria{
+    grid-row: 4/5;
+    grid-column: 1/2;
+    text-align: end;
+    border-radius: 30px;
+    border-radius: 100px;
+}
+
+footer{
+    width: 50%;
+    display: flex;
+    justify-items:flex-end;
+    color: white;
+
+}
+h6{
+    width: 20vw;
+
+}
+#insta{
+    width: 10%;
+}
+
+#facebook{
+    width: 50%;
+}