Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Fidget Spinner
ID	5254625205485568
Created	8 years ago, 1495562268697
Updated	8 years ago, 1495736692607
Code	<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Fidget Spinner</title> <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet"> <style> *, :before, :after{ position: fixed; } body{ background: black; } #all{ transform: translateX(215px) translateY(61px) rotate(0deg); animation-play-state: running; animation: 2s fsanim cubic-bezier(.8,.94,.82,.99) infinite; transform-origin: 100px 100px; } @keyframes fsanim{ 99%, 100%{transform: translateX(215px) translateY(61px) rotate(1080deg);} } body:hover #all{ animation-play-state: paused; } #a{ transform: rotate(0deg); transform-origin: 100px 100px; } #b{ transform: rotate(120deg); transform-origin: 100px 100px; } #c{ transform: rotate(240deg); transform-origin: 100px 100px; } .f1{ width: 35px; height: 35px; background: black; border-radius: 100%; border: 6px solid silver; box-shadow: 0 0 0 13px deeppink, 0 0 0 17px silver, 0 0 0 34px deeppink, -8px -8px 26px 22px lime; } .f1:before{ content: ""; width: 98px; height: 98px; background: black; border-radius: 100%; transform: translateX(72px) translateY(-57px); } #center{ width: 88px; height: 88px; background: #ff289c; border-radius: 100%; transform: translateX(56px) translateY(56px); margin-left: -50px; margin-top: -50px; border: 50px solid deeppink; box-shadow: inset 1px 2px 8px 0px #beff38; } #text{ color: deeppink; opacity: 0.13; font-size: 30px; text-shadow: 2px 0 0px deeppink; font-family: 'Pacifico', cursive; } </style> </head> <body> <div id="all"> <div id="a" class="f1"></div> <div id="b" class="f1"></div> <div id="c" class="f1"></div> </div> <div id="center" style="margin-left: 165px; margin-top: 11px; z-index: -1;"></div> <div id="text">My thoughts on Fidget Spinners:   I'm against them if they don't help you concentrate while learning.   Playing with them on the street is somewhat dangerous because you aren't paying attention to where you're going and who's around you.  They don't partially work your brain like Rubics' Cubes did.  But programming them in HTML and CSS is wonderful.   A true brain worker. </div> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgLSm3OGqCQw
Votes	275
Spin-Offs	290
Type	WEBPAGE
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Aurora
Author Name	aurorapro
Author ID	kaid_1152998834354028979907948
Author Profile Access	COACH

Archive Data

Added	6 months ago, 1739378311033
Updated	4 months ago, 1744845120083
Source Deleted	unknown