Created
October 16, 2014 19:44
-
-
Save anonymous/e78e4a2c6b2adab979e6 to your computer and use it in GitHub Desktop.
A JSpad.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <script> | |
| </script> | |
| <style type='text/css'> | |
| h1, p { | |
| text-align: center; | |
| font-family: sans-serif; | |
| margin-bottom: 0; | |
| } | |
| #trooper { | |
| width: 600px; | |
| height: 600px; | |
| margin: 0 auto; | |
| margin-top: 20px; | |
| position: relative; | |
| } | |
| .border { | |
| border: 8px solid #000; | |
| background-color: #fff; | |
| } | |
| #helmetTop { | |
| width: 355px; | |
| height: 385px; | |
| margin: 0 auto; | |
| margin-top: 10px; | |
| -webkit-border-radius: 175px 175px 60px 60px; | |
| -moz-border-radius: 175px 175px 60px 60px; | |
| border-radius: 175px 175px 60px 60px; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| #uniBrow { | |
| width: 385px; | |
| height: 25px; | |
| background-color: #000; | |
| position: absolute; | |
| z-index: 3; | |
| top: 170px; | |
| left: 107px; | |
| } | |
| .ear { | |
| width: 16px; | |
| height: 90px; | |
| position: absolute; | |
| top: 205px; | |
| } | |
| .qTip { | |
| height: 50px; | |
| width: 10px; | |
| background-color: #000; | |
| position: absolute; | |
| top: 235px; | |
| } | |
| #lEar { | |
| left: 90px; | |
| } | |
| #rEar { | |
| right: 90px; | |
| } | |
| #lTip { | |
| left: 80px; | |
| } | |
| #rTip { | |
| right: 80px; | |
| } | |
| .eye { | |
| height: 65px; | |
| width: 128px; | |
| position: absolute; | |
| top: 210px; | |
| background-color: #000; | |
| z-index: 3; | |
| } | |
| #leftEye { | |
| left: 140px; | |
| -webkit-border-radius: 50px 60px 160px 90px; | |
| -moz-border-radius: 50px 60px 160px 90px; | |
| border-radius: 50px 60px 160px 90px; | |
| } | |
| #rightEye { | |
| right: 140px; | |
| -webkit-border-radius: 60px 50px 90px 160px; | |
| -moz-border-radius: 60px 50px 90px 160px; | |
| border-radius: 60px 50px 90px 160px; | |
| } | |
| .inner { | |
| width: 136px; | |
| height: 40px; | |
| background-color: #fff; | |
| border: 5px solid white; | |
| position: absolute; | |
| top: 250px; | |
| -webkit-border-radius: 5px; | |
| -moz-border-radius: 5px; | |
| border-radius: 5px; | |
| z-index: 5; | |
| } | |
| #innerL { | |
| -webkit-transform: rotate(-25deg); | |
| -moz-transform: rotate(-25deg); | |
| -o-transform: rotate(-25deg); | |
| -ms-transform: rotate(-25deg); | |
| transform: rotate(-25deg); | |
| left: 150px; | |
| } | |
| #innerR { | |
| -webkit-transform: rotate(25deg); | |
| -moz-transform: rotate(25deg); | |
| -o-transform: rotate(25deg); | |
| -ms-transform: rotate(25deg); | |
| transform: rotate(25deg); | |
| right: 150px; | |
| } | |
| #goatee { | |
| position: absolute; | |
| top: 460px; | |
| left: 252px; | |
| z-index: 6; | |
| } | |
| #goatee div:nth-child(1) { | |
| height:10px; | |
| width: 15px; | |
| } | |
| #goatee div:nth-child(2){ | |
| height: 30px; | |
| width: 38px; | |
| } | |
| #goatee div:nth-child(3){ | |
| height: 20px; | |
| width: 70px; | |
| } | |
| #goatee div:nth-child(4){ | |
| height: 52px; | |
| width: 98px; | |
| } | |
| #goatee div:nth-child(5){ | |
| height: 16px; | |
| width: 33px; | |
| } | |
| .cheek { | |
| height: 150px; | |
| width: 150px; | |
| position: absolute; | |
| top: 311px; | |
| -webkit-border-radius: 100px; | |
| -moz-border-radius: 100px; | |
| border-radius: 100px; | |
| z-index: 1; | |
| } | |
| #lCheek { | |
| left: 30px; | |
| } | |
| #rCheek { | |
| right: 30px; | |
| } | |
| .cheekLine { | |
| font-family: "Arial Narrow", sans-serif; | |
| font-size: 120px; | |
| position: absolute; | |
| top: 370px; | |
| z-index: 3; | |
| } | |
| #leftLine { | |
| left: 200px; | |
| -webkit-transform: rotate(-25deg); | |
| -moz-tranform: rotate(-25deg); | |
| -o-transform: rotate(-25deg); | |
| -ms-transform: rotate(-25deg); | |
| transform: rotate(-25deg); | |
| } | |
| #rightLine { | |
| right: 200px; | |
| -webkit-transform: rotate(25deg); | |
| -moz-tranform: rotate(25deg); | |
| -o-transform: rotate(25deg); | |
| -ms-transform: rotate(25deg); | |
| transform: rotate(25deg); | |
| } | |
| #upperMouth { | |
| height: 300px; | |
| width: 300px; | |
| position: absolute; | |
| top: 335px; | |
| left: 145px; | |
| background-color: transparent; | |
| -webkit-border-top-left-radius: 90px; | |
| -moz-border-radius-topleft: 90px; | |
| border-top-left-radius: 90px; | |
| -webkit-transform: rotate(45deg); | |
| -moz-transform: rotate(45deg); | |
| -ms-transform: rotate(45deg); | |
| -o-transform: rotate(45deg); | |
| transform: rotate(45deg); | |
| border-right: 0; | |
| border-bottom: 0; | |
| z-index: 2; | |
| } | |
| .tooth { | |
| background-color: #000; | |
| width: 20px; | |
| position: absolute; | |
| z-index: 2; | |
| } | |
| #l1 { | |
| top: 330px; | |
| left: 235px; | |
| height: 30px; | |
| -webkit-border-top-left-radius: 10px; | |
| -moz-border-radius-topleft: 10px; | |
| border-top-left-radius: 10px; | |
| } | |
| #l2 { | |
| top: 317px; | |
| left: 270px; | |
| height: 30px; | |
| } | |
| #r2 { | |
| top: 318px; | |
| right: 270px; | |
| height: 31px; | |
| } | |
| #r1 { | |
| top: 331px; | |
| right: 235px; | |
| height: 30px; | |
| -webkit-border-top-right-radius: 12px; | |
| -moz-border-radius-topright: 12px; | |
| border-top-right-radius: 12px; | |
| } | |
| #mouth { | |
| height: 300px; | |
| width: 300px; | |
| margin: 0 auto; | |
| margin-top: -60px; | |
| position: relative; | |
| border-bottom: 0; | |
| border-right: 0; | |
| -webkit-border-top-left-radius: 150px; | |
| -moz-border-radius-topleft: 150px; | |
| border-top-left-radius: 150px; | |
| -webkit-transform: rotate(45deg); | |
| -moz-transform: rotate(45deg); | |
| -o-transform: rotate(45deg); | |
| -ms-transform: rotate(45deg); | |
| transform: rotate(45deg); | |
| z-index: 2; | |
| } | |
| #mouthCover { | |
| z-index: 3; | |
| background-color: #fff; | |
| position: absolute; | |
| top: 333px; | |
| left: 192px; | |
| height: 200px; | |
| width: 200px; | |
| border-color: #fff; | |
| -webkit-border-top-left-radius: 150px; | |
| -moz-border-radius-topleft: 150px; | |
| border-top-left-radius: 150px; | |
| -webkit-transform: rotate(45deg); | |
| -moz-transform: rotate(45deg); | |
| -o-transform: rotate(45deg); | |
| -ms-transform: rotate(45deg); | |
| transform: rotate(45deg); | |
| } | |
| .chin { | |
| height: 200px; | |
| width: 170px; | |
| position: absolute; | |
| z-index: 2; | |
| top: 380px; | |
| } | |
| #lChin { | |
| left: 90px; | |
| -webkit-border-radius: 75px 100px 75px 100px; | |
| -moz-border-radius: 75px 100px 75px 100px; | |
| border-radius: 75px 100px 75px 100px; | |
| -webkit-transform: rotate(-55deg); | |
| -moz-transform: rotate(-55deg); | |
| -o-transform: rotate(-55deg); | |
| -ms-transform: rotate(-55deg); | |
| transform: rotate(-55deg); | |
| } | |
| #rChin { | |
| right: 89px; | |
| -webkit-border-radius: 100px 75px 100px 75px; | |
| -moz-border-radius: 100px 75px 100px 75px; | |
| border-radius: 100px 75px 100px 75px; | |
| -webkit-transform: rotate(55deg); | |
| -moz-transform: rotate(55deg); | |
| -ms-transform: rotate(55deg); | |
| -o-transform: rotate(55deg); | |
| transform: rotate(55deg); | |
| } | |
| .dimple { | |
| background-color: #000; | |
| position: absolute; | |
| z-index: 5; | |
| top: 520px; | |
| height: 40px; | |
| width: 40px; | |
| -webkit-border-radius: 40px; | |
| -moz-border-radius: 40px; | |
| border-radius: 40px; | |
| } | |
| #leftDimp { | |
| left: 180px; | |
| } | |
| #rightDimp { | |
| right: 180px; | |
| } | |
| .dimpleBase { | |
| height: 65px; | |
| width: 70px; | |
| -webkit-border-radius: 100px 200px 100px 200px; | |
| -moz-border-radius: 100px 200px 100px 200px; | |
| border-radius: 100px 200px 100px 200px; | |
| -webkit-transform: rotate(135deg); | |
| -moz-transform: rotate(135deg); | |
| -o-transform: rotate(135deg); | |
| -ms-transform: rotate(135deg); | |
| transform: rotate(135deg); | |
| position: absolute; | |
| z-index: 3; | |
| top: 499px; | |
| } | |
| #leftBase { | |
| left: 157px; | |
| } | |
| #rightBase { | |
| right: 157px; | |
| } | |
| .slight { | |
| height: 35px; | |
| width: 40px; | |
| position: absolute; | |
| top: 515px; | |
| z-index: 4; | |
| border-top: 0; | |
| } | |
| #leftSlight { | |
| left: 235px; | |
| border-left: 0; | |
| } | |
| #rightSlight { | |
| right: 238px; | |
| border-right: 0; | |
| } | |
| .vents { | |
| position: absolute; | |
| z-index: 4; | |
| top: 350px; | |
| } | |
| .vents p { | |
| width: 7px; | |
| background-color: #000; | |
| margin-right: 5px; | |
| float: left; | |
| } | |
| #lvent p:first-child { | |
| height: 20px; | |
| } | |
| #lvent p:nth-child(2) { | |
| height: 23px; | |
| } | |
| #lvent p:nth-child(3) { | |
| height: 26px; | |
| } | |
| #lvent p:nth-child(4) { | |
| height: 29px; | |
| } | |
| #lvent p:nth-child(5) { | |
| height: 32px; | |
| } | |
| #lvent p:nth-child(6) { | |
| height: 35px; | |
| } | |
| #lvent p:last-child { | |
| height: 38px; | |
| } | |
| #rvent p:last-child { | |
| height: 20px; | |
| } | |
| #rvent p:nth-child(6) { | |
| height: 23px; | |
| } | |
| #rvent p:nth-child(5) { | |
| height: 26px; | |
| } | |
| #rvent p:nth-child(4) { | |
| height: 29px; | |
| } | |
| #rvent p:nth-child(3) { | |
| height: 32px; | |
| } | |
| #rvent p:nth-child(2) { | |
| height: 35px; | |
| } | |
| #rvent p:first-child { | |
| height: 38px; | |
| } | |
| #lvent { | |
| left: 50px; | |
| -webkit-transform: rotate(60deg); | |
| -moz-transform: rotate(60deg); | |
| -o-transform: rotate(60deg); | |
| -ms-transform: rotate(60deg); | |
| transform: rotate(60deg); | |
| } | |
| #rvent { | |
| right: 50px; | |
| -webkit-transform: rotate(-60deg); | |
| -moz-transform: rotate(-60deg); | |
| -o-transform: rotate(-60deg); | |
| -ms-transform: rotate(-60deg); | |
| transform: rotate(-60deg); | |
| } | |
| i { | |
| font-weight:300; | |
| } | |
| #nose { | |
| width: 105px; | |
| height: 105px; | |
| -webkit-border-top-left-radius: 40px; | |
| -moz-border-radius-topleft: 40px; | |
| border-top-left-radius: 40px; | |
| -webkit-transform: rotate(45deg); | |
| -moz-transform: rotate(45deg); | |
| -o-transform: rotate(45deg); | |
| -ms-transform: rotate(45deg); | |
| transform: rotate(45deg); | |
| position: absolute; | |
| z-index: 5; | |
| border-right-color: #fff; | |
| border-bottom-color: #fff; | |
| top: 453px; | |
| left: 241px; | |
| } | |
| #goatee div { | |
| background-color: #000; | |
| margin: 0 auto; | |
| } | |
| #fitty { | |
| height: 100%; | |
| width: 1px; | |
| background-color: red; | |
| position: absolute; | |
| z-index: 340; | |
| left: 50%; | |
| top: 0; | |
| } | |
| </style> | |
| <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script></head> | |
| <body></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment