<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/elrumordelaluz/pen/pHKcC?depth=everything&limit=all&order=popularity&page=26&q=section&show_forks=false" />
<script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script>
<style class="cp-pen-styles">@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Gentium+Basic);
@import url(https://fonts.googleapis.com/css?family=Dancing+Script);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
html {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
.shake {
display: inline-block;
transform-origin: center center;
}
.shake:hover {
animation-name: shake-base;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
.shake.freez {
animation-name: shake-base;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-play-state: paused;
}
.shake.freez.shake-hard {
animation-name: shake-hard;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
.shake.freez.shake-slow {
animation-name: shake-slow;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
.shake.freez.shake-little {
animation-name: shake-little;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
.shake.freez.shake-horizontal {
animation-name: shake-horizontal;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
.shake.freez.shake-vertical {
animation-name: shake-vertical;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
.shake.freez.shake-rotate {
animation-name: shake-rotate;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
.shake.freez.shake-opacity {
animation-name: shake-opacity;
animation-duration: 200ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
.shake.freez.shake-crazy {
animation-name: shake-crazy;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
.shake.freez:hover {
animation-play-state: running;
}
.shake.shake-hard:hover {
animation-name: shake-hard;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
.shake.shake-slow:hover {
animation-name: shake-slow;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
.shake.shake-little:hover {
animation-name: shake-little;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
.shake.shake-horizontal:hover {
animation-name: shake-horizontal;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
.shake.shake-vertical:hover {
animation-name: shake-vertical;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
.shake.shake-rotate:hover {
animation-name: shake-rotate;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
.shake.shake-opacity:hover {
animation-name: shake-opacity;
animation-duration: 200ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
.shake.shake-crazy:hover {
animation-name: shake-crazy;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
.shake.shake-constant {
animation-name: shake-base;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
.shake.shake-constant.shake-hard {
animation-name: shake-hard;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
.shake.shake-constant.shake-slow {
animation-name: shake-slow;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
.shake.shake-constant.shake-little {
animation-name: shake-little;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
.shake.shake-constant.shake-horizontal {
animation-name: shake-horizontal;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
.shake.shake-constant.shake-vertical {
animation-name: shake-vertical;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
.shake.shake-constant.shake-rotate {
animation-name: shake-rotate;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
.shake.shake-constant.shake-opacity {
animation-name: shake-opacity;
animation-duration: 200ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
.shake.shake-constant.shake-crazy {
animation-name: shake-crazy;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
}
.shake.shake-constant.hover-stop:hover {
animation-play-state: paused;
}
.shake.shake-delay {
animation-name: shake-base;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 4s;
}
@keyframes shake-base {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
2% {
transform: translate(-1.5px, 1.5px) rotate(-0.5deg);
}
4% {
transform: translate(2.5px, 2.5px) rotate(-0.5deg);
}
6% {
transform: translate(1.5px, 2.5px) rotate(1.5deg);
}
8% {
transform: translate(1.5px, 2.5px) rotate(0.5deg);
}
10% {
transform: translate(1.5px, -0.5px) rotate(1.5deg);
}
12% {
transform: translate(-1.5px, 1.5px) rotate(0.5deg);
}
14% {
transform: translate(-0.5px, -1.5px) rotate(-0.5deg);
}
16% {
transform: translate(-0.5px, 1.5px) rotate(0.5deg);
}
18% {
transform: translate(1.5px, 1.5px) rotate(1.5deg);
}
20% {
transform: translate(1.5px, 1.5px) rotate(1.5deg);
}
22% {
transform: translate(-0.5px, -1.5px) rotate(-0.5deg);
}
24% {
transform: translate(-1.5px, 2.5px) rotate(-0.5deg);
}
26% {
transform: translate(-1.5px, -1.5px) rotate(-0.5deg);
}
28% {
transform: translate(-0.5px, 1.5px) rotate(-0.5deg);
}
30% {
transform: translate(2.5px, -0.5px) rotate(0.5deg);
}
32% {
transform: translate(0.5px, -1.5px) rotate(0.5deg);
}
34% {
transform: translate(-0.5px, 0.5px) rotate(-0.5deg);
}
36% {
transform: translate(2.5px, -1.5px) rotate(1.5deg);
}
38% {
transform: translate(2.5px, 1.5px) rotate(1.5deg);
}
40% {
transform: translate(2.5px, -1.5px) rotate(0.5deg);
}
42% {
transform: translate(2.5px, -0.5px) rotate(0.5deg);
}
44% {
transform: translate(-1.5px, 0.5px) rotate(0.5deg);
}
46% {
transform: translate(-1.5px, -1.5px) rotate(0.5deg);
}
48% {
transform: translate(0.5px, 2.5px) rotate(1.5deg);
}
50% {
transform: translate(-1.5px, 2.5px) rotate(-0.5deg);
}
52% {
transform: translate(-0.5px, -1.5px) rotate(0.5deg);
}
54% {
transform: translate(-1.5px, -1.5px) rotate(1.5deg);
}
56% {
transform: translate(-0.5px, 0.5px) rotate(-0.5deg);
}
58% {
transform: translate(0.5px, -0.5px) rotate(0.5deg);
}
60% {
transform: translate(-1.5px, -1.5px) rotate(1.5deg);
}
62% {
transform: translate(2.5px, 0.5px) rotate(0.5deg);
}
64% {
transform: translate(-1.5px, 1.5px) rotate(1.5deg);
}
66% {
transform: translate(1.5px, 1.5px) rotate(0.5deg);
}
68% {
transform: translate(-0.5px, 0.5px) rotate(-0.5deg);
}
70% {
transform: translate(2.5px, 0.5px) rotate(0.5deg);
}
72% {
transform: translate(0.5px, -0.5px) rotate(0.5deg);
}
74% {
transform: translate(2.5px, 1.5px) rotate(1.5deg);
}
76% {
transform: translate(1.5px, 2.5px) rotate(-0.5deg);
}
78% {
transform: translate(2.5px, 0.5px) rotate(0.5deg);
}
80% {
transform: translate(-0.5px, 1.5px) rotate(0.5deg);
}
82% {
transform: translate(1.5px, 0.5px) rotate(1.5deg);
}
84% {
transform: translate(2.5px, 1.5px) rotate(0.5deg);
}
86% {
transform: translate(0.5px, 1.5px) rotate(1.5deg);
}
88% {
transform: translate(-1.5px, 0.5px) rotate(1.5deg);
}
90% {
transform: translate(0.5px, -0.5px) rotate(-0.5deg);
}
92% {
transform: translate(-1.5px, -0.5px) rotate(1.5deg);
}
94% {
transform: translate(-0.5px, -0.5px) rotate(-0.5deg);
}
96% {
transform: translate(0.5px, 2.5px) rotate(-0.5deg);
}
98% {
transform: translate(2.5px, -0.5px) rotate(0.5deg);
}
}
@keyframes shake-little {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
2% {
transform: translate(1px, 0px) rotate(0.5deg);
}
4% {
transform: translate(0px, 0px) rotate(0.5deg);
}
6% {
transform: translate(0px, 1px) rotate(0.5deg);
}
8% {
transform: translate(1px, 1px) rotate(0.5deg);
}
10% {
transform: translate(0px, 0px) rotate(0.5deg);
}
12% {
transform: translate(0px, 0px) rotate(0.5deg);
}
14% {
transform: translate(1px, 0px) rotate(0.5deg);
}
16% {
transform: translate(1px, 1px) rotate(0.5deg);
}
18% {
transform: translate(0px, 1px) rotate(0.5deg);
}
20% {
transform: translate(0px, 1px) rotate(0.5deg);
}
22% {
transform: translate(0px, 0px) rotate(0.5deg);
}
24% {
transform: translate(1px, 1px) rotate(0.5deg);
}
26% {
transform: translate(1px, 0px) rotate(0.5deg);
}
28% {
transform: translate(1px, 0px) rotate(0.5deg);
}
30% {
transform: translate(0px, 0px) rotate(0.5deg);
}
32% {
transform: translate(0px, 1px) rotate(0.5deg);
}
34% {
transform: translate(0px, 1px) rotate(0.5deg);
}
36% {
transform: translate(1px, 1px) rotate(0.5deg);
}
38% {
transform: translate(0px, 0px) rotate(0.5deg);
}
40% {
transform: translate(0px, 1px) rotate(0.5deg);
}
42% {
transform: translate(1px, 1px) rotate(0.5deg);
}
44% {
transform: translate(0px, 1px) rotate(0.5deg);
}
46% {
transform: translate(0px, 1px) rotate(0.5deg);
}
48% {
transform: translate(0px, 1px) rotate(0.5deg);
}
50% {
transform: translate(1px, 1px) rotate(0.5deg);
}
52% {
transform: translate(1px, 0px) rotate(0.5deg);
}
54% {
transform: translate(0px, 1px) rotate(0.5deg);
}
56% {
transform: translate(1px, 1px) rotate(0.5deg);
}
58% {
transform: translate(0px, 0px) rotate(0.5deg);
}
60% {
transform: translate(0px, 0px) rotate(0.5deg);
}
62% {
transform: translate(0px, 0px) rotate(0.5deg);
}
64% {
transform: translate(1px, 0px) rotate(0.5deg);
}
66% {
transform: translate(0px, 1px) rotate(0.5deg);
}
68% {
transform: translate(0px, 1px) rotate(0.5deg);
}
70% {
transform: translate(1px, 0px) rotate(0.5deg);
}
72% {
transform: translate(0px, 1px) rotate(0.5deg);
}
74% {
transform: translate(1px, 1px) rotate(0.5deg);
}
76% {
transform: translate(1px, 0px) rotate(0.5deg);
}
78% {
transform: translate(0px, 0px) rotate(0.5deg);
}
80% {
transform: translate(0px, 0px) rotate(0.5deg);
}
82% {
transform: translate(1px, 0px) rotate(0.5deg);
}
84% {
transform: translate(0px, 1px) rotate(0.5deg);
}
86% {
transform: translate(1px, 0px) rotate(0.5deg);
}
88% {
transform: translate(0px, 0px) rotate(0.5deg);
}
90% {
transform: translate(0px, 1px) rotate(0.5deg);
}
92% {
transform: translate(1px, 0px) rotate(0.5deg);
}
94% {
transform: translate(1px, 1px) rotate(0.5deg);
}
96% {
transform: translate(1px, 0px) rotate(0.5deg);
}
98% {
transform: translate(0px, 0px) rotate(0.5deg);
}
}
@keyframes shake-slow {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
2% {
transform: translate(-4px, 1px) rotate(3.5deg);
}
4% {
transform: translate(10px, -9px) rotate(2.5deg);
}
6% {
transform: translate(3px, -4px) rotate(1.5deg);
}
8% {
transform: translate(1px, 5px) rotate(-0.5deg);
}
10% {
transform: translate(1px, -3px) rotate(2.5deg);
}
12% {
transform: translate(4px, 5px) rotate(-0.5deg);
}
14% {
transform: translate(-9px, 2px) rotate(-2.5deg);
}
16% {
transform: translate(2px, 4px) rotate(-2.5deg);
}
18% {
transform: translate(6px, -7px) rotate(-0.5deg);
}
20% {
transform: translate(-6px, 6px) rotate(0.5deg);
}
22% {
transform: translate(-3px, 8px) rotate(-2.5deg);
}
24% {
transform: translate(3px, -6px) rotate(-2.5deg);
}
26% {
transform: translate(1px, 8px) rotate(-1.5deg);
}
28% {
transform: translate(3px, -9px) rotate(-1.5deg);
}
30% {
transform: translate(-6px, 4px) rotate(1.5deg);
}
32% {
transform: translate(10px, -6px) rotate(1.5deg);
}
34% {
transform: translate(2px, -4px) rotate(-1.5deg);
}
36% {
transform: translate(3px, 8px) rotate(-2.5deg);
}
38% {
transform: translate(5px, 8px) rotate(-2.5deg);
}
40% {
transform: translate(0px, -5px) rotate(-2.5deg);
}
42% {
transform: translate(-7px, 2px) rotate(-0.5deg);
}
44% {
transform: translate(3px, -5px) rotate(3.5deg);
}
46% {
transform: translate(-8px, -4px) rotate(1.5deg);
}
48% {
transform: translate(8px, -7px) rotate(1.5deg);
}
50% {
transform: translate(-3px, -5px) rotate(-0.5deg);
}
52% {
transform: translate(6px, 4px) rotate(2.5deg);
}
54% {
transform: translate(-7px, 5px) rotate(-2.5deg);
}
56% {
transform: translate(6px, 2px) rotate(-1.5deg);
}
58% {
transform: translate(-1px, 3px) rotate(0.5deg);
}
60% {
transform: translate(-1px, -8px) rotate(-1.5deg);
}
62% {
transform: translate(7px, -7px) rotate(-1.5deg);
}
64% {
transform: translate(4px, 0px) rotate(-2.5deg);
}
66% {
transform: translate(8px, 9px) rotate(-2.5deg);
}
68% {
transform: translate(-4px, 3px) rotate(-0.5deg);
}
70% {
transform: translate(-9px, -4px) rotate(0.5deg);
}
72% {
transform: translate(-9px, -2px) rotate(-0.5deg);
}
74% {
transform: translate(0px, 6px) rotate(3.5deg);
}
76% {
transform: translate(-3px, -2px) rotate(-0.5deg);
}
78% {
transform: translate(1px, -7px) rotate(3.5deg);
}
80% {
transform: translate(5px, -2px) rotate(1.5deg);
}
82% {
transform: translate(-1px, 5px) rotate(0.5deg);
}
84% {
transform: translate(-7px, 0px) rotate(2.5deg);
}
86% {
transform: translate(7px, -1px) rotate(3.5deg);
}
88% {
transform: translate(8px, -9px) rotate(0.5deg);
}
90% {
transform: translate(10px, -6px) rotate(2.5deg);
}
92% {
transform: translate(-7px, 2px) rotate(0.5deg);
}
94% {
transform: translate(3px, -7px) rotate(3.5deg);
}
96% {
transform: translate(-8px, 0px) rotate(-2.5deg);
}
98% {
transform: translate(-4px, -7px) rotate(0.5deg);
}
}
@keyframes shake-hard {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
2% {
transform: translate(8px, 8px) rotate(-0.5deg);
}
4% {
transform: translate(8px, 8px) rotate(1.5deg);
}
6% {
transform: translate(6px, 8px) rotate(1.5deg);
}
8% {
transform: translate(3px, -2px) rotate(0.5deg);
}
10% {
transform: translate(3px, -8px) rotate(-2.5deg);
}
12% {
transform: translate(-7px, 3px) rotate(1.5deg);
}
14% {
transform: translate(0px, -2px) rotate(-0.5deg);
}
16% {
transform: translate(-8px, -9px) rotate(-2.5deg);
}
18% {
transform: translate(7px, 8px) rotate(2.5deg);
}
20% {
transform: translate(-2px, 7px) rotate(-0.5deg);
}
22% {
transform: translate(8px, 8px) rotate(1.5deg);
}
24% {
transform: translate(-3px, -2px) rotate(-0.5deg);
}
26% {
transform: translate(-2px, 8px) rotate(-1.5deg);
}
28% {
transform: translate(6px, 10px) rotate(1.5deg);
}
30% {
transform: translate(9px, 1px) rotate(3.5deg);
}
32% {
transform: translate(3px, -7px) rotate(1.5deg);
}
34% {
transform: translate(-7px, -7px) rotate(-2.5deg);
}
36% {
transform: translate(-1px, 8px) rotate(-0.5deg);
}
38% {
transform: translate(0px, -5px) rotate(3.5deg);
}
40% {
transform: translate(-9px, 0px) rotate(-2.5deg);
}
42% {
transform: translate(9px, -3px) rotate(-2.5deg);
}
44% {
transform: translate(-9px, -1px) rotate(0.5deg);
}
46% {
transform: translate(5px, 10px) rotate(1.5deg);
}
48% {
transform: translate(2px, 7px) rotate(2.5deg);
}
50% {
transform: translate(7px, -2px) rotate(-0.5deg);
}
52% {
transform: translate(1px, 2px) rotate(0.5deg);
}
54% {
transform: translate(5px, -1px) rotate(0.5deg);
}
56% {
transform: translate(-9px, 6px) rotate(3.5deg);
}
58% {
transform: translate(-1px, -6px) rotate(1.5deg);
}
60% {
transform: translate(-1px, -8px) rotate(2.5deg);
}
62% {
transform: translate(8px, -9px) rotate(-2.5deg);
}
64% {
transform: translate(10px, 2px) rotate(1.5deg);
}
66% {
transform: translate(2px, 5px) rotate(-1.5deg);
}
68% {
transform: translate(7px, 8px) rotate(-0.5deg);
}
70% {
transform: translate(-1px, 1px) rotate(-2.5deg);
}
72% {
transform: translate(4px, -1px) rotate(0.5deg);
}
74% {
transform: translate(-3px, 1px) rotate(-2.5deg);
}
76% {
transform: translate(6px, 10px) rotate(-1.5deg);
}
78% {
transform: translate(6px, 0px) rotate(1.5deg);
}
80% {
transform: translate(9px, 0px) rotate(0.5deg);
}
82% {
transform: translate(8px, 10px) rotate(-2.5deg);
}
84% {
transform: translate(4px, -2px) rotate(0.5deg);
}
86% {
transform: translate(1px, 4px) rotate(-0.5deg);
}
88% {
transform: translate(2px, 3px) rotate(0.5deg);
}
90% {
transform: translate(-2px, 8px) rotate(1.5deg);
}
92% {
transform: translate(3px, 10px) rotate(-1.5deg);
}
94% {
transform: translate(2px, -2px) rotate(-0.5deg);
}
96% {
transform: translate(-3px, 10px) rotate(1.5deg);
}
98% {
transform: translate(4px, 6px) rotate(-2.5deg);
}
}
@keyframes shake-horizontal {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
2% {
transform: translate(-1px, 0px) rotate(0deg);
}
4% {
transform: translate(-6px, 0px) rotate(0deg);
}
6% {
transform: translate(-5px, 0px) rotate(0deg);
}
8% {
transform: translate(1px, 0px) rotate(0deg);
}
10% {
transform: translate(-9px, 0px) rotate(0deg);
}
12% {
transform: translate(-3px, 0px) rotate(0deg);
}
14% {
transform: translate(1px, 0px) rotate(0deg);
}
16% {
transform: translate(3px, 0px) rotate(0deg);
}
18% {
transform: translate(-7px, 0px) rotate(0deg);
}
20% {
transform: translate(6px, 0px) rotate(0deg);
}
22% {
transform: translate(1px, 0px) rotate(0deg);
}
24% {
transform: translate(2px, 0px) rotate(0deg);
}
26% {
transform: translate(3px, 0px) rotate(0deg);
}
28% {
transform: translate(8px, 0px) rotate(0deg);
}
30% {
transform: translate(8px, 0px) rotate(0deg);
}
32% {
transform: translate(0px, 0px) rotate(0deg);
}
34% {
transform: translate(-7px, 0px) rotate(0deg);
}
36% {
transform: translate(-9px, 0px) rotate(0deg);
}
38% {
transform: translate(-4px, 0px) rotate(0deg);
}
40% {
transform: translate(-8px, 0px) rotate(0deg);
}
42% {
transform: translate(10px, 0px) rotate(0deg);
}
44% {
transform: translate(10px, 0px) rotate(0deg);
}
46% {
transform: translate(-7px, 0px) rotate(0deg);
}
48% {
transform: translate(7px, 0px) rotate(0deg);
}
50% {
transform: translate(-4px, 0px) rotate(0deg);
}
52% {
transform: translate(10px, 0px) rotate(0deg);
}
54% {
transform: translate(-9px, 0px) rotate(0deg);
}
56% {
transform: translate(-8px, 0px) rotate(0deg);
}
58% {
transform: translate(6px, 0px) rotate(0deg);
}
60% {
transform: translate(-7px, 0px) rotate(0deg);
}
62% {
transform: translate(-4px, 0px) rotate(0deg);
}
64% {
transform: translate(-3px, 0px) rotate(0deg);
}
66% {
transform: translate(7px, 0px) rotate(0deg);
}
68% {
transform: translate(3px, 0px) rotate(0deg);
}
70% {
transform: translate(-7px, 0px) rotate(0deg);
}
72% {
transform: translate(8px, 0px) rotate(0deg);
}
74% {
transform: translate(-7px, 0px) rotate(0deg);
}
76% {
transform: translate(4px, 0px) rotate(0deg);
}
78% {
transform: translate(8px, 0px) rotate(0deg);
}
80% {
transform: translate(7px, 0px) rotate(0deg);
}
82% {
transform: translate(0px, 0px) rotate(0deg);
}
84% {
transform: translate(1px, 0px) rotate(0deg);
}
86% {
transform: translate(3px, 0px) rotate(0deg);
}
88% {
transform: translate(-8px, 0px) rotate(0deg);
}
90% {
transform: translate(9px, 0px) rotate(0deg);
}
92% {
transform: translate(-3px, 0px) rotate(0deg);
}
94% {
transform: translate(6px, 0px) rotate(0deg);
}
96% {
transform: translate(-9px, 0px) rotate(0deg);
}
98% {
transform: translate(10px, 0px) rotate(0deg);
}
}
@keyframes shake-vertical {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
2% {
transform: translate(0px, -6px) rotate(0deg);
}
4% {
transform: translate(0px, -9px) rotate(0deg);
}
6% {
transform: translate(0px, 2px) rotate(0deg);
}
8% {
transform: translate(0px, 8px) rotate(0deg);
}
10% {
transform: translate(0px, 8px) rotate(0deg);
}
12% {
transform: translate(0px, 9px) rotate(0deg);
}
14% {
transform: translate(0px, -8px) rotate(0deg);
}
16% {
transform: translate(0px, -7px) rotate(0deg);
}
18% {
transform: translate(0px, -3px) rotate(0deg);
}
20% {
transform: translate(0px, -8px) rotate(0deg);
}
22% {
transform: translate(0px, -7px) rotate(0deg);
}
24% {
transform: translate(0px, 5px) rotate(0deg);
}
26% {
transform: translate(0px, 1px) rotate(0deg);
}
28% {
transform: translate(0px, 6px) rotate(0deg);
}
30% {
transform: translate(0px, -9px) rotate(0deg);
}
32% {
transform: translate(0px, 0px) rotate(0deg);
}
34% {
transform: translate(0px, -2px) rotate(0deg);
}
36% {
transform: translate(0px, -7px) rotate(0deg);
}
38% {
transform: translate(0px, 8px) rotate(0deg);
}
40% {
transform: translate(0px, -9px) rotate(0deg);
}
42% {
transform: translate(0px, -2px) rotate(0deg);
}
44% {
transform: translate(0px, -5px) rotate(0deg);
}
46% {
transform: translate(0px, -3px) rotate(0deg);
}
48% {
transform: translate(0px, -4px) rotate(0deg);
}
50% {
transform: translate(0px, -2px) rotate(0deg);
}
52% {
transform: translate(0px, 4px) rotate(0deg);
}
54% {
transform: translate(0px, -7px) rotate(0deg);
}
56% {
transform: translate(0px, -5px) rotate(0deg);
}
58% {
transform: translate(0px, 7px) rotate(0deg);
}
60% {
transform: translate(0px, -5px) rotate(0deg);
}
62% {
transform: translate(0px, -9px) rotate(0deg);
}
64% {
transform: translate(0px, -5px) rotate(0deg);
}
66% {
transform: translate(0px, -4px) rotate(0deg);
}
68% {
transform: translate(0px, 0px) rotate(0deg);
}
70% {
transform: translate(0px, -4px) rotate(0deg);
}
72% {
transform: translate(0px, -8px) rotate(0deg);
}
74% {
transform: translate(0px, 2px) rotate(0deg);
}
76% {
transform: translate(0px, -5px) rotate(0deg);
}
78% {
transform: translate(0px, -6px) rotate(0deg);
}
80% {
transform: translate(0px, -5px) rotate(0deg);
}
82% {
transform: translate(0px, 7px) rotate(0deg);
}
84% {
transform: translate(0px, 7px) rotate(0deg);
}
86% {
transform: translate(0px, -2px) rotate(0deg);
}
88% {
transform: translate(0px, -4px) rotate(0deg);
}
90% {
transform: translate(0px, -2px) rotate(0deg);
}
92% {
transform: translate(0px, 1px) rotate(0deg);
}
94% {
transform: translate(0px, 6px) rotate(0deg);
}
96% {
transform: translate(0px, -7px) rotate(0deg);
}
98% {
transform: translate(0px, -5px) rotate(0deg);
}
}
@keyframes shake-rotate {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
2% {
transform: translate(0px, 0px) rotate(-2.5deg);
}
4% {
transform: translate(0px, 0px) rotate(5.5deg);
}
6% {
transform: translate(0px, 0px) rotate(1.5deg);
}
8% {
transform: translate(0px, 0px) rotate(2.5deg);
}
10% {
transform: translate(0px, 0px) rotate(-2.5deg);
}
12% {
transform: translate(0px, 0px) rotate(5.5deg);
}
14% {
transform: translate(0px, 0px) rotate(-1.5deg);
}
16% {
transform: translate(0px, 0px) rotate(4.5deg);
}
18% {
transform: translate(0px, 0px) rotate(-4.5deg);
}
20% {
transform: translate(0px, 0px) rotate(-0.5deg);
}
22% {
transform: translate(0px, 0px) rotate(3.5deg);
}
24% {
transform: translate(0px, 0px) rotate(-3.5deg);
}
26% {
transform: translate(0px, 0px) rotate(-5.5deg);
}
28% {
transform: translate(0px, 0px) rotate(-5.5deg);
}
30% {
transform: translate(0px, 0px) rotate(2.5deg);
}
32% {
transform: translate(0px, 0px) rotate(-5.5deg);
}
34% {
transform: translate(0px, 0px) rotate(0.5deg);
}
36% {
transform: translate(0px, 0px) rotate(2.5deg);
}
38% {
transform: translate(0px, 0px) rotate(0.5deg);
}
40% {
transform: translate(0px, 0px) rotate(5.5deg);
}
42% {
transform: translate(0px, 0px) rotate(-2.5deg);
}
44% {
transform: translate(0px, 0px) rotate(0.5deg);
}
46% {
transform: translate(0px, 0px) rotate(-0.5deg);
}
48% {
transform: translate(0px, 0px) rotate(-4.5deg);
}
50% {
transform: translate(0px, 0px) rotate(-5.5deg);
}
52% {
transform: translate(0px, 0px) rotate(-2.5deg);
}
54% {
transform: translate(0px, 0px) rotate(-5.5deg);
}
56% {
transform: translate(0px, 0px) rotate(4.5deg);
}
58% {
transform: translate(0px, 0px) rotate(-5.5deg);
}
60% {
transform: translate(0px, 0px) rotate(-4.5deg);
}
62% {
transform: translate(0px, 0px) rotate(3.5deg);
}
64% {
transform: translate(0px, 0px) rotate(-0.5deg);
}
66% {
transform: translate(0px, 0px) rotate(6.5deg);
}
68% {
transform: translate(0px, 0px) rotate(-4.5deg);
}
70% {
transform: translate(0px, 0px) rotate(5.5deg);
}
72% {
transform: translate(0px, 0px) rotate(-4.5deg);
}
74% {
transform: translate(0px, 0px) rotate(-4.5deg);
}
76% {
transform: translate(0px, 0px) rotate(-0.5deg);
}
78% {
transform: translate(0px, 0px) rotate(-3.5deg);
}
80% {
transform: translate(0px, 0px) rotate(-3.5deg);
}
82% {
transform: translate(0px, 0px) rotate(0.5deg);
}
84% {
transform: translate(0px, 0px) rotate(7.5deg);
}
86% {
transform: translate(0px, 0px) rotate(1.5deg);
}
88% {
transform: translate(0px, 0px) rotate(2.5deg);
}
90% {
transform: translate(0px, 0px) rotate(-0.5deg);
}
92% {
transform: translate(0px, 0px) rotate(-0.5deg);
}
94% {
transform: translate(0px, 0px) rotate(-4.5deg);
}
96% {
transform: translate(0px, 0px) rotate(3.5deg);
}
98% {
transform: translate(0px, 0px) rotate(-3.5deg);
}
}
@keyframes shake-opacity {
0% {
transform: translate(0px, 0px) rotate(0deg);
opacity: 0.7;
}
10% {
transform: translate(1px, 1px) rotate(2.5deg);
opacity: 0.1;
}
20% {
transform: translate(4px, 3px) rotate(-1.5deg);
opacity: 0.5;
}
30% {
transform: translate(-3px, -2px) rotate(2.5deg);
opacity: 0.3;
}
40% {
transform: translate(1px, 3px) rotate(2.5deg);
opacity: 0.2;
}
50% {
transform: translate(-3px, 5px) rotate(0.5deg);
opacity: 0.3;
}
60% {
transform: translate(-2px, 0px) rotate(-0.5deg);
opacity: 0.7;
}
70% {
transform: translate(2px, 0px) rotate(-0.5deg);
opacity: 0.7;
}
80% {
transform: translate(-4px, 1px) rotate(1.5deg);
opacity: 0.4;
}
90% {
transform: translate(0px, 4px) rotate(2.5deg);
opacity: 0.4;
}
}
@keyframes shake-crazy {
0% {
transform: translate(0px, 0px) rotate(0deg);
opacity: 0.6;
}
10% {
transform: translate(-10px, -13px) rotate(-8deg);
opacity: 0.7;
}
20% {
transform: translate(16px, 10px) rotate(3deg);
opacity: 0.1;
}
30% {
transform: translate(0px, -5px) rotate(-3deg);
opacity: 0.9;
}
40% {
transform: translate(-5px, -6px) rotate(3deg);
opacity: 0.8;
}
50% {
transform: translate(0px, -10px) rotate(-6deg);
opacity: 0.8;
}
60% {
transform: translate(-12px, 7px) rotate(-1deg);
opacity: 0.1;
}
70% {
transform: translate(-14px, 1px) rotate(1deg);
opacity: 0.2;
}
80% {
transform: translate(-10px, 17px) rotate(-1deg);
opacity: 0.7;
}
90% {
transform: translate(18px, -9px) rotate(9deg);
opacity: 0.2;
}
}
/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #2ab8ac;
}
header {
width: 100%;
background-color: #ffab52;
text-align: center;
line-height: 1.5em;
font-family: 'Gentium Basic', serif;
padding: 5px 0;
font-size: .85em;
opacity: 0;
color: #fff68d;
visibility: hidden;
animation: op 15s forwards;
}
header a {
text-decoration: none;
color: rgba(0, 0, 0, 0.7);
}
header a:hover {
color: rgba(0, 0, 0, 0.94);
}
@keyframes op {
10%,90% {
opacity: 1;
visibility: visible;
}
}
.section {
color: white;
text-align: center;
height: 100%;
padding-top: 20px;
}
.section h1 {
font-family: 'Dancing Script', cursive;
font-size: 5em;
}
.section h4 {
font-size: 1.4em;
font-family: 'Gentium Basic', serif;
}
.section > p {
margin-top: 25px;
line-height: 1.5em;
}
.section a {
color: rgba(0, 0, 0, 0.5);
}
.section a:link {
text-decoration: none;
}
.section a:hover {
color: rgba(0, 0, 0, 0.85);
}
.section footer {
width: 100%;
line-height: 1.3em;
margin-top: 50px;
margin-bottom: 20px;
}
.arrow {
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -10px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid rgba(255, 255, 255, 0.3);
cursor: pointer;
}
.arrow:before {
content: '';
position: absolute;
top: -15px;
left: -8px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
}
.section.shamrock .arrow:before {
border-top: 10px solid #2ab8ac;
}
.section.carrot .arrow:before {
border-top: 10px solid #ffab52;
}
.section.amethyst .arrow:before {
border-top: 10px solid #9c55a5;
}
.section.scooter .arrow:before {
border-top: 10px solid #57cadd;
}
.section.dolly .arrow:before {
border-top: 10px solid #fff68d;
}
.section.shamrock .arrow:before {
border-top: 10px solid #2ab8ac;
}
.section.pear .arrow:before {
border-top: 10px solid #cce033;
}
.section.carrot {
background-color: #ffab52;
}
.section.amethyst {
background-color: #9c55a5;
}
.section.scooter {
background-color: #57cadd;
}
.section.dolly {
background-color: #fff68d;
color: #2C3E50;
}
.section.shamrock {
background-color: #2ab8ac;
}
.section.pear {
background-color: #cce033;
}
.color-carrot {
color: #ffab52;
}
.color-amethyst {
color: #9c55a5;
}
.color-scooter {
color: #57cadd;
}
.color-dolly {
color: #fff68d;
}
.color-shamrock {
color: #2ab8ac;
}
.color-pear {
color: #cce033;
}
.previews {
display: block;
list-style: none;
width: 85%;
margin: 34px auto 0;
}
.previews li {
display: inline-block;
width: 150px;
padding: 20px;
vertical-align: middle;
}
.previews.bigs li {
width: 250px;
}
.preview-item {
font-family: 'Dancing Script', cursive;
font-size: 70px;
line-height: 100px;
position: relative;
width: 100px;
height: 100px;
border-radius: 15px;
color: rgba(255, 255, 255, 0.3);
margin: auto;
}
.preview-item.big {
width: 200px;
height: 200px;
font-size: 160px;
line-height: 200px;
}
.section.carrot .preview-item {
background-color: #ffc485;
}
.section.amethyst .preview-item {
background-color: #b075b8;
}
.section.scooter .preview-item {
background-color: #81d7e6;
}
.section.dolly .preview-item {
background-color: #fffac0;
}
.section.shamrock .preview-item {
background-color: #41d4c7;
}
.section.pear .preview-item {
background-color: #d7e75f;
}
.preview-item:after {
content: "";
width: 0;
height: 0;
border-left: 33px solid transparent;
position: absolute;
bottom: 0px;
right: 0px;
}
.section.carrot .preview-item:after {
border-bottom: 33px solid #ffab52;
}
.section.amethyst .preview-item:after {
border-bottom: 33px solid #9c55a5;
}
.section.scooter .preview-item:after {
border-bottom: 33px solid #57cadd;
}
.section.dolly .preview-item:after {
border-bottom: 33px solid #fff68d;
}
.section.shamrock .preview-item:after {
border-bottom: 33px solid #2ab8ac;
}
.section.pear .preview-item:after {
border-bottom: 33px solid #cce033;
}
.flip {
position: absolute;
right: 0;
bottom: 0;
width: 0;
height: 0;
border-right: 30px solid transparent;
}
.section.carrot .flip {
border-top: 30px solid #ffd09f;
}
.section.amethyst .flip {
border-top: 30px solid #ba86c1;
}
.section.scooter .flip {
border-top: 30px solid #97deea;
}
.section.dolly .flip {
border-top: 30px solid #fffcda;
}
.section.shamrock .flip {
border-top: 30px solid #56d8cd;
}
.section.pear .flip {
border-top: 30px solid #ddea75;
}
.flip:after {
content: "";
width: 0;
height: 0;
border-bottom: 30px solid rgba(0, 0, 0, 0.15);
border-left: 30px solid transparent;
position: absolute;
bottom: 0;
left: -30px;
}
.preview-desc {
margin-top: 20px;
font-family: 'Gentium Basic', serif;
}
.dropdown {
position: relative;
margin: 25px auto;
height: 50px;
width: 300px;
}
.dropdown::after {
content: "➘";
position: absolute;
right: 11px;
top: 13px;
color: rgba(0, 0, 0, 0.2);
font-size: 25px;
}
.dropdown-select {
position: relative;
width: 100%;
margin: 0;
padding: 6px 8px 6px 10px;
height: 50px;
line-height: 25px;
font-family: 'Dancing Script', cursive;
font-size: 25px;
color: rgba(0, 0, 0, 0.5);
background-color: rgba(255, 255, 255, 0.1);
transition: background-color .3s;
border: none;
outline: none;
border: 0;
border-radius: 0;
-webkit-appearance: none;
}
.dropdown-select:hover, .dropdown-select:active {
background-color: rgba(255, 255, 255, 0.5);
}
.dropdown-select > option {
margin: 3px;
padding: 6px 8px;
text-shadow: none;
border-radius: 3px;
cursor: pointer;
}
.btn {
font-family: 'Dancing Script', cursive;
font-size: 40px;
padding: 10px 20px;
margin-top: 34px;
display: inline-block;
transition: background-color, .3s;
}
.btn.carrot {
background-color: #ffab52;
}
.btn.amethyst {
background-color: #9c55a5;
}
.btn.light:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.btn + small {
font-family: 'Gentium Basic', serif;
font-size: 16px;
margin-top: 10px;
display: block;
}
</style></head><body>
<header class="new">
Did you tried to add <a href="https://codepen.io/elrumordelaluz/full/pHKcC?harlem=shake">?harlem=shake</a> at the end of the Pen url?
</header>
<section class="section shamrock">
<h1>CS<span class="shake shake-delay">Shake</span></h1>
<h4>Some CSS classes to <span class="shake">move your DOM!</span></h4>
<ul class="previews">
<li>
<i class="preview-item shake">
Bs
<span class="flip"></span>
</i>
<p class="preview-desc">Basic Shake</p>
</li>
<li>
<i class="preview-item shake shake-slow">
Ss
<span class="flip"></span>
</i>
<p class="preview-desc">Slow Shake</p>
</li>
<li>
<i class="preview-item shake shake-little">
Ls
<span class="flip"></span>
</i>
<p class="preview-desc">Little Shake</p>
</li>
<li>
<i class="preview-item shake shake-hard">
Hs
<span class="flip"></span>
</i>
<p class="preview-desc">Hard Shake</p>
</li>
<li>
<i class="preview-item shake shake-horizontal">
⇄
<span class="flip"></span>
</i>
<p class="preview-desc">Fixed Horizontal</p>
</li>
<li>
<i class="preview-item shake shake-vertical">
⇵
<span class="flip"></span>
</i>
<p class="preview-desc">Fixed Vertical</p>
</li>
<li>
<i class="preview-item shake shake-rotate">
↻
<span class="flip"></span>
</i>
<p class="preview-desc">Fixed Rotation</p>
</li>
<li>
<i class="preview-item shake shake-opacity">
Os
<span class="flip"></span>
</i>
<p class="preview-desc">Opacity Shake</p>
</li>
<li>
<i class="preview-item shake shake-crazy">
✌
<span class="flip"></span>
</i>
<p class="preview-desc">Crazy Shake</p>
</li>
<li>
<i class="preview-item shake shake-constant">
ℇ
<span class="flip"></span>
</i>
<p class="preview-desc">Constant Shake</p>
</li>
</ul>
<footer>Made with <span class="shake shake-slow shake-constant">♥</span> by <a class="shake shake-constant hover-stop" href="https://twitter.com/elrumordelaluz">@elrumordelaluz</a>, using <a href="http://sass-lang.com/">Sass</a><br>Full project page <a href="https://elrumordelaluz.github.io/csshake">elrumordelaluz.github.io/csshake</a> </footer>
</section>
<audio id="track" preload="auto">
<source src="http://elrumordelaluz.com/audio/harlemshake.ogg" type="audio/ogg">
<source src="http://elrumordelaluz.com/audio/harlemshake.mp3" type="audio/mpeg">
</audio>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>var params = window.location.search.substring(1).split('=');
if(params[0] == 'harlem' && params[1] == 'shake') {
var harlemShake = false;
var obj = document.getElementById('track'); obj.addEventListener('timeupdate', checkTime, false)
obj.play();
$('.new').hide();
}
if(params[0] == 'shake' && params[1] == 'terrible') {
$('body').addClass('shake shake-hard shake-constant');
}
function checkTime() {
var cur = obj.currentTime;
var timeRemaining = obj.duration - obj.currentTime;
if (cur > 15 && !harlemShake) {
$('.shake').addClass('shake-constant');
$('.preview-desc, h4').addClass('shake shake-hard shake-constant');
harlemShake = true;
}
if (cur > 30) {
$('.shake').removeClass('shake-constant');
$('#track').animate({volume: 0}, 5000);
harlemShake = true;
}
}</script>
<script >// nope...
// New! easter egg: add ?harlem=shake as params at the end of the pen url like:
// https://codepen.io/elrumordelaluz/pen/pHKcC?harlem=shake
//# sourceURL=pen.js
</script>
</body></html>
