Project Week 1 - Turn In (Final) - Molly Kent, Mark Buchthal, Alina To, Brian Finck

.gitignore

@@ -24,3 +24,10 @@ Icon
 Network Trash Folder
 Temporary Items
 .apdisk
+
+#Node Modules
+node_modules/
+
+public/css/**/*.css
+
+playground.html

Gulpfile.js

@@ -0,0 +1,14 @@
+
+var gulp = require("gulp");
+
+var sass = require("gulp-sass");
+
+gulp.task("sass", function() {
+    gulp.src("public/sass/**/*.scss")
+        .pipe(sass().on("error", sass.logError))
+        .pipe(gulp.dest("./public/css/"));
+});
+
+gulp.task("watch", ["sass"], function() {
+  gulp.watch("public/sass/**/*.scss", ["sass"]);
+});

README.md

@@ -1,26 +1,13 @@
-# Welcome to Project Week: One
+# Code Fellows Front-End DA - Project Week: One
+## Mark Buchthal, Brian Fink, Molly Kent, & Alina To
 
-You are completing your first month in the Code Fellows Front-End Development Accelerator. Now it's time to exercise all the new things you have learned. 
+### Description
 
-### Here is the scenario: 
-
-You are a 4 person team and the next project you are to deliver is the front-end prototype for a new app branding marketing site. The expectation is that you can deliver a fully functional, mobile first, and desktop RWD version of the provided comp. 
-
-Again, the design team came up short and there is no mobile comp, so please use your best judgement for how this will work, look and feel on a handheld mobile device and tablet. 
-
-Think COMPONENT ARCHITECTURE! Think about breaking the UI up into it's smallest parts and building up from there. 
-
-### Fork and build
-
-You know the drill, fork the repo and let it take on a life of it's own, you are on control of your own destiny! 
-
-### Be agile
-
-It is HIGHLY suggested that you come up with a plan of attack. It's a four person team (2 pairs, no solo work!), so planning will help reduce the amount of over-lap work. Assign some responsibilities of things to be completed that can be addressed while others are addressing other needs of the project. 
-
-QA IS ESSENTIAL! Make sure that all your work is being reviewed as your progress. Catch bugs early and solve problems before they get too big. 
+For our Project Week: One, we created a front-end prototype for a new app branding marketing site. We were given a comp for full desktop view, and created a fully-functional prototype following mobile-first approach, tailored for handheld mobile device, tablet, and desktop RWD views. 
 
+Besides semantically correct HTML, we focused heavily on Sass architecture. We built smaller components, then built up surrounding pieces from there. As a four person team, we made a plan based on defining component pieces, then delegated responsibilities among the group. When we ran into overlap issues, we resolved them cooperatively. Along the way, we tested on mobile (Safari and Chrome), tablet (Safari), and desktop (Safari, Chrome, and Firefox). 
 
+## From our initial assignment repo: 
 ### The comp
 
 See the the `comps/` directory. Choose the one that you want to execute on and DO IT!
@@ -44,9 +31,3 @@ There are three individual deliverables:
 1. Update top nav and link to each section of the view / smooth scrolling a +
 1. jQuery plug-ins are optional, but limited to one per project
 1. Deployed to http://surge.sh/
-
-## Project week demo
-
-Projects are due to be completed by Friday NOON! Take lunch and we will have demo reviews at 3pm. Please no commits after NOON or we will have to be angry O_O
-
-Demos your completed project; things you learned and approaches you took to solve the problem will be expected to be presented. 

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "project_week_one",
+  "version": "0.1.0",
+  "description": "prototype from comp",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mbuchthal/project_week_one.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/mbuchthal/project_week_one/issues"
+  },
+  "homepage": "https://github.com/mbuchthal/project_week_one#readme",
+  "devDependencies": {
+    "express": "^4.13.3",
+    "gulp": "^3.9.0",
+    "gulp-sass": "^2.0.4"
+  }
+}

public/app-download.html

@@ -0,0 +1,48 @@
+<!doctype html>
+<html class="no-js" lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title>App Download</title>
+    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
+    <link rel="apple-touch-icon" href="apple-touch-icon.png">
+    <link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
+    <link href="https://fonts.googleapis.com/css?family=Roboto:400,300italic,500" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="css/gallery.build.css">
+    <link rel="stylesheet" href="css/gallery.theme.css">
+    <link rel="stylesheet" href="css/main.css">
+  </head>
+  <body>
+
+    <section class="download-app-section">
+      <div class="download-img">
+        <img src="assets/backgroundBlueIphone.png" alt="">
+        <img src="assets/htcPhone.png" alt="">
+      </div>
+      <div class="download-link-form">
+        <div class="download-link">
+
+          <h1><span>Download</span> Our App<span class="accent-bar-L"></span></h1>
+          <span class="drawn-arrow-blk-rotate"></span>
+          <p>Choose your native platform and download the app FREE!</p>
+          <div class="download-link-wrapper">
+            <a href="#" class="lg-eclipse-border">
+              <span class="icon-google-play">Google Play</span>
+            </a>
+            <a href="#" class="lg-eclipse-border">
+              <span class="icon-apple">iOS App Store</span>
+            </a>
+          </div>
+        </div>
+        <form action="" class="download-form quickform"><fieldset><legend>Subscribe To Newsletter</legend><input type="email" placeholder=" Enter your email address"/><button type="submit" class="sm-button-eclipse-border jiggle-effect">SUBMIT</button></fieldset></form>
+      </div>
+    </section>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+  <script>window.jQuery || document.write('<script src="js/deps/jquery.js"><\/script>')</script>
+  <script type="text/javascript" src="js/app.js"></script>
+  <script type="text/javascript" src="js/video.js"></script>
+  <script type="text/javascript" src="js/smooth-scroll.js"></script>
+  <script type="text/javascript" src="js/deps/slick.js"></script>
+  <script type="text/javascript" src="js/nav-search.js"></script>
+</body>
+</html>

public/app-reviews.html

@@ -0,0 +1,66 @@
+<!doctype html>
+<html class="no-js" lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title>App Reviews</title>
+    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
+    <link rel="apple-touch-icon" href="apple-touch-icon.png">
+    <link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
+    <link href="https://fonts.googleapis.com/css?family=Roboto:400,300italic,500" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="css/gallery.build.css">
+    <link rel="stylesheet" href="css/gallery.theme.css">
+    <link rel="stylesheet" href="css/main.css">
+  </head>
+  <body>
+
+    <section id="about-nav" class="why-choose">
+
+  <div class="app-review-wrapper">
+    <div class="arrow-position-wrapper">
+      <span class="sm-semicircular-eclipse-border"><span class="icon-quotes"></span></span>
+      <h2 id="reviews-nav" class="center-align">App Reviews</h2>
+      <h4>Read What Our Happy Customers Are Saying</h4>
+      <span class="drawn-arrow-wh">&nbsp;</span>
+    </div>
+
+    <div class="review-gallery">
+      <div>
+        <p>Eleifend morbi orci velit porttitor sed imperdiet ac ullamcorper Fusce eget tortor vel magna iaculis convallis. Aeneaneros vitae metus pellentesque tincidunt.Cum sociis natoque penatibus et magnis dis parturient montes turpis donec tincidunt tellus.</p>
+        <figure class="profile">
+          <span class="circle">
+            <img src="images/edison.jpg" alt="Portrait of Thomas Edison">
+          </span>
+          <figcaption><span class="name">Thomas Edison</span>Inventor : The Lightbulb</figcaption>
+        </figure>
+      </div>
+      <div>
+        <p>Eleifend morbi orci velit porttitor sed imperdiet ac ullamcorper Fusce eget tortor vel magna iaculis convallis. Aeneaneros vitae metus pellentesque tincidunt.Cum sociis natoque penatibus et magnis dis parturient montes turpis donec tincidunt tellus.</p>
+        <figure class="profile">
+          <span class="circle">
+            <img src="images/buchanan.jpg" alt="Portrait of James Buchanan">
+          </span>
+          <figcaption><span class="name">James Buchanan</span>Winner : Best Hair</figcaption>
+        </figure>
+      </div>
+      <div>
+        <p>Eleifend morbi orci velit porttitor sed imperdiet ac ullamcorper Fusce eget tortor vel magna iaculis convallis. Aeneaneros vitae metus pellentesque tincidunt.Cum sociis natoque penatibus et magnis dis parturient montes turpis donec tincidunt tellus.</p>
+        <figure class="profile">
+          <span class="circle">
+            <img src="images/stanton.jpg" alt="Portrait of Elizabeth Cady Stanton">
+          </span>
+          <figcaption><span class="name">Elizabeth Stanton</span>Champion : Women's Suffrage</figcaption>
+        </figure>
+      </div>
+    </div>
+    </section>
+
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+  <script>window.jQuery || document.write('<script src="js/deps/jquery.js"><\/script>')</script>
+  <script type="text/javascript" src="js/app.js"></script>
+  <script type="text/javascript" src="js/video.js"></script>
+  <script type="text/javascript" src="js/smooth-scroll.js"></script>
+  <script type="text/javascript" src="js/deps/slick.js"></script>
+  <script type="text/javascript" src="js/nav-search.js"></script>
+</body>
+</html>

public/app-support.html

@@ -0,0 +1,57 @@
+<!doctype html>
+<html class="no-js" lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title>App Support</title>
+    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
+    <link rel="apple-touch-icon" href="apple-touch-icon.png">
+    <link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
+    <link href="https://fonts.googleapis.com/css?family=Roboto:400,300italic,500" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="css/gallery.build.css">
+    <link rel="stylesheet" href="css/gallery.theme.css">
+    <link rel="stylesheet" href="css/main.css">
+  </head>
+  <body>
+
+    <section id="support-nav" class="app-support clearfix">
+      <h1>App Support<span class="accent-bar-C"></span></h1>
+      <ul>
+        <li class="clearfix">
+          <span class="icon-location sm-circular-eclipse-border"></span>
+          <h3>Address</h3>
+          <address>121 King Street, Melbourne<br/>Victoria, Australia 3000</address>
+        </li>
+        <li class="clearfix">
+          <span class="icon-phone sm-circular-eclipse-border"></span>
+          <h3>Free Helpline</h3>
+          <a href="tel:+001800345333700">(001) 800 345 333700</a>
+          <a href="tel:+002600345333700">(002) 600 345 333700</a>
+        </li>
+        <li class="clearfix">
+          <span class="icon-mail sm-circular-eclipse-border"></span>
+          <h3>Email</h3>
+          <a href="mailto:[email protected]">[email protected]</a>
+          <a href="mailto:[email protected]">[email protected]</a>
+        </li>
+      </ul>
+
+      <form id="helpform" class="fullform">
+        <p>Nullam id odio quis risus placerat aliquam. Cum sociis natoque penatibus et magnis dis part urient montes nascetur ridiculus mus curabitur tellus lacus.</p>
+        <input type="text" placeholder=" Full Name" name="help-name" id="help-name">
+        <input type="email" placeholder=" Email" name="help-email" id="help-email">
+        <textarea name="message" form="helpform" rows="8">Message</textarea>
+        <button type="submit" class="sm-button-eclipse-border jiggle-effect">SEND</button>
+      </form>
+    </section>
+
+
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+  <script>window.jQuery || document.write('<script src="js/deps/jquery.js"><\/script>')</script>
+  <script type="text/javascript" src="js/app.js"></script>
+  <script type="text/javascript" src="js/video.js"></script>
+  <script type="text/javascript" src="js/smooth-scroll.js"></script>
+  <script type="text/javascript" src="js/deps/slick.js"></script>
+  <script type="text/javascript" src="js/nav-search.js"></script>
+</body>
+</html>