Guest User

Stack

a guest
Sep 4th, 2019
88
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 88.68 KB | None | 0 0
  1. <html lang="en"><head>
  2.     <meta charset="UTF-8">
  3.     <style>
  4.         /* Layout */
  5.         body {
  6.             margin: 0;
  7.             background-color: black;
  8.             counter-reset: points;
  9.         }
  10.  
  11.         .screen {
  12.             position: relative;
  13.             margin: 0 auto;
  14.             max-width: 100vw;
  15.             width: 75vh;
  16.             height: 100vh;
  17.             overflow: hidden;
  18.         }
  19.  
  20.         /* Sky */
  21.         .sky {
  22.             position: absolute;
  23.             left: 0;
  24.             right: 0;
  25.             top: 0;
  26.             bottom: 0;
  27.             pointer-events: none;
  28.         }
  29.  
  30.         .sky > div {
  31.             position: absolute;
  32.             left: 0;
  33.             right: 0;
  34.             top: 0;
  35.             bottom: 0;
  36.         }
  37.  
  38.         .sky > div::before {
  39.             content: "";
  40.             position: absolute;
  41.             left: 0;
  42.             right: 0;
  43.             top: 0;
  44.             display: block;
  45.             height: 1000vh;
  46.         }
  47.  
  48.         .sky > div + div {
  49.             animation: opacity 30s linear infinite forwards paused;
  50.         }
  51.  
  52.         /* All gradients except last are from https://uigradients.com/ */
  53.         .sky > div::before {
  54.             background: linear-gradient(
  55.                     #f12711,
  56.                     #f5af19 10%,
  57.                     #91eae4 11%,
  58.                     #86a8e7,
  59.                     #7f7fd5 21%,
  60.                     #f64f59 22%,
  61.                     #c471ed,
  62.                     #12c2e9 32%,
  63.                     #f7797d 33%,
  64.                     #fbd786,
  65.                     #c6ffdd 43%,
  66.                     #8a2387 44%,
  67.                     #e94057,
  68.                     #f27121 54%,
  69.                     #3a1c71 55%,
  70.                     #d76d77,
  71.                     #fdbb2d 65%,
  72.                     #22c1c3 66%,
  73.                     #fdbb2d 76%,
  74.                     #1a2a6c 77%,
  75.                     #b21f1f,
  76.                     #fdbb2d 87%
  77.             );
  78.             animation: sky 240s steps(8, end) infinite forwards paused;
  79.         }
  80.  
  81.         .sky > div + div::before {
  82.             background: linear-gradient(
  83.                     #ff0080,
  84.                     #ff8c00,
  85.                     #40e0d0 10%,
  86.                     #1d2671 11%,
  87.                     #c33764 21%,
  88.                     #78ffd6 22%,
  89.                     #a8ff78 32%,
  90.                     #4b1248 33%,
  91.                     #f0c27b 43%,
  92.                     #2980b9 44%,
  93.                     #6dd5fa,
  94.                     #fff 54%,
  95.                     #03001e 55%,
  96.                     #7303c0,
  97.                     #ec38bc,
  98.                     #fdeff9 65%,
  99.                     #56ccf2 66%,
  100.                     #2f80ed 76%,
  101.                     #0c0510 77%,
  102.                     #160b3e,
  103.                     #5f4282,
  104.                     #cecc99 87%
  105.             );
  106.             animation: sky 240s steps(8, end) -15s infinite forwards paused;
  107.         }
  108.  
  109.         /* Inputs and Last Label */
  110.         input,
  111.         .last {
  112.             z-index: 1;
  113.             position: absolute;
  114.             display: none;
  115.             width: 300vh;
  116.             height: 300vh;
  117.             opacity: 0;
  118.             cursor: pointer;
  119.             pointer-events: auto;
  120.             transform: translate(-150vh, -150vh);
  121.             -webkit-touch-callout: none;
  122.             -webkit-tap-highlight-color: transparent;
  123.         }
  124.  
  125.         #last {
  126.             display: initial;
  127.             pointer-events: none;
  128.         }
  129.  
  130.         input:checked,
  131.         #last:checked {
  132.             display: none !important;
  133.         }
  134.  
  135.         /* Base */
  136.         .base {
  137.             position: relative;
  138.             left: calc(50% - 15vh);
  139.             top: 50vh;
  140.             width: 30vh;
  141.             height: 30vh;
  142.             background-color: red;
  143.             pointer-events: none;
  144.             transform: rotateX(45deg) rotateZ(45deg);
  145.             transform-style: preserve-3d;
  146.             transition: transform 0.5s ease-in-out;
  147.         }
  148.  
  149.         /* Base Sides */
  150.         .base::before,
  151.         .base::after {
  152.             content: "";
  153.             z-index: -1;
  154.             position: absolute;
  155.             display: block;
  156.         }
  157.  
  158.         .base::before {
  159.             right: 0;
  160.             width: 50vh;
  161.             height: 100%;
  162.             background: linear-gradient(to left, #d00, rgba(221, 0, 0, 0));
  163.             transform: rotateY(-90deg);
  164.             transform-origin: right;
  165.         }
  166.  
  167.         .base::after {
  168.             bottom: 0;
  169.             width: 100%;
  170.             height: 50vh;
  171.             background: linear-gradient(to top, #e00, rgba(238, 0, 0, 0));
  172.             transform: rotateX(90deg);
  173.             transform-origin: bottom;
  174.         }
  175.  
  176.         /* Containers */
  177.         .container {
  178.             position: absolute;
  179.             display: flex;
  180.             transform-style: preserve-3d;
  181.         }
  182.  
  183.         .container.horizontal {
  184.             left: -45vh;
  185.             flex-direction: row;
  186.             width: calc(90vh + 100%);
  187.             height: 100%;
  188.         }
  189.  
  190.         .container.vertical {
  191.             top: -45vh;
  192.             flex-direction: column;
  193.             width: 100%;
  194.             height: calc(90vh + 100%);
  195.         }
  196.  
  197.         /* Spacers */
  198.         .container::before,
  199.         .container::after {
  200.             content: "";
  201.         }
  202.  
  203.         .container.horizontal::before,
  204.         .container.horizontal::after {
  205.             max-width: calc(100% - 45vh);
  206.             min-width: 45vh;
  207.             height: 100%;
  208.         }
  209.  
  210.         .container.vertical::before,
  211.         .container.vertical::after {
  212.             width: 100%;
  213.             max-height: calc(100% - 45vh);
  214.             min-height: 45vh;
  215.         }
  216.  
  217.         /* Blocks */
  218.         .block {
  219.             position: relative;
  220.             visibility: hidden;
  221.             flex-grow: 1;
  222.             background-color: currentColor;
  223.             transform: translateZ(6vh);
  224.             transform-style: preserve-3d;
  225.         }
  226.  
  227.         .block.horizontal {
  228.             height: 100%;
  229.         }
  230.  
  231.         .block.vertical {
  232.             width: 100%;
  233.         }
  234.  
  235.         .block.floating {
  236.             position: absolute;
  237.             display: none;
  238.             visibility: visible;
  239.         }
  240.  
  241.         .block.floating.horizontal {
  242.             width: calc(100% - 90vh);
  243.             animation: left 2s linear alternate infinite both;
  244.         }
  245.  
  246.         .block.floating.vertical {
  247.             height: calc(100% - 90vh);
  248.             animation: top 2s linear alternate infinite both;
  249.         }
  250.  
  251.         /* Block Sides */
  252.         .block::before,
  253.         .block::after {
  254.             content: "";
  255.             z-index: -1;
  256.             position: absolute;
  257.             display: block;
  258.             background-color: currentColor;
  259.         }
  260.  
  261.         .block::before {
  262.             right: 0;
  263.             width: 6vh;
  264.             height: 100%;
  265.             box-shadow: inset -6vh 0 rgba(0, 0, 0, 0.2);
  266.             transform: rotateY(-90deg);
  267.             transform-origin: right;
  268.         }
  269.  
  270.         .block::after {
  271.             bottom: 0;
  272.             width: 100%;
  273.             height: 6vh;
  274.             box-shadow: inset 0 -6vh rgba(0, 0, 0, 0.1);
  275.             transform: rotateX(90deg);
  276.             transform-origin: bottom;
  277.         }
  278.  
  279.         /* End Labels */
  280.         .end {
  281.             position: absolute;
  282.             left: -200vh;
  283.             top: -300vh;
  284.             visibility: visible;
  285.             max-width: 400vh;
  286.             max-height: 600vh;
  287.             pointer-events: auto;
  288.             cursor: pointer;
  289.             transform: rotateZ(-45deg) rotateX(-45deg) translateZ(100vh);
  290.             -webkit-touch-callout: none;
  291.             -webkit-tap-highlight-color: transparent;
  292.         }
  293.  
  294.         .end.horizontal {
  295.             width: calc(400vh - 100000%);
  296.             height: 600vh;
  297.         }
  298.  
  299.         .end.vertical {
  300.             width: 400vh;
  301.             height: calc(600vh - 100000%);
  302.         }
  303.  
  304.         /* Points */
  305.         .points {
  306.             position: absolute;
  307.             left: 0;
  308.             right: 0;
  309.             top: 0;
  310.             display: none;
  311.             text-align: center;
  312.             color: white;
  313.             font-family: "Helvetica", "Roboto", "Segoe UI", "Arial", sans-serif;
  314.             font-size: 9vh;
  315.             font-weight: lighter;
  316.             pointer-events: none;
  317.         }
  318.  
  319.         .points::before {
  320.             content: "YOU'VE REACHED THE TOP!";
  321.             display: block;
  322.             margin: 4vh auto;
  323.             font-size: 4vh;
  324.             opacity: 0;
  325.             transition: opacity 0.25s;
  326.         }
  327.  
  328.         .points::after {
  329.             content: counter(points);
  330.             display: block;
  331.         }
  332.  
  333.         /* Start Label */
  334.         .start {
  335.             position: absolute;
  336.             left: 0;
  337.             right: 0;
  338.             top: 0;
  339.             bottom: 0;
  340.             padding: 15vh 0;
  341.             text-align: center;
  342.             color: transparent;
  343.             text-shadow: 0 0 0 white;
  344.             font-family: "Helvetica", "Roboto", "Segoe UI", "Arial", sans-serif;
  345.             font-size: 9vh;
  346.             font-weight: lighter;
  347.             cursor: pointer;
  348.             transition: opacity 0.25s;
  349.             animation: start 0.75s linear;
  350.             -webkit-user-select: none;
  351.             -moz-user-select: none;
  352.             user-select: none;
  353.             -webkit-touch-callout: none;
  354.             -webkit-tap-highlight-color: transparent;
  355.         }
  356.  
  357.         .start::before {
  358.             content: "";
  359.             position: absolute;
  360.             left: calc(50% - 3vh);
  361.             top: 59.5vh;
  362.             display: block;
  363.             border-top: 5vh solid transparent;
  364.             border-bottom: 5vh solid transparent;
  365.             border-left: 8.5vh solid white;
  366.         }
  367.  
  368.         .start::after {
  369.             content: "";
  370.             position: absolute;
  371.             left: calc(50% - 10vh);
  372.             top: 54.5vh;
  373.             display: block;
  374.             box-sizing: border-box;
  375.             border: solid 2vh white;
  376.             border-radius: 50%;
  377.             width: 20vh;
  378.             height: 20vh;
  379.         }
  380.  
  381.         /* Restart Button */
  382.         button {
  383.             position: absolute;
  384.             left: 0;
  385.             right: 0;
  386.             top: 0;
  387.             bottom: 0;
  388.             border: none;
  389.             padding-top: 80vh;
  390.             width: 100%;
  391.             color: white;
  392.             background: transparent;
  393.             opacity: 0;
  394.             pointer-events: none;
  395.             font-family: "Helvetica", "Roboto", "Segoe UI", "Arial", sans-serif;
  396.             font-size: 4vh;
  397.             font-weight: lighter;
  398.             cursor: pointer;
  399.             transition: opacity 0.25s;
  400.             -webkit-touch-callout: none;
  401.             -webkit-tap-highlight-color: transparent;
  402.         }
  403.  
  404.         /* Keyframes */
  405.         @keyframes opacity {
  406.             0% {
  407.                 opacity: 1;
  408.             }
  409.             25% {
  410.                 opacity: 1;
  411.             }
  412.             50% {
  413.                 opacity: 0;
  414.             }
  415.             75% {
  416.                 opacity: 0;
  417.             }
  418.             100% {
  419.                 opacity: 1;
  420.             }
  421.         }
  422.         @keyframes sky {
  423.             from {
  424.                 transform: none;
  425.             }
  426.             to {
  427.                 transform: translateY(-880vh);
  428.             }
  429.         }
  430.  
  431.         @keyframes width {
  432.             from {
  433.                 width: 0;
  434.             }
  435.             to {
  436.                 width: 90vh;
  437.             }
  438.         }
  439.  
  440.         @keyframes height {
  441.             from {
  442.                 height: 0;
  443.             }
  444.             to {
  445.                 height: 90vh;
  446.             }
  447.         }
  448.  
  449.         @keyframes left {
  450.             from {
  451.                 left: 0;
  452.             }
  453.             to {
  454.                 left: 90vh;
  455.             }
  456.         }
  457.  
  458.         @keyframes top {
  459.             from {
  460.                 top: 0;
  461.             }
  462.             to {
  463.                 top: 90vh;
  464.             }
  465.         }
  466.  
  467.         @keyframes color {
  468.             0% {
  469.                 color: #f00;
  470.             }
  471.             19% {
  472.                 color: #ff0;
  473.             }
  474.             31% {
  475.                 color: #0f0;
  476.             }
  477.             43% {
  478.                 color: #0ff;
  479.             }
  480.             62% {
  481.                 color: #00f;
  482.             }
  483.             81% {
  484.                 color: #f0f;
  485.             }
  486.             100% {
  487.                 color: #f00;
  488.             }
  489.         }
  490.  
  491.         @keyframes start {
  492.             from {
  493.                 text-shadow: 0 0 1vh white, 2vh -2vh 1vh white, 2vh 2vh 1vh white,
  494.                 -2vh 2vh 1vh white, -2vh -2vh 1vh white;
  495.                 opacity: 0;
  496.             }
  497.             to {
  498.                 text-shadow: 0 0 0 white;
  499.                 opacity: 1;
  500.             }
  501.         }
  502.  
  503.         /* Sky: start changing */
  504.         #start:checked ~ .sky > div + div,
  505.         #start:checked ~ .sky > div::before {
  506.             animation-play-state: running;
  507.         }
  508.  
  509.         /* Sky: stop changing */
  510.         #end:checked ~ .sky > div + div,
  511.         #end:checked ~ .sky > div::before,
  512.         #last:checked ~ .sky > div + div,
  513.         #last:checked ~ .sky > div::before {
  514.             animation-play-state: paused;
  515.         }
  516.  
  517.         /* Base: start movement */
  518.         #start:checked ~ .base {
  519.             transform: translateY(200vh) rotateX(45deg) rotateZ(45deg);
  520.             transition-duration: 60s;
  521.             transition-timing-function: linear;
  522.         }
  523.  
  524.         /* Base: stop movement */
  525.         #end:checked ~ .base,
  526.         #last:checked ~ .base {
  527.             transform: translateY(25vh) rotateX(45deg) rotateZ(45deg)
  528.             scale3d(0.3, 0.3, 0.3);
  529.             transition-duration: 1s;
  530.             transition-timing-function: ease-in-out;
  531.         }
  532.  
  533.         /* Inputs and Last Label: display current */
  534.         #start:checked ~ .base > input,
  535.         input:checked + .container > .block > input,
  536.         input:checked + .container > .block > .last {
  537.             display: block;
  538.         }
  539.  
  540.         /* Containers: start color rotation */
  541.         #start:checked ~ .base .container {
  542.             animation: color 60s linear alternate infinite both;
  543.         }
  544.  
  545.         /* Containers: stop color rotation of current */
  546.         #start:checked ~ .base > .container,
  547.         input:checked + .container > .block > .container {
  548.             animation-play-state: paused !important;
  549.         }
  550.  
  551.         /* Spacers: start sizing of current */
  552.         #start:checked ~ .base > .container.horizontal::before,
  553.         input:checked + .container > .block > .container.horizontal::before {
  554.             animation: width 2s linear infinite alternate both running;
  555.         }
  556.  
  557.         #start:checked ~ .base > .container.horizontal::after,
  558.         input:checked + .container > .block > .container.horizontal::after {
  559.             animation: width 2s linear infinite alternate-reverse both running;
  560.         }
  561.  
  562.         #start:checked ~ .base > .container.vertical::before,
  563.         input:checked + .container > .block > .container.vertical::before {
  564.             animation: height 2s linear infinite alternate both running;
  565.         }
  566.  
  567.         #start:checked ~ .base > .container.vertical::after,
  568.         input:checked + .container > .block > .container.vertical::after {
  569.             animation: height 2s linear infinite alternate-reverse both running;
  570.         }
  571.  
  572.         /* Spacers: stop sizing of current */
  573.         #end:active ~ .base .container::before,
  574.         #end:active ~ .base .container::after,
  575.         #end:checked ~ .base .container::before,
  576.         #end:checked ~ .base .container::after,
  577.         #last:active ~ .base .container::before,
  578.         #last:active ~ .base .container::after,
  579.         #last:checked ~ .base .container::before,
  580.         #last:checked ~ .base .container::after,
  581.         input:active + .container::before,
  582.         input:active + .container::after,
  583.         input:checked + .container::before,
  584.         input:checked + .container::after {
  585.             animation-play-state: paused !important;
  586.         }
  587.  
  588.         /* Floating Blocks: display current */
  589.         #start:checked ~ .base > .container > .floating,
  590.         input:checked + .container > .block > .container > .floating {
  591.             display: block;
  592.         }
  593.  
  594.         /* Floating Blocks: stop movement of current */
  595.         #end:active ~ .base .floating,
  596.         #last:active ~ .base .floating,
  597.         input:active + .container > .floating {
  598.             animation-play-state: paused;
  599.         }
  600.  
  601.         /* Floating Blocks: stop movement of current then fadeout */
  602.         #end:checked ~ .base .floating,
  603.         #last:checked ~ .base .floating,
  604.         input:checked + .container > .floating {
  605.             visibility: hidden;
  606.             color: transparent;
  607.             transition: color 0.5s, background-color 0.5s, visibility 0s 0.5s;
  608.             animation-play-state: paused;
  609.         }
  610.  
  611.         /* Increment Points */
  612.         #last:checked ~ .base .floating,
  613.         input:checked + .container > .floating {
  614.             counter-increment: points 1;
  615.         }
  616.  
  617.         /* Floating Block Sides: stop sizing of current then fadeout */
  618.         #end:checked ~ .base .floating::before,
  619.         #end:checked ~ .base .floating::after,
  620.         #last:checked ~ .base .floating::before,
  621.         #last:checked ~ .base .floating::after,
  622.         input:checked + .container > .floating::before,
  623.         input:checked + .container > .floating::after {
  624.             visibility: hidden;
  625.             opacity: 0;
  626.             transition: opacity 0.5s, visibility 0s 0.5s;
  627.             animation-play-state: paused;
  628.         }
  629.  
  630.         /* Blocks: show current  */
  631.         input:checked + .container > .floating + .block,
  632.         #last:checked ~ .base .last + .container > .floating + .block {
  633.             visibility: visible;
  634.         }
  635.  
  636.         /* Points: show only positive */
  637.         .screen:valid .points {
  638.             display: block;
  639.         }
  640.  
  641.         /* Points: top reached */
  642.         #last:checked ~ .points::before {
  643.             opacity: 1;
  644.         }
  645.  
  646.         /* Start Label: hide after started */
  647.         #start:checked ~ .start {
  648.             pointer-events: none;
  649.             opacity: 0;
  650.             animation: none;
  651.         }
  652.  
  653.         /* Restart Button: show on end */
  654.         #end:checked ~ button,
  655.         #last:checked ~ button {
  656.             pointer-events: auto;
  657.             opacity: 1;
  658.         }
  659.  
  660.     </style>
  661.     <script>
  662.         window.console = window.console || function(t) {};
  663.     </script>
  664.     <script>
  665.         if (document.location.search.match(/type=embed/gi)) {
  666.             window.parent.postMessage("resize", "*");
  667.         }
  668.     </script>
  669. </head>
  670. <body translate="no">
  671. <form class="screen" novalidate="">
  672.     <input id="start" type="checkbox" tabindex="-1">
  673.     <input id="end" type="checkbox" tabindex="-1">
  674.     <input id="last" type="checkbox" tabindex="-1">
  675.     <div class="sky">
  676.         <div></div>
  677.         <div></div>
  678.     </div>
  679.     <div class="base">
  680.         <input type="checkbox" tabindex="-1" required="">
  681.         <div class="container horizontal">
  682.             <div class="block floating horizontal"></div>
  683.             <div class="block horizontal">
  684.                 <input type="checkbox" tabindex="-1">
  685.                 <div class="container vertical">
  686.                     <div class="block floating vertical"></div>
  687.                     <div class="block vertical">
  688.                         <input type="checkbox" tabindex="-1">
  689.                         <div class="container horizontal">
  690.                             <div class="block floating horizontal"></div>
  691.                             <div class="block horizontal">
  692.                                 <input type="checkbox" tabindex="-1">
  693.                                 <div class="container vertical">
  694.                                     <div class="block floating vertical"></div>
  695.                                     <div class="block vertical">
  696.                                         <input type="checkbox" tabindex="-1">
  697.                                         <div class="container horizontal">
  698.                                             <div class="block floating horizontal"></div>
  699.                                             <div class="block horizontal">
  700.                                                 <input type="checkbox" tabindex="-1">
  701.                                                 <div class="container vertical">
  702.                                                     <div class="block floating vertical"></div>
  703.                                                     <div class="block vertical">
  704.                                                         <input type="checkbox" tabindex="-1">
  705.                                                         <div class="container horizontal">
  706.                                                             <div class="block floating horizontal"></div>
  707.                                                             <div class="block horizontal">
  708.                                                                 <input type="checkbox" tabindex="-1">
  709.                                                                 <div class="container vertical">
  710.                                                                     <div class="block floating vertical"></div>
  711.                                                                     <div class="block vertical">
  712.                                                                         <input type="checkbox" tabindex="-1">
  713.                                                                         <div class="container horizontal">
  714.                                                                             <div class="block floating horizontal"></div>
  715.                                                                             <div class="block horizontal">
  716.                                                                                 <input type="checkbox" tabindex="-1">
  717.                                                                                 <div class="container vertical">
  718.                                                                                     <div class="block floating vertical"></div>
  719.                                                                                     <div class="block vertical">
  720.                                                                                         <input type="checkbox" tabindex="-1">
  721.                                                                                         <div class="container horizontal">
  722.                                                                                             <div class="block floating horizontal"></div>
  723.                                                                                             <div class="block horizontal">
  724.                                                                                                 <input type="checkbox" tabindex="-1">
  725.                                                                                                 <div class="container vertical">
  726.                                                                                                     <div class="block floating vertical"></div>
  727.                                                                                                     <div class="block vertical">
  728.                                                                                                         <input type="checkbox" tabindex="-1">
  729.                                                                                                         <div class="container horizontal">
  730.                                                                                                             <div class="block floating horizontal"></div>
  731.                                                                                                             <div class="block horizontal">
  732.                                                                                                                 <input type="checkbox" tabindex="-1">
  733.                                                                                                                 <div class="container vertical">
  734.                                                                                                                     <div class="block floating vertical"></div>
  735.                                                                                                                     <div class="block vertical">
  736.                                                                                                                         <input type="checkbox" tabindex="-1">
  737.                                                                                                                         <div class="container horizontal">
  738.                                                                                                                             <div class="block floating horizontal"></div>
  739.                                                                                                                             <div class="block horizontal">
  740.                                                                                                                                 <input type="checkbox" tabindex="-1">
  741.                                                                                                                                 <div class="container vertical">
  742.                                                                                                                                     <div class="block floating vertical"></div>
  743.                                                                                                                                     <div class="block vertical">
  744.                                                                                                                                         <input type="checkbox" tabindex="-1">
  745.                                                                                                                                         <div class="container horizontal">
  746.                                                                                                                                             <div class="block floating horizontal"></div>
  747.                                                                                                                                             <div class="block horizontal">
  748.                                                                                                                                                 <input type="checkbox" tabindex="-1">
  749.                                                                                                                                                 <div class="container vertical">
  750.                                                                                                                                                     <div class="block floating vertical"></div>
  751.                                                                                                                                                     <div class="block vertical">
  752.                                                                                                                                                         <input type="checkbox" tabindex="-1">
  753.                                                                                                                                                         <div class="container horizontal">
  754.                                                                                                                                                             <div class="block floating horizontal"></div>
  755.                                                                                                                                                             <div class="block horizontal">
  756.                                                                                                                                                                 <input type="checkbox" tabindex="-1">
  757.                                                                                                                                                                 <div class="container vertical">
  758.                                                                                                                                                                     <div class="block floating vertical"></div>
  759.                                                                                                                                                                     <div class="block vertical">
  760.                                                                                                                                                                         <input type="checkbox" tabindex="-1">
  761.                                                                                                                                                                         <div class="container horizontal">
  762.                                                                                                                                                                             <div class="block floating horizontal"></div>
  763.                                                                                                                                                                             <div class="block horizontal">
  764.                                                                                                                                                                                 <input type="checkbox" tabindex="-1">
  765.                                                                                                                                                                                 <div class="container vertical">
  766.                                                                                                                                                                                     <div class="block floating vertical"></div>
  767.                                                                                                                                                                                     <div class="block vertical">
  768.                                                                                                                                                                                         <input type="checkbox" tabindex="-1">
  769.                                                                                                                                                                                         <div class="container horizontal">
  770.                                                                                                                                                                                             <div class="block floating horizontal"></div>
  771.                                                                                                                                                                                             <div class="block horizontal">
  772.                                                                                                                                                                                                 <input type="checkbox" tabindex="-1">
  773.                                                                                                                                                                                                 <div class="container vertical">
  774.                                                                                                                                                                                                     <div class="block floating vertical"></div>
  775.                                                                                                                                                                                                     <div class="block vertical">
  776.                                                                                                                                                                                                         <input type="checkbox" tabindex="-1">
  777.                                                                                                                                                                                                         <div class="container horizontal">
  778.                                                                                                                                                                                                             <div class="block floating horizontal"></div>
  779.                                                                                                                                                                                                             <div class="block horizontal">
  780.                                                                                                                                                                                                                 <input type="checkbox" tabindex="-1">
  781.                                                                                                                                                                                                                 <div class="container vertical">
  782.                                                                                                                                                                                                                     <div class="block floating vertical"></div>
  783.                                                                                                                                                                                                                     <div class="block vertical">
  784.                                                                                                                                                                                                                         <input type="checkbox" tabindex="-1">
  785.                                                                                                                                                                                                                         <div class="container horizontal">
  786.                                                                                                                                                                                                                             <div class="block floating horizontal"></div>
  787.                                                                                                                                                                                                                             <div class="block horizontal">
  788.                                                                                                                                                                                                                                 <input type="checkbox" tabindex="-1">
  789.                                                                                                                                                                                                                                 <div class="container vertical">
  790.                                                                                                                                                                                                                                     <div class="block floating vertical"></div>
  791.                                                                                                                                                                                                                                     <div class="block vertical">
  792.                                                                                                                                                                                                                                         <input type="checkbox" tabindex="-1">
  793.                                                                                                                                                                                                                                         <div class="container horizontal">
  794.                                                                                                                                                                                                                                             <div class="block floating horizontal"></div>
  795.                                                                                                                                                                                                                                             <div class="block horizontal">
  796.                                                                                                                                                                                                                                                 <input type="checkbox" tabindex="-1">
  797.                                                                                                                                                                                                                                                 <div class="container vertical">
  798.                                                                                                                                                                                                                                                     <div class="block floating vertical"></div>
  799.                                                                                                                                                                                                                                                     <div class="block vertical">
  800.                                                                                                                                                                                                                                                         <input type="checkbox" tabindex="-1">
  801.                                                                                                                                                                                                                                                         <div class="container horizontal">
  802.                                                                                                                                                                                                                                                             <div class="block floating horizontal"></div>
  803.                                                                                                                                                                                                                                                             <div class="block horizontal">
  804.                                                                                                                                                                                                                                                                 <input type="checkbox" tabindex="-1">
  805.                                                                                                                                                                                                                                                                 <div class="container vertical">
  806.                                                                                                                                                                                                                                                                     <div class="block floating vertical"></div>
  807.                                                                                                                                                                                                                                                                     <div class="block vertical">
  808.                                                                                                                                                                                                                                                                         <input type="checkbox" tabindex="-1">
  809.                                                                                                                                                                                                                                                                         <div class="container horizontal">
  810.                                                                                                                                                                                                                                                                             <div class="block floating horizontal"></div>
  811.                                                                                                                                                                                                                                                                             <div class="block horizontal">
  812.                                                                                                                                                                                                                                                                                 <input type="checkbox" tabindex="-1">
  813.                                                                                                                                                                                                                                                                                 <div class="container vertical">
  814.                                                                                                                                                                                                                                                                                     <div class="block floating vertical"></div>
  815.                                                                                                                                                                                                                                                                                     <div class="block vertical">
  816.                                                                                                                                                                                                                                                                                         <input type="checkbox" tabindex="-1">
  817.                                                                                                                                                                                                                                                                                         <div class="container horizontal">
  818.                                                                                                                                                                                                                                                                                             <div class="block floating horizontal"></div>
  819.                                                                                                                                                                                                                                                                                             <div class="block horizontal">
  820.                                                                                                                                                                                                                                                                                                 <input type="checkbox" tabindex="-1">
  821.                                                                                                                                                                                                                                                                                                 <div class="container vertical">
  822.                                                                                                                                                                                                                                                                                                     <div class="block floating vertical"></div>
  823.                                                                                                                                                                                                                                                                                                     <div class="block vertical">
  824.                                                                                                                                                                                                                                                                                                         <input type="checkbox" tabindex="-1">
  825.                                                                                                                                                                                                                                                                                                         <div class="container horizontal">
  826.                                                                                                                                                                                                                                                                                                             <div class="block floating horizontal"></div>
  827.                                                                                                                                                                                                                                                                                                             <div class="block horizontal">
  828.                                                                                                                                                                                                                                                                                                                 <input type="checkbox" tabindex="-1">
  829.                                                                                                                                                                                                                                                                                                                 <div class="container vertical">
  830.                                                                                                                                                                                                                                                                                                                     <div class="block floating vertical"></div>
  831.                                                                                                                                                                                                                                                                                                                     <div class="block vertical">
  832.                                                                                                                                                                                                                                                                                                                         <input type="checkbox" tabindex="-1">
  833.                                                                                                                                                                                                                                                                                                                         <div class="container horizontal">
  834.                                                                                                                                                                                                                                                                                                                             <div class="block floating horizontal"></div>
  835.                                                                                                                                                                                                                                                                                                                             <div class="block horizontal">
  836.                                                                                                                                                                                                                                                                                                                                 <input type="checkbox" tabindex="-1">
  837.                                                                                                                                                                                                                                                                                                                                 <div class="container vertical">
  838.                                                                                                                                                                                                                                                                                                                                     <div class="block floating vertical"></div>
  839.                                                                                                                                                                                                                                                                                                                                     <div class="block vertical">
  840.                                                                                                                                                                                                                                                                                                                                         <input type="checkbox" tabindex="-1">
  841.                                                                                                                                                                                                                                                                                                                                         <div class="container horizontal">
  842.                                                                                                                                                                                                                                                                                                                                             <div class="block floating horizontal"></div>
  843.                                                                                                                                                                                                                                                                                                                                             <div class="block horizontal">
  844.                                                                                                                                                                                                                                                                                                                                                 <input type="checkbox" tabindex="-1">
  845.                                                                                                                                                                                                                                                                                                                                                 <div class="container vertical">
  846.                                                                                                                                                                                                                                                                                                                                                     <div class="block floating vertical"></div>
  847.                                                                                                                                                                                                                                                                                                                                                     <div class="block vertical">
  848.                                                                                                                                                                                                                                                                                                                                                         <input type="checkbox" tabindex="-1">
  849.                                                                                                                                                                                                                                                                                                                                                         <div class="container horizontal">
  850.                                                                                                                                                                                                                                                                                                                                                             <div class="block floating horizontal"></div>
  851.                                                                                                                                                                                                                                                                                                                                                             <div class="block horizontal">
  852.                                                                                                                                                                                                                                                                                                                                                                 <input type="checkbox" tabindex="-1">
  853.                                                                                                                                                                                                                                                                                                                                                                 <div class="container vertical">
  854.                                                                                                                                                                                                                                                                                                                                                                     <div class="block floating vertical"></div>
  855.                                                                                                                                                                                                                                                                                                                                                                     <div class="block vertical">
  856.                                                                                                                                                                                                                                                                                                                                                                         <input type="checkbox" tabindex="-1">
  857.                                                                                                                                                                                                                                                                                                                                                                         <div class="container horizontal">
  858.                                                                                                                                                                                                                                                                                                                                                                             <div class="block floating horizontal"></div>
  859.                                                                                                                                                                                                                                                                                                                                                                             <div class="block horizontal">
  860.                                                                                                                                                                                                                                                                                                                                                                                 <input type="checkbox" tabindex="-1">
  861.                                                                                                                                                                                                                                                                                                                                                                                 <div class="container vertical">
  862.                                                                                                                                                                                                                                                                                                                                                                                     <div class="block floating vertical"></div>
  863.                                                                                                                                                                                                                                                                                                                                                                                     <div class="block vertical">
  864.                                                                                                                                                                                                                                                                                                                                                                                         <input type="checkbox" tabindex="-1">
  865.                                                                                                                                                                                                                                                                                                                                                                                         <div class="container horizontal">
  866.                                                                                                                                                                                                                                                                                                                                                                                             <div class="block floating horizontal"></div>
  867.                                                                                                                                                                                                                                                                                                                                                                                             <div class="block horizontal">
  868.                                                                                                                                                                                                                                                                                                                                                                                                 <input type="checkbox" tabindex="-1">
  869.                                                                                                                                                                                                                                                                                                                                                                                                 <div class="container vertical">
  870.                                                                                                                                                                                                                                                                                                                                                                                                     <div class="block floating vertical"></div>
  871.                                                                                                                                                                                                                                                                                                                                                                                                     <div class="block vertical">
  872.                                                                                                                                                                                                                                                                                                                                                                                                         <input type="checkbox" tabindex="-1">
  873.                                                                                                                                                                                                                                                                                                                                                                                                         <div class="container horizontal">
  874.                                                                                                                                                                                                                                                                                                                                                                                                             <div class="block floating horizontal"></div>
  875.                                                                                                                                                                                                                                                                                                                                                                                                             <div class="block horizontal">
  876.                                                                                                                                                                                                                                                                                                                                                                                                                 <label class="last" for="last" tabindex="-1"></label>
  877.                                                                                                                                                                                                                                                                                                                                                                                                                 <div class="container vertical">
  878.                                                                                                                                                                                                                                                                                                                                                                                                                     <div class="block floating vertical"></div>
  879.                                                                                                                                                                                                                                                                                                                                                                                                                     <div class="block vertical">
  880.                                                                                                                                                                                                                                                                                                                                                                                                                         <label class="end horizontal" for="end"></label>
  881.                                                                                                                                                                                                                                                                                                                                                                                                                         <label class="end vertical" for="end"></label>
  882.                                                                                                                                                                                                                                                                                                                                                                                                                     </div>
  883.                                                                                                                                                                                                                                                                                                                                                                                                                 </div>
  884.                                                                                                                                                                                                                                                                                                                                                                                                             </div>
  885.                                                                                                                                                                                                                                                                                                                                                                                                         </div>
  886.                                                                                                                                                                                                                                                                                                                                                                                                     </div>
  887.                                                                                                                                                                                                                                                                                                                                                                                                 </div>
  888.                                                                                                                                                                                                                                                                                                                                                                                             </div>
  889.                                                                                                                                                                                                                                                                                                                                                                                         </div>
  890.                                                                                                                                                                                                                                                                                                                                                                                     </div>
  891.                                                                                                                                                                                                                                                                                                                                                                                 </div>
  892.                                                                                                                                                                                                                                                                                                                                                                             </div>
  893.                                                                                                                                                                                                                                                                                                                                                                         </div>
  894.                                                                                                                                                                                                                                                                                                                                                                     </div>
  895.                                                                                                                                                                                                                                                                                                                                                                 </div>
  896.                                                                                                                                                                                                                                                                                                                                                             </div>
  897.                                                                                                                                                                                                                                                                                                                                                         </div>
  898.                                                                                                                                                                                                                                                                                                                                                     </div>
  899.                                                                                                                                                                                                                                                                                                                                                 </div>
  900.                                                                                                                                                                                                                                                                                                                                             </div>
  901.                                                                                                                                                                                                                                                                                                                                         </div>
  902.                                                                                                                                                                                                                                                                                                                                     </div>
  903.                                                                                                                                                                                                                                                                                                                                 </div>
  904.                                                                                                                                                                                                                                                                                                                             </div>
  905.                                                                                                                                                                                                                                                                                                                         </div>
  906.                                                                                                                                                                                                                                                                                                                     </div>
  907.                                                                                                                                                                                                                                                                                                                 </div>
  908.                                                                                                                                                                                                                                                                                                             </div>
  909.                                                                                                                                                                                                                                                                                                         </div>
  910.                                                                                                                                                                                                                                                                                                     </div>
  911.                                                                                                                                                                                                                                                                                                 </div>
  912.                                                                                                                                                                                                                                                                                             </div>
  913.                                                                                                                                                                                                                                                                                         </div>
  914.                                                                                                                                                                                                                                                                                     </div>
  915.                                                                                                                                                                                                                                                                                 </div>
  916.                                                                                                                                                                                                                                                                             </div>
  917.                                                                                                                                                                                                                                                                         </div>
  918.                                                                                                                                                                                                                                                                     </div>
  919.                                                                                                                                                                                                                                                                 </div>
  920.                                                                                                                                                                                                                                                             </div>
  921.                                                                                                                                                                                                                                                         </div>
  922.                                                                                                                                                                                                                                                     </div>
  923.                                                                                                                                                                                                                                                 </div>
  924.                                                                                                                                                                                                                                             </div>
  925.                                                                                                                                                                                                                                         </div>
  926.                                                                                                                                                                                                                                     </div>
  927.                                                                                                                                                                                                                                 </div>
  928.                                                                                                                                                                                                                             </div>
  929.                                                                                                                                                                                                                         </div>
  930.                                                                                                                                                                                                                     </div>
  931.                                                                                                                                                                                                                 </div>
  932.                                                                                                                                                                                                             </div>
  933.                                                                                                                                                                                                         </div>
  934.                                                                                                                                                                                                     </div>
  935.                                                                                                                                                                                                 </div>
  936.                                                                                                                                                                                             </div>
  937.                                                                                                                                                                                         </div>
  938.                                                                                                                                                                                     </div>
  939.                                                                                                                                                                                 </div>
  940.                                                                                                                                                                             </div>
  941.                                                                                                                                                                         </div>
  942.                                                                                                                                                                     </div>
  943.                                                                                                                                                                 </div>
  944.                                                                                                                                                             </div>
  945.                                                                                                                                                         </div>
  946.                                                                                                                                                     </div>
  947.                                                                                                                                                 </div>
  948.                                                                                                                                             </div>
  949.                                                                                                                                         </div>
  950.                                                                                                                                     </div>
  951.                                                                                                                                 </div>
  952.                                                                                                                             </div>
  953.                                                                                                                         </div>
  954.                                                                                                                     </div>
  955.                                                                                                                 </div>
  956.                                                                                                             </div>
  957.                                                                                                         </div>
  958.                                                                                                     </div>
  959.                                                                                                 </div>
  960.                                                                                             </div>
  961.                                                                                         </div>
  962.                                                                                     </div>
  963.                                                                                 </div>
  964.                                                                             </div>
  965.                                                                         </div>
  966.                                                                     </div>
  967.                                                                 </div>
  968.                                                             </div>
  969.                                                         </div>
  970.                                                     </div>
  971.                                                 </div>
  972.                                             </div>
  973.                                         </div>
  974.                                     </div>
  975.                                 </div>
  976.                             </div>
  977.                         </div>
  978.                     </div>
  979.                 </div>
  980.             </div>
  981.         </div>
  982.     </div>
  983.     <div class="points"></div>
  984.     <label class="start" for="start" tabindex="-1">
  985.         PURE CSS<br>STACK
  986.     </label>
  987.     <button type="reset" tabindex="-1">
  988.         CLICK OR TAP<br>
  989.         TO RESTART
  990.     </button>
  991. </form>
  992. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment