API tools faq
paste
chezshay

characters theme #2 'alice'

chezshay
Aug 10th, 2014
1,337
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.72 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.  
  3. <!-- @shayofrp -->
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6.  
  7.  
  8. <head>
  9.  
  10. <title>{Title}</title>
  11.  
  12. <link rel="shortcut icon" href="{Favicon}" />
  13. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  14.  
  15. <style type="text/css">
  16.  
  17. /*--body--*/
  18.  
  19. ::-webkit-scrollbar-thumb {
  20. height:auto;
  21. background-color:#8d5c5b;
  22. }
  23.  
  24. ::-webkit-scrollbar {
  25. height:9px;
  26. width:2px;
  27. background-color:#d3d4c2;
  28. }
  29.  
  30. body {
  31. font-style:none;
  32. background-color:#d3d4c2;
  33. font-family:arial;
  34. font-size:9px;
  35. }
  36.  
  37.  
  38. a {
  39. color:#ffde00;
  40. text-decoration:none;
  41. -webkit-transition: all 0.5s ease-out;
  42. -moz-transition: all 0.5s ease-out;
  43. transition: all 0.5s ease-out;
  44. }
  45.  
  46. a:hover {
  47. color:white;
  48. text-decoration:none;
  49. -webkit-transition: all 0.8s ease-out;
  50. -moz-transition: all 0.8s ease-out;
  51. transition: all 0.8s ease-out;
  52. }
  53.  
  54. img {
  55. border:none;
  56. }
  57.  
  58. h1 {
  59. font-size:10px;
  60. }
  61.  
  62. header{background-color:#8d5c5b;
  63. padding:5px;
  64. width:97%;
  65. font-family:arial;
  66. color:#d3d4c2;
  67. letter-spacing:1px;
  68. text-transform:uppercase;
  69. font-weight:bold;
  70. font-size:11px;}
  71.  
  72. pre {word-wrap:break-word;
  73. font-size:8px;
  74. font-weight:bold;
  75. text-align:center;
  76. font-family:arial;
  77. text-transform:uppercase;
  78. letter-spacing:1px;
  79. background-color:#d3d4c2;
  80. color:#5a4d52;
  81. padding:2px;
  82. }
  83.  
  84. /*--Cursor code--*/
  85.  
  86.  
  87. *, body, a, a:hover {cursor: url("http://www.totallylayouts.com/cursors/random/tiny_cursor.png"), auto }
  88.  
  89. /*everything*/
  90.  
  91. #everything {
  92. margin-left:25%;
  93. margin-top:50px;
  94. }
  95.  
  96. /*--links--*/
  97. #all{margin-left:-6px;}
  98.  
  99. #title{width:810px;
  100. margin-top:10px;
  101. }
  102.  
  103. #links {
  104. width:800px;
  105. padding:5px;
  106. font-family:arial;
  107. text-transform:uppercase;
  108. text-align:center;
  109. margin-top:-25px;
  110. position:absolute;
  111. margin-left:-5px;
  112. }
  113.  
  114. #links a {
  115. padding:5px;
  116. font-size:8px;
  117. width:254px;
  118. display:inline-block;
  119. letter-spacing:3px;
  120. background-color:#5f494b;
  121. color:#c4d1bb;
  122. -webkit-transition: all 0.4s ease-in-out;
  123. -moz-transition: all 0.4s ease-in-out;
  124. -o-transition: all 0.4s ease-in-out;
  125. -ms-transition: all 0.4s ease-in-out;
  126. transition: all 0.4s ease-in-out;
  127. }
  128.  
  129. #links a:hover {
  130. color:#fff;
  131. background-color:#c4d1bb;
  132. }
  133.  
  134. /**characters**/
  135.  
  136.  
  137. }
  138. #squarething {
  139. height:300px;
  140. background-color:#5f494b;
  141. padding:10px;
  142. }
  143.  
  144. #squarething:hover #info {
  145. opacity:1;
  146. width:385px;
  147. height:145px;
  148. }
  149.  
  150. #character {
  151. width:389px;
  152. margin-top:0px;
  153. }
  154.  
  155. #character img {
  156. width:390px;
  157. height:150px;
  158. padding:2px;
  159. border:1px solid #a6a198;
  160. }
  161.  
  162. #character p{background-color:#8d5c5b;
  163. padding:5px;
  164. margin-left:10px;
  165. margin-right:10px;
  166. border-left:solid 2px #8d5c5b;
  167. }
  168.  
  169. #info {
  170. padding:5px;
  171. width:385px;
  172. overflow:auto;
  173. height:145px;
  174. position:absolute;
  175. opacity:0;
  176. font-family:arial;
  177. font-size:9px;
  178. background:#5f494b;
  179. text-align:justify;
  180. color:#d3d4c2;
  181. }
  182.  
  183. {CustomCSS}
  184.  
  185. </style></head>
  186.  
  187.  
  188. <body>
  189.  
  190.  
  191. <div id="everything">
  192. <div id="links">
  193. <a href="/">HOME</a>
  194. <a href="/ask">ASK</a>
  195. <a href="http://shayofrp.tumblr.com">CREDIT </a>
  196. </div>
  197. <br>
  198. <img src="http://i57.tinypic.com/33a5g8w.gif"><br>
  199. <div id="title"><header>LOREM IPSUM</header></div>
  200. <table id="all" border="0" cellpadding="5" cellspacing="1">
  201. <!--first column-->
  202. <td><div id="squarething">
  203. <div id="character">
  204. <div id="info">
  205. <div id="name"><header>NAME</header>
  206. <pre>label</pre>
  207. <blockquote>lorem ipsum</blockquote>
  208. <pre>faceclaim</pre>
  209. <blockquote>lorem ipsum</blockquote>
  210. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor massa quis vehicula imperdiet. Suspendisse vestibulum libero nec velit faucibus rutrum. Aliquam malesuada tincidunt aliquam. Aenean vitae quam dui. Quisque sollicitudin ullamcorper dolor, nec venenatis libero tristique nec. Integer sed sagittis nibh. Sed massa lorem, placerat id laoreet at, consectetur et lorem. Aenean non sem non libero pretium varius vel nec lorem. Cras vitae sollicitudin mi. Phasellus rhoncus, eros eget sollicitudin auctor, diam lorem tincidunt quam, ac sollicitudin dui lacus vitae neque. Mauris vitae tincidunt orci, et malesuada sem. Fusce sodales purus quam, eu vulputate eros malesuada eu.</p>
  211.  
  212. </div>
  213. </div>
  214. <img src="http://i58.tinypic.com/fbyowk.png"/>
  215. </div></div></td>
  216.  
  217. <td><div id="squarething">
  218. <div id="character">
  219. <div id="info">
  220. <div id="name"><header>NAME</header>
  221. <pre>label</pre>
  222. <blockquote>lorem ipsum</blockquote>
  223. <pre>faceclaim</pre>
  224. <blockquote>lorem ipsum</blockquote>
  225. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor massa quis vehicula imperdiet. Suspendisse vestibulum libero nec velit faucibus rutrum. Aliquam malesuada tincidunt aliquam. Aenean vitae quam dui. Quisque sollicitudin ullamcorper dolor, nec venenatis libero tristique nec. Integer sed sagittis nibh. Sed massa lorem, placerat id laoreet at, consectetur et lorem. Aenean non sem non libero pretium varius vel nec lorem. Cras vitae sollicitudin mi. Phasellus rhoncus, eros eget sollicitudin auctor, diam lorem tincidunt quam, ac sollicitudin dui lacus vitae neque. Mauris vitae tincidunt orci, et malesuada sem. Fusce sodales purus quam, eu vulputate eros malesuada eu.</p>
  226.  
  227. </div>
  228. </div>
  229. <img src="http://i58.tinypic.com/fbyowk.png"/>
  230. </div></div></td>
  231.  
  232. <tr><td><div id="squarething">
  233. <div id="character">
  234. <div id="info">
  235. <div id="name"><header>NAME</header>
  236. <pre>label</pre>
  237. <blockquote>lorem ipsum</blockquote>
  238. <pre>faceclaim</pre>
  239. <blockquote>lorem ipsum</blockquote>
  240. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor massa quis vehicula imperdiet. Suspendisse vestibulum libero nec velit faucibus rutrum. Aliquam malesuada tincidunt aliquam. Aenean vitae quam dui. Quisque sollicitudin ullamcorper dolor, nec venenatis libero tristique nec. Integer sed sagittis nibh. Sed massa lorem, placerat id laoreet at, consectetur et lorem. Aenean non sem non libero pretium varius vel nec lorem. Cras vitae sollicitudin mi. Phasellus rhoncus, eros eget sollicitudin auctor, diam lorem tincidunt quam, ac sollicitudin dui lacus vitae neque. Mauris vitae tincidunt orci, et malesuada sem. Fusce sodales purus quam, eu vulputate eros malesuada eu.</p>
  241.  
  242. </div>
  243. </div>
  244. <img src="http://i58.tinypic.com/fbyowk.png"/>
  245. </div></div></td>
  246.  
  247. <td><div id="squarething">
  248. <div id="character">
  249. <div id="info">
  250. <div id="name"><header>NAME</header>
  251. <pre>label</pre>
  252. <blockquote>lorem ipsum</blockquote>
  253. <pre>faceclaim</pre>
  254. <blockquote>lorem ipsum</blockquote>
  255. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor massa quis vehicula imperdiet. Suspendisse vestibulum libero nec velit faucibus rutrum. Aliquam malesuada tincidunt aliquam. Aenean vitae quam dui. Quisque sollicitudin ullamcorper dolor, nec venenatis libero tristique nec. Integer sed sagittis nibh. Sed massa lorem, placerat id laoreet at, consectetur et lorem. Aenean non sem non libero pretium varius vel nec lorem. Cras vitae sollicitudin mi. Phasellus rhoncus, eros eget sollicitudin auctor, diam lorem tincidunt quam, ac sollicitudin dui lacus vitae neque. Mauris vitae tincidunt orci, et malesuada sem. Fusce sodales purus quam, eu vulputate eros malesuada eu.</p>
  256.  
  257. </div>
  258. </div>
  259. <img src="http://i58.tinypic.com/fbyowk.png"/>
  260. </div></div></td>
  261.  
  262. <tr><td><div id="squarething">
  263. <div id="character">
  264. <div id="info">
  265. <div id="name"><header>NAME</header>
  266. <pre>label</pre>
  267. <blockquote>lorem ipsum</blockquote>
  268. <pre>faceclaim</pre>
  269. <blockquote>lorem ipsum</blockquote>
  270. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor massa quis vehicula imperdiet. Suspendisse vestibulum libero nec velit faucibus rutrum. Aliquam malesuada tincidunt aliquam. Aenean vitae quam dui. Quisque sollicitudin ullamcorper dolor, nec venenatis libero tristique nec. Integer sed sagittis nibh. Sed massa lorem, placerat id laoreet at, consectetur et lorem. Aenean non sem non libero pretium varius vel nec lorem. Cras vitae sollicitudin mi. Phasellus rhoncus, eros eget sollicitudin auctor, diam lorem tincidunt quam, ac sollicitudin dui lacus vitae neque. Mauris vitae tincidunt orci, et malesuada sem. Fusce sodales purus quam, eu vulputate eros malesuada eu.</p>
  271.  
  272. </div>
  273. </div>
  274. <img src="http://i58.tinypic.com/fbyowk.png"/>
  275. </div></div></td>
  276.  
  277. <td><div id="squarething">
  278. <div id="character">
  279. <div id="info">
  280. <div id="name"><header>NAME</header>
  281. <pre>label</pre>
  282. <blockquote>lorem ipsum</blockquote>
  283. <pre>faceclaim</pre>
  284. <blockquote>lorem ipsum</blockquote>
  285. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor massa quis vehicula imperdiet. Suspendisse vestibulum libero nec velit faucibus rutrum. Aliquam malesuada tincidunt aliquam. Aenean vitae quam dui. Quisque sollicitudin ullamcorper dolor, nec venenatis libero tristique nec. Integer sed sagittis nibh. Sed massa lorem, placerat id laoreet at, consectetur et lorem. Aenean non sem non libero pretium varius vel nec lorem. Cras vitae sollicitudin mi. Phasellus rhoncus, eros eget sollicitudin auctor, diam lorem tincidunt quam, ac sollicitudin dui lacus vitae neque. Mauris vitae tincidunt orci, et malesuada sem. Fusce sodales purus quam, eu vulputate eros malesuada eu.</p>
  286.  
  287. </div>
  288. </div>
  289. <img src="http://i58.tinypic.com/fbyowk.png"/>
  290. </div></div></td>
  291.  
  292. <tr><td><div id="squarething">
  293. <div id="character">
  294. <div id="info">
  295. <div id="name"><header>NAME</header>
  296. <pre>label</pre>
  297. <blockquote>lorem ipsum</blockquote>
  298. <pre>faceclaim</pre>
  299. <blockquote>lorem ipsum</blockquote>
  300. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor massa quis vehicula imperdiet. Suspendisse vestibulum libero nec velit faucibus rutrum. Aliquam malesuada tincidunt aliquam. Aenean vitae quam dui. Quisque sollicitudin ullamcorper dolor, nec venenatis libero tristique nec. Integer sed sagittis nibh. Sed massa lorem, placerat id laoreet at, consectetur et lorem. Aenean non sem non libero pretium varius vel nec lorem. Cras vitae sollicitudin mi. Phasellus rhoncus, eros eget sollicitudin auctor, diam lorem tincidunt quam, ac sollicitudin dui lacus vitae neque. Mauris vitae tincidunt orci, et malesuada sem. Fusce sodales purus quam, eu vulputate eros malesuada eu.</p>
  301.  
  302. </div>
  303. </div>
  304. <img src="http://i58.tinypic.com/fbyowk.png"/>
  305. </div></div></td>
  306.  
  307. <td><div id="squarething">
  308. <div id="character">
  309. <div id="info">
  310. <div id="name"><header>NAME</header>
  311. <pre>label</pre>
  312. <blockquote>lorem ipsum</blockquote>
  313. <pre>faceclaim</pre>
  314. <blockquote>lorem ipsum</blockquote>
  315. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor massa quis vehicula imperdiet. Suspendisse vestibulum libero nec velit faucibus rutrum. Aliquam malesuada tincidunt aliquam. Aenean vitae quam dui. Quisque sollicitudin ullamcorper dolor, nec venenatis libero tristique nec. Integer sed sagittis nibh. Sed massa lorem, placerat id laoreet at, consectetur et lorem. Aenean non sem non libero pretium varius vel nec lorem. Cras vitae sollicitudin mi. Phasellus rhoncus, eros eget sollicitudin auctor, diam lorem tincidunt quam, ac sollicitudin dui lacus vitae neque. Mauris vitae tincidunt orci, et malesuada sem. Fusce sodales purus quam, eu vulputate eros malesuada eu.</p>
  316.  
  317. </div>
  318. </div>
  319. <img src="http://i58.tinypic.com/fbyowk.png"/>
  320. </div></div></td>
  321.  
  322. <tr><td><div id="squarething">
  323. <div id="character">
  324. <div id="info">
  325. <div id="name"><header>NAME</header>
  326. <pre>label</pre>
  327. <blockquote>lorem ipsum</blockquote>
  328. <pre>faceclaim</pre>
  329. <blockquote>lorem ipsum</blockquote>
  330. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor massa quis vehicula imperdiet. Suspendisse vestibulum libero nec velit faucibus rutrum. Aliquam malesuada tincidunt aliquam. Aenean vitae quam dui. Quisque sollicitudin ullamcorper dolor, nec venenatis libero tristique nec. Integer sed sagittis nibh. Sed massa lorem, placerat id laoreet at, consectetur et lorem. Aenean non sem non libero pretium varius vel nec lorem. Cras vitae sollicitudin mi. Phasellus rhoncus, eros eget sollicitudin auctor, diam lorem tincidunt quam, ac sollicitudin dui lacus vitae neque. Mauris vitae tincidunt orci, et malesuada sem. Fusce sodales purus quam, eu vulputate eros malesuada eu.</p>
  331.  
  332. </div>
  333. </div>
  334. <img src="http://i58.tinypic.com/fbyowk.png"/>
  335. </div></div></td>
  336.  
  337. <td><div id="squarething">
  338. <div id="character">
  339. <div id="info">
  340. <div id="name"><header>NAME</header>
  341. <pre>label</pre>
  342. <blockquote>lorem ipsum</blockquote>
  343. <pre>faceclaim</pre>
  344. <blockquote>lorem ipsum</blockquote>
  345. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor massa quis vehicula imperdiet. Suspendisse vestibulum libero nec velit faucibus rutrum. Aliquam malesuada tincidunt aliquam. Aenean vitae quam dui. Quisque sollicitudin ullamcorper dolor, nec venenatis libero tristique nec. Integer sed sagittis nibh. Sed massa lorem, placerat id laoreet at, consectetur et lorem. Aenean non sem non libero pretium varius vel nec lorem. Cras vitae sollicitudin mi. Phasellus rhoncus, eros eget sollicitudin auctor, diam lorem tincidunt quam, ac sollicitudin dui lacus vitae neque. Mauris vitae tincidunt orci, et malesuada sem. Fusce sodales purus quam, eu vulputate eros malesuada eu.</p>
  346.  
  347. </div>
  348. </div>
  349. <img src="http://i58.tinypic.com/fbyowk.png"/>
  350. </div></div></td>
  351.  
  352. <tr>
  353. <td><div id="squarething">
  354. <div id="character">
  355. <div id="info">
  356. <div id="name"><header>NAME</header>
  357. <pre>label</pre>
  358. <blockquote>lorem ipsum</blockquote>
  359. <pre>faceclaim</pre>
  360. <blockquote>lorem ipsum</blockquote>
  361. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor massa quis vehicula imperdiet. Suspendisse vestibulum libero nec velit faucibus rutrum. Aliquam malesuada tincidunt aliquam. Aenean vitae quam dui. Quisque sollicitudin ullamcorper dolor, nec venenatis libero tristique nec. Integer sed sagittis nibh. Sed massa lorem, placerat id laoreet at, consectetur et lorem. Aenean non sem non libero pretium varius vel nec lorem. Cras vitae sollicitudin mi. Phasellus rhoncus, eros eget sollicitudin auctor, diam lorem tincidunt quam, ac sollicitudin dui lacus vitae neque. Mauris vitae tincidunt orci, et malesuada sem. Fusce sodales purus quam, eu vulputate eros malesuada eu.</p>
  362.  
  363. </div>
  364. </div>
  365. <img src="http://i58.tinypic.com/fbyowk.png"/>
  366. </div></div></td>
  367.  
  368. <td><div id="squarething">
  369. <div id="character">
  370. <div id="info">
  371. <div id="name"><header>NAME</header>
  372. <pre>label</pre>
  373. <blockquote>lorem ipsum</blockquote>
  374. <pre>faceclaim</pre>
  375. <blockquote>lorem ipsum</blockquote>
  376. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor massa quis vehicula imperdiet. Suspendisse vestibulum libero nec velit faucibus rutrum. Aliquam malesuada tincidunt aliquam. Aenean vitae quam dui. Quisque sollicitudin ullamcorper dolor, nec venenatis libero tristique nec. Integer sed sagittis nibh. Sed massa lorem, placerat id laoreet at, consectetur et lorem. Aenean non sem non libero pretium varius vel nec lorem. Cras vitae sollicitudin mi. Phasellus rhoncus, eros eget sollicitudin auctor, diam lorem tincidunt quam, ac sollicitudin dui lacus vitae neque. Mauris vitae tincidunt orci, et malesuada sem. Fusce sodales purus quam, eu vulputate eros malesuada eu.</p>
  377.  
  378. </div>
  379. </div>
  380. <img src="http://i58.tinypic.com/fbyowk.png"/>
  381. </div></div></td>
  382.  
  383. <!--to here-->
  384. </table></div>
  385. </div></div>
  386.  
  387. </div>
  388. </body>
  389. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!