diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..6f3a2913e
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/great-idea/css/index.css b/great-idea/css/index.css
index a6445bd84..a55879949 100644
--- a/great-idea/css/index.css
+++ b/great-idea/css/index.css
@@ -63,4 +63,156 @@ 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
+/* Your code starts here! */
+
+.services {
+	line-height: 1.5;
+}
+
+.container {
+	margin: auto 23%;
+}
+
+header {
+	margin-top: 7%;
+}
+
+nav {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+nav a {
+	color: #808080;
+	text-decoration: none;
+}
+
+.cta {
+	display: flex;
+	margin-top: 7%;
+}
+
+.cta-services h1{
+	font-size: 32px;
+	text-align: start;
+}
+
+.cta-box-1{
+	width: 57.5%;
+	display: flex;
+	flex-wrap: wrap;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+h1 {
+	font-size: 84px;
+	text-align: center;
+}
+
+button {
+	width: 35%;
+	font-size: 24px;
+	background-color: white;
+}
+
+.cta-box-2 {
+	width: 42.5%;
+	display: flex;
+	justify-content: flex-end;
+}
+
+.cta-services img {
+	width: 100%;
+	margin: 4% auto;
+}
+
+.main-content {
+	margin-top: 10%;
+	margin-bottom: 5%;
+	padding: 5% 0;
+	border-top: 1px solid black;
+	border-bottom: 1px solid black;
+}
+
+.all-services {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	border-top: 2px solid black;
+	border-bottom: 2px solid black;
+	margin-top: 4%;
+	padding-bottom: 4%;
+}
+
+.top-2{
+	display: flex;
+	justify-content: space-between;
+}
+
+.content-box-top {
+	width: 49%;
+}
+
+.middle-img {
+	width: 100%;
+	margin: 5% auto;
+}
+
+.bottom-3{
+	display: flex;
+	justify-content: space-between;
+}
+
+.content-box-bottom {
+	width: 32.5%;
+}
+
+.service-box {
+	width: 48%;
+	margin-top: 4%;
+	padding: 2%;
+	border: 1px solid black;
+	background-color: #F4F3F4;
+}
+
+.service-box button {
+	padding: 2% 5%;
+	font-size: 12px;
+	border-radius: 8px;
+}
+
+address a {
+	text-decoration: none;
+	color: black;
+}
+
+.facts {
+	display: flex;
+	justify-content: space-between;
+	margin-top: 4%;
+}
+
+.facts-box1 {
+	width: 48%;
+}
+
+.facts-box1 li {
+	list-style-type: square;
+	line-height: 2;
+}
+
+.facts-box2 {
+	width: 48%;
+}
+
+.facts-box2 img {
+	width: 100%;
+}
+
+footer {
+	text-align: center;
+	margin: 6% auto;
+}
diff --git a/great-idea/index.html b/great-idea/index.html
index c5f374a23..563c7b26d 100644
--- a/great-idea/index.html
+++ b/great-idea/index.html
@@ -16,8 +16,82 @@
 
   <body>
 
-    <!-- Copy and paste your HTML from the first UI project here -->
-      
-    
+    <div class='container'>
+
+      <header>
+        <nav>
+          <a href="#">Services</a>
+          <a href="#">Product</a>
+          <a href="#">Vision</a>
+          <a href="#">Features</a>
+          <a href="#">About</a>
+          <a href="#">Contact</a>
+          <img src="img/logo.png" alt="Great Idea! Company logo.">
+        </nav>
+      </header>
+
+      <section class="cta">
+        <div class="cta-box-1">
+          <h1>Innovation<br>
+          On<br>
+          Demand</h1>
+
+          <button>Get Started</button>
+        </div><!--closes cta box 1 div-->
+        <div class ="cta-box-2">
+          <img src="img/header-img.png" alt="Image of a code snippet.">
+        </div><!--closes cta box 2 div-->
+      </section> <!-- closes cta section-->
+
+      <section class="main-content">
+        <div class="top-2">
+          <div class="content-box-top">
+            <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>
+          </div><!--closes content box div-->
+
+          <div class="content-box-top">
+            <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>
+          </div><!--closes content box div-->
+        </div> <!--closes top 2 div-->
+        
+        <img class="middle-img" src="img/mid-page-accent.jpg" alt="Image of code snippets across the screen">
+
+        <div class="bottom-3">
+          <div class="content-box-bottom">
+          <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>
+          </div><!--closes content box bottom div-->
+          <div class="content-box-bottom">
+            <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>
+          </div><!--closes content box bottom div-->
+          <div class="content-box-bottom">
+            <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>
+          </div><!--closes content box bottom div-->
+        </div><!--closes bottom 3 div-->
+
+      </section>
+
+      <address>
+          
+        <h2>Contact</h2>
+        <a href="#">123 Way 456 Street</a><br>
+        <a href="#">Somewhere, USA</a><br>
+        <br>
+        <a href="#">1 (888) 888-8888</a><br>
+        <br>
+        <a href="#">sales@greatidea.io</a>
+        
+      </address>
+
+      <footer>
+
+      <p>Copyright Great Idea! 2018</p>
+
+      </footer>
+    </div> <!-- closes container div-->
   </body>
 </html>
\ No newline at end of file
diff --git a/great-idea/services.html b/great-idea/services.html
index 271c36bea..c774842dd 100644
--- a/great-idea/services.html
+++ b/great-idea/services.html
@@ -14,93 +14,118 @@
   <![endif]-->
 </head>
 
-<body>
+<body class="services">
 
+  <div class="container">
 
-Services
-Product
-Vision
-Features
-About
-Contact
+    <header>
+      <nav>
+        <a href="#">Services</a>
+        <a href="#">Product</a>
+        <a href="#">Vision</a>
+        <a href="#">Features</a>
+        <a href="#">About</a>
+        <a href="#">Contact</a>
+        <img src="img/logo.png" alt="Great Idea! Company logo.">
+      </nav>
+    </header>
 
-<img class="logo" src="img/logo.png" alt="Great Idea! Company logo.">
+    <section class="cta-services">
 
+      <img class="services-header-img" src="img/services-header.jpg" alt="Our services header image">
 
-<img class="services-header-img" src="img/services-header.jpg" alt="Our services header image">
+      <h1>Services</h1>
 
-Services
+      <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>
 
-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><!--closes cta-services section-->
 
+    <section class="all-services">
 
-Digital Design
+      <div class="service-box">
+        <h2>Digital Design</h2>
 
-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>
+        <br>
+        <button>Learn More</button>
+      </div>
 
-Learn More
+      <div class="service-box">
+        <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>
+        <br>
+        <button>Learn More</button>
+      </div>
 
+      <div class="service-box">
+        <h2>Digital Marketing</h2>
 
-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>
+        <br>
+        <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="service-box">
+        <h2>Web Development</h2>
 
-Learn More
+        <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>
+        <br>
+        <button>Learn More</buttoon>
+      </div>
 
+      <div class="service-box">
+        <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>
+        <br>
+        <button>Learn More</button>
+      </div>
 
-Digital Marketing
+      <div class="service-box">
+        <h2>Android Development</h2>
 
-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>
+        <br>
+        <button>Learn More</button>
+      </div>
 
-Learn More
+    </section><!--closes all services section-->
 
+    <section class="facts">
 
+      <div class="facts-box1">
+        <h2>Some Facts About Our Services</h2>
 
-Web 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><br>
 
-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.
+        <li>Awesome thing</li>
+        <li>Amazing thing</li>
+        <li>Cool thing</li>
+        <li>Great thing</li>
+        </ul>
+      </div><!--closes facts box1 div-->
 
-Learn More
+      <div class="facts-box2">
+        <img class="services-info-img" src="img/services-info.png" alt="one of our employees hard at work">
+      </div><!--closes facts box2-->
 
+    </section><!--closes facts section-->
 
+    <footer>
 
-iOS Development
+      <p>Copyright Great Idea! 2018</p>
+  
+    </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.
-
-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><!--closes container div-->
 
 </body>
 
