API tools faq
paste
Advertisement
alokasenna

Relationships 02

alokasenna
Apr 14th, 2014
4,644
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.60 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 10 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: #004f9e; /*CHANGE THE SCROLLBAR*/
  18. height:auto;
  19. border-bottom:none;
  20. }
  21. ::-webkit-scrollbar {
  22. height:9px;
  23. width:5px;
  24. background-color: #004f9e; /*CHANGE THE SCROLLBAR*/
  25. border: 2px solid white;
  26.  
  27. }
  28.  
  29. ::selection {
  30. background-color: #004f9e; /*CHANGE THE SELECTION BG COLOR*/
  31. color: white; /*CHANGE THE SELECTION TEXT COLOR*/
  32. }
  33.  
  34. body {
  35. font-family: Calibri;
  36. font-weight: normal;
  37. font-size: 11px;
  38. background-color: #e6ebed; /*CHANGE THE BG COLOR*/
  39. }
  40.  
  41.  
  42. a {
  43. text-decoration: none;
  44. -webkit-transition: 0.5s;
  45. -moz-transition: 0.5s;
  46. transition: 0.5s;
  47. color: #79b3a8;
  48. }
  49.  
  50. a: hover {
  51. text-decoration: none;
  52. -webkit-transition: 0.5s;
  53. -moz-transition: 0.5s;
  54. transition: 0.5s;
  55. color: white;
  56. }
  57.  
  58. #columni {
  59. width: 350px;
  60. height: 100%;
  61. margin-left: 300px;
  62.  
  63. }
  64.  
  65. #columnii {
  66. width: 350px;
  67. height: 100%;
  68. margin-left: 680px;
  69. margin-top: -1040px;
  70. }
  71.  
  72. #relationsbox {
  73. width: 350px;
  74. height: 250px;
  75. margin-top: 10px;
  76. }
  77.  
  78. #chara {
  79. width: 200px;
  80. }
  81.  
  82. #chara img {
  83. width: 200px;
  84. height: 250px;
  85. }
  86.  
  87. #infobox {
  88. width: 140px;
  89. height: 250px;
  90. margin-left: 210px;
  91. margin-top: -250px;
  92. background-color: white; /*CHANGE THE INFO BOX BG*/
  93. overflow-y: scroll;
  94. }
  95.  
  96. #name {
  97. font-family: Franklin Gothic Heavy;
  98. font-size: 30px;
  99. text-transform: uppercase;
  100. text-align: center;
  101. }
  102.  
  103. #name a {
  104. color: #004f9e; /*CHANGE THE NAME COLOR*/
  105. border-bottom: 2px dotted #004f9e; /*CHANGE THE NAME BORDER*/
  106. }
  107.  
  108. #name a:hover {
  109. color: #9e0052; /*CHANGE THE NAME HOVER COLOR*/
  110. border-bottom: 2px dotted #9e0052; /*CHANGE THE HOVER BORDER*/
  111. }
  112.  
  113. #info {
  114. font-family: arial;
  115. font-size: 10px;
  116. color: black; /*CHANGE THE TEXT COLOR*/
  117. opacity: .7;
  118. text-align: center;
  119. margin-top: 10px;
  120. }
  121.  
  122. #info b,strong {
  123. text-transform: uppercase;
  124. font-size: 12px;
  125. border-left: 5px solid #004f9e; /*CHANGE THE INFORMATION BORDER*/
  126. padding: 2px;
  127. }
  128.  
  129. #topbar {
  130. width: 100%;
  131. height: 200px;
  132. background-color: black; /*CHANGE THE TOPBAR BG COLOR*/
  133. border-bottom: 10px solid white; /*CHANGE THE TOPBAR BORDER*/
  134. color: white; /*CHANGE THE TITLE COLOR*/
  135. font-family: Franklin Gothic Heavy;
  136. font-size: 100px;
  137. margin-top: 0px;
  138. text-transform: lowercase;
  139. }
  140.  
  141. #linkbox {
  142. width: 400px;
  143. height: 50px;
  144. }
  145.  
  146. #links {
  147. width: 80px;
  148. height: 38px;
  149. background-color: white; /*CHANGE THE LINKS BG*/
  150. padding-top: 12px;
  151. }
  152.  
  153. #links a {
  154. color: black; /*CHANGE THE LINK COLOR*/
  155. font-family: arial;
  156. font-size: 20px;
  157. text-transform: uppercase;
  158. }
  159.  
  160. #home {
  161. margin-left: -320px;
  162. }
  163.  
  164. #ask {
  165. margin-left: 0px;
  166. margin-top: -50px;
  167. }
  168.  
  169. #yours {
  170. margin-left: 320px;
  171. margin-top: -50px;
  172. }
  173.  
  174.  
  175.  
  176. </style>
  177. </head>
  178.  
  179. <body>
  180.  
  181. <div id="topbar">
  182.  
  183. <center>relations <!--CHANGE THE TITLE. DON'T MAKE IT TOO LONG.-->
  184.  
  185. <div id="linkbox">
  186.  
  187. <div id="home">
  188. <div id="links">
  189. <a href="/">home</a>
  190. </div>
  191. </div>
  192.  
  193. <div id="ask">
  194. <div id="links">
  195. <a href="/ask">ask</a>
  196. </div>
  197. </div>
  198.  
  199. <div id="yours">
  200. <div id="links">
  201. <a href="/">link</a> <!--CHANGE YOUR LINK URL/NAME-->
  202. </div>
  203. </div>
  204.  
  205. </div>
  206. </center>
  207.  
  208. </div>
  209.  
  210.  
  211. <div id="columni">
  212.  
  213. <div id="relationsbox">
  214.  
  215. <div id="chara">
  216. <img src="https://24.media.tumblr.com/e5872929c57ef884ed1dd38fc90f0fde/tumblr_n3qao50tgE1tpb7s5o1_250.jpg"/> <!--CHANGE THE CHARACTER IMAGE-->
  217. </div>
  218.  
  219. <div id="infobox">
  220.  
  221. <div id="name">
  222. <a href="/">NAME</a> <!--CHANGE THE CHARACTER NAME-->
  223. </div>
  224.  
  225. <div id="info">
  226. <b>url:</b>
  227.  
  228. character's url <!--CHANGE THE CHARACTER'S URL-->
  229. </div>
  230.  
  231. <div id="info">
  232. <b>relation:</b> character's relation <!--CHANGE THE CHARACTER'S RELATION-->
  233. </div>
  234.  
  235. <div id="info">
  236. <b>desc:</b> <br><br>
  237.  
  238. Write your description here. Chances are, it's going to go way past the maximum, but that's alright because a scrollbar will appear.
  239.  
  240. <br><br>
  241.  
  242. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  243. </div>
  244.  
  245. </div>
  246.  
  247. </div>
  248.  
  249. <!--REPEAT ALL ABOVE STEPS FOR EVERY BOX YOU ADD.-->
  250.  
  251. <div id="relationsbox">
  252.  
  253. <div id="chara">
  254. <img src="https://24.media.tumblr.com/e5872929c57ef884ed1dd38fc90f0fde/tumblr_n3qao50tgE1tpb7s5o1_250.jpg"/>
  255. </div>
  256.  
  257. <div id="infobox">
  258.  
  259. <div id="name">
  260. <a href="/">NAME</a>
  261. </div>
  262.  
  263. <div id="info">
  264. <b>url:</b>
  265.  
  266. character's url
  267. </div>
  268.  
  269. <div id="info">
  270. <b>relation:</b> character's relation
  271. </div>
  272.  
  273. <div id="info">
  274. <b>desc:</b> <br><br>
  275.  
  276. Write your description here. Chances are, it's going to go way past the maximum, but that's alright because a scrollbar will appear.
  277.  
  278. <br><br>
  279.  
  280. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  281. </div>
  282.  
  283. </div>
  284.  
  285. </div>
  286.  
  287. <div id="relationsbox">
  288.  
  289. <div id="chara">
  290. <img src="https://24.media.tumblr.com/e5872929c57ef884ed1dd38fc90f0fde/tumblr_n3qao50tgE1tpb7s5o1_250.jpg"/>
  291. </div>
  292.  
  293. <div id="infobox">
  294.  
  295. <div id="name">
  296. <a href="/">NAME</a>
  297. </div>
  298.  
  299. <div id="info">
  300. <b>url:</b>
  301.  
  302. character's url
  303. </div>
  304.  
  305. <div id="info">
  306. <b>relation:</b> character's relation
  307. </div>
  308.  
  309. <div id="info">
  310. <b>desc:</b> <br><br>
  311.  
  312. Write your description here. Chances are, it's going to go way past the maximum, but that's alright because a scrollbar will appear.
  313.  
  314. <br><br>
  315.  
  316. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  317. </div>
  318.  
  319. </div>
  320.  
  321. </div>
  322.  
  323. <div id="relationsbox">
  324.  
  325. <div id="chara">
  326. <img src="https://24.media.tumblr.com/e5872929c57ef884ed1dd38fc90f0fde/tumblr_n3qao50tgE1tpb7s5o1_250.jpg"/>
  327. </div>
  328.  
  329. <div id="infobox">
  330.  
  331. <div id="name">
  332. <a href="/">NAME</a>
  333. </div>
  334.  
  335. <div id="info">
  336. <b>url:</b>
  337.  
  338. character's url
  339. </div>
  340.  
  341. <div id="info">
  342. <b>relation:</b> character's relation
  343. </div>
  344.  
  345. <div id="info">
  346. <b>desc:</b> <br><br>
  347.  
  348. Write your description here. Chances are, it's going to go way past the maximum, but that's alright because a scrollbar will appear.
  349.  
  350. <br><br>
  351.  
  352. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  353. </div>
  354.  
  355. </div>
  356.  
  357. </div>
  358.  
  359. </div>
  360.  
  361.  
  362. <div id="columnii">
  363.  
  364. <div id="relationsbox">
  365.  
  366. <div id="chara">
  367. <img src="https://24.media.tumblr.com/e5872929c57ef884ed1dd38fc90f0fde/tumblr_n3qao50tgE1tpb7s5o1_250.jpg"/>
  368. </div>
  369.  
  370. <div id="infobox">
  371.  
  372. <div id="name">
  373. <a href="/">NAME</a>
  374. </div>
  375.  
  376. <div id="info">
  377. <b>url:</b>
  378.  
  379. character's url
  380. </div>
  381.  
  382. <div id="info">
  383. <b>relation:</b> character's relation
  384. </div>
  385.  
  386. <div id="info">
  387. <b>desc:</b> <br><br>
  388.  
  389. Write your description here. Chances are, it's going to go way past the maximum, but that's alright because a scrollbar will appear.
  390.  
  391. <br><br>
  392.  
  393. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  394. </div>
  395.  
  396. </div>
  397.  
  398. </div>
  399.  
  400. <div id="relationsbox">
  401.  
  402. <div id="chara">
  403. <img src="https://24.media.tumblr.com/e5872929c57ef884ed1dd38fc90f0fde/tumblr_n3qao50tgE1tpb7s5o1_250.jpg"/>
  404. </div>
  405.  
  406. <div id="infobox">
  407.  
  408. <div id="name">
  409. <a href="/">NAME</a>
  410. </div>
  411.  
  412. <div id="info">
  413. <b>url:</b>
  414.  
  415. character's url
  416. </div>
  417.  
  418. <div id="info">
  419. <b>relation:</b> character's relation
  420. </div>
  421.  
  422. <div id="info">
  423. <b>desc:</b> <br><br>
  424.  
  425. Write your description here. Chances are, it's going to go way past the maximum, but that's alright because a scrollbar will appear.
  426.  
  427. <br><br>
  428.  
  429. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  430. </div>
  431.  
  432. </div>
  433.  
  434. </div>
  435.  
  436. <div id="relationsbox">
  437.  
  438. <div id="chara">
  439. <img src="https://24.media.tumblr.com/e5872929c57ef884ed1dd38fc90f0fde/tumblr_n3qao50tgE1tpb7s5o1_250.jpg"/>
  440. </div>
  441.  
  442. <div id="infobox">
  443.  
  444. <div id="name">
  445. <a href="/">NAME</a>
  446. </div>
  447.  
  448. <div id="info">
  449. <b>url:</b>
  450.  
  451. character's url
  452. </div>
  453.  
  454. <div id="info">
  455. <b>relation:</b> character's relation
  456. </div>
  457.  
  458. <div id="info">
  459. <b>desc:</b> <br><br>
  460.  
  461. Write your description here. Chances are, it's going to go way past the maximum, but that's alright because a scrollbar will appear.
  462.  
  463. <br><br>
  464.  
  465. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  466. </div>
  467.  
  468. </div>
  469.  
  470. </div>
  471.  
  472. <div id="relationsbox">
  473.  
  474. <div id="chara">
  475. <img src="https://24.media.tumblr.com/e5872929c57ef884ed1dd38fc90f0fde/tumblr_n3qao50tgE1tpb7s5o1_250.jpg"/>
  476. </div>
  477.  
  478. <div id="infobox">
  479.  
  480. <div id="name">
  481. <a href="/">NAME</a>
  482. </div>
  483.  
  484. <div id="info">
  485. <b>url:</b>
  486.  
  487. character's url
  488. </div>
  489.  
  490. <div id="info">
  491. <b>relation:</b> character's relation
  492. </div>
  493.  
  494. <div id="info">
  495. <b>desc:</b> <br><br>
  496.  
  497. Write your description here. Chances are, it's going to go way past the maximum, but that's alright because a scrollbar will appear.
  498.  
  499. <br><br>
  500.  
  501. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  502. </div>
  503.  
  504. </div>
  505.  
  506. </div>
  507. <!--DON'T PASTE ANYTHING BEYOND THIS POINT-->
  508. </div>
  509.  
  510. <!--YOU CAN MOVE THIS TO ANOTHER LOCATION BUT IT HAS TO BE VISIBLE. HERE, JUST EDIT #004f9e TO WHATEVER COLOR YOU WANT.-->
  511.  
  512. <div style="position:fixed;bottom:2px; right:3px; font-size:9px; letter-spacing:1px; font-family:calibri;"><a style="color:#004f9e;" href="http://stvcky.tumblr.com/">@STVCKY</a></center></div>
  513.  
  514.  
  515. <!--
  516.  
  517. INSTRUCTIONS ON HOW TO ADD ANOTHER BOX:
  518.  
  519. COPY THE CODE FOUND HERE: http://pastebin.com/Bh39xFJh
  520.  
  521. PASTE IT BENEATH THE SECOND TO LAST </DIV>
  522.  
  523. EDIT IT LIKE ALL OF THE OTHER BOXES.
  524.  
  525. -->
  526.  
  527.  
  528. </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!