API tools faq
paste
lovesjoon

13. fairy of shampoo

lovesjoon
Mar 19th, 2021 (edited)
1,597
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 53.77 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5.  
  6.  
  7.  
  8.  
  9.  
  10.  
  11.  
  12.  
  13.  
  14. <!--- 13. fairy of shampoo by capitae.
  15.  
  16.  
  17. ♡ USER GUIDE ♡
  18.  
  19. ・｡* sidebar icon: width:65px; height:65px;
  20.  
  21. ・｡* sidebar pattern: width:264px; height:359px;
  22.  
  23. ・｡* sidebar icon 2: width:90px; height:90px;
  24.  
  25. ・｡* pop-up: width:180px; height:360px;
  26.  
  27. ・｡* navigation: width:220px; height:110px;
  28.  
  29. ・｡* muses: width:50px; height:50px;
  30.  
  31.  
  32. ♡ READ ME ♡
  33.  
  34. ・｡* base code by @pixiemail.
  35.  
  36. ・｡* please don't recreate and/or steal parts of this code
  37.  
  38. ・｡* don't remove the credit
  39.  
  40. ・｡* feel free to reach out if there are any bugs or questions!
  41.  
  42. ・｡* animations by Animista
  43.  
  44.  
  45. /* ----------------------------------------------
  46. * Generated by Animista
  47. * Licensed under FreeBSD License.
  48. * See http://animista.net/license for more info.
  49. * w: http://animista.net, t: @cssanimista
  50. * ----------------------------------------------*/
  51.  
  52.  
  53. i hope you enjoy this code !! --->
  54.  
  55.  
  56.  
  57.  
  58.  
  59.  
  60.  
  61.  
  62.  
  63.  
  64. <title>{Title}</title>
  65. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  66. <link rel="shortcut icon" href="{Favicon}">
  67. {block:Description}
  68. <meta name="description" content="{MetaDescription}">
  69. {/block:Description}
  70.  
  71.  
  72. <meta name="image:background" content=""/>
  73. <meta name="image:sidebar" content="https://via.placeholder.com/265x360"/>
  74. <meta name="image:profile" content="https://via.placeholder.com/65x65"/>
  75. <meta name="image:icon" content="https://via.placeholder.com/90x90"/>
  76. <meta name="image:navi" content="https://via.placeholder.com/220x110"/>
  77. <meta name="image:popup" content="https://via.placeholder.com/180x360"/>
  78.  
  79. <meta name="color:background" content="#eee"/>
  80. <meta name="color:container" content="#fff"/>
  81. <meta name="color:sidebar" content="#f7f3f1"/>
  82. <meta name="color:header" content="#f1f3f4"/>
  83. <meta name="color:posts" content="#fff"/>
  84. <meta name="color:post border" content="#fbfbfb"/>
  85. <meta name="color:borders" content="#ddd"/>
  86. <meta name="color:accent" content="#acb7c9"/>
  87. <meta name="color:accent2" content="#c4cbd7"/>
  88. <meta name="color:accent3" content="#eee8e5"/>
  89. <meta name="color:accent4" content="#b0a8b7"/>
  90. <meta name="color:text" content="#acacac"/>
  91. <meta name="color:links" content="#b0a8b7"/>
  92. <meta name="color:hover" content="#98a3a9"/>
  93. <meta name="color:bold" content="#d8d6d7"/>
  94. <meta name="color:italic" content="#98a3a9"/>
  95.  
  96. <meta name="select:body font" content="roboto" title="roboto"/>
  97. <meta name="select:body font" content="montserrat" title="montserrat"/>
  98. <meta name="select:body font" content="ibm plex sans" title="ibm plex sans"/>
  99. <meta name="select:body font" content="inconsolata" title="inconsolata"/>
  100. <meta name="select:body font" content="raleway" title="raleway"/>
  101. <meta name="select:body font" content="josefin sans" title="josefin sans"/>
  102. <meta name="select:body font" content="libre baskerville" title="libre baskerville"/>
  103.  
  104. <meta name="select:font size" content="10" title="10px"/>
  105. <meta name="select:font size" content="11" title="11px"/>
  106. <meta name="select:font size" content="12" title="12px"/>
  107.  
  108. <meta name="if:muse tab" content="1"/>
  109. <meta name="if:border radius" content="0"/>
  110. <meta name="if:grayscale" content="0"/>
  111.  
  112. <meta name="text:user" content="dre4m_chapter"/>
  113. <meta name="text:profile" content="hi this is some text, max 2 lines!"/>
  114. <meta name="text:reminder" content="the moon loves you... "/>
  115. <meta name="text:title" content="Fairy of Shampoo"/>
  116. <meta name="text:folder1" content="drafts (14)"/>
  117. <meta name="text:folder2" content="inbox (09)"/>
  118. <meta name="text:folder3" content="threads (28)"/>
  119. <meta name="text:username" content="username"/>
  120. <meta name="text:no muse tab url" content="/"/>
  121. <meta name="text:no muse tab txt" content="free link"/>
  122. <meta name="text:free link url" content="/"/>
  123. <meta name="text:free link txt" content="free link"/>
  124. <meta name="text:link1" content="/"/>
  125. <meta name="text:link1title" content="link title"/>
  126. <meta name="text:link2" content="/"/>
  127. <meta name="text:link2title" content="link title"/>
  128. <meta name="text:link3" content="/"/>
  129. <meta name="text:link3title" content="link title"/>
  130. <meta name="text:link4" content="/"/>
  131. <meta name="text:link4title" content="link title"/>
  132. <meta name="text:link5" content="/"/>
  133. <meta name="text:link5title" content="link title"/>
  134. <meta name="text:link6" content="/"/>
  135. <meta name="text:link6title" content="link title"/>
  136. <meta name="text:link7" content="/"/>
  137. <meta name="text:link7title" content="link title"/>
  138. <meta name="text:link8" content="/"/>
  139. <meta name="text:link8title" content="link title"/>
  140. <meta name="text:link9" content="/"/>
  141. <meta name="text:link9title" content="link title"/>
  142.  
  143.  
  144.  
  145.  
  146. <!--- 01: SCRIPTS + FONTS INSTALLED ---->
  147.  
  148.  
  149.  
  150.  
  151. <!--- JQUERY SCRIPTS --->
  152.  
  153. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  154. <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
  155.  
  156.  
  157.  
  158.  
  159. <!--- TOOLTIP SCRIPT ---->
  160.  
  161. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  162. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  163. <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>
  164.  
  165.  
  166.  
  167.  
  168. <!--- GOOGLE + ICON FONTS ---->
  169.  
  170. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  171. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/v4-shims.css">
  172.  
  173. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  174.  
  175. <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">
  176.  
  177. <script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
  178.  
  179.  
  180. <!-- POST STYLING FONTS -->
  181.  
  182. <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Poppins&display=swap" rel="stylesheet">
  183.  
  184.  
  185. <!-- BODY FONTS -->
  186.  
  187. <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  188.  
  189. <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
  190.  
  191. <link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
  192.  
  193. <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
  194.  
  195. <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
  196.  
  197. <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet">
  198.  
  199. <link href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap" rel="stylesheet">
  200.  
  201.  
  202.  
  203.  
  204. <!--- VIDEO SCRIPT BY SHYTHEMES ---->
  205.  
  206. <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>
  207.  
  208.  
  209.  
  210.  
  211. <!--- TAB SCRIPT by www.w3schools.com ---->
  212.  
  213. <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>
  214.  
  215.  
  216.  
  217.  
  218. <!--- FADE OUT SCRIPT by beginnersbook.com ---->
  219.  
  220. <script>
  221. $(document).ready(function(){
  222. $("button").click(function(){
  223. $(".tabcontent").fadeOut("slow");
  224. });
  225. });
  226. </script>
  227.  
  228.  
  229.  
  230.  
  231. <!--- POPUP SCRIPT by themekid ---->
  232.  
  233. <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>
  234.  
  235.  
  236.  
  237.  
  238. <style type="text/css">
  239.  
  240.  
  241.  
  242.  
  243. /*--- FONTS HOSTED BY @CAPITAE ---*/
  244.  
  245. @font-face{ font-family:"Cocogoose"; src: url('https://dl.dropboxusercontent.com/s/idpkv65wvsd9ckx/CocogoosePro.tt’)'); }
  246.  
  247. @font-face{ font-family:"pisces"; src: url('https://dl.dropboxusercontent.com/s/zj6oxk9lw0t6ys2/Summer%20Pisces.ttf’)'); }
  248.  
  249.  
  250.  
  251.  
  252.  
  253. /*--- 02: TOOLTIP + SCROLLBAR + SELECTION ---*/
  254.  
  255.  
  256.  
  257.  
  258. /* TOOLTIP */
  259.  
  260. #s-m-t-tooltip { max-width:250px; max-height:auto; background:{color:posts}; color:{color:text}; margin:20px; padding:10px; border:1px solid {color:borders}; border-radius:5px; z-index:9999999999; font-family:'poppins', sans-serif; font-size:8px; font-weight:bold; text-transform:uppercase; letter-spacing:1px; }
  261.  
  262.  
  263. /* SCROLLBAR */
  264.  
  265. ::-webkit-scrollbar-thumb { display:none; }
  266.  
  267. ::-webkit-scrollbar { display:none; }
  268.  
  269.  
  270. /* SELECTION */
  271.  
  272. ::-moz-selection { background:{color:accent}; color:{color:posts}; }
  273.  
  274. ::selection { background:{color:accent}; color:{color:posts};}
  275.  
  276.  
  277.  
  278.  
  279. /*--- 03: BODY + TEXT STYLING + ANIMATIONS ---*/
  280.  
  281.  
  282.  
  283.  
  284. /* TYPE: BODY */
  285.  
  286. 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;
  287.  
  288. font-family:{select:body font};
  289. font-size:{select:font size}px;
  290. line-height: -moz-calc({select:font size}px + 8px);
  291. line-height: -webkit-calc({select:font size}px + 8px);
  292. line-height: -o-calc({select:font size}px + 8px);
  293. line-height: calc({select:font size}px + 8px); }
  294.  
  295.  
  296. /* TYPE: IMAGES */
  297.  
  298. iframe, img, embed, object { max-width:100%; margin:auto; border:none; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  299.  
  300. iframe:hover, img:hover, embed:hover, object:hover {
  301.  
  302. {block:ifGrayscale} filter: grayscale(0%);
  303. -webkit-transition: all .8s;
  304. -moz-transition: all .8s;
  305. -o-transition: all .8s;
  306. -ms-transition: all .8s;
  307. transition: all .8s; {/block:ifGrayscale} }
  308.  
  309. img { max-width:100%; height:auto; margin:auto; border:none; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  310.  
  311. img:hover { {block:ifGrayscale} filter: grayscale(0%);
  312.  
  313. -webkit-transition: all .8s;
  314. -moz-transition: all .8s;
  315. -o-transition: all .8s;
  316. -ms-transition: all .8s;
  317. transition: all .8s; {/block:ifGrayscale} }
  318.  
  319.  
  320. /* TYPE: TEXT STYLING */
  321.  
  322. select, textarea, input, a { outline:none; }
  323.  
  324. p { margin-top:5px; margin-bottom:5px; }
  325.  
  326. small, sub, sup { font-size:100%; }
  327.  
  328. big { font-size:110%; }
  329.  
  330. h1 { color:{color:accent}; font-family: 'Abril Fatface', cursive; font-weight:normal; line-height:28px; text-align:center; word-spacing:2px;
  331.  
  332. font-size: -moz-calc({select:font size}px + 20px);
  333. font-size: -webkit-calc({select:font size}px + 20px);
  334. font-size: -o-calc({select:font size}px + 20px);
  335. font-size: calc({select:font size}px + 20px); }
  336.  
  337. h2 { color:{color:accent2}; font-family:'poppins', sans-serif; line-height:18px; text-align:center; text-transform:lowercase;
  338.  
  339. font-size: -moz-calc({select:font size}px + 5px);
  340. font-size: -webkit-calc({select:font size}px + 5px);
  341. font-size: -o-calc({select:font size}px + 5px);
  342. font-size: calc({select:font size}px + 5px); }
  343.  
  344. a { color:{color:links}; font-family:'poppins', sans-serif; font-weight:bold; text-transform:uppercase; text-decoration:none; letter-spacing:1px; }
  345.  
  346. a:hover { color:{color:hover};
  347.  
  348. -webkit-transition: all .3s;
  349. -moz-transition: all .3s;
  350. -o-transition: all .3s;
  351. -ms-transition: all .3s;
  352. transition: all .3s; }
  353.  
  354. ul, ol, li { margin:5px 10px; padding:0px; line-height:20px; }
  355.  
  356. b, strong { color:{color:bold}; }
  357.  
  358. i, em { color:{color:italic}; }
  359.  
  360. blockquote { margin:5px; padding-left:20px; border-left:1px solid {color:borders}; }
  361.  
  362.  
  363. /* TYPE: TUMBLR CONTROLS */
  364.  
  365. 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; }
  366.  
  367. iframe.tmblr-iframe:hover { opacity:1!important; }
  368.  
  369.  
  370. /* TYPE: ANIMATIONS */
  371.  
  372. .scale-in-center{-webkit-animation:scale-in-center .8s cubic-bezier(.215,.61,.355,1.000);animation:scale-in-center .8s cubic-bezier(.215,.61,.355,1.000)}
  373.  
  374. @-webkit-keyframes scale-in-center{ 0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes scale-in-center{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1} }
  375.  
  376.  
  377.  
  378.  
  379. /*--- 04: CONTAINER + SIDEBAR STYLING ---*/
  380.  
  381.  
  382.  
  383.  
  384. /* CONTAINER */
  385.  
  386. #container { position:absolute; width:700px; height:520px; top:0px; right:0px; bottom:0px; left:0px; background:{color:container}; margin:auto; border:1px solid {color:borders}; border-radius:10px 10px 0px 0px; z-index:99; }
  387.  
  388.  
  389. /* TOP BAR */
  390.  
  391. #top-bar { position:absolute; width:700px; height:70px; top:0px; left:0px; border-bottom:1px solid {color:borders}; overflow:hidden; border-radius:10px 10px 0px 0px; }
  392.  
  393. .top-one { position:absolute; width:700px; height:35px; top:0px; left:0px; background:{color:header}; border-bottom:1px solid {color:borders}; }
  394.  
  395. .top-two { position:absolute; width:700px; height:35px; top:36px; left:0px; background:{color:container}; border-bottom:1px solid {color:borders}; }
  396.  
  397.  
  398. /* DETAILS */
  399.  
  400. .one-dots { position:absolute; top:7px; left:10px; background:transparent; color:#ed6a5e; border:none; z-index:99999; font-size:38px; line-height:23px; letter-spacing:-4px; font-family:'poppins', sans-serif; text-align:left; }
  401.  
  402. .one-dots b { color:#f5bd4f; font-weight:normal; }
  403.  
  404. .one-dots span { color:#61c354; }
  405.  
  406. .two-left { position:absolute; width:75px; height:15px; top:10px; left:0px; text-align:center; padding-left:5px; }
  407.  
  408. .two-left .iconify { font-size:15px; padding-right:5px; vertical-align:-4px; }
  409.  
  410. .two-middle { position:absolute; width:530px; height:25px; top:5px; left:80px; background:{color:header}; border-radius:20px; padding:0px 5px 0px 10px; line-height:0px; font-family:'poppins', sans-serif; }
  411.  
  412. .two-middle .iconify { font-size:14px; padding-right:5px; vertical-align:-2px; }
  413.  
  414. .two-right { position:absolute; width:75px; height:15px; top:9px; right:0px; text-align:center; padding-left:5px; }
  415.  
  416. .two-right .iconify { font-size:15px; padding-right:5px; vertical-align:-4px; }
  417.  
  418.  
  419. /* TAB */
  420.  
  421. .tab { position:absolute; width:auto; height:27.5px; bottom:0px; left:72.5px; overflow:hidden; text-align:center; font-family:'poppins', sans-serif; font-size:10.5px; font-weight:normal; text-transform:lowercase; letter-spacing:0px; }
  422.  
  423. .tab li { display:inline-block; float:left; width:135px; height:100%; border-radius:10px 10px 0px 0px; background:{color:container}; border-top:1px solid {color:borders}; border-left:1px solid {color:borders}; border-right:1px solid {color:borders}; padding:0px 5px 0px 10px; line-height:20px; margin-left:-2px; margin:0; }
  424.  
  425. .tab .iconify { font-size:15px; padding-right:3px; vertical-align:-4px; }
  426.  
  427.  
  428. /* LEFT BAR */
  429.  
  430. #leftbar { position:absolute; width:66px; height:449px; left:0px; bottom:0px; background:{color:accent2}; z-index:999; }
  431.  
  432. .left-top { position:absolute; width:66px; height:66px; left:0px; top:0px; background:{color:accent}; }
  433.  
  434. .left-icon { position:absolute; width:100%; height:auto; left:0px; top:10px; color:{color:container}; text-align:center; font-size:6.5px; font-family:"montserrat"; text-transform:uppercase; letter-spacing:2px; font-weight:900; line-height:5px; }
  435.  
  436. .left-icon a { color:{color:container}; text-align:center; font-size:6.5px; font-family:"montserrat"; text-transform:uppercase; letter-spacing:2px; font-weight:900; }
  437.  
  438. .left-icon .iconify { font-size:35px; color:{color:container}; }
  439.  
  440. .left-bottom { position:absolute; width:66px; height:140px; left:0px; bottom:0px; background:{color:accent3}; }
  441.  
  442.  
  443. /* SIDEBAR */
  444.  
  445. #sidebar { position:absolute; width:264px; height:449px; left:66px; bottom:0px; background:{color:container}; border-right:1px solid {color:borders}; }
  446.  
  447. .pattern { position:absolute; width:100%; height:80%; right:0px; top:0px; background:{color:sidebar}; border-bottom:1px solid {color:borders}; border-collapse: collapse; }
  448.  
  449. .pattern img { width:264px; height:359px; }
  450.  
  451. .title { position:absolute; width:185px; height:25px; bottom:15px; left:78px; font-family:"pisces"; font-size:60px; color:{color:accent}; z-index:9999999999; text-align:center; letter-spacing:1px; text-shadow:0 0 15px {color:borders}; }
  452.  
  453.  
  454. /* SIDEBAR: profile */
  455.  
  456. .profile-border { position:absolute; width:80%; height:230px; top:25px; left:25px; z-index:999999; background:{color:accent4}; }
  457.  
  458. .profile { position:absolute; width:80%; height:190px; margin:auto; left:0px; top:0px; right:0px; bottom:0px; z-index:999999; background:{color:container}; border:1px solid {color:borders};
  459.  
  460. -webkit-box-shadow: 0px 0px 10px 0px {color:borders};
  461. -moz-box-shadow: 0px 0px 10px 0px {color:borders};
  462. box-shadow: 0px 0px 10px 0px {color:borders}; }
  463.  
  464. .profile-icon { position:absolute; width:65px; height:65px; margin:auto; left:0px; top:0px; bottom:95px; right:0px; border-radius:100%; }
  465.  
  466. .profile-icon img { width:65px; height:65px; border-radius:100%; }
  467.  
  468. .profile-symbol { position:absolute; width:20px; height:20px; margin:auto; left:50px; top:0px; bottom:55px; right:0px; background:{color:accent}; border-radius:100%; text-align:center; }
  469.  
  470. .profile-symbol .iconify { font-size:16px; color:{color:container}; margin-top:2px; }
  471.  
  472. .profile-info { position:absolute; width:100%; height:80px; top:95px; left:0px; }
  473.  
  474. .profile-info li { display:block; float:left; margin:0; width:100%; height:40px; }
  475.  
  476. .info-symbol { width:25%; height:40px; margin-left:0px; margin-top:0px; text-align:center; }
  477.  
  478. .info-symbol .iconify { font-size:20px; margin-top:0px; color:{color:accent}; }
  479.  
  480. .info-user { width:50%; height:40px; margin-left:25%; margin-top:-40px; line-height:10px; overflow:hidden; font-family:"poppins"; font-size:8px; letter-spacing:1px; text-align:left; }
  481.  
  482. .info-user b { color:{color:accent}; font-family:"montserrat"; text-transform:uppercase; letter-spacing:1px; font-size:9px; }
  483.  
  484. .info-symbol2 { width:25%; height:40px; margin-left:75%; margin-top:-40px; text-align:center; }
  485.  
  486. .info-symbol2 .iconify { font-size:20px; margin-top:0px; color:{color:accent}; }
  487.  
  488.  
  489. /* SIDEBAR: reminder */
  490.  
  491. .reminder-border { position:absolute; width:170px; height:70px; left:-190px; top:100px; z-index:999999; background:{color:accent4}; }
  492.  
  493. .reminder { position:absolute; width:150px; height:50px; margin:auto; left:0px; top:0px; right:0px; bottom:0px; z-index:999999; background:{color:container}; border:1px solid {color:borders};
  494.  
  495. -webkit-box-shadow: 0px 0px 10px 0px {color:borders};
  496. -moz-box-shadow: 0px 0px 10px 0px {color:borders};
  497. box-shadow: 0px 0px 10px 0px {color:borders}; }
  498.  
  499. .reminder .iconify { font-size:30px; color:{color:accent}; margin-top:10px; margin-left:10px; }
  500.  
  501. .reminder-text { position:absolute; width:55%; height:70%; right:0px; top:0%; overflow:hidden; font-family:"poppins"; font-size:8px; letter-spacing:1px; text-align:left; line-height:10px; padding:5% 10% 5% 5%; }
  502.  
  503. .reminder-text b { color:{color:accent}; font-family:"montserrat"; text-transform:uppercase; letter-spacing:1.5px; font-size:9px; }
  504.  
  505.  
  506. /* SIDEBAR: contacts */
  507.  
  508. .contact-border { position:absolute; width:200px; height:220px; left:-120px; bottom:20px; z-index:999999; background:{color:accent4}; }
  509.  
  510. .contact { position:absolute; width:165px; height:185px; margin:auto; left:0px; top:0px; right:0px; bottom:0px; z-index:999999; background:{color:container}; border:1px solid {color:borders};
  511.  
  512. -webkit-box-shadow: 0px 0px 10px 0px {color:borders};
  513. -moz-box-shadow: 0px 0px 10px 0px {color:borders};
  514. box-shadow: 0px 0px 10px 0px {color:borders}; }
  515.  
  516. .contact-top { position:absolute; width:100%; height:20%; background:{color:container}; top:0px; left:0px; }
  517.  
  518. .searchbar { position:absolute; width:75%; height:35%; background:{color:container}; margin:auto; left:0px; top:15px; right:0px; bottom:0px; padding:2.5px 2.5px 2.5px 10px; border:1px solid {color:borders}; border-radius:15px; line-height:14px; font-family:"montserrat"; text-transform:uppercase; letter-spacing:1px; font-size:6.5px; color:{color:accent}; font-weight:bold; }
  519.  
  520. .contact-right { position:absolute; width:5%; height:67%; bottom:10px; right:10px; overflow:scroll; line-height:14px; text-align:center; font-size:7px; padding:2.5px; border:1px solid {color:borders}; border-radius:5px; }
  521.  
  522. .contact-list { position:absolute; width:75%; height:75%; bottom:-2.5px; left:10px; }
  523.  
  524. .contact-list li { display:black; float:left; list-style-type:none; margin:0; height:25px; width:100%; }
  525.  
  526. .contact-icon { width:15px; height:15px; margin-left:5px; margin-top:5px; border-radius:100%; }
  527.  
  528. .contact-link { width:75%; height:25px; margin-left:25%; margin-top:-20px; line-height:25px; overflow:hidden; font-family:"roboto"; font-size:8px; letter-spacing:1px; text-align:left; }
  529.  
  530.  
  531. /* SIDEBAR: image */
  532.  
  533. .icon-border { position:absolute; width:110px; height:110px; right:50px; bottom:60px; z-index:999999; background:{color:accent4}; }
  534.  
  535. .icon { position:absolute; width:90px; height:90px; margin:auto; left:0px; top:0px; right:0px; bottom:0px; z-index:999999; background:{color:posts}; border:1px solid {color:borders};
  536.  
  537. -webkit-box-shadow: 0px 0px 10px 0px {color:borders};
  538. -moz-box-shadow: 0px 0px 10px 0px {color:borders};
  539. box-shadow: 0px 0px 10px 0px {color:borders}; }
  540.  
  541. .icon img { width:90px; height:90px; }
  542.  
  543.  
  544.  
  545.  
  546. /*--- 05: POSTS + ENTRIES ---*/
  547.  
  548.  
  549.  
  550.  
  551. /* POSTS */
  552.  
  553. #posts { position:absolute; width:350px; height:424px; right:0px; bottom:0px; overflow-x:hidden; overflow-y:auto; z-index:1000; padding-top:15px; padding-left:20px; padding-bottom:10px; }
  554.  
  555.  
  556. /* ENTRY STYLING */
  557.  
  558. .entry { width:250px; height:auto; background:{color:posts}; margin:20px; padding:20px 20px 0px 20px; border:1px solid {color:borders}; display:inline-block; border-radius:0px; {block:ifBorderRadius} border-radius:10px; {/block:ifBorderRadius} box-shadow: 0 7px 20px -10px rgba(150,170,180,0.3); }
  559.  
  560. .entry img { margin:0px; padding:0px; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  561.  
  562. .entry img:hover {
  563.  
  564. {block:ifGrayscale} filter: grayscale(0%);
  565. -webkit-transition: all .8s;
  566. -moz-transition: all .8s;
  567. -o-transition: all .8s;
  568. -ms-transition: all .8s;
  569. transition: all .8s; {/block:ifGrayscale} }
  570.  
  571.  
  572.  
  573.  
  574. /*--- 06: POST INFO + NOTES + PAGINATION ---*/
  575.  
  576.  
  577.  
  578. /* POST INFO */
  579.  
  580. .topinfo { width:270px; height:20px; margin-top:-20px; margin-bottom:25px; margin-left:-20px; padding: 10px 10px 10px 10px; background:{color:post border}; border-bottom:1px solid {color:borders}; line-height:12px; {block:ifBorderRadius} border-top-left-radius:10px; border-top-right-radius:10px; {/block:ifBorderRadius} }
  581.  
  582. .topinfo a { margin-left:0px; color:{color:links}; font-family:'poppins', sans-serif; font-size:8.5px; font-weight:bold; text-transform:uppercase; letter-spacing:1px; }
  583.  
  584. .topinfo b { padding:0px 3px 0px 2px; font-family:'poppins', sans-serif; font-size:10px; }
  585.  
  586. .topinfo .iconify { color:{color:links}; }
  587.  
  588.  
  589. /*TAGS*/
  590.  
  591. .tags { width:270px; height:auto; min-height:20px; text-align:justify; background:{color:post border}; color:{color:text}; border-top:1px solid {color:borders}; overflow:hidden; font-size:8px; line-height:22px; padding:10px; margin:25px 0px -20px -20px; {block:ifBorderRadius} border-bottom-left-radius:10px; border-bottom-right-radius:10px; {/block:ifBorderRadius} }
  592.  
  593. .tags i { color:{color:links}; font-size:9px; font-style:normal; text-transform:uppercase; letter-spacing:1px; padding-right:5px; }
  594.  
  595. .tags a { color:{color:text}; font-family:'poppins', sans-serif; padding:0px; font-weight:normal; margin-right:5px;
  596.  
  597. font-size: -moz-calc({select:font size}px - 2px);
  598. font-size: -webkit-calc({select:font size}px - 2px);
  599. font-size: -o-calc({select:font size}px - 2px);
  600. font-size: calc({select:font size}px - 2px); }
  601.  
  602. .tags a:hover { color:{color:hover}; font-weight:bold;
  603.  
  604. -webkit-transition: all .3s;
  605. -moz-transition: all .3s;
  606. -o-transition: all .3s;
  607. -ms-transition: all .3s;
  608. transition: all .3s; }
  609.  
  610.  
  611. /* POST NOTES */
  612.  
  613. .note { width:290px; margin-top:20px; margin-left:-31px; font-size:10px; text-transform:uppercase; }
  614.  
  615. .note li { width:290px; 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; }
  616.  
  617. .note img.avatar { display:none; }
  618.  
  619.  
  620. /* PAGINATION */
  621.  
  622. .pagination { width:100%; text-align:center; padding-bottom:20px; margin-left:-7.5px; }
  623.  
  624. .pagination a { padding:8px; word-spacing:2px; }
  625.  
  626. .pagination a:hover { color:{color:text}; }
  627.  
  628. .pagination .iconify { font-size:25px; color:{color:links}; }
  629.  
  630.  
  631. /* READ MORE */
  632.  
  633. .more { width:100%; margin-top:20px; margin-bottom:5px; text-align:center; }
  634.  
  635. .more a { background:{color:bold}; color:{color:posts}; padding:4px 11px 4px 11px; font-size:9px; font-weight:bold; text-transform:uppercase; }
  636.  
  637. .more a:hover { background:{color:background}; color:{color:bold}; padding:4px 11px 4px 11px; font-size:9px; font-weight:bold; text-transform:uppercase; }
  638.  
  639.  
  640.  
  641.  
  642. /*--- 07: CREDIT, do not touch or remove pls ! ---*/
  643.  
  644.  
  645.  
  646.  
  647. /* CREDIT */
  648.  
  649. .cred { position:fixed; width:auto; height:auto; bottom:15px; right:15px; background:{color:posts}; border-top-right-radius:10px; border-bottom-left-radius:10px; border:1px solid {color:borders}; z-index:9999; }
  650.  
  651. .cred span { padding:10px; font-size:18px; background:-webkit-linear-gradient({color:accent}, {color:accent2});
  652.  
  653. -webkit-background-clip:text;
  654. -webkit-text-fill-color:transparent; }
  655.  
  656.  
  657.  
  658.  
  659. /*--- 08: POST TYPES ---*/
  660.  
  661.  
  662.  
  663.  
  664. /* TYPE: CHATS */
  665.  
  666. .answer span,.convo li { position:relative; max-width:75%; margin:0 0 15px; padding:.9em 10px; border-radius:1em; clear:both; }
  667.  
  668. .answer .them,.user_1,.user_3,.user_5,.user_7,.user_9,.user_11{ left:3px; background:#e6e6e6; color:#555555; float:left; }
  669.  
  670. .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; }
  671.  
  672. .answer .me,.user_2,.user_4,.user_6,.user_8,.user_10,.user_12{ right:3px; background:#147efb; color:white; float:right; }
  673.  
  674. .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; }
  675.  
  676. .me p,.answer,.asked span{ margin:0; padding:0; }
  677.  
  678. .answer{ overflow:hidden; }
  679.  
  680. .asked p { margin:0 0px 10px 0px; padding:0; color:white; font-size:{select:font size}px; text-align:left; line-height:0px; }
  681.  
  682. .footerright .viasrc { float:left; }
  683.  
  684. .asked a { margin:0; padding:0; }
  685.  
  686. .user_3{ background:#e6e6e6; color:#555555; }
  687.  
  688. .user_3::after{ border-color:#e6e6e6; }
  689.  
  690. .user_4{ background:#147efb; color:white; }
  691.  
  692. .user_4::after{ border-color:#147efb; }
  693.  
  694. .user_5{ background:#e6e6e6; color:#555555; }
  695.  
  696. .user_5::after{ border-color:#e6e6e6; }
  697.  
  698. .user_6{ background:#147efb; color:white; }
  699.  
  700. .user_6::after{ border-color:#147efb; }
  701.  
  702. .user_7{ background:#e6e6e6; color:#555555; }
  703.  
  704. .user_7::after{ border-color:#e6e6e6; }
  705.  
  706. .user_8{ background:#147efb; color:white; }
  707.  
  708. .user_8::after{ border-color:#147efb; }
  709.  
  710. .user_9{ background:#e6e6e6; color:#555555; }
  711.  
  712. .user_9::after{ border-color:#e6e6e6; }
  713.  
  714. .convo { margin:0; padding:0; overflow:hidden; list-style-type:none; }
  715.  
  716. .delivered { width:250px; margin-top:-10px; margin-left:0px; color:{color:text}; font-size:8px; text-align:right; text-transform:uppercase; letter-spacing:1px; }
  717.  
  718.  
  719. /* TYPE: QUOTES */
  720.  
  721. .quote { color:{color:accent}; padding:0px 10px 0px 10px; font-family: 'Abril Fatface', cursive; font-weight:normal; line-height:28px; text-align:center; word-spacing:2px;
  722.  
  723. font-size: -moz-calc({select:font size}px + 20px);
  724. font-size: -webkit-calc({select:font size}px + 20px);
  725. font-size: -o-calc({select:font size}px + 20px);
  726. font-size: calc({select:font size}px + 20px); }
  727.  
  728. .source { text-align:right; margin-top:15px;
  729.  
  730. font-size: -moz-calc({select:font size}px - 1px);
  731. font-size: -webkit-calc({select:font size}px - 1px);
  732. font-size: -o-calc({select:font size}px - 1px);
  733. font-size: calc({select:font size}px - 1px);
  734.  
  735. line-height: -moz-calc({select:font size}px + 8px);
  736. line-height: -webkit-calc({select:font size}px + 8px);
  737. line-height: -o-calc({select:font size}px + 8px);
  738. line-height: calc({select:font size}px + 8px); }
  739.  
  740.  
  741. /* TYPE: ASKS */
  742.  
  743. #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; }
  744.  
  745. #asker { width:100%; height:30px; background:{color:accent}; color:{color:posts}; margin:0px; margin-top:10px; margin-left:-30px; margin-bottom:0px; padding:10px 15px 0px 35px; font-size:8px; line-height:23px; text-align:right; text-transform:uppercase; letter-spacing:1.5px; }
  746.  
  747. #asker a { color:{color:posts}; font-weight:bold; }
  748.  
  749.  
  750. /* TYPE: LINKS */
  751.  
  752. .linktitle { color:{color:accent}; margin-top:-5px; font-family: 'Abril Fatface', cursive; font-weight:normal; text-align:center; line-height:28px; word-spacing:2px;
  753.  
  754. font-size: -moz-calc({select:font size}px + 20px);
  755. font-size: -webkit-calc({select:font size}px + 20px);
  756. font-size: -o-calc({select:font size}px + 20px);
  757. font-size: calc({select:font size}px + 20px); }
  758.  
  759.  
  760. /* TYPE: AUDIO */
  761.  
  762. .albumart { position:relative; width:60px; height:60px; padding:20px; border:1px solid {color:borders}; border-top-left-radius:5px; border-bottom-left-radius:5px; }
  763.  
  764. .albumtrack { position:absolute; width:33px; height:30px; margin:auto; top:0px; right:0px; bottom:0px; left:0px; opacity:.6; }
  765.  
  766. .albuminfo { position:relative; width:calc(100% - 142.5px); height:60px; padding:20px; margin-top:-102px; margin-left:100px; border-top:1px solid {color:borders}; border-bottom:1px solid {color:borders}; border-right:1px solid {color:borders}; text-align:center; line-height:20px; border-top-right-radius:5px; border-bottom-right-radius:5px; }
  767.  
  768. .albuminfotxt { position:absolute; top:27.5%; left:0%; width:100%; height:auto; font-size:10px; }
  769.  
  770. .albuminfotxt b { color:{color:accent}; }
  771.  
  772.  
  773. /* TYPE: VIDEOS */
  774.  
  775. .tumblr_video_container { width:auto!important; height:auto!important; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  776.  
  777. .tumblr_video_container:hover {
  778.  
  779. {block:ifGrayscale} filter: grayscale(0%);
  780. -webkit-transition: all .8s;
  781. -moz-transition: all .8s;
  782. -o-transition: all .8s;
  783. -ms-transition: all .8s;
  784. transition: all .8s; {/block:ifGrayscale} }
  785.  
  786.  
  787.  
  788.  
  789. /*--- 09: TAB STYLING ---*/
  790.  
  791.  
  792.  
  793.  
  794. /* TAB + CLOSE CONTENT */
  795.  
  796. .tabcontent { position:absolute; width:370px; height:449px; background:{color:accent4}; overflow:hidden; z-index:9999; right:0px; bottom:0px; display:none; animation: fadeEffect 1s; }
  797.  
  798. @keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} }
  799.  
  800. .tabcontent button { position:absolute; width:200px; height:20px; top:55px; right:-92px; padding:10px; background:transparent; border:none; z-index:99999; font-size:10px; font-family:"poppins"; color:{color:container}; letter-spacing:.5px;
  801.  
  802. -webkit-transform: rotate(90deg);
  803. -moz-transform: rotate(90deg);
  804. -ms-transform: rotate(90deg);
  805. -o-transform: rotate(90deg); }
  806.  
  807. .tabcontent button:hover { cursor:pointer; }
  808.  
  809. .tabcontent button:focus { outline:0; }
  810.  
  811. .tabcontent .iconify { font-size:15px; color:{color:container}; }
  812.  
  813. .tabbox { position:absolute; width:310px; height:390px; background:{color:container}; overflow:hidden; margin:auto; right:0px; bottom:0px; left:0px; top:0px; border:1px solid {color:borders};
  814.  
  815. -webkit-box-shadow: 0px 0px 10px 0px {color:borders};
  816. -moz-box-shadow: 0px 0px 10px 0px {color:borders};
  817. box-shadow: 0px 0px 10px 0px {color:borders}; }
  818.  
  819.  
  820. /* NAVI TAB */
  821.  
  822. .folders { position:absolute; width:70px; height:250px; left:15px; top:6px; text-align:center; font-family:"poppins", sans-serif; font-size:8px; }
  823.  
  824. .folders li { display:block; float:left; width:70px; height:auto; margin:0; }
  825.  
  826. .folder-one { margin-top:11px; margin-left:10px; width:20px; height:4px; background:{color:accent}; border-radius:4px 4px 0px 0px; }
  827.  
  828. .folder-two { margin-left:10px; width:50px; height:32.5px; margin-top:0px; background:{color:accent}; border-radius:0px 5px 5px 5px; }
  829.  
  830.  
  831. .nlinks-border { position:absolute; width:160px; height:160px; right:25px; top:20px; background:{color:accent}; overflow:hidden; padding:10px; border:1px solid {color:borders}; }
  832.  
  833. .nlinks { width:160px; height:160px; background:{color:container}; border:1px solid {color:borders};
  834.  
  835. -webkit-box-shadow: 0px 0px 10px 0px {color:borders};
  836. -moz-box-shadow: 0px 0px 10px 0px {color:borders};
  837. box-shadow: 0px 0px 10px 0px {color:borders}; }
  838.  
  839. .navi-links { position:absolute; width:150px; height:150px; left:15px; top:15px; }
  840.  
  841. .navi-links li { display:block; float:left; width:40px; height:40px; margin:5px; border-radius:5px; text-align:center; }
  842.  
  843. .navi-links .iconify { color:{color:container}; font-size:18px; margin-top:10px; }
  844.  
  845. .tube { position:absolute; width:220px; height:140px; bottom:20px; right:25px; border:1px solid {color:borders}; text-align:center;
  846.  
  847. -webkit-box-shadow: 0px 0px 10px 0px {color:borders};
  848. -moz-box-shadow: 0px 0px 10px 0px {color:borders};
  849. box-shadow: 0px 0px 10px 0px {color:borders}; }
  850.  
  851. .tube img { width:220px; height:110px; margin-top:-81px; }
  852.  
  853. .tube .iconify { color:{color:container}; font-size:35px; margin-top:40px; }
  854.  
  855. .tube-bottom { position:absolute; width:220px; height:30px; bottom:0px; right:0px; background:{color:accent}; overflow:hidden; }
  856.  
  857. .tube-play { position:absolute; width:30px; height:30px; left:0px; bottom:0px; text-align:center; }
  858.  
  859. .tube-play .iconify { color:{color:container}; font-size:15px; margin-top:7.5px; }
  860.  
  861. .tube-time { position:absolute; width:160px; height:10px; left:30px; top:10px; background:{color:container}; }
  862.  
  863. .tube-time2 { width:60%; height:100%; left:0px; top:0px; background:{color:accent3}; }
  864.  
  865. .tube-enlarge { position:absolute; width:30px; height:30px; right:0px; bottom:0px; text-align:center; }
  866.  
  867. .tube-enlarge .iconify { color:{color:container}; font-size:15px; margin-top:7.5px; }
  868.  
  869. .speech-bubble { position:absolute; width:30px; height:30px; background:{color:accent}; border-radius:4px; bottom:120px; left:22.5px; z-index:99; }
  870.  
  871. .speech-bubble:after { content: ''; position:absolute; bottom:0; left:50%; width:0; height:0; border:20px solid transparent; border-top-color:{color:accent}; border-bottom:0; border-right:0; margin-left:-10px; margin-bottom:-7px; z-index:99; }
  872.  
  873. .speech-bubble .iconify { position:absolute; color:{color:container}; font-size:18px; top:6px; left:6px; z-index:999; text-align:center; }
  874.  
  875. .location { position:absolute; width:100px; height:20px; left:3px; bottom:62px; color:{color:accent2}; font-family:"poppins"; font-weight:bold; text-transform:uppercase; font-size:9px; letter-spacing:1px;
  876.  
  877. -webkit-transform: rotate(-90deg);
  878. -moz-transform: rotate(-90deg);
  879. -ms-transform: rotate(-90deg);
  880. -o-transform: rotate(-90deg); }
  881.  
  882. .location .iconify { color:{color:accent}; font-size:12px; vertical-align:-2px; }
  883.  
  884.  
  885. /* MUSE TAB */
  886.  
  887. .muses { position:absolute; width:300px; height:365px; overflow:scroll; top:0px; left:16px; padding-top:13px; }
  888.  
  889. .muses li { display:inline-block; float:left; width:50px; height:50px; background:{color:container}; margin:10px; border:1px solid {color:borders}; padding:10px;
  890.  
  891. -webkit-box-shadow: 0px 0px 10px 0px {color:borders};
  892. -moz-box-shadow: 0px 0px 10px 0px {color:borders};
  893. box-shadow: 0px 0px 10px 0px {color:borders}; }
  894.  
  895. .muses img { width:50px; height:50px; }
  896.  
  897.  
  898. /* POPUP */
  899.  
  900. #fade { position: fixed; width:100%; height:100%; left:0; top:0;background:{color:background}; background-image:url({image:background}); background-attachment:fixed; background-repeat:repeat; display:none; z-index:9999; }
  901.  
  902. .popup_block { position:fixed; height:400px; top:50%; left:50%; background:{color:accent4}; display:none; z-index:99999999; }
  903.  
  904. .popup-bg { position:absolute; width:440px; height:360px; margin:auto; top:0px; right:0px; bottom:0px; left:0px; background:{color:container}; border:1px solid {color:borders};
  905.  
  906. -webkit-box-shadow: 0px 0px 10px 0px {color:borders};
  907. -moz-box-shadow: 0px 0px 10px 0px {color:borders};
  908. box-shadow: 0px 0px 10px 0px {color:borders}; }
  909.  
  910. .popup-graph { position:absolute; width:180px; height:360px; bottom:0px; left:0px; }
  911.  
  912. .popup-graph { width:180px; height:360px; }
  913.  
  914. .popup-title { position:absolute; width:320px; height:100px; top:10px; right:0px; color:{color:accent}; font-family:"cocogoose"; font-size:50px; line-height:50px; text-align:center; text-transform:uppercase; letter-spacing:-2px; overflow:hidden; }
  915.  
  916. .popup-stats { position:absolute; width:240px; height:100px; top:125px; right:5px; overflow:scroll; }
  917.  
  918. .popup-stats li { display:inline-block; float:left; width:auto; height:auto; padding:0px 5px 0px 5px; border-radius:3px; background:{color:accent3}; font-family:"poppins"; font-size:8px; margin:5px; }
  919.  
  920. .popup-desc { position:absolute; width:200px; height:110px; overflow:scroll; right:0px; bottom:20px; padding:0px 30px 0px 30px; }
  921.  
  922. .popup-close { position:absolute; width:200px; height:20px; padding:15px; right:-125px; top:85px; font-family:"poppins"; font-size:10px; letter-spacing:1px;
  923.  
  924. -webkit-transform: rotate(90deg);
  925. -moz-transform: rotate(90deg);
  926. -ms-transform: rotate(90deg);
  927. -o-transform: rotate(90deg); }
  928.  
  929.  
  930.  
  931.  
  932. /*--- 10: CUSTOM CSS ---*/
  933.  
  934.  
  935.  
  936.  
  937. {CustomCSS}
  938. </style></head><body>
  939.  
  940.  
  941.  
  942. <!-- EDIT YOUR POPUP INFO HERE -->
  943.  
  944. <div id="popup" class="popup_block scale-in-center">
  945.  
  946. <div class="popup-close"> click away to close <i>!</i> </div>
  947.  
  948. <div class="popup-bg">
  949.  
  950. <div class="popup-graph"> <img src="{image:popup}"> </div>
  951.  
  952. <!--- edit your popup title here -->
  953. <div class="popup-title"> title goes here <i>!</i> </div>
  954.  
  955. <!--- edit your popup stats here --->
  956. <div class="popup-stats">
  957.  
  958. <li> name: alias </li>
  959. <li> pronouns: she/her </li>
  960. <li> timezone: tz </li>
  961. <li> established: 2016 </li>
  962. <li> status: active </li>
  963. <li> type: theme blog </li>
  964. <li> stat: stat </li>
  965. <li> stat: stat </li>
  966.  
  967. </div>
  968.  
  969. <!--- edit your popup desc here -->
  970. <div class="popup-desc">
  971.  
  972. your popup desc goes here <i>!</i> you can put here whatever you want ; updates , a quote , guidelines , etc <i>!!</i> Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi.
  973.  
  974. </div>
  975.  
  976. </div>
  977.  
  978. </div>
  979.  
  980. <div id="container">
  981.  
  982. <!-- top bar --->
  983.  
  984. <div id="top-bar">
  985.  
  986. <div class="top-one">
  987.  
  988. <div class="one-dots"> &bull; <b>&bull;</b> <span>&bull;</span></div>
  989.  
  990. <!-- tab -->
  991.  
  992. <div class="tab"> <li> <p style="text-align:left;"> <span class="iconify" data-icon="carbon:haze" data-inline="false"></span> welcome! </a> <span style="float:right;"> <span class="iconify" data-icon="carbon:close" data-inline="false"></span> </span> </p> </li> </div>
  993.  
  994. <!-- end tab -->
  995.  
  996. </div>
  997.  
  998. <div class="top-two">
  999.  
  1000. <div class="two-left"> <span class="iconify" data-icon="mdi:arrow-left" data-inline="false"></span> <span class="iconify" data-icon="mdi:arrow-right" data-inline="false"></span> <span class="iconify" data-icon="mdi:refresh" data-inline="false"></span></div><div class="two-middle"><p style="text-align:left;"> <span class="iconify" data-icon="mdi:lock" data-inline="false"></span>{name}.tumblr.com<span style="float:right;"><span class="iconify" data-icon="mdi:google-translate" data-inline="false"></span><span class="iconify" data-icon="mdi:star-outline" data-inline="false"></span></span></p></div><div class="two-right"> <span class="iconify" data-icon="mdi:puzzle" data-inline="false"></span><span class="iconify" data-icon="mdi:dots-vertical" data-inline="false"></span></div>
  1001.  
  1002. </div>
  1003.  
  1004. </div>
  1005.  
  1006. <!-- end top bar --->
  1007.  
  1008. <div id="leftbar"> <div class="left-top"> <div class="left-icon"> <a href="#?w=480" rel="popup" class="poplight"> <span class="iconify" data-icon="ei:calendar" data-inline="false"></span> <br> updates </a></div></div> <div class="left-bottom"> </div></div>
  1009.  
  1010. <div id="sidebar">
  1011.  
  1012. <div class="title"> {text:title} </div>
  1013.  
  1014. <div class="pattern"><img src="{image:sidebar}" draggable="false"></div>
  1015.  
  1016. <div class="profile-border scale-in-center">
  1017.  
  1018. <div class="profile">
  1019.  
  1020. <div class="profile-icon"> <img src="{image:profile}" draggable="false"> </div> <div class="profile-symbol"> <span class="iconify" data-icon="ei:camera" data-inline="false"></span> </div>
  1021.  
  1022. <div class="profile-info"> <li> <div class="info-symbol"> <span class="iconify" data-icon="ei:user" data-inline="false"></span> </div> <div class="info-user"> <b>user</b> <br> {text:user} </div>
  1023. <div class="info-symbol2"> <span class="iconify" data-icon="ei:pencil" data-inline="false"></span> </div></li>
  1024.  
  1025.  
  1026. <li> <div class="info-symbol"> <span class="iconify" data-icon="ei:question" data-inline="false"></span></div> <div class="info-user"> <b>profile</b> <br> {text:profile} </div>
  1027. <div class="info-symbol2"> <span class="iconify" data-icon="ei:pencil" data-inline="false"></span> </div></li>
  1028.  
  1029. </div>
  1030.  
  1031. </div>
  1032.  
  1033. </div>
  1034.  
  1035. <div class="contact-border scale-in-center">
  1036.  
  1037. <div class="contact">
  1038.  
  1039. <div class="contact-top"> <div class="searchbar"> search contacts... </div></div>
  1040.  
  1041. <div class="contact-right"> # A B C D E F G H I J K L M N O P Q R S T U V W X Y Z </div>
  1042.  
  1043. <div class="contact-list"><li> <div class="contact-icon" style="background:{color:accent}; opacity:.2;"> </div>
  1044.  
  1045. <div class="contact-link"> <a href="/">𓂃 ˚ ⋆ REFRESH </a></div> </li>
  1046.  
  1047. <li> <div class="contact-icon" style="background:{color:accent}; opacity:.4;"> </div> <div class="contact-link"> <a href="/ask"> 𓂃 ˚ ⋆ ASKBOX. </a> </div> </li>
  1048.  
  1049. <li> <div class="contact-icon" style="background:{color:accent}; opacity:.6;"> </div> <div class="contact-link"> <a href="#" class="tablinks" onclick="openCity(event, 'atlas')"> 𓂃 ˚ ⋆ NAVIGATE. </a> </div> </li>
  1050.  
  1051. <li> <div class="contact-icon" style="background:{color:accent}; opacity:.8;"> </div> <div class="contact-link">
  1052.  
  1053. {block:ifmusetab} <a href="#" class="tablinks" onclick="openCity(event, 'muses')"> 𓂃 ˚ ⋆ MUSES. </a> {/block:ifmusetab}
  1054.  
  1055. {block:ifNotmusetab} <a href="{text:no muse tab url}"> 𓂃 ˚ ⋆ {text:no muse tab txt} </a> {/block:ifNotmusetab}
  1056.  
  1057. </div> </li>
  1058.  
  1059. <li> <div class="contact-icon" style="background:{color:accent}; opacity:1;"> </div> <div class="contact-link"> <a href="{text:free link url}"> 𓂃 ˚ ⋆ {text:free link txt}. </div> </a></li>
  1060.  
  1061. </div>
  1062.  
  1063. </div>
  1064.  
  1065. </div>
  1066.  
  1067. <div class="reminder-border scale-in-center"> <div class="reminder"> <span class="iconify" data-icon="ei:envelope" data-inline="false"></span> <div class="reminder-text"> <b>reminder!</b> <p style="margin-top:5px;"> {text:reminder} </p> </div></div></div>
  1068.  
  1069.  
  1070. <div class="icon-border scale-in-center"> <div class="icon"> <img src="{image:icon}" draggable="false"> </div> </div>
  1071.  
  1072. </div>
  1073.  
  1074.  
  1075.  
  1076. <!-- TABS: navigation -->
  1077.  
  1078. <div id="atlas" class="tabcontent" display="none"> <button> click to close </button>
  1079.  
  1080. <div class="tabbox">
  1081.  
  1082.  
  1083. <div class="folders">
  1084.  
  1085. <li> <div class="folder-one"></div> <div class="folder-two"></div> {text:folder1} </li>
  1086. <li> <div class="folder-one"></div> <div class="folder-two"></div> {text:folder2} </li>
  1087. <li> <div class="folder-one"></div> <div class="folder-two"></div> {text:folder3} </li>
  1088.  
  1089. </div>
  1090.  
  1091. <div class="nlinks-border">
  1092. <div class="nlinks">
  1093. <div class="navi-links">
  1094.  
  1095. <li style="background:{color:accent};"> <a href="{text:link1}" title="{text:link1title}"> <span class="iconify" data-icon="tabler:brand-telegram" data-inline="false"></span> </a>
  1096. <li style="background:{color:accent3};"> <a href="{text:link2}" title="{text:link2title}"> <span class="iconify" data-icon="tabler:puzzle" data-inline="false"></span> </a>
  1097. <li style="background:{color:accent2};"> <a href="{text:link3}" title="{text:link3title}"> <span class="iconify" data-icon="tabler:plant" data-inline="false"></span> </a>
  1098.  
  1099. <li style="background:{color:accent3};"> <a href="{text:link4}" title="{text:link4title}"> <span class="iconify" data-icon="tabler:polaroid" data-inline="false"></span> </a>
  1100. <li style="background:{color:accent2};"> <a href="{text:link5}" title="{text:link5title}"> <span class="iconify" data-icon="tabler:pin" data-inline="false"></span> </a>
  1101. <li style="background:{color:accent};"> <a href="{text:link6}" title="{text:link6title}"> <span class="iconify" data-icon="tabler:star" data-inline="false"></span> </a>
  1102.  
  1103. <li style="background:{color:accent2};"> <a href="{text:link7}" title="{text:link7title}"> <span class="iconify" data-icon="tabler:paperclip" data-inline="false"></span> </a>
  1104. <li style="background:{color:accent};"> <a href="{text:link8}" title="{text:link8title}"> <span class="iconify" data-icon="tabler:planet" data-inline="false"></span> </a>
  1105. <li style="background:{color:accent3};"> <a href="{text:link9}" title="{text:link9title}"> <span class="iconify" data-icon="tabler:palette" data-inline="false"></span> </a>
  1106.  
  1107. </div>
  1108. </div>
  1109. </div>
  1110.  
  1111. <div class="tube"> <span class="iconify" data-icon="tabler:player-play" data-inline="false"></span> <img src="{image:navi}" draggable="false"> <div class="tube-bottom"> <div class="tube-play"> <span class="iconify" data-icon="tabler:player-pause" data-inline="false"></span> </div> <div class="tube-time"> <div class="tube-time2"> </div></div> <div class="tube-enlarge"> <span class="iconify" data-icon="tabler:arrows-maximize" data-inline="false"></span> </div></div></div> <div class="speech-bubble"> <span class="iconify" data-icon="bi:suit-heart-fill" data-inline="false"></span> </div> <div class="location"> <span class="iconify" data-icon="tabler:at" data-inline="false"></span> {text:username} </div>
  1112.  
  1113. </div>
  1114. </div>
  1115.  
  1116.  
  1117.  
  1118.  
  1119. <!-- TABS: muses -->
  1120.  
  1121. <div id="muses" class="tabcontent" display="none"> <button> click to close </button>
  1122.  
  1123. <div class="tabbox">
  1124.  
  1125. <!--- edit your muses here !! -->
  1126.  
  1127. <div class="muses">
  1128.  
  1129. <li> <a href="/" title="muse info goes here!"> <img src="https://via.placeholder.com/50x50" draggable="false"> </a></li>
  1130. <li> <a href="/" title="muse info goes here!"> <img src="https://via.placeholder.com/50x50" draggable="false"> </a></li>
  1131. <li> <a href="/" title="muse info goes here!"> <img src="https://via.placeholder.com/50x50" draggable="false"> </a></li>
  1132.  
  1133. <li> <a href="/" title="muse info goes here!"> <img src="https://via.placeholder.com/50x50" draggable="false"> </a></li>
  1134. <li> <a href="/" title="muse info goes here!"> <img src="https://via.placeholder.com/50x50" draggable="false"> </a></li>
  1135. <li> <a href="/" title="muse info goes here!"> <img src="https://via.placeholder.com/50x50" draggable="false"> </a></li>
  1136.  
  1137. <li> <a href="/" title="muse info goes here!"> <img src="https://via.placeholder.com/50x50" draggable="false"> </a></li>
  1138. <li> <a href="/" title="muse info goes here!"> <img src="https://via.placeholder.com/50x50" draggable="false"> </a></li>
  1139. <li> <a href="/" title="muse info goes here!"> <img src="https://via.placeholder.com/50x50" draggable="false"> </a></li>
  1140.  
  1141. <li> <a href="/" title="muse info goes here!"> <img src="https://via.placeholder.com/50x50" draggable="false"> </a></li>
  1142. <li> <a href="/" title="muse info goes here!"> <img src="https://via.placeholder.com/50x50" draggable="false"> </a></li>
  1143. <li> <a href="/" title="muse info goes here!"> <img src="https://via.placeholder.com/50x50" draggable="false"> </a></li>
  1144.  
  1145. <li> <a href="/" title="muse info goes here!"> <img src="https://via.placeholder.com/50x50" draggable="false"> </a></li>
  1146. <li> <a href="/" title="muse info goes here!"> <img src="https://via.placeholder.com/50x50" draggable="false"> </a></li>
  1147. <li> <a href="/" title="muse info goes here!"> <img src="https://via.placeholder.com/50x50" draggable="false"> </a></li>
  1148.  
  1149. </div>
  1150. </div>
  1151. </div>
  1152.  
  1153.  
  1154. <!--- POSTS --->
  1155.  
  1156. <div id="posts" class="scale-in-center">
  1157. {block:Posts}
  1158. <div class="entry">
  1159.  
  1160. <!-- TOP INFO --->
  1161.  
  1162. <div class="topinfo"> <p style="text-align:left;"> <a href="{Permalink}" title="posted {TimeAgo} with {NoteCountWithLabel}."> <span class="iconify" data-icon="clarity:calendar-line" data-inline="false" style="font-size:10px; vertical-align:-2px; padding-right:2px;"></span> {Month} {Year}</a> <span style="float:right;"> <a href="{ReblogURL}" target="_blank" title="reblog this post?"> <span class="iconify" data-icon="clarity:repeat-line" data-inline="false" style="font-size:10px; vertical-align:-2px; padding-right:1px;"></span> reblog</a> {block:ContentSource} <a href="{SourceURL}" title="posted by {SourceTitle}."> <span class="iconify" data-icon="clarity:directory-line" data-inline="false" style="font-size:10px; vertical-align:-2px; padding-left:7px;"></span> source</a>{/block:ContentSource} </span></p> </div>
  1163.  
  1164. <!-- TEXT --->
  1165.  
  1166. {block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}{Body}{/block:Text}
  1167.  
  1168. <!-- PHOTOS --->
  1169.  
  1170. {block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{/block:Photo}
  1171.  
  1172. {block:Photoset} {block:IndexPage}{Photoset-500}{/block:IndexPage} {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage} {/block:Photoset}
  1173.  
  1174. <!-- QUOTE --->
  1175.  
  1176. {block:Quote} <div class="quote"> {Quote} </div> <div class="source"> — {Source} </div> {/block:Quote}
  1177.  
  1178. <!-- LINKS --->
  1179.  
  1180. {block:Link} <div class="linktitle"> <a href="{URL}"><h1>{Name}</h1></a></div>
  1181. {block:Description} <p>{Description}</p> {/block:Description}{/block:Link}
  1182.  
  1183. <!-- CHATS --->
  1184.  
  1185. {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}
  1186. {Line}</li>{/block:Lines}</ul> <div class="delivered"> <span class="fas fa-check"></span> delivered. </div> {/block:Chat}
  1187.  
  1188. <!-- AUDIO --->
  1189.  
  1190. {block:Audio}
  1191. {block:AlbumArt}
  1192. <div class="albumart"> <img src="{AlbumArtURL}"/>{/block:AlbumArt} <div class="albumtrack"> {AudioPlayerGrey} </div> </div>
  1193. <div class="albuminfo"><div class="albuminfotxt">
  1194. {block:TrackName} <b>{TrackName}</b> {/block:TrackName} <br/> by {block:Artist} {Artist} {/block:Artist}
  1195. </div></div>
  1196. {/block:Audio}
  1197.  
  1198. <!-- VIDEO --->
  1199.  
  1200. {block:Video}<div class="video">{Video-500}</div>{/block:Video}
  1201.  
  1202. <!-- ASKS --->
  1203.  
  1204. {block:Answer}<div id="question">{Question} <div id="asker">written by {Asker}</div></div>{Answer} {/block:Answer}
  1205.  
  1206. <!-- POST CAPTIONS --->
  1207.  
  1208. {block:Caption}{Caption}{/block:Caption}
  1209.  
  1210. <!-- READ MORE --->
  1211.  
  1212. {block:More}<div class="more"><a href="{Permalink}" class="more-btn">read more</a></div>{/block:More}
  1213.  
  1214. <!-- TAGS --->
  1215.  
  1216. {block:HasTags} <div class="tags"> <i>with keywords: </i> {block:Tags}<a href="{TagURL}"># {Tag}, </a> &nbsp;{/block:Tags}<br></div>{/block:HasTags}
  1217.  
  1218. <!-- POST NOTES --->
  1219.  
  1220. <div class="note"> {block:PostNotes}{PostNotes}{/block:PostNotes} </div>
  1221.  
  1222.  
  1223. </div>
  1224. {/block:Posts}
  1225.  
  1226.  
  1227. <!-- PAGINATION -->
  1228.  
  1229. {block:Pagination} <div class="pagination"> {block:previouspage} <a href="{previouspage}"> <span class="iconify" data-icon="ei:chevron-left" data-inline="false"></span> </a> {/block:previouspage} {block:nextpage} <a href="{nextpage}"> <span class="iconify" data-icon="ei:chevron-right" data-inline="false"></span> </a> {/block:nextpage} </div> {/block:pagination}
  1230.  
  1231.  
  1232. </div>
  1233. </div>
  1234.  
  1235. </div>
  1236.  
  1237.  
  1238.  
  1239.  
  1240. <!-- CREDIT -->
  1241.  
  1242. <div class="cred">
  1243. <a href="http://capitae.tumblr.com" title="coded by julie."> <span class="th th-holly-o"></span> </a>
  1244. </div>
  1245.  
  1246.  
  1247.  
  1248.  
  1249. </body>
  1250. </html>
  1251.  
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!