Andre wilson

great-idea/css/index.css

@@ -63,4 +63,242 @@ 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 */
+/* Here is where the header styling will go */
+
+header {
+	width: 80%;
+	padding: 40px 75px;
+	margin: 0 auto;
+}
+/* aligning the navigation and the image */
+header nav {
+	background: #ddf;
+	position: fixed;
+	display: flex;
+	flex-direction: row;
+
+	 width: 600px;
+    margin-top: 45px;
+}
+header nav a {
+
+	padding: 12px 25px;
+	text-decoration: none; 	
+	color: #333;
+}
+header nav a:hover {
+	background: #444;
+	color: #fff;
+}
+/*aliging the logo to the right */
+.logo {
+	display: flex;
+	justify-content: flex-end;
+	margin: 44px 0 85px 775px;
+}
+.alignLeft {
+	margin-left: 828px;
+}
+/* Resizing and positioning the header */
+header h1 {
+	display: flex;
+	flex-flow: row;
+	margin: 0 0 15px 185px;
+	text-align: center;
+	display: block;
+	width: 200px;
+	font-size: 75px;
+}
+  /* Adding a color border radius that act as a botton*/
+ .cta a {
+	 border: 1px solid #333;
+	 width: 195px;
+	 text-align: center;
+	 text-decoration: none;
+	 padding: 6px 42px;
+	 margin: 45px 0 0 202px;
+	 color:#000;
+ }
+
+/* Positioning the image to the rigth */
+
+header img {
+	display: flex;
+	justify-self: end;
+	margin: -285px 0 0 640px;
+}
+/* Creating top border using section semantic tags */
+section {
+	border-top: 3px solid #ccc;
+	width: 57%;
+	margin: 0 auto;
+	border-bottom: 3px solid #ccc;
+}
+/*Moving the class secondary-h2 */
+.secondary-h2 {
+	margin-top: 24px;
+}
+.col-1, .col-2, .col-3, .col-4, .col-5 {
+	justify-content: space-evenly;
+}
+/* creating the columns */
+.first-columns, .second-columns {
+	display: flex;
+}
+
+
+
+/* aligning the two columns horizontal with margin right from the first one and using inline-block */
+.col-1 {
+	margin-right: 45px;
+}
+/* applying inline-block to the second column */
+
+.col-1, col-2 {
+	margin-bottom: 45px;
+}
+/* Centering the image */
+.middle-img {
+	margin: 0 2px 65px 2px;
+}
+/* The last three columns will have the same style as well */
+.col-3, .col-4, .col-5 {
+	width: 250px;
+	display: inline-block;
+	line-height: 22px;
+	margin-bottom: 33px;
+}
+/* Adding spacing */
+.col-3, .col-4 {
+	margin-right: 60px;
+}
+/* Adding style to the footer */
+footer h3 {
+	margin: 25px 0 0 337px;
+}
+footer address {
+	display: block;
+	width: 200px;
+	margin: 15px 0 0 337px;
+}
+footer p {
+	padding: 18px 0;
+}
+.cpyrght {
+	margin: 33px 700px 145px 700px;
+}
+/* Styling the Service page */
+
+
+
+.nav-bar {
+	margin-left: 122px;
+}
+.align-Left {
+	margin-left: 828px;
+}
+ /* Making the go under the navigationv with flex */
+	.image-container {
+		display: flex;
+	   justify-content: center;;
+	}
+	/* Removing the margin */
+.services-header-img {
+	margin:-45px;
+}
+
+/* Aligning the services content with flex-controller */
+main {
+	width: 893px;
+	height: 133px;
+	overflow: hidden;
+	margin: 22px auto;
+}
+/* Aligning the h2 header */
+  main h2 {
+	font-size: 24px;
+	padding: 20px 0 -11px 0;
+}
+ /* Aligning the paragraph */
+   main p {
+	padding: 12px 2px;
+	line-height: 22px;
+	text-align: justify;
+}
+/* Top and bottom borders */
+.first-sctn {
+	border-top: 2px solid #000;
+	border-bottom: 2px solid #000;
+}
+/* Creating the content box */
+.flex-controller {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-around;
+	margin: 33px 0;
+	overflow: hidden;
+}
+.box-content {
+	width: 430px;
+	height: 252px;
+	margin: 10px 10px;
+	background: #f4f3f4;
+	border: 1px solid #000;
+}
+/* Adding padding to H2 elements */
+.box-content h2 {
+	padding: 15px 0 1px 18px;
+}
+/* Creating line-height and padding */
+.box-content p {
+	line-height: 22px;
+	padding: 13px;
+}
+/* Creating the button inside the boxes */
+
+.btns {
+	width: 145px;
+	height: 32px;
+	border: 1px solid #000;
+	border-radius: 5px;
+	text-align: center;
+	padding: 4px;
+	margin-left: 18px;
+	background: #fff;
+}
+/* Aligning content to the left*/
+.side-contents {
+	display: flex;
+	justify-content: center;
+}
+aside {
+	margin: 30px 49px;
+	width: 389px;
+}
+aside p {
+	margin-bottom: 20px;
+	line-height: 22px;
+}
+/* Recreating the ul */
+  ul {
+	list-style-type: square;
+	}
+	li {
+		padding: 6px 0;
+	}
+/* Aligning image to the right */
+
+.services-info-img {
+	justify-content: left;
+	height: 300px;
+	margin-top: 28px;
+}
+/* Aligning the copyright information in the footer section */
+footer {
+	display: flex;
+	justify-content: center;
+}
+.cpyrght-footer {
+	padding: 85px 0;
+}

great-idea/index.html

@@ -13,11 +13,80 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
   <![endif]-->
 </head>
+<body>
+<header>
+   <nav class="nav-bar">
+     <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 alignLeft" src="img/logo.png" alt="Great Idea! Company logo.">
+  <h1>
+      Innovation
+      On
+      Demand
 
-  <body>
+  </h1>
+
+  <div class="cta">
+    <a href="#">Get Started</a>
+  </div>
+
 
-    <!-- Copy and paste your HTML from the first UI project here -->
-
-
+
+  <img src="img/header-img.png" alt="Image of a code snippet.">
+</header>
+<section>
+    <div class="first-columns">
+  <div class="col-1">
+  <h2 class="secondary-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>
+
+<div class="col-2">
+ <h2 class="secondary-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>
+</div>
+  <img class="middle-img" src="img/mid-page-accent.jpg" alt="Image of code snippets across the screen">
+  <div class="second-columns">
+    <div class="col-3">
+  <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>
+<div class="col-4">
+<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>
+<div class="col-5">
+<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>
+  </div>
+</section>
+<footer>
+ <h3>Contact</h3> 
+  <address>
+      123 Way 456 Street
+      Somewhere, USA
+      <p>1 (888) 888-8888</p>
+      sales@greatidea.io
+  </address>
+
+
+  <div class="cpyrght">Copyright Great Idea! 2018</div>
+</footer>
+
   </body>
 </html>