From ffc4624fd3db95e2c62cab02088126f645371bfc Mon Sep 17 00:00:00 2001
From: Jose <jgonzalezmn@gmail.com>
Date: Wed, 27 Mar 2019 15:24:51 -0400
Subject: [PATCH 1/4] draft

---
 great-idea/css/index.css    | 164 +++++++++++++++++++++++++++++++--
 great-idea/css/services.css | 171 +++++++++++++++++++++++++++++++++++
 great-idea/index.html       |  96 ++++++++++++++++++--
 great-idea/services.html    | 175 ++++++++++++++++++------------------
 4 files changed, 506 insertions(+), 100 deletions(-)
 create mode 100644 great-idea/css/services.css

diff --git a/great-idea/css/index.css b/great-idea/css/index.css
index a6445bd84..ab19dfdd5 100644
--- a/great-idea/css/index.css
+++ b/great-idea/css/index.css
@@ -1,4 +1,4 @@
-/* http://meyerweb.com/eric/tools/css/reset/ 
+/* http://meyerweb.com/eric/tools/css/reset/
    v2.0 | 20110126
    License: none (public domain)
 */
@@ -12,8 +12,8 @@ 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, 
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
 	margin: 0;
@@ -24,7 +24,7 @@ time, mark, audio, video {
 	vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
+article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {
 	display: block;
 }
@@ -63,4 +63,158 @@ 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 {
+	margin: 26px auto;
+	width:  876px;
+}
+
+header {
+	height: 565px;
+}
+
+.navigation a{
+	border-radius: 2px;
+	color: grey;
+	font-size: 15px;
+	padding: 5px 8px;
+	margin-right: 25px;
+	text-decoration: none;
+}
+
+.navigation a:hover {
+	background-color: green;
+	color: white;
+}
+
+.navigation img {
+	display: inline-block;
+	margin-left: 105px;
+	padding:11px;
+	vertical-align: middle;
+}
+
+.main-header section {
+	width: 490px;
+	height: 372px;
+	margin-top: 120px;
+	margin-bottom: 50px;
+	text-align:center;
+	vertical-align:top;
+	display: inline-block
+}
+
+.main-header section h2 {
+	font-size: 80px;
+}
+
+.main-header section button{
+	border: 1px solid green;
+	border-radius: 5px;
+	color: black;
+	padding: 5px 40px;
+	text-decoration: none;
+	}
+
+.main-header section button:hover {
+	background-color: green;
+	color: white;
+}
+
+.main-header img {
+	margin-top: 70px;
+}
+
+main {
+	border-bottom: 1px solid black;
+	border-top: 1px solid black;
+	margin-bottom: 40px;
+	padding: 40px 0 40px;
+}
+
+main img {
+	margin: 50px 0 50px
+}
+
+
+.content {
+	display: flex;
+	justify-content: space-between;
+	align-content: center;
+	width: 870px;
+}
+
+.content:first-child section {
+	width: 430px;
+}
+
+.content section:first-child {
+	margin: 0;
+}
+
+.content section p {
+	line-height: 1.25em;
+}
+
+footer p{
+	font-size: 13px;
+	margin: 55px 0 120px;
+	text-align: center;
+}
+
+/* services */
+/*.navigationservices{
+	display: flex;
+	justify-content: space-between; */
+
+ .nav{
+	display: flex;
+	justify-content: space-between;
+	border: 1px solid red;
+}
+.navigationservices a{
+	border-radius: 4px;
+	color: grey;
+	font-size: 15px;
+	padding: 5px 8px;
+	margin-right: 25px;
+	text-decoration: none;
+}
+
+.container2 header{
+ height: 340px;
+}
+
+.box1 .h2{
+
+}
+
+
+
+.content2{
+	border: 2px solid orange;
+  display: flex;
+
+}
+
+.box1{
+	border: 2px solid blue;
+}
+
+.box2{
+	border: 2px solid salmon;
+}
+
+.box3{
+	border: 2px solid pink;
+}
+
+.box4{
+	border: 2px solid rebeccapurple;
+}
+
+footer {
+	display: flex;
+  justify-content: center;
+}
diff --git a/great-idea/css/services.css b/great-idea/css/services.css
new file mode 100644
index 000000000..d988a13e8
--- /dev/null
+++ b/great-idea/css/services.css
@@ -0,0 +1,171 @@
+/* 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;
+}
+
+
+.container {
+	margin: 26px auto;
+	width:  876px;
+}
+
+header {
+	height: 565px;
+}
+
+.navigation a{
+	color:green;
+	text-decoration: none;
+}
+
+
+/*
+.navigation a{
+	border-radius: 2px;
+	color: green;
+	font-size: 15px;
+	padding: 5px 8px;
+	margin-right: 25px;
+	text-decoration: none;
+}
+
+.navigation a:hover {
+	background-color: green;
+	color: white;
+}
+
+.navigation img {
+	display: inline-block;
+	margin-left: 105px;
+	padding:11px;
+	vertical-align: middle;
+}
+
+.main-header section {
+	width: 490px;
+	height: 372px;
+	margin-top: 120px;
+	margin-bottom: 50px;
+	text-align:center;
+	vertical-align:top;
+	display: inline-block
+}
+
+.main-header section h2 {
+	font-size: 80px;
+}
+
+.main-header section button{
+	border: 1px solid green;
+	border-radius: 5px;
+	color: black;
+	padding: 5px 40px;
+	text-decoration: none;
+	}
+
+.main-header section button:hover {
+	background-color: green;
+	color: white;
+}
+
+.main-header img {
+	margin-top: 70px;
+}
+
+main {
+	border-bottom: 1px solid black;
+	border-top: 1px solid black;
+	margin-bottom: 40px;
+	padding: 40px 0 40px;
+}
+
+main img {
+	margin: 50px 0 50px
+}
+
+
+.content {
+	display: flex;
+	justify-content: space-between;
+	align-content: center;
+	width: 870px;
+}
+
+.content:first-child section {
+	width: 430px;
+}
+
+.content section:first-child {
+	margin: 0;
+}
+
+.content section p {
+	line-height: 1.25em;
+}
+
+footer p{
+	font-size: 13px;
+	margin: 55px 0 120px;
+	text-align: center;
+}
+*/
diff --git a/great-idea/index.html b/great-idea/index.html
index c5f374a23..982c6b8ad 100644
--- a/great-idea/index.html
+++ b/great-idea/index.html
@@ -12,12 +12,96 @@
   <!--[if lt IE 9]>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
   <![endif]-->
-</head>
 
-  <body>
+    <!doctype html>
+
+    <html lang="en">
+    <head>
+      <meta charset="utf-8">
+
+      <title>Great Idea!</title>
+
+      <link href="https://fonts.googleapis.com/css?family=Bangers|Titillium+Web" rel="stylesheet">
+      <link rel="stylesheet" href="css/index.css">
+
+      <!--[if lt IE 9]>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
+      <![endif]-->
+    </head>
+
+    <body>
+
+      <div class="container">
+       <header>
+           <a href="services.html">
+              <nav class="navigation">
+                <a href="#">Services</a>
+                <a href="#">Product</a>
+                <a href="#">Vision</a>
+                <a href="#">Features</a>
+                <a href="#">About</a>
+                <a href="#">Contact</a>
+           </a>
+
+                 <img class="logo" src="img/logo.png" alt="Great Idea! Company logo.">
+              </nav>
+
+             <section class="main-header">
+                <section>
+                  <h2>Innovation</h2>
+                  <h2>On</h2>
+                  <h2>Demand</h2>
+                  <br>
+                  <button>Get Started</button>
+                </section>
+
+
+               <img src="img/header-img.png" alt="Image of a code snippet.">
+             </section>
+       <header/>
+    <main>
+          <section class="content">
+              <section>
+               <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>
+              </section>
+              <section>
+                <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>
+              </section>
+          </section>
+          <img class="middle-img" src="img/mid-page-accent.jpg" alt="Image of code snippets across the screen">
+          <section class="content">
+            <section>
+              <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>
+            </section>
+            <section>
+              <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>
+            </section>
+            <section>
+              <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>
+            </section>
+          </section>
+    </main>
+        <footer>
+          <section>
+            <h4>Contact</h4>
+            <address>
+              123 Way 456 Street <br>
+              Somewhere, USA <br> <br>
+              1 (888) 888-8888 <br><br>
+              sales@greatidea.io
+            </address>
+          </section>
+          <p>Copyright Great Idea! 2018</p>
+        </footer>
+      </div>
+    </body>
+    </html>
+
 
-    <!-- Copy and paste your HTML from the first UI project here -->
-      
-    
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/great-idea/services.html b/great-idea/services.html
index 271c36bea..3f797894d 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">
@@ -15,93 +15,90 @@
 </head>
 
 <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="container2">
+  <header>
+   <div class="nav">
+       <nav class="navigationservices">
+          <a href="#">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.">
+  </div>
+
+  <img class="services-header-img" src="img/services-header.jpg" alt="Our services header image">
+
+</header>
+
+
+<main>
+  <section class="content2">
+    <section>
+        <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>
+    <section class="box1">
+        <h2>Digital Design</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>
+        <a href="#">Learn More</a>
+    
+    
+        <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>
+        <a href="#">Learn More</a>
+    </section>
+    <section class="box2">
+       <h2>Digital Marketing</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>
+       <a href="#">Learn More</a>
+    
+    
+      <h2>Web 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>
+      <a href="#">Learn More</a>
+    </section>
+    <section class="box3">
+      <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>
+      <a href="#">Learn More</a>
+
+    
+      <h2>Android 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>
+      <a href="#">Learn More</a>
+    </section>
+
+
+
+    
+    <section class="box4">
+      <h3> Some Facts About Our Services</h3>
+      <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>
+   </section>
+</main>
+ <div>
+   <img class="services-info-img" src="img/services-info.png" alt="one of our employees hard at work">
+ </div>
+ <footer>
+  Copyright Great Idea! 2018
+ </footer>
+</div>
 </body>
 
-</html>
\ No newline at end of file
+</html>

From fef52c0c5eeb59d72ce776027d83611d5cc95baa Mon Sep 17 00:00:00 2001
From: Jose <jgonzalezmn@gmail.com>
Date: Wed, 27 Mar 2019 19:06:15 -0400
Subject: [PATCH 2/4] Draft 2

---
 great-idea/css/index.css | 42 +++++++++++++++++++++------
 great-idea/services.html | 63 +++++++++++++++++++++++-----------------
 2 files changed, 69 insertions(+), 36 deletions(-)

diff --git a/great-idea/css/index.css b/great-idea/css/index.css
index ab19dfdd5..16b1affbd 100644
--- a/great-idea/css/index.css
+++ b/great-idea/css/index.css
@@ -189,17 +189,12 @@ footer p{
 .box1 .h2{
 
 }
-
-
-
-.content2{
-	border: 2px solid orange;
-  display: flex;
-
-}
-
+/*
 .box1{
 	border: 2px solid blue;
+	display: flex;
+	
+  
 }
 
 .box2{
@@ -218,3 +213,32 @@ footer {
 	display: flex;
   justify-content: center;
 }
+*/
+.services{
+	border-color: black;
+	border-style: solid;
+	border-width: 1px 0 1px;
+	padding: 40px 0 40px;
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+	flex-flow: row wrap;
+	
+}
+
+.services section{ 
+
+	width: 418px;
+	border: solid 1px green;
+	padding: 20px;
+	margin-bottom: 40px;
+	
+}
+
+.container2{
+	width:876px;
+	margin: 0 auto;
+}
+
+
+
diff --git a/great-idea/services.html b/great-idea/services.html
index 3f797894d..45dbd396d 100644
--- a/great-idea/services.html
+++ b/great-idea/services.html
@@ -15,6 +15,7 @@
 </head>
 
 <body>
+  
  <div class="container2">
   <header>
    <div class="nav">
@@ -30,56 +31,64 @@
   </div>
 
   <img class="services-header-img" src="img/services-header.jpg" alt="Our services header image">
-
+  <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>.
 </header>
 
 
 <main>
-  <section class="content2">
-    <section>
-        <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>
-    <section class="box1">
-        <h2>Digital Design</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>
-        <a href="#">Learn More</a>
-    
-    
-        <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>
-        <a href="#">Learn More</a>
-    </section>
-    <section class="box2">
-       <h2>Digital Marketing</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>
-       <a href="#">Learn More</a>
+  <section class="services">
     
     
+      <section>
+      <h2>Digital Design</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>
+      <a href="#">Learn More</a>
+      </section>
+
+
+      <section>
+      <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>
+      <a href="#">Learn More</a>
+      </section>
+
+      <section>
+      <h2>Digital Marketing</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>
+      <a href="#">Learn More</a>
+      </section>
+
+      <section>
       <h2>Web 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>
       <a href="#">Learn More</a>
-    </section>
-    <section class="box3">
+      </section>
+
+      <section>
       <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>
       <a href="#">Learn More</a>
+      </section>
 
-    
+
+      <section>
       <h2>Android 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>
       <a href="#">Learn More</a>
+      </section>
+
     </section>
 
 
 
-    
+
     <section class="box4">
       <h3> Some Facts About Our Services</h3>
       <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

From a25063766fc32e127ad2e56aea2fd93cfdd993ba Mon Sep 17 00:00:00 2001
From: Jose <jgonzalezmn@gmail.com>
Date: Thu, 28 Mar 2019 16:35:46 -0400
Subject: [PATCH 3/4] Fixed navigation

---
 great-idea/css/index.css | 38 +++++++-------------------------------
 great-idea/services.html | 10 ++++++++--
 2 files changed, 15 insertions(+), 33 deletions(-)

diff --git a/great-idea/css/index.css b/great-idea/css/index.css
index 16b1affbd..1ff549967 100644
--- a/great-idea/css/index.css
+++ b/great-idea/css/index.css
@@ -164,9 +164,7 @@ footer p{
 }
 
 /* services */
-/*.navigationservices{
-	display: flex;
-	justify-content: space-between; */
+
 
  .nav{
 	display: flex;
@@ -183,37 +181,16 @@ footer p{
 }
 
 .container2 header{
- height: 340px;
-}
+	height: 340px;    /*will need this for pushing everything down */
+ }
 
-.box1 .h2{
-
-}
-/*
-.box1{
-	border: 2px solid blue;
-	display: flex;
+.topservices{
+	
+	margin-top: 30px;
 	
-  
-}
-
-.box2{
-	border: 2px solid salmon;
-}
-
-.box3{
-	border: 2px solid pink;
 }
 
-.box4{
-	border: 2px solid rebeccapurple;
-}
 
-footer {
-	display: flex;
-  justify-content: center;
-}
-*/
 .services{
 	border-color: black;
 	border-style: solid;
@@ -223,7 +200,6 @@ footer {
 	justify-content: space-between;
 	align-items: flex-start;
 	flex-flow: row wrap;
-	
 }
 
 .services section{ 
@@ -232,7 +208,7 @@ footer {
 	border: solid 1px green;
 	padding: 20px;
 	margin-bottom: 40px;
-	
+
 }
 
 .container2{
diff --git a/great-idea/services.html b/great-idea/services.html
index 45dbd396d..279660714 100644
--- a/great-idea/services.html
+++ b/great-idea/services.html
@@ -31,8 +31,14 @@
   </div>
 
   <img class="services-header-img" src="img/services-header.jpg" alt="Our services header image">
-  <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>.
+  
+  <div class= "topservices">
+    <h1>Services</h1>
+    <p>Our services provide the best digital value in nulla suscip
+      it interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit ame
+      t, 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>
 
 

From c75cbf3cc87fdaa9ebcef0b05bf9e4b3277903f6 Mon Sep 17 00:00:00 2001
From: Jose <jgonzalezmn@gmail.com>
Date: Thu, 28 Mar 2019 19:30:46 -0400
Subject: [PATCH 4/4] mvp ready

---
 great-idea/css/index.css    |  82 ++++++++++++-----
 great-idea/css/services.css | 171 ------------------------------------
 great-idea/index.html       |  23 ++---
 great-idea/services.html    |  29 +++---
 4 files changed, 93 insertions(+), 212 deletions(-)
 delete mode 100644 great-idea/css/services.css

diff --git a/great-idea/css/index.css b/great-idea/css/index.css
index 1ff549967..e8b1fa992 100644
--- a/great-idea/css/index.css
+++ b/great-idea/css/index.css
@@ -70,16 +70,12 @@ h1, h2, h3, h4, h5 {
 	width:  876px;
 }
 
-header {
-	height: 565px;
-}
 
 .navigation a{
 	border-radius: 2px;
 	color: grey;
 	font-size: 15px;
 	padding: 5px 8px;
-	margin-right: 25px;
 	text-decoration: none;
 }
 
@@ -88,9 +84,16 @@ header {
 	color: white;
 }
 
+.navigation{
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
 .navigation img {
+	
 	display: inline-block;
-	margin-left: 105px;
+	margin-left: 170px;
 	padding:11px;
 	vertical-align: middle;
 }
@@ -102,7 +105,7 @@ header {
 	margin-bottom: 50px;
 	text-align:center;
 	vertical-align:top;
-	display: inline-block
+	display: inline-block;
 }
 
 .main-header section h2 {
@@ -127,10 +130,11 @@ header {
 }
 
 main {
-	border-bottom: 1px solid black;
+	
 	border-top: 1px solid black;
 	margin-bottom: 40px;
 	padding: 40px 0 40px;
+	border-bottom: 1px solid black;
 }
 
 main img {
@@ -169,7 +173,9 @@ footer p{
  .nav{
 	display: flex;
 	justify-content: space-between;
-	border: 1px solid red;
+	align-items:center;
+	font-size: 15px;
+	margin-top: 20px;
 }
 .navigationservices a{
 	border-radius: 4px;
@@ -180,21 +186,10 @@ footer p{
 	text-decoration: none;
 }
 
-.container2 header{
-	height: 340px;    /*will need this for pushing everything down */
- }
-
-.topservices{
-	
-	margin-top: 30px;
-	
-}
 
 
 .services{
-	border-color: black;
-	border-style: solid;
-	border-width: 1px 0 1px;
+	
 	padding: 40px 0 40px;
 	display: flex;
 	justify-content: space-between;
@@ -208,7 +203,12 @@ footer p{
 	border: solid 1px green;
 	padding: 20px;
 	margin-bottom: 40px;
+	background-color: lightgrey;
+
+}
 
+.services-header-img{
+	margin: 30px 0 30px;
 }
 
 .container2{
@@ -216,5 +216,47 @@ footer p{
 	margin: 0 auto;
 }
 
+.services-facts{
+	display:flex;
+	justify-content: space-between;
+  
+}
+
+.services-facts section{
+	padding-right: 20px;
+	
+}
+
+.services-facts section p{
+	margin-bottom: 20px;
+}
+
+ul {
+	list-style-type: square;
+	margin-left: 20px;
+	line-height: 1.5em;
+
+}
+
+footer{
+	margin: 50px 0 100px;
+	text-align: center;
+}
+
+.topservices{
+	margin-bottom: 40px;
+}
+
+.services section a{
+	 display: inline-block;
+	 border: solid 1px black;
+	 padding: 8px 35px;
+	 margin-top: 20px;
+	 border-radius: 5px;
+	 text-decoration: none;
+	 color:inherit;
+   
+}
+
 
 
diff --git a/great-idea/css/services.css b/great-idea/css/services.css
deleted file mode 100644
index d988a13e8..000000000
--- a/great-idea/css/services.css
+++ /dev/null
@@ -1,171 +0,0 @@
-/* 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;
-}
-
-
-.container {
-	margin: 26px auto;
-	width:  876px;
-}
-
-header {
-	height: 565px;
-}
-
-.navigation a{
-	color:green;
-	text-decoration: none;
-}
-
-
-/*
-.navigation a{
-	border-radius: 2px;
-	color: green;
-	font-size: 15px;
-	padding: 5px 8px;
-	margin-right: 25px;
-	text-decoration: none;
-}
-
-.navigation a:hover {
-	background-color: green;
-	color: white;
-}
-
-.navigation img {
-	display: inline-block;
-	margin-left: 105px;
-	padding:11px;
-	vertical-align: middle;
-}
-
-.main-header section {
-	width: 490px;
-	height: 372px;
-	margin-top: 120px;
-	margin-bottom: 50px;
-	text-align:center;
-	vertical-align:top;
-	display: inline-block
-}
-
-.main-header section h2 {
-	font-size: 80px;
-}
-
-.main-header section button{
-	border: 1px solid green;
-	border-radius: 5px;
-	color: black;
-	padding: 5px 40px;
-	text-decoration: none;
-	}
-
-.main-header section button:hover {
-	background-color: green;
-	color: white;
-}
-
-.main-header img {
-	margin-top: 70px;
-}
-
-main {
-	border-bottom: 1px solid black;
-	border-top: 1px solid black;
-	margin-bottom: 40px;
-	padding: 40px 0 40px;
-}
-
-main img {
-	margin: 50px 0 50px
-}
-
-
-.content {
-	display: flex;
-	justify-content: space-between;
-	align-content: center;
-	width: 870px;
-}
-
-.content:first-child section {
-	width: 430px;
-}
-
-.content section:first-child {
-	margin: 0;
-}
-
-.content section p {
-	line-height: 1.25em;
-}
-
-footer p{
-	font-size: 13px;
-	margin: 55px 0 120px;
-	text-align: center;
-}
-*/
diff --git a/great-idea/index.html b/great-idea/index.html
index 982c6b8ad..0ddaf3934 100644
--- a/great-idea/index.html
+++ b/great-idea/index.html
@@ -35,7 +35,7 @@
        <header>
            <a href="services.html">
               <nav class="navigation">
-                <a href="#">Services</a>
+                <a href="services.html">Services</a>
                 <a href="#">Product</a>
                 <a href="#">Vision</a>
                 <a href="#">Features</a>
@@ -58,7 +58,7 @@ <h2>Demand</h2>
 
                <img src="img/header-img.png" alt="Image of a code snippet.">
              </section>
-       <header/>
+       <header>
     <main>
           <section class="content">
               <section>
@@ -86,16 +86,17 @@ <h2>Vision</h2>
             </section>
           </section>
     </main>
+    <section>
+        <h4>Contact</h4>
+        <address>
+          123 Way 456 Street <br>
+          Somewhere, USA <br> <br>
+          1 (888) 888-8888 <br><br>
+          sales@greatidea.io
+        </address>
+      </section>
+       
         <footer>
-          <section>
-            <h4>Contact</h4>
-            <address>
-              123 Way 456 Street <br>
-              Somewhere, USA <br> <br>
-              1 (888) 888-8888 <br><br>
-              sales@greatidea.io
-            </address>
-          </section>
           <p>Copyright Great Idea! 2018</p>
         </footer>
       </div>
diff --git a/great-idea/services.html b/great-idea/services.html
index 279660714..ef9ad1f3b 100644
--- a/great-idea/services.html
+++ b/great-idea/services.html
@@ -16,7 +16,7 @@
 
 <body>
   
- <div class="container2">
+ <div class="container">
   <header>
    <div class="nav">
        <nav class="navigationservices">
@@ -37,8 +37,8 @@ <h1>Services</h1>
     <p>Our services provide the best digital value in nulla suscip
       it interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit ame
       t, 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>
+      et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque eleifend. Mauris euismod facilisis iaculis</p>
+  </div>
 </header>
 
 
@@ -95,8 +95,16 @@ <h2>Android Development</h2>
 
 
 
-    <section class="box4">
-      <h3> Some Facts About Our Services</h3>
+
+   
+</main>
+ 
+  
+
+   <section class="services-facts">
+     
+      <section>
+        <h3> Some Facts About Our Services</h3>
       <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>
@@ -105,11 +113,12 @@ <h3> Some Facts About Our Services</h3>
         <li>Cool thing</li>
         <li>Great thing</li>
      </ul>
-   </section>
-</main>
- <div>
-   <img class="services-info-img" src="img/services-info.png" alt="one of our employees hard at work">
- </div>
+    
+    </section>
+    <img class="services-info-img" src="img/services-info.png" alt="one of our employees hard at work">
+  </section>
+
+
  <footer>
   Copyright Great Idea! 2018
  </footer>