API tools faq
paste
Advertisement
lovesjoon

theme 03: min yoobert.

lovesjoon
Apr 5th, 2020 (edited)
3,897
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 30.24 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: 003 - YOONGI 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:sidebar" content="1"/>
  46. <meta name="image:icon" content="1"/>
  47. <meta name="image:navi tab" content="1"/>
  48. <meta name="image:navi tab 400px" content="1"/>
  49. <meta name="image:muse tab" content="1"/>
  50. <meta name="image:muse tab 400px" content="1"/>
  51.  
  52. <meta name="color:background" content="#0f0f0f"/>
  53. <meta name="color:sidebar" content="#181818"/>
  54. <meta name="color:post container" content="#181818"/>
  55. <meta name="color:posts" content="#181818"/>
  56. <meta name="color:borders" content="#363636"/>
  57. <meta name="color:accent" content="#9f9a95"/>
  58. <meta name="color:accent2" content="#bebebe"/>
  59. <meta name="color:title" content="#c9c4c3"/>
  60. <meta name="color:text" content="#eeeeee"/>
  61. <meta name="color:shadow" content="#524f4f"/>
  62. <meta name="color:links" content="#d1c7c5"/>
  63. <meta name="color:hover" content="#98a3a9"/>
  64. <meta name="color:bold" content="#d8d6d7"/>
  65. <meta name="color:italic" content="#98a3a9"/>
  66.  
  67. <meta name="if:400px posts" content="1"/>
  68. <meta name="if:no muse tab" content="1" />
  69.  
  70. <meta name="text:title" content=" 0309 "/>
  71. <meta name="text:title2" content="agust d."/>
  72. <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."/>
  73. <meta name="text:desc2" content="this is your tab desc !"/>
  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. <!--- TOOLTIP SCRIPT ---->
  91.  
  92. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  93. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  94.  
  95. <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>
  96.  
  97.  
  98.  
  99. <!--- GOOGLE + ICON FONTS ---->
  100.  
  101. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  102. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/v4-shims.css">
  103.  
  104. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  105.  
  106. <link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans|Source+Sans+Pro&display=swap" rel="stylesheet">
  107.  
  108. <link href="https://fonts.googleapis.com/css2?family=Merriweather:ital@1&display=swap" rel="stylesheet">
  109.  
  110. <link href="https://fonts.googleapis.com/css?family=Abril+Fatface&display=swap" rel="stylesheet">
  111.  
  112.  
  113.  
  114.  
  115. <!--- TAB SCRIPT ---->
  116.  
  117. <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>
  118.  
  119.  
  120.  
  121.  
  122. <!--- CLOCK SCRIPT ---->
  123.  
  124. <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('txt').innerHTML = h + ":" + m + ":" + s; var t = setTimeout(startTime, 500); } function checkTime(i) { if (i < 10) {i = "0" + i}; return i; } </script>
  125.  
  126.  
  127.  
  128.  
  129. <!--- FILTER SCRIPT BY CYANTISTS ---->
  130.  
  131. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  132. <script src="https://static.tumblr.com/xd6ujov/9Rpouml9f/imagesloaded.pkgd.min.js"></script>
  133. <script src="https://static.tumblr.com/f6blkfc/3khouzw5b/masonry.pkgd.min.js"></script>
  134.  
  135. <script>$(document).ready(function(){ var $grid = $(".grid"); $grid.imagesLoaded(function() { $grid.masonry({ itemSelector: ".item", columnWidth: 100 }); }); $(".button").click(function(){ $(this).addClass("selected"); $(".button").not($(this)).removeClass("selected"); var ssf = $(this).attr("filter"); $(".item." + ssf).show(); $(".item").not("." + ssf).hide(); $grid.masonry(); });
  136. });</script>
  137.  
  138.  
  139.  
  140.  
  141. <style type="text/css">
  142.  
  143.  
  144.  
  145.  
  146. /*--- FONTS HOSTED BY @TWENTYS ---*/
  147.  
  148. @font-face{ font-family:"nevrada"; src: url('https://dl.dropboxusercontent.com/s/s79zrl8b9d6p6w6/AL_Nevrada_Personal_Use_Only.ttf’)'); }
  149.  
  150.  
  151.  
  152.  
  153. /*---PT. 2: TOOLTIP + SCROLLBAR + SELECTION---*/
  154.  
  155.  
  156.  
  157.  
  158. /*TOOLTIP*/
  159.  
  160. #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}; }
  161.  
  162.  
  163. /*SCROLLBAR*/
  164.  
  165. ::-webkit-scrollbar-thumb { display:none; }
  166.  
  167. ::-webkit-scrollbar { display:none; }
  168.  
  169.  
  170. /*SELECTION*/
  171.  
  172. ::-moz-selection { background:{color:accent}; color:{color:posts}; }
  173.  
  174. ::selection { background:{color:accent}; color:{color:posts}; }
  175.  
  176.  
  177.  
  178.  
  179. /*---PT. 3: BODY + TEXT STYLING---*/
  180.  
  181.  
  182.  
  183.  
  184. /*BODY*/
  185.  
  186. 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} }
  187.  
  188.  
  189.  
  190. /*FIX*/
  191.  
  192. iframe, img, embed, object { margin:auto; max-width:100%; border:none; }
  193.  
  194. img { margin:auto; max-width:100%; border:none; height:auto; }
  195.  
  196.  
  197.  
  198. /*TEXT STYLING*/
  199.  
  200. select, textarea, input, a { outline:none; }
  201.  
  202. p { margin-top:5px; margin-bottom:5px; }
  203.  
  204. small, sub, sup { font-size:100%; }
  205.  
  206. big { font-size:110%; }
  207.  
  208. 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; }
  209.  
  210. 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; }
  211.  
  212. a { text-transform:uppercase; letter-spacing:1px; font-weight:bold; font-family: "lato"; color:{color:links}; font-size:9px; text-decoration:none; }
  213.  
  214. a:hover { color:{color:hover};
  215.  
  216. -webkit-transition: all .3s;
  217. -moz-transition: all .3s;
  218. -o-transition: all .3s;
  219. -ms-transition: all .3s;
  220. transition: all .3s; }
  221.  
  222. ul, ol, li { margin:5px 10px; padding:0px; }
  223.  
  224. b, strong { color:{color:bold}; }
  225.  
  226. i, em { color:{color:italic}; }
  227.  
  228. blockquote { margin:10px; padding-left:20px; border-left:1px solid {color:borders}; }
  229.  
  230.  
  231.  
  232. /*TUMBLR CONTROLS*/
  233.  
  234. 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; }
  235.  
  236. iframe.tmblr-iframe:hover { opacity:1!important; }
  237.  
  238.  
  239.  
  240.  
  241. /*--- PT. 4: CONTAINER + SIDEBAR ---*/
  242.  
  243.  
  244.  
  245.  
  246. /*CONTAINER*/
  247.  
  248. #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; }
  249.  
  250. #container { position:absolute; margin:auto; left:0px; right:0px; top:0px; bottom:0px; width:850px; {block:if400pxPosts} width:950px; {/block:if400pxPosts} height:550px; overflow:hidden; border-radius:0px; border:1px solid {color:borders}; background:{color:sidebar}; }
  251.  
  252. /*SIDEBAR*/
  253.  
  254. #sidebar { position:absolute; width:350px; height:520px; background-color:{color:sidebar}; margin:auto; bottom:0px; left:0px; border-right:1px solid {color:borders}; }
  255.  
  256. #sidebar img { position:absolute; width:250px; height:380px; background-color:white; bottom:0px; right:0px; z-index:999; }
  257.  
  258. .desctitle { position:absolute; font-size:120px; font-family: "nevrada"; left:-10px; bottom:150px; color:{color:accent}; z-index:99; width:250px; text-align:center;
  259.  
  260. -webkit-transform: rotate(-90deg);
  261. -moz-transform: rotate(-90deg);
  262. -ms-transform: rotate(-90deg);
  263. -o-transform: rotate(-90deg); }
  264.  
  265. .sbbox { position:absolute; width:120px; height:50px; border:1px solid {color:borders}; top:10px; left:15px; }
  266.  
  267. .sbline1 { position:absolute; width:130px; height:50px; border-bottom:1px solid {color:borders};
  268.  
  269. -webkit-transform:
  270. translateY(-24px)
  271. translateX(4px)
  272. rotate(22deg); }
  273.  
  274. .sbline2 { position:absolute; width:130px; height:50px; border-bottom:1px solid {color:borders}; top:-48px; left:-19px;
  275.  
  276. -webkit-transform:
  277. translateY(24px)
  278. translateX(4px)
  279. rotate(-22deg); }
  280.  
  281. .desctit { position:absolute; left:310px; height:50px; width:150px; font-family:"nevrada"; color:{color:accent}; font-size:30px; letter-spacing:4px; top:160px; line-height:65px; background-color:{color:sidebar}; padding-right:10px; text-align:center;
  282.  
  283. -webkit-transform: rotate(90deg);
  284. -moz-transform: rotate(90deg);
  285. -ms-transform: rotate(90deg);
  286. -o-transform: rotate(90deg); }
  287.  
  288. .desctxt { position:absolute; font-size:7px; padding:0px 10px 0px 10px; overflow:scroll; text-align:center; text-transform:uppercase; letter-spacing:2px; height:40px; color:{color:accent2}; top:70px; width:270px; text-align:justify; left:30px; background-color:{color:sidebar}; }
  289.  
  290. .sbtop { position:absolute; top:0px; left:0px; height:75px; width:400px; border-bottom:1px solid {color:borders}; z-index:9999; }
  291.  
  292. .descbox { position:absolute; left:350px; top:290px; height:100px; width:35px; border-right:1px solid {color:borders}; }
  293.  
  294. /*SEARCH BOX TUTORIAL BY LMTHEMES*/
  295.  
  296. .sfm { position:absolute; background-color:transparent; padding: 8px 6px 8px 20px; border:1px solid {color:borders}; top:20px; right:80px; z-index:99999; width:130px; }
  297.  
  298. .sfm input { font-size:8px; text-transform:uppercase; letter-spacing:1px; font-family:"lato"; border:none; font-weight:bold; background-color:transparent; color:{color:italic}; }
  299.  
  300. .sfm i { margin-left:-5px; margin-right:10px; font-size:10px; }
  301.  
  302.  
  303.  
  304.  
  305.  
  306. /*--- PT.5: POSTS + ENTRIES ---*/
  307.  
  308.  
  309.  
  310.  
  311. /*POST CONTAINER*/
  312.  
  313. #postcon { position:absolute; width:425px; {block:if400pxPosts} width:525px; {/block:if400pxPosts} height:550px; background-color:{color:post container}; margin:auto; bottom:0px; right:0px; border-left:1px solid {color:borders}; border-left:1px solid {color:borders}; }
  314.  
  315.  
  316. /*POSTS*/
  317.  
  318. #posts { position:absolute; width:360px; {block:if400pxPosts} width:460px; {/block:if400pxPosts} height:510px; background-color:transparent; overflow:scroll; z-index:1000; top:0px; left:32.5px; padding:20px 0px 20px 0px; }
  319.  
  320.  
  321. /*ENTRY STYLING*/
  322.  
  323. .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; }
  324.  
  325. .entry img { margin:0px; padding:0px; }
  326.  
  327.  
  328.  
  329.  
  330. /*--- PT.6: POST INFO + NOTES + PAGINATION + CREDIT---*/
  331.  
  332.  
  333.  
  334.  
  335. /*TOP INFO*/
  336.  
  337. .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}; }
  338.  
  339. .topinfo a { margin-left: 5px; text-transform:uppercase; letter-spacing:1px; font-weight:bold; font-family: "lato"; color:{color:links}; font-size:9px; }
  340.  
  341. .preblog { float:right; margin-top: 0px; width: auto; height: 26px; line-height:22px; z-index: 100; list-style: none;margin-right:5px; }
  342.  
  343.  
  344.  
  345. /*BOTTOM INFO*/
  346.  
  347. .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; }
  348.  
  349. .bottominfo a { text-transform:uppercase; letter-spacing:1px; font-weight:bold; font-family: "lato"; color:{color:links}; font-size:9px; }
  350.  
  351. .psource { float:right; margin-top: 0px; width: auto; height: 25px; line-height:22px; z-index: 100; list-style: none; margin-right:10px; }
  352.  
  353.  
  354.  
  355. /*TAGS*/
  356.  
  357. .tags { {block:IndexPage} text-align:left; line-height:10px; margin-top:5px; {/block:IndexPage} }
  358.  
  359. .tags a { font-family: 'Source Sans Pro', sans-serif; color:{color:text}; font-size:8px; }
  360.  
  361. .tags a:hover { font-weight:bold; color:{color:hover}; }
  362.  
  363.  
  364.  
  365. /*POST NOTES*/
  366.  
  367. .note c { float:left; }
  368.  
  369. #notes { margin:0px; width:300px; {block:if400pxPosts} width:400px; {/block:if400pxPosts} font-size:12px; color:{color:text}; }
  370.  
  371. ol.notes { padding:0px; margin:0px; list-style-type:none; }
  372.  
  373. ol.notes li.note { margin:0px; padding:10px 0px; border-bottom:1px solid {color:borders}; }
  374.  
  375. ol.notes li.note img.avatar { float:left; vertical-align:-5px; margin-left:0px; margin-right:10px; width:20px; height:20px; }
  376.  
  377. li.more_notes_link_container { font-size: 12px; }
  378.  
  379.  
  380.  
  381. /*PAGINATION*/
  382.  
  383. .pagination { width:100%; text-align:center; }
  384.  
  385. .pagination a { padding:8px; word-spacing:2px; }
  386.  
  387. .pagination a:hover { color:{color:links}; }
  388.  
  389. .pagination i { color:{color:links}; }
  390.  
  391.  
  392.  
  393. /*CREDIT*/
  394.  
  395. #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; }
  396.  
  397. #cred span { padding:10px; font-size:18px; background:
  398.  
  399. -webkit-linear-gradient({color:accent}, {color:accent2});
  400. -webkit-background-clip: text;
  401. -webkit-text-fill-color: transparent; }
  402.  
  403.  
  404.  
  405.  
  406. /*--- PT.7: POST STYLING ---*/
  407.  
  408.  
  409.  
  410.  
  411. /*CHATS*/
  412.  
  413. .lines { margin:0px; padding:5px; line-height:20px; }
  414.  
  415.  
  416.  
  417. /*QUOTES*/
  418.  
  419. .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; }
  420.  
  421. .source { text-align:right; font-size:12px; line-height:20px; }
  422.  
  423.  
  424.  
  425. /*ASKS*/
  426.  
  427. .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; }
  428.  
  429. .asker img { max-width:30px; border:1px solid {color:borders}; border-radius:2px; z-index:1000; opacity:1; background-color:{color:posts}; }
  430.  
  431. .answer { margin:10px; margin-bottom:0; }
  432.  
  433. .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} }
  434.  
  435.  
  436.  
  437. /*LINKS*/
  438.  
  439. .linktitle { margin:0; margin-top:30px; margin-bottom:10px; color:{color:title}; font-weight:normal; font-size:15px; line-height:20px; text-transform:lowercase; }
  440.  
  441.  
  442.  
  443. /*AUDIO*/
  444.  
  445. .playbutton { position:relative; margin-top:40px; margin-left:30px; z-index:9; width:33px; height:38px; overflow:hidden; opacity:0.6; }
  446.  
  447. .albumart img { position:relative; margin-top:-70px; margin-left:0px; height:70px; width:70px; border:1px solid {color:borders}; padding:10px; }
  448.  
  449. .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} }
  450.  
  451. .trackname { position:relative; padding-top:15px; text-align:center; font-size:8px; line-height:12px; text-transform:uppercase; font-weight: bold; letter-spacing:2px; }
  452.  
  453. .artist { text-align:center; font-size:7.5px; text-transform:uppercase; letter-spacing:4px; }
  454.  
  455.  
  456.  
  457.  
  458. /*--- PT.8: TABS ---*/
  459.  
  460.  
  461.  
  462.  
  463. /*TAB LINKS*/
  464.  
  465. .tab { position:absolute; overflow: hidden; height:auto; bottom:15px; left:345px; width:75px; text-align:center; }
  466.  
  467. .tab li { display:block; margin-right:2px; }
  468.  
  469. .tab a { letter-spacing:1px; color:{color:accent}; background-color:transparent; width:100px; height:50px; line-height:22px; letter-spacing:1px; font-size:19px; }
  470.  
  471. .tab a:hover { font-size:19px;
  472.  
  473. -webkit-text-fill-color: transparent;
  474. -webkit-text-stroke-width: .5px;
  475. -webkit-text-stroke-color: {color:accent};
  476. -webkit-font-smoothing: antialiased; }
  477.  
  478. .tab a:focus { font-size:19px;
  479.  
  480. -webkit-text-fill-color: transparent;
  481. -webkit-text-stroke-width: .5px;
  482. -webkit-text-stroke-color: {color:accent};
  483. -webkit-font-smoothing: antialiased; }
  484.  
  485.  
  486. /*TAB + CLOSE CONTENT*/
  487.  
  488. .tabcontent { animation: fadeEffect 1s; position:absolute; width:425px; {block:if400pxPosts} width:525px; {/block:if400pxPosts} height:550px; background-color:{color:post container}; top:0px; right:0px; z-index:9999; display:none; }
  489.  
  490. .close { float:right; z-index:99999; }
  491.  
  492. .close i { color:{color:accent2}; font-size:11px; line-height:20px; text-shadow: 2px 2px 5px {color:shadow}; padding:5px 10px 0px 5px;}
  493.  
  494. .close:hover { cursor:pointer; }
  495.  
  496. @keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} }
  497.  
  498.  
  499. /*TAB STYLING*/
  500.  
  501. .tabheader { height:25px; width:490px; {block:if400pxPosts} width:590px; {/block:if400pxPosts} border-bottom:1px solid {color:borders}; left:0px; top:0px; z-index:99; color:{color:accent2}; font-size:9px; font-family: 'Source Sans Pro', sans-serif; text-transform:uppercase; letter-spacing:2px; font-weight:bold; line-height:20px; text-shadow: 2px 2px 5px {color:shadow}; padding-left:10px; word-spacing:3px; }
  502.  
  503. .tabheader i { color:{color:accent2}; font-size:9px; line-height:20px; text-shadow: 2px 2px 5px {color:shadow}; }
  504.  
  505. .tabheader i:hover { cursor:pointer; }
  506.  
  507. .tabimg { margin-top:0px; margin-left:0px; width:490px; {block:if400pxPosts} width:590px; {/block:if400pxPosts} height:100px; background:gray; border-bottom:8px solid {color:accent2}; }
  508.  
  509. .tabimg img { width:490px; {block:if400pxPosts} width:590px; {/block:if400pxPosts} height:100px; background:gray; }
  510.  
  511. .tabline { position:absolute; width:200px; {block:if400pxPosts} width:300px; {/block:if400pxPosts} height:5px; border-bottom:1px solid {color:borders}; top:165px; left:40px; }
  512.  
  513.  
  514. /*NAV TAB*/
  515.  
  516. #txt { position:absolute; right:15px; height:50px; width:140px; font-family:"nevrada"; color:{color:accent2}; font-size:23px; letter-spacing:4px; top:140px; line-height:65px; background-color:transparent; text-align:center; }
  517.  
  518. .links { position:absolute; bottom:30px; right:8px; width:400px; height:220px; {block:if400pxPosts} right:58px; {/block:if400pxPosts} }
  519.  
  520. .links li { display:inline-block; width:80px; height:25px; border:10px; background-color:transparent; padding:8px; margin:15px; text-align:center; border:1px solid {color:borders}; }
  521.  
  522. .links a { color:{color:links}; line-height:25px; }
  523.  
  524. .links a:hover { letter-spacing:3px;
  525.  
  526. -webkit-transition: all .8s;
  527. -moz-transition: all .8s;
  528. -o-transition: all .8s;
  529. -ms-transition: all .8s;
  530. transition: all .8s; }
  531.  
  532. .navtxt { position:absolute; width:70%; height:80px; background-color:transparent; top:205px; left:65px; font-size:7px; line-height:25px; text-align:justify; overflow:scroll; text-transform:uppercase; letter-spacing:2px; {block:if400pxPosts} left:80px; {/block:if400pxPosts} }
  533.  
  534. .navtxt img { width:40px; height:40px; border-radius:100%; }
  535.  
  536.  
  537. /*MUSE TAB*/
  538.  
  539. #musecon { position:absolute; margin:auto; left:0px; right:0px; bottom:0px; top:170px; width:300px; height:300px; overflow:scroll; {block:if400pxPosts} width:400px; {/block:if400pxPosts} }
  540.  
  541. #buttons { position:absolute; top:155px; right:15px; width:auto; height:30px; background-color:{color:post container}; margin:auto; text-align:right; padding-left:30px; }
  542.  
  543. .button { cursor:pointer; text-transform:uppercase;font-size:9px; letter-spacing:2px; overflow:hidden; color:{color:accent2}; width:auto; margin:5px; display:inline-block; font-weight:bold; }
  544.  
  545. .button.selected { color:{color:accent}; text-decoration:none; font-style:italic; font-size:9px; font-weight:bold; }
  546.  
  547. .grid { width:300px; {block:if400pxPosts} width:400px; {/block:if400pxPosts} }
  548.  
  549. .item { width:70px; height:70px; margin:15px; }
  550.  
  551.  
  552. /*--- PT.9: CUSTUM CSS ---*/
  553.  
  554.  
  555.  
  556.  
  557. {CustomCSS}
  558. </style></head><body onload="startTime()">
  559.  
  560.  
  561.  
  562.  
  563. <div id="containerbox">
  564.  
  565.  
  566.  
  567. <div id="container">
  568.  
  569.  
  570. <div class="sbtop">
  571.  
  572. <div class="sbbox">
  573.  
  574. <div class="sbline1"></div>
  575. <div class="sbline2"></div>
  576.  
  577. </div>
  578.  
  579.  
  580. <form action="/search" method="get" class="sfm" name="theform">
  581. <i class="fas fa-search"></i>
  582. <input type="text" name="q" value="SEARCH"/>
  583. </form>
  584.  
  585. </div>
  586.  
  587. <div class="descbox"> </div>
  588. <div class="desctit">{text:title2}</div>
  589.  
  590. <div class="tab">
  591.  
  592. <li><a href="/" title="refresh"> • </a></li>
  593. <li><a href="/ask" title="contact"> • </a></li>
  594. <li><a href="#" class="tablinks" onclick="openCity(event, 'navi')" title="navigate"> • </a></li>
  595. {block:ifNotnomusetab} <li><a href="#" class="tablinks" onclick="openCity(event, 'muses')" title="characters"> • </a></li> {/block:ifNotnomusetab}
  596.  
  597. <!--- edit your free link here if you aren't using the muse tab ! --->
  598.  
  599. {block:ifnomusetab} <li><a href="/" title="link"> • </a></li> {/block:ifnomusetab}
  600.  
  601. </div>
  602.  
  603.  
  604. <div id="sidebar">
  605.  
  606. <div class="desctxt"> {text:desc} </div>
  607.  
  608. <div class="desctitle"> {text:title} </div>
  609. <img src="{image:sidebar}">
  610.  
  611.  
  612. </div>
  613.  
  614.  
  615.  
  616.  
  617. <!--- NAVIGATION TAB --->
  618.  
  619.  
  620.  
  621.  
  622. <div id="navi" class="tabcontent"> <span class="close" onclick="this.parentElement.style.display='none'"> <i class="fas fa-times"></i> </span>
  623.  
  624. <div class="tabheader"><p style="text-align:left;"> http://{name}.tumblr.com/explore_navigate <span style="float:right;"> <i class="fas fa-window-minimize"></i> <i class="far fa-window-restore"></i> </p></div>
  625.  
  626. <div class="tabimg"> {block:ifNot400pxPosts}<img src="{image:navi tab}">{/block:ifNot400pxPosts} {block:if400pxPosts} <img src="{image:navi tab 400px}"> {/block:if400pxPosts} </div>
  627. <div class="tabline"> </div>
  628. <div id="txt">00:00:00</div>
  629.  
  630. <div class="navtxt"> <img src="{image:icon}" align="left" style="margin-right:15px; margin-top:5px; margin-left:0px;"/> {text:desc2} </div>
  631.  
  632. <div class="links">
  633.  
  634. <li> <a href="/"> link 1</a> </li>
  635. <li> <a href="/"> link 2</a> </li>
  636. <li> <a href="/"> link 3</a> </li>
  637.  
  638. <li> <a href="/"> link 4</a> </li>
  639. <li> <a href="/"> link 5</a> </li>
  640. <li> <a href="/"> link 6</a> </li>
  641.  
  642. <li> <a href="/"> link 7</a> </li>
  643. <li> <a href="/"> link 8</a> </li>
  644. <li> <a href="/"> link 9</a> </li>
  645.  
  646. </div>
  647.  
  648.  
  649. </div>
  650.  
  651.  
  652.  
  653.  
  654. <!--- MUSE TAB --->
  655.  
  656.  
  657.  
  658.  
  659. <div id="muses" class="tabcontent"> <span class="close" onclick="this.parentElement.style.display='none'"> <i class="fas fa-times"></i> </span>
  660.  
  661. <div class="tabheader"><p style="text-align:left;"> http://{name}.tumblr.com/explore_characters <span style="float:right;"> <i class="fas fa-window-minimize"></i> <i class="far fa-window-restore"></i> </p></div>
  662.  
  663. <div class="tabimg"> {block:ifNot400pxPosts}<img src="{image:muse tab}">{/block:ifNot400pxPosts} {block:if400pxPosts} <img src="{image:muse tab 400px}"> {/block:if400pxPosts} </div>
  664. <div class="tabline"> </div>
  665.  
  666.  
  667.  
  668. <!--- visit the link if you need help on how to work with / edit the filters !!
  669. https://twentys.tumblr.com/private/614319258080526336/tumblr_q86hsiomOL1uwrgub --->
  670.  
  671.  
  672. <div id="buttons">
  673. <div class="button selected" filter="item">all.</div>
  674. <div class="button" filter="open">open.</div>
  675. <div class="button" filter="closed">closed.</div>
  676. <div class="button" filter="selective">selective.</div>
  677. </div>
  678.  
  679. <div id="musecon">
  680.  
  681. <div class="grid">
  682.  
  683. <!--- for a new muse copy from here --->
  684.  
  685. <div class="item open"> <a href="/" title="muse 1 info"><img src="https://i.postimg.cc/wvwGCQwd/muses.png"></a> </div>
  686.  
  687. <!--- to here --->
  688.  
  689. <div class="item closed"> <a href="/" title="muse 2 info"><img src="https://i.postimg.cc/wvwGCQwd/muses.png"></a> </div>
  690.  
  691. <div class="item selective"> <a href="/" title="muse 3 info"><img src="https://i.postimg.cc/wvwGCQwd/muses.png"></a> </div>
  692.  
  693. <div class="item selective"> <a href="/" title="muse 4 info"><img src="https://i.postimg.cc/wvwGCQwd/muses.png"></a> </div>
  694.  
  695. <div class="item closed"> <a href="/" title="muse 5 info"><img src="https://i.postimg.cc/wvwGCQwd/muses.png"></a> </div>
  696.  
  697. <div class="item open"> <a href="/" title="muse 6 info"><img src="https://i.postimg.cc/wvwGCQwd/muses.png"></a> </div>
  698.  
  699. <div class="item closed"> <a href="/" title="muse 7 info"><img src="https://i.postimg.cc/wvwGCQwd/muses.png"></a> </div>
  700.  
  701. <div class="item open"> <a href="/" title="muse 8 info"><img src="https://i.postimg.cc/wvwGCQwd/muses.png"></a> </div>
  702.  
  703. <div class="item open selective"> <a href="/" title="muse 9 info"><img src="https://i.postimg.cc/wvwGCQwd/muses.png"></a> </div>
  704.  
  705. <div class="item selective"> <a href="/" title="muse 10 info"><img src="https://i.postimg.cc/wvwGCQwd/muses.png"></a> </div>
  706.  
  707. <div class="item selective"> <a href="/" title="muse 11 info"><img src="https://i.postimg.cc/wvwGCQwd/muses.png"></a> </div>
  708.  
  709. <div class="item selective"> <a href="/" title="muse 12 info"><img src="https://i.postimg.cc/wvwGCQwd/muses.png"></a> </div>
  710.  
  711. </div>
  712. </div>
  713. </div>
  714.  
  715.  
  716.  
  717. <div id="postcon">
  718. <div id="posts">
  719. {block:Posts}
  720. <div class="entry">
  721.  
  722. {block:Date} <div class="topinfo"><a href="{Permalink}">{Month} {Year}</a>
  723. <div class="preblog"><a href="{ReblogURL}" target="_blank" >reblog</a></div></div>{/block:Date}
  724.  
  725. {block:Text} {block:Title} <a href="{Permalink}"> <h1>{Title}</h1></a> {/block:Title} {Body} {/block:Text}
  726.  
  727. {block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{/block:Photo}
  728.  
  729. {block:Photoset} {block:IndexPage}{Photoset-500}{/block:IndexPage} {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage} {/block:Photoset}
  730.  
  731. {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}
  732.  
  733. {block:Quote} <div class="quote"> “{Quote}” </div> <div class="source"> — {Source} </div> {/block:Quote}
  734.  
  735. {block:Link} <div class="linktitle"> <a href="{URL}"><h1>{Name}</h1></a></div>
  736. {block:Description} <p>{Description}</p> {/block:Description}{/block:Link}
  737.  
  738. {block:ifNot400pxPosts}{block:Video}<div class="video" style="margin-left:25px;">{Video-250}</div>{/block:Video}{/block:ifNot400pxPosts}
  739.  
  740. {block:if400pxPosts}{block:Video}<div class="video">{Video-400}</div>{/block:Video}{/block:if400pxPosts}
  741.  
  742. {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}
  743.  
  744. {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}
  745.  
  746. {block:Caption}{Caption}{/block:Caption}
  747.  
  748. <div class="bottominfo"><div class="psource">{block:ContentSource}<a href="{SourceURL}">source</a>{/block:ContentSource}</div>
  749.  
  750. {block:NoteCount}<a href="{Permalink}"> {NoteCountWithLabel}</a>{/block:NoteCount}
  751.  
  752. {block:HasTags}<div class="tags">{block:Tags}<a href="{TagURL}">#{Tag}</a> &nbsp;{/block:Tags}<br></div>{/block:HasTags}</div>
  753.  
  754. {block:PermalinkPage}{block:PostNotes}<div id="notes">{PostNotes}</div>{/block:PostNotes}{/block:PermalinkPage}
  755.  
  756. </div>
  757. {/block:Posts}
  758.  
  759. {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}
  760.  
  761. </div>
  762. </div>
  763. </div>
  764. </div>
  765.  
  766.  
  767. <div id="cred">
  768. <a href="http://twentys.tumblr.com" title="made by julie."><span class="th th-holly-o"></span></a>
  769. </div>
  770.  
  771.  
  772. </body>
  773. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!