API tools faq
paste
Advertisement
Guest User

rpers

a guest
Feb 27th, 2017
85
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 24.36 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3. <title>{Title}</title>
  4.  
  5. <!--
  6. |
  7. | Page #2 by raiidens (@ tumblr)
  8. | Published June 2016
  9. | Ver. 1.00
  10. |
  11. | Edit as much as you like, but please do not
  12. | claim as your own work, and leave credit somewhere.
  13. |
  14. | Notes:
  15. | 1. I tried to point out where most of the colour options are. You can use ctrl+f to search for them or just look through.
  16. | 2. Ctrl+f "edit page title" to start customizing. Use the template and the example to help you add the content in.
  17. |
  18. | Credits:
  19. | Google Fonts - https://www.google.com/fonts
  20. | jQuery - https://jquery.com/
  21. | jQuery UI - https://jqueryui.com/
  22. |
  23. -->
  24.  
  25. <link href='https://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'>
  26. <link href='https://fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css'>
  27. <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
  28.  
  29. <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
  30. <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  31.  
  32. <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  33.  
  34. <style type="text/css">
  35. .tooltiptheme {
  36. border-radius: 5px;
  37. border: 0.5px solid #000000;
  38. background: #FFFFFF;
  39. color: #000000;
  40. font-variant: small-caps;
  41. font-size: 10pt;
  42. line-height: 16px;
  43. }
  44.  
  45. ::-webkit-scrollbar {
  46. width: 8px;
  47. height: 4px;
  48. background: #DDDDDD;
  49. }
  50. ::-webkit-scrollbar-thumb {
  51. background-color: #000000;
  52. -webkit-border-radius: 0ex;
  53. border: 2px double #DDDDDD;
  54. }
  55.  
  56. .tmblr-iframe {display: none !important;}
  57.  
  58. *::selection {background-color: #000000; color: #FFFFFF;}
  59. *::-moz-selection {background-color: #000000; color: #FFFFFF;}
  60. *::-webkit-selection {background-color: #000000; color: #FFFFFF;}
  61.  
  62. html, body, p, h1, h2, h3, h4, h5, h6, blockquote {
  63. margin: 0px;
  64. padding: 0px;
  65. list-style: none;
  66. }
  67. p {margin: 10px; margin-bottom:10px;}
  68. body {
  69. background-color: #000000; /* background colour */
  70. color: #000000; /* text colour */
  71. font-family: 'Montserrat', sans-serif;
  72. background-image: url(''); /* background image */
  73. background-attachment: fixed;
  74. overflow: auto;
  75. }
  76.  
  77. a {
  78. color: #1111FF; /* link colour */
  79. -webkit-transition: all 0.4s ease-in-out;
  80. -moz-transition: all 0.4s ease-in-out;
  81. -o-transition: all 0.4s ease-in-out;
  82. transition: all 0.4s ease-in-out;
  83. }
  84. a:hover {color: #000000;} /* link hover colour */
  85.  
  86. #headercont {
  87. width: 410px;
  88. margin: 20px auto;
  89. padding: 20px;
  90. padding-bottom: 40px;
  91. background-color: #05F19F; /* header background colour */
  92. background-image: url('http:');
  93. background-size: cover;
  94. background-position: center;
  95. background-repeat: no-repeat;
  96. border: solid 5px #000000;
  97. }
  98.  
  99. .headeri {
  100. position: absolute;
  101. margin-top: -20px;
  102. margin-left: -20px;
  103. width: 450px;
  104. height: 150px;
  105. background-image: url('http:');
  106. background-size: cover;
  107. background-position: center;
  108. background-repeat: no-repeat;
  109. }
  110.  
  111. #title {
  112. position: relative;
  113. font-family: 'Bangers', cursive;
  114. font-size: 20pt;
  115. text-align: center;
  116. color: #000000; /* header title colour */
  117. }
  118.  
  119. #desc {
  120. position: relative;
  121. height: auto;
  122. max-height: 53px;
  123. padding-right: 10px;
  124. overflow-y: auto;
  125. font-size: 11pt;
  126. color: #000000; /* header description colour */
  127. }
  128. #desc::-webkit-scrollbar {
  129. width: 5px;
  130. height: 4px;
  131. background: #888888;
  132. }
  133. #desc::-webkit-scrollbar-thumb {
  134. background-color: #000000;
  135. border: 0px;
  136. }
  137.  
  138. #mlinkcont {
  139. position: absolute;
  140. margin-top: 20px;
  141. margin-left: -17px;
  142. -webkit-backface-visibility: hidden;
  143. -ms-transform: rotate(2deg);
  144. -webkit-transform: rotate(2deg);
  145. transform: rotate(2deg);
  146. }
  147.  
  148. .mlink {
  149. position: relative;
  150. width: 100px;
  151. height: auto;
  152. padding: 10px 0px;
  153. text-align: center;
  154. background-color: #FFFFFF; /* nav link background colour */
  155. color: #000000; /* nav link text colour */
  156. border: solid 2px #000000;
  157. margin-right: 8px;
  158. margin-bottom: 8px;
  159. float: left;
  160. font-family: 'Bangers', cursive;
  161. border-radius: 0px;
  162. -webkit-backface-visibility: hidden;
  163. -webkit-transition: all 0.4s ease-in-out;
  164. -moz-transition: all 0.4s ease-in-out;
  165. -o-transition: all 0.4s ease-in-out;
  166. }
  167. .mlink:after, .mlink:before {
  168. top: 100%;
  169. left: 50%;
  170. border: solid transparent;
  171. content: " ";
  172. height: 0px;
  173. width: 0px;
  174. position: absolute;
  175. pointer-events: none;
  176. -webkit-transition: all 0.4s ease-in-out;
  177. -moz-transition: all 0.4s ease-in-out;
  178. -o-transition: all 0.4s ease-in-out;
  179. }
  180. .mlink:after {
  181. border-color: rgba(0, 0, 0, 0);
  182. border-top-color: #FFFFFF;
  183. border-width: 0px;
  184. margin-left: -15px;
  185. margin-top: -1px;
  186. }
  187. .mlink:before {
  188. border-color: rgba(0, 0, 0, 0);
  189. border-top-color: #000000;
  190. border-width: 0px;
  191. margin-left: -15px;
  192. }
  193. .mlink:hover {
  194. background-color: #F3D131;
  195. color: #000000;
  196. border: solid 2px #000000;
  197. border-radius: 10px;
  198. }
  199. .mlink:hover:after {
  200. border-top-color: #F3D131;
  201. border-width: 10px;
  202. margin-left: -25px;
  203. }
  204. .mlink:hover:before {
  205. border-top-color: #000000;
  206. border-width: 13px;
  207. margin-left: -28px;
  208. }
  209. .mlink a {color: #000000;}
  210. .mlink:hover a {color: #000000;}
  211.  
  212. .itemcont {
  213. margin: 0 auto;
  214. width: 740px;
  215. width: 976px;
  216. }
  217. @media screen and (max-width: 800px) {
  218. .itemcont {width: 740px;}
  219. }
  220.  
  221. .item {
  222. width: 170px;
  223. height: 220px;
  224. padding: 15px;
  225. float: left;
  226. margin: 15px;
  227. background-color: #FFFFFF; /* item background colour */
  228. border: solid 7px #000000; /* item border colour */
  229. overflow: hidden;
  230. -webkit-backface-visibility: hidden;
  231. -webkit-transform: translateZ(0) scale(1.0, 1.0);
  232. }
  233.  
  234. .itempic {
  235. margin-bottom: 15px;
  236. height: 100px;
  237. height: 150px;
  238. width: 166px;
  239. border: solid 2px #000000;
  240. background-color: gray;
  241. background-size: cover;
  242. background-repeat: no-repeat;
  243. background-position: center;
  244. }
  245.  
  246. .itemp {
  247. position: absolute;
  248. height: 150px;
  249. width: 166px;
  250. z-index: -1;
  251. -webkit-backface-visibility: hidden;
  252. -webkit-transition: all 0.5s ease-in-out;
  253. -moz-transition: all 0.5s ease-in-out;
  254. -o-transition: all 0.5s ease-in-out;
  255. transition: all 0.5s ease-in-out;
  256. }
  257.  
  258. .itemp1 {
  259. background-color: #0000FF; /* item picture backing colour 1 */
  260. -ms-transform: rotate(-7deg);
  261. -webkit-transform: rotate(-7deg);
  262. transform: rotate(-7deg);
  263. }
  264. .item:hover .itemp1 {
  265. -ms-transform: rotate(6deg);
  266. -webkit-transform: rotate(6deg);
  267. transform: rotate(6deg);
  268. }
  269.  
  270. .itemp2 {
  271. background-color: #FF0000; /* item picture backing 2 */
  272. -ms-transform: rotate(4deg);
  273. -webkit-transform: rotate(4deg);
  274. transform: rotate(4deg);
  275. }
  276. .item:hover .itemp2 {
  277. -ms-transform: rotate(-5deg);
  278. -webkit-transform: rotate(-5deg);
  279. transform: rotate(-5deg);
  280. }
  281.  
  282. .itemp3 {
  283. background-color: #52038D; /* item picture backing 3 */
  284. -ms-transform: rotate(9deg);
  285. -webkit-transform: rotate(9deg);
  286. transform: rotate(9deg);
  287. }
  288. .item:hover .itemp3 {
  289. -ms-transform: rotate(-8deg);
  290. -webkit-transform: rotate(-8deg);
  291. transform: rotate(-8deg);
  292. }
  293.  
  294. .itemtitle {
  295. position: relative;
  296. top: -30px;
  297. left: -2px;
  298. font-family: 'Bangers', cursive;
  299. font-size: 20pt;
  300. text-align: center;
  301. line-height: 22px;
  302. color: #000000; /* item title colour */
  303. text-shadow: -1px -1px 0 #FFFFFF, 1px -1px 0 #FFFFFF, -1px 1px 0 #FFFFFF, 1px 1px 0 #FFFFFF; /* item border colour */
  304. z-index: 9;
  305. -ms-transform: rotate(-3deg);
  306. -webkit-transform: rotate(-3deg) translateZ(0) scale(1.0, 1.0);
  307. transform: rotate(-3deg);
  308. }
  309.  
  310. .itemcontent {
  311. position: relative;
  312. top: -25px;
  313. width: 165px;
  314. height: 50px;
  315. font-size: 10pt;
  316. padding: 3px;
  317. overflow: auto;
  318. }
  319. .itemcontent::-webkit-scrollbar {
  320. width: 5px;
  321. height: 4px;
  322. background: #888888;
  323. }
  324. .itemcontent::-webkit-scrollbar-thumb {
  325. background-color: #000000;
  326. border: 0px;
  327. }
  328. </style>
  329. <script>
  330. $(document).tooltip({
  331. track: true,
  332. tooltipClass: "tooltiptheme"
  333. });
  334. </script>
  335. </head>
  336. <body>
  337.  
  338. <div id="headercont"><div class="headeri"></div>
  339. <div id="title">
  340.  
  341. <!-- Edit page title below -->
  342.  
  343. Nanbaka RP Blogs
  344.  
  345. <!-- End page title -->
  346.  
  347. </div>
  348. <div id="desc">
  349.  
  350. <!-- Edit page description below -->
  351.  
  352. If you're looking for a list of the rpers in nanbaka this is where you'll find them.
  353.  
  354. <!-- End description -->
  355.  
  356. </div>
  357. <div id="mlinkcont">
  358. <a href="/"><div class="mlink">home</div></a>
  359. <a href="/ask"><div class="mlink">ask</div></a>
  360. <a href="http://tumblr.com"><div class="mlink">dash</div></a>
  361. <a href="http://raiidens.tumblr.com/themesbyraiidens"><div class="mlink tooltip" title="by raiidens">theme</div></a>
  362. </div>
  363. </div>
  364.  
  365. <div class="itemcont">
  366.  
  367.  
  368.  
  369.  
  370.  
  371.  
  372. <!-- Edit content down here -->
  373.  
  374. <!-- Below is an example -->
  375.  
  376.  
  377. <div class="item">
  378. <div class="itemp"></div>
  379. <div class="itempic" style="background-image: url('https://68.media.tumblr.com/c0c0de2f29b2290d5dad24067ad64115/tumblr_inline_olec2rhfl51sg6ctn_540.png');"></div>
  380. <div class="itemtitle">Momoko</div>
  381. <div class="itemcontent">
  382. <a href="https://nanbaswarden.tumblr.com/">Nanbaswarden</a>
  383. <br> <a href="http://ascarycutepeach.tumblr.com/">Ascarycutepeach</a></a>
  384. </div>
  385. </div>
  386.  
  387. <div class="item">
  388. <div class="itemp"></div>
  389. <div class="itempic" style="background-image: url('https://68.media.tumblr.com/6019b9699459d6756f18171299f0a25d/tumblr_inline_okb5mvgNVD1sg6ctn_540.png');"></div>
  390. <div class="itemtitle">Hajime</div>
  391. <div class="itemcontent">
  392. <a href="https://workaholicguard.tumblr.com/">Workaholicguard</a>
  393. <br> <a href="https://spartansupervisor.tumblr.com/">spartansupervisor</a></a>
  394. </div>
  395. </div>
  396.  
  397.  
  398.  
  399.  
  400.  
  401.  
  402. <!-- And here is a template, add as many as you want -->
  403.  
  404.  
  405.  
  406. <div class="item">
  407. <div class="itemp"></div>
  408. <div class="itempic" style="background-image: url('https://68.media.tumblr.com/4df67660ee5e972e6452fc7482b68fa7/tumblr_inline_okb661qsg91sg6ctn_540.png');"></div>
  409. <div class="itemtitle">Seitaro</div>
  410. <div class="itemcontent">
  411. <a href="http://nerveguarded.tumblr.com/">Nerveguarded</a>
  412. <br> <a href="https://guxrd13.tumblr.com/">Guxrd13</a>
  413. <br><a href="https://crybabyguard.tumblr.com/">Crybabyguard</a>
  414. </div>
  415. </div>
  416.  
  417. <div class="item">
  418. <div class="itemp"></div>
  419. <div class="itempic" style="background-image: url('https://68.media.tumblr.com/12013c17a12826e1271f6b8bc7702cb0/tumblr_inline_okb681za6S1sg6ctn_540.png');"></div>
  420. <div class="itemtitle">Yamato</div>
  421. <div class="itemcontent">
  422. <a href="https://loudxguard.tumblr.com/">Loudxguard</a>
  423. </div>
  424. </div>
  425.  
  426. <div class="item">
  427. <div class="itemp"></div>
  428. <div class="itempic" style="background-image: url('https://68.media.tumblr.com/95dd5f55d2a886cca592ce423d1792af/tumblr_inline_okb6n0ROZe1sg6ctn_540.png');"></div>
  429. <div class="itemtitle">Jyugo</div>
  430. <div class="itemcontent">
  431. <a href="http://15breaked.tumblr.com/">15breaked</a>
  432. <br> <a href="http://number-1315.tumblr.com/">number-1315</a>
  433. <a href="https://nanbakas1115.tumblr.com/">nanbakas1115</a>
  434. <br> <a href="http://allxtment.tumblr.com/">allxtment, multimuse</a> </br>
  435. </div>
  436. </div>
  437.  
  438. <div class="item">
  439. <div class="itemp"></div>
  440. <div class="itempic" style="background-image: url('https://68.media.tumblr.com/0514fd8f6affa67d1a3d41252179eb9a/tumblr_inline_okb6kzsLxQ1sg6ctn_540.png');"></div>
  441. <div class="itemtitle">Uno</div>
  442. <div class="itemcontent">
  443. <a href="http://luckygambler-uno.tumblr.com/">Luckygambler-uno</a>
  444. <br> <a href="https://11-thegambler.tumblr.com/">11-thegambler</a>
  445. <a href="https://nanbakas1115.tumblr.com/">nanbakas1115</a>
  446. <br><a href="https://nanbaka-nxmber-11.tumblr.com/">nanbaka-nxmber-11</br></a>
  447. <a href="https://handsomegambler.tumblr.com/">handsomegambler</a>
  448. </div>
  449. </div>
  450.  
  451. <div class="item">
  452. <div class="itemp"></div>
  453. <div class="itempic" style="background-image: url('https://68.media.tumblr.com/e41b093774ce1ff7c2a975dd14d1cd8c/tumblr_inline_okb6cxcKd31sg6ctn_540.png');"></div>
  454. <div class="itemtitle">Nico</div>
  455. <div class="itemcontent">
  456. <a href="https://sideceffects.tumblr.com/">sideceffects</a>
  457. <br><a href="https://bandaged-heart.tumblr.com/">bandaged-heart</a>
  458. <br><a href="https://nanbasresidentotaku.tumblr.com/">Nanbasresidentotaku</a>
  459. </div>
  460. </div>
  461.  
  462. <div class="item">
  463. <div class="itemp"></div>
  464. <div class="itempic" style="background-image: url('https://68.media.tumblr.com/889cf0b5719629b7525e2d63f3167d5c/tumblr_inline_okb6faWdSa1sg6ctn_540.png');"></div>
  465. <div class="itemtitle">Rock</div>
  466. <div class="itemcontent">
  467. <a href="http://inmate-1369.tumblr.com/">inmate-1369</a>
  468. </div>
  469. </div>
  470.  
  471. <div class="item">
  472. <div class="itemp"></div>
  473. <div class="itempic" style="background-image: url('https://68.media.tumblr.com/cb4992c084db299a47905dc21669c8c1/tumblr_inline_okqrv15S7Z1sg6ctn_540.png');"></div>
  474. <div class="itemtitle">Tsukumo</div>
  475. <div class="itemcontent">
  476. <a href="https://1399tsukumo.tumblr.com/">1399tsukumo</a>
  477. </div>
  478. </div>
  479.  
  480. <div class="item">
  481. <div class="itemp"></div>
  482. <div class="itempic" style="background-image: url('https://68.media.tumblr.com/5a48dc0c6f0d840121e7600d30f4ae92/tumblr_inline_okb7e9rJ2B1sg6ctn_540.jpg');"></div>
  483. <div class="itemtitle">Kiji</div>
  484. <div class="itemcontent">
  485. <a href="https://flawlessguard.tumblr.com/">Flawlessguard</a>
  486. <br> <a href="https://the-drag-queen.tumblr.com/">the-drag-queen</a> </br
  487. </div>
  488. </div>
  489.  
  490. <div class="item">
  491. <div class="itemp"></div>
  492. <div class="itempic" style="background-image: url('https://68.media.tumblr.com/1281c5ae341febf0a795b242990539b3/tumblr_inline_okb7h0ENx51sg6ctn_540.png');"></div>
  493. <div class="itemtitle">Honey</div>
  494. <div class="itemcontent">
  495. <a href="https://wired-inmate.tumblr.com/">wired-inmate</a>
  496. </div>
  497. </div>
  498.  
  499. <div class="item">
  500. <div class="itemp"></div>
  501. <div class="itempic" style="background-image: url('https://68.media.tumblr.com/0d0590a269f254e0ef244ba7ef6f66ba/tumblr_inline_okb7jtudpm1sg6ctn_540.png');"></div>
  502. <div class="itemtitle">Trois</div>
  503. <div class="itemcontent">
  504. <a href="https://prisoner303.tumblr.com/">Prisoner303</a>
  505. </div>
  506. </div>
  507.  
  508.  
  509. <div class="item">
  510. <div class="itemp"></div>
  511. <div class="itempic" style="background-image: url('https://68.media.tumblr.com/651bb9c03d1ed8318598ac1fbc47c15e/tumblr_inline_okb7uxkPWl1sg6ctn_540.png');"></div>
  512. <div class="itemtitle">Samon</div>
  513. <div class="itemcontent">
  514. <a href="http://monkey-guard.tumblr.com/">Monkey-Guard</a>
  515. </div>
  516. </div>
  517.  
  518. <div class="item">
  519. <div class="itemp"></div>
  520. <div class="itempic" style="background-image: url('https://68.media.tumblr.com/5b4b2d24b2e3bf69c3b9646dfb635b56/tumblr_inline_okqril5kSN1sg6ctn_540.png');"></div>
  521. <div class="itemtitle">Rokuriki</div>
  522. <div class="itemcontent">
  523. <a href="https://building5guards.tumblr.com/">building5guards</a>
  524. </div>
  525. </div>
  526.  
  527. <div class="item">
  528. <div class="itemp"></div>
  529. <div class="itempic" style="background-image: url('https://68.media.tumblr.com/e5e34920e7411edb38f6e02680b9a682/tumblr_inline_okqrm10zHb1sg6ctn_540.png');"></div>
  530. <div class="itemtitle">Kokoriki</div>
  531. <div class="itemcontent">
  532. <a href="https://building5guards.tumblr.com/">building5guards</a>
  533. </div>
  534. </div>
  535.  
  536.  
  537. <div class="item">
  538. <div class="itemp"></div>
  539. <div class="itempic" style="background-image: url('https://68.media.tumblr.com/5d9633878afda639a4314ad31e1a4803/tumblr_inline_okb804hCZm1sg6ctn_540.png');"></div>
  540. <div class="itemtitle">Enki</div>
  541. <div class="itemcontent">
  542. <a href="https://nanbakasmonkeydemon.tumblr.com/">Nanbakasmonkeydemon</a>
  543. </div>
  544. </div>
  545.  
  546.  
  547. <div class="item">
  548. <div class="itemp"></div>
  549. <div class="itempic" style="background-image: url('https://68.media.tumblr.com/524a7735c4b099bfd7d99827fb8993ae/tumblr_inline_okb82pgiuH1sg6ctn_540.png');"></div>
  550. <div class="itemtitle">Ruka</div>
  551. <div class="itemcontent">
  552. <a href="https://lovelywaterguard.tumblr.com/">lovelywaterguard</a>
  553. </div>
  554. </div>
  555.  
  556. <div class="item">
  557. <div class="itemp"></div>
  558. <div class="itempic" style="background-image: url('https://68.media.tumblr.com/04d40594f104f858d450578da243cfb7/tumblr_inline_olebwdLEfc1sg6ctn_540.png');"></div>
  559. <div class="itemtitle">Houzuki</div>
  560. <div class="itemcontent">
  561. <a href="http://5ivories.tumblr.com/">5ivories</a>
  562. </div>
  563. </div>
  564.  
  565. <div class="item">
  566. <div class="itemp"></div>
  567. <div class="itempic" style="background-image: url('https://68.media.tumblr.com/6f0a535d02cd6186088c40c309c843a4/tumblr_inline_okb878pBmq1sg6ctn_540.png');"></div>
  568. <div class="itemtitle">Qi</div>
  569. <div class="itemcontent">
  570. <a href="https://prisoner-0571.tumblr.com/">prisoner-0571</a>
  571. </div>
  572. </div>
  573.  
  574.  
  575. <div class="item">
  576. <div class="itemp"></div>
  577. <div class="itempic" style="background-image: url('https://68.media.tumblr.com/6d8dfcf7c1b247cc835b9b75707497c2/tumblr_inline_okb89uPPHX1sg6ctn_540.png');"></div>
  578. <div class="itemtitle">Upa</div>
  579. <div class="itemcontent">
  580. <a href="https://0558-qigongmaster.tumblr.com/">0558-qigongmaster</a>
  581. </div>
  582. </div>
  583.  
  584.  
  585. <div class="item">
  586. <div class="itemp"></div>
  587. <div class="itempic" style="background-image: url('https://68.media.tumblr.com/e1923e150bcc0126879b1e19e1ba0353/tumblr_inline_okb8b9nsp31sg6ctn_540.png');"></div>
  588. <div class="itemtitle">Liang</div>
  589. <div class="itemcontent">
  590. <a href="https://0502liang.tumblr.com/">0502Liang</a>
  591. </div>
  592. </div>
  593.  
  594. <div class="item">
  595. <div class="itemp"></div>
  596. <div class="itempic" style="background-image: url('https://68.media.tumblr.com/a65fe8086e4e9230c1bc36a2825f1869/tumblr_inline_okb8vthuF11sg6ctn_540.png');"></div>
  597. <div class="itemtitle">Kenshirou</div>
  598. <div class="itemcontent">
  599. <a href="https://dogguarded.tumblr.com/">dogguarded</a>
  600. <br> <a href="https://loyal-guard.tumblr.com/">loyal-guard</a>
  601. </div>
  602. </div>
  603.  
  604. <div class="item">
  605. <div class="itemp"></div>
  606. <div class="itempic" style="background-image: url('https://68.media.tumblr.com/bd8e3b4e460dc7d7cb810db58ebb54ea/tumblr_inline_okb8z7UCQR1sg6ctn_540.png');"></div>
  607. <div class="itemtitle">Hitoshi</div>
  608. <div class="itemcontent">
  609. <a href="https://prettyboyguard.tumblr.com/">prettyboyguard</a>
  610. <br><a href="http://lolitapriince.tumblr.com/">lolitapriince</a>
  611. </div>
  612. </div>
  613.  
  614. <div class="item">
  615. <div class="itemp"></div>
  616. <div class="itempic" style="background-image: url('https://68.media.tumblr.com/55eaffbff36afc94ded422974a17f76a/tumblr_inline_okb91o8ny61sg6ctn_540.png');"></div>
  617. <div class="itemtitle">Musashi</div>
  618. <div class="itemcontent">
  619. <a href="http://blazebreaked.tumblr.com/">blazebreaked</a>
  620. </div>
  621. </div>
  622.  
  623. <div class="item">
  624. <div class="itemp"></div>
  625. <div class="itempic" style="background-image: url('https://68.media.tumblr.com/1744238c9f78b76d994368171197e11c/tumblr_inline_okb9hhIZjK1sg6ctn_540.png');"></div>
  626. <div class="itemtitle">Mao</div>
  627. <div class="itemcontent">
  628. <a href="https://shittycatguard.tumblr.com/">shittycatguard</a>
  629. </div>
  630. </div>
  631.  
  632. <div class="item">
  633. <div class="itemp"></div>
  634. <div class="itempic" style="background-image: url('https://68.media.tumblr.com/8005a4a4153699f96ee326dffb95200c/tumblr_inline_okb9iw5Ka11sg6ctn_540.png');"></div>
  635. <div class="itemtitle">Mitsuru</div>
  636. <div class="itemcontent">
  637. <a href="https://loudmouth-broadcaster.tumblr.com/">Loudmouth-broadcaster</a>
  638. </div>
  639. </div>
  640.  
  641. <div class="item">
  642. <div class="itemp"></div>
  643. <div class="itempic" style="background-image: url('https://68.media.tumblr.com/99b9842967307019ed39183d557d1f76/tumblr_inline_okb9j4ayqF1sg6ctn_540.png');"></div>
  644. <div class="itemtitle">Elf</div>
  645. <div class="itemcontent">
  646. <a href="http://demonelf.tumblr.com/">Demonelf</a>
  647. </div>
  648. </div>
  649.  
  650. <div class="item">
  651. <div class="itemp"></div>
  652. <div class="itempic" style="background-image: url('https://68.media.tumblr.com/ef893bdad2a86656fe4ce50bd6ab8e67/tumblr_inline_om2dud1mHJ1sg6ctn_540.png');"></div>
  653. <div class="itemtitle">610</div>
  654. <div class="itemcontent">
  655. <a href="https://prisoner610.tumblr.com/">Prisoner610</a>
  656. </div>
  657. </div>
  658.  
  659. <div class="item">
  660. <div class="itemp"></div>
  661. <div class="itempic" style="background-image: url('https://68.media.tumblr.com/099d75f6c13fe830f37f09ddc698d23c/tumblr_inline_okbwmy4CFt1sg6ctn_540.jpg');"></div>
  662. <div class="itemtitle">Marcus</div>
  663. <div class="itemcontent">
  664. <a href="https://featherguarded.tumblr.com/">A oc guard working in building 5</a>
  665. </div>
  666. </div>
  667.  
  668. <div class="item">
  669. <div class="itemp"></div>
  670. <div class="itempic" style="background-image: url('https://68.media.tumblr.com/f293842df2749ea755dd8d4670fc296d/tumblr_inline_okbx9ccsTm1sg6ctn_540.png');"></div>
  671. <div class="itemtitle">Matthew</div>
  672. <div class="itemcontent">
  673. <a href="cherry-inmate">A oc inmate residing in building 13</a>
  674. </div>
  675. </div>
  676.  
  677. <div class="item">
  678. <div class="itemp"></div>
  679. <div class="itempic" style="background-image: url('https://68.media.tumblr.com/817c95f1c3ccfa5042db34cd3eb43911/tumblr_inline_okbx043M7D1sg6ctn_540.png');"></div>
  680. <div class="itemtitle">Lotus</div>
  681. <div class="itemcontent">
  682. <a href="https://pinklotus-guard.tumblr.com/">A oc guard working in building 4</a>
  683. </div>
  684. </div>
  685.  
  686. <div class="item">
  687. <div class="itemp"></div>
  688. <div class="itempic" style="background-image: url('https://68.media.tumblr.com/05c706c41eedb377db9c893dbbae4fb2/tumblr_inline_okbxcmvUy61sg6ctn_540.png');"></div>
  689. <div class="itemtitle">Saiha</div>
  690. <div class="itemcontent">
  691. <a href="https://nanbasnake-doctor.tumblr.com/">A doctor in nanba prison</a>
  692. </div>
  693. </div>
  694.  
  695. <div class="item">
  696. <div class="itemp"></div>
  697. <div class="itempic" style="background-image: url('/');"></div>
  698. <div class="itemtitle">Alexander</div>
  699. <div class="itemcontent">
  700. <a href="https://goldenguarded.tumblr.com/">A guard oc working in building 4</a>
  701. </div>
  702. </div>
  703.  
  704. <div class="item">
  705. <div class="itemp"></div>
  706. <div class="itempic" style="background-image: url('https://68.media.tumblr.com/f8f6f4ddedd2c5d8a1e6b21aff4ab4cf/tumblr_inline_okbxpp0kxJ1sg6ctn_540.png');"></div>
  707. <div class="itemtitle">Rini</div>
  708. <div class="itemcontent">
  709. <a href="https://mama-guard.tumblr.com/">OC blog for Jyugo's mother and a guard in building 13</a>
  710. </div>
  711. </div>
  712.  
  713. <div class="item">
  714. <div class="itemp"></div>
  715. <div class="itempic" style="background-image: url('https://68.media.tumblr.com/614a8b63eec1bde36c5594235e778c33/tumblr_inline_okqrwyUNTZ1sg6ctn_540.png');"></div>
  716. <div class="itemtitle">Vasillis</div>
  717. <div class="itemcontent">
  718. <a href="https://silverguard.tumblr.com/">A guard oc working in building 3</a>
  719. </div>
  720. </div>
  721.  
  722. <!-- End content -->
  723.  
  724.  
  725. </div>
  726.  
  727. </body>
  728.  
  729. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  730. <script type="text/javascript">
  731. $(document).ready(function() {
  732.  
  733. $(".item").each(function(index) {
  734. if (index % 3 == 0)
  735. $(this).find(".itemp").addClass("itemp1");
  736. else if (index % 3 == 1)
  737. $(this).find(".itemp").addClass("itemp2");
  738. else
  739. $(this).find(".itemp").addClass("itemp3");
  740. });
  741.  
  742. $(".itemtitle").each(function(index) {
  743. if ($(this).height() < 22) {
  744. $(this).parent().find(".itemcontent").css({"top" : "0px"});
  745. } else if ($(this).height() > 30) {
  746. $(this).parent().find(".itemcontent").css("height", "30px");
  747. }
  748. });
  749. });
  750. </script>
  751.  
  752. </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!