Adding new developments

4 years ago · 243a252e24
parent 8542bc78d3
commit 243a252e24
102 changed files with 8798 additions and 194 deletions
--- a/animations/3d-synth-canyon-animation/README.md
+++ b/animations/3d-synth-canyon-animation/README.md
@ -0,0 +1,5 @@
+# [3D] Synth Canyon Animation
+
+I wanted to do some experimentation with manipulating geometries and layering several simple shader effects, and this is what I came up with.
+
+The Soundcloud embed is just there for ambiance.
--- a/animations/3d-synth-canyon-animation/index.html
+++ b/animations/3d-synth-canyon-animation/index.html
@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>3D Synth Canyon Animation</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+
+<script id="vertexShader" type="x-shader/x-vertex">
+  attribute vec3 center;
+  uniform float uTime;
+  varying float vDisp;
+  varying vec3 vCenter;
+  varying vec2 vSceneYZ;
+  
+  #define PULSE_TIME 1.16
+
+  void main() {
+    vCenter = center;
+    vDisp = max(
+      max(0., 1.-pow(3.*abs(uv.y-fract(-uTime*PULSE_TIME)+0.5),0.5)),
+      1.-pow(3.*abs(uv.y-fract(-uTime*PULSE_TIME)-0.5),0.5)
+    );
+    // FIXME - magic numbers in displacement calculation
+    vec4 scenePosition = modelViewMatrix*vec4(position+vec3(0.,1.,0.)*2.5*vDisp,1.);
+    vSceneYZ = scenePosition.yz;
+    gl_Position = projectionMatrix*scenePosition;
+  }
+</script>
+<script id="fragmentShader" type="x-shader/x-fragment">
+  uniform float uResolutionScale;
+  varying float vDisp;
+  varying vec3 vCenter;
+  varying vec2 vSceneYZ;
+
+  #define PI 3.14159265359
+  #define WIREFRAME_WIDTH 2.5
+  
+  // adapted from https://github.com/mrdoob/three.js/blob/dev/examples/webgl_materials_wireframe.html for wireframe effect
+  float edgeFactorTri() {
+    vec3 a3 = smoothstep(vec3(0.), fwidth(vCenter.xyz)*WIREFRAME_WIDTH/uResolutionScale, vCenter.xyz);
+    return min(min(a3.x, a3.y), a3.z);
+  }
+
+  void main( void ) {
+    if (edgeFactorTri() > 0.98) discard;
+    vec3 color = mix(
+      mix(
+        mix(
+          vec3(1.,0.,0.6), // magenta base
+          vec3(1., 0.9, .0), min(1.9,vDisp) // yellow pulse
+        ),
+        vec3(1.), max(0., (vSceneYZ.s-20.) / 120.) // lighter on top; FIXME - magic numbers with Y position
+      ),
+      vec3(0.), max(0., min(1., (-vSceneYZ.t - 80.) / 80.)) // fade to black; FIXME - magic numbers with Z position
+    );
+    gl_FragColor = gl_FrontFacing ?
+      vec4(color, 1.0) :
+      vec4(color, 0.5);
+  }
+</script>
+<div id="container"></div>
+<div id="info">Synth Canyon Animation - with <a href="https://threejs.org" target="_blank">three.js</a>
+</div>
+<div id="controls">
+  <label for="resolution">resolution: </label>
+  <select id="resolution" value="2">
+    <option value="0.5">0.5x</option>
+    <option value="1" selected>1x</option>
+    <option value="2">2x</option>
+    <option value="4">4x</option>
+    <option value="8">8x</option>
+  </select>
+  <label for="hide-audio">hide audio: </label>
+  <input id="hide-audio" type="checkbox"></input>
+  <iframe class="audio-embed" width="350" height="83" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/450662742&color=%23a575d0&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>
+</div>
+
+<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/168886/RenderPass.110.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/168886/EffectComposer.110.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/168886/UnrealBloomPass.110.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
--- a/animations/3d-synth-canyon-animation/script.js
+++ b/animations/3d-synth-canyon-animation/script.js
@ -0,0 +1,150 @@
+const SHOW_STATS = false;
+const CANYON_WIDTH = 400;
+const CANYON_LENGTH = 120;
+const CANYON_SEGMENTS_W = 27;
+const CANYON_SEGMENTS_L = 10;
+const CLIFF_BASE = 60;
+const CLIFF_VARY = 15;
+const FLOOR_VARY = 10;
+const CANYON_SPEED = 70;
+const CAMERA_DRIFT_DISTANCE = 15;
+const CAMERA_DRIFT_SPEED = 0.05;
+
+let lastUpdate;
+let camera, scene, renderer, composer;
+let cameraBaseX, cameraBaseY;
+let uResolutionScale;
+let uTime;
+let canyonA, canyonB;
+
+function init() {
+  // stats
+  if (SHOW_STATS) {
+    const stats = new Stats();
+    stats.domElement.classList.add('stats-element');
+    document.body.appendChild(stats.domElement);
+    requestAnimationFrame(function updateStats(){
+      stats.update();
+      requestAnimationFrame(updateStats);
+    });
+  }
+  
+  // basic setup
+  const container = document.getElementById('container');
+  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 300);
+  const cameraDistance = 70;
+  const cameraAngle = .05*Math.PI;
+  camera.position.z = cameraDistance;
+  cameraBaseX = 0;
+  cameraBaseY = 0.3 * (CLIFF_BASE + CLIFF_VARY + FLOOR_VARY);
+  camera.position.y = cameraBaseY;
+  camera.rotation.x = -cameraAngle;
+  scene = new THREE.Scene();
+  renderer = new THREE.WebGLRenderer({ antialias: true });
+  renderer.setPixelRatio(window.devicePixelRatio);
+
+  // shader setup
+  lastUpdate = new Date().getTime();
+  const vertexShader = document.getElementById( 'vertexShader' ).textContent;
+  const fragmentShader = document.getElementById( 'fragmentShader' ).textContent;
+  uTime = { type: 'f', value: 1.0 };
+  uResolutionScale = { type: 'f', value: 1.0 };
+  
+  // add objects
+  const canyonGeometry = new THREE.PlaneGeometry(CANYON_WIDTH, CANYON_LENGTH, CANYON_SEGMENTS_W, CANYON_SEGMENTS_L);
+  canyonGeometry.rotateX(-0.5 * Math.PI);
+  const reverseGeometry = canyonGeometry.clone();
+  const simplexA = new SimplexNoise(Math.floor(0xffff*Math.random()));
+  const simplexB = new SimplexNoise(Math.floor(0xffff*Math.random()));
+  for (let i = 0, l = canyonGeometry.vertices.length; i < l; i++) {
+    const { x, z } = canyonGeometry.vertices[i];
+    canyonGeometry.vertices[i].y =
+      Math.min(1.0, Math.pow(x/50, 4)) * Math.round(CLIFF_BASE + simplexA.noise2D(x,z) * CLIFF_VARY) + Math.round(simplexB.noise2D(x,z) * FLOOR_VARY);
+    reverseGeometry.vertices[i].y = 
+      Math.min(1.0, Math.pow(x/50, 4)) * Math.round(CLIFF_BASE + simplexA.noise2D(x,-z) * CLIFF_VARY) + Math.round(simplexB.noise2D(x,-z) * FLOOR_VARY);
+  }
+  const canyonMaterial = new THREE.ShaderMaterial({
+    transparent: true,
+    side: THREE.DoubleSide,
+    uniforms: { uTime, uResolutionScale },
+    vertexShader,
+    fragmentShader
+  });
+  canyonMaterial.extensions.derivatives = true;
+  canyonA = new THREE.Mesh(geomToBufferGeomWithCenters(canyonGeometry), canyonMaterial);
+  scene.add(canyonA);
+  canyonB = new THREE.Mesh(geomToBufferGeomWithCenters(reverseGeometry), canyonMaterial);
+  canyonB.position.z -= CANYON_LENGTH;
+  scene.add(canyonB);
+  container.appendChild(renderer.domElement);
+  
+  // effect composition
+  const renderScene = new THREE.RenderPass(scene, camera);
+  const bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.86);
+  bloomPass.threshold = 0.3;
+  bloomPass.strength = 2.5 * uResolutionScale.value;
+  bloomPass.radius = 0.3 * uResolutionScale.value;
+  composer = new THREE.EffectComposer(renderer);
+  composer.addPass(renderScene);
+  composer.addPass(bloomPass);
+  
+  // event listeners
+  onWindowResize();
+  window.addEventListener( 'resize', onWindowResize, false);
+  document.getElementById('resolution').addEventListener('change', onResolutionChange, false);
+}
+
+// events
+function onWindowResize(evt) {
+  camera.aspect =  window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  composer.setSize(window.innerWidth, window.innerHeight);
+}
+function onResolutionChange(evt) {
+  uResolutionScale.value = parseFloat(evt.target.value);
+  bloomPass.strength = 2.5 * uResolutionScale.value;
+  bloomPass.radius = 0.3 * uResolutionScale.value;
+  renderer.setPixelRatio( window.devicePixelRatio / uResolutionScale.value );
+}
+function animate() {
+  const currentTime = new Date().getTime();
+  const timeSinceLastUpdate = currentTime - lastUpdate;
+  lastUpdate = currentTime;
+  const deltaTime = timeSinceLastUpdate / 1000;
+  uTime.value += deltaTime;
+  // move canyons
+  canyonA.position.z += deltaTime * CANYON_SPEED;
+  canyonB.position.z += deltaTime * CANYON_SPEED;
+  if (canyonA.position.z > CANYON_LENGTH) {
+    canyonA.position.z -= 2*CANYON_LENGTH;
+  }
+  if (canyonB.position.z > CANYON_LENGTH) {
+    canyonB.position.z -= 2*CANYON_LENGTH;
+  }
+  // drift camera (simple lissajous)
+  camera.position.x = cameraBaseX + CAMERA_DRIFT_DISTANCE*Math.sin(7*CAMERA_DRIFT_SPEED*Math.PI*uTime.value);
+  camera.position.y = cameraBaseY + CAMERA_DRIFT_DISTANCE*Math.sin(5*CAMERA_DRIFT_SPEED*Math.PI*uTime.value);
+  // render
+  // renderer.render( scene, camera );
+  composer.render();
+  requestAnimationFrame( animate );
+}
+
+// boot
+init();
+animate();
+
+// utils
+// adapted from https://github.com/mrdoob/three.js/blob/dev/examples/webgl_materials_wireframe.html for wireframe effect
+function geomToBufferGeomWithCenters(geom) {
+  const buffGeom = new THREE.BufferGeometry().fromGeometry(geom);
+  const vectors = [new THREE.Vector3(1,0,0), new THREE.Vector3(0,1,0), new THREE.Vector3(0,0,1)];
+  const { position } = buffGeom.attributes;
+  const centers = new Float32Array(position.count*3);
+  for (let i=0, l=position.count; i<l; i++) {
+    vectors[i%3].toArray(centers,i*3);
+  }
+  buffGeom.setAttribute('center', new THREE.BufferAttribute(centers,3));
+  return buffGeom;
+}
--- a/animations/3d-synth-canyon-animation/style.css
+++ b/animations/3d-synth-canyon-animation/style.css
@ -0,0 +1,50 @@
+body {
+  color: #ffffff;
+  font-family: Monospace;
+  font-size: 13px;
+  text-align: center;
+  font-weight: bold;
+  background-color: #000;
+  margin: 0px;
+  overflow: hidden;
+}
+
+#info, #controls {
+  position: absolute;
+  width: 100%;
+  padding: 5px;
+  background: rgba(0, 0, 0, 0.4);
+}
+
+#info {
+  top: 0;
+}
+
+#controls {
+  bottom: 0;
+}
+
+a {
+  color: #ffffff;
+  -webkit-transition: 150ms all;
+  transition: 150ms all;
+}
+a:hover, a:focus {
+  color: #ffc107;
+}
+
+.stats-element {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.audio-embed {
+  position: absolute;
+  left: 0;
+  bottom: 100%;
+  border: 0;
+}
+#hide-audio:checked + .audio-embed {
+  opacity: 0;
+}
--- a/animations/basic-matrix-effect/README.md
+++ b/animations/basic-matrix-effect/README.md
@ -0,0 +1,3 @@
+# Basic Matrix Effect
+
+Hello World in 92 Languages falling down in Matrix code rain
--- a/animations/basic-matrix-effect/index.html
+++ b/animations/basic-matrix-effect/index.html
@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Basic Matrix Effect</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+
+<!-- Hello World in 92 Languages falling down in Matrix code rain-->
+
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
--- a/animations/basic-matrix-effect/script.js
+++ b/animations/basic-matrix-effect/script.js
@ -0,0 +1,189 @@
+const langs = [
+	"Hello World",
+	"مرحبا بالعالم",
+	"Salam Dünya",
+	"Прывітанне Сусвет",
+	"Здравей свят",
+	"ওহে বিশ্ব",
+	"Zdravo svijete",
+	"Hola món",
+	"Kumusta Kalibutan",
+	"Ahoj světe",
+	"Helo Byd",
+	"Hej Verden",
+	"Hallo Welt",
+	"Γειά σου Κόσμε",
+	"Hello World",
+	"Hello World",
+	"Hola Mundo",
+	"Tere, Maailm",
+	"Kaixo Mundua",
+	"سلام دنیا",
+	"Hei maailma",
+	"Bonjour le monde",
+	"Dia duit an Domhan",
+	"Ola mundo",
+	"હેલો વર્લ્ડ",
+	"Sannu Duniya",
+	"नमस्ते दुनिया",
+	"Hello World",
+	"Pozdrav svijete",
+	"Bonjou Mondyal la",
+	"Helló Világ",
+	"Բարեւ աշխարհ",
+	"Halo Dunia",
+	"Ndewo Ụwa",
+	"Halló heimur",
+	"Ciao mondo",
+	"שלום עולם",
+	"こんにちは世界",
+	"Hello World",
+	"Გამარჯობა მსოფლიო",
+	"Сәлем Әлем",
+	"សួស្តីពិភពលោក",
+	"ಹಲೋ ವರ್ಲ್ಡ್",
+	"안녕하세요 월드",
+	"Ciao mondo",
+	"ສະບາຍດີຊາວໂລກ",
+	"Labas pasauli",
+	"Sveika pasaule",
+	"Hello World",
+	"Kia Ora",
+	"Здраво свету",
+	"ഹലോ വേൾഡ്",
+	"Сайн уу",
+	"हॅलो वर्ल्ड",
+	"Hai dunia",
+	"Hello dinja",
+	"မင်္ဂလာပါကမ္ဘာလောက",
+	"नमस्कार संसार",
+	"Hallo Wereld",
+	"Hei Verden",
+	"Moni Dziko Lapansi",
+	"ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ ਦੁਨਿਆ",
+	"Witaj świecie",
+	"Olá Mundo",
+	"Salut Lume",
+	"Привет, мир",
+	"හෙලෝ වර්ල්ඩ්",
+	"Ahoj svet",
+	"Pozdravljen, svet",
+	"Waad salaaman tihiin",
+	"Përshendetje Botë",
+	"Здраво Свете",
+	"Lefatše Lumela",
+	"Halo Dunya",
+	"Hej världen",
+	"Salamu, Dunia",
+	"ஹலோ வேர்ல்ட்",
+	"హలో వరల్డ్",
+	"Салом Ҷаҳон",
+	"สวัสดีชาวโลก",
+	"Kamusta Mundo",
+	"Selam Dünya",
+	"Привіт Світ",
+	"ہیلو ورلڈ",
+	"Salom Dunyo",
+	"Chào thế giới",
+	"העלא וועלט",
+	"Mo ki O Ile Aiye",
+	"你好，世界",
+	"你好，世界",
+	"你好，世界",
+	"Sawubona Mhlaba"
+];
+// hello world in 92 Languages
+
+let charSize = 18;
+let fallRate = charSize / 2;
+let streams;
+
+// -------------------------------
+class Char {
+	constructor(value, x, y, speed) {
+		this.value = value;
+		this.x = x;
+		this.y = y;
+		this.speed = speed;
+	}
+
+	draw() {
+		const flick = random(100);
+		// 10 percent chance of flickering a number instead
+		if (flick < 10) {
+			fill(120, 30, 100);
+			text(round(random(9)), this.x, this.y);
+		} else {
+			text(this.value, this.x, this.y);
+		}
+
+		// fall down
+		this.y = this.y > height ? 0 : this.y + this.speed;
+	}
+}
+
+// -------------------------------------
+class Stream {
+	constructor(text, x) {
+		const y = random(text.length);
+		const speed = random(2, 10);
+		this.chars = [];
+
+		for (let i = text.length; i >= 0; i--) {
+			this.chars.push(
+				new Char(text[i], x, (y + text.length - i) * charSize, speed)
+			);
+		}
+	}
+
+	draw() {
+		fill(120, 100, 100);
+		this.chars.forEach((c, i) => {
+			// 30 percent chance of lit tail
+			const lit = random(100);
+			if (lit < 30) {
+				if (i === this.chars.length - 1) {
+					fill(120, 30, 100);
+				} else {
+					fill(120, 100, 90);
+				}
+			}
+
+			c.draw();
+		});
+	}
+}
+
+function createStreams() {
+	// create random streams from langs that span the width
+	for (let i = 0; i < width; i += charSize) {
+		streams.push(new Stream(random(langs), i));
+	}
+}
+
+function reset() {
+	streams = [];
+	createStreams();
+}
+
+function setup() {
+	createCanvas(innerWidth, innerHeight);
+	reset();
+	frameRate(20);
+	colorMode(HSB);
+	noStroke();
+	textSize(charSize);
+	textFont("monospace");
+	background(0);
+}
+
+function draw() {
+	background(0, 0.4);
+	streams.forEach((s) => s.draw());
+}
+
+function windowResized() {
+	resizeCanvas(innerWidth, innerHeight);
+	background(0);
+	reset();
+}
--- a/animations/basic-matrix-effect/style.css
+++ b/animations/basic-matrix-effect/style.css
@ -0,0 +1,9 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  overflow: hidden;
+  height: 100%;
+}
--- a/animations/marvel-intro-animation/README.md
+++ b/animations/marvel-intro-animation/README.md
@ -0,0 +1,2 @@
+# Marvel Intro Animation
+
--- a/animations/marvel-intro-animation/index.html
+++ b/animations/marvel-intro-animation/index.html
@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Marvel Intro Animation</title>
+  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&amp;display=swap'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+
+<div id="marvel">MARVEL</div>
+<div id="bg"></div>
+
+<div id="loader">
+  <div>
+    <img src="./resources/loader.svg" alt="Loader">
+    <span id="a">LOADING ANIMATION</span>
+  </div>
+</div>
+
+<div id="hidden">
+  <img src="./resources/img-1.jpg">
+  <img src="./resources/img-2.jpg">
+  <img src="./resources/img-3.jpg">
+  <img src="./resources/img-4.jpg">
+  <img src="./resources/img-5.jpg">
+  <img src="./resources/img-6.jpg">
+  <img src="./resources/img-7.jpg">
+  <img src="./resources/img-8.jpg">
+  <img src="./resources/img-9.jpg">
+  <img src="./resources/img-10.jpg">
+  <img src="./resources/img-11.jpg">
+  <img src="./resources/img-12.jpg">
+  <img src="./resources/img-13.jpg">
+  <img src="./resources/img-14.jpg">
+  <img src="./resources/img-15.jpg">
+  <img src="./resources/img-16.jpg">
+  <img src="./resources/img-17.jpg">
+  <img src="./resources/img-18.jpg">
+  <img src="./resources/img-19.jpg">
+  <img src="./resources/img-20.jpg">
+</div>
+
+<audio src="./resources/a.mp3" id="audio"></audio>
+
+<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js'></script>
+<script src='https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
--- a/animations/marvel-intro-animation/resources/a.mp3
+++ b/animations/marvel-intro-animation/resources/a.mp3
--- a/animations/marvel-intro-animation/resources/img-1.jpg
+++ b/animations/marvel-intro-animation/resources/img-1.jpg
--- a/animations/marvel-intro-animation/resources/img-10.jpg
+++ b/animations/marvel-intro-animation/resources/img-10.jpg
--- a/animations/marvel-intro-animation/resources/img-11.jpg
+++ b/animations/marvel-intro-animation/resources/img-11.jpg
--- a/animations/marvel-intro-animation/resources/img-12.jpg
+++ b/animations/marvel-intro-animation/resources/img-12.jpg
--- a/animations/marvel-intro-animation/resources/img-13.jpg
+++ b/animations/marvel-intro-animation/resources/img-13.jpg
--- a/animations/marvel-intro-animation/resources/img-14.jpg
+++ b/animations/marvel-intro-animation/resources/img-14.jpg
--- a/animations/marvel-intro-animation/resources/img-15.jpg
+++ b/animations/marvel-intro-animation/resources/img-15.jpg
--- a/animations/marvel-intro-animation/resources/img-16.jpg
+++ b/animations/marvel-intro-animation/resources/img-16.jpg
--- a/animations/marvel-intro-animation/resources/img-17.jpg
+++ b/animations/marvel-intro-animation/resources/img-17.jpg
--- a/animations/marvel-intro-animation/resources/img-18.jpg
+++ b/animations/marvel-intro-animation/resources/img-18.jpg
--- a/animations/marvel-intro-animation/resources/img-19.jpg
+++ b/animations/marvel-intro-animation/resources/img-19.jpg
--- a/animations/marvel-intro-animation/resources/img-2.jpg
+++ b/animations/marvel-intro-animation/resources/img-2.jpg
--- a/animations/marvel-intro-animation/resources/img-20.jpg
+++ b/animations/marvel-intro-animation/resources/img-20.jpg
--- a/animations/marvel-intro-animation/resources/img-3.jpg
+++ b/animations/marvel-intro-animation/resources/img-3.jpg
--- a/animations/marvel-intro-animation/resources/img-4.jpg
+++ b/animations/marvel-intro-animation/resources/img-4.jpg
--- a/animations/marvel-intro-animation/resources/img-5.jpg
+++ b/animations/marvel-intro-animation/resources/img-5.jpg
--- a/animations/marvel-intro-animation/resources/img-6.jpg
+++ b/animations/marvel-intro-animation/resources/img-6.jpg
--- a/animations/marvel-intro-animation/resources/img-7.jpg
+++ b/animations/marvel-intro-animation/resources/img-7.jpg
--- a/animations/marvel-intro-animation/resources/img-8.jpg
+++ b/animations/marvel-intro-animation/resources/img-8.jpg
--- a/animations/marvel-intro-animation/resources/img-9.jpg
+++ b/animations/marvel-intro-animation/resources/img-9.jpg
--- a/animations/marvel-intro-animation/resources/loader.svg
+++ b/animations/marvel-intro-animation/resources/loader.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="100px" height="100px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<path fill="none" stroke="#ffc107" stroke-width="8" stroke-dasharray="42.76482137044271 42.76482137044271" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke-linecap="round" style="transform:scale(0.8);transform-origin:50px 50px">
+  <animate attributeName="stroke-dashoffset" repeatCount="indefinite" dur="2.380952380952381s" keyTimes="0;1" values="0;256.58892822265625"></animate>
+</path>
+<!-- [ldio] generated by https://loading.io/ --></svg>
--- a/animations/marvel-intro-animation/script.js
+++ b/animations/marvel-intro-animation/script.js
@ -0,0 +1,40 @@
+$(function () {
+  function playAnimation() {
+    var bg = $("#bg"),
+      bgNum = 0;
+    document.getElementById("audio").play();
+    const marvelInterval = setInterval(function () {
+      bgNum = (bgNum % 20) + 1;
+      bg.css(
+        "background-image",
+        `url(./resources/img-${bgNum}.jpg)`
+      );
+    }, 100);
+
+    setTimeout(function () {
+      clearInterval(marvelInterval);
+    }, 12000);
+  }
+
+  function initPlay() {
+    $("#loader img").fadeOut(100);
+    $("#a").html("▶<b>PLAY ANIMATION (turn ON sound)</b>").addClass("cursor");
+    $("#a").on("click", function () {
+      $("#loader").fadeOut(100);
+      playAnimation();
+    });
+  }
+
+  $("#hidden").imagesLoaded({ background: true }, function () {
+    setTimeout(function () {
+      var audio = document.getElementById("audio");
+      audio.oncanplay = function () {
+        initPlay();
+      };
+
+      if (audio.readyState > 3) {
+        initPlay();
+      }
+    }, 1000);
+  });
+});
--- a/animations/marvel-intro-animation/style.css
+++ b/animations/marvel-intro-animation/style.css
@ -0,0 +1,118 @@
+body {
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  font-family: "Roboto Condensed", sans-serif;
+  background-image: radial-gradient(#730801, #1f0100);
+  overflow: hidden;
+}
+
+#marvel {
+  color: transparent;
+  font-size: 250vh;
+  -webkit-text-stroke: 2px #000;
+  letter-spacing: -2vh;
+  opacity: 0;
+  animation: marvel 11s ease 2s forwards;
+}
+
+@keyframes marvel {
+  0% {
+    opacity: 0;
+    font-size: 205vh;
+    color: rgba(255, 255, 255, 0);
+    -webkit-text-stroke-color: #000;
+  }
+  20% {
+    opacity: 1;
+    color: rgba(255, 255, 255, 0);
+    -webkit-text-stroke-color: #000;
+  }
+  60% {
+    color: rgba(255, 255, 255, 0.5);
+    -webkit-text-stroke-color: #000;
+  }
+  100% {
+    opacity: 1;
+    font-size: 30vh;
+    color: rgba(255, 255, 255, 1);
+    -webkit-text-stroke-color: transparent;
+  }
+}
+
+#bg {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  opacity: 1;
+  background-image: url(https://himalayasingh.github.io/marvel/img/img-1.jpg);
+  background-attachment: fixed;
+  background-size: cover;
+  z-index: 1;
+  transform: scale(1.4);
+  animation: hideBg 14s ease 0s forwards;
+}
+
+@keyframes hideBg {
+  0% {
+    opacity: 1;
+    transform: scale(1.4);
+  }
+  60% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1);
+  }
+}
+
+#loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  text-align: center;
+  background-color: #212121;
+  z-index: 125;
+}
+
+#loader span {
+  display: block;
+  color: #fff;
+  font-size: 16px;
+  margin-top: 10px;
+}
+
+#loader span b {
+  margin-left: 12px;
+}
+
+#hidden {
+  position: fixed;
+  opacity: 0;
+  z-index: -1;
+}
+
+#ytd_link {
+  display: none;
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  color: #fff;
+  font-size: 30px;
+  text-decoration: none;
+  z-index: 1;
+}
+
+.cursor {
+  cursor: pointer;
+}
--- a/animations/netflix-logo-animation/README.md
+++ b/animations/netflix-logo-animation/README.md
@ -0,0 +1,2 @@
+# Customisable Netflix Logo Animation
+
--- a/animations/netflix-logo-animation/index.html
+++ b/animations/netflix-logo-animation/index.html
@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Customisable Netflix Logo Animation</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+
+<div class="netflix-container"><svg width="867" height="233" viewBox="0 0 867 233" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="N">
+      <path id="N1-base" class="base" d="M0 232.8L37 227.8V101.6L35.1 0H0V232.8Z" />
+      <path id="N1-shadow" d="M0 232.8L37 227.8V101.6L35.1 0H0V232.8Z" fill="url(#N1-shadowFill)" />
+      <path id="N3-base" class="base" d="M82.6 0H119V218.4L82.6 222.3V0Z" />
+      <path id="N3-shadow" d="M82.6 0H119V218.4L82.6 222.3V0Z" fill="url(#N3-shadowFill" />
+      <path id="N2" class="base" d="M79.2 222.7L119 218.4L35.1 0H0L79.2 222.7Z" />
+      <defs>
+        <linearGradient id="N1-shadowFill" x1="50%" y1="0%" x2="50%" y2="100%" gradientUnits="userSpaceOnUse">
+          <stop class="shadow-start" offset="0%" />
+          <stop class="shadow-end" offset="100%" />
+        </linearGradient>
+        <linearGradient id="N3-shadowFill" x1="50%" y1="100%" x2="50%" y2="0%" gradientUnits="userSpaceOnUse">
+          <stop class="shadow-start" offset="0%" />
+          <stop class="shadow-end" offset="100%" />
+        </linearGradient>
+      </defs>
+    </g>
+    <g id="E">
+      <path id="E1-base" class="base" d="M255.1 171.6V208.2L153.6 215.8V178.5L255.1 171.6Z" />
+      <path id="E1-shadow" d="M255.1 171.6V208.2L153.6 215.8V178.5L255.1 171.6Z" fill="url(#E1-shadowFill)" />
+      <path id="E4" class="base" d="M239.9 85.2V121.2L153.6 121.5V85.6L239.9 85.2Z" />
+      <path id="E2-base" class="base" d="M190.1 213.1L153.6 215.8V0H190.1V213.1Z" />
+      <path id="E2-shadow" d="M190.1 213.1L153.6 215.8V0H190.1V213.1Z" fill="url(#E2-shadowFill)" />
+      <path id="E3" class="base" d="M255 0H153.6V36.4H255V0Z" />
+      <defs>
+        <linearGradient id="E1-shadowFill" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
+          <stop class="shadow-start" offset="0%" />
+          <stop class="shadow-end" offset="100%" />
+        </linearGradient>
+        <linearGradient id="E2-shadowFill" x1="50%" y1="0%" x2="50%" y2="40%" gradientUnits="userSpaceOnUse">
+          <stop class="shadow-start" offset="0%" />
+          <stop class="shadow-end" offset="100%" />
+        </linearGradient>
+      </defs>
+    </g>
+    <g id="T">
+      <path id="T2-base" class="base" d="M317 0V204.6L353.4 203.2V0H317Z" />
+      <path id="T2-shadow" d="M317 0V204.6L353.4 203.2V0H317Z" fill="url(#T2-shadowFill)" />
+      <path id="T1" class="base" d="M391.7 0H278.7V36.4H391.7V0Z" />
+      <defs>
+        <linearGradient id="T2-shadowFill" x1="50%" y1="0%" x2="50%" y2="100%" gradientUnits="userSpaceOnUse">
+          <stop class="shadow-start" offset="0%" />
+          <stop class="shadow-end" offset="100%" />
+        </linearGradient>
+      </defs>
+    </g>
+    <g id="F">
+      <path id="F3" class="base" d="M501 84H415V120H501V84Z" />
+      <path id="F2-base" class="base" d="M414.8 0V202.2H451.8V0H414.8Z" />
+      <path id="F2-shadow" d="M414.8 0V202.2H451.8V0H414.8Z" fill="url(#F2-shadowFill)" />
+      <path id="F1" class="base" d="M516.8 0H414.8V36.4H516.8V0Z" />
+      <defs>
+        <linearGradient id="F2-shadowFill" x1="50%" y1="0%" x2="50%" y2="40%" gradientUnits="userSpaceOnUse">
+          <stop class="shadow-start" offset="0%" />
+          <stop class="shadow-end" offset="100%" />
+        </linearGradient>
+      </defs>
+    </g>
+    <g id="L">
+      <path id="L1-base" class="base" d="M540.5 0H576.9V205.9L540.5 204.1V0Z" />
+      <path id="L1-shadow" d="M540.5 0H576.9V205.9L540.5 204.1V0Z" fill="url(#L1-shadowFill)" />
+      <path id="L2" class="base" d="M540.5 167.5L639.5 173.1V209.1L540.5 204.1V167.5Z" />
+      <defs>
+        <linearGradient id="L1-shadowFill" x1="50%" y1="100%" x2="50%" y2="0%" gradientUnits="userSpaceOnUse">
+          <stop class="shadow-start" offset="0%" />
+          <stop class="shadow-end" offset="100%" />
+        </linearGradient>
+      </defs>
+    </g>
+    <path id="I" class="base" d="M669.2 0H705.7V214.3L669.2 211.2V0Z" />
+    <g id="X">
+      <path id="X2-base" class="base" d="M737 0L825.1 227.2L866.8 232.8L776.5 0H737Z" />
+      <path id="X2-shadow" d="M737 0L825.1 227.2L866.8 232.8L776.5 0H737Z" fill="url(#X2-shadowFill)" />
+      <path id="X1" class="base" d="M733.1 216.8L771.5 220.8L866.8 0H826.7L733.1 216.8Z" />
+      <defs>
+        <linearGradient id="X2-shadowFill" x1="0%" y1="10%" x2="80%" y2="100%" gradientUnits="objectBoundingBox">
+          <stop class="shadow-end" offset="0%" />
+          <stop class="shadow-start" offset="50%" />
+          <stop class="shadow-end" offset="100%" />
+        </linearGradient>
+      </defs>
+    </g>
+  </svg></div>
+<div class="themesContainer">
+  <div id="theme1" class="theme">
+    <div class="bg-colour"></div>
+  </div>
+  <div id="theme2" class="theme">
+    <div class="bg-colour"></div>
+  </div>
+  <div id="theme3" class="theme">
+    <div class="bg-colour"></div>
+  </div>
+</div>
+
+<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js'></script>
+<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase3.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
--- a/animations/netflix-logo-animation/script.js
+++ b/animations/netflix-logo-animation/script.js
@ -0,0 +1,156 @@
+// ---------- NETFLIX ANIMATION ---------- //
+
+/*
+  _   _ 
+ | \ | |
+ |  \| |
+ | . ` |
+ | |\  |
+ |_| \_| */
+const n_tl = gsap.timeline();
+n_tl
+  .to("#N1-shadow", {opacity: 0, duration: 0.5}, 0.3)
+  .to("#N3-shadow", {opacity: 0, duration: 1.5}, 0.3)
+  
+/*
+  ______ 
+ |  ____|
+ | |__   
+ |  __|  
+ | |____ 
+ |______|*/
+const e_ogShape = "M255.1 171.6V208.2L250.5 208.5L250 172L255.1 171.6Z";
+const e_tl = gsap.timeline();
+e_tl
+  .from("#E1-base", {morphSVG:{shape: e_ogShape, type: "linear"}, opacity: 0, duration: 0.15}, 0)
+  .from("#E2-base", {scaleY: 0, transformOrigin: "50% 100%", duration: 0.1}, 0.11)
+  .from("#E3", {scaleX: 0, duration: 0.06}, 0.21)
+  .from("#E4", {scaleX: 0, duration: 0.18}, 0.27)
+  .to("#E1-shadow, #E2-shadow", {opacity: 0, duration: 0.8}, 0)
+
+/*
+  _______ 
+ |__   __|
+    | |   
+    | |   
+    | |   
+    |_|*/
+const t_tl = gsap.timeline();
+t_tl
+  .from("#T1", {scaleX: 0, duration: 0.1}, 0)
+  .from("#T2-base", {scaleY: 0, duration: 0.25}, 0.1)
+  .to("#T2-shadow", {opacity: 0, duration: 0.82})
+
+/*
+  ______ 
+ |  ____|
+ | |__   
+ |  __|  
+ | |     
+ |_|*/
+const f_tl = gsap.timeline();
+f_tl
+  .from("#F1", {scaleX: 0, duration: 0.15}, 0)
+  .from("#F2-base", {scaleY: 0, duration: 0.33}, 0.1)
+  .from("#F3", {scaleX: 0, duration: 0.15}, 0.28)
+  .to("#F2-shadow", {opacity: 0, duration: 0.86})
+
+/*
+  _      
+ | |     
+ | |     
+ | |     
+ | |____ 
+ |______|*/
+const l_ogShape = "M540.5 167.5L546 167.781V204.371L540.5 204.1V167.5Z";
+const l_tl = gsap.timeline();
+l_tl
+  .from("#L1-base", {scaleY: 0, duration: 0.22}, 0)
+  .from("#L2", {morphSVG:{shape: l_ogShape, type: "linear"}, opacity: 0, duration: 0.1}, 0.2)
+  .to("#L1-shadow", {opacity: 0, duration: 0.83})
+
+/*
+  _____ 
+ |_   _|
+   | |  
+   | |  
+  _| |_ 
+ |_____|*/
+const i_tl = gsap.timeline();
+i_tl
+  .from("#I", {scaleY: 0, transformOrigin: "50% 100%", duration: 0.18}, 0)
+
+/*
+ __   __
+ \ \ / /
+  \ V / 
+   > <  
+  / . \ 
+ /_/ \_\*/
+const x1_ogShape = "M733.1 216.8L771.5 220.8L772.5 218.5L734.5 213.5L733.1 216.8Z";
+const x2_ogShape = "M737 0L738 2.5H777.5L776.5 0H737Z";
+const x_tl = gsap.timeline();
+x_tl
+  .from("#X1", {morphSVG:{shape: x1_ogShape, type: "linear", shapeIndex: 2}, duration: 0.63}, 0)
+  .from("#X1", {opacity: 0, duration: 0.1,}, 0)
+  .from("#X2-base", {morphSVG:{shape: x2_ogShape, type: "linear", shapeIndex: 2}, duration: 0.53}, 0.11)
+  .from("#X2-base", {opacity: 0, duration: 0.01,}, 0.11)
+  .to("#X2-shadow", {opacity: 0, duration: 1.3}, 0)
+
+//Movement Timeline
+const movement_tl = gsap.timeline();
+movement_tl
+  .from("svg", {opacity: 0, duration: 0.7}, 0)
+  .from("svg", {xPercent:50, left:"50%",  duration: 1.9,  ease: CustomEase.create("custom", "M0,0,C0.358,0.144,0.098,1,1,1")}, 0.7)
+
+//Exit Timeline
+const exit_tl = gsap.timeline();
+exit_tl
+  .to("svg", {opacity: 0, duration: 0.5})
+
+//Master Timeline
+const master_tl = gsap.timeline({repeat: -1, repeatDelay: 1});
+master_tl
+  .add((movement_tl), 0)
+  .add((n_tl), 0.7)
+  .add((e_tl), 0.8)
+  .add((t_tl), 1.08)
+  .add((f_tl), 1.18)
+  .add((l_tl), 1.33)
+  .add((i_tl), 1.63)
+  .add((x_tl), 1.7)
+  .add((exit_tl), 6)
+ 
+// ---------- UI CONTROLS ---------- //
+const theme1 = document.querySelector("#theme1");
+const theme2 = document.querySelector("#theme2");
+const theme3 = document.querySelector("#theme3");
+const themes = document.querySelectorAll(".theme");
+const body = document.querySelector("body");
+
+
+// Colours
+const colours = [
+  {theme: "#E50914", bg: "black"},
+  {theme: "white", bg: "#E50914"},
+  {theme: "#CFFFE9", bg: "#002E19"}
+];
+
+// Setting the OG document colours
+for(i = 0; i < themes.length; i++){
+  themes[i].style.backgroundColor = colours[i].theme;
+  themes[i].querySelector(".bg-colour").style.background = colours[i].bg;
+}
+
+document.documentElement.style.setProperty('--primary-colour', colours[0].theme);
+document.documentElement.style.setProperty('--shadow-colour', colours[0].bg);
+body.style.backgroundColor = colours[0].bg;
+
+// Adding click events
+for (t = 0; t < themes.length; t++){
+  themes[t].addEventListener("click", function(){
+    document.documentElement.style.setProperty('--primary-colour', this.style.backgroundColor);
+    document.documentElement.style.setProperty('--shadow-colour', this.querySelector(".bg-colour").style.backgroundColor);
+    body.style.backgroundColor = this.querySelector(".bg-colour").style.backgroundColor;
+  });
+}
--- a/animations/netflix-logo-animation/style.css
+++ b/animations/netflix-logo-animation/style.css
@ -0,0 +1,72 @@
+:root {
+  --primary-colour: #E50914;
+  --shadow-colour: black;
+  --shadow-intensity: 0.6;
+  --UIControlsSize: 30px;
+}
+
+/* ---------- Netflix SVG ---------- */
+
+.base {
+  fill: var(--primary-colour);
+  transition: fill 0.4s;
+}
+
+.shadow-start {
+  stop-color: var(--shadow-colour);
+  stop-opacity: var(--shadow-intensity);
+  
+}
+.shadow-end {
+  stop-color: var(--shadow-colour);
+  stop-opacity: 0;
+}
+
+body {
+  height: 100vh;
+  background: black;
+  overflow: hidden;
+  transition: background 0.4s;
+}
+
+.netflix-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 80vh;
+}
+
+svg {
+  margin: 15vmin;
+}
+
+/* ---------- UI Controls ---------- */
+
+.themesContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.theme {
+  width: var(--UIControlsSize);
+  height: var(--UIControlsSize);
+  margin: 20px;
+  border-radius: 50%;
+  border: 3px solid white;
+  background: lightgray;
+  transition: transform 0.2s;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.theme:hover {
+  transform: scale(1.1);
+}
+
+.bg-colour {
+  height: 100%;
+  width: 50%;
+  transform-origin: 100% 50%;
+  transform: rotate(225deg);
+}
--- a/buttons-and-toggles/electric-hover-effect/README.md
+++ b/buttons-and-toggles/electric-hover-effect/README.md
@ -0,0 +1,3 @@
+# Electric hover effect
+
+
--- a/buttons-and-toggles/electric-hover-effect/dat.gui.min.js
+++ b/buttons-and-toggles/electric-hover-effect/dat.gui.min.js
--- a/buttons-and-toggles/electric-hover-effect/index.html
+++ b/buttons-and-toggles/electric-hover-effect/index.html
@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Electric hover effect</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<a href="#" target="_blank">ENTER</a>
+
+<script id="vertexShader" type="x-shader/x-vertex">
+	varying vec2 vUv;
+	void main() {
+		vUv = uv;
+		gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+	}
+</script>
+
+<script id="fragmentShader" type="x-shader/x-fragment">
+	uniform sampler2D _circle;
+	uniform sampler2D _circle_blur;
+	uniform sampler2D _dist;
+	uniform sampler2D _mask;
+	uniform sampler2D _color;
+	uniform float _time;
+	varying vec2 vUv;
+
+	//custom
+	uniform float _dispFactor;
+	uniform float _speed;
+
+	float map(float value, float minA, float maxA, float minB, float maxB){
+			return (value - minA) / (maxA - minA) * (maxB - minB) + minB;
+	}
+
+	void main()	{
+
+		vec2 uv = vUv;
+
+		vec4 circleTexture = texture2D( _mask, uv );
+
+			vec2 scaleCenter = vec2(0.5, 0.5);
+
+			vec2 coord = uv;
+			float sin_factor = sin(0.72 * _time);
+			float cos_factor = cos(0.72 * _time);
+			coord = vec2(coord.x - 0.5, coord.y - 0.5) * mat2(cos_factor, sin_factor, -sin_factor, cos_factor);
+			coord += 0.5;
+
+
+			vec2 distMapUV = uv * 0.22;
+			distMapUV.y -= _time / _speed;
+
+			vec4 mapColorDisp = texture2D( _color, (coord - scaleCenter) * 0.7 + scaleCenter );
+			vec4 mapDisp = texture2D( _dist, distMapUV);// - 0.75;
+
+			float xDisp = map( mapColorDisp.x, 0.0, 1.0, -1.0, 1.0 ) * mapDisp.x * _dispFactor;
+			float yDisp = map( mapColorDisp.y, 0.0, 1.0, -1.0, 1.0 ) * mapDisp.x * _dispFactor;
+
+			vec2 uvDisp = vec2(
+					clamp( xDisp * 0.3448 * circleTexture.a, -0.1, 0.1 ),
+					clamp( yDisp * 0.3448 * circleTexture.a, -0.1, 0.1 )
+			);
+
+			float maskCircle = circleTexture.a * 1.8;
+
+		vec2 scaledUV = vec2((uv - scaleCenter) * 1.5 + scaleCenter );
+
+			vec4 tex_light = texture2D( _circle, scaledUV + uvDisp * coord * 1.5);
+			vec4 tex_lightBlur = texture2D( _circle_blur, scaledUV + uvDisp * coord * 1.5);
+			tex_lightBlur.a *= (8.41 * circleTexture.a);
+		tex_lightBlur.rgb *= 2.2;
+			tex_light.rgb *= 1.6 * max((1.0 - maskCircle), .0);
+
+
+		gl_FragColor = mix(tex_light, tex_lightBlur, min(maskCircle, 1.0));
+	}
+</script>
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js'></script>
+<script src='./dat.gui.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
--- a/buttons-and-toggles/electric-hover-effect/script.js
+++ b/buttons-and-toggles/electric-hover-effect/script.js
--- a/buttons-and-toggles/electric-hover-effect/style.css
+++ b/buttons-and-toggles/electric-hover-effect/style.css
@ -0,0 +1,31 @@
+body {
+	margin: 0;
+	overflow: hidden;
+	position: fixed;
+}
+canvas {
+	width: 100%;
+	height: 100%;
+}
+a {
+	text-decoration: none;
+	position: absolute;
+	color: rgba(255, 255, 255, 0.9);
+	font-weight: 100;
+	font-size: 20px;
+	font-family: "helvetica";
+	letter-spacing: 8px;
+	top: 50%;
+	left: 50%;
+	-webkit-transform: translate(-50%, -50%);
+	        transform: translate(-50%, -50%);
+	-webkit-transition: color 0.6s ease;
+	transition: color 0.6s ease;
+	padding: 130px 90px;
+	border-radius: 50%;
+}
+a:hover {
+	color: rgba(255, 255, 255, 0.4);
+	-webkit-transition: color 0.6s ease;
+	transition: color 0.6s ease;
+}
--- a/buttons-and-toggles/responsive-numeric-stepper/README.md
+++ b/buttons-and-toggles/responsive-numeric-stepper/README.md
@ -0,0 +1,3 @@
+# Responsive numeric stepper
+
+Used as an example for utilising media queries with the display property to build a responsive numeric stepper.
--- a/buttons-and-toggles/responsive-numeric-stepper/index.html
+++ b/buttons-and-toggles/responsive-numeric-stepper/index.html
@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Responsive numeric stepper</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+
+<div class="passengers">
+  <h1>Select number of passengers</h1>
+  <div class="passenger">
+    <p class="passenger__label">Adult <span>(age 12 & up)</span></p>
+    <div class="passenger__stepper">
+      <button type="button" class="stepper stepper__less">-</button>
+      <p class="stepper__display">1</p>
+      <button type="button" class="stepper stepper__more">+</button>
+    </div>
+  </div>
+  <div class="passenger">
+    <p class="passenger__label">Children <span>(age 2-11yrs)</span></p>
+    <div class="passenger__stepper">
+      <button type="button" class="stepper stepper__less">-</button>
+      <p class="stepper__display">1</p>
+      <button type="button" class="stepper stepper__more">+</button>
+    </div>
+  </div>
+  <div class="passenger">
+    <p class="passenger__label">Infant <span>(age 1-23mths)</span></p>
+    <div class="passenger__stepper">
+      <button type="button" class="stepper stepper__less">-</button>
+      <p class="stepper__display">1</p>
+      <button type="button" class="stepper stepper__more">+</button>
+    </div>
+  </div>
+</div>
+
+  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
+</body>
+</html>
--- a/buttons-and-toggles/responsive-numeric-stepper/style.css
+++ b/buttons-and-toggles/responsive-numeric-stepper/style.css
@ -0,0 +1,144 @@
+@import url(https://fonts.googleapis.com/css?family=Happy+Monkey|Lemon);
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  font-family: "Happy Monkey";
+  line-height: 1.5;
+  min-width: 21.25em;
+}
+
+.passengers {
+  padding: 1em;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 60em;
+}
+
+h1 {
+  font-family: 'Lemon';
+  font-size: 1.5em;
+  text-align: center;
+  margin-bottom: 1em;
+}
+
+.passenger {
+  margin-bottom: 1em;
+  padding-right: 1.69492%;
+}
+
+@media screen and (min-width: 31em) {
+  .passenger {
+    width: 32.2033898305%;
+    float: left;
+    margin-right: 1.6949152542%;
+    border-right: 1px solid black;
+  }
+  .passenger:nth-child(3n) {
+    float: right;
+    margin-right: 0;
+    border-right: 0;
+  }
+}
+@media screen and (min-width: 31em) {
+  .passenger__label {
+    text-align: center;
+    margin-bottom: 1em;
+  }
+}
+@media screen and (max-width: 30.99em) {
+  .passenger__label {
+    display: inline-block;
+    vertical-align: middle;
+    width: calc(100% - 10.25em);
+  }
+}
+@media screen and (max-width: 24.5em) {
+  .passenger__label span {
+    display: block;
+  }
+}
+@media screen and (min-width: 31em) and (max-width: 39.99em) {
+  .passenger__label span {
+    display: block;
+  }
+}
+.passenger__stepper {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+.passenger__stepper > * {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+@media screen and (max-width: 30.99em) {
+  .passenger__stepper {
+    width: 10em;
+  }
+}
+@media screen and (min-width: 31em) {
+  .passenger__stepper {
+    display: block;
+    max-width: 14em;
+    margin: 0 auto;
+  }
+  .passenger__stepper::after {
+    content: '';
+    display: block;
+    clear: both;
+  }
+}
+.stepper {
+  border: 0;
+  outline: 0;
+  cursor: pointer;
+  font-size: 1.25em;
+  background: black;
+  color: white;
+  width: 2em;
+  height: 2em;
+  border-radius: 50%;
+  box-shadow: 0.125em 0.125em 0 0 white, 0.125em 0.125em 0 1px black;
+}
+.stepper:active {
+  box-shadow: 0 0 0 1px white, 0 0 0 1px black;
+  -webkit-transform: translate(0.125rem, 0.125rem);
+          transform: translate(0.125rem, 0.125rem);
+}
+
+.stepper__display {
+  font-size: 2em;
+  margin: 0 0.5em;
+}
+
+@media screen and (min-width: 31em) {
+  .stepper__display {
+    font-size: 5em;
+    float: left;
+    line-height: 1.2;
+    margin: 0;
+    padding-left: 1rem;
+  }
+
+  .stepper {
+    position: absolute;
+    right: 1rem;
+  }
+
+  .stepper__more {
+    top: 0;
+  }
+
+  .stepper__less {
+    bottom: 0;
+  }
+}
--- a/buttons-and-toggles/trash-button-animation/README.md
+++ b/buttons-and-toggles/trash-button-animation/README.md
@ -0,0 +1,4 @@
+# Trash button animation
+
+
+
--- a/buttons-and-toggles/trash-button-animation/index.html
+++ b/buttons-and-toggles/trash-button-animation/index.html
@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Trash button animation</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Inter:400,500,600,700&amp;display=swap'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+
+<button class="button">
+    <div class="trash">
+        <div class="top">
+            <div class="paper"></div>
+        </div>
+        <div class="box"></div>
+        <div class="check">
+            <svg viewBox="0 0 8 6">
+                <polyline points="1 3.4 2.71428571 5 7 1"></polyline>
+            </svg>
+        </div>
+    </div>
+    <span>Delete Item</span>
+</button>
+
+  <script  src="./script.js"></script>
+
+</body>
+</html>
--- a/buttons-and-toggles/trash-button-animation/script.js
+++ b/buttons-and-toggles/trash-button-animation/script.js
@ -0,0 +1,7 @@
+document.querySelectorAll('.button').forEach(button => button.addEventListener('click', e => {
+    if(!button.classList.contains('delete')) {
+        button.classList.add('delete');
+        setTimeout(() => button.classList.remove('delete'), 3200);
+    }
+    e.preventDefault();
+}));
--- a/buttons-and-toggles/trash-button-animation/style.css
+++ b/buttons-and-toggles/trash-button-animation/style.css
@ -0,0 +1,365 @@
+.button {
+  --background: #2B3044;
+  --background-hover: #1E2235;
+  --text: #fff;
+  --shadow: rgba(0, 9, 61, .2);
+  --paper: #5C86FF;
+  --paper-lines: #fff;
+  --trash: #E1E6F9;
+  --trash-lines: #BBC1E1;
+  --check: #fff;
+  --check-background: #5C86FF;
+  position: relative;
+  border: none;
+  outline: none;
+  background: none;
+  padding: 10px 24px;
+  border-radius: 7px;
+  min-width: 142px;
+  -webkit-appearance: none;
+  -webkit-tap-highlight-color: transparent;
+  cursor: pointer;
+  display: -webkit-box;
+  display: flex;
+  color: var(--text);
+  background: var(--btn, var(--background));
+  box-shadow: 0 var(--shadow-y, 4px) var(--shadow-blur, 8px) var(--shadow);
+  -webkit-transform: scale(var(--scale, 1));
+          transform: scale(var(--scale, 1));
+  -webkit-transition: box-shadow .3s, background .3s, -webkit-transform .3s;
+  transition: box-shadow .3s, background .3s, -webkit-transform .3s;
+  transition: transform .3s, box-shadow .3s, background .3s;
+  transition: transform .3s, box-shadow .3s, background .3s, -webkit-transform .3s;
+}
+.button span {
+  display: block;
+  font-size: 14px;
+  line-height: 25px;
+  font-weight: 600;
+  opacity: var(--span-opacity, 1);
+  -webkit-transform: translateX(var(--span-x, 0)) translateZ(0);
+          transform: translateX(var(--span-x, 0)) translateZ(0);
+  -webkit-transition: opacity 0.3s ease var(--span-delay, 0.2s), -webkit-transform 0.4s ease var(--span-delay, 0.2s);
+  transition: opacity 0.3s ease var(--span-delay, 0.2s), -webkit-transform 0.4s ease var(--span-delay, 0.2s);
+  transition: transform 0.4s ease var(--span-delay, 0.2s), opacity 0.3s ease var(--span-delay, 0.2s);
+  transition: transform 0.4s ease var(--span-delay, 0.2s), opacity 0.3s ease var(--span-delay, 0.2s), -webkit-transform 0.4s ease var(--span-delay, 0.2s);
+}
+.button .trash {
+  display: block;
+  position: relative;
+  left: -8px;
+  -webkit-transform: translate(var(--trash-x, 0), var(--trash-y, 1px)) translateZ(0) scale(var(--trash-scale, 0.64));
+          transform: translate(var(--trash-x, 0), var(--trash-y, 1px)) translateZ(0) scale(var(--trash-scale, 0.64));
+  -webkit-transition: -webkit-transform .5s;
+  transition: -webkit-transform .5s;
+  transition: transform .5s;
+  transition: transform .5s, -webkit-transform .5s;
+}
+.button .trash:before, .button .trash:after {
+  content: '';
+  position: absolute;
+  height: 8px;
+  width: 2px;
+  border-radius: 1px;
+  background: var(--icon, var(--trash));
+  bottom: 100%;
+  -webkit-transform-origin: 50% 6px;
+          transform-origin: 50% 6px;
+  -webkit-transform: translate(var(--x, 3px), 2px) scaleY(var(--sy, 0.7)) rotate(var(--r, 0deg));
+          transform: translate(var(--x, 3px), 2px) scaleY(var(--sy, 0.7)) rotate(var(--r, 0deg));
+  -webkit-transition: background .3s, -webkit-transform .4s;
+  transition: background .3s, -webkit-transform .4s;
+  transition: transform .4s, background .3s;
+  transition: transform .4s, background .3s, -webkit-transform .4s;
+}
+.button .trash:before {
+  left: 1px;
+}
+.button .trash:after {
+  right: 1px;
+  --x: -3px;
+}
+.button .trash .top {
+  position: absolute;
+  overflow: hidden;
+  left: -4px;
+  right: -4px;
+  bottom: 100%;
+  height: 40px;
+  z-index: 1;
+  -webkit-transform: translateY(2px);
+          transform: translateY(2px);
+}
+.button .trash .top:before, .button .trash .top:after {
+  content: '';
+  position: absolute;
+  border-radius: 1px;
+  background: var(--icon, var(--trash));
+  width: var(--w, 12px);
+  height: var(--h, 2px);
+  left: var(--l, 8px);
+  bottom: var(--b, 5px);
+  -webkit-transition: background .3s, -webkit-transform .4s;
+  transition: background .3s, -webkit-transform .4s;
+  transition: background .3s, transform .4s;
+  transition: background .3s, transform .4s, -webkit-transform .4s;
+}
+.button .trash .top:after {
+  --w: 28px;
+  --h: 2px;
+  --l: 0;
+  --b: 0;
+  -webkit-transform: scaleX(var(--trash-line-scale, 1));
+          transform: scaleX(var(--trash-line-scale, 1));
+}
+.button .trash .top .paper {
+  width: 14px;
+  height: 18px;
+  background: var(--paper);
+  left: 7px;
+  bottom: 0;
+  border-radius: 1px;
+  position: absolute;
+  -webkit-transform: translateY(-16px);
+          transform: translateY(-16px);
+  opacity: 0;
+}
+.button .trash .top .paper:before, .button .trash .top .paper:after {
+  content: '';
+  width: var(--w, 10px);
+  height: 2px;
+  border-radius: 1px;
+  position: absolute;
+  left: 2px;
+  top: var(--t, 2px);
+  background: var(--paper-lines);
+  -webkit-transform: scaleY(0.7);
+          transform: scaleY(0.7);
+  box-shadow: 0 9px 0 var(--paper-lines);
+}
+.button .trash .top .paper:after {
+  --t: 5px;
+  --w: 7px;
+}
+.button .trash .box {
+  width: 20px;
+  height: 25px;
+  border: 2px solid var(--icon, var(--trash));
+  border-radius: 1px 1px 4px 4px;
+  position: relative;
+  overflow: hidden;
+  z-index: 2;
+  -webkit-transition: border-color .3s;
+  transition: border-color .3s;
+}
+.button .trash .box:before, .button .trash .box:after {
+  content: '';
+  position: absolute;
+  width: 4px;
+  height: var(--h, 20px);
+  top: 0;
+  left: var(--l, 50%);
+  background: var(--b, var(--trash-lines));
+}
+.button .trash .box:before {
+  border-radius: 2px;
+  margin-left: -2px;
+  -webkit-transform: translateX(-3px) scale(0.6);
+          transform: translateX(-3px) scale(0.6);
+  box-shadow: 10px 0 0 var(--trash-lines);
+  opacity: var(--trash-lines-opacity, 1);
+  -webkit-transition: opacity .4s, -webkit-transform .4s;
+  transition: opacity .4s, -webkit-transform .4s;
+  transition: transform .4s, opacity .4s;
+  transition: transform .4s, opacity .4s, -webkit-transform .4s;
+}
+.button .trash .box:after {
+  --h: 16px;
+  --b: var(--paper);
+  --l: 1px;
+  -webkit-transform: translate(-0.5px, -16px) scaleX(0.5);
+          transform: translate(-0.5px, -16px) scaleX(0.5);
+  box-shadow: 7px 0 0 var(--paper), 14px 0 0 var(--paper), 21px 0 0 var(--paper);
+}
+.button .trash .check {
+  padding: 4px 3px;
+  border-radius: 50%;
+  background: var(--check-background);
+  position: absolute;
+  left: 2px;
+  top: 24px;
+  opacity: var(--check-opacity, 0);
+  -webkit-transform: translateY(var(--check-y, 0)) scale(var(--check-scale, 0.2));
+          transform: translateY(var(--check-y, 0)) scale(var(--check-scale, 0.2));
+  -webkit-transition: opacity var(--check-duration-opacity, 0.2s) ease var(--check-delay, 0s), -webkit-transform var(--check-duration, 0.2s) ease var(--check-delay, 0s);
+  transition: opacity var(--check-duration-opacity, 0.2s) ease var(--check-delay, 0s), -webkit-transform var(--check-duration, 0.2s) ease var(--check-delay, 0s);
+  transition: transform var(--check-duration, 0.2s) ease var(--check-delay, 0s), opacity var(--check-duration-opacity, 0.2s) ease var(--check-delay, 0s);
+  transition: transform var(--check-duration, 0.2s) ease var(--check-delay, 0s), opacity var(--check-duration-opacity, 0.2s) ease var(--check-delay, 0s), -webkit-transform var(--check-duration, 0.2s) ease var(--check-delay, 0s);
+}
+.button .trash .check svg {
+  width: 8px;
+  height: 6px;
+  display: block;
+  fill: none;
+  stroke-width: 1.5;
+  stroke-dasharray: 9px;
+  stroke-dashoffset: var(--check-offset, 9px);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke: var(--check);
+  -webkit-transition: stroke-dashoffset 0.4s ease var(--checkmark-delay, 0.4s);
+  transition: stroke-dashoffset 0.4s ease var(--checkmark-delay, 0.4s);
+}
+.button.delete {
+  --span-opacity: 0;
+  --span-x: 16px;
+  --span-delay: 0s;
+  --trash-x: 46px;
+  --trash-y: 2px;
+  --trash-scale: 1;
+  --trash-lines-opacity: 0;
+  --trash-line-scale: 0;
+  --icon: #fff;
+  --check-offset: 0;
+  --check-opacity: 1;
+  --check-scale: 1;
+  --check-y: 16px;
+  --check-delay: 1.7s;
+  --checkmark-delay: 2.1s;
+  --check-duration: .55s;
+  --check-duration-opacity: .3s;
+}
+.button.delete .trash:before, .button.delete .trash:after {
+  --sy: 1;
+  --x: 0;
+}
+.button.delete .trash:before {
+  --r: 40deg;
+}
+.button.delete .trash:after {
+  --r: -40deg;
+}
+.button.delete .trash .top .paper {
+  -webkit-animation: paper 1.5s linear forwards .5s;
+          animation: paper 1.5s linear forwards .5s;
+}
+.button.delete .trash .box:after {
+  -webkit-animation: cut 1.5s linear forwards .5s;
+          animation: cut 1.5s linear forwards .5s;
+}
+.button.delete, .button:hover {
+  --btn: var(--background-hover);
+  --shadow-y: 5px;
+  --shadow-blur: 9px;
+}
+.button:active {
+  --shadow-y: 2px;
+  --shadow-blur: 5px;
+  --scale: .94;
+}
+
+@-webkit-keyframes paper {
+  10%,
+    100% {
+    opacity: 1;
+  }
+  20% {
+    -webkit-transform: translateY(-16px);
+            transform: translateY(-16px);
+  }
+  40% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+  }
+  70%,
+    100% {
+    -webkit-transform: translateY(24px);
+            transform: translateY(24px);
+  }
+}
+
+@keyframes paper {
+  10%,
+    100% {
+    opacity: 1;
+  }
+  20% {
+    -webkit-transform: translateY(-16px);
+            transform: translateY(-16px);
+  }
+  40% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+  }
+  70%,
+    100% {
+    -webkit-transform: translateY(24px);
+            transform: translateY(24px);
+  }
+}
+@-webkit-keyframes cut {
+  0%,
+    40% {
+    -webkit-transform: translate(-0.5px, -16px) scaleX(0.5);
+            transform: translate(-0.5px, -16px) scaleX(0.5);
+  }
+  100% {
+    -webkit-transform: translate(-0.5px, 24px) scaleX(0.5);
+            transform: translate(-0.5px, 24px) scaleX(0.5);
+  }
+}
+@keyframes cut {
+  0%,
+    40% {
+    -webkit-transform: translate(-0.5px, -16px) scaleX(0.5);
+            transform: translate(-0.5px, -16px) scaleX(0.5);
+  }
+  100% {
+    -webkit-transform: translate(-0.5px, 24px) scaleX(0.5);
+            transform: translate(-0.5px, 24px) scaleX(0.5);
+  }
+}
+html {
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+}
+
+* {
+  box-sizing: inherit;
+}
+*:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+  min-height: 100vh;
+  display: -webkit-box;
+  display: flex;
+  font-family: 'Inter', Arial;
+  -webkit-box-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+          align-items: center;
+  background: #ECEFFC;
+}
+body .dribbble {
+  position: fixed;
+  display: block;
+  right: 20px;
+  bottom: 20px;
+}
+body .dribbble img {
+  display: block;
+  height: 28px;
+}
+body .twitter {
+  position: fixed;
+  display: block;
+  right: 64px;
+  bottom: 14px;
+}
+body .twitter svg {
+  width: 32px;
+  height: 32px;
+  fill: #1da1f2;
+}
--- a/cards/card-hover-interaction/README.md
+++ b/cards/card-hover-interaction/README.md
@ -0,0 +1 @@
+# Card Hover Interaction
--- a/cards/card-hover-interaction/index.html
+++ b/cards/card-hover-interaction/index.html
@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Card Hover Interaction</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+
+<div class="container">
+
+	<figure class="card card--1" style="--image-src: url('https://source.unsplash.com/78A265wPiO4')">
+		<figcaption>
+			<span class="info">
+				<h3>The Hills</h3>
+				<span>by David Marcu</span>
+			</span>
+			<span class="links">
+				<a href="#"><i class="fas fa-heart"></i></a>
+				<a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
+				<a href="https://unsplash.com/photos/78A265wPiO4" target="_blank"><i class="fas fa-share"></i></a>
+			</span>
+		</figcaption>
+	</figure>
+
+	<figure class="card card--2" style="--image-src: url('https://source.unsplash.com/TFyi0QOx08c')">
+		<figcaption>
+			<span class="info">
+				<h3>The Forest</h3>
+				<span>by Jay Mantri</span>
+			</span>
+			<span class="links">
+				<a href="#"><i class="fas fa-heart"></i></a>
+				<a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
+				<a href="https://unsplash.com/photos/TFyi0QOx08c" target="_blank"><i class="fas fa-share"></i></a>
+			</span>
+		</figcaption>
+	</figure>
+
+	<figure class="card card--3" style="--image-src: url('https://source.unsplash.com/PP8Escz15d8')">
+		<figcaption>
+			<span class="info">
+				<h3>The Desert</h3>
+				<span>by Keith Hardy</span>
+			</span>
+			<span class="links">
+				<a href="#"><i class="fas fa-heart"></i></a>
+				<a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
+				<a href="https://unsplash.com/photos/PP8Escz15d8" target="_blank"><i class="fas fa-share"></i></a>
+			</span>
+		</figcaption>
+	</figure>
+
+	<figure class="card card--4" style="--image-src: url('https://source.unsplash.com/DLwUVlzrP0Q')">
+		<figcaption>
+			<span class="info">
+				<h3>The Ocean</h3>
+				<span>by Dan Stark</span>
+			</span>
+			<span class="links">
+				<a href="#"><i class="fas fa-heart"></i></a>
+				<a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
+				<a href="https://unsplash.com/photos/DLwUVlzrP0Q" target="_blank"><i class="fas fa-share"></i></a>
+			</span>
+		</figcaption>
+	</figure>
+
+</div>
+  
+</body>
+</html>
--- a/cards/card-hover-interaction/style.css
+++ b/cards/card-hover-interaction/style.css
@ -0,0 +1,178 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #e4e4e4;
+}
+
+.container {
+  display: grid;
+  grid-template-rows: repeat(2, 1fr);
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 30px;
+}
+
+figure.card {
+  position: relative;
+  width: 380px;
+  height: 240px;
+  background-image: var(--image-src);
+  background-position: 50% 50%;
+  background-size: 125%;
+  transition: background 400ms ease;
+  box-shadow: 0 6.7px 5.3px rgba(0, 0, 0, 0.03), 0 22.3px 17.9px rgba(0, 0, 0, 0.05), 0 100px 80px rgba(0, 0, 0, 0.07);
+  overflow: hidden;
+}
+figure.card:hover figcaption {
+  transform: translateY(0px);
+}
+figure.card--1:hover {
+  background-position: 50% 100%;
+}
+figure.card--1 figcaption {
+  bottom: 0;
+  transform: translateY(80px);
+}
+figure.card--2 {
+  background-size: 110%;
+}
+figure.card--2:hover {
+  background-position: 50% -100%;
+}
+figure.card--2 figcaption {
+  top: 0;
+  transform: translateY(-80px);
+}
+figure.card--3 {
+  background-size: 115%;
+}
+figure.card--3:hover {
+  background-position: -100% 50%;
+}
+figure.card--3 figcaption {
+  left: 0;
+  transform: translateX(-180px);
+}
+figure.card--4:hover {
+  background-position: 100% 50%;
+}
+figure.card--4 figcaption {
+  right: 0;
+  transform: translateX(180px);
+}
+figure.card--1 figcaption, figure.card--2 figcaption {
+  width: 100%;
+  height: 80px;
+  padding: 15px 20px;
+}
+figure.card--3 figcaption, figure.card--4 figcaption {
+  flex-direction: column;
+  width: 180px;
+  height: 100%;
+  padding: 20px 15px;
+}
+figure.card figcaption {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: absolute;
+  background: #282828;
+  transition: transform 400ms ease;
+}
+figure.card figcaption .info {
+  color: #e2e2e2;
+  font-family: "Montserrat";
+}
+figure.card figcaption .info h3 {
+  font-size: 1.2rem;
+  letter-spacing: 1px;
+  margin-bottom: 2px;
+}
+figure.card figcaption .info span {
+  color: #72cc60;
+  font-size: 0.85rem;
+}
+figure.card figcaption .links {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+}
+figure.card figcaption .links a {
+  text-decoration: none;
+  position: relative;
+  width: 35px;
+  height: 35px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  margin-left: 10px;
+  font-size: 1.2rem;
+  opacity: 0.65;
+  border-radius: 50%;
+  overflow: hidden;
+}
+figure.card figcaption .links a:hover {
+  opacity: 1;
+}
+figure.card figcaption .links a:focus {
+  outline: none;
+}
+figure.card figcaption .links a:focus::after {
+  transform: scale(1);
+  opacity: 1;
+}
+figure.card figcaption .links a::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  opacity: 0;
+  background: rgba(255, 255, 255, 0.05);
+  transform: scale(0.5);
+  z-index: -1;
+  transition: all 150ms ease;
+}
+
+@media only screen and (max-width: 900px) {
+  body {
+    align-items: start;
+  }
+
+  .container {
+    grid-template-rows: repeat(4, 1fr);
+    grid-template-columns: 1fr;
+    grid-gap: 40px;
+    padding: 80px 0;
+  }
+}
+.support {
+  position: fixed;
+  right: 10px;
+  bottom: 10px;
+  padding: 10px;
+  display: flex;
+}
+.support a {
+  margin: 0 10px;
+  color: #222;
+  font-size: 1.8rem;
+  backface-visibility: hidden;
+  transition: all 150ms ease;
+}
+.support a:hover {
+  transform: scale(1.1);
+}
--- a/cards/extreme-hover/README.md
+++ b/cards/extreme-hover/README.md
@ -0,0 +1 @@
+# Extreme Hover
--- a/cards/extreme-hover/index.html
+++ b/cards/extreme-hover/index.html
@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Extreme Hover</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+
+<div style='opacity: 0;' id='imageHover'>
+<div class="image-hover-container">
+	<div class='container'>
+		<div class='middle'>
+			<div class='bg-image lake-district'></div>
+			<a href='#'  target="_blank" class='overlay'>
+				<p>Lake District</p>
+				<p>Cumbria, uk</p>
+				<p class='mobile-link'>Read More</p>
+			</a>
+		</div>
+		<div class='bottom-right'>
+			<div class='bg-image lake-district'></div>
+		</div>
+		<div class='bottom-left'>
+			<div class='bg-image lake-district'></div>
+		</div>
+		
+		<div class='top-left'>
+			<div class='bg-image lake-district'></div>
+		</div>
+		<div class='top-right'>
+			<div class='bg-image lake-district'></div>
+		</div>
+	</div>
+</div>
+<div class="image-hover-container">
+	<div class='container'>
+		<div class='middle'>
+			<div class='bg-image lancaster'></div>
+			<a href='#' target="_blank" class='overlay'>
+				<p>Lancaster</p>
+				<p>Lancashire, uk</p>
+				<p class='mobile-link'>Read More</p>
+			</a>		
+		</div>
+		<div class='bottom-right'>
+			<div class='bg-image lancaster'></div>
+		</div>
+		<div class='bottom-left'>
+			<div class='bg-image lancaster'></div>
+		</div>
+		
+		<div class='top-left'>
+			<div class='bg-image lancaster'></div>
+		</div>
+		<div class='top-right'>
+			<div class='bg-image lancaster'></div>
+		</div>
+	</div>
+</div>
+</div>
+
+<div class='loading-container' id='loadingScreen'>
+	<div id="loading"></div>  
+</div>
+
+  <script  src="./script.js"></script>
+
+</body>
+</html>
--- a/cards/extreme-hover/script.js
+++ b/cards/extreme-hover/script.js
@ -0,0 +1,8 @@
+// Loading Screen
+window.addEventListener("load", function(){
+	let hoverImagesContainer = document.getElementById('imageHover');
+	let loadingScreen = document.getElementById('loadingScreen');
+	loadingScreen.style.opacity = '0';
+	loadingScreen.style.zIndex = '-1';
+	hoverImagesContainer.style.opacity = '1';
+});
--- a/cards/extreme-hover/style.css
+++ b/cards/extreme-hover/style.css
@ -0,0 +1,316 @@
+@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300&family=Open+Sans&family=Roboto:wght@300&display=swap");
+.image-hover-container {
+  position: relative;
+  height: 100vh;
+  width: 100%;
+  display: -webkit-box;
+  display: flex;
+}
+.image-hover-container .container {
+  position: relative;
+  height: 430px;
+  width: 310px;
+  margin: auto;
+  display: -webkit-box;
+}
+.image-hover-container .container:hover > .bottom-right {
+  top: 55%;
+  left: 80%;
+  box-shadow: 0px 37px 29px rgba(0, 0, 0, 0.3);
+  width: 350px;
+}
+.image-hover-container .container:hover > .middle {
+  height: 90%;
+  left: 5%;
+  top: 5%;
+  width: 90%;
+  box-shadow: 0px 23px 33px rgba(0, 0, 0, 0.34);
+}
+.image-hover-container .container:hover > .middle .overlay {
+  opacity: 1;
+  z-index: 1;
+}
+.image-hover-container .container:hover > .middle .overlay p:nth-child(1) {
+  padding-top: 0;
+}
+.image-hover-container .container:hover > .top-left {
+  left: -70px;
+  top: -90px;
+  width: 150px;
+  box-shadow: 0px 37px 29px rgba(0, 0, 0, 0.3);
+}
+.image-hover-container .container:hover > .top-right {
+  left: 250px;
+  top: -90px;
+  width: 260px;
+  height: 280px;
+  box-shadow: 0px 37px 29px rgba(0, 0, 0, 0.3);
+}
+.image-hover-container .container:hover > .bottom-left {
+  left: -89%;
+  top: 65%;
+  width: 360px;
+  box-shadow: 0px 37px 29px rgba(0, 0, 0, 0.3);
+}
+.image-hover-container .container .lancaster {
+  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/lancaster-min.jpg) no-repeat;
+}
+.image-hover-container .container .lake-district {
+  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/lake-district-min.jpg) no-repeat;
+}
+.image-hover-container .container .bg-image {
+  background-size: cover;
+  background-attachment: fixed;
+  background-position: 10% 10%;
+}
+.image-hover-container .container .middle {
+  -webkit-transition: 500ms all;
+  transition: 500ms all;
+  -webkit-transition-delay: 0.25s;
+          transition-delay: 0.25s;
+  -webkit-transition-timing-function: cubic-bezier(0.17, 0.67, 0.33, 0.97);
+          transition-timing-function: cubic-bezier(0.17, 0.67, 0.33, 0.97);
+  position: relative;
+  margin: auto;
+  height: 100%;
+  width: 100%;
+  margin: 0px;
+  left: 0;
+  top: 0;
+  box-shadow: 0px 17px 23px rgba(0, 0, 0, 0.34);
+}
+.image-hover-container .container .middle .bg-image {
+  height: 100%;
+  width: 100%;
+}
+.image-hover-container .container .middle .overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 9;
+  background: rgba(67, 27, 12, 0.75);
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+          flex-direction: column;
+  -webkit-transition: 300ms all;
+  transition: 300ms all;
+  -webkit-transition-delay: 0.37s;
+          transition-delay: 0.37s;
+  opacity: 0;
+  text-decoration: none;
+  z-index: -1;
+}
+.image-hover-container .container .middle .overlay p {
+  position: relative;
+  margin: auto;
+  color: #fff;
+  text-transform: uppercase;
+  font-family: 'Roboto', sans-serif;
+  font-size: 1.1em;
+  opacity: 0.8;
+}
+.image-hover-container .container .middle .overlay p:nth-child(1) {
+  margin-bottom: 4px !important;
+  padding-top: 30px;
+  -webkit-transition: all 400ms;
+  transition: all 400ms;
+  -webkit-transition-delay: 0.3s;
+          transition-delay: 0.3s;
+}
+.image-hover-container .container .middle .overlay p:nth-child(2) {
+  margin-top: 4px !important;
+}
+.image-hover-container .container .middle .overlay .mobile-link {
+  display: none;
+}
+.image-hover-container .container .bottom-right {
+  -webkit-transition: 800ms all;
+  transition: 800ms all;
+  -webkit-transition-delay: 0.15s;
+          transition-delay: 0.15s;
+  -webkit-transition-timing-function: cubic-bezier(0.17, 0.67, 0.33, 0.97);
+          transition-timing-function: cubic-bezier(0.17, 0.67, 0.33, 0.97);
+  position: absolute;
+  left: 0%;
+  top: 48%;
+  width: 100%;
+  box-shadow: 0px 37px 29px rgba(0, 0, 0, 0);
+  z-index: 1;
+}
+.image-hover-container .container .bottom-right .bg-image {
+  height: 220px;
+  width: 100%;
+}
+.image-hover-container .container .bottom-left {
+  -webkit-transition: 800ms all;
+  transition: 800ms all;
+  -webkit-transition-delay: 0.17s;
+          transition-delay: 0.17s;
+  -webkit-transition-timing-function: cubic-bezier(0.17, 0.67, 0.33, 0.97);
+          transition-timing-function: cubic-bezier(0.17, 0.67, 0.33, 0.97);
+  position: absolute;
+  left: 0%;
+  top: 48%;
+  width: 100%;
+  z-index: 1;
+}
+.image-hover-container .container .bottom-left .bg-image {
+  height: 220px;
+  width: 100%;
+}
+.image-hover-container .container .top-left {
+  -webkit-transition-timing-function: cubic-bezier(0.17, 0.67, 0.33, 0.97);
+          transition-timing-function: cubic-bezier(0.17, 0.67, 0.33, 0.97);
+  -webkit-transition: 600ms all;
+  transition: 600ms all;
+  -webkit-transition-delay: 0.19s;
+          transition-delay: 0.19s;
+  position: absolute;
+  left: 0%;
+  top: 0%;
+  width: 150px;
+  z-index: 1;
+}
+.image-hover-container .container .top-left .bg-image {
+  height: 220px;
+  width: 100%;
+}
+.image-hover-container .container .top-right {
+  -webkit-transition: 500ms all;
+  transition: 500ms all;
+  -webkit-transition-delay: 0.08s;
+          transition-delay: 0.08s;
+  position: absolute;
+  left: 0%;
+  top: 0%;
+  width: 300px;
+  height: 260px;
+  z-index: 1;
+  -webkit-transition-timing-function: cubic-bezier(0.17, 0.67, 0.33, 0.97);
+          transition-timing-function: cubic-bezier(0.17, 0.67, 0.33, 0.97);
+}
+.image-hover-container .container .top-right .bg-image {
+  float: right;
+  height: 100%;
+  width: 100%;
+}
+
+@media (max-width: 920px) {
+  .image-hover-container {
+    -webkit-transform: scale(0.8) translateX(0px);
+            transform: scale(0.8) translateX(0px);
+    overflow: hidden;
+  }
+  .image-hover-container .overlay p:nth-child(1) {
+    margin-top: 125px;
+  }
+  .image-hover-container .overlay p:nth-child(2) {
+    margin-bottom: 30px !important;
+  }
+  .image-hover-container .overlay .mobile-link {
+    display: block !important;
+    margin-top: 0px !important;
+  }
+  .image-hover-container .bottom-right, .image-hover-container .bottom-left, .image-hover-container .top-left, .image-hover-container .top-right {
+    box-shadow: 0px 0px 0px !important;
+  }
+}
+@media (max-width: 350px) {
+  .bottom-right, .bottom-left, .top-left, .top-right {
+    display: none !important;
+  }
+}
+.loading-container {
+  position: fixed;
+  height: 100vh;
+  width: 100%;
+  left: 0;
+  top: 0;
+  background: #fff;
+  -webkit-transition: 600ms all;
+  transition: 600ms all;
+}
+.loading-container #loading {
+  margin: 0 auto;
+  width: 70px;
+  height: 70px;
+  background: rgba(67, 27, 12, 0.75);
+  border-radius: 50%;
+  -webkit-animation: boing .8s linear infinite;
+          animation: boing .8s linear infinite;
+  position: relative;
+  top: calc(50% - 35px);
+}
+.loading-container #loading:before {
+  content: '';
+  position: absolute;
+  left: calc(50% - 30px);
+  top: calc(50% - 30px);
+  display: block;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background: white;
+  -webkit-animation: boing-inner .8s linear infinite;
+          animation: boing-inner .8s linear infinite;
+}
+@-webkit-keyframes boing {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+  25% {
+    -webkit-transform: scale(0.75);
+            transform: scale(0.75);
+  }
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+@keyframes boing {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+  25% {
+    -webkit-transform: scale(0.75);
+            transform: scale(0.75);
+  }
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+@-webkit-keyframes boing-inner {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+  25% {
+    -webkit-transform: scale(0.6);
+            transform: scale(0.6);
+  }
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+@keyframes boing-inner {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+  25% {
+    -webkit-transform: scale(0.6);
+            transform: scale(0.6);
+  }
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
--- a/css-effects/pure-css-eye/README.md
+++ b/css-effects/pure-css-eye/README.md
@ -0,0 +1,2 @@
+# Pure CSS "Eye"
+
--- a/css-effects/pure-css-eye/index.html
+++ b/css-effects/pure-css-eye/index.html
@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Pure CSS Eye</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+
+<div class="eye"></div>
+
+<div class="circle-1"></div>
+<div class="circle-2"></div>
+<div class="circle-3"></div>
+<div class="circle-4"></div>
+<div class="circle-5"></div>
+<div class="circle-6"></div>
+<div class="circle-7"></div>
+<div class="circle-8"></div>
+<div class="circle-9"></div>
+<div class="circle-10"></div>
+<div class="circle-11"></div>
+<div class="circle-12"></div>
+<div class="circle-13"></div>
+<div class="circle-14"></div>
+
+<div class="glitch"></div>
+
+<div class="fragment-1"></div>
+<div class="fragment-2"></div>
+<div class="fragment-3"></div>
+
+
+<svg width="190" height="190" viewBox="0 0 190 190" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<defs>
+		<clipPath id='bagel1'>
+			<path fill-rule="evenodd" clip-rule="evenodd" d="M95 190C147.467 190 190 147.467 190 95C190 42.533 147.467 0 95 0C42.533 0 0 42.533 0 95C0 147.467 42.533 190 95 190ZM95 120C108.807 120 120 108.807 120 95C120 81.1929 108.807 70 95 70C81.1929 70 70 81.1929 70 95C70 108.807 81.1929 120 95 120Z" />
+		</clipPath>
+		<clipPath id='bagel2'>
+			<path fill-rule="evenodd" clip-rule="evenodd" d="M71 142C110.212 142 142 110.212 142 71C142 31.7878 110.212 0 71 0C31.7878 0 0 31.7878 0 71C0 110.212 31.7878 142 71 142ZM71 139C108.555 139 139 108.555 139 71C139 33.4446 108.555 3 71 3C33.4446 3 3 33.4446 3 71C3 108.555 33.4446 139 71 139Z" />
+		</clipPath>
+		<clipPath id='bagel3'>
+			<path fill-rule="evenodd" clip-rule="evenodd" d="M60 120C93.1372 120 120 93.1372 120 60C120 26.8628 93.1372 0 60 0C26.8628 0 0 26.8628 0 60C0 93.1372 26.8628 120 60 120ZM60 115C90.3757 115 115 90.3757 115 60C115 29.6243 90.3757 5 60 5C29.6243 5 5 29.6243 5 60C5 90.3757 29.6243 115 60 115Z" />
+		</clipPath>
+		<clipPath id='bagel4'>
+			<path fill-rule="evenodd" clip-rule="evenodd" d="M38 76C58.9868 76 76 58.9868 76 38C76 17.0132 58.9868 0 38 0C17.0132 0 0 17.0132 0 38C0 58.9868 17.0132 76 38 76ZM38 72C56.7777 72 72 56.7776 72 38C72 19.2224 56.7777 4 38 4C19.2223 4 4 19.2224 4 38C4 56.7776 19.2223 72 38 72Z" />
+		</clipPath>
+	</defs>
+</svg>
+
+</body>
+</html>
--- a/css-effects/pure-css-eye/style.css
+++ b/css-effects/pure-css-eye/style.css
@ -0,0 +1,681 @@
+html, body {
+	padding: 0; margin: 0;
+}
+
+body {
+	position: relative;
+	width: 100vw;
+	min-width: 800px;
+	height: 100vh;
+	min-height: 600px;
+	background: linear-gradient(-45deg, #8691b3, #edeef3);
+}
+	body *, body *:before, body *:after {
+		content: '';
+		position: absolute;
+		top: 50%; left: 50%;
+	}
+
+
+.eye {
+	width: 332px; height: 332px;
+	transform: translate(-50%, -50%);
+	border-radius: 50%;
+	background: #EBEDF3;
+	filter: blur(5px);
+
+	animation: eyeAnimation 4s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes eyeAnimation {
+	0%, 33%, 100% {
+		box-shadow: inset -8px -13px 20px -10px rgba(230, 230, 236, 0.04), 64px 55px 40px -40px #38406A, 20px 18px 30px -10px #38406A, inset -70px -50px 60px -30px #4b6398, inset -90px -90px 70px -90px #697398, inset -70px -50px 100px -40px #697398, inset 80px 50px 80px -50px #eeeef3, -25px -15px 50px -10px #F6F6FB, 14px -1px 50px -10px #7e7ea9, 1px 9px 50px -10px #7e7ea9, inset -90px 40px 60px -20px rgba(116, 66, 255, 0.1), inset -90px -120px 60px -20px rgba(116, 66, 255, 0.1);
+    transform: translate(-50%, -50%) scale(1.25);
+	}
+	65% {
+		box-shadow: inset -8px -13px 60px -10px rgba(230, 230, 236, 0.2), 44px 35px 20px -20px #687294, 11px 9px 9px -4px #6e799d, inset -100px -70px 40px -110px #6A789C, inset -90px -90px 70px -90px #697398, inset -70px -50px 100px -40px #697398, inset 80px 50px 80px -50px #eeeef3, -25px -15px 30px -10px #F6F6FB;
+		transform: translate(-50%, -50%) scale(1);
+	}
+}
+
+
+	.eye::after {
+		width: 160px; height: 160px;
+		border-radius: 50%;
+		box-shadow: inset -50px -20px 30px 0px #e7e2f5, inset 100px 10px 20px -27px #2f2c4c, 0px 0px 10px 7px rgba(231, 226, 245, 1);
+
+		animation: pupilAnimationSize 4s cubic-bezier(1, 0, 1, 1) infinite,
+							 pupilAnimationView 4s ease infinite;
+	}
+@keyframes pupilAnimationSize {
+	0%, 30%, 100% { transform: translate(-50%, -50%) scale(0.85); }
+	40%, 90% 			{ transform: translate(-50%, -50%) scale(0.5); }
+}
+@keyframes pupilAnimationView {
+	0%, 30%, 100% {
+		box-shadow: inset -50px -20px 30px 0px #e7e2f5, inset 100px 10px 20px -27px #2f2c4c, 0px 0px 10px 7px rgba(231, 226, 245, 1);
+	}
+	60%, 66% {
+		box-shadow: inset -50px -20px 30px 0px rgba(231, 226, 245, 0), inset 10px 10px 70px -27px rgba(47, 44, 76, 0), 0px 0px 10px 7px hsla(256, 49%, 92%, 0);
+	}
+	90% {
+		box-shadow: inset -50px -20px 30px 0px #e7e2f5, inset 100px 10px 20px -27px #2f2c4c, 0px 0px 10px 7px rgba(231, 226, 245, 1);
+	}
+}
+
+
+.circle-1 {
+	width: 475px; height: 475px;
+	border-radius: 50%;
+	border: 1px solid transparent;
+	border-right-color: rgba(223, 228, 255, 0.6);
+
+	animation: circle1AnimationOpacity 4s ease infinite,
+						 circle1AnimationMove 4s ease infinite;
+}
+@keyframes circle1AnimationMove {
+	00%, 100% 		{ transform: translate(-50%, -50%) rotate(49deg); }
+	07% 					{ transform: translate(-50%, -50%) rotate(38deg); }
+	12%, 19%, 68% { transform: translate(-50%, -50%) rotate(42deg); }
+	26%, 30% 			{ transform: translate(-50%, -50%) rotate(82deg); }
+	73% 					{ transform: translate(-50%, -50%) rotate(34deg); }
+	87%, 92% 			{ transform: translate(-50%, -50%) rotate(69deg); }
+	94% 					{ transform: translate(-50%, -50%) rotate(65deg); }
+}
+@keyframes circle1AnimationOpacity {
+	00%, 27%, 73%, 100% { opacity: 1; }
+	30%, 70% 						{ opacity: 0; }
+}
+
+
+.circle-2 {
+	width: 475px; height: 475px;
+	border-radius: 50%;
+	border: 1px solid transparent;
+	border-right-color: rgba(223, 228, 255, 0.6);
+
+	animation: circle2AnimationOpacity 4s ease infinite,
+						 circle2AnimationMove 4s ease infinite;
+}
+@keyframes circle2AnimationMove {
+	0%, 100% { transform: translate(-50%, -50%) rotate(229deg); }
+	9% 			 { transform: translate(-50%, -50%) rotate(220deg); }
+	14%, 21% { transform: translate(-50%, -50%) rotate(225deg); }
+	29%, 67% { transform: translate(-50%, -50%) rotate(262deg); }
+	82% 		 { transform: translate(-50%, -50%) rotate(241deg); }
+	90%, 94% { transform: translate(-50%, -50%) rotate(249deg); }
+	99% 		 { transform: translate(-50%, -50%) rotate(245deg); }
+}
+@keyframes circle2AnimationOpacity {
+	0%, 27%, 79%, 100% { opacity: 1; }
+	30%, 76% 					 { opacity: 0; }
+}
+
+
+.circle-3 {
+	left: calc(50% + 93px);
+	top: calc(50% - 189px);
+	width: 106px; height: 280px;
+	overflow: hidden;
+}
+	.circle-3::before {
+		left: -275%;
+		top: -4%;
+		width: 393px;
+		height: 393px;
+		border-radius: 50%;
+		border: 1px solid transparent;
+		border-right-color: rgba(223, 228, 255, 0.6);
+
+		animation: circle3Animation 4s ease infinite;
+	}
+@keyframes circle3Animation {
+	0%   { transform: rotate(-3deg); }
+	20%  { transform: rotate(-107deg); }
+	79%  { transform: rotate(-286deg); }
+	100% { transform: rotate(-364deg); }
+}
+
+
+.circle-4 {
+	width: 295px; height: 295px;
+	border-radius: 50%;
+	border: 1px solid transparent;
+	border-right-color: rgb(251, 251, 251);
+	border-left-color: rgba(251, 251, 251, 0.2);
+
+	animation: circle4AnimationMove 4s cubic-bezier(1, 0, 1, 1) infinite,
+						 circle4AnimationOpacity 4s ease infinite;
+}
+@keyframes circle4AnimationMove {
+	0%, 100% { transform: translate(-50%, -50%) rotate(219deg) scale(1); }
+	6% 			 { transform: translate(-50%, -50%) rotate(221deg) scale(0.9); }
+	16% 		 { transform: translate(-50%, -50%) rotate(302deg) scale(0.9); }
+	22% 		 { transform: translate(-50%, -50%) rotate(307deg) scale(0.9); }
+	29% 		 { transform: translate(-50%, -50%) rotate(312deg) scale(0.93); }
+	33% 		 { transform: translate(-50%, -50%) rotate(310deg) scale(0.93); }
+	36% 		 { transform: translate(-50%, -50%) rotate(300deg) scale(0.7); }
+	39% 		 { transform: translate(-50%, -50%) rotate(220deg) scale(0.92); }
+	50%, 57% { transform: translate(-50%, -50%) rotate(248deg) scale(0.92); }
+	66% 		 { transform: translate(-50%, -50%) rotate(225deg) scale(0.92); }
+	73%, 81% { transform: translate(-50%, -50%) rotate(243deg) scale(0.92); }
+	93% 		 { transform: translate(-50%, -50%) rotate(215deg) scale(1); }
+}
+@keyframes circle4AnimationOpacity {
+	00%, 33%, 50%, 100% { opacity: 1; }
+	36%, 39% { opacity: 0; }
+}
+
+
+.circle-5 {
+	width: 100px; height: 100px;
+	transform: translate(-50%, -50%);
+	
+	animation: circle5AnimationSize 4s cubic-bezier(1, 0, 1, 1) infinite,
+						 circle5AnimationView 4s ease infinite;
+}
+	.circle-5::before {
+		width: 173px; height: 173px;
+		border-radius: 50%;
+		border: 1px solid rgb(251, 251, 251);
+		transform: translate(-50%, -50%);
+	}
+	.circle-5::after {
+		width: 177px; height: 177px;
+		border-radius: 50%;
+		border: 1px solid rgb(251, 251, 251);
+		transform: translate(-50%, -50%);
+	}
+@keyframes circle5AnimationSize {
+	0%, 38%, 82.82%, 100% { transform: translate(-50%, -50%) scale(1); }
+	45%, 75.44% 					{ transform: translate(-50%, -50%) scale(0.7); }
+}
+@keyframes circle5AnimationView {
+	0%, 5.7%, 7.4%, 9.8%, 11.5%, 14%, 15.6%, 18.9%, 21.3%, 23.8%, 25.4%, 28.7%, 35.3%, 42%, 77.9%, 82.7%, 83.6%, 85.2%, 86.1%, 91.8%, 93.5%, 97.6%, 100% { opacity: 1; }
+	2.5%, 6.6%, 8.2%, 10.7%, 14.8%, 18%, 20.5%, 22.1%, 24.6%, 27.9%, 36%, 88.6% { opacity: 0.5; }
+	47%, 77.8%, 82.8%, 83.5%, 85.3%, 86%, 90.2%, 92.7%, 96.8%, 99.2% { opacity: 0; }
+}
+
+
+.circle-6 {
+	top: 50%; left: 50%;
+	width: 190px; height: 190px;
+	background: repeating-conic-gradient(from 0deg, rgba(179, 221, 255, 0.4) 0deg 1deg, transparent 1deg 2deg);
+	clip-path: url(#bagel1);
+	border-radius: 50%;
+
+	animation: circle6Animation 4s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes circle6Animation {
+	0% {
+		transform: translate(-50%, -50%) scale(1);
+	}
+	8%, 35% {
+		transform: translate(-50%, -50%) scale(0.93);
+		opacity: 1;
+	}
+	40%, 90% {
+		transform: translate(-50%, -50%) scale(0.2);
+		opacity: 0;
+	}
+	95%, 100% {
+		transform: translate(-50%, -50%) scale(1);
+		opacity: 1;
+	}
+}
+
+.circle-7 {
+	top: 50%; left: 50%;
+	width: 142px; height: 142px;
+	filter: blur(1px);
+
+	animation: circle6Animation 4s -0.1s cubic-bezier(1, 0, 1, 1) infinite;
+}
+	.circle-7::before {
+		top: 0; left: 0;
+		width: 100%; height: 100%;
+		background: repeating-conic-gradient(from 0deg, rgba(114, 87, 187, 0.6) 0deg 2deg, transparent 2deg 8deg);
+		clip-path: url(#bagel2);
+		border-radius: 50%;
+	}
+
+
+.circle-8 {
+	top: 50%; left: 50%;
+	width: 120px; height: 120px;
+	background: repeating-conic-gradient(from 0deg, rgba(236, 247, 255, 0.68) 0deg 1deg, transparent 1deg 2deg);
+	clip-path: url(#bagel3);
+	border-radius: 50%;
+
+	animation: circle6Animation 4s -0.13s cubic-bezier(1, 0, 1, 1) infinite;
+}
+
+
+.circle-9 {
+	top: 50%; left: 50%;
+	width: 76px; height: 76px;
+	background: repeating-conic-gradient(from 0deg, rgba(236, 247, 255, 0.68) 0deg 1deg, transparent 1deg 2deg);
+	clip-path: url(#bagel4);
+	border-radius: 50%;
+
+	animation: circle6Animation 4s -0.16s cubic-bezier(1, 0, 1, 1) infinite;
+}
+
+
+.circle-10 {
+	top: 50%; left: 50%;
+	width: 190px; height: 190px;
+	background: radial-gradient(rgba(230, 245, 255, 0.6), rgba(201, 243, 255, 0.5), rgba(74, 105, 160, 0.3), transparent 70%);
+	clip-path: url(#bagel1);
+	border-radius: 50%;
+
+	animation: circle10Animation 4s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes circle10Animation {
+	0% {
+		transform: translate(-50%, -50%) scale(1);
+	}
+	4%, 30% {
+		transform: translate(-50%, -50%) scale(0.93);
+		opacity: 1;
+	}
+	35%, 93% {
+		transform: translate(-50%, -50%) scale(0);
+		opacity: 0;
+	}
+	98%, 100% {
+		transform: translate(-50%, -50%) scale(1);
+		opacity: 1;
+	}
+}
+
+
+.circle-11 {
+	top: 50%; left: 50%;
+	width: 190px; height: 190px;
+	background: repeating-conic-gradient(from 0deg, rgba(229, 243, 255, 0.1) 0deg 1deg, transparent 1deg 8deg, rgba(229, 243, 255, 0.3) 8deg 9deg, transparent 9deg 10deg, rgba(229, 243, 255, 0.1) 10deg 11deg, transparent 11deg 72deg);
+	clip-path: url(#bagel1);
+	border-radius: 50%;
+
+	animation: circle11Animation 4s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes circle11Animation {
+	0%, 98%, 100% {
+		transform: translate(-50%, -50%) rotate(0deg);
+		opacity: 1;
+	}
+	15% {
+		transform: translate(-50%, -50%) rotate(45deg);
+	}
+	25% {
+		transform: translate(-50%, -50%) rotate(-10deg);
+	}
+	30% {
+		opacity: 1;
+	}
+	35% {
+		transform: translate(-50%, -50%) rotate(-20deg);
+		opacity: 0;
+	}
+	93% {
+		transform: translate(-50%, -50%) rotate(80deg);
+		opacity: 0;
+	}
+}
+
+
+.circle-12 {
+	top: 50%; left: 50%;
+	width: 190px; height: 190px;
+	background: repeating-conic-gradient(from 0deg, rgba(208, 233, 255, 0.2) 20deg 21deg, transparent 21deg 40deg, rgba(192, 223, 249, 0.25) 40deg 41deg, transparent 41deg 43deg, rgba(179, 220, 255, 0.15) 43deg 44deg, transparent 44deg 76deg);
+	clip-path: url(#bagel1);
+	border-radius: 50%;
+
+	animation: circle12Animation 4s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes circle12Animation {
+	0%, 96%, 100% {
+		transform: translate(-50%, -50%) rotate(0deg);
+		opacity: 1;
+	}
+	10% {
+		transform: translate(-50%, -50%) rotate(45deg);
+	}
+	25% {
+		transform: translate(-50%, -50%) rotate(-45deg);
+	}
+	30% {
+		opacity: 1;
+	}
+	35% {
+		transform: translate(-50%, -50%) rotate(50deg);
+		opacity: 0;
+	}
+	93% {
+		transform: translate(-50%, -50%) rotate(-90deg);
+		opacity: 0;
+	}
+}
+
+
+.circle-13 {
+	width: 100px; height: 100px;
+	transform: translate(-50%, -50%);
+	animation: circle13AnimationSize 4s cubic-bezier(1, 0, 1, 1) infinite,
+						 circle13AnimationView 4s ease infinite;
+}
+	.circle-13::before {
+		width: 110px; height: 110px;
+		border-radius: 50%;
+		border: 1px solid rgb(251, 251, 251);
+		transform: translate(-50%, -50%);
+	}
+	.circle-13::after {
+		width: 120px; height: 120px;
+		border-radius: 50%;
+		border: 1px solid rgba(251, 251, 251, 0.5);
+		transform: translate(-50%, -50%);
+	}
+@keyframes circle13AnimationSize {
+	0%, 32%, 86%, 100% { transform: translate(-50%, -50%) scale(1); }
+	38%, 82% { transform: translate(-50%, -50%) scale(0.2); }
+}
+@keyframes circle13AnimationView {
+	/* подвигать */
+	0% { opacity: 1; }
+	2.5% { opacity: 0.5; }
+	5.7% { opacity: 1; }
+	6.6% { opacity: 0.5; }
+	7.4% { opacity: 1; }
+	8.2% { opacity: 0.5; }
+	9.8% { opacity: 1; }
+	10.7% { opacity: 0.5; }
+	11.5%, 14% { opacity: 1; }
+	14.8% { opacity: 0.5; }
+	15.6% { opacity: 1; }
+	18% { opacity: 0.5; }
+	18.9% { opacity: 1; }
+	20.5% { opacity: 0.5; }
+	21.3% { opacity: 1; }
+	22.1% { opacity: 0.5; }
+	23.8% { opacity: 1; }
+	24.6% { opacity: 0.5; }
+	25.4% { opacity: 1; }
+	27.9% { opacity: 0.5; }
+	28.7%, 32% { opacity: 1; }
+	38% { opacity: 0; }
+	82% { opacity: 0; }
+	86% { opacity: 1; }
+	88.6% { opacity: 0.5; }
+	90.2% { opacity: 0; }
+	91.8% { opacity: 1; }
+	92.7% { opacity: 0; }
+	93.5% { opacity: 1; }
+	96.8% { opacity: 0; }
+	97.6% { opacity: 1; }
+	99.2% { opacity: 0; }
+	100% { opacity: 1; }
+}
+
+.circle-14 {
+	width: 100px; height: 100px;
+	transform: translate(-50%, -50%);
+	animation: circle13AnimationSize 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite,
+						 circle14AnimationView 4s ease infinite;
+}
+	.circle-14::before {
+		width: 70px; height: 70px;
+		border-radius: 50%;
+		border: 1px solid rgba(251, 251, 251, 0.5);
+		transform: translate(-50%, -50%);
+	}
+	.circle-14::after {
+		width: 95px; height: 95px;
+		border-radius: 50%;
+		border: 1px solid rgba(251, 251, 251, 0.3);
+		transform: translate(-50%, -50%);
+	}
+
+@keyframes circle14AnimationView {
+	/* подвигать */
+	0% { opacity: 1; }
+	2.5% { opacity: 0.5; }
+	5.7% { opacity: 1; }
+	6.6% { opacity: 0.5; }
+	7.4% { opacity: 1; }
+	8.2% { opacity: 0.5; }
+	9.8% { opacity: 1; }
+	10.7% { opacity: 0.5; }
+	11.5%, 14% { opacity: 1; }
+	14.8% { opacity: 0.5; }
+	15.6% { opacity: 1; }
+	18% { opacity: 0.5; }
+	18.9% { opacity: 1; }
+	20.5% { opacity: 0.5; }
+	21.3% { opacity: 1; }
+	22.1% { opacity: 0.5; }
+	23.8% { opacity: 1; }
+	24.6% { opacity: 0.5; }
+	25.4% { opacity: 1; }
+	27.9% { opacity: 0.5; }
+	28.7%, 32% { opacity: 1; }
+	38% { opacity: 0; }
+	82% { opacity: 0; }
+	86% { opacity: 1; }
+	88.6% { opacity: 0.5; }
+	90.2% { opacity: 0; }
+	91.8% { opacity: 1; }
+	92.7% { opacity: 0; }
+	93.5% { opacity: 1; }
+	96.8% { opacity: 0; }
+	97.6% { opacity: 1; }
+	99.2% { opacity: 0; }
+	100% { opacity: 1; }
+}
+
+
+.glitch {
+	width: 2px; height: 2px;
+	box-shadow: -21px -75px #8AC7ED, -16px -78px #8AC7ED, -8px -78px #8AC7ED, -5px -77px #8AC7ED, -2px -79px #8AC7ED, 10px -79px #8AC7ED, 25px -73px #8AC7ED, 41px -71px #8AC7ED, 44px -68px #8AC7ED, -26px -72px #8AC7ED, -45px -62px #8AC7ED, -65px -57px #8AC7ED, 59px -49px #8AC7ED, 67px -52px #8AC7ED, 37px -69px #8AC7ED, 43px -62px #8AC7ED, 39px -62px #8AC7ED, 17px -71px #8AC7ED, 28px -67px #8AC7ED, 65px -32px #8AC7ED, 73px -24px #8AC7ED, 67px -25px #8AC7ED, 76px -14px #8AC7ED, 70px -18px #8AC7ED, 82px 21px #8AC7ED, 79px 20px #8AC7ED, 72px 15px #8AC7ED, 55px 45px #8AC7ED, 48px 51px #8AC7ED, 43px 58px #8AC7ED, 37px 57px #8AC7ED, 36px 63px #8AC7ED, 32px 76px #8AC7ED, 35px 70px #8AC7ED, 25px 71px #8AC7ED, 20px 75px #8AC7ED, 5px 70px #8AC7ED, 7px 75px #8AC7ED, -5px 79px #8AC7ED, 3px 78px #8AC7ED, -1px 77px #8AC7ED, -13px 78px #8AC7ED, -15px 82px #8AC7ED, -20px 76px #8AC7ED, -18px 78px #8AC7ED, -17px 75px #8AC7ED, -22px 72px #8AC7ED, -34px 72px #8AC7ED, -36px 69px #8AC7ED, -43px 74px #8AC7ED, -41px 72px #8AC7ED, -42px 69px #8AC7ED, -38px 66px #8AC7ED, -43px 63px #8AC7ED, -37px 61px #8AC7ED, -56px 66px #8AC7ED, -54px 61px #8AC7ED, -58px 54px #8AC7ED, -60px 41px #8AC7ED, -50px 56px #8AC7ED, -54px 57px #8AC7ED, -60px 52px #8AC7ED, -74px 35px #8AC7ED, -76px 18px #8AC7ED, -74px 25px #8AC7ED, -69px 23px #8AC7ED, -84px 13px #8AC7ED, -73px 3px #8AC7ED, -80px -1px #8AC7ED, -79px -4px #8AC7ED, -79px -7px #8AC7ED, -70px -11px #8AC7ED, -67px -23px #8AC7ED, -84px -13px #8AC7ED, -71px -42px #8AC7ED, -61px -49px #8AC7ED, -58px -43px #8AC7ED, -55px -50px #8AC7ED, -32px -72px #8AC7ED, -80px -30px #8AC7ED, -59px -20px #8AC7ED, -79px 12px #8AC7ED, -76px 1px #8AC7ED, 8px 57px #8AC7ED, 59px 36px #8AC7ED, 60px 46px #8AC7ED, 54px 59px #8AC7ED, 44px 52px #8AC7ED, -31px 20px #8AC7ED, -56px 2px #8AC7ED, 47px 35px #8AC7ED, 70px 6px #8AC7ED, 60px -2px #8AC7ED,
+							-21px -75px 0 1px rgba(255, 255, 255, 0.1), -16px -78px 0 1px rgba(255, 255, 255, 0.1), -8px -78px 0 1px rgba(255, 255, 255, 0.1), -5px -77px 0 1px rgba(255, 255, 255, 0.1), -2px -79px 0 1px rgba(255, 255, 255, 0.1), 10px -79px 0 1px rgba(255, 255, 255, 0.1), 25px -73px 0 1px rgba(255, 255, 255, 0.1), 41px -71px 0 1px rgba(255, 255, 255, 0.1), 44px -68px 0 1px rgba(255, 255, 255, 0.1), -26px -72px 0 1px rgba(255, 255, 255, 0.1), -45px -62px 0 1px rgba(255, 255, 255, 0.1), -65px -57px 0 1px rgba(255, 255, 255, 0.1), 59px -49px 0 1px rgba(255, 255, 255, 0.1), 67px -52px 0 1px rgba(255, 255, 255, 0.1), 37px -69px 0 1px rgba(255, 255, 255, 0.1), 43px -62px 0 1px rgba(255, 255, 255, 0.1), 39px -62px 0 1px rgba(255, 255, 255, 0.1), 17px -71px 0 1px rgba(255, 255, 255, 0.1), 28px -67px 0 1px rgba(255, 255, 255, 0.1), 65px -32px 0 1px rgba(255, 255, 255, 0.1), 73px -24px 0 1px rgba(255, 255, 255, 0.1), 67px -25px 0 1px rgba(255, 255, 255, 0.1), 76px -14px 0 1px rgba(255, 255, 255, 0.1), 70px -18px 0 1px rgba(255, 255, 255, 0.1), 82px 21px 0 1px rgba(255, 255, 255, 0.1), 79px 20px 0 1px rgba(255, 255, 255, 0.1), 72px 15px 0 1px rgba(255, 255, 255, 0.1), 55px 45px 0 1px rgba(255, 255, 255, 0.1), 48px 51px 0 1px rgba(255, 255, 255, 0.1), 43px 58px 0 1px rgba(255, 255, 255, 0.1), 37px 57px 0 1px rgba(255, 255, 255, 0.1), 36px 63px 0 1px rgba(255, 255, 255, 0.1), 32px 76px 0 1px rgba(255, 255, 255, 0.1), 35px 70px 0 1px rgba(255, 255, 255, 0.1), 25px 71px 0 1px rgba(255, 255, 255, 0.1), 20px 75px 0 1px rgba(255, 255, 255, 0.1), 5px 70px 0 1px rgba(255, 255, 255, 0.1), 7px 75px 0 1px rgba(255, 255, 255, 0.1), -5px 79px 0 1px rgba(255, 255, 255, 0.1), 3px 78px 0 1px rgba(255, 255, 255, 0.1), -1px 77px 0 1px rgba(255, 255, 255, 0.1), -13px 78px 0 1px rgba(255, 255, 255, 0.1), -15px 82px 0 1px rgba(255, 255, 255, 0.1), -20px 76px 0 1px rgba(255, 255, 255, 0.1), -18px 78px 0 1px rgba(255, 255, 255, 0.1), -17px 75px 0 1px rgba(255, 255, 255, 0.1), -22px 72px 0 1px rgba(255, 255, 255, 0.1), -34px 72px 0 1px rgba(255, 255, 255, 0.1), -36px 69px 0 1px rgba(255, 255, 255, 0.1), -43px 74px 0 1px rgba(255, 255, 255, 0.1), -41px 72px 0 1px rgba(255, 255, 255, 0.1), -42px 69px 0 1px rgba(255, 255, 255, 0.1), -38px 66px 0 1px rgba(255, 255, 255, 0.1), -43px 63px 0 1px rgba(255, 255, 255, 0.1), -37px 61px 0 1px rgba(255, 255, 255, 0.1), -56px 66px 0 1px rgba(255, 255, 255, 0.1), -54px 61px 0 1px rgba(255, 255, 255, 0.1), -58px 54px 0 1px rgba(255, 255, 255, 0.1), -60px 41px 0 1px rgba(255, 255, 255, 0.1), -50px 56px 0 1px rgba(255, 255, 255, 0.1), -54px 57px 0 1px rgba(255, 255, 255, 0.1), -60px 52px 0 1px rgba(255, 255, 255, 0.1), -74px 35px 0 1px rgba(255, 255, 255, 0.1), -76px 18px 0 1px rgba(255, 255, 255, 0.1), -74px 25px 0 1px rgba(255, 255, 255, 0.1), -69px 23px 0 1px rgba(255, 255, 255, 0.1), -84px 13px 0 1px rgba(255, 255, 255, 0.1), -73px 3px 0 1px rgba(255, 255, 255, 0.1), -80px -1px 0 1px rgba(255, 255, 255, 0.1), -79px -4px 0 1px rgba(255, 255, 255, 0.1), -79px -7px 0 1px rgba(255, 255, 255, 0.1), -70px -11px 0 1px rgba(255, 255, 255, 0.1), -67px -23px 0 1px rgba(255, 255, 255, 0.1), -84px -13px 0 1px rgba(255, 255, 255, 0.1), -71px -42px 0 1px rgba(255, 255, 255, 0.1), -61px -49px 0 1px rgba(255, 255, 255, 0.1), -58px -43px 0 1px rgba(255, 255, 255, 0.1), -55px -50px 0 1px rgba(255, 255, 255, 0.1), -32px -72px 0 1px rgba(255, 255, 255, 0.1), -80px -30px 0 1px rgba(255, 255, 255, 0.1), -59px -20px 0 1px rgba(255, 255, 255, 0.1), -79px 12px 0 1px rgba(255, 255, 255, 0.1), -76px 1px 0 1px rgba(255, 255, 255, 0.1), 8px 57px 0 1px rgba(255, 255, 255, 0.1), 59px 36px 0 1px rgba(255, 255, 255, 0.1), 60px 46px 0 1px rgba(255, 255, 255, 0.1), 54px 59px 0 1px rgba(255, 255, 255, 0.1), 44px 52px 0 1px rgba(255, 255, 255, 0.1), -31px 20px 0 1px rgba(255, 255, 255, 0.1), -56px 2px 0 1px rgba(255, 255, 255, 0.1), 47px 35px 0 1px rgba(255, 255, 255, 0.1), 70px 6px 0 1px rgba(255, 255, 255, 0.1), 60px -2px 0 1px rgba(255, 255, 255, 0.1);
+	filter: blur(1px);
+
+	animation: glitchAnimationOpacity 4s cubic-bezier(1, 0, 1, 1) infinite,
+						 glitchAnimationMove 4s cubic-bezier(1, 0, 1, 1) infinite,
+						 glitchAnimationBright 4s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes glitchAnimationOpacity {
+	0%, 30%, 96%, 100% { opacity: 1; }
+	35%, 93% 					 { opacity: 0; }
+}
+@keyframes glitchAnimationMove {
+	0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
+	35%, 65% { transform: translate(-50%, -50%) rotate(4320deg); }
+}
+@keyframes glitchAnimationBright {
+	0%, 100% { filter: blur(1px); }
+	35%, 65% { filter: blur(1px) brightness(1.8); }
+}
+
+
+.fragment-1::before {
+	width: 6px; height: 6px;
+	border: 2px solid rgba(255, 255, 255, 0.3);
+	border-radius: 2px;
+	
+	animation: fragment1BeforeAnimationMove 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes fragment1BeforeAnimationMove {
+	0%, 100% {
+		transform: rotate(0deg) translate(71px, -181px);
+		opacity: 1;
+	}
+	37% {
+		transform: rotate(15deg) translate(71px, -181px);
+		opacity: 1;
+	}
+	37.1%, 76.9% {
+		opacity: 0;
+	}
+	77% {
+		transform: rotate(-2deg) translate(71px, -181px);
+		opacity: 1;
+	}
+	90% {
+		transform: rotate(-9deg) translate(71px, -181px);
+	}
+}
+
+
+.fragment-1::after {
+	width: 6px; height: 6px;
+	border: 2px solid rgba(255, 255, 255, 0.3);
+	border-radius: 2px;
+
+	animation: fragment1AfterAnimationMove 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes fragment1AfterAnimationMove {
+	0%, 100% {
+		transform: rotate(0deg) translate(285px, 48px);
+		opacity: 1;
+	}
+	7% {
+		transform: rotate(5deg) translate(285px, 48px);
+	}
+	22% {
+		transform: rotate(-1deg) translate(285px, 48px);
+	}
+	40% {
+		transform: rotate(-3deg) translate(285px, 48px);
+		opacity: 1;
+	}
+	40.1%, 81.9% {
+		opacity: 0;
+	}
+	82% {
+		transform: rotate(-15deg) translate(285px, 48px);
+		opacity: 1;
+	}
+}
+
+
+.fragment-2::after {
+	width: 6px; height: 6px;
+	border: 2px solid rgba(255, 255, 255, 0.3);
+	border-radius: 2px;
+
+	animation: fragment2AfterAnimationMove 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes fragment2AfterAnimationMove {
+	0%, 100% {
+		transform: rotate(0deg) translate(-220px, 162px);
+		opacity: 1;
+	}
+	46% {
+		transform: rotate(-8deg) translate(-220px, 162px);
+		opacity: 1;
+	}
+	46.1%, 97.9% {
+		opacity: 0;
+	}
+	98% {
+		transform: rotate(2deg) translate(-220px, 162px);
+		opacity: 1;
+	}
+}
+
+
+.fragment-2::before {
+	width: 6px; height: 6px;
+	border: 2px solid rgba(255, 255, 255, 0.3);
+	border-radius: 2px;
+
+	animation: fragment2BeforeAnimationMove 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes fragment2BeforeAnimationMove {
+	0%, 100% {
+		transform: rotate(0deg) translate(284px, 111px);
+		opacity: 1;
+	}
+	2% {
+		transform: rotate(2deg) translate(284px, 111px);
+	}
+	9% {
+		transform: rotate(-5deg) translate(284px, 111px);
+	}
+	15%, 22% {
+		transform: rotate(-3deg) translate(284px, 111px);
+	}
+	27% {
+		transform: rotate(-2deg) translate(284px, 111px);
+		opacity: 1;
+	}
+	38.9% {
+		transform: rotate(-9deg) translate(284px, 111px);
+	}
+	39%, 76.9% {
+		opacity: 0;
+	}
+	77% {
+		transform: rotate(-9deg) translate(284px, 111px);
+		opacity: 1;
+	}
+}
+
+
+.fragment-3::after {
+	width: 6px; height: 6px;
+	background: rgba(255, 255, 255, 0.3);
+	border-radius: 2px;
+
+	animation: fragment3AfterAnimationMove 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes fragment3AfterAnimationMove {
+	0%, 4.9%, 65.1%, 100% {
+		opacity: 0;
+	}
+	5% {
+		transform: rotate(0deg) translate(183px, 198px);
+		opacity: 1;
+	}
+	16% {
+		transform: rotate(-9deg) translate(284px, 111px);
+		opacity: 1;
+	}
+	16.1%, 60.9% {
+		opacity: 0;
+	}
+	61% {
+		transform: rotate(5deg) translate(284px, 111px);
+		opacity: 1;
+	}
+	65% {
+		transform: rotate(10deg) translate(284px, 111px);
+		opacity: 1;
+	}
+}
+
+
+.fragment-3::before {
+	width: 6px; height: 6px;
+	background: rgba(255, 255, 255, 0.3);
+	border-radius: 2px;
+
+	animation: fragment3BeforeAnimationMove 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite;
+}
+@keyframes fragment3BeforeAnimationMove {
+	0%, 100% {
+		transform: rotate(0deg) translate(-253px, -126px);
+		opacity: 1;
+	}
+	22% {
+		transform: rotate(25deg) translate(-253px, -126px);
+		opacity: 1;
+	}
+	22.1%, 95.9% {
+		opacity: 0;
+	}
+	96% {
+		transform: rotate(-5deg) translate(-253px, -126px);
+		opacity: 1;
+	}
+}
--- a/css-effects/text-image-mosaic/README.md
+++ b/css-effects/text-image-mosaic/README.md
@ -0,0 +1,3 @@
+# Text Image Mosaic
+
+Uses mix-blend mode and CSS filters to produce the impression that an image is made of words.
--- a/css-effects/text-image-mosaic/index.html
+++ b/css-effects/text-image-mosaic/index.html
--- a/css-effects/text-image-mosaic/style.css
+++ b/css-effects/text-image-mosaic/style.css
@ -0,0 +1,39 @@
+@font-face {
+  font-family: 'inconsolata';
+  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/Simplifica.woff") format("woff");
+  font-style: normal;
+  font-weight: normal;
+  font-display: swap;
+}
+body {
+  font-family: inconsolata;
+  margin: 0;
+  background: #000;
+}
+
+div {
+  position: relative;
+  overflow: hidden;
+  line-height: 0;
+}
+
+img {
+  width: 100%;
+  -webkit-filter: contrast(60%);
+          filter: contrast(60%);
+}
+
+p {
+  line-height: 1;
+  text-align: justify;
+  padding: .18vw;
+  margin-top: 0;
+  font-size: 1.76vw;
+  color: #fff;
+  background: #000;
+  mix-blend-mode: multiply;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
--- a/error-pages/404-pages/80s-hacker-theme-404/README.md
+++ b/error-pages/404-pages/80s-hacker-theme-404/README.md
@ -0,0 +1,4 @@
+# Error 404: Page not found – 80s hacker theme
+
+
+
--- a/error-pages/404-pages/80s-hacker-theme-404/index.html
+++ b/error-pages/404-pages/80s-hacker-theme-404/index.html
@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Error 404: Page not found</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+
+<div class="noise"></div>
+<div class="overlay"></div>
+<div class="terminal">
+  <h1>Error <span class="errorcode">404</span></h1>
+  <p class="output">The page you are looking for might have been removed, had its name changed or is temporarily unavailable.</p>
+  <p class="output">Please try to <a href="#1">go back</a> or <a href="#2">return to the homepage</a>.</p>
+  <p class="output">Good luck.</p>
+</div>
+  
+</body>
+</html>
--- a/error-pages/404-pages/80s-hacker-theme-404/style.css
+++ b/error-pages/404-pages/80s-hacker-theme-404/style.css
@ -0,0 +1,122 @@
+@import "https://fonts.googleapis.com/css?family=Inconsolata";
+html {
+  min-height: 100%;
+}
+
+body {
+  box-sizing: border-box;
+  height: 100%;
+  background-color: #000000;
+  background-image: radial-gradient(#11581E, #041607), url("https://media.giphy.com/media/oEI9uBYSzLpBK/giphy.gif");
+  background-repeat: no-repeat;
+  background-size: cover;
+  font-family: 'Inconsolata', Helvetica, sans-serif;
+  font-size: 1.5rem;
+  color: rgba(128, 255, 128, 0.8);
+  text-shadow: 0 0 1ex #33ff33, 0 0 2px rgba(255, 255, 255, 0.8);
+}
+
+.noise {
+  pointer-events: none;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-image: url("https://media.giphy.com/media/oEI9uBYSzLpBK/giphy.gif");
+  background-repeat: no-repeat;
+  background-size: cover;
+  z-index: -1;
+  opacity: .02;
+}
+
+.overlay {
+  pointer-events: none;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%);
+  background-size: auto 4px;
+  z-index: 1;
+}
+
+.overlay::before {
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background-image: -webkit-gradient(linear, left bottom, left top, from(transparent), color-stop(2%, rgba(32, 128, 32, 0.2)), color-stop(3%, rgba(32, 128, 32, 0.8)), color-stop(3%, rgba(32, 128, 32, 0.2)), to(transparent));
+  background-image: linear-gradient(0deg, transparent 0%, rgba(32, 128, 32, 0.2) 2%, rgba(32, 128, 32, 0.8) 3%, rgba(32, 128, 32, 0.2) 3%, transparent 100%);
+  background-repeat: no-repeat;
+  -webkit-animation: scan 7.5s linear 0s infinite;
+          animation: scan 7.5s linear 0s infinite;
+}
+
+@-webkit-keyframes scan {
+  0% {
+    background-position: 0 -100vh;
+  }
+  35%, 100% {
+    background-position: 0 100vh;
+  }
+}
+
+@keyframes scan {
+  0% {
+    background-position: 0 -100vh;
+  }
+  35%, 100% {
+    background-position: 0 100vh;
+  }
+}
+.terminal {
+  box-sizing: inherit;
+  position: absolute;
+  height: 100%;
+  width: 1000px;
+  max-width: 100%;
+  padding: 4rem;
+  text-transform: uppercase;
+}
+
+.output {
+  color: rgba(128, 255, 128, 0.8);
+  text-shadow: 0 0 1px rgba(51, 255, 51, 0.4), 0 0 2px rgba(255, 255, 255, 0.8);
+}
+
+.output::before {
+  content: "> ";
+}
+
+/*
+.input {
+  color: rgba(192, 255, 192, 0.8);
+  text-shadow:
+      0 0 1px rgba(51, 255, 51, 0.4),
+      0 0 2px rgba(255, 255, 255, 0.8);
+}
+
+.input::before {
+  content: "$ ";
+}
+*/
+a {
+  color: #fff;
+  text-decoration: none;
+}
+
+a::before {
+  content: "[";
+}
+
+a::after {
+  content: "]";
+}
+
+.errorcode {
+  color: white;
+}
--- a/forms-and-login-pages/login-form-minimal/README.md
+++ b/forms-and-login-pages/login-form-minimal/README.md
@ -0,0 +1,5 @@
+# Login Form Minimal
+
+Nice and Simple login form
+
+![image](/attachments/dc15dfb7-a506-477f-879d-51cd063c40c5)
--- a/forms-and-login-pages/login-form-minimal/index.html
+++ b/forms-and-login-pages/login-form-minimal/index.html
@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Login Form simple</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
+
+</head>
+<body>
+
+<div class="login">
+	<h1>Login</h1>
+    <form method="post">
+    	<input type="text" name="u" placeholder="Username" required="required" />
+        <input type="password" name="p" placeholder="Password" required="required" />
+        <button type="submit" class="btn btn-primary btn-block btn-large">Let me in.</button>
+    </form>
+</div>
+
+</body>
+</html>
--- a/forms-and-login-pages/login-form-minimal/style.css
+++ b/forms-and-login-pages/login-form-minimal/style.css
@ -0,0 +1,57 @@
+@import url(https://fonts.googleapis.com/css?family=Open+Sans);
+.btn { display: inline-block; *display: inline; *zoom: 1; padding: 4px 10px 4px; margin-bottom: 0; font-size: 13px; line-height: 18px; color: #333333; text-align: center;text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; background-color: #f5f5f5; background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); background-image: linear-gradient(top, #ffffff, #e6e6e6); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0); border-color: #e6e6e6 #e6e6e6 #e6e6e6; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border: 1px solid #e6e6e6; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); cursor: pointer; *margin-left: .3em; }
+.btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] { background-color: #e6e6e6; }
+.btn-large { padding: 9px 14px; font-size: 15px; line-height: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
+.btn:hover { color: #333333; text-decoration: none; background-color: #e6e6e6; background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -ms-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear; }
+.btn-primary, .btn-primary:hover { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); color: #ffffff; }
+.btn-primary.active { color: rgba(255, 255, 255, 0.75); }
+.btn-primary { background-color: #4a77d4; background-image: -moz-linear-gradient(top, #6eb6de, #4a77d4); background-image: -ms-linear-gradient(top, #6eb6de, #4a77d4); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6eb6de), to(#4a77d4)); background-image: -webkit-linear-gradient(top, #6eb6de, #4a77d4); background-image: -o-linear-gradient(top, #6eb6de, #4a77d4); background-image: linear-gradient(top, #6eb6de, #4a77d4); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr=#6eb6de, endColorstr=#4a77d4, GradientType=0);  border: 1px solid #3762bc; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5); }
+.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { filter: none; background-color: #4a77d4; }
+.btn-block { width: 100%; display:block; }
+
+* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }
+
+html { width: 100%; height:100%; overflow:hidden; }
+
+body { 
+	width: 100%;
+	height:100%;
+	font-family: 'Open Sans', sans-serif;
+	background: #092756;
+	background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%),-moz-linear-gradient(top,  rgba(57,173,219,.25) 0%, rgba(42,60,87,.4) 100%), -moz-linear-gradient(-45deg,  #670d10 0%, #092756 100%);
+	background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -webkit-linear-gradient(top,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -webkit-linear-gradient(-45deg,  #670d10 0%,#092756 100%);
+	background: -o-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -o-linear-gradient(top,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -o-linear-gradient(-45deg,  #670d10 0%,#092756 100%);
+	background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -ms-linear-gradient(top,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -ms-linear-gradient(-45deg,  #670d10 0%,#092756 100%);
+	background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), linear-gradient(to bottom,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), linear-gradient(135deg,  #670d10 0%,#092756 100%);
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3E1D6D', endColorstr='#092756',GradientType=1 );
+}
+.login { 
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	margin: -150px 0 0 -150px;
+	width:300px;
+	height:300px;
+}
+.login h1 { color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.3); letter-spacing:1px; text-align:center; }
+
+input { 
+	width: 100%; 
+	margin-bottom: 10px; 
+	background: rgba(0,0,0,0.3);
+	border: none;
+	outline: none;
+	padding: 10px;
+	font-size: 13px;
+	color: #fff;
+	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
+	border: 1px solid rgba(0,0,0,0.3);
+	border-radius: 4px;
+	box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
+	-webkit-transition: box-shadow .5s ease;
+	-moz-transition: box-shadow .5s ease;
+	-o-transition: box-shadow .5s ease;
+	-ms-transition: box-shadow .5s ease;
+	transition: box-shadow .5s ease;
+}
+input:focus { box-shadow: inset 0 -5px 45px rgba(100,100,100,0.4), 0 1px 1px rgba(255,255,255,0.2); }
--- a/forms-and-login-pages/login-form-modern/README.md
+++ b/forms-and-login-pages/login-form-modern/README.md
@ -1,2 +1,3 @@
-# Login Form
-![image](/attachments/39ded713-ee72-40cb-adac-78ebe26ded7b)
+# Modern Login Form with floating placeholder and light button
+
+
--- a/forms-and-login-pages/login-form-modern/index.html
+++ b/forms-and-login-pages/login-form-modern/index.html
@ -2,35 +2,32 @@
 <html lang="en" >
 <head>
  <meta charset="UTF-8">
-  <title>Login Form</title>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
-<link rel="stylesheet" href="./style.css">
+  <title>Modern Login Form</title>
+  <link rel="stylesheet" href="./style.css">

 </head>
 <body>

-<form class='login-form'>
-  <div class="flex-row">
-    <label class="lf--label" for="username">
-      <svg x="0px" y="0px" width="12px" height="13px">
-        <path fill="#B1B7C4" d="M8.9,7.2C9,6.9,9,6.7,9,6.5v-4C9,1.1,7.9,0,6.5,0h-1C4.1,0,3,1.1,3,2.5v4c0,0.2,0,0.4,0.1,0.7 C1.3,7.8,0,9.5,0,11.5V13h12v-1.5C12,9.5,10.7,7.8,8.9,7.2z M4,2.5C4,1.7,4.7,1,5.5,1h1C7.3,1,8,1.7,8,2.5v4c0,0.2,0,0.4-0.1,0.6 l0.1,0L7.9,7.3C7.6,7.8,7.1,8.2,6.5,8.2h-1c-0.6,0-1.1-0.4-1.4-0.9L4.1,7.1l0.1,0C4,6.9,4,6.7,4,6.5V2.5z M11,12H1v-0.5 c0-1.6,1-2.9,2.4-3.4c0.5,0.7,1.2,1.1,2.1,1.1h1c0.8,0,1.6-0.4,2.1-1.1C10,8.5,11,9.9,11,11.5V12z"/>
-      </svg>
-    </label>
-    <input id="username" class='lf--input' placeholder='Username' type='text'>
-  </div>
-  <div class="flex-row">
-    <label class="lf--label" for="password">
-      <svg x="0px" y="0px" width="15px" height="5px">
-        <g>
-          <path fill="#B1B7C4" d="M6,2L6,2c0-1.1-1-2-2.1-2H2.1C1,0,0,0.9,0,2.1v0.8C0,4.1,1,5,2.1,5h1.7C5,5,6,4.1,6,2.9V3h5v1h1V3h1v2h1V3h1 V2H6z M5.1,2.9c0,0.7-0.6,1.2-1.3,1.2H2.1c-0.7,0-1.3-0.6-1.3-1.2V2.1c0-0.7,0.6-1.2,1.3-1.2h1.7c0.7,0,1.3,0.6,1.3,1.2V2.9z"/>
-        </g>
-      </svg>
-    </label>
-    <input id="password" class='lf--input' placeholder='Password' type='password'>
-  </div>
-  <input class='lf--submit' type='submit' value='LOGIN'>
-</form>
-<a class='lf--forgot' href='#'>Forgot password?</a>
+<div class="login-box">
+  <h2>Login</h2>
+  <form>
+    <div class="user-box">
+      <input type="text" name="" required="">
+      <label>Username</label>
+    </div>
+    <div class="user-box">
+      <input type="password" name="" required="">
+      <label>Password</label>
+    </div>
+    <a href="#">
+      <span></span>
+      <span></span>
+      <span></span>
+      <span></span>
+      Submit
+    </a>
+  </form>
+</div>
  
 </body>
 </html>
--- a/forms-and-login-pages/login-form-modern/style.css
+++ b/forms-and-login-pages/login-form-modern/style.css
@ -1,126 +1,167 @@
-* {
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-}
-
-html, body {
+html {
  height: 100%;
 }
-
 body {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  position: relative;
-  background: linear-gradient(135deg, rgba(36, 46, 77, 0.9), rgba(137, 126, 121, 0.9));
-  font-family: 'Roboto', helvetica, arial, sans-serif;
-  font-size: 1.5em;
+  margin:0;
+  padding:0;
+  font-family: sans-serif;
+  background: linear-gradient(#141e30, #243b55);
 }
-body:before {
-  content: '';
+
+.login-box {
  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
-  opacity: .3;
+  top: 50%;
+  left: 50%;
+  width: 400px;
+  padding: 40px;
+  transform: translate(-50%, -50%);
+  background: rgba(0,0,0,.5);
+  box-sizing: border-box;
+  box-shadow: 0 15px 25px rgba(0,0,0,.6);
+  border-radius: 10px;
 }

-.login-form {
-  width: 100%;
-  padding: 2em;
+.login-box h2 {
+  margin: 0 0 30px;
+  padding: 0;
+  color: #fff;
+  text-align: center;
+}
+
+.login-box .user-box {
  position: relative;
-  background: rgba(0, 0, 0, 0.15);
 }
-.login-form:before {
-  content: '';
-  position: absolute;
-  top: -2px;
-  left: 0;
-  height: 2px;
+
+.login-box .user-box input {
  width: 100%;
-  background: linear-gradient(to right, #35c3c1, #00d6b7);
+  padding: 10px 0;
+  font-size: 16px;
+  color: #fff;
+  margin-bottom: 30px;
+  border: none;
+  border-bottom: 1px solid #fff;
+  outline: none;
+  background: transparent;
 }
-@media screen and (min-width: 600px) {
-  .login-form {
-    width: 50vw;
-    max-width: 15em;
-  }
+.login-box .user-box label {
+  position: absolute;
+  top:0;
+  left: 0;
+  padding: 10px 0;
+  font-size: 16px;
+  color: #fff;
+  pointer-events: none;
+  transition: .5s;
 }

-.flex-row {
-  display: flex;
-  margin-bottom: 1em;
+.login-box .user-box input:focus ~ label,
+.login-box .user-box input:valid ~ label {
+  top: -20px;
+  left: 0;
+  color: #03e9f4;
+  font-size: 12px;
 }

-.lf--label {
-  width: 2em;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #f5f6f8;
-  cursor: pointer;
+.login-box form a {
+  position: relative;
+  display: inline-block;
+  padding: 10px 20px;
+  color: #03e9f4;
+  font-size: 16px;
+  text-decoration: none;
+  text-transform: uppercase;
+  overflow: hidden;
+  transition: .5s;
+  margin-top: 40px;
+  letter-spacing: 4px
 }

-.lf--input {
-  flex: 1;
-  padding: 1em;
-  border: 0;
-  color: #8f8f8f;
-  font-size: 1rem;
-}
-.lf--input:focus {
-  outline: none;
-  transition: -webkit-transform .15s ease;
-  transition: transform .15s ease;
-  transition: transform .15s ease, -webkit-transform .15s ease;
-  -webkit-transform: scale(1.1);
-          transform: scale(1.1);
+.login-box a:hover {
+  background: #03e9f4;
+  color: #fff;
+  border-radius: 5px;
+  box-shadow: 0 0 5px #03e9f4,
+              0 0 25px #03e9f4,
+              0 0 50px #03e9f4,
+              0 0 100px #03e9f4;
 }

-.lf--submit {
+.login-box a span {
+  position: absolute;
  display: block;
-  padding: 1em;
+}
+
+.login-box a span:nth-child(1) {
+  top: 0;
+  left: -100%;
  width: 100%;
-  background: linear-gradient(to right, #35c3c1, #00d6b7);
-  border: 0;
-  color: #fff;
-  cursor: pointer;
-  font-size: .75em;
-  font-weight: 600;
-  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
+  height: 2px;
+  background: linear-gradient(90deg, transparent, #03e9f4);
+  animation: btn-anim1 1s linear infinite;
 }
-.lf--submit:focus {
-  outline: none;
-  transition: -webkit-transform .15s ease;
-  transition: transform .15s ease;
-  transition: transform .15s ease, -webkit-transform .15s ease;
-  -webkit-transform: scale(1.1);
-          transform: scale(1.1);
+
+@keyframes btn-anim1 {
+  0% {
+    left: -100%;
+  }
+  50%,100% {
+    left: 100%;
+  }
 }

-.lf--forgot {
-  margin-top: 1em;
-  color: #00d6b7;
-  font-size: .65em;
-  text-align: center;
-  position: relative;
+.login-box a span:nth-child(2) {
+  top: -100%;
+  right: 0;
+  width: 2px;
+  height: 100%;
+  background: linear-gradient(180deg, transparent, #03e9f4);
+  animation: btn-anim2 1s linear infinite;
+  animation-delay: .25s
 }

-::-webkit-input-placeholder {
-  color: #8f8f8f;
+@keyframes btn-anim2 {
+  0% {
+    top: -100%;
+  }
+  50%,100% {
+    top: 100%;
+  }
 }

-:-ms-input-placeholder {
-  color: #8f8f8f;
+.login-box a span:nth-child(3) {
+  bottom: 0;
+  right: -100%;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(270deg, transparent, #03e9f4);
+  animation: btn-anim3 1s linear infinite;
+  animation-delay: .5s
 }

-::-ms-input-placeholder {
-  color: #8f8f8f;
+@keyframes btn-anim3 {
+  0% {
+    right: -100%;
+  }
+  50%,100% {
+    right: 100%;
+  }
 }

-::placeholder {
-  color: #8f8f8f;
+.login-box a span:nth-child(4) {
+  bottom: -100%;
+  left: 0;
+  width: 2px;
+  height: 100%;
+  background: linear-gradient(360deg, transparent, #03e9f4);
+  animation: btn-anim4 1s linear infinite;
+  animation-delay: .75s
+}
+
+@keyframes btn-anim4 {
+  0% {
+    bottom: -100%;
+  }
+  50%,100% {
+    bottom: 100%;
+  }
 }
--- a/forms-and-login-pages/login-form-simple/README.md
+++ b/forms-and-login-pages/login-form-simple/README.md
@ -1,5 +1,2 @@
-# Login Form simple
-
-Nice and Simple login form
-
-![image](/attachments/dc15dfb7-a506-477f-879d-51cd063c40c5)
+# Login Form
+![image](/attachments/39ded713-ee72-40cb-adac-78ebe26ded7b)
--- a/forms-and-login-pages/login-form-simple/index.html
+++ b/forms-and-login-pages/login-form-simple/index.html
@ -2,22 +2,35 @@
 <html lang="en" >
 <head>
  <meta charset="UTF-8">
-  <title>Login Form simple</title>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+  <title>Login Form</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
 <link rel="stylesheet" href="./style.css">
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

 </head>
 <body>

-<div class="login">
-	<h1>Login</h1>
-    <form method="post">
-    	<input type="text" name="u" placeholder="Username" required="required" />
-        <input type="password" name="p" placeholder="Password" required="required" />
-        <button type="submit" class="btn btn-primary btn-block btn-large">Let me in.</button>
-    </form>
-</div>
-
+<form class='login-form'>
+  <div class="flex-row">
+    <label class="lf--label" for="username">
+      <svg x="0px" y="0px" width="12px" height="13px">
+        <path fill="#B1B7C4" d="M8.9,7.2C9,6.9,9,6.7,9,6.5v-4C9,1.1,7.9,0,6.5,0h-1C4.1,0,3,1.1,3,2.5v4c0,0.2,0,0.4,0.1,0.7 C1.3,7.8,0,9.5,0,11.5V13h12v-1.5C12,9.5,10.7,7.8,8.9,7.2z M4,2.5C4,1.7,4.7,1,5.5,1h1C7.3,1,8,1.7,8,2.5v4c0,0.2,0,0.4-0.1,0.6 l0.1,0L7.9,7.3C7.6,7.8,7.1,8.2,6.5,8.2h-1c-0.6,0-1.1-0.4-1.4-0.9L4.1,7.1l0.1,0C4,6.9,4,6.7,4,6.5V2.5z M11,12H1v-0.5 c0-1.6,1-2.9,2.4-3.4c0.5,0.7,1.2,1.1,2.1,1.1h1c0.8,0,1.6-0.4,2.1-1.1C10,8.5,11,9.9,11,11.5V12z"/>
+      </svg>
+    </label>
+    <input id="username" class='lf--input' placeholder='Username' type='text'>
+  </div>
+  <div class="flex-row">
+    <label class="lf--label" for="password">
+      <svg x="0px" y="0px" width="15px" height="5px">
+        <g>
+          <path fill="#B1B7C4" d="M6,2L6,2c0-1.1-1-2-2.1-2H2.1C1,0,0,0.9,0,2.1v0.8C0,4.1,1,5,2.1,5h1.7C5,5,6,4.1,6,2.9V3h5v1h1V3h1v2h1V3h1 V2H6z M5.1,2.9c0,0.7-0.6,1.2-1.3,1.2H2.1c-0.7,0-1.3-0.6-1.3-1.2V2.1c0-0.7,0.6-1.2,1.3-1.2h1.7c0.7,0,1.3,0.6,1.3,1.2V2.9z"/>
+        </g>
+      </svg>
+    </label>
+    <input id="password" class='lf--input' placeholder='Password' type='password'>
+  </div>
+  <input class='lf--submit' type='submit' value='LOGIN'>
+</form>
+<a class='lf--forgot' href='#'>Forgot password?</a>
+  
 </body>
 </html>
--- a/forms-and-login-pages/login-form-simple/style.css
+++ b/forms-and-login-pages/login-form-simple/style.css
@ -1,57 +1,126 @@
-@import url(https://fonts.googleapis.com/css?family=Open+Sans);
-.btn { display: inline-block; *display: inline; *zoom: 1; padding: 4px 10px 4px; margin-bottom: 0; font-size: 13px; line-height: 18px; color: #333333; text-align: center;text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; background-color: #f5f5f5; background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); background-image: linear-gradient(top, #ffffff, #e6e6e6); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0); border-color: #e6e6e6 #e6e6e6 #e6e6e6; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border: 1px solid #e6e6e6; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); cursor: pointer; *margin-left: .3em; }
-.btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] { background-color: #e6e6e6; }
-.btn-large { padding: 9px 14px; font-size: 15px; line-height: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
-.btn:hover { color: #333333; text-decoration: none; background-color: #e6e6e6; background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -ms-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear; }
-.btn-primary, .btn-primary:hover { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); color: #ffffff; }
-.btn-primary.active { color: rgba(255, 255, 255, 0.75); }
-.btn-primary { background-color: #4a77d4; background-image: -moz-linear-gradient(top, #6eb6de, #4a77d4); background-image: -ms-linear-gradient(top, #6eb6de, #4a77d4); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6eb6de), to(#4a77d4)); background-image: -webkit-linear-gradient(top, #6eb6de, #4a77d4); background-image: -o-linear-gradient(top, #6eb6de, #4a77d4); background-image: linear-gradient(top, #6eb6de, #4a77d4); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr=#6eb6de, endColorstr=#4a77d4, GradientType=0);  border: 1px solid #3762bc; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5); }
-.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { filter: none; background-color: #4a77d4; }
-.btn-block { width: 100%; display:block; }
-
-* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }
-
-html { width: 100%; height:100%; overflow:hidden; }
-
-body { 
-	width: 100%;
-	height:100%;
-	font-family: 'Open Sans', sans-serif;
-	background: #092756;
-	background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%),-moz-linear-gradient(top,  rgba(57,173,219,.25) 0%, rgba(42,60,87,.4) 100%), -moz-linear-gradient(-45deg,  #670d10 0%, #092756 100%);
-	background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -webkit-linear-gradient(top,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -webkit-linear-gradient(-45deg,  #670d10 0%,#092756 100%);
-	background: -o-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -o-linear-gradient(top,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -o-linear-gradient(-45deg,  #670d10 0%,#092756 100%);
-	background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -ms-linear-gradient(top,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -ms-linear-gradient(-45deg,  #670d10 0%,#092756 100%);
-	background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), linear-gradient(to bottom,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), linear-gradient(135deg,  #670d10 0%,#092756 100%);
-	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3E1D6D', endColorstr='#092756',GradientType=1 );
-}
-.login { 
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	margin: -150px 0 0 -150px;
-	width:300px;
-	height:300px;
-}
-.login h1 { color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.3); letter-spacing:1px; text-align:center; }
-
-input { 
-	width: 100%; 
-	margin-bottom: 10px; 
-	background: rgba(0,0,0,0.3);
-	border: none;
-	outline: none;
-	padding: 10px;
-	font-size: 13px;
-	color: #fff;
-	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
-	border: 1px solid rgba(0,0,0,0.3);
-	border-radius: 4px;
-	box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
-	-webkit-transition: box-shadow .5s ease;
-	-moz-transition: box-shadow .5s ease;
-	-o-transition: box-shadow .5s ease;
-	-ms-transition: box-shadow .5s ease;
-	transition: box-shadow .5s ease;
-}
-input:focus { box-shadow: inset 0 -5px 45px rgba(100,100,100,0.4), 0 1px 1px rgba(255,255,255,0.2); }
+* {
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+html, body {
+  height: 100%;
+}
+
+body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  position: relative;
+  background: linear-gradient(135deg, rgba(36, 46, 77, 0.9), rgba(137, 126, 121, 0.9));
+  font-family: 'Roboto', helvetica, arial, sans-serif;
+  font-size: 1.5em;
+}
+body:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
+  opacity: .3;
+}
+
+.login-form {
+  width: 100%;
+  padding: 2em;
+  position: relative;
+  background: rgba(0, 0, 0, 0.15);
+}
+.login-form:before {
+  content: '';
+  position: absolute;
+  top: -2px;
+  left: 0;
+  height: 2px;
+  width: 100%;
+  background: linear-gradient(to right, #35c3c1, #00d6b7);
+}
+@media screen and (min-width: 600px) {
+  .login-form {
+    width: 50vw;
+    max-width: 15em;
+  }
+}
+
+.flex-row {
+  display: flex;
+  margin-bottom: 1em;
+}
+
+.lf--label {
+  width: 2em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f5f6f8;
+  cursor: pointer;
+}
+
+.lf--input {
+  flex: 1;
+  padding: 1em;
+  border: 0;
+  color: #8f8f8f;
+  font-size: 1rem;
+}
+.lf--input:focus {
+  outline: none;
+  transition: -webkit-transform .15s ease;
+  transition: transform .15s ease;
+  transition: transform .15s ease, -webkit-transform .15s ease;
+  -webkit-transform: scale(1.1);
+          transform: scale(1.1);
+}
+
+.lf--submit {
+  display: block;
+  padding: 1em;
+  width: 100%;
+  background: linear-gradient(to right, #35c3c1, #00d6b7);
+  border: 0;
+  color: #fff;
+  cursor: pointer;
+  font-size: .75em;
+  font-weight: 600;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
+}
+.lf--submit:focus {
+  outline: none;
+  transition: -webkit-transform .15s ease;
+  transition: transform .15s ease;
+  transition: transform .15s ease, -webkit-transform .15s ease;
+  -webkit-transform: scale(1.1);
+          transform: scale(1.1);
+}
+
+.lf--forgot {
+  margin-top: 1em;
+  color: #00d6b7;
+  font-size: .65em;
+  text-align: center;
+  position: relative;
+}
+
+::-webkit-input-placeholder {
+  color: #8f8f8f;
+}
+
+:-ms-input-placeholder {
+  color: #8f8f8f;
+}
+
+::-ms-input-placeholder {
+  color: #8f8f8f;
+}
+
+::placeholder {
+  color: #8f8f8f;
+}
--- a/loading-icons/css-animation-ai-loader/README.md
+++ b/loading-icons/css-animation-ai-loader/README.md
@ -0,0 +1,3 @@
+# [CSS Animation] AI Loader
+
+Uses `blur` & `contrast` filter to simulate a gooey effect.
--- a/loading-icons/css-animation-ai-loader/index.html
+++ b/loading-icons/css-animation-ai-loader/index.html
@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>[CSS Animation] AI Loader</title>
+  <meta name="viewport" content="width=device-width, initial-scale=.75"><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+
+<h1 class="intro">AI Loader<small>design test</small></h1>
+<div class="box">
+  <div class="loader">
+    <div class="o"></div>
+    <div class="o"></div>
+    <div class="o"></div>
+    <div class="o"></div>
+  </div>
+</div>
+  
+</body>
+</html>
--- a/loading-icons/css-animation-ai-loader/style.css
+++ b/loading-icons/css-animation-ai-loader/style.css
@ -0,0 +1,185 @@
+.loader {
+  position: relative;
+  display: -webkit-box;
+  display: flex;
+  font-size: 12px;
+}
+.loader::after {
+  content: '';
+  position: absolute;
+  top: calc(50% - .15em);
+  left: -5vw;
+  height: .3em;
+  width: calc(100% + 10vw);
+  border-radius: 50%;
+  background-color: currentColor;
+  -webkit-transform: translateZ(0);
+          transform: translateZ(0);
+  -webkit-filter: blur(0.05em) contrast(2);
+          filter: blur(0.05em) contrast(2);
+  box-shadow: 0 0 1em #ccf, 0 0 2em #ccf;
+}
+
+.o {
+  position: relative;
+  left: -42px;
+  z-index: 1;
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  background-color: currentColor;
+  margin-left: 3em;
+  margin-right: 3em;
+  -webkit-animation: translateX 1s linear infinite;
+          animation: translateX 1s linear infinite;
+  -webkit-filter: blur(0.3em) contrast(5);
+          filter: blur(0.3em) contrast(5);
+  box-shadow: 0 0 0.15em, 0 0 1em 0.25em #9999ff, 0 0 3em 1.5em rgba(153, 153, 255, 0.2), 0 0 5em rgba(153, 153, 255, 0.5);
+}
+.o:first-child {
+  -webkit-animation-name: translateX, hide-show;
+          animation-name: translateX, hide-show;
+  -webkit-animation-timing-function: linear, step-end;
+          animation-timing-function: linear, step-end;
+}
+.o:last-child {
+  -webkit-transform-origin: -99px 50%;
+          transform-origin: -99px 50%;
+  -webkit-animation-name: helf-rotate;
+          animation-name: helf-rotate;
+  -webkit-animation-timing-function: cubic-bezier(0.25, 0, 0.4, 1.25);
+          animation-timing-function: cubic-bezier(0.25, 0, 0.4, 1.25);
+}
+@-webkit-keyframes translateX {
+  100% {
+    -webkit-transform: translateX(84px);
+            transform: translateX(84px);
+  }
+}
+@keyframes translateX {
+  100% {
+    -webkit-transform: translateX(84px);
+            transform: translateX(84px);
+  }
+}
+@-webkit-keyframes helf-rotate {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  50% {
+    opacity: 1;
+    -webkit-transform: rotate(180deg);
+            transform: rotate(180deg);
+  }
+  50.1%, 100% {
+    opacity: 0;
+  }
+}
+@keyframes helf-rotate {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  50% {
+    opacity: 1;
+    -webkit-transform: rotate(180deg);
+            transform: rotate(180deg);
+  }
+  50.1%, 100% {
+    opacity: 0;
+  }
+}
+@-webkit-keyframes hide-show {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+@keyframes hide-show {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+.box {
+  position: relative;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-flex: 1;
+          flex: 1;
+  -webkit-box-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+          align-items: center;
+  flex-wrap: wrap;
+  overflow: hidden;
+}
+.box:hover * {
+/*  -webkit-animation-play-state: paused;
+          animation-play-state: paused; */
+}
+.box:active * {
+  -webkit-animation-play-state: running;
+          animation-play-state: running;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  height: 100%;
+}
+
+body {
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+          flex-direction: column;
+  min-height: 100%;
+  margin: 0;
+  line-height: 1.4;
+  color: #fff;
+  background-color: #000;
+}
+
+.intro {
+  width: 90%;
+  max-width: 50rem;
+  padding-top: .5em;
+  padding-bottom: 1rem;
+  margin: 0 auto 1em;
+  font-size: calc(1rem + 2vmin);
+  text-transform: capitalize;
+  text-align: center;
+  font-family: serif;
+}
+.intro small {
+  display: block;
+  text-align: right;
+  opacity: .5;
+  font-style: italic;
+  text-transform: none;
+  border-top: 1px dashed rgba(255, 255, 255, 0.75);
+}
+
+.info {
+  margin: 0;
+  padding: 1em;
+  font-size: .9em;
+  font-style: italic;
+  font-family: serif;
+  text-align: right;
+  opacity: .75;
+}
+.info a {
+  color: inherit;
+}
--- a/templates-and-navigation/home-page-design/README.md
+++ b/templates-and-navigation/home-page-design/README.md
@ -0,0 +1 @@
+# Home Page Design
--- a/templates-and-navigation/home-page-design/index.html
+++ b/templates-and-navigation/home-page-design/index.html
@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Home Page Design</title>
+  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+
+<div class="main">
+  <div class="main-header">
+    <div class="nav-button but-hol">
+<span class="nos"></span>
+<span class="ncs"></span>
+<span class="nbs"></span><div class="menu-button-text">Menu</div></div>
+    
+    <div class="header-social">
+      <ul>
+        <li><a target="_blank" href="#"><i class="fab fa-facebook-f"></i></a></li>
+        <li><a target="_blank" href="#"><i class="fab fa-twitter"></i></a></li>
+        <li><a target="_blank" href="#"><i class="fab fa-dribbble"></i></a></li>
+        <li><a target="_blank" href="#"><i class="fab fa-instagram"></i></a></li>
+      </ul>
+    </div>
+    <div class="folio-btn">
+      <a class="folio-btn-item ajax" href="#" target="_blank"><span class="folio-btn-dot"></span><span class="folio-btn-dot"></span><span class="folio-btn-dot"></span><span class="folio-btn-dot"></span><span class="folio-btn-dot"></span><span class="folio-btn-dot"></span><span class="folio-btn-dot"></span><span class="folio-btn-dot"></span><span class="folio-btn-dot"></span></a>
+    </div>
+  </div>
+
+  <div id="wrapper">
+    <div class="content-holder">
+      <div class="hero-wrap fl-wrap full-height scroll-con-sec">
+        
+        <div class="impulse-wrap">
+          <div class="mm-par-wrap">
+            <div class="mm-parallax" data-tilt data-tilt-max="4" >
+              <div class="overlay"></div>
+              <div class="bg" data-bg="https://images.unsplash.com/photo-1499018658500-b21c72d7172b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80" style="background-image: url(https://images.unsplash.com/photo-1499018658500-b21c72d7172b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80);">
+                
+              </div>
+              
+              <div class="hero-wrap-item fl-wrap">
+                <div class="container"><div class="fl-wrap section-entry hiddec-anim" style="opacity: 1; ">
+                 <h1 class="BoardName">Welcome to My Page</h1>
+                  
+                  </div></div></div>
+              
+            </div>
+            
+          </div>
+        </div>
+        
+        <div class="hero-corner hiddec-anim" style="opacity: 1; transform: translate3d(0px, 0px, 0px);"></div>
+        
+        <div class="hero-corner2 hiddec-anim" style="opacity: 1; transform: translate3d(0px, 0px, 0px);"></div>
+        
+        <div class="hero-corner3 hiddec-anim" style="opacity: 1; transform: translate3d(0px, 0px, 0px);"></div>
+        
+        <div class="hero-corner4 hiddec-anim" style="opacity: 1; transform: translate3d(0px, 0px, 0px);"></div>
+        
+        
+      </div>
+    </div>
+  </div>
+  
+</div>
+
+<script src='https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js'></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script><script  src="./script.js"></script>
+
+</body>
+</html>
--- a/templates-and-navigation/home-page-design/script.js
+++ b/templates-and-navigation/home-page-design/script.js
@ -0,0 +1,312 @@
+'use strict';
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+(function (factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(['jquery'], factory);
+    } else if ((typeof module === 'undefined' ? 'undefined' : _typeof(module)) === 'object' && module.exports) {
+        // Node/CommonJS
+        module.exports = function (root, jQuery) {
+            if (jQuery === undefined) {
+                // require('jQuery') returns a factory that requires window to
+                // build a jQuery instance, we normalize how we use modules
+                // that require this pattern but the window provided is a noop
+                // if it's defined (how jquery works)
+                if (typeof window !== 'undefined') {
+                    jQuery = require('jquery');
+                } else {
+                    jQuery = require('jquery')(root);
+                }
+            }
+            factory(jQuery);
+            return jQuery;
+        };
+    } else {
+        // Browser globals
+        factory(jQuery);
+    }
+})(function ($) {
+    $.fn.tilt = function (options) {
+
+        /**
+         * RequestAnimationFrame
+         */
+        var requestTick = function requestTick() {
+            if (this.ticking) return;
+            requestAnimationFrame(updateTransforms.bind(this));
+            this.ticking = true;
+        };
+
+        /**
+         * Bind mouse movement evens on instance
+         */
+        var bindEvents = function bindEvents() {
+            var _this = this;
+            $(this).on('mousemove', mouseMove);
+            $(this).on('mouseenter', mouseEnter);
+            if (this.settings.reset) $(this).on('mouseleave', mouseLeave);
+            if (this.settings.glare) $(window).on('resize', updateGlareSize.bind(_this));
+        };
+
+        /**
+         * Set transition only on mouse leave and mouse enter so it doesn't influence mouse move transforms
+         */
+        var setTransition = function setTransition() {
+            var _this2 = this;
+
+            if (this.timeout !== undefined) clearTimeout(this.timeout);
+            $(this).css({ 'transition': this.settings.speed + 'ms ' + this.settings.easing });
+            if (this.settings.glare) this.glareElement.css({ 'transition': 'opacity ' + this.settings.speed + 'ms ' + this.settings.easing });
+            this.timeout = setTimeout(function () {
+                $(_this2).css({ 'transition': '' });
+                if (_this2.settings.glare) _this2.glareElement.css({ 'transition': '' });
+            }, this.settings.speed);
+        };
+
+        /**
+         * When user mouse enters tilt element
+         */
+        var mouseEnter = function mouseEnter(event) {
+            this.ticking = false;
+            $(this).css({ 'will-change': 'transform' });
+            setTransition.call(this);
+
+            // Trigger change event
+            $(this).trigger("tilt.mouseEnter");
+        };
+
+        /**
+         * Return the x,y position of the mouse on the tilt element
+         * @returns {{x: *, y: *}}
+         */
+        var getMousePositions = function getMousePositions(event) {
+            if (typeof event === "undefined") {
+                event = {
+                    pageX: $(this).offset().left + $(this).outerWidth() / 2,
+                    pageY: $(this).offset().top + $(this).outerHeight() / 2
+                };
+            }
+            return { x: event.pageX, y: event.pageY };
+        };
+
+        /**
+         * When user mouse moves over the tilt element
+         */
+        var mouseMove = function mouseMove(event) {
+            this.mousePositions = getMousePositions(event);
+            requestTick.call(this);
+        };
+
+        /**
+         * When user mouse leaves tilt element
+         */
+        var mouseLeave = function mouseLeave() {
+            setTransition.call(this);
+            this.reset = true;
+            requestTick.call(this);
+
+            // Trigger change event
+            $(this).trigger("tilt.mouseLeave");
+        };
+
+        /**
+         * Get tilt values
+         *
+         * @returns {{x: tilt value, y: tilt value}}
+         */
+        var getValues = function getValues() {
+            var width = $(this).outerWidth();
+            var height = $(this).outerHeight();
+            var left = $(this).offset().left;
+            var top = $(this).offset().top;
+            var percentageX = (this.mousePositions.x - left) / width;
+            var percentageY = (this.mousePositions.y - top) / height;
+            // x or y position inside instance / width of instance = percentage of position inside instance * the max tilt value
+            var tiltX = (this.settings.maxTilt / 2 - percentageX * this.settings.maxTilt).toFixed(2);
+            var tiltY = (percentageY * this.settings.maxTilt - this.settings.maxTilt / 2).toFixed(2);
+            // angle
+            var angle = Math.atan2(this.mousePositions.x - (left + width / 2), -(this.mousePositions.y - (top + height / 2))) * (180 / Math.PI);
+            // Return x & y tilt values
+            return { tiltX: tiltX, tiltY: tiltY, 'percentageX': percentageX * 100, 'percentageY': percentageY * 100, angle: angle };
+        };
+
+        /**
+         * Update tilt transforms on mousemove
+         */
+        var updateTransforms = function updateTransforms() {
+            this.transforms = getValues.call(this);
+
+            if (this.reset) {
+                this.reset = false;
+                $(this).css('transform', 'perspective(' + this.settings.perspective + 'px) rotateX(0deg) rotateY(0deg)');
+
+                // Rotate glare if enabled
+                if (this.settings.glare) {
+                    this.glareElement.css('transform', 'rotate(180deg) translate(-50%, -50%)');
+                    this.glareElement.css('opacity', '0');
+                }
+
+                return;
+            } else {
+                $(this).css('transform', 'perspective(' + this.settings.perspective + 'px) rotateX(' + (this.settings.disableAxis === 'x' ? 0 : this.transforms.tiltY) + 'deg) rotateY(' + (this.settings.disableAxis === 'y' ? 0 : this.transforms.tiltX) + 'deg) scale3d(' + this.settings.scale + ',' + this.settings.scale + ',' + this.settings.scale + ')');
+
+                // Rotate glare if enabled
+                if (this.settings.glare) {
+                    this.glareElement.css('transform', 'rotate(' + this.transforms.angle + 'deg) translate(-50%, -50%)');
+                    this.glareElement.css('opacity', '' + this.transforms.percentageY * this.settings.maxGlare / 100);
+                }
+            }
+
+            // Trigger change event
+            $(this).trigger("change", [this.transforms]);
+
+            this.ticking = false;
+        };
+
+        /**
+         * Prepare elements
+         */
+        var prepareGlare = function prepareGlare() {
+            var glarePrerender = this.settings.glarePrerender;
+
+            // If option pre-render is enabled we assume all html/css is present for an optimal glare effect.
+            if (!glarePrerender)
+                // Create glare element
+                $(this).append('<div class="js-tilt-glare"><div class="js-tilt-glare-inner"></div></div>');
+
+            // Store glare selector if glare is enabled
+            this.glareElementWrapper = $(this).find(".js-tilt-glare");
+            this.glareElement = $(this).find(".js-tilt-glare-inner");
+
+            // Remember? We assume all css is already set, so just return
+            if (glarePrerender) return;
+
+            // Abstracted re-usable glare styles
+            var stretch = {
+                'position': 'absolute',
+                'top': '0',
+                'left': '0',
+                'width': '100%',
+                'height': '100%'
+            };
+
+            // Style glare wrapper
+            this.glareElementWrapper.css(stretch).css({
+                'overflow': 'hidden',
+                'pointer-events': 'none'
+            });
+
+            // Style glare element
+            this.glareElement.css({
+                'position': 'absolute',
+                'top': '50%',
+                'left': '50%',
+                'background-image': 'linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)',
+                'width': '' + $(this).outerWidth() * 2,
+                'height': '' + $(this).outerWidth() * 2,
+                'transform': 'rotate(180deg) translate(-50%, -50%)',
+                'transform-origin': '0% 0%',
+                'opacity': '0'
+            });
+        };
+
+        /**
+         * Update glare on resize
+         */
+        var updateGlareSize = function updateGlareSize() {
+            this.glareElement.css({
+                'width': '' + $(this).outerWidth() * 2,
+                'height': '' + $(this).outerWidth() * 2
+            });
+        };
+
+        /**
+         * Public methods
+         */
+        $.fn.tilt.destroy = function () {
+            $(this).each(function () {
+                $(this).find('.js-tilt-glare').remove();
+                $(this).css({ 'will-change': '', 'transform': '' });
+                $(this).off('mousemove mouseenter mouseleave');
+            });
+        };
+
+        $.fn.tilt.getValues = function () {
+            var results = [];
+            $(this).each(function () {
+                this.mousePositions = getMousePositions.call(this);
+                results.push(getValues.call(this));
+            });
+            return results;
+        };
+
+        $.fn.tilt.reset = function () {
+            $(this).each(function () {
+                var _this3 = this;
+
+                this.mousePositions = getMousePositions.call(this);
+                this.settings = $(this).data('settings');
+                mouseLeave.call(this);
+                setTimeout(function () {
+                    _this3.reset = false;
+                }, this.settings.transition);
+            });
+        };
+
+        /**
+         * Loop every instance
+         */
+        return this.each(function () {
+            var _this4 = this;
+
+            /**
+             * Default settings merged with user settings
+             * Can be set trough data attributes or as parameter.
+             * @type {*}
+             */
+            this.settings = $.extend({
+                maxTilt: $(this).is('[data-tilt-max]') ? $(this).data('tilt-max') : 20,
+                perspective: $(this).is('[data-tilt-perspective]') ? $(this).data('tilt-perspective') : 300,
+                easing: $(this).is('[data-tilt-easing]') ? $(this).data('tilt-easing') : 'cubic-bezier(.03,.98,.52,.99)',
+                scale: $(this).is('[data-tilt-scale]') ? $(this).data('tilt-scale') : '1',
+                speed: $(this).is('[data-tilt-speed]') ? $(this).data('tilt-speed') : '400',
+                transition: $(this).is('[data-tilt-transition]') ? $(this).data('tilt-transition') : true,
+                disableAxis: $(this).is('[data-tilt-disable-axis]') ? $(this).data('tilt-disable-axis') : null,
+                axis: $(this).is('[data-tilt-axis]') ? $(this).data('tilt-axis') : null,
+                reset: $(this).is('[data-tilt-reset]') ? $(this).data('tilt-reset') : true,
+                glare: $(this).is('[data-tilt-glare]') ? $(this).data('tilt-glare') : false,
+                maxGlare: $(this).is('[data-tilt-maxglare]') ? $(this).data('tilt-maxglare') : 1
+            }, options);
+
+            // Add deprecation warning & set disableAxis to deprecated axis setting
+            if (this.settings.axis !== null) {
+                console.warn('Tilt.js: the axis setting has been renamed to disableAxis. See https://github.com/gijsroge/tilt.js/pull/26 for more information');
+                this.settings.disableAxis = this.settings.axis;
+            }
+
+            this.init = function () {
+                // Store settings
+                $(_this4).data('settings', _this4.settings);
+
+                // Prepare element
+                if (_this4.settings.glare) prepareGlare.call(_this4);
+
+                // Bind events
+                bindEvents.call(_this4);
+            };
+
+            // Init
+            this.init();
+        });
+    };
+
+    /**
+     * Auto load
+     */
+    $('[data-tilt]').tilt();
+
+    return true;
+});
+//# sourceMappingURL=tilt.jquery.js.map
--- a/templates-and-navigation/home-page-design/style.css
+++ b/templates-and-navigation/home-page-design/style.css
@ -0,0 +1,388 @@
+* {
+    margin: 0;
+    padding: 0;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+body
+{
+  text-align:center;
+}
+
+.BoardName
+{
+  color: white;
+    text-shadow: 1px 2px 3px black;
+    font-size: 35px;
+    transform-style: preserve-3d;
+    transform: translateZ(80px);
+}
+
+.main
+{
+  height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    opacity: 1;
+}
+
+.main-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 80px;
+    bottom: 0;
+    z-index: 20;
+    background: #292929;
+    -webkit-transform: translate3d(0,0,0);
+}
+
+.folio-btn {
+    position: absolute;
+    right: 0;
+    width: 100%;
+    bottom: 0;
+    height: 80px;
+    background: #343434;
+    border-top: 1px solid rgba(255,255,255,0.1);
+}
+
+.folio-btn-item {
+    position: absolute;
+    left: 20px;
+    width: 40px;
+    height: 40px;
+    top: 20px;
+}
+
+.folio-btn-dot {
+    float: left;
+    width: 33.3%;
+    height: 33.3%;
+    position: relative;
+}
+
+.folio-btn-dot:before {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 4px;
+    height: 4px;
+    margin: -2px 0 0 -2px;
+    border-radius: 50%;
+    transition: all 300ms linear;
+    transform: scale(1.0);
+}
+
+.folio-btn-dot:before
+{
+  background: #F68338;
+}
+
+.folio-btn:hover .folio-btn-dot:first-child:before, .folio-btn:hover .folio-btn-dot:nth-child(3):before, .folio-btn:hover .folio-btn-dot:nth-child(4):before, .folio-btn:hover .folio-btn-dot:nth-child(8):before {
+    transform: scale(1.8);
+    opacity: 0.5;
+}
+
+
+/***social***/
+.header-social {
+    position: absolute;
+    bottom: 80px;
+    width: 100%;
+    right: 0;
+    z-index: 20;
+    padding: 20px 0;
+    background: #383838;
+}
+
+.header-social:before
+{
+  background: #F68338;
+}
+
+.header-social:before {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: -3px;
+    width: 36px;
+    margin-left: -18px;
+    height: 6px;
+}
+
+.header-social li {
+    display: block;
+    margin-top: 6px;
+}
+
+.header-social li a {
+    width: 36px;
+    height: 36px;
+    line-height: 36px;
+    display: inline-block;
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.41);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    transition: all 300ms linear;
+}
+
+.header-social li a:hover
+{
+  color: #F68338;
+}
+
+ul, li
+{
+      border: none;
+    outline: 0;
+    font-weight: inherit;
+    font-style: inherit;
+    font-size: 100%;
+    font-family: inherit;
+    vertical-align: baseline;
+    text-decoration: none;
+    margin: 0;
+    padding: 0;
+}
+
+ol, ul {
+    list-style: none;
+}
+
+.main-header:before {
+    content: '';
+    position: absolute;
+    left: 10px;
+    width: 60px;
+    height: 1px;
+    bottom: 120px;
+    background: rgba(255,255,255,0.1);
+}
+
+.nav-button {
+    width: 28px;
+    height: 50px;
+    display: inline-block;
+    cursor: pointer;
+    position: relative;
+    top: 120px;
+}
+
+.nav-button span {
+    width: 100%;
+    float: left;
+    margin-bottom: 6px;
+    height: 2px;
+    background: #fff;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.2s ease-in-out;
+}
+
+.nav-button .ncs {
+    width: 70%;
+}
+
+.nav-button .nbs, .nav-button.cmenu:hover .nbs {
+    width: 100%;
+}
+
+.menu-button-text {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    bottom: -1px;
+    color: rgba(255, 255, 255, 0.41);
+    font-size: 10px;
+    font-weight: 400;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+}
+
+.nav-button span
+{
+  background: #F68338;
+}
+
+.nav-button:hover span:before {
+    width: 100%;
+}
+
+.nav-button:hover .ncs, .nav-button:hover .nbs {
+    width: 100%;
+}
+
+.nav-button span:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 0;
+    height: 100%;
+    background: #fff;
+    transition: all 0.2s ease-in-out;
+}
+
+
+
+
+/*****end****/
+
+
+
+#wrapper {
+    position: absolute;
+    top: 0;
+    left: 80px;
+    right: 0;
+    bottom: 0;
+    z-index: 3;
+}
+
+.content-holder {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.hero-wrap, .fs-slider-wrap {
+    background: #292929;
+    z-index: 25;
+}
+
+.full-height
+{
+      height: 100%;
+}
+
+.fl-wrap {
+    float: left;
+    width: 100%;
+    position: relative;
+}
+
+
+.impulse-wrap {
+    background: #232323;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    -webkit-perspective: 1000;
+}
+
+.impulse-wrap:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+
+.mm-parallax {
+    position: absolute;
+    top: 100px;
+    left: 100px;
+    right: 100px;
+    bottom: 100px;
+    z-index: 20;
+    transform-style: preserve-3d;
+}
+
+
+.impulse-wrap .bg, .impulse-wrap .overlay {
+    box-shadow: 0 20px 25px 0 rgba(18,17,30,.35);
+}
+
+.overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: black;
+    opacity: 0.4;
+    z-index: 3;
+}
+
+.bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    background-size: cover;
+    background-attachment: scroll;
+    background-position: center;
+    background-repeat: repeat;
+    background-origin: content-box;
+}
+
+
+
+
+.hero-corner {
+    top: 50px;
+    right: 50px;
+    z-index: 21;
+    border-top: 1px solid;
+    border-right: 1px solid;
+}
+
+.hero-corner2 {
+    top: 50px;
+    left: 50px;
+    border-top: 1px solid;
+    border-left: 1px solid;
+}
+
+.hero-corner3 {
+    bottom: 50px;
+    right: 50px;
+    border-bottom: 1px solid;
+    border-right: 1px solid;
+}
+
+.hero-corner4 {
+bottom: 50px;
+    left: 50px;
+    z-index: 21;
+    border-left: 1px solid;
+    border-bottom: 1px solid;
+}
+
+
+
+.hero-corner, .hero-corner2, .hero-corner3, .hero-corner4 {
+    position: absolute;
+    width: 70px;
+    height: 70px;
+    z-index: 21;
+    border-color: rgba(255,255,255,0.3);
+}
+
+
+.fl-wrap {
+    float: left;
+    width: 100%;
+    position: relative;
+  transform: translateZ(80px)
+}
+
+.hero-wrap-item {
+    top: 45%;
+}
--- a/web-snippets/canvas-clock/README.md
+++ b/web-snippets/canvas-clock/README.md
@ -0,0 +1,3 @@
+# Canvas Clock
+
+A clock made whith canvas javascript.
--- a/web-snippets/canvas-clock/index.html
+++ b/web-snippets/canvas-clock/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Canvas Clock</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+
+  <canvas id="canvas" width="500" height="500" >cccc</canvas>
+  <script  src="./script.js"></script>
+
+</body>
+</html>
--- a/web-snippets/canvas-clock/script.js
+++ b/web-snippets/canvas-clock/script.js
@ -0,0 +1,54 @@
+var canvas = document.getElementById("canvas");
+		var ctx = canvas.getContext("2d");
+
+		ctx.strokeStyle = '#00ffff';
+		ctx.lineWidth = 17;
+		ctx.shadowBlur= 15;
+		ctx.shadowColor = '#00ffff'
+
+		function degToRad(degree){
+			var factor = Math.PI/180;
+			return degree*factor;
+		}
+
+		function renderTime(){
+			var now = new Date();
+			var today = now.toDateString();
+			var time = now.toLocaleTimeString();
+			var hrs = now.getHours();
+			var min = now.getMinutes();
+			var sec = now.getSeconds();
+			var mil = now.getMilliseconds();
+			var smoothsec = sec+(mil/1000);
+      var smoothmin = min+(smoothsec/60);
+
+			//Background
+			gradient = ctx.createRadialGradient(250, 250, 5, 250, 250, 300);
+			gradient.addColorStop(0, "#03303a");
+			gradient.addColorStop(1, "black");
+			ctx.fillStyle = gradient;
+			//ctx.fillStyle = 'rgba(00 ,00 , 00, 1)';
+			ctx.fillRect(0, 0, 500, 500);
+			//Hours
+			ctx.beginPath();
+			ctx.arc(250,250,200, degToRad(270), degToRad((hrs*30)-90));
+			ctx.stroke();
+			//Minutes
+			ctx.beginPath();
+			ctx.arc(250,250,170, degToRad(270), degToRad((smoothmin*6)-90));
+			ctx.stroke();
+			//Seconds
+			ctx.beginPath();
+			ctx.arc(250,250,140, degToRad(270), degToRad((smoothsec*6)-90));
+			ctx.stroke();
+			//Date
+			ctx.font = "25px Helvetica";
+			ctx.fillStyle = 'rgba(00, 255, 255, 1)'
+			ctx.fillText(today, 175, 250);
+			//Time
+			ctx.font = "25px Helvetica Bold";
+			ctx.fillStyle = 'rgba(00, 255, 255, 1)';
+			ctx.fillText(time+":"+mil, 175, 280);
+
+		}
+		setInterval(renderTime, 40);
--- a/web-snippets/canvas-clock/style.css
+++ b/web-snippets/canvas-clock/style.css
@ -0,0 +1,6 @@
+body {
+	background-color: black;		
+}
+#canvas{
+	background-color: black;		
+}
--- a/web-techniques/background-fade-demo/README.md
+++ b/web-techniques/background-fade-demo/README.md
@ -0,0 +1,3 @@
+# Background fade demo
+
+Simple background fade effect using opacity and transition.
--- a/web-techniques/background-fade-demo/index.html
+++ b/web-techniques/background-fade-demo/index.html
@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Background fade demo</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+<link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+
+<div class="past"></div>
+<div class="present" id="present"></div>
+<button id="toggle">Toggle</button>
+
+  <script  src="./script.js"></script>
+
+</body>
+</html>
--- a/web-techniques/background-fade-demo/script.js
+++ b/web-techniques/background-fade-demo/script.js
@ -0,0 +1,6 @@
+var toggle = document.getElementById("toggle");
+var present = document.getElementById("present");
+
+toggle.addEventListener("click", function( event ) {
+  present.classList.toggle("fade");
+});
--- a/web-techniques/background-fade-demo/style.css
+++ b/web-techniques/background-fade-demo/style.css
@ -0,0 +1,42 @@
+body {
+  height: 100vh;
+  width: 100vw;
+}
+
+.past {
+  background: url("https://raw.githubusercontent.com/huijing/filerepo/gh-pages/bg-home-1965.jpg") 50%;
+  background-size: cover;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+}
+
+.present {
+  background: url("https://raw.githubusercontent.com/huijing/filerepo/gh-pages/bg-home-2015.jpg") 50%;
+  background-size: cover;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 2;
+  opacity: 1;
+  -webkit-transition: opacity 1.5s ease-out;
+  transition: opacity 1.5s ease-out;
+}
+
+.fade {
+  opacity: 0;
+}
+
+button {
+  position: absolute;
+  z-index: 3;
+  background: rgba(0, 0, 0, 0.3);
+  border: 2px solid rgba(255, 255, 255, 0.7);
+  color: white;
+  top: 1rem;
+  padding: 0.5rem;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  cursor: pointer;
+}
--- a/web-techniques/table-simple-filtering/README.md
+++ b/web-techniques/table-simple-filtering/README.md
@ -0,0 +1,3 @@
+# Table: Simple filtering
+
+
--- a/web-techniques/table-simple-filtering/index.html
+++ b/web-techniques/table-simple-filtering/index.html
--- a/web-techniques/table-simple-filtering/script.js
+++ b/web-techniques/table-simple-filtering/script.js
@ -0,0 +1,18 @@
+const searchInput = document.getElementById('searchInput');
+const table = document.getElementById('filterTable');
+const trArray = Array.prototype.slice.call(table.querySelectorAll('tbody tr'));
+
+const filterTable = event => {
+  const searchTerm = event.target.value.toLowerCase();
+  trArray.forEach(row => {
+    row.classList.add('hidden');
+    const tdArray = Array.prototype.slice.call(row.getElementsByTagName('td'));
+    tdArray.forEach(cell => {
+      if (cell.innerText.toLowerCase().indexOf(searchTerm) > -1) {
+        row.classList.remove('hidden');
+      }
+    });
+  });
+};
+
+searchInput.addEventListener('keyup', filterTable, false);
--- a/web-techniques/table-simple-filtering/style.css
+++ b/web-techniques/table-simple-filtering/style.css
@ -0,0 +1,50 @@
+main {
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+          flex-direction: column;
+  padding: 1em;
+  -webkit-box-align: center;
+          align-items: center;
+}
+
+.table-wrapper {
+  overflow: auto;
+  max-width: 100%;
+  background: -webkit-gradient(linear, left top, right top, color-stop(30%, white), to(rgba(255, 255, 255, 0))), -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(70%, white)) 0 100%, radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
+  background: linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
+  background-repeat: no-repeat;
+  background-color: white;
+  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
+  background-position: 0 0, 100%, 0 0, 100%;
+  background-attachment: local, local, scroll, scroll;
+}
+
+tr {
+  border-bottom: 1px solid;
+}
+
+th {
+  background-color: #555;
+  color: #fff;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+th,
+td {
+  text-align: left;
+  padding: 0.5em 1em;
+}
+
+input[type=search] {
+  border: 1px solid;
+  font-size: initial;
+  margin-bottom: 1em;
+  padding: 0.25em;
+}
+
+.hidden {
+  display: none;
+}
--- a/web-techniques/table-simple-pagination/README.md
+++ b/web-techniques/table-simple-pagination/README.md
@ -0,0 +1,2 @@
+# Table: Simple pagination
+
--- a/web-techniques/table-simple-pagination/index.html
+++ b/web-techniques/table-simple-pagination/index.html
--- a/web-techniques/table-simple-pagination/script.js
+++ b/web-techniques/table-simple-pagination/script.js
@ -0,0 +1,104 @@
+let pageList = new Array();
+let currentPage = 1;
+const numberPerPage = 12;
+const rows = Array.prototype.slice.call(document.querySelectorAll('tbody tr'));
+const firstBtn = document.getElementById('first');
+const lastBtn = document.getElementById('last');
+const prevBtn = document.getElementById('prev');
+const nextBtn = document.getElementById('next');
+const numberOfPages = getNumberOfPages();
+const pageNumbers = document.getElementById('pageNumbers');
+
+firstBtn.addEventListener('click', firstPage, false);
+lastBtn.addEventListener('click', lastPage, false);
+prevBtn.addEventListener('click', prevPage, false);
+nextBtn.addEventListener('click', nextPage, false);
+
+window.onload = load(numberOfPages);
+
+function getNumberOfPages() {
+  return Math.ceil(rows.length / numberPerPage);
+}
+
+function generatePageNumbers(pageCount) {
+  for (let j = 1; j <= pageCount; j++) {
+    const pageNumber = document.createElement('span');
+    pageNumber.innerHTML = j;
+    pageNumber.classList.add('page-number');
+    pageNumbers.appendChild(pageNumber);
+    if (j === currentPage) {
+      pageNumber.classList.add('active');
+    }
+    pageNumber.addEventListener('click', jumpToPage, false);
+  }
+}
+
+function jumpToPage(event) {
+  currentPage = event.target.innerHTML;
+  loadRows();
+  activePageNum(currentPage);
+}
+
+function activePageNum(activePage) {
+  const pageNumbers = Array.prototype.slice.call(document.querySelectorAll('.page-number'));
+  pageNumbers.forEach(function (pageNumber) {
+    if (parseInt(pageNumber.innerHTML) === parseInt(activePage)) {
+      pageNumber.classList.add('active');
+    } else {
+      pageNumber.classList.remove('active');
+    }
+  });
+}
+
+function nextPage() {
+  currentPage = +currentPage + 1;
+  loadRows();
+  activePageNum(currentPage);
+}
+
+function prevPage() {
+  currentPage -= 1;
+  loadRows();
+  activePageNum(currentPage);
+}
+
+function firstPage() {
+  currentPage = 1;
+  loadRows();
+  activePageNum(currentPage);
+}
+
+function lastPage() {
+  currentPage = numberOfPages;
+  loadRows();
+  activePageNum(currentPage);
+}
+
+function loadRows() {
+  const start = (currentPage - 1) * numberPerPage;
+  const end = start + numberPerPage;
+  for (let i = 0; i < pageList.length; i++) {
+    pageList[i].classList.add('hidden');
+  }
+  pageList = rows.slice(start, end);
+  drawRows();
+  buttonStates();
+}
+
+function drawRows() {
+  for (let i = 0; i < pageList.length; i++) {
+    pageList[i].classList.remove('hidden');
+  }
+}
+
+function buttonStates() {
+  document.getElementById('next').disabled = currentPage == numberOfPages ? true : false;
+  document.getElementById('prev').disabled = currentPage == 1 ? true : false;
+  document.getElementById('first').disabled = currentPage == 1 ? true : false;
+  document.getElementById('last').disabled = currentPage == numberOfPages ? true : false;
+}
+
+function load(pageCount) {
+  generatePageNumbers(numberOfPages);
+  loadRows();
+}
--- a/web-techniques/table-simple-pagination/style.css
+++ b/web-techniques/table-simple-pagination/style.css
@ -0,0 +1,100 @@
+main {
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+          flex-direction: column;
+  padding: 1em;
+  -webkit-box-align: center;
+          align-items: center;
+}
+
+.table-wrapper {
+  overflow: auto;
+  max-width: 100%;
+  background: -webkit-gradient(linear, left top, right top, color-stop(30%, white), to(rgba(255, 255, 255, 0))), -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(70%, white)) 0 100%, radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
+  background: linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
+  background-repeat: no-repeat;
+  background-color: white;
+  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
+  background-position: 0 0, 100%, 0 0, 100%;
+  background-attachment: local, local, scroll, scroll;
+}
+
+tr {
+  border-bottom: 1px solid;
+}
+
+th {
+  background-color: #555;
+  color: #fff;
+}
+
+th,
+td {
+  text-align: left;
+  padding: 0.5em 1em;
+  white-space: nowrap;
+}
+
+.hidden {
+  display: none;
+}
+
+button {
+  font-size: inherit;
+  margin: 0 0.25em;
+  padding: 0.25em 0.5em;
+  background-color: #555;
+  color: #fff;
+  border: 0;
+  -webkit-transition: background-color 0.4s, color 0.4s;
+  transition: background-color 0.4s, color 0.4s;
+}
+button:hover {
+  background-color: #bbb;
+  color: #000;
+}
+
+.pagination {
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+          align-items: center;
+  margin-bottom: 1em;
+  flex-wrap: wrap;
+}
+
+.page-numbers {
+  margin: 1em 1em 0;
+}
+
+.page-number {
+  padding: 0.5em;
+  opacity: 0.5;
+  cursor: pointer;
+}
+
+.active {
+  opacity: 1;
+}
+
+@media screen and (min-width: 540px) {
+  .backward {
+    -webkit-box-ordinal-group: 2;
+            order: 1;
+  }
+
+  .page-numbers {
+    -webkit-box-ordinal-group: 3;
+            order: 2;
+    margin-top: 0;
+  }
+
+  .forward {
+    -webkit-box-ordinal-group: 4;
+            order: 3;
+  }
+}
--- a/web-techniques/table-simple-sorting/README.md
+++ b/web-techniques/table-simple-sorting/README.md
@ -0,0 +1,3 @@
+# #Table: Simple sorting
+
+
--- a/web-techniques/table-simple-sorting/index.html
+++ b/web-techniques/table-simple-sorting/index.html
--- a/Show More
+++ b/Show More
				`@ -0,0 +1,4 @@`
				`# Error 404: Page not found – 80s hacker theme`