From cffa8d7f11ba77e4b19a42311e6bd3b4b6452f7b Mon Sep 17 00:00:00 2001
From: zackhitch <zackhitch@users.noreply.github.com>
Date: Mon, 5 Feb 2018 14:23:50 -0800
Subject: [PATCH 1/3] modified index.html and index.css for challenge 1 lesson
 1

---
 project1/css/index.css | 92 ++++++++++++++++++++++++++++++++++++++++++
 project1/index.html    | 12 ++++--
 2 files changed, 100 insertions(+), 4 deletions(-)

diff --git a/project1/css/index.css b/project1/css/index.css
index fa13b5178..f4792e15a 100644
--- a/project1/css/index.css
+++ b/project1/css/index.css
@@ -62,3 +62,95 @@ h1, h2, h3, h4, h5 {
     letter-spacing: 1px;
     margin-bottom: 10px;
 }
+
+/* Start of code by Zack Hitchcock for Project 1 Challenge 1 */
+
+
+nav {
+	width: 900px;
+	height: 100px;
+}
+
+nav a{
+	color: lightgray;
+	text-decoration: none;
+	font-family: Helvetica, Arial, sans-serif;
+}
+
+nav a:hover {
+	color: gray;
+}
+
+ul {
+	padding: 40px;
+}
+
+li {
+	display: inline;
+	margin: 45px;
+}
+
+.logo {
+	/* border: 5px solid red; */
+	display: inline;
+	float: right;
+	margin-top: -70px;
+	margin-right: 50px;
+}
+
+.logo2 {
+	margin-top: -280px;
+}
+
+.cta-text {
+	/* border: 5px solid red; */
+	font-size: 75px;
+	/* display: inline; */
+	text-align: center;
+	margin-top: 70px;
+}
+
+.iod {
+	margin-right: 500px;
+}
+
+button {
+	cursor: pointer;
+	border: 1px solid black;
+	font-size: 20px;
+	padding: 5px 35px;
+	margin: 0 80px 25px 0;
+}
+
+hr { 
+    display: block;
+    margin: 100px 0 20px 0;
+    border-style: inset;
+    border-width: 1px;
+}
+
+
+.main-content {
+	/* clear: both; */
+}
+
+.top-content {
+	/* border: 1px solid red; */
+	width: 100%;
+	height: 200px;
+}
+
+.top-content .text-content {
+	width: 450px;
+	margin: 5px 5%;
+}
+
+.features {
+	/* border: 1px solid red; */
+	float: left;
+}
+
+.about {
+	/* border: 1px solid red; */
+	float: right;
+}
\ No newline at end of file
diff --git a/project1/index.html b/project1/index.html
index b951beaf6..6b2e7f384 100644
--- a/project1/index.html
+++ b/project1/index.html
@@ -47,20 +47,22 @@
 
         <section class="cta">
             <div class="cta-text">
-                <h1>Innovation<br> On<br> Demand</h1>
+                <h1 class="iod">Innovation<br> On<br> Demand</h1>
                 <button>Get Started</button>
+                <img class="logo logo2" src="img/header-img.png" alt="Image of a code snippet.">
             </div>
-            <img src="img/header-img.png" alt="Image of a code snippet.">
         </section>
 
+        <hr>
+
         <section class="main-content">
 
             <div class="top-content">
-                <div class="text-content">
+                <div class="text-content features">
                     <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 class="text-content">
+                <div class="text-content about">
                     <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>
@@ -85,6 +87,8 @@ <h4>Vision</h4>
 
         </section>
 
+        <hr>
+
         <section class="contact">
 
             <h4>Contact</h4>

From 38952a6fdd4e845440eacef071db23fc916eddf3 Mon Sep 17 00:00:00 2001
From: zackhitch <zackhitch@users.noreply.github.com>
Date: Mon, 5 Feb 2018 15:35:13 -0800
Subject: [PATCH 2/3] completed Project 1 Challenge 1 and stretch goals

---
 project1/css/index.css | 44 +++++++++++++++++++++++++++++++-----------
 project1/index.html    |  4 ++--
 2 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/project1/css/index.css b/project1/css/index.css
index f4792e15a..5d74dba42 100644
--- a/project1/css/index.css
+++ b/project1/css/index.css
@@ -122,16 +122,13 @@ button {
 	margin: 0 80px 25px 0;
 }
 
-hr { 
-    display: block;
-    margin: 100px 0 20px 0;
-    border-style: inset;
-    border-width: 1px;
-}
-
-
 .main-content {
-	/* clear: both; */
+	/* border: 1px solid red; */
+	border-top: 1px solid black;
+	border-bottom: 1px solid black;
+	margin: 50px auto;
+	padding: 25px 0;
+	width: 875px;
 }
 
 .top-content {
@@ -141,8 +138,8 @@ hr {
 }
 
 .top-content .text-content {
-	width: 450px;
-	margin: 5px 5%;
+	width: 350px;
+	margin-top: 5px;
 }
 
 .features {
@@ -153,4 +150,29 @@ hr {
 .about {
 	/* border: 1px solid red; */
 	float: right;
+}
+
+.main-content .middle-img {
+	margin-top: -55px;
+}
+
+.bottom-content div {
+	width: 33%;
+	display: inline-block;
+	margin-top: 40px;
+}
+
+.contact {
+	width: 875px;
+	margin: 0 auto;
+	margin-bottom: 50px;
+}
+
+.contact p {
+	padding: 10px 0;
+}
+
+footer {
+	margin-bottom: 150px;
+	text-align: center;
 }
\ No newline at end of file
diff --git a/project1/index.html b/project1/index.html
index 6b2e7f384..447668309 100644
--- a/project1/index.html
+++ b/project1/index.html
@@ -53,7 +53,7 @@ <h1 class="iod">Innovation<br> On<br> Demand</h1>
             </div>
         </section>
 
-        <hr>
+
 
         <section class="main-content">
 
@@ -87,7 +87,7 @@ <h4>Vision</h4>
 
         </section>
 
-        <hr>
+
 
         <section class="contact">
 

From 5a26f2a68a7ef51c07de765c1bfd5749017ebe7c Mon Sep 17 00:00:00 2001
From: zackhitch <zackhitch@users.noreply.github.com>
Date: Tue, 6 Feb 2018 14:18:08 -0800
Subject: [PATCH 3/3] Attempt at Challenge 2, converting inline-block to
 flexbox

---
 project1/css/index.css | 145 +++++++++++++++++++++--------------------
 project1/index.html    |  74 +++++++++++----------
 2 files changed, 115 insertions(+), 104 deletions(-)

diff --git a/project1/css/index.css b/project1/css/index.css
index 5d74dba42..9eb90c6af 100644
--- a/project1/css/index.css
+++ b/project1/css/index.css
@@ -63,116 +63,123 @@ h1, h2, h3, h4, h5 {
     margin-bottom: 10px;
 }
 
-/* Start of code by Zack Hitchcock for Project 1 Challenge 1 */
+/* Start of code by Zack Hitchcock for Project 1 Challenge 2 */
 
+.container {
 
-nav {
-	width: 900px;
-	height: 100px;
 }
 
-nav a{
-	color: lightgray;
-	text-decoration: none;
-	font-family: Helvetica, Arial, sans-serif;
-}
+/* navbar */
 
-nav a:hover {
-	color: gray;
+.headerClass {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100px;
 }
 
-ul {
-	padding: 40px;
+.container header {
+	width: 80%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
 }
 
-li {
-	display: inline;
-	margin: 45px;
-}
 
-.logo {
-	/* border: 5px solid red; */
-	display: inline;
-	float: right;
-	margin-top: -70px;
-	margin-right: 50px;
+
+.container header nav ul {
+	display: flex;
+	flex-direction: row;
+	width: 800px;
+	justify-content: space-between;
 }
 
-.logo2 {
-	margin-top: -280px;
+.container header nav ul li a {
+	color: gray;
+	text-decoration: none;
 }
 
-.cta-text {
-	/* border: 5px solid red; */
-	font-size: 75px;
-	/* display: inline; */
-	text-align: center;
-	margin-top: 70px;
+.container header nav ul li a:hover {
+	color: rgb(99, 96, 96);
+	text-decoration: none;
 }
 
-.iod {
-	margin-right: 500px;
+/* jumbotron */
+
+h1 {
+	font-size: 80px;
+	text-align: center;
 }
 
 button {
 	cursor: pointer;
 	border: 1px solid black;
 	font-size: 20px;
-	padding: 5px 35px;
-	margin: 0 80px 25px 0;
 }
 
-.main-content {
-	/* border: 1px solid red; */
-	border-top: 1px solid black;
-	border-bottom: 1px solid black;
-	margin: 50px auto;
-	padding: 25px 0;
-	width: 875px;
+.cta {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 500px;
 }
 
-.top-content {
-	/* border: 1px solid red; */
-	width: 100%;
-	height: 200px;
+.cta-text {
+	display: flex;
+	width: 80%;
+	flex-direction: row;
+	justify-content: space-around;
+	align-items: center;
 }
 
-.top-content .text-content {
-	width: 350px;
-	margin-top: 5px;
+.cta .cta-text .cta-col {
+	display: flex;
+	flex-direction: column;
 }
 
-.features {
-	/* border: 1px solid red; */
-	float: left;
-}
+/* main content */
 
-.about {
-	/* border: 1px solid red; */
-	float: right;
+.main-content {
+	display: flex;
+	flex-wrap: wrap;
+	border-top: 1px solid black;
+	border-bottom: 1px solid black;
+	justify-content: center;
+	align-items: center;
+	height: 450px;
 }
 
-.main-content .middle-img {
-	margin-top: -55px;
+.main-content .top-content {
+	display: flex;
+	width: 80%;
+	height: 100px;
+	justify-content: space-between;
 }
 
-.bottom-content div {
-	width: 33%;
-	display: inline-block;
-	margin-top: 40px;
+.main-content .bottom-content {
+	display: flex;
+	width: 80%;
 }
 
 .contact {
-	width: 875px;
-	margin: 0 auto;
-	margin-bottom: 50px;
+	height: 100px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 }
 
-.contact p {
-	padding: 10px 0;
+.contact .contactDiv {
+	display: flex;
+	width: 80%;
+}
+
+.contact .contactDiv .moreDiv {
+	width: 300px;
 }
 
 footer {
-	margin-bottom: 150px;
-	text-align: center;
+	height: 200px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 }
\ No newline at end of file
diff --git a/project1/index.html b/project1/index.html
index 447668309..0e1780443 100644
--- a/project1/index.html
+++ b/project1/index.html
@@ -18,37 +18,41 @@
 
     <div class="container">
 
-        <header>
-            <nav>
-                <ul>
-                    <li>
-                        <a href="#">Services</a>
-                    </li>
-                    <li>
-                        <a href="#">Product</a>
-                    </li>
-                    <li>
-                        <a href="#">Vision</a>
-                    </li>
-                    <li>
-                        <a href="#">Features</a>
-                    </li>
-                    <li>
-                        <a href="#">About</a>
-                    </li>
-                    <li>
-                        <a href="#">Contact</a>
-                    </li>
-                </ul>
-            </nav>
-
-            <img class="logo" src="img/logo.png" alt="Great Idea! Company logo.">
-        </header>
+        <div class='headerClass'>
+            <header>
+                <nav>
+                    <ul>
+                        <li>
+                            <a href="#">Services</a>
+                        </li>
+                        <li>
+                            <a href="#">Product</a>
+                        </li>
+                        <li>
+                            <a href="#">Vision</a>
+                        </li>
+                        <li>
+                            <a href="#">Features</a>
+                        </li>
+                        <li>
+                            <a href="#">About</a>
+                        </li>
+                        <li>
+                            <a href="#">Contact</a>
+                        </li>
+                    </ul>
+                </nav>
+
+                <img class="logo" src="img/logo.png" alt="Great Idea! Company logo.">
+            </header>
+        </div>
 
         <section class="cta">
             <div class="cta-text">
-                <h1 class="iod">Innovation<br> On<br> Demand</h1>
-                <button>Get Started</button>
+                <div class="cta-col">
+                    <h1 class="iod">Innovation<br> On<br> Demand</h1>
+                    <button>Get Started</button>
+                </div>
                 <img class="logo logo2" src="img/header-img.png" alt="Image of a code snippet.">
             </div>
         </section>
@@ -90,16 +94,16 @@ <h4>Vision</h4>
 
 
         <section class="contact">
+            <div class="contactDiv">
+                <h4>Contact</h4>
 
-            <h4>Contact</h4>
-
-            <p>123 Way 456 Street<br>
-            Somewhere, USA</p>
+                <p>123 Way 456 Street<br>
+                Somewhere, USA</p>
 
-            <p>1 (888) 888-8888</p>
-
-            <p>sales@greatidea.io</p>
+                <p>1 (888) 888-8888</p>
 
+                <p>sales@greatidea.io</p>
+            </div>
         </section>
 
         <footer>