API tools faq
paste
lovesjoon

theme 06: taehyung, v1.

lovesjoon
Jun 21st, 2020 (edited)
2,051
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 47.17 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5.  
  6.  
  7.  
  8.  
  9.  
  10.  
  11.  
  12.  
  13. <!--- ♡ THEME: 006 - TAEHYUNG by TWENTYS (rmon). ♡
  14.  
  15.  
  16. ♡ READ ME ♡
  17.  
  18.  
  19. + base code by @borntobewildcodes, edited by twentys
  20.  
  21. + updated post styling by @hixtapes, tysm love you lots juju !!! <3
  22.  
  23. + pretty please dont recreate / steal parts of this code / remove credit
  24.  
  25. + feel free to reach out if there are any bugs or questions ♡
  26.  
  27.  
  28. hope you enjoy this code !! ♡( ◡‿◡ ) --->
  29.  
  30.  
  31.  
  32.  
  33.  
  34.  
  35.  
  36.  
  37. <title>{Title}</title>
  38. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  39. <link rel="shortcut icon" href="{Favicon}">
  40. {block:Description}
  41. <meta name="description" content="{MetaDescription}">
  42. {/block:Description}
  43.  
  44.  
  45.  
  46.  
  47. <meta name="image:sidebar" content="1"/>
  48. <meta name="image:optional icon" content="1"/>
  49.  
  50. <meta name="if:400px posts" content="1"/>
  51. <meta name="if:muse tab" content="1" />
  52.  
  53. <meta name="color:background" content="#0f0f0f"/>
  54. <meta name="color:container" content="#181818"/>
  55. <meta name="color:posts" content="#181818"/>
  56. <meta name="color:borders" content="#363636"/>
  57. <meta name="color:accent" content="#d1b2a6"/>
  58. <meta name="color:accent2" content="#f1f2f7"/>
  59. <meta name="color:moon" content="#eee"/>
  60. <meta name="color:clouds" content="#eee"/>
  61. <meta name="color:clouds2" content="#d0d0d0"/>
  62. <meta name="color:text" content="#acacac"/>
  63. <meta name="color:links" content="#aeb9cd"/>
  64. <meta name="color:hover" content="#fff"/>
  65. <meta name="color:bold" content="#fff"/>
  66. <meta name="color:italic" content="#d7d7d7"/>
  67. <meta name="color:chat post 1" content="#d1b2a6"/>
  68. <meta name="color:chat post 2" content="#aeb9cd"/>
  69.  
  70. <meta name="text:ask icon hover" content="have a great day &#9825;"/>
  71. <meta name="text:desc text" content="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem pulvinar id, commodo feugiat"/>
  72. <meta name="text:ooc info" content="name (she/he/them), age, tz."/>
  73. <meta name="text:nav desc" content=" : whatever you want can go here ! wid, blog info, some song lyrics, application layout for your character, etc ! this scrolls so you can make this as long or short as you want, Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat."/>
  74.  
  75. <meta name="text:optional link" content="link"/>
  76. <meta name="text:optional link url" content="link url"/>
  77.  
  78. <meta name="text:link1" content="url link 1"/>
  79. <meta name="text:link1txt" content="title 1"/>
  80. <meta name="text:link2" content="url link 2"/>
  81. <meta name="text:link2txt" content="title 2"/>
  82. <meta name="text:link3" content="url link 3"/>
  83. <meta name="text:link3txt" content="title 3"/>
  84. <meta name="text:link4" content="url link 4"/>
  85. <meta name="text:link4txt" content="title 4"/>
  86. <meta name="text:link5" content="url link 5"/>
  87. <meta name="text:link5txt" content="title 5"/>
  88. <meta name="text:link6" content="url link 6"/>
  89. <meta name="text:link6txt" content="title 6"/>
  90.  
  91.  
  92.  
  93.  
  94. <!--- PT. 1: SCRIPTS: JQUERY + TOOLTIP + TABS + FONTS ---->
  95.  
  96.  
  97.  
  98.  
  99. <!--- JQUERY SCRIPTS --->
  100.  
  101. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  102. <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
  103.  
  104.  
  105.  
  106. <!--- TOOLTIP SCRIPT ---->
  107.  
  108. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  109. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  110. <script src="https://unpkg.com/feather-icons"></script>
  111. <script> (function($){ $(document).ready(function(){ $("a[title]").style_my_tooltips({ tip_follows_cursor:true, tip_delay_time:50, tip_fade_speed:600, attribute:"title" }); }); })(jQuery); </script>
  112.  
  113.  
  114.  
  115. <!--- GOOGLE + ICON FONTS ---->
  116.  
  117. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  118. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/v4-shims.css">
  119.  
  120. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  121.  
  122. <script src="https://unpkg.com/feather-icons"></script>
  123.  
  124. <link href="https://fonts.googleapis.com/css2?family=Lato&family=Merriweather:ital@1&family=Open+Sans&display=swap" rel="stylesheet">
  125.  
  126. <link href="https://fonts.googleapis.com/css2?family=Julius+Sans+One&display=swap" rel="stylesheet">
  127.  
  128.  
  129.  
  130.  
  131. <!--- VIDEO SCRIPT BY SHYTHEMES ---->
  132.  
  133. <script> $(document).ready(function(){ $('.video iframe').each(function(){ var scale = $(this).parents('.video').width() / 500; $(this).attr({ width: Math.floor($(this).attr('width') * scale), height: Math.floor($(this).attr('height') * scale) });});}); </script>
  134.  
  135.  
  136.  
  137.  
  138. <!--- TAB SCRIPT ---->
  139.  
  140. <script> function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } </script>
  141.  
  142.  
  143.  
  144.  
  145. <style type="text/css">
  146.  
  147.  
  148.  
  149.  
  150.  
  151. /*---PT. 2: TOOLTIP + SCROLLBAR + SELECTION---*/
  152.  
  153.  
  154.  
  155.  
  156. /*TOOLTIP*/
  157.  
  158. #s-m-t-tooltip { max-width:auto; max-height:auto; background:{color:posts}; color:{color:text}; margin:20px 20px 20px 20px; padding:6px 10px 6px 10px; border:1px solid {color:borders}; border-radius:5px; z-index:9999999999; font-family:"lato"; font-size:8px; font-weight:bold; text-transform:uppercase; font-weight:bold; letter-spacing:1px; }
  159.  
  160.  
  161. /*SCROLLBAR*/
  162.  
  163. ::-webkit-scrollbar-thumb { display:none; }
  164.  
  165. ::-webkit-scrollbar { display:none; }
  166.  
  167.  
  168. /*SELECTION*/
  169.  
  170. ::-moz-selection { background:{color:accent}; color:{color:posts}; }
  171.  
  172. ::selection { background:{color:accent}; color:{color:posts}; }
  173.  
  174.  
  175.  
  176.  
  177. /*---PT. 3: BODY + TEXT STYLING---*/
  178.  
  179.  
  180.  
  181.  
  182. /*BODY*/
  183.  
  184. body { width:100%; height:100%; background-image:url({image:background}); background-attachment:fixed; background-repeat:repeat; background:{color:background}; color:{color:text}; margin:0; padding:0; font-family:'open sans', sans-serif; font-size:10px; text-align:justify; line-height:20px; {block:if400pxPosts} font-size:12px; line-height:17px; {/block:if400pxPosts}}
  185.  
  186.  
  187. /*FIX*/
  188.  
  189. iframe, img, embed, object { max-width:100%; margin:auto; border:none; }
  190.  
  191. img { max-width:100%; height:auto; margin:auto; border:none; }
  192.  
  193.  
  194. /*TEXT STYLING*/
  195.  
  196. select, textarea, input, a { outline:none; }
  197.  
  198. p { margin-top:5px; margin-bottom:5px; }
  199.  
  200. small, sub, sup { font-size:100%; }
  201.  
  202. big { font-size:110%; }
  203.  
  204. h1 { background:transparent; color:{color:accent2}; margin-top:20px; font-family:'merriweather', serif; font-size:25px; text-transform:lowercase; text-align:center; line-height:28px; letter-spacing:1px; }
  205.  
  206. h2 { color:{color:accent}; font-family:'lato', sans-serif; font-size:11px; text-transform:uppercase; text-align:center; line-height:18px; letter-spacing:2px; }
  207.  
  208. a { color:{color:links}; font-family:'lato', sans-serif; font-size:9px; font-weight:bold; text-transform:uppercase; text-decoration:none; letter-spacing:1px; }
  209.  
  210. a:hover { color:{color:hover};
  211.  
  212. -webkit-transition: all .3s;
  213. -moz-transition: all .3s;
  214. -o-transition: all .3s;
  215. -ms-transition: all .3s;
  216. transition: all .3s; }
  217.  
  218. ul, ol, li { margin:5px 10px; padding:0px; line-height:20px; }
  219.  
  220. b, strong { color:{color:bold}; }
  221.  
  222. i, em { color:{color:italic}; }
  223.  
  224. blockquote { margin:10px; padding-left:20px; border-left:1px solid {color:borders}; }
  225.  
  226.  
  227. /*TUMBLR CONTROLS*/
  228.  
  229. iframe.tmblr-iframe { top:0px!important; right:0px!important; opacity:0.8; transform:scale(0.6); transform-origin:100% 0; -webkit-transform:scale(0.8); -webkit-transform-origin:100% 0; -o-transform:scale(0.8); -o-transform-origin:100% 0; -moz-transform:scale(0.8); -moz-transform-origin:100% 0; -ms-transform:scale(0.8); -ms-transform-origin:100% 0; z-index:100000!important; }
  230.  
  231. iframe.tmblr-iframe:hover { opacity:1!important; }
  232.  
  233.  
  234.  
  235.  
  236. /*--- PT. 4: CONTAINER + SIDEBAR ---*/
  237.  
  238.  
  239.  
  240.  
  241. /*CONTAINER*/
  242.  
  243. #wrapper { position:absolute; width:1000px; {block:if400pxPosts} width:1100px; {/block:if400pxPosts} height:560px; top:0px; right:0px; bottom:0px; left:0px; margin:auto; overflow:hidden; }
  244.  
  245. #container { position:absolute; width:800px; {block:if400pxPosts} width:900px; {/block:if400pxPosts} height:520px; top:0px; right:0px; bottom:0px; left:0px; margin:auto; background:{color:container}; overflow:hidden; border:1px solid {color:borders}; }
  246.  
  247. #border { position:absolute; width:840px; {block:if400pxPosts} width:940px; {/block:if400pxPosts} height:560px; top:0px; right:0px; bottom:0px; left:0px; margin:auto; background:{color:container}; }
  248.  
  249.  
  250. /*SIDEBAR PT. I: NIGHTSKY */
  251.  
  252. .moon { position:absolute; width:90px; height:90px; top:30px; left:40px; background:{color:moon}; border-radius:100%; }
  253.  
  254. .moon2 { position:absolute; width:70px; height:70px; top:30px; left:70px; background:{color:container}; border-radius:100%; }
  255.  
  256. .star1 { position:absolute; top:15px; left:160px; color:{color:moon}; font-size:20px; z-index:999; }
  257.  
  258. .star2 { position:absolute; top:170px; left:20px; color:{color:moon}; font-size:15px; z-index:999; }
  259.  
  260. .star3 { position:absolute; top:150px; left:110px; color:{color:moon}; font-size:12px; z-index:999; }
  261.  
  262. .star4 { position:absolute; top:50px; left:360px; color:{color:moon}; font-size:12px; z-index:999; }
  263.  
  264. .blinking { animation:blinkingText 4s infinite; }
  265.  
  266. @keyframes blinkingText { 0%{color:{color:moon};} 49%{color:{color:moon};} 60%{color:transparent;} 80%{color:transparent;} 100%{color:{color:moon};} }
  267.  
  268. .blinking2 { animation:blinkingText 8s infinite; }
  269.  
  270. .blinking3 { animation:blinkingText 14s infinite; }
  271.  
  272.  
  273. /*SIDEBAR PT. II: LINKS + GRAPH + DESCRIPTION*/
  274.  
  275. .dots { position:absolute; width:250px; height:80px; top:256px; left:130px; overflow:hidden; word-wrap:break-word; letter-spacing:4px; line-height:25px; z-index:9; }
  276.  
  277. .desctxt { position:absolute; width:225px; height:80px; top:250px; left:140px; overflow:hidden; line-height:25px; font-family: 'Julius Sans One', sans-serif; font-size:10px; color:{color:moon}; letter-spacing:2px; overflow:scroll; z-index:99; }
  278.  
  279. .tab { position:absolute; width:auto; height:auto; bottom:0px; left:45px; overflow:hidden; text-align:center; }
  280.  
  281. .tab li { display:block; margin-right:2px; }
  282.  
  283. .tab a { width:100px; height:50px; background:transparent; color:{color:moon}; font-size:22px; line-height:10px; letter-spacing:1px; }
  284.  
  285. .tab a:hover { font-size:22px;
  286.  
  287. -webkit-text-fill-color:transparent;
  288. -webkit-text-stroke-width:.5px;
  289. -webkit-text-stroke-color:{color:moon};
  290. -webkit-font-smoothing:antialiased; }
  291.  
  292. .tab a:focus { font-size:22px;
  293.  
  294. -webkit-text-fill-color:transparent;
  295. -webkit-text-stroke-width:.5px;
  296. -webkit-text-stroke-color:{color:moon};
  297. -webkit-font-smoothing:antialiased; }
  298.  
  299.  
  300.  
  301.  
  302. /*--- PT.5: POSTS + ENTRIES ---*/
  303.  
  304.  
  305.  
  306.  
  307. /*POST CONTAINER*/
  308.  
  309. #postcon { position:absolute; width:400px; height:520px; {block:if400pxPosts} width:500px; {/block:if400pxPosts} right:0px; top:0px; margin:auto; }
  310.  
  311.  
  312. /*POSTS*/
  313.  
  314. #posts { position:absolute; width:360px; {block:if400pxPosts} width:460px; {/block:if400pxPosts} height:480px; top:0px; left:20px; padding:20px 0px 20px 0px; z-index:1000; overflow-x:hidden; overflow-y:scroll; }
  315.  
  316.  
  317. /*ENTRY STYLING*/
  318.  
  319. .entry { width:300px; {block:if400pxPosts} width:400px; {/block:if400pxPosts} height:auto; margin:20px; padding:10px 10px 0px 10px; background:{color:posts}; border:1px solid {color:borders}; display:inline-block; overflow:hidden; }
  320.  
  321. .entry img { margin:0px; padding:0px; }
  322.  
  323.  
  324.  
  325.  
  326. /*--- PT.6: POST INFO + NOTES + PAGINATION + CREDIT---*/
  327.  
  328.  
  329.  
  330.  
  331. /*TOP POST INFO*/
  332.  
  333. .topinfo { width:100%; height:20px; margin-top:0px; margin-bottom:15px; margin-left:-10px; padding: 0px 10px 10px 10px; background:{color:posts}; border-bottom:1px solid {color:borders}; line-height:22px; }
  334.  
  335. .topinfo a { margin-left:5px; color:{color:links}; font-family:'lato', sans-serif; font-size:9px; font-weight:bold; text-transform:uppercase; letter-spacing:1px; }
  336.  
  337. .preblog { width:auto; height:26px; margin-top:0px; margin-right:5px; list-style:none; z-index:100; float:right; line-height:22px; }
  338.  
  339.  
  340. /*BOTTOM POST INFO*/
  341.  
  342. .bottominfo { width:100%; height:auto; min-height:20px; margin-top:15px; margin-left:-10px; padding:10px 15px; background:{color:posts}; color:{color:text}; border-top:1px solid {color:borders}; overflow:hidden; font-size:12px; line-height:22px; }
  343.  
  344. .bottominfo a { color:{color:links}; font-family:'lato', sans-serif; font-size:9px; font-weight:bold; text-transform:uppercase; letter-spacing:1px; }
  345.  
  346. .psource { width:auto; height:25px; margin-top:0px; margin-right:10px; list-style:none; z-index:100; float:right; line-height:22px; }
  347.  
  348.  
  349. /*TAGS*/
  350.  
  351. .tags { {block:IndexPage} width:290px; {block:if400pxPosts} width:390px; {/block:if400pxPosts} margin-top:0px; text-align:justify; line-height:14px; {/block:IndexPage} }
  352.  
  353. .tags a { color:{color:text}; font-family:'lato', sans-serif; font-size:7px; }
  354.  
  355. .tags a:hover { color:{color:hover}; font-weight:bold; }
  356.  
  357.  
  358. /*POST NOTES*/
  359.  
  360. .note c { float:left; }
  361.  
  362. #notes { width:300px; {block:if400pxPosts} width:400px; {/block:if400pxPosts} margin:0px; color:{color:text}; font-size:12px; }
  363.  
  364. ol.notes { margin:0px; padding:0px; list-style-type:none; }
  365.  
  366. ol.notes li.note { margin:0px; padding:10px 0px; border-bottom:1px solid {color:borders}; }
  367.  
  368. ol.notes li.note img.avatar { width:20px; height:20px; margin-right:10px; margin-left:0px; float:left; vertical-align:-5px; }
  369.  
  370. li.more_notes_link_container { font-size: 12px; }
  371.  
  372.  
  373. /*PAGINATION*/
  374.  
  375. .pagination { width:100%; text-align:center; }
  376.  
  377. .pagination a { padding:8px; word-spacing:2px; }
  378.  
  379. .pagination a:hover { color:{color:links}; }
  380.  
  381. .pagination i { width:10px; height:10px; color:{color:links}; }
  382.  
  383.  
  384. /*CREDIT*/
  385.  
  386. #cred { position:fixed; width:auto; height:auto; bottom:15px; right:15px; background-color:{color:posts}; border-top-right-radius:10px; border-bottom-left-radius:10px; }
  387.  
  388. #cred span { padding:10px; font-size:18px; background:-webkit-linear-gradient({color:accent}, {color:accent2});
  389.  
  390. -webkit-background-clip:text;
  391. -webkit-text-fill-color:transparent; }
  392.  
  393.  
  394.  
  395.  
  396. /*--- PT.7: POST STYLING ---*/
  397.  
  398.  
  399.  
  400.  
  401. /*CHATS*/
  402.  
  403. .answer span,.convo li { position:relative; max-width:75%; margin:0 0 15px; padding:.9em 10px; border-radius:1em; clear:both; }
  404.  
  405. .answer .them,.user_1,.user_3,.user_5,.user_7,.user_9,.user_11{ left:3px; background:{color:chat post 1}; color:{color:container}; float:left; }
  406.  
  407. .me::after,.user_1::after,.user_3::after,.user_5::after,.user_7::after,.user_9::after,.user_11::after{ content:""; position:absolute; width:.5em; height:1em; left:-.5em; bottom:0; border-right:.9em solid {color:chat post 1}; border-bottom-right-radius:1em .5em; }
  408.  
  409. .answer .me,.user_2,.user_4,.user_6,.user_8,.user_10,.user_12{ right:3px; background-color:{color:chat post 2}; color:{color:container}; float:right; }
  410.  
  411. .them::after,.user_2::after,.user_4::after,.user_6::after,.user_8::after,.user_10::after,.user_12::after{ content:""; position:absolute; width:.5em; height:1em; right:-.5em; bottom:0; border-left:.9em solid {color:chat post 2}; border-bottom-left-radius:1em .5em; }
  412.  
  413. .me p,.answer,.asked span{ margin:0; padding:0; }
  414.  
  415. .answer{ overflow:hidden; }
  416.  
  417. .asked p { margin:0 0px 10px 0px; padding:0; color:{color:container}; font-size:12px; text-align:left; line-height:0px; }
  418.  
  419. .footerright .viasrc { float:left; }
  420.  
  421. .asked a { margin:0; padding:0; }
  422.  
  423. .user_3{ background-color:{color:chat post 1}; color{color:container}; }
  424.  
  425. .user_3::after{ border-color:{color:chat post 1}; }
  426.  
  427. .user_4{ background-color:{color:chat post 2}; color{color:container}; }
  428.  
  429. .user_4::after{ border-color:{color:chat post 2}; }
  430.  
  431. .user_5{ background-color:{color:chat post 1}; color:{color:container}; }
  432.  
  433. .user_5::after{ border-color:{color:chat post 1}; }
  434.  
  435. .user_6{ background-color:{color:chat post 2}; color{color:container}; }
  436.  
  437. .user_6::after{ border-color:{color:chat post 2}; }
  438.  
  439. .user_7{ background-color:{color:chat post 1}; color{color:container}; }
  440.  
  441. .user_7::after{ border-color:{color:chat post 1}; }
  442.  
  443. .user_8{ background-color:{color:chat post 2}; color{color:container}; }
  444.  
  445. .user_8::after{ border-color:{color:chat post 2}; }
  446.  
  447. .user_9{ background-color:{color:chat post 1}; color{color:container}; }
  448.  
  449. .user_9::after{ border-color:{color:chat post 1}; }
  450.  
  451. .convo { margin:0; padding:0; overflow:hidden; list-style-type:none; }
  452.  
  453.  
  454. /*QUOTES*/
  455.  
  456. .quote { margin:10px; padding:5px; color:{color:italic}; font-family:'merriweather', serif; font-size:18px; text-align:center; text-transform:lowercase; line-height:25px; letter-spacing:1px; word-spacing:3px; }
  457.  
  458. .source { font-size:12px; text-align:right; line-height:20px; }
  459.  
  460.  
  461. /*ASKS*/
  462.  
  463. .asker { position:relative; color:{color:container}; font-size:9px; text-transform:lowercase; text-decoration:none; }
  464.  
  465. .asker a { color:{color:container}; font-family:'lato', sans-serif; font-style:italic; text-transform:uppercase; letter-spacing:1px; }
  466.  
  467. .asker b { padding:0px 6px 0px 6px; color:{color:container}; font-family:'lato', sans-serif; font-weight:bold; font-style:italic; text-transform:uppercase; letter-spacing:1px; }
  468.  
  469. .ask { width:247px; {block:if400pxPosts} width:347px; {/block:if400pxPosts} height:auto; margin-left:20px; padding:5px 5px 5px 10px; background:{color:accent}; border-top-left-radius:10px; border-top-right-radius:10px; }
  470.  
  471. .answer { margin:10px; }
  472.  
  473. .bubble { width:210px; {block:if400pxPosts} width:310px; {/block:if400pxPosts} height:auto; margin-top:-10px; margin-left:20px; padding:0px 25px 10px 25px; border:1px solid {color:borders}; border-bottom-left-radius:10px; border-bottom-right-radius:10px; font-family:'lato', sans-serif; font-size:7px; text-transform:uppercase; text-align:justify; letter-spacing:1px; }
  474.  
  475. .bubble span { position:absolute; width:auto; height:auto; margin-top:-5px; margin-left:225px; {block:if400pxPosts} margin-left:325px; {/block:if400pxPosts} background:{color:posts}; font-size:18px; }
  476.  
  477.  
  478. /*LINKS*/
  479.  
  480. .linktitle { margin:0; margin-top:30px; margin-bottom:30px; color:{color:accent2}; font-size:15px; font-weight:normal; text-transform:lowercase; line-height:20px; }
  481.  
  482.  
  483. /*AUDIO*/
  484.  
  485. .playbutton { position:relative; width:33px; height:38px; margin-top:45px; margin-left:30px; overflow:hidden; opacity:0.6; z-index:9; }
  486.  
  487. .albumart img { position:relative; width:65px; height:65px; margin-top:-65px; margin-left:0px; padding:10px; border:1px solid {color:borders}; }
  488.  
  489. .trackinfo { position:relative; width:185px; {block:if400pxPosts} width:285px; {/block:if400pxPosts} height:65px; top:2.5px; margin-top:-95px; margin-bottom:20px; margin-left:100px; padding:10px 5px 10px 5px; background:{color:posts}; color:{color:text}; border:1px solid {color:borders}; }
  490.  
  491. .trackname { position:relative; padding-top:15px; font-size:8px; font-weight:bold; text-transform:uppercase; text-align:center; line-height:12px; letter-spacing:2px; }
  492.  
  493. .artist { font-size:7.5px; text-transform:uppercase; text-align:center; letter-spacing:4px; }
  494.  
  495.  
  496. /*VIDEOS*/
  497.  
  498. .tumblr_video_container { width:auto!important; height:auto!important; }
  499.  
  500.  
  501.  
  502.  
  503. /*--- PT.8: TABS ---*/
  504.  
  505.  
  506.  
  507.  
  508. /*TAB + CLOSE CONTENT*/
  509.  
  510. .tabcontent { position:absolute; width:380px; {block:if400pxPosts} width:480px; {/block:if400pxPosts} height:520px; top:0px; right:0px; background:{color:container}; overflow:hidden; z-index:9999; display:none; animation: fadeEffect 1s; }
  511.  
  512. @keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} }
  513.  
  514. .close { position:absolute; right:0px; padding:15px 15px; color:{color:links}; z-index:999999; font-size:11px; }
  515.  
  516. .close:hover { cursor:pointer; }
  517.  
  518.  
  519. /*NAVI TAB*/
  520.  
  521. .nav { position:absolute; width:250px; height:auto; bottom:150px; left:65px; {block:if400pxPosts} left:125px; {/block:if400pxPosts} background-color:transparent; list-style-type:none; text-align:center; z-index:999; }
  522.  
  523. .nav li { display:inline-block; width:80px; height:20px; margin-bottom:15px; padding:8px; background:{color:accent}; border:1px solid {color:borders}; border-radius:5px; }
  524.  
  525. .nav a { color:{color:accent2}; font-family:"lato"; font-size:10px; font-weight:bold; font-style:italic; text-transform:uppercase; line-height:20px; letter-spacing:1px; }
  526.  
  527. .nav a:hover { color:{color:container}; letter-spacing:3px;
  528.  
  529. -webkit-transition: all 0.8s ease;
  530. -moz-transition: all 0.8s ease;
  531. -o-transition: all 0.8s ease;
  532. -ms-transition: all 0.8s ease;
  533. transition: all 0.8s ease; }
  534.  
  535. .abtbox { position:absolute; width:280px; height:115px; top:50px; right:50px; {block:if400pxPosts} width:300px; right:80px; {/block:if400pxPosts} overflow:scroll; text-align:center; line-height:20px; z-index:999; }
  536.  
  537. .abtbox span { margin-top:15px; color:{color:accent2}; font-size:14px; }
  538.  
  539. .abtbox b { margin-right:5px; font-size:12px; }
  540.  
  541.  
  542. /*MUSE TAB*/
  543.  
  544. #bgmuses { position:absolute; width:350px; height:380px; top:-50px; bottom:0px; left:18px; {block:if400pxPosts} left:80px; {/block:if400pxPosts} margin:auto; overflow:scroll; z-index:999; }
  545.  
  546. .cbox { display:inline-block; width:120px; height:100px; margin-right:25px; margin-bottom:30px; margin-left:20px; background:{color:accent}; border-radius:15px; float:left; }
  547.  
  548. .musetext { width:95px; height:15px; margin-top:0px; margin-left:15px; color:{color:accent2}; font-family: 'Source Sans Pro', sans-serif; font-size:7.5px; font-weight:bold; text-transform:uppercase; letter-spacing:2px; line-height:12px; }
  549.  
  550. .musetext2 { width:120px; height:15px; margin-top:5px; margin-left:0px; color:{color:accent2}; font-family: 'Source Sans Pro', sans-serif; font-size:9px; font-weight:bold; text-transform:uppercase; text-align:center; letter-spacing:2px; line-height:10px; }
  551.  
  552. .museboxie { width:120px; height:60px; margin-top:0px; margin-left:0px; }
  553. .museimg { position:justify; width:120px; height:60px; background-color:black; }
  554.  
  555. .museimg:hover { cursor:pointer; }
  556.  
  557.  
  558.  
  559.  
  560. /*--- PT.9: CUSTOM CSS ---*/
  561.  
  562.  
  563.  
  564.  
  565. {CustomCSS}
  566. </style></head><body>
  567.  
  568.  
  569. <div id="wrapper">
  570.  
  571. <div class="tab">
  572. <li><a href="/" title="refresh"> • </a></li>
  573. <li><a href="/ask" title="contact"> • </a></li>
  574. <li><a href="#" class="tablinks" onclick="openCity(event, 'navi')" title="navigate"> • </a></li>
  575.  
  576. {block:ifmusetab} <li><a href="#" class="tablinks" onclick="openCity(event, 'muses')" title="muses"> • </a></li> {/block:ifmusetab}
  577.  
  578. {block:ifNotmusetab} <li><a href="{text:optional link url}" title="{text:optional link}"> • </a></li> {/block:ifNotmusetab}
  579.  
  580. </div>
  581.  
  582. <!--- NIGHTSKY --->
  583.  
  584. <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 500 500" fill="{color:clouds}" style="position:absolute; z-index:99; left:0px; top:130px;"><circle id="Ovaal_1" data-name="Ovaal 1" class="cls-1" cx="250" cy="227" r="96"/><circle id="Ovaal_2" data-name="Ovaal 2" class="cls-1" cx="154" cy="259" r="64"/><circle id="Ovaal_2_kopiëren" data-name="Ovaal 2 kopiëren" class="cls-1" cx="346" cy="259" r="64"/><circle id="Ovaal_3" data-name="Ovaal 3" class="cls-1" cx="90.5" cy="269.5" r="42.5"/><circle id="Ovaal_3_kopiëren" data-name="Ovaal 3 kopiëren" class="cls-1" cx="409.5" cy="269.5" r="42.5"/></svg>
  585.  
  586. <div class="star2"><span class="blinking3">&#10022;</span></div>
  587.  
  588. <div id="border"></div>
  589.  
  590. <div id="container">
  591.  
  592. <!--- BOTTOM CLOUDS --->
  593.  
  594. {block:if400pxPosts}
  595.  
  596. <svg id="cloud_3b" data-name="cloud 3b" xmlns="http://www.w3.org/2000/svg" width="900" height="624" viewBox="0 0 900 624" fill="{color:clouds2}" style="position:absolute; z-index:99; opacity:.6; top:-100px;"> <path id="Ovaal_11" data-name="Ovaal 11" class="cls-1" d="M213.6,495.6A169.2,169.2,0,1,1,44.4,664.8,169.2,169.2,0,0,1,213.6,495.6Z"/> <circle id="Ovaal_11_kopiëren" data-name="Ovaal 11 kopiëren" class="cls-2" cx="819.61" cy="679.203" r="169.204"/> <circle id="Ovaal_11_kopiëren_2" data-name="Ovaal 11 kopiëren 2" class="cls-2" cx="510" cy="714" r="169.188"/><path id="Ovaal_12" data-name="Ovaal 12" class="cls-1" d="M47.4,457.2a58.2,58.2,0,1,1-58.2,58.2A58.2,58.2,0,0,1,47.4,457.2Z"/> <circle id="Ovaal_12_kopiëren" data-name="Ovaal 12 kopiëren" class="cls-2" cx="353.391" cy="581.391" r="58.203"/> <path id="Ovaal_12_kopiëren_2" data-name="Ovaal 12 kopiëren 2" class="cls-1" d="M592.2,516A58.2,58.2,0,1,1,534,574.2,58.2,58.2,0,0,1,592.2,516ZM116.4,493.2A20.4,20.4,0,1,1,96,513.6,20.4,20.4,0,0,1,116.4,493.2Zm328.8,3.6a56.4,56.4,0,1,1-56.4,56.4A56.4,56.4,0,0,1,445.2,496.8ZM528.6,480a52.2,52.2,0,1,1-52.2,52.2A52.2,52.2,0,0,1,528.6,480Z"/> </svg>
  597.  
  598. <svg id="cloud_2" data-name="cloud 2" xmlns="http://www.w3.org/2000/svg" width="900" height="624" viewBox="0 0 900 624" fill="{color:clouds}" style="position:absolute; z-index:999; opacity:1; top:-100px;"><path id="Ovaal_8" data-name="Ovaal 8" class="cls-1" d="M40.2,501.6A144.6,144.6,0,1,1-104.4,646.2,144.6,144.6,0,0,1,40.2,501.6Z"/>
  599. <path id="Ovaal_8_kopiëren" data-name="Ovaal 8 kopiëren" class="cls-1" d="M365.4,552A144.6,144.6,0,1,1,220.8,696.6,144.6,144.6,0,0,1,365.4,552Z"/>
  600. <path id="Ovaal_8_kopiëren_2" data-name="Ovaal 8 kopiëren 2" class="cls-1" d="M689.4,517.2A144.6,144.6,0,1,1,544.8,661.8,144.6,144.6,0,0,1,689.4,517.2Z"/>
  601. <path id="Ovaal_8_kopiëren_3" data-name="Ovaal 8 kopiëren 3" class="cls-1" d="M875.4,552A144.6,144.6,0,1,1,730.8,696.6,144.6,144.6,0,0,1,875.4,552Z"/>
  602. <circle id="Ovaal_9" data-name="Ovaal 9" class="cls-2" cx="213" cy="651" r="60.594"/>
  603. <path id="Ovaal_10" data-name="Ovaal 10" class="cls-1" d="M495,602.4a28.2,28.2,0,1,1-28.2,28.2A28.2,28.2,0,0,1,495,602.4Z"/>
  604. <circle id="Ovaal_10_kopiëren" data-name="Ovaal 10 kopiëren" class="cls-2" cx="538.203" cy="618.61" r="28.203"/></svg>
  605.  
  606.  
  607. {/block:if400pxPosts}
  608.  
  609. {block:ifNot400pxPosts}
  610.  
  611. <svg xmlns="http://www.w3.org/2000/svg" width="800" height="520" viewBox="0 0 800 520" fill="{color:clouds2}" style="position:absolute; z-index:99; opacity:.6;"><circle id="Ovaal_11" data-name="Ovaal 11" class="cls-1" cx="169" cy="549" r="141"/><circle id="Ovaal_11_kopiëren" data-name="Ovaal 11 kopiëren" class="cls-1" cx="674" cy="561" r="141"/><circle id="Ovaal_11_kopiëren_2" data-name="Ovaal 11 kopiëren 2" class="cls-1" cx="416" cy="590" r="141"/><circle id="Ovaal_12" data-name="Ovaal 12" class="cls-1" cx="30.5" cy="424.5" r="48.5"/><circle id="Ovaal_12_kopiëren" data-name="Ovaal 12 kopiëren" class="cls-1" cx="285.5" cy="479.5" r="48.5"/><path id="Ovaal_12_kopiëren_2" data-name="Ovaal 12 kopiëren 2" class="cls-2" d="M484.5,425A48.5,48.5,0,1,1,436,473.5,48.5,48.5,0,0,1,484.5,425ZM88,406a17,17,0,1,1-17,17A17,17,0,0,1,88,406Zm274,3a47,47,0,1,1-47,47A47,47,0,0,1,362,409Zm69.5-14A43.5,43.5,0,1,1,388,438.5,43.5,43.5,0,0,1,431.5,395Z"/><circle id="Ovaal_13" data-name="Ovaal 13" class="cls-1" cx="781.5" cy="465.5" r="39.5"/></svg>
  612.  
  613. <svg xmlns="http://www.w3.org/2000/svg" width="800" height="520" viewBox="0 0 800 520" fill="{color:clouds}" style="position:absolute; z-index:999; opacity:1;"><circle id="Ovaal_8" data-name="Ovaal 8" class="cls-1" cx="42.5" cy="540.5" r="120.5"/><circle id="Ovaal_8_kopiëren" data-name="Ovaal 8 kopiëren" class="cls-1" cx="313.5" cy="582.5" r="120.5"/><circle id="Ovaal_8_kopiëren_2" data-name="Ovaal 8 kopiëren 2" class="cls-1" cx="583.5" cy="553.5" r="120.5"/><circle id="Ovaal_8_kopiëren_3" data-name="Ovaal 8 kopiëren 3" class="cls-1" cx="738.5" cy="582.5" r="120.5"/><circle id="Ovaal_9" data-name="Ovaal 9" class="cls-1" cx="186.5" cy="544.5" r="50.5"/><circle id="Ovaal_10" data-name="Ovaal 10" class="cls-1" cx="421.5" cy="527.5" r="23.5"/><circle id="Ovaal_10_kopiëren" data-name="Ovaal 10 kopiëren" class="cls-1" cx="457.5" cy="517.5" r="23.5"/></svg>
  614.  
  615. {/block:ifNot400pxPosts}
  616.  
  617. <!--- MOON + STARS + CLOUD --->
  618.  
  619. <div class="star1"> <span class="blinking">&#10022;</span> </div>
  620. <div class="star3"> <span class="blinking2">&#10022;</span> </div>
  621. <div class="star4"> <span class="blinking3">&#10022;</span> </div>
  622.  
  623. <div class="moon"></div>
  624. <div class="moon2"></div>
  625.  
  626. <svg xmlns="http://www.w3.org/2000/svg" width="280" height="280" viewBox="0 0 500 500" fill="{color:clouds}" style="position:absolute; z-index:99; left:150px; top:-15px;"><circle id="Ovaal_1" data-name="Ovaal 1" class="cls-1" cx="250" cy="227" r="96"/><circle id="Ovaal_2" data-name="Ovaal 2" class="cls-1" cx="154" cy="259" r="64"/><circle id="Ovaal_2_kopiëren" data-name="Ovaal 2 kopiëren" class="cls-1" cx="346" cy="259" r="64"/><circle id="Ovaal_3" data-name="Ovaal 3" class="cls-1" cx="90.5" cy="269.5" r="42.5"/><circle id="Ovaal_3_kopiëren" data-name="Ovaal 3 kopiëren" class="cls-1" cx="409.5" cy="269.5" r="42.5"/></svg>
  627.  
  628.  
  629.  
  630. <!--- DESCRIPTION --->
  631.  
  632. <div class="dots"> .....................................................................................................................</div>
  633.  
  634. <div class="desctxt"> {text:desc text} </div>
  635.  
  636.  
  637.  
  638.  
  639. <!--- NAVIGATION TAB --->
  640.  
  641.  
  642.  
  643.  
  644. <div id="navi" class="tabcontent"> <span class="close" onclick="this.parentElement.style.display='none'"> <i data-feather="x" width="15px" height="15px"></i> </span>
  645.  
  646. <!--- BOTTOM CLOUDS --->
  647.  
  648. {block:if400pxPosts}
  649.  
  650. <svg id="cloud_3b" data-name="cloud 3b" xmlns="http://www.w3.org/2000/svg" width="900" height="624" viewBox="0 0 900 624" fill="{color:clouds2}" style="position:absolute; z-index:99; opacity:.6; top:-100px; right:0px;"> <path id="Ovaal_11" data-name="Ovaal 11" class="cls-1" d="M213.6,495.6A169.2,169.2,0,1,1,44.4,664.8,169.2,169.2,0,0,1,213.6,495.6Z"/> <circle id="Ovaal_11_kopiëren" data-name="Ovaal 11 kopiëren" class="cls-2" cx="819.61" cy="679.203" r="169.204"/> <circle id="Ovaal_11_kopiëren_2" data-name="Ovaal 11 kopiëren 2" class="cls-2" cx="510" cy="714" r="169.188"/><path id="Ovaal_12" data-name="Ovaal 12" class="cls-1" d="M47.4,457.2a58.2,58.2,0,1,1-58.2,58.2A58.2,58.2,0,0,1,47.4,457.2Z"/> <circle id="Ovaal_12_kopiëren" data-name="Ovaal 12 kopiëren" class="cls-2" cx="353.391" cy="581.391" r="58.203"/> <path id="Ovaal_12_kopiëren_2" data-name="Ovaal 12 kopiëren 2" class="cls-1" d="M592.2,516A58.2,58.2,0,1,1,534,574.2,58.2,58.2,0,0,1,592.2,516ZM116.4,493.2A20.4,20.4,0,1,1,96,513.6,20.4,20.4,0,0,1,116.4,493.2Zm328.8,3.6a56.4,56.4,0,1,1-56.4,56.4A56.4,56.4,0,0,1,445.2,496.8ZM528.6,480a52.2,52.2,0,1,1-52.2,52.2A52.2,52.2,0,0,1,528.6,480Z"/> </svg>
  651.  
  652. <svg id="cloud_2" data-name="cloud 2" xmlns="http://www.w3.org/2000/svg" width="900" height="624" viewBox="0 0 900 624" fill="{color:clouds}" style="position:absolute; z-index:999; opacity:1; top:-100px; right:0px;"><path id="Ovaal_8" data-name="Ovaal 8" class="cls-1" d="M40.2,501.6A144.6,144.6,0,1,1-104.4,646.2,144.6,144.6,0,0,1,40.2,501.6Z"/>
  653. <path id="Ovaal_8_kopiëren" data-name="Ovaal 8 kopiëren" class="cls-1" d="M365.4,552A144.6,144.6,0,1,1,220.8,696.6,144.6,144.6,0,0,1,365.4,552Z"/>
  654. <path id="Ovaal_8_kopiëren_2" data-name="Ovaal 8 kopiëren 2" class="cls-1" d="M689.4,517.2A144.6,144.6,0,1,1,544.8,661.8,144.6,144.6,0,0,1,689.4,517.2Z"/>
  655. <path id="Ovaal_8_kopiëren_3" data-name="Ovaal 8 kopiëren 3" class="cls-1" d="M875.4,552A144.6,144.6,0,1,1,730.8,696.6,144.6,144.6,0,0,1,875.4,552Z"/>
  656. <circle id="Ovaal_9" data-name="Ovaal 9" class="cls-2" cx="213" cy="651" r="60.594"/>
  657. <path id="Ovaal_10" data-name="Ovaal 10" class="cls-1" d="M495,602.4a28.2,28.2,0,1,1-28.2,28.2A28.2,28.2,0,0,1,495,602.4Z"/>
  658. <circle id="Ovaal_10_kopiëren" data-name="Ovaal 10 kopiëren" class="cls-2" cx="538.203" cy="618.61" r="28.203"/></svg>
  659.  
  660.  
  661. {/block:if400pxPosts}
  662.  
  663. {block:ifNot400pxPosts}
  664.  
  665. <svg xmlns="http://www.w3.org/2000/svg" width="800" height="520" viewBox="0 0 800 520" fill="{color:clouds2}" style="position:absolute; z-index:99; opacity:.6; right:0px;"><circle id="Ovaal_11" data-name="Ovaal 11" class="cls-1" cx="169" cy="549" r="141"/><circle id="Ovaal_11_kopiëren" data-name="Ovaal 11 kopiëren" class="cls-1" cx="674" cy="561" r="141"/><circle id="Ovaal_11_kopiëren_2" data-name="Ovaal 11 kopiëren 2" class="cls-1" cx="416" cy="590" r="141"/><circle id="Ovaal_12" data-name="Ovaal 12" class="cls-1" cx="30.5" cy="424.5" r="48.5"/><circle id="Ovaal_12_kopiëren" data-name="Ovaal 12 kopiëren" class="cls-1" cx="285.5" cy="479.5" r="48.5"/><path id="Ovaal_12_kopiëren_2" data-name="Ovaal 12 kopiëren 2" class="cls-2" d="M484.5,425A48.5,48.5,0,1,1,436,473.5,48.5,48.5,0,0,1,484.5,425ZM88,406a17,17,0,1,1-17,17A17,17,0,0,1,88,406Zm274,3a47,47,0,1,1-47,47A47,47,0,0,1,362,409Zm69.5-14A43.5,43.5,0,1,1,388,438.5,43.5,43.5,0,0,1,431.5,395Z"/><circle id="Ovaal_13" data-name="Ovaal 13" class="cls-1" cx="781.5" cy="465.5" r="39.5"/></svg>
  666.  
  667. <svg xmlns="http://www.w3.org/2000/svg" width="800" height="520" viewBox="0 0 800 520" fill="{color:clouds}" style="position:absolute; z-index:999; opacity:1; right:0px;"><circle id="Ovaal_8" data-name="Ovaal 8" class="cls-1" cx="42.5" cy="540.5" r="120.5"/><circle id="Ovaal_8_kopiëren" data-name="Ovaal 8 kopiëren" class="cls-1" cx="313.5" cy="582.5" r="120.5"/><circle id="Ovaal_8_kopiëren_2" data-name="Ovaal 8 kopiëren 2" class="cls-1" cx="583.5" cy="553.5" r="120.5"/><circle id="Ovaal_8_kopiëren_3" data-name="Ovaal 8 kopiëren 3" class="cls-1" cx="738.5" cy="582.5" r="120.5"/><circle id="Ovaal_9" data-name="Ovaal 9" class="cls-1" cx="186.5" cy="544.5" r="50.5"/><circle id="Ovaal_10" data-name="Ovaal 10" class="cls-1" cx="421.5" cy="527.5" r="23.5"/><circle id="Ovaal_10_kopiëren" data-name="Ovaal 10 kopiëren" class="cls-1" cx="457.5" cy="517.5" r="23.5"/></svg>
  668.  
  669. {/block:ifNot400pxPosts}
  670.  
  671.  
  672. <div class="nav">
  673.  
  674. <li><a href="{text:link1}"> {text:link1txt} </a></li>
  675. <li><a href="{text:link2}"> {text:link2txt} </a></li>
  676.  
  677. <li><a href="{text:link3}" > {text:link3txt} </a></li>
  678. <li><a href="{text:link4}" > {text:link4txt} </a></li>
  679.  
  680. <li><a href="{text:link5}" > {text:link5txt} </a></li>
  681. <li><a href="{text:link6}" > {text:link6txt} </a></li>
  682.  
  683. </div>
  684.  
  685. <div class="abtbox"> <span class="th th-quote-up-o"></span>
  686. <p> <b>{text:ooc info}</b> {text:nav desc} </p> </div>
  687.  
  688.  
  689. </div>
  690.  
  691.  
  692.  
  693.  
  694. <!--- MUSES TAB --->
  695.  
  696.  
  697.  
  698.  
  699. <div id="muses" class="tabcontent"> <span class="close" onclick="this.parentElement.style.display='none'"> <i data-feather="x" width="15px" height="15px"></i> </span>
  700.  
  701. <!--- BOTTOM CLOUDS --->
  702.  
  703. {block:if400pxPosts}
  704.  
  705. <svg id="cloud_3b" data-name="cloud 3b" xmlns="http://www.w3.org/2000/svg" width="900" height="624" viewBox="0 0 900 624" fill="{color:clouds2}" style="position:absolute; z-index:99; opacity:.6; top:-100px; right:0px;"> <path id="Ovaal_11" data-name="Ovaal 11" class="cls-1" d="M213.6,495.6A169.2,169.2,0,1,1,44.4,664.8,169.2,169.2,0,0,1,213.6,495.6Z"/> <circle id="Ovaal_11_kopiëren" data-name="Ovaal 11 kopiëren" class="cls-2" cx="819.61" cy="679.203" r="169.204"/> <circle id="Ovaal_11_kopiëren_2" data-name="Ovaal 11 kopiëren 2" class="cls-2" cx="510" cy="714" r="169.188"/><path id="Ovaal_12" data-name="Ovaal 12" class="cls-1" d="M47.4,457.2a58.2,58.2,0,1,1-58.2,58.2A58.2,58.2,0,0,1,47.4,457.2Z"/> <circle id="Ovaal_12_kopiëren" data-name="Ovaal 12 kopiëren" class="cls-2" cx="353.391" cy="581.391" r="58.203"/> <path id="Ovaal_12_kopiëren_2" data-name="Ovaal 12 kopiëren 2" class="cls-1" d="M592.2,516A58.2,58.2,0,1,1,534,574.2,58.2,58.2,0,0,1,592.2,516ZM116.4,493.2A20.4,20.4,0,1,1,96,513.6,20.4,20.4,0,0,1,116.4,493.2Zm328.8,3.6a56.4,56.4,0,1,1-56.4,56.4A56.4,56.4,0,0,1,445.2,496.8ZM528.6,480a52.2,52.2,0,1,1-52.2,52.2A52.2,52.2,0,0,1,528.6,480Z"/> </svg>
  706.  
  707. <svg id="cloud_2" data-name="cloud 2" xmlns="http://www.w3.org/2000/svg" width="900" height="624" viewBox="0 0 900 624" fill="{color:clouds}" style="position:absolute; z-index:999; opacity:1; top:-100px; right:0px;"><path id="Ovaal_8" data-name="Ovaal 8" class="cls-1" d="M40.2,501.6A144.6,144.6,0,1,1-104.4,646.2,144.6,144.6,0,0,1,40.2,501.6Z"/>
  708. <path id="Ovaal_8_kopiëren" data-name="Ovaal 8 kopiëren" class="cls-1" d="M365.4,552A144.6,144.6,0,1,1,220.8,696.6,144.6,144.6,0,0,1,365.4,552Z"/>
  709. <path id="Ovaal_8_kopiëren_2" data-name="Ovaal 8 kopiëren 2" class="cls-1" d="M689.4,517.2A144.6,144.6,0,1,1,544.8,661.8,144.6,144.6,0,0,1,689.4,517.2Z"/>
  710. <path id="Ovaal_8_kopiëren_3" data-name="Ovaal 8 kopiëren 3" class="cls-1" d="M875.4,552A144.6,144.6,0,1,1,730.8,696.6,144.6,144.6,0,0,1,875.4,552Z"/>
  711. <circle id="Ovaal_9" data-name="Ovaal 9" class="cls-2" cx="213" cy="651" r="60.594"/>
  712. <path id="Ovaal_10" data-name="Ovaal 10" class="cls-1" d="M495,602.4a28.2,28.2,0,1,1-28.2,28.2A28.2,28.2,0,0,1,495,602.4Z"/>
  713. <circle id="Ovaal_10_kopiëren" data-name="Ovaal 10 kopiëren" class="cls-2" cx="538.203" cy="618.61" r="28.203"/></svg>
  714.  
  715.  
  716. {/block:if400pxPosts}
  717.  
  718. {block:ifNot400pxPosts}
  719.  
  720. <svg xmlns="http://www.w3.org/2000/svg" width="800" height="520" viewBox="0 0 800 520" fill="{color:clouds2}" style="position:absolute; z-index:99; opacity:.6; right:0px;"><circle id="Ovaal_11" data-name="Ovaal 11" class="cls-1" cx="169" cy="549" r="141"/><circle id="Ovaal_11_kopiëren" data-name="Ovaal 11 kopiëren" class="cls-1" cx="674" cy="561" r="141"/><circle id="Ovaal_11_kopiëren_2" data-name="Ovaal 11 kopiëren 2" class="cls-1" cx="416" cy="590" r="141"/><circle id="Ovaal_12" data-name="Ovaal 12" class="cls-1" cx="30.5" cy="424.5" r="48.5"/><circle id="Ovaal_12_kopiëren" data-name="Ovaal 12 kopiëren" class="cls-1" cx="285.5" cy="479.5" r="48.5"/><path id="Ovaal_12_kopiëren_2" data-name="Ovaal 12 kopiëren 2" class="cls-2" d="M484.5,425A48.5,48.5,0,1,1,436,473.5,48.5,48.5,0,0,1,484.5,425ZM88,406a17,17,0,1,1-17,17A17,17,0,0,1,88,406Zm274,3a47,47,0,1,1-47,47A47,47,0,0,1,362,409Zm69.5-14A43.5,43.5,0,1,1,388,438.5,43.5,43.5,0,0,1,431.5,395Z"/><circle id="Ovaal_13" data-name="Ovaal 13" class="cls-1" cx="781.5" cy="465.5" r="39.5"/></svg>
  721.  
  722. <svg xmlns="http://www.w3.org/2000/svg" width="800" height="520" viewBox="0 0 800 520" fill="{color:clouds}" style="position:absolute; z-index:999; opacity:1; right:0px;"><circle id="Ovaal_8" data-name="Ovaal 8" class="cls-1" cx="42.5" cy="540.5" r="120.5"/><circle id="Ovaal_8_kopiëren" data-name="Ovaal 8 kopiëren" class="cls-1" cx="313.5" cy="582.5" r="120.5"/><circle id="Ovaal_8_kopiëren_2" data-name="Ovaal 8 kopiëren 2" class="cls-1" cx="583.5" cy="553.5" r="120.5"/><circle id="Ovaal_8_kopiëren_3" data-name="Ovaal 8 kopiëren 3" class="cls-1" cx="738.5" cy="582.5" r="120.5"/><circle id="Ovaal_9" data-name="Ovaal 9" class="cls-1" cx="186.5" cy="544.5" r="50.5"/><circle id="Ovaal_10" data-name="Ovaal 10" class="cls-1" cx="421.5" cy="527.5" r="23.5"/><circle id="Ovaal_10_kopiëren" data-name="Ovaal 10 kopiëren" class="cls-1" cx="457.5" cy="517.5" r="23.5"/></svg>
  723.  
  724. {/block:ifNot400pxPosts}
  725.  
  726.  
  727. <div id="bgmuses">
  728.  
  729. <!--- TO ADD A NEW ROW OF BOXES COPY FROM HERE --->
  730.  
  731. <div class="cbox">
  732.  
  733. <div class="musetext"><p style="text-align:left;">muse.exe <span style="float:right;">x</span></p></div>
  734. <div class="museboxie">
  735. <div class="museimg"> <a href="/" title="muse info"><img src="https://i.postimg.cc/4y32jfY3/m1.png"></a></div>
  736. <div class="musetext2">name</div>
  737. </div>
  738.  
  739. </div>
  740.  
  741. <div class="cbox">
  742.  
  743. <div class="musetext"><p style="text-align:left;">muse.exe <span style="float:right;">x</span></p></div>
  744. <div class="museboxie">
  745. <div class="museimg"> <a href="/" title="muse info"><img src="https://i.postimg.cc/4y32jfY3/m1.png"></a></div>
  746. <div class="musetext2">name</div>
  747. </div>
  748.  
  749. </div>
  750.  
  751. <!--- TO HERE !! --->
  752.  
  753. <div class="cbox">
  754.  
  755. <div class="musetext"><p style="text-align:left;">muse.exe <span style="float:right;">x</span></p></div>
  756. <div class="museboxie">
  757. <div class="museimg"> <a href="/" title="muse info"><img src="https://i.postimg.cc/4y32jfY3/m1.png"></a></div>
  758. <div class="musetext2">name</div>
  759. </div>
  760.  
  761. </div>
  762.  
  763. <div class="cbox">
  764.  
  765. <div class="musetext"><p style="text-align:left;">muse.exe <span style="float:right;">x</span></p></div>
  766. <div class="museboxie">
  767. <div class="museimg"> <a href="/" title="muse info"><img src="https://i.postimg.cc/4y32jfY3/m1.png"></a></div>
  768. <div class="musetext2">name</div>
  769. </div>
  770.  
  771. </div>
  772.  
  773.  
  774. <div class="cbox">
  775.  
  776. <div class="musetext"><p style="text-align:left;">muse.exe <span style="float:right;">x</span></p></div>
  777. <div class="museboxie">
  778. <div class="museimg"> <a href="/" title="muse info"><img src="https://i.postimg.cc/4y32jfY3/m1.png"></a></div>
  779. <div class="musetext2">name</div>
  780. </div>
  781.  
  782. </div>
  783.  
  784. <div class="cbox">
  785.  
  786. <div class="musetext"><p style="text-align:left;">muse.exe <span style="float:right;">x</span></p></div>
  787. <div class="museboxie">
  788. <div class="museimg"> <a href="/" title="muse info"><img src="https://i.postimg.cc/4y32jfY3/m1.png"></a></div>
  789. <div class="musetext2">name</div>
  790. </div>
  791.  
  792. </div>
  793.  
  794.  
  795. <div class="cbox">
  796.  
  797. <div class="musetext"><p style="text-align:left;">muse.exe <span style="float:right;">x</span></p></div>
  798. <div class="museboxie">
  799. <div class="museimg"> <a href="/" title="muse info"><img src="https://i.postimg.cc/4y32jfY3/m1.png"></a></div>
  800. <div class="musetext2">name</div>
  801. </div>
  802.  
  803. </div>
  804.  
  805. <div class="cbox">
  806.  
  807. <div class="musetext"><p style="text-align:left;">muse.exe <span style="float:right;">x</span></p></div>
  808. <div class="museboxie">
  809. <div class="museimg"> <a href="/" title="muse info"><img src="https://i.postimg.cc/4y32jfY3/m1.png"></a></div>
  810. <div class="musetext2">name</div>
  811. </div>
  812.  
  813. </div>
  814.  
  815.  
  816. <div class="cbox">
  817.  
  818. <div class="musetext"><p style="text-align:left;">muse.exe <span style="float:right;">x</span></p></div>
  819. <div class="museboxie">
  820. <div class="museimg"> <a href="/" title="muse info"><img src="https://i.postimg.cc/4y32jfY3/m1.png"></a></div>
  821. <div class="musetext2">name</div>
  822. </div>
  823.  
  824. </div>
  825.  
  826. <div class="cbox">
  827.  
  828. <div class="musetext"><p style="text-align:left;">muse.exe <span style="float:right;">x</span></p></div>
  829. <div class="museboxie">
  830. <div class="museimg"> <a href="/" title="muse info"><img src="https://i.postimg.cc/4y32jfY3/m1.png"></a></div>
  831. <div class="musetext2">name</div>
  832. </div>
  833.  
  834. </div>
  835.  
  836.  
  837. <div class="cbox">
  838.  
  839. <div class="musetext"><p style="text-align:left;">muse.exe <span style="float:right;">x</span></p></div>
  840. <div class="museboxie">
  841. <div class="museimg"> <a href="/" title="muse info"><img src="https://i.postimg.cc/4y32jfY3/m1.png"></a></div>
  842. <div class="musetext2">name</div>
  843. </div>
  844.  
  845. </div>
  846.  
  847. <div class="cbox">
  848.  
  849. <div class="musetext"><p style="text-align:left;">muse.exe <span style="float:right;">x</span></p></div>
  850. <div class="museboxie">
  851. <div class="museimg"> <a href="/" title="muse info"><img src="https://i.postimg.cc/4y32jfY3/m1.png"></a></div>
  852. <div class="musetext2">name</div>
  853. </div>
  854.  
  855. </div>
  856. </div>
  857.  
  858.  
  859. </div>
  860.  
  861.  
  862.  
  863.  
  864. <!--- POSTS --->
  865.  
  866.  
  867.  
  868.  
  869. <div id="postcon">
  870. <div id="posts">
  871. {block:Posts}
  872. <div class="entry">
  873.  
  874. {block:Date} <div class="topinfo"><a href="{Permalink}" title="posted {TimeAgo}.">{Month} {Year}</a> <div class="preblog"><a href="{ReblogURL}" target="_blank" title="reblog this post?">reblog</a></div></div>{/block:Date}
  875.  
  876.  
  877. <!--- TEXTS --->
  878.  
  879. {block:Text} {block:Title} <a href="{Permalink}"> <h1>{Title}</h1></a> {/block:Title} {Body} {/block:Text}
  880.  
  881.  
  882. <!--- PHOTOS --->
  883.  
  884. {block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{/block:Photo}
  885.  
  886. {block:Photoset} {block:IndexPage}{Photoset-500}{/block:IndexPage} {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage} {/block:Photoset}
  887.  
  888.  
  889. <!--- CHATS --->
  890.  
  891. {block:Chat} <ul class="convo">{block:Lines}<li class="line_{Alt} user_{UserNumber}">{block:Label}<span class="label" style="text-transform:lowercase; "><strong>@{Label}</strong></span>{/block:Label}
  892. {Line}</li>{/block:Lines}</ul><div style="font-size:7px; color:{color:text}; margin-top:-5px; margin-left:240px; {block:if400pxPosts} margin-left:340px; {/block:if400pxPosts} letter-spacing:1px; text-transform:uppercase"><span class="fas fa-check"></span> delivered.</div>{/block:Chat}
  893.  
  894.  
  895. <!--- QUOTES --->
  896.  
  897. {block:Quote} <div class="quote"> {Quote} </div> <div class="source"> — {Source} </div> {/block:Quote}
  898.  
  899.  
  900. <!--- LINKS --->
  901.  
  902. {block:Link} <div class="linktitle"> <a href="{URL}"><h1>{Name}</h1></a></div>
  903. {block:Description} <p>{Description}</p> {/block:Description}{/block:Link}
  904.  
  905.  
  906. <!--- VIDEOS --->
  907.  
  908. {block:Video}<div class="video">{Video-500}</div>{/block:Video}
  909.  
  910.  
  911. <!--- AUDIOS --->
  912.  
  913. {block:Audio} {block:AudioPlayer} <div class="playbutton">{AudioPlayerGrey}</div> {block:AlbumArt}<div class="albumart"><img src="{AlbumArtURL}"></div>{/block:AlbumArt} <div class="trackinfo"> <div class="trackname"> {block:TrackName}{TrackName}{/block:TrackName}</div><div class="artist"> {block:Artist}{Artist}{/block:Artist} </div></div> {/block:AudioPlayer}{/block:Audio}
  914.  
  915.  
  916. <!--- ASKS --->
  917.  
  918. {block:Answer}<div style="margin-top:25px;" class="asker"><div class="ask">({TimeAgo}) <b>{Asker}</b> said:</div></div><div class="bubble"><br>{Question} <a href="/" title="{text:ask icon hover}"><span class="th th-plant-vase-o"></span></a></div><div class="answer"> {Answer} </div>{/block:Answer}
  919.  
  920.  
  921. {block:Caption}{Caption}{/block:Caption}
  922.  
  923. <div class="bottominfo"><div class="psource">{block:ContentSource}<a href="{SourceURL}" title="posted by {SourceTitle}.">source</a>{/block:ContentSource}</div>
  924.  
  925. {block:NoteCount}<a href="{Permalink}" title="view the notes."> {NoteCountWithLabel}</a>{/block:NoteCount}
  926.  
  927. {block:HasTags} <div class="tags"> <span style="font-size:7px; color:{color:links}; letter-spacing:1px; text-transform:uppercase; font-weight:bold;"> {PostAuthorName} said: </span> {block:Tags}<a href="{TagURL}">{Tag}</a> &nbsp;{/block:Tags}<br></div>{/block:HasTags}</div>
  928.  
  929. {block:PermalinkPage}{block:PostNotes}<div id="notes">{PostNotes}</div>{/block:PostNotes}{/block:PermalinkPage}
  930.  
  931. </div>
  932. {/block:Posts}
  933.  
  934.  
  935.  
  936.  
  937. {block:Pagination} <div class="pagination"> {block:previouspage} <a href="{previouspage}"> <i data-feather="arrow-left"></i> </a> {/block:previouspage} {block:nextpage} <a href="{nextpage}"> <i data-feather="arrow-right"></i> </a> {/block:nextpage} </div> {/block:pagination}
  938.  
  939.  
  940.  
  941.  
  942. </div>
  943. </div>
  944.  
  945. </div>
  946. </div>
  947.  
  948.  
  949.  
  950.  
  951. <div id="cred">
  952. <a href="http://twentys.tumblr.com" title="made by julie."><span class="th th-holly-o"></span></a>
  953. </div>
  954.  
  955. <script> feather.replace() </script>
  956.  
  957. </body>
  958. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!