API tools faq
paste
Advertisement
monniy

05 / WM B-SIDE

monniy
May 30th, 2020 (edited)
760
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.17 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.  
  4. TRACK 5 / WHITE MERCEDES b-side.
  5. by monny - ♡
  6.  
  7. hope u like it and enjoy o/
  8. ask me if you have doubts.
  9.  
  10. DONT;
  11.  
  12. ♡ steal complete or in parts.
  13. ♡ recreate it.
  14. ♡ use as a base code.
  15. ♡ remove the credits.
  16.  
  17. base code credit: 14kgolds
  18. tab code credit: valcntines
  19. icons credit: honeybee by suiomi
  20. google fonts: Karla, Montserrat,
  21. Fredoka One, Pirata One
  22.  
  23. -->
  24.  
  25. <head>
  26.  
  27.  
  28.  
  29. <title>{Title}</title>
  30. <link rel="shortcut icon" href="{Favicon}">
  31. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  32. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  33.  
  34.  
  35. <meta name="if:sideimg" content="1" />
  36.  
  37. <meta name="color:background" content="#ffffff"/>
  38. <meta name="color:text" content="#000000"/>
  39. <meta name="color:title" content="#666666"/>
  40. <meta name="color:bold" content="#000000"/>
  41. <meta name="color:italic" content="#000000"/>
  42. <meta name="color:links" content="#666666"/>
  43. <meta name="color:hover" content="#c6c6c6"/>
  44. <meta name="color:borders" content="#d7d7d7"/>
  45. <meta name="color:posts" content="#eaeaea"/>
  46. <meta name="color:container" content="#c6c6c6"/>
  47. <meta name="color:accent" content="#737373"/>
  48.  
  49. <meta name="image:background" content=""/>
  50. <meta name="image:sidebar" content="https://via.placeholder.com/130x270"/>
  51. <meta name="image:sideicon" content="https://via.placeholder.com/70x70"/>
  52. <meta name="image:topimg" content="https://via.placeholder.com/145x70"/>
  53. <meta name="image:tab" content="https://via.placeholder.com/190x310"/>
  54.  
  55. <meta name="text:title" content="title">
  56. <meta name="text:title size" content="85" />
  57. <meta name="text:subtitle" content="subtitle">
  58. <meta name="text:subtitle size" content="78" />
  59. <meta name="text:desc" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.">
  60. <meta name="text:textab" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.">
  61.  
  62.  
  63.  
  64. <meta name="text:sidelink" content="link">
  65. <meta name="text:sidelink url" content="/">
  66. <meta name="text:tablink" content="link">
  67. <meta name="text:tablink url" content="/">
  68. <meta name="text:tablink 2" content="link">
  69. <meta name="text:tablink url 2" content="/">
  70. <meta name="text:tablink 3" content="link">
  71. <meta name="text:tablink url 3" content="/">
  72. <meta name="text:tablink 4" content="link">
  73. <meta name="text:tablink url 4" content="/">
  74. <meta name="text:tablink 5" content="link">
  75. <meta name="text:tablink url 5" content="/">
  76. <meta name="text:tablink 6" content="link">
  77. <meta name="text:tablink url 6" content="/">
  78. <meta name="text:tablink 7" content="link">
  79. <meta name="text:tablink url 7" content="/">
  80. <meta name="text:tablink 8" content="link">
  81. <meta name="text:tablink url 8" content="/">
  82. <meta name="text:tablink 9" content="link">
  83. <meta name="text:tablink url 9" content="/">
  84.  
  85.  
  86.  
  87.  
  88.  
  89. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  90. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  91. <script>
  92. (function($){
  93. $(document).ready(function() {
  94. $("a[title]").style_my_tooltips({
  95. tip_follows_cursor:false,
  96. tip_delay_time:90,
  97. tip_fade_speed:600,
  98. attribute:"title"
  99. });
  100. });
  101. })(jQuery);
  102. </script>
  103.  
  104.  
  105.  
  106. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  107.  
  108. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  109.  
  110. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  111.  
  112. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  113.  
  114.  
  115. <link href="https://fonts.googleapis.com/css?family=ABeeZee|Karla" rel="stylesheet">
  116. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  117. <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,600i,800i&display=swap" rel="stylesheet">
  118. <link href="https://fonts.googleapis.com/css?family=Dosis|Quicksand&display=swap" rel="stylesheet">
  119. <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
  120. <link href="https://fonts.googleapis.com/css2?family=Pirata+One&display=swap" rel="stylesheet">
  121. <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap" rel="stylesheet">
  122.  
  123.  
  124. <style type="text/css">
  125.  
  126. .iframe-controls--desktop {
  127. position:fixed;
  128. top:0px;
  129. right:0px;
  130. color-filer:{links};
  131. z-index:214748364789123456789;
  132. filter: invert;(100%);
  133. -webkit-filter:invert(100%);
  134. -webkit-transform:scale(0.6,0.6);
  135. -webkit-transform-origin: 100% 0%;
  136. -ms-transform-origin:100% 0%;
  137. -ms-transform:scale(0.6,0.6);
  138. transform:scale(0.6,0.6);
  139. transform-origin:100% 0%;
  140.  
  141. }
  142.  
  143. /*! SCROLLBAR & TOOLTIP ------------- */
  144.  
  145.  
  146. ::-webkit-scrollbar { width:5px; background: transparent; }
  147.  
  148. ::-webkit-scrollbar-thumb { background-color:transparent; }
  149.  
  150. #s-m-t-tooltip { max-width:230px; padding:2px 9px 2px 10px; border-radius:3px; margin:20px 15px; color:#fff; background-color:{color:accent}; z-index:999999999999999; text-transform:uppercase; letter-spacing:1px; font-size:8.5px; text-align:justify; }
  151.  
  152.  
  153. /*! BODY ------------- !*/
  154.  
  155.  
  156. body { background-color:{color:background}; color:{color:text}; font-family: 'Karla', sans-serif; font-size:9.5px; letter-spacing:1px; line-height:20px; background-image:url('{image:background}'); background-size:auto; overflow:hidden; }
  157.  
  158. h1 { text-align:center; font-size:30px; font-weight:500; line-height:35px; font-family: 'Montserrat', cursive; color:{color:text};font-weight: 400; }
  159.  
  160. h2 { text-align:center; text-transform:uppercase; color:{color:accent}; }
  161.  
  162. a { text-decoration:none; color:{color:links}; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }
  163.  
  164. a:hover { color:{color:hover}; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }
  165.  
  166. blockquote { border-left:1px solid {color:borders}; margin-left:10px; padding-left:20px; width:90%; }
  167.  
  168. blockquote blockquote { border-left:1px solid {color:borders}; margin-left:5px; }
  169.  
  170. small, sup, sub { font-size:10px; }
  171.  
  172. b, strong { font-weight:900; color:{color:bold}; }
  173.  
  174. i, em { color:{color:italic}; font-size:10px; }
  175.  
  176.  
  177. /*! HOLDER ------------- !*/
  178.  
  179.  
  180. #container { position:absolute; margin:auto; left:40px; right:0px; top:0px; bottom:0px; width:705px; height:450px; background-color:{color:container}; overflow:visible; padding:10px; border-radius:3px }
  181.  
  182.  
  183. /*! SIDEBAR ------------- !*/
  184.  
  185.  
  186. #sidebar { position:absolute; top:0px; left:0px; z-index:9; width:330px; height:460px; overflow:hidden; background-color:{color:transparent}; }
  187.  
  188.  
  189. #sidebar img { position:absolute; bottom:0px; left:195px; width:130px; height:270px; z-index:9; border-radius:0px }
  190.  
  191. #sideicon img { position:absolute; top:15px; left:15px; width:70px; height:70px; z-index:9; border-radius:100px {block:Ifsideimg} left:20px; top:15px; width:145px; height:70px; {/block:Ifsideimg} }
  192.  
  193. .title { position:absolute; left:-95px; top:300px; width:280px; font-size:{text:title size}px; padding-bottom:10px; text-align:left; color:{color:text};font-family: 'Montserrat', sans-serif; text-transform: uppercase; -webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); -webkit-text-stroke: 1px {color:title}; -webkit-text-fill-color: transparent; }
  194.  
  195. .subtitle { position:absolute; left:-20px; top:315px; width:280px; font-size:{text:subtitle size}px; padding-bottom:10px; text-align:center; color:{color:text}; font-family: 'Pirata One', cursive; text-transform: lowercase; -webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg)}
  196.  
  197. .desc { position:absolute; width:132px; height:153px; top:20px; left:187px; text-align:justify; overflow:auto; color:{color:text}; padding-left:10px; padding-right:10px; z-index:9;}
  198.  
  199. .sidelinks { position:absolute; width:280px; top:160px; left:20px; text-align:left;z-index:999; }
  200.  
  201. .sidelinks a { font-size:13px; margin-right:10px; font-weight: 900;}
  202.  
  203. .pagination { position:absolute; margin-top:100px; width:100px; padding-right:10px; text-align:right; line-height:70px; transform:rotate(0deg); font-family: 'Montserrat', sans-serif; margin-left:10px;}
  204.  
  205.  
  206. .pagination a { color:{color:links}; letter-spacing:1px; text-align:center; font-size:11px;text-transform: uppercase; }
  207.  
  208. .pagination a:hover { color:{color:hover}; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }
  209.  
  210.  
  211. /*! DON'T TOUCH FROM HERE !*/
  212.  
  213. .circle { position:absolute; width:320px; top:160px; left:-129px; text-align:center; letter-spacing:15px; color: {color:links}; z-index:999; font-size:13px; margin-right:10px; font-weight: 900; }
  214.  
  215. .circleb { position:absolute; width:320px; top:160px; left:-102px; text-align:center; letter-spacing:15px; color: {color:links}; z-index:999; font-size:13px; margin-right:10px; font-weight: 900; }
  216.  
  217. .circlec { position:absolute; width:320px; top:160px; left:-75px; text-align:center; letter-spacing:15px; color: {color:links}; z-index:999; font-size:13px; margin-right:10px; font-weight: 900; }
  218.  
  219. .circled { position:absolute; width:320px; top:160px; left:-47.5px; text-align:center; letter-spacing:15px; color: {color:links}; z-index:999; font-size:13px; margin-right:10px; font-weight: 900; }
  220.  
  221. /*! TO HERE !*/
  222.  
  223.  
  224.  
  225.  
  226.  
  227. /*! POSTS STYLING ------------- !*/
  228.  
  229.  
  230. .entries { text-align:justify; position:absolute; height:440px; width:390px; overflow:auto; margin:auto; padding-right:50px; left:340px; right:0px; bottom:0px; overflow-x:hidden; top:-5px; }
  231.  
  232. .posts { width:350px; background-color:{color:posts}; margin-bottom:45px; margin-top:20px; margin-left:17px; text-align:justify; padding-left:20px; padding-right:18px; padding-top:3px; padding-bottom:10px; border-radius:3px }
  233.  
  234. .posts a { padding-left:2px; }
  235.  
  236.  
  237. .posts img { max-width:100%; height:auto; padding-top:15px;}
  238.  
  239. iframe { max-width:350px; }
  240.  
  241. .html_photoset { padding-top:17px; }
  242.  
  243. .more { width:100%; text-align:center; margin-top:20px; margin-bottom:5px; }
  244.  
  245. .more a { text-transform:uppercase; font-size:9px; color:{color:posts}; background-color:{color:links}; padding:4px 11px 4px 11px; border-radius:3px; font-weight:800; }
  246.  
  247. #permalink { text-align:left; text-transform:uppercase; font-size:9px; padding-top:10px; padding-bottom:0px; padding-left:10px; padding-right:10px; margin-top:20px; margin; -18px; margin-bottom:5px; background-color:transparent; color:{color:text}; border-top:1px solid;}
  248.  
  249. #permalink a { letter-spacing:1px; font-weight:600; color:{color:links}; padding-right:2px; webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }
  250.  
  251. #tags { width:385px; margin-top:-40px; margin-left:20px; margin-bottom:40; letter-spacing:1px; font-size:9px; text-align:center; line-height:16px; }
  252.  
  253. #tags span { font-size:7px; }
  254.  
  255. #tags a { letter-spacing:1px; color:{color:links}; padding-left:2px; padding-right:2px; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }
  256.  
  257. #tags a:hover { color:{color:hover}; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }
  258.  
  259.  
  260. /*! QUOTE STYLING ------------- !*/
  261.  
  262.  
  263. #q { color:{color:text}; padding-top:20px; padding-left:10px; padding-right:20px; font-size:20px; line-height:33px; text-align:center; color:{color:text}; font-family: 'Montserrat', cursive;}
  264.  
  265. .source { color:{color:text}; margin-top:15px; font-size:8px; font-weight:500; text-align:center; letter-spacing:1px; text-transform:uppercase; padding-bottom:5px; }
  266.  
  267. .source a:hover { color:{color:hover}; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }
  268.  
  269.  
  270. /*! ASK STYLING ------------- !*/
  271.  
  272.  
  273. #question { line-height:14px; color:{color:text}; letter-spacing:1px; font-size:9.5px; text-align:justify; padding-bottom:20px; padding-left:25px; padding-right:15px; background-color:{color:accent}; border: 1px solid ; border-color:{color:accent}; margin-top:20px; }
  274.  
  275. #asker { padding-top:15px ; padding-bottom:10px; width:auto; background-color:{color:container}; font-size:12px; text-align:right; margin-left:-26px; margin-top:-10px; z-index:9999999999; font-family: 'Fredoka One', cursive; text-transform:uppercase; margin-right:-16px; padding-right:20px; border-bottom: 1px solid ;}
  276.  
  277.  
  278. #asker a { padding-top:14px; padding-bottom:7px; font-size:12px; text-align:center; {color:links}; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; z-index:9;}
  279.  
  280. #asker a:hover { color:{color:hover}; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out;z-index:9; }
  281.  
  282. #answer { margin-top:20px; }
  283.  
  284.  
  285. /*! AUDIO STYLING ------------- !*/
  286.  
  287.  
  288. .playbutton { width:30px; height:30px; overflow:hidden; position:relative; margin-top:25px; margin-left:25px; z-index:9; opacity:.7; }
  289.  
  290. .albumart img { height:60px; width:60px; position:relative; margin-top:-65px; margin-left:0px; margin-left:10px; {block:ifGrayscale} -webkit-filter: grayscale(100%); {/block:ifGrayscale} -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }
  291.  
  292. .albumart img:hover { {block:ifGrayscale} -webkit-filter: grayscale(0%); {/block:ifGrayscale} -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }
  293.  
  294. .albumdetails { margin-top:-68px; text-align:;left; margin-left:75px; padding:5px; text-transform:uppercase; font-size:8px; letter-spacing:1px; }
  295.  
  296. .albumdetails lame { letter-spacing:1px; font-size:8px; line-height:70%; display:inline-block; text-transform:uppercase; color:{color:accent}; background-color:{color:posts}; margin-right:5px; font-weight:800; }
  297.  
  298.  
  299.  
  300. /*! CHAT STYLING ------------- !*/
  301.  
  302. .answer span,.convo li{margin:0 0 5px;border-radius:1em;padding:.5em 10px;max-width:75%;clear:both;position:relative}.answer .them,.user_1,.user_3,.user_5,.user_7,.user_9,.user_11{float:left;background:{color:container};color:{color:text};left:3px}.me::after,.user_1::after,.user_3::after,.user_5::after,.user_7::after,.user_9::after,.user_11::after{content:"";position:absolute;left:-.5em;bottom:0;width:.5em;height:1em;border-right:.5em solid transparent;border-bottom-right-radius:1em .5em}.answer .me,.user_2,.user_4,.user_6,.user_8,.user_10,.user_12{right:3px;float:right;background-color:{color:accent};color:#000}.them::after,.user_2::after,.user_4::after,.user_6::after,.user_8::after,.user_10::after,.user_12::after{content:"";position:absolute;right:-.5em;bottom:0;width:.5em;height:1em;border-left:.5em solid transparent;border-bottom-left-radius:1em .5em}.me p,.answer,.asked span{padding:0;margin:0}.answer{overflow:hidden}
  303.  
  304. .asked p {
  305. text-align: left;
  306. margin: 0 0px 10px 0px;
  307. padding: 0;
  308. color: #666666;
  309. font-family: 'Karla', sans-serif;
  310. font-size: 12px;
  311. line-height: 0px;
  312. }
  313. .footerright .viasrc {
  314. float: left;
  315. }
  316. .asked a {
  317. margin:0;padding:0;
  318. }
  319. .user_4{background-color:#55caff;color:#fff}.user_4::after{border-color:#55caff}.user_6{background-color:#60f246;color:#fff}.user_6::after{border-color:#60f246}.user_5{background-color:#9ff3fc;color:#000}.user_5::after{border-color:#9ff3fc}.user_3{background-color:#25c413;color:#fff}.user_3::after{border-color:#25c413}.user_7{background-color:#9b9b9b;color:#fff}.user_7::after{border-color:#9b9b9b}.user_8{background-color:#0d9321;color:#fff}.user_8::after{border-color:#0d9321}.user_9{background-color:#606060;color:#fff}.user_9::after{border-color:#606060}
  320. .convo {
  321. overflow: hidden;
  322. list-style-type: none;
  323. padding: 0;
  324. margin: 0;
  325. }
  326.  
  327.  
  328.  
  329. /*! TABS BASE CODE BY ALYOFRP. ------------- !*/
  330.  
  331.  
  332. .tabzcon { /* tablinks content aka the box under the tablinks */
  333. margin-left:345px;
  334. margin-top:-10px;
  335. position: absolute;
  336. width:390px;
  337. height:470px;
  338. background-color:{color:container};
  339. color:{color:text};
  340. z-index:999999; }
  341.  
  342.  
  343.  
  344.  
  345. .tabzclose { /* the close button, u prob dont need to touch this */
  346. position:absolute;
  347. text-transform:uppercase;
  348. font-weight:bold;
  349. font-size:10px;
  350. padding:0px;
  351. float:right;
  352. color:{color:links};
  353. top:20px;
  354. right:20px;
  355. height:20px;
  356. z-index:999999999999999999999;
  357. }
  358.  
  359.  
  360.  
  361. .tabzclose:hover { cursor:pointer; }
  362.  
  363.  
  364.  
  365. /*! NAVI8 ------------- !*/
  366.  
  367.  
  368. #tabnav{ position:absolute; width:450px; height:450px; overflow:hidden; margin:auto; left:0px; right:0px; bottom:0px; top:0px; overflow-x:hidden; background-color:transparent;
  369.  
  370. }
  371.  
  372.  
  373. #tabnav img { position:absolute; top:80px; left:175px; width:190px; height:310px; border-radius:0px; z-index: -1;}
  374.  
  375.  
  376. .titlebox { position:absolute; width:150px; height:55px; margin-top:75px; margin-left:65px; background-color:{color:text};z-index:9999999999999999999999;
  377.  
  378. }
  379.  
  380. .titletab { position:absolute; left:30px; top:78px; width:220px; height:60px; font-size:55px; padding-bottom:0px; padding-top:0px; padding-left:0px; padding-right:0px; text-align:center; color:{color:container}; font-family: 'Pirata One', cursive; line-height:45px; letter-spacing: -2px; z-index:999999999999999999999;}
  381.  
  382.  
  383. .navbox { width:170px; height:175px; margin-top:112px; margin-left:35px; background-color:transparent; background-color:{color:accent}; z-index:9999999999999999999999999999999999; }
  384.  
  385. .textab { position:absolute; width:135px; height:135px; top:135px; left:55px; text-align:justify; overflow:auto; color:{color:text}; z-index:9;
  386. }
  387.  
  388.  
  389. .tabinfo r { font-weight:900; color:{color:bold};}
  390.  
  391. .tablinks { position:absolute; width:150px; margin:auto; top:300px; left:25px; text-align:center;z-index:9; text-transform: uppercase; padding-left: 10px;}
  392.  
  393. .tablinks a { font-size:17px; margin-right:8px; padding-left: -5px; text-align:center;font-family: 'Fredoka One', cursive;}
  394.  
  395. .tablinks a:hover { color:{color:hover}; }
  396.  
  397. .tablinks li { margin-bottom:10px; margin-right:-5px; width:50px; float:left; list-style-type:none; text-align:center;}
  398.  
  399. /*! CREDIT ------------- !*/
  400.  
  401.  
  402. #credit a { left:10px; bottom:10px; position:fixed; background-color:transparent; color:{color:links}; padding-top:8px; padding-bottom:9px; padding-left:12px; padding-right:11px; border-radius:100%; font-size:16px; font-family: 'Playfair Display', serif; }
  403.  
  404.  
  405. {CustomCSS}
  406.  
  407.  
  408. </style>
  409. </head>
  410. <body>
  411.  
  412.  
  413. <div id="container">
  414.  
  415. <!--
  416.  
  417. *TABS BASE CODE BY ALYOFRP.
  418.  
  419. < tabs content >
  420. -->
  421.  
  422.  
  423.  
  424. <div id="TabzOne" class="tabzcon alytut" style="display:none">
  425.  
  426. <span onclick="this.parentElement.style.display='none'" class="tabzclose">
  427. CLOSE
  428. </span>
  429.  
  430.  
  431. <div id="tabnav">
  432. <div class="titlebox"></div>
  433. <div class="titletab">navigate</div>
  434. <div class="navbox">
  435. <div class="textab">{text:textab}</div>
  436. <img src="{image:tab}">
  437. <div class="tablinks">
  438. <li><a href="{text:tablink url}" title="{text:tablink}" >01</a></li>
  439. <li><a href="{text:tablink url 2}" title="{text:tablink 2}">02</a></li>
  440. <li><a href="{text:tablink url 3}" title="{text:tablink 3}">03</a></li>
  441. <li><a href="{text:tablink url 4}" title="{text:tablink 4}">04</a></li>
  442. <li><a href="{text:tablink url 5}" title="{text:tablink 5}">05</a></li>
  443. <li><a href="{text:tablink url 6}" title="{text:tablink 6}">06</a></li>
  444. <li><a href="{text:tablink url 7}" title="{text:tablink 7}">07</a></li>
  445. <li><a href="{text:tablink url 8}" title="{text:tablink 8}">08</a></li>
  446. <li><a href="{text:tablink url 9}" title="{text:tablink 9}">09</a></li>
  447. </div>
  448. </div>
  449.  
  450. </div>
  451. </div>
  452.  
  453. <div id="sideicon">
  454.  
  455. <img src="{image:sideicon}">
  456. {block:Ifsideimg} <img src="{image:topimg}">{/block:Ifsideimg}
  457.  
  458. </div>
  459.  
  460. <div id="sidebar">
  461. <div class="circle"><span class="th th-circle-o"></span></div>
  462. <div class="circleb"><span class="th th-circle-o"></span></div>
  463. <div class="circlec"><span class="th th-circle-o"></span></div>
  464. <div class="circled"><span class="th th-circle-o"></span></div>
  465.  
  466. <img src="{image:sidebar}">
  467. <div class="subtitle">{text:subtitle}</div>
  468. <div class="title">{text:title}</div>
  469. <div class="title">{text:title}</div>
  470. <div class="desc">{text:desc}</div>
  471.  
  472.  
  473. <div class="sidelinks">
  474. <a href="/" title="index"><span class="th th-circle"></span></a>
  475. <a href="/ask"title="inbox"><span class="th th-circle
  476. "></span></a>
  477. <a href="javascript:void(0)" class="tablink tabzact" onclick="openAlytut(event, 'TabzOne');" title="navigate"><span class="th th-circle"></span></a>
  478. <a href="{text:sidelink url}" title="{text:sidelink}"><span class="th th-circle"></a>
  479. </div>
  480.  
  481. <div class="pagination">
  482. {block:PreviousPage}
  483. <a href="{PreviousPage}" class="pagi">prev </a>{/block:PreviousPage}
  484. {block:NextPage} &nbsp;&nbsp;&nbsp; <a href="{NextPage}" class="pagi">next</a> {/block:NextPage} {/block:Pagination}
  485. </div>
  486.  
  487. </div>
  488.  
  489.  
  490. <div class="entries">
  491.  
  492. {block:posts}
  493.  
  494.  
  495. <div class="posts" id="{PostID}">
  496.  
  497.  
  498.  
  499. {block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}
  500.  
  501. {block:Photo}{LinkOpenTag}<img src="{PhotoURL-400}">{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  502.  
  503. {block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  504.  
  505. {block:More}<div class="more"><a href="{Permalink}" class="more-btn">read more</a></div>{/block:More}
  506.  
  507. {block:Photoset}{Photoset-400}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  508.  
  509. {block:Quote}<div id="q">{Quote}</div>{/block:Quote}{block:Source}
  510. <div class="source">— {Source}</div>
  511. {/block:Source}
  512.  
  513. {block:Audio}
  514. {block:AudioPlayer}
  515. <div class="playbutton">{AudioPlayerGrey}</div>{/block:AudioPlayer}
  516. {block:AlbumArt}<div class="albumart"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}
  517. <div class="albumdetails">
  518. {block:TrackName}<lame>song:</lame> {TrackName}{/block:TrackName}<br>
  519. {block:Artist}<lame>artist:</lame> {Artist}{/block:Artist}<br>
  520. {block:Album}<lame>album:</lame> {Album}{/block:Album}
  521. </div>
  522. {/block:AudioPlayer}
  523. {/block:Audio}
  524.  
  525. {block:Video}{Video-400}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  526.  
  527. {block:Chat}
  528. {block:Title}
  529. <h1>{Title}</h1>{/block:Title}<br>
  530. <ul class="convo">{block:Lines}<li class="line_{Alt} user_{UserNumber}">{block:Label}<span class="label"><strong>{Label}</strong></span>{/block:Label}
  531. {Line}</li>{/block:Lines}</ul>
  532. {/block:Chat}
  533. {block:Answer}<div id="question"><div id="asker">{Asker}:</div><br>{Question}</div><span></center><p><div id="answer">{Answer}</div>{/block:Answer}
  534.  
  535.  
  536. <div id="permalink">
  537. <a href="{Permalink}" title="{TimeAgo}">{ShortMonth} {DayOfMonth}</a> · {NoteCountWithLabel}
  538. <span style="float:right; margin-right:0px;"><a href="{ReblogURL}" title="reblog"><span class="th th-reload" style="font-size:8px; color:{color:accent};"></span></a></span></span>
  539.  
  540. <span style="float:right; margin-right:0px;margin-top:0px"><div class="sourcelink">{block:ContentSource}<a href="{SourceURL}"title="source"><span class="th th-push-pin-o" style="font-size:9px; color:{color:accent};">{/block:ContentSource}</span></a></span></span>
  541.  
  542. </div></div></div>
  543.  
  544.  
  545.  
  546. {block:HasTags}<div id="tags">{block:Tags}<span class="th th-hashtag"></span><a href="{TagURL}">{Tag}</a>&nbsp;&nbsp; {/block:Tags}</div>{/block:HasTags}
  547. {/block:Posts}
  548. {block:PostNotes}<div id="notes">{PostNotes}</div>{/block:PostNotes}
  549. {/block:Posts}
  550.  
  551.  
  552.  
  553. <div id="credit" data="credit"><a href="https://wildfluower.tumblr.com/" title="made by monny"><span class="th th-bubble-heart"></span></a></div>
  554.  
  555. </body>
  556.  
  557. <script>
  558. function openAlytut(evt, alytutName) {
  559. var i, x, tablinks;
  560. x = document.getElementsByClassName("alytut");
  561. for (i = 0; i < x.length; i++) {
  562. x[i].style.display = "none";
  563. }
  564. tablinks = document.getElementsByClassName("tablink");
  565. for (i = 0; i < x.length; i++) {
  566. tablinks[i].className = tablinks[i].className.replace(" tabzact", "");
  567. }
  568. document.getElementById(alytutName).style.display = "block";
  569. evt.currentTarget.className += " tabzact";
  570. }
  571. </script>
  572.  
  573. </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!