initial commit

gant123 · Feb 5, 2018 · 4ce0e48 · 4ce0e48
commit 4ce0e48
Show file tree

Hide file tree

Showing 9 changed files with 201 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,27 @@
+# HTML / CSS - User Interface Project 
+
+We will be building a single page website throughout this week.  We will approach the layout in a few different ways so that we can learn the many challenges of building user interface.  The first challenge will be to build the interface using only the box model and display types of block and inline.  You can use floats and clears if you want as well!
+
+The second challenge will be to re-approach your first build with flexbox techniques.  Don't accomplish the second challenge until you have completely finished the page using box model and display types only!
+
+*Hint*
+The HTML is already in the project, you can use that as a guide for your CSS. If you want to stretch yourself, delete the HTML and start from scratch.
+
+### Useful Resources
+* [CSS Box Model](https://www.w3schools.com/css/css_boxmodel.asp)
+* [Flexbox Reference](https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties)
+
+### Challenge 1
+Objective: Code up as much of the web page as you can using the box model and any layout techniques you have learned.
+
+ * Try to make the site look like the included great-idea-example.jpg
+
+ * I have included a CSS reset and some base styles you will need to match the design. 
+
+### Challenge 2
+ * Objective: Incorporate flexbox where you were using box model before.
+
+#### To Get Started
+* Fork / Clone this project into a directory on your machine.
+* `cd` into your forked local copy.
+* Start coding!
diff --git a/great-idea-examples.jpg b/great-idea-examples.jpg
diff --git a/project1/.DS_Store b/project1/.DS_Store
diff --git a/project1/css/index.css b/project1/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: 10px;
+}
diff --git a/project1/img/header-img.png b/project1/img/header-img.png
diff --git a/project1/img/logo.png b/project1/img/logo.png
diff --git a/project1/img/mid-page-accent.jpg b/project1/img/mid-page-accent.jpg
diff --git a/project1/index.html b/project1/index.html
@@ -0,0 +1,110 @@
+<!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>
+                <ul>
+                    <li>
+                        <a href="#">Services</a>
+                    </li>
+                    <li>
+                        <a href="#">Product</a>
+                    </li>
+                    <li>
+                        <a href="#">Vision</a>
+                    </li>
+                    <li>
+                        <a href="#">Features</a>
+                    </li>
+                    <li>
+                        <a href="#">About</a>
+                    </li>
+                    <li>
+                        <a href="#">Contact</a>
+                    </li>
+                </ul>
+            </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>
+
+        <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>
+
+        <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>
+
+        <footer>
+            <p>Copyright Great Idea! 2018</p>
+        </footer>
+
+    </div><!-- container -->
+
+
+  <script src="js/index.js"></script>
+</body>
+</html>
diff --git a/project1/js/index.js b/project1/js/index.js