Added course files
Shaun Pelling
parent
8d7ec98fb8
commit
144d54b312
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,42 @@
|
|||
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,
|
||||
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;
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
@mixin ninjalink ($link, $visit, $hover, $active) {
|
||||
a {
|
||||
color: $link;
|
||||
&:visited {
|
||||
color: $visit;
|
||||
}
|
||||
&:hover {
|
||||
color: $hover;
|
||||
}
|
||||
&:active {
|
||||
color: $active;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin keyframes($animation-name) {
|
||||
@-webkit-keyframes #{$animation-name} {
|
||||
@content;
|
||||
}
|
||||
@-moz-keyframes #{$animation-name} {
|
||||
@content;
|
||||
}
|
||||
@-ms-keyframes #{$animation-name} {
|
||||
@content;
|
||||
}
|
||||
@-o-keyframes #{$animation-name} {
|
||||
@content;
|
||||
}
|
||||
@keyframes #{$animation-name} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
$base-color: #777;
|
||||
$second-color: #333;
|
||||
$heading-font: Arial;
|
||||
|
||||
.element {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: black;
|
||||
p{
|
||||
color: $second-color;
|
||||
}
|
||||
}
|
||||
|
||||
.link{
|
||||
color: $second-color;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.heading{
|
||||
font-family: $heading-font;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,391 @@
|
|||
/*! ResponsiveSlides.js v1.54
|
||||
* http://responsiveslides.com
|
||||
* http://viljamis.com
|
||||
*
|
||||
* Copyright (c) 2011-2012 @viljamis
|
||||
* Available under the MIT license
|
||||
*/
|
||||
|
||||
/*jslint browser: true, sloppy: true, vars: true, plusplus: true, indent: 2 */
|
||||
|
||||
(function ($, window, i) {
|
||||
$.fn.responsiveSlides = function (options) {
|
||||
|
||||
// Default settings
|
||||
var settings = $.extend({
|
||||
"auto": true, // Boolean: Animate automatically, true or false
|
||||
"speed": 500, // Integer: Speed of the transition, in milliseconds
|
||||
"timeout": 4000, // Integer: Time between slide transitions, in milliseconds
|
||||
"pager": false, // Boolean: Show pager, true or false
|
||||
"nav": false, // Boolean: Show navigation, true or false
|
||||
"random": false, // Boolean: Randomize the order of the slides, true or false
|
||||
"pause": false, // Boolean: Pause on hover, true or false
|
||||
"pauseControls": true, // Boolean: Pause when hovering controls, true or false
|
||||
"prevText": "Previous", // String: Text for the "previous" button
|
||||
"nextText": "Next", // String: Text for the "next" button
|
||||
"maxwidth": "", // Integer: Max-width of the slideshow, in pixels
|
||||
"navContainer": "", // Selector: Where auto generated controls should be appended to, default is after the <ul>
|
||||
"manualControls": "", // Selector: Declare custom pager navigation
|
||||
"namespace": "rslides", // String: change the default namespace used
|
||||
"before": $.noop, // Function: Before callback
|
||||
"after": $.noop // Function: After callback
|
||||
}, options);
|
||||
|
||||
return this.each(function () {
|
||||
|
||||
// Index for namespacing
|
||||
i++;
|
||||
|
||||
var $this = $(this),
|
||||
|
||||
// Local variables
|
||||
vendor,
|
||||
selectTab,
|
||||
startCycle,
|
||||
restartCycle,
|
||||
rotate,
|
||||
$tabs,
|
||||
|
||||
// Helpers
|
||||
index = 0,
|
||||
$slide = $this.children(),
|
||||
length = $slide.size(),
|
||||
fadeTime = parseFloat(settings.speed),
|
||||
waitTime = parseFloat(settings.timeout),
|
||||
maxw = parseFloat(settings.maxwidth),
|
||||
|
||||
// Namespacing
|
||||
namespace = settings.namespace,
|
||||
namespaceIdx = namespace + i,
|
||||
|
||||
// Classes
|
||||
navClass = namespace + "_nav " + namespaceIdx + "_nav",
|
||||
activeClass = namespace + "_here",
|
||||
visibleClass = namespaceIdx + "_on",
|
||||
slideClassPrefix = namespaceIdx + "_s",
|
||||
|
||||
// Pager
|
||||
$pager = $("<ul class='" + namespace + "_tabs " + namespaceIdx + "_tabs' />"),
|
||||
|
||||
// Styles for visible and hidden slides
|
||||
visible = {"float": "left", "position": "relative", "opacity": 1, "zIndex": 2},
|
||||
hidden = {"float": "none", "position": "absolute", "opacity": 0, "zIndex": 1},
|
||||
|
||||
// Detect transition support
|
||||
supportsTransitions = (function () {
|
||||
var docBody = document.body || document.documentElement;
|
||||
var styles = docBody.style;
|
||||
var prop = "transition";
|
||||
if (typeof styles[prop] === "string") {
|
||||
return true;
|
||||
}
|
||||
// Tests for vendor specific prop
|
||||
vendor = ["Moz", "Webkit", "Khtml", "O", "ms"];
|
||||
prop = prop.charAt(0).toUpperCase() + prop.substr(1);
|
||||
var i;
|
||||
for (i = 0; i < vendor.length; i++) {
|
||||
if (typeof styles[vendor[i] + prop] === "string") {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
})(),
|
||||
|
||||
// Fading animation
|
||||
slideTo = function (idx) {
|
||||
settings.before(idx);
|
||||
// If CSS3 transitions are supported
|
||||
if (supportsTransitions) {
|
||||
$slide
|
||||
.removeClass(visibleClass)
|
||||
.css(hidden)
|
||||
.eq(idx)
|
||||
.addClass(visibleClass)
|
||||
.css(visible);
|
||||
index = idx;
|
||||
setTimeout(function () {
|
||||
settings.after(idx);
|
||||
}, fadeTime);
|
||||
// If not, use jQuery fallback
|
||||
} else {
|
||||
$slide
|
||||
.stop()
|
||||
.fadeOut(fadeTime, function () {
|
||||
$(this)
|
||||
.removeClass(visibleClass)
|
||||
.css(hidden)
|
||||
.css("opacity", 1);
|
||||
})
|
||||
.eq(idx)
|
||||
.fadeIn(fadeTime, function () {
|
||||
$(this)
|
||||
.addClass(visibleClass)
|
||||
.css(visible);
|
||||
settings.after(idx);
|
||||
index = idx;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Random order
|
||||
if (settings.random) {
|
||||
$slide.sort(function () {
|
||||
return (Math.round(Math.random()) - 0.5);
|
||||
});
|
||||
$this
|
||||
.empty()
|
||||
.append($slide);
|
||||
}
|
||||
|
||||
// Add ID's to each slide
|
||||
$slide.each(function (i) {
|
||||
this.id = slideClassPrefix + i;
|
||||
});
|
||||
|
||||
// Add max-width and classes
|
||||
$this.addClass(namespace + " " + namespaceIdx);
|
||||
if (options && options.maxwidth) {
|
||||
$this.css("max-width", maxw);
|
||||
}
|
||||
|
||||
// Hide all slides, then show first one
|
||||
$slide
|
||||
.hide()
|
||||
.css(hidden)
|
||||
.eq(0)
|
||||
.addClass(visibleClass)
|
||||
.css(visible)
|
||||
.show();
|
||||
|
||||
// CSS transitions
|
||||
if (supportsTransitions) {
|
||||
$slide
|
||||
.show()
|
||||
.css({
|
||||
// -ms prefix isn't needed as IE10 uses prefix free version
|
||||
"-webkit-transition": "opacity " + fadeTime + "ms ease-in-out",
|
||||
"-moz-transition": "opacity " + fadeTime + "ms ease-in-out",
|
||||
"-o-transition": "opacity " + fadeTime + "ms ease-in-out",
|
||||
"transition": "opacity " + fadeTime + "ms ease-in-out"
|
||||
});
|
||||
}
|
||||
|
||||
// Only run if there's more than one slide
|
||||
if ($slide.size() > 1) {
|
||||
|
||||
// Make sure the timeout is at least 100ms longer than the fade
|
||||
if (waitTime < fadeTime + 100) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Pager
|
||||
if (settings.pager && !settings.manualControls) {
|
||||
var tabMarkup = [];
|
||||
$slide.each(function (i) {
|
||||
var n = i + 1;
|
||||
tabMarkup +=
|
||||
"<li>" +
|
||||
"<a href='#' class='" + slideClassPrefix + n + "'>" + n + "</a>" +
|
||||
"</li>";
|
||||
});
|
||||
$pager.append(tabMarkup);
|
||||
|
||||
// Inject pager
|
||||
if (options.navContainer) {
|
||||
$(settings.navContainer).append($pager);
|
||||
} else {
|
||||
$this.after($pager);
|
||||
}
|
||||
}
|
||||
|
||||
// Manual pager controls
|
||||
if (settings.manualControls) {
|
||||
$pager = $(settings.manualControls);
|
||||
$pager.addClass(namespace + "_tabs " + namespaceIdx + "_tabs");
|
||||
}
|
||||
|
||||
// Add pager slide class prefixes
|
||||
if (settings.pager || settings.manualControls) {
|
||||
$pager.find('li').each(function (i) {
|
||||
$(this).addClass(slideClassPrefix + (i + 1));
|
||||
});
|
||||
}
|
||||
|
||||
// If we have a pager, we need to set up the selectTab function
|
||||
if (settings.pager || settings.manualControls) {
|
||||
$tabs = $pager.find('a');
|
||||
|
||||
// Select pager item
|
||||
selectTab = function (idx) {
|
||||
$tabs
|
||||
.closest("li")
|
||||
.removeClass(activeClass)
|
||||
.eq(idx)
|
||||
.addClass(activeClass);
|
||||
};
|
||||
}
|
||||
|
||||
// Auto cycle
|
||||
if (settings.auto) {
|
||||
|
||||
startCycle = function () {
|
||||
rotate = setInterval(function () {
|
||||
|
||||
// Clear the event queue
|
||||
$slide.stop(true, true);
|
||||
|
||||
var idx = index + 1 < length ? index + 1 : 0;
|
||||
|
||||
// Remove active state and set new if pager is set
|
||||
if (settings.pager || settings.manualControls) {
|
||||
selectTab(idx);
|
||||
}
|
||||
|
||||
slideTo(idx);
|
||||
}, waitTime);
|
||||
};
|
||||
|
||||
// Init cycle
|
||||
startCycle();
|
||||
}
|
||||
|
||||
// Restarting cycle
|
||||
restartCycle = function () {
|
||||
if (settings.auto) {
|
||||
// Stop
|
||||
clearInterval(rotate);
|
||||
// Restart
|
||||
startCycle();
|
||||
}
|
||||
};
|
||||
|
||||
// Pause on hover
|
||||
if (settings.pause) {
|
||||
$this.hover(function () {
|
||||
clearInterval(rotate);
|
||||
}, function () {
|
||||
restartCycle();
|
||||
});
|
||||
}
|
||||
|
||||
// Pager click event handler
|
||||
if (settings.pager || settings.manualControls) {
|
||||
$tabs.bind("click", function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
if (!settings.pauseControls) {
|
||||
restartCycle();
|
||||
}
|
||||
|
||||
// Get index of clicked tab
|
||||
var idx = $tabs.index(this);
|
||||
|
||||
// Break if element is already active or currently animated
|
||||
if (index === idx || $("." + visibleClass).queue('fx').length) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Remove active state from old tab and set new one
|
||||
selectTab(idx);
|
||||
|
||||
// Do the animation
|
||||
slideTo(idx);
|
||||
})
|
||||
.eq(0)
|
||||
.closest("li")
|
||||
.addClass(activeClass);
|
||||
|
||||
// Pause when hovering pager
|
||||
if (settings.pauseControls) {
|
||||
$tabs.hover(function () {
|
||||
clearInterval(rotate);
|
||||
}, function () {
|
||||
restartCycle();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Navigation
|
||||
if (settings.nav) {
|
||||
var navMarkup =
|
||||
"<a href='#' class='" + navClass + " prev'>" + settings.prevText + "</a>" +
|
||||
"<a href='#' class='" + navClass + " next'>" + settings.nextText + "</a>";
|
||||
|
||||
// Inject navigation
|
||||
if (options.navContainer) {
|
||||
$(settings.navContainer).append(navMarkup);
|
||||
} else {
|
||||
$this.after(navMarkup);
|
||||
}
|
||||
|
||||
var $trigger = $("." + namespaceIdx + "_nav"),
|
||||
$prev = $trigger.filter(".prev");
|
||||
|
||||
// Click event handler
|
||||
$trigger.bind("click", function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
var $visibleClass = $("." + visibleClass);
|
||||
|
||||
// Prevent clicking if currently animated
|
||||
if ($visibleClass.queue('fx').length) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Adds active class during slide animation
|
||||
// $(this)
|
||||
// .addClass(namespace + "_active")
|
||||
// .delay(fadeTime)
|
||||
// .queue(function (next) {
|
||||
// $(this).removeClass(namespace + "_active");
|
||||
// next();
|
||||
// });
|
||||
|
||||
// Determine where to slide
|
||||
var idx = $slide.index($visibleClass),
|
||||
prevIdx = idx - 1,
|
||||
nextIdx = idx + 1 < length ? index + 1 : 0;
|
||||
|
||||
// Go to slide
|
||||
slideTo($(this)[0] === $prev[0] ? prevIdx : nextIdx);
|
||||
if (settings.pager || settings.manualControls) {
|
||||
selectTab($(this)[0] === $prev[0] ? prevIdx : nextIdx);
|
||||
}
|
||||
|
||||
if (!settings.pauseControls) {
|
||||
restartCycle();
|
||||
}
|
||||
});
|
||||
|
||||
// Pause when hovering navigation
|
||||
if (settings.pauseControls) {
|
||||
$trigger.hover(function () {
|
||||
clearInterval(rotate);
|
||||
}, function () {
|
||||
restartCycle();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Max-width fallback
|
||||
if (typeof document.body.style.maxWidth === "undefined" && options.maxwidth) {
|
||||
var widthSupport = function () {
|
||||
$this.css("width", "100%");
|
||||
if ($this.width() > maxw) {
|
||||
$this.css("width", maxw);
|
||||
}
|
||||
};
|
||||
|
||||
// Init fallback
|
||||
widthSupport();
|
||||
$(window).bind("resize", function () {
|
||||
widthSupport();
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
})(jQuery, this, 0);
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
$(document).ready(function(){
|
||||
|
||||
$('.menu').on('click', function(){
|
||||
$(this).toggleClass('open');
|
||||
});
|
||||
|
||||
$('.thumbnail').on('click', function(){
|
||||
$('.pop-up').fadeIn(100);
|
||||
});
|
||||
|
||||
$(".rslides").responsiveSlides();
|
||||
|
||||
});
|
||||
Loading…
Reference in New Issue