aanderson9313 · aanderson9313 · Sep 7, 2019 · Sep 8, 2019 · Sep 8, 2019 · Sep 8, 2019
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# User Interface Project: Great Idea Web Page
+# User Interface Project: Great Idea Web Page  -AlexisAnderson
 
 Being able to create a user interface from scratch based on a design file is considered a basic necessity for front end developers. We will be building a single page website using HTML and CSS.
 
@@ -37,4 +37,4 @@ 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
diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css
@@ -63,4 +63,128 @@ h1, h2, h3, h4, h5 {
     margin-bottom: 15px;
 }
 
-/* Your code starts here! */
+/* Your code starts here! */
+
+.container {
+	width: 885px;
+	margin: 0 auto;
+	font-family: 'Livvic', sans-serif;
+
+}
+
+.block {
+	position: relative;
+	width: 100%;
+}
+
+header {
+	/* set the header to a fixed position */
+	position: fixed; 
+	top: 0;
+	z-index: 1;
+	background-color: #3CCEDA;
+	width: 46.4%;
+	opacity: .9;
+
+
+}
+/* navbar */
+#navbar {
+	display: inline-block;
+	text-align: center;
+	height: 40px;
+	padding: 10px 10px px 20px;
+}
+
+.nav-button {
+	font-size: 14px;
+	margin: 15px 16px;
+	padding: 0px 15px 0px 15px;
+	position: relative;
+	border: none;
+	outline: none;
+
+}
+
+.nav-button:hover {
+	opacity: .6;
+}
+
+.logo {
+	float: right;
+	padding: 5px 0px 0px px;
+}
+
+/* call to action */
+.cta {
+	position: relative;
+	margin-top: 30px;
+
+}
+
+.cta .cta_text {
+	display: inline-block;
+	vertical-align: top;
+	margin: 100px 0px;
+	padding: 0px 60px;
+	font-size: 50px;
+	text-align: center;
+	width: 55%;
+}
+
+.cta .cta_text button {
+	font-weight: 200;
+	background-color: white;
+	vertical-align: top;
+	margin-top: 2px;
+	padding: 10px 50px;
+	font-size: 20px;
+	border: 1px solid black;
+
+
+}
+
+.cta .cta_text button:hover {
+	background: black;
+	color: white;
+}
+
+.cta img {
+	/* display: inline-block */
+	position: absolute;
+	top: 50px;
+	right: 0px;	
+}
+
+/* paragraphs */
+.content {
+	position: relative;
+}
+
+.content .content-top{
+	display: inline-block;
+	width: 420px;
+	line-height: 15px;
+	margin: 1% 1% 2% 1%;
+	padding: 25px 0px;
+	line-height: 20px;
+}
+
+.content2 .content-bottom{
+	display: inline-block;
+	width: 276px;
+	margin: 1% 8px 2% 8px;
+	padding: 25px 0px;
+	line-height: 20px;
+}
+/* copyright and contact info */
+footer {
+	padding: 25px 0px 0px 0px;
+}
+
+#copyright {
+	text-align: center;
+}
+
+
+
diff --git a/great-idea-website/index.html b/great-idea-website/index.html
@@ -3,61 +3,90 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-
+ 
   <title>Great Idea!</title>
 
+  <link href="https://fonts.googleapis.com/css?family=Livvic&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Bangers|Titillium+Web" rel="stylesheet">
   <link rel="stylesheet" href="css/index.css">
 
   <!--[if lt IE 9]>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
   <![endif]-->
-</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.
 
+
+</head>
 
-  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.
+  <body class="container">
+    <header>
+
+        <nav id="navbar">
+
+        <button type="button" class="nav-button">Services</button>
+        <button type="button" class="nav-button">Product</button>
+        <button type="button" class="nav-button">Vision</button>
+        <button type="button" class="nav-button">Features</button>
+        <button type="button" class="nav-button">About</button>
+        <button type="button" class="nav-button">Contact</button>
+
+        </nav>        
+        <img class="logo" src="img/logo.png" alt="Great Idea! Company logo.">
+
+    </header>
+
+      <div class="cta">
+        <div class="block cta_text">
+          <h1>Innovation<br>On<br>Demand</h1>
+          <button type="cta_button">Get Started</button>
+        </div>   
+        <img src="img/header-img.png" alt="Image of a code snippet.">
+      </div>
+<br>
+  <hr>
+
+<section class="content">
+  <div class="block">
+    <div class="content-top">
+      <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="content-top">
+      <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>
+</section>
 
   <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
-  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
-
+
+<section class="content2">
+  <div class="block">
+    <div class="content-bottom">
+     <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="content-bottom">
+      <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="content-bottom">
+      <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>
+
+<hr>
+
+<footer>
+
+  <h3>Contact</h3>
+  <address>123 Way 456 Street<br>
+  Somewhere, USA<br><br>
+  <a href="tel:1-888-888-8888" class="phone">1 (888) 888-8888</a><br><br>
+  <a href="mailto:sales@greatidea.io" class="email">sales@greatidea.io</a></address><br><br>
+
+  <p id="copyright">Copyright Great Idea! 2018</p>
+</footer>
   </body>
 </html>