Completed

duraanali · May 28, 2019 · b67936d · b67936d
1 parent 27b1b92
commit b67936d
Show file tree

Hide file tree

Showing 2 changed files with 143 additions and 27 deletions.
diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css
@@ -63,4 +63,109 @@ h1, h2, h3, h4, h5 {
     margin-bottom: 15px;
 }
 
-/* Your code starts here! */
+/* Your code starts here! */
+
+body {
+	max-width: 1200px;
+	margin: 0 auto;
+}
+
+/* Header, Nav and Logo */
+
+header nav {
+	margin: 20px;
+	padding: 10px;
+
+}
+
+header nav a {
+	text-decoration: none;
+	padding-left: 60px;
+	color: #B2B2B2;
+	font-size: 20px;
+}
+
+.logo {
+	margin-left: 50px;
+}
+
+/* Banner Section */
+
+.banner {
+	margin: 60px;
+}
+
+.banner h1 {
+	display: inline-block;
+	font-size: 75px;
+	text-align: center;
+	margin-left: 30px;
+	padding-bottom: 10px;
+}
+
+.bannerimg {
+	display: inline-block;
+	padding-left: 180px;
+}
+
+.banner button {
+	background-color: white;
+	border: solid 2px black;
+	padding-left: 40px;
+	padding-right: 40px;
+	padding-top: 10px;
+	padding-bottom: 10px;
+}
+
+.banner button:hover {
+	background-color: lightblue;
+}
+
+hr {
+	margin-bottom: 30px;
+}
+
+/* First Section */
+
+.fistsection {
+	display: inline-block;
+}
+
+.features {
+		float: left;
+		width: 50%;
+		padding: 10px;
+}
+
+.middle-img {
+	margin-top: 40px;
+	margin-bottom: 40px;
+	width: 100%;
+}
+
+/* Second Section */
+
+.secondsection {
+	display: inline-block;
+	margin-bottom: 20px;
+}
+
+.services {
+	float: left;
+	width: 33%;
+	padding: 10px;
+}
+
+/* Contact Section */
+
+.contact {
+	margin-top: 40px;
+
+}
+
+/* Footer Section */
+
+footer {
+	text-align: center;
+	margin-top: 40px;
+}
diff --git a/great-idea-website/index.html b/great-idea-website/index.html
@@ -17,67 +17,78 @@
 <body>
 <header>
     <nav>
-      Services
-      Product
-      Vision
-      Features
-      About
-      Contact
-    </nav>
-    <logo>
+      <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 class="logo" src="img/logo.png" alt="Great Idea! Company logo.">
-    </logo>
+    </nav>
+
 </header>
 
 <div class="banner">
      <h1>
-          Innovation
-          On
-          Demand
-
-          Get Started
+          Innovation<br/>
+          On<br/>
+          Demand<br/>
+         <button>Get Started</button>
      </h1>
-     <div>
-        <img src="img/header-img.png" alt="Image of a code snippet.">
-     </div>
+      <img class="bannerimg" src="img/header-img.png" alt="Image of a code snippet.">
 </div>
 
-<section>
+<hr>
+
+<section class="fistsection">
+  <div class="features">
   <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="features">
   <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>
 </section>
 
 <div>
   <img class="middle-img" src="img/mid-page-accent.jpg" alt="Image of code snippets across the screen">
 </div>
 
-<section>
+<section class="secondsection">
+
+  <div class="services">
   <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="services">
   <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="services">
   <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>
 </section>
+
+<hr>
 
 <div class="contact">
-  Contact
-  123 Way 456 Street
-  Somewhere, USA
-  1 (888) 888-8888
-  [email protected]
+  <h2>Contact</h2>
+  <p>123 Way 456 Street<br />
+  Somewhere, USA</p>
+ <br />
+  <p>1 (888) 888-8888</p>
+  <br />
+  <p>[email protected]</p>
 </div> 
 
 <footer>