API tools faq
paste
Advertisement
dandyraka

Batman Logo in Text

dandyraka
Oct 17th, 2015
154
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 11.41 KB | None | 0 0
raw download clone embed print report
  1.  
  2.  
  3. <!DOCTYPE html>
  4. <html >
  5.   <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="google" value="notranslate">
  8.  
  9.  
  10.     <title>CodePen - Batman logo in text</title>
  11.    
  12.    
  13.    
  14.    
  15.         <style>
  16.       html {
  17.   font-family: helvetica;
  18.   -webkit-text-size-adjust: 100%;
  19.       -ms-text-size-adjust: 100%;
  20. }
  21. body {
  22.   margin: 0;
  23. }
  24. div {
  25.     display: inline-block;
  26. }
  27. .lazarus-pit {
  28.   white-space:nowrap;
  29.     text-align: center;
  30.     margin-top: 10%;
  31.     display: block;
  32. }
  33. .penguin {
  34.     color:#fcfcfc;
  35. }
  36. .vicki-vale {
  37.     color:#dbdada;
  38. }
  39. .cash {
  40.     color:#cecccc;
  41. }
  42. .superman {
  43.     color:#bfbcbc;
  44. }
  45. .manhunter {
  46.     color:#bfbdbd;
  47. }
  48. .hawkman {
  49.     color:#bebbbb;
  50. }
  51. .lantern {
  52.     color:#bab7b7;
  53. }
  54. .arrow {
  55.     color:#e3e2e2;
  56. }
  57. .grange {
  58.     color:#ffffff;
  59. }
  60. .flash {
  61.     color:#e8e7e7;
  62. }
  63. .marion {
  64.     color:#b8b5b5;
  65. }
  66. .zucco {
  67.     color:#b6b4b4;
  68. }
  69. .tony {
  70.     color:#b7b4b4;
  71. }
  72. .maxie {
  73.     color:#b6b4b3;
  74. }
  75. .zeus {
  76.     color:#c9c7c7;
  77. }
  78. .wrath {
  79.     color:#d6d3d3;
  80. }
  81. .ventriloquist {
  82.     color:#f9f8f8;
  83. }
  84. .toyman {
  85.     color:#e2e1e1;
  86. }
  87. .toymaker {
  88.     color:#a3a0a0;
  89. }
  90. .rupert {
  91.     color:#726e6e;
  92. }
  93. .thorne {
  94.     color:#423d3d;
  95. }
  96. .terrible {
  97.     color:#150f0f;
  98. }
  99. .trio {
  100.     color:#060000;
  101. }
  102. .temblor {
  103.     color:#393333;
  104. }
  105. .hugo {
  106.     color:#f0f0f0;
  107. }
  108. .strange {
  109.     color:#f6f5f5;
  110. }
  111. .spellbinder {
  112.     color:#f4f4f4;
  113. }
  114. .solomon {
  115.     color:#433e3e;
  116. }
  117. .grundy {
  118.     color:#332d2d;
  119. }
  120. .smoke {
  121.     color:#635f5f;
  122. }
  123. .sinestro {
  124.     color:#989595;
  125. }
  126. .shadow {
  127.     color:#c6c4c4;
  128. }
  129. .thief {
  130.     color:#e4e3e3;
  131. }
  132. .scorn {
  133.     color:#f9f9f9;
  134. }
  135. .bat-one {
  136.     color:#e9e9e9;
  137. }
  138. .rumor {
  139.     color:#615c5c;
  140. }
  141. .bat-two {
  142.     color:#161010;
  143. }
  144. .bat-three {
  145.     color:#514b4b;
  146. }
  147. .bat-four {
  148.     color:#cdcbcb;
  149. }
  150. .bat-five {
  151.     color:#f0efef;
  152. }
  153. .bat-six {
  154.     color:#fbfbfb;
  155. }
  156. .riddler {
  157.     color:#fefefe;
  158. }
  159. .bat-seven {
  160.     color:#2a2424;
  161. }
  162. .rumor {
  163.     color:#615c5c;
  164. }
  165. .bat-eight {
  166.     color:#706c6c;
  167. }
  168. .bat-nine {
  169.     color:#5d5959;
  170. }
  171. .riddlemen {
  172.     color:#262020;
  173. }
  174. .bat-ten {
  175.     color:#c4c1c1;
  176. }
  177. .rhino {
  178.     color:#fdfdfd;
  179. }
  180. .bat-eleven {
  181.     color:#fafafa;
  182. }
  183. .bat-twelve {
  184.     color:#f1f0f0;
  185. }
  186. .bat-thirteen {
  187.     color:#dcdbdb;
  188. }
  189. .bat-fourteen {
  190.     color:#0e0808;
  191. }
  192. .bat-fifteen {
  193.     color:#423c3c;
  194. }
  195. .bat-sixteen {
  196.     color:#949191;
  197. }
  198. .bat-seventeen {
  199.     color:#dbd9d9;
  200. }
  201. .mugsy {
  202.     color:#767272;
  203. }
  204. .bat-eighteen {
  205.     color:#0f0909;
  206. }
  207. .ragdoll {
  208.     color:#120c0c;
  209. }
  210. .bat-nineteen {
  211.     color:#494444;
  212. }
  213. .bat-twenty {
  214.     color:#5c5757;
  215. }
  216. .bat-twentyone {
  217.     color:#6a6666;
  218. }
  219. .bat-twentytwo {
  220.     color:#d3d1d1;
  221. }
  222. .bat-twentythree {
  223.     color:#aca8a8;
  224. }
  225. .bat-twenty-four {
  226.     color:#0a0303;
  227. }
  228. .bat-twentyfive {
  229.     color:#251f1f;
  230. }
  231. .bat-twentysix {
  232.     color:#5d5858;
  233. }
  234. .punch {
  235.     color:#080101;
  236. }
  237. .judy {
  238.     color:#cecbcb;
  239. }
  240. .prank {
  241.     color:#858080;
  242. }
  243. .poison-ivy {
  244.   color: #858080;
  245. }
  246. .mercy-graves {
  247.   color: #0d0707;
  248. }
  249. .mister-freeze {
  250.     color:#a3a09f;
  251. }
  252. .mirror-master {
  253.     color:#736f6f;
  254. }
  255. .mettalo {
  256.     color:#747171;
  257. }
  258. .marty {
  259.     color:#6f6b6b;
  260. }
  261. .man-bat {
  262.     color:#696464;
  263. }
  264. .lex-luthor {
  265.     color:#5e5a5a;
  266. }
  267. .killer-moth {
  268.     color:#585454;
  269. }
  270. .killer-croc {
  271.     color:#4e4949;
  272. }
  273. .hideto-katsu {
  274.     color:#413c3c;
  275. }
  276. .kabuki-twins {
  277.     color:#332e2e;
  278. }
  279. .joker-v2 {
  280.     color:#231d1d;
  281. }
  282. .the-joining {
  283.     color:#0d0707;
  284. }
  285. .harley-quinn {
  286.     color:#080202;
  287. }
  288. .francis-grey {
  289.     color:#0b0505;
  290. }
  291. .gearhead {
  292.     color:#383232;
  293. }
  294. .firefly {
  295.     color:#464141;
  296. }
  297. .everywhere-man {
  298.     color:#524d4d;
  299. }
  300. .dracula {
  301.     color:#656161;
  302. }
  303. .dave {
  304.     color:#6b6767;
  305. }
  306. .count-vertigo {
  307.     color:#716d6d;
  308. }
  309. .cluemaster {
  310.     color:#787373;
  311. }
  312. .clayface {
  313.     color:#edecec;
  314. }
  315. .catwoman {
  316.     color:#bcbaba;
  317. }
  318. .blaze {
  319.     color:#9d9b9b;
  320. }
  321. .black-mask {
  322.     color:#797575;
  323. }
  324. .alfred {
  325.     color:#504b4b;
  326. }
  327. .ellen-yin {
  328.     color:#2c2626;
  329. }
  330. .chief-angel {
  331.     color:#130d0d;
  332. }
  333. .nightwish {
  334.     color:#090303;
  335. }
  336. .dick-grayson {
  337.     color:#221c1c;
  338. }
  339. .robin {
  340.     color:#b9b6b6;
  341. }
  342. .james-gordon {
  343.     color:#eeecec;
  344. }
  345. .barbara-gordon {
  346.     color:#fefdfd;
  347. }
  348. .batgirl {
  349.     color:#f3f2f2;
  350. }
  351. .bat-30 {
  352.     color:#a5a2a2;
  353. }
  354. .bat-31 {
  355.     color:#5f5a5a;
  356. }
  357. .bat-32 {
  358.     color:#2b2525;
  359. }
  360. .bat-33 {
  361.     color:#c1bfbf;
  362. }
  363. .bat-34 {
  364.     color:#e8e6e6;
  365. }
  366. .bat-35 {
  367.     color:#eeeded;
  368. }
  369. .bat-36 {
  370.     color:#9d9a9a;
  371. }
  372. .bat-37 {
  373.     color:#070101;
  374. }
  375. .bat-38 {
  376.     color:#afacac;
  377. }
  378. .bat-39 {
  379.     color:#8a8585;
  380. }
  381. .bat-40 {
  382.     color:#100909;
  383. }
  384. .bat-41 {
  385.     color:#6c6767;
  386. }
  387. .bat-42 {
  388.     color: #F4F1F1;
  389. }
  390.     </style>
  391.  
  392.     <script>
  393.   window.console = window.console || function(t) {};
  394. </script>
  395.  
  396.    
  397.    
  398.   </head>
  399.  
  400.   <body>
  401.  
  402.     <!--
  403. \        /|   |\   /   /~~  /~~\    /~~ |~~ |~~\| /~~\ |   |/~~
  404.  \  /\  / |---| \ /    |__ |    |   |__ |-- |__/||    ||   ||__
  405.   \/  \/  |   |  |     ___| \__/    ___||__ |  \| \__/  \_/ ___|
  406. -->
  407. <html lang="en">
  408. <head>
  409.     <meta charset="UTF-8">
  410.     <title>Why So Serious</title>
  411. </head>
  412. <body>
  413.  
  414.     <div class="lazarus-pit">
  415.         <div class="penguin">W</div><div class="vicki-vale">H</div><div class="cash">Y</div><div class="superman">S</div><div class="manhunter">O</div> <div class="superman">SERIOUS?</div> <div class="hawkman">WHY SO SERIO</div><div class="lantern">U</div><div class="arrow">S</div> <div class="grange">? WHY SO SERIOUS? WHY SO SE</div><div class="flash">R</div><div class="marion">I</div><div class="zucco">OUS? WHY SO SE</div><div class="tony">RIOUS? W</div><div class="zucco">H</div><div class="maxie">Y</div><div class="zeus">S</div><div class="wrath">O</div> <br> <!-- 1 -->
  416.  
  417.         <div class="grange">S</div><div class="ventriloquist">E</div><div class="toyman">R</div><div class="zeus">I</div><div class="toymaker">O</div><div class="rupert">U</div><div class="thorne">S</div><div class="terrible">?</div> <div class="trio">WHY SO SERIOUS? WHY</div> <div class="temblor">S</div><div class="hugo">O</div> <div class="grange">SERIOUS?</div><div class="strange">W</div><div class="grange">HY</div> <div class="spellbinder">S</div><div class="grange">O SERIOUS?</div><div class="solomon">W</div><div class="trio">HY SO SERIOUS? WHY SO</div><div class="grundy">S</div><div class="smoke">E</div><div class="sinestro">R</div><div class="shadow">I</div><div class="thief">O</div><div class="penguin">U</div><div class="grange">S</div> <br><!-- 2 -->
  418.  
  419.         <div class="grange">? WHY</div> <div class="scorn">S</div><div class="bat-one">O</div><div class="rumor">S</div><div class="bat-two">E</div><div class="trio">RIOUS? WHY SO SERIO</div><div class="bat-three">U</div><div class="bat-four">S</div><div class="bat-five">?</div><div class="bat-six">W</div><div class="riddler">H</div><div class="grange">Y SO</div><div class="bat-seven">S</div><div class="rumor">E</div><div class="bat-eight">R</div><div class="bat-nine">I</div><div class="riddlemen">O</div><div class="bat-ten">U</div><div class="grange">S? W</div><div class="rhino">H</div><div class="bat-eleven">Y</div><div class="bat-twelve">S</div><div class="bat-thirteen">O</div><div class="trio">SERIOUS? WHY SO SER</div><div class="bat-fourteen">I</div><div class="bat-fifteen">O</div><div class="bat-sixteen">U</div><div class="bat-seventeen">S</div><div class="spellbinder">?</div> <div class="grange">WHY S</div><br><!-- 3 -->
  420.  
  421.         <div class="grange">O SERIOUS?</div><div class="mugsy">W</div><div class="bat-eighteen">H</div><div class="trio">Y SO SERIOUS? WHY S</div><div class="ragdoll">O</div><div class="bat-nineteen">S</div><div class="bat-twenty">E</div><div class="trio">RIOUS? WHYSOSERIOUS? WHY SO SERIOUS?</div><div class="bat-twentyone">W</div><div class="bat-twentytwo">H</div><div class="grange">Y SO SERIO</div><br><!-- 4 -->
  422.  
  423.         <div class="grange">US? WHY SO</div> <div class="riddler">S</div><div class="bat-twentythree">E</div><div class="bat-twenty-four">R</div><div class="trio">IOUS? WHY SO SERIOUS?</div> <div class="joker">WHY SO SERIOUS?</div> <div class="trio">WHY SO SERIOUS? WHY S</div><div class="bat-twentyfive">O</div><div class="riddler">S</div><div class="grange">ERIOUS? WHY</div><br><!-- 5 -->
  424.  
  425.         <div class="grange">SO SERIOUS?</div> <div class="bat-twentysix">W</div><div class="trio">HY SO SERIOUS? WHY SO SERIOUS? WHY SO SERIOUS? WHY SO SERI</div><div class="punch">O</div><div class="judy">U</div><div class="grange">S? WHY SO SER</div><br><!-- 6 -->
  426.  
  427.         <div class="grange">IOUS?WHY SO</div> <div class="prank">S</div><div class="trio">ERIOUS?WHYSO SERIOUS? WHY SO SERIOUS? WHY SO SERIOUS? WH</div><div class="poison-ivy">Y</div><div class="grange">SO SERIOUS?W</div><br>
  428.  
  429.  
  430.         <div class="grange">HY SO SERIOUS</div><div class="mister-freeze">?</div><div class="rupert">W</div><div class="mirror-master">H</div><div class="mettalo">Y</div><div class="marty">S</div><div class="man-bat">O</div><div class="lex-luthor">S</div><div class="killer-moth">E</div><div class="killer-croc">R</div><div class="hideto-katsu">I</div><div class="kabuki-twins">O</div><div class="joker-v2">U</div><div class="ragdoll">S</div><div class="the-joining">?</div><div class="harley-quinn">W</div><div class="trio">HY SO SERIOUS? WHY SO</div> <div class="harley-quinn">S</div><div class="francis-grey">E</div><div class="the-joining">R</div><div class="mercy-graves">I</div><div class="riddlemen">O</div><div class="gearhead">U</div><div class="firefly">S</div><div class="everywhere-man">?</div><div class="dracula">W</div><div class="dave">H</div><div class="count-vertigo">Y</div><div class="mugsy">S</div><div class="cluemaster">O</div> <div class="mugsy">S</div><div class="mettalo">E</div><div class="mirror-master">R</div><div class="arrow">I</div><div class="grange">OUS? WHY SO S</div><br><!-- 8 -->
  431.  
  432.  
  433.         <div class="grange">ERIOUS? WHY SO SERIOUS? WHY</div> <div class="rhino">S</div><div class="clayface">O</div><div class="catwoman">S</div><div class="blaze">E</div><div class="black-mask">R</div><div class="alfred">I</div><div class="ellen-yin">O</div><div class="chief-angel">U</div><div class="trio">S? WHY SO SE</div><div class="nightwish">R</div><div class="dick-grayson">I</div><div class="thorne">O</div><div class="marty">U</div><div class="sinestro">S</div><div class="robin">?</div><div class="james-gordon">W</div><div class="barbara-gordon">H</div><div class="grange">Y SO SERIOUS? WHY SO SERIOUS?</div><br><!-- 9 -->
  434.  
  435.         <div class="grange">WHY SO SERIOUS? WHY SO SERIOUS? WH</div><div class="batgirl">Y</div><div class="bat-30">S</div><div class="bat-31">O</div><div class="trio">SERIOUS</div><div class="bat-32">?</div><div class="bat-33">W</div><div class="bat-34">H</div><div class="barbara-gordon">Y</div><div class="grange"> SO SERIOUS? WHY SO SERIOUS? WHY SO</div><br><!-- 10 -->
  436.  
  437.         <div class="grange">SERIOUS? WHY SO SERIOUS? WHY SO SERIO</div><div class="rhino">U</div><div class="bat-35">S</div><div class="bat-36">?</div><div class="harley-quinn">W</div><div class="trio">H</div><div class="bat-37">Y</div><div class="bat-38">S</div><div class="bat-35">O</div><div class="grange"> SERIOUS? WHY SO SERIOUS? WHY SO SERIOU</div><br><!-- 11 -->
  438.  
  439.         <div class="grange">S? WHY SO SERIOUS? WHY SO SERIOUS? WHY SO</div><div class="bat-39">S</div><div class="bat-40">E</div><div class="bat-41">R</div><div class="batgirl">I</div><div class="grange">OUS? WHY SO SERIOUS? WHY SO SERIOUS? WHY</div> <br><!-- 12 -->
  440.  
  441.         <div class="grange">SO SERIOUS?WHY SO SERIOUS? WHYSOSERIOUS</div><div class="riddler">?</div><div><div class="bat-42">W</div></div><div class="grange">HY SO SERIOUS? WHY SO SERIOUS? WHY SO SERI</div><br><!-- 13 -->
  442.     </div>
  443.  
  444. </body>
  445. </html>
  446.    
  447.    
  448.    
  449.    
  450.     <script>
  451.   if (document.location.search.match(/type=embed/gi)) {
  452.     window.parent.postMessage("resize", "*");
  453.   }
  454. </script>
  455.  
  456.    
  457.   </body>
  458. </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!