diff --git a/great-idea/css/index.css b/great-idea/css/index.css
index 11a690045..0fc911207 100644
--- a/great-idea/css/index.css
+++ b/great-idea/css/index.css
@@ -1,4 +1,4 @@
-/* http://meyerweb.com/eric/tools/css/reset/ 
+/* http://meyerweb.com/eric/tools/css/reset/
    v2.0 | 20110126
    License: none (public domain)
 */
@@ -12,8 +12,8 @@ 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, 
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
 	margin: 0;
@@ -24,7 +24,7 @@ time, mark, audio, video {
 	vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
+article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {
 	display: block;
 }
@@ -62,3 +62,114 @@ h1, h2, h3, h4, h5 {
     letter-spacing: 1px;
     margin-bottom: 15px;
 }
+
+/*My code starts here*/
+
+/*Universal*/
+
+html{
+	font-size: 16px;
+	font-family: Helvetica, sans-serif;
+}
+
+body{
+	display: flex;
+	justify-content: center;
+}
+
+.page-container{
+	width: 80%;
+}
+
+/*Header*/
+
+header{
+	position: fixed;
+  background-color: white;
+	width: 80%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 60px;
+  z-index: 5;
+}
+
+header a{
+	text-decoration: none;
+	color: gray;
+}
+
+/*Main Banner */
+
+.banner{
+	margin-top: 160px;
+	padding-bottom: 100px;
+	display: flex;
+	justify-content: space-around;
+	border-bottom: 2px solid black;
+}
+
+.banner-text{
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
+.banner-text p{
+	font-size: 100px;
+	font-family: 'Bangers', cursive;
+	text-align: center;
+}
+
+.banner-text button{
+	width: 13.5rem;
+	background-color: white;
+	border: 2px solid black;
+	font-size: 1.25rem;
+	margin-top: 1.25rem;
+	padding: 0.5rem;
+}
+
+/*Main Content*/
+
+.main-content{
+	margin-top: 4rem;
+}
+
+.top-content{
+	display: flex;
+}
+
+.bottom-content{
+	display: flex;
+	padding-bottom: 4rem;
+	border-bottom: 2px solid black;
+}
+
+.article{
+	display: flex;
+	flex-direction: column;
+}
+
+.mid-img{
+	width: 100%;
+	padding: 3rem 0;
+}
+
+.product{
+	padding: 0 1.5rem;
+}
+
+/*Contact*/
+
+.contact{
+	margin: 4rem;
+}
+
+/*Footer*/
+
+footer{
+	text-align: center;
+	margin-bottom: 6rem;
+}
diff --git a/great-idea/index.html b/great-idea/index.html
index 6da3e589a..2cea40b0f 100644
--- a/great-idea/index.html
+++ b/great-idea/index.html
@@ -7,7 +7,7 @@
   <title>Great Idea!</title>
 
   <link href="https://fonts.googleapis.com/css?family=Bangers|Titillium+Web" rel="stylesheet">
-  <link rel="stylesheet" href="css/index.css">
+  <link type="text/css" 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>
@@ -15,70 +15,78 @@
 </head>
 
   <body>
+    <div class="page-container">
 
-    <div class="container">
+<!--Header-->
 
       <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.">
+        <a href="#">Services</a>
+        <a href="#">Product</a>
+        <a href="#">Vision</a>
+        <a href="#">Features</a>
+        <a href="#">About</a>
+        <a href="#">Contact</a>
+
+        <img src="./img/logo.png" alt="Great Idea logo">
       </header>
 
-      <section class="cta">
-        <div class="cta-text">
-          <h1>Innovation<br> On<br> Demand</h1>
-          <button>Get Started</button>
+<!--Banner Start-->
+
+      <div class="banner">
+        <div class="banner-text">
+          <p>INNOVATION<br> ON <br>DEMAND</p>
+          <button type="button" name="button">Get Started</button>
         </div>
-        <img src="img/header-img.png" alt="Image of a code snippet.">
-      </section><!-- cta -->
 
-      <section class="main-content">
+        <img src="./img/header-img.png" alt="Code snippets">
+      </div>
+
+<!--Main Content-->
+
+      <div class="main-content">
         <div class="top-content">
-          <div class="text-content">
-            <h4>Features</h4>
+          <div class="article">
+            <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="text-content">
-            <h4>About</h4>
+
+          <div class="article">
+            <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">
+
+        <img class="mid-img" src="./img/mid-page-accent.jpg" alt="Code snippets">
+
         <div class="bottom-content">
-          <div class="text-content">
-            <h4>Services</h4>
+          <div class="article">
+            <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="text-content">
-            <h4>Product</h4>
+          <div class="article 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="text-content">
-            <h4>Vision</h4>
+          <div class="article">
+            <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>
-      </section><!-- main-content -->
+      </div>
 
-      <section class="contact">
-        <h4>Contact</h4>
-        <p>123 Way 456 Street<br>
-        Somewhere, USA</p>
-        <p>1 (888) 888-8888</p>
+<!--Contact-->
+
+      <div class="contact">
+        <h2>CONTACT</h2>
+        <p>123 Way 456 Street</p>
+        <p>Somewhere, USA</p><br>
+        <p>1 (888) 888-8888</p><br>
         <p>sales@greatidea.io</p>
-      </section><!-- contact -->
+      </div>
+
+      <footer>Copyright Great Idea 2018</footer>
 
-      <footer>
-        <p>Copyright Great Idea! 2018</p>
-      </footer>
 
-    </div><!-- container -->
-    
+    </div>
   </body>
-</html>
\ No newline at end of file
+</html>
