Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <script>
- <html>
- <head>
- <title> what ever you want<title>
- </head>
- <body>
- <!... hello there every one...>
- <marquee align=center> hello world</marquee>
- </body>
- </html>
- </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><!DOCTYPE HTML>
- <html lang="en-US">
- <head>
- <meta charset="UTF-8">
- <title>Imperial Storm Trooper | CSS Art By Kris Triplett</title>
- </head>
- <link rel="stylesheet" href="css/trooper.css" />
- <!--
- An HTML/CSS Self-challenge by Kris Triplett, March 22, 2011
- -->
- <body>
- <h1>JSPad ~ <i>With Syntax Highlighting</i></h1>
- <div id="trooper">
- <div id="helmetTop" class="border"></div>
- <div id="uniBrow"></div>
- <div id="lEar" class="ear border"></div>
- <div id="rEar" class="ear border"></div>
- <div class="qTip" id="lTip"></div>
- <div class="qTip" id="rTip"></div>
- <div class="eye" id="leftEye"></div>
- <div class="inner" id="innerL"></div>
- <div class="bag" id="leftBag"></div>
- <div class="eye" id="rightEye"></div>
- <div class="inner" id="innerR"></div>
- <div class="bag" id="rightBag"></div>
- <div class="cheek border" id="lCheek"></div>
- <div class="cheek border" id="rCheek"></div>
- <div class="vents" id="lvent">
- <p class="1"></p>
- <p class="2"></p>
- <p class="3"></p>
- <p class="4"></p>
- <p class="5"></p>
- <p class="6"></p>
- </div>
- <div class="vents" id="rvent">
- <p class="6"></p>
- <p class="5"></p>
- <p class="4"></p>
- <p class="3"></p>
- <p class="2"></p>
- <p class="1"></p>
- </div>
- <div class="border" id="upperMouth"></div>
- <div class="tooth" id="l1"></div>
- <div class="tooth" id="l2"></div>
- <div class="tooth" id="r2"></div>
- <div class="tooth" id="r1"></div>
- <div id="mouth" class="border"></div>
- <div id="mouthCover" class="border"></div>
- <div class="cheekLine" id="leftLine">)</div>
- <div class="cheekLine" id="rightLine">(</div>
- <div class="chin border" id="lChin"></div>
- <div class="chin border" id="rChin"></div>
- <div id="nose" class="border"></div>
- <div class="dimpleBase border" id="leftBase"></div>
- <div class="slight border" id="leftSlight"></div>
- <div class="slight border" id="rightSlight"></div>
- <div class="dimpleBase border" id="rightBase"></div>
- <div class="dimple" id="leftDimp"></div>
- <div class="dimple" id="rightDimp"></div>
- <div id="goatee">
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- </div>
- </div>
- </body>
- </html>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement