SHARE
TWEET

♡ ; theme six.

ultraviclets Sep 18th, 2019 (edited) 661 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!--                        
  2.                             TERMS & CONDITIONS
  3.                            
  4.                         01. DO NOT steal or recreate
  5.                         02. DO NOT use as a base code
  6.                         03. DO NOT edit or remove credit
  7. -->
  8.  
  9. <head>
  10.  
  11. <title>{Title}</title>
  12. <link rel="shortcut icon" href="{Favicon}">
  13. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  14. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  15.  
  16. <meta name="color:background" content="#e7e7e7"/>
  17. <meta name="color:text" content="#000000"/>
  18. <meta name="color:links" content="#675970"/>
  19. <meta name="color:hover" content="#c6c6c6"/>
  20. <meta name="color:desc" content="#000000"/>
  21. <meta name="color:borders" content="#ededed"/>
  22. <meta name="color:posts" content="#fefefe"/>
  23. <meta name="color:container" content="#fbfbfb"/>
  24. <meta name="color:page accent" content="#bcc0d4"/>
  25. <meta name="color:accent" content="#9ba1bb"/>
  26.  
  27. <meta name="if:grayscale" content="1"/>
  28.  
  29. <meta name="image:background" content=""/>
  30. <meta name="image:sidebar" content="https://via.placeholder.com/130x320"/>
  31. <meta name="image:tab" content="https://via.placeholder.com/140x250"/>
  32. <meta name="image:insta" content="https://via.placeholder.com/250"/>
  33. <meta name="image:insta 2" content="https://via.placeholder.com/250"/>
  34. <meta name="image:album" content="https://via.placeholder.com/200"/>
  35. <meta name="image:icon" content="https://via.placeholder.com/40"/>
  36.  
  37. <meta name="text:title" content="title">
  38. <meta name="text:subtitle" content="subtitle">
  39. <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.">
  40. <meta name="text:username" content="username">
  41. <meta name="text:caption" content="this can not be longer than two lines, okay?">
  42. <meta name="text:song" content="song name">
  43. <meta name="text:artist" content="artist">
  44. <meta name="text:name" content="first last">
  45. <meta name="text:tweet" content="i wouldn't make this longer than four lines. blah, blah, blah, blah, blah, blah, blah, blah, blah, blah.">
  46.  
  47. <meta name="text:sidelink" content="link">
  48. <meta name="text:sidelink url" content="/">
  49. <meta name="text:sidelink 2" content="link">
  50. <meta name="text:sidelink 2 url" content="/">
  51.  
  52. <meta name="text:tablink" content="link">
  53. <meta name="text:tablink url" content="/">
  54. <meta name="text:tablink 2" content="link">
  55. <meta name="text:tablink 2 url" content="/">
  56. <meta name="text:tablink 3" content="link">
  57. <meta name="text:tablink 3 url" content="/">
  58. <meta name="text:tablink 4" content="link">
  59. <meta name="text:tablink 4 url" content="/">
  60. <meta name="text:tablink 5" content="link">
  61. <meta name="text:tablink 5 url" content="/">
  62. <meta name="text:tablink 6" content="link">
  63. <meta name="text:tablink 6 url" content="/">
  64.  
  65.  
  66. <script>
  67.  
  68. $(document).ready(function(){
  69.    $(“ul#tab li”).click(function(e){
  70.        if (!$(this).hasClass(“active”)) {
  71.            var tabNum = $(this).index();
  72.            var nthChild = tabNum+1;
  73.            $(“ul#tab li.active”).removeClass(“active”);
  74.            $(this).addClass(“active”);
  75.            $(“ul#tab li.active”).removeClass(“active”);
  76.            $(“ul#tab li:nth-child(”+nthChild+“)”).addClass(“active”);
  77.        }
  78.    });
  79. });
  80.  
  81. </script>
  82.  
  83. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  84. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  85. <script>
  86. (function($){
  87. $(document).ready(function() {
  88. $("a[title]").style_my_tooltips({
  89. tip_follows_cursor:false,
  90. tip_delay_time:90,
  91. tip_fade_speed:600,
  92. attribute:"title"
  93. });
  94. });
  95. })(jQuery);
  96. </script>
  97.  
  98. <script>
  99. $(document).ready(function() {
  100. //
  101. $('a.poplight[href^=#]').click(function() {
  102. var popID = $(this).attr('rel'); //Get Popup Name
  103. var popURL = $(this).attr('href'); //Get Popup href to define size
  104. var query= popURL.split('?');
  105. var dim= query[1].split('&');
  106. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  107. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  108. var popMargTop = ($('#' + popID).height() + 80) / 2;
  109. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  110. //Apply Margin to Popup
  111. $('#' + popID).css({
  112. 'margin-top' : -popMargTop,
  113. 'margin-left' : -popMargLeft
  114. });
  115. $('body').append('<div id="fade"></div>');
  116. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  117. return false;
  118. });
  119. $('a.close, #fade').live('click', function() {
  120. $('#fade, .popup_block').fadeOut(function() {
  121. $('#fade, a.close').remove(); //fade them both out
  122. });
  123. return false;
  124. });
  125. });
  126. </script>
  127.  
  128. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  129.  
  130. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  131.  
  132. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  133.  
  134. <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">
  135.  
  136. <link href="https://fonts.googleapis.com/css?family=ABeeZee" rel="stylesheet">
  137.  
  138. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  139.  
  140. <style type="text/css">
  141.  
  142. @font-face{ font-family:"robold"; src: url('https://dl.dropboxusercontent.com/s/qynix3bz0j8ppva/Roboto-BoldCondensed.ttf’)'); }
  143.  
  144. @font-face { font-family: "perfume"; src: url('https://dl.dropboxusercontent.com/s/yoy9ttxh19a0yly/Perfume-Classic-Demo-Version.otf') ;}
  145.  
  146.  
  147.                         /* SCROLLBAR & TOOLTIP */
  148.  
  149.  
  150. ::-webkit-scrollbar { display:none; width:7px; height:11px; background:{color:scrollbar}; }
  151.  
  152. #s-m-t-tooltip { width:auto; padding-left:6px; padding-right:5px; border-radius:3px; margin:20px 15px; color:{color:background}; background-color:{color:accent}; z-index:999999999999999; text-transform:uppercase; font-weight:700; letter-spacing:2px; font-size:8px; font-family:'robold'; }
  153.  
  154.  
  155.                                 /* BODY */
  156.  
  157.  
  158. body { background-image:url('{image:background}'); background-attachment:fixed; background-color:{color:background}; color:{color:text}; font-family:'ABeeZee'; font-size:9px; line-height:17px; letter-spacing:1px; }
  159.  
  160. 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; }
  161.  
  162. 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; }
  163.  
  164. blockquote { border-left:1px solid {color:borders}; margin-left:10px; padding-left:10px; width:90%; }
  165.  
  166. blockquote blockquote { border-left:1px solid {color:borders}; margin-left:5px; }
  167.  
  168. h1 { letter-spacing:1px; text-align:center; font-family:'montserrat'; font-weight:900; font-size:30px; line-height:30px; text-transform:uppercase; color:{color:posts}; text-shadow: 3px 3px {color:accent}; -webkit-text-stroke: 1px {color:accent}; }
  169.  
  170. pre { text-align:center; background-color:{color:borders}; color:{color:accent}; border-radius:20px; font-size:8px; font-style:italic; font-family:'robold'; letter-spacing:2px; text-transform:uppercase; padding-top:2px; padding-bottom:3px; }
  171.    
  172. small, sup, sub { font-size:8px; }
  173.    
  174. b, strong { color:{color:accent}; font-family:'montserrat'; font-weight:800; text-transform:uppercase; }
  175.  
  176. i, em { color:{color:links}; font-family:'robold'; text-transform:uppercase; letter-spacing:2px; }
  177.    
  178. li { line-height:20px; }
  179.  
  180. big { font-size:11px; }
  181.  
  182.  
  183.                                 /* HOLDER */
  184.                                
  185.  
  186. #container { background-color:{color:container}; position:absolute; margin:auto; left:0px; right:0px; top:0px; bottom:0px; width:800px; height:500px; border-radius:5px; overflow:hidden; }
  187.  
  188. .accent { position:absolute; z-index:9; margin-top:0px; width:800px; height:100px; background-color:{color:page accent}; border-bottom:8px solid {color:borders}; }
  189.  
  190.                                /* SIDEBAR */
  191.  
  192. #sidebar { position:absolute; z-index:9; margin-top:-30px; margin-left:5px; }
  193.  
  194. #title { position:absolute; z-index:999; width:300px; margin-left:30px; margin-top:60px; padding-top:5px; overflow:hidden; }
  195.  
  196. .title { position:absolute; font-family:'montserrat'; font-weight:900; font-size:25px; text-transform:uppercase; color:{color:posts}; text-shadow: 3px 3px {color:accent}; -webkit-text-stroke: 1px {color:accent}; }
  197.  
  198. .subtitle { margin-top:25px; color:{color:desc}; font-style:italic; font-size:8px; letter-spacing:3px; word-spacing:2px; text-transform:uppercase; font-family:'robold'; line-height:10px; }
  199.  
  200. .desc { position:absolute; z-index:999; margin-top:157px; margin-left:170px; text-align:justify; padding-top:3px; padding-bottom:2px; padding-left:5px; padding-right:3px; font-size:9px; font-family:'ABeeZee'; letter-spacing:1px; word-spacing:5px; width:155px; height:320px; overflow:auto; color:{color:desc}; line-height:18px; }
  201.  
  202. .sidelinks { width:320px; margin-top:310px; margin-left:190px; padding-left:5px; text-align:center; text-transform:uppercase; position:absolute; z-index:999999; font-family:'robold'; transform:rotate(90deg); }
  203.  
  204. .sidelinks a { font-size:8px; font-style:italic; margin-right:15px; color:{color:desc}; letter-spacing:3px; box-shadow: 0 -5px {color:page accent} inset; -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; }
  205.  
  206. .sidelinks 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; }
  207.  
  208. .pagination { font-size:8px; letter-spacing:1px; width:280px; padding-right:10px;position:absolute; margin-left:45px; margin-top:495px; text-align:center; z-index:99999; }
  209.    
  210. .pagination a {  padding:3px; text-transform:uppercase; padding-left:7px; padding-right:7px; letter-spacing:1.5px; border-radius:3px; color:{color:accent}; font-family:'montserrat'; font-weight:900; background-color:{color:page accent}; }
  211.  
  212.  
  213.                             /* POSTS STYLING */
  214.  
  215.  
  216. .entries { text-align:justify; position:absolute; z-index:99999; height:450px; width:380px; overflow:auto; margin:auto; left:350px; right:0px; top:25px; bottom:25px; overflow-x:hidden; background-color:{color:posts}; border-radius:5px; }
  217.  
  218. .posts { background-color:{color:posts}; width:300px; margin-bottom:30px; margin-top:20px; margin-left:20px; text-align:justify; border-radius:3px; padding-left:20px; padding-right:18px; padding-top:15px; padding-bottom:15px; border:1px solid {color:borders}; }
  219.  
  220. .posts img { max-width:300px; height:auto; {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; }
  221.  
  222. .posts 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; }
  223.  
  224. iframe { max-width:260px; }
  225.  
  226. .media img, .media iframe { {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; }
  227.  
  228. .media img:hover, .media iframe: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; }
  229.  
  230. .html_photoset { {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; }
  231.    
  232. .html_photoset: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; }
  233.  
  234. #permalink { background-color:{color:posts}; letter-spacing:1.5px; text-align:left; text-transform:uppercase; font-size:8px; font-family:'robold'; padding-top:6px; padding-bottom:6px; padding-right:10px; margin-top:20px; border-radius:3px; }
  235.  
  236. #permalink a { text-decoration:none; color:{color:links}; font-style:italic; box-shadow: 0 -5px {color:page accent} inset; 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; }
  237.  
  238. #tags { letter-spacing:1.5px; font-size:8px; margin-top:-5px; text-align:left; line-height:13px; text-transform:uppercase; font-family:'robold'; }
  239.  
  240. #tags a { text-decoration:none; color:{color:links}; font-style:italic; box-shadow: 0 -5px {color:page accent} inset; 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; }
  241.  
  242. #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; }
  243.  
  244.  
  245.                              /* QUOTE STYLING */
  246.    
  247.    
  248. #q { color:{color:text}; letter-spacing:1px; font-weight:900; font-family:'montserrat'; font-size:20px; text-align:center; line-height:22px; text-transform:uppercase; padding-top:20px; padding-left:20px; padding-right:20px; }
  249.  
  250. .source { color:{color:text}; margin-top:5px; font-size:8px; font-family:'robold'; text-align:center; letter-spacing:1.5px; text-transform:uppercase; padding-bottom:5px; }
  251.  
  252. .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; }
  253.      
  254.      
  255.                              /* ASK STYLING */
  256.  
  257.    
  258. #question { line-height:15px; color:{color:text}; letter-spacing:1px; font-size:9px; text-align:center; padding-bottom:15px; padding-left:10px; padding-right:10px; padding-top:8px; background-color:{color:page accent}; }
  259.    
  260. #asker { font-family:'robold'; letter-spacing:3px; font-size:8px; text-transform:uppercase; background-color:{color:accent}; padding-top:5px; padding-bottom:4px; padding-left:5px; }
  261.  
  262. #asker b { color:{color:posts}; font-weight:800; }
  263.  
  264. #asker a { color:{color:posts}; padding-top:3px; padding-bottom:4px; padding-left:9px; padding-right:9px; border-radius:3px; text-transform:uppercase; -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; }
  265.  
  266. #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; }
  267.    
  268. #answer { margin-top:10px; }
  269.  
  270.  
  271.                             /* AUDIO STYLING */
  272.  
  273.  
  274. .playbutton { width:30px; height:30px; overflow:hidden; position:relative; margin-top:25px; margin-left:25px; z-index:9; opacity:.7; }
  275.  
  276. .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; }
  277.  
  278. .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; }
  279.  
  280. .albumdetails { margin-top:-68px; text-align:;left; margin-left:75px; padding:5px; text-transform:uppercase; font-size:8px; letter-spacing:1px; }
  281.  
  282. .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; }
  283.  
  284.    
  285.                                 /* CREDIT */
  286.    
  287.    
  288. #credit a { right:20px; bottom:20px; position:fixed; padding:5px; font-size:16px; }
  289.  
  290.  
  291.                     /* tabs base credit to alyofrp */
  292.  
  293.  
  294. .tabzcon { margin-left:5px; margin-top:120px; position:absolute; z-index:99999999999999; overflow:hidden; width:375px; height:450px; background-color:{color:container}; color:{color:text}; animation: fadeEffect 0.5s; border-radius:5px; }
  295.  
  296. .tabzclose { z-index:99999999999; font-size:10px; padding:3px; color:{color:text}; margin-top:5px; margin-right:10px; float:right; }
  297.  
  298. .tabzclose:hover { cursor:pointer; }
  299.  
  300. @keyframes fadeEffect { from { opacity:0.8; transform:scale(0.3); }
  301. to { opacity:1; transform:scale(1); } }
  302.  
  303.  
  304.                              /* NAVIGATE */
  305.                              
  306.  
  307. .nlinks { position:absolute; z-index:99; margin-top:20px; margin-left:10px; width:270px; height:180px; padding-left:5px; }
  308.  
  309. .nlinks a { text-transform:uppercase; font-size:8px; font-style:italic; padding-left:2px; padding-right:2px; font-family:'robold'; letter-spacing:3px; margin-right:5px; color:{color:desc}; text-shadow: 1px 1px {color:accent}; box-shadow: 0 -4px {color:accent} inset; }
  310.  
  311. .nlinks li { margin-left:15px; margin-top:15px; background-color:{color:page accent}; border-radius:7px; width:150px; height:30px; padding-left:5px; padding-top:7px; float:left; list-style-type:none; text-align:center; }
  312.  
  313. .nlinks li:hover { animation:shake 0.82s cubic-bezier(.36,.07,.19,.97) both; transform:translate3d(0, 0, 0); backface-visibility:hidden; perspective:1000px; }
  314.  
  315. @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); }
  316. 20%, 80% { transform: translate3d(2px, 0, 0); }
  317. 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  318. 40%, 60% { transform: translate3d(4px, 0, 0); } }
  319.  
  320. .socials { position:absolute; z-index:99; margin-left:200px; margin-top:280px; width:135px; padding-left:5px; padding-bottom:8px; padding-top:8px; text-align:center; background-color:{color:page accent}; border-bottom-left-radius:5px; border-bottom-right-radius:5px; }
  321.  
  322. .socials span { padding:10px; font-size:15px; background-color:{color:accent}; color:{color:container}; border-radius:3px; margin-right:5px; }
  323.  
  324.  
  325.                             /* POPUP BASICS */
  326.                            
  327.                            
  328. .popup_block { position:absolute; z-index:999999999999; background-color:{color:container}; display:none; top:65%; left:25%; height:350px; overflow-x:hidden; overflow-y:auto; padding:20px; padding-left:50px; animation: fadeEffect 0.5s; }
  329.  
  330. *html #fade { position: absolute; z-index:9999999; }
  331.  
  332. *html .popup_block { position: absolute; z-index:9999999; }
  333.  
  334. #fade { position:fixed; width:100%; height:100%; opacity:0; z-index:99999999; }
  335.  
  336.                            /* INSTAGRAM */
  337.                            
  338.                            
  339. .grampost { position:absolute; z-index:9; margin-left:-15px; margin-top:10px; width:250px; height:235px; padding-left:10px; padding-right:10px; padding-top:25px; padding-bottom:65px; border:1px solid {color:borders}; border-radius:5px; }
  340.  
  341. .posted { position:absolute; margin-top:-22px; width:250px; font-family:'montserrat'; font-weight:800; text-transform:uppercase; text-align:right; }
  342.  
  343. .capt { position:absolute; margin-top:0px; }
  344.  
  345. .capt user { font-family:'montserrat'; font-weight:800; text-transform:uppercase; }
  346.  
  347.  
  348.                             /* SPOTIFY */
  349.                            
  350.                            
  351. .song { position:absolute; z-index:99; margin-top:-20px; margin-left:-16px; width:280px; border-radius:5px; }
  352.  
  353. .songinfo { margin-top:15px; text-align:center; font-size:17px; font-family:'montserrat'; font-weight:800; }
  354.  
  355. .songinfo artist { font-size:10px; font-weight:600; }
  356.  
  357. .songbot { margin-top:10px; padding-top:5px; padding-bottom:5px; padding-left:15px; padding-right:15px; text-align:center; }
  358.  
  359. .songbot i { margin-right:10px; color:{color:page accent}; }
  360.  
  361. .bar { margin-left:20px; margin-top:15px; width:160px; height:3px; border-radius:5px; background-color:{color:borders}; border-left:50px solid {color:page accent}; }
  362.  
  363.  
  364.                             /* TWEET */
  365.                            
  366.                            
  367. .tweet { position:absolute; z-index:99; margin-top:70px; margin-left:-16px; width:280px; height:190px; border-radius:5px; background-color:{color:posts}; }
  368.  
  369. .twitname { color:{color:accent}; line-height:15px; margin-left:65px; margin-top:20px; font-size:10px; }
  370.  
  371. .twitname n { font-family:'montserrat'; font-weight:800; text-transform:uppercase; font-size:15px; color:{color:desc}; }
  372.  
  373. .twittxt { position:absolute; color:{color:desc}; padding-left:20px; padding-right:20px; height:80px; overflow:hidden; margin-top:10px; font-size:15px; line-height:20px; }
  374.  
  375. .twitdate { position:absolute; color:{color:accent}; margin-left:20px; margin-top:100px; }
  376.  
  377. {CustomCSS}
  378.  
  379. </style>
  380. </head>
  381. <body>
  382.  
  383. <div id="container">
  384. <div class="accent"></div>
  385. <div id="sidebar">
  386.  
  387. <div id="title">
  388. <div class="title">{text:title}</div>
  389. <div class="subtitle">{text:subtitle}</div>
  390. </div>
  391.  
  392. <img src="{image:sidebar}" style="position:absolute; z-index:99; margin-top:160px; margin-left:25px; height:320px; width:130px; border-radius:5px;">
  393.  
  394. <div class="desc">{text:desc}</div>
  395.  
  396. <div class="sidelinks">
  397. <a href="/">home</a>
  398. <a href="/ask">inbox</a>
  399. <a href="#" class="tablink tabzact" onclick="openAlytut(event, 'navigate');">navi</a>
  400. <a href="{text:sidelink url}">{text:sidelink}</a>
  401. <a href="{text:sidelink 2 url}">{text:sidelink 2}</a>
  402. </div>
  403.  
  404. <div class="pagination">
  405. {block:PreviousPage}
  406. <a href="{PreviousPage}" class="pagi">back</a> &nbsp;&nbsp;&nbsp; {/block:PreviousPage}
  407. {block:NextPage} <a href="{NextPage}" class="pagi">next</a>  {/block:NextPage} {/block:Pagination}
  408. </div>
  409. </div>
  410.  
  411. <div id="navigate" class="tabzcon alytut" style="display:none">
  412. <span onclick="this.parentElement.style.display='none'" class="tabzclose">
  413.     <i class="fa fa-times" aria-hidden="true" style="color:{color:desc};"></i></span>
  414.    
  415. <div class="nlinks">
  416. <li><a href="{text:tablink url}">{text:tablink}</a></li>
  417. <li><a href="{text:tablink 2 url}">{text:tablink 2}</a></li>
  418. <p>
  419. <li><a href="{text:tablink 3 url}">{text:tablink 3}</a></li>
  420. <li><a href="{text:tablink 4 url}">{text:tablink 4}</a></li>
  421. <p>
  422. <li><a href="{text:tablink 5 url}">{text:tablink 5}</a></li>
  423. <li><a href="{text:tablink 6 url}">{text:tablink 6}</a></li>
  424. </div>
  425.    
  426. <img src="{image:tab}" style="position:absolute; z-index:99; margin-top:35px; margin-left:200px; height:250px; width:140px; border-radius:5px;">
  427.  
  428. <div class="socials">
  429. <a href="#?w=280" rel="instagram" class="poplight"><span class="th th-instagram-o"></span></a>
  430. <a href="#?w=280" rel="spotify" class="poplight"><span class="th th-music-o"></span></a>
  431. <a href="#?w=280" rel="tweet" class="poplight"><span class="th th-twitter-o"></span></a>
  432. </div>
  433.  
  434. </div>
  435.  
  436. <div id="instagram" class="popup_block">
  437.  
  438. <div class="grampost">
  439.  
  440. <div class="posted">
  441. posted <b>2 hours ago</b>
  442. </div>
  443.  
  444. <img src="{image:insta}">
  445. <div class="capt"><user><b>@{text:username}:</b></user> {text:caption}</div>
  446.  
  447. </div>
  448. </div>
  449.  
  450.  
  451. <div id="spotify" class="popup_block">
  452.  
  453. <div class="song">
  454. <img src="{image:album}" style="border-radius:5px; margin-left:40px; margin-top:30px; ">
  455.  
  456. <div class="songinfo">
  457. {text:song}
  458. <br>
  459. <artist>{text:artist}</artist>
  460. </div>
  461.  
  462. <div class="songbot">
  463. <i class="fas fa-step-backward" style="margin-left:15px; font-size:23px;"></i>
  464. <i class="fas fa-play" style="margin-left:5px; font-size:23px;"></i>
  465. <i class="fas fa-step-forward" style="font-size:23px;"></i>
  466.  
  467. <div class="bar"></div>
  468. </div>
  469. </div>
  470. </div>
  471.  
  472. <div id="tweet" class="popup_block">
  473.  
  474. <div class="tweet">
  475. <img src="{image:icon}" style="position:absolute; z-index:99; margin-top:15px; margin-left:15px; height:40px; width:40px; border-radius:100px;">
  476.  
  477. <div class="twitname">
  478. <n>{text:name}</n>
  479. <br>
  480. @{text:username}
  481. </div>
  482.  
  483. <div class="twittxt">
  484. {text:tweet}
  485. </div>
  486.  
  487. <div class="twitdate">
  488. 12:01 PM - 18 Sep 2019
  489. </div>
  490.  
  491. </div>
  492. </div>
  493. </div>
  494.  
  495. <div class="entries">
  496.  
  497. {block:posts}
  498. <div class="posts" id="{PostID}">
  499.  
  500. {block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}
  501.  
  502. {block:Photo}{LinkOpenTag}<img src="{PhotoURL-400}">{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  503.  
  504. {block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  505.  
  506. {block:Photoset}{Photoset-400}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  507.  
  508. {block:Quote}<div id="q">{Quote}</div>{/block:Quote}{block:Source}
  509. <div class="source">— {Source}</div>
  510. {/block:Source}
  511.  
  512. {block:Audio}
  513. {block:AudioPlayer}
  514. <div class="playbutton">{AudioPlayerGrey}</div>{/block:AudioPlayer}
  515. {block:AlbumArt}<div class="albumart"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}
  516. <div class="albumdetails">
  517. {block:TrackName}<lame>song:</lame> {TrackName}{/block:TrackName}<br>
  518. {block:Artist}<lame>artist:</lame> {Artist}{/block:Artist}<br>
  519. {block:Album}<lame>album:</lame> {Album}{/block:Album}
  520. </div>
  521. {/block:AudioPlayer}
  522. {/block:Audio}
  523.  
  524. {block:Video}{Video-400}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  525.  
  526. {block:Chat}{block:title}<h1>{title}</h1>{/block:title}<br>{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}{/block:Chat}
  527.  
  528. {block:Answer}<div id="question"><div id="asker"><b>{Asker}</b></div><br>{Question}</div><span></center><p><div id="answer">{Answer}</div>{/block:Answer}
  529.  
  530. <div id="permalink">
  531. <a href="{Permalink}">{TimeAgo}</a> with {NoteCountWithLabel}</span>
  532. </span>
  533. </div>
  534.  
  535. {block:HasTags}<div id="tags">tagged under:{block:Tags} <a href="{TagURL}">{Tag}</a>&nbsp; {/block:Tags}</div>{/block:HasTags}</div>
  536. {/block:Posts}
  537. {block:PostNotes}<div id="notes">{PostNotes}</div>{/block:PostNotes}
  538. {/block:Posts}</div></div></div>
  539.  
  540.  
  541. <div id="credit" data="credit"><a href="http://ultraviclets.tumblr.com" title="made by ness"><span class="th th-plant-vase-o"></span></a></div>
  542.    
  543.  
  544.  
  545. </body>
  546.  
  547. <script>
  548. function openAlytut(evt, alytutName) {
  549.   var i, x, tablinks;
  550.   x = document.getElementsByClassName("alytut");
  551.   for (i = 0; i < x.length; i++) {
  552.       x[i].style.display = "none";
  553.   }
  554.   tablinks = document.getElementsByClassName("tablink");
  555.   for (i = 0; i < x.length; i++) {
  556.       tablinks[i].className = tablinks[i].className.replace(" tabzact", "");
  557.   }
  558.   document.getElementById(alytutName).style.display = "block";
  559.   evt.currentTarget.className += " tabzact";
  560. }
  561. </script>
  562.  
  563. </html>
RAW Paste Data
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!
 
Top