final

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 9921
+}

README.md

@@ -33,3 +33,4 @@ Once you have finished the home page using flex box module, go build the service
 
 * [ ] Create another page based on one of the navigation items in addition to services.  Try to create a layout that follows the patterns of the first two designs but with your own creative twist.  Use lorem ipsum text for all your content.
 * [ ] Introduce media queries into your services page to create a mobile view that stacks all the boxes on top of each other on phone but looks like the layout file on desktop.
+Colin-Tft

great-idea/css/index.css

@@ -32,7 +32,7 @@ body {
 	line-height: 1;
 }
 ol, ul {
-	list-style: none;
+	list-style: ;
 }
 blockquote, q {
 	quotes: none;
@@ -63,4 +63,134 @@ h1, h2, h3, h4, h5 {
     margin-bottom: 15px;
 }
 
-/* Copy and paste your work from yesterday here and start to refactor into flexbox */
+/* Copy and paste your work from yesterday here and start to refactor into flexbox */
+.container {
+	margin: 0 auto;
+	width: 1000px;
+}
+#navbar {
+width: 100%;
+}
+.navigation a {
+	padding-left: 20px;
+	text-decoration: none;
+}
+.navigation {
+	display: inline-block;
+	vertical-align: middle;
+	margin-left: 15%;
+	margin-right:15%
+}
+
+ #nav-bar {
+	border: 3px solid black;
+	vertical-align: middle;
+	background-color: blue;
+	position: fixed;                 /* watch nav bar spacing for lightbulb */
+	top: 0;
+	right:0;
+	left:0;
+	bottom:0;
+	height: 45px;
+	margin: 0 auto;
+}
+
+
+
+
+
+
+ #innovation-demand {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: flex-start;
+	align-items: flex-start;
+	align-content: stretch;
+	margin-top: 75px;
+	margin-bottom: 20px;
+	width: 100%
+}
+#innovatetext {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	justify-content: flex-start;
+	align-items: flex-end;
+	align-content: stretch;
+	width: 55%;
+	margin-bottom: 25px;
+	margin-top: 20px;
+}
+
+ #title {
+	text-align: center;
+	font-size: 70px;
+}
+
+ #start-button{
+	border-radius: 55px;
+	height: 35px;
+
+
+}
+
+
+#innovate-imgage{
+	display: flex;
+	flex-direction: row-reverse;
+	flex-wrap: wrap;
+	justify-content: space-around;
+	align-items: flex-start;
+	align-content: space-around;
+	margin-top: 0px;
+	margin-bottom: 25px;
+}
+
+#start-button:hover {
+	color: black;
+	background-color: white;
+}
+
+
+ .upper-section{
+	width: 100%;
+	vertical-align: middle;
+	text-align: left;
+	display: flex;
+	align-content: center;
+	flex-wrap: nowrap;
+}
+#features, #about {
+	margin-bottom: 25px;
+	margin-top: 20px;
+
+}
+
+ .wide-img {
+	text-align: center;
+	width: 100%;
+}
+
+
+ .lower-section{
+	width: 100%;
+	vertical-align: middle;
+	text-align: left;
+	display: flex;
+	align-content: center;
+	flex-wrap: nowrap;
+
+}
+#services, #product, #vison{
+	width: 32%;
+	margin-bottom: 25px;
+	margin-top: 20px;
+}
+
+
+ #legal {
+	text-align: center;
+	margin-top: 30px;
+	margin-bottom: 75px;
+} 

great-idea/css/services.css

@@ -0,0 +1,62 @@
+.container {
+	margin: 0 auto;
+	width: 1000px;
+}
+#navbar {
+width: 100%;
+}
+.navigation{
+    display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	justify-content: flex-start;
+	align-items: baseline;
+	align-content: stretch;
+	margin-left: 15%;
+    margin-right:15%
+}
+
+
+.navigation a {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-content: stretch;
+	padding-left: 20px;
+    text-decoration: none;
+    width: 650px;
+    margin-top: 25px;
+    margin-right: 25px;
+
+}
+.top-picture {
+
+    display: flex;
+	flex-direction: column;
+	flex-wrap: nowrap;
+	justify-content: center;
+	align-items: stretch;
+    align-content: stretch;
+
+}
+.main-section{
+
+    display: flex;
+	flex-direction: column;
+	flex-wrap: wrap;
+	justify-content: space-around;
+	align-items: center;
+    align-content: stretch;
+    margin-top: 0px;
+	margin-bottom: 25px;
+}
+
+.left-section {
+
+    display: flex;
+	flex-direction: column;
+	flex-wrap: wrap;
+	justify-content: flex-start;
+	align-items: flex-start;
+	align-content: stretch;
+}

great-idea/index.html

@@ -1,23 +1,105 @@
 <!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">
+  <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>
 
-  <body>
+<body>
+
+  <header id="nav-bar">
+    <nav class="navigation">
+      <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>
+
+   <img class="logo" src="img/logo.png" alt="Great Idea! Company logo.">
+
+  </header>
+
+  <section id="innovation-demand">
+    <div id="innovatetext">
+      <h1 id="title">Innovation <br>
+        On<br>
+        Demand
+      </h1>
+      <button id="start-button"> Get Started</button>
+    </div>
+    <div id="innovate-imgage">
+      <img src="img/header-img.png" alt="Image of a code snippet.">
+    </div>
+  </section>
+
+  <hr>
+  <section class="upper-section">
+    <div id="features">
+      <h3 class="subsection1"> Features</h3>
+      <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 id="about">
+      <h3 class="subsection1"> About</h3>
+      <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>
+  </section>
+
+  <img class="wide-img" src="img/mid-page-accent.jpg" alt="Image of code snippets across the screen">
+
+  <section class="lower-section">
+    <div id="services">
+      <h3 class="sub-section2">Services</h3>
+      <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 id="product">
+      <h3 class="sub-section2">Product</h3>
+      <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 id="vison">
+      <h3 class="sub-section2">Vision</h3>
+      <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>
+  </section>
+
+  <hr>
+  <section class="contact-us">
+    <h3 class="contact">Contact</h3>
+    <p>Address: 123 Way 456 Street</p>
+    <p>Somewhere, USA</p>
+    <br>
+    <p>Phone: 1 (888) 888-8888</p>
+    <br>
+    <p>Email: sales@greatidea.io</p>
+  </section>
+
+  <div id="legal">
+    Copyright Great Idea! 2018
+  </div>
+
+</body>
 
-    <!-- Copy and paste your HTML from the first UI project here -->
-
-
-  </body>
 </html>