API tools faq
paste
Advertisement
caturner746

Untitled

caturner746
Jan 1st, 2018
196
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 41.11 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. This code has been written by http://ddkinzart.tumblr.com
  3. Do not sell, repost, remove credit or claim as your own.
  4.  
  5. __ ____ _ __
  6. ____/ /___/ / /__(_)___ ____ ____ ______/ /_
  7. / __ / __ / //_/ / __ \/_ / / __ `/ ___/ __/
  8. / /_/ / /_/ / ,< / / / / / / /_/ /_/ / / / /_
  9. \__,_/\__,_/_/|_/_/_/ /_/ /___/\__,_/_/ \__/
  10. __ __ __
  11. / /_/ /_ ___ ____ ___ ___ _________ ____/ /__
  12. / __/ __ \/ _ \/ __ `__ \/ _ \ / ___/ __ \/ __ / _ \
  13. / /_/ / / / __/ / / / / / __/ / /__/ /_/ / /_/ / __/
  14. \__/_/ /_/\___/_/ /_/ /_/\___/ \___/\____/\__,_/\___/
  15.  
  16. -->
  17.  
  18. <html>
  19. <head>
  20. <title>{Title}</title>
  21. <link rel="shortcut icon" href="{Favicon}">
  22. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  23.  
  24. </head>
  25.  
  26. <!--tooltip script (it's to edit the way the title of your links look when you hover over them -->
  27. <style>
  28.  
  29.  
  30. /* ---------------ANIMATION 1 -- BOUNCE EFFECT---------------*/
  31.  
  32. /* the first two sections of css are just setting up our object. you can set the positioning and any colours, backgrounds etc as usual! */
  33. .moose-animation{
  34. position:fixed;
  35. margin-left:10px;
  36. margin-top:10px;
  37. /* this is where we set up the animation for the object, there are several lines which seem to repeat the same information, but this is just for cross browser compatibility */
  38.  
  39. /* the next section picks apart the 3 lines needed to set up the animation and explains each. this is the duration, the iteration and the origin */
  40.  
  41. animation: bbounce linear 2.5s; /* this line links us to the keyframe name we set up. it also gives the total duration of the animation, if you want to make the animation slower, increase the time, for a quicker animation, decrease the time */
  42. animation-iteration-count: infinite; /* this makes sure the animation will continue to play, you can change this to a number if you only want the animation to play a certain number of times ( or to 1 if you only want it to play on page loading for example ) */
  43. transform-origin: 50% 50%; /* this just specifies that we want all transformations or effects to be centered on the object. you can change this if you want to pin the transition effect to a corner of your object */
  44.  
  45. /* Safari 4+, Android, Chrome */
  46. -webkit-animation: bbounce linear 2.5s;
  47. -webkit-animation-iteration-count: infinite;
  48. -webkit-transform-origin: 50% 50%;
  49.  
  50. /* Fx 5+ */
  51. -moz-animation: bbounce linear 2.5s;
  52. -moz-animation-iteration-count: infinite;
  53. -moz-transform-origin: 50% 50%;
  54.  
  55. /* Opera 12+ */
  56. -o-animation: bbounce linear 2.5s;
  57. -o-animation-iteration-count: infinite;
  58. -o-transform-origin: 50% 50%;
  59.  
  60. /* IE 10+, Fx 29+ */
  61. -ms-animation: bbounce linear 2.5s;
  62. -ms-animation-iteration-count: infinite;
  63. -ms-transform-origin: 50% 50%;}
  64.  
  65. /* in these examples i'm going to animate an image. this image could also be a link or the trigger for a hoverbox. you can animate pretty much any object, a piece of text, a whole block, a title, etc.*/
  66. .moose-animation img {
  67. height:30px;
  68. width:30px;
  69. border-radius:100%;
  70. padding:5px;}
  71.  
  72. /* this is my keyframe setup. i need to give it a name, in this case it's 'bbounce' - the name that is referred to in the css section above. i need to make sure that all of the browser extensions have the same name. we use percentages to specify at which point in the animation certain states have to be achieved. in the first css section above we specified the duration as 2.5 seconds. so at 0 seconds ( 0% ) the animation will begin. by 50% ( halfway through ) the object will have moved 10px down and by 100% ( the 2.5 second point ) it will have returned to the starting position. you can also use negative values to get things to move to the left or up. try out different settings to see how things move! the command 'transform:translate' will change position. */
  73. @keyframes bbounce{
  74. 0% {transform:translate(0px,0px);}
  75. 50% {transform:translate(0px,10px);}
  76. 100% {transform:translate(0px, 0px);}
  77. }
  78.  
  79. @-moz-keyframes bbounce{
  80. 0% {-moz-transform:translate(0px,0px);}
  81. 50% {-moz-transform:translate(0px,10px);}
  82. 100% {-moz-transform:translate(0px,0px);}
  83. }
  84.  
  85. @-webkit-keyframes bbounce {
  86. 0% {-webkit-transform:translate(0px,0px);}
  87. 50% {-webkit-transform:translate(0px,10px);}
  88. 100% {-webkit-transform:translate(0px,0px);}
  89. }
  90.  
  91. @-o-keyframes bbounce {
  92. 0% {-o-transform:translate(0px,0px);}
  93. 50% {-o-transform:translate(0px,10px);}
  94. 100% {-o-transform:translate(0px,0px);}
  95. }
  96.  
  97. @-ms-keyframes bbounce {
  98. 0% {-ms-transform:translate(0px,0px);}
  99. 50% {-ms-transform:translate(0px,10px);}
  100. 100% {-ms-transform:translate(0px,0px);}
  101. }
  102.  
  103.  
  104.  
  105.  
  106. figure{margin:0}.tmblr-iframe{position:absolute}.tmblr-iframe.hide{display:none}</style><link href="http://static.tumblr.com/5omyijl/bzrn2yg7i/style-my-tooltips.css" rel="stylesheet" type="text/css" />
  107. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  108. <script src="http://static.tumblr.com/5omyijl/RZtn2yg9v/jquery.style-my-tooltips.js"></script>
  109. <script>
  110. (function($){
  111. $(document).ready(function(){
  112. $("[title]").style_my_tooltips({
  113. tip_follows_cursor:true,
  114. tip_delay_time:200,
  115. tip_fade_speed:500
  116. });
  117. });
  118. })(jQuery);
  119. </script>
  120.  
  121. <!--pop up tabs script-->
  122. <script>
  123. $(document).ready(function(){
  124. $("ul#tabs li").click(function(e){
  125. if (!$(this).hasClass("active")) {
  126. var tabNum = $(this).index();
  127. var nthChild = tabNum+1;
  128. $("ul#tabs li.active").removeClass("active");
  129. $(this).addClass("active");
  130. $("ul#tab li.active").removeClass("active");
  131. $("ul#tab li:nth-child("+nthChild+")").addClass("active");
  132. }
  133. });
  134. });
  135. </script>
  136. <!--script end-->
  137.  
  138. <!--tooltip script end-->
  139. <!--pop up script-->
  140. <script type="text/javascript"
  141. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  142. <script>
  143. $(document).ready(function() {
  144. //
  145. $('a.poplight[href^=#]').click(function() {
  146. var popID = $(this).attr('rel'); //Get Popup Name
  147. var popURL = $(this).attr('href'); //Get Popup href to define size
  148. var query= popURL.split('?');
  149. var dim= query[1].split('&');
  150. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  151. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://upload.wikimedia.org/wikipedia/commons/f/f8/Tooltip-CloseButton.png" class="btn_close" title="escape" alt="escape" /></a>');
  152. var popMargTop = ($('#' + popID).height() + 80) / 2;
  153. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  154. //Apply Margin to Popup
  155. $('#' + popID).css({
  156. 'margin-top' : -popMargTop,
  157. 'margin-left' : -popMargLeft
  158. });
  159. $('body').append('<div id="fade"></div>');
  160. $('#fade').css({'filter' : 'alpha(opacity=100)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  161. return false;
  162. });
  163. $('a.close, #fade').live('click', function() {
  164. $('#fade , .popup_block').fadeOut(function() {
  165. $('#fade, a.close').remove(); //fade them both out
  166. });
  167. return false;
  168. });
  169. });
  170. </script>
  171. <!--ask pop script end-->
  172.  
  173. <style type="text/css">
  174.  
  175. /*cursor code, change image to change cursor*/
  176. /*find more at http://pixel-soup.tumblr.com/tagged/cursors */
  177.  
  178. *, body, a { cursor:url("http://i.imgur.com/2qleX.jpg"), auto }
  179. a:hover { cursor:url("http://68.media.tumblr.com/tumblr_m2umkqvNUT1qfamg6.gif"), auto } /*this defines the pointer cursor*/
  180.  
  181. /*these are the custom fonts, you can install more just by pasting the code here*/
  182.  
  183.  
  184. @font-face{font-family:"nightingale";src:url('http://static.tumblr.com/zx3ibzm/mLdovzrvz/nightingale_sample.ttf');}
  185. @font-face{font-family:"bebas neue";src:url('http://static.tumblr.com/zx3ibzm/JgJovyuzq/bebasneue.otf');}
  186. @font-face{font-family:"sail";src:url('http://static.tumblr.com/it5srtk/bSzowedx5/sail-regular.otf');}
  187. @font-face{font-family:"cavier dreams";src:url('https://dl.dropboxusercontent.com/s/uubyziybvh00j4f/CaviarDreams.ttf');}
  188.  
  189. /*selection color*/
  190.  
  191. ::-moz-selection { /* Code for Firefox */
  192. color: #fff; /*text color of selected text*/
  193. background: #576d8c; /*color of selection bg*/
  194. }
  195.  
  196. ::selection {
  197. color: #fff; /*text color of selected text*/
  198. background: #576d8c; /*color of selection bg*/
  199. }
  200.  
  201. /*selection color end*/
  202.  
  203. ::-webkit-scrollbar-thumb {
  204. background-color:#fff; /*scrollbar's slider color*/
  205. background-image:url('URL HERE'); /*optional background image*/
  206. height:0px;
  207. -moz-border-radius: 50px; /*these make bar rounded*/
  208. border-radius: 50px;
  209. }
  210.  
  211. ::-webkit-scrollbar {
  212. height:0px;
  213. width:1px; /*width of slider*/
  214. background-color:transparent; /*scrollbar's main color*/
  215. background-image:url('URL HERE'); /*optional background image*/
  216. }
  217.  
  218. /*the code here is to reduce the opacity of an image and make it more visible on hover, you can remove it if you want your image to always be at 100%*/
  219.  
  220. img, iframe {
  221.  
  222. opacity:0.8; /*change this to change visibility, set it to 1 if you want it completely visible*/
  223.  
  224. -moz-transition-duration: 0.5s;
  225.  
  226. -o-transition-duration: 0.5s;
  227.  
  228. -webkit-transition-duration: 0.5s;
  229.  
  230. transition-duration: 0.5s;
  231.  
  232. padding:5px;
  233. }
  234.  
  235.  
  236.  
  237. img:hover,iframe:hover {
  238.  
  239. opacity:1;
  240.  
  241. -webkit-filter:none;
  242.  
  243. -moz-transition-duration: 0.5s;
  244.  
  245. -o-transition-duration: 0.5s;
  246.  
  247. -webkit-transition-duration: 0.5s;
  248.  
  249. transition-duration: 0.5s;}
  250.  
  251. /*HOVER IMAGE CODE END*/
  252.  
  253.  
  254. body {
  255. background-color:#090a0b; /*set this the same color as your background image to avoid black areas on different resolutions*/
  256. background-image:url('https://i.imgur.com/5GM9SNm.gif'); /*bg image goes here*/
  257. background-attachment: fixed;
  258. background-repeat: no-repeat;
  259. background-position: left top;
  260. color:#f7f7f7; /*body font color*/
  261. text-shadow: 0px 0px 3px #000;
  262. font-family: calibri;
  263. text-align:justify;
  264. font-size: 10px;
  265. letter-spacing:2px;
  266. }
  267.  
  268. .pagi {
  269. font-size:25px;
  270. font-family:calibiri;
  271. margin-top:72px; /*change to decide position of pagination*/
  272. margin-left:892px;
  273. color: #fff; /*color of pagination but keep in mind it's also influence by the 'a' codes as it is a link*/
  274. position:fixed;
  275. -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s;
  276. transition-duration: 0.8s; -o-transition-duration: 0.8s;}
  277.  
  278. /*the tooltip is the text that appears when you hover on a link / tag / etc.
  279. this script stylizes it*/
  280.  
  281. #s-m-t-tooltip{
  282. max-width:400px;
  283. margin:15px;
  284. padding:2px 8px;
  285. background-image: url(""); /*include image if you want a background for the tooltip text*/
  286. background: transparent;
  287. background-repeat:repeat;
  288. background-attachment:fixed;
  289. color:#fff;
  290. /*the text shadow determines the outline of the text because there's no easy way to add an outline to it, you can change all the code to another color*/
  291. text-shadow:1px 1px #090a0b,
  292. 1px -1px #090a0b,
  293. 1px 0px #090a0b,
  294. 0px 1px #090a0b,
  295. 0px -1px #090a0b,
  296. -1px 1px #090a0b,
  297. -1px 0px #090a0b,
  298. -1px -1px #090a0b;
  299. z-index:99999999999999999999;
  300. font-size:10px;
  301. letter-spacing:2px;
  302. font-style:bold;
  303. letter-spacing:2px;
  304. font-family: 'nightingale';
  305. text-transform:lowercase;
  306. box-shadow:0px 0px 0px;}
  307.  
  308. #s-m-tooltip:hover {
  309. -webkit-transition: all 0.6s ease-out;
  310. -moz-transition: all 0.6s ease-out;
  311. transition: all 0.6s ease-out;
  312. -o-transition:all 0.6s ease;
  313. -ms-transition: all 0.6s ease-in-out;}
  314.  
  315.  
  316. small,sub,sup {
  317. font-size:10px;
  318. }
  319.  
  320. b, bold, strong {
  321. font-size:14px;
  322. text-transform:uppercase;
  323. letter-spacing:1px;
  324. font-weight:normal;
  325. font-family: 'bebas neue';
  326. color: #ffef99;
  327. }
  328.  
  329. i, italic, em {
  330. font-size:8px;
  331. color: #9ad7b9;
  332. font-family: 'nightingale';
  333. font-weight:normal;
  334. letter-spacing:1px;
  335. text-transform:lowercase;
  336. }
  337.  
  338. h3, h4 {
  339. background-image: url('https://31.media.tumblr.com/9348a3347757267167ed4b81dafbf430/tumblr_inline_ofaej6HMNo1uxel8e_500.gif');
  340. background-repeat:repeat;
  341. background-attachment:fixed;
  342. border: inset 1px #323131; /*color of border of the titles of the sidebar*/
  343. padding:2px;
  344. color:#eae9e9; /*text color of sidebar titles*/
  345. font-size:9px;
  346. font-family:calibri;
  347. text-transform:uppercase;
  348. letter-spacing:1px;
  349. text-align:center;}
  350.  
  351.  
  352. a,a:visited,a:active {
  353. color: #ffef99; /*color of links*/
  354. text-decoration:none;
  355. -moz-transition-duration: 0.6s;
  356. -o-transition-duration: 0.6s;
  357. -webkit-transition-duration: 0.6s;
  358. transition-duration: 0.6s;}
  359.  
  360. a:hover {
  361. color: #ffffff; /*color of links on hover*/
  362. -webkit-transition: all 0.6s ease-out;
  363. -moz-transition: all 0.6s ease-out;
  364. transition: all 0.6s ease-out;
  365. -o-transition:all 0.6s ease;
  366. -ms-transition: all 0.6s ease-in-out;}
  367.  
  368. /*POST TITLE SETTINGS*/
  369.  
  370. .titulo {
  371.  
  372. font-family: 'sail';
  373. font-size: 23px; /*size of title*/
  374. text-align: center;
  375. text-transform: lowercase;
  376. color: #ffef99; /*color of title*/
  377.  
  378. }
  379.  
  380. #container {
  381. position:absolute;
  382. left:640px; /*change to position posts to your bg image*/
  383. top:150px;
  384. height:500px; /*determines height of container*/
  385. overflow-y:scroll;
  386. opacity:1;/*set this as '1' if you'd like the posts to always appear*/
  387. -webkit-transition: all 0.6s ease-out;
  388. -moz-transition: all 0.6s ease-out;
  389. transition: all 0.6s ease-out;
  390. -o-transition:all 0.6s ease;
  391. -ms-transition: all 0.6s ease-in-out;
  392. }
  393.  
  394. #entries {
  395. background-color:#090a0b; /*set this as background color to hide the image in the background, in the preview case the word reading 'hover' */
  396.  
  397.  
  398. }
  399.  
  400.  
  401. #entries img {
  402. max-width: 100%;
  403. height: auto;
  404.  
  405. }
  406.  
  407. #content {
  408. width:280px; /*determines size of posts*/
  409. margin-bottom:20px;
  410. padding:20px;
  411. }
  412.  
  413.  
  414. #container:hover {
  415. opacity: 1; /*this makes the posts appear on hover if you choose to keep them on '0' opacity when not on hover*/
  416. -webkit-transition: all 0.6s ease-out;
  417. -moz-transition: all 0.6s ease-out;
  418. transition: all 0.6s ease-out;
  419. -o-transition:all 0.6s ease;
  420. -ms-transition: all 0.6s ease-in-out;
  421. }
  422.  
  423. blockquote {
  424. border-left:2px solid #ffffff; /*color of blockquote*/
  425. border-top-left-radius:0px;
  426. border-bottom-left-radius:0px;
  427. padding: 2px 8px;
  428. margin: 0px 0 0px 0px;
  429. }
  430.  
  431. blockquote img {
  432. max-width:100%;
  433. height:auto;
  434. }
  435.  
  436. /*ASK*/
  437.  
  438. #asker {
  439. font-size:15px;
  440. margin-bottom:-20px;
  441. color: #fff; /*color of asker url / anonymous but if a user then it is also determined by 'a' as it will be a link*/
  442. font-family: 'nightingale';
  443. text-align:center;
  444. text-decoration:none;
  445. -webkit-transition: all 0.6s ease-out;
  446. -moz-transition: all 0.6s ease-out;
  447. transition: all 0.6s ease-out;
  448. -o-transition:all 0.6s ease;
  449. -ms-transition: all 0.6s ease-in-out;
  450.  
  451. }
  452.  
  453. #asker a:hover {
  454. -webkit-filter: blur(2px);
  455. -moz-filter: blur(2px);
  456. -o-filter: blur(2px);
  457. -ms-filter: blur(2px);
  458. filter: blur(2px);
  459. transition: all 0.6s ease-out;
  460. }
  461.  
  462. #ask {
  463. background: #000;
  464. background: url("https://31.media.tumblr.com/9348a3347757267167ed4b81dafbf430/tumblr_inline_ofaej6HMNo1uxel8e_500.gif");/*image behind the question*/
  465. background-repeat:repeat;
  466. border-top:inset 2px white; /*top border color of question*/
  467. border-bottom:inset 2px white; /*bottom border color of question*/
  468. padding: 10px 20px 10px 20px;
  469. text-align:center;
  470. border-radius:30px;
  471. text-shadow: 1px 1px #090a0b,
  472. 1px -1px #090a0b,
  473. 1px 0px #090a0b,
  474. 0px 1px #090a0b,
  475. 0px -1px #090a0b,
  476. -1px 1px #090a0b,
  477. -1px 0px #090a0b,
  478. -1px -1px #090a0b;
  479. /*change all the hex of the text shadow to the same code
  480. to change the outline of the text*/
  481. }
  482.  
  483.  
  484. #answer {
  485. padding-top:20px;
  486. }
  487. /*ASK ENDS HERE*/
  488.  
  489. /*CHAT POST BEGINS HERE*/
  490.  
  491. .convo {
  492. font-size: 11px;
  493. text-align:left;
  494. padding:0px;
  495.  
  496. }
  497.  
  498. .convo li {
  499. list-style:none;
  500. }
  501.  
  502. .convo .label {
  503. text-transform: uppercase;
  504. font-weight:bold;
  505.  
  506. }
  507.  
  508. .line_odd .label {
  509. color: #ffef99; /* Color of odd person in the chat */
  510. background: none;
  511. }
  512.  
  513. .line_even .label {
  514. color: #ffffff; /* Color of even person in the chat */
  515. }
  516.  
  517. .line_even {
  518. background: #transparent; /*background color of even chat*/
  519. margin:12px;
  520. padding: 5px;
  521. color: #f9f9f9; /*color of even text*/
  522. }
  523.  
  524. .line_odd {
  525. background:transparent; /*background color of odd chat*/
  526. margin:12px;
  527. padding: 5px;
  528. color: #f9f9f9; /*color of odd text*/
  529. }
  530.  
  531.  
  532.  
  533.  
  534. /*CHAT POST ENDS HERE*/
  535.  
  536. /*QUOTE BEGINS HERE*/
  537.  
  538. /*I have the first letter stylized to be the same as the quote, but you can remove that part by simply deleting the p::first-letter*/
  539.  
  540. .quote, {
  541. font-family: 'sail';
  542. font-size: 23px;
  543. text-align: center;
  544. color: #eae9e9; /*color of quote*/
  545. text-shadow: 0px 3px 0 #576d8c,
  546. -1px 2px 0 #576d8c,
  547. 1px 2px 0 #576d8c;
  548. }
  549.  
  550.  
  551.  
  552. /*QUOTE ENDS HERE*/
  553.  
  554.  
  555. /*LINK POST BEGIN*/
  556.  
  557. #linku {
  558. text-transform:uppercase;
  559. text-align:center;
  560. letter-spacing:0px;
  561. font-weight:normal;
  562. font-family: 'bebas neue';
  563. font-size:14px;
  564. }
  565.  
  566. /*LINK POST END*/
  567.  
  568. /*SIDE BAR / DESCRIPTION BEGINS HERE*/
  569.  
  570. #boxy {
  571. position:fixed;
  572. top:145px; /*position of the box*/
  573. overflow:scroll;
  574. height:550px; /*determines height of the box - increase it if you have too much text and want to avoid scrollbar*/
  575. margin-left:1037px;
  576. opacity:0.6;
  577. -webkit-transition: all 0.7s ease;
  578. -moz-transition: all 0.7s ease;
  579. -o-transition: all 0.7s ease;}
  580.  
  581. #boxy:hover {
  582. opacity:1;
  583. -webkit-transition: all 0.7s ease;
  584. -moz-transition: all 0.7s ease;
  585. -o-transition: all 0.7s ease;
  586. }
  587.  
  588. #despacito {
  589. margin-top:10px;
  590. width:150px; /*determines width of description*/
  591. text-align:center;
  592.  
  593. }
  594.  
  595. /*SIDE BAR / DESCRIPTION END*/
  596.  
  597. /*TAGS AND INFO BEGINS HERE*/
  598. .permalinks {
  599. text-align:center;
  600. margin-top:15px;
  601. padding-top: 5px;
  602. padding-bottom: 5px;
  603. font-size:9px;
  604. color:#fff;
  605. text-transform:uppercase;
  606. border-top: solid 1px #fff; /*color of the line above permalinks*/
  607. border-bottom: solid 1px #fff; /*color of the line below permalinks*/
  608. border-radius:25px; /*increase to make border round*/
  609. -moz-transition-duration:.6s;
  610. -webkit-transition-duration:.6s;
  611. -o-transition-duration:.6s;
  612. -webkit-filter: blur(0px);
  613. background-image: url(''); /*you can insert image here for the permalinks bg*/
  614.  
  615. }
  616.  
  617. .permalinks a {
  618. font-family:calibri;
  619. font-size:9px;
  620. color:#ffef99;
  621. font-weight:bold;
  622. text-decoration:none;
  623. }
  624.  
  625.  
  626. .permalinks a:hover {
  627. color:#ffef99;
  628. -webkit-transition: all 0.5s ease-in-out;
  629. -moz-transition: all 0.5s ease-in-out;
  630. -o-transition: all 0.5s ease-in-out;
  631. -ms-transition: all 0.5s ease-in-out;
  632. transition: all 0.5s ease-in-out;
  633. }
  634.  
  635. .tags {
  636.  
  637. padding-top:10px;
  638. text-align:center;
  639. padding-left:5px;
  640. padding-right:15px;
  641. color: #576d8c; /*this determines the color of the small symbol (by default a hashtag but you can change it) next to the tags*/
  642. font-size:9px;
  643. }
  644.  
  645. .tags a {
  646. color:#f7f7f7; /*change this for the actual color of the tags*/
  647. font-size:8px;
  648. font-weight:bold;
  649. font-family:calibri;
  650. text-transform:uppercase;
  651. text-shadow:0px 0px 3px #576d8c
  652. letter-spacing:0px;
  653.  
  654. }
  655.  
  656.  
  657. .tags a:hover {
  658. color: #576d8c; /*tag color on hover*/
  659. -webkit-transition: all 0.5s ease-in-out;
  660. -moz-transition: all 0.5s ease-in-out;
  661. -o-transition: all 0.5s ease-in-out;
  662. -ms-transition: all 0.5s ease-in-out;
  663. transition: all 0.5s ease-in-out;
  664.  
  665. }
  666.  
  667.  
  668. /*POP UP CODES AND LINKS BEGIN*/
  669.  
  670.  
  671. #pops {
  672. position:fixed;
  673.  
  674. }
  675.  
  676.  
  677. #linku1 {
  678. position:fixed;
  679. font-size:25px;
  680. text-decoration:none;
  681. transform: rotate(10deg);
  682. -ms-transform: rotate(10deg);
  683. -webkit-transform: rotate(10deg);
  684. -o-transform: rotate(10deg);
  685. -moz-transform: rotate(10deg);
  686. margin-left:550px;
  687. margin-top:110px;
  688. }
  689.  
  690. #linku1:hover {
  691. -webkit-filter: blur(3px);
  692. -moz-filter: blur(3px);
  693. -o-filter: blur(3px);
  694. -ms-filter: blur(3px);
  695. filter: blur(3px);
  696. -webkit-transition: all 0.5s ease-in-out;
  697. -moz-transition: all 0.5s ease-in-out;
  698. -o-transition: all 0.5s ease-in-out;
  699. -ms-transition: all 0.5s ease-in-out;
  700. transition: all 0.5s ease-in-out;
  701. }
  702.  
  703. #linku2 {
  704. position:fixed;
  705. font-size:25px;
  706. text-decoration:none;
  707. transform: rotate(10deg);
  708. -ms-transform: rotate(10deg);
  709. -webkit-transform: rotate(10deg);
  710. -o-transform: rotate(10deg);
  711. -moz-transform: rotate(10deg);
  712. margin-left:550px;
  713. margin-top:140px;
  714. }
  715.  
  716. #linku2:hover {
  717. -webkit-filter: blur(3px);
  718. -moz-filter: blur(3px);
  719. -o-filter: blur(3px);
  720. -ms-filter: blur(3px);
  721. filter: blur(3px);
  722. -webkit-transition: all 0.5s ease-in-out;
  723. -moz-transition: all 0.5s ease-in-out;
  724. -o-transition: all 0.5s ease-in-out;
  725. -ms-transition: all 0.5s ease-in-out;
  726. transition: all 0.5s ease-in-out;
  727. }
  728.  
  729. #linku3 {
  730. position:fixed;
  731. font-size:25px;
  732. text-decoration:none;
  733. transform: rotate(10deg);
  734. -ms-transform: rotate(10deg);
  735. -webkit-transform: rotate(10deg);
  736. -o-transform: rotate(10deg);
  737. -moz-transform: rotate(10deg);
  738. margin-left:550px;
  739. margin-top:170px;
  740. }
  741.  
  742. #linku3:hover {
  743. -webkit-filter: blur(3px);
  744. -moz-filter: blur(3px);
  745. -o-filter: blur(3px);
  746. -ms-filter: blur(3px);
  747. filter: blur(3px);
  748. -webkit-transition: all 0.5s ease-in-out;
  749. -moz-transition: all 0.5s ease-in-out;
  750. -o-transition: all 0.5s ease-in-out;
  751. -ms-transition: all 0.5s ease-in-out;
  752. transition: all 0.5s ease-in-out;
  753. }
  754.  
  755. #linku4 {
  756. position:fixed;
  757. font-size:25px;
  758. text-decoration:none;
  759. transform: rotate(10deg);
  760. -ms-transform: rotate(10deg);
  761. -webkit-transform: rotate(10deg);
  762. -o-transform: rotate(10deg);
  763. -moz-transform: rotate(10deg);
  764. margin-left:550px;
  765. margin-top:200px;
  766. }
  767.  
  768. #linku4:hover {
  769. -webkit-filter: blur(3px);
  770. -moz-filter: blur(3px);
  771. -o-filter: blur(3px);
  772. -ms-filter: blur(3px);
  773. filter: blur(3px);
  774. -webkit-transition: all 0.5s ease-in-out;
  775. -moz-transition: all 0.5s ease-in-out;
  776. -o-transition: all 0.5s ease-in-out;
  777. -ms-transition: all 0.5s ease-in-out;
  778. transition: all 0.5s ease-in-out;
  779. }
  780.  
  781. #linku5 {
  782. position:fixed;
  783. font-size:25px;
  784. text-decoration:none;
  785. transform: rotate(10deg);
  786. -ms-transform: rotate(10deg);
  787. -webkit-transform: rotate(10deg);
  788. -o-transform: rotate(10deg);
  789. -moz-transform: rotate(10deg);
  790. margin-left:550px;
  791. margin-top:230px;
  792. }
  793.  
  794. #linku5:hover {
  795. -webkit-filter: blur(3px);
  796. -moz-filter: blur(3px);
  797. -o-filter: blur(3px);
  798. -ms-filter: blur(3px);
  799. filter: blur(3px);
  800. -webkit-transition: all 0.5s ease-in-out;
  801. -moz-transition: all 0.5s ease-in-out;
  802. -o-transition: all 0.5s ease-in-out;
  803. -ms-transition: all 0.5s ease-in-out;
  804. transition: all 0.5s ease-in-out;
  805. }
  806.  
  807. #linku6 {
  808. position:fixed;
  809. font-size:25px;
  810. text-decoration:none;
  811. transform: rotate(10deg);
  812. -ms-transform: rotate(10deg);
  813. -webkit-transform: rotate(10deg);
  814. -o-transform: rotate(10deg);
  815. -moz-transform: rotate(10deg);
  816. margin-left:550px;
  817. margin-top:260px;
  818. }
  819.  
  820. #linku6:hover {
  821. -webkit-filter: blur(3px);
  822. -moz-filter: blur(3px);
  823. -o-filter: blur(3px);
  824. -ms-filter: blur(3px);
  825. filter: blur(3px);
  826. -webkit-transition: all 0.5s ease-in-out;
  827. -moz-transition: all 0.5s ease-in-out;
  828. -o-transition: all 0.5s ease-in-out;
  829. -ms-transition: all 0.5s ease-in-out;
  830. transition: all 0.5s ease-in-out;
  831. }
  832.  
  833.  
  834. #fade { /*--Transparent background layer--*/
  835. display: center; /*--hidden by default--*/
  836. background: #080808;
  837. background-image: url('https://i.imgur.com/WkmkhG3.gif'); /*if you want to add a background image to go behind your popup */
  838. position: fixed; left: 0; top: 0;
  839. width: 100%; height: 100%;
  840. opacity: 1; /* you can make it 0 if you don't want a surrounding color to the popup or set it to 1 to have the background posts and theme invisible and only the pop up showing */
  841. z-index: 9999;
  842. }
  843.  
  844. .popup_block {
  845. display:none;
  846. height:auto;
  847. width:auto;
  848. background:transparent;
  849. padding:0px;
  850. float:left;
  851. position:fixed;
  852. margin:auto;
  853. z-index: 99999;
  854. }
  855.  
  856. .popup_boxy {
  857. background:#080808; /*color of popup background*/
  858. border:solid 1px #323131;
  859. position:absolute;
  860. text-align:center;
  861. font-size: 10px; /*font size of the words inside the box */
  862. padding:20px;
  863. width: 320px;
  864. height:500px; /*height of pop up, I have it set to almost fit the container and be in the position of the posts but you can change it according to preference*/
  865. overflow-y:scroll;
  866. top:180px; /*position of pop up*/
  867. left:820px;
  868. z-index: 9999999999999; /*if the box is hiding behind other things in your theme, add more 9′s */
  869. }
  870.  
  871.  
  872.  
  873. /*tabbed popups begins*/
  874.  
  875. ul#tabs {
  876. list-style-type: none;
  877. padding: 0;
  878. text-align: center;
  879. }
  880.  
  881. ul#tabs li:hover { /*appearance when you hover on titles*/
  882. text-align:justify;
  883. width: 100px; /*width of your title*/
  884. box-shadow: 1px 1px 5px #111;
  885. background-image: url('https://31.media.tumblr.com/9348a3347757267167ed4b81dafbf430/tumblr_inline_ofaej6HMNo1uxel8e_500.gif'); /*background of tab title*/
  886. background-repeat:repeat;
  887. background-attachment:fixed;
  888. border: ridge 1px white; /*color of border of the titles of the sidebar*/
  889. padding:10px;
  890. margin:10px;
  891. color:#eae9e9; /*text color of tab titles*/
  892. text-shadow:1px 1px #090a0b,
  893. 1px -1px #090a0b,
  894. 1px 0px #090a0b,
  895. 0px 1px #090a0b,
  896. 0px -1px #090a0b,
  897. -1px 1px #090a0b,
  898. -1px 0px #090a0b,
  899. -1px -1px #090a0b;
  900. /*change all the hex of the text shadow to the same code
  901. to change the outline of the text*/
  902. font-size:11px;
  903. font-family:calibri;
  904. text-transform:uppercase;
  905. letter-spacing:1px;
  906. text-align:center;
  907. -webkit-transition: all 0.5s ease-out;
  908. -moz-transition: all 0.5s ease-out;
  909. transition: all 0.5s ease-out;
  910. }
  911.  
  912. ul#tabs li.active { /*your active tab title*/
  913. text-align:justify;
  914. width: 100px; /*width of your title*/
  915. box-shadow: 1px 1px 5px #111;
  916. background-image: url('https://31.media.tumblr.com/9348a3347757267167ed4b81dafbf430/tumblr_inline_ofaej6HMNo1uxel8e_500.gif'); /*background of tab title*/
  917. background-repeat:repeat;
  918. background-attachment:fixed;
  919. border: ridge 1px white; /*color of border of the titles of the sidebar*/
  920. padding:10px;
  921. margin:10px;
  922. color:#eae9e9; /*text color of tab titles*/
  923. text-shadow:1px 1px #090a0b,
  924. 1px -1px #090a0b,
  925. 1px 0px #090a0b,
  926. 0px 1px #090a0b,
  927. 0px -1px #090a0b,
  928. -1px 1px #090a0b,
  929. -1px 0px #090a0b,
  930. -1px -1px #090a0b;
  931. /*change all the hex of the text shadow to the same code
  932. to change the outline of the text*/
  933. font-size:11px;
  934. font-family:calibri;
  935. text-transform:uppercase;
  936. letter-spacing:1px;
  937. text-align:center;
  938. -webkit-transition: all 0.5s ease-out;
  939. -moz-transition: all 0.5s ease-out;
  940. transition: all 0.5s ease-out;
  941. }
  942.  
  943.  
  944. ul#tabs li { /*the rest of the titles / inactive one*/
  945. display:block;
  946. width: 100px;
  947. padding: 10px;
  948. margin:10px;
  949. font-size:11px;
  950. background-color:#090a0b;
  951. border: solid 1px #323131;
  952. box-shadow: 1px 1px 5px #111;
  953. color:#fff;
  954. font-family:calibri;
  955. text-transform:uppercase;
  956. cursor:pointer;
  957. -webkit-transition: all 0.5s ease-out;
  958. -moz-transition: all 0.5s ease-out;
  959. transition: all 0.5s ease-out;
  960. }
  961.  
  962.  
  963. ul#tab {
  964. list-style-type: none;
  965. margin: 0;
  966. padding: 0;
  967. }
  968. ul#tab li {
  969. display: none;
  970. }
  971. ul#tab li.active {
  972. display: block;
  973. }
  974.  
  975. #tabid { /*this is the navigation of your tabbed pop ups*/
  976. position:absolute;
  977. top: 180px; /*position of navigation*/
  978. left:550px; /*position of navigation*/
  979. text-align:center;
  980. width:auto;
  981. background:transparent;
  982. height:auto;
  983. overflow:scroll;
  984. text-align:justify;
  985. padding:10px;
  986. font-size:9px;
  987. font-family:calibri;
  988. text-transform:uppercase;
  989. letter-spacing:1px;
  990. text-align:center;
  991. z-index: 999999999999999999999999999999;
  992.  
  993. }
  994.  
  995. /*end*/
  996.  
  997. img.btn_close {
  998. float: right;
  999. margin: -5px -5px 0 0;
  1000. }
  1001. /*--Making IE6 Understand Fixed Positioning--*/
  1002. *html #fade {
  1003. position: absolute;
  1004. }
  1005. *html .popup_block {
  1006. position: absolute;
  1007. }
  1008.  
  1009. .navi_linksu h3 {
  1010. font-size:9px;
  1011. margin-bottom:-5px;
  1012. border:none;
  1013. color: #fff;
  1014. font-family: 'nightingale';
  1015. font-weight:normal;
  1016. letter-spacing:1px;
  1017. text-transform:lowercase;
  1018. background:transparent;
  1019. }
  1020.  
  1021. .navi_linksu {
  1022. text-align:center;
  1023. }
  1024.  
  1025. .navi_linksu a {
  1026. display: inline-block;
  1027. width: 80px;
  1028. padding: 5px;
  1029. margin:5px;
  1030. font-size:11px;
  1031. background-image: url('');
  1032. background:#080808;
  1033. background-repeat:repeat;
  1034. background-attachment:fixed;
  1035. border: solid 1px #323131;
  1036. box-shadow: 1px 1px 5px #111;
  1037. color:#fff;
  1038. font-family:calibri;
  1039. text-transform:uppercase;
  1040.  
  1041.  
  1042. }
  1043.  
  1044. .navi_linksu a:hover {
  1045. box-shadow: inset 100px 0 0 #fff;
  1046. -webkit-transition: all .5s ease-in-out;
  1047. -moz-transition: all .5s ease-in-out;
  1048. -ms-transition: all .5s ease-in-out;
  1049. -o-transition: all .5s ease-in-out;
  1050. transition: all .5s ease-in-out;
  1051. background:#576d8c;
  1052. border: solid 1px #6c8eb8;
  1053. color:#090a0b;
  1054. }
  1055.  
  1056. .versu {
  1057. width:80px;
  1058. height:auto;
  1059. float:left;
  1060. padding:20px;
  1061. }
  1062.  
  1063.  
  1064. .vee {
  1065. text-align:center;
  1066. padding:10px;
  1067. margin-bottom:20px;
  1068. }
  1069.  
  1070. /*POP UP END*/
  1071.  
  1072.  
  1073.  
  1074.  
  1075.  
  1076. /* DO NOT REMOVE THIS PART OR MAKE A COLOR THAT IS NOT VISIBLE */
  1077. .credit {
  1078. font-weight:bold;
  1079. border-top:dashed 1px #fff;
  1080. border-right:dashed 1px #fff;
  1081. border-left:dashed 1px #fff;
  1082. border-bottom:dashed 1px #fff;
  1083. background:#080808;
  1084. color:#fff;
  1085. padding:10px;
  1086. font-size:15px;
  1087. bottom:10px;
  1088. right:20px;
  1089. position:fixed;
  1090. font-family:'sail';
  1091. -webkit-filter: blur(.5px);
  1092. -moz-filter: blur(.5px);
  1093. -o-filter: blur(.5px);
  1094. -ms-filter: blur(.5px);
  1095. filter: blur(.5px);
  1096.  
  1097. }
  1098. /*CREDIT END*/
  1099.  
  1100. </style>
  1101.  
  1102. <body>
  1103. <!--sidebar begins here-->
  1104. <div id="boxy">
  1105. <div id="despacito">
  1106. <h3>for you, there'll be no more crying.</h3>
  1107. independent, private, <b>&&.</b> selective,<br>
  1108. <b>Bethany</b> Anette <b>Greene</b><br>
  1109. of <i>AMC'S The Walking Dead.</i>
  1110.  
  1111. <h3>for you, the sun will be shining.</h3>
  1112. <img src="https://i.imgur.com/6PXpXjE.png" height=170 width=109>
  1113. <h3>And I feel that when I'm with you,</h3>
  1114. <b>asks:</b> X <br>
  1115. <b>drafts:</b> X <br>
  1116. <b>currently:</b> X <br>
  1117. <b>as loved by shannon.</b>
  1118. <h3>it's alright, I know it's right.</h3>
  1119. </div>
  1120. </div>
  1121.  
  1122. <!--sidebar end-->
  1123.  
  1124. <!--this is where you edit the size and titles of the scattered links, you can edit their content way below though. The #?w= determines the width of the pop up, make sure to give your popups different box numbers-->
  1125. <div id="pops">
  1126. <div id="linku1"><div class="moose-animation"> <a href="/" title="HOME.">✦</a></div></div>
  1127. <div id="linku2"><div class="moose-animation"> <a href="#?w=500" rel="box1" class="poplight" title="ASK.">✦</a></div></div>
  1128. <div id="linku3"><div class="moose-animation"> <a href="#?w=500" rel="box2" class="poplight" title="NAVIGATION.">✦</a></div></div>
  1129. <div id="linku4"> <div class="moose-animation"><a href="#?w=320" rel="box3" class="poplight" title="RULES.">✦</a></div></div>
  1130. <div id="linku5"> <div class="moose-animation"><a href="#?w=320" rel="verses" class="poplight" title="VERSES.">✦</a></div></div>
  1131. <div id="linku6"> <div class="moose-animation"><a href="#?w=320" rel="box5" class="poplight" title="ABOUT.">✦</a></div></div>
  1132. </div>
  1133. </div>
  1134.  
  1135. <!--/* DO /NOT/ REMOVE THIS PART OR MAKE A COLOR THAT IS NOT VISIBLE */-->
  1136. <div class="credit"><a href="http://ddkinzart.tumblr.com" title="code by ddkinzart">D.</a></div>
  1137.  
  1138. <!--below is where the post structure begins, don't edit below this point if you're not familiar with coding or tumblr theme attritibutes-->
  1139.  
  1140. {block:Pagination}
  1141. <div class="pagi">
  1142. {block:PreviousPage}<a href="{PreviousPage}">«</a>{/block:PreviousPage}
  1143. {block:NextPage}<a href="{NextPage}">»</a>{/block:NextPage}
  1144. </div>
  1145. {/block:Pagination}
  1146. <div id="container">
  1147. <div id="entries">
  1148. {block:Posts}
  1149. <div id="content">
  1150. {block:Text}{block:Title}<div class="titulo">{Title}</div>{/block:Title}{Body}{/block:Text}
  1151. {block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  1152. {block:Panorama}{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Panorama}
  1153.  
  1154. {block:Photoset}{Photoset}{block:Caption}{Caption}{/block:Caption}
  1155. {/block:Photoset}
  1156.  
  1157. {block:Quote}<div class="quote">{Quote}</div>{block:Source}{Source}{/block:Source}{/block:Quote}
  1158. {block:Link}
  1159. {block:Thumbnail}
  1160. <img src="{Thumbnail}" alt="{Name}" style="width:95%;border-radius:25px">
  1161. {/block:Thumbnail}
  1162. <div id="linku">
  1163. <span style="font-size:20px">❝ </span> <a href="{URL}" class="link" {Target}>{Name}</a><span style="font-size:20px"> ❞</span>
  1164. </div>
  1165. {/block:Link}
  1166.  
  1167. {block:Chat}
  1168. {block:Title}
  1169. <div class="titulo">{Title}</div>{/block:Title}<br>
  1170. <ul class="convo">{block:Lines}<li class="line_{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label}
  1171. {Line}</li>{/block:Lines}</ul>
  1172. {/block:Chat}
  1173.  
  1174. {block:Video}{Video-250}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  1175. {block:Audio}{AudioEmbed-250}{block:Caption}{Caption}{/block:Caption}{/block:Audio}
  1176. {block:Answer}
  1177. <div id="asker" style="text-align:center;">{Asker}</div><div id="ask">{Question}</div>
  1178. <div id="answer">
  1179. {Answer}</div>
  1180. {/block:Answer}
  1181. <div class="permalinks">
  1182. {block:RebloggedFrom}
  1183. <a href="{ReblogParentURL}" title="via: {ReblogParentName}" > ✦ </a>
  1184. {/block:RebloggedFrom}
  1185. <span style="letter-spacing:-0.5px">posted </span><a href="{Permalink}" title="{timeago}" style="letter-spacing:-0.1px;"> &nbsp;{timeago}</a>{block:NoteCount} with
  1186. <a href="{Permalink}" title="{NoteCount} hits."> {NoteCount}</a> hits.{/block:NoteCount}
  1187. {block:ContentSource}
  1188. <a href="{SourceURL}" title="source: {SourceTitle}"> ✦ </a>
  1189. {/block:ContentSource}
  1190. <a href="{ReblogURL}" title="reblog" target="_blank"> ✦ </a>
  1191. {/block:RebloggedFrom}
  1192. </div>
  1193. <div class="tags">
  1194. {block:HasTags}
  1195. {block:Tags}
  1196. <!--you can change symbol before tags to something else--># <a href="{TagURL}" title="{Tag}">{Tag}</a>
  1197. {/block:Tags}
  1198. {/block:HasTags}
  1199. {block:PostNotes}{PostNotes}{/block:PostNotes}
  1200.  
  1201. </div></div>
  1202. {/block:Posts}
  1203. </div>
  1204. </div>
  1205. </body>
  1206.  
  1207.  
  1208. <!--This is where the pop up begins, you can edit beyond this point-->
  1209.  
  1210. <div id="box1" class="popup_block" style="top:50%;left:50%">
  1211. <i style="text-align:center;">{AskLabel}</i>
  1212. <br>
  1213. <div class="queque">
  1214. {block:ShowHeaderImage}<img src="{HeaderImage}" width="100%">{/block:ShowHeaderImage} <!-- this will automatically display your mobile header image, but you can substitute with the url of another image, try to choose image which's width matches your pop up-->
  1215. <iframe frameborder="0" height="200" id="ask_form" scrolling="yes" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" width="100%"></iframe>
  1216. </div></div>
  1217. </div>
  1218. <div id="box2" class="popup_block" style="top:50%;left:50%">
  1219. <h3>navigation</h3>
  1220. <div class="navi_linksu">
  1221. <h3>main</h3>
  1222. <a href="/tagged/">TAG</a>
  1223. <a href="/tagged/">TAG</a>
  1224. <a href="/tagged/">TAG</a>
  1225. <a href="/tagged/">TAG</a>
  1226. <a href="/tagged/">TAG</a>
  1227. <a href="/tagged/">TAG</a>
  1228. <a href="/tagged/">TAG</a>
  1229. <a href="/tagged/">TAG</a>
  1230. <a href="/tagged/">TAG</a>
  1231. <h3>other</h3>
  1232. <a href="/tagged/">TAG</a>
  1233. <a href="/tagged/">TAG</a>
  1234. <a href="/tagged/">TAG</a>
  1235. <a href="/tagged/">TAG</a>
  1236. <a href="/tagged/">TAG</a>
  1237. <a href="/tagged/">TAG</a>
  1238. <a href="/tagged/">TAG</a>
  1239. <a href="/tagged/">TAG</a>
  1240. <a href="/tagged/">TAG</a>
  1241. </div>
  1242. </div>
  1243. </div>
  1244.  
  1245.  
  1246. <div id="box3" class="popup_block"><div class="tabheader">Rules.</div><div class="popup_boxy">
  1247. Your rules go here.
  1248. Add as much as you'd like.
  1249. Can be stylized like a normal text post.
  1250. For example <b>this is bold text.</b>
  1251. and this is for <i>italics.</i>
  1252.  
  1253. Have fun :D
  1254. </div></div></div>
  1255.  
  1256. <div id="verses" class="popup_block"><div class="tabheader">Verses.</div>
  1257. <div id="tabid">
  1258. <ul id="tabs">
  1259. <li class="active">main.</li>
  1260. <li>au.</li>
  1261. <li>other.</li>
  1262. </ul></div>
  1263.  
  1264. <div class="popup_boxy">
  1265. <ul id="tab">
  1266.  
  1267. <li class="active">
  1268.  
  1269. <h3>MAIN</h3>
  1270.  
  1271. <!--start copying from here if you want more verse blocks-->
  1272.  
  1273. <div class="vee">
  1274.  
  1275. <img class="versu" src="https://68.media.tumblr.com/e5a7b405bb8eb4247da059136f2ba03f/tumblr_inline_op0qh858td1uhvvxb_540.png"> <!--REPLACE WITH IMAGE URL-->
  1276.  
  1277. <p><a href="VERSE TAG"><b>VERSE NAME</b></a>
  1278. <br><br><b>AGE</b>
  1279. <br><b>TIMELINE</b>
  1280. <br><b>POSITION</b>
  1281.  
  1282. <br><br><br><br>VERSE DESCRIPTION GOES HERE.
  1283.  
  1284. </div>
  1285.  
  1286. <!--paste here-->
  1287. <!--start copying from here if you want more verse blocks-->
  1288.  
  1289. <div class="vee">
  1290.  
  1291. <img class="versu" src="https://68.media.tumblr.com/e5a7b405bb8eb4247da059136f2ba03f/tumblr_inline_op0qh858td1uhvvxb_540.png"> <!--REPLACE WITH IMAGE URL-->
  1292.  
  1293. <p><a href="VERSE TAG"><b>VERSE NAME</b></a>
  1294. <br><br><b>AGE</b>
  1295. <br><b>TIMELINE</b>
  1296. <br><b>POSITION</b>
  1297.  
  1298. <br><br><br><br>VERSE DESCRIPTION GOES HERE.
  1299.  
  1300. </div>
  1301.  
  1302. <!--paste here-->
  1303.  
  1304.  
  1305.  
  1306. </li>
  1307.  
  1308. <li>
  1309.  
  1310. <h3>AU</h3>
  1311.  
  1312. <!--start copying from here if you want more verse blocks-->
  1313.  
  1314. <div class="vee">
  1315.  
  1316. <img class="versu" src="https://68.media.tumblr.com/e5a7b405bb8eb4247da059136f2ba03f/tumblr_inline_op0qh858td1uhvvxb_540.png"> <!--REPLACE WITH IMAGE URL-->
  1317.  
  1318. <p><a href="VERSE TAG"><b>VERSE NAME</b></a>
  1319. <br><br><b>AGE</b>
  1320. <br><b>TIMELINE</b>
  1321. <br><b>POSITION</b>
  1322.  
  1323. <br><br><br><br>VERSE DESCRIPTION GOES HERE.
  1324.  
  1325. </div>
  1326.  
  1327. <!--paste here-->
  1328. <!--start copying from here if you want more verse blocks-->
  1329.  
  1330. <div class="vee">
  1331.  
  1332. <img class="versu" src="https://68.media.tumblr.com/e5a7b405bb8eb4247da059136f2ba03f/tumblr_inline_op0qh858td1uhvvxb_540.png"> <!--REPLACE WITH IMAGE URL-->
  1333.  
  1334. <p><a href="VERSE TAG"><b>VERSE NAME</b></a>
  1335. <br><br><b>AGE</b>
  1336. <br><b>TIMELINE</b>
  1337. <br><b>POSITION</b>
  1338.  
  1339. <br><br><br><br>VERSE DESCRIPTION GOES HERE.
  1340.  
  1341. </div>
  1342.  
  1343. <!--paste here-->
  1344.  
  1345. </li>
  1346.  
  1347. <li>
  1348.  
  1349. <h3>OTHER</h3>
  1350.  
  1351. <!--start copying from here if you want more verse blocks-->
  1352.  
  1353. <div class="vee">
  1354.  
  1355. <img class="versu" src="https://68.media.tumblr.com/e5a7b405bb8eb4247da059136f2ba03f/tumblr_inline_op0qh858td1uhvvxb_540.png"> <!--REPLACE WITH IMAGE URL-->
  1356.  
  1357. <p><a href="VERSE TAG"><b>VERSE NAME</b></a>
  1358. <br><br><b>AGE</b>
  1359. <br><b>TIMELINE</b>
  1360. <br><b>POSITION</b>
  1361.  
  1362. <br><br><br><br>VERSE DESCRIPTION GOES HERE.
  1363.  
  1364. </div>
  1365.  
  1366. <!--paste here-->
  1367.  
  1368. <!--start copying from here if you want more verse blocks-->
  1369.  
  1370. <div class="vee">
  1371.  
  1372. <img class="versu" src="https://68.media.tumblr.com/e5a7b405bb8eb4247da059136f2ba03f/tumblr_inline_op0qh858td1uhvvxb_540.png"> <!--REPLACE WITH IMAGE URL-->
  1373.  
  1374. <p><a href="VERSE TAG"><b>VERSE NAME</b></a>
  1375. <br><br><b>AGE</b>
  1376. <br><b>TIMELINE</b>
  1377. <br><b>POSITION</b>
  1378.  
  1379. <br><br><br><br>VERSE DESCRIPTION GOES HERE.
  1380.  
  1381. </div>
  1382.  
  1383. <!--paste here-->
  1384.  
  1385.  
  1386. </li>
  1387.  
  1388. </ul> <!--important don't delete-->
  1389. </div></div></div></div></div></div></div></div></div></div></div></div>
  1390.  
  1391. </div>
  1392. </div></div>
  1393.  
  1394. <div id="box5" class="popup_block"><div class="tabheader">About.</div>
  1395. <div id="tabid">
  1396. <ul id="tabs">
  1397. <li class="active">main.</li>
  1398. <li>appearance.</li>
  1399. <li>interests.</li>
  1400. <li>personality</li>
  1401. <li>abilities.</li>
  1402. <li>biography.</li>
  1403. </ul></div>
  1404.  
  1405.  
  1406. <div class="popup_boxy">
  1407. <ul id="tab">
  1408.  
  1409. <li class="active">
  1410.  
  1411. <h3>General Information</h3>
  1412.  
  1413. </li>
  1414.  
  1415. <li>
  1416.  
  1417. <h3>Appearance</h3>
  1418.  
  1419. </li>
  1420.  
  1421. <li>
  1422.  
  1423. <h3>Interests</h3>
  1424.  
  1425. </li>
  1426.  
  1427. <li>
  1428.  
  1429. <h3>Personality</h3>
  1430.  
  1431. </li>
  1432.  
  1433. <li>
  1434.  
  1435. <h3>Abilities</h3>
  1436.  
  1437. </li>
  1438.  
  1439. <li>
  1440.  
  1441. <h3>Biography</h3>
  1442.  
  1443. </li>
  1444.  
  1445. </ul> <!--important don't delete-->
  1446. </div></div></div></div></div></div></div></div></div></div></div></div>
  1447.  
  1448.  
  1449. </div></div>
  1450.  
  1451. </div></div></div></div></div></div></div></div></div></div>
  1452.  
  1453. </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!