diff --git a/great-idea/css/index.css b/great-idea/css/index.css
index a6445bd842..76b3e890e9 100644
--- a/great-idea/css/index.css
+++ b/great-idea/css/index.css
@@ -54,7 +54,9 @@ table {
 
 html, body {
     height: 100%;
-    font-family: 'Titillium Web', sans-serif;
+	font-family: 'Titillium Web', sans-serif;
+	width: 876px;
+    margin: auto;
 }
 
 h1, h2, h3, h4, h5 {
@@ -63,4 +65,166 @@ 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 {
+	width: 1000px;
+	margin: auto;
+	border: 1px solid gray;
+}
+
+.line {
+	margin-top: 30px;
+    margin-bottom: 40px;
+    border-top: 1px solid black;
+}
+
+header {
+	background-color: lightblue;
+    height: 100px;
+    display: flex;
+    align-items: center;
+	justify-content: space-around;
+	
+}
+
+header nav {
+	font-size: 24px;
+}
+
+
+header nav a {
+	margin: 12px;
+	text-decoration-line: none;
+    color: black;
+}
+
+section.cta {
+	background-image: url(C:/Users/kingmoc/Documents/git/User-Interface/great-idea-website/img/header-img.png);
+    background-repeat: no-repeat;
+    background-position: 90%;
+    background-size: contain;
+    margin-top: 38px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.cta-text button {
+	font-size: 21px;
+    padding: 9px;
+    width: 206px;
+	background-color: white;
+    color: black;
+	border: 1px solid black;
+	margin-left: 53px;
+    margin-top: 19px;
+}
+	
+.cta-text {
+	margin-left: 84px;
+}
+
+section.cta div h1 {
+	font-size: 80px;
+    text-align: center;
+}
+
+section.main-content {
+	background-image: url("C:/Users/kingmoc/Documents/git/User-Interface/great-idea-website/img/mid-page-accent.jpg");
+    background-repeat: no-repeat;
+    background-position: 42% 42%;
+}
+
+section.services {
+	margin-top: 25px;
+}
+
+section.services h1 {
+	font-size: 28px;
+}
+
+section.service-info {
+	display: flex;
+    flex-wrap: wrap;
+    align-content: space-evenly;
+    justify-content: space-between;
+    height: 860px;;
+}
+
+section.service-info .info-box {
+	background: #f4f3f4;
+    width: 48%;
+    height: 250px;
+	border: 1px solid black;
+	display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 15px;
+}
+
+.info-box button {
+	border-radius: 5px;
+    width: 122px;
+    height: 30px;
+    background-color: white;
+    border: 1px solid black;
+    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
+}
+
+.facts {
+	display: flex;
+	justify-content: space-between;
+}
+
+.facts .factsText {
+	width: 420px;
+}
+
+.factsText p {
+	line-height: 22px;
+    margin-bottom: 20px;
+}
+
+.info-box p {
+	margin-bottom: 25px;
+    line-height: 20px;
+}
+
+.facts ul {
+	list-style-type:square;
+	list-style-position: inside;
+}
+
+.factsText ul li {
+	margin-bottom: 10px;
+}
+
+.top-content {
+	display: flex;
+}
+
+.bottom-content {
+	display: flex;
+}
+
+.bottom-content .text-content {
+	margin-right: 35px;
+}
+
+div.bottom-content {
+	margin-top: 235px;
+}
+
+footer p.copyright {
+	margin-top: 40px;
+	text-align: center;
+}
+
+footer section address {
+	margin-bottom: 20px;
+}
+
+footer section p {
+	line-height: 30px;
+}
\ No newline at end of file
diff --git a/great-idea/img/services-header.png b/great-idea/img/services-header.png
new file mode 100644
index 0000000000..dbd11d066d
Binary files /dev/null and b/great-idea/img/services-header.png differ
diff --git a/great-idea/index.html b/great-idea/index.html
index c5f374a238..d0e80ef231 100644
--- a/great-idea/index.html
+++ b/great-idea/index.html
@@ -16,7 +16,81 @@
 
   <body>
 
-    <!-- Copy and paste your HTML from the first UI project here -->
+    <header>
+      <nav class = "navmenu">
+        <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>          
+      </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>
+    </section>
+
+    <div class = "line"> </div>
+
+
+    <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 id = "about" 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>  
+
+            
+      <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>
+  </section>
+
+  <div class = "line"> </div>
+    
+  <footer>
+
+    <section class = "contact"> 
+      <h4>Contact</h4>
+
+      <address> 
+      123 Way 456 Street<br>
+      Somewhere, USA
+      </address>
+
+      <p>1 (888) 888-8888<br>
+      sales@greatidea.io</p>
+    </section>
+
+    <p class = "copyright">Copyright Great Idea! 2018</p>
+
+  </footer>
+
+  </div>
       
     
   </body>
diff --git a/great-idea/services.html b/great-idea/services.html
index 271c36beae..63d6bc3a1a 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">
@@ -17,90 +17,136 @@
 <body>
 
 
-Services
-Product
-Vision
-Features
-About
-Contact
+  <header>
+    <nav class = "navmenu">
+      <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>          
+    </nav>
+    <a href = "index.html"><img class="logo" src="img/logo.png" alt="Great Idea! Company logo."></a>
+  </header>
 
-<img class="logo" src="img/logo.png" alt="Great Idea! Company logo.">
+  
+  <img class="services-header-img" src="img/services-header.png" alt="Our services header image">
 
+<section class = "services">
+  <h1>Services</h1>
 
-<img class="services-header-img" src="img/services-header.jpg" alt="Our services header image">
+  <p>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. </p>
+</section>
 
-Services
+<div class = "line"> </div>
 
-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.
+<section class = "service-info">
 
+  <div class = "info-box">
 
-Digital Design
+    <h1>Digital Design</h1>
 
-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>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>
 
-Learn More
+    <button>Learn More</button>
+  </div>
 
+  <div class = "info-box">
 
+    <h1>UX/UI</h1>
 
-UX / UI
+    <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>
 
-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.
+    <button>Learn More</button>
+  </div>
 
-Learn More
+    <div class = "info-box">
 
+      <h1>Digital Marketing</h1>
+  
+      <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>
+  
+      <button>Learn More</button>
+    </div>
 
+    <div class = "info-box">
 
-Digital Marketing
+      <h1>Web Development</h1>
+  
+      <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>
+  
+      <button>Learn More</button>
+    </div>
 
-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.
+    <div class = "info-box">
 
-Learn More
+      <h1>IOS Development</h1>
+  
+      <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>
+  
+      <button>Learn More</button>
+    </div>
 
+    <div class = "info-box">
 
+      <h1>Andriod Development</h1>
+  
+      <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>
+  
+      <button>Learn More</button>
+    </div>
 
-Web Development
+</section>
 
-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.
+<div class = "line"> </div>
 
-Learn More
+<section class = "facts">
 
+  <div class = "factsText">
 
+    <h1>Some Facts About Our Services</h1>
 
-iOS Development
+    <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>
 
-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.
+    <ul>
+      <li>Awesome thing</li>
+      <li>Amazing thing</li>
+      <li>Cool thing</li>
+      <li>Great thing</li>
+    </ul>
 
-Learn More
+  </div>
 
+  <img class="services-info-img" src="img/services-info.png" alt="one of our employees hard at work">
 
+</section>
 
-Android Development
+<div class = "line"> </div>
 
-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.
+<footer>
 
-Learn More
+    <section class = "contact"> 
+      <h4>Contact</h4>
 
+      <address> 
+      123 Way 456 Street<br>
+      Somewhere, USA
+      </address>
 
-Some Facts About Our Services
+      <p>1 (888) 888-8888<br>
+      sales@greatidea.io</p>
+    </section>
 
-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 class = "copyright">Copyright Great Idea! 2018</p>
 
-
-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
+  </footer>
 
 </body>
 
