bloominstituteoftechnology · colinolmstead · May 16, 2020 · May 20, 2020 · May 20, 2020
diff --git a/README.md b/README.md
@@ -36,26 +36,36 @@ Edit this document to include your answers after each question. Make sure to lea
 
 1. If you were to describe semantic HTML to the next cohort of students, what would you say?
 
+It is a recommended standard way of creating the base structure of web pages
+
 2. What are the 4 areas of the box model?
 
+margin border padding content
+
 3. While using flexbox, what axis does the following property work on: ```align-items: center```?
 
+cross axis
+
 4. Explain why git is valuable to a team of developers.
 
+it maintains configuration continuity and change management
+
 5. Define mobile-first design in your own words.
 
+Mobile first means developed for devices that are not desktop machines especially phones.
+
 You are expected to be able to answer all these questions. Your responses contribute to your Sprint Challenge grade. Skipping this section *will* prevent you from passing this challenge.
 
 ## Instructions
 
 ### Task 1: Project Set Up
 
-- [ ] Create a forked copy of this project
-- [ ] Add your team lead as collaborator on Github
-- [ ] Clone your OWN version of the repository (Not Lambda's by mistake!)
-- [ ] Create a new branch: git checkout -b `<firstName-lastName>`.
-- [ ] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly
-- [ ] Push commits: git push origin `<firstName-lastName>`
+- [ x] Create a forked copy of this project
+- [ x] Add your team lead as collaborator on Github
+- [ x] Clone your OWN version of the repository (Not Lambda's by mistake!)
+- [ x] Create a new branch: git checkout -b `<firstName-lastName>`.
+- [x ] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly
+- [ x] Push commits: git push origin `<firstName-lastName>`
 
 ### Task 2:  Minimum Viable Product
 

diff --git a/about.html b/about.html
@@ -0,0 +1,19 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+
+  <title>Sprint Challenge - About</title>
+
+  <link href="https://fonts.googleapis.com/css?family=Roboto|Rubik" rel="stylesheet">
+  <link rel="stylesheet" href="style/index.css">
+
+
+</head>
+
+<body>
+
+<h1>About</h1>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -8,11 +8,29 @@
 
   <link href="https://fonts.googleapis.com/css?family=Roboto|Rubik" rel="stylesheet">
   <link rel="stylesheet" href="style/index.css">
-
+
+
 </head>
 
+<br>
+
 <body>
     <div class="container">
+        <header>
+    <div>
+        <nav class="center1">
+            <img class="lambdaimg" src="assets/lambda-black.png" alt="says lambda with black box around">
+            <a href="products.html">Products</a>
+            <a href="about.html">About</a>
+
+            <a href="#">Blog</a>
+            <a href="#">Contact</a>
+        </nav>
+    </div>
+</header>
+
+    <img class="jumboimg" src="assets/jumbo.jpg" alt="looks like a fast moving empty tron road at dusk">
+<br>
 
         <section class="top-content">
             <div class="text-container">
@@ -22,24 +40,24 @@ <h2>The Future</h2>
             <div class="text-container">
                 <h2>The Past</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>
-            </div>
+    </div>
         </section>
 
         <section class="middle-content">
 
             <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 style="background-color: teal;" class="box">Box 1</div>
+                <div style="background-color: gold;" class="box">Box 2</div>
+                <div style="background-color: cadetblue;" class="box">Box 3</div>
+                <div style="background-color: coral;" class="box">Box 4</div>
+                <div style="background-color: crimson;" class="box">Box 5</div>
+                <div style="background-color: forestgreen;" class="box">Box 6</div>
+                <div style="background-color: darkorchid;" class="box">Box 7</div>
+                <div style="background-color: hotpink;" class="box">Box 8</div>
+                <div style="background-color: indigo;" class="box">Box 9</div>
+                <div style="background-color: dodgerblue;" class="box">Box 10</div>
             </div>
 
         </section>
@@ -61,7 +79,7 @@ <h2>Moon</h2>
 
         </section>
 
-        <footer>
+        <footer class="footer1">
             <nav>
                 <a href="#">Home</a>
                 <a href="#">About</a>
@@ -70,6 +88,6 @@ <h2>Moon</h2>
                 <a href="#">Contact</a>
             </nav>
         </footer>
-    </div><!-- container -->        
+    </div>        
 </body>
 </html>
diff --git a/products.html b/products.html
@@ -0,0 +1,24 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+
+  <title>Sprint Challenge - About</title>
+
+  <link href="https://fonts.googleapis.com/css?family=Roboto|Rubik" rel="stylesheet">
+  <link rel="stylesheet" href="style/index.css">
+
+
+</head>
+
+<body>
+
+<h1>Products</h1>
+
+<h2>
+Hey guys buy some of this stuff
+</h2>
+<img src="https://ourtropicallife.com/wp-content/uploads/2019/05/beach-84533_1920.jpg" alt="">
+</body>
+</html>
diff --git a/style/index.css b/style/index.css
@@ -1,6 +1,8 @@
 /* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
+   This is a comment from Michael
+   Anothe comment to test the commit
 */
 
 html, body, div, span, applet, object, iframe,
@@ -47,9 +49,7 @@ table {
 	border-spacing: 0;
 }
 
-* {
-    box-sizing: border-box;
-}
+
 
 html, body {
     height: 100%;
@@ -143,4 +143,107 @@ footer nav {
 footer nav a {
     color: white;
     text-decoration: none;
-}
+}
+
+header div nav
+    {
+
+        display: flex;
+        justify-content: space-around;
+        padding: 20px 2%;
+        font-size: 14px; 
+
+
+    }
+        a 
+            {
+                text-decoration: none;
+            }
+.jumboimg
+            {
+                margin-bottom: 2em;
+            }
+        .lambdaimg
+                {
+                    margin-bottom: 2em; 
+                }
+
+
+
+  @media screen and (max-width: 500px) {
+    .jumboimg
+{
+    width: 50%;
+    height: auto;
+  }
+  }
+  @media screen and (max-width: 500px) {
+    .center1     
+     {
+        display: flex;
+  flex-direction: column;
+
+            }
+        }
+        @media screen and (max-width: 500px) {
+            .lambdaimg    
+             {
+                width: 50%;
+
+                    }
+                }
+
+
+                @media screen and (max-width: 500px) {
+                    .top-content     
+                     {
+                        display: flex;
+                        flex-direction: column;
+                        flex-basis: 100%;
+                        flex: 1;
+                            }
+                        }
+                        @media (max-width: 500px) {
+                           .middle-content .boxes    
+                             {
+
+                                flex-direction: column;
+
+                                justify-content: center;
+
+                                    }
+                                }
+                                @media screen and (max-width: 500px) {
+                                    .bottom-content  
+                                     {
+                                        display: flex;
+                                        flex-direction: column;
+                                        flex-basis: 100%;
+                                        flex: 1;
+                                     }
+                                    }
+
+                @media screen and (max-width: 500px) {
+                    .footer1 nav   
+                    {
+                        display: flex;
+                flex-direction: column;
+
+                            }
+                        }                                          
+                        h1 { 
+                            font-size: 3em; 
+                            text-align: center;
+                            -webkit-transition: all .5s ease;
+                            -moz-transition: all .5s ease;
+                            transition: all .5s ease;
+                          }
+
+                          h1:hover { font-size: 2em; color: red; }
+
+                          @media screen and (max-width: 1000px){
+                            h1 { 
+                              font-size: 2em;
+                              color: red;
+                            }
+                          }