API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jul 27th, 2014
186
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.91 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3.  
  4. <script>
  5. <head><title>"My Website"</title>
  6. </script>
  7.  
  8. <style type='text/css'>
  9. h1, p {
  10. text-align: center;
  11. font-family: sans-serif;
  12. margin-bottom: 0;
  13. }
  14.  
  15. #trooper {
  16. width: 600px;
  17. height: 600px;
  18. margin: 0 auto;
  19. margin-top: 20px;
  20. position: relative;
  21. }
  22.  
  23. .border {
  24. border: 8px solid #000;
  25. background-color: #fff;
  26. }
  27.  
  28. #helmetTop {
  29. width: 355px;
  30. height: 385px;
  31. margin: 0 auto;
  32. margin-top: 10px;
  33. -webkit-border-radius: 175px 175px 60px 60px;
  34. -moz-border-radius: 175px 175px 60px 60px;
  35. border-radius: 175px 175px 60px 60px;
  36. position: relative;
  37. z-index: 2;
  38. }
  39.  
  40. #uniBrow {
  41. width: 385px;
  42. height: 25px;
  43. background-color: #000;
  44. position: absolute;
  45. z-index: 3;
  46. top: 170px;
  47. left: 107px;
  48. }
  49.  
  50. .ear {
  51. width: 16px;
  52. height: 90px;
  53. position: absolute;
  54. top: 205px;
  55. }
  56.  
  57. .qTip {
  58. height: 50px;
  59. width: 10px;
  60. background-color: #000;
  61. position: absolute;
  62. top: 235px;
  63. }
  64.  
  65. #lEar {
  66. left: 90px;
  67. }
  68.  
  69. #rEar {
  70. right: 90px;
  71. }
  72.  
  73. #lTip {
  74. left: 80px;
  75. }
  76.  
  77. #rTip {
  78. right: 80px;
  79. }
  80.  
  81. .eye {
  82. height: 65px;
  83. width: 128px;
  84. position: absolute;
  85. top: 210px;
  86. background-color: #000;
  87. z-index: 3;
  88. }
  89.  
  90. #leftEye {
  91. left: 140px;
  92. -webkit-border-radius: 50px 60px 160px 90px;
  93. -moz-border-radius: 50px 60px 160px 90px;
  94. border-radius: 50px 60px 160px 90px;
  95. }
  96.  
  97. #rightEye {
  98. right: 140px;
  99. -webkit-border-radius: 60px 50px 90px 160px;
  100. -moz-border-radius: 60px 50px 90px 160px;
  101. border-radius: 60px 50px 90px 160px;
  102. }
  103.  
  104. .inner {
  105. width: 136px;
  106. height: 40px;
  107. background-color: #fff;
  108. border: 5px solid white;
  109. position: absolute;
  110. top: 250px;
  111. -webkit-border-radius: 5px;
  112. -moz-border-radius: 5px;
  113. border-radius: 5px;
  114. z-index: 5;
  115. }
  116.  
  117. #innerL {
  118. -webkit-transform: rotate(-25deg);
  119. -moz-transform: rotate(-25deg);
  120. -o-transform: rotate(-25deg);
  121. -ms-transform: rotate(-25deg);
  122. transform: rotate(-25deg);
  123. left: 150px;
  124. }
  125.  
  126. #innerR {
  127. -webkit-transform: rotate(25deg);
  128. -moz-transform: rotate(25deg);
  129. -o-transform: rotate(25deg);
  130. -ms-transform: rotate(25deg);
  131. transform: rotate(25deg);
  132. right: 150px;
  133. }
  134.  
  135. #goatee {
  136. position: absolute;
  137. top: 460px;
  138. left: 252px;
  139. z-index: 6;
  140. }
  141.  
  142. #goatee div:nth-child(1) {
  143. height:10px;
  144. width: 15px;
  145. }
  146.  
  147. #goatee div:nth-child(2){
  148. height: 30px;
  149. width: 38px;
  150. }
  151.  
  152. #goatee div:nth-child(3){
  153. height: 20px;
  154. width: 70px;
  155. }
  156.  
  157. #goatee div:nth-child(4){
  158. height: 52px;
  159. width: 98px;
  160. }
  161.  
  162. #goatee div:nth-child(5){
  163. height: 16px;
  164. width: 33px;
  165. }
  166.  
  167. .cheek {
  168. height: 150px;
  169. width: 150px;
  170. position: absolute;
  171. top: 311px;
  172. -webkit-border-radius: 100px;
  173. -moz-border-radius: 100px;
  174. border-radius: 100px;
  175. z-index: 1;
  176. }
  177.  
  178. #lCheek {
  179. left: 30px;
  180. }
  181.  
  182. #rCheek {
  183. right: 30px;
  184. }
  185.  
  186. .cheekLine {
  187. font-family: "Arial Narrow", sans-serif;
  188. font-size: 120px;
  189. position: absolute;
  190. top: 370px;
  191. z-index: 3;
  192. }
  193.  
  194. #leftLine {
  195. left: 200px;
  196. -webkit-transform: rotate(-25deg);
  197. -moz-tranform: rotate(-25deg);
  198. -o-transform: rotate(-25deg);
  199. -ms-transform: rotate(-25deg);
  200. transform: rotate(-25deg);
  201. }
  202.  
  203. #rightLine {
  204. right: 200px;
  205. -webkit-transform: rotate(25deg);
  206. -moz-tranform: rotate(25deg);
  207. -o-transform: rotate(25deg);
  208. -ms-transform: rotate(25deg);
  209. transform: rotate(25deg);
  210. }
  211.  
  212. #upperMouth {
  213. height: 300px;
  214. width: 300px;
  215. position: absolute;
  216. top: 335px;
  217. left: 145px;
  218. background-color: transparent;
  219. -webkit-border-top-left-radius: 90px;
  220. -moz-border-radius-topleft: 90px;
  221. border-top-left-radius: 90px;
  222. -webkit-transform: rotate(45deg);
  223. -moz-transform: rotate(45deg);
  224. -ms-transform: rotate(45deg);
  225. -o-transform: rotate(45deg);
  226. transform: rotate(45deg);
  227. border-right: 0;
  228. border-bottom: 0;
  229. z-index: 2;
  230. }
  231.  
  232. .tooth {
  233. background-color: #000;
  234. width: 20px;
  235. position: absolute;
  236. z-index: 2;
  237. }
  238.  
  239. #l1 {
  240. top: 330px;
  241. left: 235px;
  242. height: 30px;
  243. -webkit-border-top-left-radius: 10px;
  244. -moz-border-radius-topleft: 10px;
  245. border-top-left-radius: 10px;
  246.  
  247. }
  248.  
  249. #l2 {
  250. top: 317px;
  251. left: 270px;
  252. height: 30px;
  253. }
  254.  
  255. #r2 {
  256. top: 318px;
  257. right: 270px;
  258. height: 31px;
  259. }
  260.  
  261. #r1 {
  262. top: 331px;
  263. right: 235px;
  264. height: 30px;
  265. -webkit-border-top-right-radius: 12px;
  266. -moz-border-radius-topright: 12px;
  267. border-top-right-radius: 12px;
  268.  
  269. }
  270.  
  271. #mouth {
  272. height: 300px;
  273. width: 300px;
  274. margin: 0 auto;
  275. margin-top: -60px;
  276. position: relative;
  277. border-bottom: 0;
  278. border-right: 0;
  279. -webkit-border-top-left-radius: 150px;
  280. -moz-border-radius-topleft: 150px;
  281. border-top-left-radius: 150px;
  282. -webkit-transform: rotate(45deg);
  283. -moz-transform: rotate(45deg);
  284. -o-transform: rotate(45deg);
  285. -ms-transform: rotate(45deg);
  286. transform: rotate(45deg);
  287. z-index: 2;
  288. }
  289.  
  290. #mouthCover {
  291. z-index: 3;
  292. background-color: #fff;
  293. position: absolute;
  294. top: 333px;
  295. left: 192px;
  296. height: 200px;
  297. width: 200px;
  298. border-color: #fff;
  299. -webkit-border-top-left-radius: 150px;
  300. -moz-border-radius-topleft: 150px;
  301. border-top-left-radius: 150px;
  302. -webkit-transform: rotate(45deg);
  303. -moz-transform: rotate(45deg);
  304. -o-transform: rotate(45deg);
  305. -ms-transform: rotate(45deg);
  306. transform: rotate(45deg);
  307. }
  308.  
  309. .chin {
  310. height: 200px;
  311. width: 170px;
  312. position: absolute;
  313. z-index: 2;
  314. top: 380px;
  315. }
  316.  
  317. #lChin {
  318. left: 90px;
  319. -webkit-border-radius: 75px 100px 75px 100px;
  320. -moz-border-radius: 75px 100px 75px 100px;
  321. border-radius: 75px 100px 75px 100px;
  322. -webkit-transform: rotate(-55deg);
  323. -moz-transform: rotate(-55deg);
  324. -o-transform: rotate(-55deg);
  325. -ms-transform: rotate(-55deg);
  326. transform: rotate(-55deg);
  327. }
  328.  
  329. #rChin {
  330. right: 89px;
  331. -webkit-border-radius: 100px 75px 100px 75px;
  332. -moz-border-radius: 100px 75px 100px 75px;
  333. border-radius: 100px 75px 100px 75px;
  334. -webkit-transform: rotate(55deg);
  335. -moz-transform: rotate(55deg);
  336. -ms-transform: rotate(55deg);
  337. -o-transform: rotate(55deg);
  338. transform: rotate(55deg);
  339. }
  340.  
  341. .dimple {
  342. background-color: #000;
  343. position: absolute;
  344. z-index: 5;
  345. top: 520px;
  346. height: 40px;
  347. width: 40px;
  348. -webkit-border-radius: 40px;
  349. -moz-border-radius: 40px;
  350. border-radius: 40px;
  351. }
  352.  
  353. #leftDimp {
  354. left: 180px;
  355. }
  356.  
  357. #rightDimp {
  358. right: 180px;
  359. }
  360.  
  361. .dimpleBase {
  362. height: 65px;
  363. width: 70px;
  364. -webkit-border-radius: 100px 200px 100px 200px;
  365. -moz-border-radius: 100px 200px 100px 200px;
  366. border-radius: 100px 200px 100px 200px;
  367. -webkit-transform: rotate(135deg);
  368. -moz-transform: rotate(135deg);
  369. -o-transform: rotate(135deg);
  370. -ms-transform: rotate(135deg);
  371. transform: rotate(135deg);
  372. position: absolute;
  373. z-index: 3;
  374. top: 499px;
  375. }
  376.  
  377. #leftBase {
  378. left: 157px;
  379. }
  380.  
  381. #rightBase {
  382. right: 157px;
  383. }
  384.  
  385. .slight {
  386. height: 35px;
  387. width: 40px;
  388. position: absolute;
  389. top: 515px;
  390. z-index: 4;
  391. border-top: 0;
  392. }
  393.  
  394. #leftSlight {
  395. left: 235px;
  396. border-left: 0;
  397. }
  398.  
  399. #rightSlight {
  400. right: 238px;
  401. border-right: 0;
  402. }
  403.  
  404. .vents {
  405. position: absolute;
  406. z-index: 4;
  407. top: 350px;
  408. }
  409.  
  410. .vents p {
  411. width: 7px;
  412. background-color: #000;
  413. margin-right: 5px;
  414. float: left;
  415.  
  416. }
  417.  
  418. #lvent p:first-child {
  419. height: 20px;
  420. }
  421.  
  422. #lvent p:nth-child(2) {
  423. height: 23px;
  424. }
  425.  
  426. #lvent p:nth-child(3) {
  427. height: 26px;
  428. }
  429.  
  430. #lvent p:nth-child(4) {
  431. height: 29px;
  432. }
  433.  
  434. #lvent p:nth-child(5) {
  435. height: 32px;
  436. }
  437.  
  438. #lvent p:nth-child(6) {
  439. height: 35px;
  440. }
  441.  
  442. #lvent p:last-child {
  443. height: 38px;
  444. }
  445.  
  446. #rvent p:last-child {
  447. height: 20px;
  448. }
  449.  
  450. #rvent p:nth-child(6) {
  451. height: 23px;
  452. }
  453.  
  454. #rvent p:nth-child(5) {
  455. height: 26px;
  456. }
  457.  
  458. #rvent p:nth-child(4) {
  459. height: 29px;
  460. }
  461.  
  462. #rvent p:nth-child(3) {
  463. height: 32px;
  464. }
  465.  
  466. #rvent p:nth-child(2) {
  467. height: 35px;
  468. }
  469.  
  470. #rvent p:first-child {
  471. height: 38px;
  472. }
  473.  
  474. #lvent {
  475. left: 50px;
  476. -webkit-transform: rotate(60deg);
  477. -moz-transform: rotate(60deg);
  478. -o-transform: rotate(60deg);
  479. -ms-transform: rotate(60deg);
  480. transform: rotate(60deg);
  481. }
  482.  
  483. #rvent {
  484. right: 50px;
  485. -webkit-transform: rotate(-60deg);
  486. -moz-transform: rotate(-60deg);
  487. -o-transform: rotate(-60deg);
  488. -ms-transform: rotate(-60deg);
  489. transform: rotate(-60deg);
  490.  
  491. }
  492.  
  493. i {
  494. font-weight:300;
  495. }
  496.  
  497. #nose {
  498. width: 105px;
  499. height: 105px;
  500. -webkit-border-top-left-radius: 40px;
  501. -moz-border-radius-topleft: 40px;
  502. border-top-left-radius: 40px;
  503. -webkit-transform: rotate(45deg);
  504. -moz-transform: rotate(45deg);
  505. -o-transform: rotate(45deg);
  506. -ms-transform: rotate(45deg);
  507. transform: rotate(45deg);
  508. position: absolute;
  509. z-index: 5;
  510. border-right-color: #fff;
  511. border-bottom-color: #fff;
  512. top: 453px;
  513. left: 241px;
  514. }
  515.  
  516. #goatee div {
  517. background-color: #000;
  518. margin: 0 auto;
  519. }
  520.  
  521. #fitty {
  522. height: 100%;
  523. width: 1px;
  524. background-color: red;
  525. position: absolute;
  526. z-index: 340;
  527. left: 50%;
  528. top: 0;
  529. }
  530. </style>
  531. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script></head>
  532. <body></script><!DOCTYPE HTML>
  533. <html lang="en-US">
  534. <head>
  535. <meta charset="UTF-8">
  536. <title>Imperial Storm Trooper | CSS Art By Kris Triplett</title>
  537. </head>
  538.  
  539. <link rel="stylesheet" href="css/trooper.css" />
  540. <!--
  541. An HTML/CSS Self-challenge by Kris Triplett, March 22, 2011
  542. -->
  543. <body>
  544.  
  545. <h1>JSPad ~ <i>With Syntax Highlighting</i></h1>
  546.  
  547. <div id="trooper">
  548. <div id="helmetTop" class="border"></div>
  549. <div id="uniBrow"></div>
  550. <div id="lEar" class="ear border"></div>
  551. <div id="rEar" class="ear border"></div>
  552. <div class="qTip" id="lTip"></div>
  553. <div class="qTip" id="rTip"></div>
  554. <div class="eye" id="leftEye"></div>
  555. <div class="inner" id="innerL"></div>
  556. <div class="bag" id="leftBag"></div>
  557. <div class="eye" id="rightEye"></div>
  558. <div class="inner" id="innerR"></div>
  559. <div class="bag" id="rightBag"></div>
  560. <div class="cheek border" id="lCheek"></div>
  561. <div class="cheek border" id="rCheek"></div>
  562. <div class="vents" id="lvent">
  563. <p class="1"></p>
  564. <p class="2"></p>
  565. <p class="3"></p>
  566. <p class="4"></p>
  567. <p class="5"></p>
  568. <p class="6"></p>
  569. </div>
  570. <div class="vents" id="rvent">
  571. <p class="6"></p>
  572. <p class="5"></p>
  573. <p class="4"></p>
  574. <p class="3"></p>
  575. <p class="2"></p>
  576. <p class="1"></p>
  577. </div>
  578.  
  579. <div class="border" id="upperMouth"></div>
  580. <div class="tooth" id="l1"></div>
  581. <div class="tooth" id="l2"></div>
  582. <div class="tooth" id="r2"></div>
  583. <div class="tooth" id="r1"></div>
  584. <div id="mouth" class="border"></div>
  585. <div id="mouthCover" class="border"></div>
  586. <div class="cheekLine" id="leftLine">)</div>
  587. <div class="cheekLine" id="rightLine">(</div>
  588. <div class="chin border" id="lChin"></div>
  589. <div class="chin border" id="rChin"></div>
  590. <div id="nose" class="border"></div>
  591.  
  592. <div class="dimpleBase border" id="leftBase"></div>
  593. <div class="slight border" id="leftSlight"></div>
  594. <div class="slight border" id="rightSlight"></div>
  595. <div class="dimpleBase border" id="rightBase"></div>
  596. <div class="dimple" id="leftDimp"></div>
  597. <div class="dimple" id="rightDimp"></div>
  598. <div id="goatee">
  599. <div></div>
  600. <div></div>
  601. <div></div>
  602. <div></div>
  603. <div></div>
  604. </div>
  605. </div>
  606. </body>
  607. </html>
  608. </body>
  609. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!