API tools faq
paste
Advertisement
vivite

Roleplay Page: 1

vivite
May 14th, 2012
16,826
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.88 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html>
  4.  
  5. <!--
  6. PAGE BY: vivite.tumblr.com
  7. SIDEBAR PREVIEW IMAGE: mortgraphics @ livejournal
  8. BACKGROUND: subtlepatterns.com
  9.  
  10. Don't remove the credits!
  11. --!>
  12.  
  13. <title>{Title}</title>
  14. <link rel="shortcut icon" href="{Favicon}">
  15.  
  16. <head>
  17. <link href='http://fonts.googleapis.com/css?family=Economica' rel='stylesheet' type='text/css'>
  18.  
  19. <style type="text/css">
  20.  
  21. /*BACKGROUND*/
  22. body {
  23. background-color:#fff;
  24. background-image: url('http://24.media.tumblr.com/tumblr_ltqq73Kh5g1qhvdofo5_250.png');
  25. background-attachment: fixed;}
  26.  
  27. ::-webkit-scrollbar-thumb:vertical {
  28. background-color: #FA7B98;
  29. height: 30px;}
  30.  
  31. ::-webkit-scrollbar {
  32. height: 30px;
  33. width: 4px;
  34. background-color:#fff;}
  35.  
  36. /*SIDEBAR*/
  37.  
  38. #side{
  39. position:fixed;
  40. margin-left:80px;
  41. top:100px;
  42. z-index:99;}
  43.  
  44. #side img{
  45. width:150px;
  46. height:150px;
  47. padding:4px;
  48. border: 1px solid #ccc;}
  49.  
  50. #desc{
  51. position:fixed;
  52. width:220px;
  53. margin-top:-10px;
  54. margin-left:-30px;
  55. font-family:georgia;
  56. font-size:10px;
  57. text-align:center;
  58. color:#999;}
  59.  
  60. #desc h1{
  61. font-family:Economica;
  62. font-size:16px;
  63. font-weight:normal;
  64. letter-spacing:2px;
  65. z-index:99;
  66. text-align:center;
  67. border-bottom:1px dotted;
  68. text-transform:uppercase;
  69. padding:2px;}
  70.  
  71. #desc a{
  72. color:#f09b26; /*THIS IS THE RETURN LINK COLOR*/
  73. text-decoration:none;
  74. font-size:9px;
  75. letter-spacing:1px;
  76. text-transform:uppercase;
  77. font-family:consolas;}
  78.  
  79. #container{
  80. position:absolute;
  81. margin-left:140px;
  82. width:1000px;
  83. top:20px;}
  84.  
  85. /*CHARACTER IMAGES AND DESCRIPTIONS CSS*/
  86.  
  87. .char{
  88. position:relative;
  89. float:left;
  90. width:260px;
  91. margin-left:180px;
  92. margin-bottom:20px;
  93. padding:4px;}
  94.  
  95. .char a{
  96. color: #000;
  97. text-decoration:none;}
  98.  
  99. .char a:hover{
  100. color:ffdd11;}
  101.  
  102. /* YOU CAN CHANGE THE BORDER COLOR HERE. CHANGE #CCC. */
  103.  
  104. .char img{
  105. width:150px;
  106. padding:4px;
  107. border:1px solid #ccc;}
  108.  
  109. .title{
  110. position:relative;
  111. margin-top:-40px;}
  112.  
  113. /* THIS IS THE SERIES TITLE */
  114.  
  115. .title h1{
  116. font-family:Economica;
  117. font-size:12px;
  118. font-weight:normal;
  119. letter-spacing:2px;
  120. z-index:99;
  121. width:175px;
  122. margin-left:-10px;
  123. text-align:center;
  124. text-transform:uppercase;
  125. padding:2px;
  126. color:#000;
  127. background-color:#ffdd11;}
  128.  
  129. /* THIS IS THE CHARACTER DESCRIPTION. */
  130.  
  131. .info{
  132. position:absolute;
  133. font-family:tahoma;
  134. font-size:10px;
  135. width:200px;
  136. margin-left:180px;
  137. padding:10px;
  138. border: 5px solid #eee;
  139. color: #999;
  140. background-color:#fff;}
  141.  
  142. /* THIS IS THE CHARACTER NAME */
  143.  
  144. .info h1{
  145. border-bottom:1px dotted;
  146. font-family: economica;
  147. color: #000;
  148. font-size:14px;
  149. margin-top:-8px;
  150. margin-bottom:2px;
  151. font-weight:normal;}
  152.  
  153. /* THIS IS THE BOLD COLOR */
  154.  
  155. .info b, strong{
  156. color: #eeaa55;
  157. text-transform:uppercase;
  158. font-size:8px;}
  159.  
  160. #credit{
  161. position:fixed;
  162. bottom:5px;
  163. right:15px;}
  164.  
  165. #credit a{
  166. color: #000;
  167. font-size:10px;
  168. font-family:consolas;
  169. text-decoration:none;}
  170.  
  171. </style>
  172.  
  173. <!-- DON'T TOUCH ANYTHING HERE --!>
  174.  
  175. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  176. <script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  177. <script>
  178. $(function(){
  179. var $container = $('#container');
  180. $container.imagesLoaded(function(){
  181. $container.masonry({
  182. itemSelector: '.char',
  183. });
  184. });
  185. $container.infinitescroll({
  186. itemSelector : ".char",
  187. loadingImg : "",
  188. loadingText : "<em></em>",
  189. bufferPx : 10000,
  190. extraScrollPx: 12000,
  191. },
  192. // trigger Masonry as a callback
  193. function( newElements ) {
  194. var $newElems = $( newElements ).css({ opacity: 0 });
  195. // ensure that images load before adding to masonry layout
  196. $newElems.imagesLoaded(function(){
  197. $newElems.animate({ opacity: 1 });
  198. $container.masonry( 'appended', $newElems, true );
  199. });
  200. }
  201. );
  202. });
  203. </script>
  204. </head>
  205. <body>
  206. <div id="credit">
  207. <a title="ZuviaThemes" href="http://vivite.tumblr.com">☡┬</a>
  208. </div>
  209.  
  210. <!--- OKAY CARRY ON ---!>
  211.  
  212. <div id="side">
  213.  
  214. <!--- HERE IS WHERE YOU CHANGE THE SIDEBAR IMAGE. REPLACE THE 'IMG SRC' URL BELOW. ---!>
  215. <img src="http://static.tumblr.com/jtqlgf2/wjzm41kby/la.png">
  216.  
  217. <div id="desc">
  218.  
  219. <!--- HERE IS YOUR MAIN DESCRIPTION. ---!>
  220. <h1>my roleplays</h1>
  221. Here are the characters that I roleplay.
  222.  
  223. <p>
  224. <a href="/">return</a>
  225. </div>
  226. </div>
  227.  
  228. <div id="container">
  229.  
  230. <!---
  231.  
  232. Below is where you add and remove characters.
  233.  
  234. To add another, simply copy everything from 'START CHAR' to 'END CHAR' and paste.
  235.  
  236. To change images, replace the img src URL.
  237.  
  238. To change character names and series names, observe the proper places in the examples below.
  239.  
  240. ---!>
  241.  
  242. <!-- START CHAR --!>
  243. <div class="char">
  244. <div class="info">
  245.  
  246. <!--Character Name--!>
  247. <h1>» Katniss Everdeen</h1>
  248.  
  249. <!--Character Description. Be sure to close all bolded tags. --!>
  250. <b>Status:</b> Hiatus <br>
  251. <b>Age:</b> 16 <br>
  252. <b>District:</b> 12<br>
  253. <b>Weapon:</b> Bow and arrow<br>
  254. <b>Desc:</b> Participant of the 74th Annual Hunger Games. Volunteered for her sister. Also known as The Mockingjay. <br>
  255. </div>
  256.  
  257. <!--Character Image--!>
  258. <img src="http://24.media.tumblr.com/tumblr_m2hbvtS2U51rtgrp9o1_500.jpg">
  259.  
  260. <div class="title"><h1>
  261.  
  262. <!--Series Name and Roleplay Link--!>
  263. <a href="ROLE PLAY URL HERE">The Hunger Games</a>
  264.  
  265. </h1></div>
  266. </div>
  267. <!-- End Char --!>
  268.  
  269. <!-- START CHAR --!>
  270. <div class="char">
  271. <div class="info">
  272.  
  273. <!--Character Name--!>
  274. <h1>» Daenerys Stormborn</h1>
  275.  
  276. <!--Character Description. Be sure to close all bolded tags. --!>
  277. <b>Status:</b> Active <br>
  278. <b>Age:</b> 14 <br>
  279. <b>House:</b> Targaryen <br>
  280. <b>Desc:</b> Khaleesi, Mother of Dragons, blood of Old Valyria, rightful owner of the Iron Throne.
  281. </div>
  282.  
  283. <!--Character Image--!>
  284. <img src="http://24.media.tumblr.com/tumblr_m33wflWNp81qj80pro1_250.jpg">
  285.  
  286. <div class="title"><h1>
  287.  
  288. <!--Series Name and Roleplay Link--!>
  289. <a href="ROLE PLAY URL HERE">Game of Thrones</a>
  290.  
  291. </h1></div>
  292. </div>
  293. <!-- End Char --!>
  294.  
  295.  
  296.  
  297. </div>
  298. </div>
  299. </body>
  300. </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!