<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/shentao/pen/WvdaPG?depth=everything&order=popularity&page=64&q=blog&show_forks=false" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style class="cp-pen-styles">@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,700);
.avatar {
border-radius: 100%;
width: 300px;
-webkit-shape-outside: circle(150px at 55% 50%) border-box;
shape-outside: circle(150px at 55% 50%) border-box;
}
html, body {
font-family: "Roboto", sans-serif;
overflow-x: hidden;
height: 100%;
width: 100%;
color: #435757;
overflow: hidden;
background: -webkit-linear-gradient(110deg, #82C1D0 20%, #D3C27B 80%);
background: linear-gradient(-20deg, #82C1D0 20%, #D3C27B 80%);
}
h1 {
font-size: 48px;
font-weight: 700;
margin-top: 0;
}
h2 {
font-size: 24px;
font-weight: 300;
}
h3 {
font-size: 18px;
font-weight: 300;
line-height: 1.3;
}
a {
font-weight: 700;
color: #2162AF;
text-decoration: none;
}
a:hover, a:focus {
color: #3C95FF;
}
p {
line-height: 1.4;
}
kbd {
background: rgba(33, 98, 175, 0.6);
color: white;
border-radius: 5px;
padding: 2px 6px;
font-size: 90%;
margin-right: 7px;
margin-left: 7px;
}
kbd:first-child {
margin-left: 0;
}
.description__input {
visibility: hidden;
position: absolute;
left: 0;
margin: -9999px;
}
.description__trigger {
display: inline-block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
padding: 8px 15px;
height: 17px;
text-align: center;
color: #A98D4E;
font-weight: 700;
background: rgba(255, 255, 255, 0.6);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
width: 150px;
cursor: pointer;
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 0.3s 1s ease-in-out;
transition: -webkit-transform 0.3s 1s ease-in-out;
transition: transform 0.3s 1s ease-in-out;
transition: transform 0.3s 1s ease-in-out, -webkit-transform 0.3s 1s ease-in-out;
}
.description__trigger:before {
content: "How it's done";
display: block;
opacity: 1;
}
.description__body {
display: block;
text-align: left;
max-height: 80%;
z-index: 100;
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 80%;
height: 85%;
margin: 0 auto;
background: #fff;
color: #435757;
-webkit-transition: -webkit-transform 0.4s ease-in-out;
transition: -webkit-transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;
-webkit-transform: translateY(100%);
transform: translateY(100%);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.description__outside {
max-height: 100%;
overflow: auto;
}
.description__inside {
padding: 40px;
}
.description__close {
display: block;
cursor: pointer;
position: absolute;
-webkit-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
padding: 0;
background: none;
border: none;
z-index: 2;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
top: 20px;
right: 25px;
}
.description__close:before {
content: "×";
font-weight: 700;
font-size: 16px;
color: #435757;
display: block;
z-index: 2;
-webkit-transform: scale(1.6);
transform: scale(1.6);
-webkit-transition: color 0.2s ease-in-out, -webkit-transform 0.3s cubic-bezier(0.51, -0.15, 0.48, 1.24);
transition: color 0.2s ease-in-out, -webkit-transform 0.3s cubic-bezier(0.51, -0.15, 0.48, 1.24);
transition: transform 0.3s cubic-bezier(0.51, -0.15, 0.48, 1.24), color 0.2s ease-in-out;
transition: transform 0.3s cubic-bezier(0.51, -0.15, 0.48, 1.24), color 0.2s ease-in-out, -webkit-transform 0.3s cubic-bezier(0.51, -0.15, 0.48, 1.24);
}
.description__close:after {
content: "";
z-index: -1;
position: absolute;
border-radius: 100%;
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: scale(0);
transform: scale(0);
display: block;
background: #435757;
-webkit-transition: -webkit-transform 0.2s cubic-bezier(0.54, -0.46, 0.36, 1.79);
transition: -webkit-transform 0.2s cubic-bezier(0.54, -0.46, 0.36, 1.79);
transition: transform 0.2s cubic-bezier(0.54, -0.46, 0.36, 1.79);
transition: transform 0.2s cubic-bezier(0.54, -0.46, 0.36, 1.79), -webkit-transform 0.2s cubic-bezier(0.54, -0.46, 0.36, 1.79);
top: -4px;
left: -9px;
height: 26px;
width: 26px;
}
.description__close:hover, .description__close:focus {
outline: none;
}
.description__close:hover:before, .description__close:focus:before {
color: #fff;
-webkit-transform: scale(1);
transform: scale(1);
}
.description__close:hover:after, .description__close:focus:after {
-webkit-transform: scale(1);
transform: scale(1);
}
input[type="checkbox"]:checked + .description__body {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.bold {
font-weight: 700;
}
.light {
font-weight: 100;
}
.big-list {
font-size: 36px;
font-weight: 700;
list-style: square;
}
.big-list li {
line-height: 1.4;
}
.small-list {
font-size: 24px;
list-style: circle;
font-weight: 300;
}
.small-list li {
line-height: 1.4;
margin-bottom: 15px;
}
.button {
display: inline-block;
padding: 10px 20px;
font-size: 20px;
background: rgba(255, 255, 255, 0.5);
color: #9B9B76;
cursor: pointer;
-webkit-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.button:hover, .button:focus {
background: rgba(255, 255, 255, 0.8);
}
.paragraph {
font-size: 24px;
font-weight: 300;
margin-top: 10px;
}
.slide {
width: 100%;
min-height: 100%;
padding: 20px 100px;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: -webkit-transform 0.5s ease-in-out;
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
z-index: 10;
}
.slide__arrow {
position: absolute;
top: 0;
bottom: 0;
height: 100%;
width: 100px;
display: block;
}
.slide__arrow:hover {
background: rgba(255, 255, 255, 0.2);
}
.slide__arrow.slide__arrow--left {
left: 0;
}
.slide__arrow.slide__arrow--right {
right: 0;
}
.slide__ctrl {
visibility: hidden;
}
#slide_ctrl_button {
padding: 20px 40px;
margin-top: 100px;
font-size: 40px;
}
#slide_ctrl_button:after {
content: "Last one!";
}
.slide__ctrl-toggle[type="checkbox"]:checked + div > .slide__ctrl {
visibility: visible;
z-index: 1000;
position: relative;
margin-left: 2px;
}
.slide__ctrl-toggle[type="checkbox"]:checked + div #slide_ctrl_button {
background: rgba(255, 255, 255, 0);
color: #435757;
}
.slide__ctrl-toggle[type="checkbox"]:checked + div #slide_ctrl_button:after {
content: "That's all. \aThanks for listening! :)";
white-space: pre;
}
input.slide__ctrl[type="radio"]:checked + .slide {
-webkit-transform: translateX(0);
transform: translateX(0);
z-index: 12;
}
input.slide__ctrl[type="radio"]:checked + .slide .element--slide {
-webkit-transform: translateX(0);
transform: translateX(0);
}
input.slide__ctrl[type="radio"]:checked + .slide .description__trigger {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.element--slide {
-webkit-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
.element--staggered:nth-child(1) {
-webkit-transition-delay: 0.06s;
transition-delay: 0.06s;
}
.element--staggered:nth-child(2) {
-webkit-transition-delay: 0.12s;
transition-delay: 0.12s;
}
.element--staggered:nth-child(3) {
-webkit-transition-delay: 0.18s;
transition-delay: 0.18s;
}
.element--staggered:nth-child(4) {
-webkit-transition-delay: 0.24s;
transition-delay: 0.24s;
}
.element--staggered:nth-child(5) {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.element--staggered:nth-child(6) {
-webkit-transition-delay: 0.36s;
transition-delay: 0.36s;
}
.element--staggered:nth-child(7) {
-webkit-transition-delay: 0.42s;
transition-delay: 0.42s;
}
.element--staggered:nth-child(8) {
-webkit-transition-delay: 0.48s;
transition-delay: 0.48s;
}
.element--staggered:nth-child(9) {
-webkit-transition-delay: 0.54s;
transition-delay: 0.54s;
}
.element--staggered:nth-child(10) {
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.element--staggered:nth-child(11) {
-webkit-transition-delay: 0.66s;
transition-delay: 0.66s;
}
.element--staggered:nth-child(12) {
-webkit-transition-delay: 0.72s;
transition-delay: 0.72s;
}
.element--staggered:nth-child(13) {
-webkit-transition-delay: 0.78s;
transition-delay: 0.78s;
}
.element--staggered:nth-child(14) {
-webkit-transition-delay: 0.84s;
transition-delay: 0.84s;
}
.element--staggered:nth-child(15) {
-webkit-transition-delay: 0.9s;
transition-delay: 0.9s;
}
.element--staggered:nth-child(16) {
-webkit-transition-delay: 0.96s;
transition-delay: 0.96s;
}
.element--staggered:nth-child(17) {
-webkit-transition-delay: 1.02s;
transition-delay: 1.02s;
}
.element--staggered:nth-child(18) {
-webkit-transition-delay: 1.08s;
transition-delay: 1.08s;
}
.element--staggered:nth-child(19) {
-webkit-transition-delay: 1.14s;
transition-delay: 1.14s;
}
.element--staggered:nth-child(20) {
-webkit-transition-delay: 1.2s;
transition-delay: 1.2s;
}
.slide__header {
font-size: 64px;
margin: 20px auto;
font-weight: 100;
}
.slide__subheader {
font-size: 50px;
font-weight: 100;
}
.util--center {
text-align: center;
}
.slide__half {
width: 50%;
display: inline-block;
}
.element--centered {
display: block;
position: absolute;
left: 0;
right: 0;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.css3-container {
height: 700px;
width: 600px;
margin: 0 auto;
}
.css3-container .slide__header {
position: relative;
margin: 0 auto;
}
.css3-container .slide__header span {
-webkit-transform: translateY(-200px);
transform: translateY(-200px);
color: transparent;
-webkit-transition-property: color, -webkit-transform;
transition-property: color, -webkit-transform;
transition-property: transform, color;
transition-property: transform, color, -webkit-transform;
-webkit-transition-duration: 0.3s, 0.2s;
transition-duration: 0.3s, 0.2s;
-webkit-transition-timing-function: cubic-bezier(0.7, 0.1, 0, 1.5), ease-in-out;
transition-timing-function: cubic-bezier(0.7, 0.1, 0, 1.5), ease-in-out;
}
.css3-container .css3-element {
height: 700px;
width: 600px;
position: absolute;
}
.css3-container .css3-element:nth-child(1) {
-webkit-transition: background-color 0.5s 0.18s, top 0.2s ease-in-out, bottom 0.2s ease-in-out, -webkit-clip-path 0.5s 0.3s cubic-bezier(0.7, 0.1, 0, 1.5);
transition: background-color 0.5s 0.18s, top 0.2s ease-in-out, bottom 0.2s ease-in-out, -webkit-clip-path 0.5s 0.3s cubic-bezier(0.7, 0.1, 0, 1.5);
transition: clip-path 0.5s 0.3s cubic-bezier(0.7, 0.1, 0, 1.5), background-color 0.5s 0.18s, top 0.2s ease-in-out, bottom 0.2s ease-in-out;
transition: clip-path 0.5s 0.3s cubic-bezier(0.7, 0.1, 0, 1.5), background-color 0.5s 0.18s, top 0.2s ease-in-out, bottom 0.2s ease-in-out, -webkit-clip-path 0.5s 0.3s cubic-bezier(0.7, 0.1, 0, 1.5);
-webkit-transition: -webkit-clip-path 0.5s 0.3s cubic-bezier(0.7, 0.1, 0, 1.5), background-color 0.5s 0.18s, top 0.2s ease-in-out, bottom 0.2s ease-in-out;
}
.css3-container .css3-element:nth-child(2) {
-webkit-transition: background-color 0.6s 0.26s, top 0.2s ease-in-out, bottom 0.2s ease-in-out, -webkit-clip-path 0.6s 0.4s cubic-bezier(0.7, 0.1, 0, 1.5);
transition: background-color 0.6s 0.26s, top 0.2s ease-in-out, bottom 0.2s ease-in-out, -webkit-clip-path 0.6s 0.4s cubic-bezier(0.7, 0.1, 0, 1.5);
transition: clip-path 0.6s 0.4s cubic-bezier(0.7, 0.1, 0, 1.5), background-color 0.6s 0.26s, top 0.2s ease-in-out, bottom 0.2s ease-in-out;
transition: clip-path 0.6s 0.4s cubic-bezier(0.7, 0.1, 0, 1.5), background-color 0.6s 0.26s, top 0.2s ease-in-out, bottom 0.2s ease-in-out, -webkit-clip-path 0.6s 0.4s cubic-bezier(0.7, 0.1, 0, 1.5);
-webkit-transition: -webkit-clip-path 0.6s 0.4s cubic-bezier(0.7, 0.1, 0, 1.5), background-color 0.6s 0.26s, top 0.2s ease-in-out, bottom 0.2s ease-in-out;
}
.css3-container .css3-element:nth-child(3) {
-webkit-transition: background-color 0.7s 0.34s, top 0.2s ease-in-out, bottom 0.2s ease-in-out, -webkit-clip-path 0.7s 0.5s cubic-bezier(0.7, 0.1, 0, 1.5);
transition: background-color 0.7s 0.34s, top 0.2s ease-in-out, bottom 0.2s ease-in-out, -webkit-clip-path 0.7s 0.5s cubic-bezier(0.7, 0.1, 0, 1.5);
transition: clip-path 0.7s 0.5s cubic-bezier(0.7, 0.1, 0, 1.5), background-color 0.7s 0.34s, top 0.2s ease-in-out, bottom 0.2s ease-in-out;
transition: clip-path 0.7s 0.5s cubic-bezier(0.7, 0.1, 0, 1.5), background-color 0.7s 0.34s, top 0.2s ease-in-out, bottom 0.2s ease-in-out, -webkit-clip-path 0.7s 0.5s cubic-bezier(0.7, 0.1, 0, 1.5);
-webkit-transition: -webkit-clip-path 0.7s 0.5s cubic-bezier(0.7, 0.1, 0, 1.5), background-color 0.7s 0.34s, top 0.2s ease-in-out, bottom 0.2s ease-in-out;
}
.css3-container .css3-element:nth-child(4) {
-webkit-transition: background-color 0.8s 0.42s, top 0.2s ease-in-out, bottom 0.2s ease-in-out, -webkit-clip-path 0.8s 0.6s cubic-bezier(0.7, 0.1, 0, 1.5);
transition: background-color 0.8s 0.42s, top 0.2s ease-in-out, bottom 0.2s ease-in-out, -webkit-clip-path 0.8s 0.6s cubic-bezier(0.7, 0.1, 0, 1.5);
transition: clip-path 0.8s 0.6s cubic-bezier(0.7, 0.1, 0, 1.5), background-color 0.8s 0.42s, top 0.2s ease-in-out, bottom 0.2s ease-in-out;
transition: clip-path 0.8s 0.6s cubic-bezier(0.7, 0.1, 0, 1.5), background-color 0.8s 0.42s, top 0.2s ease-in-out, bottom 0.2s ease-in-out, -webkit-clip-path 0.8s 0.6s cubic-bezier(0.7, 0.1, 0, 1.5);
-webkit-transition: -webkit-clip-path 0.8s 0.6s cubic-bezier(0.7, 0.1, 0, 1.5), background-color 0.8s 0.42s, top 0.2s ease-in-out, bottom 0.2s ease-in-out;
}
.css3-container .css3-element:nth-child(1) {
background-color: rgba(67, 87, 87, 0.6);
height: 100%;
width: 100%;
left: 0;
top: 0;
-webkit-clip-path: polygon(30% 40%, 80% 30%, 30% 86%, 40% 50%);
clip-path: polygon(30% 40%, 80% 30%, 30% 86%, 40% 50%);
}
.css3-container .css3-element:nth-child(2) {
z-index: 1;
background-color: rgba(67, 87, 87, 0.6);
-webkit-clip-path: polygon(72% 16%, 89% 86%, 54% 42%, 39% 67%, 32% 37%);
clip-path: polygon(72% 16%, 89% 86%, 54% 42%, 39% 67%, 32% 37%);
}
.css3-container .css3-element:nth-child(3) {
z-index: 2;
background-color: rgba(67, 87, 87, 0.6);
-webkit-clip-path: polygon(26% 31%, 19% 38%, 26% 46%, 41% 49%, 53% 40%, 64% 23%, 55% 16%, 46% 10%, 32% 6%, 26% 14%, 41% 18%, 43% 27%, 20% 20%, 14% 15%, 3% 20%, 6% 29%, 15% 31%, 20% 26%);
clip-path: polygon(26% 31%, 19% 38%, 26% 46%, 41% 49%, 53% 40%, 64% 23%, 55% 16%, 46% 10%, 32% 6%, 26% 14%, 41% 18%, 43% 27%, 20% 20%, 14% 15%, 3% 20%, 6% 29%, 15% 31%, 20% 26%);
}
.css3-container .css3-element:nth-child(4) {
z-index: 3;
background-color: rgba(67, 87, 87, 0.6);
-webkit-clip-path: polygon(74% 50%, 19% 12%, 81% 82%, 49% 72%);
clip-path: polygon(74% 50%, 19% 12%, 81% 82%, 49% 72%);
}
.css3-container:hover .slide__header {
z-index: 10;
}
.css3-container:hover .slide__header span {
-webkit-transform: translateY(0);
transform: translateY(0);
color: rgba(0, 0, 0, 0.7);
}
.css3-container:hover .slide__header span:nth-child(1) {
-webkit-transition-delay: 1.05s;
transition-delay: 1.05s;
}
.css3-container:hover .slide__header span:nth-child(2) {
-webkit-transition-delay: 1.1s;
transition-delay: 1.1s;
}
.css3-container:hover .slide__header span:nth-child(3) {
-webkit-transition-delay: 1.15s;
transition-delay: 1.15s;
}
.css3-container:hover .slide__header span:nth-child(4) {
-webkit-transition-delay: 1.2s;
transition-delay: 1.2s;
}
.css3-container:hover .slide__header span:nth-child(5) {
-webkit-transition-delay: 1.25s;
transition-delay: 1.25s;
}
.css3-container:hover .slide__header span:nth-child(6) {
-webkit-transition-delay: 1.3s;
transition-delay: 1.3s;
}
.css3-container:hover .slide__header span:nth-child(7) {
-webkit-transition-delay: 1.35s;
transition-delay: 1.35s;
}
.css3-container:hover .slide__header span:nth-child(8) {
-webkit-transition-delay: 1.4s;
transition-delay: 1.4s;
}
.css3-container:hover .slide__header span:nth-child(9) {
-webkit-transition-delay: 1.45s;
transition-delay: 1.45s;
}
.css3-container:hover .css3-element:nth-child(1) {
background: transparent;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.css3-container:hover .css3-element:nth-child(2) {
z-index: 1;
background: #2162AF;
-webkit-clip-path: polygon(52% 93%, 80% 86%, 87% 25%, 16% 25%, 23% 86%);
clip-path: polygon(52% 93%, 80% 86%, 87% 25%, 16% 25%, 23% 86%);
}
.css3-container:hover .css3-element:nth-child(3) {
z-index: 2;
background: #E6E6E5;
-webkit-clip-path: polygon(29% 37%, 30% 45%, 53% 45%, 31% 53%, 32% 60%, 63% 60%, 62% 70%, 52% 72%, 42% 70%, 41% 64%, 33% 64%, 35% 75%, 52% 80%, 69% 75%, 72% 53%, 51% 53%, 73% 45%, 74% 37%);
clip-path: polygon(29% 37%, 30% 45%, 53% 45%, 31% 53%, 32% 60%, 63% 60%, 62% 70%, 52% 72%, 42% 70%, 41% 64%, 33% 64%, 35% 75%, 52% 80%, 69% 75%, 72% 53%, 51% 53%, 73% 45%, 74% 37%);
}
.css3-container:hover .css3-element:nth-child(4) {
z-index: 3;
background: rgba(255, 255, 255, 0.2);
-webkit-clip-path: polygon(52% 30%, 80% 30%, 75% 82%, 52% 87%);
clip-path: polygon(52% 30%, 80% 30%, 75% 82%, 52% 87%);
}
input[type="radio"].stopwatch__radio {
display: none;
}
.stopwatch {
text-align: center;
}
.stopwatch .cell {
width: 50px;
height: 48px;
text-align: center;
overflow: hidden;
display: inline-block;
border-radius: 8px;
background: rgba(255, 255, 255, 0.3);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
margin-left: 4px;
}
.stopwatch .cell.empty {
background: none;
border: none;
box-shadow: none;
width: 10px;
}
.stopwatch .cell .num {
font-size: 40px;
line-height: 50px;
font-weight: 700;
color: rgba(67, 87, 87, 0.8);
display: block;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.control {
text-align: center;
margin-top: 30px;
}
.control label {
font-size: 24px;
font-weight: 300;
padding: 10px;
margin: 0 10px;
display: inline-block;
cursor: pointer;
width: 83px;
letter-spacing: 1px;
color: white;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
border-radius: 8px;
}
.control label[for="start"] {
background: rgba(61, 162, 58, 0.6);
}
.control label[for="stop"] {
background: rgba(204, 24, 30, 0.6);
}
.control label[for="reset"] {
background: rgba(67, 87, 87, 0.6);
}
/************CSS Calss Animation************* */
.ten {
-webkit-animation-name: ten;
animation-name: ten;
-webkit-animation-timing-function: steps(10);
animation-timing-function: steps(10);
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes ten {
0% {
margin-top: 0;
}
100% {
margin-top: -500px;
}
}
@keyframes ten {
0% {
margin-top: 0;
}
100% {
margin-top: -500px;
}
}
.sixs {
-webkit-animation-name: sixs;
animation-name: sixs;
-webkit-animation-timing-function: steps(6);
animation-timing-function: steps(6);
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes sixs {
0% {
margin-top: 0;
}
100% {
margin-top: -300px;
}
}
@keyframes sixs {
0% {
margin-top: 0;
}
100% {
margin-top: -300px;
}
}
.mill {
-webkit-animation-duration: 0.01s;
animation-duration: 0.01s;
}
.ten_mill {
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
}
.hund_mill {
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.sec {
-webkit-animation-duration: 10s;
animation-duration: 10s;
}
.ten_sec {
-webkit-animation-duration: 60s;
animation-duration: 60s;
}
.minu {
-webkit-animation-duration: 600s;
animation-duration: 600s;
}
.ten_minu {
-webkit-animation-duration: 3600s;
animation-duration: 3600s;
}
.hour {
-webkit-animation-duration: 36000s;
animation-duration: 36000s;
}
.ten_hour {
-webkit-animation-duration: 360000s;
animation-duration: 360000s;
}
/************CSS Calss Play************* */
#start:checked ~ .stopwatch .num {
-webkit-animation-play-state: running;
animation-play-state: running;
}
#stop:checked ~ .stopwatch .num {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
#reset:checked ~ .stopwatch .num {
-webkit-animation: none;
animation: none;
}
body {
color: #435757;
background: -webkit-linear-gradient(110deg, #d0b782 20%, #a0cecf 80%);
background: linear-gradient(-20deg, #d0b782 20%, #a0cecf 80%);
}
.todolist {
max-width: 450px;
margin: 0 auto;
border-top: 5px solid #435757;
background-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: left;
/* hide inputs offscreen, but at the same vertical positions as the correpsonding labels, so that tabbing scrolls the viewport as expected */
}
.todolist h1 {
margin: 0;
padding: 20px;
background-color: rgba(255, 255, 255, 0.4);
font-size: 1.8em;
text-align: center;
}
.todolist .items {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 20px;
counter-reset: done-items undone-items;
}
.todolist h2 {
position: relative;
margin: 0;
padding: 10px 0;
font-size: 1.2em;
}
.todolist h2::before {
content: "";
display: block;
position: absolute;
top: 10px;
bottom: 10px;
left: -20px;
width: 5px;
background-color: #435757;
}
.todolist h2::after {
display: block;
float: right;
font-weight: normal;
}
.todolist .done {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.todolist .done::after {
content: " (" counter(done-items) ")";
}
.todolist .undone {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.todolist .undone::after {
content: " (" counter(undone-items) ")";
}
.todolist input.checkbox {
display: block;
height: 53px;
margin: 0 0 -53px -9999px;
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
outline: none;
counter-increment: undone-items;
}
.todolist input.checkbox:checked {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
counter-increment: done-items;
}
.todolist label {
display: block;
position: relative;
padding: 15px 0 15px 45px;
border-top: 1px dashed #fff;
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
cursor: pointer;
-webkit-animation: undone 0.5s;
animation: undone 0.5s;
}
.todolist label::before {
content: "";
/* circle outline */
display: block;
position: absolute;
top: 11px;
left: 10px;
font: 1.5em "FontAwesome";
}
.todolist label:hover, .todolist input:focus + label {
background-color: rgba(255, 255, 255, 0.2);
}
.todolist input:checked + label {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
-webkit-animation: done 0.5s;
animation: done 0.5s;
}
.todolist input:checked + label::before {
content: "";
/* circle checkmark */
}
@-webkit-keyframes done {
0% {
opacity: 0;
background-color: rgba(255, 255, 255, 0.4);
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
50% {
opacity: 1;
background-color: rgba(255, 255, 255, 0.4);
}
}
@keyframes done {
0% {
opacity: 0;
background-color: rgba(255, 255, 255, 0.4);
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
50% {
opacity: 1;
background-color: rgba(255, 255, 255, 0.4);
}
}
@-webkit-keyframes undone {
0% {
opacity: 0;
background-color: rgba(255, 255, 255, 0.4);
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
50% {
opacity: 1;
background-color: rgba(255, 255, 255, 0.4);
}
}
@keyframes undone {
0% {
opacity: 0;
background-color: rgba(255, 255, 255, 0.4);
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
50% {
opacity: 1;
background-color: rgba(255, 255, 255, 0.4);
}
}
.fractal-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 160px;
height: 160px;
box-sizing: border-box;
padding: 58px 0;
background: #fff;
color: #BAC1A5;
border-radius: 100%;
margin: 100px auto;
-webkit-transition: -webkit-transform 1s ease;
transition: -webkit-transform 1s ease;
transition: transform 1s ease;
transition: transform 1s ease, -webkit-transform 1s ease;
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
font-size: 40px;
z-index: 10;
text-align: center;
}
.fractal-container:before {
content: "Play";
display: block;
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
-webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
transition: transform 0.2s ease, opacity 0.2s ease;
transition: transform 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease;
}
.fractal-container:after {
content: "Stop";
display: block;
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 0;
-webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
transition: transform 0.2s ease, opacity 0.2s ease;
transition: transform 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease;
}
.fractal-element {
-webkit-transform-origin: center left;
transform-origin: center left;
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 160px;
display: block;
border-top-left-radius: 200px;
border-bottom-left-radius: 200px;
background: rgba(255, 255, 255, 0);
z-index: -1;
-webkit-transition: background 0.1s ease, -webkit-transform 0.3s cubic-bezier(0.7, 0.1, 0, 1.5);
transition: background 0.1s ease, -webkit-transform 0.3s cubic-bezier(0.7, 0.1, 0, 1.5);
transition: transform 0.3s cubic-bezier(0.7, 0.1, 0, 1.5), background 0.1s ease;
transition: transform 0.3s cubic-bezier(0.7, 0.1, 0, 1.5), background 0.1s ease, -webkit-transform 0.3s cubic-bezier(0.7, 0.1, 0, 1.5);
-webkit-animation-name: none;
animation-name: none;
-webkit-box-reflect: right;
}
.fractal-element > .fractal-element {
width: 70%;
height: 70%;
}
#fractal-checkbox:checked + .fractal-container:before {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
opacity: 0;
}
#fractal-checkbox:checked + .fractal-container:after {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
opacity: 1;
}
#fractal-checkbox:checked + .fractal-container .fractal-element > .fractal-element {
background: rgba(255, 255, 255, 0.3);
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-name: fractaldance;
animation-name: fractaldance;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-play-state: running;
animation-play-state: running;
}
@-webkit-keyframes fractaldance {
0% {
-webkit-transform: translate3d(0%, 0%, 0) rotate(0deg);
transform: translate3d(0%, 0%, 0) rotate(0deg);
}
20% {
-webkit-transform: translate3d(-70%, -85%, 0) rotate(-45deg);
transform: translate3d(-70%, -85%, 0) rotate(-45deg);
}
50% {
-webkit-transform: translate3d(-70%, -85%, 0) rotate(-45deg);
transform: translate3d(-70%, -85%, 0) rotate(-45deg);
}
75% {
-webkit-transform: translate3d(-120%, -120%, 0) rotate(-20deg);
transform: translate3d(-120%, -120%, 0) rotate(-20deg);
}
100% {
-webkit-transform: translate3d(-100%, -100%, 0) rotate(-45deg);
transform: translate3d(-100%, -100%, 0) rotate(-45deg);
}
}
@keyframes fractaldance {
0% {
-webkit-transform: translate3d(0%, 0%, 0) rotate(0deg);
transform: translate3d(0%, 0%, 0) rotate(0deg);
}
20% {
-webkit-transform: translate3d(-70%, -85%, 0) rotate(-45deg);
transform: translate3d(-70%, -85%, 0) rotate(-45deg);
}
50% {
-webkit-transform: translate3d(-70%, -85%, 0) rotate(-45deg);
transform: translate3d(-70%, -85%, 0) rotate(-45deg);
}
75% {
-webkit-transform: translate3d(-120%, -120%, 0) rotate(-20deg);
transform: translate3d(-120%, -120%, 0) rotate(-20deg);
}
100% {
-webkit-transform: translate3d(-100%, -100%, 0) rotate(-45deg);
transform: translate3d(-100%, -100%, 0) rotate(-45deg);
}
}
</style></head><body>
<input class="slide__ctrl slide__ctrl-toggle" id="ctrl_toggle" type="checkbox"/>
<div style="text-align: center">
<input class="slide__ctrl" type="radio" name="slidesCtrls" id="1" checked="true"/>
<section class="slide slide__" id="slide__1">
<div class="element--centered">
<h1 class="slide__header element--slide">Cascading Style <span class="bold">Scripts<span></h1>
<h2 class="element--slide"> (or Cascading Scripts Sheets)</h2><img src="http://dulisz.com/pwr/css3-logo.png" alt=""/>
</div>
<label class="slide__arrow slide__arrow--left" for="0" tabindex="1"></label>
<label class="slide__arrow slide__arrow--right" for="2" tabindex="1"></label>
</section>
<input class="slide__ctrl" type="radio" name="slidesCtrls" id="2"/>
<section class="slide slide__" id="slide__2">
<div class="element--centered">
<h1 class="slide__header element--slide" style="margin-bottom: 20px">About me</h1><img class="avatar element--staggered element--slide" src="http://userserve-ak.last.fm/serve/_/101350955.jpg"/>
<h1 class="element--staggered element--slide" style="padding-top: 25px; text-transform: uppercase"><span class="light">Damian</span>Dulisz</h1>
<h3 class="element--staggered element--slide">Front-end Developer at<br/><a href="http://monterail.com" target="_blank">Monterail.com</a></h3>
<h3 class="element--staggered element--slide">Amateur photographer:<br/><a href="https://tookapic.com/damiandulisz" target="_blank">tookapic.com/damiandulisz</a><br/><a href="https://instagram.com/damiandulisz" target="_blank">instagram.com/damiandulisz</a></h3>
<h3 class="element--staggered element--slide">Eclectic music listener:<br/><a href="https://last.fm/user/shentao" target="_blank">last.fm/user/shentao</a><br/><a href="https://open.spotify.com/user/1163725670" target="_blank">open.spotify.com/user/1163725670</a></h3>
</div>
<label class="slide__arrow slide__arrow--left" for="1" tabindex="1"></label>
<label class="slide__arrow slide__arrow--right" for="3" tabindex="1"></label>
</section>
<input class="slide__ctrl" type="radio" name="slidesCtrls" id="3"/>
<section class="slide slide__" id="slide__3">
<div class="element--centered">
<h1>JavaScript? Meh...</h1>
</div>
<label class="slide__arrow slide__arrow--left" for="2" tabindex="1"></label>
<label class="slide__arrow slide__arrow--right" for="4" tabindex="1"></label>
</section>
<input class="slide__ctrl" type="radio" name="slidesCtrls" id="4"/>
<section class="slide slide__" id="slide__4">
<div class="element--centered">
<div class="css3-container">
<div class="css3-element"></div>
<div class="css3-element"></div>
<div class="css3-element"></div>
<div class="css3-element"></div>
</div>
</div>
<label class="description__trigger" for="desc_4" tabindex="1"></label>
<input class="description__input" type="checkbox" name="description" id="desc_4"/>
<div class="description__body">
<label class="description__close" for="desc_4" tabindex="1"></label>
<div class="description__outside">
<div class="description__inside">
<h1>Clip Path & CSS transition!</h1>
<h2>How does it work?</h2>
<ul class="small-list">
<li><kbd>clip-path: polygon(Xposition Yposition, ... , Xposition Yposition)</kbd></li>
<li><kbd>clip-path: url(path_to_svg)</kbd></li>
<li><kbd>transition: property time delay timing function</kbd></li>
<li><kbd>clip-path: polygon(30% 40%, 80% 30%, 30% 86%, 40% 50%)</kbd></li>
<li><kbd>transition: clip-path .3s .2s cubic-bezier(.7, .1, 0, 1.5)</kbd></li>
</ul>
<h2>Good to know:</h2>
<ul class="small-list">
<li>Gets buggy with CSS Transforms in webkit!</li>
<li>Polygons need to have the same amount of vertices to change their position</li>
<li>Can be used with SVG elements</li>
</ul>
<h2>Useful links / source:</h2>
<ul class="small-list">
<li><a href="https://bennettfeely.com/clippy/">https://bennettfeely.com/clippy/</a></li>
<li><a href="http://cssplant.com/clip-path-generator">http://cssplant.com/clip-path-generator</a></li>
</ul>
</div>
</div>
</div>
<label class="slide__arrow slide__arrow--left" for="3" tabindex="1"></label>
<label class="slide__arrow slide__arrow--right" for="5" tabindex="1"></label>
</section>
<input class="slide__ctrl" type="radio" name="slidesCtrls" id="5"/>
<section class="slide slide__" id="slide__5">
<div class="element--centered">
<input class="stopwatch__radio" id="start" type="radio" name="controls"/>
<input class="stopwatch__radio" id="stop" type="radio" name="controls"/>
<input class="stopwatch__radio" id="reset" type="radio" name="controls"/>
<div class="stopwatch">
<div class="cell"><span class="num ten ten_hour">0 1 2 3 4 5 6 7 8 9</span></div>
<div class="cell"><span class="num ten hour">0 1 2 3 4 5 6 7 8 9</span></div>
<div class="cell empty"><span class="num">:</span></div>
<div class="cell"><span class="num sixs ten_minu">0 1 2 3 4 5</span></div>
<div class="cell"><span class="num ten minu">0 1 2 3 4 5 6 7 8 9</span></div>
<div class="cell empty"><span class="num">:</span></div>
<div class="cell"><span class="num sixs ten_sec">0 1 2 3 4 5</span></div>
<div class="cell"><span class="num ten sec">0 1 2 3 4 5 6 7 8 9</span></div>
<div class="cell empty"><span class="num">:</span></div>
<div class="cell"><span class="num ten hund_mill">0 1 2 3 4 5 6 7 8 9</span></div>
<div class="cell"><span class="num ten ten_mill">0 1 2 3 4 5 6 7 8 9</span></div>
<div class="cell"><span class="num ten mill">0 1 2 3 4 5 6 7 8 9</span></div>
</div>
<div class="control">
<label for="start">Start</label>
<label for="stop">Stop</label>
<label for="reset">Reset</label>
</div>
</div>
<label class="description__trigger" for="desc_5" tabindex="1"></label>
<input class="description__input" type="checkbox" name="description" id="desc_5"/>
<div class="description__body">
<label class="description__close" for="desc_5" tabindex="1"></label>
<div class="description__outside">
<div class="description__inside">
<h1>CSS Animations!</h1>
<h2>How does it work?</h2>
<ul class="small-list">
<li><kbd>animation-name: name_of_animation</kbd></li>
<li><kbd>animation-iteration-count: number_of_iterations || infinite</kbd></li>
<li><kbd>animation-timing-function: like_easing_or_linear_etc || steps(number_of_steps, optional_direction)</kbd></li>
<li><kbd>animation-duration: duration</kbd></li>
</ul>
<h2>How it's done</h2>
<ul class="small-list">
<li><kbd>span.num.ten.sec 0 1 2 3 4 5 6 7 8 9</kbd>is a column because of its limited width. The animation changes its margin.</li>
<li><kbd>.ten</kbd>have steps(10),<kbd>.sixs</kbd>
have steps(6). The value of the margin transformation is equal to the multiplication of cell viewport and number of steps.
This way the number changes each step infinitely.
</li>
<li>Each number shares one of the 2 functions "tens" or "sixs" with different duration. For example: 0.1s for miliseconds, 60s for 1 minute.</li>
</ul>
<h2>Good to know:</h2>
<ul class="small-list">
<li>If you change steps() to linear timing function the numbers will rotate!</li>
</ul>
<h2>Useful links / source:</h2>
<ul class="small-list">
<li><a href="https://www.cssscript.com/create-a-stopwatch-using-radios-and-pure-css-css3/">https://www.cssscript.com/create-a-stopwatch-using-radios-and-pure-css-css3/</a></li>
</ul>
</div>
</div>
</div>
<label class="slide__arrow slide__arrow--left" for="4" tabindex="1"></label>
<label class="slide__arrow slide__arrow--right" for="6" tabindex="1"></label>
</section>
<input class="slide__ctrl" type="radio" name="slidesCtrls" id="6"/>
<section class="slide slide__" id="slide__6">
<div class="element--centered">
<div class="todolist">
<h1>To-Do List</h1>
<div class="items">
<input class="checkbox" id="item1" type="checkbox" checked=""/>
<label for="item1">Learn CSS</label>
<input class="checkbox" id="item2" type="checkbox"/>
<label for="item2">Use it like JS</label>
<input class="checkbox" id="item3" type="checkbox"/>
<label for="item3">Create a To-Do list</label>
<input class="checkbox" id="item4" type="checkbox"/>
<label for="item4">Go to meet.js</label>
<input class="checkbox" id="item5" type="checkbox"/>
<label for="item5">Improvize</label>
<input class="checkbox" id="item6" type="checkbox"/>
<label for="item6">Impress</label>
<h2 class="done" aria-hidden="true">Done</h2>
<h2 class="undone" aria-hidden="true">Not Done</h2>
</div>
</div>
</div>
<label class="description__trigger" for="desc_6" tabindex="1"></label>
<input class="description__input" type="checkbox" name="description" id="desc_6"/>
<div class="description__body">
<label class="description__close" for="desc_6" tabindex="1"></label>
<div class="description__outside">
<div class="description__inside">
<h1>Flex box & CSS counters</h1>
<h2>How does it work?</h2>
<ul class="small-list">
<li>ToDo task-items are displayed as Flex with <kbd>flex-direction: column</kbd></li>
<li>Each item has a given <kbd>order:</kbd> value that defines its position.</li>
<li>In this example the done header has <kbd>order: 1</kbd>, the done tasks (labels) <kbd>order: 2</kbd> and so on...</li>
<li>Headers:after elements have: <kbd>content: counter(done-items)</kbd> and <kbd>content: counter(undone-items)</kbd></li>
<li>
Task names are labels for hidden checkboxes. A checkbox has <kbd>counter-increment: undone-items</kbd> unless it's <kbd>:checked</kbd>.
Then it's changed to <kbd>counter-increment: done-items</kbd>
</li>
<li>When a checkbox is checked the <kbd>checkbox:checked + label</kbd> selector kicks in (with animation) and changes the <kbd>order:</kbd> to either 2 or 4.</li>
</ul>
<h2>Good to know:</h2>
<ul class="small-list">
<li>CSS counters work on IE8!</li>
<li>Flex box works in IE10 (needing some small adjustments)</li>
<li>+ and ~ selectors work in IE8</li>
</ul>
<h2>Useful links / source:</h2>
<ul class="small-list">
<li><a href="http://codersblock.com/blog/checkbox-trickery-with-css/">http://codersblock.com/blog/checkbox-trickery-with-css/</a></li>
<li><a href="https://codepen.io/lonekorean/pen/xGLLwX">https://codepen.io/lonekorean/pen/xGLLwX</a></li>
</ul>
</div>
</div>
</div>
<label class="slide__arrow slide__arrow--left" for="5" tabindex="1"></label>
<label class="slide__arrow slide__arrow--right" for="7" tabindex="1"></label>
</section>
<input class="slide__ctrl" type="radio" name="slidesCtrls" id="7"/>
<section class="slide slide__" id="slide__7">
<div class="element--centered">
<input type="checkbox" id="fractal-checkbox" style="visibility:hidden"/>
<label class="fractal-container" id="fractalbutton" for="fractal-checkbox">
<div class="fractal-element">
<div class="fractal-element">
<div class="fractal-element">
<div class="fractal-element">
<div class="fractal-element">
<div class="fractal-element">
<div class="fractal-element">
<div class="fractal-element">
<div class="fractal-element">
<div class="fractal-element">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</label>
</div>
<label class="description__trigger" for="desc_7" tabindex="1"></label>
<input class="description__input" type="checkbox" name="description" id="desc_7"/>
<div class="description__body">
<label class="description__close" for="desc_7" tabindex="1"></label>
<div class="description__outside">
<div class="description__inside">
<h1>-webkit-box-reflect</h1>
<h2>How does it work?</h2>
<ul class="small-list">
<li>Create an element which has a fixed width and height.</li>
<li>Use <kbd>element > element</kbd> child selector to target each nested element.</li>
<li>Set every child element's size to a % of it's parent and transform it outside of the parent. Rotate it.</li>
<li>Add <kbd>-webkit-box-reflect</kbd></li>
<li>Watch the magic happen</li>
</ul>
<h2>Good to know:</h2>
<ul class="small-list">
<li>Chrome only (for now)</li>
<li>Using transform instead of top/left improves performance. Sadly it makes the shapes a bit blurry.</li>
</ul>
<h2>Useful links:</h2>
<ul class="small-list">
<li><a href="https://codepen.io/pixelass">https://codepen.io/pixelass</a></li>
</ul>
</div>
</div>
</div>
<label class="slide__arrow slide__arrow--left" for="6" tabindex="1"></label>
<label class="slide__arrow slide__arrow--right" for="8" tabindex="1"></label>
</section>
<input class="slide__ctrl" type="radio" name="slidesCtrls" id="8"/>
<section class="slide slide__" id="slide__8">
<div class="element--centered">
<label class="button" id="slide_ctrl_button" for="ctrl_toggle"></label>
</div>
<label class="slide__arrow slide__arrow--left" for="7" tabindex="1"></label>
<label class="slide__arrow slide__arrow--right" for="9" tabindex="1"></label>
</section>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >(function() {
}).call(this);
//# sourceURL=pen.js
</script>
</body></html>
