diff --git a/css/index.css b/css/index.css
index 09344e0dc..05e14a5f2 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1 +1,330 @@
-/* Use your CSS from RWD - I here.  IF you don't have CSS, use the solution CSS from RWD - I*/
\ No newline at end of file
+/* Use your CSS from RWD - I here.  IF you don't have CSS, use the solution CSS from RWD - I*//* Use your own code or past solution for Great Idea Web Page CSS here! */
+
+
+/* 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;
+}
+
+/* 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 */
+
+* {
+	box-sizing: border-box;
+}
+
+html {
+  font-size: 62.5%;
+}
+.massContainer {
+	display: flex;
+	flex-direction: column;
+	margin: 0 15% 0 15%;
+
+	
+}
+
+hr {
+	color: grey;
+	width: 100%;
+	size: .5rem;
+}
+
+.navContainer {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	width: 70%;
+	height: 8%;
+	margin-bottom: 30px;
+	position: fixed;
+	background: lavender;
+	border: .2rem black;
+	border-style: none solid solid none;
+}
+
+.navBar {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-around;
+	width: 75%;
+	margin-top: 4%;
+}
+
+a {
+	text-decoration: none;
+	color: black;
+	font-style: italic;
+  align-self: space-around;
+  font-size: 1.6rem;
+}
+
+
+.logo {
+	display: flex;
+	justify-content: flex-end;
+	margin: 2%;
+} 
+
+
+/* ==== index.html === */
+
+.callToAction {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-evenly;
+	margin-top: 15%;
+}
+
+.iod {
+margin-top: 5%;
+text-align: center;
+
+}
+
+h1 {
+	font-size: 7.5rem;
+}
+
+.button {
+	border: 1px solid black;
+	width: 30%;
+	margin-left: 29%;
+	font-size: 2rem;
+	height: 20%;
+	padding: 3%;
+	
+
+	
+}
+
+
+.sectionOne {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-evenly;
+	margin: 2%;
+	
+}
+
+.middle-img {
+	display: flex;
+	justify-content: space-evenly;
+	margin: 3%;
+}
+
+.sectionTwo {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-evenly;
+	margin: 5%;
+	word-wrap: break-word
+	;
+}
+
+.footer {
+	display: flex;
+	flex-direction: column;
+	margin: 2%;
+}
+
+h4 {
+	align-self: center;
+}
+
+p {
+  font-size: 1.6rem;
+}
+
+/* ==== end of index.html ==== */
+
+
+
+/* =========== Tablet View  ===========*/
+
+@media (max-width: 800px) {
+  .navContainer {
+    display: flex;
+    flex-direction: column-reverse;
+    background: none;
+    border: none;
+    position: relative;
+    margin-left: 10%;
+    margin-top: 20px;
+    
+  }
+
+  .navBar {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    padding: 10px;
+    margin-left: 20%;
+    margin-bottom: 20%;
+    
+  }
+
+  a {
+    margin : 2%;
+    font-size: 2rem;
+    border-width: 100%;
+    padding: 4%;
+    
+  }
+
+  .logo {
+    width: 80%;
+    align-items: center;
+    margin-left: 20%;
+    margin-top: 50%;
+  }
+
+  .circle {
+    display: none;
+  }
+
+}
+/* =========== Mobile View  ===========*/
+
+@media (max-width: 500px) {
+
+  .massContainer {
+    margin: 0 15% 0 15%;
+  }
+
+  .navContainer {
+    display: flex;
+    flex-direction: column-reverse;
+    background: none;
+    border: none;
+    position: relative;
+    margin-left: 20%;
+    margin-top: 10%;
+    
+  }
+
+  .navBar {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 10%;
+    
+  }
+
+  .logo {
+    width: 60%;
+    align-items: center;
+    margin-left: 35%;
+    margin-bottom: 20%;
+    margin-top: 50%;
+  }
+
+  a {
+    margin : 2%;
+    font-size: 25px;
+    border-width: 100%;
+		padding: 4% 200%;
+
+		border-bottom: 1px solid black;
+    
+  }
+
+	a:first-of-type {
+		border-top: 1px solid black;
+		padding: 4% 200%;
+	}
+  .callToAction {
+    width: 60%;
+  }
+
+  .iod {
+    width: 10%;
+    height: 4%;
+    margin-top: 80%;
+    margin-bottom: 10%;
+    
+  }
+
+  .button {
+    margin-left: 100%;
+    border: none;
+  }
+
+  .circle {
+    display: none;
+  }
+
+  .sectionOne {
+    flex-direction: column;
+  }  
+  
+  .sectionTwo {
+    flex-direction: column;
+  }
+
+  .services, .product, .vision, .features, .about{
+    margin: 3%;
+  }
+  
+}
+
diff --git a/index.html b/index.html
index 6ee66a434..0f223a35e 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,142 @@
 <!doctype html>
 
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <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">
+
+  <!--[if lt IE 9]>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
+  <![endif]-->
+</head>
+
+<body>
+<!-- Use your own code or past solution for Great Idea Web Page HTML here! -->
+ 
+<div class="massContainer">
+
+    <div class="navContainer">
+      
+      <div class="navBar">
+    
+      <a href="services.html"> Service </a>
+      <a href="product.html"> Product </a>
+      <a href="vision.html"> Vision </a>
+      <a href="features.html"> Features </a>
+      <a href="about.html"> About </a>
+      <a href="contact.html"> Contact </a>
+    
+      </div>
+    
+      <img class="logo" src="img/logo.png" alt="Great Idea! Company logo.">
+      
+    </div>
+    
+    <div class="callToAction">
+      <div class="iod">
+      
+        <h1>
+        Innovation <br>
+        On <br>
+        Demand <br>
+        </h1>
+    
+        <br>
+       
+        <div class="button">
+            Get Started
+        </div>
+        
+      
+      </div>
+    
+      
+    
+      <div class="circle">
+        
+        <img src="img/header-img.png" alt="Image of a code snippet.">
+        
+      </div>
+      
+    </div>
+    
+    <hr>
+    
+    <div class="sectionOne">
+      
+      <div class="features">
+      
+        <h2> Features </h2>
+    
+      <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">
+      
+        <h2> About </h2>
+      
+      <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>
+    
+    
+    
+      <img class="middle-img" src="img/mid-page-accent.jpg" alt="Image of code snippets across the screen">
+    
+     
+      <div class="sectionTwo">
+      
+      <div class="services">
+    
+       <h2> Services </h2>
+            
+          <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">
+    
+      <h2> Product </h2>
+    
+      <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">
+      
+      <h2> Vision </h2>
+    
+      <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>
+    
+      <hr>
+    
+      <div class="footer">  
+      <h3>Contact</h3>
+        <br>
+      <p>123 Way 456 Street</p>
+      <p>Somewhere, USA</p>
+        <br>
+      <p>1 (888) 888-8888</p>
+        <br>
+      <p>sales@greatidea.io<p>
+        
+      <h4>Copyright Great Idea! 2018</h4>
+    
+      </div>
+    
+      </div>
+</body>
+</html><!doctype html>
+
 <html lang="en">
 <head>
   <meta charset="utf-8">