Initial upload of project 2 for UI

Dmwanik · May 6, 2018 · bac4d9e · bac4d9e
1 parent f151a47
commit bac4d9e
Show file tree

Hide file tree

Showing 12 changed files with 172 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/README.md b/README.md
@@ -1 +1,23 @@
-# UI-II-Flexbox
+# User Interface Project II: Great Idea Web Page With Flexbox
+
+Now that you have experienced building a layout using ```inline-block```.  Lets revisit the same HTML structure and refactor our first page with flexbox.  If you didn't finish yesterday's assignment, just start from scratch.
+
+Once you have finished the home page using flexbox, go build the services page based on the [design file](design-files/services-desktop-design.png) provided to you.  This time you will need to structure your own HTML in addition to using flexbox.  You have been provided all the necessary images in the img folder.   
+
+
+***Useful Resource: [CSS Tricks Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)***
+
+***Objectives:*** 
+- Refactor the home page with flexbox where inline was used before
+- Link the services navigation item out to the ```services.html``` page
+- Make the Great Idea logo clickable and point it back to the ```index.html``` page
+- Using the provided [design file](design-files/services-desktop-design.png), create the services page layout using flexbox and all your box model skills you have been practicing with!
+- Try to make your styles match the design as closely as you can
+
+***Stretch Goal:*** 
+- Create another page based on one of the navigation items in addition to services.  Try to create a layout that follows the patterns of the first two designs but with your own creative twist.  Use lorem ipsum text for all your content.
+
+#### To Get Started
+* Fork / Clone this project into a directory on your machine.
+* Pull up the code into your preffered text editor.
+* Start coding!
diff --git a/design-files/desktop.jpg b/design-files/desktop.jpg
diff --git a/design-files/services-desktop-design.png b/design-files/services-desktop-design.png
diff --git a/great-idea/css/index.css b/great-idea/css/index.css
@@ -0,0 +1,64 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+/* Set every element's box-sizing to border-box */
+* {
+    box-sizing: border-box;
+}
+
+html, body {
+    height: 100%;
+    font-family: 'Titillium Web', sans-serif;
+}
+
+h1, h2, h3, h4, h5 {
+    font-family: 'Bangers', cursive;
+    letter-spacing: 1px;
+    margin-bottom: 15px;
+}
diff --git a/great-idea/img/header-img.png b/great-idea/img/header-img.png
diff --git a/great-idea/img/logo.png b/great-idea/img/logo.png
diff --git a/great-idea/img/mid-page-accent.jpg b/great-idea/img/mid-page-accent.jpg
diff --git a/great-idea/img/services-header.jpg b/great-idea/img/services-header.jpg
diff --git a/great-idea/img/services-info.png b/great-idea/img/services-info.png
diff --git a/great-idea/index.html b/great-idea/index.html
@@ -0,0 +1,84 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+
+  <title>Great Idea!</title>
+
+  <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>
+
+    <div class="container">
+
+      <header>
+        <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.">
+      </header>
+
+      <section class="cta">
+        <div class="cta-text">
+          <h1>Innovation<br> On<br> Demand</h1>
+          <button>Get Started</button>
+        </div>
+        <img src="img/header-img.png" alt="Image of a code snippet.">
+      </section><!-- cta -->
+
+      <section class="main-content">
+        <div class="top-content">
+          <div class="text-content">
+            <h4>Features</h4>
+            <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="text-content">
+            <h4>About</h4>
+            <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="bottom-content">
+          <div class="text-content">
+            <h4>Services</h4>
+            <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="text-content">
+            <h4>Product</h4>
+            <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="text-content">
+            <h4>Vision</h4>
+            <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><!-- main-content -->
+
+      <section class="contact">
+        <h4>Contact</h4>
+        <p>123 Way 456 Street<br>
+        Somewhere, USA</p>
+        <p>1 (888) 888-8888</p>
+        <p>[email protected]</p>
+      </section><!-- contact -->
+
+      <footer>
+        <p>Copyright Great Idea! 2018</p>
+      </footer>
+
+    </div><!-- container -->
+
+  </body>
+</html>
diff --git a/great-idea/services.html b/great-idea/services.html