API tools faq
paste
lovesjoon

theme 02: jin.

lovesjoon
Mar 29th, 2020 (edited)
2,842
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.32 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: 002 - JIN 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:png" content="1"/>
  47. <meta name="image:abouticon" content="1"/>
  48. <meta name="image:aboutpic" content="1"/>
  49. <meta name="image:navipic" content="1"/>
  50. <meta name="image:navipic400px" content="1"/>
  51.  
  52. <meta name="color:background" content="#eee"/>
  53. <meta name="color:sidebar" content="#fff"/>
  54. <meta name="color:post container" content="#fff"/>
  55. <meta name="color:posts" content="#fff"/>
  56. <meta name="color:borders" content="#ddd"/>
  57. <meta name="color:accent" content="#dfada4"/>
  58. <meta name="color:accent2" content="#a59b9b"/>
  59. <meta name="color:title" content="#dfada4"/>
  60. <meta name="color:text" content="#acacac"/>
  61. <meta name="color:links" content="#d1c7c5"/>
  62. <meta name="color:hover" content="#98a3a9"/>
  63. <meta name="color:bold" content="#d8d6d7"/>
  64. <meta name="color:italic" content="#98a3a9"/>
  65.  
  66. <meta name="if:400px posts" content="1"/>
  67.  
  68. <meta name="text:title" content="Moonlight"/>
  69. <meta name="text:desc" content="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis."/>
  70.  
  71.  
  72.  
  73.  
  74. <!--- PT. 1: SCRIPTS: JQUERY + TOOLTIP + TABS + FONTS ---->
  75.  
  76.  
  77.  
  78.  
  79. <!--- JQUERY SCRIPTS --->
  80.  
  81. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  82. <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
  83.  
  84.  
  85.  
  86. <!--- TOOLTIP SCRIPT ---->
  87.  
  88. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  89. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  90.  
  91. <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>
  92.  
  93.  
  94.  
  95. <!--- GOOGLE + ICON FONTS ---->
  96.  
  97. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  98. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/v4-shims.css">
  99.  
  100. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  101.  
  102. <link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans|Source+Sans+Pro&display=swap" rel="stylesheet">
  103.  
  104. <link href="https://fonts.googleapis.com/css2?family=Merriweather:ital@1&display=swap" rel="stylesheet">
  105.  
  106.  
  107.  
  108.  
  109. <!--- TAB SCRIPT ---->
  110.  
  111. <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>
  112.  
  113.  
  114.  
  115.  
  116. <style type="text/css">
  117.  
  118.  
  119.  
  120.  
  121. /*--- FONTS HOSTED BY @TWENTYS ---*/
  122.  
  123. @font-face{ font-family:"amalfi"; src: url('https://dl.dropboxusercontent.com/s/u826utwnrqcstlm/Amalfi%20Coast.ttf’)'); }
  124.  
  125. @font-face{ font-family:"adam"; src: url('https://dl.dropboxusercontent.com/s/u9qm4mfgukm3t4u/Adam.ttf’)'); }
  126.  
  127.  
  128.  
  129.  
  130.  
  131. /*---PT. 2: TOOLTIP + SCROLLBAR + SELECTION---*/
  132.  
  133.  
  134.  
  135.  
  136. /*TOOLTIP*/
  137.  
  138. #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:accent2}; text-transform:uppercase; letter-spacing:1px; font-weight:bold; font-family: "lato"; font-size:8px; border-radius:5px; border:1px solid {color:borders}; }
  139.  
  140.  
  141. /*SCROLLBAR*/
  142.  
  143. ::-webkit-scrollbar-thumb { display:none; }
  144.  
  145. ::-webkit-scrollbar { display:none; }
  146.  
  147.  
  148. /*SELECTION*/
  149.  
  150. ::-moz-selection { background:{color:accent}; color:{color:posts}; }
  151.  
  152. ::selection { background:{color:accent}; color:{color:posts}; }
  153.  
  154.  
  155.  
  156.  
  157. /*---PT. 3: BODY + TEXT STYLING---*/
  158.  
  159.  
  160.  
  161.  
  162. /*BODY*/
  163.  
  164. body { margin:0; padding:0; width:100%; height:100%; color:{color:text}; font-family:'Open Sans',sans-serif; font-size:10px; line-height:15px; background-color:{color:background}; background-image:url({image:background}); background-attachment:fixed; background-repeat:repeat; {block:if400pxPosts} font-size:12px; line-height:17px; {/block:if400pxPosts} }
  165.  
  166.  
  167.  
  168. /*FIX*/
  169.  
  170. iframe, img, embed, object { margin:auto; max-width:100%; border:none; }
  171.  
  172. img { margin:auto; max-width:100%; border:none; height:auto; }
  173.  
  174.  
  175.  
  176. /*TEXT STYLING*/
  177.  
  178. select, textarea, input, a { outline:none; }
  179.  
  180. p { margin-top:5px; margin-bottom:5px; }
  181.  
  182. small, sub, sup { font-size:100%; }
  183.  
  184. big { font-size:110%; }
  185.  
  186. h1 { font-size:25px; font-family: 'Merriweather', serif; text-align:center; line-height:28px; background:transparent; color:{color:title}; text-transform:none; margin-top:20px; text-transform:lowercase; letter-spacing:1px; }
  187.  
  188. h2 { font-size:13px; font-family:'lato', sans-serif; color:{color:accent2}; line-height:18px; background:transparent; text-align:center; letter-spacing:2px; font-weight:lighter; text-transform:uppercase; }
  189.  
  190. a { text-transform:uppercase; letter-spacing:1px; font-weight:bold; font-family: "lato"; color:{color:links}; font-size:9px; text-decoration:none; }
  191.  
  192. a:hover { color:{color:hover};
  193.  
  194. -webkit-transition: all .3s;
  195. -moz-transition: all .3s;
  196. -o-transition: all .3s;
  197. -ms-transition: all .3s;
  198. transition: all .3s; }
  199.  
  200. ul, ol, li { margin:5px 10px; padding:0px; }
  201.  
  202. b, strong { color:{color:bold}; }
  203.  
  204. i, em { color:{color:italic}; }
  205.  
  206. blockquote { margin:10px; padding-left:20px; border-left:1px solid {color:borders}; }
  207.  
  208.  
  209.  
  210. /*TUMBLR CONTROLS*/
  211.  
  212. 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; }
  213.  
  214. iframe.tmblr-iframe:hover { opacity:1!important; }
  215.  
  216.  
  217.  
  218.  
  219. /*--- PT. 4: CONTAINER + SIDEBAR ---*/
  220.  
  221.  
  222.  
  223.  
  224. /*CONTAINER*/
  225.  
  226. #containerbox { position:absolute; margin:auto; left:0px; right:0px; top:0px; bottom:0px; background-color:transparent; width:1000px; height:630px; overflow:hidden; border-radius:0px; }
  227.  
  228. #container { position:absolute; margin:auto; left:0px; right:0px; top:0px; bottom:0px; width:800px; {block:if400pxPosts} width:900px; {/block:if400pxPosts} height:480px; overflow:hidden; border-radius:0px; }
  229.  
  230.  
  231. /*SIDEBAR*/
  232.  
  233. #sidebar { position:absolute; width:400px; height:480px; background-color:{color:sidebar}; margin:auto; bottom:0px; left:0px; }
  234.  
  235. .circle1 { position:absolute; width:200px; height:200px; border-radius:100%; background:{color:accent}; bottom:-70px; left:-20px; opacity:.5; }
  236.  
  237. .circle2 { position:absolute; width:100px; height:100px; border-radius:100%; background:{color:accent}; bottom:70px; left:80px; opacity:.5; }
  238.  
  239. .circle3 { position:absolute; width:180px; height:180px; border-radius:100%; background:{color:accent}; top:150px; right:-100px; opacity:.5; }
  240.  
  241. .circle4 { position:absolute; width:150px; height:150px; border-radius:100%; background:{color:accent}; top:-80px; left:-80px; opacity:.5; }
  242.  
  243. .circle5 { position:absolute; width:30px; height:30px; border-radius:100%; background:{color:accent}; top:40px; right:40px; opacity:.5; }
  244.  
  245. .png { position:absolute; width:250px; height:250px; background-color:transparent; bottom:80px; left:10px; z-index:99; }
  246.  
  247. .title { position:absolute; width:auto; height:auto; top:40px; right:40px; font-family:'amalfi'; font-size:35px; }
  248.  
  249. .desctxt { position:absolute; width:50%; height:205px; background-color:transparent; top:95px; left:65px; font-family: 'Merriweather', serif; font-size:10px; line-height:25px; text-align:justify; overflow:scroll; text-transform:lowercase; word-spacing:3px; }
  250.  
  251. .desctxt img { width:55px; height:55px; border-radius:100%; background:black;
  252.  
  253. -webkit-box-shadow: 5px 5px 27px -10px rgba(184,184,184,1);
  254. -moz-box-shadow: 5px 5px 27px -10px rgba(184,184,184,1);
  255. box-shadow: 5px 5px 27px -10px rgba(184,184,184,1); }
  256.  
  257.  
  258.  
  259.  
  260. /*--- PT.5: POSTS + ENTRIES ---*/
  261.  
  262.  
  263.  
  264.  
  265. /*POST CONTAINER*/
  266.  
  267. #postcon { position:absolute; width:400px; {block:if400pxPosts} width:500px; {/block:if400pxPosts} height:480px; background-color:{color:post container}; margin:auto; bottom:0px; right:0px; border-left:1px solid {color:borders}; }
  268.  
  269.  
  270. /*POSTS*/
  271.  
  272. #posts { position:absolute; width:360px; {block:if400pxPosts} width:460px; {/block:if400pxPosts} height:440px; background-color:{color:post container}; overflow:scroll; z-index:1000; top:0px; left:20px; padding:20px 0px 20px 0px; }
  273.  
  274.  
  275. /*ENTRY STYLING*/
  276.  
  277. .entry { display: inline-block; float: left; width:300px; {block:if400pxPosts} width:400px; {/block:if400pxPosts} padding:10px 10px 0px 10px; height:auto; background:{color:posts}; border: 1px solid {color:borders}; border-radius:0px; overflow: hidden; margin:20px; }
  278.  
  279. .entry img { margin:0px; padding:0px; }
  280.  
  281.  
  282.  
  283.  
  284. /*--- PT.6: POST INFO + NOTES + PAGINATION + CREDIT---*/
  285.  
  286.  
  287.  
  288.  
  289. /*TOP INFO*/
  290.  
  291. .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}; }
  292.  
  293. .topinfo a { margin-left: 5px; text-transform:uppercase; letter-spacing:1px; font-weight:bold; font-family: "lato"; color:{color:links}; font-size:9px; }
  294.  
  295. .preblog { float:right; margin-top: 0px; width: auto; height: 26px; line-height:22px; z-index: 100; list-style: none;margin-right:5px; }
  296.  
  297.  
  298.  
  299. /*BOTTOM INFO*/
  300.  
  301. .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; }
  302.  
  303. .bottominfo a { text-transform:uppercase; letter-spacing:1px; font-weight:bold; font-family: "lato"; color:{color:links}; font-size:9px; }
  304.  
  305. .psource { float:right; margin-top: 0px; width: auto; height: 25px; line-height:22px; z-index: 100; list-style: none; margin-right:10px; }
  306.  
  307.  
  308.  
  309. /*TAGS*/
  310.  
  311. .tags { {block:IndexPage} text-align:left; line-height:10px; margin-top:5px; {/block:IndexPage} }
  312.  
  313. .tags a { font-family: 'Source Sans Pro', sans-serif; color:{color:text}; font-size:8px; }
  314.  
  315. .tags a:hover { font-weight:bold; color:{color:hover}; }
  316.  
  317.  
  318.  
  319. /*POST NOTES*/
  320.  
  321. .note c { float:left; }
  322.  
  323. #notes { margin:0px; width:300px; {block:if400pxPosts} width:400px; {/block:if400pxPosts} font-size:12px; color:{color:text}; }
  324.  
  325. ol.notes { padding:0px; margin:0px; list-style-type:none; }
  326.  
  327. ol.notes li.note { margin:0px; padding:10px 0px; border-bottom:1px solid {color:borders}; }
  328.  
  329. ol.notes li.note img.avatar { float:left; vertical-align:-5px; margin-left:0px; margin-right:10px; width:20px; height:20px; }
  330.  
  331. li.more_notes_link_container { font-size: 12px; }
  332.  
  333.  
  334.  
  335. /*PAGINATION*/
  336.  
  337. .pagination { width:100%; text-align:center; }
  338.  
  339. .pagination a { padding:8px; word-spacing:2px; }
  340.  
  341. .pagination a:hover { color:{color:links}; }
  342.  
  343. .pagination i { color:{color:links}; }
  344.  
  345.  
  346.  
  347. /*CREDIT*/
  348.  
  349. #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; }
  350.  
  351. #cred span { padding:10px; font-size:18px; background:
  352.  
  353. -webkit-linear-gradient({color:accent}, {color:accent2});
  354. -webkit-background-clip: text;
  355. -webkit-text-fill-color: transparent; }
  356.  
  357.  
  358.  
  359.  
  360. /*--- PT.7: POST STYLING ---*/
  361.  
  362.  
  363.  
  364.  
  365. /*CHATS*/
  366.  
  367. .lines { margin:0px; padding:5px; line-height:20px; }
  368.  
  369.  
  370.  
  371. /*QUOTES*/
  372.  
  373. .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; }
  374.  
  375. .source { text-align:right; font-size:12px; line-height:20px; }
  376.  
  377.  
  378.  
  379. /*ASKS*/
  380.  
  381. .asker { position:relative; margin:5px; height:auto; width:auto; margin-top:8px; z-index:9999; font-size:13px; text-transform:uppercase; color:{color:links}; font-weight:bold; font-family: "lato"; letter-spacing:1px; }
  382.  
  383. .asker img { max-width:30px; border:1px solid {color:borders}; border-radius:2px; z-index:1000; opacity:1; background-color:{color:posts}; }
  384.  
  385. .answer { margin:10px; margin-bottom:0; }
  386.  
  387. .bubble { padding:5px 25px 20px 25px; text-align:center; height:auto; margin-top:-5px; font-style:italic; border:1px solid {color:borders}; width:210px; margin-left:20px; {block:if400pxPosts} width:310px; {/block:if400pxPosts} }
  388.  
  389.  
  390.  
  391. /*LINKS*/
  392.  
  393. .linktitle { margin:0; margin-top:30px; margin-bottom:10px; color:{color:title}; font-weight:normal; font-size:15px; line-height:20px; text-transform:lowercase; }
  394.  
  395.  
  396.  
  397. /*AUDIO*/
  398.  
  399. .playbutton { position:relative; margin-top:40px; margin-left:30px; z-index:9; width:33px; height:38px; overflow:hidden; opacity:0.6; }
  400.  
  401. .albumart img { position:relative; margin-top:-70px; margin-left:0px; height:70px; width:70px; border:1px solid {color:borders}; padding:10px; }
  402.  
  403. .trackinfo { margin-bottom:10px; background:{color:posts}; color:{color:text}; top:-1px; position:relative; margin-left:100px; height:70px; width:185px; margin-top:-95px; border:1px solid {color:borders}; padding:10px 5px 10px 5px; {block:if400pxPosts} width:285px; {/block:if400pxPosts} }
  404.  
  405. .trackname { position:relative; padding-top:15px; text-align:center; font-size:8px; line-height:12px; text-transform:uppercase; font-weight: bold; letter-spacing:2px; }
  406.  
  407. .artist { text-align:center; font-size:7.5px; text-transform:uppercase; letter-spacing:4px; }
  408.  
  409.  
  410.  
  411.  
  412. /*--- PT.8: TABS ---*/
  413.  
  414.  
  415.  
  416.  
  417. /*TAB LINKS*/
  418.  
  419. .tab { position:absolute; overflow: hidden; height:auto; word-spacing:10px; width:150px; text-align:center; bottom:25px; right:35px; }
  420.  
  421. .tab li { display:inline-block; margin:0px; height:40px; width:40px; line-height:40px; margin:0px 0px 5px 0px; }
  422.  
  423. .tab a { text-transform:uppercase; letter-spacing:1px; font-weight:bold; font-family: "lato"; color:{color:links}; background-color:{color:sidebar}; letter-spacing:1px; font-style:italic; font-size:8px; padding:10px; border:1px solid {color:borders}; border-radius:5px; }
  424.  
  425. .tab a:hover { color:{color:sidebar}; background-color:{color:accent}; border:1px solid {color:accent};
  426.  
  427. -webkit-transition: all 0.8s ease;
  428. -moz-transition: all 0.8s ease;
  429. -o-transition: all 0.8s ease;
  430. -ms-transition: all 0.8s ease;
  431. transition: all 0.8s ease; }
  432.  
  433.  
  434.  
  435. /*TAB + CLOSE CONTENT*/
  436.  
  437. .tabcontent { animation: fadeEffect 1s; position:absolute; width:400px; {block:if400pxPosts} width:500px; {/block:if400pxPosts} height:515px; background-color:{color:post container}; top:0px; right:0px; z-index:9999; display:none; }
  438.  
  439. .close { float:right; padding:10px 20px; font-size:11px; }
  440.  
  441. .close:hover { cursor:pointer; }
  442.  
  443. @keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} }
  444.  
  445.  
  446.  
  447. /*ABOUT TAB*/
  448.  
  449. #tabbox { position:absolute; height:60px; width:400px; {block:if400pxPosts} width:500px; {/block:if400pxPosts} overflow:hidden; background-color:transparent; z-index:99999999; top:30px; left:0px; text-align:center; }
  450.  
  451. .tabtitle { position:absolute; width:auto; text-align:center; top:20px; left:40px; {block:if400pxPosts} left:90px; {/block:if400pxPosts} background-color:transparent; font-family:"adam"; font-size:35px; border-bottom:1px solid {color:borders}; padding-bottom:18px; color:{color:accent2}; margin-left:50px; }
  452.  
  453. .tsymbol { position:absolute; background-color:{color:post container}; color:{color:accent2}; margin:auto; font-size:13px; left:0px; right:0px; top:33px; bottom:0px; width:13px; height:13px; padding:5px 10px 5px 10px; }
  454.  
  455. .abtbox1 { position:absolute; background:{color:post container}; width:155px; height:200px; top:110px; left:30px; border:1px solid {color:borders}; border-radius:5px; text-align:center; }
  456.  
  457. .abtbox1 img { background:black; width:155px; height:150px; margin-top:20px; }
  458.  
  459. .abtbox1 span { padding:10px; background:{color:post container}; border-radius:100%; font-size:13px; margin-top:-20px; color:{color:accent};
  460.  
  461. -webkit-box-shadow: 5px 5px 27px -10px rgba(184,184,184,1);
  462. -moz-box-shadow: 5px 5px 27px -10px rgba(184,184,184,1);
  463. box-shadow: 5px 5px 27px -10px rgba(184,184,184,1); }
  464.  
  465. .abtalignleft { float: left; margin-left:20px; }
  466. .abtalignright { float: right; margin-right:20px; }
  467. .abtalignleft i { color:{color:accent}; }
  468. .abtalignright i { color:{color:accent}; }
  469.  
  470. .abttitle { position:absolute; background:{color:post container}; width:155px; height:20px; border-top-left-radius:5px; border-top-right-radius:5px; line-height:20px; color:{color:accent2}; font-size:9px; font-family: 'Source Sans Pro', sans-serif; text-transform:uppercase; font-weight:bold; letter-spacing:1px; }
  471.  
  472. .abtbox2 { position:absolute; background:{color:post container}; width:155px; height:200px; top:110px; right:30px; border:1px solid {color:borders}; border-radius:5px; {block:if400pxPosts} width:255px; {/block:if400pxPosts} }
  473.  
  474. .abtxt2 { overflow:scroll; width:110px; height:130px; margin-top:5px; padding:20px; font-family: 'Merriweather', serif; font-size:9.5px; line-height:22px; overflow:scroll; text-transform:lowercase; text-align:center; {block:if400pxPosts} width:210px; {/block:if400pxPosts} }
  475.  
  476. .abtxt2 img { width:40px; height:40px; border-radius:100%; background:black;
  477.  
  478. -webkit-box-shadow: 5px 5px 27px -10px rgba(184,184,184,1);
  479. -moz-box-shadow: 5px 5px 27px -10px rgba(184,184,184,1);
  480. box-shadow: 5px 5px 27px -10px rgba(184,184,184,1); }
  481.  
  482. .abtbox3 { position:absolute; background:{color:post container}; width:340px; height:115px; bottom:60px; right:30px; border:1px solid {color:borders}; border-radius:5px; text-align:center; {block:if400pxPosts} width:440px; {/block:if400pxPosts} }
  483.  
  484. .abtbox3 span { margin-top:15px; font-size:14px; color:{color:accent2}; }
  485.  
  486. .abtxt { overflow:scroll; width:300px; height:60px; margin-top:5px; padding:0px 20px 0px 20px; font-family: 'Merriweather', serif; font-size:10px; line-height:20px; overflow:scroll; text-transform:lowercase; word-spacing:3px; {block:if400pxPosts} width:400px; {/block:if400pxPosts} }
  487.  
  488. .abtxt b { font-size:12px; color:{color:accent}; }
  489.  
  490.  
  491.  
  492. /*NAV TAB*/
  493.  
  494. #navbox { position:absolute; height:250px; width:300px; overflow:hidden; background-color:transparent; z-index:99999999; top:30px; left:0px; {block:if400pxPosts} left:25px; {/block:if400pxPosts} }
  495.  
  496. .navtitle { position:absolute; width:200px; text-align:center; top:20px; background-color:transparent; font-family:"adam"; font-size:35px; border-bottom:1px solid {color:borders}; padding-bottom:18px; color:{color:accent2}; margin-left:50px; }
  497.  
  498. .nsymbol { position:absolute; background-color:{color:post container}; color:{color:accent2}; margin:auto; font-size:13px; left:0px; right:0px; top:33px; bottom:0px; width:13px; height:13px; padding:5px 10px 5px 10px; }
  499.  
  500. .nav { background-color: transparent; list-style-type: none; text-align: center; margin-top:80px; }
  501.  
  502. .nav li { display: inline-block; background-color:{color:post container}; width:80px; height:20px; padding:8px; border:1px solid #eee; border-radius:5px; margin-bottom:10px; }
  503.  
  504. .nav a { text-transform:uppercase; letter-spacing:1px; font-weight:bold; font-family: "lato"; color:{color:accent2}; line-height:20px; letter-spacing:1px; font-style:italic; font-size:8px; }
  505.  
  506. .nav a:hover { color:{color:accent}; letter-spacing:3px;
  507.  
  508. -webkit-transition: all 0.8s ease;
  509. -moz-transition: all 0.8s ease;
  510. -o-transition: all 0.8s ease;
  511. -ms-transition: all 0.8s ease;
  512. transition: all 0.8s ease; }
  513.  
  514. .ndesctxt { position:absolute; font-size:7px; padding:10px; text-align:justify; text-transform:uppercase; letter-spacing:2px; z-index:99999; color:{color:text}; top:60px; right:-70px; width:40%; height:360px; overflow:hidden; line-height:25px; text-align:justify; overflow:hidden; {block:if400pxPosts} right:-50px; {/block:if400pxPosts} }
  515.  
  516. .navimg { position:absolute; width:340px; height:200px; left:0px; bottom:25px; overflow:hidden; background-color:black; z-index:99999999; {block:if400pxPosts} width:390px; {/block:if400pxPosts} }
  517.  
  518. .navimg img { width:340px; height:200px; {block:if400pxPosts} width:390px; {/block:if400pxPosts} }
  519.  
  520.  
  521.  
  522. /*MUSE TAB*/
  523.  
  524. .muses { position:absolute; top:120px; right:5px; width:370px; height:300px; background:transparent; overflow:scroll; {block:if400pxPosts} right:55px; {/block:if400pxPosts} }
  525.  
  526. .muses li { display:inline-block; width:85px; height:70px; background-color:{color:post container}; margin:15px; border-radius:10px; }
  527.  
  528. .muses img { width:85px; height:70px; border-radius:10px; }
  529.  
  530.  
  531.  
  532.  
  533. /*--- PT.9: CUSTUM CSS ---*/
  534.  
  535.  
  536.  
  537.  
  538. {CustomCSS}
  539. </style></head><body>
  540.  
  541.  
  542.  
  543.  
  544. <div id="containerbox">
  545.  
  546. <div class="png"> <img src="{image:png}"> </div>
  547.  
  548. <div id="container">
  549. <div id="sidebar">
  550.  
  551. <div class="title"> {text:title}. </div>
  552.  
  553. <div class="desctxt"> <img src="{image:icon}" align="left" style="margin-right:20px; margin-top:10px; margin-left:10px;" /> {text:desc} </div>
  554.  
  555. <div class="circle1"></div>
  556. <div class="circle2"></div>
  557. <div class="circle3"></div>
  558. <div class="circle4"></div>
  559. <div class="circle5"></div>
  560.  
  561.  
  562.  
  563.  
  564. <div class="tab">
  565.  
  566.  
  567.  
  568.  
  569. <!--- IMPORTANT !!! if you'd like to replace a tab with a regular link, just replace said tab link with the following code:
  570.  
  571. <li><a href="/" title="title">oo</a></li>
  572.  
  573. if there are any questions feel free to message ! --->
  574.  
  575.  
  576.  
  577.  
  578. <li><a href="/" title="refresh">o1</a></li>
  579. <li><a href="/ask" title="mssg">o2</a></li>
  580. <li><a href="#" class="tablinks" onclick="openCity(event, 'about')" title="about"> o3 </a></li>
  581.  
  582. <li><a href="#" class="tablinks" onclick="openCity(event, 'navi')" title="navigate"> o4 </a></li>
  583. <li><a href="#" class="tablinks" onclick="openCity(event, 'muses')" title="muses"> o5 </a></li>
  584. <li><a href="/" title="free link">o6</a></li>
  585.  
  586. </div>
  587.  
  588. </div>
  589.  
  590.  
  591.  
  592.  
  593. <!--- ABOUT TAB --->
  594.  
  595.  
  596.  
  597.  
  598. <div id="about" class="tabcontent"> <span class="close" onclick="this.parentElement.style.display='none'">x</span>
  599.  
  600. <div id="tabbox"><div class="tabtitle"> INTRODUCING <div class="tsymbol"> <span class="th th-moon-o"></span> </div> </div> </div>
  601.  
  602. <!--- left about box --->
  603.  
  604. <div class="abtbox1">
  605.  
  606. <div class="abttitle"> just the moon </div>
  607.  
  608. <img src="{image:aboutpic}"> <span class="th th-heart-1-o"></span>
  609.  
  610. <p class="abtalignleft"> <i class="fas fa-bars"></i> </p>
  611. <p class="abtalignright"> <i class="fas fa-bookmark"></i> </p>
  612.  
  613. </div>
  614.  
  615. <!--- right about box --->
  616.  
  617. <div class="abtbox2"> <div class="abtxt2">
  618.  
  619. <img src="{image:abouticon}" align="right" style="margin:0px 0px 0px 10px;"/> you can use this however you want ! a wid, to do list, rules, updates, drafts, etc !! Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  620.  
  621. </div>
  622. </div>
  623.  
  624. <!--- bottom about box --->
  625.  
  626. <div class="abtbox3"> <span class="th th-quote-up-o"></span>
  627.  
  628. <div class="abtxt"> <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>
  629.  
  630. </div>
  631. </div>
  632.  
  633.  
  634.  
  635.  
  636. <!--- NAVIGATION TAB --->
  637.  
  638.  
  639.  
  640.  
  641. <div id="navi" class="tabcontent"> <span class="close" onclick="this.parentElement.style.display='none'">x</span>
  642.  
  643. <div class="navimg"> {block:ifNot400pxPosts}<img src="{image:navipic}">{/block:ifNot400pxPosts} {block:if400pxPosts} <img src="{image:navipic400px}"> {/block:if400pxPosts} </div>
  644.  
  645. <div class="ndesctxt"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.</div>
  646.  
  647.  
  648. <div id="navbox"> <div class="navtitle"> NAVIGATE <div class="nsymbol"> <span class="th th-moon-o"></span> </div></div>
  649.  
  650. <!--- navigation links --->
  651.  
  652. <ul class="nav">
  653.  
  654. <li><a href="/">link 1.</a></li>
  655. <li><a href="/">link 2.</a></li>
  656.  
  657. <li><a href="" >link 3.</a></li>
  658. <li><a href="/" >link 4.</a></li>
  659.  
  660. <li><a href="/" >link 5.</a></li>
  661. <li><a href="/" >link 6.</a></li>
  662.  
  663. </ul>
  664.  
  665. </div>
  666. </div>
  667.  
  668.  
  669.  
  670.  
  671. <!--- MUSE TAB --->
  672.  
  673.  
  674.  
  675.  
  676. <div id="muses" class="tabcontent"> <span class="close" onclick="this.parentElement.style.display='none'">x</span>
  677.  
  678. <div id="tabbox"><div class="tabtitle"> CHARACTERS <div class="tsymbol"> <span class="th th-moon-o"></span> </div></div></div>
  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/Prx6438T/muse.png"></a></li>
  685. <li><a href="/" title="muse 2 info"><img src="https://i.postimg.cc/Prx6438T/muse.png"></a></li>
  686. <li><a href="/" title="muse 3 info"><img src="https://i.postimg.cc/Prx6438T/muse.png"></a></li>
  687.  
  688. <!--- to here !! --->
  689.  
  690. <li><a href="/" title="muse 4 info"><img src="https://i.postimg.cc/Prx6438T/muse.png"></a></li>
  691. <li><a href="/" title="muse 5 info"><img src="https://i.postimg.cc/Prx6438T/muse.png"></a></li>
  692. <li><a href="/" title="muse 6 info"><img src="https://i.postimg.cc/Prx6438T/muse.png"></a></li>
  693.  
  694. <li><a href="/" title="muse 7 info"><img src="https://i.postimg.cc/Prx6438T/muse.png"></a></li>
  695. <li><a href="/" title="muse 8 info"><img src="https://i.postimg.cc/Prx6438T/muse.png"></a></li>
  696. <li><a href="/" title="muse 9 info"><img src="https://i.postimg.cc/Prx6438T/muse.png"></a></li>
  697.  
  698. <li><a href="/" title="muse 10 info"><img src="https://i.postimg.cc/Prx6438T/muse.png"></a></li>
  699. <li><a href="/" title="muse 11 info"><img src="https://i.postimg.cc/Prx6438T/muse.png"></a></li>
  700. <li><a href="/" title="muse 12 info"><img src="https://i.postimg.cc/Prx6438T/muse.png"></a></li>
  701.  
  702. </div>
  703. </div>
  704.  
  705.  
  706.  
  707.  
  708. <div id="postcon">
  709. <div id="posts">
  710. {block:Posts}
  711. <div class="entry">
  712.  
  713. {block:Date} <div class="topinfo"><a href="{Permalink}">{Month} {Year}</a>
  714. <div class="preblog"><a href="{ReblogURL}" target="_blank" >reblog</a></div></div>{/block:Date}
  715.  
  716. {block:Text} {block:Title} <a href="{Permalink}"> <h1>{Title}</h1></a> {/block:Title} {Body} {/block:Text}
  717.  
  718. {block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{/block:Photo}
  719.  
  720. {block:Photoset} {block:IndexPage}{Photoset-500}{/block:IndexPage} {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage} {/block:Photoset}
  721.  
  722. {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}
  723.  
  724. {block:Quote} <div class="quote"> “{Quote}” </div> <div class="source"> — {Source} </div> {/block:Quote}
  725.  
  726. {block:Link} <div class="linktitle"> <a href="{URL}"><h1>{Name}</h1></a></div>
  727. {block:Description} <p>{Description}</p> {/block:Description}{/block:Link}
  728.  
  729. {block:ifNot400pxPosts}{block:Video}<div class="video" style="margin-left:25px;">{Video-250}</div>{/block:Video}{/block:ifNot400pxPosts}
  730.  
  731. {block:if400pxPosts}{block:Video}<div class="video">{Video-400}</div>{/block:Video}{/block:if400pxPosts}
  732.  
  733. {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}
  734.  
  735. {block:Answer}<div class="asker"><img src="{AskerPortraitURL-48}"><div class="ask" style="margin-top:-30px; margin-left:35px;">{Asker}:</div></div><div class="bubble"><br>{Question}</div><div class="answer"> {Answer} </div>{/block:Answer}
  736.  
  737. {block:Caption}{Caption}{/block:Caption}
  738.  
  739. <div class="bottominfo"><div class="psource">{block:ContentSource}<a href="{SourceURL}">source</a>{/block:ContentSource}</div>
  740.  
  741. {block:NoteCount}<a href="{Permalink}"> {NoteCountWithLabel}</a>{/block:NoteCount}
  742.  
  743. {block:HasTags}<div class="tags">{block:Tags}<a href="{TagURL}">#{Tag}</a> &nbsp;{/block:Tags}<br></div>{/block:HasTags}</div>
  744.  
  745. {block:PermalinkPage}{block:PostNotes}<div id="notes">{PostNotes}</div>{/block:PostNotes}{/block:PermalinkPage}
  746.  
  747. </div>
  748. {/block:Posts}
  749.  
  750. {block:Pagination} <div class="pagination"> {block:previouspage} <a href="{previouspage}"> <i class="fas fa-arrow-left"></i> prev </a> {/block:previouspage} {block:nextpage} <a href="{nextpage}"> next <i class="fas fa-arrow-right"></i> </a> {/block:nextpage} </div> {/block:pagination}
  751.  
  752. </div>
  753. </div>
  754. </div>
  755. </div>
  756.  
  757.  
  758. <div id="cred">
  759. <a href="http://twentys.tumblr.com" title="made by julie."><span class="th th-holly-o"></span></a>
  760. </div>
  761.  
  762.  
  763. </body>
  764. </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!