API tools faq
paste
Advertisement
fakehelper

Idle Worship - Gradient + Links

fakehelper
Jun 10th, 2019 (edited)
907
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.98 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!--
  5.  
  6. idle worship (gif pack page #1) by fakehelper
  7.  
  8. credits
  9. - google fonts
  10. - honeybee font by suiomi
  11. - rhesmanisa by dharmas (hosted by me)
  12. - gradient background by shudesigns
  13. - pop-up tutorial by billiondays
  14. - tumblr controls by cyantists
  15.  
  16. #ffcece is the pink color, ctrl+f to change all pink to whatever color you want!
  17.  
  18. #ffcece,#dbc5e0,#ceecff is the gradient, so just change it to the three colors you like instead.
  19.  
  20. -->
  21.  
  22. <title>{Title}</title>
  23. <link rel="shortcut icon" href="{Favicon}">
  24.  
  25. <link href="https://static.tumblr.com/51fnf0s/BCoprzst5/style-my-tooltips.css" rel="stylesheet" type="text/css" />
  26. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  27. <script src="https://static.tumblr.com/51fnf0s/lKGprzsse/jquery.style-my-tooltips.js"></script>
  28. <script>
  29. (function($){
  30. $(document).ready(function(){
  31. $("[title]").style_my_tooltips({
  32. tip_follows_cursor:true,
  33. tip_delay_time:300,
  34. tip_fade_speed:300,
  35. attribute:"title"
  36. });
  37. });
  38. })(jQuery);
  39. </script>
  40.  
  41. <!--- pop up --->
  42. <script type="text/javascript" src="https://static.tumblr.com/iuggpng/bGqm4yfv9/jquery-1.7.2.js"></script>
  43. <script type="text/javascript"
  44. src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  45. <script>
  46. $(document).ready(function() {
  47. //
  48. $('a.poplight[href^=#]').click(function() {
  49. var popID = $(this).attr('rel'); //Get Popup Name
  50. var popURL = $(this).attr('href'); //Get Popup href to define size
  51. var query= popURL.split('?');
  52. var dim= query[1].split('&');
  53. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  54. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('');
  55. var popMargTop = ($('#' + popID).height() + 80) / 2;
  56. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  57. //Apply Margin to Popup
  58. $('#' + popID).css({
  59. 'margin-top' : -popMargTop,
  60. 'margin-left' : -popMargLeft
  61. });
  62. $('body').append('<div id="fade"></div>');
  63. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  64. return false;
  65. });
  66. $('a.close, #fade').live('click', function() {
  67. $('#fade , .popup_block').fadeOut(function() {
  68. $('#fade, a.close').remove(); //fade them both out
  69. });
  70. return false;
  71. });
  72. });
  73. </script>
  74.  
  75.  
  76. <!--- fonts --->
  77. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  78.  
  79. <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Karla:400,700|Lato:400,700|Open+Sans:400,700|Roboto:400,700" />
  80.  
  81. <style type="text/css">
  82.  
  83. @font-face {font-family: 'rhesmanisaregular'; src: url('https://dl.dropboxusercontent.com/s/c7urv114bk2vm1n/rhesmanisa.ttf'); font-weight: normal; font-style: normal;} /*also hosted by me so please don't copy/paste for another theme */
  84.  
  85.  
  86. /* tumblr controls by cyantists */
  87. iframe.tmblr-iframe {
  88. z-index:99999999999999!important;
  89. top:0!important;
  90. right:0!important;
  91. opacity:0.4;
  92. /* delete invert(1) from here */
  93. filter:invert(1) contrast(150%);
  94. -webkit-filter:invert(1) contrast(150%);
  95. -o-filter:invert(1) contrast(150%);
  96. -moz-filter:invert(1) contrast(150%);
  97. -ms-filter:invert(1) contrast(150%);
  98. /* to here if your blog has a dark background */
  99. transform:scale(0.65);
  100. transform-origin:100% 0;
  101. -webkit-transform:scale(0.65);
  102. -webkit-transform-origin:100% 0;
  103. -o-transform:scale(0.65);
  104. -o-transform-origin:100% 0;
  105. -moz-transform:scale(0.65);
  106. -moz-transform-origin:100% 0;
  107. -ms-transform:scale(0.65);
  108. -ms-transform-origin:100% 0;}
  109.  
  110. iframe.tmblr-iframe:hover {
  111. opacity:0.6!important;}
  112.  
  113. #s-m-t-tooltip{
  114. /* basic */
  115. max-width:300px;
  116. z-index:10;
  117. padding:5px;
  118. background:#222;
  119. font-family:'karla';
  120. font-size:11px;
  121. text-transform:uppercase;
  122. color:#fff;
  123. border:none;
  124. box-shadow:none;
  125. }
  126.  
  127. /* Scrollbar styles */
  128. ::-webkit-scrollbar {
  129. width: 5px;
  130. height: 5px;
  131. }
  132.  
  133. ::-webkit-scrollbar-track {
  134. border-radius: 5px;
  135. width: 2px;
  136. border: 1px dotted #ffcece;
  137. background: #fafafa;
  138. }
  139.  
  140. ::-webkit-scrollbar-thumb {
  141. background: #ffcece;
  142. border-radius: 10px;
  143. }
  144.  
  145. ::-webkit-scrollbar-thumb:hover {
  146. background: #222;
  147. }
  148.  
  149.  
  150. body {
  151. color:#fff;
  152. }
  153.  
  154. #background{
  155. position:fixed;
  156. top:0px;
  157. left:0px;
  158. width:100%;
  159. height:100%;
  160. z-index:-9999;
  161. background: #f1efef;
  162. /* change gradient here! on all of these guys tho bc they're for diff browsers */
  163. background: -webkit-linear-gradient(#ffcece,#dbc5e0,#ceecff);
  164. background: -o-linear-gradient(#ffcece,#dbc5e0,#ceecff);
  165. background: -moz-linear-gradient(#ffcece,#dbc5e0,#ceecff);
  166. background: linear-gradient(#ffcece,#dbc5e0,#ceecff);
  167. }
  168.  
  169. p {
  170. color:#222;
  171. font-family:'karla';
  172. font-size:12px;}
  173.  
  174.  
  175. a {
  176. color:#fff;
  177. text-decoration:none;
  178. font-weight:bold;}
  179.  
  180. #treetop {
  181. top:-30px;
  182. padding-bottom:40px;
  183. width:100%;
  184. height:210px;
  185. text-align;center;
  186. position:relative;
  187. z-index:1;
  188. }
  189.  
  190. #treetop p {
  191. width:800px;
  192. }
  193.  
  194. #treetop h2 {
  195. font-family:'rhesmanisaregular';
  196. font-size:50px;
  197. font-weight:normal;
  198. margin-bottom:-26px;
  199. color:#fff; /* title color here */
  200. }
  201.  
  202. /* container */
  203. #trunk {
  204. margin-top:-150px;
  205. padding:10px;
  206. text-align;center;
  207. display:inline-block;
  208. position:relative;
  209. }
  210.  
  211. #trunk img {
  212. padding-right:4px;
  213. padding-bottom:2px;
  214. }
  215.  
  216. /* episode titles */
  217. .branch {
  218. width:300px;
  219. height:25px;
  220. background: #000;
  221. transform: skew(-30deg);
  222. margin-bottom:20px;
  223.  
  224. }
  225.  
  226. .branch h3{
  227. color:#fafafa;
  228. padding-top:2px;
  229. font-family:'karla';
  230. font-size:13px;
  231. line-height:20px;
  232. font-weight:bold;
  233. text-transform:uppercase;
  234. transform: skew(30deg);
  235.  
  236. }
  237.  
  238. .branch h3:before {
  239. content:'\e941'; /* change honeybee icon here for footage/episode titles */
  240. font-family:'honeybee';
  241. font-size:12px;
  242. line-height:12px;
  243. font-weight:normal;
  244. padding-right:10px;
  245.  
  246. }
  247.  
  248.  
  249. /* links */
  250. #leaves{
  251. margin-top:-16px;
  252. width:300px;
  253. display:inline-block;
  254. padding-bottom:30px;
  255. }
  256.  
  257.  
  258. #leaves a:hover {
  259. color:#ffcece;
  260. -webkit-transition: color 1s ease-out;
  261. -moz-transition: color 1s ease-out;
  262. -o-transition: color 1s ease-out;
  263. transition: color 1s ease-out;
  264. }
  265.  
  266. #leaves a {
  267. color:#222;
  268. font-family:'honeybee';
  269. font-size:16px;
  270. padding-top:4px;
  271. width:26px;
  272. height:21px;
  273. background-color:#fff;
  274. border-radius:100%;
  275. text-align:center;
  276. z-index:2;
  277. display:inline-block;
  278. }
  279.  
  280. .credit {
  281. font:'honeybee';
  282. font-size:16px;
  283. bottom:6px;
  284. right:6px;
  285. position:fixed;
  286. z-index:111
  287. }
  288.  
  289. .credit a {
  290. color:#222;
  291. }
  292.  
  293. .credit a:hover {
  294. color:#fff;
  295. -webkit-transition: all .3s;
  296. -moz-transition: all .3s;
  297. -o-transition: all .3s;
  298. -ms-transition: all .3s;
  299. transition: all .3s;
  300. }
  301.  
  302. #fade {
  303. display: none;
  304. background: #000;
  305. position: fixed; left: 0; top: 0;
  306. width: 100%; height: 100%;
  307. opacity: .80;
  308. z-index: 9999;
  309. }
  310. .popup_block{
  311. display: none;
  312. background: #000;
  313. padding-top:0px;
  314. padding: 20px;
  315. border: none;
  316. float: left;
  317. position: fixed;
  318. top: 50%; left: 50%;
  319. z-index: 99999999999999999999999999999999;
  320. }
  321.  
  322. *html #fade {
  323. position: absolute;
  324. }
  325. *html .popup_block {
  326. position: absolute;
  327. }
  328.  
  329. /* pop up */
  330. #fruit {
  331. padding:0px;
  332. }
  333.  
  334. #fruit p {
  335. padding-left:20px;
  336. color:#fff;
  337. font-family:'karla';
  338. font-size:12px;
  339. line-height:20px;
  340. }
  341.  
  342. #fruit img {
  343. padding-left:0px;
  344. padding-right:14px;
  345. float:left;
  346. width:245px;
  347. display:inline-block;
  348. }
  349.  
  350. #fruit b {
  351. color:#ffcece;
  352. font-weight:bold;
  353. }
  354.  
  355. #fruit h5 {
  356. color: #dbc5e0;
  357. font-family:'karla';
  358. font-size: 11px;
  359. font-weight:bold;
  360. text-align: center;
  361. text-transform: uppercase
  362. }
  363.  
  364. /* pop up title */
  365. .twig {
  366. margin-left:10px; /* change to margin-left:140px; if removing the image! */
  367. width:220px;
  368. height:25px;
  369. color:#222;
  370. background-color:#fff;
  371. transform: skew(-30deg);
  372. margin-bottom:20px;
  373. position:fixed;
  374. display:inline-block;
  375. }
  376.  
  377.  
  378. .twig h4{
  379. color:#222;
  380. margin-top:3px;
  381. font-family:'karla';
  382. font-size:13px;
  383. line-height:20px;
  384. font-weight:bold;
  385. text-transform:uppercase;
  386. text-align:center;
  387. transform: skew(30deg);
  388.  
  389. }
  390.  
  391. .twig h4:before {
  392. content:'\ea13'; /* change honeybee icon here for pop up title */
  393. font-family:'honeybee';
  394. font-size:12px;
  395. line-height:12px;
  396. font-weight:normal;
  397. padding-right:10px;
  398.  
  399. }
  400.  
  401. </style>
  402. </head>
  403. <body>
  404.  
  405. <div class="credit"><a class="th th-leaf-1-o" title="page theme by fakehelper" href="https://fakehelper.tumblr.com/"></a></div><!--don't touch this pls it took me forever like plS donut do it-->
  406. <div id="background"></div>
  407.  
  408. <div id="treetop">
  409. <center><h2>Faceclaim in Source</h2>
  410. <p>Do not repost, remove my watermark, claim as your own, edit in any way, or include in gif hunts.<br>Please like <a href="#">this post</a> if using or saving any gifs. Trigger warnings are in the pop up link below.</p>
  411. <div id="leaves">
  412.  
  413. <a href="#?w=500" rel="01" class="poplight" title="fc info + trigger warnings"><span class="th th-power-o"></span></a>&nbsp<!--link to the pop-up! delete if u don't need it-->
  414. <a class="th th-plus-1-o" title="all (FC NAME) packs" href="https://yoururl.tumblr.com/tagged/(FC NAME)"></a>&nbsp<!--link to all packs of that fc-->
  415. <a class="th th-cloud-2-o" title="download this pack" href="#"></a>&nbsp<!--link to download if u do that-->
  416. <a class="th th-reblog" title="like or reblog the post" href="#"></a>&nbsp<!--link the original post-->
  417. <a class="th th-heart-1-o" title="tip jar" href="#"></a><!--your kofi or paypal idk get that paper tbh--->
  418.  
  419. </div></div>
  420.  
  421. <div id="trunk"><center>
  422. <div class="branch"><h3>FOOTAGE (SEASON/EPS/YEAR): ### gifs</h3></div>
  423. <p>
  424.  
  425. [ COPY PASTE UR IMG URLS HERE ]
  426.  
  427. </p>
  428.  
  429. <div class="branch"><h3>FOOTAGE (SEASON/EPS/YEAR): ### gifs</h3></div>
  430. <p>
  431.  
  432. [ COPY PASTE UR IMG URLS HERE ]
  433.  
  434. </p>
  435.  
  436.  
  437. </center>
  438. </div>
  439. <div class="credit"><a class="th th-leaf-1-o" title="page theme by fakehelper" href="https://fakehelper.tumblr.com/"></a></div>
  440.  
  441. <div id="01" class="popup_block">
  442. <div class="pops" style="margin-top:-10px">
  443. <div id="fruit">
  444. <img src="https://via.placeholder.com/245x180">
  445. <div class="twig"><h4>FC INFORMATION</h4></div>
  446. <h5 style="padding-top:40px">TRIGGER WARNINGS: you can get about three lines worth of trigger warnings in here omg </h5>
  447. <p>
  448. <b>Name:</b> FC<br>
  449. <b>Gender:</b> Gender<br>
  450. <b>Ethnicity:</b> Ethnicity<br>
  451. <b>Birth Year:</b> Year
  452. </p>
  453.  
  454. </div>
  455. </div></div>
  456.  
  457. </div></div></div></div></div></div></div></div></div></div>
  458. </body>
  459. </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!