API tools faq
paste
codesbyally

heaven. ♡

codesbyally
Jul 11th, 2018
3,572
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 36.19 KB | None | 0 0
raw download clone embed print report
  1. <!---
  2.  
  3.  
  4.  
  5.  
  6. HEAVEN by ALLY
  7.  
  8. — don't steal anything from this code
  9. — don't remove the credit, it's very small, it won't hurt your aesthetic
  10. — don't redistribute or claim this theme as your own
  11.  
  12.  
  13.  
  14.  
  15. --->
  16.  
  17.  
  18.  
  19. <html><head>
  20.  
  21.  
  22.  
  23. <!------ meta tags & scripts ------>
  24.  
  25.  
  26.  
  27. <meta name="image:background" content=""/>
  28. <meta name="image:sidebar" content=""/>
  29. <meta name="image:sideimg" content=""/>
  30. <meta name="image:panel" content=""/>
  31. <meta name="image:pic1" content=""/>
  32.  
  33. <meta name="image:m1" content=""/>
  34. <meta name="image:m2" content=""/>
  35. <meta name="image:m3" content=""/>
  36. <meta name="image:m4" content=""/>
  37. <meta name="image:m5" content=""/>
  38. <meta name="image:m6" content=""/>
  39. <meta name="image:m7" content=""/>
  40. <meta name="image:m8" content=""/>
  41. <meta name="image:m9" content=""/>
  42. <meta name="image:m10" content=""/>
  43. <meta name="image:m11" content=""/>
  44. <meta name="image:m12" content=""/>
  45. <meta name="image:m13" content=""/>
  46. <meta name="image:m14" content=""/>
  47. <meta name="image:m15" content=""/>
  48. <meta name="image:m16" content=""/>
  49. <meta name="image:m17" content=""/>
  50. <meta name="image:m18" content=""/>
  51. <meta name="image:m19" content=""/>
  52. <meta name="image:m20" content=""/>
  53. <meta name="image:m21" content=""/>
  54. <meta name="image:m22" content=""/>
  55. <meta name="image:m23" content=""/>
  56. <meta name="image:m24" content=""/>
  57. <meta name="text:m1" content="/"/>
  58. <meta name="text:m2" content="/"/>
  59. <meta name="text:m3" content="/"/>
  60. <meta name="text:m4" content="/"/>
  61. <meta name="text:m5" content="/"/>
  62. <meta name="text:m6" content="/"/>
  63. <meta name="text:m7" content="/"/>
  64. <meta name="text:m8" content="/"/>
  65. <meta name="text:m9" content="/"/>
  66. <meta name="text:m10" content="/"/>
  67. <meta name="text:m11" content="/"/>
  68. <meta name="text:m12" content="/"/>
  69. <meta name="text:m13" content="/"/>
  70. <meta name="text:m14" content="/"/>
  71. <meta name="text:m15" content="/"/>
  72. <meta name="text:m16" content="/"/>
  73. <meta name="text:m17" content="/"/>
  74. <meta name="text:m18" content="/"/>
  75. <meta name="text:m19" content="/"/>
  76. <meta name="text:m20" content="/"/>
  77. <meta name="text:m21" content="/"/>
  78. <meta name="text:m22" content="/"/>
  79. <meta name="text:m23" content="/"/>
  80. <meta name="text:m24" content="/"/>
  81. <meta name="text:m5name" content="first last"/>
  82. <meta name="text:m6name" content="first last"/>
  83. <meta name="text:m7name" content="first last"/>
  84. <meta name="text:m8name" content="first last"/>
  85. <meta name="text:m9name" content="first last"/>
  86. <meta name="text:m10name" content="first last"/>
  87. <meta name="text:m11name" content="first last"/>
  88. <meta name="text:m12name" content="first last"/>
  89. <meta name="text:m13name" content="first last"/>
  90. <meta name="text:m14name" content="first last"/>
  91. <meta name="text:m15name" content="first last"/>
  92. <meta name="text:m16name" content="first last"/>
  93. <meta name="text:m17name" content="first last"/>
  94. <meta name="text:m18name" content="first last"/>
  95. <meta name="text:m19name" content="first last"/>
  96. <meta name="text:m20name" content="first last"/>
  97. <meta name="text:m21name" content="first last"/>
  98. <meta name="text:m22name" content="first last"/>
  99. <meta name="text:m23name" content="first last"/>
  100. <meta name="text:m24name" content="first last"/>
  101. <meta name="text:m1name" content="first last"/>
  102. <meta name="text:m2name" content="first last"/>
  103. <meta name="text:m3name" content="first last"/>
  104. <meta name="text:m4name" content="first last"/>
  105. <meta name="text:m5name" content="first last"/>
  106. <meta name="text:m6name" content="first last"/>
  107. <meta name="text:m7name" content="first last"/>
  108. <meta name="text:m8name" content="first last"/>
  109. <meta name="text:m9name" content="first last"/>
  110. <meta name="text:m10name" content="first last"/>
  111. <meta name="text:m11name" content="first last"/>
  112. <meta name="text:m12name" content="first last"/>
  113. <meta name="text:m13name" content="first last"/>
  114. <meta name="text:m14name" content="first last"/>
  115. <meta name="text:m15name" content="first last"/>
  116. <meta name="text:m16name" content="first last"/>
  117. <meta name="text:m17name" content="first last"/>
  118. <meta name="text:m18name" content="first last"/>
  119. <meta name="text:m19name" content="first last"/>
  120. <meta name="text:m20name" content="first last"/>
  121. <meta name="text:m21name" content="first last"/>
  122. <meta name="text:m22name" content="first last"/>
  123. <meta name="text:m23name" content="first last"/>
  124. <meta name="text:m24name" content="first last"/>
  125.  
  126. <meta name="color:background" content="#eaeaea"/>
  127. <meta name="color:contain" content="#f8f8f8"/>
  128. <meta name="color:sidebar" content="#f8f8f8"/>
  129. <meta name="color:postbg" content="#eaeaea"/>
  130. <meta name="color:title" content="#e2cd90"/>
  131. <meta name="color:desc" content="#898989"/>
  132. <meta name="color:descbg" content="#eaeaea"/>
  133. <meta name="color:sidelinkbg" content="#eaeaea"/>
  134. <meta name="color:bold" content="#d4caa2"/>
  135. <meta name="color:italic" content="#d4a587"/>
  136. <meta name="color:text" content="#a8a8a8"/>
  137. <meta name="color:links" content="#d4caa2"/>
  138. <meta name="color:hover" content="#f3f3f3"/>
  139.  
  140. <meta name="text:title" content="call me insane"/>
  141. <meta name="text:tabbox" content="the texture on the panel is set as soft light, so any gray & white texture will work as a cute overlay pattern!"/>
  142. <meta name="text:cursive" content="heaven"/>
  143. <meta name="text:tabtitle" content="isn't as beautiful as you"/>
  144. <meta name="text:cursive2" content="so what"/>
  145. <meta name="text:tabtitle2" content="if i'm fucked up, fallen in love?"/>
  146. <meta name="text:footer" content="click each image for character tag/info!"/>
  147.  
  148. <meta name="text:tablink1" content="/"/>
  149. <meta name="text:tablink2" content="/"/>
  150. <meta name="text:tablink3" content="/"/>
  151. <meta name="text:tablink4" content="/"/>
  152. <meta name="text:tablink5" content="/"/>
  153. <meta name="text:tablink6" content="/"/>
  154. <meta name="text:tablink7" content="/"/>
  155. <meta name="text:tablink1title" content="tab link 1"/>
  156. <meta name="text:tablink2title" content="tab link 2"/>
  157. <meta name="text:tablink3title" content="tab link 3"/>
  158. <meta name="text:tablink4title" content="tab link 4"/>
  159. <meta name="text:tablink5title" content="tab link 5"/>
  160. <meta name="text:tablink6title" content="tab link 6"/>
  161. <meta name="text:tablink7title" content="tab link 7"/>
  162.  
  163.  
  164.  
  165. <link rel="shortcut icon" href="{Favicon}" />
  166. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  167. <title>{Title}</title>
  168. {block:Description}<meta name="description" content="{MetaDescription}" /> {/block:Description}
  169.  
  170.  
  171. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  172. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  173.  
  174. <script>
  175. (function($){
  176. $(document).ready(function() {
  177. $("a[title]").style_my_tooltips({
  178. tip_follows_cursor:false,
  179. tip_delay_time:90,
  180. tip_fade_speed:600,
  181. attribute:"title"
  182. });
  183. });
  184. })(jQuery);
  185. </script>
  186.  
  187.  
  188. <script>
  189. $(document).ready(function() {
  190. //
  191. $('a.poplight[href^=#]').click(function() {
  192. var popID = $(this).attr('rel'); //Get Popup Name
  193. var popURL = $(this).attr('href'); //Get Popup href to define size
  194. var query= popURL.split('?');
  195. var dim= query[1].split('&');
  196. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  197. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend();
  198. $('body').append('<div id="fade"></div>');
  199. $('#fade').css({'filter' : 'alpha(opacity=30)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=30)'})
  200. return false;
  201. });
  202.  
  203. $('a.close, #fade').live('click', function() {
  204. $('#fade, .popup_block').fadeOut(function() {
  205. $('#fade, a.close').remove(); //fade them both out
  206. });
  207. return false;
  208. });
  209. });
  210. </script>
  211.  
  212.  
  213. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  214.  
  215.  
  216.  
  217.  
  218. <script>
  219. function openCity(evt, cityName) {
  220. var i, tabcontent, tablinks;
  221. tabcontent = document.getElementsByClassName("tabcontent");
  222. for (i = 0; i < tabcontent.length; i++) {
  223. tabcontent[i].style.display = "none";
  224. }
  225. tablinks = document.getElementsByClassName("tablinks");
  226. for (i = 0; i < tablinks.length; i++) {
  227. tablinks[i].className = tablinks[i].className.replace(" active", "");
  228. }
  229. document.getElementById(cityName).style.display = "block";
  230. evt.currentTarget.className += " active";
  231. }
  232. </script>
  233.  
  234. <script type="text/javascript">
  235. $(document).ready(function(){
  236.  
  237. $('ul.tabs li').click(function(){
  238. var tab_id = $(this).attr('data-tab');
  239.  
  240. $('ul.tabs li').removeClass('current');
  241. $('.tab-content').removeClass('current');
  242.  
  243. $(this).addClass('current');
  244. $("#"+tab_id).addClass('current');
  245. })
  246.  
  247. })
  248. </script>
  249.  
  250. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  251. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  252.  
  253. <script>
  254. (function($){
  255. $(document).ready(function(){
  256. $(“[title],a[title],img[title]”).style_my_tooltips({
  257. tip_follows_cursor:true,
  258. tip_delay_time:90,
  259. tip_fade_speed:600,
  260. attribute:“title”
  261. });
  262. });
  263. })(jQuery);
  264. </script>
  265.  
  266. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  267.  
  268. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  269.  
  270. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  271.  
  272. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
  273.  
  274. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
  275.  
  276. <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  277.  
  278. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  279.  
  280. <link rel="stylesheet" href="https://static.tumblr.com/i5s2zks/6kOohwlux/pe-icon-7-stroke.css">
  281.  
  282. <link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900" rel="stylesheet">
  283.  
  284.  
  285.  
  286.  
  287.  
  288. <style type="text/css">
  289.  
  290.  
  291.  
  292. /* ------ fonts ------ */
  293.  
  294.  
  295. @font-face { font-family: ally; src: url('https://dl.dropboxusercontent.com/s/17sjbqt7xfnor93/Paduka%20Script%20free.ttf') ; }
  296.  
  297.  
  298. @font-face { font-family: "shopping"; src: url('https://dl.dropboxusercontent.com/s/zruy1iywnp9fa5q/Shopping%20Script%20Demo.ttf') ;}
  299.  
  300.  
  301.  
  302. /* ------ scrollbar ------ */
  303.  
  304.  
  305.  
  306. ::-webkit-scrollbar { width: 0px; height:0px; background:transparent; }
  307.  
  308. ::-webkit-scrollbar-thumb { background-color: transparent; }
  309.  
  310.  
  311.  
  312. /* ------ tooltip ------ */
  313.  
  314.  
  315.  
  316. #s-m-t-tooltip { max-width:250px; padding:4px; margin:-30px 12px; color:{color:text}; background: rgba(255,255,255,.5); z-index:99999; font-size:7px; border-radius:4px; text-transform:uppercase; font-variant:none; letter-spacing:2px; font-weight:bold; }
  317.  
  318.  
  319.  
  320. /* ------ selection ------ */
  321.  
  322.  
  323.  
  324. ::-moz-selection { background:{color:links}; color:{color:linksbg}; }
  325.  
  326. ::selection { background:{color:links}; color:{color:linksbg}; }
  327.  
  328.  
  329.  
  330. /* ------ popup ------ */
  331.  
  332.  
  333.  
  334. #fade { display: none; background: #ddd; position: fixed; margin:auto; top:0px; bottom:0px; left: 0; top: 0; width: 100%; height: 100%; opacity: .4; z-index: 999; }
  335.  
  336. .popup_block { display: none; background:url('{image:panel}'); padding: 20px; height:200px; width:200px; border-radius:8px; font-size: 12px; position: absolute; margin:auto; top:0px; left:0px; bottom:0px; right:0px; z-index: 99999999999999999999999999999999; }
  337.  
  338. .popup_block a { color:{color:links}; }
  339.  
  340.  
  341. img.btn_close { float: right; margin: 5px 5px 0 0; }
  342.  
  343.  
  344. *html #fade { position: absolute; }
  345.  
  346.  
  347. *html .popup_block { position: absolute; }
  348.  
  349.  
  350. /* ------ text styles ------ */
  351.  
  352.  
  353.  
  354. body { background:{color:background}; margin:0px; font-weight:500; color:{color:text}; font-family:'montserrat'; font-size:10px; line-height:16px; letter-spacing:.5px; text-align:justify; background-image:url('{image:Background}'); }
  355.  
  356. a { text-decoration:none; color:{color:links}; -moz-transition-duration:0.3s; -webkit-transition-duration:0.3s; -o-transition-duration:0.3s; }
  357.  
  358. a:hover { color:{color:text}; -moz-transition-duration:0.3s; -webkit-transition-duration:0.3s; -o-transition-duration:0.3s; }
  359.  
  360. b, strong { color:{color:bold}; font-weight:700; }
  361.  
  362. em, i { color:{color:italic}; font-weight:600; }
  363.  
  364. strike { color:{color:title}; }
  365.  
  366. small { font-size:10px; }
  367.  
  368. big { color:{color:title}; font-weight:600; font-variant:small-caps; letter-spacing:2px; }
  369.  
  370. sup { font-variant:small-caps; letter-spacing:2px; color:{color:bold}; font-weight:normal; }
  371.  
  372. blockquote { margin-left:5px; padding-left:10px; width:365px; border-left:1px solid {color:background}; }
  373.  
  374. blockquote blockquote { padding-left:10px; width:345px; border-left:1px solid {color:background}; }
  375.  
  376. h1 { color:{color:bold}; font-size:8px; letter-spacing:2px; text-transform:uppercase;font-family:'montserrat'; font-style:none; line-height:10px; text-align:left; padding:0px; }
  377.  
  378. h2 { text-align: center; font-size:11px; letter-spacing:.5px; text-transform:lowercase; font-style:none; font-weight:400; line-height:14px; text-align:normal; padding:0px; }
  379.  
  380. h3 { font-family:'montserrat'; font-size:24px; text-align:center; text-transform:lowercase; font-weight:400; letter-spacing:0px; margin-top:5px; color:{color:italic}; }
  381.  
  382.  
  383.  
  384. /* ------ images ------ */
  385.  
  386.  
  387.  
  388. img { border:none; max-width:100%; height:auto; border-radius:6px; -webkit-filter:grayscale(100%); -moz-transition-duration:1s; -webkit-transition-duration:1s; -o-transition-duration:1s; }
  389.  
  390. img:hover { -webkit-filter:grayscale(0%); -moz-transition-duration:1s; -webkit-transition-duration:1s; -o-transition-duration:1s; }
  391.  
  392. resize { width: 300px; height:auto; }
  393.  
  394. #posts img { -webkit-filter:grayscale(100%); -moz-transition-duration:1s; -webkit-transition-duration:1s; -o-transition-duration:1s; }
  395.  
  396. .photoset { width:100%; border-radius:6px; -webkit-filter:grayscale(100%); -moz-transition-duration:1s; -webkit-transition-duration:1s; -o-transition-duration:1s; }
  397.  
  398. #posts img:hover { -webkit-filter:grayscale(0%); -moz-transition-duration:1s; -webkit-transition-duration:1s; -o-transition-duration:1s; }
  399.  
  400. .photoset:hover { max-width:100%; -webkit-filter:grayscale(0%); -moz-transition-duration:1s; -webkit-transition-duration:1s; -o-transition-duration:1s; }
  401.  
  402.  
  403.  
  404. /* ------ body ------ */
  405.  
  406.  
  407.  
  408. #contain { width:860px; height:560px; margin:auto; left:0px; right:0px; top:0px; bottom:0px; background:{color:contain}; position:absolute; overflow:auto; border-radius:6px; z-index:1; background-image:url('{image:contain}'); }
  409.  
  410. #entries { padding:10px; width:500px; height:550px; margin-left:340px; margin-top:-10px; font-size:10px; position:absolute; font-family:'montserrat'; overflow-x:hidden; overflow-y:auto; letter-spacing:0px; }
  411.  
  412. #post { margin:auto; top:-22px; right:0px; bottom:0px; left:0px; width:400px; background: {color:postbg}; padding:20px; position:relative; border-radius:6px; margin-top:40px; }
  413.  
  414.  
  415.  
  416. /* ------ sidebar ------ */
  417.  
  418.  
  419.  
  420. #sidebar { background:{color:sidebar}; width:340px; height:560px; position:absolute; overflow:hidden; left:0px; top:0px; }
  421.  
  422. .texture { -webkit-transform:rotate(-10deg); width:200px; height:600px; margin:-10px 0px 0px -100px; position:absolute; background-image:url('{image:texture}'); z-index:99; }
  423.  
  424. #sidebar img { width:340px; height:560px; border-radius:0px; position:absolute; background:transparent; -webkit-filter:grayscale(0%); -moz-transition-duration:1s; -webkit-transition-duration:1s; -o-transition-duration:1s; }
  425.  
  426. .title { position:absolute; color:{color:title}; font-family:'montserrat'; font-size:30px; width:244px;font-weight:700; height:80px; padding:20px; padding-top:30px; margin-left:30px; margin-top:0px; line-height:20px; overflow:hidden; text-align:center;letter-spacing:8px; z-index:999; text-transform:uppercase; }
  427.  
  428. .title strong { font-family:'ally'; font-size:80px; font-weight:400; color:{color:italic};text-transform:lowercase;letter-spacing:0px;text-shadow:none; }
  429.  
  430. .desc { background:{color:descbg}; font-weight:400; position:absolute; width:220px; line-height:20px; height:120px; margin:324px 0px 0px 0px; overflow:hidden; font-size:7.5px; color:{color:desc}; padding:60px; text-transform:uppercase; padding-top:56px; font-family:'montserrat'; letter-spacing:1px; text-align:justify; z-index:99; -moz-transition-duration:1s; -webkit-transition-duration:1s; -o-transition-duration:1s; }
  431.  
  432. .desc i { color:{color:italic}; font-weight:400; }
  433.  
  434. .desc a { font-size:12px; font-weight:bold; }
  435.  
  436. .desc b { font-size:8px; }
  437.  
  438. .desc h3 { font-family:'ally'; font-size:20px; text-align:center; text-transform:lowercase; font-weight:400; letter-spacing:0px; font-variant:none; margin-top:5px; margin-bottom:8px; color:{color:title}; text-shadow:3px 3px 3px {color:shadow}; }
  439.  
  440. .sidelink { text-align:center; border-radius:6px; height:18px; width:237px; margin:245px 0px 0px 20px; position:absolute; padding:17px; letter-spacing:0px; padding-right:0px; overflow:hidden; z-index:999999; }
  441.  
  442. .sidelink a { position:relative; height:10px; width:10px; background:{color:sidelinkbg}; vertical-align: middle; margin:0px 0px 0px 10px; padding:10px; font-size:16px; line-height:10px; border-radius:50%; font-family:'arial'; font-weight:bold; letter-spacing:0px; color:{color:links}; display:inline; }
  443.  
  444. .sidelink i { color:{color:links}; font-weight:600; }
  445.  
  446.  
  447.  
  448. /* ------ pagination ------ */
  449.  
  450.  
  451. #pagination { width:430px; position:relative; height:14px; padding:3px; padding-top:5px; margin:auto; bottom:25px; left:0px; word-spacing:20px; text-align:center; color:{color:text}; z-index:9999999999999; }
  452.  
  453. #pagination a { padding:5px; background:{color:postbg}; color:{color:text}; font-weight:bold; letter-spacing:5px; font-size:7px; border-radius:6px; }
  454.  
  455.  
  456.  
  457. /* ------ info / tags ------ */
  458.  
  459.  
  460.  
  461. #info { background:{color:links}; width:auto; text-align:center; font-family:'trebuchet ms'; margin-top:8px; letter-spacing:1px; font-size:12px; font-style:none; padding:7px; line-height:10px; text-transform:uppercase; color:#6d6d6d; border-radius:6px; }
  462.  
  463. #info i { padding-right:20px; padding-left:20px; text-align:center; color:#fff; -moz-transition-duration:0.3s; -webkit-transition-duration:0.3s; -o-transition-duration:0.3s; }
  464.  
  465. #info i:hover { -moz-transition-duration:0.3s; -webkit-transition-duration:0.3s; -o-transition-duration:0.3s; color:{color:text}; }
  466.  
  467. #tags { padding: 5px; color:{color:text}; text-transform: none; font-style:none; font-size: 7px; text-align: center; letter-spacing: 1px; }
  468.  
  469. #tags i { color:{color:text}; }
  470.  
  471. #tags a { color: {color:italic}; }
  472.  
  473. #tags a:hover { color: {color:text}; }
  474.  
  475. #notes { width:275px; }
  476.  
  477.  
  478.  
  479. /* ------ questions ------ */
  480.  
  481.  
  482.  
  483. #question { border-radius:10px 10px 0px 0px; color:{color:contain}; padding:14px; font-family:'montserrat'; font-size:10px; font-weight:500; letter-spacing:.5px; text-align:center; margin-top:0px; text-transform:normal; line-height:16px; background-color:{color:text}; }
  484.  
  485. #asker { font-size:12px; color:{color:bold}; padding:5px; background:{color:contain}; width:auto; text-align:right; text-transform:uppercase; border-radius:0px 0px 10px 10px; }
  486.  
  487. #asker a { color:{color:bold}; }
  488.  
  489. #asker b { color:{color:bold}; }
  490.  
  491. #asker i { color:{color:bold}; }
  492.  
  493.  
  494.  
  495. /* ------ music player ------ */
  496.  
  497.  
  498.  
  499. .audio { width:400px; padding-bottom:10px; background-color:{color:border}; }
  500.  
  501. .audioinfo { background:{color:contain}; width:298px; height:40px; text-align:center; margin-left:70px; padding:16px; color:{color:text}; text-transform:lowercase; border-radius:0px 10px 10px 0px; }
  502.  
  503. .audioinfo b, strong, i, em { color:{color:title}; }
  504.  
  505. .audioinfo h1 { text-align:center; font-size:20px; letter-spacing:0px; height:0px; font-weight:800; margin-top:10px; font-variant:none; text-transform:lowercase; color:{color:fl}; font-family:'montserrat';
  506. }
  507.  
  508. .playerborderer { height:50px; width:50px; padding:15px; background:transparent; position:absolute;
  509. }
  510.  
  511. .player { margin-top:-13px; margin-left:-13px; position:relative; text-align:center; width:6px; height:10px; overflow:hidden; padding:20px; background:transparent; opacity:.5; }
  512.  
  513. .cover { border-radius:10px 0px 0px 10px; height:60px; width:60px; margin-right:10px; margin-top:0px; border:6px solid #ddd; }
  514.  
  515.  
  516.  
  517.  
  518. /* ------ quote source ------ */
  519.  
  520.  
  521.  
  522. .qsource { text-align:center; }
  523.  
  524. .qsource i, em { color:{color:text}; }
  525.  
  526.  
  527.  
  528. /* ------ huney ------ */
  529.  
  530.  
  531.  
  532. #huney { position: absolute; color: white; background: {color:bold}; padding: 6px; width: 16px; border-radius: 50px; text-align: center; font-size: 12px; bottom: 10px; left: 10px; display: block; position: fixed; }
  533.  
  534. #huney a { color:#fff; }
  535.  
  536.  
  537.  
  538. /* ------ tab coding ------ */
  539.  
  540.  
  541.  
  542. ul.tab { position:absolute; overflow:hidden; list-style-type: none; margin: 0; padding: 0; background-color: transparent; right:5px; top:5px; z-index:999999999; }
  543.  
  544. ul.tab li { width: 20px; float:left; margin-left:2px; }
  545.  
  546. ul.tab li a{ display:inline-block; color:{color:text}; font-size:11px; width:11px; height:11px; padding:3px; border-radius:100px; }
  547.  
  548. ul.tab li i{ color:{color:text}; }
  549.  
  550. .close { position:absolute; top:35px; right:37px; font-weight:600; color:#666; z-index:9999999; background:rgba(255,255,255,.5); padding: 16px; width: 16px; border-radius: 50px; font-size:11px;text-align:center; -moz-transition-duration:0.3s; -webkit-transition-duration:0.3s; -o-transition-duration:0.3s; }
  551. .close:hover { cursor: pointer; color:{color:bold}; -moz-transition-duration:0.3s; -webkit-transition-duration:0.3s; -o-transition-duration:0.3s; }
  552.  
  553. .tabcontent { overflow:hidden; display: none; height:375; width:360px; padding:0px; margin-left:292px; margin-top:0px; background-color:transparent; z-index:9999; -webkit-animation: fadeEffect 1s; animation: fadeEffect 1s; }
  554.  
  555. .tabcontent.current{ display: inherit; -webkit-animation: fadeEffect 1s; animation: fadeEffect 1s; }
  556.  
  557. @-webkit-keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} }
  558.  
  559. @keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} }
  560.  
  561.  
  562.  
  563.  
  564. /* ------ navtab cosmetics ------ */
  565.  
  566.  
  567.  
  568.  
  569. #navtab { position:absolute; right:0px; bottom:0px; width: 520px; padding-top:20px; height:540px; background-color:{color:contain}; overflow:hidden; background-image:url('{image:contain}'); }
  570.  
  571. #navtab i,em { color:{coloritalic}; }
  572.  
  573. #navtab h3 { background:{color:accent}; color:white; text-shadow:1px 1px 2px #bbb9b4; border-radius:50%; width:10px; height:10px; line-height:10px; padding:10px; text-align:center; display:inline-block; font-size:8px;margin:0px 10px 0px 0px; text-transform:uppercase; }
  574.  
  575. #navtab h4 { background:{color:accent2}; color:#b7b6ac; border-radius:50%; width:10px; height:10px; line-height:10px; padding:10px; text-align:center; display:inline-block; font-size:8px;margin:0px 10px 0px 0px; text-transform:uppercase; }
  576.  
  577.  
  578.  
  579. /* ------ navtab cosmetics 2.0 ------ */
  580.  
  581.  
  582.  
  583. .panel { height:180px; width:570px; margin:-90px 0px 0px 0px; background:{color:title}; -webkit-transform:rotate(18deg); position:absolute; background-image:url('{image:panel}'); z-index:-2; background-blend-mode: soft-light; }
  584.  
  585. .tabbox { padding:40px 45px 40px 40px; background:{color:descbg}; border-radius:6px; position:absolute; text-align:justify; height:200px; width:90px; margin:120px 0px 0px 30px; font-variant:none; text-transform:uppercase; letter-spacing:1px; line-height:20px; font-size:7.5px; overflow:scroll; }
  586.  
  587. .tabnav { position:absolute; text-align:center; padding:0px; width:400px; height:50px; margin:445px 0px 0px 55px; border-radius:8px; font-variant:small-caps; letter-spacing:1px; font-size:9px; }
  588.  
  589. .tabnav a { background:{color:descbg}; color:{color:italic}; border-radius:50%; width:10px; height:10px; line-height:10px; padding:16px; text-align:center; display:inline-block; font-size:10px;margin:5px; text-transform:uppercase; -moz-transition-duration:0.3s; -webkit-transition-duration:0.3s; -o-transition-duration:0.3s; }
  590.  
  591. .tabnav a:hover { background:{color:italic}; color:#fff; -moz-transition-duration:0.3s; -webkit-transition-duration:0.3s; -o-transition-duration:0.3s; }
  592.  
  593. .bottom { font-family:'ally'; font-size:60px; color:{color:bold}; margin:-25px 0px 0px 360px; position:absolute; }
  594.  
  595.  
  596.  
  597. /* ------ muse tab cosmetics ------ */
  598.  
  599.  
  600.  
  601.  
  602. #musetab { position:absolute; right:0px; bottom:0px; width: 520px; padding-top:20px; height:540px; background-color:{color:contain}; overflow:hidden; background-image:url('{image:contain}'); }
  603.  
  604. #musetab strong { display:inline-block; background:{color:accent}; padding:5px; border-radius:6px; width:58px; text-align:center; color:white; text-shadow:1px 1px 2px #bbb9b4; margin-bottom:5px; }
  605.  
  606. #musetab big { display:inline-block; background:{color:accent2}; padding:5px; border-radius:6px; width:58px; text-align:center; font-weight:700;font-size:8px; color:{color:text}; margin-bottom:5px; }
  607.  
  608. #musetab b { display:inline-block; background:#f8f8f8; padding:4px; border-radius:6px; width:125px; text-align:center; font-size:8px; color:#999; margin-bottom:5px; text-transform:uppercase; font-variant:none; font-weight:600; }
  609.  
  610. #musetab h3 { background:{color:accent}; color:white; text-shadow:1px 1px 2px #bbb9b4; border-radius:50%; width:10px; height:10px; line-height:10px; padding:10px; text-align:center; display:inline-block; font-size:8px;margin:0px 10px 0px 0px; text-transform:uppercase; }
  611.  
  612. #musetab h4 { background:{color:accent2}; color:#b7b6ac; border-radius:50%; width:10px; height:10px; line-height:10px; padding:10px; text-align:center; display:inline-block; font-size:8px;margin:0px 10px 0px 0px; text-transform:uppercase; }
  613.  
  614.  
  615.  
  616. /* ------ musetab cosmetics 2.0 ------ */
  617.  
  618.  
  619.  
  620. .panel { height:180px; width:570px; margin:-90px 0px 0px 0px; background:{color:title}; -webkit-transform:rotate(18deg); position:absolute; background-image:url('{image:panel}'); z-index:-2; }
  621.  
  622. .musebox { margin:100px 0px 0px 20px; position:absolute; width:400px; padding:40px; height:230px; background:#f5f5f5; display:inline; overflow-x:hidden; overflow-y:scroll; border-radius:6px; }
  623.  
  624. .musebox h1 { text-align:left; letter-spacing:4px; color:{color:text}; padding:10px 0px 10px 0px; }
  625.  
  626. .musebox img { width:60px; height:60px; border-radius:6px; margin:1px; -webkit-filter:grayscale(0%); -moz-transition-duration:1s; -webkit-transition-duration:1s; -o-transition-duration:1s; background:black; }
  627.  
  628. .musebox img:hover { -webkit-filter:grayscale(100%); border-radius:50%; -moz-transition-duration:1s; -webkit-transition-duration:1s; -o-transition-duration:1s; }
  629.  
  630. .tabtitle { position:absolute; margin:50px 0px 0px 60px; line-height:22px; font-variant:small-caps; text-transform:lowercase; font-size:10.7px; letter-spacing:4px; }
  631.  
  632. .cursive { position:absolute; margin:35px 0px 0px 40px; font-family:'ally'; font-size:80px; color:{color:italic}; font-variant:none; text-transform:lowercase; }
  633.  
  634. .footer { position:absolute; text-align:center; text-transform:lowercase; font-variant:small-caps; width:300px; height:40px; padding:10px; margin:440px 0px 0px 90px; font-size:11px; letter-spacing:5px; }
  635.  
  636.  
  637.  
  638. /* ------ end of css coding ------ */
  639.  
  640.  
  641.  
  642. {CustomCSS}</style></head><body>
  643.  
  644.  
  645.  
  646. <!------ begin html coding ------>
  647.  
  648.  
  649.  
  650. <div id="contain">
  651.  
  652. <div id="sidebar">
  653. <img src="{image:sideimg}" style="border-radius:50%; width:120px; height:120px; position:absolute; margin:103px 0px 0px 100px; z-index:99999999999999999;">
  654. <div class="texture"></div>
  655.  
  656. <div class="sidelink">
  657. <a href="/" title="refresh"><i class="pe-7s-refresh-2"></i></a>
  658. <a href="/ask" title="message"><i class="pe-7s-comment"></i></a>
  659. <a href="#" class="tablinks" onclick="openCity(event, 'navtab')"><i class="pe-7s-menu"></i></a>
  660. <a href="#" class="tablinks" onclick="openCity(event, 'musetab')"><i class="pe-7s-user"></i></a>
  661. </div>
  662.  
  663. <img src="{image:sidebar}">
  664. <div class="title">{text:title}</div>
  665. <div class="desc">{Description}</div>
  666. </div>
  667.  
  668.  
  669.  
  670. <!------ navigation tab ------>
  671.  
  672.  
  673.  
  674. <div id="navtab" class="tabcontent">
  675. <span onclick="this.parentElement.style.display='none'" class="close"> x </span>
  676.  
  677. <div class="panel"></div> <!------ header panel ------>
  678.  
  679. <div class="cursive">
  680. {text:cursive}
  681. </div>
  682. <div class="tabtitle">
  683. {text:tabtitle}
  684. </div>
  685.  
  686. <div class="tabbox">
  687. {text:tabbox}
  688. </div>
  689.  
  690. <img src="{image:pic1}" style="border-radius:6px; width:260px; height:300px; margin:110px 0px 0px 230px; position:absolute; background:black;-webkit-filter:grayscale(1000%);">
  691.  
  692.  
  693. <div class="tabnav">
  694. <a href="{text:tablink1}" title="{text:tablink1title}">a</a>
  695. <a href="{text:tablink2}" title="{text:tablink2title}">b</a>
  696. <a href="{text:tablink3}" title="{text:tablink3title}">c</a>
  697. <a href="{text:tablink4}" title="{text:tablink4title}">d</a>
  698. <a href="{text:tablink5}" title="{text:tablink5title}">e</a>
  699. <a href="{text:tablink6}" title="{text:tablink6title}">f</a>
  700. <a href="{text:tablink7}" title="{text:tablink7title}">g</a>
  701. </div>
  702.  
  703. </div>
  704.  
  705.  
  706.  
  707. <!------ muse tab ------>
  708.  
  709.  
  710.  
  711. <div id="musetab" class="tabcontent">
  712. <span onclick="this.parentElement.style.display='none'" class="close"> x </span>
  713.  
  714. <div class="panel"></div> <!------ header panel ------>
  715.  
  716. <div class="cursive">
  717. {text:cursive2}
  718. </div>
  719. <div class="tabtitle">
  720. {text:tabtitle2}
  721. </div>
  722.  
  723. <div class="musebox">
  724. <h1>primary...</h1>
  725. <a href="{text:m1}"><img src="{image:m1}" title="{text:m1name}"></a>
  726. <a href="{text:m2}"><img src="{image:m2}" title="{text:m2name}"></a>
  727. <a href="{text:m3}"><img src="{image:m3}" title="{text:m3name}"></a>
  728. <a href="{text:m4}"><img src="{image:m4}" title="{text:m4name}"></a>
  729. <a href="{text:m5}"><img src="{image:m5}" title="{text:m5name}"></a>
  730. <a href="{text:m6}"><img src="{image:m6}" title="{text:m6name}"></a><br>
  731. <a href="{text:m7}"><img src="{image:m7}" title="{text:m7name}"></a>
  732. <a href="{text:m8}"><img src="{image:m8}" title="{text:m8name}"></a>
  733. <a href="{text:m9}"><img src="{image:m9}" title="{text:m9name}"></a>
  734. <a href="{text:m10}"><img src="{image:m10}" title="{text:m10name}"></a>
  735. <a href="{text:m11}"><img src="{image:m11}" title="{text:m11name}"></a>
  736. <a href="{text:m12}"><img src="{image:m12}" title="{text:m12name}"></a>
  737. <h1>secondary...</h1>
  738. <a href="{text:m13}"><img src="{image:m13}" title="{text:m13name}"></a>
  739. <a href="{text:m14}"><img src="{image:m14}" title="{text:m14name}"></a>
  740. <a href="{text:m15}"><img src="{image:m15}" title="{text:m15name}"></a>
  741. <a href="{text:m16}"><img src="{image:m16}" title="{text:m16name}"></a>
  742. <a href="{text:m17}"><img src="{image:m17}" title="{text:m17name}"></a>
  743. <a href="{text:m18}"><img src="{image:m18}" title="{text:m18name}"></a><br>
  744. <a href="{text:m19}"><img src="{image:m19}" title="{text:m19name}"></a>
  745. <a href="{text:m20}"><img src="{image:m20}" title="{text:m20name}"></a>
  746. <a href="{text:m21}"><img src="{image:m21}" title="{text:m21name}"></a>
  747. <a href="{text:m22}"><img src="{image:m22}" title="{text:m22name}"></a>
  748. <a href="{text:m23}"><img src="{image:m23}" title="{text:m23name}"></a>
  749. <a href="{text:m24}"><img src="{image:m24}" title="{text:m24name}"></a>
  750. </div>
  751.  
  752. <div class="footer">
  753. {text:footer}
  754. </div>
  755.  
  756. </div>
  757.  
  758.  
  759.  
  760. <div id="entries">
  761. {block:posts}
  762. <!-- {block:NoRebloggedFrom}
  763. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  764. {/block:NoRebloggedFrom} -->
  765. {block:ContentSource}<!-- {SourceURL}
  766. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{Sourcetitle}" />{/block:SourceLogo}
  767. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  768. {/block:ContentSource}
  769. <div id="post">
  770.  
  771. {block:Text}
  772. {block:title}<h3>{title}</h3>{/block:title}
  773. {Body}{/block:Text}
  774.  
  775. {block:Photo}<center><img src="{PhotoURL-400}"/></center>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  776.  
  777. {block:Photoset}<center>{Photoset}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  778.  
  779. {block:Quote}<h2>{Quote}</h2><br>
  780. {block:Source}<div class="qsource"> — {Source}</div>
  781. {/block:Source}{/block:Quote}
  782.  
  783. {block:Link}<h3><a href="{URL}" {Target}>{Name}</a></h3>{block:Description}{Description}{/block:Description}{/block:Link}
  784.  
  785. {block:Chat}{block:title}<h3>{title}</h3>{/block:title}<br>{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}{/block:Chat}
  786.  
  787. {block:Audio}{block:AlbumArt}<img src="{AlbumArtURL}" align="left" class="cover" />{/block:AlbumArt}<div class="playerborderer"><div class="player">{block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}</div></div><div class="audioinfo">{block:TrackName}<h1>{TrackName}</h1>{/block:TrackName}{block:Artist}— {Artist} —{/block:Artist}</div>{/block:Audio}<br>
  788.  
  789. {block:Video}<div class="video">{Video-400}</div>{block:Caption}{Caption}{/block:Caption}{/block:Video}
  790.  
  791. {block:Answer}<div id="question">{Question}</div><div id="asker"><b><i>{Asker}</i></b><br></div>{Answer}{/block:Answer}
  792.  
  793. <div id="info">
  794. <a href="{Permalink}" title="{TimeAgo}"><i class="pe-7s-clock"></i></a>
  795. <a href="{Permalink}" title="{NoteCountWithLabel}"><i class="pe-7s-note"></i></a>
  796. {block:RebloggedFrom}
  797. <a href="{ReblogParentURL}" title="via"><i class="pe-7s-back"></i></a>
  798. {/block:RebloggedFrom}
  799. {block:ContentSource}
  800. <a href="{SourceURL}" title="src"><i class="pe-7s-link"></i></a>
  801. {/block:ContentSource}
  802. <a href="{ReblogURL}" target="_blank" class="details" title="reblog"><i class="pe-7s-refresh"></i></a></div>
  803. {block:HasTags}<div id="tags">
  804.  
  805. {block:Tags}<i class="pe-7s-ticket"></i> <a href="/tagged/{Tag}">{Tag}</a>&nbsp;&nbsp;{/block:Tags}
  806. </div>{block:HasTags}
  807. </div>
  808. {/block:Posts}
  809. <br><br>{block:PostNotes}<div id="notes"><left>{PostNotes}</div>{/block:PostNotes}
  810. {/block:Posts}
  811.  
  812. <div id="pagination">{block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">BACK</a>{/block:PreviousPage} {block:NextPage}<a href="{NextPage}">NEXT</a><br />{/block:NextPage}{/block:Pagination}</div>
  813.  
  814. </div></div>
  815. </div>
  816.  
  817. <div id="huney"><a href="https://redjamies.tumblr.com" title="code by ally">♡</a></div>
  818. </div>
  819.  
  820.  
  821.  
  822. <!-- begin scripts ————— DO NOT DELETE! -->
  823.  
  824.  
  825.  
  826. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  827. <script>
  828. $(document).ready(function(){
  829. $('.video iframe').each(function(){
  830. var scale = $(this).parents('.video').width() / 400;
  831. $(this).attr({
  832. width: Math.floor($(this).attr('width') * scale),
  833. height: Math.floor($(this).attr('height') * scale)
  834. });
  835. });
  836. });
  837. </script>
  838.  
  839. <!-- TABS/ALL-INN-ONE SCRIPTS DO NOT REMOVE!!! -->
  840.  
  841. <script>
  842. $(document).ready(function() {
  843. $('.tabs .tab-links a').on('click', function(e) {
  844. var currentAttrValue = $(this).attr('href');
  845.  
  846. // Show/Hide Tabs
  847. $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
  848.  
  849. // Change/remove current tab to active
  850. $(this).parent('li').addClass('active').siblings().removeClass('active');
  851.  
  852. e.preventDefault();
  853. });
  854. });
  855. </script>
  856.  
  857. <script>
  858. $(document).ready(function() {
  859. $('#filterOptions li a').click(function() {
  860. // fetch the class of the clicked item
  861. var ourClass = $(this).attr('class');
  862.  
  863. // reset the active class on all the buttons
  864. $('#filterOptions li').removeClass('active');
  865. // update the active state on our clicked button
  866. $(this).parent().addClass('active');
  867.  
  868. if(ourClass == 'all') {
  869. // show all our items
  870. $('#ourHolder').children('div.item').show();
  871. }
  872. else {
  873. // hide all elements that don't share ourClass
  874. $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
  875. // show all elements that do share ourClass
  876. $('#ourHolder').children('div.' + ourClass).show();
  877. }
  878. return false;
  879. });
  880. });
  881. </script>
  882.  
  883. </body></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!