diff --git a/css/index.css b/css/index.css
index 0c9959c1e5..0d01ed08dd 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1,3 +1,238 @@
-/* Use your own code or past solution for Great Idea Web Page CSS here! */
 
 
+
+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;
+}
+
+/* Set every element's box-sizing to border-box */
+* {
+    box-sizing: border-box;
+}
+
+html, body {
+    height: 100%;
+    font-family: 'Titillium Web', sans-serif;
+}
+
+h1, h2, h3, h4, h5 {
+    font-family: 'Bangers', cursive;
+    letter-spacing: 1px;
+    margin-bottom: 15px;
+}
+
+/* Copy and paste your work from yesterday here and start to refactor into flexbox */
+nav{
+	display: flex;
+    justify-content: space-around;
+    margin:15px;
+}
+nav a{
+    margin-top: 10px;
+    text-decoration: none;
+    color: gray;
+    padding: 10px;
+}
+.search{
+    width: 100%;
+    margin:0 15px;
+    display: flex;
+    justify-content: space-between;
+}
+.log{
+    margin:0 15px;
+}
+
+.main{
+	margin:15px;
+	display:flex;
+	justify-content: space-evenly;
+	
+}
+.title{
+	width:30%;
+	display:flex;
+	margin:5%;
+	padding:15px;
+	font-size: 80px;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+h5{
+	font-size: 20px;
+	padding:3px 15px;
+	border: 1px inset gray;
+    text-align: center;
+}
+.innovation{
+	margin-left: 15px;
+	display: flex;
+	justify-content: center;
+}
+.on{
+	margin-left: 115px;
+}
+.de{
+	margin-left: 35px;
+}
+.mid{
+	display: flex;
+	justify-content: space-evenly;
+
+}
+.features{
+	margin:5%;	
+	font-size: 25px;
+}
+.about{
+	margin:5%;	
+	font-size: 25px;
+}
+.middle-img{
+	width:100%;
+	height:25%;
+	margin-top: 20px;
+	margin-bottom: 20px;
+	display: flex;
+}
+.bottom{
+	display: flex;
+	justify-content: space-around;
+}
+.services{
+	margin:1.5%;	
+	font-size: 25px;
+}
+.product{
+	margin:1.5%;	
+	font-size: 25px;
+}
+.vision{
+	margin:1.5%;	
+	font-size: 25px;
+}
+footer{
+	line-height: 30px;
+	width:100%;	
+}
+.copy{
+	text-align: center;
+	border: none;
+}
+
+@media(max-width: 800px) {
+    body nav{
+        display: flex;
+        flex-direction: column-reverse;
+    }
+    body .search{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+    body .log{
+        display: flex;
+        justify-content: center;
+    }
+    body .code{
+        display: none;
+    }
+    .main{ 
+        margin: 0 auto;
+	    display:flex;
+	    justify-content: space-evenly;
+    }
+    .middle-img{
+        width:100%;
+        height:15%;
+        margin-top: 20px;
+        margin-bottom: 20px;
+        display: flex;
+    }
+}
+
+@media(max-width: 500px) {
+    p{
+        font-size: 75%;
+    }
+    body nav{
+        display: flex;
+        flex-direction: column-reverse;
+        justify-content: center;
+    }
+    body .search{
+        width:95%;
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+    }
+    body .log{
+        display: flex;
+        justify-content: center;
+    }
+    body .code{
+        display: none;
+    }
+    nav a{
+        border-bottom: 1px gray solid;
+    }
+
+    .mid{
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+    }
+    .middle-img{
+        width:100%;
+        height:15%;
+        margin-top: 20px;
+        margin-bottom: 20px;
+        display: flex;
+    }
+    .bottom{
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+    }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 476b4b8cb9..323a574d19 100644
--- a/index.html
+++ b/index.html
@@ -1,16 +1,89 @@
 <!doctype html>
 
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Great Idea - Responsive I</title>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Great Idea - Responsive I</title>
 
-  <link href="https://fonts.googleapis.com/css?family=Bangers|Titillium+Web" rel="stylesheet">
-  <link rel="stylesheet" href="css/index.css">
+    <link href="https://fonts.googleapis.com/css?family=Bangers|Titillium+Web" rel="stylesheet">
+    <link rel="stylesheet" href="css/index.css">
 
-</head>
+  </head>
 
-<body>
-<!-- Use past code you created here for Great Idea Web Page or past solution for Great Idea Web Page HTML here! -->
-</body>
+  <body>
+
+      <!-- Copy and paste your HTML from the first UI project here -->
+      <nav>
+        <div class="search">  
+          <a href="services.html">Services</a>
+          <a href="#">Product</a>
+          <a href="#">Vision</a>
+          <a href="#">Features</a>
+          <a href="#">About</a>
+          <a href="#">Contact</a>
+        </div>
+        <div class="log">
+          <img class="logo" src="img/logo.png" alt="Great Idea! Company logo.">
+        </div>
+      </nav>
+
+      <section class="main">
+        <div class="title">
+          <div class="innovation">
+          <h1><span class="in">Innovation</span><br/>
+          <span class="on">On</span><br/>
+          <span class="de">Demand</span><br/>
+          </h1>
+          </div>
+          <h5>Get Started</h5>
+        </div>
+        <img class="code" src="img/header-img.png" alt="Image of a code snippet.">
+      </section>
+    <hr>
+      <section class="mid">
+        <div class="features">    
+          <h3>Features</h3>
+
+          <p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
+        </div>
+
+        <div class="about">
+          <h3>About</h3>
+          <p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
+        </div>
+      </section>
+
+      <img class="middle-img" src="img/mid-page-accent.jpg" alt="Image of code snippets across the screen">
+      
+      <section class="bottom">
+        <div class="services">
+          <h3>Services</h3>
+          <p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
+        </div>
+
+        <div class="product">
+          <h3>Product</h3>
+          <p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
+        </div>
+
+        <div class="vision">
+          <h3>Vision</h3>
+          <p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
+        </div>
+      </section>  
+      <hr>
+
+      <footer>
+      <h3>Contact</h3>
+
+      <address>123 Way 456 Street<br/>
+      Somewhere, USA</address>
+      <phone>1 (888) 888-8888</phone><br/>
+      <email>sales@greatidea.io</email><br/>
+        
+      <div class="copy">Copyright Great Idea 2018</div>
+      </footer>
+
+  </body>
 </html>
\ No newline at end of file