bloominstituteoftechnology · AlixCat13 · May 16, 2020 · May 16, 2020 · May 16, 2020 · May 16, 2020
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 gives the HTML meaning rather than just design.
+
 2. What are the 4 areas of the box model?
 
+    Content, Border, Padding, Margin
+
 3. While using flexbox, what axis does the following property work on: ```align-items: center```?
 
+    Both X and Y axis
+
 4. Explain why git is valuable to a team of developers.
 
+    Allows for collaboration between developers
+
 5. Define mobile-first design in your own words.
 
+    It is a website designed for the screen size of mobile devices first and then is coded to adjust to larger device screen sizes.
+
 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,63 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+
+  <title>Sprint Challenge - Home</title>
+
+  <link href="https://fonts.googleapis.com/css?family=Roboto|Rubik" rel="stylesheet">
+  <link rel="stylesheet" href="style/about.css">
+
+  <STYLE>A {text-decoration: none; color: black;} </STYLE>
+</head>
+
+<body>
+    <section class="container">
+        <div class="lambda-logo">
+            <img src="C:\Users\txpil\Sprint-Challenge--User-Interface\assets\lambda-black.png">
+        </div>
+        <nav>
+            <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>
+    </section>
+
+    <section class="divider">
+        <div class= "road">
+            <img src="C:\Users\txpil\Sprint-Challenge--User-Interface\assets\jumbo.jpg">
+        </div>
+    </section>
+
+    <section class="about-content">
+        <div class="About">
+            <h1>About Lambda School</h1>
+            <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. Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc.</p>
+        </div>
+    </section>
+
+    <section class="top-content">
+        <div class="text-container">
+            <h2>Why Lambda?</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>Why Not?</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>
+    </section>
+
+</body>
+
+<footer>
+    <nav>
+        <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>
diff --git a/index.html b/index.html
@@ -8,12 +8,29 @@
 
   <link href="https://fonts.googleapis.com/css?family=Roboto|Rubik" rel="stylesheet">
   <link rel="stylesheet" href="style/index.css">
+  <STYLE>A {text-decoration: none; color: black;} </STYLE>
 
 </head>
 
 <body>
-    <div class="container">
-
+    <section class="container">
+        <div class="lambda-logo">
+            <img src="C:\Users\txpil\Sprint-Challenge--User-Interface\assets\lambda-black.png">
+        </div>
+        <nav>
+            <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>
+    </section>
+
+    <section class = "divider">
+        <div class="road">
+            <img src="C:\Users\txpil\Sprint-Challenge--User-Interface\assets\jumbo.jpg">
+        </div>
+    </section>
         <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="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,8 +80,8 @@ <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>

diff --git a/style/about.css b/style/about.css
@@ -0,0 +1,227 @@
+/* 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;
+}
+.container {
+    width: 75%;    
+    margin-top: 3%;
+    margin-left: 10%;
+    color: black;    
+}
+
+.container .lambda-logo img {    
+    width: 15%; 
+    margin-bottom: -3%;
+    display: flex;
+    flex-direction: column;
+}
+
+.container nav {
+    width: 75%;
+    margin-left: 30%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: right;
+    padding: 20px 2%;
+    font-size: 14px;         
+}
+
+.road img {    
+    width: 80%;
+    margin: 0%;
+    margin-left: 10%;
+    margin-bottom: 5%;     
+}
+
+.about-content {     
+    margin-bottom: 10%;
+    margin-left: 10%;
+    margin-right: 10%;
+    text-align: left;  
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    align-content: center;
+}
+
+.top-content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    margin-bottom: 20px;
+    margin-left: 10%;
+    margin-right: 10%;
+
+}
+
+.top-content .text-container {
+    width: 48%;
+    padding: 0 1%;
+    padding-bottom: 20px;  
+}
+
+footer {
+    width: 80%;
+    background: black;
+    margin: 0% auto;
+    margin-left: 10%;
+}
+
+footer nav {
+    font-size: 1.4rem;
+    width: 60%;
+    margin-left: 10%;
+    margin-right: 10%;
+    display: flex;
+    justify-content: space-between;
+    align-content: center;
+    padding: 20px 2%;
+
+}
+
+footer nav a {
+    color: white;
+    text-decoration: none;
+    align-items: center;
+}
+
+@media(max-width: 500px) {
+    .container  {
+        display: flex;
+        flex-direction: column;   
+    }
+
+    .container .lambda-logo img {
+        width: 30%;
+        display: flex;
+        flex-direction: column;
+        margin-left: 35%;
+        margin-right: 30%;
+        align-content: center;  
+    }
+
+    .container nav  {
+        font-size: 1rem;
+        margin-left: 15%;
+        margin-right: 30%;
+        display: flex;
+        flex-direction: column; 
+        align-items: center;
+        justify-content: space-between; 
+        line-height: 1.4;    
+    }
+
+    .divider .road img {
+        width: 80%; 
+        height: 100px; 
+        margin-left: 10%;        
+        display: flex;  
+        flex-direction: row; 
+        align-content: center;  
+    }
+
+    .about-content {
+        width: 40%;
+        margin-left: 32%;
+        line-height: 1.5;
+        flex-direction: column;
+        justify-content: space-evenly;
+        align-items: center;
+        text-align: left;
+        flex-wrap: wrap;
+    }
+
+    .top-content {
+        line-height: 1.5;
+        flex-direction: column;
+        justify-content: space-evenly;
+        align-items: center;
+        text-align: left;
+        flex-wrap: wrap;
+    }
+
+    .top-content h2 {
+        flex-direction: column;
+        justify-content: space-evenly;
+        align-items: center;
+        text-align: left;
+        flex-wrap: wrap;
+    }
+
+    footer {
+        width: 80%;
+        height: 30%;     
+    }
+
+    footer nav {
+        width: 60%;
+        margin-left: 15%;
+        font-size: 1.4rem;
+        line-height: 1.4;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+        align-items: center; 
+        text-align: center;        
+    }
+}