diff --git a/.gitignore b/.gitignore index c267e7c..30a47b8 100644 --- a/.gitignore +++ b/.gitignore @@ -1,26 +1,5 @@ -### OSX ### +.sass-cache +node_modules +public/css .DS_Store -.AppleDouble -.LSOverride - -# Icon must end with two \r -Icon - - -# Thumbnails -._* - -# Files that might appear in the root of a volume -.DocumentRevisions-V100 -.fseventsd -.Spotlight-V100 -.TemporaryItems -.Trashes -.VolumeIcon.icns - -# Directories potentially created on remote AFP share -.AppleDB -.AppleDesktop -Network Trash Folder -Temporary Items -.apdisk +*.log \ No newline at end of file diff --git a/Procfile b/Procfile new file mode 100644 index 0000000..5ec9cc2 --- /dev/null +++ b/Procfile @@ -0,0 +1 @@ +web: node index.js \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..a3bd87e --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,13 @@ +var gulp = require("gulp"); + +var sass = require("gulp-sass"); + +gulp.task("sass", function() { + gulp.src("./src/scss/*.scss") + .pipe(sass().on("error", sass.logError)) + .pipe(gulp.dest("./public/css/")); +}); + +gulp.task("default", function() { + gulp.watch("./src/scss/*.scss", ["sass"]); +}); \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..5aef5c6 --- /dev/null +++ b/package.json @@ -0,0 +1,26 @@ +{ + "name": "w2a2mobilesite", + "version": "1.0.0", + "description": "w2a2 project advanced css", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/brain11f/advanced-presentation__W2-A2.git" + }, + "author": "Brian", + "license": "ISC", + "bugs": { + "url": "https://github.com/brain11f/advanced-presentation__W2-A2/issues" + }, + "homepage": "https://github.com/brain11f/advanced-presentation__W2-A2#readme", + "dependencies": { + "express": "^4.13.3" + }, + "devDependencies": { + "gulp": "^3.9.0", + "gulp-sass": "^2.0.4" + } +} diff --git a/public/assets/Arrow.png b/public/assets/Arrow.png new file mode 100644 index 0000000..f110458 Binary files /dev/null and b/public/assets/Arrow.png differ diff --git a/public/assets/Dribbble x2.png b/public/assets/Dribbble x2.png new file mode 100644 index 0000000..ba9c053 Binary files /dev/null and b/public/assets/Dribbble x2.png differ diff --git a/public/assets/Dribble shot.png b/public/assets/Dribble shot.png new file mode 100644 index 0000000..9b7e828 Binary files /dev/null and b/public/assets/Dribble shot.png differ diff --git a/public/assets/Shot copy 2.png b/public/assets/Shot copy 2.png new file mode 100644 index 0000000..bb9ac07 Binary files /dev/null and b/public/assets/Shot copy 2.png differ diff --git a/public/assets/Shot copy 3.png b/public/assets/Shot copy 3.png new file mode 100644 index 0000000..9d4e721 Binary files /dev/null and b/public/assets/Shot copy 3.png differ diff --git a/public/assets/Shot copy 4.png b/public/assets/Shot copy 4.png new file mode 100644 index 0000000..67defe3 Binary files /dev/null and b/public/assets/Shot copy 4.png differ diff --git a/public/assets/Shot copy 5.png b/public/assets/Shot copy 5.png new file mode 100644 index 0000000..e1c9cdc Binary files /dev/null and b/public/assets/Shot copy 5.png differ diff --git a/public/assets/Shot copy 6.png b/public/assets/Shot copy 6.png new file mode 100644 index 0000000..095d3f4 Binary files /dev/null and b/public/assets/Shot copy 6.png differ diff --git a/public/assets/Shot copy.png b/public/assets/Shot copy.png new file mode 100644 index 0000000..7254595 Binary files /dev/null and b/public/assets/Shot copy.png differ diff --git a/public/assets/Shot.png b/public/assets/Shot.png new file mode 100644 index 0000000..930f080 Binary files /dev/null and b/public/assets/Shot.png differ diff --git a/public/assets/Slider.jpg b/public/assets/Slider.jpg new file mode 100644 index 0000000..e54965c Binary files /dev/null and b/public/assets/Slider.jpg differ diff --git a/public/assets/Web shot.png b/public/assets/Web shot.png new file mode 100644 index 0000000..37f4f01 Binary files /dev/null and b/public/assets/Web shot.png differ diff --git a/public/assets/circle-left-icon.png b/public/assets/circle-left-icon.png new file mode 100644 index 0000000..0a6f8f2 Binary files /dev/null and b/public/assets/circle-left-icon.png differ diff --git a/public/assets/circle-right-icon.png b/public/assets/circle-right-icon.png new file mode 100644 index 0000000..4c4d685 Binary files /dev/null and b/public/assets/circle-right-icon.png differ diff --git a/public/assets/dribble-icon.png b/public/assets/dribble-icon.png new file mode 100644 index 0000000..b1eaf04 Binary files /dev/null and b/public/assets/dribble-icon.png differ diff --git a/public/assets/droplet.svg b/public/assets/droplet.svg new file mode 100644 index 0000000..e0f19a0 --- /dev/null +++ b/public/assets/droplet.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/assets/facebook-icon.png b/public/assets/facebook-icon.png new file mode 100644 index 0000000..f49e644 Binary files /dev/null and b/public/assets/facebook-icon.png differ diff --git a/public/assets/google-maps.jpg b/public/assets/google-maps.jpg new file mode 100644 index 0000000..4d9af82 Binary files /dev/null and b/public/assets/google-maps.jpg differ diff --git a/public/assets/googlePlus-icon.png b/public/assets/googlePlus-icon.png new file mode 100644 index 0000000..c4ba2b0 Binary files /dev/null and b/public/assets/googlePlus-icon.png differ diff --git a/public/assets/header-background-image.jpg b/public/assets/header-background-image.jpg new file mode 100644 index 0000000..34ff18e Binary files /dev/null and b/public/assets/header-background-image.jpg differ diff --git a/public/assets/jane-doe.jpg b/public/assets/jane-doe.jpg new file mode 100644 index 0000000..ec84267 Binary files /dev/null and b/public/assets/jane-doe.jpg differ diff --git a/public/assets/jannete-doe.jpg b/public/assets/jannete-doe.jpg new file mode 100644 index 0000000..7a7fc59 Binary files /dev/null and b/public/assets/jannete-doe.jpg differ diff --git a/public/assets/jessie-doe.jpg b/public/assets/jessie-doe.jpg new file mode 100644 index 0000000..d718bd1 Binary files /dev/null and b/public/assets/jessie-doe.jpg differ diff --git a/public/assets/jonathan-doe.jpg b/public/assets/jonathan-doe.jpg new file mode 100644 index 0000000..b52abeb Binary files /dev/null and b/public/assets/jonathan-doe.jpg differ diff --git a/public/assets/lab.svg b/public/assets/lab.svg new file mode 100644 index 0000000..d26808a --- /dev/null +++ b/public/assets/lab.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + diff --git a/public/assets/linkedIn-icon.png b/public/assets/linkedIn-icon.png new file mode 100644 index 0000000..e656004 Binary files /dev/null and b/public/assets/linkedIn-icon.png differ diff --git a/public/assets/location-icon.png b/public/assets/location-icon.png new file mode 100644 index 0000000..cc163cb Binary files /dev/null and b/public/assets/location-icon.png differ diff --git a/public/assets/mail-icon.png b/public/assets/mail-icon.png new file mode 100644 index 0000000..f8e5ea4 Binary files /dev/null and b/public/assets/mail-icon.png differ diff --git a/public/assets/matthew-broderic.png b/public/assets/matthew-broderic.png new file mode 100644 index 0000000..2d5b75e Binary files /dev/null and b/public/assets/matthew-broderic.png differ diff --git a/public/assets/menu.svg b/public/assets/menu.svg new file mode 100644 index 0000000..da79dda --- /dev/null +++ b/public/assets/menu.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/assets/mobile-icon.png b/public/assets/mobile-icon.png new file mode 100644 index 0000000..fb72f0e Binary files /dev/null and b/public/assets/mobile-icon.png differ diff --git a/public/assets/paint-brush.svg b/public/assets/paint-brush.svg new file mode 100644 index 0000000..bd09a40 --- /dev/null +++ b/public/assets/paint-brush.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + diff --git a/public/assets/settings.svg b/public/assets/settings.svg new file mode 100644 index 0000000..54b764f --- /dev/null +++ b/public/assets/settings.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + diff --git a/public/assets/slider2.jpg b/public/assets/slider2.jpg new file mode 100644 index 0000000..1567d51 Binary files /dev/null and b/public/assets/slider2.jpg differ diff --git a/public/assets/slider3.jpg b/public/assets/slider3.jpg new file mode 100644 index 0000000..6e19e96 Binary files /dev/null and b/public/assets/slider3.jpg differ diff --git a/public/assets/slider4.jpg b/public/assets/slider4.jpg new file mode 100644 index 0000000..739322e Binary files /dev/null and b/public/assets/slider4.jpg differ diff --git a/public/assets/slider5.jpg b/public/assets/slider5.jpg new file mode 100644 index 0000000..532349e Binary files /dev/null and b/public/assets/slider5.jpg differ diff --git a/public/assets/twitter-icon.png b/public/assets/twitter-icon.png new file mode 100644 index 0000000..aeb2a8d Binary files /dev/null and b/public/assets/twitter-icon.png differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..c92c92e --- /dev/null +++ b/public/index.html @@ -0,0 +1,424 @@ + + + + + + + presentation-fundementals-two + + + + + + + + +
+ +
+
+
+
+
+ + + +
+
+

Hi there! We`re Avengers, creative design agency
we build awesome mobile and websites

+
+
+
+
+
+

SERVICES

+

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia.

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

+ +
+
+

PRICING TABLES

+ +
+
+
+
+

PORTFOLIO

+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+ +
+

Youtube iphone app

+ UI design, brand & logotypes +
+
+
+ +
+

Hexagon onepage

+ Webdesign, brand & logotypes +
+
+
+ +
+

Sketches icon

+ Icons design, brand & logotypes +
+
+
+ +
+

Logotypes volume

+ UI design, brand & logotypes +
+
+
+ +
+

Flight control

+ Webdesign, brand & logotypes +
+
+
+ +
+

Youtube app

+ Icons design, brand & logotypes +
+
+
+ +
+

Management

+ UI design, brand & logotypes +
+
+
+ +
+

Korean beef

+ Webdesign, brand & logotypes +
+
+
+ +
+

Facebook thumbs

+ Icons design, brand & logotypes +
+
+
+
+
+
+

ABOUT

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

+
+

SKILLS

+

PHOTOSHOP

+ +

HTML / CSS

+ +

ILLUSTRATOR

+ +

PHP

+ +

WORDPRESS

+ +
+ Do you want be one of Avengers? Join us! + +
+
+
+
+
TEAM
+

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia. +

+
+ + + +
+ +
+
+
+
+
CLIENTS
+
+
+ + Matthew Broderic + (CEO Hopicola Inc.)
+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem ipsum has been the industry's standard my text ever since the 1500s, when lorem upsum is the best text for you.

+
+ +
+ + +
+
+
+
+
+

CONTACT

+

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia. +

+ + +
+
+
+
+ +
+
+
+
+ +
+970 897 580 (7:00-20:00)
+ +
info@company.com
+ +
USA, San Francisco, 57010, Little Parry St. 826/31
+
+
+
+ +
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/public/js/main.js b/public/js/main.js new file mode 100644 index 0000000..9d41455 --- /dev/null +++ b/public/js/main.js @@ -0,0 +1,133 @@ + +$(function() { + +/*menu nav*/ + $('#home').on('click', function() { + $.smoothScroll({ + scrollElement: $('body'), + scrollTarget: '.welcome' + }); + return false; + }); + + $('#services').on('click', function() { + $.smoothScroll({ + scrollElement: $('body'), + scrollTarget: '.services' + }); + return false; + }); + + $('#portfolio').on('click', function() { + $.smoothScroll({ + scrollElement: $('body'), + scrollTarget: '.portfolio-carousel' + }); + return false; + }); + + $('#about').on('click', function() { + $.smoothScroll({ + scrollElement: $('body'), + scrollTarget: '.about-skills' + }); + return false; + }); + + $('#team').on('click', function() { + $.smoothScroll({ + scrollElement: $('body'), + scrollTarget: '.team-clients' + }); + return false; + }); + + $('#contact').on('click', function() { + $.smoothScroll({ + scrollElement: $('body'), + scrollTarget: '.contact' + }); + return false; + }); + + var selectTags = function(event) { + event.preventDefault(); + + // Remove .active from all active tag links + $('[data-show-tag].active').removeClass('active'); + + // Add .active to the current tag link, and return contents of its attribute + var tag = $(event.currentTarget).addClass('active').data('show-tag'); + + if(tag == 'all') { + $('[data-tags]').show(); + return; + } + + // Hide ALL the tagged content, we'll un-hide next + $('[data-tags]').hide(); + + // Show all tagged content that CONTAINS tag + $('[data-tags*="' + tag + '"]').show(); + }; + + + // Our "tag" links + $('[data-show-tag]').click(selectTags); + + //contact us + $(".contact-us-button").mouseenter(function() { + $(this).css("color", "#973d1e"); + $(".contact-us-button").mouseleave(function() { + $(this).css("color", "white"); + }); + }); + $(".contact-form-submit-button").mouseenter(function() { + $(this).css("color", "#973d1e"); + $(".contact-form-submit-button").mouseleave(function() { + $(this).css("color", "#fd6632"); + }); + }); + $(".contact-form-submit-button").click(function () { + alert("Thanks for your submission!"); + $( '.contact-form' ).each(function(){ + this.reset(); + }); + }); +//clients + var current = 0; + $(".circle-buttons").click(function() { + if (current === 0) { + $(".client-reviews").hide(); + $(".new-review").show(); + current = 1; + } + else { + $(".new-review").hide(); + $(".client-reviews").show(); + current = 0; + } + }); + //portfolio-slider + $(".slider-one").click(function() { + $("#slider-one").css("z-index", "5"); + $("#slider-two, #slider-three, #slider-four, #slider-five").css("z-index","1"); + }); + $(".slider-two").click(function() { + $("#slider-two").css("z-index", "5"); + $("#slider-one, #slider-three, #slider-four, #slider-five").css("z-index","1"); + }); + $(".slider-three").click(function() { + $("#slider-three").css("z-index", "5"); + $("#slider-two, #slider-one, #slider-four, #slider-five").css("z-index","1"); + }); + $(".slider-four").click(function() { + $("#slider-four").css("z-index", "5"); + $("#slider-two, #slider-three, #slider-one, #slider-five").css("z-index","1"); + }); + $(".slider-five").click(function() { + $("#slider-five").css("z-index", "5"); + $("#slider-two, #slider-three, #slider-four, #slider-one").css("z-index","1"); + }); + +}); \ No newline at end of file diff --git a/public/js/smothscroll.js b/public/js/smothscroll.js new file mode 100644 index 0000000..6118d7f --- /dev/null +++ b/public/js/smothscroll.js @@ -0,0 +1,280 @@ +/*! + * jQuery Smooth Scroll - v1.5.6 - 2015-09-08 + * https://github.com/kswedberg/jquery-smooth-scroll + * Copyright (c) 2015 Karl Swedberg + * Licensed MIT (https://github.com/kswedberg/jquery-smooth-scroll/blob/master/LICENSE-MIT) + */ + +(function (factory) { + if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + define(['jquery'], factory); + } else if (typeof module === 'object' && module.exports) { + // CommonJS + factory(require('jquery')); + } else { + // Browser globals + factory(jQuery); + } +}(function ($) { + + var version = '1.5.6', + optionOverrides = {}, + defaults = { + exclude: [], + excludeWithin:[], + offset: 0, + + // one of 'top' or 'left' + direction: 'top', + + // jQuery set of elements you wish to scroll (for $.smoothScroll). + // if null (default), $('html, body').firstScrollable() is used. + scrollElement: null, + + // only use if you want to override default behavior + scrollTarget: null, + + // fn(opts) function to be called before scrolling occurs. + // `this` is the element(s) being scrolled + beforeScroll: function() {}, + + // fn(opts) function to be called after scrolling occurs. + // `this` is the triggering element + afterScroll: function() {}, + easing: 'swing', + speed: 400, + + // coefficient for "auto" speed + autoCoefficient: 2, + + // $.fn.smoothScroll only: whether to prevent the default click action + preventDefault: true + }, + + getScrollable = function(opts) { + var scrollable = [], + scrolled = false, + dir = opts.dir && opts.dir === 'left' ? 'scrollLeft' : 'scrollTop'; + + this.each(function() { + var el = $(this); + + if (this === document || this === window) { + return; + } + + if ( document.scrollingElement && (this === document.documentElement || this === document.body) ) { + scrollable.push(document.scrollingElement); + + return false; + } + + if ( el[dir]() > 0 ) { + scrollable.push(this); + } else { + // if scroll(Top|Left) === 0, nudge the element 1px and see if it moves + el[dir](1); + scrolled = el[dir]() > 0; + if ( scrolled ) { + scrollable.push(this); + } + // then put it back, of course + el[dir](0); + } + }); + + // If no scrollable elements, fall back to , + // if it's in the jQuery collection + // (doing this because Safari sets scrollTop async, + // so can't set it to 1 and immediately get the value.) + if (!scrollable.length) { + this.each(function() { + if (this.nodeName === 'BODY') { + scrollable = [this]; + } + }); + } + + // Use the first scrollable element if we're calling firstScrollable() + if ( opts.el === 'first' && scrollable.length > 1 ) { + scrollable = [ scrollable[0] ]; + } + + return scrollable; + }; + + $.fn.extend({ + scrollable: function(dir) { + var scrl = getScrollable.call(this, {dir: dir}); + return this.pushStack(scrl); + }, + firstScrollable: function(dir) { + var scrl = getScrollable.call(this, {el: 'first', dir: dir}); + return this.pushStack(scrl); + }, + + smoothScroll: function(options, extra) { + options = options || {}; + + if ( options === 'options' ) { + if ( !extra ) { + return this.first().data('ssOpts'); + } + return this.each(function() { + var $this = $(this), + opts = $.extend($this.data('ssOpts') || {}, extra); + + $(this).data('ssOpts', opts); + }); + } + + var opts = $.extend({}, $.fn.smoothScroll.defaults, options), + locationPath = $.smoothScroll.filterPath(location.pathname); + + this + .unbind('click.smoothscroll') + .bind('click.smoothscroll', function(event) { + var link = this, + $link = $(this), + thisOpts = $.extend({}, opts, $link.data('ssOpts') || {}), + exclude = opts.exclude, + excludeWithin = thisOpts.excludeWithin, + elCounter = 0, ewlCounter = 0, + include = true, + clickOpts = {}, + hostMatch = ((location.hostname === link.hostname) || !link.hostname), + pathMatch = thisOpts.scrollTarget || ( $.smoothScroll.filterPath(link.pathname) === locationPath ), + thisHash = escapeSelector(link.hash); + + if ( !thisOpts.scrollTarget && (!hostMatch || !pathMatch || !thisHash) ) { + include = false; + } else { + while (include && elCounter < exclude.length) { + if ($link.is(escapeSelector(exclude[elCounter++]))) { + include = false; + } + } + while ( include && ewlCounter < excludeWithin.length ) { + if ($link.closest(excludeWithin[ewlCounter++]).length) { + include = false; + } + } + } + + if ( include ) { + + if ( thisOpts.preventDefault ) { + event.preventDefault(); + } + + $.extend( clickOpts, thisOpts, { + scrollTarget: thisOpts.scrollTarget || thisHash, + link: link + }); + + $.smoothScroll( clickOpts ); + } + }); + + return this; + } + }); + + $.smoothScroll = function(options, px) { + if ( options === 'options' && typeof px === 'object' ) { + return $.extend(optionOverrides, px); + } + var opts, $scroller, scrollTargetOffset, speed, delta, + scrollerOffset = 0, + offPos = 'offset', + scrollDir = 'scrollTop', + aniProps = {}, + aniOpts = {}; + + if (typeof options === 'number') { + opts = $.extend({link: null}, $.fn.smoothScroll.defaults, optionOverrides); + scrollTargetOffset = options; + } else { + opts = $.extend({link: null}, $.fn.smoothScroll.defaults, options || {}, optionOverrides); + if (opts.scrollElement) { + offPos = 'position'; + if (opts.scrollElement.css('position') === 'static') { + opts.scrollElement.css('position', 'relative'); + } + } + } + + scrollDir = opts.direction === 'left' ? 'scrollLeft' : scrollDir; + + if ( opts.scrollElement ) { + $scroller = opts.scrollElement; + if ( !(/^(?:HTML|BODY)$/).test($scroller[0].nodeName) ) { + scrollerOffset = $scroller[scrollDir](); + } + } else { + $scroller = $('html, body').firstScrollable(opts.direction); + } + + // beforeScroll callback function must fire before calculating offset + opts.beforeScroll.call($scroller, opts); + + scrollTargetOffset = (typeof options === 'number') ? options : + px || + ( $(opts.scrollTarget)[offPos]() && + $(opts.scrollTarget)[offPos]()[opts.direction] ) || + 0; + + aniProps[scrollDir] = scrollTargetOffset + scrollerOffset + opts.offset; + speed = opts.speed; + + // automatically calculate the speed of the scroll based on distance / coefficient + if (speed === 'auto') { + + // $scroller.scrollTop() is position before scroll, aniProps[scrollDir] is position after + // When delta is greater, speed will be greater. + delta = aniProps[scrollDir] - $scroller.scrollTop(); + if(delta < 0) { + delta *= -1; + } + + // Divide the delta by the coefficient + speed = delta / opts.autoCoefficient; + } + + aniOpts = { + duration: speed, + easing: opts.easing, + complete: function() { + opts.afterScroll.call(opts.link, opts); + } + }; + + if (opts.step) { + aniOpts.step = opts.step; + } + + if ($scroller.length) { + $scroller.stop().animate(aniProps, aniOpts); + } else { + opts.afterScroll.call(opts.link, opts); + } + }; + + $.smoothScroll.version = version; + $.smoothScroll.filterPath = function(string) { + string = string || ''; + return string + .replace(/^\//,'') + .replace(/(?:index|default).[a-zA-Z]{3,4}$/,'') + .replace(/\/$/,''); + }; + + // default options + $.fn.smoothScroll.defaults = defaults; + + function escapeSelector (str) { + return str.replace(/(:|\.|\/)/g,'\\$1'); + } + +})); diff --git a/public/old-css.css b/public/old-css.css new file mode 100644 index 0000000..d619fd3 --- /dev/null +++ b/public/old-css.css @@ -0,0 +1,670 @@ +/*menu navigation*/ + +/* +@media (max-width: 700px) { + /*.menu-icon { + display: inline-block; + width: 2.5em; + height: 2.5em; + fill: currentColor; + }*/ +/* + .drop-down-menu { + position: fixed; + display: inline-block; + z-index: 30; + } + .drop-down-menu label, + .drop-down-menu ul li { + display: block; + width: 50em; + height: 1.8em; + background: #d8d8d8; + padding: 15px 20px; + } + .drop-down-menu label:hover, + .drop-down-menu ul li:hover { + background-color: #1d1c21; + color: white; + cursor: pointer; + } + .drop-down-menu input { + display: none; + z-index: 30; + } + .drop-down-menu input ~ ul { + visibility: hidden; + opacity: 0; + } + .drop-down-menu input:checked + label { + color: white; + } +*/ +/* + .drop-down-menu input:not(:checked) ~ ul { + visibility: visible; + opacity: 1; + } + .menu-list-ul { + position: absolute; + } + .menu-list { + margin: 0; + padding: 0; + } +*/ +/* + .animate { + -webkit-transition: all .3s; + -moz-transition: all .3s; + -ms-transition: all .3s; + -ms-transition: all .3s; + transition: all .3s; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + + -moz-backface-visibility: hidden; + + -ms-backface-visibility: hidden; + } +} +*/ +/* +@media (min-width: 700px) { + .drop-down-menu > input, + label { + visibility: hidden; + position: absolute; + } + .menu-list-ul { + text-align: center; + } + .menu-list-ul li { + display: inline; + padding-left: 2em; + padding-right: 2em; + } +} +*/ +/*lines next to titles*/ +/* +.line { + margin-top: 2em; + position: relative; + font-size: 30px; + z-index: 1; + overflow: hidden; + text-align: center; +} +.white-line:before, +.white-line:after { + background-color: #FFFFFF; + color: #FFFFFF; +} +.black-line:before, +.black-line:after { + background-color: black; + color: black; +} +.line:before, +.line:after { + position: absolute; + top: 51%; + width: 50%; + height: 1px; + content: '\a0'; +} +.line:before { + margin-left: -50%; + text-align: right; +} +*/ +/*Welcome page*/ + +/* +.welcome { + background-image: url("./assets/header-background-image.jpg"); + background-size: cover; + background-repeat: no-repeat; + padding-top: 6em; +} + +.welcome-section { + padding-top: 3.5em; + padding-bottom: 3.5em; + padding-left: 1em; + padding-right: 1em; + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: center; + align-content: center; + align-items: center; +} +*/ + /* +.circle-welcome-icon { + margin: 1em; + padding: 1em; + background-color: #fd6632; + -webkit-border-radius: 50em; + -moz-border-radius: 50em; + border-radius: 50em; +} +.welcome-icon { + margin: 0; +} +*/ +/* +.welcome-section h1 { + font-size: 1em; + margin: 0; +} +*/ +/*Services */ +/* +.services { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-content: space-between; + align-items: flex-start; +} +.services > h1 { + text-align: center; + margin: 0; + padding-top: 6%; + width: 100%; + height: 3em; +} +.services-p-one { + text-align: center; + margin: 0; + padding: 0; + width: 100%; + height: 10em; +} +.services-p-two { + text-align: center; + margin: 0; + padding: 0; + width: 20em; + height: 10em; +} +.services-p-three { + text-align: center; + margin: 0; + padding: 0; + width: 20em; + height: 10em; +} +.services-price { + background-color: #fd6632; +} +.services-list { + text-align: center; + padding: 0; + border: 0; + margin: 0; + list-style: none; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-content: flex-start; + align-items: center; +} +.services-list li { + padding: 1em; +} + +@media (max-width: 600px) { + .services-list li { + width: 95%; + } +} + +@media (min-width: 601px) { + .services-list li { + width: 30%; + } +} +*/ +/* +.circle-services-icon { + display: inline-block; + padding: 3em; + background-color: #ffffff; + -webkit-border-radius: 50em; + -moz-border-radius: 50em; + border-radius: 50em; +}*/ +/*pricing*/ + +/* +.price { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-content: flex-start; + align-items: flex-start; +} +.price > h1 { + width: 100%; + text-align: center; +} +.price-li { + width: 11em; + margin-bottom: 5%; +} +.price-li > h1 { + background-color: #7e3319; + color: white; + font-size: 1em; + padding: 3%; + margin-bottom: 0; +} +.price-li > p { + background-color: white; + padding: 2%; + margin-bottom: 1%; + margin-top: 1%; +} +*/ +/* +.price-li > button { + padding: 1%; + margin: 1%; + font-size: .8em; + border-style: solid; + border-color: #be4c25; + color: white; + background: #fd6632; + width: 13.5em; + border-top-width: 1em; + border-bottom-width: 1em; + border-left-width: 4.3em; + border-right-width: 4.3em; +} +*/ +/* +.price-ul { + width: 80em; + text-align: center; + padding: 0; + border: 0; + margin: 0; + list-style: none; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-content: flex-start; + align-items: center; +} +.price-ul > li { + padding-left: 2em; + padding-right: 2em; +} +*/ +/*Portfolio*/ + +/* +.carousel { + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: center; + align-content: center; + align-items: center; +} +.carousel img { + height: 17.8em; + width: 100%; + height: 100%; +} +.carousel-nav-bar > ul { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + align-content: flex-start; + align-items: flex-start; + list-style: circle; + font-size: 2em; +} +.carousel-selected { + color: #fd6632; +} +.portfolio nav { + text-align: center; +} +.portfolio-nav-ul { + margin: 1em; + padding: 0; +} +.portfolio-nav-ul > li { + display: inline; + padding: 1em; +} +@media (min-width: 1000px) { + .portfolio-article { + margin-left: 5em; + margin-right: 5em; + } +} +.portfolio-article figure { + height: 192px; + background-color: black; +} +.portfolio-article img:hover { + opacity: .5; + -moz-transition: all .6s; + -webkit-transition: all .6s; + transition: all .6s; +} +.portfolio-article { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-content: flex-start; + align-items: center; +} +.portfolio-article article { + padding-left: .5em; + padding-right: .5em; + padding-bottom: 1em; + text-align: center; +} +.portfolio-article img { + height: 12em; +} +*/ + +/*About-Skills*/ +/* +.about-skills { + background-color: #252629; + color: white; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-content: flex-start; + align-items: center; + padding-left: 5%; +} +.about-header { + width: 100%; +} +.about-skills-p { + width: 20em; + padding: 5%; + margin-right: 5%; +} +.skills { + width: 80%; +} +.about-skills > small { + width: 100em; + text-align: center; + margin: 1%; +} +.about-skills > button { + padding: 1%; + margin: 1%; + border: 0; + color: white; + background: #fd6632; +} +progress[value] { + -webkit-appearance: none; + appearance: none; + width: 100%; + height: 1.4em; +} +/* Foreground Colors */ +/* IE10 */ +/* +progress { + color: #fd6632; +} + + +progress::-moz-progress-bar { + background: #fd6632; +} + + +progress::-webkit-progress-value { + background: #fd6632; +} + + +progress[aria-valuenow]:before { + background: #fd6632; +} +/*google maps*/ +/* +.google-maps { + z-index: 1; + position: relative; +} +*/ +/*team*/ +/* +.team { + margin: 0 auto; + text-align: center; +} +*/ +/* +.team-section { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-content: flex-start; + align-items: center; +} +.team-p { + font-size: 1em; + width: 20em; + display: inline-block; +} +.circle-crop { + position: relative; + overflow: hidden; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + -ms-border-radius: 50%; + -o-border-radius: 50%; + border-radius: 50%; +} +.team-name { + font-size: 2em; + margin-bottom: 0; +} +.team-figcaption { + width: 17em; +} +.social-media-figure { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: center; + align-content: flex-start; + align-items: center; + width: 17em; + margin: 1em; +} +*/ +/* +.team-social-media-icon { + list-style-type: none; + margin: 0; + padding: 0; + padding-bottom: .75em; + margin-left: 8%; + display: flex; + position: relative; +} +.team-social-media-icon li { + display: inline; + float: left; +} +.team-facebook-icon, +.team-twitter-icon, +.team-dribble-icon, +.team-linkedIn-icon, +.team-googlePlus-icon { + padding-right: .25em; + padding-left: .25em; + width: 1.75em; + height: 1.75em; + margin-right: .35em; + margin-bottom: .5em; + margin-top: .5em; +} +.team-facebook-icon { + background-color: #305fc6; +} +.team-twitter-icon { + background-color: #32bdff; +} +.team-dribble-icon { + background-color: #dd2667; +} +.team-linkedIn-icon { + background-color: #2ca1eb; +} +.team-googlePlus-icon { + background-color: #fabc00; +}*/ +/*Clients*/ +/* +.clients-p { + text-align: center; +} +.right-button { + margin-left: 60%; +} + + + +.contact { + background-color: #fd6632; + padding-top: 1%; +} + +.contact-header { + color: #FFFFFF; + font-weight: 700; + margin-top: 5%; + width: 80%; +} + +.contact-p { + color: #FFFFFF; +}*/ +/* +.contact-form-submit-button { + background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6)); + background: -moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%); + background: -webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%); + background: -o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%); + background: -ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%); + background: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%); + filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6', GradientType=0); + background-color: #ffffff; + border: 1px solid #dcdcdc; + display: inline-block; + cursor: pointer; + color: #fd6632; + font-family: Arial; + font-size: 14px; + padding: 6px 24px; + text-decoration: none; + margin-top: .5em; + margin-bottom: 2em; +} +*/ +/* +.contact { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-content: flex-start; + align-items: center; +} +.contact-p { + text-align: center; + margin: 0 auto; + margin-top: 3em; + font-size: 1.3em; + line-height: 1.75em; + margin-bottom: 6em; + width: 60em; +} +.form-box { + width: 28em; + display: block; + height: 3em; + background-color: #252629; + opacity: .8; +} +.contact-message-box { + width: 28em; + height: 15em; + display: inline; + background-color: #252629; + opacity: .8; + font-family: Arial; +} +*/ +/* +.contact-form-submit-button { + margin-left: 14em; + margin-top: 1em; + margin-bottom: 2em; +} +*/ +/* +.google-maps-figure { + background-color: #252629; + opacity: .8; + position: absolute; + z-index: 3; + width: 23.8em; + height: 9em; + margin-top: 0; +} +.google-maps-phoneNumber { + margin-right: 2em; +} +.google-maps-phoneNumber, +.google-maps-emailAddress, +.google-maps-pinAddress { + color: #FFFFFF; +} +.contact-form { + padding: 1em; +} + +.google-maps-icons { + color: #FFFFFF; + width: 7%; + display: flex; +} + +.google-maps-image { + max-width: 100%; +} +.google-maps-section { + width: 30em; + padding-bottom: 6em; +}*/ \ No newline at end of file diff --git a/readme.md b/readme.md index ab748e6..cabea02 100644 --- a/readme.md +++ b/readme.md @@ -54,7 +54,75 @@ __DO NOT__ fence yourself in with invisible constraints. Unless it is specifical In the last assignment we covered the concepts behind semantic and modular HTML. This project assignment is engineered to build on top of those principals and work in more advanced presentation skills, to include RWD. +SOURCES & COLLABORATORS +-Authored by Sredna Kunowski & Brian Finck +Stackoverflow +-Use
element for icons? html5 +-Keeping a string of text together on one line by Jsous +-CSS Title with Horizontal Line on either side by Romain Pellerin +MDN +-HTML element reference +-
+-menu tag +- +-HTML forms guide + +W3Schools +-HTML