API tools faq
paste
Advertisement
ultraviclets

♡ ; theme six.

ultraviclets
Sep 18th, 2019
2,521
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.96 KB | None | 0 0
raw download clone embed print report
  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>
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!