API tools faq
paste
lovesjoon

theme 09: vanille fraise, multi muse.

lovesjoon
Sep 18th, 2020 (edited)
1,695
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 59.82 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 09: VANILLE FRAISE by TWENTYS.
  14.  
  15.  
  16. ・｡* version 01: multi muse
  17.  
  18.  
  19.  
  20. ♡ SIZE GUIDE ♡
  21.  
  22.  
  23. ・｡* sidebar image: width:270px, height:290px.
  24.  
  25. ・｡* navigation png: width:250px, height:250px.
  26.  
  27. ・｡* muse header ( 300px posts ): width:400px, height:165px.
  28.  
  29. ・｡* muse header ( 400px posts ): width:500px, height:165px.
  30.  
  31. ・｡* muse images: width:70px, height:70px.
  32.  
  33. ・｡* polaroid one (big): width:80px; height:70px.
  34.  
  35. ・｡* polaroid two (small): width:70px; height:60px.
  36.  
  37.  
  38. ♡ READ ME ♡
  39.  
  40.  
  41. ・｡* base code by @pixiemail.
  42.  
  43. ・｡* please don't recreate and/or steal parts of this code
  44.  
  45. ・｡* don't remove the credit
  46.  
  47. ・｡* feel free to reach out if there are any bugs or questions ♡
  48.  
  49.  
  50. hope you enjoy this code !! ♡( ◡‿◡ ) --->
  51.  
  52.  
  53.  
  54.  
  55.  
  56.  
  57.  
  58.  
  59. <title>{Title}</title>
  60. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  61. <link rel="shortcut icon" href="{Favicon}">
  62. {block:Description}
  63. <meta name="description" content="{MetaDescription}">
  64. {/block:Description}
  65.  
  66.  
  67.  
  68.  
  69. <meta name="image:background" content=""/>
  70. <meta name="image:sidebar" content=""/>
  71. <meta name="image:header" content=""/>
  72. <meta name="image:header 400px" content=""/>
  73. <meta name="image:png" content=""/>
  74.  
  75. <meta name="color:background" content="#eeeeee"/>
  76. <meta name="color:container" content="#ffffff"/>
  77. <meta name="color:sidebar" content="#ffffff"/>
  78. <meta name="color:posts" content="#ffffff"/>
  79. <meta name="color:container border" content="#ffffff"/>
  80. <meta name="color:borders" content="#dddddd"/>
  81. <meta name="color:accent" content="#fead90"/>
  82. <meta name="color:accent2" content="#4c4c4b"/>
  83. <meta name="color:title" content="#000000"/>
  84. <meta name="color:text" content="#acacac"/>
  85. <meta name="color:links" content="#b99680"/>
  86. <meta name="color:hover" content="#98a3a9"/>
  87. <meta name="color:bold" content="#d8d6d7"/>
  88. <meta name="color:italic" content="#98a3a9"/>
  89.  
  90. <meta name="select:body font" content="abeezee" title="abeezee"/>
  91. <meta name="select:body font" content="open sans" title="open sans"/>
  92. <meta name="select:body font" content="montserrat" title="montserrat"/>
  93. <meta name="select:body font" content="poppins" title="poppins"/>
  94. <meta name="select:body font" content="ibm plex sans" title="ibm plex sans"/>
  95. <meta name="select:body font" content="inconsolata" title="inconsolata"/>
  96. <meta name="select:body font" content="raleway" title="raleway"/>
  97. <meta name="select:body font" content="josefin sans" title="josefin sans"/>
  98. <meta name="select:body font" content="libre baskerville" title="libre baskerville"/>
  99.  
  100. <meta name="select:font size" content="9" title="9px"/>
  101. <meta name="select:font size" content="10" title="10px"/>
  102. <meta name="select:font size" content="11" title="11px"/>
  103. <meta name="select:font size" content="12" title="12px"/>
  104.  
  105. <meta name="if:no polaroid" content="1"/>
  106. <meta name="if:400px posts" content="1"/>
  107. <meta name="if:muse tab" content="1" />
  108. <meta name="if:border radius" content="1"/>
  109. <meta name="if:grayscale" content="1"/>
  110.  
  111. <meta name="text:polaroid text" content="Vanille Fraise"/>
  112. <meta name="text:title" content="flowers bloom"/>
  113. <meta name="text:desc" content="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis."/>
  114.  
  115. <meta name="text:link url" content="/"/>
  116. <meta name="text:link hover title" content="free link"/>
  117.  
  118.  
  119.  
  120.  
  121.  
  122. <!--- PT. 1: SCRIPTS: JQUERY + TOOLTIP + TABS + FONTS ---->
  123.  
  124.  
  125.  
  126.  
  127. <!--- JQUERY SCRIPTS --->
  128.  
  129. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  130. <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
  131.  
  132.  
  133.  
  134. <!--- TOOLTIP SCRIPT ---->
  135.  
  136. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  137. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  138. <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>
  139.  
  140.  
  141.  
  142. <!--- GOOGLE + ICON FONTS ---->
  143.  
  144. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  145. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/v4-shims.css">
  146.  
  147. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  148.  
  149. <script src="https://unpkg.com/feather-icons"></script>
  150.  
  151. <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">
  152.  
  153.  
  154. <!-- POST STYLING FONTS -->
  155.  
  156. <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Lato&display=swap" rel="stylesheet">
  157.  
  158. <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap" rel="stylesheet">
  159.  
  160.  
  161. <!-- BODY FONTS -->
  162.  
  163. <link href="https://fonts.googleapis.com/css2?family=ABeeZee&display=swap" rel="stylesheet">
  164.  
  165. <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
  166.  
  167. <link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
  168.  
  169. <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
  170.  
  171. <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
  172.  
  173. <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
  174.  
  175. <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
  176.  
  177. <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet">
  178.  
  179. <link href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap" rel="stylesheet">
  180.  
  181.  
  182.  
  183.  
  184. <!--- VIDEO SCRIPT BY SHYTHEMES ---->
  185.  
  186. <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>
  187.  
  188.  
  189.  
  190.  
  191. <!--- TAB SCRIPT by www.w3schools.com ---->
  192.  
  193. <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>
  194.  
  195.  
  196.  
  197. <!--- FADE OUT SCRIPT by beginnersbook.com ---->
  198.  
  199. <script>
  200. $(document).ready(function(){
  201. $("button").click(function(){
  202. $(".tabcontent").fadeOut("slow");
  203. });
  204. });
  205. </script>
  206.  
  207.  
  208.  
  209. <!--- POPUP SCRIPT by themekid ---->
  210. <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>
  211.  
  212.  
  213.  
  214.  
  215. <style type="text/css">
  216.  
  217. @font-face{ font-family:"handsnow"; src: url('https://dl.dropboxusercontent.com/s/ywzy3n7xzo9x359/Handsnow.ttf’)'); }
  218.  
  219.  
  220.  
  221.  
  222.  
  223.  
  224.  
  225.  
  226. /*--- FONTS HOSTED BY TWENTYS---*/
  227.  
  228.  
  229.  
  230.  
  231.  
  232.  
  233.  
  234. /*---PT. 2: TOOLTIP + SCROLLBAR + SELECTION---*/
  235.  
  236.  
  237.  
  238.  
  239. /* TOOLTIP */
  240.  
  241. #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', sans-serif; font-size:8px; font-weight:bold; text-transform:uppercase; letter-spacing:1px; }
  242.  
  243.  
  244. /* SCROLLBAR */
  245.  
  246. ::-webkit-scrollbar-thumb { display:none; }
  247.  
  248. ::-webkit-scrollbar { display:none; }
  249.  
  250.  
  251. /* SELECTION */
  252.  
  253. ::-moz-selection { background:{color:accent}; color:{color:posts}; }
  254.  
  255. ::selection { background:{color:accent}; color:{color:posts};}
  256.  
  257.  
  258.  
  259.  
  260. /*---PT. 3: BODY + TEXT STYLING---*/
  261.  
  262.  
  263.  
  264.  
  265. /* BODY */
  266.  
  267. 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;
  268.  
  269. font-family:{select:body font};
  270. font-size:{select:font size}px;
  271. line-height: -moz-calc({select:font size}px + 8px);
  272. line-height: -webkit-calc({select:font size}px + 8px);
  273. line-height: -o-calc({select:font size}px + 8px);
  274. line-height: calc({select:font size}px + 8px); }
  275.  
  276.  
  277. /* FIX */
  278.  
  279. iframe, img, embed, object { max-width:100%; margin:auto; border:none; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  280.  
  281. iframe:hover, img:hover, embed:hover, object:hover {
  282.  
  283. {block:ifGrayscale} filter: grayscale(0%);
  284. -webkit-transition: all .8s;
  285. -moz-transition: all .8s;
  286. -o-transition: all .8s;
  287. -ms-transition: all .8s;
  288. transition: all .8s; {/block:ifGrayscale} }
  289.  
  290. img { max-width:100%; height:auto; margin:auto; border:none; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  291.  
  292. img:hover { {block:ifGrayscale} filter: grayscale(0%);
  293.  
  294. -webkit-transition: all .8s;
  295. -moz-transition: all .8s;
  296. -o-transition: all .8s;
  297. -ms-transition: all .8s;
  298. transition: all .8s; {/block:ifGrayscale} }
  299.  
  300.  
  301. /* TEXT STYLING */
  302.  
  303. select, textarea, input, a { outline:none; }
  304.  
  305. p { margin-top:5px; margin-bottom:5px; }
  306.  
  307. small, sub, sup { font-size:100%; }
  308.  
  309. big { font-size:110%; }
  310.  
  311. h1 { color:{color:title}; margin-top:30px; font-family: 'Abril Fatface', cursive; font-weight:normal; line-height:28px; text-align:center; word-spacing:2px;
  312.  
  313. font-size: -moz-calc({select:font size}px + 20px);
  314. font-size: -webkit-calc({select:font size}px + 20px);
  315. font-size: -o-calc({select:font size}px + 20px);
  316. font-size: calc({select:font size}px + 20px); }
  317.  
  318. h2 { color:{color:accent}; font-family:'lato', sans-serif; line-height:18px; text-align:center; text-transform:uppercase; letter-spacing:2px;
  319.  
  320. font-size: -moz-calc({select:font size}px + 5px);
  321. font-size: -webkit-calc({select:font size}px + 5px);
  322. font-size: -o-calc({select:font size}px + 5px);
  323. font-size: calc({select:font size}px + 5px); }
  324.  
  325. a { color:{color:links}; font-family:'lato', sans-serif; font-weight:bold; text-transform:uppercase; text-decoration:none; letter-spacing:1px;
  326.  
  327. font-size: -moz-calc({select:font size}px - 1px);
  328. font-size: -webkit-calc({select:font size}px - 1px);
  329. font-size: -o-calc({select:font size}px - 1px);
  330. font-size: calc({select:font size}px - 1px); }
  331.  
  332. a:hover { color:{color:hover};
  333.  
  334. -webkit-transition: all .3s;
  335. -moz-transition: all .3s;
  336. -o-transition: all .3s;
  337. -ms-transition: all .3s;
  338. transition: all .3s; }
  339.  
  340. ul, ol, li { margin:5px 10px; padding:0px; line-height:20px; }
  341.  
  342. b, strong { color:{color:bold}; }
  343.  
  344. i, em { color:{color:italic}; }
  345.  
  346. blockquote { margin:10px; padding-left:20px; border-left:1px solid {color:borders}; }
  347.  
  348.  
  349. /* TUMBLR CONTROLS */
  350.  
  351. 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; }
  352.  
  353. iframe.tmblr-iframe:hover { opacity:1!important; }
  354.  
  355.  
  356.  
  357.  
  358. /*--- PT. 4: CONTAINER + SIDEBAR ---*/
  359.  
  360.  
  361.  
  362.  
  363. /* CONTAINER */
  364.  
  365. #border { position:absolute; width:800px; {block:if400pxPosts} width:900px; {/block:if400pxPosts} height:640px; background:{color:container border}; top:0px; right:0px; bottom:0px; left:0px; margin:auto; overflow:hidden; }
  366.  
  367. #container { position:absolute; width:800px; {block:if400pxPosts} width:900px; {/block:if400pxPosts} height:570px; top:0px; right:0px; bottom:0px; left:0px; background:{color:container}; margin:auto; border-top:1px solid {color:borders}; border-bottom:1px solid {color:borders}; }
  368.  
  369. .sidebar { position:absolute; width:400px; height:570px; top:0px; left:0px; background:{color:sidebar}; border-right:1px solid {color:borders}; }
  370.  
  371.  
  372. /* SIDEBAR */
  373.  
  374. .head { position:absolute; width:400px; height:90px; left:0px; top:0px; background:{color:accent}; }
  375.  
  376. .bar4 { position:absolute; width:400px; height:25px; left:0px; top:90px; background:{color:accent};opacity:0.75; }
  377.  
  378. .bar5 { position:absolute; width:400px; height:25px; left:0px; top:115px; background:{color:accent}; opacity:0.5; }
  379.  
  380. .bar6 { position:absolute; width:400px; height:25px; left:0px; top:140px; background:{color:accent}; opacity:0.25; }
  381.  
  382. .graph { position:absolute; width:300px; height:320px; top:40px; left:50px; background:{color:container}; border:1px solid {color:borders}; z-index:99; }
  383.  
  384. .graph img { width:270px; height:290px; margin-top:15px; margin-left:15px; }
  385.  
  386. .polaroid { position:absolute; bottom:15px; left:15px; height:60px; width:270px; background:{color:container}; z-index:999; font-family:"handsnow"; font-size:45px; color:{color:title}; text-align:center; line-height:65px; word-spacing:2px; {block:ifNoPolaroid} display:none; {/block:ifNoPolaroid} }
  387.  
  388. .square { position:absolute; width:25px; height:25px; left:40px; top:347.5px; background:{color:accent}; }
  389.  
  390. .title { position:absolute; width:260px; height:20px; left:20px; bottom:160px; font-family:"abril fatface", cursive; font-size:23px; color:{color:accent2}; text-transform:uppercase; letter-spacing:1px; font-weight:bold; }
  391.  
  392. .desc { position:absolute; width:300px; height:90px; left:50px; bottom:55px; overflow:scroll; }
  393.  
  394.  
  395. /* TAB LINKS */
  396.  
  397. .tab { position:absolute; overflow: hidden; height:auto; float:right; right:5px; bottom:10px; z-index:999; width:200px; }
  398.  
  399. .tab li { display:inline-block; float:left; margin-left:5px; width:auto; }
  400.  
  401. .tab a { letter-spacing:1px; font-family: 'abril fatface', cursive; color:{color:accent2}; background-color:transparent; letter-spacing:1px; font-size:20px; }
  402.  
  403. .tab a:hover { font-size:20px;
  404.  
  405. -webkit-text-fill-color: transparent;
  406. -webkit-text-stroke-width: 0.5px;
  407. -webkit-text-stroke-color: #6d615e;
  408. -webkit-font-smoothing: antialiased;
  409.  
  410. -webkit-transition: all .8s;
  411. -moz-transition: all .8s;
  412. -o-transition: all .8s;
  413. -ms-transition: all .8s;
  414. transition: all .8s; }
  415.  
  416.  
  417.  
  418.  
  419. /*--- PT.5: POSTS + ENTRIES ---*/
  420.  
  421.  
  422.  
  423.  
  424. /* POSTS */
  425.  
  426. #posts { position:absolute; width:380px; {block:if400pxPosts} width:480px; {/block:if400pxPosts} height:570px; right:10px; bottom:0px; overflow-x:hidden; overflow-y:auto; z-index:1000; }
  427.  
  428.  
  429. /* ENTRY STYLING */
  430.  
  431. .entry { width:300px; {block:if400pxPosts} width:400px; {/block:if400pxPosts} 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} }
  432.  
  433. .entry img { margin:0px; padding:0px; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  434.  
  435. .entry img:hover {
  436.  
  437. {block:ifGrayscale} filter: grayscale(0%);
  438. -webkit-transition: all .8s;
  439. -moz-transition: all .8s;
  440. -o-transition: all .8s;
  441. -ms-transition: all .8s;
  442. transition: all .8s; {/block:ifGrayscale} }
  443.  
  444.  
  445.  
  446.  
  447. /*--- PT.6: POST INFO + NOTES + PAGINATION + CREDIT---*/
  448.  
  449.  
  450.  
  451.  
  452. .topinfo { width:340px; {block:if400pxPosts} width:440px; {/block:if400pxPosts} height:40px; margin-top:-20px; margin-bottom:20px; margin-left:-20px; border-bottom:1px solid {color:borders}; line-height:40px; text-transform:uppercase; }
  453.  
  454. .topinfo p { margin:0px; padding:0px 10px 0px 10px; }
  455.  
  456. .topinfo a { font-size:9px; }
  457.  
  458. .topinfo b { padding:0px 3px 0px 2px; font-size:10px; }
  459.  
  460. .bottominfo { width:340px; {block:if400pxPosts} width:440px; {/block:if400pxPosts} height:40px; margin-top:20px; margin-left:-20px; border-top:1px solid {color:borders}; border-bottom:1px solid {color:borders}; line-height:40px; font-family:'lato', sans-serif; text-align:center; text-transform:uppercase; }
  461.  
  462. .bottominfo a { padding-left:5px; }
  463.  
  464. .bottominfo a { font-size:9px; line-height:40px; }
  465.  
  466.  
  467. /* TAGS */
  468.  
  469. .tags { width:300px; {block:if400pxPosts} width:400px; {/block:if400pxPosts} padding-top:20px; line-height:14px; text-align:justify; }
  470.  
  471. .tags span { color:{color:links}; padding-right:5px; font-family:'lato', sans-serif; font-size:9px; font-weight:bold; text-transform:uppercase; letter-spacing:1px; }
  472.  
  473. .tags a { color:{color:text}; font-family:'lato', sans-serif; padding:0px; font-weight:normal;
  474.  
  475. font-size: -moz-calc({select:font size}px - 2px);
  476. font-size: -webkit-calc({select:font size}px - 2px);
  477. font-size: -o-calc({select:font size}px - 2px);
  478. font-size: calc({select:font size}px - 2px); }
  479.  
  480. .tags a:hover { color:{color:hover}; font-weight:bold; font-style:italic;
  481.  
  482. -webkit-transition: all .3s;
  483. -moz-transition: all .3s;
  484. -o-transition: all .3s;
  485. -ms-transition: all .3s;
  486. transition: all .3s; }
  487.  
  488.  
  489. /* POST NOTES */
  490.  
  491. .note { width:340px; {block:if400pxPosts} width:440px; {/block:if400pxPosts} margin-top:20px; margin-left:-31px; font-size:10px; text-transform:uppercase; }
  492.  
  493. .note li { width:340px; {block:if400pxPosts} width:440px; {/block:if400pxPosts} 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; }
  494.  
  495. .note img.avatar { display:none; }
  496.  
  497.  
  498. /*PAGINATION*/
  499.  
  500. .pagination { width:100%; text-align:center; }
  501.  
  502. .pagination a { padding:8px; word-spacing:2px; }
  503.  
  504. .pagination a:hover { color:{color:links}; }
  505.  
  506. .pagination i { width:10px; height:10px; color:{color:links}; }
  507.  
  508.  
  509. /* READ MORE */
  510.  
  511. .more { width:100%; margin-top:20px; margin-bottom:5px; text-align:center; }
  512.  
  513. .more a { background:{color:bold}; color:{color:posts}; padding:4px 11px 4px 11px; font-size:9px; font-weight:bold; text-transform:uppercase; }
  514.  
  515. .more a:hover { background:{color:background}; color:{color:bold}; padding:4px 11px 4px 11px; font-size:9px; font-weight:bold; text-transform:uppercase; }
  516.  
  517.  
  518. /* CREDIT */
  519.  
  520. #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; }
  521.  
  522. #cred span { padding:10px; font-size:18px; background:-webkit-linear-gradient({color:accent}, {color:accent2});
  523.  
  524. -webkit-background-clip:text;
  525. -webkit-text-fill-color:transparent; }
  526.  
  527.  
  528.  
  529.  
  530. /*---PT. 7: POST TYPES---*/
  531.  
  532.  
  533.  
  534.  
  535. /* TYPE: CHATS */
  536.  
  537. .answer span,.convo li { position:relative; max-width:75%; margin:0 0 15px; padding:.9em 10px; border-radius:1em; clear:both; }
  538.  
  539. .answer .them,.user_1,.user_3,.user_5,.user_7,.user_9,.user_11{ left:3px; background:#e6e6e6; color:#555555; float:left; }
  540.  
  541. .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; }
  542.  
  543. .answer .me,.user_2,.user_4,.user_6,.user_8,.user_10,.user_12{ right:3px; background-color:#147efb; color:white; float:right; }
  544.  
  545. .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; }
  546.  
  547. .me p,.answer,.asked span{ margin:0; padding:0; }
  548.  
  549. .answer{ overflow:hidden; }
  550.  
  551. .asked p { margin:0 0px 10px 0px; padding:0; color:white; font-size:{select:font size}px; text-align:left; line-height:0px; }
  552.  
  553. .footerright .viasrc { float:left; }
  554.  
  555. .asked a { margin:0; padding:0; }
  556.  
  557. .user_3{ background-color:#e6e6e6; color:#555555; }
  558.  
  559. .user_3::after{ border-color:#e6e6e6; }
  560.  
  561. .user_4{ background-color:#147efb; color:white; }
  562.  
  563. .user_4::after{ border-color:#147efb; }
  564.  
  565. .user_5{ background-color:#e6e6e6; color:#555555; }
  566.  
  567. .user_5::after{ border-color:#e6e6e6; }
  568.  
  569. .user_6{ background-color:#147efb; color:white; }
  570.  
  571. .user_6::after{ border-color:#147efb; }
  572.  
  573. .user_7{ background-color:#e6e6e6; color:#555555; }
  574.  
  575. .user_7::after{ border-color:#e6e6e6; }
  576.  
  577. .user_8{ background-color:#147efb; color:white; }
  578.  
  579. .user_8::after{ border-color:#147efb; }
  580.  
  581. .user_9{ background-color:#e6e6e6; color:#555555; }
  582.  
  583. .user_9::after{ border-color:#e6e6e6; }
  584.  
  585. .convo { margin:0; padding:0; overflow:hidden; list-style-type:none; }
  586.  
  587.  
  588. /* TYPE: QUOTES */
  589.  
  590. .quote { color:{color:title}; padding:0px 10px 0px 10px; font-family: 'Abril Fatface', cursive; font-weight:normal; line-height:28px; text-align:center; word-spacing:2px;
  591.  
  592. font-size: -moz-calc({select:font size}px + 20px);
  593. font-size: -webkit-calc({select:font size}px + 20px);
  594. font-size: -o-calc({select:font size}px + 20px);
  595. font-size: calc({select:font size}px + 20px); }
  596.  
  597. .source { text-align:right; margin-top:15px;
  598.  
  599. font-size: -moz-calc({select:font size}px - 1px);
  600. font-size: -webkit-calc({select:font size}px - 1px);
  601. font-size: -o-calc({select:font size}px - 1px);
  602. font-size: calc({select:font size}px - 1px);
  603.  
  604. line-height: -moz-calc({select:font size}px + 8px);
  605. line-height: -webkit-calc({select:font size}px + 8px);
  606. line-height: -o-calc({select:font size}px + 8px);
  607. line-height: calc({select:font size}px + 8px); }
  608.  
  609.  
  610. /* TYPE: ASKS */
  611.  
  612. #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; }
  613.  
  614. #asker { width:300px; {block:if400pxPosts} width:400px; {/block:if400pxPosts} height:30px; background:{color:accent}; color:{color:posts}; margin:0px; margin-top:0px; margin-left:-30px; margin-bottom:0px; padding-top:10px; padding-right:15px; font-size:8px; line-height:23px; text-align:right; text-transform:uppercase; letter-spacing:1.5px; }
  615.  
  616. #asker a { color:{color:posts}; font-weight:bold; }
  617.  
  618.  
  619. /* TYPE: LINKS */
  620.  
  621. .linktitle { color:{color:title}; font-family: 'Abril Fatface', cursive; font-weight:normal; text-align:center; line-height:28px; word-spacing:2px;
  622.  
  623. font-size: -moz-calc({select:font size}px + 20px);
  624. font-size: -webkit-calc({select:font size}px + 20px);
  625. font-size: -o-calc({select:font size}px + 20px);
  626. font-size: calc({select:font size}px + 20px); }
  627.  
  628.  
  629. /*TYPE: AUDIO */
  630.  
  631. .playbutton { position:relative; width:33px; height:38px; margin-top:45px; margin-left:35px; overflow:hidden; opacity:.6; z-index:9; }
  632.  
  633. .albumart img { position:relative; width:65px; height:65px; background:{color:posts}; margin-top:-64px; margin-left:10px; padding:10px; border:1px solid {color:borders}; filter: grayscale(0%); }
  634.  
  635. .trackinfo { position:relative; width:185px; {block:if400pxPosts} width:285px; {/block:if400pxPosts} height:66px; top:2px; background:{color:posts}; color:{color:text}; margin-top:-95px; margin-bottom:20px; margin-left:100px; padding:10px 5px 10px 5px; }
  636.  
  637. .trackname { position:relative; padding-top:15px; font-size:{select:font size}px; font-weight:bold; text-transform:uppercase; text-align:center; line-height:12px; letter-spacing:2px; }
  638.  
  639. .artist { font-size:7px; text-transform:uppercase; text-align:center; letter-spacing:4px; }
  640.  
  641.  
  642. /* TYPE: VIDEOS */
  643.  
  644. .tumblr_video_container { width:auto!important; height:auto!important; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  645.  
  646. .tumblr_video_container:hover {
  647.  
  648. {block:ifGrayscale} filter: grayscale(0%);
  649. -webkit-transition: all .8s;
  650. -moz-transition: all .8s;
  651. -o-transition: all .8s;
  652. -ms-transition: all .8s;
  653. transition: all .8s; {/block:ifGrayscale} }
  654.  
  655.  
  656.  
  657.  
  658.  
  659. /*--- PT.8: TABS ---*/
  660.  
  661.  
  662.  
  663.  
  664. /*TAB + CLOSE CONTENT*/
  665.  
  666. .tabcontent { position:absolute; width:800px; {block:if400pxPosts} width:900px; {/block:if400pxPosts} height:570px; top:0px; right:0px; background:{color:container}; z-index:9999; display:none; animation: fadeEffect 1s; }
  667.  
  668. @keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} }
  669.  
  670. .tabcontent button { position:absolute; top:165px; left:400px; padding:15px; background:transparent; color:{color:accent2}; border:none; z-index:99999; font-family:"abril fatface", cursive; text-transform:uppercase; font-size:13px; font-weight:bold; letter-spacing:1px; }
  671.  
  672. .tabcontent button:hover { cursor:pointer; }
  673.  
  674. .tabcontent button:focus { outline:0; }
  675.  
  676.  
  677. /* NAVI SECTION */
  678.  
  679. .tableft { position:absolute; width:400px; height:570px; top:0px; left:0px; background:transparent; border-right:1px solid {color:borders}; }
  680.  
  681. .ntitle { position:absolute; width:350px; height:auto; top:25px; left:20px; font-family:"montserrat"; font-size:40px; font-weight:bold; z-index:999; color:{color:container}; letter-spacing:1px; text-transform:uppercase; }
  682.  
  683. .bar { position:absolute; width:400px; height:495px; left:0px; bottom:75px; background:{color:accent}; }
  684.  
  685. .bar1 { position:absolute; width:400px; height:25px; left:0px; bottom:50px; background:{color:accent};opacity:0.75; }
  686.  
  687. .bar2 { position:absolute; width:400px; height:25px; left:0px; bottom:25px; background:{color:accent}; opacity:0.5; }
  688.  
  689. .bar3 { position:absolute; width:400px; height:25px; left:0px; bottom:0px; background:{color:accent}; opacity:0.25; }
  690.  
  691. .png { position:absolute; width:250px; height:250px; background-color:transparent; bottom:-20px; left:-70px; z-index:99999999999; }
  692.  
  693. .links { position:absolute; bottom:145px; right:55px; width:250px; height:220px; z-index:99999; }
  694.  
  695. .links li { display:block; float:left; width:250px; height:18px; padding:5px; margin:5px; text-align:right; line-height:15px; }
  696.  
  697. .links a { color:{color:container}; font-size:13px; font-family:'montserrat'; letter-spacing:1px; }
  698.  
  699. .links a:hover { font-style:italic;
  700.  
  701. -webkit-transition: all .8s;
  702. -moz-transition: all .8s;
  703. -o-transition: all .8s;
  704. -ms-transition: all .8s;
  705. transition: all .8s; }
  706.  
  707.  
  708. /* MUSE SECTION */
  709.  
  710. .mtitle { position:absolute; width:350px; height:auto; bottom:25px; right:20px; font-family:"montserrat"; font-size:40px; font-weight:bold; text-align:right; z-index:999; color:{color:accent}; letter-spacing:1px; text-transform:uppercase; }
  711.  
  712. .header { position:absolute; width:400px; {block:if400pxPosts} width:500px; {/block:if400pxPosts} height:165px; top:0px; right:0px; background:{color:container}; }
  713.  
  714. .header img { width:400px; {block:if400pxPosts} width:500px; {/block:if400pxPosts} height:165px; }
  715.  
  716.  
  717. .muses { position:absolute; width:330px; height:280px; overflow:scroll; z-index:999; right:5px; {block:if400pxPosts} width:430px; right:0px; {/block:if400pxPosts} bottom:65px; }
  718.  
  719. .muses li { display:inline-block; float:left; width:70px; height:70px; background-color:{color:post container}; margin:10px; border-radius:5px; }
  720.  
  721. .muses img { width:70px; height:70px; border-radius:5px;
  722.  
  723. -webkit-filter: grayscale(100%);
  724. filter: grayscale(100%); }
  725.  
  726. .muses img:hover {
  727.  
  728. -webkit-filter: grayscale(0%);
  729. filter: grayscale(0%);
  730. -webkit-transition: all 0.8s ease;
  731. -moz-transition: all 0.8s ease;
  732. -o-transition: all 0.8s ease;
  733. -ms-transition: all 0.8s ease;
  734. transition: all 0.8s ease; }
  735.  
  736.  
  737. /* POPUPS */
  738.  
  739. .popup_block { background:{color:accent}; display:none; position:absolute; bottom:75px; right:400px; {block:if400pxPosts} right:500px; {/block:if400pxPosts} z-index:99999999; height:495px;
  740.  
  741. -webkit-animation: zoom 0.5s;
  742. -moz-animation: zoom 0.5s;
  743. -ms-animation: zoom 0.5s;
  744. -o-animation: zoom 0.5s;
  745. animation: zoom 0.5s; }
  746.  
  747. *html .popup_block { position:absolute; }
  748.  
  749. @-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);}}
  750.  
  751. .close { position:absolute; z-index:99999999999; width:auto; height:auto; padding:15px; right:0px; top:0px; color:{color:container}; }
  752.  
  753. .close:hover { cursor:pointer; }
  754.  
  755.  
  756. /* POPUP STYLING */
  757.  
  758. .ptitle { position:absolute; width:350px; height:auto; top:25px; left:20px; font-family:"montserrat"; font-size:40px; font-weight:bold; z-index:999; color:{color:container}; letter-spacing:1px; text-transform:uppercase; }
  759.  
  760. .mstats { position:absolute; top:90px; left:55px; width:150px; height:115px; z-index:99999; overflow:scroll; color:{color:container}; }
  761.  
  762. .mstats li { display:block; float:left; width:150px; height:18px; padding:5px 0px 5px 0px; margin:0px; line-height:15px; }
  763.  
  764. .mstats b { font-size:12px; padding-right:5px; color:{color:accent2}; font-family:"abril fatface", cursive; text-transform:uppercase; letter-spacing:1px; }
  765.  
  766. .mlinks { position:absolute; top:90px; right:75px; width:110px; height:auto; z-index:99999; }
  767.  
  768. .mlinks li { display:block; float:left; width:110px; height:18px; padding:5px 0px 5px 0px; margin:0px; text-align:right; line-height:15px; }
  769.  
  770. .mlinks a { color:{color:container}; font-size:10px; font-family:'montserrat'; letter-spacing:1px; }
  771.  
  772. .mlinks a:hover { letter-spacing:2px;
  773.  
  774. -webkit-transition: all .8s;
  775. -moz-transition: all .8s;
  776. -o-transition: all .8s;
  777. -ms-transition: all .8s;
  778. transition: all .8s; }
  779.  
  780. .mdesc { position:absolute; width:300px; height:110px; left:50px; top:230px; overflow:scroll; color:{color:container};
  781.  
  782. line-height: -moz-calc({select:font size}px + 8px);
  783. line-height: -webkit-calc({select:font size}px + 8px);
  784. line-height: -o-calc({select:font size}px + 8px);
  785. line-height: calc({select:font size}px + 8px); }
  786.  
  787.  
  788. .mgraph { position:absolute; width:90px; height:90px; bottom:40px; right:40px; background:{color:container}; border-radius:2px;
  789.  
  790. -webkit-transform: rotate(5deg);
  791. -moz-transform: rotate(5deg);
  792. -ms-transform: rotate(5deg);
  793. -o-transform: rotate(5deg); }
  794.  
  795. .mgraph img { width:80px; height:70px; margin-top:5px; margin-left:5px; background:black; }
  796.  
  797. .mgraph2 { position:absolute; width:80px; height:80px; bottom:25px; right:90px; background:{color:container}; border-radius:2px;
  798.  
  799. -webkit-transform: rotate(-3deg);
  800. -moz-transform: rotate(-3deg);
  801. -ms-transform: rotate(-3deg);
  802. -o-transform: rotate(-3deg); }
  803.  
  804. .mgraph2 img { width:70px; height:60px; margin-top:5px; margin-left:5px; background:black; }
  805.  
  806.  
  807.  
  808.  
  809. /*--- PT.9: CUSTOM CSS ---*/
  810.  
  811.  
  812.  
  813.  
  814. {CustomCSS}
  815. </style></head><body>
  816.  
  817.  
  818.  
  819.  
  820. <div id="border"> </div>
  821. <div id="container">
  822.  
  823. <div class="sidebar">
  824.  
  825. <div class="head"> </div>
  826. <div class="bar4"> </div>
  827. <div class="bar5"> </div>
  828. <div class="bar6"> </div>
  829. <div class="square"> </div>
  830.  
  831. <div class="graph"> <img src="{image:sidebar}" draggable="false">
  832. <div class="polaroid"> {text:polaroid text} </div> </div>
  833.  
  834. <div class="title"> {text:title}, </div>
  835. <div class="desc"> {text:desc} </div>
  836.  
  837. <div class="tab">
  838. <li><a href="/" title="refresh"> .01 </a></li>
  839. <li><a href="/ask" title="contact"> .02 </a></li>
  840. <li><a href="#" class="tablinks" onclick="openCity(event, 'navi')" title="navigate"> .03 </a></li>
  841. <li><a href="{text:link url}" title="{text:link hover title}"> .04 </a></li>
  842. </div>
  843.  
  844. </div>
  845.  
  846.  
  847.  
  848.  
  849. <!--- NAVIGATION TAB SECTION --->
  850.  
  851. <div id="navi" class="tabcontent"> <button> close the tab </button>
  852.  
  853. <div class="png"> <img src="{image:png}" draggable="false"> </div>
  854.  
  855. <div class="tableft">
  856.  
  857. <!-- note: edit your navi title here! -->
  858. <div class="ntitle"> 01. atlas </div>
  859.  
  860.  
  861. <!-- note: edit your navi tab links here! -->
  862. <div class="links">
  863.  
  864. <li> <a href="/"> 01. link one.</a> </li>
  865. <li> <a href="/"> 02. link two.</a> </li>
  866. <li> <a href="/"> 03. link three.</a> </li>
  867. <li> <a href="/"> 04. link four.</a> </li>
  868. <li> <a href="/"> 05. link five.</a> </li>
  869. <li> <a href="/"> 06. link six.</a> </li>
  870. <li> <a href="/"> 07. link seven.</a> </li>
  871.  
  872. </div>
  873.  
  874.  
  875. <div class="bar"> </div>
  876. <div class="bar1"> </div>
  877. <div class="bar2"> </div>
  878. <div class="bar3"> </div>
  879.  
  880. </div>
  881.  
  882.  
  883. <!--- MUSE TAB SECTION --->
  884.  
  885. <div class="header"> {block:ifNot400pxPosts} <img src="{image:header}" draggable="false"> {/block:ifNot400pxPosts} {block:if400pxPosts} <img src="{image:header 400px}" draggable="false"> {/block:if400pxPosts} </div>
  886.  
  887.  
  888.  
  889. <!-- note: edit your navi title here! -->
  890. <div class="mtitle"> 02. team </div>
  891.  
  892.  
  893.  
  894. <div class="muses">
  895.  
  896. <!-- note: edit your muse images here! -->
  897.  
  898. <li> <a href="#?w=400" rel="muse01" class="poplight" title="muse info!"> <img src="https://i.postimg.cc/zf6FztRQ/hayoungicon.png" draggable="false"> </a> </li>
  899. <li> <a href="#?w=400" rel="muse02" class="poplight" title="muse info!"> <img src="https://i.postimg.cc/zf6FztRQ/hayoungicon.png" draggable="false"> </a> </li>
  900. <li> <a href="#?w=400" rel="muse03" class="poplight" title="muse info!"> <img src="https://i.postimg.cc/zf6FztRQ/hayoungicon.png" draggable="false"> </a> </li>
  901.  
  902. <li> <a href="#?w=400" rel="muse04" class="poplight" title="muse info!"> <img src="https://i.postimg.cc/zf6FztRQ/hayoungicon.png" draggable="false"> </a> </li>
  903. <li> <a href="#?w=400" rel="muse05" class="poplight" title="muse info!"> <img src="https://i.postimg.cc/zf6FztRQ/hayoungicon.png" draggable="false"> </a> </li>
  904. <li> <a href="#?w=400" rel="muse06" class="poplight" title="muse info!"> <img src="https://i.postimg.cc/zf6FztRQ/hayoungicon.png" draggable="false"> </a> </li>
  905.  
  906. <li> <a href="#?w=400" rel="muse07" class="poplight" title="muse info!"> <img src="https://i.postimg.cc/zf6FztRQ/hayoungicon.png" draggable="false"> </a> </li>
  907. <li> <a href="#?w=400" rel="muse08" class="poplight" title="muse info!"> <img src="https://i.postimg.cc/zf6FztRQ/hayoungicon.png" draggable="false"> </a> </li>
  908. <li> <a href="#?w=400" rel="muse09" class="poplight" title="muse info!"> <img src="https://i.postimg.cc/zf6FztRQ/hayoungicon.png" draggable="false"> </a> </li>
  909.  
  910. <li> <a href="#?w=400" rel="muse10" class="poplight" title="muse info!"> <img src="https://i.postimg.cc/zf6FztRQ/hayoungicon.png" draggable="false"> </a> </li>
  911. <li> <a href="#?w=400" rel="muse11" class="poplight" title="muse info!"> <img src="https://i.postimg.cc/zf6FztRQ/hayoungicon.png" draggable="false"> </a> </li>
  912. <li> <a href="#?w=400" rel="muse12" class="poplight" title="muse info!"> <img src="https://i.postimg.cc/zf6FztRQ/hayoungicon.png" draggable="false"> </a> </li>
  913.  
  914.  
  915. </div>
  916.  
  917.  
  918. <!-- note: edit the muse popups here! -->
  919.  
  920. <!-- START MUSE 01 POPUP -->
  921.  
  922. <div id="muse01" class="popup_block"> <span class="close" onclick="this.parentElement.style.display='none'"> <i data-feather="x" width="15px" height="15px"></i> </span>
  923.  
  924. <div class="ntitle"> FIRST LAST. </div>
  925.  
  926.  
  927. <div class="mstats">
  928.  
  929. <li> <b>name:</b> first last. </li>
  930. <li> <b>age:</b> age. </li>
  931. <li> <b>pronouns:</b> pronouns. </li>
  932. <li> <b>gender:</b> gender. </li>
  933. <li> <b>zodiac:</b> sign. </li>
  934.  
  935. </div>
  936.  
  937.  
  938. <div class="mlinks">
  939.  
  940. <li> <a href="/"> #links.</a> </li>
  941. <li> <a href="/"> #links.</a> </li>
  942. <li> <a href="/"> #links.</a> </li>
  943. <li> <a href="/"> #links.</a> </li>
  944.  
  945. </div>
  946.  
  947.  
  948. <div class="mdesc"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. </div>
  949.  
  950.  
  951. <div class="mgraph"> <img src="https://i.postimg.cc/dV8kKrLc/songhayoung2.png" draggable="false"> </div>
  952.  
  953. <div class="mgraph2"> <img src="https://i.postimg.cc/yY91tKbD/songhayoung.png" draggable="false"> </div>
  954.  
  955.  
  956. </div>
  957.  
  958. <!-- END MUSE 01 POPUP -->
  959.  
  960. <!-- START MUSE 02 POPUP -->
  961.  
  962. <div id="muse02" class="popup_block"> <span class="close" onclick="this.parentElement.style.display='none'"> <i data-feather="x" width="15px" height="15px"></i> </span>
  963.  
  964. <div class="ntitle"> FIRST LAST 2. </div>
  965.  
  966.  
  967. <div class="mstats">
  968.  
  969. <li> <b>name:</b> first last. </li>
  970. <li> <b>age:</b> age. </li>
  971. <li> <b>pronouns:</b> pronouns. </li>
  972. <li> <b>gender:</b> gender. </li>
  973. <li> <b>zodiac:</b> sign. </li>
  974.  
  975. </div>
  976.  
  977.  
  978. <div class="mlinks">
  979.  
  980. <li> <a href="/"> #links.</a> </li>
  981. <li> <a href="/"> #links.</a> </li>
  982. <li> <a href="/"> #links.</a> </li>
  983. <li> <a href="/"> #links.</a> </li>
  984.  
  985. </div>
  986.  
  987.  
  988. <div class="mdesc"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. </div>
  989.  
  990.  
  991. <div class="mgraph"> <img src="https://i.postimg.cc/dV8kKrLc/songhayoung2.png" draggable="false"> </div>
  992.  
  993. <div class="mgraph2"> <img src="https://i.postimg.cc/yY91tKbD/songhayoung.png" draggable="false"> </div>
  994.  
  995.  
  996. </div>
  997.  
  998. <!-- END MUSE 02 POPUP -->
  999.  
  1000. <!-- START MUSE 03 POPUP -->
  1001.  
  1002. <div id="muse03" class="popup_block"> <span class="close" onclick="this.parentElement.style.display='none'"> <i data-feather="x" width="15px" height="15px"></i> </span>
  1003.  
  1004. <div class="ntitle"> FIRST LAST 3. </div>
  1005.  
  1006.  
  1007. <div class="mstats">
  1008.  
  1009. <li> <b>name:</b> first last. </li>
  1010. <li> <b>age:</b> age. </li>
  1011. <li> <b>pronouns:</b> pronouns. </li>
  1012. <li> <b>gender:</b> gender. </li>
  1013. <li> <b>zodiac:</b> sign. </li>
  1014.  
  1015. </div>
  1016.  
  1017.  
  1018. <div class="mlinks">
  1019.  
  1020. <li> <a href="/"> #links.</a> </li>
  1021. <li> <a href="/"> #links.</a> </li>
  1022. <li> <a href="/"> #links.</a> </li>
  1023. <li> <a href="/"> #links.</a> </li>
  1024.  
  1025. </div>
  1026.  
  1027.  
  1028. <div class="mdesc"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. </div>
  1029.  
  1030.  
  1031. <div class="mgraph"> <img src="https://i.postimg.cc/dV8kKrLc/songhayoung2.png" draggable="false"> </div>
  1032.  
  1033. <div class="mgraph2"> <img src="https://i.postimg.cc/yY91tKbD/songhayoung.png" draggable="false"> </div>
  1034.  
  1035.  
  1036. </div>
  1037.  
  1038. <!-- END MUSE 03 POPUP -->
  1039.  
  1040. <!-- START MUSE 04 POPUP -->
  1041.  
  1042. <div id="muse04" class="popup_block"> <span class="close" onclick="this.parentElement.style.display='none'"> <i data-feather="x" width="15px" height="15px"></i> </span>
  1043.  
  1044. <div class="ntitle"> FIRST LAST 4. </div>
  1045.  
  1046.  
  1047. <div class="mstats">
  1048.  
  1049. <li> <b>name:</b> first last. </li>
  1050. <li> <b>age:</b> age. </li>
  1051. <li> <b>pronouns:</b> pronouns. </li>
  1052. <li> <b>gender:</b> gender. </li>
  1053. <li> <b>zodiac:</b> sign. </li>
  1054.  
  1055. </div>
  1056.  
  1057.  
  1058. <div class="mlinks">
  1059.  
  1060. <li> <a href="/"> #links.</a> </li>
  1061. <li> <a href="/"> #links.</a> </li>
  1062. <li> <a href="/"> #links.</a> </li>
  1063. <li> <a href="/"> #links.</a> </li>
  1064.  
  1065. </div>
  1066.  
  1067.  
  1068. <div class="mdesc"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. </div>
  1069.  
  1070.  
  1071. <div class="mgraph"> <img src="https://i.postimg.cc/dV8kKrLc/songhayoung2.png" draggable="false"> </div>
  1072.  
  1073. <div class="mgraph2"> <img src="https://i.postimg.cc/yY91tKbD/songhayoung.png" draggable="false"> </div>
  1074.  
  1075.  
  1076. </div>
  1077.  
  1078. <!-- END MUSE 04 POPUP -->
  1079.  
  1080. <!-- START MUSE 05 POPUP -->
  1081.  
  1082. <div id="muse05" class="popup_block"> <span class="close" onclick="this.parentElement.style.display='none'"> <i data-feather="x" width="15px" height="15px"></i> </span>
  1083.  
  1084. <div class="ntitle"> FIRST LAST 5. </div>
  1085.  
  1086.  
  1087. <div class="mstats">
  1088.  
  1089. <li> <b>name:</b> first last. </li>
  1090. <li> <b>age:</b> age. </li>
  1091. <li> <b>pronouns:</b> pronouns. </li>
  1092. <li> <b>gender:</b> gender. </li>
  1093. <li> <b>zodiac:</b> sign. </li>
  1094.  
  1095. </div>
  1096.  
  1097.  
  1098. <div class="mlinks">
  1099.  
  1100. <li> <a href="/"> #links.</a> </li>
  1101. <li> <a href="/"> #links.</a> </li>
  1102. <li> <a href="/"> #links.</a> </li>
  1103. <li> <a href="/"> #links.</a> </li>
  1104.  
  1105. </div>
  1106.  
  1107.  
  1108. <div class="mdesc"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. </div>
  1109.  
  1110.  
  1111. <div class="mgraph"> <img src="https://i.postimg.cc/dV8kKrLc/songhayoung2.png" draggable="false"> </div>
  1112.  
  1113. <div class="mgraph2"> <img src="https://i.postimg.cc/yY91tKbD/songhayoung.png" draggable="false"> </div>
  1114.  
  1115.  
  1116. </div>
  1117.  
  1118. <!-- END MUSE 05 POPUP -->
  1119.  
  1120. <!-- START MUSE 06 POPUP -->
  1121.  
  1122. <div id="muse06" class="popup_block"> <span class="close" onclick="this.parentElement.style.display='none'"> <i data-feather="x" width="15px" height="15px"></i> </span>
  1123.  
  1124. <div class="ntitle"> FIRST LAST 6. </div>
  1125.  
  1126.  
  1127. <div class="mstats">
  1128.  
  1129. <li> <b>name:</b> first last. </li>
  1130. <li> <b>age:</b> age. </li>
  1131. <li> <b>pronouns:</b> pronouns. </li>
  1132. <li> <b>gender:</b> gender. </li>
  1133. <li> <b>zodiac:</b> sign. </li>
  1134.  
  1135. </div>
  1136.  
  1137.  
  1138. <div class="mlinks">
  1139.  
  1140. <li> <a href="/"> #links.</a> </li>
  1141. <li> <a href="/"> #links.</a> </li>
  1142. <li> <a href="/"> #links.</a> </li>
  1143. <li> <a href="/"> #links.</a> </li>
  1144.  
  1145. </div>
  1146.  
  1147.  
  1148. <div class="mdesc"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. </div>
  1149.  
  1150.  
  1151. <div class="mgraph"> <img src="https://i.postimg.cc/dV8kKrLc/songhayoung2.png" draggable="false"> </div>
  1152.  
  1153. <div class="mgraph2"> <img src="https://i.postimg.cc/yY91tKbD/songhayoung.png" draggable="false"> </div>
  1154.  
  1155.  
  1156. </div>
  1157.  
  1158. <!-- END MUSE 06 POPUP -->
  1159.  
  1160. <!-- START MUSE 07 POPUP -->
  1161.  
  1162. <div id="muse07" class="popup_block"> <span class="close" onclick="this.parentElement.style.display='none'"> <i data-feather="x" width="15px" height="15px"></i> </span>
  1163.  
  1164. <div class="ntitle"> FIRST LAST 7. </div>
  1165.  
  1166.  
  1167. <div class="mstats">
  1168.  
  1169. <li> <b>name:</b> first last. </li>
  1170. <li> <b>age:</b> age. </li>
  1171. <li> <b>pronouns:</b> pronouns. </li>
  1172. <li> <b>gender:</b> gender. </li>
  1173. <li> <b>zodiac:</b> sign. </li>
  1174.  
  1175. </div>
  1176.  
  1177.  
  1178. <div class="mlinks">
  1179.  
  1180. <li> <a href="/"> #links.</a> </li>
  1181. <li> <a href="/"> #links.</a> </li>
  1182. <li> <a href="/"> #links.</a> </li>
  1183. <li> <a href="/"> #links.</a> </li>
  1184.  
  1185. </div>
  1186.  
  1187.  
  1188. <div class="mdesc"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. </div>
  1189.  
  1190.  
  1191. <div class="mgraph"> <img src="https://i.postimg.cc/dV8kKrLc/songhayoung2.png" draggable="false"> </div>
  1192.  
  1193. <div class="mgraph2"> <img src="https://i.postimg.cc/yY91tKbD/songhayoung.png" draggable="false"> </div>
  1194.  
  1195.  
  1196. </div>
  1197.  
  1198. <!-- END MUSE 07 POPUP -->
  1199.  
  1200. <!-- START MUSE 08 POPUP -->
  1201.  
  1202. <div id="muse08" class="popup_block"> <span class="close" onclick="this.parentElement.style.display='none'"> <i data-feather="x" width="15px" height="15px"></i> </span>
  1203.  
  1204. <div class="ntitle"> FIRST LAST 8. </div>
  1205.  
  1206.  
  1207. <div class="mstats">
  1208.  
  1209. <li> <b>name:</b> first last. </li>
  1210. <li> <b>age:</b> age. </li>
  1211. <li> <b>pronouns:</b> pronouns. </li>
  1212. <li> <b>gender:</b> gender. </li>
  1213. <li> <b>zodiac:</b> sign. </li>
  1214.  
  1215. </div>
  1216.  
  1217.  
  1218. <div class="mlinks">
  1219.  
  1220. <li> <a href="/"> #links.</a> </li>
  1221. <li> <a href="/"> #links.</a> </li>
  1222. <li> <a href="/"> #links.</a> </li>
  1223. <li> <a href="/"> #links.</a> </li>
  1224.  
  1225. </div>
  1226.  
  1227.  
  1228. <div class="mdesc"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. </div>
  1229.  
  1230.  
  1231. <div class="mgraph"> <img src="https://i.postimg.cc/dV8kKrLc/songhayoung2.png" draggable="false"> </div>
  1232.  
  1233. <div class="mgraph2"> <img src="https://i.postimg.cc/yY91tKbD/songhayoung.png" draggable="false"> </div>
  1234.  
  1235.  
  1236. </div>
  1237.  
  1238. <!-- END MUSE 08 POPUP -->
  1239.  
  1240. <!-- START MUSE 09 POPUP -->
  1241.  
  1242. <div id="muse09" class="popup_block"> <span class="close" onclick="this.parentElement.style.display='none'"> <i data-feather="x" width="15px" height="15px"></i> </span>
  1243.  
  1244. <div class="ntitle"> FIRST LAST 9. </div>
  1245.  
  1246.  
  1247. <div class="mstats">
  1248.  
  1249. <li> <b>name:</b> first last. </li>
  1250. <li> <b>age:</b> age. </li>
  1251. <li> <b>pronouns:</b> pronouns. </li>
  1252. <li> <b>gender:</b> gender. </li>
  1253. <li> <b>zodiac:</b> sign. </li>
  1254.  
  1255. </div>
  1256.  
  1257.  
  1258. <div class="mlinks">
  1259.  
  1260. <li> <a href="/"> #links.</a> </li>
  1261. <li> <a href="/"> #links.</a> </li>
  1262. <li> <a href="/"> #links.</a> </li>
  1263. <li> <a href="/"> #links.</a> </li>
  1264.  
  1265. </div>
  1266.  
  1267.  
  1268. <div class="mdesc"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. </div>
  1269.  
  1270.  
  1271. <div class="mgraph"> <img src="https://i.postimg.cc/dV8kKrLc/songhayoung2.png" draggable="false"> </div>
  1272.  
  1273. <div class="mgraph2"> <img src="https://i.postimg.cc/yY91tKbD/songhayoung.png" draggable="false"> </div>
  1274.  
  1275.  
  1276. </div>
  1277.  
  1278. <!-- END MUSE 09 POPUP -->
  1279.  
  1280. <!-- START MUSE 10 POPUP -->
  1281.  
  1282. <div id="muse10" class="popup_block"> <span class="close" onclick="this.parentElement.style.display='none'"> <i data-feather="x" width="15px" height="15px"></i> </span>
  1283.  
  1284. <div class="ntitle"> FIRST LAST 10. </div>
  1285.  
  1286.  
  1287. <div class="mstats">
  1288.  
  1289. <li> <b>name:</b> first last. </li>
  1290. <li> <b>age:</b> age. </li>
  1291. <li> <b>pronouns:</b> pronouns. </li>
  1292. <li> <b>gender:</b> gender. </li>
  1293. <li> <b>zodiac:</b> sign. </li>
  1294.  
  1295. </div>
  1296.  
  1297.  
  1298. <div class="mlinks">
  1299.  
  1300. <li> <a href="/"> #links.</a> </li>
  1301. <li> <a href="/"> #links.</a> </li>
  1302. <li> <a href="/"> #links.</a> </li>
  1303. <li> <a href="/"> #links.</a> </li>
  1304.  
  1305. </div>
  1306.  
  1307.  
  1308. <div class="mdesc"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. </div>
  1309.  
  1310.  
  1311. <div class="mgraph"> <img src="https://i.postimg.cc/dV8kKrLc/songhayoung2.png" draggable="false"> </div>
  1312.  
  1313. <div class="mgraph2"> <img src="https://i.postimg.cc/yY91tKbD/songhayoung.png" draggable="false"> </div>
  1314.  
  1315.  
  1316. </div>
  1317.  
  1318. <!-- END MUSE 10 POPUP -->
  1319.  
  1320. <!-- START MUSE 11 POPUP -->
  1321.  
  1322. <div id="muse11" class="popup_block"> <span class="close" onclick="this.parentElement.style.display='none'"> <i data-feather="x" width="15px" height="15px"></i> </span>
  1323.  
  1324. <div class="ntitle"> FIRST LAST 11. </div>
  1325.  
  1326.  
  1327. <div class="mstats">
  1328.  
  1329. <li> <b>name:</b> first last. </li>
  1330. <li> <b>age:</b> age. </li>
  1331. <li> <b>pronouns:</b> pronouns. </li>
  1332. <li> <b>gender:</b> gender. </li>
  1333. <li> <b>zodiac:</b> sign. </li>
  1334.  
  1335. </div>
  1336.  
  1337.  
  1338. <div class="mlinks">
  1339.  
  1340. <li> <a href="/"> #links.</a> </li>
  1341. <li> <a href="/"> #links.</a> </li>
  1342. <li> <a href="/"> #links.</a> </li>
  1343. <li> <a href="/"> #links.</a> </li>
  1344.  
  1345. </div>
  1346.  
  1347.  
  1348. <div class="mdesc"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. </div>
  1349.  
  1350.  
  1351. <div class="mgraph"> <img src="https://i.postimg.cc/dV8kKrLc/songhayoung2.png" draggable="false"> </div>
  1352.  
  1353. <div class="mgraph2"> <img src="https://i.postimg.cc/yY91tKbD/songhayoung.png" draggable="false"> </div>
  1354.  
  1355.  
  1356. </div>
  1357.  
  1358. <!-- END MUSE 11 POPUP -->
  1359.  
  1360. <!-- START MUSE 12 POPUP -->
  1361.  
  1362. <div id="muse12" class="popup_block"> <span class="close" onclick="this.parentElement.style.display='none'"> <i data-feather="x" width="15px" height="15px"></i> </span>
  1363.  
  1364. <div class="ntitle"> FIRST LAST 12. </div>
  1365.  
  1366.  
  1367. <div class="mstats">
  1368.  
  1369. <li> <b>name:</b> first last. </li>
  1370. <li> <b>age:</b> age. </li>
  1371. <li> <b>pronouns:</b> pronouns. </li>
  1372. <li> <b>gender:</b> gender. </li>
  1373. <li> <b>zodiac:</b> sign. </li>
  1374.  
  1375. </div>
  1376.  
  1377.  
  1378. <div class="mlinks">
  1379.  
  1380. <li> <a href="/"> #links.</a> </li>
  1381. <li> <a href="/"> #links.</a> </li>
  1382. <li> <a href="/"> #links.</a> </li>
  1383. <li> <a href="/"> #links.</a> </li>
  1384.  
  1385. </div>
  1386.  
  1387.  
  1388. <div class="mdesc"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. </div>
  1389.  
  1390.  
  1391. <div class="mgraph"> <img src="https://i.postimg.cc/dV8kKrLc/songhayoung2.png" draggable="false"> </div>
  1392.  
  1393. <div class="mgraph2"> <img src="https://i.postimg.cc/yY91tKbD/songhayoung.png" draggable="false"> </div>
  1394.  
  1395.  
  1396. </div>
  1397.  
  1398. <!-- END MUSE 12 POPUP -->
  1399.  
  1400. </div>
  1401.  
  1402.  
  1403. <!--- POSTS --->
  1404.  
  1405. <div id="posts">
  1406. {block:Posts}
  1407. <div class="entry">
  1408.  
  1409.  
  1410. <!-- TOP INFO --->
  1411.  
  1412. <div class="topinfo"> <p style="text-align:left;"> <a href="{Permalink}" title="view the notes."> {NoteCountWithLabel} </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>
  1413.  
  1414. <!-- TEXT --->
  1415.  
  1416. {block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}{Body}{/block:Text}
  1417.  
  1418. <!-- PHOTOS --->
  1419.  
  1420. {block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{/block:Photo}
  1421.  
  1422. {block:Photoset} {block:IndexPage}{Photoset-500}{/block:IndexPage} {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage} {/block:Photoset}
  1423.  
  1424. <!-- QUOTE --->
  1425.  
  1426. {block:Quote} <div class="quote"> {Quote} </div> <div class="source"> — {Source} </div> {/block:Quote}
  1427.  
  1428. <!-- LINKS --->
  1429.  
  1430. {block:Link} <div class="linktitle"> <a href="{URL}"><h1>{Name}</h1></a></div>
  1431. {block:Description} <p>{Description}</p> {/block:Description}{/block:Link}
  1432.  
  1433. <!-- CHATS --->
  1434.  
  1435. {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}
  1436. {Line}</li>{/block:Lines}</ul><div style="font-size:8px; color:{color:text}; margin-top:-10px; margin-left:230px; letter-spacing:1px; text-transform:uppercase"><span class="fas fa-check"></span> delivered.</div>{/block:Chat}
  1437.  
  1438. <!-- AUDIO --->
  1439.  
  1440. {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"> <span class="fas fa-music" style="font-size:7px"></span> {block:TrackName}{TrackName}{/block:TrackName}</div><div class="artist"> {block:Artist}{Artist}{/block:Artist} </div></div> {/block:AudioPlayer}{/block:Audio}
  1441.  
  1442. <!-- VIDEO --->
  1443.  
  1444. {block:Video}<div class="video">{Video-500}</div>{/block:Video}
  1445.  
  1446. <!-- ASKS --->
  1447.  
  1448. {block:Answer}<div id="question">{Question} <div id="asker">written by {Asker}</div></div>{Answer} {/block:Answer}
  1449.  
  1450.  
  1451. {block:Caption}{Caption}{/block:Caption}
  1452.  
  1453. <!-- READ MORE --->
  1454.  
  1455. {block:More}<div class="more"><a href="{Permalink}" class="more-btn">read more</a></div>{/block:More}
  1456.  
  1457. <!-- BOTTOM INFO --->
  1458.  
  1459. <div class="bottominfo"> posted <a href="{Permalink}" title="{DayOfWeek}, {Month} {DayOfMonth}{DayOfMonthSuffix} {Year}.">{TimeAgo}</a> </div>
  1460.  
  1461. <!-- TAGS --->
  1462.  
  1463. {block:HasTags} <div class="tags"> <span> {PostAuthorName} said: </span> {block:Tags}<a href="{TagURL}">{Tag},</a> {/block:Tags}<br></div>{/block:HasTags}
  1464.  
  1465. <!-- POST NOTES --->
  1466.  
  1467. <div class="note"> {block:PostNotes}{PostNotes}{/block:PostNotes} </div>
  1468.  
  1469.  
  1470. </div>
  1471. {/block:Posts}
  1472.  
  1473.  
  1474.  
  1475.  
  1476. <!-- PAGINATION --->
  1477.  
  1478. {block:Pagination} <div class="pagination"> {block:previouspage} <a href="{previouspage}"> <i data-feather="chevron-left" style="width:18px; height:18px; padding-bottom:20px;"></i> </a> {/block:previouspage} {block:nextpage} <a href="{nextpage}"> <i data-feather="chevron-right" style="width:18px; height:18px; padding-bottom:20px;"></i> </a> {/block:nextpage} </div> {/block:pagination}
  1479.  
  1480.  
  1481.  
  1482.  
  1483. </div>
  1484. </div>
  1485.  
  1486.  
  1487.  
  1488. <div id="cred">
  1489. <a href="http://twentys.tumblr.com" title="made by julie."><span class="th th-holly-o"></span></a>
  1490. </div>
  1491.  
  1492.  
  1493.  
  1494.  
  1495. <script> feather.replace() </script>
  1496.  
  1497.  
  1498.  
  1499.  
  1500. </body>
  1501. </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!