diff --git a/great-idea/css/index.css b/great-idea/css/index.css
index a6445bd84..e8b1fa992 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;
 }
@@ -63,4 +63,200 @@ h1, h2, h3, h4, h5 {
     margin-bottom: 15px;
 }
 
-/* Copy and paste your work from yesterday here and start to refactor into flexbox */
\ No newline at end of file
+/* Copy and paste your work from yesterday here and start to refactor into flexbox */
+
+.container {
+	margin: 26px auto;
+	width:  876px;
+}
+
+
+.navigation a{
+	border-radius: 2px;
+	color: grey;
+	font-size: 15px;
+	padding: 5px 8px;
+	text-decoration: none;
+}
+
+.navigation a:hover {
+	background-color: green;
+	color: white;
+}
+
+.navigation{
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.navigation img {
+	
+	display: inline-block;
+	margin-left: 170px;
+	padding:11px;
+	vertical-align: middle;
+}
+
+.main-header section {
+	width: 490px;
+	height: 372px;
+	margin-top: 120px;
+	margin-bottom: 50px;
+	text-align:center;
+	vertical-align:top;
+	display: inline-block;
+}
+
+.main-header section h2 {
+	font-size: 80px;
+}
+
+.main-header section button{
+	border: 1px solid green;
+	border-radius: 5px;
+	color: black;
+	padding: 5px 40px;
+	text-decoration: none;
+	}
+
+.main-header section button:hover {
+	background-color: green;
+	color: white;
+}
+
+.main-header img {
+	margin-top: 70px;
+}
+
+main {
+	
+	border-top: 1px solid black;
+	margin-bottom: 40px;
+	padding: 40px 0 40px;
+	border-bottom: 1px solid black;
+}
+
+main img {
+	margin: 50px 0 50px
+}
+
+
+.content {
+	display: flex;
+	justify-content: space-between;
+	align-content: center;
+	width: 870px;
+}
+
+.content:first-child section {
+	width: 430px;
+}
+
+.content section:first-child {
+	margin: 0;
+}
+
+.content section p {
+	line-height: 1.25em;
+}
+
+footer p{
+	font-size: 13px;
+	margin: 55px 0 120px;
+	text-align: center;
+}
+
+/* services */
+
+
+ .nav{
+	display: flex;
+	justify-content: space-between;
+	align-items:center;
+	font-size: 15px;
+	margin-top: 20px;
+}
+.navigationservices a{
+	border-radius: 4px;
+	color: grey;
+	font-size: 15px;
+	padding: 5px 8px;
+	margin-right: 25px;
+	text-decoration: none;
+}
+
+
+
+.services{
+	
+	padding: 40px 0 40px;
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+	flex-flow: row wrap;
+}
+
+.services section{ 
+
+	width: 418px;
+	border: solid 1px green;
+	padding: 20px;
+	margin-bottom: 40px;
+	background-color: lightgrey;
+
+}
+
+.services-header-img{
+	margin: 30px 0 30px;
+}
+
+.container2{
+	width:876px;
+	margin: 0 auto;
+}
+
+.services-facts{
+	display:flex;
+	justify-content: space-between;
+  
+}
+
+.services-facts section{
+	padding-right: 20px;
+	
+}
+
+.services-facts section p{
+	margin-bottom: 20px;
+}
+
+ul {
+	list-style-type: square;
+	margin-left: 20px;
+	line-height: 1.5em;
+
+}
+
+footer{
+	margin: 50px 0 100px;
+	text-align: center;
+}
+
+.topservices{
+	margin-bottom: 40px;
+}
+
+.services section a{
+	 display: inline-block;
+	 border: solid 1px black;
+	 padding: 8px 35px;
+	 margin-top: 20px;
+	 border-radius: 5px;
+	 text-decoration: none;
+	 color:inherit;
+   
+}
+
+
+
diff --git a/great-idea/index.html b/great-idea/index.html
index c5f374a23..0ddaf3934 100644
--- a/great-idea/index.html
+++ b/great-idea/index.html
@@ -12,12 +12,97 @@
   <!--[if lt IE 9]>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
   <![endif]-->
-</head>
 
-  <body>
+    <!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]>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
+      <![endif]-->
+    </head>
+
+    <body>
+
+      <div class="container">
+       <header>
+           <a href="services.html">
+              <nav class="navigation">
+                <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>
+           </a>
+
+                 <img class="logo" src="img/logo.png" alt="Great Idea! Company logo.">
+              </nav>
+
+             <section class="main-header">
+                <section>
+                  <h2>Innovation</h2>
+                  <h2>On</h2>
+                  <h2>Demand</h2>
+                  <br>
+                  <button>Get Started</button>
+                </section>
+
+
+               <img src="img/header-img.png" alt="Image of a code snippet.">
+             </section>
+       <header>
+    <main>
+          <section class="content">
+              <section>
+               <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>
+              </section>
+              <section>
+                <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>
+              </section>
+          </section>
+          <img class="middle-img" src="img/mid-page-accent.jpg" alt="Image of code snippets across the screen">
+          <section class="content">
+            <section>
+              <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>
+            </section>
+            <section>
+              <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>
+            </section>
+            <section>
+              <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>
+            </section>
+          </section>
+    </main>
+    <section>
+        <h4>Contact</h4>
+        <address>
+          123 Way 456 Street <br>
+          Somewhere, USA <br> <br>
+          1 (888) 888-8888 <br><br>
+          sales@greatidea.io
+        </address>
+      </section>
+       
+        <footer>
+          <p>Copyright Great Idea! 2018</p>
+        </footer>
+      </div>
+    </body>
+    </html>
+
 
-    <!-- Copy and paste your HTML from the first UI project here -->
-      
-    
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/great-idea/services.html b/great-idea/services.html
index 271c36bea..ef9ad1f3b 100644
--- a/great-idea/services.html
+++ b/great-idea/services.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset="utf-8">
 
-  <title>Great Idea!</title>
+  <title>Great Idea! - Services</title>
 
   <link href="https://fonts.googleapis.com/css?family=Bangers|Titillium+Web" rel="stylesheet">
   <link rel="stylesheet" href="css/index.css">
@@ -15,93 +15,114 @@
 </head>
 
 <body>
-
-
-Services
-Product
-Vision
-Features
-About
-Contact
-
-<img class="logo" src="img/logo.png" alt="Great Idea! Company logo.">
-
-
-<img class="services-header-img" src="img/services-header.jpg" alt="Our services header image">
-
-Services
-
-Our services provide the best digital value in nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque eleifend. Mauris euismod facilisis iaculis.
-
-
-Digital Design
-
-Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
-eleifend. Mauris euismod facilisis iaculis.
-
-Learn More
-
-
-
-UX / UI
-
-Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
-eleifend. Mauris euismod facilisis iaculis.
-
-Learn More
-
-
-
-Digital Marketing
-
-Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
-eleifend. Mauris euismod facilisis iaculis.
-
-Learn More
-
-
-
-Web Development
-
-Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
-eleifend. Mauris euismod facilisis iaculis.
-
-Learn More
-
-
-
-iOS Development
-
-Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
-eleifend. Mauris euismod facilisis iaculis.
-
-Learn More
-
-
-
-Android Development
-
-Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
-eleifend. Mauris euismod facilisis iaculis.
-
-Learn More
-
-
-Some Facts About Our Services
-
-Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
-eleifend. Mauris euismod facilisis iaculis.
-
-
-Awesome thing
-Amazing thing
-Cool thing
-Great thing
-
-<img class="services-info-img" src="img/services-info.png" alt="one of our employees hard at work">
-
-Copyright Great Idea! 2018
-
+  
+ <div class="container">
+  <header>
+   <div class="nav">
+       <nav class="navigationservices">
+          <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.">
+  </div>
+
+  <img class="services-header-img" src="img/services-header.jpg" alt="Our services header image">
+  
+  <div class= "topservices">
+    <h1>Services</h1>
+    <p>Our services provide the best digital value in nulla suscip
+      it interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit ame
+      t, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus
+      et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque eleifend. Mauris euismod facilisis iaculis</p>
+  </div>
+</header>
+
+
+<main>
+  <section class="services">
+    
+    
+      <section>
+      <h2>Digital Design</h2>
+      <p>Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
+      eleifend. Mauris euismod facilisis iaculis.</p>
+      <a href="#">Learn More</a>
+      </section>
+
+
+      <section>
+      <h2>UX/UI</h2>
+      <p>Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
+      eleifend. Mauris euismod facilisis iaculis.</p>
+      <a href="#">Learn More</a>
+      </section>
+
+      <section>
+      <h2>Digital Marketing</h2>
+      <p>Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
+      eleifend. Mauris euismod facilisis iaculis.</p>
+      <a href="#">Learn More</a>
+      </section>
+
+      <section>
+      <h2>Web Development</h2>
+      <p>Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
+      eleifend. Mauris euismod facilisis iaculis.</p>
+      <a href="#">Learn More</a>
+      </section>
+
+      <section>
+      <h2>iOS Development</h2>
+      <p>Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
+      eleifend. Mauris euismod facilisis iaculis.</p>
+      <a href="#">Learn More</a>
+      </section>
+
+
+      <section>
+      <h2>Android Development</h2>
+      <p>Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
+      eleifend. Mauris euismod facilisis iaculis.</p>
+      <a href="#">Learn More</a>
+      </section>
+
+    </section>
+
+
+
+
+
+   
+</main>
+ 
+  
+
+   <section class="services-facts">
+     
+      <section>
+        <h3> Some Facts About Our Services</h3>
+      <p> Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
+      eleifend. Mauris euismod facilisis iaculis.</p>
+      <ul>
+        <li>Awesome thing</li>
+        <li>Amazing thing</li>
+        <li>Cool thing</li>
+        <li>Great thing</li>
+     </ul>
+    
+    </section>
+    <img class="services-info-img" src="img/services-info.png" alt="one of our employees hard at work">
+  </section>
+
+
+ <footer>
+  Copyright Great Idea! 2018
+ </footer>
+</div>
 </body>
 
-</html>
\ No newline at end of file
+</html>