From 2846796fb857c9b7605a82e419fdb521e4a160fb Mon Sep 17 00:00:00 2001
From: galalkoro <koro-galal@outlook.com>
Date: Fri, 5 Jun 2020 22:09:25 +0200
Subject: [PATCH]  level-1 finished close #29

---
 level-1/index.html        | 13 +++++++++++--
 level-1/step-1/step-1.css |  7 ++++++-
 level-1/step-2/step-2.css | 13 +++++++++++++
 level-1/step-3/step-3.css | 16 ++++++++++++++++
 4 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/level-1/index.html b/level-1/index.html
index 4de4033c..2ab5d7a9 100644
--- a/level-1/index.html
+++ b/level-1/index.html
@@ -44,7 +44,12 @@
 
                     <header class="content-mid-header"></header>
 
-                    <div class="content"></div>
+                    <div class="content">
+                      <p>Started his hearted any civilly. So me by marianne admitted speaking.<br>
+                         Men bred fine call ask. Cease one miles truth day above seven. <br> 
+                         Suspicion sportsmen provision suffering mrs saw engrossed something. <br>
+                          Snug soon he on plan in be dine some. </p>
+                    </div>
 
                 </section>
 
@@ -52,7 +57,11 @@
 
         </section>
 
-        <footer class="footer"> </footer>
+        <footer class="footer"> 
+          <div>
+            <h1>Footer</h1>
+          </div>
+        </footer>
 
     </main>
   </body>
diff --git a/level-1/step-1/step-1.css b/level-1/step-1/step-1.css
index 78865286..9201d9e9 100755
--- a/level-1/step-1/step-1.css
+++ b/level-1/step-1/step-1.css
@@ -11,6 +11,8 @@
     /* This height is a placeholder. You will need to make some adjustments to get this container to look like the design. */
     height: 100px;
     background: #565555;
+    height: calc( 100vh - 200px );
+    float: left;
 }
 
 
@@ -19,14 +21,17 @@
 .content-mid {
     width: 66%;
     /* This height is a placeholder. You will need to make some adjustments to get this container to look like the design. */
-    height: 100px;
+    height: calc( 100vh - 200px );
     background: #B0B0B0;
+    float: right;
 }
 
 /* Use float to get this container to the bottom of the screen  */
 
 .footer {
+    position: absolute;
     width: 100%;
     height: 100px;
     background: #3A3A3A;
+    bottom: 0;
 }
\ No newline at end of file
diff --git a/level-1/step-2/step-2.css b/level-1/step-2/step-2.css
index 73095f05..90a218b4 100644
--- a/level-1/step-2/step-2.css
+++ b/level-1/step-2/step-2.css
@@ -1,12 +1,14 @@
 /* Step-2 You can assign padding to all sides of a container by using the padding shorthand property. */
 
 .content-left {
+    padding: 20px;
  
 }
 
 /* Step 2 You can assign padding to all sides of a container by using the padding shorthand property. */
 
 .header {
+    padding: 20px;
   
 }
 
@@ -15,17 +17,25 @@
 
 .profile-image-container {
     background: #96F0F2;
+    width: auto;
+    height: 35%;
+    margin-bottom: 23px;
 }
 
 /* Step-2 One option to get the container to fill the parent container is to use width: auto; */
 
 .profile-links-container {
+    height: calc( 70% - 20px );
     background: #12F3F7;
+    width: auto;
 }
 
 /* Step-2 You can either use float left to get this element to in the desired location. */
 
 .logo-container {
+    float: left;
+    height: 100%;
+    width: 300px;
     background: #4F4949;
 }
 
@@ -33,6 +43,9 @@
 /* Step-2 You can either use float right to get this element to in the desired location. */
 
 .menu-container {
+    float: right;
+    width: 50px;
+    height: 100%;
     background: #4F4949;
 }
 
diff --git a/level-1/step-3/step-3.css b/level-1/step-3/step-3.css
index 5589c8b2..7cb9254d 100755
--- a/level-1/step-3/step-3.css
+++ b/level-1/step-3/step-3.css
@@ -1,17 +1,33 @@
 /* Step-3 You can assign padding to all sides of a container by using the padding shorthand property. */
 
 .content-mid {
+  padding: 80px;
  
 }
 
 .content-mid-header {
   background: #444;
+  width: auto;
+  height: 25%;
 }
 
 .content-container {
+  width: auto;
+  height: 100%;
 
 }
 
 .content {
+  height: 90%;
+  width: auto;
+  padding: 20px;
+  text-align: center;
   background: #D8D8D8;
 }
+
+.footer {
+  background:  rgb(131, 115, 115);
+  text-align: center;
+  padding-top: 30px;
+  font-size: 50px;
+}