More structure for code

Move images into own folder, own file for JS and CSS, include
normalize.css from own file.

Author: drublic

slide-1.jpg renamed to img/slide-1.jpg

@@ -7,230 +7,8 @@
 
 	<!-- Please be aware that this prevents the user from scaling your website via pinch-gesture. The user is not able to zoom text or other elements. If you need scaling, do not use this snippet but the one listed on h5bp.com/viewport -->
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<style type="text/css">
-		/* start normalize */
-		article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif;color:#222}body{margin:0;font-size:1em;line-height:1.4}
-		a { color: #00e; }
-		a:visited { color: #551a8b; }
-		a:hover { color: #06e; }
-		a:focus { outline: thin dotted; }
-		a:hover, a:active { outline: 0; }
-		abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}ins{background:#ff9;color:#000;text-decoration:none}mark{background:#ff0;color:#000;font-style:italic;font-weight:bold}pre,code,kbd,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:"";content:none}small{font-size:85%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}ul,ol{margin:1em 0;padding:0 0 0 40px}dd{margin:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none;margin:0;padding:0}img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:0;margin:0;padding:0}label{cursor:pointer}legend{border:0;*margin-left:-7px;padding:0;white-space:normal}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*width:13px;*height:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top;resize:vertical}input:invalid,textarea:invalid{background-color:#f0dddd}table{border-collapse:collapse;border-spacing:0}td{vertical-align:top}.invisible{visibility:hidden}.clearfix:before,.clearfix:after{content:"";display:table}.clearfix:after{clear:both}.clearfix{*zoom:1}
-		/* normalize finished, your css below */
-
-		/* User customizable settings */
-
-		#slide-1,
-		#slide-2,
-		#slide-3,
-		#slide-4 {
-			background-size: cover;
-		}
-
-		#slide-1 {
-			background-image: url('slide-1.jpg');
-		}
-
-		#slide-2 {
-			background-image: url('slide-2.jpg');
-		}
-
-		#slide-3 {
-			background-image: url('slide-3.jpg');
-		}
-
-		#slide-4 {
-			background-image: url('slide-4.jpg');
-		}
-
-		/* CSS Components */
-
-		.slider-wrapper {
-			position: relative;
-			width: 100%;
-			height: 22rem;
-
-			overflow: hidden;
-
-			/* Dark background for nice transition effect */
-			background: #000;
-		}
-
-			/* Slider Start */
-
-			.slider-content {
-				padding: 0;
-				margin: 0;
-				max-height: 100%;
-
-				list-style: none;
-				overflow: hidden;
-			}
-
-				.slider-content > li {
-					position: relative;
-					float: left;
-
-					overflow: hidden;
-					opacity: 0;
-
-					-webkit-transform: translate3d(0, 0, 0);
-					   -moz-transform: translate3d(0, 0, 0);
-						 -o-transform: translate3d(0, 0, 0);
-						-ms-transform: translate3d(0, 0, 0);
-							transform: translate3d(0, 0, 0);
-
-					-webkit-backface-visibility: hidden;
-					   -moz-backface-visibility: hidden;
-					        backface-visibility: hidden;
-
-					-webkit-perspective: 1000;
-					   -moz-perspective: 1000;
-					        perspective: 1000;
-
-					/* Transition mode: cover-flow;
-						  doesn't work with position: absolute on li's */
-					-webkit-transition: all 1500ms ease-in-out;
-					   -moz-transition: all 1500ms ease-in-out;
-						 -o-transition: all 1500ms ease-in-out;
-						-ms-transition: all 1500ms ease-in-out;
-							transition: all 1500ms ease-in-out;
-
-					/* Transition mode: push; */
-					-webkit-transition: width 1000ms ease-in-out;
-					   -moz-transition: width 1000ms ease-in-out;
-						 -o-transition: width 1000ms ease-in-out;
-						-ms-transition: width 1000ms ease-in-out;
-							transition: width 1000ms ease-in-out;
-
-					/* Transition mode: opacity; */
-					-webkit-transition: opacity 750ms ease-in-out;
-					   -moz-transition: opacity 750ms ease-in-out;
-						 -o-transition: opacity 750ms ease-in-out;
-						-ms-transition: opacity 750ms ease-in-out;
-							transition: opacity 750ms ease-in-out;
-				}
-
-					.slider-content > li:not(:target) {
-						opacity: 0;
-						width: 0;
-					}
-
-					.slider-content > li:target,
-					.slider-content > .active {
-						opacity: 1;
-						width: 100%;
-						height: 22rem;
-					}
-
-					.slider-content > .active {
-						opacity: 1 !important;
-						width: 100% !important;
-					}
-
-			.slider--bullets {
-				position: absolute;
-				z-index: 30;
-
-				width: 4rem;
-				height: 1rem;
-				left: 47.5%;
-				bottom: 1rem;
-			}
-
-				.slider--bullets > li {
-					display: inline-block;
-				}
-
-				.slider--bullets > li > a {
-					margin: auto;
-					max-width: none;
-					text-decoration: none;
-					font-family: Helvetica, Arial, sans-serif !important;
-				}
-
-				.slider--bullets > li > a:before {
-					position: relative;
-					z-index: 90;
-
-					display: block;
-
-					content: '\2022';
-					font-size: 1.5rem;
-					line-height: 1;
-					text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
-
-					color: rgba(255, 255, 255, 0.65);
-				}
-
-					.slider--bullets > li > a.active:before {
-						color: #fff;
-					}
-
-			/* Slider End */
-
-
-			.slider-content > li > h2,
-			.slider-content > li > p,
-			.slider-content > li > a {
-				max-width: 27rem;
-				margin-left: 1rem;
-			}
-
-			.slider-content > li > h2,
-			.slider-content > li > p {
-				text-shadow: 0 0 5px rgba(0, 0, 0, 0.75);
-			}
-
-			.slider-content > li > h2 {
-				margin-top: 8rem;
-
-				font-family: 'museo-slab', Times, serif;
-				font-weight: 500;
-				line-height: 1;
-				letter-spacing: 1px;
-			}
-
-			.slider-content > li > h3,
-			.slider-content > li > p {
-				margin: 0 0 0 1rem;
-
-				font-family: 'Helvetica Neue', 'Helvetica', 'Segoe UI Light', sans-serif;
-
-				color: #fff;
-			}
-
-			.slider-content > li > h3 {
-				margin-top: 12rem;
-				font-size: 3rem;
-
-				font-weight: 100;
-				letter-spacing: 1px;
-			}
-
-			.slider-content > li > p {
-				font-weight: 100;
-				letter-spacing: 2px;
-
-				max-width: 17rem;
-			}
-
-			.slider-clickframe {
-				position: absolute;
-				top: 0;
-				left: 0;
-				right: 0;
-				bottom: 0;
-				z-index: 20;
-				width: 100%;
-				height: 100%;
-				background: #fff;
-				opacity: 0;
-				filter: alpha(opacity=0);
-
-				-webkit-tap-highlight-color: rgba(0,0,0,0);
-			}
-	</style>
+	<link rel="stylesheet" href="site/css/normalize.css">
+	<link rel="stylesheet" href="slider.css">
 </head>
 <body>
 
@@ -268,127 +46,6 @@ <h3>Warsaw at Night</h3>
 
 	</section>
 
-	<script>
-
-		var cssSlider = {
-
-				// CSS-Slider selectors
-				selectors: {
-					container: 'slider-wrapper',
-					sliderItems: '.slider-content > li',
-					firstSlide: '.slider-content > li:first-child',
-					activeSlide: '.slider-content > .active',
-					clickFrame: '.slider-clickframe',
-					activeBullet: '.slider--bullets .active',
-					allBulletLinks: 'a[href^="#slide-"]',
-				},
-
-				// Object to remove the class attr of 1st child if 1st child isn't active
-				sliderRemoveFirstClass: function() {
-
-					var hash = window.location.hash;
-
-					if(hash != "" && hash !== '#slide-1') {
-						document.querySelector(cssSlider.selectors.firstSlide).removeAttribute('class');
-					}
-
-				},
-
-				setClickFrame: function() {
-
-					var getContainer = document.getElementsByClassName(cssSlider.selectors.container);
-					var newNode = document.createElement("a");
-
-					var hash = window.location.hash;
-					var getHashId = 1; // Set initial value to 1 as this the 1st is always loaded
-
-					if(hash !== '') {
-						getHashId = hash.match(/\d+(\.\d+)?/g);
-						getHashId = parseInt(getHashId[0]);
-					}
-
-					var maxCount = document.querySelectorAll(cssSlider.selectors.sliderItems).length;
-					var nextItem;
-
-					if(getHashId < maxCount) {
-						nextItem = getHashId+1;
-					} else {
-						nextItem = 1;
-					}
-
-					newNode.setAttribute('class', 'slider-clickframe');
-					newNode.setAttribute('href', '#slide-'+nextItem);
-
-					getContainer[0].appendChild(newNode);
-
-				},
-
-				changeClickFrame: function() {
-
-					var getClickFrame = document.querySelector(cssSlider.selectors.clickFrame);
-
-					var hash = window.location.hash;
-					var getHashId = hash.match(/\d+(\.\d+)?/g);
-
-					var maxCount = document.querySelectorAll(cssSlider.selectors.sliderItems).length;
-					var nextItem;
-
-					getHashId = parseInt(getHashId[0]);
-
-					if(getHashId < maxCount) {
-						nextItem = getHashId+1;
-					} else {
-						nextItem = 1;
-					}
-
-					getClickFrame.setAttribute('href', '#slide-'+nextItem);
-
-				},
-
-				setActiveItems: function() {
-
-					var hash = window.location.hash;
-
-					// Set active Slide
-					var getActiveSlide = document.querySelector(cssSlider.selectors.activeSlide);
-
-					if (getActiveSlide !== null) {
-						getActiveSlide.removeAttribute('class');
-					}
-
-					// Set active Bullet
-					var activeSlideBullet = document.querySelector(cssSlider.selectors.activeBullet);
-					var sliderBulletArray = document.querySelectorAll(cssSlider.selectors.allBulletLinks);
-
-					// Remove old active Class
-					activeSlideBullet.removeAttribute('class');
-
-					// Set new active Class
-					document.querySelector('a[href="'+hash+'"]').setAttribute('class', 'active');
-				},
-
-				init: function() {
-					var hash = window.location.hash;
-
-					// Set clickable frame on Slider
-					window.addEventListener('DOMContentLoaded', cssSlider.setClickFrame);
-					window.addEventListener('hashchange', cssSlider.changeClickFrame);
-
-					// Set active item
-					window.addEventListener('hashchange', cssSlider.setActiveItems);
-
-					if(hash.indexOf("slide-") >= 0) {
-						window.addEventListener('DOMContentLoaded', cssSlider.setActiveItems);
-					}
-
-				}
-
-		};
-
-		// Initialize cssSlider
-		cssSlider.init();
-
-	</script>
-
+	<script src="slider.js"></script>
 </body>
 </html>