API tools faq
paste
lovesjoon

11. astral by capitae ( with muse popups )

lovesjoon
Mar 3rd, 2021 (edited)
317
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 43.02 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.  
  14. <!--- 11. seraphic by capitae
  15.  
  16.  
  17. ♡ USER GUIDE ♡
  18.  
  19. ・｡* sidebar png: width:260px; height:500px;
  20.  
  21. ・｡* navi icon 1: width:65px; height:65px;
  22.  
  23. ・｡* navi icon 2: width:40px; height:40px;
  24.  
  25. ・｡* muse icon: width:50px; height:50px;
  26.  
  27.  
  28. ♡ READ ME ♡
  29.  
  30. ・｡* base code by @pixiemail.
  31.  
  32. ・｡* please don't recreate and/or steal parts of this code
  33.  
  34. ・｡* don't remove the credit
  35.  
  36. ・｡* feel free to reach out if there are any bugs or questions!
  37.  
  38. ・｡* animations by Animista
  39.  
  40.  
  41. /* ----------------------------------------------
  42. * Generated by Animista
  43. * Licensed under FreeBSD License.
  44. * See http://animista.net/license for more info.
  45. * w: http://animista.net, t: @cssanimista
  46. * ----------------------------------------------*/
  47.  
  48.  
  49. i hope you enjoy this code !! --->
  50.  
  51.  
  52.  
  53.  
  54.  
  55.  
  56.  
  57.  
  58.  
  59.  
  60. <title>{Title}</title>
  61. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  62. <link rel="shortcut icon" href="{Favicon}">
  63. {block:Description}
  64. <meta name="description" content="{MetaDescription}">
  65. {/block:Description}
  66.  
  67.  
  68.  
  69.  
  70. <meta name="image:background" content=""/>
  71. <meta name="image:png" content="https://via.placeholder.com/260x500"/>
  72. <meta name="image:navi" content="https://via.placeholder.com/65x65"/>
  73. <meta name="image:navi2" content="https://via.placeholder.com/40x40"/>
  74.  
  75. <meta name="color:background" content="#eee"/>
  76. <meta name="color:container" content="#fff"/>
  77. <meta name="color:posts" content="#fff"/>
  78. <meta name="color:post border" content="#f8f8f8"/>
  79. <meta name="color:borders" content="#ddd"/>
  80. <meta name="color:accent" content="#acb7c9"/>
  81. <meta name="color:accent2" content="#acb7c9"/>
  82. <meta name="color:text" content="#acacac"/>
  83. <meta name="color:links" content="#b0a8b7"/>
  84. <meta name="color:hover" content="#98a3a9"/>
  85. <meta name="color:bold" content="#d8d6d7"/>
  86. <meta name="color:italic" content="#98a3a9"/>
  87.  
  88. <meta name="select:body font" content="roboto" title="roboto"/>
  89. <meta name="select:body font" content="montserrat" title="montserrat"/>
  90. <meta name="select:body font" content="ibm plex sans" title="ibm plex sans"/>
  91. <meta name="select:body font" content="inconsolata" title="inconsolata"/>
  92. <meta name="select:body font" content="raleway" title="raleway"/>
  93. <meta name="select:body font" content="josefin sans" title="josefin sans"/>
  94. <meta name="select:body font" content="libre baskerville" title="libre baskerville"/>
  95.  
  96. <meta name="select:font size" content="10" title="10px"/>
  97. <meta name="select:font size" content="11" title="11px"/>
  98. <meta name="select:font size" content="12" title="12px"/>
  99.  
  100. <meta name="if:border radius" content="0"/>
  101. <meta name="if:grayscale" content="0"/>
  102.  
  103. <meta name="text:link url" content="/"/>
  104. <meta name="text:link text" content="link."/>
  105. <meta name="text:title" content="seraphic."/>
  106. <meta name="text:ooc" content="name, ooc info"/>
  107. <meta name="text:audio title" content="claire de lune"/>
  108. <meta name="text:audio subtitle" content="the ethereal remix."/>
  109.  
  110.  
  111.  
  112.  
  113.  
  114. <!--- 01: SCRIPTS + FONTS INSTALLED ---->
  115.  
  116.  
  117.  
  118.  
  119. <!--- JQUERY SCRIPTS --->
  120.  
  121. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  122. <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
  123.  
  124.  
  125.  
  126. <!--- TOOLTIP SCRIPT ---->
  127.  
  128. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  129. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  130. <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>
  131.  
  132.  
  133.  
  134. <!--- GOOGLE + ICON FONTS ---->
  135.  
  136. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  137. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/v4-shims.css">
  138.  
  139. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  140.  
  141. <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
  142.  
  143. <script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
  144.  
  145. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  146.  
  147.  
  148. <!-- POST STYLING FONTS -->
  149.  
  150. <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Poppins&display=swap" rel="stylesheet">
  151.  
  152.  
  153. <!-- BODY FONTS -->
  154.  
  155. <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  156.  
  157. <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
  158.  
  159. <link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
  160.  
  161. <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
  162.  
  163. <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
  164.  
  165. <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet">
  166.  
  167. <link href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap" rel="stylesheet">
  168.  
  169.  
  170.  
  171.  
  172. <!--- VIDEO SCRIPT BY SHYTHEMES ---->
  173.  
  174. <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>
  175.  
  176.  
  177.  
  178.  
  179. <!--- TAB SCRIPT by www.w3schools.com ---->
  180.  
  181. <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>
  182.  
  183.  
  184.  
  185. <!--- FADE OUT SCRIPT by beginnersbook.com ---->
  186.  
  187. <script>
  188. $(document).ready(function(){
  189. $("button").click(function(){
  190. $(".tabcontent").fadeOut("slow");
  191. });
  192. });
  193. </script>
  194.  
  195.  
  196.  
  197. <!--- MUSIC PLAYER SCRIPT ---->
  198.  
  199. <script> function aud_play_pause() { var myAudio = document.getElementById("myTune"); if (myAudio.paused) { myAudio.play(); } else { myAudio.pause(); } }</script>
  200.  
  201. <script>function myFunction(x) {x.classList.toggle("fa-pause");}</script>
  202.  
  203.  
  204.  
  205. <!--- CLOCK SCRIPT ---->
  206.  
  207. <script> function startTime() { var today = new Date(); var h = today.getHours(); var m = today.getMinutes(); var s = today.getSeconds(); m = checkTime(m); s = checkTime(s); document.getElementById('clock').innerHTML = h + ":" + m + ":" + s; var t = setTimeout(startTime, 500); } function checkTime(i) { if (i < 10) {i = "0" + i}; return i; } </script>
  208.  
  209.  
  210.  
  211.  
  212. <!--- POPUP SCRIPT by themekid ---->
  213. <script type="text/javascript" src="https://static.tumblr.com/8pnyeus/10hors8sn/themekid-popup.min.js"></script><script type="text/javascript">$(document).ready(function(){ popUp(true); });</script>
  214.  
  215.  
  216.  
  217.  
  218. <style type="text/css">
  219.  
  220.  
  221.  
  222.  
  223. /*--- FONTS HOSTED BY @CAPITAE ---*/
  224.  
  225. @font-face{ font-family:"qwenzy"; src: url('https://dl.dropboxusercontent.com/s/5by6d7bk0k6fkoj/Qwenzy.ttf’)'); }
  226.  
  227.  
  228.  
  229.  
  230. /*--- 02: TOOLTIP + SCROLLBAR + SELECTION ---*/
  231.  
  232.  
  233.  
  234.  
  235. /* TOOLTIP */
  236.  
  237. #s-m-t-tooltip { max-width:250px; 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:'poppins', sans-serif; font-size:8px; font-weight:bold; text-transform:uppercase; letter-spacing:1px; }
  238.  
  239.  
  240. /* SCROLLBAR */
  241.  
  242. ::-webkit-scrollbar-thumb { display:none; }
  243.  
  244. ::-webkit-scrollbar { display:none; }
  245.  
  246.  
  247. /* SELECTION */
  248.  
  249. ::-moz-selection { background:{color:accent}; color:{color:posts}; }
  250.  
  251. ::selection { background:{color:accent}; color:{color:posts};}
  252.  
  253.  
  254.  
  255.  
  256. /*--- 03: BODY + TEXT STYLING + ANIMATIONS ---*/
  257.  
  258.  
  259.  
  260.  
  261. /* TYPE: BODY */
  262.  
  263. body { width:100%; height:100%; background:{color:background}; color:{color:text}; background-image:url({image:background}); background-attachment:fixed; background-repeat:repeat; margin:0; padding:0; text-align:justify;
  264.  
  265. font-family:{select:body font};
  266. font-size:{select:font size}px;
  267. line-height: -moz-calc({select:font size}px + 8px);
  268. line-height: -webkit-calc({select:font size}px + 8px);
  269. line-height: -o-calc({select:font size}px + 8px);
  270. line-height: calc({select:font size}px + 8px); }
  271.  
  272.  
  273. /* TYPE: IMAGES */
  274.  
  275. iframe, img, embed, object { max-width:100%; margin:auto; border:none; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  276.  
  277. iframe:hover, img:hover, embed:hover, object:hover {
  278.  
  279. {block:ifGrayscale} filter: grayscale(0%);
  280. -webkit-transition: all .8s;
  281. -moz-transition: all .8s;
  282. -o-transition: all .8s;
  283. -ms-transition: all .8s;
  284. transition: all .8s; {/block:ifGrayscale} }
  285.  
  286. img { max-width:100%; height:auto; margin:auto; border:none; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  287.  
  288. img:hover { {block:ifGrayscale} filter: grayscale(0%);
  289.  
  290. -webkit-transition: all .8s;
  291. -moz-transition: all .8s;
  292. -o-transition: all .8s;
  293. -ms-transition: all .8s;
  294. transition: all .8s; {/block:ifGrayscale} }
  295.  
  296.  
  297. /* TYPE: TEXT STYLING */
  298.  
  299. select, textarea, input, a { outline:none; }
  300.  
  301. p { margin-top:5px; margin-bottom:5px; }
  302.  
  303. small, sub, sup { font-size:100%; }
  304.  
  305. big { font-size:110%; }
  306.  
  307. h1 { color:{color:accent}; font-family: 'Abril Fatface', cursive; font-weight:normal; line-height:28px; text-align:center; word-spacing:2px;
  308.  
  309. font-size: -moz-calc({select:font size}px + 20px);
  310. font-size: -webkit-calc({select:font size}px + 20px);
  311. font-size: -o-calc({select:font size}px + 20px);
  312. font-size: calc({select:font size}px + 20px); }
  313.  
  314. h2 { color:{color:accent2}; font-family:'poppins', sans-serif; line-height:18px; text-align:center; text-transform:lowercase;
  315.  
  316. font-size: -moz-calc({select:font size}px + 5px);
  317. font-size: -webkit-calc({select:font size}px + 5px);
  318. font-size: -o-calc({select:font size}px + 5px);
  319. font-size: calc({select:font size}px + 5px); }
  320.  
  321. a { color:{color:links}; font-family:'poppins', sans-serif; font-weight:bold; text-transform:uppercase; text-decoration:none; letter-spacing:1px;
  322.  
  323. font-size: -moz-calc({select:font size}px - 1px);
  324. font-size: -webkit-calc({select:font size}px - 1px);
  325. font-size: -o-calc({select:font size}px - 1px);
  326. font-size: calc({select:font size}px - 1px); }
  327.  
  328. a:hover { color:{color:hover};
  329.  
  330. -webkit-transition: all .3s;
  331. -moz-transition: all .3s;
  332. -o-transition: all .3s;
  333. -ms-transition: all .3s;
  334. transition: all .3s; }
  335.  
  336. ul, ol, li { margin:5px 10px; padding:0px; line-height:20px; }
  337.  
  338. b, strong { color:{color:bold}; }
  339.  
  340. i, em { color:{color:italic}; }
  341.  
  342. blockquote { margin:10px; padding-left:20px; border-left:1px solid {color:borders}; }
  343.  
  344.  
  345. /* TYPE: TUMBLR CONTROLS */
  346.  
  347. 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; }
  348.  
  349. iframe.tmblr-iframe:hover { opacity:1!important; }
  350.  
  351.  
  352. /* TYPE: ANIMATIONS */
  353.  
  354. .scale-in-center{-webkit-animation:scale-in-center .8s cubic-bezier(.215,.61,.355,1.000);animation:scale-in-center .8s cubic-bezier(.215,.61,.355,1.000)}
  355.  
  356. @-webkit-keyframes scale-in-center{ 0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes scale-in-center{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1} }
  357.  
  358.  
  359.  
  360.  
  361. /*--- 04: CONTAINER + SIDEBAR STYLING ---*/
  362.  
  363.  
  364.  
  365.  
  366. /* CONTAINER */
  367.  
  368. #wrapper { position:absolute; width:900px; height:600px; top:0px; right:0px; bottom:0px; left:100px; margin:auto; overflow:hidden; }
  369.  
  370. #sidebar { position:absolute; width:400px; height:400px; top:25px; left:50px; background:{color:container}; z-index:9999; border:1px solid {color:borders}; }
  371.  
  372. .title { position:absolute; width:380px; height:70px; bottom:170px; left:-140px; font-family:"qwenzy"; font-size:70px; line-height:80px; text-align:left; font-weight:bold; color:{color:accent}; letter-spacing:2px; z-index:99;
  373.  
  374. -webkit-transform: rotate(-90deg);
  375. -moz-transform: rotate(-90deg);
  376. -ms-transform: rotate(-90deg);
  377. -o-transform: rotate(-90deg); }
  378.  
  379. .line { position:absolute; width:300px; height:1px; left:30px; top:35px; background:{color:borders}; z-index:999; }
  380.  
  381. .tab { position:absolute; width:auto; height:20px; top:25px; right:15px; padding-left:15px; overflow:hidden; text-align:center; background:{color:container}; z-index:999; }
  382.  
  383. .tab li { display:inline-block; float:left; width:auto; height:auto; margin:0px 15px 0px 5px; }
  384.  
  385. .tab a { color:{color:accent}; font-size:9px; letter-spacing:1px; font-family:"montserrat"; }
  386.  
  387. .tab a:hover { font-weight:bold; }
  388.  
  389. #box { position:absolute; width:400px; height:400px; bottom:25px; left:235px; background:{color:accent}; z-index:9; }
  390.  
  391. .png { position:absolute; width:260px; height:auto; bottom:20px; right:90px; z-index:999999; }
  392.  
  393. .png img { width:260px; height:500px; }
  394.  
  395.  
  396. /*AUDIO PLAYER*/
  397.  
  398. #audio { position:absolute; width:180px; height:40px; top:10px; right:225px; z-index:99; border-radius:0px; padding:10px; background:{color:container}; border:1px solid {color:borders}; }
  399.  
  400. #audio button { background-color:{color:accent2}; cursor:pointer; width:40px; height:40px; border:none; }
  401.  
  402. #audio button:focus { outline:none; }
  403.  
  404. #audio i { color:{color:container}; font-size:14px; line-height:40px; }
  405.  
  406. #audio span { color:{color:container}; font-size:17px; margin:7px; padding-top:5px; }
  407.  
  408. #audio div { display:inline-block; cursor:pointer; }
  409.  
  410. .audiotxt { position:absolute; width:140px; height:25px; top:16px; right:10px; line-height:14px; text-align:center; font-size:9px; letter-spacing:1px; font-family:"montserrat"; }
  411.  
  412. .audiotxt b { font-family:"montserrat"; color:{color:accent}; font-size:11px; }
  413.  
  414. /*TIME BOX*/
  415.  
  416. #info { position:absolute; width:180px; height:40px; bottom:10px; left:12.5px; z-index:99; border-radius:0px; padding:10px; background:{color:container}; border:1px solid {color:borders}; }
  417.  
  418. #clock { position:absolute; width:140px; height:25px; top:16px; right:10px; line-height:14px; text-align:center; letter-spacing:1px; font-family:"montserrat"; color:{color:accent}; font-size:13px; }
  419.  
  420. .ooc { position:absolute; width:140px; height:25px; bottom:4px; right:10px; line-height:14px; text-align:center; font-size:9px; letter-spacing:1px; font-family:"montserrat"; }
  421.  
  422. .timebutton { background-color:{color:accent2}; width:40px; height:40px; text-align:center; }
  423.  
  424. .timebutton i { color:{color:container}; font-size:18px; line-height:40px; }
  425.  
  426.  
  427.  
  428.  
  429. /*--- 05: POSTS + ENTRIES ---*/
  430.  
  431.  
  432.  
  433.  
  434. /* POSTS */
  435.  
  436. #postcon { position:absolute; width:380px; height:380px; right:180px; bottom:0px; left:0px; top:0px; margin:auto; overflow-x:hidden; overflow-y:auto; z-index:10000; background:{color:container}; border:1px solid {color:borders}; padding:20px; }
  437.  
  438. #posts { position:absolute; width:380px; height:380px; right:180px; bottom:0px; left:0px; top:0px; margin:auto; overflow-x:hidden; overflow-y:auto; z-index:10000; padding:20px; }
  439.  
  440.  
  441. /* ENTRY STYLING */
  442.  
  443. .entry { width:300px; height:auto; background-color:{color:posts}; margin:20px; padding:20px 20px 0px 20px; border:1px solid {color:borders}; display:inline-block; border-radius:0px; {block:ifBorderRadius} border-radius:10px; {/block:ifBorderRadius} box-shadow: 0 7px 20px -10px rgba(150,170,180,0.5); }
  444.  
  445. .entry img { margin:0px; padding:0px; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  446.  
  447. .entry img:hover {
  448.  
  449. {block:ifGrayscale} filter: grayscale(0%);
  450. -webkit-transition: all .8s;
  451. -moz-transition: all .8s;
  452. -o-transition: all .8s;
  453. -ms-transition: all .8s;
  454. transition: all .8s; {/block:ifGrayscale} }
  455.  
  456.  
  457.  
  458.  
  459. /*--- 06: POST INFO + NOTES + PAGINATION ---*/
  460.  
  461.  
  462.  
  463. /* POST INFO */
  464.  
  465. .topinfo { width:320px; height:20px; margin-top:-20px; margin-bottom:25px; margin-left:-20px; padding: 10px 10px 10px 10px; background:{color:post border}; border-bottom:1px solid {color:borders}; line-height:12px; {block:ifBorderRadius} border-top-left-radius:10px; border-top-right-radius:10px; {/block:ifBorderRadius} }
  466.  
  467. .topinfo a { margin-left:0px; color:{color:links}; font-family:'poppins', sans-serif; font-size:9px; font-weight:bold; text-transform:uppercase; letter-spacing:1px; }
  468.  
  469. .topinfo b { padding:0px 3px 0px 2px; font-size:10px; }
  470.  
  471.  
  472. /*TAGS*/
  473.  
  474. .tags { width:320px; height:auto; min-height:20px; text-align:justify; background:{color:post border}; color:{color:text}; border-top:1px solid {color:borders}; overflow:hidden; font-size:8px; line-height:22px; padding:10px; margin:25px 0px -20px -20px; {block:ifBorderRadius} border-bottom-left-radius:10px; border-bottom-right-radius:10px; {/block:ifBorderRadius} }
  475.  
  476. .tags i { font-size:9px; text-transform:uppercase; letter-spacing:1px; padding-right:5px; }
  477.  
  478. .tags a { color:{color:text}; font-family:'poppins', sans-serif; padding:0px; font-weight:normal; margin-right:5px;
  479.  
  480. font-size: -moz-calc({select:font size}px - 2px);
  481. font-size: -webkit-calc({select:font size}px - 2px);
  482. font-size: -o-calc({select:font size}px - 2px);
  483. font-size: calc({select:font size}px - 2px); }
  484.  
  485. .tags a:hover { color:{color:hover}; font-weight:bold;
  486.  
  487. -webkit-transition: all .3s;
  488. -moz-transition: all .3s;
  489. -o-transition: all .3s;
  490. -ms-transition: all .3s;
  491. transition: all .3s; }
  492.  
  493.  
  494. /* POST NOTES */
  495.  
  496. .note { width:320px; margin-top:20px; margin-left:-31px; font-size:10px; text-transform:uppercase; }
  497.  
  498. .note li { width:320px; background:{color:posts}; margin:0; padding:15px 0px 15px 0px; list-style-type:none; float:left; border-left:1px solid {color:borders}; border-top:1px solid {color:borders}; border-right:1px solid {color:borders}; text-align:center; }
  499.  
  500. .note img.avatar { display:none; }
  501.  
  502.  
  503. /* PAGINATION */
  504.  
  505. .pagination { width:100%; text-align:center; padding-bottom:20px; margin-left:-7.5px; }
  506.  
  507. .pagination a { padding:8px; word-spacing:2px; }
  508.  
  509. .pagination a:hover { color:{color:text}; }
  510.  
  511. .pagination .iconify { font-size:25px; color:{color:links}; }
  512.  
  513.  
  514. /* READ MORE */
  515.  
  516. .more { width:100%; margin-top:20px; margin-bottom:5px; text-align:center; }
  517.  
  518. .more a { background:{color:bold}; color:{color:posts}; padding:4px 11px 4px 11px; font-size:9px; font-weight:bold; text-transform:uppercase; }
  519.  
  520. .more a:hover { background:{color:background}; color:{color:bold}; padding:4px 11px 4px 11px; font-size:9px; font-weight:bold; text-transform:uppercase; }
  521.  
  522.  
  523.  
  524.  
  525. /*--- 07: CREDIT, do not touch or remove pls ! ---*/
  526.  
  527.  
  528.  
  529.  
  530. /* CREDIT */
  531.  
  532. #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; border:1px solid {color:borders}; z-index:9999; }
  533.  
  534. #cred span { padding:10px; font-size:18px; background:-webkit-linear-gradient({color:accent}, {color:accent2});
  535.  
  536. -webkit-background-clip:text;
  537. -webkit-text-fill-color:transparent; }
  538.  
  539.  
  540.  
  541.  
  542. /*--- 08: POST TYPES ---*/
  543.  
  544.  
  545.  
  546.  
  547. /* TYPE: CHATS */
  548.  
  549. .answer span,.convo li { position:relative; max-width:75%; margin:0 0 15px; padding:.9em 10px; border-radius:1em; clear:both; }
  550.  
  551. .answer .them,.user_1,.user_3,.user_5,.user_7,.user_9,.user_11{ left:3px; background:#e6e6e6; color:#555555; float:left; }
  552.  
  553. .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 #e6e6e6; border-bottom-right-radius:1em .5em; }
  554.  
  555. .answer .me,.user_2,.user_4,.user_6,.user_8,.user_10,.user_12{ right:3px; background-color:#147efb; color:white; float:right; }
  556.  
  557. .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 #147efb; border-bottom-left-radius:1em .5em; }
  558.  
  559. .me p,.answer,.asked span{ margin:0; padding:0; }
  560.  
  561. .answer{ overflow:hidden; }
  562.  
  563. .asked p { margin:0 0px 10px 0px; padding:0; color:white; font-size:{select:font size}px; text-align:left; line-height:0px; }
  564.  
  565. .footerright .viasrc { float:left; }
  566.  
  567. .asked a { margin:0; padding:0; }
  568.  
  569. .user_3{ background-color:#e6e6e6; color:#555555; }
  570.  
  571. .user_3::after{ border-color:#e6e6e6; }
  572.  
  573. .user_4{ background-color:#147efb; color:white; }
  574.  
  575. .user_4::after{ border-color:#147efb; }
  576.  
  577. .user_5{ background-color:#e6e6e6; color:#555555; }
  578.  
  579. .user_5::after{ border-color:#e6e6e6; }
  580.  
  581. .user_6{ background-color:#147efb; color:white; }
  582.  
  583. .user_6::after{ border-color:#147efb; }
  584.  
  585. .user_7{ background-color:#e6e6e6; color:#555555; }
  586.  
  587. .user_7::after{ border-color:#e6e6e6; }
  588.  
  589. .user_8{ background-color:#147efb; color:white; }
  590.  
  591. .user_8::after{ border-color:#147efb; }
  592.  
  593. .user_9{ background-color:#e6e6e6; color:#555555; }
  594.  
  595. .user_9::after{ border-color:#e6e6e6; }
  596.  
  597. .convo { margin:0; padding:0; overflow:hidden; list-style-type:none; }
  598.  
  599. .delivered { width:300px; margin-top:-10px; margin-left:0px; color:{color:text}; font-size:8px; text-align:right; text-transform:uppercase; letter-spacing:1px; }
  600.  
  601.  
  602. /* TYPE: QUOTES */
  603.  
  604. .quote { color:{color:accent}; padding:0px 10px 0px 10px; font-family: 'Abril Fatface', cursive; font-weight:normal; line-height:28px; text-align:center; word-spacing:2px;
  605.  
  606. font-size: -moz-calc({select:font size}px + 20px);
  607. font-size: -webkit-calc({select:font size}px + 20px);
  608. font-size: -o-calc({select:font size}px + 20px);
  609. font-size: calc({select:font size}px + 20px); }
  610.  
  611. .source { text-align:right; margin-top:15px;
  612.  
  613. font-size: -moz-calc({select:font size}px - 1px);
  614. font-size: -webkit-calc({select:font size}px - 1px);
  615. font-size: -o-calc({select:font size}px - 1px);
  616. font-size: calc({select:font size}px - 1px);
  617.  
  618. line-height: -moz-calc({select:font size}px + 8px);
  619. line-height: -webkit-calc({select:font size}px + 8px);
  620. line-height: -o-calc({select:font size}px + 8px);
  621. line-height: calc({select:font size}px + 8px); }
  622.  
  623.  
  624. /* TYPE: ASKS */
  625.  
  626. #question { background:{color:background}; color:{color:text}; padding:10px 20px; padding-bottom:0px; margin:0px; margin-top:5px; margin-bottom:15px; overflow:hidden; text-align:justify; }
  627.  
  628. #asker { width:100%; height:30px; background:{color:accent}; color:{color:posts}; margin:0px; margin-top:10px; margin-left:-30px; margin-bottom:0px; padding:10px 15px 0px 35px; font-size:8px; line-height:23px; text-align:right; text-transform:uppercase; letter-spacing:1.5px; }
  629.  
  630. #asker a { color:{color:posts}; font-weight:bold; }
  631.  
  632.  
  633. /* TYPE: LINKS */
  634.  
  635. .linktitle { color:{color:accent}; margin-top:-5px; font-family: 'Abril Fatface', cursive; font-weight:normal; text-align:center; line-height:28px; word-spacing:2px;
  636.  
  637. font-size: -moz-calc({select:font size}px + 20px);
  638. font-size: -webkit-calc({select:font size}px + 20px);
  639. font-size: -o-calc({select:font size}px + 20px);
  640. font-size: calc({select:font size}px + 20px); }
  641.  
  642.  
  643. /* TYPE: AUDIO */
  644.  
  645. .albumart { position:relative; width:60px; height:60px; padding:20px; border:1px solid {color:borders}; border-top-left-radius:5px; border-bottom-left-radius:5px; }
  646.  
  647. .albumtrack { position:absolute; width:33px; height:30px; margin:auto; top:0px; right:0px; bottom:0px; left:0px; opacity:.6; }
  648.  
  649. .albuminfo { position:relative; width:calc(100% - 142.5px); height:60px; padding:20px; margin-top:-102px; margin-left:100px; border-top:1px solid {color:borders}; border-bottom:1px solid {color:borders}; border-right:1px solid {color:borders}; text-align:center; line-height:20px; border-top-right-radius:5px; border-bottom-right-radius:5px; }
  650.  
  651. .albuminfotxt { position:absolute; top:27.5%; left:0%; width:100%; height:auto; font-size:10px; }
  652.  
  653. .albuminfotxt b { color:{color:accent}; }
  654.  
  655.  
  656. /* TYPE: VIDEOS */
  657.  
  658. .tumblr_video_container { width:auto!important; height:auto!important; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  659.  
  660. .tumblr_video_container:hover {
  661.  
  662. {block:ifGrayscale} filter: grayscale(0%);
  663. -webkit-transition: all .8s;
  664. -moz-transition: all .8s;
  665. -o-transition: all .8s;
  666. -ms-transition: all .8s;
  667. transition: all .8s; {/block:ifGrayscale} }
  668.  
  669.  
  670.  
  671.  
  672. /*--- 09: TAB STYLING ---*/
  673.  
  674.  
  675.  
  676.  
  677. /*TAB + CLOSE CONTENT*/
  678.  
  679. .tabcontent { position:absolute; width:420px; height:420px; background:{color:container}; right:180px; bottom:0px; left:0px; top:0px; margin:auto; overflow:hidden; z-index:99999; display:none; animation: fadeEffect 1s; }
  680.  
  681. @keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} }
  682.  
  683. .tabcontent i { font-family:"poppins"; font-size:10px; }
  684.  
  685. .tabcontent button { position:absolute; top:0px; right:5px; padding:15px; background:transparent; color:{color:links}; border:none; z-index:99999; }
  686.  
  687. .tabcontent button:hover { cursor:pointer; }
  688.  
  689. .tabcontent button:focus { outline:0; }
  690.  
  691. /* NAVI TAB */
  692.  
  693. #muses { position:absolute; width:20%; height:92%; left:0px; top:0px; background:{color:post border}; border-right:1px solid {color:borders}; overflow-x:hidden; overflow-y:scroll; padding-top:4%; padding-bottom:4%; }
  694.  
  695. #muses li { float:left; display:block; width:auto; height:auto; margin:0; margin-top:10px; margin-left:11px; }
  696.  
  697. #muses img { width:50px; height:50px; border-radius:15px; padding:5px; border:1px solid {color:borders}; background:{color:container}; box-shadow: 0 7px 20px -10px rgba(150,170,180,0.5); -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); }
  698.  
  699. #links { position:absolute; width:20%; height:85%; bottom:5%; right:5%; }
  700.  
  701. #links li { float:left; display:block; width:100%; height:auto; margin:0; text-align:center; line-height:10px; margin-bottom:20px; }
  702.  
  703. #links a { font-family:"roboto"; font-size:7px; text-transform:uppercase; font-weight:bold; letter-spacing:1px; line-height:10px; }
  704.  
  705. #links .iconify { font-size:40px; color:{color:accent}; }
  706.  
  707. .navi-desc { position:absolute; width:40%; height:60%; bottom:8%; left:30%; font-family:"montserrat"; font-size:8px; overflow:scroll; text-transform:lowercase; letter-spacing:1px; }
  708.  
  709. .navi-icon { position:absolute; width:auto; height:auto; top:8%; left:37%; }
  710.  
  711. .navi-icon img { width:65px; height:65px; border-radius:10px; padding:5px; border:1px solid {color:borders}; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); box-shadow: 0 7px 20px -10px rgba(150,170,180,0.5); }
  712.  
  713. .navi-icon2 { position:absolute; width:auto; height:auto; top:16%; left:48%; }
  714.  
  715. .navi-icon2 img { width:40px; height:40px; border-radius:8px; padding:5px; border:1px solid {color:borders}; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); box-shadow: 0 7px 20px -10px rgba(150,170,180,0.5); background:{color:container}; }
  716.  
  717.  
  718. /* POPUPS */
  719.  
  720. .popup_block { background:{color:container}; display:none; position:absolute; bottom:0px; right:0px; z-index:9999999999999; height:420px; overflow:hidden;
  721.  
  722. -webkit-animation: zoom 0.5s;
  723. -moz-animation: zoom 0.5s;
  724. -ms-animation: zoom 0.5s;
  725. -o-animation: zoom 0.5s;
  726. animation: zoom 0.5s; }
  727.  
  728. *html .popup_block { position:absolute; }
  729.  
  730. @-webkit-keyframes zoom {0% {transform: scale(0);-webkit-transform: scale(0);}100% {transform: scale(1.0);-webkit-transform: scale(1.0);}}@-moz-keyframes zoom {0% {transform: scale(0);-moz-transform: scale(0);}100% {transform: scale(1.0);-moz-transform: scale(1.0);}}@keyframes zoom {0% {transform: scale(0);}100% {transform: scale(1.0);}}
  731.  
  732. .close { position:absolute; z-index:99999999999; width:315px; height:auto; bottom:10px; left:0px; font-size:9px; text-transform:uppercase; letter-spacing:1px; color:{color:bold}; text-align:right; padding-right:15px; font-weight:bold; }
  733.  
  734. .close:hover { cursor:pointer; }
  735.  
  736. .popup-desc { position:absolute; width:60%; height:55%; bottom:12%; left:20%; font-family:"montserrat"; font-size:8px; overflow:scroll; text-transform:lowercase; letter-spacing:1px; }
  737.  
  738. .popup-icon { position:absolute; width:auto; height:auto; top:8%; left:37%; }
  739.  
  740. .popup-icon img { width:65px; height:65px; border-radius:10px; padding:5px; border:1px solid {color:borders}; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); box-shadow: 0 7px 20px -10px rgba(150,170,180,0.5); }
  741.  
  742. .popup-icon2 { position:absolute; width:auto; height:auto; top:16%; left:48%; background:{color:container}; }
  743.  
  744. .popup-icon2 img { width:40px; height:40px; border-radius:8px; padding:5px; border:1px solid {color:borders}; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); box-shadow: 0 7px 20px -10px rgba(150,170,180,0.5); }
  745.  
  746.  
  747.  
  748.  
  749. /*--- 10: CUSTOM CSS ---*/
  750.  
  751.  
  752.  
  753.  
  754. {CustomCSS}
  755. </style></head><body><body onload="startTime()">
  756.  
  757.  
  758.  
  759.  
  760. <div id="wrapper">
  761.  
  762. <div class="png"> <img src="{image:png}" draggable="false"> </div>
  763.  
  764. <div id="info" class="scale-in-center">
  765.  
  766. <div class="timebutton"> <i class="far fa-moon"></i> </div>
  767. <div id="clock"> 00:00:00 </div>
  768. <div class="ooc"> {text:ooc} </div>
  769.  
  770. </div>
  771.  
  772.  
  773. <div id="audio" class="scale-in-center">
  774.  
  775. <!-- PASTE YOUR AUDIO URL HERE !! how to use?
  776.  
  777. step 01: upload your audio file to dropblox
  778.  
  779. step 02: copy the link they give you ( for example: https://www.dropbox.com/s/x7wr7zy28jkg33i/Clair%20De%20Lune%20Ethereal%20Remix.mp3?dl=0 )
  780.  
  781. step 03: replace the " www " with " dl "
  782.  
  783. step 04: delete " ?dl=0 "
  784.  
  785. step 05: if your link looks like this
  786.  
  787. https://dl.dropbox.com/s/x7wr7zy28jkg33i/Clair%20De%20Lune%20Ethereal%20Remix.mp3
  788.  
  789. you're good to go ! -->
  790.  
  791. <audio id="myTune" src="https://dl.dropbox.com/s/x7wr7zy28jkg33i/Clair%20De%20Lune%20Ethereal%20Remix.mp3"></audio>
  792.  
  793. <button type="button" onclick="aud_play_pause()"><i onclick="myFunction(this)" class="fas fa-play"></i></button>
  794.  
  795. <div class="audiotxt"> <b>{text:audio title}</b> <br> {text:audio subtitle}</div>
  796.  
  797. </div>
  798.  
  799.  
  800. <div id="sidebar">
  801.  
  802. <div class="title"> {text:title} </div>
  803. <div class="line"> </div>
  804.  
  805. <div class="tab">
  806.  
  807. <li><a href="/"> home. </a></li>
  808. <li><a href="/ask"> askbox. </a></li>
  809. <li><a href="#" class="tablinks" onclick="openCity(event, 'navi')"> atlas. </a></li>
  810. <li><a href="{text:link url}"> {text:link text} </a></li>
  811.  
  812. </div>
  813.  
  814. </div>
  815.  
  816. <div id="box"> </div>
  817.  
  818.  
  819.  
  820.  
  821. <!-- TABS: navigation -->
  822.  
  823. <div id="navi" class="tabcontent"> <button> x </button>
  824.  
  825.  
  826. <!-- NOTE: edit your muses here --->
  827.  
  828.  
  829. <div id="muses">
  830.  
  831. <li> <a href="#?w=335" rel="muse01" class="poplight" title="muse info!"> <img src="https://via.placeholder.com/50x50" draggable="false"> </a></li>
  832. <li> <a href="#?w=335" rel="muse02" class="poplight" title="muse info!"> <img src="https://via.placeholder.com/50x50" draggable="false"> </a></li>
  833. <li> <a href="#?w=335" rel="muse03" class="poplight" title="muse info!"> <img src="https://via.placeholder.com/50x50" draggable="false"> </a></li>
  834.  
  835. </div>
  836.  
  837. <!-- NOTE: edit your navigation links here --->
  838.  
  839. <div id="links">
  840.  
  841. <li> <a href="/"> <span class="iconify" data-icon="ant-design:file-image-twotone" data-inline="false"></span> <br> link one </a></li>
  842.  
  843. <li> <a href="/"> <span class="iconify" data-icon="ant-design:file-zip-twotone" data-inline="false"></span> <br> link two </a></li>
  844.  
  845. <li> <a href="/"> <span class="iconify" data-icon="ant-design:file-text-twotone" data-inline="false"></span> <br> link three </a></li>
  846.  
  847. <li> <a href="/"> <span class="iconify" data-icon="ant-design:file-image-twotone" data-inline="false"></span> <br> link four </a></li>
  848.  
  849. <li> <a href="/"> <span class="iconify" data-icon="ant-design:file-zip-twotone" data-inline="false"></span> <br> link five </a></li>
  850.  
  851. </div>
  852.  
  853. <div class="navi-icon"> <img src="{image:navi}" draggable="false"> </div>
  854.  
  855. <div class="navi-icon2"> <img src="{image:navi2}" draggable="false"> </div>
  856.  
  857. <!-- NOTE: edit your navi desc text here --->
  858.  
  859. <div class="navi-desc">
  860.  
  861. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
  862.  
  863.  
  864. <!-- START MUSE 01 POPUP -->
  865.  
  866. <div id="muse01" class="popup_block"> <span class="close" onclick="this.parentElement.style.display='none'"> close the tab. </span>
  867.  
  868. <div class="popup-icon"> <img src="/" draggable="false"> </div>
  869.  
  870. <div class="popup-icon2"> <img src="/" draggable="false"> </div>
  871.  
  872. <!-- NOTE: edit your popup desc text here --->
  873.  
  874. <div class="popup-desc">
  875.  
  876. <p style="text-align:center;">
  877.  
  878. <a href="link"> #link one </a> &nbsp;&nbsp;&nbsp;
  879. <a href="link"> #link two </a> &nbsp;&nbsp;&nbsp;
  880. <a href="link"> #link three </a> &nbsp;&nbsp;&nbsp;
  881. <a href="link"> #link four </a> &nbsp;&nbsp;&nbsp;
  882. <a href="link"> #link five </a> &nbsp;&nbsp;&nbsp;
  883. <a href="link"> #link six </a> &nbsp;&nbsp;&nbsp;
  884.  
  885.  
  886. </p>
  887.  
  888. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
  889.  
  890. </div>
  891.  
  892. <!-- START MUSE 02 POPUP -->
  893.  
  894. <div id="muse02" class="popup_block"> <span class="close" onclick="this.parentElement.style.display='none'"> close the tab. </span>
  895.  
  896. <div class="popup-icon"> <img src="/" draggable="false"> </div>
  897.  
  898. <div class="popup-icon2"> <img src="/" draggable="false"> </div>
  899.  
  900. <!-- NOTE: edit your popup desc text here --->
  901.  
  902. <div class="popup-desc">
  903.  
  904. <p style="text-align:center;">
  905.  
  906. <a href="link"> #link one </a> &nbsp;&nbsp;&nbsp;
  907. <a href="link"> #link two </a> &nbsp;&nbsp;&nbsp;
  908. <a href="link"> #link three </a> &nbsp;&nbsp;&nbsp;
  909. <a href="link"> #link four </a> &nbsp;&nbsp;&nbsp;
  910. <a href="link"> #link five </a> &nbsp;&nbsp;&nbsp;
  911. <a href="link"> #link six </a> &nbsp;&nbsp;&nbsp;
  912.  
  913.  
  914. </p>
  915.  
  916. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
  917.  
  918. </div>
  919.  
  920. <!-- START MUSE 03 POPUP -->
  921.  
  922. <div id="muse03" class="popup_block"> <span class="close" onclick="this.parentElement.style.display='none'"> close the tab. </span>
  923.  
  924. <div class="popup-icon"> <img src="/" draggable="false"> </div>
  925.  
  926. <div class="popup-icon2"> <img src="/" draggable="false"> </div>
  927.  
  928. <!-- NOTE: edit your popup desc text here --->
  929.  
  930. <div class="popup-desc">
  931.  
  932. <p style="text-align:center;">
  933.  
  934. <a href="link"> #link one </a> &nbsp;&nbsp;&nbsp;
  935. <a href="link"> #link two </a> &nbsp;&nbsp;&nbsp;
  936. <a href="link"> #link three </a> &nbsp;&nbsp;&nbsp;
  937. <a href="link"> #link four </a> &nbsp;&nbsp;&nbsp;
  938. <a href="link"> #link five </a> &nbsp;&nbsp;&nbsp;
  939. <a href="link"> #link six </a> &nbsp;&nbsp;&nbsp;
  940.  
  941. </p>
  942.  
  943. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
  944.  
  945. </div>
  946.  
  947. </div>
  948.  
  949.  
  950. <div id="postcon">
  951.  
  952. <!--- POSTS --->
  953.  
  954. <div id="posts" class="scale-in-center">
  955. {block:Posts}
  956. <div class="entry">
  957.  
  958. <!-- TOP INFO --->
  959.  
  960. <div class="topinfo"> <p style="text-align:left;"> <a href="{Permalink}" title="posted {TimeAgo} with {NoteCountWithLabel}.">{Month} {Year}</a> <span style="float:right;"> <a href="{ReblogURL}" target="_blank" title="reblog this post?">reblog</a> {block:ContentSource} <b>&bull;</b> <a href="{SourceURL}" title="posted by {SourceTitle}.">source</a>{/block:ContentSource} </span></p> </div>
  961.  
  962. <!-- TEXT --->
  963.  
  964. {block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}{Body}{/block:Text}
  965.  
  966. <!-- PHOTOS --->
  967.  
  968. {block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{/block:Photo}
  969.  
  970. {block:Photoset} {block:IndexPage}{Photoset-500}{/block:IndexPage} {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage} {/block:Photoset}
  971.  
  972. <!-- QUOTE --->
  973.  
  974. {block:Quote} <div class="quote"> {Quote} </div> <div class="source"> — {Source} </div> {/block:Quote}
  975.  
  976. <!-- LINKS --->
  977.  
  978. {block:Link} <div class="linktitle"> <a href="{URL}"><h1>{Name}</h1></a></div>
  979. {block:Description} <p>{Description}</p> {/block:Description}{/block:Link}
  980.  
  981. <!-- CHATS --->
  982.  
  983. {block:Chat} <ul class="convo">{block:Lines}<li class="line_{Alt} user_{UserNumber}">{block:Label}<span class="label" style="text-transform:uppercase; font-weight:bold;">@{Label} </span>{/block:Label}
  984. {Line}</li>{/block:Lines}</ul> <div class="delivered"> <span class="fas fa-check"></span> delivered. </div> {/block:Chat}
  985.  
  986. <!-- AUDIO --->
  987.  
  988. {block:Audio}
  989. {block:AlbumArt}
  990. <div class="albumart"> <img src="{AlbumArtURL}"/>{/block:AlbumArt} <div class="albumtrack"> {AudioPlayerGrey} </div> </div>
  991. <div class="albuminfo"><div class="albuminfotxt">
  992. {block:TrackName} <b>{TrackName}</b> {/block:TrackName} <br/> by {block:Artist} {Artist} {/block:Artist}
  993. </div></div>
  994. {/block:Audio}
  995.  
  996. <!-- VIDEO --->
  997.  
  998. {block:Video}<div class="video">{Video-500}</div>{/block:Video}
  999.  
  1000. <!-- ASKS --->
  1001.  
  1002. {block:Answer}<div id="question">{Question} <div id="asker">written by {Asker}</div></div>{Answer} {/block:Answer}
  1003.  
  1004. <!-- POST CAPTIONS --->
  1005.  
  1006. {block:Caption}{Caption}{/block:Caption}
  1007.  
  1008. <!-- READ MORE --->
  1009.  
  1010. {block:More}<div class="more"><a href="{Permalink}" class="more-btn">read more</a></div>{/block:More}
  1011.  
  1012. <!-- TAGS --->
  1013.  
  1014. {block:HasTags} <div class="tags"> <i>with keywords : </i> {block:Tags}<a href="{TagURL}"># {Tag}, </a> &nbsp;{/block:Tags}<br></div>{/block:HasTags}
  1015.  
  1016. <!-- POST NOTES --->
  1017.  
  1018. <div class="note"> {block:PostNotes}{PostNotes}{/block:PostNotes} </div>
  1019.  
  1020.  
  1021. </div>
  1022. {/block:Posts}
  1023.  
  1024.  
  1025. <!-- PAGINATION -->
  1026.  
  1027. {block:Pagination} <div class="pagination"> {block:previouspage} <a href="{previouspage}"> <span class="iconify" data-icon="ei:chevron-left" data-inline="false"></span> </a> {/block:previouspage} {block:nextpage} <a href="{nextpage}"> <span class="iconify" data-icon="ei:chevron-right" data-inline="false"></span> </a> {/block:nextpage} </div> {/block:pagination}
  1028.  
  1029.  
  1030. </div>
  1031. </div>
  1032.  
  1033. </div>
  1034. </div>
  1035.  
  1036.  
  1037.  
  1038.  
  1039. <!-- CREDIT -->
  1040.  
  1041. <div id="cred">
  1042. <a href="http://capitae.tumblr.com" title="coded by julie."> <span class="th th-holly-o"></span> </a>
  1043. </div>
  1044.  
  1045.  
  1046.  
  1047.  
  1048. </body>
  1049. </html>
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!