VitaliyM3 · VitaliyM3 · Sep 13, 2019
diff --git a/README.md b/README.md
@@ -37,4 +37,6 @@ Stretch goals are not required. Complete the project objectives before working o
 
 - [ ] Change all the image tags into background images instead
 
-- [ ] Research CSS animations and see how you could implement some ideas when hovering over buttons or navigation items
+- [ ] Research CSS animations and see how you could implement some ideas when hovering over buttons or navigation items
+
+Vitaliy Mikhaylyuk
diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css
@@ -63,4 +63,119 @@ h1, h2, h3, h4, h5 {
     margin-bottom: 15px;
 }
 
-/* Your code starts here! */
+/* Your code starts here! */
+
+
+
+.navigation {
+	text-align: center;
+}
+
+nav {
+	display: inline-block;
+	margin: 10px;
+	padding: 10px; 
+}
+
+nav a {
+	margin:10px;
+	text-decoration: none;
+	color:gray;
+	padding: 0px 20px;
+}
+
+.top-container{
+	padding-top: 20px;
+	padding-bottom: 35px;
+	width: 950px;
+	text-align: center;
+	margin: auto;
+}
+
+h1 {
+	font-size: 70px;
+	margin-left: 25px;
+	width: 380px;
+}
+
+.top-container .lineup .get-started-button a {
+	text-decoration: none;
+	color: black;
+}
+
+.get-started-button {
+	border:1px solid black;
+	margin: auto;
+	width: 150px;
+	height: 25px;
+	padding: 10px 10px;
+	padding-bottom: 27px;
+	text-align: center;
+	vertical-align: middle;
+}
+
+hr {
+	width: 865px;
+}
+
+.lineup {
+	margin: auto;
+	padding: 10px 10px;
+	text-align: center;
+	width: 380px;
+}
+
+.top-container .lineup {
+	display: inline-block;
+	width: 48%;
+	vertical-align: middle;
+}
+
+.middle-upper {
+	margin: 1%;
+	width: 100%;
+	text-align: center;
+	padding-top: 20px;
+
+}
+
+.middle-upper .content_1 {
+	display: inline-block;
+	margin: 1%;
+	width: 430px;
+	text-align: left;
+}
+
+.middle-img {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+	padding-top: 20px;
+	padding-bottom: 20px;
+}
+
+.middle-lower {
+	margin: 1%;
+	width: 100%;
+	text-align: center;
+	padding-bottom: 20px;
+}
+
+.middle-lower .content_2 {
+	display: inline-block;
+	margin: 1%;
+	width: 280px;
+	text-align: left;
+}
+
+.lowerpart {
+	width: 865px;
+	margin: auto;
+	padding-top: 40px;
+}
+
+.copyright {
+	padding-top: 75px;
+	text-align: center;
+	padding-bottom: 90px;
+}
diff --git a/great-idea-website/img/Thumbs.db b/great-idea-website/img/Thumbs.db
diff --git a/great-idea-website/index.html b/great-idea-website/index.html
@@ -15,49 +15,77 @@
 </head>
 
   <body>
-
-  Services
-  Product
-  Vision
-  Features
-  About
-  Contact
-
-  <img class="logo" src="img/logo.png" alt="Great Idea! Company logo.">
-  Innovation
-  On
-  Demand
-
-  Get Started
-
-  <img src="img/header-img.png" alt="Image of a code snippet.">
-
-  Features
-  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.
-
-
-  About
-  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.
-
+    <div class="navigation">
+      <nav>
+        <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>
+
+    <div class="top-container">
+      <div class="lineup">
+        <h1>Innovation<br>On<br>Demand</h1>
+
+        <div class="get-started-button"><a href="#">Get Started</a></div>
+      </div>
+      <div class="lineup">
+        <img src="img/header-img.png" alt="Image of a code snippet.">
+      </div>  
+    </div>
+
+  <hr>
+
+<div class="middle-upper"> 
+    <div class="content_1">
+      <h3>Features</h3>
+      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.
+    </div>
+
+    <div class="content_1">
+      <h3>About</h3>
+      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.
+    </div>
+</div>
+
+<div class="middle-pic">
   <img class="middle-img" src="img/mid-page-accent.jpg" alt="Image of code snippets across the screen">
-
-  Services
-  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.
-
-
-  Product
+</div>  
+
+<div class="middle-lower">
+  <div class="content_2">
+    <h3>Services</h3>
+    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.
+  </div>
+
+  <div class="content_2">
+    <h3>Product</h3>
+    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.
+  </div>
+  <div class="content_2">
+    <h3>Vision</h3>
   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.
-
-  Vision
-  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.
-
-  Contact
-  123 Way 456 Street
-  Somewhere, USA
-  1 (888) 888-8888
-  sales@greatidea.io
-
-  Copyright Great Idea! 2018
-
+  </div>
+</div>
+
+<hr>
+
+<div class="lowerpart">
+    <h3>Contact</h3>
+      <p class="address">
+        123 Way 456 Street<br>
+        Somewhere, USA<br><br>
+        1 (888) 888-8888<br><br>
+        sales@greatidea.io
+      </p>
+      <p class="copyright">
+        Copyright Great Idea! 2018
+      </p>
+</div>
   </body>
 </html>