API tools faq
paste
lovesjoon

theme 04: hobi 2.0 (with update tab)

lovesjoon
Nov 25th, 2020
315
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 44.21 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 04: HOBI by TWENTYS.
  14.  
  15.  
  16. ・｡* version 2.0: updated nov 2020.
  17.  
  18.  
  19. ♡ READ ME ♡
  20.  
  21.  
  22. ・｡* base code by @pixiemail.
  23.  
  24. ・｡* please don't recreate and/or steal parts of this code
  25.  
  26. ・｡* don't remove the credit
  27.  
  28. ・｡* feel free to reach out if there are any bugs or questions ♡
  29.  
  30.  
  31. hope you enjoy this code !! ♡( ◡‿◡ ) --->
  32.  
  33.  
  34.  
  35.  
  36.  
  37.  
  38.  
  39.  
  40. <title>{Title}</title>
  41. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  42. <link rel="shortcut icon" href="{Favicon}">
  43. {block:Description}
  44. <meta name="description" content="{MetaDescription}">
  45. {/block:Description}
  46.  
  47.  
  48.  
  49.  
  50. <meta name="image:background" content="1"/>
  51. <meta name="image:sidebar" content="1"/>
  52. <meta name="image:sticker" content="1"/>
  53. <meta name="image:navimg" content="1"/>
  54. <meta name="image:navicon" content="1"/>
  55.  
  56. <meta name="color:background" content="#eee"/>
  57. <meta name="color:container" content="#fff"/>
  58. <meta name="color:posts" content="#fff"/>
  59. <meta name="color:post border" content="#f8f8f8"/>
  60. <meta name="color:borders" content="#e2e2e2"/>
  61. <meta name="color:shadow" content="#8c8c8c"/>
  62. <meta name="color:accent" content="#b6cbe9"/>
  63. <meta name="color:accent2" content="#6d6d6d"/>
  64. <meta name="color:desc" content="#868686"/>
  65. <meta name="color:title" content="#000"/>
  66. <meta name="color:text" content="#282828"/>
  67. <meta name="color:links" content="#afbbd3"/>
  68. <meta name="color:hover" content="#afbbd3"/>
  69. <meta name="color:bold" content="#363636"/>
  70. <meta name="color:italic" content="#949494"/>
  71.  
  72. <meta name="select:body font" content="abeezee" title="abeezee"/>
  73. <meta name="select:body font" content="open sans" title="open sans"/>
  74. <meta name="select:body font" content="montserrat" title="montserrat"/>
  75. <meta name="select:body font" content="poppins" title="poppins"/>
  76. <meta name="select:body font" content="ibm plex sans" title="ibm plex sans"/>
  77. <meta name="select:body font" content="inconsolata" title="inconsolata"/>
  78. <meta name="select:body font" content="raleway" title="raleway"/>
  79. <meta name="select:body font" content="josefin sans" title="josefin sans"/>
  80. <meta name="select:body font" content="libre baskerville" title="libre baskerville"/>
  81.  
  82. <meta name="select:font size" content="9" title="9px"/>
  83. <meta name="select:font size" content="10" title="10px"/>
  84. <meta name="select:font size" content="11" title="11px"/>
  85. <meta name="select:font size" content="12" title="12px"/>
  86.  
  87. <meta name="if:400px posts" content="1"/>
  88. <meta name="if:muse tab" content="1" />
  89. <meta name="if:border radius" content="1"/>
  90. <meta name="if:grayscale" content="1"/>
  91.  
  92. <meta name="text:barcode" content="heavenly"/>
  93. <meta name="text:title" content="cherub."/>
  94. <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."/>
  95.  
  96.  
  97.  
  98.  
  99. <!--- PT. 1: SCRIPTS: JQUERY + TOOLTIP + TABS + FONTS ---->
  100.  
  101.  
  102.  
  103.  
  104. <!--- JQUERY SCRIPTS --->
  105.  
  106. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  107. <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
  108.  
  109.  
  110.  
  111. <!--- TOOLTIP SCRIPT ---->
  112.  
  113. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  114. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  115. <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>
  116.  
  117.  
  118.  
  119. <!--- GOOGLE + ICON FONTS ---->
  120.  
  121. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  122. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/v4-shims.css">
  123.  
  124. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  125.  
  126. <script src="https://unpkg.com/feather-icons"></script>
  127.  
  128. <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">
  129.  
  130. <script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
  131.  
  132.  
  133. <!-- POST STYLING FONTS -->
  134.  
  135. <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Lato&display=swap" rel="stylesheet">
  136.  
  137. <link href="https://fonts.googleapis.com/css?family=Libre+Barcode+128+Text" rel="stylesheet">
  138.  
  139.  
  140. <!-- BODY FONTS -->
  141.  
  142. <link href="https://fonts.googleapis.com/css2?family=ABeeZee&display=swap" rel="stylesheet">
  143.  
  144. <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
  145.  
  146. <link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
  147.  
  148. <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
  149.  
  150. <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
  151.  
  152. <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
  153.  
  154. <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
  155.  
  156. <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet">
  157.  
  158. <link href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap" rel="stylesheet">
  159.  
  160.  
  161.  
  162.  
  163. <!--- VIDEO SCRIPT BY SHYTHEMES ---->
  164.  
  165. <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>
  166.  
  167.  
  168.  
  169.  
  170. <!--- TAB SCRIPT by www.w3schools.com ---->
  171.  
  172. <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>
  173.  
  174.  
  175.  
  176. <!--- FADE OUT SCRIPT by beginnersbook.com ---->
  177.  
  178. <script>
  179. $(document).ready(function(){
  180. $("button").click(function(){
  181. $(".tabcontent").fadeOut("slow");
  182. });
  183. });
  184. </script>
  185.  
  186.  
  187.  
  188. <!--- FILTER SCRIPT BY CYANTISTS ---->
  189.  
  190. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  191. <script src="https://static.tumblr.com/xd6ujov/9Rpouml9f/imagesloaded.pkgd.min.js"></script>
  192. <script src="https://static.tumblr.com/f6blkfc/3khouzw5b/masonry.pkgd.min.js"></script>
  193.  
  194. <script>$(document).ready(function(){ var $grid = $(".grid"); $grid.imagesLoaded(function() { $grid.masonry({ itemSelector: ".item", columnWidth: 100 }); }); $(".button").click(function(){ $(this).addClass("selected"); $(".button").not($(this)).removeClass("selected"); var ssf = $(this).attr("filter"); $(".item." + ssf).show(); $(".item").not("." + ssf).hide(); $grid.masonry(); });
  195. });</script>
  196.  
  197.  
  198.  
  199.  
  200. <style type="text/css">
  201.  
  202.  
  203.  
  204.  
  205. /*--- FONTS HOSTED BY TWENTYS---*/
  206.  
  207. @font-face{ font-family:"nevrada"; src: url('https://dl.dropboxusercontent.com/s/s79zrl8b9d6p6w6/AL_Nevrada_Personal_Use_Only.ttf’)'); }
  208.  
  209.  
  210.  
  211.  
  212. /*---PT. 2: TOOLTIP + SCROLLBAR + SELECTION---*/
  213.  
  214.  
  215.  
  216.  
  217. /* TOOLTIP */
  218.  
  219. #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; }
  220.  
  221.  
  222. /* SCROLLBAR */
  223.  
  224. ::-webkit-scrollbar-thumb { display:none; }
  225.  
  226. ::-webkit-scrollbar { display:none; }
  227.  
  228.  
  229. /* SELECTION */
  230.  
  231. ::-moz-selection { background:{color:accent}; color:{color:posts}; }
  232.  
  233. ::selection { background:{color:accent}; color:{color:posts};}
  234.  
  235.  
  236.  
  237.  
  238. /*---PT. 3: BODY + TEXT STYLING---*/
  239.  
  240.  
  241.  
  242.  
  243. /* BODY */
  244.  
  245. 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;
  246.  
  247. font-family:{select:body font};
  248. font-size:{select:font size}px;
  249. line-height: -moz-calc({select:font size}px + 8px);
  250. line-height: -webkit-calc({select:font size}px + 8px);
  251. line-height: -o-calc({select:font size}px + 8px);
  252. line-height: calc({select:font size}px + 8px); }
  253.  
  254.  
  255. /* FIX */
  256.  
  257. iframe, img, embed, object { max-width:100%; margin:auto; border:none; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  258.  
  259. iframe:hover, img:hover, embed:hover, object:hover {
  260.  
  261. {block:ifGrayscale} filter: grayscale(0%);
  262. -webkit-transition: all .8s;
  263. -moz-transition: all .8s;
  264. -o-transition: all .8s;
  265. -ms-transition: all .8s;
  266. transition: all .8s; {/block:ifGrayscale} }
  267.  
  268. img { max-width:100%; height:auto; margin:auto; border:none; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  269.  
  270. img:hover { {block:ifGrayscale} filter: grayscale(0%);
  271.  
  272. -webkit-transition: all .8s;
  273. -moz-transition: all .8s;
  274. -o-transition: all .8s;
  275. -ms-transition: all .8s;
  276. transition: all .8s; {/block:ifGrayscale} }
  277.  
  278.  
  279. /* TEXT STYLING */
  280.  
  281. select, textarea, input, a { outline:none; }
  282.  
  283. p { margin-top:5px; margin-bottom:5px; }
  284.  
  285. small, sub, sup { font-size:100%; }
  286.  
  287. big { font-size:110%; }
  288.  
  289. h1 { color:{color:title}; margin-top:30px; font-family: 'Abril Fatface', cursive; font-weight:normal; line-height:28px; text-align:center; word-spacing:2px;
  290.  
  291. font-size: -moz-calc({select:font size}px + 20px);
  292. font-size: -webkit-calc({select:font size}px + 20px);
  293. font-size: -o-calc({select:font size}px + 20px);
  294. font-size: calc({select:font size}px + 20px); }
  295.  
  296. h2 { color:{color:accent}; font-family:'lato', sans-serif; line-height:18px; text-align:center; text-transform:uppercase; letter-spacing:2px;
  297.  
  298. font-size: -moz-calc({select:font size}px + 5px);
  299. font-size: -webkit-calc({select:font size}px + 5px);
  300. font-size: -o-calc({select:font size}px + 5px);
  301. font-size: calc({select:font size}px + 5px); }
  302.  
  303. a { color:{color:links}; font-family:'lato', sans-serif; font-weight:bold; text-transform:uppercase; text-decoration:none; letter-spacing:1px;
  304.  
  305. font-size: -moz-calc({select:font size}px - 1px);
  306. font-size: -webkit-calc({select:font size}px - 1px);
  307. font-size: -o-calc({select:font size}px - 1px);
  308. font-size: calc({select:font size}px - 1px); }
  309.  
  310. a:hover { color:{color:hover};
  311.  
  312. -webkit-transition: all .3s;
  313. -moz-transition: all .3s;
  314. -o-transition: all .3s;
  315. -ms-transition: all .3s;
  316. transition: all .3s; }
  317.  
  318. ul, ol, li { margin:5px 10px; padding:0px; line-height:20px; }
  319.  
  320. b, strong { color:{color:bold}; }
  321.  
  322. i, em { color:{color:italic}; }
  323.  
  324. blockquote { margin:10px; padding-left:20px; border-left:1px solid {color:borders}; }
  325.  
  326.  
  327. /* TUMBLR CONTROLS */
  328.  
  329. 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; }
  330.  
  331. iframe.tmblr-iframe:hover { opacity:1!important; }
  332.  
  333.  
  334.  
  335.  
  336. /*--- PT. 4: SIDEBAR + LINKS ---*/
  337.  
  338.  
  339.  
  340.  
  341. /*CONTAINER*/
  342.  
  343. #containerbox { position:absolute; margin:auto; left:0px; right:0px; top:0px; bottom:0px; background-color:transparent; width:1000px; height:630px; overflow:hidden; border-radius:0px; }
  344.  
  345. #container { position:absolute; margin:auto; left:0px; right:0px; top:0px; bottom:0px; background-color:{color:container}; width:780px; {block:if400pxPosts} width:880px; {/block:if400pxPosts} height:480px; overflow:hidden; border-radius:15px;
  346.  
  347. -webkit-box-shadow: 5px 5px 27px -10px {color:shadow};
  348. -moz-box-shadow: 5px 5px 27px -10px {color:shadow};
  349. box-shadow: 5px 5px 27px -10px {color:shadow} }
  350.  
  351. .circle1 { position:absolute; left:220px; top:180px; width:20px; height:20px; border-radius:100%; background:{color:accent}; z-index:9999; }
  352.  
  353. .circle2 { position:absolute; left:40px; top:330px; width:45px; height:45px; border-radius:100%; background:{color:accent}; z-index:9999; }
  354.  
  355. .circle3 { position:absolute; top:20px; left:370px; width:10px; height:10px; border-radius:100%; background:{color:accent}; }
  356.  
  357. .circle4 { position:absolute; bottom:40px; left:335px; width:30px; height:30px; border-radius:100%; background:{color:accent}; }
  358.  
  359.  
  360. /*SIDEBAR*/
  361.  
  362. .box1 { position:absolute; left:60px; top:210px; width:230px; height:150px; background:transparent; z-index:99999; border-radius:15px;
  363.  
  364. -webkit-box-shadow: 5px 5px 27px -10px {color:shadow};
  365. -moz-box-shadow: 5px 5px 27px -10px {color:shadow};
  366. box-shadow: 5px 5px 27px -10px {color:shadow} }
  367.  
  368. .box1 img { width:230px; height:150px; border-radius:15px; }
  369.  
  370. .png { position:absolute; background:transparent; bottom:180px; left:270px; width:50px; height:50px; }
  371.  
  372. .png img { width:50px; height:50px; }
  373.  
  374. .desctitle { position:absolute; font-family: "nevrada"; color:{color:accent2}; letter-spacing:1px; font-size:40px; width:250px; height:auto; bottom:100px; left:100px; text-align:right; z-index:9999; }
  375.  
  376. .desctitle a { font-family: "nevrada"; color:{color:accent2}; letter-spacing:1px; font-size:40px; text-transform:lowercase; }
  377.  
  378. .desctxt { position:absolute; font-size:7px; padding:0px 10px 0px 10px; overflow:scroll; text-align:center; text-transform:uppercase; letter-spacing:2px; height:50px; color:{color:desc}; bottom:50px; width:270px; text-align:justify; left:80px; background-color:transparent; z-index:999; font-family:"lato"; }
  379.  
  380. .barcode { position:absolute; font-size:35px; font-family: 'Libre Barcode 128 Text', cursive; top:130px; left:248px; color:{color:desc}; width:130px; letter-spacing:1px; background:transparent; text-align:right;
  381.  
  382. -webkit-transform: rotate(90deg);
  383. -moz-transform: rotate(90deg);
  384. -ms-transform: rotate(90deg);
  385. -o-transform: rotate(90deg); }
  386.  
  387. .line1 { position:absolute; bottom:165px; left:320px; width:1px; height:80px; background:{color:desc}; }
  388.  
  389. .line2 { position:absolute; bottom:180px; left:260px; width:80px; height:1px; background:{color:desc}; }
  390.  
  391.  
  392.  
  393.  
  394. /*--- PT.5: POSTS + ENTRIES ---*/
  395.  
  396.  
  397.  
  398.  
  399. /* POSTS */
  400.  
  401. #posts { position:absolute; width:380px; {block:if400pxPosts} width:480px; {/block:if400pxPosts} height:460px; right:20px; bottom:0px; overflow-x:hidden; overflow-y:auto; z-index:1000; padding-top:20px; padding-left:20px; }
  402.  
  403.  
  404. /* ENTRY STYLING */
  405.  
  406. .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} }
  407.  
  408. .entry img { margin:0px; padding:0px; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  409.  
  410. .entry img:hover {
  411.  
  412. {block:ifGrayscale} filter: grayscale(0%);
  413. -webkit-transition: all .8s;
  414. -moz-transition: all .8s;
  415. -o-transition: all .8s;
  416. -ms-transition: all .8s;
  417. transition: all .8s; {/block:ifGrayscale} }
  418.  
  419.  
  420.  
  421.  
  422. /*--- PT.6: POST INFO + NOTES + PAGINATION + CREDIT---*/
  423.  
  424.  
  425.  
  426.  
  427. .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}; background:{color:post border}; line-height:40px; text-transform:uppercase; {block:ifBorderRadius} border-top-left-radius:10px; border-top-right-radius:10px; {/block:ifBorderRadius} }
  428.  
  429. .topinfo p { margin:0px; padding:0px 10px 0px 10px; }
  430.  
  431. .topinfo a { font-size:9px; }
  432.  
  433. .topinfo b { padding:0px 3px 0px 2px; font-size:10px; }
  434.  
  435. .bottominfo { width:340px; {block:if400pxPosts} width:440px; {/block:if400pxPosts} height:40px; margin-top:20px; margin-left:-20px; background:{color:post border}; 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; }
  436.  
  437. .bottominfo a { padding-left:5px; }
  438.  
  439. .bottominfo a { font-size:9px; line-height:40px; }
  440.  
  441.  
  442. /* TAGS */
  443.  
  444. .tags { width:300px; {block:if400pxPosts} width:400px; {/block:if400pxPosts} padding-top:20px; line-height:14px; text-align:justify; }
  445.  
  446. .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; }
  447.  
  448. .tags a { color:{color:text}; font-family:'lato', sans-serif; padding:0px; font-weight:normal;
  449.  
  450. font-size: -moz-calc({select:font size}px - 2px);
  451. font-size: -webkit-calc({select:font size}px - 2px);
  452. font-size: -o-calc({select:font size}px - 2px);
  453. font-size: calc({select:font size}px - 2px); }
  454.  
  455. .tags a:hover { color:{color:hover}; font-weight:bold; font-style:italic;
  456.  
  457. -webkit-transition: all .3s;
  458. -moz-transition: all .3s;
  459. -o-transition: all .3s;
  460. -ms-transition: all .3s;
  461. transition: all .3s; }
  462.  
  463.  
  464. /* POST NOTES */
  465.  
  466. .note { width:340px; {block:if400pxPosts} width:440px; {/block:if400pxPosts} margin-top:20px; margin-left:-31px; font-size:10px; text-transform:uppercase; }
  467.  
  468. .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; }
  469.  
  470. .note img.avatar { display:none; }
  471.  
  472.  
  473. /* PAGINATION */
  474.  
  475. .pagination { width:100%; text-align:center; }
  476.  
  477. .pagination a { padding:8px; word-spacing:2px; }
  478.  
  479. .pagination a:hover { color:{color:links}; }
  480.  
  481. .pagination i { width:10px; height:10px; color:{color:links}; }
  482.  
  483.  
  484. /* READ MORE */
  485.  
  486. .more { width:100%; margin-top:20px; margin-bottom:5px; text-align:center; }
  487.  
  488. .more a { background:{color:bold}; color:{color:posts}; padding:4px 11px 4px 11px; font-size:9px; font-weight:bold; text-transform:uppercase; }
  489.  
  490. .more a:hover { background:{color:background}; color:{color:bold}; padding:4px 11px 4px 11px; font-size:9px; font-weight:bold; text-transform:uppercase; }
  491.  
  492.  
  493. /* CREDIT */
  494.  
  495. #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; }
  496.  
  497. #cred span { padding:10px; font-size:18px; background:-webkit-linear-gradient({color:accent}, {color:accent2});
  498.  
  499. -webkit-background-clip:text;
  500. -webkit-text-fill-color:transparent; }
  501.  
  502.  
  503. /* UPDATES */
  504.  
  505. #updates { position:fixed; width:60px; height:80px; top:15px; left:15px; background-color:{color:posts}; border-top-right-radius:10px; border-bottom-left-radius:10px; border:1px solid {color:borders}; z-index:9999; padding:10px; font-size:9px; font-family:"lato"; color:{color:text}; overflow:scroll; text-align:center; }
  506.  
  507. #updates h1 { font-family:"nevrada"; font-size:11px; margin-top:5px; line-height:15px; background:-webkit-linear-gradient({color:accent}, {color:accent2});
  508.  
  509. -webkit-background-clip:text;
  510. -webkit-text-fill-color:transparent;}
  511.  
  512. #updates blockquote { margin:5px 0px 5px 0px; padding:0px 5px 0px 10px; border-left:1px solid {color:borders}; }
  513.  
  514. #updates b { color:{color:accent}; text-transform:uppercase; font-size:9px; }
  515.  
  516.  
  517.  
  518.  
  519. /*---PT. 7: POST TYPES---*/
  520.  
  521.  
  522.  
  523.  
  524. /* TYPE: CHATS */
  525.  
  526. .answer span,.convo li { position:relative; max-width:75%; margin:0 0 15px; padding:.9em 10px; border-radius:1em; clear:both; }
  527.  
  528. .answer .them,.user_1,.user_3,.user_5,.user_7,.user_9,.user_11{ left:3px; background:#e6e6e6; color:#555555; float:left; }
  529.  
  530. .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; }
  531.  
  532. .answer .me,.user_2,.user_4,.user_6,.user_8,.user_10,.user_12{ right:3px; background-color:#147efb; color:white; float:right; }
  533.  
  534. .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; }
  535.  
  536. .me p,.answer,.asked span{ margin:0; padding:0; }
  537.  
  538. .answer{ overflow:hidden; }
  539.  
  540. .asked p { margin:0 0px 10px 0px; padding:0; color:white; font-size:{select:font size}px; text-align:left; line-height:0px; }
  541.  
  542. .footerright .viasrc { float:left; }
  543.  
  544. .asked a { margin:0; padding:0; }
  545.  
  546. .user_3{ background-color:#e6e6e6; color:#555555; }
  547.  
  548. .user_3::after{ border-color:#e6e6e6; }
  549.  
  550. .user_4{ background-color:#147efb; color:white; }
  551.  
  552. .user_4::after{ border-color:#147efb; }
  553.  
  554. .user_5{ background-color:#e6e6e6; color:#555555; }
  555.  
  556. .user_5::after{ border-color:#e6e6e6; }
  557.  
  558. .user_6{ background-color:#147efb; color:white; }
  559.  
  560. .user_6::after{ border-color:#147efb; }
  561.  
  562. .user_7{ background-color:#e6e6e6; color:#555555; }
  563.  
  564. .user_7::after{ border-color:#e6e6e6; }
  565.  
  566. .user_8{ background-color:#147efb; color:white; }
  567.  
  568. .user_8::after{ border-color:#147efb; }
  569.  
  570. .user_9{ background-color:#e6e6e6; color:#555555; }
  571.  
  572. .user_9::after{ border-color:#e6e6e6; }
  573.  
  574. .convo { margin:0; padding:0; overflow:hidden; list-style-type:none; }
  575.  
  576.  
  577. /* TYPE: QUOTES */
  578.  
  579. .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;
  580.  
  581. font-size: -moz-calc({select:font size}px + 20px);
  582. font-size: -webkit-calc({select:font size}px + 20px);
  583. font-size: -o-calc({select:font size}px + 20px);
  584. font-size: calc({select:font size}px + 20px); }
  585.  
  586. .source { text-align:right; margin-top:15px;
  587.  
  588. font-size: -moz-calc({select:font size}px - 1px);
  589. font-size: -webkit-calc({select:font size}px - 1px);
  590. font-size: -o-calc({select:font size}px - 1px);
  591. font-size: calc({select:font size}px - 1px);
  592.  
  593. line-height: -moz-calc({select:font size}px + 8px);
  594. line-height: -webkit-calc({select:font size}px + 8px);
  595. line-height: -o-calc({select:font size}px + 8px);
  596. line-height: calc({select:font size}px + 8px); }
  597.  
  598.  
  599. /* TYPE: ASKS */
  600.  
  601. #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; }
  602.  
  603. #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; }
  604.  
  605. #asker a { color:{color:posts}; font-weight:bold; }
  606.  
  607.  
  608. /* TYPE: LINKS */
  609.  
  610. .linktitle { color:{color:title}; font-family: 'Abril Fatface', cursive; font-weight:normal; text-align:center; line-height:28px; word-spacing:2px;
  611.  
  612. font-size: -moz-calc({select:font size}px + 20px);
  613. font-size: -webkit-calc({select:font size}px + 20px);
  614. font-size: -o-calc({select:font size}px + 20px);
  615. font-size: calc({select:font size}px + 20px); }
  616.  
  617.  
  618. /* TYPE: AUDIO */
  619.  
  620. .playbutton { position:relative; width:33px; height:38px; margin-top:45px; margin-left:35px; overflow:hidden; opacity:.6; z-index:9; }
  621.  
  622. .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%); }
  623.  
  624. .trackinfo { position:relative; width:185px; height:66px; top:2px; background:{color:posts}; color:{color:text}; margin-top:-95px; margin-bottom:20px; margin-left:100px; padding:10px 5px 10px 5px; }
  625.  
  626. .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; }
  627.  
  628. .artist { font-size:7px; text-transform:uppercase; text-align:center; letter-spacing:4px; }
  629.  
  630.  
  631. /* TYPE: VIDEOS */
  632.  
  633. .tumblr_video_container { width:auto!important; height:auto!important; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  634.  
  635. .tumblr_video_container:hover {
  636.  
  637. {block:ifGrayscale} filter: grayscale(0%);
  638. -webkit-transition: all .8s;
  639. -moz-transition: all .8s;
  640. -o-transition: all .8s;
  641. -ms-transition: all .8s;
  642. transition: all .8s; {/block:ifGrayscale} }
  643.  
  644.  
  645.  
  646.  
  647.  
  648. /*--- PT.8: TABS ---*/
  649.  
  650.  
  651.  
  652.  
  653. /*TAB LINKS*/
  654.  
  655. .tab { position:absolute; overflow: hidden; height:auto; width:500px; top:20px; left:30px; z-index:99999; }
  656.  
  657. .tab li { display:inline-block; width:auto; height:auto; padding:8px; background:transparent; }
  658.  
  659. .tab a { text-transform:uppercase; letter-spacing:1px; font-weight:bold; font-family: "lato"; color:{color:accent2}; letter-spacing:1px; font-style:italic; font-size:8px; }
  660.  
  661. .tab a:hover { letter-spacing:2px; }
  662.  
  663. .tab b { text-transform:uppercase; letter-spacing:1px; font-weight:bold; font-family: "nevrada"; color:{color:accent}; letter-spacing:1px; font-style:italic; font-size:15px; }
  664.  
  665. /*TAB + CLOSE CONTENT*/
  666.  
  667. .tabcontent { animation: fadeEffect 1s; position:absolute; width:400px; {block:if400pxPosts} width:500px; {/block:if400pxPosts} height:515px; background-color:{color:container}; top:0px; right:0px; z-index:9999; }
  668.  
  669. @keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} }
  670.  
  671. .tabcontent button { position:absolute; top:0px; right:0px; padding:15px; background:transparent; color:{color:links}; border:none; z-index:99999; }
  672.  
  673. .tabcontent button:hover { cursor:pointer; }
  674.  
  675. .tabcontent button:focus { outline:0; }
  676.  
  677. .tabtitle { position:absolute; font-family: "nevrada"; color:{color:accent2}; letter-spacing:1px; font-size:40px; width:250px; height:auto; top:80px; left:40px; z-index:9999; }
  678.  
  679. /*NAVI TAB*/
  680.  
  681. .nav { position:absolute; top:100px; background-color:transparent; list-style-type:none; text-align:center; }
  682.  
  683. .nav li { display: inline-block; background-color:{color:container}; width:80px; height:20px; padding:8px; border:1px solid {color:borders}; border-radius:5px; margin-bottom:10px; }
  684.  
  685. .nav a { text-transform:uppercase; letter-spacing:1px; font-weight:bold; font-family: "lato"; color:{color:accent2}; line-height:20px; letter-spacing:1px; font-style:italic; font-size:8px; }
  686.  
  687. .nav a:hover { color:{color:accent}; letter-spacing:3px;
  688.  
  689. -webkit-transition: all 0.8s ease;
  690. -moz-transition: all 0.8s ease;
  691. -o-transition: all 0.8s ease;
  692. -ms-transition: all 0.8s ease;
  693. transition: all 0.8s ease; }
  694.  
  695. .tabtitle2 { position:absolute; font-family: "nevrada"; color:{color:accent2}; letter-spacing:1px; font-size:40px; width:250px; height:auto; top:235px; right:40px; text-align:right; z-index:9999; }
  696.  
  697. .nbox1 { position:absolute; background:{color:container}; width:155px; height:180px; bottom:70px; left:30px; border:1px solid {color:borders}; border-radius:5px; text-align:center; }
  698.  
  699. .nbox1 img { background:transparent; width:155px; height:130px; margin-top:20px; }
  700.  
  701. .nbox1 span { position:absolute; padding:10px; background:{color:container}; border-radius:100%; width:12px; height:12px; font-size:13px; margin:auto; left:0px; right:0px; top:130px; bottom:0px; color:{color:accent}; z-index:999999;
  702.  
  703. -webkit-box-shadow: 5px 5px 27px -10px {color:shadow};
  704. -moz-box-shadow: 5px 5px 27px -10px {color:shadow};
  705. box-shadow: 5px 5px 27px -10px {color:shadow} }
  706.  
  707. .nalignleft { float:left; margin-left:20px; margin-top:-1px; }
  708. .nalignright { float:right; margin-right:20px; margin-top:-1px; }
  709. .nalignleft i { color:{color:accent}; }
  710. .nalignright i { color:{color:accent}; }
  711.  
  712. .ntitle { position:absolute; background:{color:container}; width:155px; height:20px; border-top-left-radius:5px; border-top-right-radius:5px; line-height:20px; color:{color:accent2}; font-size:9px; font-family: 'Source Sans Pro', sans-serif; text-transform:uppercase; font-weight:bold; letter-spacing:1px; }
  713.  
  714. .nbox2 { position:absolute; background:{color:container}; width:155px; height:180px; bottom:70px; right:30px; border:1px solid {color:borders}; border-radius:5px; {block:if400pxPosts} width:255px; {/block:if400pxPosts} }
  715.  
  716. .ntxt2 { overflow:scroll; width:110px; height:110px; margin-top:5px; padding:20px; font-family: 'Merriweather', serif; font-size:9.5px; line-height:22px; overflow:scroll; text-transform:lowercase; text-align:center; {block:if400pxPosts} width:210px; {/block:if400pxPosts} }
  717.  
  718. .ntxt2 img { width:40px; height:40px; border-radius:100%; background:transparent;
  719.  
  720. -webkit-box-shadow: 5px 5px 27px -10px {color:shadow};
  721. -moz-box-shadow: 5px 5px 27px -10px {color:shadow};
  722. box-shadow: 5px 5px 27px -10px {color:shadow} }
  723.  
  724. /*MUSE TAB*/
  725.  
  726. #musecon { position:absolute; margin:auto; left:0px; right:0px; bottom:0px; top:50px; width:300px; {block:if400pxPosts} width:400px; {/block:if400pxPosts} height:300px; overflow:scroll; }
  727.  
  728. #buttons { position:absolute; top:105px; right:40px; width:auto; height:30px; background-color:{color:container}; margin:auto; text-align:right; padding-left:30px; z-index:9999999; }
  729.  
  730. .button { cursor:pointer; text-transform:uppercase;font-size:9px; letter-spacing:2px; overflow:hidden; color:{color:accent2}; width:auto; margin:5px; display:inline-block; font-weight:bold; }
  731.  
  732. .button.selected { color:{color:accent}; text-decoration:none; font-style:italic; font-size:9px; font-weight:bold; }
  733.  
  734. .grid { width:300px; {block:if400pxPosts} width:400px; {/block:if400pxPosts} }
  735.  
  736. .item { width:70px; height:70px; margin:15px; border-radius:10px; }
  737.  
  738. .item img { width:70px; height:70px; border-radius:10px; }
  739.  
  740.  
  741.  
  742.  
  743. /*--- PT.9: CUSTOM CSS ---*/
  744.  
  745.  
  746.  
  747.  
  748. {CustomCSS}
  749. </style></head><body>
  750.  
  751.  
  752. <div id="containerbox">
  753.  
  754. <!--- SIDEBAR + SVG + CIRCLES --->
  755.  
  756. <svg width="550" height="400" viewBox="0 0 600 600" style="z-index:9999; position:absolute; top:90px; left:-90px;"xmlns="http://www.w3.org/2000/svg"> <g transform="translate(300,300)"><path d="M59.2,-100C92.4,-70.7,145.8,-80.8,170.8,-66.2C195.8,-51.6,192.4,-12.2,173.8,15.6C155.3,43.4,121.5,59.7,101.6,94.8C81.7,130,75.8,184,51.3,205C26.8,226.1,-16.3,214.3,-46.5,190.7C-76.7,167.1,-93.9,131.7,-107.1,101.2C-120.3,70.8,-129.4,45.4,-154.6,9.4C-179.7,-26.6,-220.8,-73.1,-216.4,-105.5C-212,-137.8,-161.9,-156,-118.3,-180.5C-74.6,-205.1,-37.3,-236,-12.2,-217.1C13,-198.2,26,-129.4,59.2,-100Z" fill="{color:accent}"/></g></svg>
  757.  
  758. <div class="circle1"> </div>
  759. <div class="circle2"> </div>
  760.  
  761. <div class="box1"> <img src="{image:sidebar}"> </div>
  762.  
  763. <div id="container">
  764.  
  765.  
  766. <!--- SIDEBAR --->
  767.  
  768. <div class="tab">
  769. <li><a href="/ask" title="mssg"> > <b>01:</b> mssg. </a></li>
  770. <li><a href="#" class="tablinks" title="navi" onclick="openCity(event, 'navi')"> > <b>02:</b> navigate. </a></li>
  771. {block:ifmusetab} <li><a href="#" class="tablinks" onclick="openCity(event, 'muses')" title="characters"> > <b>03:</b> muses. </a></li> {/block:ifmusetab}
  772.  
  773. <!--- edit your free link here if you aren't using the muse tab ! --->
  774.  
  775. {block:ifNotmusetab} <li><a href="/" title="link"> > <b>03:</b> link. </a></li> {/block:ifNotmusetab}
  776.  
  777. </div>
  778.  
  779. <div class="barcode"> {text:barcode} </div>
  780. <div class="png"> <img src="{image:sticker}"> </div>
  781. <div class="line1"> </div>
  782. <div class="line2"> </div>
  783. <div class="desctitle"> <a href="/"> {text:title} </a></div>
  784. <div class="desctxt"> {text:desc} </div>
  785.  
  786. <!--- SVG FIGURES --->
  787.  
  788. <svg width="200" height="200" viewBox="0 0 600 600" style="position:absolute; top:-130px; left:355px;" xmlns="http://www.w3.org/2000/svg"><g transform="translate(300,300)"> <path d="M133.8,-164.1C151,-145,127.2,-81.6,116.7,-36.1C106.2,9.3,108.9,36.9,104.3,74.6C99.7,112.2,87.6,159.9,53.6,191.6C19.5,223.3,-36.6,239,-82.5,223.6C-128.5,208.3,-164.3,161.9,-195.8,111.2C-227.3,60.4,-254.5,5.4,-244.3,-41.4C-234.1,-88.3,-186.4,-126.9,-139.5,-140.8C-92.6,-154.6,-46.3,-143.8,6,-151C58.3,-158.1,116.6,-183.2,133.8,-164.1Z" fill="{color:accent}"/></g></svg>
  789.  
  790. <svg width="200" height="200" viewBox="0 0 600 600" style="position:absolute; bottom:-110px; left:-80px;" xmlns="http://www.w3.org/2000/svg"><g transform="translate(300,300)"><path d="M87.4,-97.9C133.2,-65.7,204,-57.1,217.1,-31.1C230.2,-5.1,185.7,38.2,147.5,67.1C109.3,96,77.4,110.5,49,110.4C20.5,110.3,-4.4,95.5,-38.9,90.2C-73.3,84.9,-117.2,88.9,-139.7,70.6C-162.2,52.3,-163.3,11.7,-166.9,-40.1C-170.5,-91.9,-176.5,-154.7,-149.1,-190.2C-121.7,-225.7,-60.9,-233.9,-20,-210C20.8,-186.1,41.6,-130.2,87.4,-97.9Z" fill="{color:accent}"/></g></svg>
  791.  
  792. <svg width="400" height="400" viewBox="0 0 600 600" style="position:absolute; top:90px; right:-200px;" xmlns="http://www.w3.org/2000/svg"> <g transform="translate(300,300)"> <path d="M140,-188.6C167,-144.3,164.2,-86.4,178.4,-28.2C192.5,30,223.6,88.5,213.5,139.6C203.5,190.7,152.4,234.4,98.1,242.4C43.9,250.3,-13.5,222.4,-73.2,200.8C-132.9,179.2,-195.1,163.8,-219.2,125.1C-243.4,86.3,-229.5,24.1,-201.2,-18C-172.9,-60.1,-130.2,-82.1,-94.2,-124.8C-58.3,-167.5,-29.1,-230.7,13.7,-247.1C56.6,-263.4,113.1,-232.8,140,-188.6Z" fill="{color:accent}"/> </g></svg>
  793.  
  794. <div class="circle3"> </div>
  795. <div class="circle4"> </div>
  796.  
  797.  
  798.  
  799.  
  800. <!--- NAVIGATION TAB --->
  801.  
  802.  
  803.  
  804.  
  805. <div id="navi" class="tabcontent" style="display:none;"> <button> <i data-feather="x" width="15px" height="15px"></i> </button>
  806.  
  807. <!--- SVG FIGURES --->
  808.  
  809. <svg width="200" height="200" viewBox="0 0 600 600" style="position:absolute; top:-130px; left:-25px;" xmlns="http://www.w3.org/2000/svg"><g transform="translate(300,300)"> <path d="M133.8,-164.1C151,-145,127.2,-81.6,116.7,-36.1C106.2,9.3,108.9,36.9,104.3,74.6C99.7,112.2,87.6,159.9,53.6,191.6C19.5,223.3,-36.6,239,-82.5,223.6C-128.5,208.3,-164.3,161.9,-195.8,111.2C-227.3,60.4,-254.5,5.4,-244.3,-41.4C-234.1,-88.3,-186.4,-126.9,-139.5,-140.8C-92.6,-154.6,-46.3,-143.8,6,-151C58.3,-158.1,116.6,-183.2,133.8,-164.1Z" fill="{color:accent}"/></g></svg>
  810.  
  811. <svg width="400" height="400" viewBox="0 0 600 600" style="position:absolute; top:90px; right:-200px;" xmlns="http://www.w3.org/2000/svg"> <g transform="translate(300,300)"> <path d="M140,-188.6C167,-144.3,164.2,-86.4,178.4,-28.2C192.5,30,223.6,88.5,213.5,139.6C203.5,190.7,152.4,234.4,98.1,242.4C43.9,250.3,-13.5,222.4,-73.2,200.8C-132.9,179.2,-195.1,163.8,-219.2,125.1C-243.4,86.3,-229.5,24.1,-201.2,-18C-172.9,-60.1,-130.2,-82.1,-94.2,-124.8C-58.3,-167.5,-29.1,-230.7,13.7,-247.1C56.6,-263.4,113.1,-232.8,140,-188.6Z" fill="{color:accent}"/> </g></svg>
  812.  
  813. <div class="tabtitle"> navigate. </div>
  814.  
  815. <ul class="nav">
  816.  
  817. <li><a href="/">link 1.</a></li>
  818. <li><a href="/">link 2.</a></li>
  819. <li><a href="" >link 3.</a></li>
  820.  
  821. <li><a href="/" >link 4.</a></li>
  822. <li><a href="/" >link 5.</a></li>
  823. <li><a href="/" >link 6.</a></li>
  824.  
  825. </ul>
  826.  
  827. <div class="tabtitle2"> about. </div>
  828.  
  829. <!--- bottom left navi box --->
  830.  
  831. <div class="nbox1">
  832.  
  833. <!--- insta box title --->
  834.  
  835. <div class="ntitle"> 03:25 am </div>
  836.  
  837. <img src="{image:navimg}"> <span class="th th-heart-1-o"></span>
  838.  
  839. <p class="nalignleft"> <i class="fas fa-bars"></i> </p>
  840.  
  841. <p class="nalignright"> <i class="fas fa-bookmark"></i> </p>
  842.  
  843. </div>
  844.  
  845. <!--- bottom right navi box --->
  846.  
  847. <div class="nbox2"> <div class="ntxt2">
  848.  
  849. <!--- about box desc --->
  850.  
  851. <img src="{image:navicon}" align="right" style="margin:0px 0px 0px 10px;"/> you can use this however you want ! a wid, to do list, rules, updates, drafts, etc !! 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>
  852.  
  853. </div>
  854.  
  855. </div>
  856.  
  857.  
  858.  
  859.  
  860. <!--- MUSE TAB --->
  861.  
  862.  
  863.  
  864.  
  865. <div id="muses" class="tabcontent" style="display:none;"> <button> <i data-feather="x" width="15px" height="15px"></i> </button>
  866.  
  867. <div class="tabtitle"> characters. </div>
  868.  
  869. <!--- SVG FIGURES --->
  870.  
  871. <svg width="200" height="200" viewBox="0 0 600 600" style="position:absolute; top:-130px; left:-25px;" xmlns="http://www.w3.org/2000/svg"><g transform="translate(300,300)"> <path d="M133.8,-164.1C151,-145,127.2,-81.6,116.7,-36.1C106.2,9.3,108.9,36.9,104.3,74.6C99.7,112.2,87.6,159.9,53.6,191.6C19.5,223.3,-36.6,239,-82.5,223.6C-128.5,208.3,-164.3,161.9,-195.8,111.2C-227.3,60.4,-254.5,5.4,-244.3,-41.4C-234.1,-88.3,-186.4,-126.9,-139.5,-140.8C-92.6,-154.6,-46.3,-143.8,6,-151C58.3,-158.1,116.6,-183.2,133.8,-164.1Z" fill="{color:accent}"/></g></svg>
  872.  
  873. <svg width="400" height="400" viewBox="0 0 600 600" style="position:absolute; top:90px; right:-200px;" xmlns="http://www.w3.org/2000/svg"> <g transform="translate(300,300)"> <path d="M140,-188.6C167,-144.3,164.2,-86.4,178.4,-28.2C192.5,30,223.6,88.5,213.5,139.6C203.5,190.7,152.4,234.4,98.1,242.4C43.9,250.3,-13.5,222.4,-73.2,200.8C-132.9,179.2,-195.1,163.8,-219.2,125.1C-243.4,86.3,-229.5,24.1,-201.2,-18C-172.9,-60.1,-130.2,-82.1,-94.2,-124.8C-58.3,-167.5,-29.1,-230.7,13.7,-247.1C56.6,-263.4,113.1,-232.8,140,-188.6Z" fill="{color:accent}"/> </g></svg>
  874.  
  875. <!--- visit the link if you need help on how to work with / edit the filters !! https://twentys.tumblr.com/private/614319258080526336/tumblr_q86hsiomOL1uwrgub --->
  876.  
  877. <div id="buttons">
  878.  
  879. <div class="button selected" filter="item">all.</div>
  880. <div class="button" filter="open">open.</div>
  881. <div class="button" filter="closed">closed.</div>
  882. <div class="button" filter="selective">selective.</div>
  883.  
  884. </div>
  885.  
  886. <div id="musecon">
  887.  
  888. <div class="grid">
  889.  
  890. <!--- for a new muse copy from here --->
  891.  
  892. <div class="item open"> <a href="/" title="muse 1 info"><img src="https://i.postimg.cc/j2JWYLTM/muse-img.png"></a> </div>
  893.  
  894. <!--- to here --->
  895.  
  896. <div class="item closed"> <a href="/" title="muse 2 info"><img src="https://i.postimg.cc/j2JWYLTM/muse-img.png"></a> </div>
  897.  
  898. <div class="item selective"> <a href="/" title="muse 3 info"><img src="https://i.postimg.cc/j2JWYLTM/muse-img.png"></a> </div>
  899.  
  900. <div class="item selective"> <a href="/" title="muse 4 info"><img src="https://i.postimg.cc/j2JWYLTM/muse-img.png"></a> </div>
  901.  
  902. <div class="item closed"> <a href="/" title="muse 5 info"><img src="https://i.postimg.cc/j2JWYLTM/muse-img.png"></a> </div>
  903.  
  904. <div class="item open"> <a href="/" title="muse 6 info"><img src="https://i.postimg.cc/j2JWYLTM/muse-img.png"></a> </div>
  905.  
  906. <div class="item closed"> <a href="/" title="muse 7 info"><img src="https://i.postimg.cc/j2JWYLTM/muse-img.png"></a> </div>
  907.  
  908. <div class="item open"> <a href="/" title="muse 8 info"><img src="https://i.postimg.cc/j2JWYLTM/muse-img.png"></a> </div>
  909.  
  910. <div class="item open selective"> <a href="/" title="muse 9 info"><img src="https://i.postimg.cc/j2JWYLTM/muse-img.png"></a> </div>
  911.  
  912. <div class="item selective"> <a href="/" title="muse 10 info"><img src="https://i.postimg.cc/j2JWYLTM/muse-img.png"></a> </div>
  913.  
  914. <div class="item selective"> <a href="/" title="muse 11 info"><img src="https://i.postimg.cc/j2JWYLTM/muse-img.png"></a> </div>
  915.  
  916. <div class="item selective"> <a href="/" title="muse 12 info"><img src="https://i.postimg.cc/j2JWYLTM/muse-img.png"></a> </div>
  917.  
  918. </div>
  919. </div>
  920. </div>
  921.  
  922.  
  923. <!--- POSTS --->
  924.  
  925. <div id="posts">
  926. {block:Posts}
  927. <div class="entry">
  928.  
  929.  
  930. <!-- TOP INFO --->
  931.  
  932. <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>
  933.  
  934. <!-- TEXT --->
  935.  
  936. {block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}{Body}{/block:Text}
  937.  
  938. <!-- PHOTOS --->
  939.  
  940. {block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{/block:Photo}
  941.  
  942. {block:Photoset} {block:IndexPage}{Photoset-500}{/block:IndexPage} {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage} {/block:Photoset}
  943.  
  944. <!-- QUOTE --->
  945.  
  946. {block:Quote} <div class="quote"> {Quote} </div> <div class="source"> — {Source} </div> {/block:Quote}
  947.  
  948. <!-- LINKS --->
  949.  
  950. {block:Link} <div class="linktitle"> <a href="{URL}"><h1>{Name}</h1></a></div>
  951. {block:Description} <p>{Description}</p> {/block:Description}{/block:Link}
  952.  
  953. <!-- CHATS --->
  954.  
  955. {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}
  956. {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}
  957.  
  958. <!-- AUDIO --->
  959.  
  960. {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}
  961.  
  962. <!-- VIDEO --->
  963.  
  964. {block:Video}<div class="video">{Video-500}</div>{/block:Video}
  965.  
  966. <!-- ASKS --->
  967.  
  968. {block:Answer}<div id="question">{Question} <div id="asker">written by {Asker}</div></div>{Answer} {/block:Answer}
  969.  
  970.  
  971. {block:Caption}{Caption}{/block:Caption}
  972.  
  973. <!-- READ MORE --->
  974.  
  975. {block:More}<div class="more"><a href="{Permalink}" class="more-btn">read more</a></div>{/block:More}
  976.  
  977. <!-- BOTTOM INFO --->
  978.  
  979. <div class="bottominfo"> posted <a href="{Permalink}" title="{DayOfWeek}, {Month} {DayOfMonth}{DayOfMonthSuffix} {Year}.">{TimeAgo}</a> </div>
  980.  
  981. <!-- TAGS --->
  982.  
  983. {block:HasTags} <div class="tags"> <span> {PostAuthorName} said: </span> {block:Tags}<a href="{TagURL}">{Tag},</a> {/block:Tags}<br></div>{/block:HasTags}
  984.  
  985. <!-- POST NOTES --->
  986.  
  987. <div class="note"> {block:PostNotes}{PostNotes}{/block:PostNotes} </div>
  988.  
  989.  
  990. </div>
  991. {/block:Posts}
  992.  
  993.  
  994.  
  995.  
  996. <!-- PAGINATION --->
  997.  
  998. {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}
  999.  
  1000.  
  1001.  
  1002.  
  1003. </div>
  1004.  
  1005. </div>
  1006. </div>
  1007.  
  1008. <div id="updates">
  1009.  
  1010. <h1> * - , ooc </h1>
  1011.  
  1012. <blockquote> name, age, tz <i>!</i> </blockquote>
  1013.  
  1014. <h1> * - , stats </h1>
  1015.  
  1016. <blockquote>
  1017.  
  1018.  
  1019. <b> drafts: </b> +000 <br>
  1020. <b> inbox: </b> +000
  1021.  
  1022. </blockquote>
  1023.  
  1024. </div>
  1025.  
  1026. <div id="cred">
  1027. <a href="http://twentys.tumblr.com" title="made by julie."><span class="th th-holly-o"></span></a>
  1028. </div>
  1029.  
  1030.  
  1031.  
  1032.  
  1033. <script> feather.replace() </script>
  1034.  
  1035.  
  1036.  
  1037.  
  1038. </body>
  1039. </html>
  1040.  
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!