Step2

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

@@ -7,6 +7,7 @@
 /* Use float to get this container in its desired location. */
 
 .content-left {
+    float: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;
@@ -18,6 +19,7 @@
 
 .content-mid {
     width: 66%;
+    float: right;
     /* This height is a placeholder. You will need to make some adjustments to get this container to look like the design. */
     height: 100px;
     background: #B0B0B0;
@@ -26,6 +28,7 @@
 /* Use float to get this container to the bottom of the screen  */
 
 .footer {
+    float:clear;
     width: 100%;
     height: 100px;
     background: #3A3A3A;

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

@@ -1,38 +1,50 @@
 /* Step-2 You can assign padding to all sides of a container by using the padding shorthand property. */
 
 .content-left {
-
+ padding: 20 20 20 20 px;
 }
 
 /* Step 2 You can assign padding to all sides of a container by using the padding shorthand property. */
 
 .header {
 
+ padding: 20 20 20 20 px;
 }
 
 
 /* Step-2 One option to get the container to fill the parent container is to use width: auto; */
 
 .profile-image-container {
+    height:auto ;
+    width:auto ;
+    margin-bottom: auto;
     background: #96F0F2;
 }
 
 /* Step-2 One option to get the container to fill the parent container is to use width: auto; */
 
 .profile-links-container {
     background: #12F3F7;
+    height:auto ;
+    width: auto;
 }
 
 /* Step-2 You can either use float left to get this element to in the desired location. */
 
 .logo-container {
     background: #4F4949;
+     height:auto ;
+    width: auto;
+float: left;
 }
 
 
 /* Step-2 You can either use float right to get this element to in the desired location. */
 
 .menu-container {
+      height:auto ;
+    width: auto;
+float:right;
     background: #4F4949;
 }
 

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

@@ -1,17 +1,27 @@
 /* Step-3 You can assign padding to all sides of a container by using the padding shorthand property. */
 
 .content-mid {
+    padding: 80 80 80 80px;
 
 }
 
 .content-mid-header {
+    width:auto ;
+    height:auto ;
   background: #444;
 }
 
 .content-container {
+     width:auto ;
+    height:auto ;
 
 }
 
 .content {
   background: #D8D8D8;
+   width:auto ;
+    height:auto ;
+    text-align: center;
+    padding: 20 20 20 20px;
+
 }

level-2/step-2/step-2.css

@@ -1,14 +1,15 @@
 /* Step-2 add a text-align that will align items in the center.  */
 .main-bottom-section {
   margin-top: 65px;
+  text-align: center;
   /* alignment property */
 }
 
 /* Step-2 Add a width, height and display property to make these containers look like the design. */
 .item {
-   /*width*/
-    /*height*/
-    /*display*/
+   width :20;
+    height : 40;
+    display :inline;
     margin: 0 20px 30px;
     background: #DED6D3;
     margin-bottom: 30px;

level-3/index.html

@@ -20,59 +20,59 @@
           <header class="top-header">
 
               <div class="menu">
-                  <img class="menu-icon" src="" alt="menu icon">
+                  <img class="menu-icon" src="HTML-CSS-Practice-Problems\level-3\img\bottoms.png" alt="menu icon">
               </div>
 
               <div class="logo">
-                  <img class="logo-icon" src="" alt="logo icon">
+                  <img class="logo-icon" src="HTML-CSS-Practice-Problems\level-3\img\icons\dev-shop.png" alt="logo icon">
               </div>
 
               <div class="sign-in">
-                  <img class="sign-in-icon" src="" alt="sign in  icon">
+                  <img class="sign-in-icon" src="HTML-CSS-Practice-Problems\level-3\img\icons\Sign_In.png" alt="sign in  icon">
               </div>
 
           </header>
 
           <div class="bottom-container">
-              <img class="shop-icon" src="" alt="shop icon">
+              <img class="shop-icon" src="HTML-CSS-Practice-Problems\level-3\img\icons\Shop_Deals.png" alt="shop icon">
           </div>
       </section>
 
       <section class="main-bottom-section">
 
           <div class="item tops">
 
-            <img class="item-image" src="" alt="tops">
+            <img class="item-image" src="HTML-CSS-Practice-Problems\level-3\img\Tops.png" alt="tops">
 
           </div>
 
           <div class="item bottoms">
 
-            <img class="item-image" src="" alt="bottoms">
+            <img class="item-image" src="HTML-CSS-Practice-Problems\level-3\img\bottoms.png" alt="bottoms">
 
           </div>
 
           <div class="full-width-item accessories">
 
-            <img class="item-image" src="" alt="accessories">
+            <img class="item-image" src="HTML-CSS-Practice-Problems\level-3\img\accessories.png" alt="accessories">
 
           </div>
 
           <div class="large-item">
 
-            <img class="item-image" src="" alt="collection">
+            <img class="item-image" src="HTML-CSS-Practice-Problems\level-3\img\collection.png" alt="collection">
 
           </div>
 
           <div class="item kicks">
 
-            <img class="item-image" src="" alt="kicks">
+            <img class="item-image" src="HTML-CSS-Practice-Problems\level-3\img\kicks.png" alt="kicks">
 
           </div>
 
           <div class="item hats">
 
-            <img class="item-image" src="" alt="hats">
+            <img class="item-image" src="HTML-CSS-Practice-Problems\level-3\img\hats.png" alt="hats">
 
           </div>
 

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

@@ -4,6 +4,7 @@
     width: 100%;
     height: 200px;
     position: relative;
+    color: #F2EFE5;
 }