diff --git a/great-idea/css/index.css b/great-idea/css/index.css
index a6445bd842..e9c0af41c8 100644
--- a/great-idea/css/index.css
+++ b/great-idea/css/index.css
@@ -63,4 +63,202 @@ 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 */
+
+
+header{
+	box-sizing:border-box;
+	margin: 40px;
+	padding-top:15px;
+}
+
+
+.logo{
+	display: inline-block;
+	width: 190px;
+	margin: -2%;
+	margin-right:50px;
+	padding: 0px;
+	text-align: center;
+	float: right;
+}
+
+.img{
+	display:inline-block;
+
+}
+.navigation-bar ul {
+	width: 50%;
+	padding: 0px;
+	margin: 0px;
+	text-align: center;
+	display:inline-block;
+	vertical-align:top;
+  }
+
+#nav a{
+	color:lightgray;
+	padding:4%;
+	text-decoration: none;
+}
+
+.part-1{
+	padding-top:150px;
+	display:inline-block;
+	margin-left:250px;
+}
+
+
+
+h1{
+	text-align:center;
+	margin:0px;
+	padding-right:150px;
+	font-size:100px;
+	transform: scaleY(1.2);
+	transform-origin: 0 0;
+	letter-spacing: 5px;
+	}
+
+button{
+	display: inline-block;
+	background-color: white;
+	border-radius: 0px;
+	border: 1px solid;
+	color: #202020;
+	text-align: center;
+	font-size: 20px;
+	width: 200px;
+	margin-left:150px;
+	margin-top:75px;
+}
+
+a {
+	color:#202020;
+	text-decoration:none;
+	font-size:15px;
+	font-weight:350;
+	transform: scaleY(1);
+	transform-origin: 0 0;
+	letter-spacing: 2px;
+}
+
+.img {
+	border:1px solid;
+	overflow: auto;
+	float:right;
+	margin:50px;
+}
+
+.parent {
+	margin:75px;
+	box-sizing: border-box;
+	border-top: 1px solid;
+	border-bottom: 1px solid;
+}
+
+h2 {
+	display:block;
+	margin:5px;
+	padding-top: 50px;
+}
+
+p.part1 {
+	width:60%;
+	display: inline-block;
+	margin: 5px;
+	padding-bottom:50px;
+	text-align: left;
+	transform: scaleY(.9.9);
+	transform-origin: 0 0;
+	letter-spacing: .5px;
+	font-weight: 350;
+
+}
+
+p.part2 {
+	width:60%;
+	display: inline-block;
+	margin: 5px;
+	padding-bottom:50px;
+	text-align: left;
+	transform: scaleY(.9.9);
+	transform-origin: 0 0;
+	letter-spacing: .5px;
+	font-weight: 350;
+
+}
+
+.middle-img {
+	width:100%;
+	margin: 2px;
+}
+
+h3 {
+	display: block;
+	margin: 5px;
+	padding-top:30px;
+}
+
+p.services {
+	width:60%;
+	display: inline-block;
+	margin: 5px;
+	padding-bottom:50px;
+	text-align: left;
+	transform: scaleY(.9.9);
+	transform-origin: 0 0;
+	letter-spacing: .5px;
+	font-weight: 350;
+}
+
+p.products {
+	width:60%;
+	display: inline-block;
+	margin: 5px;
+	padding-bottom:50px;
+	text-align: left;
+	transform: scaleY(.9.9);
+	transform-origin: 0 0;
+	letter-spacing: .5px;
+	font-weight: 350;
+}
+
+p.vision {
+	width:60%;
+	display: inline-block;
+	margin: 5px;
+	padding-bottom:50px;
+	text-align: left;
+	transform: scaleY(.9.9);
+	transform-origin: 0 0;
+	letter-spacing: .5px;
+	font-weight: 350;
+}
+
+
+h4 {
+	display: block;
+	margin-left: 85px;
+}
+
+.contact-info {
+	padding:2px;
+	display: inline-block;
+	margin-left: 85px;
+}
+
+.contact2 {
+	padding-top:15px;
+	margin-left: 85px;
+}
+
+.contact3 {
+	padding-top: 15px;
+	margin-left: 85px;
+}
+
+.copyr {
+	margin-left: 600px;
+	padding: 50px;
+}
\ No newline at end of file
diff --git a/great-idea/css/services.css b/great-idea/css/services.css
new file mode 100644
index 0000000000..352c86491c
--- /dev/null
+++ b/great-idea/css/services.css
@@ -0,0 +1,190 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+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, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+/* Set every element's box-sizing to border-box */
+* {
+    box-sizing: border-box;
+}
+
+html, body {
+    height: 100%;
+    font-family: 'Titillium Web', sans-serif;
+}
+
+h1, h2, h3, h4, h5 {
+    font-family: 'Bangers', cursive;
+    letter-spacing: 1px;
+    margin-bottom: 15px;
+}
+
+/* Copy and paste your work from yesterday here and start to refactor into flexbox */
+
+.Services{
+    display:flexbox;
+    margin:1%;
+    padding:0%;
+}
+
+.top {
+    display: inline-flex;
+    margin: 1%;
+    width: 100%
+}
+
+#nav {
+	width: 70%;
+	padding: 2%;
+    margin: 0px;
+}
+
+a{
+    margin: 3%;
+    padding: 1%;
+    color:lightslategray;
+	text-decoration: none;
+}
+
+
+.great2{
+    margin: 1%;
+    padding-left:11%;
+}
+
+#services img{
+    margin: 1%;
+    padding-left:60px;
+    height: 230px;
+    max-width: 1340px;
+    width:100%;
+}
+
+ 
+h1.svs{
+    display:flex;
+    flex-wrap:wrap;
+    margin: 1%;
+    padding-left:60px;
+}
+/* done to here */
+
+
+.cont3 {
+    display:flex;
+    border: 1px solid;
+}
+
+p.digital {
+    border: 1px solid;
+    margin: 1%;
+}
+
+.cont2 {
+    border: 1px solid;
+    margin:1%;
+}
+
+.design {
+    border: 1px solid;
+    width:50%;
+}
+
+.digital {
+    border: 1px solid;
+    width:50%;
+}
+
+h2.ux {
+    border: 1px solid;
+    width:50%
+}
+
+p.ui {
+    border: 1px solid;
+    width:50%;
+}
+
+h3.mark {
+    border: 1px solid;
+    width:50%:
+}
+
+p.marketing {
+    border: 1px solid;
+    width: 50%;
+}
+
+h4.web {
+    border: 1px solid;
+    width: 50%;
+}
+
+p.dev {
+    border:1px solid;
+    width: 50%;
+}
+
+h5.ios {
+    border:1px solid;
+    width: 50%;
+}
+
+p.development {
+    border:1px solid;
+    width: 50%;
+}
+
+h6.android {
+    border:1px solid;
+    width: 50%;
+}
+
+p.develop {
+    border:1px solid;
+    width: 50%;
+}
\ No newline at end of file
diff --git a/great-idea/index.html b/great-idea/index.html
index c5f374a238..85b80a04b3 100644
--- a/great-idea/index.html
+++ b/great-idea/index.html
@@ -17,7 +17,151 @@
   <body>
 
     <!-- Copy and paste your HTML from the first UI project here -->
+    
+    
+    <header> 
+
+      <nav id="nav">
+         <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>
+    
+    
+    <div class="logo">
+      <img class="logo" src="img/logo.png" alt="Great Idea! Company logo.">
+    </div>
+    
+      </header>
+    
+    <section class="part-1">
+    
+    
+      <h1>
+        <ul>
+      <li> Innovation </li>
+      <li> On </li>
+      <li>Demand</li>
+    </ul>
+    </h1>
+    
+    
+    
+    <div class="button"></div>
+    <button type=button onclick="alert('Hello world!')" color:#202020;>
+      <a href="#"><div class="started">Get Started</span></a>
+    </button>
+    </div>
+    </section>
+    
+    
+    <span>
+      <img src="img/header-img.png" alt="Image of a code snippet.">
+    </span>
+    
+    
+    
+    
+    
+    <section class="parent">
+    
+    
+    <table>
+      <tr>
+        <td>
+    <h2>
+      Features
+    </h2>
+    
+    <p class="part1">
+      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>
+    </td>
+    
+    
+    
+    <td>
+    <h2>
+      About
+    </h2>
+    
+    
+    <p class="part2">
+      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>
+    </td>
+    </tr>
+    </table>
+    
+    
+    <div class="middle-img">
+      <img class="middle-img" src="img/mid-page-accent.jpg" alt="Image of code snippets across the screen">
+    </div>
+    
+    
+    
+    
+    <table>
+      <tr>
+        <td>
+    
+    <h3>Services</h3>
+    
+    <p class="services">
+      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>
+    
+    </td>
+    <td>
+      <h3>Product</h3>
+    
+    <p class="products">
+      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>
+    </td>
+    <td>
+      <h3>Vision</h3>
+    
+    <p class="vision">
+      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>
+    </td>
+    </tr>
+    </table>
+    
+    
+    </section>
+    
+    
+    
+    <footer>
       
+        <h4>
+       Contact
+        </h4>
+    
+    <div class="contact-info">
+      <ul>
+      <li>123 Way 456 Street</li>
+      <li>Somewhere, USA</li>
+      </ul>
+    </div>
+    
+    <div class="contact2">
+      1 (888) 888-8888
+    </div>
+    
+    <div class="contact3">
+      sales@greatidea.io
+    </div>
+    
+    <div class="copyr">
+      Copyright Great Idea! 2018
+    </div>
+    </footer> 
     
   </body>
 </html>
\ No newline at end of file
diff --git a/great-idea/services.html b/great-idea/services.html
index 271c36beae..05ff78617d 100644
--- a/great-idea/services.html
+++ b/great-idea/services.html
@@ -7,84 +7,134 @@
   <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 rel="stylesheet" href="css/services.css">
 
   <!--[if lt IE 9]>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
   <![endif]-->
 </head>
+<!-- part 1 -->
 
 <body>
 
+<header class="Services">
+
+<div class="container">
+  <div class="top">
+  <nav id="nav">
+    <a href="services.html"> Services </a>
+    <a href="#"> Products </a>
+    <a href="#"> Vision </a>
+    <a href="#"> Features </a>
+    <a href="#"> About </a>
+    <a href="#"> Contact </a>
+</nav>
+
+  <div class="great2">
+  <img class="logo" src="img/logo.png" alt="Great Idea! Company logo.">
+  </div>
+</div>
 
-Services
-Product
-Vision
-Features
-About
-Contact
 
-<img class="logo" src="img/logo.png" alt="Great Idea! Company logo.">
+<div id="services">
+  <img class="services-header-img" src="img/services-header.jpg" alt="Our services header image">
+</div>
 
+</div>
 
-<img class="services-header-img" src="img/services-header.jpg" alt="Our services header image">
 
+<h1 class="svs">
 Services
+</h1>
 
+<p class="service">
 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>
+
+</header>
+
+<!-- complete? -->
 
+<section>
+<div class="cont2">
 
+<div class="cont3">
+<h1 class="design">
 Digital Design
+</h1>
 
+
+<p class="digital">
 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
-
+<button type="button">Learn More</button>
 
+</p>
+</div>
 
+<h2 class="ux">
 UX / UI
-
+</h2>
+<p class="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
-
+<button type="button">Learn More</button>
 
+</p>
 
+<h3 class="mark">
 Digital Marketing
+</h3>
 
+<p class="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
 
+Learn More
+</p>
 
 
+<h4 class="web">
 Web Development
+</h4>
 
+<p class="dev">
 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
-
+<button type="button">Learn More</button>
 
+</p>
 
+<h5 class="ios">
 iOS Development
+</h5>
 
+<p class="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
+<button type="button">Learn More</button> 
 
 
+</p>
 
+<h6 class="android">
 Android Development
+</h6>
 
+<p class="develop">
 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
+<button type="button">Learn More</button>
+
+</p>
+</div>
+</section>
 
 
 Some Facts About Our Services