Clarification edits

README.md

@@ -12,98 +12,102 @@ Don't worry about being pixel perfect, and don't worry if your code doesn't matc
 
 ## Step 1
 
-* Open `level-1/index.html` && `level-1/step-1.css` && `level-1/step-1.jpg`.
-* Locate the element with the class of `content-left`.
+* Open `level-1/index.html` && `level-1/step-1/step-1-level-1.css` && `level-1/step-1/step-1-level-1.png`.
+* Select the element with the class of `content-left`.
   * Position this element to the left side of the screen.
-* Locate the element with the class of `content-mid`.
+* Select the element with the class of `content-mid`.
   * Position this element to appear just to the right of `content-left` and take up the remaining space.
-* Locate the element with the class of `footer`.
+* Select the element with the class of `footer`.
   * Position this element to appear at the bottom of the page.
 
 ## Step 2
 
-* Open `level-1/index.html` && `level-1/step-2.css` && `level-1/step-2.jpg`.
-* Locate the element with the class of `content-left`.
+* Open `level-1/index.html` && `level-1/step-2/step-2-level-1.css` && `level-1/step-2/step-2-level-1.jpg`.
+* Select the element with the class of `content-left`.
   * Add padding of 20 pixels on the top, left, right, and bottom.
-* Locate the element with the class of `header`.
+* Select the element with the class of `header`.
   * Add padding of 20 pixels on the top, left, right, and bottom.
-* Locate the element with the class of `profile-image-container`.
+* Select the element with the class of `profile-image-container`.
   * Assign a width, height, and margin-bottom.
-* Locate the element with the class of `profile-links-container`.
+* Select the element with the class of `profile-links-container`.
   * Assign a width and height.
-* Locate the element with the class of `logo-container`.
+* Select the element with the class of `logo-container`.
   * Assign a width, height, and float.
-* Locate the element with the class of `menu-container`.
+* Select the element with the class of `menu-container`.
   * Assign a width, height, and float.
 
 ## Step 3
 
-* Open `level-1/index.html` && `level-1/step-3.css` && `level-1/step-3.jpg`.
-* Locate the element with the class of `content-mid`.
+* Open `level-1/index.html` && `level-1/step-3/step-3-level-1.css` && `level-1/step-3/step-3-level-1.jpg`.
+* Select the element with the class of `content-mid`.
   * Add padding of 80 pixels on the top, left, right, and bottom.
-* Locate the element with the class of `content-mid-header`.
+* Select the element with the class of `content-mid-header`.
   * Assign a width and height.
-* Locate the element with the class of `content-container`.
+* Select the element with the class of `content-container`.
   * Assign a width and height.
-* Locate the element with the class of `content`.
+* Select the element with the class of `content`.
   * Add padding of 20 pixels on the top, left, right, and bottom.
   * Assign a width, height, and text-align.
+* Locate the element with the class of `content` in the html.
   * Add some random text inside the `div`.
 
 # Level 2
 
 ## Step 1
 
-* Open `level-2/index.html` && `level-2/step-1.css` && `level-1/step-1.jpg`.
-* Locate the element with the class of `menu`, `logo` and `sign-in`.
+* Open `level-2/index.html` && `level-2/step-1/step-1-level-2.css` && `level-2/step-1/step-1-level-2.jpg`.
+* Select the elements with the class of `menu`, `logo` and `sign-in`.
   * Assign a display that will allow these elements to appear on the same line.
-* Locate the element with the class of `menu`.
+* Select the element with the class of `menu`.
   * Assign a position, left, and top.
-* Locate the element with the class of `sign-in`.
+* Select the element with the class of `sign-in`.
   * Assign a position, right, and top.
+* Select the element with the class of `bottom-container`
+  * Assign a position and bottom.
 
 ## Step 2
 
-* Open `level-2/index.html` && `level-2/step-2.css` && `level-2/step-2.jgp`.
-* Locate the element with the class of `main-bottom-section`.
+* Open `level-2/index.html` && `level-2/step-2/step-2-level-2.css` && `level-2/step-2/step-2-level-2.jpg`.
+* Select the element with the class of `main-bottom-section`.
   * Add a text-align.
-* Locate the element with the class of `item`.
+* Select the element with the class of `item`.
   * Add a width, height, and display.
-* Locate the element with the class of `full-width-item`.
+* Select the element with the class of `full-width-item`.
   * Add a width, height, and margin.
-* Locate the element with the class of `large-item`.
+* Select the element with the class of `large-item`.
   * Add a width, height, and margin.
 
 # Level 3
 
 ## Step 1
 
-* Open `level-3/index.html` && `level-3/step-1.css` && `level-3/step-1.css`.
-* Locate the element with the class of `main-top-section`.
+* Open `level-3/index.html` && `level-3/step-1/step-1-level-3.css` && `level-3/step-1/step-1-level-3.jpg`.
+* Select the element with the class of `main-top-section`.
   * Add a background color of `#F2EFE5`.
-* Locate the element with the class of `menu-icon`.
-  * Link the src path to `level-3/img/icons/MENU`.
-* Locate the element with the class of `logo-icon`.
-  * Link the src path to `level-3/img/icons/dev-shop`.
-* Locate the element with the class of `sign-in`.
-  * Link the src path to `level-3/img/icons/Sign_In`.
-* Locate the element with the class of `shop-icon`.
-  * Link the src path to `level-3/img/icons/Shop_Deals`.
+* Locate the element with the class of `menu-icon` in the html.
+  * Link the src path to `img/icons/MENU.png`.
+* Locate the element with the class of `logo-icon` in the html.
+  * Link the src path to `img/icons/dev-shop.png`.
+* Locate the element with the class of `sign-in` in the html.
+  * Link the src path to `img/icons/Sign_In.png`.
+* Locate the element with the class of `shop-icon` in the html.
+  * Link the src path to `img/icons/Shop_Deals.png`.
 
 ## Step 2
 
-* Locate the element with the class of `item-image` and alt of `tops`.
-  * Link the src path to `level-3/img/Tops.png`.
-* Locate the element with the class of `item-image` and alt of `bottoms`.
-  * Link the src path to `level-3/img/bottoms.png`.
-* Locate the element with the class of `item-image` and alt of `accessories`.
-  * Link the src path to `level-3/img/accessories.png`.
-* Locate the element with the class of `item-image` and alt of `collection`.
-  * Link the src path to `level-3/img/collection.png`.
-* Locate the element with the class of `item-image` and alt of `kicks`.
-  * Link the src path to `level-3/img/kicks.png`.
-* Locate the element with the class of `item-image` and alt of `hats`.
-  * Link the src path to `level-3/img/hats.png`
+* Open `level-3/index.html` && `level-3/step-2/step-2-level-3.jpg`.
+* Locate the element with the class of `item-image` and alt of `tops` in the html.
+  * Link the src path to `img/Tops.png`.
+* Locate the element with the class of `item-image` and alt of `bottoms` in the html.
+  * Link the src path to `img/bottoms.png`.
+* Locate the element with the class of `item-image` and alt of `accessories` in the html.
+  * Link the src path to `img/accessories.png`.
+* Locate the element with the class of `item-image` and alt of `collection` in the html.
+  * Link the src path to `img/collection.png`.
+* Locate the element with the class of `item-image` and alt of `kicks` in the html.
+  * Link the src path to `img/kicks.png`.
+* Locate the element with the class of `item-image` and alt of `hats` in the html.
+  * Link the src path to `img/hats.png`
 
 ## Contributions
 

level-1/index.html

@@ -4,16 +4,16 @@
 
     <meta charset="UTF-8">
     <title>level-1</title>
-    <link rel="stylesheet" href="../base/base.css">
+    <link rel="stylesheet" href="./base.css">
 
     <!-- STEP 1 CSS FILE **** STEP 1 CSS FILE *** STEP 1 CSS FILE -->
-    <link rel="stylesheet" href="step-1/step-1.css">
+     <link rel="stylesheet" href="./step-1/step-1-level-1.css"> 
 
     <!-- STEP 2 CSS FILE **** STEP 2 CSS FILE *** STEP 2 CSS FILE -->
-    <link rel="stylesheet" href="step-2/step-2.css"> 
+      <link rel="stylesheet" href="./step-2/step-2-level-1.css">   
 
     <!-- STEP 3 CSS FILE **** STEP 3 CSS FILE *** STEP 3 CSS FILE -->
-    <link rel="stylesheet" href="step-3/step-3.css"> 
+     <link rel="stylesheet" href="./step-3/step-3-level-1.css">  
 
   </head>
 

level-1/solution/solution.html → level-1/solution/solution-level-1.html

@@ -4,16 +4,16 @@
 
     <meta charset="UTF-8">
     <title>level-1</title>
-    <link rel="stylesheet" href="../../base/base.css">
+    <link rel="stylesheet" href="./../base.css">
 
     <!-- STEP 1 CSS FILE **** STEP 1 CSS FILE *** STEP 1 CSS FILE -->
-    <link rel="stylesheet" href="./step-1.css">
+    <link rel="stylesheet" href="./step-1-level-1-solution.css">
 
     <!-- STEP 2 CSS FILE **** STEP 2 CSS FILE *** STEP 2 CSS FILE -->
-    <link rel="stylesheet" href="./step-2.css">
+    <link rel="stylesheet" href="./step-2-level-1-solution.css">
 
     <!-- STEP 3 CSS FILE **** STEP 3 CSS FILE *** STEP 3 CSS FILE -->
-    <link rel="stylesheet" href="./step-3.css">
+    <link rel="stylesheet" href="./step-3-level-1-solution.css">
 
   </head>
 

level-1/solution/step-1.css → level-1/solution/step-1-level-1-solution.css

@@ -28,7 +28,7 @@
 .footer {
     width: 100%;
     height: 100px;
-    background: #3A3A3A;
+    background: #D8D8D8;
     position: absolute;
     bottom: 0;
 }

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

@@ -28,5 +28,5 @@
 .footer {
     width: 100%;
     height: 100px;
-    background: #3A3A3A;
+    background: #D8D8D8;
 }

level-2/base.css

@@ -0,0 +1,55 @@
+/* DO NOT CHANGE THESE */
+/* DO NOT CHANGE THESE */
+/* DO NOT CHANGE THESE */
+/* DO NOT CHANGE THESE */
+/* DO NOT CHANGE THESE */
+/* DO NOT CHANGE THESE */
+/* DO NOT CHANGE THESE */
+/* DO NOT CHANGE THESE */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+    box-sizing: border-box;
+}
+
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+    display: block;
+}
+body {
+    line-height: 1;
+}
+ol, ul {
+    list-style: none;
+}
+blockquote, q {
+    quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+    content: '';
+    content: none;
+}
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}

level-2/index.html

@@ -4,14 +4,14 @@
 
       <meta charset="UTF-8">
       <title>level-2</title>
-      <link rel="stylesheet" href="../base/base.css">
+      <link rel="stylesheet" href="./base.css">
 
 
       <!-- STEP 1 CSS FILE **** STEP 1 CSS FILE *** STEP 1 CSS FILE -->
-      <link rel="stylesheet" href="step-1/step-1.css">
+      <link rel="stylesheet" href="./step-1/step-1-level-2.css">
 
       <!-- STEP 2 CSS FILE **** STEP 2 CSS FILE *** STEP 2 CSS FILE -->
-      <link rel="stylesheet" href="step-2/step-2.css">
+      <link rel="stylesheet" href="./step-2/step-2-level-2.css">
 
   </head>
 

level-2/solution/solution.html → level-2/solution/solution-level-2.html

@@ -4,13 +4,13 @@
 
     <meta charset="UTF-8">
     <title>level-2</title>
-    <link rel="stylesheet" href="../../base/base.css">
+    <link rel="stylesheet" href="./../base.css">
 
     <!-- STEP 1 CSS FILE **** STEP 1 CSS FILE *** STEP 1 CSS FILE -->
-    <link rel="stylesheet" href="step-1.css">
+    <link rel="stylesheet" href="./step-1-level-2-solution.css">
 
     <!-- STEP 2 CSS FILE **** STEP 2 CSS FILE *** STEP 2 CSS FILE -->
-    <link rel="stylesheet" href="step-2.css">
+    <link rel="stylesheet" href="./step-2-level-2-solution.css">
 
   </head>
 

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

@@ -11,15 +11,13 @@
     /*display*/
     margin: 0 20px 30px;
     background: #DED6D3;
-    margin-bottom: 30px;
 }
 
 /* Step-2 Add a width, height, and margin property to make these containers look like the design. Remember margin: auto is helpful when trying to center a container. */
 .full-width-item {
     /*width*/
     /*height*/
     /*margin*/
-    margin:0 auto 30px;
     background: #DED6D3;
 }
 

level-3/base.css

@@ -0,0 +1,55 @@
+/* DO NOT CHANGE THESE */
+/* DO NOT CHANGE THESE */
+/* DO NOT CHANGE THESE */
+/* DO NOT CHANGE THESE */
+/* DO NOT CHANGE THESE */
+/* DO NOT CHANGE THESE */
+/* DO NOT CHANGE THESE */
+/* DO NOT CHANGE THESE */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+    box-sizing: border-box;
+}
+
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+    display: block;
+}
+body {
+    line-height: 1;
+}
+ol, ul {
+    list-style: none;
+}
+blockquote, q {
+    quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+    content: '';
+    content: none;
+}
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}