diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css
index 7766e7f18..c376ec322 100644
--- a/great-idea-website/css/index.css
+++ b/great-idea-website/css/index.css
@@ -63,4 +63,135 @@ h1, h2, h3, h4, h5 {
     margin-bottom: 15px;
 }
 
-/* Your code starts here! */
\ No newline at end of file
+/* Your code starts here! */
+
+nav {
+	position: relative;
+	left: 500px;
+	padding:50px;
+	margin: 55px;
+  }
+  nav ul {
+	margin: 0;
+	padding:0;
+	list-style: none;
+  }
+  
+  nav li {
+	 display:inline-block;
+	 margin-left:70px; 
+
+}
+
+nav a {
+	color: grey;
+	text-decoration: none;
+	text-transform: uppercase;
+  
+  }
+
+.right{
+	position: relative;
+	left: 500px;
+	bottom:335px;
+}
+
+
+
+.logo {
+	position: relative;
+	left:1500px;
+	bottom:110px;
+}
+
+.box1 {
+	width: 400px;
+  padding: 30px;
+  margin: 10px;
+  display: inline-block;
+  
+}
+.box2 {
+	width: 400px;
+  padding: 30px;
+  margin: 10px;
+  display: inline-block;
+  position: relative;
+  left:250px;
+}
+
+
+.container {
+	display: inline;
+	margin: 0 auto;
+	position: relative;
+	right: 500px;
+}
+.container2 {
+	width: 10px; 
+	margin: px;
+	padding:20px ;
+}
+.container3 {
+	display: inline;
+	margin: 0 auto;
+	
+}
+.container4 {
+	display: inline;
+	margin: 0 auto;
+	
+}
+
+.top-content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    margin-bottom: 20px;
+}
+
+.top-content .text-container {
+    width: 48%;
+    padding: 0 1%;
+    padding-bottom: 20px;  
+}
+.Innovation{
+	font-size:32px ;
+	display:inline-block;
+	width: 100px;
+	height: 500px;
+	padding: 5px;
+	text-align: center;
+	position: relative;
+	left:500px;
+	
+	
+}
+
+button{
+	width: 120px;
+	height: 30px;
+	padding: 5px;
+	
+}
+.line{
+	border-style: solid;
+	border-width: thin;
+}
+footer{
+	text-align: center;
+}
+.middle-img{
+	width: 1200px;
+	position: relative;
+	left:300px;
+	text-align:center;
+}
+
+.max{
+	max-width: 100% ;
+}
+.right2{
+	position: relative;
+	left:300px;
+}
\ No newline at end of file
diff --git a/great-idea-website/index.html b/great-idea-website/index.html
index 92beabd65..d2467a4bf 100644
--- a/great-idea-website/index.html
+++ b/great-idea-website/index.html
@@ -14,50 +14,99 @@
   <![endif]-->
 </head>
 
-  <body>
+<body class="max">
+  <div class= " container">
+
+    <nav>
+      <ul>
+        <li><a href="#service">Services</a></li>
+        <li><a href="#product">Product</a></li>
+        <li><a href="#vision"> Vision</a></li>   
+        <li><a href="#features">Features</a></li>
+        <li><a href="#about">About</a></li>
+        <li><a href="#contacts"> Contact</a></li>
+        
+        
+      </ul>
+  </nav>
+  </div>
+  
+    <img class="logo" src="img/logo.png" alt="Great Idea! Company logo.">
+  <div class="container2">
+<header>
+  <div class="Innovation">
+  <h1 >
+    Innovation
+    On
+    Demand
+  </h1 >
+  
+    <button>Get Started</button>
 
-  Services
-  Product
-  Vision
-  Features
-  About
-  Contact
 
-  <img class="logo" src="img/logo.png" alt="Great Idea! Company logo.">
-  Innovation
-  On
-  Demand
+  <img src="img/header-img.png" class="right" alt="Image of a code snippet.">
+</div>
+</div>
+</header>
+<div class="line"></div>
 
-  Get Started
+<div class="container3">
+<div class="line"></div>
+<section class="top-content">
+<div class= box1>
+<h1>Features</h1>
+<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>
 
-  <img src="img/header-img.png" alt="Image of a code snippet.">
+<div class= "box1">
+<h1>About</h1> 
+<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>
 
-  Features
-  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.
+<img class="middle-img" src="img/mid-page-accent.jpg" alt="Image of code snippets across the screen">
 
+<section class="bottom-content">
 
-  About
-  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.
+  <div class= "box2">
+    <h1>Services</h1>
+   <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>
 
-  <img class="middle-img" src="img/mid-page-accent.jpg" alt="Image of code snippets across the screen">
-  
-  Services
-  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.
+  <div class= "box2">
+    <h1>Product</h1>
+    <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= "box2">
+<h1>Vision</h1>
+<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>
 
+</section>
 
-  Product
-  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.
 
-  Vision
-  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.
+  <div class="line" ></div>
+  <div class="container4">
+  <section class="right2" >
+<h1 >Contact</h1>
 
-  Contact
-  123 Way 456 Street
-  Somewhere, USA
-  1 (888) 888-8888
-  sales@greatidea.io
+<p>123 Way 456 Street
+Somewhere, USA</p>
 
-  Copyright Great Idea! 2018
-  
-  </body>
+<number>1 (888) 888-8888</number>
+
+<p >sales@greatidea.io</p>
+
+</section >
+
+
+<footer>
+Copyright Great Idea! 2018
+</footer>
+</div>
+
+</section>
+
+</body>
 </html>
\ No newline at end of file
