API tools faq
paste
Advertisement
monniy

07 / ELECTRIC HEARTS (side link free)

monniy
Jul 4th, 2020
1,120
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.79 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.  
  4. TRACK 7 / ELECTRIC HEART
  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: Montserrat,
  21. Fredoka One, Sophia Christie, Anaheim
  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="color:background" content="#ffffff"/>
  36. <meta name="color:text" content="#000000"/>
  37. <meta name="color:title" content="#666666"/>
  38. <meta name="color:bold" content="#000000"/>
  39. <meta name="color:italic" content="#000000"/>
  40. <meta name="color:links" content="#666666"/>
  41. <meta name="color:hover" content="#c6c6c6"/>
  42. <meta name="color:borders" content="#d7d7d7"/>
  43. <meta name="color:posts" content="#eaeaea"/>
  44. <meta name="color:container" content="#c6c6c6"/>
  45. <meta name="color:accent" content="#737373"/>
  46. <meta name="color:sidebar" content="#ffffff"/>
  47.  
  48. <meta name="image:background" content=""/>
  49. <meta name="image:sidebar" content="https://via.placeholder.com/170x345"/>
  50. <meta name="image:tab" content="https://via.placeholder.com/365x120"/>
  51.  
  52. <meta name="text:title" content="title">
  53. <meta name="text:subtitle" content="subtitle">
  54. <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.">
  55. <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.">
  56.  
  57.  
  58.  
  59. <meta name="text:sidelink" content="link">
  60. <meta name="text:sidelink url" content="/">
  61.  
  62.  
  63.  
  64. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  65. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  66. <script>
  67. (function($){
  68. $(document).ready(function() {
  69. $("a[title]").style_my_tooltips({
  70. tip_follows_cursor:false,
  71. tip_delay_time:90,
  72. tip_fade_speed:600,
  73. attribute:"title"
  74. });
  75. });
  76. })(jQuery);
  77. </script>
  78.  
  79.  
  80.  
  81. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  82.  
  83. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  84.  
  85. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  86.  
  87. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  88.  
  89.  
  90. <link href="https://fonts.googleapis.com/css?family=ABeeZee|Karla" rel="stylesheet">
  91. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  92. <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
  93. <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap" rel="stylesheet">
  94. <link href="https://fonts.googleapis.com/css2?family=Anaheim&display=swap" rel="stylesheet">
  95. <link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@800&display=swap" rel="stylesheet">
  96.  
  97. <style type="text/css">
  98.  
  99. .iframe-controls--desktop {
  100. position:fixed;
  101. top:0px;
  102. right:0px;
  103. color-filer:{links};
  104. z-index:214748364789123456789;
  105. filter: invert;(100%);
  106. -webkit-filter:invert(100%);
  107. -webkit-transform:scale(0.6,0.6);
  108. -webkit-transform-origin: 100% 0%;
  109. -ms-transform-origin:100% 0%;
  110. -ms-transform:scale(0.6,0.6);
  111. transform:scale(0.6,0.6);
  112. transform-origin:100% 0%;
  113.  
  114. }
  115.  
  116. @font-face { font-family:'sophiashristie'; src: url('https://dl.dropboxusercontent.com/s/ufcnphbknkcditi/SophiaChristie.ttf'); }
  117.  
  118.  
  119. @keyframes fadein {
  120. from { opacity:0; }
  121. to { opacity:1; }
  122. }
  123.  
  124. @-moz-keyframes fadein {
  125. from { opacity:0; }
  126. to { opacity:1; }
  127. }
  128.  
  129. @-webkit-keyframes fadein {
  130. from { opacity:0; }
  131. to { opacity:1; }
  132. }
  133.  
  134. @-ms-keyframes fadein {
  135. from { opacity:0; }
  136. to { opacity:1; }
  137. }
  138.  
  139. @-o-keyframes fadein {
  140. from { opacity:0; }
  141. to { opacity:1; }
  142. }
  143.  
  144. /*! SCROLLBAR & TOOLTIP ------------- */
  145.  
  146.  
  147. ::-webkit-scrollbar { width:5px; background: transparent; }
  148.  
  149. ::-webkit-scrollbar-thumb { background-color:transparent; }
  150.  
  151. #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; }
  152.  
  153.  
  154. /*! BODY ------------- !*/
  155.  
  156.  
  157. body { background-color:{color:background}; color:{color:text}; font-family: 'Anaheim', sans-serif; font-size:10px; letter-spacing:1px; line-height:20px; background-image:url('{image:background}'); background-size:auto; overflow:hidden; }
  158.  
  159. h1 { text-align:center; font-size:30px; font-weight:500; line-height:35px; font-family: 'Montserrat', cursive; color:{color:italic};font-weight: 400; text-transform:uppercase; }
  160.  
  161. h2 { text-align:center; text-transform:uppercase; color:{color:accent}; font-family: 'Montserrat', cursive; }
  162.  
  163. 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; }
  164.  
  165. 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; }
  166.  
  167. blockquote { border-left:1px solid {color:borders}; margin-left:10px; padding-left:20px; width:90%; }
  168.  
  169. blockquote blockquote { border-left:1px solid {color:borders}; margin-left:5px; }
  170.  
  171. small, sup, sub { font-size:9px; }
  172.  
  173. b, strong { font-weight:900; color:{color:bold}; }
  174.  
  175. i, em { color:{color:italic}; font-size:9.5px; }
  176.  
  177.  
  178. /*! HOLDER ------------- !*/
  179.  
  180.  
  181. #container { position:absolute; margin:auto; left:0px; right:0px; top:0px; bottom:0px; width:760px; height:450px; background-color:{color:container}; overflow:visible; padding:10px; border-radius:3px }
  182.  
  183. #containbar { position:absolute; margin:auto; left:0px; right:0px; top:340px; bottom:-15px; width:760px; height:95px; background-color:{color:accent}; overflow:visible; padding:10px; border-radius:0px }
  184.  
  185. #boxpag { position:absolute; margin:auto; right:0px; top:45px; width:75px; height:50px; background-color:{color:accent}; z-index:9;}
  186.  
  187.  
  188. /*! SIDEBAR ------------- !*/
  189.  
  190.  
  191. #sidebar { position:absolute; top:0px; right:10px; z-index:9; width:330px; height:470px; overflow:hidden; background-color:{color:transparent}; }
  192.  
  193.  
  194. #sidebar img { position:absolute; top:10px; right:160px; width:170px; height:345px; z-index:9; border-radius:0px; }
  195.  
  196.  
  197. .title { position:absolute; right:-10px; bottom:0px; width:350px; font-size:42px; padding-bottom:10px; text-align:center; color:{color:title};font-family: 'Montserrat', sans-serif; text-transform: uppercase; line-height:120%;}
  198.  
  199. .subtitle { position:absolute; left:0px; bottom:40px; width:350px; font-size:35px; padding-bottom:10px; text-align:center; color:{color:text}; font-family:'sophiashristie'; z-index:9;}
  200.  
  201. .desc { position:absolute; width:145px; height:160px; top:185px; right:20px; text-align:justify; overflow:auto; color:{color:text}; padding-left:10px; padding-right:10px; z-index:9;}
  202.  
  203. .sidelinks { position:absolute; width:280px; top:260px; right:-260px; text-align:left;z-index:999; }
  204.  
  205. .sidelinks a { font-size:13px; margin-right:10px; font-weight: 900;}
  206.  
  207.  
  208. .pagination { position:absolute; margin-top:50px; width:350px; padding-right:10px; text-align:center; transform:rotate(0deg); font-family: 'Fredoka One', cursive; margin-left:130px;}
  209.  
  210. .pagination a { color:{color:links}; letter-spacing:1px; text-align:center; font-size:11px;text-transform: uppercase; }
  211.  
  212. .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; }
  213.  
  214.  
  215.  
  216. /*! DOT PATTERN ------------- !*/
  217.  
  218. #patterndot { position:absolute; top:-50px; right:-30px; width:200px; height:200px; padding:13px; {color:text}; }
  219.  
  220. .dot { position:absolute; height:80px; width:240px; top:50px; right:50px; font-size:9px; }
  221.  
  222. .dot li { width:20px; height:20px; margin-right:3px; list-style:none; float:left; text-align:center; font-size:9px; color:{color:text}; }
  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; right:340px; left:10px; 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; border:1px solid {color:borders}; border-bottom-right-radius:0px; border-bottom-left-radius:0px;}
  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 { width:367px; text-align:left; text-transform:uppercase; font-size:9px; padding-top:10px; padding-bottom:10px; padding-left:10px; padding-right:10px; margin-top:20px; margin; -18px; margin-bottom:-10px; margin-left:-20px; background-color:transparent; color:{color:text}; border-top:1px solid {color:borders}; }
  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:368px; margin-top:-45px; margin-left:17px; margin-bottom:40; letter-spacing:1px; font-size:9px; text-align:center; line-height:16px; padding-top:10px; padding-bottom:10px; padding-left:10px; padding-right:10px; background:{color:posts}; border:1px solid {color:borders};border-top:0px solid {color:borders}; text-transform:uppercase; border-bottom-right-radius:3px; border-bottom-left-radius:3px;}
  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 Alternates', sans-serif; }
  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:container}; border: 1px solid ; border-color:{color:borders}; margin-top:20px; }
  274.  
  275. #asker { padding-top:15px ; padding-bottom:10px; width:auto; background-color:{color:container}; font-size:12px; text-align:left; margin-left:-26px; margin-top:-10px; z-index:9999999999; font-family: 'Montserrat', cursive; text-transform:uppercase; margin-right:-16px; padding-left:20px; border: 1px solid {color:borders};}
  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. #iconask{ position:absolute; font-size:15px; border: 1px solid {color:borders}; padding:10px; background-color:{color:container}; margin-top:10px; margin-left:265px; color:{color:accent}; border-radius: 0px; }
  281.  
  282. #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; }
  283.  
  284. #answer { margin-top:20px; }
  285.  
  286.  
  287. /*! AUDIO STYLING ------------- !*/
  288.  
  289.  
  290. .playbutton { width:30px; height:30px; overflow:hidden; position:relative; margin-top:25px; margin-left:25px; z-index:9; opacity:.7; }
  291.  
  292. .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; }
  293.  
  294. .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; }
  295.  
  296. .albumdetails { margin-top:-68px; text-align:;left; margin-left:75px; padding:5px; text-transform:uppercase; font-size:8px; letter-spacing:1px; }
  297.  
  298. .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; }
  299.  
  300.  
  301.  
  302. /*! CHAT STYLING ------------- !*/
  303.  
  304. .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}
  305.  
  306. .asked p {
  307. text-align: left;
  308. margin: 0 0px 10px 0px;
  309. padding: 0;
  310. color: #666666;
  311. font-family: 'Karla', sans-serif;
  312. font-size: 12px;
  313. line-height: 0px;
  314. }
  315. .footerright .viasrc {
  316. float: left;
  317. }
  318. .asked a {
  319. margin:0;padding:0;
  320. }
  321. .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}
  322. .convo {
  323. overflow: hidden;
  324. list-style-type: none;
  325. padding: 0;
  326. margin: 0;
  327. }
  328.  
  329.  
  330.  
  331. /*! TABS BASE CODE BY ALYOFRP. ------------- !*/
  332.  
  333.  
  334. .tabzcon { /* tablinks content aka the box under the tablinks */
  335. margin-left:-10px;
  336. margin-top:-10px;
  337. position: absolute;
  338. width:420px;
  339. height:470px;
  340. background-color:{color:container};
  341. color:{color:text};
  342. z-index:999999;
  343. -webkit-animation: fadein 0.5s;
  344. -moz-animation: fadein 0.5s;
  345. -o-animation: fadein 0.5s;
  346. animation: fadein 0.5s; }
  347.  
  348. .tabzbar { position:absolute; margin:auto; left:0px; right:0px; top:340px; bottom:-15px; width:420px; height:95px; background-color:{color:accent}; overflow:visible; padding:10px; border-radius:0px }
  349.  
  350.  
  351.  
  352. .tabzclose { /* the close button, u prob dont need to touch this */
  353. position:absolute;
  354. text-transform:uppercase;
  355. font-weight:bold;
  356. font-size:10px;
  357. text-align:center;
  358. padding:0px;
  359. float:center;
  360. color:{color:links};
  361. margin:auto;
  362. top:20px;
  363. left:200px;
  364. height:20px;
  365. z-index:999999999999999999999;
  366. }
  367.  
  368.  
  369.  
  370. .tabzclose:hover { cursor:pointer; }
  371.  
  372.  
  373.  
  374. /*! NAVI8 ------------- !*/
  375.  
  376.  
  377. #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;}
  378.  
  379. .navbox { width:366px; height:80px; margin-top:360px; margin-left:35px; background-color:transparent; background-color:{color:posts}; z-index:9999999999999999999999999999999999; border: 1px solid {color:borders}; }
  380.  
  381. #tabnav img { position:absolute; top:45px; left:35px; width:365px; height:120px; border-radius:0px; z-index: -1;}
  382.  
  383.  
  384.  
  385. .textab { position:absolute; width:330px; height:65px; top:370px; left:55px; text-align:justify; overflow:auto; color:{color:text}; z-index:9;
  386. }
  387.  
  388. .tabinfo r { font-weight:900; color:{color:bold};}
  389.  
  390. .tablinks { position:absolute; width:365px; margin:auto; top:190px; left:60px; text-align:center;z-index:9; text-transform: uppercase; padding-left: 10px;}
  391.  
  392. .tablinks a { font-size:17px; margin-right:8px; padding-left: -8px; text-align:center;font-family: 'Fredoka One', cursive;}
  393.  
  394. .tablinks a:hover { color:{color:hover}; }
  395.  
  396. .tablinks li { margin-bottom:10px; margin-right:10px; width:55px; float:left; padding-top:20px; padding-bottom:20px; padding-left:8px; padding-right:0px; list-style-type:none; text-align:center; background-color:{color:posts}; border-radius:0px; border: 1px solid {color:borders}; }
  397.  
  398.  
  399. /*! MUSE ------------- !*/
  400.  
  401. #tabnavb { position:absolute; width:450px; height:450px; overflow:hidden; margin:auto; left:0px; right:0px; bottom:0px; top:0px; overflow-x:hidden; background-color:transparent; }
  402.  
  403. .musetab { width:390px; height:380px; margin-top:50px; margin-left:35px; overflow:auto;}
  404.  
  405. .musetab li { margin-bottom:10px; margin-right:10px; width:55px; float:left; padding-top:0px; padding-bottom:0px; padding-left:8px; padding-right:0px; list-style-type:none; text-align:center; }
  406.  
  407. .musetab img { border-radius:5px; width:60px; height:60px; border:1px solid {color:borders}; }
  408.  
  409.  
  410. /*! CREDIT ------------- !*/
  411.  
  412.  
  413. #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; }
  414.  
  415.  
  416. {CustomCSS}
  417.  
  418.  
  419. </style>
  420. </head>
  421. <body>
  422.  
  423.  
  424. <div id="container">
  425. <div id="containbar"></div>
  426. <div id="boxpag"></div>
  427.  
  428.  
  429. <div id="patterndot">
  430. <div class="dot">
  431. <li>•</li>
  432. <li>•</li>
  433. <li>•</li>
  434. <li>•</li>
  435. <li>•</li>
  436. <li>•</li>
  437. <li>•</li>
  438. <li>•</li>
  439. <li>•</li>
  440. <li>•</li>
  441.  
  442. <li>•</li>
  443. <li>•</li>
  444. <li>•</li>
  445. <li>•</li>
  446. <li>•</li>
  447. <li>•</li>
  448. <li>•</li>
  449. <li>•</li>
  450. <li>•</li>
  451. <li>•</li>
  452.  
  453. <li>•</li>
  454. <li>•</li>
  455. <li>•</li>
  456. <li>•</li>
  457. <li>•</li>
  458. <li>•</li>
  459. <li>•</li>
  460. <li>•</li>
  461. <li>•</li>
  462. <li>•</li>
  463.  
  464. <li>•</li>
  465. <li>•</li>
  466. <li>•</li>
  467. <li>•</li>
  468. <li>•</li>
  469. <li>•</li>
  470. <li>•</li>
  471. <li>•</li>
  472. <li>•</li>
  473. <li>•</li>
  474.  
  475. <li>•</li>
  476. <li>•</li>
  477. <li>•</li>
  478. <li>•</li>
  479. <li>•</li>
  480. <li>•</li>
  481. <li>•</li>
  482. <li>•</li>
  483. <li>•</li>
  484. <li>•</li>
  485.  
  486. <li>•</li>
  487. <li>•</li>
  488. <li>•</li>
  489. <li>•</li>
  490. <li>•</li>
  491. <li>•</li>
  492. <li>•</li>
  493. <li>•</li>
  494. <li>•</li>
  495. <li>•</li>
  496. </div>
  497. </div>
  498. <!--
  499.  
  500. *TABS BASE CODE BY ALYOFRP.
  501.  
  502. < tabs content >
  503. -->
  504.  
  505.  
  506.  
  507. <div id="TabzOne" class="tabzcon alytut" style="display:none">
  508.  
  509. <span onclick="this.parentElement.style.display='none'" class="tabzclose">
  510. CLOSE TAB
  511. </span>
  512.  
  513. <div class="tabzbar"></div>
  514.  
  515.  
  516. <div id="tabnav">
  517. <div class="navbox">
  518. <div class="textab">{text:textab}</div>
  519. <img src="{image:tab}">
  520. <div class="tablinks">
  521. <li><a href="{text:tablink url}" title="{text:tablink}" >01</a></li>
  522. <li><a href="{text:tablink url 2}" title="{text:tablink 2}">02</a></li>
  523. <li><a href="{text:tablink url 3}" title="{text:tablink 3}">03</a></li>
  524. <li><a href="{text:tablink url 4}" title="{text:tablink 4}">04</a></li>
  525. <li><a href="{text:tablink url 5}" title="{text:tablink 5}">05</a></li>
  526. <li><a href="{text:tablink url 6}" title="{text:tablink 6}">06</a></li>
  527. <li><a href="{text:tablink url 7}" title="{text:tablink 7}">07</a></li>
  528. <li><a href="{text:tablink url 8}" title="{text:tablink 8}">08</a></li>
  529. </div>
  530. </div>
  531.  
  532. </div>
  533. </div>
  534.  
  535.  
  536.  
  537. <div id="sidebar">
  538.  
  539. <img src="{image:sidebar}">
  540. <div class="subtitle">{text:subtitle}</div>
  541. <div class="title">{text:title}</div>
  542. <div class="title">{text:title}</div>
  543. <div class="desc">{text:desc}</div>
  544.  
  545.  
  546. <div class="sidelinks">
  547. <a href="/" title="index"><span class="th th-circle-o"></span></a><br>
  548. <a href="/ask"title="inbox"><span class="th th-circle-o"></span></a><br>
  549. <a href="javascript:void(0)" class="tablink tabzact" onclick="openAlytut(event, 'TabzOne');" title="navigate"><span class="th th-circle-o"></span></a><br>
  550. <a href="{text:sidelink url}" title="{text:sidelink}"><span class="th th-circle-o"></a>
  551. </div>
  552.  
  553.  
  554. <div class="pagination">
  555. {block:PreviousPage}
  556. <a href="{PreviousPage}" class="pagi">prev</a>{/block:PreviousPage}<br>
  557. {block:NextPage}<a href="{NextPage}" class="pagi">next</a> {/block:NextPage} {/block:Pagination}
  558. </div>
  559.  
  560.  
  561. </div>
  562.  
  563.  
  564. <div class="entries">
  565.  
  566. {block:posts}
  567.  
  568.  
  569. <div class="posts" id="{PostID}">
  570.  
  571.  
  572.  
  573. {block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}
  574.  
  575. {block:Photo}{LinkOpenTag}<img src="{PhotoURL-400}">{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  576.  
  577. {block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  578.  
  579. {block:More}<div class="more"><a href="{Permalink}" class="more-btn">read more</a></div>{/block:More}
  580.  
  581. {block:Photoset}{Photoset-400}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  582.  
  583. {block:Quote}<div id="q">{Quote}</div>{/block:Quote}{block:Source}
  584. <div class="source">— {Source}</div>
  585. {/block:Source}
  586.  
  587. {block:Audio}
  588. {block:AudioPlayer}
  589. <div class="playbutton">{AudioPlayerGrey}</div>{/block:AudioPlayer}
  590. {block:AlbumArt}<div class="albumart"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}
  591. <div class="albumdetails">
  592. {block:TrackName}<lame>song:</lame> {TrackName}{/block:TrackName}<br>
  593. {block:Artist}<lame>artist:</lame> {Artist}{/block:Artist}<br>
  594. {block:Album}<lame>album:</lame> {Album}{/block:Album}
  595. </div>
  596. {/block:AudioPlayer}
  597. {/block:Audio}
  598.  
  599. {block:Video}{Video-400}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  600.  
  601. {block:Chat}
  602. {block:Title}
  603. <h1>{Title}</h1>{/block:Title}<br>
  604. <ul class="convo">{block:Lines}<li class="line_{Alt} user_{UserNumber}">{block:Label}<span class="label"><strong>{Label}</strong></span>{/block:Label}
  605. {Line}</li>{/block:Lines}</ul>
  606. {/block:Chat}
  607. {block:Answer}<div id="question"><div id="iconask"><span class="th th-chat-bubble-o" ></span></div><div id="asker">{Asker}</div><br>{Question}</div><span></center><p><div id="answer">{Answer}</div>{/block:Answer}
  608.  
  609. <div id="permalink">
  610. <a href="{Permalink}" title="{TimeAgo}">{ShortMonth} {DayOfMonth}</a> · {NoteCountWithLabel}
  611. <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>
  612.  
  613. <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>
  614.  
  615. </div></div></div>
  616.  
  617.  
  618.  
  619. {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}
  620. {/block:Posts}
  621. {block:PostNotes}<div id="notes">{PostNotes}</div>{/block:PostNotes}
  622. {/block:Posts}
  623.  
  624.  
  625. <div id="credit" data="credit"><a href="https://wildfluower.tumblr.com/" title="made by monny"><span class="th th-bubble-heart"></span></a></div>
  626.  
  627. </body>
  628.  
  629. <script>
  630. function openAlytut(evt, alytutName) {
  631. var i, x, tablinks;
  632. x = document.getElementsByClassName("alytut");
  633. for (i = 0; i < x.length; i++) {
  634. x[i].style.display = "none";
  635. }
  636. tablinks = document.getElementsByClassName("tablink");
  637. for (i = 0; i < x.length; i++) {
  638. tablinks[i].className = tablinks[i].className.replace(" tabzact", "");
  639. }
  640. document.getElementById(alytutName).style.display = "block";
  641. evt.currentTarget.className += " tabzact";
  642. }
  643. </script>
  644.  
  645. </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!