diff --git a/great-idea/css/index.css b/great-idea/css/index.css
index a6445bd842..2646a3cde6 100644
--- a/great-idea/css/index.css
+++ b/great-idea/css/index.css
@@ -46,6 +46,11 @@ table {
 	border-collapse: collapse;
 	border-spacing: 0;
 }
+img {
+	width: 100%;
+	height: auto;
+	object-fit: cover;
+}
 
 /* Set every element's box-sizing to border-box */
 * {
@@ -54,13 +59,232 @@ table {
 
 html, body {
     height: 100%;
-    font-family: 'Titillium Web', sans-serif;
+    font-family: 'Open Sans', sans-serif;
 }
 
 h1, h2, h3, h4, h5 {
     font-family: 'Bangers', cursive;
     letter-spacing: 1px;
-    margin-bottom: 15px;
+	margin-bottom: 0;
+	font-size: 1.4rem;
+	font-weight: 700;
+}
+
+p {
+	line-height: 1.3;
+	font-size: 1.1rem;
+	font-weight: 500;
+}
+
+/* ===Utils=== */
+.wrapper-y {
+	padding: 2.5rem 0
+}
+.wrapper-y.only-bottom {
+	padding-top: 0 
+}
+.mt-1 {
+	margin-top: 1rem
+}
+.mt-1h {
+	margin-top: 1.5rem
+}
+.mt-2 {
+	margin-top: 2rem
+}
+
+.btn {
+	background: #fff;
+	border: 1px solid black;
+	padding: .75rem 1.5rem;
+	min-width: 170px;
+	font-weight: 500;
+	color: #000;
+	font-size: 1rem;
+	transition: all .5s
+}
+.btn:hover {
+	background: black;
+	color: white;
+}
+
+.section-heading {
+	font-size: 1.1rem;
+}
+
+.flex-container {
+	display: flex;
+	justify-content: space-between;
+	flex-wrap: wrap;
+}
+
+@media screen and (max-width: 768px) {
+	.pt-2-sm {
+		padding-top: 2rem;
+	}
+
+	.d-none-sm {
+		display: none
+	}
+
+	.image-container {
+		height: 250px;
+	}
+
+	.image-container img {
+		height: 100%;
+		object-fit: cover;
+	}
+}
+
+/* Your code starts here! */
+.container {
+	margin: 0 auto;
+	padding: 0 1.5rem;
+	max-width: 1280px;
+}
+
+/* ===Navigation=== */
+nav {
+	flex-wrap: nowrap;
+	align-items: center;
+	width: 100%;
+	max-width: 1280px;
+	padding: 1.5rem 0 0;
+}
+
+nav ul {
+	width: calc(100% - 250px);
+}
+
+@media screen and (min-width: 992px) {
+	nav ul {
+		width: calc(100% - 350px);
+	}
+}
+
+nav li a {
+	font-size: 1rem;
+	color: rgba(0,0,0, .5);
+	font-weight: 600;
+	text-decoration: none;
+	padding: 1.5rem 0;
+	display: block;
+	transition: color .25s;
+}
+
+nav li a:hover {
+	color: rgba(0, 0, 0, 1);
 }
 
-/* Copy and paste your work from yesterday here and start to refactor into flexbox */
\ No newline at end of file
+.logo {
+	width: 200px;
+}
+
+/* ===Header=== */
+header.home-header {
+	margin: 4rem 0;
+	align-items: center;
+}
+
+header.home-header div {
+	width: 100%;
+	text-align: center;
+}
+
+header.home-header div:last-of-type {
+	display: none;
+}
+
+header.home-header h1 {
+	font-size: 3rem;
+	width: 100%;
+	margin: 0 auto;
+	line-height: 1.1;
+	letter-spacing: 6px;
+}
+
+header.services-header h1 {
+	font-size: 1.7rem;
+}
+
+@media screen and (min-width: 992px) {
+	header.home-header div {
+		width: 50%;
+		text-align: center;
+	}
+
+	header.home-header div:last-of-type {
+		display: block;
+	}
+
+	header.home-header h1 {
+		font-size: 6rem;
+		max-width: 380px;
+	}
+}
+
+/* ===Main Content=== */
+main {
+	border-top: 1px solid #000000;
+	border-bottom: 1px solid #000000;
+}
+
+@media screen and (min-width: 768px) {
+	.col-2-grid section {
+		width: calc(50% - 15px);
+	}
+	.col-3-grid section {
+		width: calc(33.33% - 15px);	
+	}
+}
+
+.service-card {
+	border: 1px solid black;
+	background: #f6f7f7;
+	padding: 1.5rem;
+	margin-bottom: 2.5rem;
+}
+.service-card:last-child {
+	margin-bottom: 0;
+}
+.service-card button {
+	font-size: .85rem;
+	padding: .65rem 1.5rem;
+	min-width: 150px;
+	border-radius: 7px;
+}
+
+@media screen and (min-width: 768px) {
+	.service-card {
+		width: calc(50% - 1.25rem);
+	}
+
+	.service-card:nth-child(n + 5) {
+		margin-bottom: 0;
+	}
+}
+
+/* ===Footer=== */
+footer section:first-of-type {
+	max-width: 550px;
+}
+footer ul {
+	list-style: outside;
+	padding-left: 15px;
+	font-size: 1.1rem;
+}
+footer li {
+	margin-bottom: .5rem;
+}
+footer .copyright {
+	text-align: center;
+	margin: 4rem 0 2rem;
+}
+
+address span {
+	max-width: 200px;
+	display: block;
+	margin-top: .8rem;
+	line-height: 1.4;
+}
\ No newline at end of file
diff --git a/great-idea/index.html b/great-idea/index.html
index c5f374a238..33165af433 100644
--- a/great-idea/index.html
+++ b/great-idea/index.html
@@ -3,7 +3,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Great Idea!</title>
 
   <link href="https://fonts.googleapis.com/css?family=Bangers|Titillium+Web" rel="stylesheet">
@@ -15,9 +15,76 @@
 </head>
 
   <body>
-
-    <!-- Copy and paste your HTML from the first UI project here -->
+    <div class="container">
+      <nav class="flex-container">
+        <ul class="flex-container">
+          <li><a href="./services.html">Services</a></li>
+          <li><a href="" class="d-none-sm">Product</a></li>
+          <li><a href="" class="d-none-sm">Vision</a></li>
+          <li><a href="" class="d-none-sm">Features</a></li>
+          <li><a href="" class="d-none-sm">About</a></li>
+          <li><a href="" class="d-none-sm">Contact</a></li>
+        </ul>
+        <a href="#" class="logo"><img class="logo" src="img/logo.png" alt="Great Idea! Company logo."></a>
+      </nav>
       
-    
+      <header class="home-header flex-container">
+        <div>
+          <h1>Innovation On Demand</h1>
+          <button class="btn mt-2">Get Started</button>
+        </div>
+  
+        <div>
+          <img src="img/header-img.png" alt="Image of a code snippet.">
+        </div>
+      </header>
+  
+      <main>
+        <div class="flex-container wrapper-y col-2-grid">
+          <section>
+            <h2>Features</h2>
+            <p class="mt-1">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 class="pt-2-sm">
+            <h2>About</h2>
+            <p class="mt-1">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>
+        </div>
+        
+        <div class="image-container">
+          <img class="middle-img" src="img/mid-page-accent.jpg" alt="Image of code snippets across the screen">
+        </div>
+  
+        <div class="flex-container wrapper-y col-3-grid">
+          <section>
+            <h2>Services</h2>
+            <p class="mt-1">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 class="pt-2-sm">
+            <h2>Product</h2>
+            <p class="mt-1">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 class="pt-2-sm">
+            <h2>Vision</h2>
+            <p class="mt-1">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>
+        </div>
+      </main>
+  
+      <footer class="wrapper-y">
+        <h3>Contact</h3>
+        <address class="class="mt-1"">
+          <span>123 Way 456 Street
+          Somewhere, USA</span>
+          <span>1 (888) 888-8888</span>
+          <span>sales@greatidea.io</span>
+        <address>
+  
+        <p class="copyright">Copyright Great Idea! 2018</p>
+      </footer>
+    </div>    
   </body>
 </html>
\ No newline at end of file
diff --git a/great-idea/services.html b/great-idea/services.html
index 271c36beae..a558ca02a3 100644
--- a/great-idea/services.html
+++ b/great-idea/services.html
@@ -3,8 +3,8 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-
-  <title>Great Idea!</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <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 +16,90 @@
 
 <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">
+    <nav class="flex-container">
+      <ul class="flex-container">
+        <li><a href="./services.html" target="_blank">Services</a></li>
+        <li><a href="" class="d-none-sm">Product</a></li>
+        <li><a href="" class="d-none-sm">Vision</a></li>
+        <li><a href="" class="d-none-sm">Features</a></li>
+        <li><a href="" class="d-none-sm">About</a></li>
+        <li><a href="" class="d-none-sm">Contact</a></li>
+      </ul>
+      <a href="./index.html" class="logo"><img class="logo" src="img/logo.png" alt="Great Idea! Company logo."></a>
+    </nav>
+
+    <header class="services-header wrapper-y only-bottom mt-1">
+      <div class="image-container">
+        <img src="img/services-header.jpg" alt="Image of a code snippet.">
+      </div>
+
+      <div class="mt-2">
+        <h1>Services</h1>
+        <p class="mt-1">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>
+      </div>
+    </header>
+
+    <main class="flex-container wrapper-y">
+      <section class="service-card">
+        <h2 class="section-heading">Digital Design</h2>
+        <p class="mt-1">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 pellentesqueeleifend. Mauris euismod facilisis iaculis.</p>
+        <button class="btn mt-1h">Learn More</button>
+      </section>
+
+      <section class="service-card">
+        <h2 class="section-heading">UX / UI</h2>
+        <p class="mt-1">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 pellentesqueeleifend. Mauris euismod facilisis iaculis.</p>
+        <button class="btn mt-1h">Learn More</button>
+      </section>
+
+      <section class="service-card">
+        <h2 class="section-heading">Digital Marketing</h2>
+        <p class="mt-1">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 pellentesqueeleifend. Mauris euismod facilisis iaculis.</p>
+        <button class="btn mt-1h">Learn More</button>
+      </section>
+
+      <section class="service-card">
+        <h2 class="section-heading">Web Development</h2>
+        <p class="mt-1">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 pellentesqueeleifend. Mauris euismod facilisis iaculis.</p>
+        <button class="btn mt-1h">Learn More</button>
+      </section>
+
+      <section class="service-card">
+        <h2 class="section-heading">iOS Development</h2>
+        <p class="mt-1">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 pellentesqueeleifend. Mauris euismod facilisis iaculis.</p>
+        <button class="btn mt-1h">Learn More</button>
+      </section>
+
+      <section class="service-card">
+        <h2 class="section-heading">Android Development</h2>
+        <p class="mt-1">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 pellentesqueeleifend. Mauris euismod facilisis iaculis.</p>
+        <button class="btn mt-1h">Learn More</button>
+      </section>
+    </main>
+
+    <footer class="wrapper-y">
+      <div class="flex-container col-2-grid">
+        <section>
+          <h2 class="section-heading">Some Facts About Our Services</h2>
+          <p class="mt-1">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 class="mt-1h">
+            <li>Awesome thing</li>
+            <li>Amazing thing</li>
+            <li>Cool thing</li>
+            <li>Great thing</li>
+          </ul>
+        </section>
+
+        <section class="pt-2-sm">
+          <img class="services-info-img" src="img/services-info.png" alt="one of our employees hard at work">
+        </section>
+      </div>
+
+      <p class="copyright">Copyright Great Idea! 2018</p>
+    </footer>
+  </div>
 
 </body>