API tools faq
paste
lovesjoon

theme 05: jimin - 300px

lovesjoon
May 11th, 2020 (edited)
1,779
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 33.40 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: 005 - JIMIN by TWENTYS (rmon). ♡
  14.  
  15.  
  16. ♡ READ ME ♡
  17.  
  18.  
  19. + base code by @borntobewildcodes, edited by twentys
  20.  
  21. + pretty please dont recreate / steal parts of this code / remove credit
  22.  
  23. + feel free to reach out if there are any bugs or questions ♡
  24.  
  25.  
  26. hope you enjoy this code !! ♡( ◡‿◡ ) --->
  27.  
  28.  
  29.  
  30.  
  31.  
  32.  
  33.  
  34.  
  35. <title>{Title}</title>
  36. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  37. <link rel="shortcut icon" href="{Favicon}">
  38. {block:Description}
  39. <meta name="description" content="{MetaDescription}">
  40. {/block:Description}
  41.  
  42.  
  43.  
  44.  
  45. <meta name="image:icon" content="1"/>
  46. <meta name="image:graphic" content="1"/>
  47. <meta name="image:navi" content="1"/>
  48.  
  49. <meta name="color:background" content="#fff"/>
  50. <meta name="color:conbox" content="#f0f0f0"/>
  51. <meta name="color:svg bg" content="#f8f8f8"/>
  52. <meta name="color:stroke" content="#ddd"/>
  53. <meta name="color:title" content="#484848"/>
  54. <meta name="color:accent" content="#dee1d6"/>
  55. <meta name="color:accent2" content="#979797"/>
  56. <meta name="color:posts" content="#fff"/>
  57. <meta name="color:shadow" content="#eaeaea"/>
  58. <meta name="color:borders" content="#ddd"/>
  59. <meta name="color:text" content="#acacac"/>
  60. <meta name="color:links" content="#484848"/>
  61. <meta name="color:hover" content="#98a3a9"/>
  62. <meta name="color:bold" content="#d8d6d7"/>
  63. <meta name="color:italic" content="#98a3a9"/>
  64.  
  65. <meta name="if:graphic" content="1"/>
  66. <meta name="if:muse tab" content="1" />
  67.  
  68. <meta name="text:title" content="midnight sun"/>
  69. <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."/>
  70. <meta name="text:optional link url" content="/"/>
  71. <meta name="text:optional link hover" content="free link"/>
  72.  
  73.  
  74.  
  75.  
  76.  
  77.  
  78. <!--- PT. 1: SCRIPTS: JQUERY + TOOLTIP + TABS + FONTS ---->
  79.  
  80.  
  81.  
  82.  
  83. <!--- JQUERY SCRIPTS --->
  84.  
  85. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  86. <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
  87.  
  88.  
  89.  
  90.  
  91. <!--- TOOLTIP SCRIPT ---->
  92.  
  93. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  94. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  95.  
  96. <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>
  97.  
  98.  
  99.  
  100.  
  101. <!--- GOOGLE + ICON FONTS ---->
  102.  
  103. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  104. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/v4-shims.css">
  105. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  106. <link href="https://fonts.googleapis.com/css2?family=Lato&family=Merriweather:ital@1&family=Open+Sans&display=swap" rel="stylesheet">
  107.  
  108.  
  109.  
  110.  
  111. <!--- VIDEO SCRIPT BY SHYTHEMES ---->
  112.  
  113. <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>
  114.  
  115.  
  116.  
  117.  
  118. <!--- TAB SCRIPT ---->
  119.  
  120. <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>
  121.  
  122.  
  123.  
  124.  
  125. <style type="text/css">
  126.  
  127.  
  128.  
  129.  
  130. /*--- HOSTED FONTS BY @TWENTYS ---*/
  131.  
  132. @font-face{ font-family:"cameliya"; src: url('https://dl.dropboxusercontent.com/s/vfh9n8bnl5eatrv/Cameliya%20Stark.ttf’)'); }
  133.  
  134. @font-face{ font-family:"cocogoose"; src: url('https://dl.dropboxusercontent.com/s/t2iwm8rckdm4w8s/Cocogoose%20Pro-trial.ttf’)'); }
  135.  
  136.  
  137.  
  138.  
  139. /*---PT. 2: TOOLTIP + SCROLLBAR + SELECTION---*/
  140.  
  141.  
  142.  
  143.  
  144. /*TOOLTIP*/
  145.  
  146. #s-m-t-tooltip { max-width:auto; max-height:auto; padding:6px 10px 6px 10px; margin:20px 20px 20px 20px; z-index:9999999999; background-color:{color:posts}; color:{color:text}; text-transform:uppercase; letter-spacing:1px; font-weight:bold; font-family: "lato"; font-size:8px; border-radius:5px; border:1px solid {color:stroke}; }
  147.  
  148.  
  149. /*SCROLLBAR*/
  150.  
  151. ::-webkit-scrollbar-thumb { display:none; }
  152.  
  153. ::-webkit-scrollbar { display:none; }
  154.  
  155.  
  156. /*SELECTION*/
  157.  
  158. ::-moz-selection { background:{color:accent}; color:{color:posts}; }
  159.  
  160. ::selection { background:{color:accent}; color:{color:posts}; }
  161.  
  162.  
  163.  
  164.  
  165. /*---PT. 3: BODY + TEXT STYLING---*/
  166.  
  167.  
  168.  
  169.  
  170. /*BODY*/
  171.  
  172. body { margin:0; padding:0; width:100%; height:100%; color:{color:text}; font-family: 'Open Sans', sans-serif; font-size:10px; line-height:18px; background-color:{color:background}; background-image:url({image:background}); background-attachment:fixed; background-repeat:repeat; }
  173.  
  174.  
  175.  
  176. /*FIX*/
  177.  
  178. iframe, img, embed, object { margin:auto; max-width:100%; border:none; }
  179.  
  180. img { margin:auto; max-width:100%; border:none; height:auto; }
  181.  
  182.  
  183.  
  184. /*TEXT STYLING*/
  185.  
  186. select, textarea, input, a { outline:none; }
  187.  
  188. p { margin-top:5px; margin-bottom:5px; }
  189.  
  190. small, sub, sup { font-size:100%; }
  191.  
  192. big { font-size:110%; }
  193.  
  194. h1 { font-size:25px; font-family: 'Merriweather', serif; text-align:center; line-height:28px; background:transparent; color:{color:accent2}; text-transform:none; margin-top:20px; text-transform:lowercase; letter-spacing:1px; }
  195.  
  196. h2 { font-size:13px; font-family:'lato', sans-serif; color:{color:bold}; line-height:18px; background:transparent; text-align:center; letter-spacing:2px; font-weight:lighter; text-transform:uppercase; }
  197.  
  198. a { text-transform:uppercase; letter-spacing:1px; font-weight:bold; font-family: "lato"; color:{color:links}; font-size:9px; text-decoration:none; }
  199.  
  200. a:hover { color:{color:hover};
  201.  
  202. -webkit-transition: all .3s;
  203. -moz-transition: all .3s;
  204. -o-transition: all .3s;
  205. -ms-transition: all .3s;
  206. transition: all .3s; }
  207.  
  208. ul, ol, li { margin:5px 10px; padding:0px; line-height:18px; }
  209.  
  210. b, strong { color:{color:bold}; }
  211.  
  212. i, em { color:{color:italic}; }
  213.  
  214. blockquote { margin:10px; padding-left:20px; border-left:1px solid {color:borders}; }
  215.  
  216.  
  217.  
  218. /*TUMBLR CONTROLS*/
  219.  
  220. 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; }
  221.  
  222. iframe.tmblr-iframe:hover { opacity:1!important; }
  223.  
  224.  
  225.  
  226.  
  227. /*--- PT. 4: CONTAINER + SIDEBAR ---*/
  228.  
  229.  
  230.  
  231.  
  232. /*CONTAINER*/
  233.  
  234. #wrapper { position:absolute; margin:auto; left:0px; right:0px; top:0px; bottom:0px; background-color:transparent; width:1000px; height:560px; overflow:hidden; border-radius:0px; }
  235.  
  236. #container { position:absolute; margin:auto; left:0px; right:0px; top:0px; bottom:0px; background-color:{color:conbox}; width:800px; height:480px; overflow:hidden;
  237.  
  238. -webkit-box-shadow: 5px 5px 27px -10px {color:shadow};
  239. -moz-box-shadow: 5px 5px 27px -10px {color:shadow};
  240. box-shadow: 5px 5px 27px -10px {color:shadow} }
  241.  
  242.  
  243.  
  244. /*BACKGROUND DETAILS*/
  245.  
  246. .dot1 { position:absolute; z-index:999; width:0; height:0; border-left:7px solid transparent; border-right: 7px solid transparent; border-bottom: 14px solid {color:accent}; transform: rotate(15deg); top:120px; right:48px; }
  247.  
  248. .dot2 { position:absolute; z-index:999; width:10px; height:10px; border-radius:100%; background:{color:accent}; left:55px; bottom:75px; }
  249.  
  250. .dot3 { position:absolute; background:{color:svg bg}; width:5px; height:5px; left:30px; top:30px; border:2px solid {color:accent2}; z-index:999; transform:rotate(135deg); }
  251.  
  252. .dot4 { position:absolute; background:{color:svg bg}; width:12px; height:12px; right:30px; bottom:80px; border-radius:100%; border:2px solid {color:accent2}; z-index:999; }
  253.  
  254.  
  255.  
  256. /*SIDEBAR*/
  257.  
  258. .sidebar { position:absolute; z-index:999; width:300px; height:350px; left:55px; top:80px; }
  259.  
  260. .icon { position:absolute; margin:auto; left:0px; top:20px; bottom:200px; right:0px; border-radius:5px; width:50px; height:50px; background:black; {block:ifgraphic} width:120px; height:70px; top:0px; {/block:ifgraphic} }
  261.  
  262. .icon img { border-radius:5px; }
  263.  
  264. .desctxt { position:absolute; width:70%; height:120px; margin:auto; left:0px; right:0px; top:70px; bottom:0px; font-family: "lato"; font-size:8px; line-height:25px; text-align:justify; overflow:scroll; text-transform:uppercase; word-spacing:3px; }
  265.  
  266. .title { font-family:"cocogoose"; font-size:20px; text-shadow: 0px 0px 15px {color:conbox}; width:300px; text-align:center; top:125px; z-index:99; position:absolute; text-transform:uppercase; color: {color:title}; }
  267.  
  268.  
  269.  
  270. /*TAB LINKS*/
  271.  
  272. .tab { position:absolute; overflow: hidden; height:auto; bottom:50px; left:0px; width:300px; text-align:center; }
  273.  
  274. .tab li { display:inline-block; margin:0px 2px 0px 0px; }
  275.  
  276. .tab a { letter-spacing:1px; color:{color:links}; background-color:transparent; width:100px; height:50px; line-height:22px; letter-spacing:1px; font-size:19px; }
  277.  
  278. .tab a:hover { font-size:19px;
  279.  
  280. -webkit-text-fill-color: transparent;
  281. -webkit-text-stroke-width: .5px;
  282. -webkit-text-stroke-color: {color:links};
  283. -webkit-font-smoothing: antialiased; }
  284.  
  285. .tab a:focus { font-size:19px;
  286.  
  287. -webkit-text-fill-color: transparent;
  288. -webkit-text-stroke-width: .5px;
  289. -webkit-text-stroke-color: {color:links};
  290. -webkit-font-smoothing: antialiased; }
  291.  
  292.  
  293.  
  294.  
  295. /*--- PT.5: POSTS + ENTRIES ---*/
  296.  
  297.  
  298.  
  299.  
  300. /*POST CONTAINER*/
  301.  
  302. #postcon { position:absolute; width:400px; height:480px; background-color:transparent; margin:auto; bottom:0px; right:80px; }
  303.  
  304.  
  305.  
  306. /*POSTS*/
  307.  
  308. #posts { position:absolute; width:360px; height:440px; background-color:transparent; overflow:scroll; z-index:1000; top:0px; left:20px; padding:20px 0px 20px 0px; }
  309.  
  310.  
  311.  
  312. /*ENTRY STYLING*/
  313.  
  314. .entry { display: inline-block; float: left; width:300px; padding:10px 10px 0px 10px; height:auto; background:{color:posts}; border: 1px solid {color:borders}; border-radius:0px; overflow: hidden; margin:20px;
  315.  
  316. -webkit-box-shadow: 5px 5px 27px -10px {color:shadow};
  317. -moz-box-shadow: 5px 5px 27px -10px {color:shadow};
  318. box-shadow: 5px 5px 27px -10px {color:shadow} }
  319.  
  320. .entry img { margin:0px; padding:0px; }
  321.  
  322.  
  323.  
  324.  
  325. /*--- PT.6: POST INFO + NOTES + PAGINATION + CREDIT---*/
  326.  
  327.  
  328.  
  329.  
  330. /*TOP POST INFO*/
  331.  
  332. .topinfo { margin-top:0px; margin-left:-10px; margin-bottom:15px; padding: 0px 10px 10px 10px; width: 100%; height: 20px; line-height: 22px; border-bottom:1px solid {color:borders}; background:{color:posts}; }
  333.  
  334. .topinfo a { margin-left: 5px; text-transform:uppercase; letter-spacing:1px; font-weight:bold; font-family: "lato"; color:{color:links}; font-size:9px; }
  335.  
  336. .preblog { float:right; margin-top: 0px; width: auto; height: 26px; line-height:22px; z-index: 100; list-style: none; margin-right:5px; }
  337.  
  338.  
  339.  
  340. /*BOTTOM POST INFO*/
  341.  
  342. .bottominfo { margin-top: 15px; margin-left:-10px; width: 100%; height:auto; min-height: 20px; padding: 10px 15px; font-size: 12px; line-height: 22px; color: {color:text}; border-top:1px solid {color:borders}; background:{color:posts}; overflow:hidden; }
  343.  
  344. .bottominfo a { text-transform:uppercase; letter-spacing:1px; font-weight:bold; font-family: "lato"; color:{color:links}; font-size:9px; }
  345.  
  346. .psource { float:right; margin-top: 0px; width: auto; height: 25px; line-height:22px; z-index: 100; list-style: none; margin-right:10px; }
  347.  
  348.  
  349.  
  350. /*TAGS*/
  351.  
  352. .tags { {block:IndexPage} text-align:left; line-height:10px; margin-top:5px; {/block:IndexPage} }
  353.  
  354. .tags a { font-family: 'lato', sans-serif; color:{color:text}; font-size:8px; }
  355.  
  356. .tags a:hover { font-weight:bold; color:{color:hover}; }
  357.  
  358.  
  359.  
  360. /*POST NOTES*/
  361.  
  362. .note c { float:left; }
  363.  
  364. #notes { margin:0px; width:300px; font-size:12px; color:{color:text}; }
  365.  
  366. ol.notes { padding:0px; margin:0px; list-style-type:none; }
  367.  
  368. ol.notes li.note { margin:0px; padding:10px 0px; border-bottom:1px solid {color:borders}; }
  369.  
  370. ol.notes li.note img.avatar { float:left; vertical-align:-5px; margin-left:0px; margin-right:10px; width:20px; height:20px; }
  371.  
  372. li.more_notes_link_container { font-size: 12px; }
  373.  
  374.  
  375.  
  376. /*PAGINATION*/
  377.  
  378. .pagination { width:100%; text-align:center; }
  379.  
  380. .pagination a { padding:8px; word-spacing:2px; }
  381.  
  382. .pagination a:hover { color:{color:links}; }
  383.  
  384. .pagination i { color:{color:links}; font-size:10px; }
  385.  
  386.  
  387.  
  388. /*CREDIT*/
  389.  
  390. #cred { position:fixed; background-color:{color:posts}; width:auto; height:auto; right:15px; bottom:15px; border-top-right-radius:10px; border-bottom-left-radius:10px; border:1px solid {color:borders}; }
  391.  
  392. #cred span { padding:10px; font-size:18px; background: -webkit-linear-gradient({color:accent}, {color:accent2});
  393.  
  394. -webkit-background-clip: text;
  395. -webkit-text-fill-color: transparent; }
  396.  
  397.  
  398.  
  399.  
  400. /*--- PT.7: POST STYLING ---*/
  401.  
  402.  
  403.  
  404.  
  405. /*CHATS*/
  406.  
  407. .lines { margin:0px; padding:5px; line-height:20px; }
  408.  
  409.  
  410.  
  411. /*QUOTES*/
  412.  
  413. .quote { margin:10px; padding:5px; font-size:18px; line-height:25px; color:{color:italic}; text-align:center; font-family: 'Merriweather', serif; letter-spacing:1px; text-transform:lowercase; word-spacing:3px; }
  414.  
  415. .source { text-align:right; font-size:12px; line-height:20px; }
  416.  
  417.  
  418.  
  419. /*ASKS*/
  420.  
  421. .asker { position:relative; text-transform:lowercase; color:{color:container}; font-size:9px; text-decoration:none; }
  422.  
  423. .asker a { color:{color:links}; text-transform:uppercase; padding:0px 3px 0px 3px; font-family:"lato"; }
  424.  
  425. .asker b { color:{color:links}; text-transform:uppercase; font-weight:bold; padding:0px 3px 0px 3px; font-family:"lato"; }
  426.  
  427. .ask { background:{color:borders}; width:247px; margin-left:20px; height:auto; padding:5px 5px 5px 10px; border-top-left-radius:10px; border-top-right-radius:10px; }
  428.  
  429. .answer { margin:10px; margin-bottom:0; }
  430.  
  431. .bubble { padding:0px 25px 10px 25px; text-align:center; height:auto; margin-top:-10px; border:1px solid {color:borders}; width:210px; margin-left:20px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; }
  432.  
  433.  
  434.  
  435. /*LINKS*/
  436.  
  437. .linktitle { margin:0; margin-top:30px; margin-bottom:10px; color:{color:accent2}; font-weight:normal; font-size:15px; line-height:20px; text-transform:lowercase; }
  438.  
  439.  
  440.  
  441. /*AUDIO*/
  442.  
  443. .playbutton { position:relative; margin-top:45px; margin-left:30px; z-index:9; width:33px; height:38px; overflow:hidden; opacity:0.6; }
  444.  
  445. .albumart img { position:relative; margin-top:-65px; margin-left:0px; height:65px; width:65px; border:1px solid {color:borders}; padding:10px; }
  446.  
  447. .trackinfo { margin-bottom:20px; background:{color:posts}; color:{color:text}; top:2.5px; position:relative; margin-left:100px; height:65px; width:185px; margin-top:-95px; border:1px solid {color:borders}; padding:10px 5px 10px 5px; }
  448.  
  449. .trackname { position:relative; padding-top:15px; text-align:center; font-size:8px; line-height:12px; text-transform:uppercase; font-weight: bold; letter-spacing:2px; }
  450.  
  451. .artist { text-align:center; font-size:7.5px; text-transform:uppercase; letter-spacing:4px; }
  452.  
  453.  
  454.  
  455. /*VIDEOS*/
  456.  
  457. .tumblr_video_container { width:auto!important; height:auto!important; }
  458.  
  459.  
  460.  
  461.  
  462. /*--- PT.8: TABS ---*/
  463.  
  464.  
  465.  
  466.  
  467. /*TAB + CLOSE CONTENT*/
  468.  
  469. .tabcontent { position:absolute; width:480px; height:480px; background:{color:conbox}; z-index:9999; right:0px; top:0px; display:none; overflow:hidden; }
  470.  
  471. .close { position:absolute; right:5px; padding:10px 20px; font-size:11px; z-index:999999; color:{color:links};}
  472.  
  473. .close:hover { cursor:pointer; }
  474.  
  475. @keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} }
  476.  
  477.  
  478. /*MUSE TAB*/
  479.  
  480. .navtitle { font-family:"cameliya"; font-size:60px; text-shadow: 0px 0px 15px {color:conbox}; width:200px; text-align:center; top:230px; z-index:99; position:absolute; color:{color:title}; z-index:999; font-weight:bold; left:170px; }
  481.  
  482. .links { position:absolute; overflow: hidden; height:auto; word-spacing:10px; width:180px; text-align:center; top:100px; left:90px; z-index:999; }
  483.  
  484. .links li { display:inline-block; margin:0px; height:50px; width:50px; line-height:40px; margin:0px -5px -5px -5px; }
  485.  
  486. .links a { text-transform:uppercase; letter-spacing:1px; font-weight:bold; font-family: "lato"; color:{color:links}; background-color:{color:svg bg}; letter-spacing:1px; font-style:italic; font-size:8px; padding:10px; border:1px solid {color:borders}; border-radius:5px; }
  487.  
  488. .links a:hover { color:{color:accent}; border:1px solid {color:borders};
  489.  
  490. -webkit-transition: all 0.8s ease;
  491. -moz-transition: all 0.8s ease;
  492. -o-transition: all 0.8s ease;
  493. -ms-transition: all 0.8s ease;
  494. transition: all 0.8s ease; }
  495.  
  496. .about { position:absolute; bottom:40px; left:40px; z-index:999; overflow:scroll; width:250px; height:55px; font-family:'Merriweather', serif; font-size:10px; line-height:20px; text-transform:lowercase; word-spacing:3px; text-align:justify; }
  497.  
  498. .about b { font-size:12px; color:{color:accent}; }
  499.  
  500. .navicon { position:absolute; z-index:999; width:45px; height:45px; border-radius:100%; left:135px; bottom:105px; background:transparent; }
  501.  
  502. .navicon img { border-radius:100%; }
  503.  
  504.  
  505. /*MUSE TAB*/
  506.  
  507. .muses { position:absolute; width:350px; height:300px; overflow:scroll; z-index:999; margin:auto; left:-30px; top:10px; right:0px; bottom:0px; }
  508.  
  509. .muses li { display:inline-block; width:70px; height:70px; background-color:{color:post container}; margin:15px; border-radius:5px; }
  510.  
  511. .muses img { width:70px; height:70px; border-radius:5px;
  512.  
  513. -webkit-filter: grayscale(100%);
  514. filter: grayscale(100%); }
  515.  
  516. .muses img:hover {
  517.  
  518. -webkit-filter: grayscale(0%);
  519. filter: grayscale(0%);
  520. -webkit-transition: all 0.8s ease;
  521. -moz-transition: all 0.8s ease;
  522. -o-transition: all 0.8s ease;
  523. -ms-transition: all 0.8s ease;
  524. transition: all 0.8s ease; }
  525.  
  526.  
  527.  
  528.  
  529. /*--- PT.9: CUSTOM CSS ---*/
  530.  
  531.  
  532.  
  533.  
  534. {CustomCSS}
  535. </style></head><body>
  536.  
  537.  
  538.  
  539. <div id="wrapper">
  540.  
  541. <div id="container">
  542.  
  543.  
  544.  
  545.  
  546. <!--- CONTAINER BACKGROUND --->
  547.  
  548.  
  549.  
  550.  
  551. <svg xmlns="http://www.w3.org/2000/svg" width="800" height="480" viewBox="0 0 800 480" fill="{color:svg bg}" style="position:absolute; z-index:99;">
  552. <path id="Vorm1" data-name="Vorm1" class="cls-1" d="M-40,220a44.137,44.137,0,0,0,6.6,14.287C-21.476,251.257,43.048,290.35,61,332c24.823,57.59-45.049,135.093-20,161,5.8,6,13.728,6.362,20,7,36.562,3.717,57.254,35.108,91,37,153.251,8.594,605.437,130.248,621.026,69.317C777.781,587.73,734.359,571.2,725,527c-5.4-25.492-3.585-67.512,23-97,29.656-32.895,75.1-22.339,101-60,7.991-11.618,12.817-26.369,13.924-42.242C864.008,312.2,861.371,291.527,850,274c-28.489-43.912-86.789-31.426-119-77a96.623,96.623,0,0,1-15-33c-12.732-53.062,30.374-80.807,19-123C721.781-8.038,644.148-42.611,585-29c-10.326,2.376-17.333,6.8-27,10-52.811,17.49-87.642-3.986-133,4-42.489,7.481-54.265,30.068-96,41-59.652,15.626-106.912,13.548-143-5-26.575-13.659-46.225-33.839-82-40a170.569,170.569,0,0,0-23-2C3.159-23.516-88.586-110.324-113-92c-34,25.515,67.445,253.684,72,305A46.511,46.511,0,0,0-40,220Z"stroke="{color:stroke}"/>
  553. </svg>
  554.  
  555. <svg xmlns="http://www.w3.org/2000/svg" width="800" height="480" viewBox="0 0 800 480" fill="none" style="position:absolute; z-index:999;">
  556. <path id="Vorm2" data-name="Vorm2" class="cls-2" d="M818,218c-22.555-27.432-67.137-32.721-74-63-6.384-28.166,15.362-52.326,17-80,1.778-30.047-12.116-61.546-38-93C664.557-89.02,559.3-90.542,501-93c-120.037-5.061-310.74-30.817-479-34-109.8-2.077-187.235,18.027-201,60C-190.414-32.195-117.924,4.235-93,69c13.171,34.224,14.18,58.113,36,88,1.539,2.109,3.139,4.111,4.813,6.161C-22.149,199.953,12.076,201.588,30,231c23.239,38.133-10.4,75.1,3,122,11.735,41.068,61.02,68.347,55,107-1.21,7.769-11.377,26.552-28,44-12.166,12.77-22.243,18.574-21,26,2.777,16.59,55.635,20.972,68,22,157.978,13.131,699.161,82.813,707,20,2.088-16.73-39.317-26.783-57-67-8.253-18.769-19.347-57.953-3-97,20.856-49.817,78.049-55.091,90-102C853.677,268.014,828.964,231.334,818,218Z"stroke="{color:stroke}"/>
  557. </svg>
  558.  
  559. <div class="dot1"> </div>
  560. <div class="dot2"> </div>
  561. <div class="dot3"> </div>
  562. <div class="dot4"> </div>
  563.  
  564.  
  565.  
  566.  
  567. <!--- SIDEBAR --->
  568.  
  569.  
  570.  
  571.  
  572. <div class="sidebar">
  573.  
  574. <div class="icon">
  575.  
  576. {block:ifgraphic}<img src="{image:graphic}">{/block:ifgraphic}
  577. {block:ifNotgraphic}<img src="{image:icon}">{/block:ifNotgraphic}
  578.  
  579. </div>
  580.  
  581. <div class="title"> {text:title} </div>
  582. <div class="desctxt"> {text:desc} </div>
  583.  
  584. <div class="tab">
  585. <li><a href="/" title="refresh"> • </a></li>
  586. <li><a href="/ask" title="contact"> • </a></li>
  587. <li><a href="#" class="tablinks" onclick="openCity(event, 'navi')" title="navigate"> • </a></li>
  588.  
  589. {block:ifmusetab} <li><a href="#" class="tablinks" onclick="openCity(event, 'muses')" title="characters"> • </a></li> {/block:ifmusetab}
  590.  
  591. {block:ifNotmusetab} <li><a href="{text:optional link url}" title="{text:optional link hover}"> • </a></li> {/block:ifNotmusetab}
  592.  
  593. </div>
  594. </div>
  595.  
  596.  
  597.  
  598.  
  599. <!--- NAVIGATION TAB --->
  600.  
  601.  
  602.  
  603.  
  604. <div id="navi" class="tabcontent"> <span class="close" onclick="this.parentElement.style.display='none'">x</span>
  605.  
  606.  
  607. <svg xmlns="http://www.w3.org/2000/svg" width="800" height="480" viewBox="0 0 800 480" fill="{color:svg bg}" style="position:absolute; z-index:999; right:0px;">
  608. <path id="Vorm1" data-name="Vorm1" class="cls-1" d="M-40,220a44.137,44.137,0,0,0,6.6,14.287C-21.476,251.257,43.048,290.35,61,332c24.823,57.59-45.049,135.093-20,161,5.8,6,13.728,6.362,20,7,36.562,3.717,57.254,35.108,91,37,153.251,8.594,605.437,130.248,621.026,69.317C777.781,587.73,734.359,571.2,725,527c-5.4-25.492-3.585-67.512,23-97,29.656-32.895,75.1-22.339,101-60,7.991-11.618,12.817-26.369,13.924-42.242C864.008,312.2,861.371,291.527,850,274c-28.489-43.912-86.789-31.426-119-77a96.623,96.623,0,0,1-15-33c-12.732-53.062,30.374-80.807,19-123C721.781-8.038,644.148-42.611,585-29c-10.326,2.376-17.333,6.8-27,10-52.811,17.49-87.642-3.986-133,4-42.489,7.481-54.265,30.068-96,41-59.652,15.626-106.912,13.548-143-5-26.575-13.659-46.225-33.839-82-40a170.569,170.569,0,0,0-23-2C3.159-23.516-88.586-110.324-113-92c-34,25.515,67.445,253.684,72,305A46.511,46.511,0,0,0-40,220Z"stroke="{color:stroke}"/>
  609. </svg>
  610.  
  611. <svg xmlns="http://www.w3.org/2000/svg" width="800" height="480" viewBox="0 0 800 480" fill="none" style="position:absolute; z-index:999; right:0px;">
  612. <path id="Vorm2" data-name="Vorm2" class="cls-2" d="M818,218c-22.555-27.432-67.137-32.721-74-63-6.384-28.166,15.362-52.326,17-80,1.778-30.047-12.116-61.546-38-93C664.557-89.02,559.3-90.542,501-93c-120.037-5.061-310.74-30.817-479-34-109.8-2.077-187.235,18.027-201,60C-190.414-32.195-117.924,4.235-93,69c13.171,34.224,14.18,58.113,36,88,1.539,2.109,3.139,4.111,4.813,6.161C-22.149,199.953,12.076,201.588,30,231c23.239,38.133-10.4,75.1,3,122,11.735,41.068,61.02,68.347,55,107-1.21,7.769-11.377,26.552-28,44-12.166,12.77-22.243,18.574-21,26,2.777,16.59,55.635,20.972,68,22,157.978,13.131,699.161,82.813,707,20,2.088-16.73-39.317-26.783-57-67-8.253-18.769-19.347-57.953-3-97,20.856-49.817,78.049-55.091,90-102C853.677,268.014,828.964,231.334,818,218Z"stroke="{color:stroke}"/>
  613. </svg>
  614.  
  615. <div class="dot1"> </div>
  616. <div class="dot4"> </div>
  617.  
  618. <svg xmlns="http://www.w3.org/2000/svg" width="800" height="480" viewBox="0 0 800 480" fill="{color:conbox}" style="position:absolute; z-index:999; right:0px; top:-70px;" stroke-width="1" >
  619. <path id="Vorm3" data-name="Vorm3" class="cls-3" d="M472,177c38.093-16.565,48.822-58.319,87-63,27.395-3.359,60.66,12.043,69,35,9.484,26.106-19.149,46.774-13,78,4.513,22.921,24.131,33.438,35,56,14.709,30.534,15.946,51.489,7,65-13.667,20.641-50.052,22.863-76,15-32.4-9.818-34.621-32.6-64-41-37.014-10.578-75.729,23.523-94,8-11.338-9.633-12.48-35.3-4-52,3.566-7.023,8.5-11.915,8-20-0.537-8.662-6.86-13.921-12-20-4.165-4.927-19.378-24.386-14-38C407.475,183.61,450.693,186.266,472,177Z"stroke="{color:stroke}"/>
  620. </svg>
  621.  
  622. <svg xmlns="http://www.w3.org/2000/svg" width="800" height="480" viewBox="0 0 800 480" fill="none" style="position:absolute; z-index:999; right:0px; top:-70px;" stroke-width="1" >
  623. <path id="Vorm3" data-name="Vorm3" class="cls-3" d="M456,136c20.842-13.418,58.292,21.671,95,23,38.561,1.4,72.517-32.27,99-18,19.383,10.444,29.414,41.984,22,65-7.506,23.3-31.572,29.973-44,51-9.018,15.257-12.244,34.442-11,54,1.682,26.431,23.171,50.485,15,68-9.706,20.8-52.84,30.043-76,14-19.731-13.668-16.959-44.48-32-67-12.99-19.448-32.185-32.858-49-40-27.444-11.656-67.579-4.5-73-17-3.11-7.174,4.081-18,16-30a76.007,76.007,0,0,0,18-28c5.245-14.677,4.214-31,6-41C445.283,151.62,451.952,138.606,456,136Z"stroke="{color:stroke}"/>
  624. </svg>
  625.  
  626.  
  627.  
  628.  
  629. <!--- EDIT NAVI TEXT HERE --->
  630.  
  631.  
  632. <div class="navtitle"> Atlas ; </div>
  633.  
  634. <div class="links">
  635.  
  636. <li><a href="/" title="title">o1</a></li>
  637. <li><a href="/" title="title">o2</a></li>
  638. <li><a href="/" title="title">o3</a></li>
  639.  
  640. <li><a href="/" title="title">o4</a></li>
  641. <li><a href="/" title="title">o5</a></li>
  642. <li><a href="/" title="title">o6</a></li>
  643.  
  644. </div>
  645.  
  646. <div class="navicon"> <img src="{image:navi}"> </div>
  647.  
  648. <div class="about"> <b>name, age, tz.</b> : whatever you want can go here ! wid, blog info, some song lyrics, application layout for your character, etc ! this scrolls so you can make this as long or short as you want, 3 lines looks best though ! </div>
  649.  
  650.  
  651. </div>
  652.  
  653.  
  654.  
  655.  
  656. <!--- MUSES TAB --->
  657.  
  658.  
  659.  
  660.  
  661. <div id="muses" class="tabcontent"> <span class="close" onclick="this.parentElement.style.display='none'">x</span>
  662.  
  663. <svg xmlns="http://www.w3.org/2000/svg" width="800" height="480" viewBox="0 0 800 480" fill="{color:svg bg}" style="position:absolute; z-index:999; right:0px;">
  664. <path id="Vorm1" data-name="Vorm1" class="cls-1" d="M-40,220a44.137,44.137,0,0,0,6.6,14.287C-21.476,251.257,43.048,290.35,61,332c24.823,57.59-45.049,135.093-20,161,5.8,6,13.728,6.362,20,7,36.562,3.717,57.254,35.108,91,37,153.251,8.594,605.437,130.248,621.026,69.317C777.781,587.73,734.359,571.2,725,527c-5.4-25.492-3.585-67.512,23-97,29.656-32.895,75.1-22.339,101-60,7.991-11.618,12.817-26.369,13.924-42.242C864.008,312.2,861.371,291.527,850,274c-28.489-43.912-86.789-31.426-119-77a96.623,96.623,0,0,1-15-33c-12.732-53.062,30.374-80.807,19-123C721.781-8.038,644.148-42.611,585-29c-10.326,2.376-17.333,6.8-27,10-52.811,17.49-87.642-3.986-133,4-42.489,7.481-54.265,30.068-96,41-59.652,15.626-106.912,13.548-143-5-26.575-13.659-46.225-33.839-82-40a170.569,170.569,0,0,0-23-2C3.159-23.516-88.586-110.324-113-92c-34,25.515,67.445,253.684,72,305A46.511,46.511,0,0,0-40,220Z"stroke="{color:stroke}"/>
  665. </svg>
  666.  
  667. <svg xmlns="http://www.w3.org/2000/svg" width="800" height="480" viewBox="0 0 800 480" fill="none" style="position:absolute; z-index:999; right:0px;">
  668. <path id="Vorm2" data-name="Vorm2" class="cls-2" d="M818,218c-22.555-27.432-67.137-32.721-74-63-6.384-28.166,15.362-52.326,17-80,1.778-30.047-12.116-61.546-38-93C664.557-89.02,559.3-90.542,501-93c-120.037-5.061-310.74-30.817-479-34-109.8-2.077-187.235,18.027-201,60C-190.414-32.195-117.924,4.235-93,69c13.171,34.224,14.18,58.113,36,88,1.539,2.109,3.139,4.111,4.813,6.161C-22.149,199.953,12.076,201.588,30,231c23.239,38.133-10.4,75.1,3,122,11.735,41.068,61.02,68.347,55,107-1.21,7.769-11.377,26.552-28,44-12.166,12.77-22.243,18.574-21,26,2.777,16.59,55.635,20.972,68,22,157.978,13.131,699.161,82.813,707,20,2.088-16.73-39.317-26.783-57-67-8.253-18.769-19.347-57.953-3-97,20.856-49.817,78.049-55.091,90-102C853.677,268.014,828.964,231.334,818,218Z"stroke="{color:stroke}"/>
  669. </svg>
  670.  
  671. <div class="dot1"> </div>
  672. <div class="dot4"> </div>
  673.  
  674.  
  675.  
  676.  
  677. <!--- EDIT MUSES HERE --->
  678.  
  679.  
  680. <div class="muses">
  681.  
  682. <!--- copy for a new row of muses from here --->
  683.  
  684. <li><a href="/" title="muse 1 info"><img src="https://i.postimg.cc/vTbRW1Y7/jimin-icon.png"></a></li>
  685. <li><a href="/" title="muse 2 info"><img src="https://i.postimg.cc/vTbRW1Y7/jimin-icon.png"></a></li>
  686. <li><a href="/" title="muse 3 info"><img src="https://i.postimg.cc/vTbRW1Y7/jimin-icon.png"></a></li>
  687.  
  688. <!--- to here !! --->
  689.  
  690. <li><a href="/" title="muse 4 info"><img src="https://i.postimg.cc/vTbRW1Y7/jimin-icon.png"></a></li>
  691. <li><a href="/" title="muse 5 info"><img src="https://i.postimg.cc/vTbRW1Y7/jimin-icon.png"></a></li>
  692. <li><a href="/" title="muse 6 info"><img src="https://i.postimg.cc/vTbRW1Y7/jimin-icon.png"></a></li>
  693.  
  694. <li><a href="/" title="muse 7 info"><img src="https://i.postimg.cc/vTbRW1Y7/jimin-icon.png"></a></li>
  695. <li><a href="/" title="muse 8 info"><img src="https://i.postimg.cc/vTbRW1Y7/jimin-icon.png"></a></li>
  696. <li><a href="/" title="muse 9 info"><img src="https://i.postimg.cc/vTbRW1Y7/jimin-icon.png"></a></li>
  697.  
  698. <li><a href="/" title="muse 10 info"><img src="https://i.postimg.cc/vTbRW1Y7/jimin-icon.png"></a></li>
  699. <li><a href="/" title="muse 11 info"><img src="https://i.postimg.cc/vTbRW1Y7/jimin-icon.png"></a></li>
  700. <li><a href="/" title="muse 12 info"><img src="https://i.postimg.cc/vTbRW1Y7/jimin-icon.png"></a></li>
  701.  
  702. </div>
  703. </div>
  704.  
  705.  
  706.  
  707.  
  708. <!--- POSTS --->
  709.  
  710.  
  711.  
  712.  
  713. <div id="postcon">
  714.  
  715. <div id="posts">
  716. {block:Posts}
  717. <div class="entry">
  718.  
  719. {block:Date} <div class="topinfo"><a href="{Permalink}">{Month} {Year}</a>
  720. <div class="preblog"><a href="{ReblogURL}" target="_blank" >reblog</a></div></div>{/block:Date}
  721.  
  722. {block:Text} {block:Title} <a href="{Permalink}"> <h1>{Title}</h1></a> {/block:Title} {Body} {/block:Text}
  723.  
  724. {block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{/block:Photo}
  725.  
  726. {block:Photoset} {block:IndexPage}{Photoset-500}{/block:IndexPage} {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage} {/block:Photoset}
  727.  
  728. {block:Chat} <div class="chat"> {block:Title} <h2>{Title}</h2> {/block:Title} {block:Lines} <div class="lines"> {block:Label} <b>{Label}</b> {/block:Label} {Line}</div> {/block:Lines} </div> {/block:Chat}
  729.  
  730. {block:Quote} <div class="quote"> "{Quote}" </div> <div class="source"> — {Source} </div> {/block:Quote}
  731.  
  732. {block:Link} <div class="linktitle"> <a href="{URL}"><h1>{Name}</h1></a></div>
  733. {block:Description} <p>{Description}</p> {/block:Description}{/block:Link}
  734.  
  735. {block:Video}<div class="video">{Video-500}</div>{/block:Video}
  736.  
  737. {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"> {block:TrackName}{TrackName}{/block:TrackName}</div><div class="artist"> {block:Artist}{Artist}{/block:Artist} </div></div> {/block:AudioPlayer}{/block:Audio}
  738.  
  739. {block:Answer}<div class="asker"><div class="ask">({TimeAgo}) <b>{Asker}</b> said:</div></div><div class="bubble"><br>{Question}</div><div class="answer"> {Answer} </div>{/block:Answer}
  740.  
  741. {block:Caption}{Caption}{/block:Caption}
  742.  
  743. <div class="bottominfo"><div class="psource">{block:ContentSource}<a href="{SourceURL}">source</a>{/block:ContentSource}</div>
  744.  
  745. {block:NoteCount}<a href="{Permalink}"> {NoteCountWithLabel}</a>{/block:NoteCount}
  746.  
  747. {block:HasTags}<div class="tags">{block:Tags}<a href="{TagURL}">#{Tag}</a> &nbsp;{/block:Tags}<br></div>{/block:HasTags}</div>
  748.  
  749. {block:PermalinkPage}{block:PostNotes}<div id="notes">{PostNotes}</div>{/block:PostNotes}{/block:PermalinkPage}
  750.  
  751. </div>
  752. {/block:Posts}
  753.  
  754.  
  755.  
  756.  
  757. {block:Pagination} <div class="pagination"> {block:previouspage} <a href="{previouspage}"> <i class="fas fa-arrow-left"></i> </a> {/block:previouspage} {block:nextpage} <a href="{nextpage}"> <i class="fas fa-arrow-right"></i> </a> {/block:nextpage} </div> {/block:pagination}
  758.  
  759.  
  760.  
  761.  
  762. </div>
  763. </div>
  764.  
  765. </div>
  766. </div>
  767.  
  768.  
  769.  
  770.  
  771. <div id="cred">
  772. <a href="http://twentys.tumblr.com" title="made by julie."><span class="th th-holly-o"></span></a>
  773. </div>
  774.  
  775.  
  776.  
  777.  
  778. </body>
  779. </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!