sprint challenge complete with issues

ANSWERS.md

@@ -1,7 +1,26 @@
 <!-- Answers to the Self Study Questions go here -->
 
-1. If you saw this HTML: `<div class="box box1 box2 box3"></div>` which class has the most specificity weight?
+1. If you saw this HTML: 
+`<div class="box box1 box2 box3"></div>` 
+which class has the most specificity weight?
+    box3 because it's last.
+
 2. Describe the difference between `display: block;` and `display: inline;`.
+    display: block makes all elements extend the width of the container (unless otherwise specified), so that elements are all on separate lines.
+
+    display:inline makes it so that elements can be displayed next to each other on the same line
+
 3. While using flexbox, what axis are you using when you use the property: `align-items: center`?
+    up-down (vertical?)
+
 4. What is the difference between fixed layout, adaptive layout, fluid layout, and responsive layout?
+    fixed layout- doesn't change with the screen size
+
+    adaptive layout- has a different design for each screen size (it loads a different file based on screen size but is static)
+
+    responsive layout- adjusts the layout of the elements to fit the browser window
+
+    fluid layout- uses % to create a responsive design that flows between screen sizes
+
 5. Why do we need to use the CSS property max-width on the outer most container in a responsive website?
+    so that the width % knows it's a % of the container, not the body of the site.

README.md

@@ -9,8 +9,7 @@
 * Fork / Clone this project into a directory on your machine.
 * `cd` into your forked local copy.
 
-## Questions - Self Study - You can exercise your Google-Fu for this and any other _Sprint Challenge_ in the future. Remember to record your answers in _ANSWERS.md_
-
+[x]## Questions - Self Study - You can exercise your Google-Fu for this and any other _Sprint Challenge_ in the future. Remember to record your answers in _ANSWERS.md_
 1. If you saw this HTML: `<div class="box box1 box2 box3"></div>` which class has the most specificity weight?
 2. Describe the difference between `display: block;` and `display: inline;`.
 3. While using flexbox, what axis are you using when you use the property: `align-items: center`?
@@ -21,33 +20,33 @@
 * This project has many parts invovled in it. You will start with a half built website that isn't ready for responsiveness.  You will need to complete the tasks below to successfully finish the website. For this project you have been provided design files which you must successfully match at the viewport sizes of 1000px, 768px, and 400px.  
 
 ## Complete the following tasks to set up a responsive website project
-* Correctly place a viewport meta tag in the head of your index.html file that contains these values: `content="width=device-width, initial-scale=1.0"`
-* In your CSS, Introduce `font-size:62.5%;` to the `html` element.
-* Convert all pixel font-sizes into rems and use rems for anything new you build.
-* Convert `.container` into a max-width responsive class based on it's fixed width's current size.
-* The header and jumbotron are missing from the code.  Use the image named `desktop-design.png` to create a pixel perfect replacement. Please note, the `desktop-design.png` file is 1000px wide.
+[x] Correctly place a viewport meta tag in the head of your index.html file that contains these values: `content="width=device-width, initial-scale=1.0"`
+[x] In your CSS, Introduce `font-size:62.5%;` to the `html` element.
+[x] Convert all pixel font-sizes into rems and use rems for anything new you build.
+[x] Convert `.container` into a max-width responsive class based on it's fixed width's current size.
+[x] The header and jumbotron are missing from the code.  Use the image named `desktop-design.png` to create a pixel perfect replacement. Please note, the `desktop-design.png` file is 1000px wide.
 
 ## Complete the following tasks for desktop at a screen size of 1000px
-* Update the background colors on the following boxes:
-  - box2: forestgreen
-  - box4: darkorchid
-  - box6: hotpink
-  - box8: indigo
-  - box10: lawngreen
+[x] Update the background colors on the following boxes:
+  - [x]box2: forestgreen
+  - [x]box4: darkorchid
+  - [x]box6: hotpink
+  - [x]box8: indigo
+  - [x]box10: lawngreen
 * Please reference the design file `desktop-design.png` and make sure your layout matches this design as close as you can.
 
 ## Complete the following tasks for tablet at a screen size of 768px
 * Update the background colors on the following boxes:
-  - box1: teal
-  - box3: gold
-  - box5: cadetblue
-  - box7: coral
-  - box9: crimson
-* Please reference the design file `tablet-design.png` and make sure your layout matches this design as close as you can.  **Make sure you look at the header**
+  - [x]box1: teal
+  - [x]box3: gold
+  - [x]box5: cadetblue
+  - [x]box7: coral
+  - [x]box9: crimson
+* Please reference the design file `tablet-desxign.png` and make sure your layout matches this design as close as you can.  **Make sure you look at the header**
 
 ## Complete the following tasks for phone at a screen size of 400px
-* Remove box 10 and reverse the order of the boxes.
-* Please reference the design file `phone-design.png` and make sure your layout matches this design as close as you can.
+[x] Remove box 10 and reverse the order of the boxes.
+[x] Please reference the design file `phone-design.png` and make sure your layout matches this design as close as you can.
 
 ## Once you're done with all the tasks, push your commits to your fork and submit a Pull-Request
 

css/index.css

@@ -54,6 +54,7 @@ table {
 html, body {
     height: 100%;
     font-family: 'Roboto', sans-serif;
+    font-size: 62.5%;
 }
 
 h1, h2, h3, h4, h5 {
@@ -71,6 +72,36 @@ p {
     margin: 0 auto;
 }
 
+header nav {
+    display: flex;
+    justify-content: space-between;
+}
+
+.nav-img {
+    padding: 5px 0px;
+}
+
+header nav ul {
+    display: flex;
+    justify-content: space-evenly;
+    width: 100%;
+    max-width: 800px;
+}
+
+header nav ul li{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 10px;
+    padding: 20px 2%;
+    font-size: 1.4rem;
+}
+
+header nav ul li a {
+    text-decoration: none;
+    color: black;
+}
+
 .top-content {
     display: flex;
     flex-wrap: wrap;
@@ -79,10 +110,19 @@ p {
     border-bottom: 1px dashed black;
 }
 
+.jumbo {
+    margin: 20px 0px;
+}
+
+.text-container {
+    font-size: 1.4rem;  
+}
+
 .top-content .text-container {
     width: 48%;
+    max-width: 384px;
     padding: 0 1%;
-    padding-bottom: 20px;  
+    padding-bottom: 20px;
 }
 
 .middle-content {
@@ -95,6 +135,10 @@ p {
     margin-bottom: 0;
 }
 
+.boxes {
+    font-size: 1.4rem;  
+}
+
 .middle-content .boxes {
     display: flex;
     flex-wrap: wrap;
@@ -103,6 +147,7 @@ p {
 
 .middle-content .boxes .box {
     width: 12.5%;
+    max-width: 100px;
     height: 100px;
     background: black;
     margin: 20px 2.5%;
@@ -112,13 +157,34 @@ p {
     justify-content: center;
 }
 
+.middle-content .boxes .box .box2 {
+    background: forestgreen;
+}
+
+.middle-content .boxes .box .box4 {
+    background: darkorchid
+}
+
+.middle-content .boxes .box .box6 {
+    background: hotpink;
+}
+
+.middle-content .boxes .box .box8 {
+    background: indigo;
+}
+
+.middle-content .boxes .box .box10 {
+    background: lawngreen;
+}
+
 .bottom-content {
     display: flex;
     margin: 0 2% 20px;
     justify-content: space-around;
 }
 
 .bottom-content .text-container {
+    max-width: 267px;
     padding-right: 4%;
 }
 
@@ -133,14 +199,105 @@ footer {
 
 footer nav {
     width: 60%;
+    max-width: 480px;
+    padding: 20px 2%;
+    font-size: 1.4rem;
+}
+
+footer nav ul {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 20px 2%;
-    font-size: 14px;
 }
 
 footer nav a {
     color: white;
     text-decoration: none;
-}
+}
+
+
+@media (max-width: 768px) {
+    .container {
+        max-width: 700px;
+    }
+
+    header {
+        justify-content: center;
+    }
+
+    header nav {
+        display: block;
+    }
+
+    .nav-image {
+        display: block;
+        position: fixed;
+        top: 0;
+        margin: auto;
+    }
+
+    .middle-content .boxes .box .box1 {
+        background: teal;
+    }
+    .middle-content .boxes .box .box3 {
+        background: gold;
+    }
+    .middle-content .boxes .box .box5 {
+        background: cadetblue;
+    }
+    .middle-content .boxes .box .box7 {
+        background: coral;
+    }
+    .middle-content .boxes .box .box9 {
+        background: crimson;
+    }
+
+}
+
+@media (max-width: 400px) {
+    .container {
+        width: 90%;
+        max-width: 400px;
+    }
+
+    header nav ul {
+        display: block;
+    }
+
+    header nav ul li {
+        text-align: center;
+        border-bottom: 1px solid black;
+    }
+
+    .jumbo {
+        width: 100%;
+        max-width: 400px;
+    }
+
+    .text-container {
+        width: 100%;
+        max-width: 390px;
+        margin-bottom: 5px;
+    }
+
+    .top-content {
+        display: block;
+    }
+
+    .middle-content .boxes .box {
+        width: 30%;
+        min-width: 100px;
+    }
+
+    .middle-content .boxes .box .box10 {
+        display: none;
+    }
+
+    .bottom-content {
+        display: block;
+    }
+    footer nav {
+        width: 100%;
+        justify-content: space-evenly;
+    }
+}