level-1 finished

close DevMountain#29
galalkoro · Jun 5, 2020 · 2846796 · 2846796
1 parent 6affc90
commit 2846796
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 3 deletions.
diff --git a/level-1/index.html b/level-1/index.html
@@ -44,15 +44,24 @@
 
                     <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>
 
             </div>
 
         </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
@@ -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;
 }
diff --git 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,24 +17,35 @@
 
 .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;
 }
 
 
 /* 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
@@ -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;
+}