Skip to content

Instantly share code, notes, and snippets.

/JSPad.html

Created October 16, 2014 19:44
Show Gist options
  • Save anonymous/e78e4a2c6b2adab979e6 to your computer and use it in GitHub Desktop.
Save anonymous/e78e4a2c6b2adab979e6 to your computer and use it in GitHub Desktop.
Download ZIP
A JSpad.
Raw
JSPad.html
<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