Merge pull request #5 from future4code/home

Home - header e footer
future4code · Jan 24, 2020 · f76cc18 · f76cc18
2 parents b7bf453 + 18cb024
commit f76cc18
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 1 deletion.
diff --git a/projeto/4food.png b/projeto/4food.png
diff --git a/projeto/index-home.html b/projeto/index-home.html
@@ -5,6 +5,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link href="https://fonts.googleapis.com/css?family=PT+Serif|Roboto|Roboto+Condensed&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=PT+Serif|Roboto&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="grid.css">
     <link rel="stylesheet" href="style-home.css">
     <title>HOME</title>
@@ -17,6 +19,13 @@
         <nav>
             <ul>
 
+                <a href="quem-somos.html">Quem Somos</a>
+                <a href="produtos.html">Refeições Prontas</a>
+                <a href="produtos.html">Supermercado rápido?</a>
+
+            </ul>
+        </nav>
+
                 <a href="#">Quem Somos</a>
                 <a href="#">Refeições Prontas</a>
                 <a href="#">Supermercado rápido?</a>
@@ -29,6 +38,31 @@
             <img src="imagens/user.png" alt=xxx></img>
             <img src="imagens/shopping-bag.png" alt=xxx></img>
         </section>
+
+    </header>
+
+
+    <article class="home">
+        <h1>TÍTULO</h1>
+        <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
+            deleniti atque
+            corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique
+            sunt in
+            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis
+            est et
+            expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo
+            minus id
+            quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus
+            autem
+            quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae
+            sint et
+            molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
+            voluptatibus
+            maiores alias consequatur aut perferendis doloribus asperiores repellat."</p>
+    </article>
+
+
+    <footer>
 
     </header>
 
@@ -68,6 +102,13 @@ <h1>TÍTULO</h1>
         </ul>
 
         <div class="midias-sociais">
+            <a href="https://facebook.com" target="_blank"><img src="imagens/facebook.png"></a>
+            <a href="https://instagram.com" target="_blank"><img src="imagens/instagram.png"></a>
+            <a href="https://twitter.com" target="_blank"><img src="imagens/twitter.png"></a>
+        </div>
+
+    </footer>
+
             <a class="footer" href="https://facebook.com"><img src="imagens/facebook.png"></a>
             <a class="footer" href="https://instagram.com"><img src="imagens/instagram.png"></a>
             <a class="footer" href="https://twitter.com"><img src="imagens/twitter.png"></a>

diff --git a/projeto/style-home.css b/projeto/style-home.css
@@ -2,16 +2,23 @@
     margin:0;
 }
 
+/* HEADER */
 header {
     display:grid;
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: 1fr 1fr;
     border-bottom: solid #FF752B ;
     height: 100px;  
-
+    font-family: 'Roboto Condensed', sans-serif;
 }
 
 .logo {
+    position: fixed;
+    left: 0;
+    grid-area: 1 /1;
+    max-height: 100%;
+    max-width: 100%;
+}
     /* float:left; */
     /* height: 5%;
     width: 20%; */
@@ -29,6 +36,35 @@ nav {
     grid-row-start: 2;
 }
 
+nav a {
+    text-decoration: none; 
+    padding-left: 1vw ;
+    color: #ff752b;
+}
+
+/* CONTENT */
+article {
+    background-color: grey;
+    color:#403D3D;
+    font-family: 'Roboto', sans-serif;
+}
+
+/* FOOTER */
+footer {
+    background-color: #FF752B;
+    color:#E6DCDC;
+    display:grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
+}
+
+footer a {
+    color:#E6DCDC;
+    text-decoration: none; 
+    padding-left: 10vw ;
+    font-family: 'Roboto Condensed', sans-serif;
+}
+
 a {
     color:orange;
     text-decoration: none;