Viewing Program

Program Data

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

Title	Rube Goldberg Machine (Read Code!)
ID	3452910703
Created	9 years ago, 1458085936175
Updated	9 years ago, 1458258392238
Code	<!DOCTYPE html> <!---- ✄╔═══╦═══╦═══╦═══╗╔════╦╗─╔╦═══╗╔═══╦═══╦═══╦═══╗ ✄║╔═╗║╔══╣╔═╗╠╗╔╗║║╔╗╔╗║║─║║╔══╝║╔═╗║╔═╗╠╗╔╗║╔══╝ ✄║╚═╝║╚══╣║─║║║║║║╚╝║║╚╣╚═╝║╚══╗║║─╚╣║─║║║║║║╚══╗ ✄║╔╗╔╣╔══╣╚═╝║║║║║──║║─║╔═╗║╔══╝║║─╔╣║─║║║║║║╔══╝ ✄║║║╚╣╚══╣╔═╗╠╝╚╝║──║║─║║─║║╚══╗║╚═╝║╚═╝╠╝╚╝║╚══╦╗ ✄╚╝╚═╩═══╩╝─╚╩═══╝──╚╝─╚╝─╚╩═══╝╚═══╩═══╩═══╩═══╩╝ ---> <!----- ╭━━━━╮╱╱╱╱╱╱╱╱╱╱╭┳━━━╮ ╰━━╮━┃╱╱╱╱╱╱╱╱╱╱┃┃╭━╮┃ ╱╱╭╯╭╋━━┳━┳━━╮╱╱┃┃╰━━╮ ╱╭╯╭╯┃┃━┫╭┫╭╮┃╭╮┃┣━━╮┃ ╭╯━╰━┫┃━┫┃┃╰╯┃┃╰╯┃╰━╯┣╮ ╰━━━━┻━━┻╯╰━━╯╰━━┻━━━┻╯ -----> <!---MY NEW CSS CREATION IS OUT:https://www.khanacademy.org/computer-programming/animated-computer-css/3506941302. ALMOST AS HARD TO MAKE AS THIS ONE! CHECK IT OUT! AND KEEP ON READING --> <!--Thanks ya'll for voting for my program. I hope I have inspired you to make your own CSS Creations that I'll expect to see rockin' the Hot List. These votes show me that Khan users really do appreciate CSS. Please, go out there and make your own! Make HTML+CSS your second and third language. Once you know JS, HTML+ CSS, you can become a web dev. And if that isn't enough motivation for you, then I don't know what is. :) Happy Coding! I've noticed I'm using y'all a lot more BTW. I think Pamela's encouraging way of typing is rubbing off on me :P--> <!---I made this on Codepen as well. If you find it there, please don't go around telling Khan users my real name. (How you know it's real) ;).--> <!---OH, how I wish there were different colored comments in HTML+CSS--> <html> <head> </head> <body> <div id="content"> <div class="round ball bowling" id="bowling1"> <div class="round finger"></div> <div class="round finger"></div> <div class="round finger"></div> </div> <div class="round ball bowling" id="bowling2"> <div class="ballRotate"> <div class="round finger"></div> <div class="round finger"></div> <div class="round finger"></div> </div> </div> <div class="round ball bowling" id="bowling3"> <div class="ballRotate"> <div class="round finger"></div> <div class="round finger"></div> <div class="round finger"></div> </div> </div> <div class="round basketBall" id="basketBall1"> <div class="in round"> <div class="in round"></div> </div> <div class="in round"> <div class="in round"></div> </div> <div class="rectangle"></div> <div class="rectangle"></div> </div> <div class="treadmill round" id="treadmill1"> <div class="cog round rotateIn"> <div class="in round"> <div class="rectangle vertical"></div> <div class="rectangle"></div> </div> </div> <div class="wheel round"></div> <div class="wheel round"></div> <div class="footer"> <div class="rectangle"></div> <div class="rectangle vertical"></div> </div> <div class="footer"> <div class="rectangle"></div> <div class="rectangle vertical"></div> </div> </div> <div class="treadmill round" id="treadmill2"> <div class="cog round rotateIn"> <div class="in round"> <div class="rectangle vertical"></div> <div class="rectangle"></div> </div> </div> <div class="wheel round"></div> <div class="wheel round"></div> <div class="footer"> <div class="rectangle"></div> <div class="rectangle vertical"></div> </div> <div class="footer"> <div class="rectangle"></div> <div class="rectangle vertical"></div> </div> </div> <div class="treadmill round" id="treadmill3"> <div class="cog round rotateIn"> <div class="in round"> <div class="rectangle vertical"></div> <div class="rectangle"></div> </div> </div> <div class="wheel round"></div> <div class="wheel round"></div> <div class="footer"> <div class="rectangle"></div> <div class="rectangle vertical"></div> </div> <div class="footer"> <div class="rectangle"></div> <div class="rectangle vertical"></div> </div> </div> <div class="mouseMotor" id="mouseMotor1"> <div class="in"> <div class="cog round rotateIn"> <div class="in round"> <div class="rectangle vertical"></div> <div class="rectangle"></div> </div> </div> <div class="cog round"> <div class="in round"></div> </div> <div class="piston"> <div class="cog round"></div> </div> <div class="mouse"> <div class="headMouse round"> <div class="eye round"></div> <div class="snout round"></div> </div> <div class="ear round"> <div class="in round"></div> </div> <div class="bodyMouse round"></div> <div class="footMouse"></div> <div class="footMouse"></div> </div> </div> </div> <div class="mouseMotor" id="mouseMotor2"> <div class="in"> <div class="cog round rotateIn"> <div class="in round"> <div class="rectangle vertical"></div> <div class="rectangle"></div> </div> </div> <div class="cog round"> <div class="in round"></div> </div> <div class="piston"> <div class="cog round"></div> </div> <div class="mouse"> <div class="headMouse round"> <div class="eye round"></div> <div class="snout round"></div> </div> <div class="ear round"> <div class="in round"></div> </div> <div class="bodyMouse round"></div> <div class="footMouse"></div> <div class="footMouse"></div> </div> </div> </div> <div class="mouseMotor" id="mouseMotor3"> <div class="in"> <div class="cog round rotateIn"> <div class="in round"> <div class="rectangle vertical"></div> <div class="rectangle"></div> </div> </div> <div class="cog round"> <div class="in round"></div> </div> <div class="piston"> <div class="cog round"></div> </div> <div class="mouse"> <div class="headMouse round"> <div class="eye round"></div> <div class="snout round"></div> </div> <div class="ear round"> <div class="in round"></div> </div> <div class="bodyMouse round"></div> <div class="footMouse"></div> <div class="footMouse"></div> </div> </div> </div> <div class="node" id="node1"> <div class="in"></div> <div class="in"></div> </div> <div class="node" id="node2"> <div class="in"></div> <div class="in"></div> </div> <div class="node" id="node3"> <div class="in"></div> <div class="in"></div> </div> <div class="wall"> <div class="lign"> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> </div> <div class="lign"> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> </div> </div> <div class="basket"> <div id="contentRamp1"> <div class="ramp wood"> <div class="in"></div> </div> </div> <div id="contentRamp2"> <div class="ramp wood"> <div class="in"></div> </div> </div> <div class="panel wood"> <div class="in"></div> </div> <div class="pylon"> <div class="end"><div class="in"></div></div> <div class="end"><div class="in"></div></div> <div class="in"></div> </div> <div class="contentPylonRound"> <div class="pylonRound"> <div class="in"></div> <div class="in"></div> <div class="end"><div class="in"></div></div> <div class="end"><div class="in"></div></div> </div> <div class="separate"></div> </div> </div> </div> </body> <style> { margin:0; padding:0; } body{ background-color:#2eb5b8; /background:url(tim.png);/ background-size:100%,100%; margin-top:30%; } #content{ display: block; position: relative; padding-bottom: 6%; top: 50%; } .cog{ display:block; position:absolute; -webkit-animation-timing-function: linear; animation-timing-function: linear; animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; -webkit-transform-origin: center center; transform-origin: center center; } .cog .in{ display:block; position:relative; width:100%; padding-bottom: 100%; } .cog .rectangle{ display: block; position: absolute; width: 100%; padding-bottom: 20%; top: 40%; background-color: #dbdbdb; } .vertical{ -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } .round{ -webkit-border-radius: 99em; -moz-border-radius: 99em; border-radius: 99em; } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; -webkit-transform: rotate(360deg); transform: rotate(360deg); } @-webkit-keyframes rotateIn { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes rotateIn { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /TREADMILL/ #treadmill1{ top: 200%; left: 14%; } #treadmill2{ top: 0%; left: 32%; } #treadmill3{ top: -190%; left: 48%; } .treadmill{ display:block; width:15%; padding-bottom: 2.5%; position:absolute; height: 0; background-color:#2853d6; } .treadmill .cog{ width:12%; padding:2.5%; left:60%; background-color:#dbdbdb; z-index:16; -webkit-animation-duration: .7s; animation-duration: .7s; } .treadmill .cog .rectangle{ background-color: #dbdbdb; } .treadmill .cog .in{ background-color:#2853d6; } .treadmill .footer { display: block; position: absolute; width: 12%; padding-bottom: 12%; top: 50%; z-index: 12; left: 1%; } .treadmill .footer .rectangle{ display: block; position: absolute; width: 25%; padding-bottom: 100%; background-color: #dbdbdb; left: 45%; } .treadmill .footer .vertical{ top: 45%; } .treadmill > .footer + .footer{ margin-left:84%; } .treadmill .wheel{ display: block; position: absolute; width: 13%; padding-bottom: 12%; top: 15%; background-color: #1944C5; z-index: 11; left: 2%; } .treadmill > .wheel + .wheel{ margin-left:83%; } /MOUSE MOTOR/ #mouseMotor1{ top: 200%; left: 5%; } #mouseMotor1 .mouse, #mouseMotor1 .in .cog, #mouseMotor1 .mouse .footMouse, #treadmill1 .cog { animation-delay:2s; -webkit-animation-delay:2s; } #mouseMotor2{ top: 102%; left: 29%; } #mouseMotor2 .mouse, #mouseMotor2 .in .cog, #mouseMotor2 .mouse .footMouse, #treadmill2 .cog{ animation-delay:3s; -webkit-animation-delay:3s; } #mouseMotor3{ top: -96%; right: 44%; } #mouseMotor3 .mouse, #mouseMotor3 .in .cog, #mouseMotor3 .mouse .footMouse, #treadmill3 .cog{ animation-delay:4s; -webkit-animation-delay:4s; } .mouseMotor{ display: block; position: absolute; width: 8%; padding: 0.5%; background-color: #4AC282; } .mouseMotor > .in{ display: block; position: relative; width: 100%; padding-bottom: 60%; } .mouseMotor > .in > .cog{ -webkit-animation-duration: 1s; animation-duration: 1s; } .mouseMotor > .in > .cog:nth-child(1){ width: 47%; padding: 9%; left: 0%; top: -4%; background-color: #37B074; } .mouseMotor > .in > .cog:nth-child(1) > .in{ width: 100%; padding-bottom: 100%; background-color: #2eb5b8; } .mouseMotor > .in > .cog:nth-child(1) > .in > .rectangle{ background-color: #1944C5; } .mouseMotor > .in > .cog:nth-child(2){ width: 14%; padding: 5%; right: 5%; top: 7%; background-color: #dbdbdb; z-index: 16; } .mouseMotor > .in >.cog:nth-child(2) .in{ background-color: #CACACA; } .mouseMotor > .in > .piston{ display: none; position: absolute; width: 37%; padding-bottom: 17%; background-color: #1FA0A3; bottom: 0%; right: 0%; z-index: 10; } .mouseMotor > .in > .piston > .cog{ width: 0%; padding: 35%; left: 15%; top: -60%; background-color: #1FA0A3; } .mouse { display: block; position: absolute; width: 30%; padding-bottom: 15%; bottom: 13%; left: 21%; -webkit-animation-name: mouseAnim; animation-name: mouseAnim; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-duration: .5s; animation-duration: .5s; animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; } @-webkit-keyframes mouseAnim { 0% {left: 21%;} 50% {left: 16%;} 100% {left: 21%;} } @keyframes mouseAnim { 0% {left: 21%;} 50% {left: 16%;} 100% {left: 21%;} } .mouse .bodyMouse{ display: block; position: absolute; width: 80%; padding-bottom: 40%; background-color: #EDEDED; bottom: 0%; left: 0%; } .mouse .footMouse{ display: block; position: absolute; width: 26%; padding-bottom: 26%; background-color: #EDEDED; bottom: -15%; left: 13%; transform: rotate(45deg); -webkit-transform: rotate(45deg); -webkit-animation-name: mouseWalk; animation-name: mouseWalk; -webkit-animation-duration: .5s; animation-duration: .5s; -webkit-animation-timing-function: linear; animation-timing-function: linear; animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; } @-webkit-keyframes mouseWalk { 0% {left: 13%;} 50% {left: 18%;} 100% {left: 13%;} } @keyframes mouseWalk { 0% {left: 13%;} 50% {left: 18%;} 100% {left: 13%;} } .mouse .footMouse + .footMouse{ left: 32%; -webkit-animation-name: mouseWalk2 !important; animation-name: mouseWalk2 !important; } @-webkit-keyframes mouseWalk2 { 0% {left: 36%;} 50% {left: 28%;} 100% {left: 36%;} } @keyframes mouseWalk2 { 0% {left: 36%;} 50% {left: 28%;} 100% {left: 36%;} } .mouse .headMouse{ display: block; position: absolute; width: 56%; padding-bottom: 49%; background-color: #EDEDED; bottom: 0%; left: 34%; } .mouse .headMouse > .eye{ display: block; position: absolute; width: 14%; padding-bottom: 14%; background-color: #1D1D1D; bottom: 53%; left: 61%; z-index: 15; } .mouse .headMouse > .snout{ display: block; position: absolute; width: 53%; padding-bottom: 39%; background-color: #EDEDED; bottom: 0%; left: 61%; } .mouse .ear{ display: block; position: absolute; width: 14%; padding: 6%; background-color: #EDEDED; bottom: 43%; left: 42%; z-index: 15; } .mouse .ear > .in{ display: block; position: relative; width: 100%; padding-bottom: 150%; background-color: #DB8676; } /BOWLING BALL/ #bowling1{ left: 7%; top: 114%; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-animation-name: bowling1Anim; animation-name: bowling1Anim; -webkit-animation-duration: 2.4s; animation-duration: 2.4s; -webkit-animation-timing-function: linear; animation-timing-function: linear; opacity:1; } @-webkit-keyframes bowling1Anim { 0%, 70% {top: -550%;transform: rotate(0deg);opacity:0;} 74% {opacity:1;} 84% {top: 114%;} 88% {top: 90%;} 92% {top: 114%;transform: rotate(90deg);} 95% {top: 100%;} 100% {top: 114%;} } @keyframes bowling1Anim { 0%, 70% {top: -550%;transform: rotate(0deg);opacity:0;} 74% {opacity:1;} 84% {top: 114%;} 88% {top: 90%;} 92% {top: 114%;transform: rotate(90deg);} 95% {top: 100%;} 100% {top: 114%;} } #bowling2{ left: 16%; top: 115%; -webkit-animation-name: bowling2Move; animation-name: bowling2Move; -webkit-animation-delay: 2.4s; animation-delay: 2.4s; -webkit-animation-duration: .6s; animation-duration: .6s; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes bowling2Move { 0% {left: 16%;} 100% {left: 23.7%;} } @keyframes bowling2Move { 0% {left: 16%;} 100% {left: 23.7%;} } #bowling3{ left: 34%; top: -85%; -webkit-animation-name: bowling3Move; animation-name: bowling3Move; -webkit-animation-delay: 3.4s; animation-delay: 3.4s; -webkit-animation-duration: .6s; animation-duration: .6s; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes bowling3Move { 0% {left: 34%;} 100% {left: 41.8%;} } @keyframes bowling3Move { 0% {left: 34%;} 100% {left: 41.8%;} } .ball { display: block; position: absolute; width: 5.2%; padding-bottom: 5.2%; } .bowling{ background-color: #1944C5; position: absolute; display: block; -webkit-transform: rotate(0deg); transform: rotate(0deg); } .ballRotate { display: block; position: absolute; width: 100%; padding-bottom: 100%; -webkit-animation-name: bowlingRotate; animation-name: bowlingRotate; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: linear; animation-timing-function: linear; animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; } @-webkit-keyframes bowlingRotate { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} } @keyframes bowlingRotate { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} } #bowling2 .ballRotate { -webkit-animation-delay: 2.4s; animation-delay: 2.4s; } #bowling3 .ballRotate { -webkit-animation-delay: 3.4s; animation-delay: 3.4s; } .bowling .finger{ display: block; position: absolute; width: 10%; padding-bottom: 10%; background-color: #1D1D1D; } .bowling .finger:nth-child(1){ top: 22%; left:47%; } .bowling .finger:nth-child(2){ top: 24%; left:65%; } .bowling .finger:nth-child(3){ top: 38%; left:54%; } /BASKET BALL/ #basketBall1{ left: 50%; top: -285%; -webkit-animation-name:basketBallAnim; animation-name:basketBallAnim; -webkit-animation-delay: 4s; animation-delay: 4s; -webkit-animation-duration: 6s; animation-duration: 6s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } @-webkit-keyframes basketBallAnim { 0% {left: 50%;top: -285%;-webkit-transform: rotate(-45deg);} 6% {left: 60%;top: -285%;width: 5.8%;padding-bottom: 5.8%;} 10% {left: 75%;top: -198%;width: 5.5%;}/panel/ 14%{left: 71%;top: -220%;width: 5.8%;-webkit-transform: rotate(180deg);} 16%{left: 66%;top: -210%;width: 5.5%;}/panel/ 20%{left: 70%;top: -200%;width: 5.8%;} 23%{left: 72%;top: -128%;width: 5.5%;-webkit-transform: rotate(45deg);}/panel/ 25%{left: 70%;top: -96%;width: 5.5%;} 29%{left: 74%;top: 55%;width: 5.8%;padding-bottom: 5.8%;} 32%{left: 80%;top: 275%;padding-bottom: 5.2%;-webkit-transform: rotate(360deg);} /sol/ 34%{left: 75%;top: 185%;padding-bottom: 6%;} 36%{left: 72%;top: 275%;padding-bottom: 5.2%;} /sol/ 38%{left: 70%;top: 224%;padding-bottom: 6%;} 40%{left: 68%;top: 280%;padding-bottom: 5.2%;} /sol/ 42%{left: 67%;top: 248%;padding-bottom: 5.8%;} 43%{left: 66%;top: 272%;padding-bottom: 5.4%;} /sol/ 44%{left: 65.5%;top: 256%;padding-bottom: 5.8%;-webkit-transform: rotate(0deg);} 45%{left: 65%;top: 272%;padding-bottom: 5.6%;} /sol/ 46%{left: 64.5%;top: 268%;padding-bottom: 5.8%;} 47%{left: 64%;top: 272%;padding-bottom: 5.6%;} /sol/ 90%, 100%{left: 59%;top: 270%;padding-bottom: 5.8%;-webkit-transform: rotate(-150deg);} } @keyframes basketBallAnim { 0% {left: 50%;top: -285%;transform: rotate(-45deg);} 6% {left: 60%;top: -285%;width: 5.8%;padding-bottom: 5.8%;} 10% {left: 75%;top: -198%;width: 5.5%;}/panel/ 14%{left: 71%;top: -220%;width: 5.8%;transform: rotate(180deg);} 16%{left: 66%;top: -210%;width: 5.5%;}/panel/ 20%{left: 70%;top: -200%;width: 5.8%;} 23%{left: 72%;top: -128%;width: 5.5%;transform: rotate(45deg);}/panel/ 25%{left: 70%;top: -96%;width: 5.5%;} 29%{left: 74%;top: 55%;width: 5.8%;padding-bottom: 5.8%;} 32%{left: 80%;top: 275%;padding-bottom: 5.2%;transform: rotate(360deg);} /sol/ 34%{left: 75%;top: 185%;padding-bottom: 6%;} 36%{left: 72%;top: 275%;padding-bottom: 5.2%;} /sol/ 38%{left: 70%;top: 224%;padding-bottom: 6%;} 40%{left: 68%;top: 280%;padding-bottom: 5.2%;} /sol/ 42%{left: 67%;top: 248%;padding-bottom: 5.8%;} 43%{left: 66%;top: 272%;padding-bottom: 5.4%;} /sol/ 44%{left: 65.5%;top: 256%;padding-bottom: 5.8%;transform: rotate(0deg);} 45%{left: 65%;top: 272%;padding-bottom: 5.6%;} /sol/ 46%{left: 64.5%;top: 268%;padding-bottom: 5.8%;} 47%{left: 64%;top: 272%;padding-bottom: 5.6%;} /sol/ 90%, 100%{left: 59%;top: 270%;padding-bottom: 5.8%;transform: rotate(-150deg);} } .basketBall{ overflow:hidden; background-color:#C26125; display: block; position: absolute; width: 5.8%; padding-bottom: 5.8%; } .basketBall > .in{ display: block; position: absolute; background-color: #AB4D24; width: 100%; padding: 5%; } .basketBall > .in:nth-child(1){ left: 0%; top: -78%; } .basketBall .in:nth-child(2){ left: 0%; top: 72%; } .basketBall .in > .in{ display: block; position: relative; width: 100%; padding-bottom: 100%; background-color: #C26125; } .basketBall .rectangle{ display: block; position: absolute; width: 125%; padding-bottom: 5%; background-color: #AB4D24; top: 50%; left: -11%; } .basketBall .rectangle + .rectangle{ transform: rotate(90deg); -webkit-transform: rotate(90deg); top: 53%; } /NODE/ #node1{ transform: rotate(-4deg); -webkit-transform: rotate(-4deg); left: 12%; top: 214%; width: 12%; } #node2{ transform: rotate(-49deg); -webkit-transform: rotate(-49deg); left: 36.12%; top: 116%; width: 9%; } #node3{ transform: rotate(-57deg); -webkit-transform: rotate(-57deg); left: 54%; top: -81%; width: 8%; } .node{ display: block; position:absolute; -webkit-transform-origin: left center; transform-origin: left center; padding-bottom: 2%; z-index:15; } .node > .in { display: block; position:absolute; width:100%; background-color:#1d1d1d; } #node1 > .in {padding-bottom:2%;} #node2 > .in {padding-bottom:3%;} #node3 > .in {padding-bottom:3%;} .node > .in + .in { bottom: -8%; transform: rotate(3deg); -webkit-transform: rotate(3deg); } /WALL/ .wall{ display: block; position: absolute; width: 85%; padding-bottom: 2.5%; background-color: #dbdbdb; bottom: -308%; right: 5%; } .wall .lign{ display: block; position: absolute; width: 104%; } .wall .lign:nth-child(1){ left: -0.8%; top: -13%; } .wall .lign:nth-child(2){ left: -.5%; bottom: -10%; } .wall .lign .brick{ display: block; float: left; position: relative; margin: 0 0.2%; width: 3.5%; padding-top: 1.5%; background-color: #BE3F3F; border-radius: .2em; -webkit-border-radius: .2em; -moz-border-radius: .2em; } .wall .lign:nth-child(1) .brick:nth-child(1){ width: 2%; } .wall .lign:nth-child(1) .brick:nth-child(25){ width: 5%; } .wall .lign:nth-child(2) .brick:nth-child(1){ width: 4%; } .wall .lign:nth-child(2) .brick:nth-child(2){ width: 2.5%; } /BASKET*/ .wood{ background-color: #C26125; } .ramp{ display:block; position:absolute; width:10%; padding-top:10%; top:20%; right:20%; transform: rotate(45deg); -webkit-transform: rotate(45deg); } #contentRamp1{ display: block; position: absolute; width: 7%; padding-bottom: 12%; left: 63%; top: -187%; overflow: hidden; } #contentRamp1 .ramp{ display: block; position: absolute; width: 200%; padding-bottom: 24%; top: 32%; left: -40%; transform: rotate(40deg); -webkit-transform: rotate(40deg); } #contentRamp1 .ramp > .in{ display: block; position: absolute; background-color: #AB4D24; width: 200%; padding-bottom: 9%; top: 24%; left: -40%; } #contentRamp2{ display: block; position: absolute; width: 3%; padding-bottom: 12%; left: 77.5%; top: -187%; overflow: hidden; } #contentRamp2 .ramp{ display: block; position: absolute; width: 200%; padding-bottom: 70%; top: 40%; left: -48%; transform: rotate(-40deg); -webkit-transform: rotate(-40deg); } #contentRamp2 .ramp > .in{ display: block; position: absolute; background-color: #AB4D24; width: 200%; padding-bottom: 21%; top: 24%; left: -40%; } .panel{ display: block; position: absolute; width: 3%; padding-bottom: 16%; top: -267%; right: 17%; overflow: hidden; z-index: 10; } .panel > .in{ display: block; position: absolute; background-color: #AB4D24; width: 60%; padding-bottom: 540%; top: 0%; left: 20%; } .pylon{ display: block; position: absolute; background-color: #CACACA; width: 2.6%; padding-bottom: 22%; top: -31%; right: 11%; } .pylon .in{ display: block; position: absolute; background-color: #B6B6B6; width: 50%; padding-bottom: 900%; top: 0%; left: 0%; } .pylon .end{ display: block; position: absolute; background-color: #CACACA; width: 120%; padding-bottom: 70%; top: 0%; right: -8%; z-index: 9; } .pylon .end + .end{ top: 100%; } .pylon .end .in{ display: block; position: absolute; background-color: #BEBEBE; width: 68%; padding-bottom: 58%; top: 0%; left: 0%; } .contentPylonRound{ display: block; position: absolute; width: 10%; padding-bottom: 10%; top: -135%; right: 11%; z-index: 9; } .pylonRound{ display: block; position: absolute; background-color: #CACACA; width: 66%; padding-bottom: 66%; top: 0%; right: 0%; -webkit-border-top-right-radius: 2.7em; -moz-border-top-right-radius: 2.7em; border-top-right-radius: 2.7em; } .pylonRound > .in{ display: block; position: absolute; background-color: #B6B6B6; width: 70%; padding-bottom: 80%; top: 20%; right: 20%; -webkit-border-top-right-radius: 2em; -moz-border-top-right-radius: 2em; border-top-right-radius: 2em; } .pylonRound > .in + .in{ display: block; position: absolute; background-color: #2eb5b8; width: 62%; padding-bottom: 64%; top: 39%; right: 39%; -webkit-border-top-right-radius: 1.4em; -moz-border-top-right-radius: 1.4em; border-top-right-radius: 1.4em; } .pylonRound .end{ display: block; position: absolute; background-color: #CACACA; width: 48%; padding-bottom: 23%; top: 79%; right: -4%; z-index: 9; } .pylonRound .end > .in{ display: block; position: absolute; background-color: #BEBEBE; width: 68%; padding-bottom: 59%; top: 0%; left: 0%; } .pylonRound .end + .end{ width: 30%; padding-bottom: 50%; top: -6%; left: 0%; } .pylonRound .end + .end > .in{ display: block; position: absolute; background-color: #BEBEBE; width: 100%; padding-bottom: 106%; top: 37%; left: 0%; } .contentPylonRound .separate{ display: block; position: absolute; background-color: #B3B3B3; width: 31%; padding-bottom: 2%; top: 66%; right: -2%; z-index: 12; } </style> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIUCxIKU2NyYXRjaHBhZBjv-LzuDAw
Votes	213
Spin-Offs	1
Type	WEBPAGE
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	⚡ ʙʟᴀᴄᴋʜᴀᴡᴋ⚡
Author Name	TravelingIsInMyBlood
Author ID	kaid_1110186072365210746831069
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739287330013
Updated	10 months ago, 1739287330013
Source Deleted	unknown