Used flex to align Header,Footer,Nav bar, and Content

Author: iBeZeKe

flex/04-flex-information/.Rhistory

@@ -11,7 +11,7 @@
     <div class="header">
       MY AWESOME WEBSITE
     </div>
-    
+    <div class="body">
     <div class="sidebar">
       <ul>
         <li><a href="#">⭐ - link one</a></li>
@@ -21,13 +21,16 @@
       </ul>
     </div>
 
+  <div class="main-doc">
     <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
     <div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
     <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
     <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
     <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
     <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
-    
+  </div>
+</div>
+
     <div class="footer">
       The Odin Project ❤️
     </div>

flex/06-flex-layout/.Rhistory

@@ -1,28 +1,82 @@
+
 body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   margin: 0;
   min-height: 100vh;
+
+}
+
+body{
+  display: flex;
+  flex-direction: column;
+}
+.body{
+  display: flex;
+  flex:1
 }
 
 .header {
   height: 72px;
   background: darkmagenta;
   color: white;
-}
+  font-size: 32px;
+  font-weight: 900;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
 
-.footer {
-  height: 72px;
-  background: #eee;
-  color: darkmagenta;
+  
 }
 
 .sidebar {
   width: 300px;
   background: royalblue;
+  flex-shrink: 0;
+  padding: 16px;
+
+}
+
+ul{
+  list-style: none;
+  margin: 0;
+}
+
+li{
+  margin-bottom: 16px;
+}
+
+a{
+color: whitesmoke;
+text-decoration: none;
+cursor: pointer;
+font-size: 24px;
+
+}
+
+.main-doc{
+  padding: 32px;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .card {
   border: 1px solid #eee;
   box-shadow: 2px 4px 16px rgba(0,0,0,.06);
   border-radius: 4px;
+  padding: 16px;
+  margin: 16px;
+  width: 300px;
+}
+
+.footer {
+  height: 72px;
+  background: #eee;
+  color: darkmagenta;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+/*
+  position:fixed;
+  bottom: 0;
+  width: 100%;*/
 }