bloominstituteoftechnology · Ropizar-S · May 8, 2020 · May 8, 2020 · May 8, 2020 · May 8, 2020
diff --git a/About.html b/About.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+    <link href="/index.html">
+<head>
+<title>About</title>
+</head>
+
+<body>
+
+    <h1>About</h1>
+    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Commodi perferendis laudantium sequi odio! Deserunt aspernatur fuga natus saepe eveniet unde illo, nemo molestias voluptate eum maxime similique? Iure, quo in!.</p>
+
+</body>
+</html>
diff --git a/README.md b/README.md
@@ -69,7 +69,7 @@ Your finished project must include all of the following requirements:
 * [ ] 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
-
+/*
 You will also notice there are 10 boxes on the home page that need background colors.  Use this list below to correctly style each box:
 
 * [ ] box1: `teal`
@@ -82,6 +82,7 @@ You will also notice there are 10 boxes on the home page that need background co
 * [ ] box8: `hotpink`
 * [ ] box9: `indigo`
 * [ ] box10: `dodgerblue`
+*/
 
 In your solution, it is essential that you follow best practices and produce clean and professional results. Schedule time to review, refine, and assess your work and perform basic professional polishing including spell-checking and grammar-checking on your work. It is better to submit a challenge that meets MVP than one that attempts too much and does not.
 

diff --git a/about.html b/about.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+    <link href="/index.html">
+<head>
+<title>About</title>
+</head>
+
+<body>
+
+    <h1>About</h1>
+    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Commodi perferendis laudantium sequi odio! Deserunt aspernatur fuga natus saepe eveniet unde illo, nemo molestias voluptate eum maxime similique? Iure, quo in!.</p>
+
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -8,13 +8,25 @@
 
   <link href="https://fonts.googleapis.com/css?family=Roboto|Rubik" rel="stylesheet">
   <link rel="stylesheet" href="style/index.css">
+  <link href="/style/index.css">
+  <link href="/about.html"><track>
 
 </head>
-
 <body>
     <div class="container">
-
-        <section class="top-content">
+        <div class="logo_links">
+            <img src="assets/lambda-black.png">
+            <a class="nav_links" href="Home">Home</a>
+            <a class="nav_links" href="about.html"target="_blank"><track>About</a>
+            <a class="nav_links"href="Products">Products</a>
+            <a class="nav_links"href="Blog">Blog</a>
+            <a class="nav_links"href="Contact">Contact</a>
+        </div>
+
+    <div class="large_image">
+        <img src="assets/jumbo.jpg">
+    </div>
+         <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>
@@ -30,16 +42,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>

diff --git a/style/index.bak.css b/style/index.bak.css
@@ -0,0 +1,160 @@
+/* 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;
+}
+
+p {
+    line-height: 1.4;
+}
+
+.container {
+    width: 800px;
+    margin: 0 auto;
+}
+
+.top-content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    margin-bottom: 20px;
+    border-bottom: 1px dashed black;
+}
+
+.top-content .text-container {
+    width: 48%;
+    padding: 0 1%;
+    padding-bottom: 20px;  
+}
+
+.middle-content {
+    margin-bottom: 20px;
+    border-bottom: 1px dashed black;
+}
+
+.middle-content h2 {
+    padding: 0 2%;
+    margin-bottom: 0;
+}
+
+.middle-content .boxes {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+}
+
+.middle-content .boxes .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10 {
+    width: 12.5%;
+    height: 100px;
+    margin: 20px 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.box1
+{
+    background: red;
+}
+
+.box2
+{
+    background: green;
+}
+
+.box3
+{
+    background: yellow;
+}
+
+.bottom-content {
+    display: flex;
+    margin: 0 2% 20px;
+    justify-content: space-around;
+}
+
+.bottom-content .text-container {
+    padding-right: 4%;
+}
+
+.bottom-content .text-container:last-child {
+    padding-right: 0;
+}
+
+footer {
+    width: 100%;
+    background: black;
+}
+
+footer nav {
+    width: 60%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 2%;
+    font-size: 14px;
+}
+
+footer nav a {
+    color: white;
+    text-decoration: none;
+}