API tools faq
paste
lovesjoon

THEME 10: breath ( all tabs, opacity .8 )

lovesjoon
Dec 11th, 2020
424
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 70.49 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 10: BREATH by TWENTYS.
  14.  
  15.  
  16. ・｡* version 01: multi muse.
  17.  
  18. ・｡* search "user guide" inside the code for tips to edit!
  19.  
  20.  
  21. ♡ SIZE GUIDE ♡
  22.  
  23.  
  24. ・｡* top left graph: width:300px; height:260px;
  25.  
  26. ・｡* bottom left graph: width:280px; height:160px;
  27.  
  28. ・｡* top right graph: width:240px; height:135px;
  29.  
  30. ・｡* png: width:280px; height:580px;
  31.  
  32. ・｡* muses: width:85px; height:70px;
  33.  
  34. ・｡* popup icon: width & height: 65px;
  35.  
  36.  
  37. ♡ READ ME ♡
  38.  
  39.  
  40. ・｡* base code by @pixiemail.
  41.  
  42. ・｡* please don't recreate and/or steal parts of this code
  43.  
  44. ・｡* don't remove the credit
  45.  
  46. ・｡* feel free to reach out if there are any bugs or questions ♡
  47.  
  48.  
  49. hope you enjoy this code !! ♡( ◡‿◡ ) --->
  50.  
  51.  
  52.  
  53.  
  54.  
  55.  
  56.  
  57.  
  58. <title>{Title}</title>
  59. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  60. <link rel="shortcut icon" href="{Favicon}">
  61. {block:Description}
  62. <meta name="description" content="{MetaDescription}">
  63. {/block:Description}
  64.  
  65.  
  66.  
  67.  
  68. <meta name="image:background" content=""/>
  69. <meta name="image:top left" content="https://via.placeholder.com/300x280"/>
  70. <meta name="image:top right" content="https://via.placeholder.com/240x135"/>
  71. <meta name="image:bottom left" content="https://via.placeholder.com/280x160"/>
  72. <meta name="image:png" content=""/>
  73.  
  74. <meta name="color:background" content="#eee"/>
  75. <meta name="color:container" content="#fff"/>
  76. <meta name="color:posts" content="#fff"/>
  77. <meta name="color:borders" content="#ddd"/>
  78. <meta name="color:grid" content="#e7e7e7"/>
  79. <meta name="color:accent" content="#acb7c9"/>
  80. <meta name="color:accent2" content="#c4cbd7"/>
  81. <meta name="color:window gradient 1" content="#fff"/>
  82. <meta name="color:window gradient 2" content="#eee"/>
  83. <meta name="color:title" content="#000"/>
  84. <meta name="color:text" content="#acacac"/>
  85. <meta name="color:links" content="#b0a8b7"/>
  86. <meta name="color:hover" content="#98a3a9"/>
  87. <meta name="color:bold" content="#d8d6d7"/>
  88. <meta name="color:italic" content="#98a3a9"/>
  89.  
  90. <meta name="select:body font" content="abeezee" title="abeezee"/>
  91. <meta name="select:body font" content="open sans" title="open sans"/>
  92. <meta name="select:body font" content="montserrat" title="montserrat"/>
  93. <meta name="select:body font" content="poppins" title="poppins"/>
  94. <meta name="select:body font" content="ibm plex sans" title="ibm plex sans"/>
  95. <meta name="select:body font" content="inconsolata" title="inconsolata"/>
  96. <meta name="select:body font" content="raleway" title="raleway"/>
  97. <meta name="select:body font" content="josefin sans" title="josefin sans"/>
  98. <meta name="select:body font" content="libre baskerville" title="libre baskerville"/>
  99.  
  100. <meta name="select:font size" content="9" title="9px"/>
  101. <meta name="select:font size" content="10" title="10px"/>
  102. <meta name="select:font size" content="11" title="11px"/>
  103. <meta name="select:font size" content="12" title="12px"/>
  104.  
  105. <meta name="if:400px posts" content="1"/>
  106. <meta name="if:border radius" content="1"/>
  107. <meta name="if:grayscale" content="1"/>
  108.  
  109. <meta name="text:title1" content="title-one.jpg"/>
  110. <meta name="text:title2" content="title-two.jpg"/>
  111. <meta name="text:title3" content="title-three.jpg"/>
  112. <meta name="text:stat1" content="55%"/>
  113. <meta name="text:stat2" content="95%"/>
  114. <meta name="text:stat3" content="20%"/>
  115. <meta name="text:stat4" content="60%"/>
  116. <meta name="text:message title" content="unknown: (555) XXX-1234"/>
  117.  
  118.  
  119.  
  120.  
  121. <!--- PT. 1: SCRIPTS: JQUERY + TOOLTIP + TABS + FONTS ---->
  122.  
  123.  
  124.  
  125.  
  126. <!--- JQUERY SCRIPTS --->
  127.  
  128. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  129. <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
  130.  
  131.  
  132.  
  133. <!--- TOOLTIP SCRIPT ---->
  134.  
  135. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  136. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  137. <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>
  138.  
  139.  
  140.  
  141. <!--- GOOGLE + ICON FONTS ---->
  142.  
  143. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  144. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/v4-shims.css">
  145.  
  146. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  147.  
  148. <script src="https://unpkg.com/feather-icons"></script>
  149.  
  150. <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">
  151.  
  152. <script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
  153.  
  154.  
  155. <!-- POST STYLING FONTS -->
  156.  
  157. <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Lato&display=swap" rel="stylesheet">
  158.  
  159.  
  160. <!-- BODY FONTS -->
  161.  
  162. <link href="https://fonts.googleapis.com/css2?family=ABeeZee&display=swap" rel="stylesheet">
  163.  
  164. <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
  165.  
  166. <link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
  167.  
  168. <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
  169.  
  170. <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
  171.  
  172. <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
  173.  
  174. <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
  175.  
  176. <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet">
  177.  
  178. <link href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap" rel="stylesheet">
  179.  
  180. <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap" rel="stylesheet">
  181.  
  182.  
  183.  
  184.  
  185.  
  186. <!--- VIDEO SCRIPT BY SHYTHEMES ---->
  187.  
  188. <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>
  189.  
  190.  
  191.  
  192.  
  193. <!--- TAB SCRIPT by www.w3schools.com ---->
  194.  
  195. <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>
  196.  
  197.  
  198.  
  199. <!--- FADE OUT SCRIPT by beginnersbook.com ---->
  200.  
  201. <script>
  202. $(document).ready(function(){
  203. $("button").click(function(){
  204. $(".tabcontent").fadeOut("slow");
  205. });
  206. });
  207. </script>
  208.  
  209.  
  210.  
  211. <!--- POPUP SCRIPT by themekid ---->
  212.  
  213. <script type="text/javascript" src="https://static.tumblr.com/8pnyeus/10hors8sn/themekid-popup.min.js"></script><script type="text/javascript">$(document).ready(function(){ popUp(true); });</script>
  214.  
  215.  
  216.  
  217.  
  218. <!--- CLOCK SCRIPT ---->
  219.  
  220. <script> function startTime() { var today = new Date(); var h = today.getHours(); var m = today.getMinutes(); var s = today.getSeconds(); m = checkTime(m); s = checkTime(s); document.getElementById('clock').innerHTML = h + ":" + m; var t = setTimeout(startTime, 500); } function checkTime(i) { if (i < 10) {i = "0" + i}; return i; } </script>
  221.  
  222.  
  223.  
  224.  
  225. <style type="text/css">
  226.  
  227.  
  228.  
  229.  
  230. /*--- FONTS HOSTED BY TWENTYS---*/
  231.  
  232.  
  233.  
  234.  
  235.  
  236.  
  237.  
  238. /*---PT. 2: TOOLTIP + SCROLLBAR + SELECTION---*/
  239.  
  240.  
  241.  
  242.  
  243. /* TOOLTIP */
  244.  
  245. #s-m-t-tooltip { max-width:auto; max-height:auto; background:{color:posts}; color:{color:text}; margin:20px 20px 20px 20px; padding:6px 10px 6px 10px; border:1px solid {color:borders}; border-radius:5px; z-index:9999999999; font-family:'lato', sans-serif; font-size:8px; font-weight:bold; text-transform:uppercase; letter-spacing:1px; }
  246.  
  247.  
  248. /* SCROLLBAR */
  249.  
  250. ::-webkit-scrollbar-thumb { display:none; }
  251.  
  252. ::-webkit-scrollbar { display:none; }
  253.  
  254.  
  255. /* SELECTION */
  256.  
  257. ::-moz-selection { background:{color:accent}; color:{color:posts}; }
  258.  
  259. ::selection { background:{color:accent}; color:{color:posts};}
  260.  
  261.  
  262.  
  263.  
  264. /*---PT. 3: BODY + TEXT STYLING---*/
  265.  
  266.  
  267.  
  268.  
  269. /* BODY */
  270.  
  271. 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;
  272.  
  273. font-family:{select:body font};
  274. font-size:{select:font size}px;
  275. line-height: -moz-calc({select:font size}px + 8px);
  276. line-height: -webkit-calc({select:font size}px + 8px);
  277. line-height: -o-calc({select:font size}px + 8px);
  278. line-height: calc({select:font size}px + 8px); }
  279.  
  280.  
  281. /* FIX */
  282.  
  283. iframe, img, embed, object { max-width:100%; margin:auto; border:none; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  284.  
  285. iframe:hover, img:hover, embed:hover, object:hover {
  286.  
  287. {block:ifGrayscale} filter: grayscale(0%);
  288. -webkit-transition: all .8s;
  289. -moz-transition: all .8s;
  290. -o-transition: all .8s;
  291. -ms-transition: all .8s;
  292. transition: all .8s; {/block:ifGrayscale} }
  293.  
  294. img { max-width:100%; height:auto; margin:auto; border:none; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  295.  
  296. img:hover { {block:ifGrayscale} filter: grayscale(0%);
  297.  
  298. -webkit-transition: all .8s;
  299. -moz-transition: all .8s;
  300. -o-transition: all .8s;
  301. -ms-transition: all .8s;
  302. transition: all .8s; {/block:ifGrayscale} }
  303.  
  304.  
  305. /* TEXT STYLING */
  306.  
  307. select, textarea, input, a { outline:none; }
  308.  
  309. p { margin-top:5px; margin-bottom:5px; }
  310.  
  311. small, sub, sup { font-size:100%; }
  312.  
  313. big { font-size:110%; }
  314.  
  315. h1 { color:{color:title}; margin-top:30px; font-family: 'Abril Fatface', cursive; font-weight:normal; line-height:28px; text-align:center; word-spacing:2px;
  316.  
  317. font-size: -moz-calc({select:font size}px + 20px);
  318. font-size: -webkit-calc({select:font size}px + 20px);
  319. font-size: -o-calc({select:font size}px + 20px);
  320. font-size: calc({select:font size}px + 20px); }
  321.  
  322. h2 { color:{color:accent}; font-family:'lato', sans-serif; line-height:18px; text-align:center; text-transform:uppercase; letter-spacing:2px;
  323.  
  324. font-size: -moz-calc({select:font size}px + 5px);
  325. font-size: -webkit-calc({select:font size}px + 5px);
  326. font-size: -o-calc({select:font size}px + 5px);
  327. font-size: calc({select:font size}px + 5px); }
  328.  
  329. a { color:{color:links}; font-family:'lato', sans-serif; font-weight:bold; text-transform:uppercase; text-decoration:none; letter-spacing:1px;
  330.  
  331. font-size: -moz-calc({select:font size}px - 1px);
  332. font-size: -webkit-calc({select:font size}px - 1px);
  333. font-size: -o-calc({select:font size}px - 1px);
  334. font-size: calc({select:font size}px - 1px); }
  335.  
  336. a:hover { color:{color:hover};
  337.  
  338. -webkit-transition: all .3s;
  339. -moz-transition: all .3s;
  340. -o-transition: all .3s;
  341. -ms-transition: all .3s;
  342. transition: all .3s; }
  343.  
  344. ul, ol, li { margin:5px 10px; padding:0px; line-height:20px; }
  345.  
  346. b, strong { color:{color:bold}; }
  347.  
  348. i, em { color:{color:italic}; }
  349.  
  350. blockquote { margin:10px; padding-left:20px; border-left:1px solid {color:borders}; }
  351.  
  352.  
  353. /* TUMBLR CONTROLS */
  354.  
  355. 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; }
  356.  
  357. iframe.tmblr-iframe:hover { opacity:1!important; }
  358.  
  359.  
  360.  
  361.  
  362. /*--- PT. 4: SIDEBAR + LINKS ---*/
  363.  
  364.  
  365.  
  366.  
  367. /* SIDEBAR */
  368.  
  369. #wrapper { position:absolute; width:1200px; height:750px; top:0px; right:0px; bottom:0px; left:0px; background:transparent; margin:auto; overflow:hidden; }
  370.  
  371. #border { position:absolute; width:700px; height:480px; top:0px; right:0px; bottom:0px; left:0px; background:{color:container}; margin:auto; overflow:hidden; z-index:999; }
  372.  
  373. #container { position:absolute; width:640px; height:440px; top:0px; right:0px; bottom:0px; left:0px; background:{color:container}; z-index:999; border-right:1px solid {color:grid}; border-bottom:1px solid {color:grid}; background-image: linear-gradient( {color:grid} .1em, transparent .1em), linear-gradient(90deg, {color:grid} .1em, transparent .1em); background-size: 2em 2em; margin:auto; overflow:hidden; }
  374.  
  375. .png { position:absolute; width:280px; height:580px; bottom:55px; left:125px; background:transparent; z-index:9999; }
  376.  
  377. .png img { width:280px; height:580px; }
  378.  
  379.  
  380. /* LINKS */
  381.  
  382. .folder { position:absolute; width:100px; height:100px; background:transparent; right:120px; bottom:350px; }
  383.  
  384. .folder2 { position:absolute; width:100px; height:100px; background:transparent; right:120px; bottom:250px; }
  385.  
  386. .folder3 { position:absolute; width:100px; height:100px; background:transparent; right:120px; bottom:150px; }
  387.  
  388. .folder4 { position:absolute; width:100px; height:100px; background:transparent; right:17.5px; bottom:250px; }
  389.  
  390. .folder5 { position:absolute; width:100px; height:100px; background:transparent; right:17.5px; bottom:150px; }
  391.  
  392. .folder6 { position:absolute; width:100px; height:100px; background:transparent; left:50px; top:120px; z-index:99999; }
  393.  
  394. .folder7 { position:absolute; width:100px; height:100px; background:transparent; left:50px; top:220px; z-index:99999 }
  395.  
  396. .fol1 { width:25px; height:5px; background:{color:accent}; border-top-left-radius:5px; border-top-right-radius:5px; }
  397.  
  398. .fol2 { width:75px; height:20px; background:{color:accent}; border-top-right-radius:5px; }
  399.  
  400. .fol3 { width:75px; height:45px; margin-top:-12.5px; background:{color:accent}; border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px; background-image: linear-gradient( {color:accent2}, {color:accent}); }
  401.  
  402. .fol4 { width:75px; height:20px; margin-top:5px; text-align:center; }
  403.  
  404. .fol4 a { font-family:{select:body font}; font-size:11px; text-transform:lowercase; font-weight:normal; letter-spacing:0px; font-family:"lato"; }
  405.  
  406.  
  407. /* WINDOWS */
  408.  
  409. /*bottom left graph*/
  410.  
  411. .graph1 { position:absolute; width:280px; height:180px; left:80px; bottom:100px; background:{color:container}; z-index:9999; border:1px solid {color:borders}; border-radius:8px; overflow:hidden; }
  412.  
  413. .graph1top { width:280px; height:20px; background-image: linear-gradient( {color:window gradient 1}, {color:window gradient 2}); border-bottom:1px solid {color:borders}; border-top-left-radius:8px; border-top-right-radius:8px; }
  414.  
  415. .graph1 img { width:280px; height:160px; }
  416.  
  417. /*upper right graph*/
  418.  
  419. .graph2 { position:absolute; width:240px; height:155px; right:120px; top:100px; background:{color:container}; z-index:9999; border:1px solid {color:borders}; border-radius:8px; overflow:hidden; }
  420.  
  421. .graph2top { width:240px; height:20px; background-image: linear-gradient( {color:window gradient 1}, {color:window gradient 2}); border-bottom:1px solid {color:borders}; border-top-left-radius:8px; border-top-right-radius:8px; }
  422.  
  423. .graph2 img { width:240px; height:135px; }
  424.  
  425. /*upper left graph*/
  426.  
  427. .graph3 { position:absolute; width:300px; height:280px; left:200px; top:70px; background:{color:container}; z-index:99; border:1px solid {color:borders}; border-radius:8px; overflow:hidden; }
  428.  
  429. .graph3 img { width:300px; height:260px; }
  430.  
  431. .graph3top { width:300px; height:20px; background-image: linear-gradient( {color:window gradient 1}, {color:window gradient 2}); border-bottom:1px solid {color:borders}; border-top-left-radius:8px; border-top-right-radius:8px; }
  432.  
  433. /*dots + title*/
  434.  
  435. .dots { position:absolute; width:50px; height:20px; left:5px; font-size:30px; line-height:20px; letter-spacing:-4px; color:{color:accent2}; font-family:"poppins"; text-align:left; }
  436.  
  437. .boxtitle { position:absolute; width:100%; height:20px; font-size:11px; line-height:20px; text-align:center; font-family:"lato"; }
  438.  
  439.  
  440.  
  441.  
  442. /*--- PT.5: POSTS + ENTRIES ---*/
  443.  
  444.  
  445.  
  446.  
  447. /* POSTS */
  448.  
  449. #posts { position:absolute; width:380px; {block:if400pxPosts} width:480px; {/block:if400pxPosts} height:335px; top:0px; right:0px; bottom:0px; left:0px; margin:auto; overflow-x:hidden; overflow-y:auto; z-index:1000; background:{color:container}; border:1px solid {color:borders}; padding:17px;}
  450.  
  451.  
  452. /* ENTRY STYLING */
  453.  
  454. .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} }
  455.  
  456. .entry img { margin:0px; padding:0px; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  457.  
  458. .entry img:hover {
  459.  
  460. {block:ifGrayscale} filter: grayscale(0%);
  461. -webkit-transition: all .8s;
  462. -moz-transition: all .8s;
  463. -o-transition: all .8s;
  464. -ms-transition: all .8s;
  465. transition: all .8s; {/block:ifGrayscale} }
  466.  
  467.  
  468.  
  469.  
  470. /*--- PT.6: POST INFO + NOTES + PAGINATION + CREDIT---*/
  471.  
  472.  
  473.  
  474.  
  475. .topinfo { width:340px; {block:if400pxPosts} width:440px; {/block:if400pxPosts} height:40px; margin-top:-20px; margin-bottom:20px; margin-left:-20px; border-bottom:1px solid {color:borders}; background:{color:post border}; line-height:40px; text-transform:uppercase; {block:ifBorderRadius} border-top-left-radius:10px; border-top-right-radius:10px; {/block:ifBorderRadius} }
  476.  
  477. .topinfo p { margin:0px; padding:0px 10px 0px 10px; }
  478.  
  479. .topinfo a { font-size:9px; }
  480.  
  481. .topinfo b { padding:0px 3px 0px 2px; font-size:10px; }
  482.  
  483. .bottominfo { width:340px; {block:if400pxPosts} width:440px; {/block:if400pxPosts} height:40px; margin-top:20px; margin-left:-20px; background:{color:post border}; border-top:1px solid {color:borders}; border-bottom:1px solid {color:borders}; line-height:40px; font-family:'lato', sans-serif; text-align:center; text-transform:uppercase; }
  484.  
  485. .bottominfo a { padding-left:5px; }
  486.  
  487. .bottominfo a { font-size:9px; line-height:40px; }
  488.  
  489.  
  490. /* TAGS */
  491.  
  492. .tags { width:300px; {block:if400pxPosts} width:400px; {/block:if400pxPosts} padding-top:20px; line-height:14px; text-align:justify; }
  493.  
  494. .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; }
  495.  
  496. .tags a { color:{color:text}; font-family:'lato', sans-serif; padding:0px; font-weight:normal;
  497.  
  498. font-size: -moz-calc({select:font size}px - 2px);
  499. font-size: -webkit-calc({select:font size}px - 2px);
  500. font-size: -o-calc({select:font size}px - 2px);
  501. font-size: calc({select:font size}px - 2px); }
  502.  
  503. .tags a:hover { color:{color:hover}; font-weight:bold; font-style:italic;
  504.  
  505. -webkit-transition: all .3s;
  506. -moz-transition: all .3s;
  507. -o-transition: all .3s;
  508. -ms-transition: all .3s;
  509. transition: all .3s; }
  510.  
  511.  
  512. /* POST NOTES */
  513.  
  514. .note { width:340px; {block:if400pxPosts} width:440px; {/block:if400pxPosts} margin-top:20px; margin-left:-31px; font-size:10px; text-transform:uppercase; }
  515.  
  516. .note li { width:340px; {block:if400pxPosts} width:440px; {/block:if400pxPosts} background:{color:posts}; margin:0; padding:15px 0px 15px 0px; list-style-type:none; float:left; border-left:1px solid {color:borders}; border-top:1px solid {color:borders}; border-right:1px solid {color:borders}; text-align:center; }
  517.  
  518. .note img.avatar { display:none; }
  519.  
  520.  
  521. /* PAGINATION */
  522.  
  523. .pagination { width:100%; text-align:center; }
  524.  
  525. .pagination a { padding:8px; word-spacing:2px; }
  526.  
  527. .pagination a:hover { color:{color:links}; }
  528.  
  529. .pagination i { width:10px; height:10px; color:{color:links}; }
  530.  
  531.  
  532. /* READ MORE */
  533.  
  534. .more { width:100%; margin-top:20px; margin-bottom:5px; text-align:center; }
  535.  
  536. .more a { background:{color:bold}; color:{color:posts}; padding:4px 11px 4px 11px; font-size:9px; font-weight:bold; text-transform:uppercase; }
  537.  
  538. .more a:hover { background:{color:background}; color:{color:bold}; padding:4px 11px 4px 11px; font-size:9px; font-weight:bold; text-transform:uppercase; }
  539.  
  540.  
  541. /* CREDIT */
  542.  
  543. #cred { position:fixed; width:auto; height:auto; bottom:15px; right:15px; background-color:{color:posts}; border-top-right-radius:10px; border-bottom-left-radius:10px; border:1px solid {color:borders}; z-index:9999; }
  544.  
  545. #cred span { padding:10px; font-size:18px; background:-webkit-linear-gradient({color:accent}, {color:accent2});
  546.  
  547. -webkit-background-clip:text;
  548. -webkit-text-fill-color:transparent; }
  549.  
  550.  
  551.  
  552.  
  553. /*---PT. 7: POST TYPES---*/
  554.  
  555.  
  556.  
  557.  
  558. /* TYPE: CHATS */
  559.  
  560. .answer span,.convo li { position:relative; max-width:75%; margin:0 0 15px; padding:.9em 10px; border-radius:1em; clear:both; }
  561.  
  562. .answer .them,.user_1,.user_3,.user_5,.user_7,.user_9,.user_11{ left:3px; background:#e6e6e6; color:#555555; float:left; }
  563.  
  564. .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; }
  565.  
  566. .answer .me,.user_2,.user_4,.user_6,.user_8,.user_10,.user_12{ right:3px; background-color:#147efb; color:white; float:right; }
  567.  
  568. .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; }
  569.  
  570. .me p,.answer,.asked span{ margin:0; padding:0; }
  571.  
  572. .answer{ overflow:hidden; }
  573.  
  574. .asked p { margin:0 0px 10px 0px; padding:0; color:white; font-size:{select:font size}px; text-align:left; line-height:0px; }
  575.  
  576. .footerright .viasrc { float:left; }
  577.  
  578. .asked a { margin:0; padding:0; }
  579.  
  580. .user_3{ background-color:#e6e6e6; color:#555555; }
  581.  
  582. .user_3::after{ border-color:#e6e6e6; }
  583.  
  584. .user_4{ background-color:#147efb; color:white; }
  585.  
  586. .user_4::after{ border-color:#147efb; }
  587.  
  588. .user_5{ background-color:#e6e6e6; color:#555555; }
  589.  
  590. .user_5::after{ border-color:#e6e6e6; }
  591.  
  592. .user_6{ background-color:#147efb; color:white; }
  593.  
  594. .user_6::after{ border-color:#147efb; }
  595.  
  596. .user_7{ background-color:#e6e6e6; color:#555555; }
  597.  
  598. .user_7::after{ border-color:#e6e6e6; }
  599.  
  600. .user_8{ background-color:#147efb; color:white; }
  601.  
  602. .user_8::after{ border-color:#147efb; }
  603.  
  604. .user_9{ background-color:#e6e6e6; color:#555555; }
  605.  
  606. .user_9::after{ border-color:#e6e6e6; }
  607.  
  608. .convo { margin:0; padding:0; overflow:hidden; list-style-type:none; }
  609.  
  610.  
  611. /* TYPE: QUOTES */
  612.  
  613. .quote { color:{color:title}; padding:0px 10px 0px 10px; font-family: 'Abril Fatface', cursive; font-weight:normal; line-height:28px; text-align:center; word-spacing:2px;
  614.  
  615. font-size: -moz-calc({select:font size}px + 20px);
  616. font-size: -webkit-calc({select:font size}px + 20px);
  617. font-size: -o-calc({select:font size}px + 20px);
  618. font-size: calc({select:font size}px + 20px); }
  619.  
  620. .source { text-align:right; margin-top:15px;
  621.  
  622. font-size: -moz-calc({select:font size}px - 1px);
  623. font-size: -webkit-calc({select:font size}px - 1px);
  624. font-size: -o-calc({select:font size}px - 1px);
  625. font-size: calc({select:font size}px - 1px);
  626.  
  627. line-height: -moz-calc({select:font size}px + 8px);
  628. line-height: -webkit-calc({select:font size}px + 8px);
  629. line-height: -o-calc({select:font size}px + 8px);
  630. line-height: calc({select:font size}px + 8px); }
  631.  
  632.  
  633. /* TYPE: ASKS */
  634.  
  635. #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; }
  636.  
  637. #asker { width:300px; {block:if400pxPosts} width:400px; {/block:if400pxPosts} height:30px; background:{color:accent}; color:{color:posts}; margin:0px; margin-top:0px; margin-left:-30px; margin-bottom:0px; padding-top:10px; padding-right:15px; font-size:8px; line-height:23px; text-align:right; text-transform:uppercase; letter-spacing:1.5px; }
  638.  
  639. #asker a { color:{color:posts}; font-weight:bold; }
  640.  
  641.  
  642. /* TYPE: LINKS */
  643.  
  644. .linktitle { color:{color:title}; font-family: 'Abril Fatface', cursive; font-weight:normal; text-align:center; line-height:28px; word-spacing:2px;
  645.  
  646. font-size: -moz-calc({select:font size}px + 20px);
  647. font-size: -webkit-calc({select:font size}px + 20px);
  648. font-size: -o-calc({select:font size}px + 20px);
  649. font-size: calc({select:font size}px + 20px); }
  650.  
  651.  
  652. /* TYPE: AUDIO */
  653.  
  654. .playbutton { position:relative; width:33px; height:38px; margin-top:45px; margin-left:35px; overflow:hidden; opacity:.6; z-index:9; }
  655.  
  656. .albumart img { position:relative; width:65px; height:65px; background:{color:posts}; margin-top:-64px; margin-left:10px; padding:10px; border:1px solid {color:borders}; filter: grayscale(0%); }
  657.  
  658. .trackinfo { position:relative; width:185px; height:66px; top:2px; background:{color:posts}; color:{color:text}; margin-top:-95px; margin-bottom:20px; margin-left:100px; padding:10px 5px 10px 5px; }
  659.  
  660. .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; }
  661.  
  662. .artist { font-size:7px; text-transform:uppercase; text-align:center; letter-spacing:4px; }
  663.  
  664.  
  665. /* TYPE: VIDEOS */
  666.  
  667. .tumblr_video_container { width:auto!important; height:auto!important; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  668.  
  669. .tumblr_video_container:hover {
  670.  
  671. {block:ifGrayscale} filter: grayscale(0%);
  672. -webkit-transition: all .8s;
  673. -moz-transition: all .8s;
  674. -o-transition: all .8s;
  675. -ms-transition: all .8s;
  676. transition: all .8s; {/block:ifGrayscale} }
  677.  
  678.  
  679.  
  680.  
  681.  
  682. /*--- PT.8: TABS ---*/
  683.  
  684.  
  685.  
  686.  
  687. /*TAB + CLOSE CONTENT*/
  688.  
  689. .tabcontent { position:absolute; width:414px; {block:if400pxPosts} width:514px; {/block:if400pxPosts} height:369px; top:0px; right:0px; bottom:0px; left:0px; margin:auto; overflow:hidden; z-index:9999; background:{color:container}; border:1px solid {color:borders}; opacity:.8; animation: fadeEffect 1s; }
  690.  
  691. @keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} }
  692.  
  693. .tabcontent button { position:absolute; top:0px; left:0px; background:transparent; color:#ff605c; border:none; z-index:99999; font-size:35px; line-height:23px; letter-spacing:-4px; font-family:"poppins"; text-align:left; }
  694.  
  695. .tabcontent button:hover { cursor:pointer; }
  696.  
  697. .tabcontent button:focus { outline:0; }
  698.  
  699. .tabcontent button b { color:#ffbd44; font-weight:normal; }
  700.  
  701. .tabcontent button span { color:#00ca4e; }
  702.  
  703. .tabtop { width:100%; height:25px; background-image: linear-gradient( {color:window gradient 1}, {color:window gradient 2}); border-bottom:1px solid {color:borders}; border-top-left-radius:8px; border-top-right-radius:8px; font-family:"lato"; font-size:11px; }
  704.  
  705. .tabtitle { position:absolute; width:100%; height:20px; font-size:11px; line-height:25px; text-align:center; }
  706.  
  707.  
  708. /* ABOUT TAB */
  709.  
  710. .stats { position:absolute; width:130px; height:170px; top:26px; left:0px; padding:10px; color:{color:accent2}; font-size:12px; border-bottom:1px solid {color:borders}; }
  711.  
  712. .stats li { display:black; float:left; list-style-type:none; width:120px; height:auto; margin-bottom:5px; font-family:"lato"; }
  713.  
  714. .bar { width:100px; height:10px; background:{color:background}; border-radius:8px; }
  715.  
  716. .stat1 { width:{text:stat1}; height:10px; background:{color:accent}; border-radius:8px; background-image: linear-gradient(to right, {color:accent2}, {color:accent}); }
  717.  
  718. .stat2 { width:{text:stat2}; height:10px; background:{color:accent}; border-radius:8px; background-image: linear-gradient(to right, {color:accent2}, {color:accent}); }
  719.  
  720. .stat3 { width:{text:stat3}; height:10px; background:{color:accent}; border-radius:8px; background-image: linear-gradient(to right, {color:accent2}, {color:accent}); }
  721.  
  722. .stat4 { width:{text:stat4}; height:10px; background:{color:accent}; border-radius:8px; background-image: linear-gradient(to right, {color:accent2}, {color:accent}); }
  723.  
  724.  
  725. .info { position:absolute; width:130px; height:120px; bottom:5px; left:10px; padding:10px; font-size:10px; overflow:scroll; }
  726.  
  727. .info li { display:black; float:left; list-style-type:none; left:10%; width:70%; height:auto; margin-bottom:2px; font-family:"lato"; line-height:15px; }
  728.  
  729. .info b { color:{color:accent2}; font-size:13px; font-family:"lato"; }
  730.  
  731.  
  732. .mssg { position:absolute; width:264px; {block:if400pxPosts} width:364px; {/block:if400pxPosts} height:100%; right:0px; font-size:13px; border-left:1px solid {color:borders}; }
  733.  
  734. .mssgtop { position:absolute; width:100%; height:30px; top:0px; left:0px; background:{color:container}; border-bottom:1px solid {color:borders}; line-height:30px; }
  735.  
  736. .mssgtop i { padding-left:10px; font-size:13px; }
  737.  
  738. .mssgname { position:absolute; width:100%; height:30px; top:0px; line-height:30px; font-size:12px; text-align:center; }
  739.  
  740. .mssgbottom { position:absolute; width:100%; height:30px; bottom:28px; left:0px; background:{color:container}; border-top:1px solid {color:borders}; line-height:30px; {block:if400pxPosts} line-height:33px; {/block:if400pxPosts} }
  741.  
  742. .mssgbottom i { padding-left:10px; font-size:13px; {block:if400pxPosts} padding-left:15px; font-size:14px; {/block:if400pxPosts} }
  743.  
  744. .mssgtxt { position:absolute; width:80%; height:15px; top:0px; bottom:0px; left:20px; right:0px; margin:auto; line-height:15px; font-size:9px; border:1px solid {color:borders}; border-radius:20px; padding-left:8px; font-family:"lato"; }
  745.  
  746.  
  747. /* TEXT MESSAGES */
  748.  
  749. .chats { width:250px; {block:if400pxPosts} width:350px; {/block:if400pxPosts} height:260px; margin-top:45px; margin-left:5px; display:flex; flex-direction:column; font-size:10px; overflow:hidden; font-family:"lato"; }
  750.  
  751. .messages { margin-bottom:12px; display:flex; flex-direction:column; }
  752.  
  753. .message { border-radius:20px; padding:8px 15px; margin-top:0px; margin-bottom:8px; display:inline-block; }
  754.  
  755. .yours { align-items: flex-start; }
  756.  
  757. .yours .message { background:{color:accent}; margin-right:25%; color:{color:container}; position:relative; left:10px; }
  758.  
  759. .yours .message.last:before { content:""; position:absolute; background:{color:accent}; width:20px; height:20px; left:-7px; bottom:0; border-bottom-right-radius:15px; z-index:0; }
  760.  
  761. .yours .message.last:after { content:""; position:absolute; background:{color:container}; width:10px; height:20px; left:-10px; bottom:0; border-bottom-right-radius: 10px; z-index:1; }
  762.  
  763. .mine { align-items: flex-end; }
  764.  
  765. .mine .message { position:relative; background:{color:italic}; color:{color:container}; right:5px; margin-left:25%; }
  766.  
  767. .mine .message.last:before { content:""; position:absolute; background:{color:italic}; width:20px; height:20px; right:-8px; bottom:0; border-bottom-left-radius:15px; z-index:0; }
  768.  
  769. .mine .message.last:after { content:""; position:absolute; background:{color:container}; width:10px; height:20px; right:-10px; bottom:0; border-bottom-left-radius:10px; z-index:1; }
  770.  
  771.  
  772. /* NAVI TAB */
  773.  
  774. .dates { position:absolute; width:100%; height:26%; border-bottom:1px solid {color:borders}; }
  775.  
  776. #clock { position:absolute; height:auto; width:auto; right:15px; {block:if400pxPosts} right:65px; {/block:if400pxPosts} top:65px; font-family: 'roboto', sans-serif; font-weight:bold; color:{color:accent}; font-size:70px; opacity:.5; }
  777.  
  778. #date { position:absolute; height:auto; width:auto; left:15px; {block:if400pxPosts} left:65px; {/block:if400pxPosts} top:62px; font-family: 'roboto', sans-serif; font-weight:bold; text-transform:uppercase; color:{color:accent}; font-size:30px; }
  779.  
  780. #date2 { position:absolute; height:auto; width:auto; left:15px; {block:if400pxPosts} left:65px; {/block:if400pxPosts} top:83px; font-family: 'roboto', sans-serif; font-weight:bold; text-transform:uppercase; color:{color:accent2}; font-size:15px; }
  781.  
  782. .nlinks { position:absolute; width:80%; height:205px; bottom:6px; left:23px; {block:if400pxPosts} width:70%; left:73px; {/block:if400pxPosts} padding:20px; }
  783.  
  784. .nlinks b { color:{color:accent}; }
  785.  
  786. .nlinks li { display:inline-block; float:left; width:65px; height:65px; margin-right:5px; list-style-type:none; overflow:hidden; text-align:center; line-height:20px; }
  787.  
  788. .nlinks span { color:{color:accent}; font-size:35px; }
  789.  
  790. .nlinks a { text-transform:lowercase; font-size:10px; color:{color:accent}; letter-spacing:0px; }
  791.  
  792.  
  793. /*MUSE TAB*/
  794.  
  795. .muses { position:absolute; bottom:25px; left:50px; width:100%; height:280px; background:transparent; overflow:scroll; }
  796.  
  797. .muses li { display:inline-block; float:left; width:85px; height:70px; background-color:{color:post container}; margin:10px; border-radius:10px; }
  798.  
  799. .muses img { width:85px; height:70px; border-radius:10px; }
  800.  
  801.  
  802. /* POPUPS */
  803.  
  804. .popup_block { background:{color:container}; display:none; position:absolute; height:375px; top:188px; left:208px; {block:if400pxPosts} left:258px; {/block:if400pxPosts} z-index:99999999;
  805.  
  806. -webkit-animation: zoom 0.5s;
  807. -moz-animation: zoom 0.5s;
  808. -ms-animation: zoom 0.5s;
  809. -o-animation: zoom 0.5s;
  810. animation: zoom 0.5s; }
  811.  
  812. *html .popup_block { position:absolute; }
  813.  
  814. @-webkit-keyframes zoom {0% {transform: scale(0);-webkit-transform: scale(0);}100% {transform: scale(1.0);-webkit-transform: scale(1.0);}}@-moz-keyframes zoom {0% {transform: scale(0);-moz-transform: scale(0);}100% {transform: scale(1.0);-moz-transform: scale(1.0);}}@keyframes zoom {0% {transform: scale(0);}100% {transform: scale(1.0);}}
  815.  
  816. .close { position:absolute; z-index:99999999999; width:auto; height:auto; padding:15px; right:0px; {block:if400pxPosts} right:10px; {/block:if400pxPosts} top:0px; color:{color:links}; }
  817.  
  818. .close:hover { cursor:pointer; }
  819.  
  820.  
  821. .bio { position:absolute; width:100%; height:35%; bottom:0px; left:0px; background-image: linear-gradient( {color:accent2}, {color:accent}); }
  822.  
  823. .biotxt { position:absolute; width:60%; height:22%; text-align:justify; overflow:scroll; bottom:27%; left:20%; font-family:"lato"; color:{color:text}; font-size:10px; line-height:17px; }
  824.  
  825. .name { position:absolute; height:auto; width:auto; left:20px; {block:if400pxPosts} left:40px; {/block:if400pxPosts} bottom:33px; font-family: 'roboto', sans-serif; font-weight:bold; color:{color:accent2}; font-size:50px; text-transform:uppercase; }
  826.  
  827. .plink { position:absolute; width:30%; height:auto; bottom:22px; right:20px; {block:if400pxPosts} right:30px; {/block:if400pxPosts} }
  828.  
  829. .plink li { display:inline-block; float:left; margin:0; width:auto; height:auto; padding:0px 4px 0px 4px; }
  830.  
  831. .plink a { color:{color:container}; font-size:11px; }
  832.  
  833. .plink a:hover { font-style:italic;
  834.  
  835. -webkit-transition: all .8s;
  836. -moz-transition: all .8s;
  837. -o-transition: all .8s;
  838. -ms-transition: all .8s;
  839. transition: all .8s; }
  840.  
  841.  
  842. .pricon { position:absolute; width:65px; height:65px; margin:auto; left:0px; top:0px; bottom:250px; right:0px; border-radius:100%; }
  843.  
  844. .pricon img { width:65px; height:65px; border-radius:100%; }
  845.  
  846. .prsymbol { position:absolute; width:20px; height:20px; margin:auto; left:50px; top:0px; bottom:200px; right:0px; background:{color:accent}; border-radius:100%; text-align:center; }
  847.  
  848. .prinfo { position:absolute; width:70%; height:80px; top:110px; left:25%; }
  849.  
  850. .prinfo li { display:block; float:left; margin:0; width:70%; height:40px; background:{color:sidebar}; }
  851.  
  852. .prinfosym { width:25%; height:40px; margin-left:0px; margin-top:0px; text-align:center; }
  853.  
  854. .prinfouser { width:50%; height:40px; margin-left:25%; margin-top:-40px; line-height:10px; overflow:hidden; font-family:"abeezee"; font-size:8px; letter-spacing:1px; text-align:left; }
  855.  
  856. .prinfouser b { color:{color:accent}; font-family:"montserrat"; text-transform:uppercase; letter-spacing:1px; font-size:9px; }
  857.  
  858. .prinfosym2 { width:25%; height:40px; margin-left:75%; margin-top:-40px; text-align:center; }
  859.  
  860.  
  861.  
  862.  
  863.  
  864.  
  865.  
  866.  
  867. /*--- PT.9: CUSTOM CSS ---*/
  868.  
  869.  
  870.  
  871.  
  872. {CustomCSS}
  873. </style></head><body onload="startTime()">
  874.  
  875.  
  876.  
  877.  
  878. <div id="wrapper">
  879.  
  880.  
  881. <!-- png -->
  882.  
  883. <div class="png"> <img src="{image:png}" draggable="false"> </div>
  884.  
  885.  
  886. <!-- links / folders -->
  887.  
  888. <div class="folder">
  889.  
  890. <div class="fol1"> </div>
  891. <div class="fol2"> </div>
  892. <div class="fol3"> </div>
  893. <div class="fol4"> <a href="#" class="tablinks" onclick="openCity(event, 'posts')"> posts.</a> </div>
  894.  
  895. </div>
  896.  
  897. <div class="folder2">
  898.  
  899. <div class="fol1"> </div>
  900. <div class="fol2"> </div>
  901. <div class="fol3"> </div>
  902. <div class="fol4"> <a href="#" class="tablinks" onclick="openCity(event, 'navi')"> navigate.</a> </div>
  903.  
  904. </div>
  905.  
  906. <div class="folder3">
  907.  
  908. <div class="fol1"> </div>
  909. <div class="fol2"> </div>
  910. <div class="fol3"> </div>
  911. <div class="fol4"> <a href="#" class="tablinks" onclick="openCity(event, 'muses')"> characters.</a> </div>
  912.  
  913. </div>
  914.  
  915. <div class="folder4">
  916.  
  917. <div class="fol1"> </div>
  918. <div class="fol2"> </div>
  919. <div class="fol3"> </div>
  920. <div class="fol4"> <a href="#" class="tablinks" onclick="openCity(event, 'about')"> about.</a> </div>
  921.  
  922. </div>
  923.  
  924. <div class="folder5">
  925.  
  926. <div class="fol1"> </div>
  927. <div class="fol2"> </div>
  928. <div class="fol3"> </div>
  929. <div class="fol4"> <a href="/"> free link.</a> </div>
  930.  
  931. </div>
  932.  
  933.  
  934.  
  935.  
  936. <!-- windows -->
  937.  
  938. <div class="graph1">
  939.  
  940. <div class="graph1top">
  941. <div class="dots"> &bull; &bull; &bull; </div>
  942. <div class="boxtitle"> {text:title1} </div>
  943. </div>
  944. <img src="{image:bottom left}" draggable="false">
  945.  
  946. </div>
  947.  
  948. <div class="graph2">
  949.  
  950. <div class="graph2top">
  951. <div class="dots"> &bull; &bull; &bull; </div>
  952. <div class="boxtitle"> {text:title2} </div>
  953. </div>
  954. <img src="{image:top right}" draggable="false">
  955.  
  956. </div>
  957.  
  958. <div class="graph3">
  959.  
  960. <div class="graph3top">
  961. <div class="dots"> &bull; &bull; &bull; </div>
  962. <div class="boxtitle"> {text:title3} </div>
  963. </div>
  964. <img src="{image:top left}" draggable="false">
  965.  
  966. </div>
  967.  
  968.  
  969.  
  970. <div id="border"> </div>
  971. <div id="container">
  972.  
  973.  
  974.  
  975.  
  976. <!--- NAVIGATION TAB --->
  977.  
  978. <div id="about" class="tabcontent" style="display:none">
  979.  
  980. <div class="tabtop"> <button> &bull; <b>&bull;</b> <span>&bull;</span> </button> <div class="tabtitle"> http://{name}.com/about </div> </div>
  981.  
  982.  
  983. <div class="stats">
  984.  
  985. <!-- USER GUIDE:
  986.  
  987. edit your stats here in case you'd like to change them!
  988.  
  989. change 'activity' to 'agility'
  990.  
  991. example:
  992.  
  993. <div class="stitle"> activity. </div>
  994.  
  995. <div class="stitle"> agility. </div> -->
  996.  
  997. <li>
  998.  
  999. <div class="stitle"> activity. </div>
  1000.  
  1001. <div class="bar"> <div class="stat1"> </div> </div>
  1002.  
  1003. </li>
  1004.  
  1005. <li>
  1006.  
  1007. <div class="stitle"> amicability. </div>
  1008.  
  1009. <div class="bar"> <div class="stat2"> </div> </div>
  1010.  
  1011. </li>
  1012.  
  1013. <li>
  1014. <div class="stitle"> intelligence. </div>
  1015.  
  1016. <div class="bar"> <div class="stat3"> </div> </div>
  1017.  
  1018. </li>
  1019.  
  1020. <li>
  1021.  
  1022. <div class="stitle"> humour. </div>
  1023.  
  1024. <div class="bar"> <div class="stat4"> </div> </div>
  1025.  
  1026. </li>
  1027.  
  1028. </div>
  1029.  
  1030. <div class="info">
  1031.  
  1032.  
  1033. <!-- USER GUIDE:
  1034.  
  1035. edit your personal info here! -->
  1036.  
  1037.  
  1038. <li> <b> ooc. </b> <br>
  1039.  
  1040. &. alias goes here </li>
  1041.  
  1042. <li> <b> established. </b> <br>
  1043.  
  1044. &. june 2016 </li>
  1045.  
  1046. <li> <b> status. </b> <br>
  1047.  
  1048. &. type of blog </li>
  1049.  
  1050. </div>
  1051.  
  1052. <div class="mssg">
  1053.  
  1054. <div class="mssgtop"> <i class="fas fa-angle-left"></i> <div class="mssgname"> {text:message title} </div> </div>
  1055.  
  1056. <div class="chats">
  1057.  
  1058. <!-- USER GUIDE:
  1059.  
  1060. edit the text messages here!
  1061.  
  1062.  
  1063. make sure / INCOMING / messages remain under the <div class="yours messages"> tag!!
  1064.  
  1065. make sure / OUTGOING / messages remain under the <div class="mine messages"> tag!!
  1066.  
  1067. in order to add a new text bubble, add
  1068.  
  1069. <div class="message">
  1070. this is a regular chat bubble!
  1071. </div>
  1072.  
  1073. if you'd like the text bubble to have a tail / triangle, add
  1074.  
  1075. <div class="message last">
  1076. this is a chat bubble with a tail / triangle
  1077. </div>
  1078.  
  1079. if you have any issues or questions, please feel free to reach out!!
  1080.  
  1081. -->
  1082.  
  1083.  
  1084.  
  1085. <!-- copy from here -->
  1086.  
  1087. <div class="yours messages">
  1088.  
  1089. <!-- start incoming messages -->
  1090.  
  1091. <div class="message">
  1092. hiiii x
  1093. </div>
  1094. <div class="message last">
  1095. how r u ?
  1096. </div>
  1097.  
  1098. <!-- end incoming messages -->
  1099.  
  1100. </div>
  1101.  
  1102. <!-- to here for a new group of incoming messages -->
  1103.  
  1104.  
  1105.  
  1106.  
  1107. <!-- copy from here -->
  1108.  
  1109. <div class="mine messages">
  1110.  
  1111. <!-- start outgoing messages -->
  1112.  
  1113. <div class="message">
  1114. here are some text messages! you can make them however long as you'd like, however make sure they don't take up the entire page's space as it doesn't scroll !
  1115. </div>
  1116. <div class="message last">
  1117. short mssg
  1118. </div>
  1119.  
  1120. <!-- end outgoing messages -->
  1121.  
  1122. </div>
  1123.  
  1124. <!-- to here for a new group of outgoing messages -->
  1125.  
  1126.  
  1127.  
  1128.  
  1129. </div>
  1130.  
  1131. <div class="mssgbottom">
  1132.  
  1133. <i class="fas fa-camera"></i>
  1134. <div class="mssgtxt">imessage</div>
  1135.  
  1136. </div>
  1137.  
  1138. </div>
  1139.  
  1140. </div>
  1141.  
  1142.  
  1143.  
  1144.  
  1145. <!--- NAVIGATION TAB --->
  1146.  
  1147. <div id="navi" class="tabcontent" style="display:none">
  1148.  
  1149. <div class="tabtop"> <button> &bull; <b>&bull;</b> <span>&bull;</span> </button> <div class="tabtitle"> http://{name}.com/navigate </div> </div>
  1150.  
  1151.  
  1152. <div class="dates"> </div>
  1153.  
  1154. <div id="clock"> 00:00</div>
  1155.  
  1156. <div id="date"> <script> var today = new Date(); var day = today.getDay(); var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]; var dayname = days[day]; document.write(dayname); </script> </div>
  1157.  
  1158. <div id="date2">
  1159. <script> const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; const d = new Date(); document.write( monthNames[d.getMonth()] + ' ' + [d.getDate()] ); </script></div>
  1160.  
  1161.  
  1162.  
  1163.  
  1164. <!-- USER GUIDE:
  1165.  
  1166. edit your links here!! -->
  1167.  
  1168.  
  1169.  
  1170.  
  1171. <div class="nlinks">
  1172.  
  1173. <!-- row one -->
  1174.  
  1175. <li> <a href="link 1 url"> <span class="th th-acorn-o"></span> <br> link </a></li>
  1176.  
  1177. <li> <a href="link 2 url"> <span class="th th-aloe-vera-o"></span> <br> link </a></li>
  1178.  
  1179. <li> <a href="link 3 url"> <span class="th th-bee-o"></span> <br> link </a></li>
  1180.  
  1181. <li> <a href="link 4 url"> <span class="th th-bamboo-o"></span> <br> link </a></li>
  1182.  
  1183. <!-- row two -->
  1184.  
  1185. <li> <a href="link 5 url"> <span class="th th-blossom-o"></span> <br> link </a></li>
  1186.  
  1187. <li> <a href="link 6 url"> <span class="th th-butterfly-o"></span> <br> link </a></li>
  1188.  
  1189. <li> <a href="link 7 url"> <span class="th th-cake-1-o"></span> <br> link </a></li>
  1190.  
  1191. <li> <a href="link 8 url"> <span class="th th-cherry-o"></span> <br> link </a></li>
  1192.  
  1193. <!-- row three -->
  1194.  
  1195. <li> <a href="link 9 url"> <span class="th th-cloud-3-o"></span> <br> link </a></li>
  1196.  
  1197. <li> <a href="link 10 url"> <span class="th th-chick-o"></span> <br> link </a></li>
  1198.  
  1199. <li> <a href="link 11 url"> <span class="th th-earth-o"></span> <br> link </a></li>
  1200.  
  1201. <li> <a href="link 12 url"> <span class="th th-holly-o"></span> <br> link </a></li>
  1202.  
  1203. </div>
  1204.  
  1205. </div>
  1206.  
  1207.  
  1208.  
  1209.  
  1210.  
  1211. <!--- MUSES TAB --->
  1212.  
  1213. <div id="muses" class="tabcontent" style="display:none">
  1214.  
  1215. <div class="tabtop"> <button> &bull; <b>&bull;</b> <span>&bull;</span> </button> <div class="tabtitle"> http://{name}.com/players </div> </div>
  1216.  
  1217.  
  1218. <div class="muses">
  1219.  
  1220. <!--- copy for a new row of muses from here --->
  1221.  
  1222. <li><a {block:ifNot400pxPosts} href="#?w=415" {/block:ifNot400pxPosts} {block:if400pxPosts} href="#?w=515" {/block:if400pxPosts} rel="muse01" class="poplight" title="muse 1 info!"> <img src="https://via.placeholder.com/85x70" draggable="false"></a></li>
  1223. <li><a {block:ifNot400pxPosts} href="#?w=415" {/block:ifNot400pxPosts} {block:if400pxPosts} href="#?w=515" {/block:if400pxPosts} rel="muse02" class="poplight" title="muse 2 info!"> <img src="https://via.placeholder.com/85x70" draggable="false"></a></li>
  1224. <li><a {block:ifNot400pxPosts} href="#?w=415" {/block:ifNot400pxPosts} {block:if400pxPosts} href="#?w=515" {/block:if400pxPosts} rel="muse03" class="poplight" title="muse 3 info!"> <img src="https://via.placeholder.com/85x70" draggable="false"></a></li>
  1225.  
  1226. <!--- to here !! --->
  1227.  
  1228. <li><a {block:ifNot400pxPosts} href="#?w=415" {/block:ifNot400pxPosts} {block:if400pxPosts} href="#?w=515" {/block:if400pxPosts} rel="muse04" class="poplight" title="muse 4 info!"> <img src="https://via.placeholder.com/85x70" draggable="false"></a></li>
  1229. <li><a {block:ifNot400pxPosts} href="#?w=415" {/block:ifNot400pxPosts} {block:if400pxPosts} href="#?w=515" {/block:if400pxPosts} rel="muse05" class="poplight" title="muse 5 info!"> <img src="https://via.placeholder.com/85x70" draggable="false"></a></li>
  1230. <li><a {block:ifNot400pxPosts} href="#?w=415" {/block:ifNot400pxPosts} {block:if400pxPosts} href="#?w=515" {/block:if400pxPosts} rel="muse06" class="poplight" title="muse 6 info!"> <img src="https://via.placeholder.com/85x70" draggable="false"></a></li>
  1231.  
  1232. <li><a {block:ifNot400pxPosts} href="#?w=415" {/block:ifNot400pxPosts} {block:if400pxPosts} href="#?w=515" {/block:if400pxPosts} rel="muse07" class="poplight" title="muse 7 info!"> <img src="https://via.placeholder.com/85x70" draggable="false"></a></li>
  1233. <li><a {block:ifNot400pxPosts} href="#?w=415" {/block:ifNot400pxPosts} {block:if400pxPosts} href="#?w=515" {/block:if400pxPosts} rel="muse08" class="poplight" title="muse 8 info!"> <img src="https://via.placeholder.com/85x70" draggable="false"></a></li>
  1234. <li><a {block:ifNot400pxPosts} href="#?w=415" {/block:ifNot400pxPosts} {block:if400pxPosts} href="#?w=515" {/block:if400pxPosts} rel="muse09" class="poplight" title="muse 9 info!"> <img src="https://via.placeholder.com/85x70" draggable="false"></a></li>
  1235.  
  1236. </div>
  1237.  
  1238.  
  1239.  
  1240. <!-- USER GUIDE:
  1241.  
  1242. edit the popups here! -->
  1243.  
  1244.  
  1245. <!-- START MUSE 01 POPUP -->
  1246.  
  1247. <div id="muse01" class="popup_block"> <span class="close" onclick="this.parentElement.style.display='none'"> <i data-feather="x" width="15px" height="15px"></i> </span>
  1248.  
  1249. <!-- top left symbol link -->
  1250.  
  1251. <a href="/" title="free link."> <i data-feather="user-plus" width="15px" height="15px" style="padding:15px;"></i> </a>
  1252.  
  1253. <!-- popup icon -->
  1254.  
  1255. <div class="pricon"> <img src="https://via.placeholder.com/65x65" draggable="false"> </div>
  1256. <div class="prsymbol"> <span class="iconify" data-icon="ei:camera" data-inline="false" style="font-size:15px; color:{color:container}; margin-top:2.5px;"></span> </div>
  1257.  
  1258. <!-- popup stats / info -->
  1259.  
  1260. <div class="prinfo">
  1261.  
  1262. <li> <div class="prinfosym"> <span class="iconify" data-icon="ei:user" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div>
  1263. <div class="prinfouser"> <b>user</b> <br> first last </div>
  1264. <div class="prinfosym2"> <span class="iconify" data-icon="ei:pencil" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div> </li>
  1265.  
  1266. <li> <div class="prinfosym"> <span class="iconify" data-icon="ei:question" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div>
  1267. <div class="prinfouser"> <b>profile</b> <br> info goes here! </div>
  1268. <div class="prinfosym2"> <span class="iconify" data-icon="ei:pencil" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div> </li>
  1269.  
  1270. </div>
  1271.  
  1272. <!-- popup biography -->
  1273.  
  1274. <div class="bio"> </div>
  1275. <div class="biotxt"> Lorem ipsum dolor sit amet, consectetuer. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. </div>
  1276.  
  1277. <!-- popup name -->
  1278.  
  1279. <div class="name"> name. </div>
  1280.  
  1281. <!-- popup link -->
  1282.  
  1283. <div class="plink">
  1284.  
  1285. <li><a href="/"> about. </a></li>
  1286. <li><a href="/"> threads. </a></li>
  1287. <li><a href="/"> musings. </a></li>
  1288. <li><a href="/"> vanity. </a></li>
  1289.  
  1290. </div>
  1291.  
  1292. </div>
  1293.  
  1294. <!-- END MUSE 01 POPUP -->
  1295.  
  1296.  
  1297. <!-- START MUSE 02 POPUP -->
  1298.  
  1299. <div id="muse02" class="popup_block"> <span class="close" onclick="this.parentElement.style.display='none'"> <i data-feather="x" width="15px" height="15px"></i> </span>
  1300.  
  1301. <!-- top left symbol link -->
  1302.  
  1303. <a href="/" title="free link."> <i data-feather="user-plus" width="15px" height="15px" style="padding:15px;"></i> </a>
  1304.  
  1305. <!-- popup icon -->
  1306.  
  1307. <div class="pricon"> <img src="https://via.placeholder.com/65x65" draggable="false"> </div>
  1308. <div class="prsymbol"> <span class="iconify" data-icon="ei:camera" data-inline="false" style="font-size:15px; color:{color:container}; margin-top:2.5px;"></span> </div>
  1309.  
  1310. <!-- popup stats / info -->
  1311.  
  1312. <div class="prinfo">
  1313.  
  1314. <li> <div class="prinfosym"> <span class="iconify" data-icon="ei:user" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div>
  1315. <div class="prinfouser"> <b>user</b> <br> first last </div>
  1316. <div class="prinfosym2"> <span class="iconify" data-icon="ei:pencil" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div> </li>
  1317.  
  1318. <li> <div class="prinfosym"> <span class="iconify" data-icon="ei:question" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div>
  1319. <div class="prinfouser"> <b>profile</b> <br> info goes here! </div>
  1320. <div class="prinfosym2"> <span class="iconify" data-icon="ei:pencil" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div> </li>
  1321.  
  1322. </div>
  1323.  
  1324. <!-- popup biography -->
  1325.  
  1326. <div class="bio"> </div>
  1327. <div class="biotxt"> Lorem ipsum dolor sit amet, consectetuer. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. </div>
  1328.  
  1329. <!-- popup name -->
  1330.  
  1331. <div class="name"> name 2. </div>
  1332.  
  1333. <!-- popup link -->
  1334.  
  1335. <div class="plink">
  1336.  
  1337. <li><a href="/"> about. </a></li>
  1338. <li><a href="/"> threads. </a></li>
  1339. <li><a href="/"> musings. </a></li>
  1340. <li><a href="/"> vanity. </a></li>
  1341.  
  1342. </div>
  1343.  
  1344. </div>
  1345.  
  1346. <!-- END MUSE 02 POPUP -->
  1347.  
  1348.  
  1349. <!-- START MUSE 03 POPUP -->
  1350.  
  1351. <div id="muse03" class="popup_block"> <span class="close" onclick="this.parentElement.style.display='none'"> <i data-feather="x" width="15px" height="15px"></i> </span>
  1352.  
  1353. <!-- top left symbol link -->
  1354.  
  1355. <a href="/" title="free link."> <i data-feather="user-plus" width="15px" height="15px" style="padding:15px;"></i> </a>
  1356.  
  1357. <!-- popup icon -->
  1358.  
  1359. <div class="pricon"> <img src="https://via.placeholder.com/65x65" draggable="false"> </div>
  1360. <div class="prsymbol"> <span class="iconify" data-icon="ei:camera" data-inline="false" style="font-size:15px; color:{color:container}; margin-top:2.5px;"></span> </div>
  1361.  
  1362. <!-- popup stats / info -->
  1363.  
  1364. <div class="prinfo">
  1365.  
  1366. <li> <div class="prinfosym"> <span class="iconify" data-icon="ei:user" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div>
  1367. <div class="prinfouser"> <b>user</b> <br> first last </div>
  1368. <div class="prinfosym2"> <span class="iconify" data-icon="ei:pencil" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div> </li>
  1369.  
  1370. <li> <div class="prinfosym"> <span class="iconify" data-icon="ei:question" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div>
  1371. <div class="prinfouser"> <b>profile</b> <br> info goes here! </div>
  1372. <div class="prinfosym2"> <span class="iconify" data-icon="ei:pencil" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div> </li>
  1373.  
  1374. </div>
  1375.  
  1376. <!-- popup biography -->
  1377.  
  1378. <div class="bio"> </div>
  1379. <div class="biotxt"> Lorem ipsum dolor sit amet, consectetuer. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. </div>
  1380.  
  1381. <!-- popup name -->
  1382.  
  1383. <div class="name"> name 3. </div>
  1384.  
  1385. <!-- popup link -->
  1386.  
  1387. <div class="plink">
  1388.  
  1389. <li><a href="/"> about. </a></li>
  1390. <li><a href="/"> threads. </a></li>
  1391. <li><a href="/"> musings. </a></li>
  1392. <li><a href="/"> vanity. </a></li>
  1393.  
  1394. </div>
  1395.  
  1396. </div>
  1397.  
  1398. <!-- END MUSE 03 POPUP -->
  1399.  
  1400. <!-- START MUSE 04 POPUP -->
  1401.  
  1402. <div id="muse04" class="popup_block"> <span class="close" onclick="this.parentElement.style.display='none'"> <i data-feather="x" width="15px" height="15px"></i> </span>
  1403.  
  1404. <!-- top left symbol link -->
  1405.  
  1406. <a href="/" title="free link."> <i data-feather="user-plus" width="15px" height="15px" style="padding:15px;"></i> </a>
  1407.  
  1408. <!-- popup icon -->
  1409.  
  1410. <div class="pricon"> <img src="https://via.placeholder.com/65x65" draggable="false"> </div>
  1411. <div class="prsymbol"> <span class="iconify" data-icon="ei:camera" data-inline="false" style="font-size:15px; color:{color:container}; margin-top:2.5px;"></span> </div>
  1412.  
  1413. <!-- popup stats / info -->
  1414.  
  1415. <div class="prinfo">
  1416.  
  1417. <li> <div class="prinfosym"> <span class="iconify" data-icon="ei:user" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div>
  1418. <div class="prinfouser"> <b>user</b> <br> first last </div>
  1419. <div class="prinfosym2"> <span class="iconify" data-icon="ei:pencil" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div> </li>
  1420.  
  1421. <li> <div class="prinfosym"> <span class="iconify" data-icon="ei:question" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div>
  1422. <div class="prinfouser"> <b>profile</b> <br> info goes here! </div>
  1423. <div class="prinfosym2"> <span class="iconify" data-icon="ei:pencil" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div> </li>
  1424.  
  1425. </div>
  1426.  
  1427. <!-- popup biography -->
  1428.  
  1429. <div class="bio"> </div>
  1430. <div class="biotxt"> Lorem ipsum dolor sit amet, consectetuer. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. </div>
  1431.  
  1432. <!-- popup name -->
  1433.  
  1434. <div class="name"> name 4. </div>
  1435.  
  1436. <!-- popup link -->
  1437.  
  1438. <div class="plink">
  1439.  
  1440. <li><a href="/"> about. </a></li>
  1441. <li><a href="/"> threads. </a></li>
  1442. <li><a href="/"> musings. </a></li>
  1443. <li><a href="/"> vanity. </a></li>
  1444.  
  1445. </div>
  1446.  
  1447. </div>
  1448.  
  1449. <!-- END MUSE 04 POPUP -->
  1450.  
  1451. <!-- START MUSE 05 POPUP -->
  1452.  
  1453. <div id="muse05" class="popup_block"> <span class="close" onclick="this.parentElement.style.display='none'"> <i data-feather="x" width="15px" height="15px"></i> </span>
  1454.  
  1455. <!-- top left symbol link -->
  1456.  
  1457. <a href="/" title="free link."> <i data-feather="user-plus" width="15px" height="15px" style="padding:15px;"></i> </a>
  1458.  
  1459. <!-- popup icon -->
  1460.  
  1461. <div class="pricon"> <img src="https://via.placeholder.com/65x65" draggable="false"> </div>
  1462. <div class="prsymbol"> <span class="iconify" data-icon="ei:camera" data-inline="false" style="font-size:15px; color:{color:container}; margin-top:2.5px;"></span> </div>
  1463.  
  1464. <!-- popup stats / info -->
  1465.  
  1466. <div class="prinfo">
  1467.  
  1468. <li> <div class="prinfosym"> <span class="iconify" data-icon="ei:user" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div>
  1469. <div class="prinfouser"> <b>user</b> <br> first last </div>
  1470. <div class="prinfosym2"> <span class="iconify" data-icon="ei:pencil" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div> </li>
  1471.  
  1472. <li> <div class="prinfosym"> <span class="iconify" data-icon="ei:question" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div>
  1473. <div class="prinfouser"> <b>profile</b> <br> info goes here! </div>
  1474. <div class="prinfosym2"> <span class="iconify" data-icon="ei:pencil" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div> </li>
  1475.  
  1476. </div>
  1477.  
  1478. <!-- popup biography -->
  1479.  
  1480. <div class="bio"> </div>
  1481. <div class="biotxt"> Lorem ipsum dolor sit amet, consectetuer. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. </div>
  1482.  
  1483. <!-- popup name -->
  1484.  
  1485. <div class="name"> name 5. </div>
  1486.  
  1487. <!-- popup link -->
  1488.  
  1489. <div class="plink">
  1490.  
  1491. <li><a href="/"> about. </a></li>
  1492. <li><a href="/"> threads. </a></li>
  1493. <li><a href="/"> musings. </a></li>
  1494. <li><a href="/"> vanity. </a></li>
  1495.  
  1496. </div>
  1497.  
  1498. </div>
  1499.  
  1500. <!-- END MUSE 05 POPUP -->
  1501.  
  1502. <!-- START MUSE 06 POPUP -->
  1503.  
  1504. <div id="muse06" class="popup_block"> <span class="close" onclick="this.parentElement.style.display='none'"> <i data-feather="x" width="15px" height="15px"></i> </span>
  1505.  
  1506. <!-- top left symbol link -->
  1507.  
  1508. <a href="/" title="free link."> <i data-feather="user-plus" width="15px" height="15px" style="padding:15px;"></i> </a>
  1509.  
  1510. <!-- popup icon -->
  1511.  
  1512. <div class="pricon"> <img src="https://via.placeholder.com/65x65" draggable="false"> </div>
  1513. <div class="prsymbol"> <span class="iconify" data-icon="ei:camera" data-inline="false" style="font-size:15px; color:{color:container}; margin-top:2.5px;"></span> </div>
  1514.  
  1515. <!-- popup stats / info -->
  1516.  
  1517. <div class="prinfo">
  1518.  
  1519. <li> <div class="prinfosym"> <span class="iconify" data-icon="ei:user" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div>
  1520. <div class="prinfouser"> <b>user</b> <br> first last </div>
  1521. <div class="prinfosym2"> <span class="iconify" data-icon="ei:pencil" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div> </li>
  1522.  
  1523. <li> <div class="prinfosym"> <span class="iconify" data-icon="ei:question" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div>
  1524. <div class="prinfouser"> <b>profile</b> <br> info goes here! </div>
  1525. <div class="prinfosym2"> <span class="iconify" data-icon="ei:pencil" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div> </li>
  1526.  
  1527. </div>
  1528.  
  1529. <!-- popup biography -->
  1530.  
  1531. <div class="bio"> </div>
  1532. <div class="biotxt"> Lorem ipsum dolor sit amet, consectetuer. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. </div>
  1533.  
  1534. <!-- popup name -->
  1535.  
  1536. <div class="name"> name 6. </div>
  1537.  
  1538. <!-- popup link -->
  1539.  
  1540. <div class="plink">
  1541.  
  1542. <li><a href="/"> about. </a></li>
  1543. <li><a href="/"> threads. </a></li>
  1544. <li><a href="/"> musings. </a></li>
  1545. <li><a href="/"> vanity. </a></li>
  1546.  
  1547. </div>
  1548.  
  1549. </div>
  1550.  
  1551. <!-- END MUSE 06 POPUP -->
  1552.  
  1553. <!-- START MUSE 07 POPUP -->
  1554.  
  1555. <div id="muse07" class="popup_block"> <span class="close" onclick="this.parentElement.style.display='none'"> <i data-feather="x" width="15px" height="15px"></i> </span>
  1556.  
  1557. <!-- top left symbol link -->
  1558.  
  1559. <a href="/" title="free link."> <i data-feather="user-plus" width="15px" height="15px" style="padding:15px;"></i> </a>
  1560.  
  1561. <!-- popup icon -->
  1562.  
  1563. <div class="pricon"> <img src="https://via.placeholder.com/65x65" draggable="false"> </div>
  1564. <div class="prsymbol"> <span class="iconify" data-icon="ei:camera" data-inline="false" style="font-size:15px; color:{color:container}; margin-top:2.5px;"></span> </div>
  1565.  
  1566. <!-- popup stats / info -->
  1567.  
  1568. <div class="prinfo">
  1569.  
  1570. <li> <div class="prinfosym"> <span class="iconify" data-icon="ei:user" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div>
  1571. <div class="prinfouser"> <b>user</b> <br> first last </div>
  1572. <div class="prinfosym2"> <span class="iconify" data-icon="ei:pencil" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div> </li>
  1573.  
  1574. <li> <div class="prinfosym"> <span class="iconify" data-icon="ei:question" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div>
  1575. <div class="prinfouser"> <b>profile</b> <br> info goes here! </div>
  1576. <div class="prinfosym2"> <span class="iconify" data-icon="ei:pencil" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div> </li>
  1577.  
  1578. </div>
  1579.  
  1580. <!-- popup biography -->
  1581.  
  1582. <div class="bio"> </div>
  1583. <div class="biotxt"> Lorem ipsum dolor sit amet, consectetuer. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. </div>
  1584.  
  1585. <!-- popup name -->
  1586.  
  1587. <div class="name"> name 7. </div>
  1588.  
  1589. <!-- popup link -->
  1590.  
  1591. <div class="plink">
  1592.  
  1593. <li><a href="/"> about. </a></li>
  1594. <li><a href="/"> threads. </a></li>
  1595. <li><a href="/"> musings. </a></li>
  1596. <li><a href="/"> vanity. </a></li>
  1597.  
  1598. </div>
  1599.  
  1600. </div>
  1601.  
  1602. <!-- END MUSE 07 POPUP -->
  1603.  
  1604. <!-- START MUSE 08 POPUP -->
  1605.  
  1606. <div id="muse08" class="popup_block"> <span class="close" onclick="this.parentElement.style.display='none'"> <i data-feather="x" width="15px" height="15px"></i> </span>
  1607.  
  1608. <!-- top left symbol link -->
  1609.  
  1610. <a href="/" title="free link."> <i data-feather="user-plus" width="15px" height="15px" style="padding:15px;"></i> </a>
  1611.  
  1612. <!-- popup icon -->
  1613.  
  1614. <div class="pricon"> <img src="https://via.placeholder.com/65x65" draggable="false"> </div>
  1615. <div class="prsymbol"> <span class="iconify" data-icon="ei:camera" data-inline="false" style="font-size:15px; color:{color:container}; margin-top:2.5px;"></span> </div>
  1616.  
  1617. <!-- popup stats / info -->
  1618.  
  1619. <div class="prinfo">
  1620.  
  1621. <li> <div class="prinfosym"> <span class="iconify" data-icon="ei:user" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div>
  1622. <div class="prinfouser"> <b>user</b> <br> first last </div>
  1623. <div class="prinfosym2"> <span class="iconify" data-icon="ei:pencil" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div> </li>
  1624.  
  1625. <li> <div class="prinfosym"> <span class="iconify" data-icon="ei:question" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div>
  1626. <div class="prinfouser"> <b>profile</b> <br> info goes here! </div>
  1627. <div class="prinfosym2"> <span class="iconify" data-icon="ei:pencil" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div> </li>
  1628.  
  1629. </div>
  1630.  
  1631. <!-- popup biography -->
  1632.  
  1633. <div class="bio"> </div>
  1634. <div class="biotxt"> Lorem ipsum dolor sit amet, consectetuer. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. </div>
  1635.  
  1636. <!-- popup name -->
  1637.  
  1638. <div class="name"> name 8. </div>
  1639.  
  1640. <!-- popup link -->
  1641.  
  1642. <div class="plink">
  1643.  
  1644. <li><a href="/"> about. </a></li>
  1645. <li><a href="/"> threads. </a></li>
  1646. <li><a href="/"> musings. </a></li>
  1647. <li><a href="/"> vanity. </a></li>
  1648.  
  1649. </div>
  1650.  
  1651. </div>
  1652.  
  1653. <!-- END MUSE 08 POPUP -->
  1654.  
  1655. <!-- START MUSE 09 POPUP -->
  1656.  
  1657. <div id="muse09" class="popup_block"> <span class="close" onclick="this.parentElement.style.display='none'"> <i data-feather="x" width="15px" height="15px"></i> </span>
  1658.  
  1659. <!-- top left symbol link -->
  1660.  
  1661. <a href="/" title="free link."> <i data-feather="user-plus" width="15px" height="15px" style="padding:15px;"></i> </a>
  1662.  
  1663. <!-- popup icon -->
  1664.  
  1665. <div class="pricon"> <img src="https://via.placeholder.com/65x65" draggable="false"> </div>
  1666. <div class="prsymbol"> <span class="iconify" data-icon="ei:camera" data-inline="false" style="font-size:15px; color:{color:container}; margin-top:2.5px;"></span> </div>
  1667.  
  1668. <!-- popup stats / info -->
  1669.  
  1670. <div class="prinfo">
  1671.  
  1672. <li> <div class="prinfosym"> <span class="iconify" data-icon="ei:user" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div>
  1673. <div class="prinfouser"> <b>user</b> <br> first last </div>
  1674. <div class="prinfosym2"> <span class="iconify" data-icon="ei:pencil" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div> </li>
  1675.  
  1676. <li> <div class="prinfosym"> <span class="iconify" data-icon="ei:question" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div>
  1677. <div class="prinfouser"> <b>profile</b> <br> info goes here! </div>
  1678. <div class="prinfosym2"> <span class="iconify" data-icon="ei:pencil" data-inline="false" style="font-size:20px; margin-top:0px; color:{color:accent};"></span> </div> </li>
  1679.  
  1680. </div>
  1681.  
  1682. <!-- popup biography -->
  1683.  
  1684. <div class="bio"> </div>
  1685. <div class="biotxt"> Lorem ipsum dolor sit amet, consectetuer. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. </div>
  1686.  
  1687. <!-- popup name -->
  1688.  
  1689. <div class="name"> name 9. </div>
  1690.  
  1691. <!-- popup link -->
  1692.  
  1693. <div class="plink">
  1694.  
  1695. <li><a href="/"> about. </a></li>
  1696. <li><a href="/"> threads. </a></li>
  1697. <li><a href="/"> musings. </a></li>
  1698. <li><a href="/"> vanity. </a></li>
  1699.  
  1700. </div>
  1701.  
  1702. </div>
  1703.  
  1704. <!-- END MUSE 09 POPUP -->
  1705.  
  1706.  
  1707. </div>
  1708.  
  1709.  
  1710. <!--- POSTS --->
  1711.  
  1712. <div id="posts" class="tabcontent" style="display:current">
  1713.  
  1714. <div id="posts">
  1715. {block:Posts}
  1716. <div class="entry">
  1717.  
  1718.  
  1719. <!-- TOP INFO --->
  1720.  
  1721. <div class="topinfo"> <p style="text-align:left;"> <a href="{Permalink}" title="view the notes."> {NoteCountWithLabel} </a> <span style="float:right;"> <a href="{ReblogURL}" target="_blank" title="reblog this post?">reblog</a>{block:ContentSource} <b>&bull;</b> <a href="{SourceURL}" title="posted by {SourceTitle}.">source</a>{/block:ContentSource} </span></p> </div>
  1722.  
  1723. <!-- TEXT --->
  1724.  
  1725. {block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}{Body}{/block:Text}
  1726.  
  1727. <!-- PHOTOS --->
  1728.  
  1729. {block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{/block:Photo}
  1730.  
  1731. {block:Photoset} {block:IndexPage}{Photoset-500}{/block:IndexPage} {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage} {/block:Photoset}
  1732.  
  1733. <!-- QUOTE --->
  1734.  
  1735. {block:Quote} <div class="quote"> {Quote} </div> <div class="source"> — {Source} </div> {/block:Quote}
  1736.  
  1737. <!-- LINKS --->
  1738.  
  1739. {block:Link} <div class="linktitle"> <a href="{URL}"><h1>{Name}</h1></a></div>
  1740. {block:Description} <p>{Description}</p> {/block:Description}{/block:Link}
  1741.  
  1742. <!-- CHATS --->
  1743.  
  1744. {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}
  1745. {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}
  1746.  
  1747. <!-- AUDIO --->
  1748.  
  1749. {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}
  1750.  
  1751. <!-- VIDEO --->
  1752.  
  1753. {block:Video}<div class="video">{Video-500}</div>{/block:Video}
  1754.  
  1755. <!-- ASKS --->
  1756.  
  1757. {block:Answer}<div id="question">{Question} <div id="asker">written by {Asker}</div></div>{Answer} {/block:Answer}
  1758.  
  1759.  
  1760. {block:Caption}{Caption}{/block:Caption}
  1761.  
  1762. <!-- READ MORE --->
  1763.  
  1764. {block:More}<div class="more"><a href="{Permalink}" class="more-btn">read more</a></div>{/block:More}
  1765.  
  1766. <!-- BOTTOM INFO --->
  1767.  
  1768. <div class="bottominfo"> posted <a href="{Permalink}" title="{DayOfWeek}, {Month} {DayOfMonth}{DayOfMonthSuffix} {Year}.">{TimeAgo}</a> </div>
  1769.  
  1770. <!-- TAGS --->
  1771.  
  1772. {block:HasTags} <div class="tags"> <span> {PostAuthorName} said: </span> {block:Tags}<a href="{TagURL}">{Tag},</a> {/block:Tags}<br></div>{/block:HasTags}
  1773.  
  1774. <!-- POST NOTES --->
  1775.  
  1776. <div class="note"> {block:PostNotes}{PostNotes}{/block:PostNotes} </div>
  1777.  
  1778.  
  1779. </div>
  1780. {/block:Posts}
  1781.  
  1782.  
  1783.  
  1784.  
  1785. <!-- PAGINATION --->
  1786.  
  1787. {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}
  1788.  
  1789.  
  1790.  
  1791.  
  1792. </div>
  1793. </div>
  1794.  
  1795. </div>
  1796. </div>
  1797.  
  1798.  
  1799.  
  1800. <div id="cred">
  1801. <a href="http://twentys.tumblr.com" title="made by julie."><span class="th th-holly-o"></span></a>
  1802. </div>
  1803.  
  1804.  
  1805.  
  1806.  
  1807. <script> feather.replace() </script>
  1808.  
  1809.  
  1810.  
  1811.  
  1812. </body>
  1813. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!