API tools faq
paste
Advertisement
alokasenna

Relationships 01

alokasenna
Apr 2nd, 2014
3,155
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.09 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>
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5.  
  6. <!-----PAGE 09 BY LAUNTS (http://launts.tumblr.com/). DON'T STEAL OR REDISTRIBUTE. THANK.----->
  7.  
  8. <head>
  9. <title>Relations</title> <!-----CHANGE THE TITLE ON THE TAB HERE----->
  10. <link rel="shortcut icon" href="http://www.electric-design.co.uk/wp-content/uploads/2013/09/keane-under-the-iron-sea-cover.jpg"> <!-----CHANGE THE ICON ON THE TAB HERE----->
  11. <link rel="alternate" type="application/rss+xml" href="http://deceitfulgod.tumblr.com/rss">
  12.  
  13.  
  14. <style type="text/css">
  15.  
  16. ::-webkit-scrollbar-thumb {
  17. background-color: #87a168; /*CHANGE THE SCROLLBAR*/
  18. height:auto;
  19. border-bottom:none;
  20. }
  21. ::-webkit-scrollbar {
  22. height:9px;
  23. width:5px;
  24. background-color: #87a168; /*CHANGE THE SCROLLBAR*/
  25. border: 2px solid white;
  26.  
  27. }
  28.  
  29. ::selection {
  30. background-color: #87a168; /*CHANGE THE SELECTION BG COLOR*/
  31. color: white; /*CHANGE THE SELECTION TEXT COLOR*/
  32. }
  33.  
  34.  
  35. @font-face {
  36. font-family: keane;
  37. src: url('http://static.tumblr.com/6acw4l0/wM4n274xj/utis_2_.ttf') format('truetype');
  38. font-weight: normal;
  39. font-style: normal;
  40.  
  41. }
  42.  
  43.  
  44.  
  45. body {
  46. font-family: Calibri;
  47. font-weight: normal;
  48. font-size: 11px;
  49. }
  50.  
  51.  
  52. a {
  53. text-decoration: none;
  54. -webkit-transition: 0.5s;
  55. -moz-transition: 0.5s;
  56. transition: 0.5s;
  57. color: #79b3a8;
  58. }
  59.  
  60. a: hover {
  61. text-decoration: none;
  62. -webkit-transition: 0.5s;
  63. -moz-transition: 0.5s;
  64. transition: 0.5s;
  65. color: white;
  66. }
  67.  
  68.  
  69. #containi {
  70. width: 260px;
  71. height: 340px;
  72. border: 2px solid #87a168; /*CHANGE THE FIRST BOX'S BORDER*/
  73. overflow-y: scroll;
  74. margin-top: 150px;
  75. margin-left: 50px;
  76. padding: 20px;
  77. font-family: ARIAL;
  78. position: fixed;
  79. font-size: 10px;
  80. color: #87a168; /*CHANGE THE FIRST BOX'S TEXT*/
  81. text-align: center;
  82. background-color: white; /*CHANGE THE FIRST BOX'S BG*/
  83. }
  84.  
  85. /*SAME APPLIES FOR BOTH BELOW*/
  86.  
  87. #containii {
  88. width: 260px;
  89. height: 360px;
  90. border: 2px solid #87a168;
  91. overflow-y: scroll;
  92. margin-left: 400px;
  93. margin-top: 150px;
  94. padding-top: 0px;
  95. padding-left: 20px;
  96. padding-right: 20px;
  97. padding-bottom: 20px;
  98. font-family: ARIAL;
  99. position: fixed;
  100. font-size: 10px;
  101. color: #87a168;
  102. text-align: center;
  103. background-color: white;
  104. }
  105.  
  106. #containiii {
  107. width: 260px;
  108. height: 340px;
  109. border: 2px solid #87a168;
  110. overflow-y: scroll;
  111. margin-top: 150px;
  112. margin-left: 740px;
  113. padding: 20px;
  114. font-family: ARIAL;
  115. position: fixed;
  116. font-size: 10px;
  117. color: #87a168;
  118. text-align: center;
  119. background-color: white;
  120. }
  121.  
  122. #relationsbox {
  123. margin-top: -20px;
  124. margin-left: 0px;
  125. width: 250px;
  126.  
  127. }
  128.  
  129. #relations {
  130. width: 250px;
  131. height: 150px;
  132. border: 2px solid #87a168; /*CHANGE THE RELATIONS BOX BORDER*/
  133. margin-top: 40px;
  134. background-color: white; /*CHANGE THE RELATIONS BOX BG*/
  135.  
  136. }
  137.  
  138. #chara {
  139. width: 100px;
  140. }
  141.  
  142. #chara img {
  143. width: 100px;
  144. height: 100px;
  145. border-radius: 50%;
  146. border: 2px solid #87a168; /*CHANGE THE IMAGE BORDER*/
  147. margin-top: 5px;
  148. margin-left: 5px;
  149. }
  150.  
  151. #infobox {
  152. margin-top: -100px;
  153. margin-left: 130px;
  154. width: 100px;
  155. height: 100px;
  156. overflow-y: scroll;
  157. padding-left: 3px;
  158. padding-top: 3px;
  159. }
  160.  
  161. .info {
  162. border-left: 20px solid #87a168; /*CHANGE THE LEFT INFO BORDER*/
  163. font-family: ARIAL;
  164. font-size: 12px;
  165. text-transform: uppercase;
  166. color: #87a168; /*CHANGE THE INFO TEXT COLOR*/
  167. text-align: left;
  168. padding-left: 3px;
  169. }
  170.  
  171. .nonetitles {
  172. font-family: keane;
  173. font-size: 30px;
  174. color: #87a168; /*CHANGE THE NONE TITLES COLOR*/
  175. text-transform: uppercase;
  176. letter-spacing: 6px;
  177. margin-top: -47px;
  178. position: fixed;
  179. }
  180.  
  181. .regtitles {
  182. font-family: keane;
  183. font-size: 30px;
  184. color: #87a168; /*CHANGE THE REGULAR TITLES COLOR*/
  185. text-transform: uppercase;
  186. letter-spacing: 6px;
  187. margin-top: -27px;
  188. position: fixed;
  189. }
  190.  
  191. .name {
  192. font-family: Keane;
  193. font-size: 15px;
  194. text-transform: uppercase;
  195. margin-top: -20px;
  196. margin-left: 10px;
  197. }
  198.  
  199. .name:hover {
  200. background-color: #87a168; /*CHANGE THE CHARA NAME BG HOVER*/
  201. }
  202.  
  203. .name a {
  204. color: #87a168; /*CHANGE THE CHARACTER NAME COLOR*/
  205. }
  206.  
  207. .name a:hover {
  208. color: white; /*CHANGE THE CHARACTER NAME HOVER*/
  209. }
  210.  
  211. .none {
  212. font-size: 20px;
  213. padding: 5px;
  214. background-color:#87a168; /*CHANGE THE BG OF THE NONE BOX*/
  215. color: white; /*CHANGE THE TEXT OF THE NONE BOX*/
  216. font-family: ARIAL;
  217. text-transform: uppercase;
  218. margin-top: 100px;
  219. text-align: center;
  220. }
  221.  
  222. .none:hover {
  223. background-color: white; /*CHANGE THE NONE BG HOVER*/
  224. color:#87a168; /*CHANGE THE NONE TEXT HOVER*/
  225. -webkit-transition: 0.8s;
  226. -moz-transition: 0.8s;
  227. transition: 0.8s;
  228. }
  229.  
  230. </style>
  231. </head>
  232.  
  233. <body>
  234.  
  235. <div id="containi">
  236. <div class="nonetitles">
  237. Verse 1 <!--CHANGE THE VERSE TITLE-->
  238. </div>
  239.  
  240.  
  241. <div class="none">
  242. none yet <!--CHANGE THE NONE TITLE-->
  243. </div>
  244. <br><br>
  245. Write your description of your verse that doesn't have any relationships yet. If you do not have such a verse, then scroll down to the very end of this to find out how to change it into a regular verse.<!--CHANGE THE NONE DESCRIPTION-->
  246.  
  247. </div>
  248.  
  249. <div id="containii">
  250. <div class="regtitles">
  251. Verse 2 <!--CHANGE THE VERSE TITLE--->
  252. </div>
  253.  
  254. <div id="relationsbox">
  255. <div id="relations">
  256. <div id="chara">
  257. <img src="https://24.media.tumblr.com/03becd781366f16f808ca7d84941c4a2/tumblr_n3fhmr68tQ1tpb7s5o1_100.jpg"/> <!--CHANGE THE IMAGE FOR YOUR FIRST CHARACTER-->
  258. </div>
  259.  
  260. <div id="infobox">
  261. <div class="info">
  262. <b>url:</b>
  263. </div>
  264. url <!--CHANGE THE URL-->
  265.  
  266. <br><br>
  267.  
  268. <div class="info">
  269. <b>relation:</b>
  270. </div>
  271. relation<!--CHANGE THE RELATIONSHIP-->
  272.  
  273. <br><br>
  274.  
  275. <div class="info">
  276. <b>desc:</b>
  277. </div>
  278. Write your description here. Chances are, it's going to go way past the maximum, but that's alright because a scrollbar will appear. <!--CHANGE THE DESCRIPTION OF THE RELATIONSHIP-->
  279.  
  280. </div>
  281. </div>
  282.  
  283. <div class="name">
  284. <a href="/">Name</a> <!--CHANGE THE URL AND THE NAME-->
  285. </div>
  286. </div>
  287.  
  288.  
  289. <!--DO THE SAME AS ABOVE FOR EVERY BOX-->
  290.  
  291. <div id="relationsbox">
  292. <div id="relations">
  293. <div id="chara">
  294. <img src="https://24.media.tumblr.com/03becd781366f16f808ca7d84941c4a2/tumblr_n3fhmr68tQ1tpb7s5o1_100.jpg"/>
  295. </div>
  296.  
  297. <div id="infobox">
  298. <div class="info">
  299. <b>url:</b>
  300. </div>
  301. url
  302.  
  303. <br><br>
  304.  
  305. <div class="info">
  306. <b>relation:</b>
  307. </div>
  308. relation
  309.  
  310. <br><br>
  311.  
  312. <div class="info">
  313. <b>desc:</b>
  314. </div>
  315. Write your description here. Chances are, it's going to go way past the maximum, but that's alright because a scrollbar will appear.
  316.  
  317. </div>
  318. </div>
  319.  
  320. <div class="name">
  321. <a href="/">Name</a>
  322. </div>
  323. </div>
  324.  
  325. <div id="relationsbox">
  326. <div id="relations">
  327. <div id="chara">
  328. <img src="https://24.media.tumblr.com/03becd781366f16f808ca7d84941c4a2/tumblr_n3fhmr68tQ1tpb7s5o1_100.jpg"/>
  329. </div>
  330.  
  331. <div id="infobox">
  332. <div class="info">
  333. <b>url:</b>
  334. </div>
  335. url
  336.  
  337. <br><br>
  338.  
  339. <div class="info">
  340. <b>relation:</b>
  341. </div>
  342. relation
  343.  
  344. <br><br>
  345.  
  346. <div class="info">
  347. <b>desc:</b>
  348. </div>
  349. Write your description here. Chances are, it's going to go way past the maximum, but that's alright because a scrollbar will appear.
  350.  
  351. </div>
  352. </div>
  353.  
  354. <div class="name">
  355. <a href="/">Name</a>
  356. </div>
  357. </div>
  358. </div>
  359.  
  360. <div id="containiii">
  361. <div class="nonetitles">
  362. Verse 3 <!--CHANGE THE VERSE TITLE-->
  363. </div>
  364.  
  365.  
  366. <div class="none">
  367. none yet <!--CHANGE THE NONE TITLE-->
  368. </div>
  369. <br><br>
  370. Write your description of your verse that doesn't have any relationships yet. If you do not have such a verse, then scroll down to the very end of this to find out how to change it into a regular verse.
  371.  
  372. </div>
  373.  
  374. <!--IF YOU WANT TO ADD MORE VERSES, I'LL TELL YOU BELOW-->
  375.  
  376. <div style="position:fixed;bottom:2px; right:3px; font-size:9px; letter-spacing:1px; font-family:calibri;"><a style="color:#87a168;" href="http://launts.tumblr.com/">@LAUNTS</a></center></div> <!--DO NOT TOUCH THIS. ONLY IF YOU WANT TO CHANGE THE CREDIT COLOR ARE YOU ALLOWED TO DO ANYTHING. IF SO, JUST REPLACE 87A168 WITH WHATEVER.-->
  377.  
  378.  
  379. <!--
  380.  
  381. HOW TO CHANGE A "NONE" VERSE TO A REGULAR VERSE OR VISA VERSA:
  382.  
  383. REPLACE <div class="nonetitles"> WITH <div class="regtitles">
  384. COPY THIS AND PASTE IT BELOW <div class="regtitles">Verse X</div> AS MANY TIMES AS YOU NEED:
  385.  
  386. <div id="relationsbox">
  387. <div id="relations">
  388. <div id="chara">
  389. <img src="https://24.media.tumblr.com/03becd781366f16f808ca7d84941c4a2/tumblr_n3fhmr68tQ1tpb7s5o1_100.jpg"/>
  390. </div>
  391.  
  392. <div id="infobox">
  393. <div class="info">
  394. <b>url:</b>
  395. </div>
  396. url
  397.  
  398. <br><br>
  399.  
  400. <div class="info">
  401. <b>relation:</b>
  402. </div>
  403. relation
  404.  
  405. <br><br>
  406.  
  407. <div class="info">
  408. <b>desc:</b>
  409. </div>
  410. Write your description here. Chances are, it's going to go way past the maximum, but that's alright because a scrollbar will appear.
  411.  
  412. </div>
  413. </div>
  414.  
  415. <div class="name">
  416. <a href="/">Name</a>
  417. </div>
  418. </div>
  419.  
  420. <div id="relationsbox">
  421. <div id="relations">
  422. <div id="chara">
  423. <img src="https://24.media.tumblr.com/03becd781366f16f808ca7d84941c4a2/tumblr_n3fhmr68tQ1tpb7s5o1_100.jpg"/>
  424. </div>
  425.  
  426. <div id="infobox">
  427. <div class="info">
  428. <b>url:</b>
  429. </div>
  430. url
  431.  
  432. <br><br>
  433.  
  434. <div class="info">
  435. <b>relation:</b>
  436. </div>
  437. relation
  438.  
  439. <br><br>
  440.  
  441. <div class="info">
  442. <b>desc:</b>
  443. </div>
  444. Write your description here. Chances are, it's going to go way past the maximum, but that's alright because a scrollbar will appear.
  445.  
  446. </div>
  447. </div>
  448.  
  449. <div class="name">
  450. <a href="/">Name</a>
  451. </div>
  452. </div>
  453.  
  454.  
  455. HOW TO ADD MORE BOXES:
  456.  
  457. COPY/PASTE THE CODE ABOVE UNDERNEATH THE LAST RELATIONSHIP BOX AS MANY TIMES AS YOU NEED. BEFORE THE LAST DIV, THOUGH.
  458.  
  459.  
  460.  
  461.  
  462. IF NEITHER OF THESE WORK FOR YOU, THEN MESSAGE ME.
  463.  
  464. -->
  465.  
  466.  
  467.  
  468.  
  469.  
  470. </body>
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!