diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..6f3a2913e
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css
index 7766e7f18..b14882bb2 100644
--- a/great-idea-website/css/index.css
+++ b/great-idea-website/css/index.css
@@ -63,4 +63,116 @@ h1, h2, h3, h4, h5 {
     margin-bottom: 15px;
 }
 
-/* Your code starts here! */
\ No newline at end of file
+/* Your code starts here! */
+.container {
+	width:880px;
+	margin: 0 auto;
+}
+header nav {
+	display:inline-block;
+	width:690px;
+	vertical-align: top;
+	margin-top: 35px;
+}
+
+header nav a {
+	margin-right: 65px;
+	font-size: 14px;
+	color: gray;
+	text-decoration: none;
+}
+
+header nav a: hover {
+	text-decoration: underline;
+}
+
+header nav a:first-child {
+	margin-left:0;
+}
+
+header nav a:last-child {
+	margin-right:0;
+}
+
+header.logo {
+	margin-top: 25px;
+}
+
+.cta .cta-text{
+	display: inline-block;
+	vertical-align: top;
+	font-size: 77px;
+	margin-top: 120px;
+	text-align: center;
+	padding: 0px 75px;
+}
+
+.cta .cta-text button {
+	background: white;
+	vertical-align: top;
+	margin-top: 6px;
+	padding: 8px 44px;
+	font-size: 17px;
+	border: 1px solid black;
+	cursor: pointer;
+  }
+
+  .cta .cta-text button: hover {
+	background: black;
+	color: white;
+  }
+
+  .cta img {
+	display: inline-block;
+	margin-top: 69px;
+  }
+
+  .main-content {
+	border-top: 1px solid black;
+	margin-top: 76px;
+	padding-top: 39px;
+  }
+
+  .main-content .top-content {
+	padding: 0 10px;
+  }
+  
+
+.main-content .bottom-content .text-content: last-child{
+	margin-right: 0;
+}
+
+.main-content .middle-img {
+	margin-top: 45px;
+  }
+
+  .main-content .bottom-content {
+	margin-top: 37px;
+	padding: 0 10px;
+  }
+
+.main-content .bottom-content .text-content {
+	width:275px;
+	display: inline-block;
+	margin-right 12px;
+}
+
+.main-content .bottom-content .text-content:last-child {
+	margin-right: 0;
+  }
+
+	.contact {
+		margin-top: 57px;
+		border-top: 1px solid black;
+		padding: 39px 10px 0;
+	}
+
+	.contact p{
+		margin:20px 0;
+	}
+
+footer {
+	margin: 32px 0;
+	text-align: center;
+	font-size: 16px;
+}
diff --git a/great-idea-website/index.html b/great-idea-website/index.html
index 92beabd65..b9b52cd7d 100644
--- a/great-idea-website/index.html
+++ b/great-idea-website/index.html
@@ -1,63 +1,91 @@
 <!doctype html>
-
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-
-  <title>Great Idea!</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]>
+    <html lang="en">
+      <head>
+    
+      <meta charset="utf-8">
+    
+      <title>Great Idea!</title>
+    
+      <link href="https://fonts.googleapis.com/css?family=Bangers|Titillium+Web" rel="stylesheet">
+      <link rel="stylesheet" 
+      href="css/index.css">
+</head>
+        <!--[if lt IE 9]>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
   <![endif]-->
-</head>
-
-  <body>
-
-  Services
-  Product
-  Vision
-  Features
-  About
-  Contact
-
-  <img class="logo" src="img/logo.png" alt="Great Idea! Company logo.">
-  Innovation
-  On
-  Demand
-
-  Get Started
-
-  <img src="img/header-img.png" alt="Image of a code snippet.">
-
-  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.
-
-
-  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.
-
-  <img class="middle-img" src="img/mid-page-accent.jpg" alt="Image of code snippets across the screen">
+ 
+<div class="container">
+  <header>
+      <nav>
+        <a href="#">Services</a>
+        <a href="#">Product</a>
+        <a href="#">Vision</a>
+        <a href="#">Features</a>
+        <a href="#">About</a>
+        <a href="#">Contact</a>
+      </nav>
+      <img class="logo" 
+      src="img/logo.png"
+      alt="Great Idea! Company logo.">
+    </header>
+  
+    <section class="cta">
+      <div class="cta-text">
+        <h1>Innovation<br> On<br> Demand</h1>
+        <button>Get Started</button>
+      </div>
+      <img src="img/header-img.png" alt="Image of a code snippet.">
+    </section>
+  
+    <section class="main-content">
+  
+      <div class="top-content">
+        <div class="text-content">
+          <h4>Features</h4>
+          <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="text-content">
+          <h4>About</h4>
+          <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="bottom-content">
+        <div class="text-content">
+          <h4>Services</h4>
+          <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="text-content">
+          <h4>Product</h4>
+          <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="text-content">
+          <h4>Vision</h4>
+          <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>
   
-  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.
-
-
-  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.
-
-  Contact
-  123 Way 456 Street
-  Somewhere, USA
-  1 (888) 888-8888
-  sales@greatidea.io
 
-  Copyright Great Idea! 2018
+    </section>
+  
+    <section class="contact">
+  
+      <h4>Contact</h4> 
+  
+      <p>123 Way 456 Street<br> Somewhere, USA</p>
+  
+      <p>1 (888) 888-8880</p>
+  
+      <p>sales@greatidea.io</p>
+  
+    </section>
   
-  </body>
-</html>
\ No newline at end of file
+    <section>
+    <footer>
+      Copyright Great Idea! 2018
+      </section>
+    </footer>
+  </html>
+  </div><!-- container -->
\ No newline at end of file
