bloominstituteoftechnology · pipicoker · Sep 22, 2021 · Sep 24, 2021 · Sep 24, 2021
diff --git a/README.md b/README.md
@@ -36,14 +36,24 @@ 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?
 
+** Semantic HTML is HTML that introduces meaning to the web page
+
 2. What are the 4 areas of the box model?
 
+** Content edge, Padding edge, Border edge, Margin edge
+
 3. While using flexbox, what axis does the following property work on: ```align-items: center```?
 
+** It works on the Cross Axis
+
 4. Explain why git is valuable to a team of developers.
 
+** Git is used for tracking changes in files. Usually used to coordinate work among the developers
+
 5. Define mobile-first design in your own words.
 
+** Mobile-first design means that we start the product design from the mobile end ,which has smaller screen, and working your way up to larger screen
+
 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

diff --git a/about.html b/about.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <h1>
+        THIS IS JUST TO REDIRECT THE ABOUT LINK
+    </h1>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -3,7 +3,9 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-
+  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="HandheldFriendly" content="true">
   <title>Sprint Challenge - Home</title>
 
   <link href="https://fonts.googleapis.com/css?family=Roboto|Rubik" rel="stylesheet">
@@ -12,8 +14,23 @@
 </head>
 
 <body>
+
+
     <div class="container">
-
+        <header>
+            <img src="assets\lambda-black.png" alt="">
+
+            <a href="#">Home</a>
+            <a href="about.html">About</a>
+            <a href="#">Products</a>
+            <a href="#">Blog</a>
+            <a href="#">Contact</a>
+
+
+        </header>
+        <main>
+            <img src="assets\jumbo.jpg" alt="">
+        </main>
         <section class="top-content">
             <div class="text-container">
                 <h2>The Future</h2>
@@ -30,16 +47,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>
@@ -67,9 +84,9 @@ <h2>Moon</h2>
                 <a href="#">About</a>
                 <a href="#">Products</a>
                 <a href="#">Blog</a>
-                <a href="#">Contact</a>
+                <a href="#">Contact</a> 
             </nav>
         </footer>
     </div><!-- container -->        
 </body>
-</html>
+</html>
diff --git a/style/index.css b/style/index.css
@@ -61,13 +61,36 @@ h1, h2, h3, h4, h5 {
     margin-bottom: 15px;
     font-family: 'Rubik', sans-serif;
 }
+img {
+    max-width: 100%;
+    height: auto;
+} 
+header {
+    margin-bottom: 30px;
+    margin-top: 20px;
+}
+
+header a {
+    padding-left: 40px;
+    padding-right: 30px;
+    text-decoration: none;
+    color: rgba(0, 0, 0, 0.911);
+}
+
+header a:hover {
+    text-decoration: underline;
+    color: purple;
+}
+main img {
+    padding-bottom: 20px;
+}    
 
 p {
     line-height: 1.4;
 }
 
 .container {
-    width: 800px;
+    max-width: 800px;
     margin: 0 auto;
 }
 
@@ -104,14 +127,23 @@ p {
 .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;
 }
-
+.box1{background: teal;}
+.box2{background: gold;}
+.box3{background: cadetblue;}
+.box4{background: coral;}
+.box5{background: crimson;}
+.box6{background: forestgreen;}
+.box7{background: darkorchid;}
+.box8{background: hotpink;}
+.box9{background: indigo;}
+.box10{background: dodgerblue;}
 .bottom-content {
     display: flex;
     margin: 0 2% 20px;
@@ -143,4 +175,65 @@ footer nav {
 footer nav a {
     color: white;
     text-decoration: none;
-}
+}
+@media(max-width: 760px){
+    header img {
+        margin-left: auto;
+        margin-right: auto;
+        display: block;
+        padding-bottom: 20px;
+    }
+    header a {
+        display: block;
+        text-align: center;
+        font-size: 20px;
+        padding-top: 5px;
+        padding-bottom: 5px;
+    }
+    .top-content {
+        display: flex;
+        flex-direction: column;
+        padding-left: 20px;
+        width: 100%;
+
+    }
+    .middle-content .boxes .box {
+        width: 30%;
+        height: 120px;
+    }
+    .middle-content .boxes {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+
+    }
+    .bottom-content  {
+        display: flex;
+        flex-direction: column;
+        padding-left: 20px;
+
+    }
+
+    .bottom-content p {
+        padding-bottom: 20px;
+
+    }
+    footer nav{
+        display: flex;
+        flex-direction: column;
+        margin-left: auto;
+        margin-right: auto;
+
+    }
+     nav a{
+        display: block;
+        text-align: center;
+        font-size: 20px;
+        padding-top: 5px;
+        padding-bottom: 5px;
+    }
+
+
+}
+
+