diff --git a/sheyna_and_marissa/.gitignore b/sheyna_and_marissa/.gitignore new file mode 100644 index 0000000..d8487a4 --- /dev/null +++ b/sheyna_and_marissa/.gitignore @@ -0,0 +1,39 @@ +# Compiled source # +################### +*.com +*.class +*.dll +*.exe +*.o +*.so + +# Packages # +############ +# it's better to unpack these files and commit the raw source +# git has its own built in compression methods +*.7z +*.dmg +*.gz +*.iso +*.jar +*.rar +*.tar +*.zip + +# Logs and databases # +###################### +*.log +*.sql +*.sqlite + +# OS generated files # +###################### +.DS_Store +.DS_Store? +._* +.Spotlight-V100 +.Trashes +ehthumbs.db +Thumbs.db + +node_modules diff --git a/sheyna_and_marissa/Gruntfile.js b/sheyna_and_marissa/Gruntfile.js new file mode 100644 index 0000000..99cb632 --- /dev/null +++ b/sheyna_and_marissa/Gruntfile.js @@ -0,0 +1,24 @@ +module.exports = function(grunt) { + grunt.initConfig({ + sass: { + dist: { + files: { + 'public/stylesheets/style.css': 'sass/style.scss' + } + } + }, + watch: { + source: { + files: ['sass/**/*.scss', 'sass/**/*.sass', 'views/**/*.jade'], + tasks: ['sass'], + options: { + livereload: true + } + } + } + }); + + grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.loadNpmTasks('grunt-sass'); + grunt.registerTask('default', ['sass']); +}; diff --git a/sheyna_and_marissa/README.md b/sheyna_and_marissa/README.md new file mode 100644 index 0000000..b2dbf08 --- /dev/null +++ b/sheyna_and_marissa/README.md @@ -0,0 +1,11 @@ +#Marissa and Sheyna +## Build Node Project from Scratch +### Week 7 +#### To Install After Cloning from Repo: +1. Run `npm install` in terminal +2. Run `npm start` in terminal +3. Run localhost:3000 in broswer + +We created a Shopping Application in node.js using sass and jade which was then deployed by using heroku + +[View the live project here](https://murmuring-fortress-8684.herokuapp.com/) diff --git a/sheyna_and_marissa/app.js b/sheyna_and_marissa/app.js new file mode 100644 index 0000000..60eb3b6 --- /dev/null +++ b/sheyna_and_marissa/app.js @@ -0,0 +1,62 @@ +var express = require('express'); +var path = require('path'); +var favicon = require('serve-favicon'); +var logger = require('morgan'); +var cookieParser = require('cookie-parser'); +var bodyParser = require('body-parser'); + +var routes = require('./routes/index'); +var users = require('./routes/users'); +var shop = require('./routes/shop'); + +var app = express(); + +// view engine setup +app.set('views', path.join(__dirname, 'views')); +app.set('view engine', 'jade'); + +// uncomment after placing your favicon in /public +//app.use(favicon(__dirname + '/public/favicon.ico')); +app.use(logger('dev')); +app.use(bodyParser.json()); +app.use(bodyParser.urlencoded({ extended: false })); +app.use(cookieParser()); +app.use(express.static(path.join(__dirname, 'public'))); + +app.use('/', routes); +app.use('/users', users); +app.use('/shop', shop); + +// catch 404 and forward to error handler +app.use(function(req, res, next) { + var err = new Error('Not Found'); + err.status = 404; + next(err); +}); + +// error handlers + +// development error handler +// will print stacktrace +if (app.get('env') === 'development') { + app.use(function(err, req, res, next) { + res.status(err.status || 500); + res.render('error', { + message: err.message, + error: err + }); + }); +} + +// production error handler +// no stacktraces leaked to user +app.use(function(err, req, res, next) { + res.status(err.status || 500); + res.render('error', { + message: err.message, + error: {} + }); +}); + + +module.exports = app; diff --git a/sheyna_and_marissa/bin/www b/sheyna_and_marissa/bin/www new file mode 100755 index 0000000..e604675 --- /dev/null +++ b/sheyna_and_marissa/bin/www @@ -0,0 +1,9 @@ +#!/usr/bin/env node +var debug = require('debug')('lola'); +var app = require('../app'); + +app.set('port', process.env.PORT || 3000); + +var server = app.listen(app.get('port'), function() { + debug('Express server listening on port ' + server.address().port); +}); diff --git a/sheyna_and_marissa/package.json b/sheyna_and_marissa/package.json new file mode 100644 index 0000000..49a1351 --- /dev/null +++ b/sheyna_and_marissa/package.json @@ -0,0 +1,25 @@ +{ + "name": "lola", + "version": "0.0.0", + "private": true, + "scripts": { + "start": "node ./bin/www" + }, + "dependencies": { + "body-parser": "~1.8.1", + "cookie-parser": "~1.3.3", + "debug": "~2.0.0", + "express": "~4.9.0", + "grunt": "^0.4.5", + "grunt-sass": "^0.17.0", + "jade": "~1.6.0", + "morgan": "~1.3.0", + "node-sass": "^1.2.3", + "serve-favicon": "~2.1.3" + }, + "devDependencies": { + "grunt": "^0.4.5", + "grunt-contrib-watch": "^0.6.1", + "grunt-libsass": "^0.2.0" + } +} diff --git a/sheyna_and_marissa/public/images/clothing1.jpg b/sheyna_and_marissa/public/images/clothing1.jpg new file mode 100644 index 0000000..be0d29c Binary files /dev/null and b/sheyna_and_marissa/public/images/clothing1.jpg differ diff --git a/sheyna_and_marissa/public/images/clothing2.jpg b/sheyna_and_marissa/public/images/clothing2.jpg new file mode 100644 index 0000000..27c6159 Binary files /dev/null and b/sheyna_and_marissa/public/images/clothing2.jpg differ diff --git a/sheyna_and_marissa/public/images/clothing3.jpg b/sheyna_and_marissa/public/images/clothing3.jpg new file mode 100644 index 0000000..4c47b81 Binary files /dev/null and b/sheyna_and_marissa/public/images/clothing3.jpg differ diff --git a/sheyna_and_marissa/public/images/iuiu.jpg b/sheyna_and_marissa/public/images/iuiu.jpg new file mode 100644 index 0000000..86e5f63 Binary files /dev/null and b/sheyna_and_marissa/public/images/iuiu.jpg differ diff --git a/sheyna_and_marissa/public/images/lola.svg b/sheyna_and_marissa/public/images/lola.svg new file mode 100644 index 0000000..63606d2 --- /dev/null +++ b/sheyna_and_marissa/public/images/lola.svg @@ -0,0 +1,20 @@ + + + + + + diff --git a/sheyna_and_marissa/public/images/lola1.jpg b/sheyna_and_marissa/public/images/lola1.jpg new file mode 100644 index 0000000..d4a3551 Binary files /dev/null and b/sheyna_and_marissa/public/images/lola1.jpg differ diff --git a/sheyna_and_marissa/public/images/lola2.jpg b/sheyna_and_marissa/public/images/lola2.jpg new file mode 100644 index 0000000..16a41a6 Binary files /dev/null and b/sheyna_and_marissa/public/images/lola2.jpg differ diff --git a/sheyna_and_marissa/public/images/lola3.jpg b/sheyna_and_marissa/public/images/lola3.jpg new file mode 100644 index 0000000..4c1ce68 Binary files /dev/null and b/sheyna_and_marissa/public/images/lola3.jpg differ diff --git a/sheyna_and_marissa/public/images/lolapattern.jpg b/sheyna_and_marissa/public/images/lolapattern.jpg new file mode 100644 index 0000000..b97ba8c Binary files /dev/null and b/sheyna_and_marissa/public/images/lolapattern.jpg differ diff --git a/sheyna_and_marissa/public/images/plug-casual.jpg b/sheyna_and_marissa/public/images/plug-casual.jpg new file mode 100644 index 0000000..1155b6e Binary files /dev/null and b/sheyna_and_marissa/public/images/plug-casual.jpg differ diff --git a/sheyna_and_marissa/public/images/plug-dress.jpg b/sheyna_and_marissa/public/images/plug-dress.jpg new file mode 100644 index 0000000..ad6f338 Binary files /dev/null and b/sheyna_and_marissa/public/images/plug-dress.jpg differ diff --git a/sheyna_and_marissa/public/images/plug-shoes.jpg b/sheyna_and_marissa/public/images/plug-shoes.jpg new file mode 100644 index 0000000..64bb3dc Binary files /dev/null and b/sheyna_and_marissa/public/images/plug-shoes.jpg differ diff --git a/sheyna_and_marissa/public/stylesheets/style.css b/sheyna_and_marissa/public/stylesheets/style.css new file mode 100644 index 0000000..c9741ad --- /dev/null +++ b/sheyna_and_marissa/public/stylesheets/style.css @@ -0,0 +1,148 @@ +/* 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; } + +@font-face { + font-family: 'Lato', sans-serif; + src: url('http://fonts.googleapis.com/css?family=Lato'); } + +body { + background-color: #f8f0e1; } + +p { + font-family: 'Lato', sans-serif; } + +.logo { + width: 4em; } + +.logoText { + color: #5d8780; + font-family: 'Lato', sans-serif; + font-size: 6em; + display: inline-block; + margin: 0 0 0 0.2em; } + +nav { + display: inline-block; + margin-top: 1em; } + nav ul li { + list-style: none; + display: inline-block; + padding: 0 1.6em 0 1.6em; } + nav a { + color: #5d8780; + font-family: 'Lato', sans-serif; + font-size: 1.5em; + text-decoration: none; } + nav a:hover { + color: #adc6c6; } + +.main-content { + max-width: 900px; + margin: 2em auto 0 auto; + padding: 0 6px 0 6px; } + +footer { + margin-top: 4em; + padding: 2em; } + footer p { + color: #545454; + font-size: 0.8em; + text-align: center; } + +.hero { + background-color: #5d8780; + background-image: url('/images/lolapattern.jpg'); + background-size: contain; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + max-width: 897px; + margin: 1.5em auto 1.5em auto; + clear: both; } + +.panel1 { + flex-shrink: 1; + flex-basis: 317px; } + +.panel2 { + flex-shrink: 1; + flex-basis: 333px; } + +.panel3 { + flex-shrink: 1; + flex-basis: 247px; } + +.panelImage { + margin: 0 0 -0.2em 0; + max-width: 100%; } + .panelImage:hover { + opacity: 0.1; } + +.box { + flex-shrink: 1; + flex-basis: 33%; + padding: 0 5% 0 5%; } + .box img { + width: 100%; + display: block; + margin-bottom: 1em; } + .box p { + color: #545454; + font-size: 0.8em; } + +.plugs { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + margin: 4em 0 2em 0; } + +.shop-main { + display: block; + width: 40em; + margin: 1.5em auto; } + +.shop-main--images { + display: block; + width: 90%; + margin: 0 5%; + overflow: hidden; } + +.clothing { + width: 28.5%; + margin: 2%; + border: 0.2em solid #5d8780; } + +.clothing--float-left { + float: left; } + +.clothing--float-right { + float: right; } diff --git a/sheyna_and_marissa/routes/index.js b/sheyna_and_marissa/routes/index.js new file mode 100644 index 0000000..fd01dbd --- /dev/null +++ b/sheyna_and_marissa/routes/index.js @@ -0,0 +1,9 @@ +var express = require('express'); +var router = express.Router(); + +/* GET home page. */ +router.get('/', function(req, res) { + res.render('index', { title: 'Lola' }); +}); + +module.exports = router; diff --git a/sheyna_and_marissa/routes/shop.js b/sheyna_and_marissa/routes/shop.js new file mode 100644 index 0000000..6b75358 --- /dev/null +++ b/sheyna_and_marissa/routes/shop.js @@ -0,0 +1,9 @@ +var express = require('express'); +var router = express.Router(); + +/* GET shop page. */ +router.get('/', function(req, res) { + res.render('shop', { title: 'Lola' }); +}); + +module.exports = router; diff --git a/sheyna_and_marissa/routes/users.js b/sheyna_and_marissa/routes/users.js new file mode 100644 index 0000000..c00d7de --- /dev/null +++ b/sheyna_and_marissa/routes/users.js @@ -0,0 +1,9 @@ +var express = require('express'); +var router = express.Router(); + +/* GET users listing. */ +router.get('/', function(req, res) { + res.send('respond with a resource'); +}); + +module.exports = router; diff --git a/sheyna_and_marissa/sass/_base/_base.sass b/sheyna_and_marissa/sass/_base/_base.sass new file mode 100644 index 0000000..9281f8f --- /dev/null +++ b/sheyna_and_marissa/sass/_base/_base.sass @@ -0,0 +1,46 @@ +/* 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 diff --git a/sheyna_and_marissa/sass/_base/_variables.sass b/sheyna_and_marissa/sass/_base/_variables.sass new file mode 100644 index 0000000..297cc28 --- /dev/null +++ b/sheyna_and_marissa/sass/_base/_variables.sass @@ -0,0 +1,25 @@ +// Global Config + +// Font Stacks + +@font-face + font-family: 'Lato', sans-serif; + src: url('http://fonts.googleapis.com/css?family=Lato') + +$font-family--primary : 'Lato', sans-serif + +// Color Usage + +$color-primary : #5d8780 +$color-secondary : lighten(#f5ead5, 3) +$color-tertiary : lighten(#80a6a7, 15) +$color-accent : #FFEFCB +$color-border : #218593 +$color-default : white +$color-body-text : #545454 + +body + background-color: $color-secondary + +p + font-family: $font-family--primary diff --git a/sheyna_and_marissa/sass/_layout/_header.sass b/sheyna_and_marissa/sass/_layout/_header.sass new file mode 100644 index 0000000..2bef3f5 --- /dev/null +++ b/sheyna_and_marissa/sass/_layout/_header.sass @@ -0,0 +1,26 @@ +.logo + width: 4em + +.logoText + color: $color-primary + font-family: $font-family--primary + font-size: 6em + display: inline-block + margin: 0 0 0 0.2em + +nav + display: inline-block + margin-top: 1em + ul + li + list-style: none + display: inline-block + padding: 0 1.6em 0 1.6em + a + color: $color-primary + font-family: $font-family--primary + font-size: 1.5em + text-decoration: none + &:hover + color: $color-tertiary + diff --git a/sheyna_and_marissa/sass/_layout/_main.sass b/sheyna_and_marissa/sass/_layout/_main.sass new file mode 100644 index 0000000..eac3172 --- /dev/null +++ b/sheyna_and_marissa/sass/_layout/_main.sass @@ -0,0 +1,12 @@ +.main-content + max-width: 900px + margin: 2em auto 0 auto + padding: 0 6px 0 6px + +footer + margin-top: 4em + padding: 2em + p + color: $color-body-text + font-size: 0.8em + text-align: center diff --git a/sheyna_and_marissa/sass/_modules/_box.sass b/sheyna_and_marissa/sass/_modules/_box.sass new file mode 100644 index 0000000..8726851 --- /dev/null +++ b/sheyna_and_marissa/sass/_modules/_box.sass @@ -0,0 +1,17 @@ +.box + flex-shrink: 1 + flex-basis: 33% + padding: 0 5% 0 5% + img + width: 100% + display: block + margin-bottom: 1em + p + color: $color-body-text + font-size: 0.8em + +.plugs + display: flex + flex-direction: row + flex-wrap: nowrap + margin: 4em 0 2em 0 diff --git a/sheyna_and_marissa/sass/_modules/_components.sass b/sheyna_and_marissa/sass/_modules/_components.sass new file mode 100644 index 0000000..e35d9a0 --- /dev/null +++ b/sheyna_and_marissa/sass/_modules/_components.sass @@ -0,0 +1,23 @@ +.shop-main + display: block + width: 40em + margin: 1.5em auto + +.shop-main--images + display: block + width: 90% + margin: 0 5% + overflow: hidden + +.clothing + width: 28.5% + margin: 2% + border: 0.2em solid $color-primary + +.clothing--float-left + float: left + +.clothing--float-right + float: right + + diff --git a/sheyna_and_marissa/sass/_modules/_hero.sass b/sheyna_and_marissa/sass/_modules/_hero.sass new file mode 100644 index 0000000..582c4ff --- /dev/null +++ b/sheyna_and_marissa/sass/_modules/_hero.sass @@ -0,0 +1,28 @@ +.hero + background-color: $color-primary + background-image: url('/images/lolapattern.jpg') + background-size: contain + display: flex + flex-direction: row + flex-wrap: nowrap + max-width: 897px + margin: 1.5em auto 1.5em auto + clear: both + +.panel1 + flex-shrink: 1 + flex-basis: 317px + +.panel2 + flex-shrink: 1 + flex-basis: 333px + +.panel3 + flex-shrink: 1 + flex-basis: 247px + +.panelImage + margin: 0 0 -0.2em 0 + max-width: 100% + &:hover + opacity: 0.1 diff --git a/sheyna_and_marissa/sass/style.scss b/sheyna_and_marissa/sass/style.scss new file mode 100644 index 0000000..e936825 --- /dev/null +++ b/sheyna_and_marissa/sass/style.scss @@ -0,0 +1,8 @@ +@import + '_base/base', + '_base/variables', + '_layout/header', + '_layout/main', + '_modules/hero', + '_modules/box', + '_modules/components'; diff --git a/sheyna_and_marissa/views/error.jade b/sheyna_and_marissa/views/error.jade new file mode 100644 index 0000000..51ec12c --- /dev/null +++ b/sheyna_and_marissa/views/error.jade @@ -0,0 +1,6 @@ +extends layout + +block content + h1= message + h2= error.status + pre #{error.stack} diff --git a/sheyna_and_marissa/views/index.jade b/sheyna_and_marissa/views/index.jade new file mode 100644 index 0000000..e31d6e1 --- /dev/null +++ b/sheyna_and_marissa/views/index.jade @@ -0,0 +1,45 @@ +extends layout + +block content + + .main-content + header + a(href='/') + img.logo(src='images/lola.svg', alt='Lola Logo') + h1.logoText=title + nav + h2(hidden='') Site Navigation + ul + li + a(href='shop') shop + li + a(href='#') specials + li + a(href='#') about + .hero + .panel3 + img.panelImage(src='images/lola3.jpg', alt='Love') + .panel2 + img.panelImage(src='images/lola2.jpg', alt='Dance') + .panel1 + img.panelImage(src='images/lola1.jpg', alt='Live') + + section.plugs + section.box + img(src='images/plug-shoes.jpg', alt='Shoes') + p + | SHOES: Lorem ipsum dolor sit amet, consectetur adipiscing + | elit, sed do eiusmod tempor incididunt + section.box + img(src='images/plug-casual.jpg', alt='Casual') + p + | CASUAL: Lorem ipsum dolor sit amet, consectetur adipiscing + | elit, sed do eiusmod tempor incididunt + section.box + img(src='images/plug-dress.jpg', alt='Dress') + p + | DRESS: Lorem ipsum dolor sit amet, consectetur adipiscing + | elit, sed do eiusmod tempor incididunt + + footer + p A project for Code Fellows B25 by Marissa Felitto and Sheyna Watkins diff --git a/sheyna_and_marissa/views/layout.jade b/sheyna_and_marissa/views/layout.jade new file mode 100644 index 0000000..990f278 --- /dev/null +++ b/sheyna_and_marissa/views/layout.jade @@ -0,0 +1,9 @@ +doctype html +html + head + title= title + link(rel='stylesheet', href='/stylesheets/style.css') + body + block content + + script(src='http://localhost:35729/livereload.js') diff --git a/sheyna_and_marissa/views/shop.jade b/sheyna_and_marissa/views/shop.jade new file mode 100644 index 0000000..a7f3342 --- /dev/null +++ b/sheyna_and_marissa/views/shop.jade @@ -0,0 +1,23 @@ +extends layout + +block content + + .main-content + header + a(href='/') + img.logo(src='images/lola.svg', alt='Lola Logo') + h1.logoText=title + nav + h2(hidden='') Site Navigation + ul + li + a(href='shop') shop + li + a(href='#') specials + li + a(href='#') about + img.shop-main(src='images/iuiu.jpg') + section.shop-main--images + img.clothing.clothing--float-left(src='images/clothing1.jpg') + img.clothing.clothing--float-left(src='images/clothing2.jpg') + img.clothing.clothing--float-right(src='images/clothing3.jpg')