diff --git a/great-idea/css/index.css b/great-idea/css/index.css
index a6445bd842..5bd0b26801 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,269 @@ 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 */
+
+/* Main Container */
+
+.container {
+	width: 1000px;
+	margin: auto;
+	border: 1px solid gray;
+}
+
+/* Header Section Selectors */
+
+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;
+}
+
+/* Services Section Selectors (services html) */
+
+.services-info-img {
+	width: 600px;
+}
+
+section.services {
+	margin-top: 25px;
+}
+
+section.services h1 {
+	font-size: 28px;
+}
+
+/* Call To Action Selectors (index.html) */
+
+section.cta {
+	background-image: url("../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;
+}
+
+/* Main Content Selectors (index.html) */
+
+section.main-content {
+	background-image: url("../img/mid-page-accent.jpg");
+    background-repeat: no-repeat;
+    background-position: 42% 42%;
+}
+
+
+/* Top/Bottom Content Selectors */
+
+.top-content {
+	display: flex;
+}
+
+.bottom-content {
+	display: flex;
+}
+
+.bottom-content .text-content {
+	margin-right: 35px;
+}
+
+div.bottom-content {
+	margin-top: 235px;
+}
+
+
+/* Service Info Selectors */
+
+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;
+}
+
+
+/* Facts Selectors */
+
+.facts ul {
+	list-style-type:square;
+	list-style-position: inside;
+}
+
+.factsText ul li {
+	margin-bottom: 10px;
+}
+
+.facts {
+	display: flex;
+	justify-content: space-between;
+}
+
+.facts .factsText {
+	width: 420px;
+}
+
+.factsText p {
+	line-height: 22px;
+    margin-bottom: 20px;
+}
+
+
+/* Footer Selectors */
+
+footer p.copyright {
+	margin-top: 40px;
+	text-align: center;
+}
+
+footer section address {
+	margin-bottom: 20px;
+}
+
+footer section p {
+	line-height: 30px;
+}
+
+/* Other Selectors */
+
+
+.line {
+	margin-top: 30px;
+    margin-bottom: 40px;
+    border-top: 1px solid black;
+}
+
+.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);
+}
+
+.info-box p {
+	margin-bottom: 25px;
+    line-height: 20px;
+}
+
+
+
+
+/* Media Queries  */
+
+/* If the screen size is 600px or less, */
+@media only screen and (max-width: 600px) {
+	section.service-info {
+	  height: auto;
+	  flex-flow: column nowrap;
+	  align-items: center;
+	}
+  }
+  
+/* If the screen size is 600px or less, */
+@media only screen and (max-width: 600px) {
+	section.service-info .info-box {
+		margin-bottom: 20px;
+		width: 600px;
+	}
+  }
+
+
+/* If the screen size is 600px or less, */
+@media only screen and (max-width: 600px) {
+	.info-box button {
+		margin-left: 150px;
+		margin-top: 30px;
+		font-size: 35px;
+		width: 225px;
+		height: fit-content;
+	}
+  }
+  
+/* If the screen size is 600px or less, */
+@media only screen and (max-width: 600px) {
+	.facts {
+	  height: auto;
+	  flex-flow: column nowrap;
+	  align-items: center;
+	}
+}
+	
+	
+/* If the screen size is 600px or less, */
+@media only screen and (max-width: 600px) {
+	.facts .factsText {
+		width: 600px;
+		margin-bottom: 40px;
+	}
+} 
+
+/* If the screen size is 600px or less, */
+@media only screen and (max-width: 600px){
+	footer .contact {
+		height: auto;
+		flex-flow: column nowrap;
+		align-items: center;
+		display: flex;
+    	justify-content: space-between;
+	}
+}
+
+/* If the screen size is 600px or less, */
+@media only screen and (max-width: 600px){
+	.services {
+		display: flex;
+		height: auto;
+		flex-flow: column nowrap;
+		align-items: center;
+		width: 600px;
+		margin-left: 135px;
+	}
+}
+
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..b6d3528384 100644
--- a/great-idea/index.html
+++ b/great-idea/index.html
@@ -16,8 +16,94 @@
 
   <body>
 
-    <!-- Copy and paste your HTML from the first UI project here -->
-      
-    
+    <!-- This is the NAV/Top Menu -->
+
+    <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>
+
+    <!-- This is the Call to Action - Jumbo -->
+    <section class = "cta">
+      <div class = "cta-text">
+        <h1>Innovation<br> On<br> Demand</h1>
+        <button>Get Started</button>
+      </div>
+    </section>
+
+    <!-- Section Line -->
+    <div class = "line"> </div>    
+
+    <!-- Main content of Page -->
+    <section class = "main-content">
+
+      <div class = "top-content"> <!-- Top Section -->
+
+        <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"> <!-- Bottom Section -->
+
+         <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>
+
+    <!-- Section Line -->
+    <div class = "line"> </div>
+
+    <!-- This is the Footer     -->
+    <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>
+
   </body>
+
 </html>
\ No newline at end of file
diff --git a/great-idea/services.html b/great-idea/services.html
index 271c36beae..fdfc57113a 100644
--- a/great-idea/services.html
+++ b/great-idea/services.html
@@ -1,10 +1,11 @@
 <!doctype html>
 
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
-
-  <title>Great Idea!</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <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">
@@ -16,91 +17,141 @@
 
 <body>
 
+    <!-- This is the NAV/Top Menu -->
+    <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="services-header-img" src="img/services-header.png" alt="Our services header image">
 
-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.
+    <!-- Services Section -->
+    <section class = "services">
+      <h1>Services</h1>
 
+      <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>
 
-Digital Design
+    <!-- Section Line -->
+    <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.
+    <section class = "service-info">
 
-Learn More
+      <div class = "info-box">
 
+        <h1>Digital Design</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>
 
-UX / UI
+        <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>UX/UI</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>
 
-Digital Marketing
+      <div class = "info-box">
 
-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.
+        <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>
 
-Learn More
+      <div class = "info-box">
 
+        <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>
 
+      <div class = "info-box">
 
-Web Development
+        <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>
 
-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>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>
 
+    </section>
 
+    <!-- Section Line -->
+    <div class = "line"> </div>
 
-iOS Development
+    <section class = "facts">
 
-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 = "factsText">
 
-Learn More
+        <h1>Some Facts About Our Services</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>
 
+        <ul>
+          <li>Awesome thing</li>
+          <li>Amazing thing</li>
+          <li>Cool thing</li>
+          <li>Great thing</li>
+        </ul>
 
-Android Development
+      </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.
+      <img class="services-info-img" src="img/services-info.png" alt="one of our employees hard at work">
 
-Learn More
+    </section>
 
+    <!-- Section Line -->
+    <div class = "line"> </div>
 
-Some Facts About Our Services
+    <!-- This is the footer -->
+    <footer>
 
-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 = "contact"> 
+        <h4>Contact</h4>
 
+        <address> 
+        123 Way 456 Street<br>
+        Somewhere, USA
+        </address>
 
-Awesome thing
-Amazing thing
-Cool thing
-Great thing
+        <p>1 (888) 888-8888<br>
+        sales@greatidea.io</p>
+      </section>
 
-<img class="services-info-img" src="img/services-info.png" alt="one of our employees hard at work">
+      <p class = "copyright">Copyright Great Idea! 2018</p>
 
-Copyright Great Idea! 2018
+    </footer>
 
 </body>