finshed level-3

close DevMountain#33
galalkoro · Jun 5, 2020 · 099f8be · 099f8be
1 parent a37737a
commit 099f8be
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 77 deletions.
diff --git a/level-3/index.html b/level-3/index.html
@@ -2,81 +2,67 @@
 <html lang="en">
   <head>
 
-      <meta charset="UTF-8">
-      <title>level-3</title>
-      <link rel="stylesheet" href="../base/base.css">
+    <meta charset="UTF-8">
+    <title>level-3</title>
+    <link rel="stylesheet" href="../base/base.css">
 
-      <!-- STEP 1 CSS FILE **** STEP 1 CSS FILE *** STEP 1 CSS FILE -->
-      <link rel="stylesheet" href="step-1/step-1.css">
+    <!--STEP 1 CSS FILE **** STEP 1 CSS FILE *** STEP 1 CSS FILE -->
+    <link rel="stylesheet" href="/level-3/step-1/step-1.css">
 
-      <!-- STEP 2 CSS FILE **** STEP 2 CSS FILE *** STEP 2 CSS FILE -->
-      <link rel="stylesheet" href="step-2/step-2.css">
+    <!--STEP 2 CSS FILE **** STEP 2 CSS FILE *** STEP 2 CSS FILE -->
+    <link rel="stylesheet" href="/level-3/step-2/step-2.css">
 
   </head>
-
   <body>
     <main class="main-wrapper">
       <section class="main-top-section">
           <header class="top-header">
 
               <div class="menu">
-                  <img class="menu-icon" src="" alt="menu icon">
+                <img class="menu-icon" src="/level-3/img/icons/MENU.png" alt="menu icon">
               </div>
 
               <div class="logo">
-                  <img class="logo-icon" src="" alt="logo icon">
+                <img class="logo-icon" src="/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="/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="/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="/level-3/img/Tops.png" alt="tops">
           </div>
 
           <div class="item bottoms">
-
-            <img class="item-image" src="" alt="bottoms">
-
+            <img class="item-image" src="/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="/level-3/img/accessories.png" alt="accessories">
           </div>
 
           <div class="large-item">
-
-            <img class="item-image" src="" alt="collection">
-
+            <img class="item-image" src="/level-3/img/collection.png" alt="collection">
           </div>
 
           <div class="item kicks">
-
-            <img class="item-image" src="" alt="kicks">
-
+              <img class="item-image" src="/level-3/img/kicks.png" alt="kicks">
           </div>
 
           <div class="item hats">
-
-            <img class="item-image" src="" alt="hats">
-
+            <img class="item-image" src="/level-3/img/hats.png" alt="hats">
           </div>
-
       </section>
     </main>
   </body>
-</html>
+</html>
diff --git a/level-3/step-1/step-1.css b/level-3/step-1/step-1.css
@@ -1,74 +1,62 @@
-/*  Step-1 add a background image that takes up the entire width of the container */
-
 .main-top-section {
-    width: 100%;
-    height: 200px;
-    position: relative;
+	width: 100%;
+	height: 200px;
+	position: relative;
+	background-color: #f2efe5;
 }
 
-
 .top-header {
-    width: 100%;
-    padding-top: 10px;
-    height: 70px;
-    text-align: center;
-
+	width: 100%;
+	padding-top: 10px;
+	height: 70px;
+	text-align: center;
 }
 
-
 .menu {
-    width: 100px;
-    height: 40px;
-    display: inline-block;
-    position: absolute;
-    left: 10px;
-    top: 20px;
-
+	width: 100px;
+	height: 40px;
+	display: inline-block;
+	position: absolute;
+	left: 10px;
+	top: 20px;
 }
 
 .menu-icon {
-    width: 60%;
-
+	width: 60%;
 }
 
 .logo {
-    width: 300px;
-    height: 40px;
-    display: inline-block;
-    margin-top: 10px;
-
+	width: 300px;
+	height: 40px;
+	display: inline-block;
+	margin-top: 10px;
 }
 
 .logo-icon {
-    width: 75%;
+	width: 75%;
 }
 
 .sign-in {
-    width: 100px;
-    height: 40px;
-    display: inline-block;
-    position: absolute;
-    right: 10px;
-    top: 30px;
-
+	width: 100px;
+	height: 40px;
+	display: inline-block;
+	position: absolute;
+	right: 10px;
+	top: 30px;
 }
 
 .sign-in-icon {
-    width: 60%;
+	width: 60%;
 }
 
-
 .bottom-container {
-    width: 100%;
-    height: 60px;
-    position: absolute;
-    text-align: center;
-    bottom: -30px;
-
+	width: 100%;
+	height: 60px;
+	position: absolute;
+	text-align: center;
+	bottom: -30px;
 }
 
-
 .shop-icon {
-    width: 350px;
+	width: 350px;
 }
-
diff --git a/level-3/step-2/step-2.css b/level-3/step-2/step-2.css
@@ -19,6 +19,7 @@
     display: block;
 }
 
+
 .full-width-item {
     width: 40%;
     margin:0 auto 20px;