future4code · MirandaFayra · Aug 28, 2021 · Aug 28, 2021 · Sep 5, 2021 · Sep 5, 2021
diff --git a/1img/4food.png b/1img/4food.png
diff --git a/1index.html b/1index.html
@@ -0,0 +1,39 @@
+<!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" type="text/css" href="1style.css">
+    <title>Cabeçalho</title>
+</head>
+<body>
+    <section class="cabeçalho"><header> 
+        <div class="container-logo">
+            <div class="logo-imagem">
+                <img src="1img/4food.png" alt="logo">
+            </div>
+            <!-- <div class="logo-texto"><h1>4FOOD</h1></div> -->
+
+
+        </div> <!--container logo-->
+
+        <div class="menu">
+            <ul>
+                <li><a href="#">Entregador</a></li>
+                <li><a href="#">Restaurante e Mercado</a></li>
+                <li><a href="#">Carreiras</a></li>
+            </ul>
+        </div> <!--menu-->
+
+        <div class="login">
+            <button id="criar">Criar Conta</button>
+            <button id="entrar"> Entrar </button>
+        </div>
+
+    </header>
+</section>
+
+
+</body>
+</html>
diff --git a/1style.css b/1style.css
@@ -0,0 +1,101 @@
+/* CSS do cabeçalho */
+
+*{
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+header{
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    background-color: #ffffff;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.logo-imagem img{
+    width: 120px;
+    height: 120px;
+}
+
+.container-logo{
+    display: flex;
+    align-items: center;   
+}
+
+.logo-texto{
+    margin-left:  20px; 
+    color: rgb(169 126 66);
+}
+.menu li{
+ display: inline-block ;
+ margin: 0 10px;
+
+}
+
+.menu li a{
+ font-size: 20px;
+ text-decoration: none;
+ color: rgb(169 126 66);
+  padding: 5px 5px;
+}
+
+.login{
+    display: inline-block;
+    margin-left:  20px;
+}
+.login button{
+    font-size: 20px;
+ text-decoration: none;
+ color: rgb(169 126 66);
+}
+
+#criar{
+    padding: 5px 10px;
+    background-color:#ffffff;
+    border-radius: 10px;
+}
+
+#criar:hover{
+    background-color: rgb(219, 219, 219)
+}
+#entrar{
+    margin-left: 10px;
+    padding: 10px 15px;
+    background-color:rgb(169 126 66);
+    color: #ffffff;
+    border-radius: 10px;
+}
+
+#entrar:hover{
+    background-color:burlywood;
+}
+
+@media screen and (max-device-width:500px) {
+ header{
+     background-color: white;
+
+ }  
+
+ .menu ul{
+     display: grid;
+ }
+ .menu li a{
+     display: grid;
+     font-size: 90%;
+
+ }
+
+ .login{
+    margin-right: 15px;
+    width: 50%;
+ }
+
+ #entrar{
+     margin-left: 16px ;
+     margin-top: 10px;
+ }
+}
diff --git a/Final/landingPageFinal/4food (1).png b/Final/landingPageFinal/4food (1).png
diff --git a/Final/landingPageFinal/4food.png b/Final/landingPageFinal/4food.png
diff --git a/Final/landingPageFinal/cabecalho.css b/Final/landingPageFinal/cabecalho.css
@@ -0,0 +1,105 @@
+/* CSS do cabeçalho */
+
+*{
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+header{
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    background-color: #ffffff;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.logo-imagem img{
+    width: 120px;
+    height: 120px;
+}
+
+.container-logo{
+    display: flex;
+    align-items: center;   
+}
+
+.logo-texto{
+    margin-left:  20px; 
+    color: rgb(169 126 66);
+}
+.menu li{
+ display: inline-block ;
+ margin: 0 10px;
+
+}
+
+.menu li a{
+ font-size: 20px;
+ text-decoration: none;
+ color: rgb(169 126 66);
+  padding: 5px 5px;
+}
+
+.login{
+    display: inline-block;
+    margin-left:  20px;
+}
+.login button{
+    font-size: 20px;
+ text-decoration: none;
+ color: rgb(169 126 66);
+}
+
+#criar{
+    padding: 5px 10px;
+    background-color:#ffffff;
+    border-radius: 10px;
+}
+
+#criar:hover{
+    background-color: rgb(219, 219, 219)
+}
+#entrar{
+    margin-left: 10px;
+    padding: 10px 15px;
+    background-color:rgb(169 126 66);
+    color: #ffffff;
+    border-radius: 10px;
+}
+
+#entrar:hover{
+    background-color:burlywood;
+}
+
+@media screen and (max-device-width:375px) {
+ header{
+     background-color: white;
+     width:375px;
+     display:grid;
+     grid-template-rows: 1fr 1fr 1fr 1fr;
+     position:absolute;
+
+ }  
+
+ .menu ul{
+     display: grid;
+ }
+ .menu li a{
+     display: grid;
+     font-size: 90%;
+
+ }
+
+ .login{
+    margin-right: 15px;
+    width: 50%;
+ }
+
+ #entrar{
+     margin-left: 16px ;
+     margin-top: 10px;
+ }
+} 
diff --git a/Final/landingPageFinal/corpo.css b/Final/landingPageFinal/corpo.css
@@ -0,0 +1,105 @@
+*{
+    padding: 0;
+    margin: 0;
+}
+
+.corpo {
+    display: grid;
+    min-height: 100vh;
+    grid-template-rows: 1fr 150px;
+    grid-template-columns: 300px 1fr;
+    }
+
+nav {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: flex-start;
+    margin-left: 85px;
+}
+
+button {
+    background-color: rgb(150, 124, 9);
+    border: none;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+}
+
+.imagem {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    grid-column: 2 / 3;
+    height: 500px;
+    width: 80px;
+    margin-left: 120px;
+}
+
+.texto {
+    background-color: rgb(150, 124, 9);
+    font-size: 18px;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    grid-row: 2/ 3;
+    grid-column: 2/3;
+
+}
+
+.cartao {
+    display: flex ;
+    align-items: center;
+    height: 10x;
+    width: 10px;
+    grid-row: 2 / 2;
+    grid-column: 1/1 ;
+    margin-left: 65px;
+}
+br{
+    display:none;
+}
+
+@media screen and (max-width:375px){
+
+   .corpo{
+       display:grid;
+       grid-template-rows: 1fr 1fr  1fr;
+       align-items: center;
+       justify-content: center;
+       background-color: green;
+       grid-template-rows: 100px 100px 100px;
+
+   }
+   .imagem{
+       display:none;
+   }
+   .texto{
+       display:grid;
+       grid-template-rows: 1fr;
+       margin-top:10px;
+       justify-items: center;
+       align-items: center;
+       grid-column: 1;
+       grid-row: 2;
+       height:100px;
+
+
+   }
+   .cartao{
+       display:grid;
+       grid-template-rows: 1fr;
+       margin-top:300px;
+       height:100px;
+
+   }
+   br{
+       display:block;
+   }
+}
diff --git a/Final/landingPageFinal/facebook.png b/Final/landingPageFinal/facebook.png
diff --git a/Final/landingPageFinal/images.png b/Final/landingPageFinal/images.png