API tools faq
paste
Advertisement
ninpen

characters

ninpen
Jun 23rd, 2014
7,615
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.29 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <title>{Title}</title>
  5.  
  6.  
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  8. <link rel="shortcut icon" href="{Favicon}" />
  9. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  10. <link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
  11.  
  12. <style type="text/css">
  13. ::-webkit-scrollbar {width: 3px; height: 3px; background: #ffffff; }
  14. ::-webkit-scrollbar-thumb { background-color: #1f1d1d;}
  15.  
  16. html,body{
  17. margin:0;
  18. padding:0;
  19. height:100%;
  20. width:100%;
  21. }
  22.  
  23. body{
  24. margin:0;
  25. padding:0;
  26. background:#f0f0f0 url('BACKGROUND URL WILL GO HERE') repeat right top;
  27. -webkit-backface-visibility:hidden;
  28. word-wrap:break-word;
  29. }
  30.  
  31. a{
  32. text-decoration:none;
  33. -webkit-transition: all .6s ease;
  34. -moz-transition:all .6s ease;
  35. -o-transition: all .6s ease;
  36. -ms-transition: all .6s ease;
  37. transition: all .6s ease;
  38. }
  39.  
  40. a:hover{
  41. opacity:.6;
  42. -webkit-transition: all .6s ease;
  43. -moz-transition:all .6s ease;
  44. -o-transition: all .6s ease;
  45. -ms-transition: all .6s ease;
  46. transition: all .6s ease;
  47. }
  48.  
  49. #center{
  50. width:826px;
  51. position:fixed;
  52. overflow:auto;
  53. left:50%;
  54. top:50%;
  55. margin:-225px 0 0 -410px;
  56. }
  57.  
  58. #navigation{
  59. position:fixed;
  60. top:0px;
  61. left:50%;
  62. background:rgba(255,255,255,.3);
  63. margin-left:-150px;
  64. width:285px;
  65. height:8px;
  66. padding:10px 0;
  67. }
  68.  
  69. #navigation a{
  70. padding:0 5px;
  71. vertical-align:top;
  72. top:0;
  73. left:35px;
  74. color:TOP NAVIGATION FONT COLOR WILL GO HERE;
  75. font:8px/7px courier;
  76. background:TOP NAVIGATION BACKGROUND COLOR WILL GO HERE;
  77. text-transform:uppercase;
  78. letter-spacing:2px;
  79. position:relative;
  80. }
  81.  
  82. #navigation a:nth-of-type(2n){
  83. margin:0 30px;
  84. }
  85.  
  86. #img {
  87. position:relative;
  88. width:160px;
  89. height:170px;
  90. display:inline-block;
  91. }
  92.  
  93.  
  94. /*DO NOT TOUCH. JUST DON'T*/
  95. #pic{
  96. width:170px;
  97. height:170px;
  98. overflow:hidden;
  99. float:left;
  100. position:relative;
  101. z-index:2;
  102. -webkit-mask-image: url(http://static.tumblr.com/1f1tzta/Vvfn75cx5/hexa.png);
  103. -webkit-mask-repeat: round;
  104. -moz-mask-image: url(http://static.tumblr.com/1f1tzta/Vvfn75cx5/hexa.png);
  105. -moz-mask-repeat: round;
  106. -o-mask-image: url(http://static.tumblr.com/1f1tzta/Vvfn75cx5/hexa.png);
  107. -o-mask-repeat: round;
  108. mask-image: url(http://static.tumblr.com/1f1tzta/Vvfn75cx5/hexa.png);
  109. mask-repeat: round;
  110. -webkit-mask-source-type: luminance;
  111. mask-source-type: luminance;
  112. }
  113.  
  114. #text{
  115. width:136px;
  116. height:148px;
  117. position:absolute;
  118. z-index:100;
  119. opacity:0;
  120. top:11px;
  121. left:17px;
  122. background: url(http://static.tumblr.com/1f1tzta/NjIn75cz9/hexatext.png) no-repeat center center;
  123. -webkit-transition: all .6s ease;
  124. -moz-transition:all .6s ease;
  125. -o-transition: all .6s ease;
  126. -ms-transition: all .6s ease;
  127. transition: all .6s ease;
  128. }
  129.  
  130. .instext{
  131. color:#aaa;
  132. font:italic 12px/12px times new roman;
  133. letter-spacing:1px;
  134. text-transform:lowercase;
  135. width:122px;
  136. text-align:center;
  137. overflow:hidden;
  138. background:#fff;
  139. margin:45px 0 0 2px;
  140. padding:20px 5px;
  141. }
  142.  
  143. #img:hover #text{
  144. opacity:1;
  145. -webkit-transition: all .6s ease;
  146. -moz-transition:all .6s ease;
  147. -o-transition: all .6s ease;
  148. -ms-transition: all .6s ease;
  149. transition: all .6s ease;
  150. }
  151.  
  152. .hneycmb{
  153. width:665px;
  154. height:180px;
  155. margin:-40px 0 -46px 80px;
  156. }
  157. </style>
  158. </head>
  159.  
  160. <body>
  161.  
  162.  
  163. <!--LEAVE MY CREDIT ALONE-->
  164. <div id="navigation">
  165. <a href="/">Index</a>
  166. <a href="/ask">Inbox</a>
  167. <a href="http://ninpen.tumblr.com/">Credit</a>
  168. </div>
  169.  
  170.  
  171.  
  172.  
  173. <div id="center">
  174.  
  175.  
  176. <div id="img">
  177. <div id="text">
  178. <div class="instext">PUT YOUR CHARACTER NAME HERE</div>
  179. </div>
  180. <div id="pic"><img src="THIS IS WHERE YOUR IMAGE URL GOES (170PX BY 170PX)"></div>
  181. </div>
  182.  
  183.  
  184. <div id="img">
  185. <div id="text">
  186. <div class="instext">PUT YOUR CHARACTER NAME HERE</div>
  187. </div>
  188. <div id="pic"><img src="THIS IS WHERE YOUR IMAGE URL GOES (170PX BY 170PX)"></div>
  189. </div>
  190.  
  191.  
  192. <div id="img">
  193. <div id="text">
  194. <div class="instext">PUT YOUR CHARACTER NAME HERE</div>
  195. </div>
  196. <div id="pic"><img src="THIS IS WHERE YOUR IMAGE URL GOES (170PX BY 170PX)"></div>
  197. </div>
  198.  
  199.  
  200.  
  201. <div id="img">
  202. <div id="text">
  203. <div class="instext">PUT YOUR CHARACTER NAME HERE</div>
  204. </div>
  205. <div id="pic"><img src="THIS IS WHERE YOUR IMAGE URL GOES (170PX BY 170PX)"></div>
  206. </div>
  207.  
  208.  
  209. <div id="img">
  210. <div id="text">
  211. <div class="instext">PUT YOUR CHARACTER NAME HERE</div>
  212. </div>
  213. <div id="pic"><img src="THIS IS WHERE YOUR IMAGE URL GOES (170PX BY 170PX)"></div>
  214. </div>
  215.  
  216.  
  217.  
  218.  
  219.  
  220.  
  221.  
  222. <div class="hneycmb">
  223.  
  224. <div id="img">
  225. <div id="text">
  226. <div class="instext">PUT YOUR CHARACTER NAME HERE</div>
  227. </div>
  228. <div id="pic"><img src="THIS IS WHERE YOUR IMAGE URL GOES (170PX BY 170PX)"></div>
  229. </div>
  230.  
  231.  
  232.  
  233. <div id="img">
  234. <div id="text">
  235. <div class="instext">PUT YOUR CHARACTER NAME HERE</div>
  236. </div>
  237. <div id="pic"><img src="THIS IS WHERE YOUR IMAGE URL GOES (170PX BY 170PX)"></div>
  238. </div>
  239.  
  240.  
  241.  
  242. <div id="img">
  243. <div id="text">
  244. <div class="instext">PUT YOUR CHARACTER NAME HERE</div>
  245. </div>
  246. <div id="pic"><img src="THIS IS WHERE YOUR IMAGE URL GOES (170PX BY 170PX)"></div>
  247. </div>
  248.  
  249.  
  250.  
  251. <div id="img">
  252. <div id="text">
  253. <div class="instext">PUT YOUR CHARACTER NAME HERE</div>
  254. </div>
  255. <div id="pic"><img src="THIS IS WHERE YOUR IMAGE URL GOES (170PX BY 170PX)"></div>
  256. </div>
  257.  
  258. </div>
  259.  
  260.  
  261.  
  262.  
  263.  
  264.  
  265.  
  266.  
  267. <div id="img">
  268. <div id="text">
  269. <div class="instext">PUT YOUR CHARACTER NAME HERE</div>
  270. </div>
  271. <div id="pic"><img src="THIS IS WHERE YOUR IMAGE URL GOES (170PX BY 170PX)"></div>
  272. </div>
  273.  
  274.  
  275.  
  276. <div id="img">
  277. <div id="text">
  278. <div class="instext">PUT YOUR CHARACTER NAME HERE</div>
  279. </div>
  280. <div id="pic"><img src="THIS IS WHERE YOUR IMAGE URL GOES (170PX BY 170PX)"></div>
  281. </div>
  282.  
  283.  
  284.  
  285. <div id="img">
  286. <div id="text">
  287. <div class="instext">PUT YOUR CHARACTER NAME HERE</div>
  288. </div>
  289. <div id="pic"><img src="THIS IS WHERE YOUR IMAGE URL GOES (170PX BY 170PX)"></div>
  290. </div>
  291.  
  292.  
  293.  
  294. <div id="img">
  295. <div id="text">
  296. <div class="instext">PUT YOUR CHARACTER NAME HERE</div>
  297. </div>
  298. <div id="pic"><img src="THIS IS WHERE YOUR IMAGE URL GOES (170PX BY 170PX)"></div>
  299. </div>
  300.  
  301.  
  302.  
  303. <div id="img">
  304. <div id="text">
  305. <div class="instext">PUT YOUR CHARACTER NAME HERE</div>
  306. </div>
  307. <div id="pic"><img src="THIS IS WHERE YOUR IMAGE URL GOES (170PX BY 170PX)"></div>
  308. </div>
  309.  
  310.  
  311.  
  312.  
  313. </div>
  314. </body>
  315. </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!