API tools faq
paste
Advertisement
wantoup

Family Page 01

wantoup
Apr 27th, 2013
7,526
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.58 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html><html><head>
  2. <title>{Title} - Family Page</title>
  3. <link rel="shortcut icon" href="{Favicon}">
  4.  
  5. <!--
  6.  
  7. Family Page #01 by viwan-th (http://viwan-th.tumblr.com)
  8. Background from subtlepatterns (http://www.subtlepatterns.com)
  9.  
  10. Please do not remove this credit. To install this page, go to your customize page, and under the PAGES tab, click +Add a page. Then, in the window that pops up, select "Custom Layout", and copy and paste in this entire code.
  11.  
  12. -->
  13.  
  14. <style type="text/css">
  15.  
  16. /* BODY */
  17.  
  18. body, table {/* main body info */
  19. font-family:calibri;
  20. font-size:11px;
  21. color:#aaa;/* text color */
  22. background:#000;/* background color */
  23. text-align:justify;
  24. background-image:url('http://25.media.tumblr.com/tumblr_lsdjv9k5E21r2gm7fo2_400.png');/* background image */
  25. background-attachment:fixed;
  26. background-position:bottom right;
  27. }
  28.  
  29. table {
  30. background:transparent;
  31. }
  32.  
  33. img {
  34. max-width:100%;
  35. display:block;
  36. }
  37.  
  38. a {
  39. text-decoration:none;
  40. color:#aaa;/* links colors */
  41. -webkit-transition:all 1s ease;
  42. -moz-transition:all 1s ease;
  43. -o-transition:all 1s ease;
  44. transition:all 1s ease-in-out;
  45. }
  46.  
  47. a:hover {
  48. color:#aaa;/* links hover colors */
  49. }
  50.  
  51. #container {
  52. width:640px;/* if you make this bigger, then there can be more columns, but be careful -- if it's too wide or narrow, it will be off center */
  53. margin:10px auto;
  54. background:transparent; /* you can use this to help with the width -- set it to a color, and then you can more easily adjust the width of the container */
  55. }
  56.  
  57. /* NAVIGATION */
  58.  
  59. #nav {/* navigation */
  60. text-align:center;
  61. padding:10px;
  62. }
  63.  
  64. #nav a {/* navigation links */
  65. display:inline-block;
  66. background:#999;/* links background */
  67. color:#fff;/* links color */
  68. padding:3px 5px;
  69. margin:0 1px;
  70. font-size:10px;
  71. text-transform:uppercase;
  72. }
  73.  
  74. #nav a:hover {/* navigation links hover */
  75. background:#666;/* links background */
  76. color:#fff;/* links color */
  77. }
  78.  
  79. #intro {/* introduction section */
  80. padding:10px;
  81. width:620px;
  82. background:#333;/* intro background */
  83. box-sizing:border-box;
  84. margin:10px;
  85. font-size:12px;
  86. text-align:center;
  87. }
  88.  
  89. #header {/* intro header */
  90. display:inline-block
  91. position:absolute;
  92. color:#fff;/* header text color */
  93. background:#555;/* header background color */
  94. padding:5px;
  95. text-transform:uppercase;
  96. font-size:15px;
  97. margin:-10px -10px 10px -10px;
  98. }
  99.  
  100. #intro a {/* intro links */
  101. color:#aaa;
  102. }
  103.  
  104. #intro a:hover {/* intro links hover */
  105. color:#aaa;
  106. }
  107.  
  108. #intro b {/* intro bolded text -- use <b> and </b> tags */
  109. color:#fff;
  110. font-weight:normal;
  111. }
  112.  
  113. #intro span {/* intro spanned text -- use <span> and </span> tags */
  114. color:#ff6666;
  115. }
  116.  
  117. /* FAMILY BLOCKS */
  118.  
  119. #family {
  120. float:left;
  121. background:#333;
  122. width:300px;
  123. margin:10px;/* spacing between blocks */
  124. }
  125.  
  126. #portrait {/* portrait image */
  127. width:100px;
  128. }
  129.  
  130. #portrait img {
  131. height:80px;
  132. width:80px;
  133. display:block;
  134. padding:10px;
  135. background:#555;
  136. }
  137.  
  138. .info {/* information */
  139. display:inline-block;
  140. margin:1px 0;/* spacing between lines */
  141. text-transform:uppercase;
  142. color:#ccc;/* info colors */
  143. padding-left:5px;
  144. font-weight:bold;
  145. }
  146.  
  147. /* individual informations -- change the color of the border to change the color of the box in front of the info -- the letter corresponds to its placement from the top */
  148.  
  149. #a {border-left:13px solid #eee;}
  150.  
  151. #b {border-left:13px solid #ccc;}
  152.  
  153. #c {border-left:13px solid #aaa;}
  154.  
  155. #d {border-left:13px solid #888;}
  156.  
  157. #e {border-left:13px solid #666;}
  158.  
  159. #about {/* about section */
  160. padding:10px;
  161. background:#666;
  162. color:#ccc;
  163. }
  164.  
  165. /* MISC */
  166.  
  167. ::-webkit-scrollbar-thumb:vertical {
  168. background-color:#333;
  169. }
  170.  
  171. ::-webkit-scrollbar-thumb:horizontal {
  172. background-color:#333;
  173. }
  174.  
  175. ::-webkit-scrollbar {/* scrollbar background */
  176. height:5px;
  177. width:5px;
  178. background-color:#aaa;
  179. }
  180.  
  181. </style>
  182.  
  183. <!-- SCRIPTS -->
  184.  
  185. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  186. <script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  187.  
  188. <script>
  189. $(function(){
  190. var $container = $('#wrap');
  191. $container.imagesLoaded(function(){
  192. $container.masonry({
  193. itemSelector: '#family',
  194. });
  195. });
  196. $container.infinitescroll({
  197. itemSelector : "#family",
  198. navSelector : "div.pagination",
  199. nextSelector : ".pagination a#next",
  200. loadingImg : "",
  201. loadingText : "<em></em>",
  202. bufferPx : 10000,
  203. extraScrollPx: 12000,
  204. },
  205. // trigger Masonry as a callback
  206. function( newElements ) {
  207. var $newElems = $( newElements ).css({ opacity: 0 });
  208. // ensure that images load before adding to masonry layout
  209. $newElems.imagesLoaded(function(){
  210. $newElems.animate({ opacity: 1 });
  211. $container.masonry( 'appended', $newElems, true );
  212. });
  213. }
  214. );
  215. });
  216. </script>
  217.  
  218. </head><body>
  219.  
  220. <div id="container">
  221.  
  222. <!-- NAVIGATION -->
  223.  
  224. <div id="nav">
  225. <a href="/">Back to <b>{Title}</b></a>
  226. <a href="http://www.tumblr.com/dashboard">dashboard</a>
  227. <!-- DO NOT CHANGE OR REMOVE THIS CREDIT -->
  228. <a href="http://viwan-th.tumblr.com">credit</a>
  229. <!-- DO NOT CHANGE OR REMOVE THIS CREDIT -->
  230. </div>
  231.  
  232. <!-- INTRODUCTION -->
  233.  
  234. <div id="intro">
  235. <div id="header">Introduction</div><!-- INTRO HEADER -->
  236. Welcome to the world of <b>Darker than BLACK</b>, where after an entity known as <span>"Hell's Gate"</span> appeared in Tokyo, people with paranormal psychic powers in exchange for a <span>"contract"</span> and the loss of their conscience emerged. Ten years have passed since then, and the Tokyo Police force is working to hide from the general population the existence of <b>contractors</b>, who work as spies and assassins for the world's secret services. <b>Hei</b> is one of the most powerful of these psychic agents, and along with his blind associate, <b>Yin</b>, works for one of the many rival agencies vying to unlock the mysteries of Hell's Gate.
  237. </div>
  238.  
  239. <!-- END INTRO -->
  240.  
  241. <div id="wrap">
  242.  
  243. <!-- FAMILY BLOCKS -->
  244.  
  245. <!-- START FAMILY BLOCK --><div id="family">
  246. <table cellpadding="0" cellspacing="10" width="100%"><tr>
  247. <td id="portrait"><img src="http://static.tumblr.com/mtdphun/BP8mmk1pe/hei.jpg"></td><!-- PORTRAIT IMAGE -- CHANGE THE URL TO CHANGE THE IMAGE -->
  248. <!-- INFORMATION SECTION --><td id="stats">
  249. <span class="info" id="a">Name:</span> Hei</span></br>
  250. <span class="info" id="b">Race:</span> Contractor</span></br>
  251. <span class="info" id="c">Age:</span> 23</span></br>
  252. <span class="info" id="d">Contract:</span> Electricity</span></br>
  253. <span class="info" id="e">Remunerance:</span> None</span></br>
  254. <!-- TO MAKE THESE LINES, COPY AND PASTE A LINE AND THEN CHANGE THE ID AS YOU ADD MORE LINES -- START WITH id="a" then id="b" , etc. -->
  255. </td>
  256. </tr></table>
  257. <!-- ABOUT SECTION --><div id="about">Li Shenshung, Hei, and BK201 are all names for this Chinese contractor. His ability is to manipulate electricity at will, even at a quantum level. Hei enjoys eating a lot of food and looking at the stars through his telescope.</div>
  258. </div><!-- END FAMILY BLOCK -->
  259. <!-- to add more blocks, copy and paste everything from START FAMILY BLOCK to END FAMILY BLOCK underneath. they will line up from the left, then after two blocks, start a new line. -->
  260.  
  261. <div id="family">
  262. <table cellpadding="0" cellspacing="10" width="100%"><tr>
  263. <td id="portrait"><img src="http://static.tumblr.com/mtdphun/7jdmloc5m/yin.jpg"></td>
  264. <td id="stats">
  265. <span class="info" id="a">Name:</span> Yin</span></br>
  266. <span class="info" id="b">Race:</span> Doll</span></br>
  267. <span class="info" id="c">Age:</span> 16</span></br>
  268. <span class="info" id="d">Medium:</span> Water</span></br>
  269. </td>
  270. </tr></table>
  271. <div id="about">Yin, also known as Kirsi, is a doll from Scandinavia. She works with Hei, acting as a guide and partner for him (although fandom says its more than just a partnership wink wink). </div>
  272. </div>
  273.  
  274. <div id="family">
  275. <table cellpadding="0" cellspacing="10" width="100%"><tr>
  276. <td id="portrait"><img src="http://static.tumblr.com/mtdphun/1Jtmlochn/huang.jpg"></td>
  277. <td id="stats">
  278. <span class="info" id="a">Name:</span> Huang</span></br>
  279. <span class="info" id="b">Race:</span> Human</span></br>
  280. <span class="info" id="c">Age:</span> old</span></br>
  281. <span class="info" id="d">Affiliation:</span> Syndicate</span></br>
  282. </td>
  283. </tr></table>
  284. <div id="about">Huang got roped into contractors and assassinations and the like against his will, and he's not afraid to show that. He doesn't like contractors very much, and is generally very grumpy and uncooperative.</div>
  285. </div>
  286.  
  287. <div id="family">
  288. <table cellpadding="0" cellspacing="10" width="100%"><tr>
  289. <td id="portrait"><img src="http://static.tumblr.com/mtdphun/DB3mlocn4/mao.jpg"></td>
  290. <td id="stats">
  291. <span class="info" id="a">Name:</span> Mao</span></br>
  292. <span class="info" id="b">Race:</span> Contractor</span></br>
  293. <span class="info" id="c">Age:</span> idk</span></br>
  294. <span class="info" id="d">Contract:</span> body switching</span></br>
  295. <span class="info" id="e">Remunerance:</span> Filled</span></br>
  296. </td>
  297. </tr></table>
  298. <div id="about">Mao is a sassy contractor stuck in the body of a small black cat, hence the codename. His ability is to switch bodies with other animals. His contract was fulfilled when his original body was destroyed, leaving himself stuck in a cat.</div>
  299. </div>
  300.  
  301. <!-- END FAMILY BLOCKS -->
  302.  
  303. </div><!-- END WRAP -->
  304.  
  305. </div><!-- END CONTAINER -->
  306.  
  307. </body></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!