cyberTwitty · cyberTwitty · May 28, 2019 · May 29, 2019 · May 30, 2019
diff --git a/README.md b/README.md
@@ -1,5 +1,6 @@
 # User Interface Project: Great Idea Web Page
 
+Tracie Twite
 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.
 
 Given this [design file](design-files/desktop.jpg), use HTML and CSS to build the web page layout. Remember, you can only use `display:inline-block` and box model CSS properties for this project. **Note: you are NOT permitted to use Flexbox or CSS Grid. This is an exercise in basic layout techniques.**

diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css
@@ -63,4 +63,49 @@ h1, h2, h3, h4, h5 {
     margin-bottom: 15px;
 }
 
-/* Your code starts here! */
+/* Your code starts here! */
+.navigation-top {
+	width: 100%;
+	height: 55px;
+	display: inline-block;
+	background-color: lightcyan;
+	position: sticky;
+	top: 0;
+	text-align: left;
+}
+.logo {
+	display: inline-block;
+}
+
+.mantra {
+	display: inline-block;
+	font-family: 'Bangers', cursive;
+	font-size: 80px;
+	word-break: break-all;
+}
+.circle-code {
+	display: inline-block;
+}
+.upper {
+	column-count: 2;
+	column-gap: 40px;
+	column-span: all;
+}
+.lower {
+	column-count: 3;
+	column-gap 10px;
+	column-span: all;
+}
+.middle-image {
+	position: absolute;
+	top: 20px;
+	bottom: 
+}
+a {
+	padding: 20px 30px;
+	margin: 30px 10px;
+	height: 150px;
+}
+hr {
+	border: 1px solid black;
+}
diff --git a/great-idea-website/index.html b/great-idea-website/index.html
@@ -15,49 +15,75 @@
 </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.
-
-  <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
-  [email protected]
-
-  Copyright Great Idea! 2018
+      <nav class="navigation-top" text-decoration="none">
+        <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>
+        <div>
+          <img class="logo" src="img/logo.png" alt="Great Idea! Company logo." align="right">
+        </div>  
+      </nav>
+    <div>
+      <header>
+        <h1>Innovation<br>On<br> Demand</h1><br>
+        <button type="button">Get Started</button>
+        <img class="circle-code" src="img/header-img.png" alt="Image of a code snippet." align="right">
+      </header>
+    </div>
+    <section class="upper">
+      <div>
+        <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>  
+        <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>
+
+    <img class="middle-img" src="img/mid-page-accent.jpg" alt="Image of code snippets across the screen">
+
+    <section class="lower">
+      <div>    
+        <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>
+        <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>
+        <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>
+
+		<address>
+        <h2>Contact</h2>
+        <div>
+          123 Way 456 Street<br>
+          Somewhere, USA<br>
+          <span>1 (888) 888-8888</span><br>
+          [email protected]
+        </div>
+      </address>
+
+    <footer>
+      <p>&copy; Copyright Great Idea 2018</p>
+    </footer>
 
   </body>
 </html>