Step 2

level-1/index.html

@@ -21,6 +21,7 @@
     <main class="main-wrapper">
 
         <header class="header">
+
 
             <div class="logo-container"></div>
 
@@ -31,6 +32,7 @@
         <section class="main-section">
 
             <div class="content-left">
+
 
                 <div class="profile-image-container" ></div>
 
@@ -39,20 +41,21 @@
             </div>
 
             <div class="content-mid">
-
+              
                 <section class="content-container">
 
                     <header class="content-mid-header"></header>
 
-                    <div class="content"></div>
+                    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend vehicula ex, eget bibendum ligula efficitur sit amet. Phasellus finibus euismod ipsum sed tempor. Pellentesque eu leo vel metus aliquam pellentesque. </div>
 
                 </section>
 
             </div>
 
         </section>
 
-        <footer class="footer"> </footer>
+        <footer class="footer">
+          FOOTER </footer>
 
     </main>
   </body>

level-1/step-1/step-1.css

@@ -2,15 +2,27 @@
     width: 100%;
     height: 100px;
     background: #D8D8D8;
+    color: black;
+    text-align: center;
+    font-size: 35px;
+    font-weight: 600;
+    line-height: 100px;
 }
 
+
 /* Use float to get this container in its desired location. */
 
 .content-left {
     width: 34%;
     /* This height is a placeholder. You will need to make some adjustments to get this container to look like the design. */
-    height: 100px;
+    height: 785px;
     background: #565555;
+    float:left;
+    color: white;
+    text-align: center;
+    font-size: 35px;
+    font-weight: 600;
+    line-height: 700px;
 }
 
 
@@ -19,14 +31,29 @@
 .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: 785px;
     background: #B0B0B0;
+    float:right;
+    color: black;
+    text-align: center;
+    font-size: 15px;
+    line-height:2em;
+    font-weight: bold;
+
 }
 
+
 /* Use float to get this container to the bottom of the screen  */
 
 .footer {
     width: 100%;
     height: 100px;
-    background: #3A3A3A;
-}
+    background: #D8D8D8;
+    position:absolute;
+    bottom:0;
+    color: black;
+    text-align: center;
+    font-size: 25px;
+    font-weight: bold;
+    line-height: 100px;
+}

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,26 +17,45 @@
 
 .profile-image-container {
     background: #96F0F2;
+    width: auto;
+    height: 30%;
+    margin-bottom:20px;
 }
 
 /* Step-2 One option to get the container to fill the parent container is to use width: auto; */
 
 .profile-links-container {
     background: #12F3F7;
+    width:auto;
+    height: 60%;
+    margin-bottom: 20px;
 }
 
 /* Step-2 You can either use float left to get this element to in the desired location. */
 
 .logo-container {
     background: #4F4949;
+    width:6%;
+    height:100%;
+    float: right;
 }
 
 
 /* Step-2 You can either use float right to get this element to in the desired location. */
 
 .menu-container {
     background: #4F4949;
+    width:30%;
+    height: 100%;
+    float: left;
 }
 
 
 
+position:absolute;
+    bottom:0;
+    color: white;
+    text-align: center;
+    font-size: 35px;
+    font-weight: 600;
+    line-height: 100px;

level-1/step-3/step-3.css

@@ -1,17 +1,28 @@
 /* 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: 15%;
 }
 
 .content-container {
+  width: auto;
+  height: 100%;
 
 }
 
 .content {
   background: #D8D8D8;
+  padding: 20px;
+  width: auto;
+  height: 80%;
+  text-align: center;
+
+
 }