bloominstituteoftechnology · YorAlexVargas · May 8, 2020 · May 8, 2020 · May 8, 2020 · May 8, 2020
diff --git a/README.md b/README.md
@@ -18,8 +18,11 @@ In this challenge, you build a missing header (navigation and image) on the home
 In meeting the minimum viable product (MVP) specifications listed below, your web page should look like the solution screen shots of the home page and mobile version. 
 
  [Click here for home page example](https://tk-assets.lambdaschool.com/39a49225-8ac9-43da-aa90-514fd60ae99a_sprint-challenge-ui-home-example.png)
+
+ [Click here for tablet example](design/Tablet.png)
 
-[Click here for mobile example](https://tk-assets.lambdaschool.com/fbe7ebfc-a4c2-4a32-8929-bbd41fbc4f67_ScreenShot2020-03-25at11.03.41AM.png)
+
+[Click here for mobile example](design/Mobile.png)
 
 ### Commits
 
@@ -33,22 +36,32 @@ 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?
 
+A1. Semantic HTML or semantic markup is HTML that introduces meaning to the web page rather than just for looks.
+
 2. What are the 4 areas of the box model?
 
+A2. Content, padding, border, and margin
+
 3. While using flexbox, what axis does the following property work on: ```align-items: center```?
 
+A3. The y axis
+
 4. Explain why git is valuable to a team of developers.
 
+A4. Git is valuable, because we can have multiple save states and can fork the information from the cloud.
+
 5. Define mobile-first design in your own words.
 
+A5. Its a layout that starts with the mobile design first in mind.
+
 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
+- [√] 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
@@ -60,10 +73,10 @@ Your finished project must include all of the following requirements:
 
 #### Home Page
 
-[Review the provided design file for the home page](design/home.png).  Notice the navigation and header images are missing.
+[Review the provided design files](/design). Notice the navigation and header images are missing in the starter code.
 
 * [ ] Build the HTML and CSS to create the missing navigation and header
-* [ ] Link the `About` navigation item to the [about.html](about.html) page
+* [ ] Link the `About` navigation item to an about.html page (you'll also need to create `about.html`)
 * [ ] Make your design responsive such that it is accessible on mobile(500px) and tablet(800 px) and matches the [mobile](design/mobile.png) wireframe
 *  Add responsive breakpoints to your code by using media queries
 

diff --git a/design/Tablet.png b/design/Tablet.png
diff --git a/design/mobile.png b/design/mobile.png
diff --git a/index.html b/index.html
@@ -3,44 +3,75 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-
+  <!--Add missing viewport meta tag-->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Sprint Challenge - Home</title>
 
   <link href="https://fonts.googleapis.com/css?family=Roboto|Rubik" rel="stylesheet">
-  <link rel="stylesheet" href="css/index.css">
+  <link rel="stylesheet" href="style/index.css">
 
 </head>
 
 <body>
+
+        <section class="head">
+
+                <!--<input type="checkbox" id="nav-toggle" class="nav-toggle">-->
+                  <nav>
+                    <ul class ="Navlinks">
+                        <img Class="Logo" src="assets/lambda-black.png" alt="Lambda Logo">
+                        </img>
+                      <li><a href="/index.html"><button class="Navbutton">Home</button></a></li>
+                      <li><a href="/About.html"><button class="Navbutton">About</button></a></li>
+                      <li><a href="#"><button class="Navbutton">Products</button></a></li>
+                      <li><a href="#"><button class="Navbutton">Blog</button></a></li>
+                      <li><a href="#"><button class="Navbutton">Contact</button></a></li>
+                    </ul>
+                  </nav>
+                </section>
+
     <div class="container">
 
         <section class="top-content">
-            <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>
-            </div>
-            <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>
+
+           <!--Add missing image-->
+           <div class="Heropic">
+           <img src="assets/jumbo.jpg" alt="Jumbo Picture">
+        </img>
+    </div>
+        <div class="bigtext">
+                <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>
+                </div>
+                <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>
+            <h2 class="theh2">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="boxes">
+
+                <!--rename the classess to better style -->
+                <div class="box1">Box 1</div>
+                <div class="box2">Box 2</div>
+                <div class="box3">Box 3</div>
+                <div class="box4">Box 4</div>
+                <div class="box5">Box 5</div>
+                <div class="box6">Box 6</div>
+                <div class="box7">Box 7</div>
+                <div class="box8">Box 8</div>
+                <div class="box9">Box 9</div>
+                <div class="box10">Box 10</div>
             </div>
+
 
         </section>
 
@@ -63,13 +94,14 @@ <h2>Moon</h2>
 
         <footer>
             <nav>
-                <a href="#">Home</a>
-                <a href="#">About</a>
+                <a href="/index.html">Home</a>
+                <a href="/About.html">About</a>
                 <a href="#">Products</a>
                 <a href="#">Blog</a>
                 <a href="#">Contact</a>
             </nav>
         </footer>
     </div><!-- container -->        
 </body>
-</html>
+</html>
+