API tools faq
paste
lovesjoon

theme 01: joon v1

lovesjoon
Mar 23rd, 2020 (edited)
1,226
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 24.65 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. <!--- ♡ THEME: 001.1 - JOON by TWENTYS (rmon). ♡
  13.  
  14.  
  15. ♡ READ ME ♡
  16.  
  17.  
  18. + base code by @borntobewildcodes, edited by twentys
  19.  
  20. + pretty please dont recreate / steal parts of this code / remove credit
  21.  
  22. + feel free to reach out if there are any bugs or questions ♡
  23.  
  24.  
  25. hope you enjoy this code !! ♡( ◡‿◡ ) --->
  26.  
  27.  
  28.  
  29.  
  30.  
  31.  
  32.  
  33.  
  34. <title>{Title}</title>
  35. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  36. <link rel="shortcut icon" href="{Favicon}">
  37. {block:Description}
  38. <meta name="description" content="{MetaDescription}">
  39. {/block:Description}
  40.  
  41.  
  42.  
  43.  
  44. <meta name="image:background" content="1"/>
  45. <meta name="image:png" content="1"/>
  46. <meta name="image:sidebar" content="1"/>
  47.  
  48. <meta name="color:background" content="#eee"/>
  49. <meta name="color:container" content="#fff"/>
  50. <meta name="color:posts" content="#fff"/>
  51. <meta name="color:post container" content="#fff"/>
  52. <meta name="color:borders" content="#ddd"/>
  53. <meta name="color:accent" content="#dee1d6"/>
  54. <meta name="color:accent2" content="#979797"/>
  55. <meta name="color:title" content="#dfada4"/>
  56. <meta name="color:text" content="#acacac"/>
  57. <meta name="color:links" content="#b99680"/>
  58. <meta name="color:hover" content="#98a3a9"/>
  59. <meta name="color:bold" content="#d8d6d7"/>
  60. <meta name="color:italic" content="#98a3a9"/>
  61.  
  62. <meta name="if:400px posts" content="0" />
  63. <meta name="if:no muse tab" content="1" />
  64.  
  65. <meta name="text:title" content="Bloom;"/>
  66. <meta name="text:description" 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."/>
  67. <meta name="text:ooc info" content="keep it short !"/>
  68.  
  69.  
  70.  
  71.  
  72. <!--- PT. 1: SCRIPTS: JQUERY + TOOLTIP + TABS + FONTS ---->
  73.  
  74.  
  75.  
  76.  
  77. <!--- JQUERY SCRIPTS --->
  78.  
  79. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  80. <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
  81.  
  82.  
  83.  
  84. <!--- TOOLTIP SCRIPT ---->
  85.  
  86. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  87. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  88.  
  89. <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>
  90.  
  91.  
  92.  
  93. <!--- GOOGLE + ICON FONTS ---->
  94.  
  95. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  96. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/v4-shims.css">
  97.  
  98. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  99.  
  100. <link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans|Source+Sans+Pro&display=swap" rel="stylesheet">
  101.  
  102.  
  103.  
  104.  
  105. <!--- TAB SCRIPT ---->
  106.  
  107. <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>
  108.  
  109.  
  110.  
  111.  
  112.  
  113. <style type="text/css">
  114.  
  115.  
  116.  
  117.  
  118. /*--- FONTS HOSTED BY @TWENTYS ---*/
  119.  
  120. @font-face{ font-family:"amalfi"; src: url('https://dl.dropboxusercontent.com/s/u826utwnrqcstlm/Amalfi%20Coast.ttf’)'); }
  121.  
  122.  
  123.  
  124.  
  125. /*---PT. 2: TOOLTIP + SCROLLBAR + SELECTION---*/
  126.  
  127.  
  128.  
  129.  
  130. /*TOOLTIP*/
  131.  
  132. #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; }
  133.  
  134.  
  135. /*SCROLLBAR*/
  136.  
  137. ::-webkit-scrollbar-thumb { display:none; }
  138.  
  139. ::-webkit-scrollbar { display:none; }
  140.  
  141.  
  142. /*SELECTION*/
  143.  
  144. ::-moz-selection { background:{color:accent}; color:{color:posts}; }
  145.  
  146. ::selection { background:{color:accent}; color:{color:posts}; }
  147.  
  148.  
  149.  
  150.  
  151. /*---PT. 3: BODY + TEXT STYLING---*/
  152.  
  153.  
  154.  
  155.  
  156. /*BODY*/
  157.  
  158. body { margin:0; padding:0; width:100%; height:100%; color:{color:text}; font-family:'Open Sans',sans-serif; font-size:10px; {block:if400pxPosts} font-size:12px; line-height:17px; {/block:if400pxPosts} line-height:15px; background-color:{color:background}; background-image:url({image:background}); background-attachment:fixed; background-repeat:repeat; }
  159.  
  160.  
  161.  
  162. /*FIX*/
  163.  
  164. iframe, img, embed, object { margin:auto; max-width:100%; border:none; }
  165.  
  166. img { margin:auto; max-width:100%; border:none; height:auto; }
  167.  
  168.  
  169.  
  170. /*TEXT STYLING*/
  171.  
  172. select, textarea, input, a { outline:none; }
  173.  
  174. p { margin-top:5px; margin-bottom:5px; }
  175.  
  176. small, sub, sup { font-size:100%; }
  177.  
  178. big { font-size:110%; }
  179.  
  180. h1 { font-size:25px; font-family:"amalfi"; text-align:center; line-height:28px; background:transparent; color:{color:title}; text-transform:none; margin-top:20px; text-transform:lowercase; }
  181.  
  182. 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; }
  183.  
  184. a { text-transform:uppercase; letter-spacing:1px; font-weight:bold; font-family: "lato"; color:{color:links}; font-size:9px; text-decoration:none; }
  185.  
  186. a:hover { color:{color:hover};
  187.  
  188. -webkit-transition: all .3s;
  189. -moz-transition: all .3s;
  190. -o-transition: all .3s;
  191. -ms-transition: all .3s;
  192. transition: all .3s; }
  193.  
  194. ul, ol, li { margin:5px 10px; padding:0px; }
  195.  
  196. b, strong { color:{color:bold}; }
  197.  
  198. i, em { color:{color:italic}; }
  199.  
  200. blockquote { margin:10px; padding-left:20px; border-left:1px solid {color:borders}; }
  201.  
  202.  
  203.  
  204. /*TUMBLR CONTROLS*/
  205.  
  206. 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; }
  207.  
  208. iframe.tmblr-iframe:hover { opacity:1!important; }
  209.  
  210.  
  211.  
  212.  
  213. /*--- PT. 4: CONTAINER + SIDEBAR ---*/
  214.  
  215.  
  216.  
  217.  
  218. /*CONTAINER*/
  219.  
  220. #wrapper { position:absolute; margin:auto; left:0px; right:0px; top:0px; bottom:0px; background-color:transparent; width:1000px; height:480px; overflow:hidden; border-radius:0px; }
  221.  
  222. #container { position:absolute; margin:auto; left:0px; right:0px; top:0px; bottom:0px; background-color:{color:container}; width:800px; {block:if400pxPosts} width:900px; {/block:if400pxPosts} height:480px; overflow:hidden; border-radius:0px; }
  223.  
  224.  
  225. /*SIDEBAR*/
  226.  
  227. #conbox { position:absolute; left:50px; top:50px; background-color:{color:accent}; width:675px; {block:if400pxPosts} width:775px; {/block:if400pxPosts} height:350px; border-radius:30px; }
  228.  
  229. .desctitle { position:absolute; left:70px; bottom:85px; width:auto; height:auto; font-family:"amalfi"; font-size:40px; color:{color:text}; text-align:center; z-index:9999; }
  230.  
  231. .desctxt { position:absolute; font-size:7px; padding:10px; text-align:justify; text-transform:uppercase; letter-spacing:2px; z-index:99; color:{color:text}; bottom:15px; left:65px; width:40%; {block:if400pxPosts} width:30%; left:75px; {/block:if400pxPosts} height:35px; line-height:15px; overflow:scroll; }
  232.  
  233. .png { position:absolute; bottom:0px; left:220px; width:200px; height:400px; background:transparent; z-index:999; }
  234.  
  235. .box { position:absolute; bottom:150px; left:150px; width:150px; height:200px; background-color:{color:container}; border-radius:20px; }
  236.  
  237. .box img { width:150px; height:200px; border-radius:20px; }
  238.  
  239. .box2 { position:absolute; bottom:285px; left:135px; width:40px; height:40px; background-color:{color:container}; border-radius:5px; opacity:.8; }
  240.  
  241. .box3 { position:absolute; bottom:140px; left:250px; width:25px; height:25px; background-color:{color:container}; border-radius:5px; opacity:.8; }
  242.  
  243.  
  244.  
  245.  
  246.  
  247. /*--- PT.5: POSTS + ENTRIES ---*/
  248.  
  249.  
  250.  
  251.  
  252. /*POST CONTAINER*/
  253.  
  254. #postcon { position:absolute; width:400px; {block:if400pxPosts} width:500px; {/block:if400pxPosts} height:480px; background-color:transparent; margin:auto; bottom:0px; right:0px; }
  255.  
  256.  
  257. /*POSTS*/
  258.  
  259. #posts { position:absolute; width:360px; {block:if400pxPosts} width:460px; {/block:if400pxPosts} height:440px; background-color:transparent; overflow:scroll; z-index:1000; top:0px; left:20px; padding:20px 0px 20px 0px; }
  260.  
  261.  
  262. /*ENTRY STYLING*/
  263.  
  264. .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; }
  265.  
  266. .entry img { margin:0px; padding:0px; }
  267.  
  268.  
  269.  
  270.  
  271. /*--- PT.6: POST INFO + NOTES + PAGINATION + CREDIT---*/
  272.  
  273.  
  274.  
  275.  
  276. /*TOP POST INFO*/
  277.  
  278. .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}; }
  279.  
  280. .topinfo a { margin-left: 5px; text-transform:uppercase; letter-spacing:1px; font-weight:bold; font-family: "lato"; color:{color:links}; font-size:9px; }
  281.  
  282. .preblog { float:right; margin-top: 0px; width: auto; height: 26px; line-height:22px; z-index: 100; list-style: none; margin-right:5px; }
  283.  
  284.  
  285. /*BOTTOM POST INFO*/
  286.  
  287. .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; }
  288.  
  289. .bottominfo a { text-transform:uppercase; letter-spacing:1px; font-weight:bold; font-family: "lato"; color:{color:links}; font-size:9px; }
  290.  
  291. .psource { float:right; margin-top: 0px; width: auto; height: 25px; line-height:22px; z-index: 100; list-style: none; margin-right:10px; }
  292.  
  293.  
  294. /*TAGS*/
  295.  
  296. .tags { {block:IndexPage} text-align:left; line-height:10px; margin-top:5px; {/block:IndexPage} }
  297.  
  298. .tags a { font-family: 'Source Sans Pro', sans-serif; color:{color:text}; font-size:8px; }
  299.  
  300. .tags a:hover { font-weight:bold; color:{color:hover}; }
  301.  
  302.  
  303. /*POST NOTES*/
  304.  
  305. .note c { float:left; }
  306.  
  307. #notes { margin:0px; width:300px; {block:if400pxPosts} width:400px; {/block:if400pxPosts} font-size:12px; color:{color:text}; }
  308.  
  309. ol.notes { padding:0px; margin:0px; list-style-type:none; }
  310.  
  311. ol.notes li.note { margin:0px; padding:10px 0px; border-bottom:1px solid {color:borders}; }
  312.  
  313. ol.notes li.note img.avatar { float:left; vertical-align:-5px; margin-left:0px; margin-right:10px; width:20px; height:20px; }
  314.  
  315. li.more_notes_link_container { font-size: 12px; }
  316.  
  317.  
  318.  
  319. /*PAGINATION*/
  320.  
  321. .pagination { width:100%; text-align:center; }
  322.  
  323. .pagination a { padding:8px; word-spacing:2px; }
  324.  
  325. .pagination a:hover { color:{color:links}; }
  326.  
  327. .pagination i { color:{color:links}; }
  328.  
  329.  
  330.  
  331. /*CREDIT*/
  332.  
  333. #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; }
  334.  
  335. #cred span { padding:10px; font-size:18px; background: -webkit-linear-gradient({color:accent}, {color:accent2});
  336.  
  337. -webkit-background-clip: text;
  338. -webkit-text-fill-color: transparent; }
  339.  
  340.  
  341.  
  342.  
  343. /*--- PT.7: POST STYLING ---*/
  344.  
  345.  
  346.  
  347.  
  348. /*CHATS*/
  349.  
  350. .lines { margin:0px; padding:5px; line-height:20px; }
  351.  
  352.  
  353.  
  354. /*QUOTES*/
  355.  
  356. .quote { margin:10px; padding:5px; font-size:15px; line-height:25px; color:{color:italic}; text-align:center; letter-spacing:2px; font-family:"amalfi"; word-spacing:5px; text-transform:lowercase; }
  357.  
  358. .source { text-align:right; font-size:12px; line-height:20px; }
  359.  
  360.  
  361.  
  362. /*ASKS*/
  363.  
  364. .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; }
  365.  
  366. .asker img { max-width:30px; border:1px solid {color:borders}; border-radius:2px; z-index:1000; opacity:1; background-color:{color:posts}; }
  367.  
  368. .answer { margin:10px; margin-bottom:0; }
  369.  
  370. .bubble { padding:5px 25px 20px 25px; text-align:center; height:auto; margin-top:-5px; font-style:italic; border:1px solid {color:borders}; width:210px; {block:if400pxPosts} width:310px; {/block:if400pxPosts} margin-left:20px; }
  371.  
  372.  
  373.  
  374. /*LINKS*/
  375.  
  376. .linktitle { margin:0; margin-top:30px; margin-bottom:10px; color:{color:title}; font-weight:normal; font-size:15px; line-height:20px; text-transform:lowercase; }
  377.  
  378.  
  379.  
  380. /*AUDIO*/
  381.  
  382. .playbutton { position:relative; margin-top:40px; margin-left:30px; z-index:9; width:33px; height:38px; overflow:hidden; opacity:0.6; }
  383.  
  384. .albumart img { position:relative; margin-top:-70px; margin-left:0px; height:70px; width:70px; border:1px solid {color:borders}; padding:10px; }
  385.  
  386. .trackinfo { margin-bottom:10px; background:{color:posts}; color:{color:text}; top:-1px; position:relative; margin-left:100px; height:70px; width:185px; {block:if400pxPosts} width:285px; {/block:if400pxPosts} margin-top:-95px; border:1px solid {color:borders}; padding:10px 5px 10px 5px; }
  387.  
  388. .trackname { position:relative; padding-top:15px; text-align:center; font-size:8px; line-height:12px; text-transform:uppercase; font-weight: bold; letter-spacing:2px; }
  389.  
  390. .artist { text-align:center; font-size:7.5px; text-transform:uppercase; letter-spacing:4px; }
  391.  
  392.  
  393.  
  394.  
  395. /*--- PT.8: TABS ---*/
  396.  
  397.  
  398.  
  399.  
  400. /*TAB LINKS*/
  401.  
  402. .tab { position:absolute; overflow: hidden; height:auto; float:right; top:70px; left:15px; z-index:9999; width:60px; padding:10px; background:transparent; }
  403.  
  404. .tab li { display:inline-block; margin:5px; background:{color:container}; border-radius:100%; width:50px; height:50px; }
  405.  
  406. .tab span { width:25px; height:25px; }
  407.  
  408. .tab a { color:{color:accent2}; background-color:{color:container}; font-size:20px; border-radius:100%; padding:5px; text-align:center; line-height:50px; border:2px solid {color:accent}; margin-left:5px; }
  409.  
  410.  
  411.  
  412. /*TAB CONTENT*/
  413.  
  414. .tabcontent { position:absolute; width:480px; height:480px; background-color:transparent; z-index:9999; right:0px; top:0px; }
  415.  
  416.  
  417.  
  418. /*ASK TAB*/
  419.  
  420. #askbox { position:absolute; margin:auto; left:0px; top:40px; right:-80px; bottom:0px; width:320px; {block:if400pxPosts} width:420px; right:20px; {/block:if400pxPosts} }
  421.  
  422.  
  423.  
  424. /*NAVI TAB*/
  425.  
  426. .nbox1 { position:absolute; width:200px; {block:if400pxPosts} width:250px; {/block:if400pxPosts} height:100px; background:{color:container}; bottom:30px; right:30px; border-radius:20px; }
  427.  
  428. .nbox2 { width:180px; {block:if400pxPosts} width:230px; {/block:if400pxPosts} height:80px; background:{color:accent}; margin-top:10px; margin-left:10px; border-radius:10px; }
  429.  
  430. .ntxt { margin-top:0px; margin-left:0px; height:20px; width:auto; color:{color:container}; font-size:10px; font-family: 'Source Sans Pro', sans-serif; text-transform:uppercase; letter-spacing:2px; font-weight:bold; line-height:80px; text-align:center; font-style:italic;
  431.  
  432. -webkit-box-shadow: 5px 5px 27px -10px rgba(184,184,184,1);
  433. -moz-box-shadow: 5px 5px 27px -10px rgba(184,184,184,1);
  434. box-shadow: 5px 5px 27px -10px rgba(184,184,184,1); }
  435.  
  436. .links { position:absolute; top:120px; left:90px; width:420px; height:300px; {block:if400pxPosts} width:450px; left:20px; {/block:if400pxPosts} }
  437.  
  438. .links li { display:inline-block; width:80px; height:25px; border:10px; background-color:{color:container}; padding:10px; border-radius:10px; margin:10px; text-align:center; {block:if400pxPosts} width:100px; {/block:if400pxPosts}
  439.  
  440. -webkit-box-shadow: 5px 5px 27px -10px rgba(184,184,184,1);
  441. -moz-box-shadow: 5px 5px 27px -10px rgba(184,184,184,1);
  442. box-shadow: 5px 5px 27px -10px rgba(184,184,184,1); }
  443.  
  444. .links a { color:{color:text}; line-height:25px; }
  445.  
  446.  
  447.  
  448. /*MUSE TAB*/
  449.  
  450. .muses { position:absolute; top:80px; right:10px; width:370px; height:300px; background:transparent; overflow:scroll; {block:if400pxPosts} width:470px; {/block:if400pxPosts} }
  451.  
  452. .muses li { display:inline-block; width:85px; height:70px; background-color:{color:container}; margin:15px; border-radius:10px;
  453.  
  454. -webkit-box-shadow: 5px 5px 27px -10px rgba(184,184,184,1);
  455. -moz-box-shadow: 5px 5px 27px -10px rgba(184,184,184,1);
  456. box-shadow: 5px 5px 27px -10px rgba(184,184,184,1); }
  457.  
  458. .muses img { width:85px; height:70px; border-radius:10px; }
  459.  
  460.  
  461.  
  462.  
  463. /*--- PT.9: CUSTUM CSS ---*/
  464.  
  465.  
  466.  
  467.  
  468. {CustomCSS}
  469. </style></head><body>
  470.  
  471.  
  472.  
  473. <div id="wrapper">
  474. <div id="container">
  475.  
  476.  
  477.  
  478.  
  479. <!--- SIDEBAR + LINKS! --->
  480.  
  481.  
  482.  
  483.  
  484. <div class="tab">
  485.  
  486. <li><a href="#" class="tablinks" onclick="openCity(event, 'home')" title="posts"> <span class="th th-bird-house-o"></span> </a></li>
  487. <li><a href="#" class="tablinks" onclick="openCity(event, 'ask')" title="contact"> <span class="th th-wave-o"></span> </a></li>
  488. <li><a href="#" class="tablinks" onclick="openCity(event, 'navi')" title="navigate"> <span class="th th-flower-o"></span> </a></li>
  489.  
  490. {block:ifNotnomusetab} <li><a href="#" class="tablinks" onclick="openCity(event, 'muses')" title="muses"> <span class="th th-sunset-o"></span> </a></li> {/block:ifNotnomusetab}
  491. {block:ifnomusetab} <li><a href="/" title="link"> <span class="th th-sunset-o"></span> </a></li> {/block:ifnomusetab}
  492.  
  493. </div>
  494.  
  495. <div id="conbox"> </div>
  496.  
  497. <div class="desctitle">{text:title}</div>
  498. <div class="desctxt">{text:description}</div>
  499.  
  500. <div class="box"> <img src="{image:sidebar}"> </div>
  501. <div class="box2"> </div>
  502. <div class="box3"> </div>
  503. <div class="png"> <img src="{image:png}"> </div>
  504.  
  505.  
  506.  
  507.  
  508. <!--- ASK TAB ! --->
  509.  
  510.  
  511.  
  512.  
  513. <div id="ask" class="tabcontent" style="display:none">
  514.  
  515. <div id="askbox">
  516.  
  517. {block:ifNot400pxPosts}<iframe frameborder="0" border="0" scrolling="no" width="100%" height="260px" allowtransparency="true" src="https://www.tumblr.com/ask_form/{name}.tumblr.com" style="background-color:transparent; overflow:hidden;"></iframe>{/block:ifNot400pxPosts}
  518.  
  519. {block:if400pxPosts} <iframe frameborder="0" border="0" scrolling="no" width="100%" height="190px" allowtransparency="true" src="https://www.tumblr.com/ask_form/{name}.tumblr.com" style="background-color:transparent; overflow:hidden;"></iframe> {/block:if400pxPosts}
  520.  
  521. </div>
  522.  
  523. </div>
  524.  
  525.  
  526.  
  527.  
  528. <!--- NAVI TAB ! --->
  529.  
  530.  
  531.  
  532.  
  533. <div id="navi" class="tabcontent" style="display:none">
  534.  
  535. <div class="links">
  536.  
  537. <li> <a href="/"> link 1 </a> </li>
  538. <li> <a href="/"> link 2 </a> </li>
  539. <li> <a href="/"> link 3 </a> </li>
  540.  
  541. <li> <a href="/"> link 4 </a> </li>
  542. <li> <a href="/"> link 5 </a> </li>
  543. <li> <a href="/"> link 6 </a> </li>
  544.  
  545. <li> <a href="/"> link 7</a> </li>
  546. <li> <a href="/"> link 8</a> </li>
  547. <li> <a href="/"> link 9</a> </li>
  548.  
  549. </div>
  550.  
  551. <div class="nbox1">
  552.  
  553. <div class="nbox2"> <div class="ntxt"> {text:ooc info} </div> </div>
  554.  
  555. </div>
  556.  
  557. </div>
  558.  
  559.  
  560.  
  561.  
  562. <!--- MUSE TAB ! --->
  563.  
  564.  
  565.  
  566.  
  567. <div id="muses" class="tabcontent" style="display:none">
  568.  
  569.  
  570. <div class="muses">
  571.  
  572. <!--- copy for a new row of muses from here --->
  573.  
  574. <li><a href="/" title="muse 1 info"><img src="https://i.postimg.cc/vmCpY03r/nj.png"></a></li>
  575. <li><a href="/" title="muse 2 info"><img src="https://i.postimg.cc/vmCpY03r/nj.png"></a></li>
  576. <li><a href="/" title="muse 3 info"><img src="https://i.postimg.cc/vmCpY03r/nj.png"></a></li>
  577.  
  578. <!--- to here !! --->
  579.  
  580. <li><a href="/" title="muse 4 info"><img src="https://i.postimg.cc/vmCpY03r/nj.png"></a></li>
  581. <li><a href="/" title="muse 5 info"><img src="https://i.postimg.cc/vmCpY03r/nj.png"></a></li>
  582. <li><a href="/" title="muse 6 info"><img src="https://i.postimg.cc/vmCpY03r/nj.png"></a></li>
  583.  
  584. <li><a href="/" title="muse 7 info"><img src="https://i.postimg.cc/vmCpY03r/nj.png"></a></li>
  585. <li><a href="/" title="muse 8 info"><img src="https://i.postimg.cc/vmCpY03r/nj.png"></a></li>
  586. <li><a href="/" title="muse 9 info"><img src="https://i.postimg.cc/vmCpY03r/nj.png"></a></li>
  587.  
  588. <li><a href="/" title="muse 10 info"><img src="https://i.postimg.cc/vmCpY03r/nj.png"></a></li>
  589. <li><a href="/" title="muse 11 info"><img src="https://i.postimg.cc/vmCpY03r/nj.png"></a></li>
  590. <li><a href="/" title="muse 12 info"><img src="https://i.postimg.cc/vmCpY03r/nj.png"></a></li>
  591.  
  592.  
  593. </div>
  594.  
  595.  
  596. </div>
  597.  
  598.  
  599.  
  600. <!--- POSTS TAB ! --->
  601.  
  602.  
  603.  
  604.  
  605. <div id="home" class="tabcontent">
  606.  
  607. <div id="postcon">
  608.  
  609. <div id="posts">
  610. {block:Posts}
  611. <div class="entry">
  612.  
  613. {block:Date} <div class="topinfo"><a href="{Permalink}">{Month} {Year}</a>
  614. <div class="preblog"><a href="{ReblogURL}" target="_blank" >reblog</a></div></div>{/block:Date}
  615.  
  616. {block:Text} {block:Title} <a href="{Permalink}"> <h1>{Title}</h1></a> {/block:Title} {Body} {/block:Text}
  617.  
  618. {block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{/block:Photo}
  619.  
  620. {block:Photoset} {block:IndexPage}{Photoset-500}{/block:IndexPage} {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage} {/block:Photoset}
  621.  
  622. {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}
  623.  
  624. {block:Quote} <div class="quote"> "{Quote}" </div> <div class="source"> — {Source} </div> {/block:Quote}
  625.  
  626. {block:Link} <div class="linktitle"> <a href="{URL}"><h1>{Name}</h1></a></div>
  627. {block:Description} <p>{Description}</p> {/block:Description}{/block:Link}
  628.  
  629. {block:ifNot400pxPosts}{block:Video}<div class="video" style="margin-left:25px;">{Video-250}</div>{/block:Video}{/block:ifNot400pxPosts}
  630.  
  631. {block:if400pxPosts}{block:Video}<div class="video">{Video-400}</div>{/block:Video}{/block:if400pxPosts}
  632.  
  633. {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}
  634.  
  635. {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}
  636.  
  637. {block:Caption}{Caption}{/block:Caption}
  638.  
  639. <div class="bottominfo"><div class="psource">{block:ContentSource}<a href="{SourceURL}">source</a>{/block:ContentSource}</div>
  640.  
  641. {block:NoteCount}<a href="{Permalink}"> {NoteCountWithLabel}</a>{/block:NoteCount}
  642.  
  643. {block:HasTags}<div class="tags">{block:Tags}<a href="{TagURL}">#{Tag}</a> &nbsp;{/block:Tags}<br></div>{/block:HasTags}</div>
  644.  
  645. {block:PermalinkPage}{block:PostNotes}<div id="notes">{PostNotes}</div>{/block:PostNotes}{/block:PermalinkPage}
  646.  
  647. </div>
  648. {/block:Posts}
  649.  
  650. {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}
  651.  
  652. </div>
  653. </div>
  654. </div>
  655.  
  656.  
  657. </div>
  658. </div>
  659.  
  660.  
  661. <div id="cred">
  662. <a href="http://twentys.tumblr.com" title="made by julie."><span class="th th-holly-o"></span></a>
  663. </div>
  664.  
  665.  
  666. </body>
  667. </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!