API tools faq
paste
lovesjoon

TAKOOTA, single muse: non contained

lovesjoon
Sep 9th, 2020 (edited)
573
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 49.67 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 08: TAKOOTA by TWENTYS.
  14.  
  15.  
  16. ・｡* version 2: non contained.
  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=""/>
  51. <meta name="image:sidebar" content=""/>
  52. <meta name="image:navi" content=""/>
  53.  
  54. <meta name="color:background" content="#232323"/>
  55. <meta name="color:container" content="#3f3f3f"/>
  56. <meta name="color:container2" content="#262626"/>
  57. <meta name="color:posts" content="#262626"/>
  58. <meta name="color:borders" content="#333333"/>
  59. <meta name="color:accent" content="#e9c2a1"/>
  60. <meta name="color:accent2" content="#ffffff"/>
  61. <meta name="color:window borders" content="#1e1e1e"/>
  62. <meta name="color:paint bg" content="#5b5b5b"/>
  63. <meta name="color:paint scroll" content="#848484"/>
  64. <meta name="color:notepad bg" content="#333333"/>
  65. <meta name="color:sidebar text" content="#fff"/>
  66. <meta name="color:cloud1" content="#eee"/>
  67. <meta name="color:cloud2" content="#eee"/>
  68. <meta name="color:cloud shadow" content="#999"/>
  69. <meta name="color:photodetails" content="#fff"/>
  70. <meta name="color:text" content="#acacac"/>
  71. <meta name="color:links" content="#eaeaea"/>
  72. <meta name="color:hover" content="#98a3a9"/>
  73. <meta name="color:bold" content="#d8d6d7"/>
  74. <meta name="color:italic" content="#98a3a9"/>
  75.  
  76. <meta name="select:body font" content="abeezee" title="abeezee"/>
  77. <meta name="select:body font" content="open sans" title="open sans"/>
  78. <meta name="select:body font" content="montserrat" title="montserrat"/>
  79. <meta name="select:body font" content="poppins" title="poppins"/>
  80. <meta name="select:body font" content="ibm plex sans" title="ibm plex sans"/>
  81. <meta name="select:body font" content="inconsolata" title="inconsolata"/>
  82. <meta name="select:body font" content="raleway" title="raleway"/>
  83. <meta name="select:body font" content="josefin sans" title="josefin sans"/>
  84. <meta name="select:body font" content="libre baskerville" title="libre baskerville"/>
  85.  
  86. <meta name="select:font size" content="9" title="9px"/>
  87. <meta name="select:font size" content="10" title="10px"/>
  88. <meta name="select:font size" content="11" title="11px"/>
  89. <meta name="select:font size" content="12" title="12px"/>
  90.  
  91. <meta name="if:400px posts" content="1"/>
  92. <meta name="if:muse tab" content="1" />
  93. <meta name="if:border radius" content="1"/>
  94. <meta name="if:grayscale" content="1"/>
  95. <meta name="if:floating clouds" content="1"/>
  96. <meta name="if:navi graph" content="1"/>
  97.  
  98. <meta name="text:title1" content="solstice"/>
  99. <meta name="text:title2" content="light. *"/>
  100. <meta name="text:optional link hover" content="link hover."/>
  101. <meta name="text:optional link url" content="link url"/>
  102. <meta name="text:desc" content="*** Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"/>
  103. <meta name="text:paint" content="untitled - pain(t).docs."/>
  104. <meta name="text:notepad" content="desc - notepad.txt"/>
  105. <meta name="text:note" content="notepad text ! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."/>
  106. <meta name="text:color" content="#7c2e1d."/>
  107.  
  108.  
  109.  
  110.  
  111. <!--- PT. 1: SCRIPTS: JQUERY + TOOLTIP + TABS + FONTS ---->
  112.  
  113.  
  114.  
  115.  
  116. <!--- JQUERY SCRIPTS --->
  117.  
  118. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  119. <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
  120.  
  121.  
  122.  
  123. <!--- TOOLTIP SCRIPT ---->
  124.  
  125. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  126. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  127. <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>
  128.  
  129.  
  130.  
  131. <!--- GOOGLE + ICON FONTS ---->
  132.  
  133. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  134. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/v4-shims.css">
  135.  
  136. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  137.  
  138. <script src="https://unpkg.com/feather-icons"></script>
  139.  
  140. <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">
  141.  
  142.  
  143. <!-- POST STYLING FONTS -->
  144.  
  145. <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Lato&display=swap" rel="stylesheet">
  146.  
  147. <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap" rel="stylesheet">
  148.  
  149.  
  150. <!-- BODY FONTS -->
  151.  
  152. <link href="https://fonts.googleapis.com/css2?family=ABeeZee&display=swap" rel="stylesheet">
  153.  
  154. <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
  155.  
  156. <link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
  157.  
  158. <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
  159.  
  160. <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
  161.  
  162. <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
  163.  
  164. <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
  165.  
  166. <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet">
  167.  
  168. <link href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap" rel="stylesheet">
  169.  
  170.  
  171.  
  172.  
  173. <!--- VIDEO SCRIPT BY SHYTHEMES ---->
  174.  
  175. <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>
  176.  
  177.  
  178.  
  179.  
  180. <!--- TAB SCRIPT by www.w3schools.com ---->
  181.  
  182. <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>
  183.  
  184.  
  185.  
  186. <!--- FADE OUT SCRIPT by beginnersbook.com ---->
  187.  
  188. <script>
  189. $(document).ready(function(){
  190. $("button").click(function(){
  191. $(".tabcontent").fadeOut("slow");
  192. });
  193. });
  194. </script>
  195.  
  196.  
  197.  
  198. <!--- POPUP SCRIPT by themekid ---->
  199. <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>
  200.  
  201.  
  202.  
  203.  
  204. <style type="text/css">
  205.  
  206.  
  207.  
  208.  
  209. /*---PT. 2: TOOLTIP + SCROLLBAR + SELECTION---*/
  210.  
  211.  
  212.  
  213.  
  214. /*TOOLTIP*/
  215.  
  216. #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; font-weight:bold; letter-spacing:1px; }
  217.  
  218.  
  219. /*SCROLLBAR*/
  220.  
  221. ::-webkit-scrollbar-thumb { display:none; }
  222.  
  223. ::-webkit-scrollbar { display:none; }
  224.  
  225.  
  226. /*SELECTION*/
  227.  
  228. ::-moz-selection { background:{color:accent}; color:{color:posts}; }
  229.  
  230. ::selection { background:{color:accent}; color:{color:posts};}
  231.  
  232.  
  233.  
  234.  
  235. /*---PT. 3: BODY + TEXT STYLING---*/
  236.  
  237.  
  238.  
  239.  
  240. /*BODY*/
  241.  
  242. body { width:100%; height:100%; background:{color:background}; background-image:url({image:background}); backound-attachment:fixed; background-repeat:repeat; color:{color:text}; margin:0; padding:0; text-align:justify;
  243.  
  244. font-family:{select:body font};
  245. font-size:{select:font size}px;
  246. line-height: -moz-calc({select:font size}px + 8px);
  247. line-height: -webkit-calc({select:font size}px + 8px);
  248. line-height: -o-calc({select:font size}px + 8px);
  249. line-height: calc({select:font size}px + 8px); }
  250.  
  251.  
  252. /*FIX*/
  253.  
  254. iframe, img, embed, object { max-width:100%; margin:auto; border:none; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  255.  
  256. iframe:hover, img:hover, embed:hover, object:hover { {block:ifGrayscale} filter: grayscale(0%);
  257.  
  258. -webkit-transition: all .8s;
  259. -moz-transition: all .8s;
  260. -o-transition: all .8s;
  261. -ms-transition: all .8s;
  262. transition: all .8s; {/block:ifGrayscale} }
  263.  
  264. img { max-width:100%; height:auto; margin:auto; border:none; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  265.  
  266. img:hover { {block:ifGrayscale} filter: grayscale(0%);
  267.  
  268. -webkit-transition: all .8s;
  269. -moz-transition: all .8s;
  270. -o-transition: all .8s;
  271. -ms-transition: all .8s;
  272. transition: all .8s; {/block:ifGrayscale} }
  273.  
  274.  
  275. /*TEXT STYLING*/
  276.  
  277. select, textarea, input, a { outline:none; }
  278.  
  279. p { margin-top:5px; margin-bottom:5px; }
  280.  
  281. small, sub, sup { font-size:100%; }
  282.  
  283. big { font-size:110%; }
  284.  
  285. h1 { color:{color:title}; margin-top:30px; font-family: 'Abril Fatface', cursive; text-align:center; line-height:28px; word-spacing:2px; font-weight:normal;
  286.  
  287. font-size: -moz-calc({select:font size}px + 20px);
  288. font-size: -webkit-calc({select:font size}px + 20px);
  289. font-size: -o-calc({select:font size}px + 20px);
  290. font-size: calc({select:font size}px + 20px); }
  291.  
  292. h2 { color:{color:accent}; font-family:'lato', sans-serif; text-transform:uppercase; text-align:center; line-height:18px; letter-spacing:2px;
  293.  
  294. font-size: -moz-calc({select:font size}px + 5px);
  295. font-size: -webkit-calc({select:font size}px + 5px);
  296. font-size: -o-calc({select:font size}px + 5px);
  297. font-size: calc({select:font size}px + 5px); }
  298.  
  299. a { color:{color:links}; font-family:'lato', sans-serif; font-weight:bold; text-transform:uppercase; text-decoration:none; letter-spacing:1px;
  300.  
  301. font-size: -moz-calc({select:font size}px - 1px);
  302. font-size: -webkit-calc({select:font size}px - 1px);
  303. font-size: -o-calc({select:font size}px - 1px);
  304. font-size: calc({select:font size}px - 1px); }
  305.  
  306. a:hover { color:{color:hover};
  307.  
  308. -webkit-transition: all .3s;
  309. -moz-transition: all .3s;
  310. -o-transition: all .3s;
  311. -ms-transition: all .3s;
  312. transition: all .3s; }
  313.  
  314. ul, ol, li { margin:5px 10px; padding:0px; line-height:20px; }
  315.  
  316. b, strong { color:{color:bold}; }
  317.  
  318. i, em { color:{color:italic}; }
  319.  
  320. blockquote { margin:10px; padding-left:20px; border-left:1px solid {color:borders}; }
  321.  
  322.  
  323. /*TUMBLR CONTROLS*/
  324.  
  325. 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; }
  326.  
  327. iframe.tmblr-iframe:hover { opacity:1!important; }
  328.  
  329.  
  330.  
  331.  
  332. /*--- PT. 4: SIDEBAR + LINKS ---*/
  333.  
  334.  
  335.  
  336.  
  337. /*SIDEBAR*/
  338.  
  339. #sidebar { position:fixed; width:550px; height:550px; margin:0px; margin-left:120px; z-index:10; overflow:hidden; top:50%;
  340.  
  341. -webkit-transform: translateY(-50%);
  342. -moz-transform: translateY(-50%);
  343. -ms-transform: translateY(-50%);
  344. -o-transform: translateY(-50%);
  345. transform: translateY(-50%); }
  346.  
  347. .title { position:absolute; width:auto; height:20px; right:-8px; top:35px; z-index:999; font-family:'archivo black', sans-serif; color:{color:accent2}; text-transform:uppercase; font-size:40px; border-bottom:5px solid {color:accent}; padding-bottom:10px; }
  348.  
  349. .title2 { position:absolute; width:auto; height:auto; left:-5px; bottom:65px; font-family:'archivo black', sans-serif; color:{color:accent2}; text-transform:uppercase; font-size:30px; z-index:999; border-bottom:5px solid {color:accent}; padding-bottom:5px; }
  350.  
  351. .desc { position:absolute; width:300px; height:35px; left:5px; bottom:20px; font-family:'archivo black', sans-serif; color:{color:text}; text-transform:uppercase; font-size:7px; line-height:12px; overflow:scroll; z-index:999999; }
  352.  
  353. .dots { position:absolute; width:80px; height:140px; top:170px; left:70px; overflow:hidden; word-spacing:3px; line-height:15px; opacity:.5; }
  354.  
  355. .dots2 { position:absolute; width:140px; height:85px; bottom:155px; right:23px; overflow:hidden; word-spacing:3px; line-height:15px; opacity:.5; }
  356.  
  357.  
  358. /*PAINT WINDOW*/
  359.  
  360. .paint { position:absolute; width:372px; height:262px; background:{color:window borders}; right:60px; top:90px; z-index:99; }
  361.  
  362. /*top text*/
  363.  
  364. .painttitle { position:absolute; width:362px; height:20px; background:{color:accent}; left:5px; top:5px; }
  365.  
  366. .painttitle i { color:{color:accent2}; padding-left:4px; margin-top:2px; font-size:16px; }
  367.  
  368. .ptitle { position:absolute; width:250px; height:20px; left:25px; background:transparent; top:0px; color:{color:accent2}; line-height:20px; font-family:'lato', sans-serif; font-size:9px; font-weight:bold; text-transform:uppercase; letter-spacing:1px; }
  369.  
  370. .painttxt { position:absolute; width:362px; height:20px; background:{color:paint bg}; left:5px; top:25px; border-bottom:1px solid {color:window borders}; }
  371.  
  372. .painttxt li { display:inline-block; width:auto; height:20px; line-height:20px; margin:0px 5px 0px 5px; float:left; font-size:9px; color:{color:sidebar text}; }
  373.  
  374. /*buttons*/
  375.  
  376. .tabbox { position:absolute; width:60px; height:188px; background:{color:paint bg}; left:5px; top:46px; border-right:1px solid {color:window borders}; z-index:99; }
  377.  
  378. .tabs { position:absolute; width:54px; height:103px; top:11px; left:4px; }
  379.  
  380. .tabs li { display:inline-block; background:{color:paint scroll}; width:24px; height:25px; float:left; margin:0px -1px -1px 0px; text-align:center; line-height:25px; font-family:'archivo black', sans-serif; font-size:11px; border:1px solid {color:window borders}; }
  381.  
  382. .tabs b { text-align:center; line-height:30px; font-family:'archivo black', sans-serif; font-size:15px; color:{color:accent}; }
  383.  
  384. .tabs a { text-align:center; line-height:25px; font-family:'archivo black', sans-serif; font-size:11px; color:{color:accenttxt}; font-weight:400; letter-spacing:0px; }
  385.  
  386. .tabs a:hover { color:{color:window borders}; }
  387.  
  388. /*image*/
  389.  
  390. .paintimg { position:absolute; width:280px; height:190px; left:66px; top:46px; z-index:9; }
  391.  
  392. .paintimg img { width:280px; height:190px; }
  393.  
  394. /*right scroll*/
  395.  
  396. .scrollright { position:absolute; width:20px; height:190px; background:{color:paint scroll}; right:5px; top:46px; border-left:1px solid {color:window borders}; }
  397.  
  398. .iconup { position:absolute; width:20px; height:20px; top:0px; left:0px; background:{color:paint scroll}; text-align:center; }
  399.  
  400. .iconup i { font-size:15px; color:{color:accenttxt}; line-height:20px; }
  401.  
  402. .icondown { position:absolute; width:20px; height:20px; left:0px; bottom:0px; background:{color:paint scroll}; text-align:center; }
  403.  
  404. .scroll1 { position:absolute; width:18px; height:80px; bottom:40px; left:1px; background:{color:paint bg}; text-align:center; }
  405.  
  406. .icondown i { font-size:15px; color:{color:accenttxt}; line-height:20px; }
  407.  
  408. /*bottom scroll*/
  409.  
  410. .scrollbottom { position:absolute; width:341px; height:20px; background:{color:paint scroll}; left:5px; bottom:5px; }
  411.  
  412. .iconright { position:absolute; width:20px; height:20px; right:0px; bottom:0px; background:{color:paint scroll}; text-align:center; }
  413.  
  414. .iconright i { font-size:15px; color:{color:accenttxt}; line-height:20px; }
  415.  
  416. /*right bottom corner*/
  417.  
  418. .scroll2 { position:absolute; width:20px; height:20px; background:{color:paint bg}; right:5px; bottom:5px; border-left:1px solid {color:window borders}; border-top:1px solid {color:window borders}; }
  419.  
  420.  
  421. /*NOTEPAD WINDOW*/
  422.  
  423. .notepad { position:absolute; width:230px; height:150px; background:{color:notepad bg}; left:25px; bottom:130px; z-index:999; border:5px solid {color:window borders}; }
  424.  
  425. .notepad i { color:{color:accent2}; padding-left:4px; margin-top:5px; font-size:14px; }
  426.  
  427. .notetitle { position:absolute; width:130px; height:20px; top:2px; left:23px; font-family:'lato', sans-serif; font-size:8px; font-weight:bold; text-transform:uppercase; letter-spacing:1px; color:{color:accent2}; }
  428.  
  429. .notesymbols { position:absolute; width:40px; height:20px; top:0px; right:40px; word-spacing:3px; }
  430.  
  431. .notesymbols i { color:{color:accent2}; font-size:8px; }
  432.  
  433. .noteclose { position:absolute; width:35px; height:20px; top:0px; right:5px; background:#e32121; color:{color:photodetails}; text-align:center; font-size:10px; line-height:19px; font-weight:bold; }
  434.  
  435. .notetxt { position:absolute; width:218px; height:20px; top:25px; left:5px; background:{color:paint bg}; border:1px solid {color:window borders}; }
  436.  
  437. .notetxt li { display:inline-block; width:auto; height:20px; line-height:18px; margin:0px 0px 0px 5px; float:left; font-size:9px; color:{color:sidebar text}; }
  438.  
  439. .notedesc { position:absolute; width:218px; height:98px; top:45px; right:5px; background:{color:paint scroll}; border:1px solid {color:window borders}; color:{color:accenttxt}; overflow:hidden; }
  440.  
  441. .notedesc p { width:125px; height:58px; margin-top:20px; margin-left:20px; color:{color:sidebar text}; overflow:scroll; font-size:9px; line-height:15px; }
  442.  
  443.  
  444. /*COLOR PICKER WINDOW*/
  445.  
  446. .colorpicker { position:absolute; width:200px; height:130px; background:{color:paint bg}; left:200px; bottom:110px; z-index:9999; border:5px solid {color:window borders}; }
  447.  
  448. .colorgradient { width:170px; height:110px; margin-top:10px; margin-left:5px; background:linear-gradient(to top right, {color:accent} 0%, {color:accent2} 100%); }
  449.  
  450. .colorgradient i { font-size:20px; color:{color:accent2}; margin-top:70px; margin-left:15px; }
  451.  
  452. .colortxt { position:absolute; width:105px; height:20px; top:55px; right:-38px; font-family:'archivo black', sans-serif; color:{color:accent}; text-transform:uppercase; font-size:15px; line-height:16px; text-align:right;
  453.  
  454. -webkit-transform: rotate(90deg);
  455. -moz-transform: rotate(90deg);
  456. -ms-transform: rotate(90deg);
  457. -o-transform: rotate(90deg); }
  458.  
  459. .floating { animation-name: floating; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
  460.  
  461. @keyframes floating { from { transform: translate(0, 0px); } 65% { transform:translate(0, 15px); } to { transform: translate(0, -0px); } }
  462.  
  463.  
  464.  
  465.  
  466.  
  467. /*--- PT.5: POSTS + ENTRIES ---*/
  468.  
  469.  
  470.  
  471.  
  472. /*POSTS*/
  473.  
  474. #posts { position:fixed; top:0; bottom:0; margin-top:0px; margin-left:700px; width:380px; overflow-x:hidden; overflow-y:auto; z-index:1000; {block:if400pxPosts} width:480px; {/block:if400pxPosts} }
  475.  
  476.  
  477. /*ENTRY STYLING*/
  478.  
  479. .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} }
  480.  
  481. .entry img { margin:0px; padding:0px; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  482.  
  483. .entry img:hover { {block:ifGrayscale} filter: grayscale(0%);
  484.  
  485. -webkit-transition: all .8s;
  486. -moz-transition: all .8s;
  487. -o-transition: all .8s;
  488. -ms-transition: all .8s;
  489. transition: all .8s; {/block:ifGrayscale} }
  490.  
  491.  
  492.  
  493.  
  494. /*--- PT.6: POST INFO + NOTES + PAGINATION + CREDIT---*/
  495.  
  496.  
  497.  
  498.  
  499. .topinfo { width:340px; {block:if400pxPosts} width:440px; {/block:if400pxPosts} height:40px; margin-bottom:20px; border-bottom:1px solid {color:borders}; line-height:40px; text-transform:uppercase; margin-left:-20px; margin-top:-20px; }
  500.  
  501. .topinfo p { margin:0px; padding:0px 10px 0px 10px; }
  502.  
  503. .topinfo a { font-size:9px; }
  504.  
  505. .topinfo b { padding:0px 3px 0px 2px; font-size:10px; }
  506.  
  507. .bottominfo { width:340px; {block:if400pxPosts} width:440px; {/block:if400pxPosts} height:40px; margin-top:20px; border-top:1px solid {color:borders}; border-bottom:1px solid {color:borders}; line-height:40px; text-transform:uppercase; margin-left:-20px; text-align:center; font-family:'lato', sans-serif; }
  508.  
  509. .bottominfo a { padding-left:5px; }
  510.  
  511. .bottominfo a { font-size:9px; line-height:40px; }
  512.  
  513.  
  514. /* TAGS */
  515.  
  516. .tags { width:300px; {block:if400pxPosts} width:400px; {/block:if400pxPosts} padding-top:20px; text-align:justify; line-height:14px; }
  517.  
  518. .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; }
  519.  
  520. .tags a { color:{color:text}; font-family:'lato', sans-serif; padding:0px; font-weight:normal;
  521.  
  522. font-size: -moz-calc({select:font size}px - 2px);
  523. font-size: -webkit-calc({select:font size}px - 2px);
  524. font-size: -o-calc({select:font size}px - 2px);
  525. font-size: calc({select:font size}px - 2px); }
  526.  
  527. .tags a:hover { color:{color:hover}; font-weight:bold; font-style:italic;
  528.  
  529. -webkit-transition: all .3s;
  530. -moz-transition: all .3s;
  531. -o-transition: all .3s;
  532. -ms-transition: all .3s;
  533. transition: all .3s; }
  534.  
  535.  
  536. /* POST NOTES */
  537.  
  538. .note { width:340px; {block:if400pxPosts} width:440px; {/block:if400pxPosts} margin-left:-31px; font-size:10px; text-transform:uppercase; margin-top:20px; }
  539.  
  540. .note li { width:340px; {block:if400pxPosts} width:440px; {/block:if400pxPosts} padding:15px 0px 15px 0px; margin:0; background:{color:posts}; float:left; list-style-type:none; text-align:center; border-left:1px solid {color:borders}; border-right:1px solid {color:borders}; border-top:1px {color:borders} {color:borders}; }
  541.  
  542. .note img.avatar { display:none; }
  543.  
  544.  
  545. /*PAGINATION*/
  546.  
  547. .pagination { width:100%; text-align:center; }
  548.  
  549. .pagination a { padding:8px; word-spacing:2px; }
  550.  
  551. .pagination a:hover { color:{color:links}; }
  552.  
  553. .pagination i { width:10px; height:10px; color:{color:links}; }
  554.  
  555. /* READ MORE */
  556.  
  557. .more { width:100%; text-align:center; margin-top:20px; margin-bottom:5px; }
  558.  
  559. .more a { text-transform:uppercase; font-size:9px; color:{color:posts}; background-color:{color:bold}; padding:4px 11px 4px 11px; font-weight:800; }
  560.  
  561. .more a:hover { text-transform:uppercase; font-size:9px; color:{color:bold}; background-color:{color:background}; padding:4px 11px 4px 11px; font-weight:800; }
  562.  
  563.  
  564. /*CREDIT*/
  565.  
  566. #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; z-index:9999; border:1px solid {color:borders}; }
  567.  
  568. #cred span { padding:10px; font-size:18px; background:-webkit-linear-gradient({color:accent}, {color:accent2});
  569.  
  570. -webkit-background-clip:text;
  571. -webkit-text-fill-color:transparent; }
  572.  
  573.  
  574.  
  575.  
  576. /*---POST STYLING PT. II---*/
  577.  
  578.  
  579.  
  580.  
  581. /* CHATS */
  582.  
  583. .answer span,.convo li { position:relative; max-width:75%; margin:0 0 15px; padding:.9em 10px; border-radius:1em; clear:both; }
  584.  
  585. .answer .them,.user_1,.user_3,.user_5,.user_7,.user_9,.user_11{ left:3px; background:#e6e6e6; color:#555555; float:left; }
  586.  
  587. .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; }
  588.  
  589. .answer .me,.user_2,.user_4,.user_6,.user_8,.user_10,.user_12{ right:3px; background-color:#147efb; color:white; float:right; }
  590.  
  591. .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; }
  592.  
  593. .me p,.answer,.asked span{ margin:0; padding:0; }
  594.  
  595. .answer{ overflow:hidden; }
  596.  
  597. .asked p { margin:0 0px 10px 0px; padding:0; color:white; font-size:{select:font size}px; text-align:left; line-height:0px; }
  598.  
  599. .footerright .viasrc { float:left; }
  600.  
  601. .asked a { margin:0; padding:0; }
  602.  
  603. .user_3{ background-color:#e6e6e6; color:#555555; }
  604.  
  605. .user_3::after{ border-color:#e6e6e6; }
  606.  
  607. .user_4{ background-color:#147efb; color:white; }
  608.  
  609. .user_4::after{ border-color:#147efb; }
  610.  
  611. .user_5{ background-color:#e6e6e6; color:#555555; }
  612.  
  613. .user_5::after{ border-color:#e6e6e6; }
  614.  
  615. .user_6{ background-color:#147efb; color:white; }
  616.  
  617. .user_6::after{ border-color:#147efb; }
  618.  
  619. .user_7{ background-color:#e6e6e6; color:#555555; }
  620.  
  621. .user_7::after{ border-color:#e6e6e6; }
  622.  
  623. .user_8{ background-color:#147efb; color:white; }
  624.  
  625. .user_8::after{ border-color:#147efb; }
  626.  
  627. .user_9{ background-color:#e6e6e6; color:#555555; }
  628.  
  629. .user_9::after{ border-color:#e6e6e6; }
  630.  
  631. .convo { margin:0; padding:0; overflow:hidden; list-style-type:none; }
  632.  
  633.  
  634. /* QUOTES */
  635.  
  636. .quote { color:{color:title}; font-family: 'Abril Fatface', cursive; text-align:center; line-height:28px; word-spacing:2px; font-weight:normal; padding:0px 10px 0px 10px;
  637.  
  638. font-size: -moz-calc({select:font size}px + 20px);
  639. font-size: -webkit-calc({select:font size}px + 20px);
  640. font-size: -o-calc({select:font size}px + 20px);
  641. font-size: calc({select:font size}px + 20px); }
  642.  
  643. .source { text-align:right; margin-top:15px;
  644.  
  645. font-size: -moz-calc({select:font size}px - 1px);
  646. font-size: -webkit-calc({select:font size}px - 1px);
  647. font-size: -o-calc({select:font size}px - 1px);
  648. font-size: calc({select:font size}px - 1px);
  649.  
  650. line-height: -moz-calc({select:font size}px + 8px);
  651. line-height: -webkit-calc({select:font size}px + 8px);
  652. line-height: -o-calc({select:font size}px + 8px);
  653. line-height: calc({select:font size}px + 8px); }
  654.  
  655.  
  656. /* ASKS */
  657.  
  658. #question { padding:10px 20px; padding-bottom:0px; margin:0px; margin-top:5px; margin-bottom:15px; color:{color:text}; background-color:{color:background}; text-align:justify; overflow:hidden;}
  659.  
  660. #asker { width:300px; {block:if400pxPosts} width:400px; {/block:if400pxPosts} height:30px; padding-top:10px; margin:0px; margin-top:0px; margin-left:-30px; padding-right:15px; line-height:23px; margin-bottom:0px; color:{color:posts}; text-align:right; text-transform:uppercase; letter-spacing:1.5px; font-size:8px; background-color:{color:accent}; }
  661.  
  662. #asker a { color:{color:posts}; font-weight:900; }
  663.  
  664.  
  665. /* LINKS */
  666.  
  667. .linktitle { color:{color:title}; font-family: 'Abril Fatface', cursive; text-align:center; line-height:28px; word-spacing:2px; font-weight:normal;
  668.  
  669. font-size: -moz-calc({select:font size}px + 20px);
  670. font-size: -webkit-calc({select:font size}px + 20px);
  671. font-size: -o-calc({select:font size}px + 20px);
  672. font-size: calc({select:font size}px + 20px); }
  673.  
  674.  
  675. /* AUDIO */
  676.  
  677. .playbutton { position:relative; width:33px; height:38px; margin-top:45px; margin-left:35px; overflow:hidden; opacity:.6; z-index:9; }
  678.  
  679. .albumart img { position:relative; width:65px; height:65px; margin-top:-64px; margin-left:10px; padding:10px; background:{color:posts}; border:1px solid {color:borders}; filter: grayscale(0%); }
  680.  
  681. .trackinfo { position:relative; width:185px; {block:if400pxPosts} width:285px; {/block:if400pxPosts} height:66px; top:2px; margin-top:-95px; margin-bottom:20px; margin-left:100px; padding:10px 5px 10px 5px; background:{color:posts}; color:{color:text}; }
  682.  
  683. .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; }
  684.  
  685. .artist { font-size:7px; text-transform:uppercase; text-align:center; letter-spacing:4px; }
  686.  
  687.  
  688. /* VIDEOS */
  689.  
  690. .tumblr_video_container { width:auto!important; height:auto!important; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  691.  
  692. .tumblr_video_container:hover { {block:ifGrayscale} filter: grayscale(0%);
  693.  
  694. -webkit-transition: all .8s;
  695. -moz-transition: all .8s;
  696. -o-transition: all .8s;
  697. -ms-transition: all .8s;
  698. transition: all .8s; {/block:ifGrayscale} }
  699.  
  700.  
  701.  
  702.  
  703.  
  704. /*--- PT.8: TABS ---*/
  705.  
  706.  
  707.  
  708.  
  709. /*TAB + CLOSE CONTENT*/
  710.  
  711. .tabcontent { position:absolute; height:100%;
  712.  
  713. width: -moz-calc(100% - 700px);
  714. width: -webkit-calc(100% - 700px);
  715. width: -o-calc(100% - 700px);
  716. width: calc(100% - 700px);
  717.  
  718. top:50%;
  719.  
  720. -webkit-transform: translateY(-50%);
  721. -moz-transform: translateY(-50%);
  722. -ms-transform: translateY(-50%);
  723. -o-transform: translateY(-50%);
  724. transform: translateY(-50%);
  725.  
  726. right:0px; background:{color:background}; overflow:hidden; z-index:9999; display:none; animation: fadeEffect 1s; }
  727.  
  728. @keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} }
  729.  
  730. .tabcontent button { position:absolute; top:0px; right:0px; padding:15px 0px 15px 15px; background:transparent; color:{color:links}; border:none; z-index:99999; }
  731.  
  732. .tabcontent button:hover { cursor:pointer; }
  733.  
  734. .tabcontent button:focus { outline:0; }
  735.  
  736. .mcon { position:absolute; width:320px; height:350px; left:21px; padding:20px; z-index:10; overflow:hidden;
  737.  
  738. top:50%;
  739.  
  740. -webkit-transform: translateY(-50%);
  741. -moz-transform: translateY(-50%);
  742. -ms-transform: translateY(-50%);
  743. -o-transform: translateY(-50%);
  744. transform: translateY(-50%); }
  745.  
  746. .ncon { position:absolute; width:300px; height:300px; left:21px; padding:20px; z-index:10; overflow:hidden; {block:ifNaviGraph} height:500px; {/block:ifNaviGraph}
  747.  
  748. top:50%;
  749.  
  750. -webkit-transform: translateY(-50%);
  751. -moz-transform: translateY(-50%);
  752. -ms-transform: translateY(-50%);
  753. -o-transform: translateY(-50%);
  754. transform: translateY(-50%); }
  755.  
  756. .tabtitle { position:absolute; width:auto; height:auto; right:-5px; bottom:35px; font-family:'archivo black', sans-serif; color:{color:accent2}; text-transform:uppercase; font-size:23px; z-index:999; border-bottom:5px solid {color:accent}; padding-bottom:5px; }
  757.  
  758.  
  759. /* NAV TAB */
  760.  
  761. .links { position:absolute; width:280px; height:220px; top:50px; left:30px; {block:ifNaviGraph} left:50px; {/block:ifNaviGraph} }
  762.  
  763. .links li { display:inline-block; float:left; width:110px; height:18px; border:10px; padding:5px; margin:10px; line-height:15px; }
  764.  
  765. .links a { color:{color:links}; }
  766.  
  767. .links a:hover { font-style:italic;
  768.  
  769. -webkit-transition: all .8s;
  770. -moz-transition: all .8s;
  771. -o-transition: all .8s;
  772. -ms-transition: all .8s;
  773. transition: all .8s; }
  774.  
  775. .links b { font-family:'archivo black', sans-serif; color:{color:accent}; text-transform:uppercase; font-size:20px; font-weight:normal; padding-right:5px; }
  776.  
  777. .ngraph { position:absolute; width:300px; height:180px; right:0px; bottom:90px; background:{color:notepad bg}; border:5px solid {color:window borders}; z-index:999; }
  778.  
  779. .ngraph img { width:300px; height:180px; }
  780.  
  781. .photoborder { position:absolute; width:270px; height:150px; top:15px; left:15px; border:1px solid {color:photodetails}; }
  782.  
  783. .line1 { position:absolute; width:25px; height:1px; left:15px; top:15px; background:{color:photodetails}; }
  784. .line2 { position:absolute; width:25px; height:1px; right:15px; top:15px; background:{color:photodetails}; }
  785. .line3 { position:absolute; width:1px; height:25px; left:15px; top:15px; background:{color:photodetails}; }
  786. .line4 { position:absolute; width:1px; height:25px; right:15px; top:15px; background:{color:photodetails}; }
  787. .line5 { position:absolute; width:25px; height:1px; left:15px; bottom:15px; background:{color:photodetails}; }
  788. .line6 { position:absolute; width:25px; height:1px; right:15px; bottom:15px; background:{color:photodetails}; }
  789. .line7 { position:absolute; width:1px; height:25px; left:15px; bottom:15px; background:{color:photodetails}; }
  790. .line8 { position:absolute; width:1px; height:25px; right:15px; bottom:15px; background:{color:photodetails}; }
  791.  
  792. .centericon { position:absolute; width:30px; height:25px; margin:auto; left:0px; top:0px; bottom:0px; right:0px; text-align:center; }
  793.  
  794. .centericon i { font-size:25px; line-height:25px; color:{color:photodetails}; }
  795.  
  796. .ntoptxt { position:absolute; width:220px; height:10px; top:20px; left:25px; color:{color:photodetails}; font-family:'lato', sans-serif; font-size:10px; font-weight:bold; text-transform:uppercase; letter-spacing:1px; line-height:10px; }
  797.  
  798. .ntoptxt b { color:red; font-size:11px; }
  799.  
  800. .nbottomtxt { position:absolute; width:220px; height:10px; bottom:20px; left:25px; color:{color:photodetails}; font-family:'lato', sans-serif; font-size:10px; font-weight:bold; text-transform:uppercase; letter-spacing:1px; line-height:10px; text-align:center; }
  801.  
  802.  
  803. /* MUSE TAB */
  804.  
  805. .muses { position:absolute; width:320px; height:350px; top:5px; right:0px; overflow:scroll; }
  806.  
  807. .museicon { position:absolute; width:60px; height:60px; border-radius:100%; background:{color:paint bg}; left:25px; top:25px; }
  808.  
  809. .museicon img { width:60px; height:60px; border-radius:100%; }
  810.  
  811. .musetitle { position:absolute; width:auto; height:auto; right:20px; top:35px; font-family:'archivo black', sans-serif; color:{color:accent2}; text-transform:uppercase; font-size:23px; z-index:999; border-bottom:5px solid {color:accent}; padding-bottom:5px; }
  812.  
  813. .muselinks { position:absolute; width:220px; height:20px; top:70px; right:20px; }
  814.  
  815. .muselinks li { display:block; float:right; width:auto; height:20px; margin:0px 5px 0px 10px; }
  816.  
  817. .muselinks a { text-transform:uppercase; font-weight:bold; font-size:10px; letter-spacing:1px; }
  818.  
  819. .museinfo { position:absolute; width:290px; height:20px; top:95px; left:20px; font-style:italic; letter-spacing:1px; text-align:right; }
  820.  
  821. .musebio { position:absolute; width:300px; height:230px; left:15px; bottom:0px; background:{color:paint bg}; overflow:hidden; }
  822.  
  823. .musestats { position:absolute; width:220px; height:50px; left:20px; top:0px; background:transparent; color:{color:sidebar text}; overflow:scroll; padding:20px; text-align:center; }
  824.  
  825. .musestats b { color:{color:accent}; text-transform:uppercase; letter-spacing:1px; }
  826.  
  827. .musestats span { color:{color:sidebar text}; padding:0px 5px 0px 5px; }
  828.  
  829. .musedesc { position:absolute; width:260px; height:110px; left:0px; bottom:20px; background:transparent; color:{color:sidebar text}; overflow:scroll; padding:0px 20px 0px 20px; }
  830.  
  831. .musedesc b { color:{color:accent}; text-transform:uppercase; letter-spacing:1px; }
  832.  
  833.  
  834.  
  835. /*--- PT.9: CUSTOM CSS ---*/
  836.  
  837.  
  838.  
  839.  
  840. {CustomCSS}
  841. </style></head><body>
  842.  
  843.  
  844. <div id="sidebar">
  845.  
  846. <!-- BIG CLOUD -->
  847.  
  848. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 300" style="enable-background:new 0 0 300 300; position:absolute; z-index:99; top:55px; left:-210px; -webkit-transform: rotate(-1deg); -moz-transform: rotate(-1deg); -ms-transform: rotate(-1deg); -o-transform: rotate(-1deg); filter:url(#shadow2);" xml:space="preserve" width="600" height="170" fill="{color:cloud1}"><filter id="shadow2"><feDropShadow dx="2" dy="2" stdDeviation="6" flood-color="{color:cloud shadow}"/></filter><g {block:ifFloatingClouds}class="floating"{/block:ifFloatingClouds} id="simple-cloud-silhouette-clip-art-11"><path style="stroke:#eee; stroke-width:2;stroke-miterlimit:10;" d="M431,94.631c0-5.202-7.138-11.378-48.629-11.423 c-5.882-5.309-13.65-8.569-22.197-8.569c-1.568,0-3.098,0.146-4.607,0.357c-3.862-20.899-22.149-36.74-44.166-36.74 c-8.357,0-16.153,2.322-22.856,6.294C277.036,18.887,251.283,1,221.336,1c-34.616,0-63.638,23.891-71.516,56.079 c-7.457-5.937-16.882-9.509-27.155-9.509c-19.317,0-35.675,12.558-41.429,29.946c-3.405-3.396-8.102-5.496-13.291-5.496 c-10.395,0-18.822,8.427-18.822,18.822c0,0.149,0.019,0.293,0.022,0.44C5.39,91.887,1,98.114,1,103.843 c0,6.028,4.827,9.217,55.302,9.217c9.869,0,19.363-0.189,28.267-0.535c7.472,13.337,21.721,22.364,38.096,22.364 c9.079,0,17.486-2.795,24.461-7.544c4.113,8.89,13.087,15.07,23.526,15.07c5.102,0,9.845-1.494,13.857-4.038 c10.834,6.28,23.401,9.9,36.827,9.9c10.148,0,19.815-2.054,28.612-5.766c6.673,5.592,15.266,8.968,24.653,8.968 c9.782,0,18.701-3.666,25.483-9.686c3.272,1.063,6.757,1.654,10.384,1.654c10.509,0,19.884-4.829,26.046-12.384 c6.02,6.128,14.392,9.938,23.66,9.938c18.326,0,33.181-14.856,33.181-33.181c0-1.975-0.205-3.898-0.535-5.778 C429.348,101.37,431,99.388,431,94.631z"/></g> <g id="Layer_1"></g></svg>
  849.  
  850. <!-- LITTLE CLOUD -->
  851.  
  852. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 300" style="enable-background:new 0 0 300 300; position:absolute; left:250px; bottom:15px; z-index:99999; filter:url(#shadow);" xml:space="preserve" width="300" height="130" fill="{color:cloud2}"> <filter id="shadow"> <feDropShadow dx="2" dy="2" stdDeviation="6" flood-color="{color:cloud shadow}"/> </filter> <g {block:ifFloatingClouds}class="floating"{/block:ifFloatingClouds} id="simple-cloud-silhouette-clip-art-11"><path style="stroke:#eee; stroke-width:2;stroke-miterlimit:10;" d="M431,94.631c0-5.202-7.138-11.378-48.629-11.423 c-5.882-5.309-13.65-8.569-22.197-8.569c-1.568,0-3.098,0.146-4.607,0.357c-3.862-20.899-22.149-36.74-44.166-36.74 c-8.357,0-16.153,2.322-22.856,6.294C277.036,18.887,251.283,1,221.336,1c-34.616,0-63.638,23.891-71.516,56.079 c-7.457-5.937-16.882-9.509-27.155-9.509c-19.317,0-35.675,12.558-41.429,29.946c-3.405-3.396-8.102-5.496-13.291-5.496 c-10.395,0-18.822,8.427-18.822,18.822c0,0.149,0.019,0.293,0.022,0.44C5.39,91.887,1,98.114,1,103.843 c0,6.028,4.827,9.217,55.302,9.217c9.869,0,19.363-0.189,28.267-0.535c7.472,13.337,21.721,22.364,38.096,22.364 c9.079,0,17.486-2.795,24.461-7.544c4.113,8.89,13.087,15.07,23.526,15.07c5.102,0,9.845-1.494,13.857-4.038 c10.834,6.28,23.401,9.9,36.827,9.9c10.148,0,19.815-2.054,28.612-5.766c6.673,5.592,15.266,8.968,24.653,8.968 c9.782,0,18.701-3.666,25.483-9.686c3.272,1.063,6.757,1.654,10.384,1.654c10.509,0,19.884-4.829,26.046-12.384 c6.02,6.128,14.392,9.938,23.66,9.938c18.326,0,33.181-14.856,33.181-33.181c0-1.975-0.205-3.898-0.535-5.778 C429.348,101.37,431,99.388,431,94.631z"/></g> <g id="Layer_2"></g></svg>
  853.  
  854. <div class="title"> {text:title1} </div>
  855.  
  856. <div class="title2"> {text:title2} </div>
  857.  
  858. <div class="desc"> {text:desc} </div>
  859.  
  860. <div class="dots"> • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • </div>
  861.  
  862. <div class="dots2"> • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • </div>
  863.  
  864. <!-- PAINT WINDOW -->
  865.  
  866. <div class="paint">
  867.  
  868. <div class="painttitle">
  869.  
  870. <i class="material-icons"> palette </i>
  871. <div class="ptitle"> {text:paint} </div>
  872.  
  873. </div>
  874.  
  875.  
  876. <div class="painttxt">
  877.  
  878. <li> File. </li>
  879. <li> Edit. </li>
  880. <li> View. </li>
  881. <li> Image. </li>
  882. <li> Options. </li>
  883. <li> Help. </li>
  884.  
  885. </div>
  886.  
  887. <div class="tabbox">
  888.  
  889. <div class="tabs">
  890.  
  891. <li> <b>*</b> </li> <li> <a href="/" title="return home."> 01 </a> </li>
  892. <li> <a href="/ask" title="send letters."> 02 </a> </li> <li> <b>*</b> </li>
  893. <li> <b>*</b> </li> <li> <a href="#" title="look around." onclick="openCity(event, 'navigation')"> 03 </a> </li>
  894. {block:ifmusetab} <li> <a href="#" title="pick your character." onclick="openCity(event, 'muses')"> 04 </a> </li> {/block:ifmusetab}
  895. {block:ifNotmusetab} <li><a href="{text:optional link url}" title="{text:optional link hover}"> 04 </a></li> {/block:ifNotmusetab}
  896. <li> <b>*</b> </li>
  897.  
  898. </div>
  899. </div>
  900.  
  901. <div class="scrollright">
  902.  
  903. <div class="iconup"> <i class="material-icons-outlined"> arrow_drop_up
  904. </i> </div>
  905. <div class="scroll1"> </div>
  906. <div class="icondown"> <i class="material-icons-outlined"> arrow_drop_down </i> </div>
  907.  
  908. </div>
  909. <div class="scrollbottom">
  910. <div class="iconright"> <i class="material-icons-outlined"> arrow_right </i> </div> </div>
  911.  
  912. <div class="scroll2"> </div>
  913.  
  914. <div class="paintimg"> <img src="{image:sidebar}" draggable="false"> </div>
  915.  
  916. </div>
  917.  
  918. <!-- NOTEPAD -->
  919.  
  920. <div class="notepad">
  921.  
  922. <i class="material-icons-outlined"> collections </i>
  923. <div class="notetitle"> {text:notepad} </div>
  924.  
  925. <div class="notesymbols"> <i class="far fa-window-minimize"></i> <i class="far fa-window-maximize"></i> </div>
  926.  
  927. <div class="noteclose"> x </div>
  928.  
  929. <div class="notetxt">
  930.  
  931. <li> File. </li>
  932. <li> Edit. </li>
  933. <li> View. </li>
  934. <li> Format. </li>
  935.  
  936. </div>
  937.  
  938. <div class="notedesc"> <p> {text:note} </p> </div>
  939.  
  940. </div>
  941.  
  942. <!-- COLOR PICKER -->
  943.  
  944. <div class="colorpicker">
  945.  
  946. <div class="colorgradient"> <i class="material-icons-outlined"> colorize </i> </div>
  947. <div class="colortxt"> {text:color} </div>
  948.  
  949. </div>
  950.  
  951. </div>
  952.  
  953.  
  954. <!--- SIDEBAR --->
  955.  
  956. <!--- NAVIGATION TAB --->
  957.  
  958.  
  959.  
  960.  
  961. <div id="navigation" class="tabcontent">
  962.  
  963.  
  964. <div class="ncon">
  965.  
  966. <button> <i data-feather="x" width="15px" height="15px"></i> </button>
  967.  
  968.  
  969. <!-- EDIT YOUR NAVI LINKS HERE !! -->
  970.  
  971.  
  972. <div class="links">
  973.  
  974. <li> <b>.01</b><a href="/"> link one</a> </li>
  975. <li> <b>.02</b><a href="/"> link two</a> </li>
  976.  
  977. <li> <b>.03</b><a href="/"> link three</a> </li>
  978. <li> <b>.04</b><a href="/"> link four</a> </li>
  979.  
  980. <li> <b>.05</b><a href="/"> link five</a> </li>
  981. <li> <b>.06</b><a href="/"> link six</a> </li>
  982.  
  983. <li> <b>.07</b><a href="/"> link seven</a> </li>
  984. <li> <b>.08</b><a href="/"> link eight</a> </li>
  985.  
  986. </div>
  987.  
  988. {block:ifNaviGraph}
  989.  
  990. <div class="ngraph">
  991.  
  992. <img src="{image:navi}" draggable="false">
  993.  
  994. <div class="centericon"> <i class="material-icons-outlined"> crop_free </i> </div>
  995.  
  996. <div class="photoborder">
  997.  
  998. <div class="line1"> </div> <div class="line2"> </div>
  999. <div class="line3"> </div> <div class="line4"> </div>
  1000. <div class="line5"> </div> <div class="line6"> </div>
  1001. <div class="line7"> </div> <div class="line8"> </div>
  1002.  
  1003. <div class="ntoptxt"> <p style="text-align:left;"> 1080P <span style="float:right;"> REC <b> • </b> </p> </div>
  1004.  
  1005. <div class="nbottomtxt"> 00:00:05 </div>
  1006.  
  1007. </div>
  1008.  
  1009. </div>
  1010.  
  1011. {/block:ifNaviGraph}
  1012.  
  1013. <div class="tabtitle"> navigate</div>
  1014.  
  1015. </div>
  1016. </div>
  1017.  
  1018.  
  1019.  
  1020.  
  1021. <!--- MUSES TAB --->
  1022.  
  1023.  
  1024.  
  1025.  
  1026. <div id="muses" class="tabcontent">
  1027.  
  1028.  
  1029. <div class="mcon">
  1030.  
  1031. <button> <i data-feather="x" width="15px" height="15px"></i> </button>
  1032.  
  1033. <div class="muses">
  1034.  
  1035. <div class="muses">
  1036.  
  1037. <div class="museicon"> <img src="https://i.postimg.cc/CLhvpX0X/60px.png" draggable="false"> </div>
  1038. <div class="musetitle"> first l.</div>
  1039.  
  1040. <div class="muselinks">
  1041.  
  1042. <li> <a href="/"> #link.</a> </li>
  1043. <li> <a href="/"> #link.</a> </li>
  1044. <li> <a href="/"> #link.</a> </li>
  1045. <li> <a href="/"> #link.</a> </li>
  1046.  
  1047. </div>
  1048.  
  1049. <div class="museinfo"> available &bull; selective &bull; slice of life au.</div>
  1050.  
  1051. <div class="musebio">
  1052.  
  1053. <div class="musestats">
  1054.  
  1055. <b>name:</b> answer <span>&bull;</span>
  1056. <b>age:</b> answer <span>&bull;</span>
  1057. <b>gender:</b> answer <span>&bull;</span>
  1058. <b>pronouns:</b> answer <span>&bull;</span>
  1059. <b>hometown:</b> answer <span>&bull;</span>
  1060. <b>occupation:</b> answer
  1061.  
  1062. </div>
  1063.  
  1064.  
  1065. <div class="musedesc">
  1066.  
  1067.  
  1068. <b>TLDR:</b> muse background info can go here, or whatever you want really! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  1069. <p>
  1070. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  1071.  
  1072.  
  1073. </div>
  1074. </div>
  1075.  
  1076. </div>
  1077. </div>
  1078.  
  1079. </div>
  1080. </div>
  1081.  
  1082.  
  1083. <!--- POSTS --->
  1084.  
  1085.  
  1086.  
  1087. <div id="posts">
  1088. {block:Posts}
  1089. <div class="entry">
  1090.  
  1091. <div class="topinfo">
  1092.  
  1093. <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>
  1094.  
  1095.  
  1096. </div>
  1097.  
  1098.  
  1099. <!-- TEXT --->
  1100.  
  1101. {block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}{Body}{/block:Text}
  1102.  
  1103. <!-- PHOTOS --->
  1104.  
  1105. {block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{/block:Photo}
  1106.  
  1107. {block:Photoset} {block:IndexPage}{Photoset-500}{/block:IndexPage} {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage} {/block:Photoset}
  1108.  
  1109. <!-- QUOTE --->
  1110.  
  1111. {block:Quote} <div class="quote"> {Quote} </div> <div class="source"> — {Source} </div> {/block:Quote}
  1112.  
  1113. <!-- LINKS --->
  1114.  
  1115. {block:Link} <div class="linktitle"> <a href="{URL}"><h1>{Name}</h1></a></div>
  1116. {block:Description} <p>{Description}</p> {/block:Description}{/block:Link}
  1117.  
  1118. <!-- CHATS --->
  1119.  
  1120. {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}
  1121. {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}
  1122.  
  1123. <!-- AUDIO --->
  1124.  
  1125. {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}
  1126.  
  1127. <!-- VIDEO --->
  1128.  
  1129. {block:Video}<div class="video">{Video-500}</div>{/block:Video}
  1130.  
  1131. <!-- ASKS --->
  1132.  
  1133. {block:Answer}<div id="question">{Question} <div id="asker">written by {Asker}</div></div>{Answer} {/block:Answer}
  1134.  
  1135.  
  1136. {block:Caption}{Caption}{/block:Caption}
  1137.  
  1138. <!-- READ MORE --->
  1139.  
  1140. {block:More}<div class="more"><a href="{Permalink}" class="more-btn">read more</a></div>{/block:More}
  1141.  
  1142. <!-- BOTTOM INFO --->
  1143.  
  1144. <div class="bottominfo"> posted <a href="{Permalink}" title="{DayOfWeek}, {Month} {DayOfMonth}{DayOfMonthSuffix} {Year}.">{TimeAgo}</a> </div>
  1145.  
  1146. <!-- TAGS --->
  1147.  
  1148. {block:HasTags} <div class="tags"> <span> {PostAuthorName} said: </span> {block:Tags}<a href="{TagURL}">{Tag},</a> {/block:Tags}<br></div>{/block:HasTags}
  1149.  
  1150. <!-- POST NOTES --->
  1151.  
  1152. <div class="note"> {block:PostNotes}{PostNotes}{/block:PostNotes} </div>
  1153.  
  1154. </div>
  1155. {/block:Posts}
  1156.  
  1157.  
  1158.  
  1159.  
  1160. {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}
  1161.  
  1162.  
  1163. </div>
  1164.  
  1165.  
  1166.  
  1167. <div id="cred">
  1168. <a href="http://twentys.tumblr.com" title="made by julie."><span class="th th-holly-o"></span></a>
  1169. </div>
  1170.  
  1171. <script> feather.replace() </script>
  1172.  
  1173. </body>
  1174. </html>
  1175.  
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!