diff --git a/.DS_Store b/.DS_Store
index ee7b0e1..0e827ba 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..496ee2c
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..272112f
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "cSpell.enabled": false
+}
\ No newline at end of file
diff --git a/Answers.md b/Answers.md
index e69de29..445daaf 100644
--- a/Answers.md
+++ b/Answers.md
@@ -0,0 +1,70 @@
+<!-- markdownlint-disable -->
+# Sprint-Challenge - Week 01 - UI-Responsive
+
+**1. If you saw this HTML:**
+
+```html
+<div class="box box1 box2 box3"></div>
+```
+
+**which class has the most specificity weight?**
+
+ANSWER: 
+
+It depends on which class appears last in the css file. 
+
+  Example 1:
+
+  ```css
+  div .box1 {
+      color: red
+  }
+
+  div .box2 {
+      color: blue
+  }
+  ```
+
+  Example 2:
+
+```css
+  div .box1 {
+      color: blue
+  }
+  div .box2 {
+      color: red
+  }
+```
+
+In Example 1: div text would be blue. In the Example 2, div text would be red.
+
+Codepen Example [link](https://codepen.io/cesarnml/pen/PBZOoE)
+
+**2. Describe the difference between `display: block;` and `display: inline;`.**
+
+- `display: block` ➡️ sets element to block-level. Block-level elements span all horizontal space available and begin on a new line.
+
+- `display: inline` ➡️ inline elements horizontal span only the space required to contain the element and do not begin on new line
+
+
+**3. While using flexbox, what axis are you using when you use the property: `align-items: center`?**
+
+The `align-items` property selects the cross-axis. The cross-axis will be the y-axis if `flex-direction` is set to row or `row-reverse`. The cross-axis will be the x-axis if `flex-direction` is set to `column` or `column-reverse`.
+
+
+**4. What is the difference between fixed layout, adaptive layout, fluid layout, and responsive layout?**
+
+Fixed layout uses fixed widths to determine container sizes and is not responsive to the user's viewport dimensions.
+
+Adaptive layout uses media queries to optimize layout design based on the user's viewport dimensions, but each media query still employs fixed widths.
+
+Fluid layout uses percent based widths and adaptive font-sizes (`rem`, `em`) to dynamically adjust content layout based on the user's viewport dimensions.
+
+Responsive layout = Fluid + Adaptive layout. Responsive layout employs both media queries and percent based widths to dynamically optimize content layout based on the user's viewport. 
+
+
+**5. Why do we need to use the CSS property `max-width` on the outer most container in a responsive website?**
+
+The `max-width` setting on the outer most container keeps the website from spreading out beyond a set width if the user's viewport exceeds the max-width setting.
+
+[GitHub HTML Preview](https://htmlpreview.github.io/?https://github.com/cesarnml/Sprint-Challenge--UI-Responsive/blob/master/index.html)
\ No newline at end of file
diff --git a/README.md b/README.md
index 86724f4..8e3c805 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
+<!-- markdownlint-disable -->
 # Assessing Your User Interface and Responsive Design Learning
 
 * The objective of this challenge is test your knowledge on all of the topics surrounding user interface and responsive web design you learned this week.
diff --git a/css/index.css b/css/index.css
index ae29d6c..3c0b6f6 100644
--- a/css/index.css
+++ b/css/index.css
@@ -3,144 +3,472 @@
    License: none (public domain)
 */
 
-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;
+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;
 }
 /* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
-footer, header, hgroup, menu, nav, section {
-	display: block;
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
 }
 body {
-	line-height: 1;
+  line-height: 1;
 }
-ol, ul {
-	list-style: none;
+ol,
+ul {
+  list-style: none;
 }
-blockquote, q {
-	quotes: none;
+blockquote,
+q {
+  quotes: none;
 }
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
 }
 table {
-	border-collapse: collapse;
-	border-spacing: 0;
+  border-collapse: collapse;
+  border-spacing: 0;
 }
 
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
-html, body {
-    height: 100%;
-    font-family: 'Roboto', sans-serif;
+html,
+body {
+  height: 100%;
+  font-size: 62.5%;
+  font-family: 'Roboto', sans-serif;
 }
 
-h1, h2, h3, h4, h5 {
-    font-size: 18px;
-    margin-bottom: 15px;
-    font-family: 'Rubik', sans-serif;
+h1,
+h2,
+h3,
+h4,
+h5 {
+  font-size: 1.8rem;
+  margin-bottom: 15px;
+  font-family: 'Rubik', sans-serif;
 }
 
 p {
-    line-height: 1.4;
+  line-height: 1.4;
 }
 
+/* 09 Feb 2018; Spring Challenge - Responsive Web Design; Cesar Mejia */
+/* 1000px max-width layout based on desktop-design.png */
+/* Container Style */
 .container {
-    width: 800px;
-    margin: 0 auto;
+  max-width: 1000px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+/* Header Styles */
+header {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+  width: 80%;
+  margin-left: 10.4%;
+}
+
+.logo {
+  max-width: 100%;
+}
+
+header nav {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-end;
+  font-size: 1.4rem;
+}
+
+nav a {
+  text-decoration: none;
+  color: black;
+}
+
+nav a:hover {
+  text-decoration: underline;
+  color: blue;
+  cursor: pointer;
 }
 
+/* Top-Content Styles */
 .top-content {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
-    margin-bottom: 20px;
-    border-bottom: 1px dashed black;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-bottom: 20px;
+  border-bottom: 1px dashed black;
+  max-width: 80%;
+  margin-left: 10.4%;
+}
+
+.top-content .jumbo {
+  margin: 40px 0 23px 0;
+  max-width: 100%;
 }
 
 .top-content .text-container {
-    width: 48%;
-    padding: 0 1%;
-    padding-bottom: 20px;  
+  font-size: 1.6rem;
+  width: 48%;
+  padding: 0 1%;
+  padding-bottom: 20px;
 }
 
+/* Middle Content Styles */
 .middle-content {
-    margin-bottom: 20px;
-    border-bottom: 1px dashed black;
+  margin-bottom: 20px;
+  border-bottom: 1px dashed black;
+  width: 80%;
+  margin-left: 10.4%;
 }
 
 .middle-content h2 {
-    padding: 0 2%;
-    margin-bottom: 0;
+  padding: 0 2%;
+  margin-bottom: 0;
 }
 
 .middle-content .boxes {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
 }
 
 .middle-content .boxes .box {
-    width: 12.5%;
-    height: 100px;
-    background: black;
-    margin: 20px 2.5%;
-    color: white;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  width: 100px;
+  height: 100px;
+  background: black;
+  margin: 20px 2.5%;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.6rem;
 }
 
+.middle-content .boxes .box2 {
+  background-color: forestgreen;
+}
+
+.middle-content .boxes .box4 {
+  background-color: darkorchid;
+}
+
+.middle-content .boxes .box6 {
+  background-color: hotpink;
+}
+
+.middle-content .boxes .box8 {
+  background-color: indigo;
+}
+
+.middle-content .boxes .box10 {
+  background-color: lawngreen;
+}
+
+/* Bottom Content Styles */
 .bottom-content {
-    display: flex;
-    margin: 0 2% 20px;
-    justify-content: space-around;
+  display: flex;
+  margin: 0 12.4% 20px 12.4%;
+  justify-content: space-around;
+  width: 80%;
 }
 
 .bottom-content .text-container {
-    padding-right: 4%;
+  font-size: 1.6rem;
+  padding-right: 4%;
 }
 
-.bottom-content .text-container:last-child {
-    padding-right: 0;
+/* Footer Content Styles */
+footer {
+  width: 80%;
+  background: black;
+  margin-left: 10.4%;
 }
 
-footer {
+footer nav {
+  width: 60%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 2%;
+  font-size: 1.4rem;
+}
+
+footer nav a {
+  color: white;
+  text-decoration: none;
+}
+
+/* Reference design: tablet-design.png */
+@media (max-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+
+  /* Header Styles */
+  header {
+    flex-direction: column;
+    align-items: center;
+    margin-top: 10px;
+    width: 100%;
+    margin-left: 0;
+    height: 95px;
+  }
+
+  .logo {
+    max-width: 100%;
+  }
+
+  header nav {
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: flex-end;
+    font-size: 1.4rem;
+  }
+
+  /* Top-Content Styles */
+  .top-content {
+    max-width: 100%;
+    margin-left: 0;
+  }
+
+  .top-content .jumbo {
+    margin: 35px 0 15px 0;
+    max-width: 100%;
+  }
+
+  /* Middle Content Styles */
+  .middle-content {
+    width: 100%;
+    margin-left: 0;
+  }
+
+  .middle-content .boxes .box1 {
+    background-color: teal;
+  }
+
+  .middle-content .boxes .box3 {
+    background-color: gold;
+  }
+
+  .middle-content .boxes .box5 {
+    background-color: cadetblue;
+  }
+
+  .middle-content .boxes .box7 {
+    background-color: coral;
+  }
+
+  .middle-content .boxes .box9 {
+    background-color: crimson;
+  }
+
+  /* Bottom Content Styles */
+  .bottom-content {
+    margin: 0 0% 20px 2%;
+    width: 100%;
+  }
+
+  .bottom-content .text-container {
+    font-size: 1.6rem;
+    padding-right: 4%;
+  }
+
+  footer {
+    width: 100%;
+    margin-left: 0;
+  }
+
+  /* Footer Content Styles */
+  footer {
     width: 100%;
     background: black;
+    margin-left: 0;
+  }
 }
 
-footer nav {
-    width: 60%;
-    display: flex;
-    justify-content: space-between;
+/* Reference design: phone-design.png */
+@media (max-width: 400px) {
+  .container {
+    max-width: 400px;
+  }
+
+  /* Header Styles */
+  header {
+    height: 100%;
+  }
+
+  .logo {
+    padding: 20px 0;
+    margin-bottom: 10px;
+  }
+
+  header nav {
+    flex-direction: column;
+    justify-content: center;
     align-items: center;
-    padding: 20px 2%;
-    font-size: 14px;
-}
+  }
+  nav a {
+    display: block;
+    padding: 15px 0;
+    width: 100%;
+    text-align: center;
+    border-top: 1px solid gray;
+  }
 
-footer nav a {
-    color: white;
-    text-decoration: none;
-}
\ No newline at end of file
+  /* Top-Content Styles */
+  .top-content {
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .top-content .jumbo {
+    margin: 0 0 28px 0;
+  }
+
+  .top-content .text-container {
+    width: 100%;
+    padding: 0 4%;
+    padding-bottom: 20px;
+  }
+
+  /* Middle Content Styles */
+  .middle-content {
+    margin-bottom: 20px;
+    border-bottom: 1px dashed black;
+  }
+
+  .middle-content .boxes {
+    flex-direction: row-reverse;
+  }
+
+  .middle-content .boxes .box10 {
+    display: none;
+  }
+
+  /* Bottom Content Styles */
+  .bottom-content {
+    flex-direction: column;
+    margin: 0 0 20px 2%;
+    justify-content: space-around;
+    width: 100%;
+  }
+
+  .bottom-content .text-container {
+    padding: 10px 2%;
+  }
+  footer {
+    width: 100%;
+    margin-left: 0;
+  }
+
+  /* Footer Content Styles */
+  footer nav {
+    width: 100%;
+    padding: 0px;
+  }
+}
diff --git a/css/index.css.save b/css/index.css.save
new file mode 100644
index 0000000..ae29d6c
--- /dev/null
+++ b/css/index.css.save
@@ -0,0 +1,146 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+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;
+}
+/* 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;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+html, body {
+    height: 100%;
+    font-family: 'Roboto', sans-serif;
+}
+
+h1, h2, h3, h4, h5 {
+    font-size: 18px;
+    margin-bottom: 15px;
+    font-family: 'Rubik', sans-serif;
+}
+
+p {
+    line-height: 1.4;
+}
+
+.container {
+    width: 800px;
+    margin: 0 auto;
+}
+
+.top-content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    margin-bottom: 20px;
+    border-bottom: 1px dashed black;
+}
+
+.top-content .text-container {
+    width: 48%;
+    padding: 0 1%;
+    padding-bottom: 20px;  
+}
+
+.middle-content {
+    margin-bottom: 20px;
+    border-bottom: 1px dashed black;
+}
+
+.middle-content h2 {
+    padding: 0 2%;
+    margin-bottom: 0;
+}
+
+.middle-content .boxes {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+}
+
+.middle-content .boxes .box {
+    width: 12.5%;
+    height: 100px;
+    background: black;
+    margin: 20px 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.bottom-content {
+    display: flex;
+    margin: 0 2% 20px;
+    justify-content: space-around;
+}
+
+.bottom-content .text-container {
+    padding-right: 4%;
+}
+
+.bottom-content .text-container:last-child {
+    padding-right: 0;
+}
+
+footer {
+    width: 100%;
+    background: black;
+}
+
+footer nav {
+    width: 60%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 2%;
+    font-size: 14px;
+}
+
+footer nav a {
+    color: white;
+    text-decoration: none;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 3b36308..43bee20 100644
--- a/index.html
+++ b/index.html
@@ -9,11 +9,27 @@
   <link href="https://fonts.googleapis.com/css?family=Roboto|Rubik" rel="stylesheet">
   <link rel="stylesheet" href="css/index.css">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 
 <body>
     <div class="container">
+        
+        <header>
+            <img class='logo' src="./img/lambda-black.png" alt="lamda logo">
+
+            <nav>
+                <a href="#">Home</a>
+                <a href="#">About</a>
+                <a href="#">Products</a>
+                <a href="#">Blog</a>
+                <a href="#">Contact</a>
+            </nav>
+        </header>
+
         <section class="top-content">
+            <img class="jumbo" src="./img/jumbo.jpg" alt="highway traffic streaks">
+
             <div class="text-container">
                 <h2>The Future</h2>
                 <p>Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin faucibus imperdiet erat, non varius lacus. Maecenas non nisl id turpis egestas tincidunt. Nam condimentum venenatis magna eget finibus.</p>
@@ -29,16 +45,16 @@ <h2>The Past</h2>
             <h2>Why Did It Have To Be Boxes...</h2>
             
             <div class="boxes">
-                <div class="box">Box 1</div>
-                <div class="box">Box 2</div>
-                <div class="box">Box 3</div>
-                <div class="box">Box 4</div>
-                <div class="box">Box 5</div>
-                <div class="box">Box 6</div>
-                <div class="box">Box 7</div>
-                <div class="box">Box 8</div>
-                <div class="box">Box 9</div>
-                <div class="box">Box 10</div>
+                <div class="box box1">Box 1</div>
+                <div class="box box2">Box 2</div>
+                <div class="box box3">Box 3</div>
+                <div class="box box4">Box 4</div>
+                <div class="box box5">Box 5</div>
+                <div class="box box6">Box 6</div>
+                <div class="box box7">Box 7</div>
+                <div class="box box8">Box 8</div>
+                <div class="box box9">Box 9</div>
+                <div class="box box10">Box 10</div>
             </div>
         
         </section>
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..e8d45ed
--- /dev/null
+++ b/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "sprint-challenge--ui-responsive",
+  "version": "1.0.0",
+  "description": "Week 01 - Spring Challenge - Resposive-UI",
+  "main": "index.html",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cesarnml/Sprint-Challenge--UI-Responsive.git"
+  },
+  "author": "Cesar N. Mejia Leiva",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/cesarnml/Sprint-Challenge--UI-Responsive/issues"
+  },
+  "homepage": "https://github.com/cesarnml/Sprint-Challenge--UI-Responsive#readme"
+}