API tools faq
paste
Advertisement
abv2

Hogfathers?

abv2
Sep 20th, 2016
1,049
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 15.41 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <head>
  3.  
  4.  <!---
  5.  
  6.  
  7.  
  8.                         THEME BY TWO-DAMES.TUMBLR.COM
  9.                     KINDLY DO NOT STEAL OR REMOVE CREDIT!!!
  10.                               MUCH OBLIGED!!!
  11.                                  
  12.                                  
  13.                                  
  14.                                  
  15. --->
  16.  
  17. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  18.  <title>{Title}</title>
  19.  
  20.  
  21. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  22. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  23.  
  24.  
  25. <link href="https://fonts.googleapis.com/css?family=Caveat+Brush|Rationale|Yantramanav" rel="stylesheet">
  26. <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:500,500i,700&subset=latin-ext" rel="stylesheet">
  27. <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans:500,500i&subset=latin-ext" rel="stylesheet">
  28. <link href="https://fonts.googleapis.com/css?family=Boogaloo" rel="stylesheet">
  29. <link href="https://fonts.googleapis.com/css?family=Crushed" rel="stylesheet">
  30.  
  31.  
  32. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  33.  
  34. <script>
  35. (function($){
  36. $(document).ready(function(){
  37. $("a[title]").style_my_tooltips({
  38. tip_follows_cursor:true,
  39. tip_delay_time:60,
  40. tip_fade_speed:300,
  41. attribute:"title"
  42. });
  43. });
  44. })(jQuery);
  45. </script>
  46. <!--basic tooltip from tutorial-baby! Enjoy-->
  47. <style>
  48. .tooltip{
  49.     display: inline;
  50.     position: relative;
  51. }
  52.  
  53. #s-m-t-tooltip {
  54. max-width:300px; /*how big the tooltip can be at most*/
  55. border-radius: 0px; /*change your border radius*/
  56. padding:3px 4px 5px 4px; /*padding inside tooltip*/
  57. margin:20px 7px -2px 20px; /*distance from word*/
  58. background-color:#ffffff; /*background color*/
  59.   border:1px solid #E0E0E0; /*border info*/
  60.   font-family:alegreya sans sc; /*tooltip font*/
  61.   font-weight:bold;
  62. font-size:9px; /*tooltip font size*/
  63. letter-spacing:1px; /*tooltip letter spacing*/
  64. text-transform:uppercase; /*makes the tooltip title uppercase*/
  65. color:#000; /*tooltip font color*/
  66. z-index:999999999999999999999999999999999999;
  67.  
  68.  -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1)    inset;
  69.  -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  70.   box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  71.   word-wrap: break-word;
  72. }
  73. </style>
  74.  
  75. <!---end tooltip--->
  76.  
  77. <link rel="shortcut icon" href="{Favicon}" />
  78. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  79.  
  80. <style type="text/css">
  81.  
  82.    /*selection*/
  83. ::selection {background-color:#5ba4a4;color:white;text-shadow:none;}
  84. ::-moz-selection {background-color:#5ba4a4;color:white;text-shadow:none;}
  85. ::-o-selection {background-color:#5ba4a4;color:white;text-shadow:none;}
  86.  /*--scrollbar--*/
  87. ::-webkit-scrollbar {width: 9px; height: 9px; background: #fff;}
  88. ::-webkit-scrollbar-thumb {background-color:#5ba4a4 ; border: 1px solid #ccc;}
  89.    
  90.    /*--body--*/
  91. body {
  92.     background-color:#fff ;
  93.     background-image: url('https://arpinux.org/public/walls/lightbulbs-1440x900.jpg');
  94.     background-repeat:no-repeat;
  95.     background-attachment:fixed;
  96.     background-size:100% 100%;
  97.     font-family: 'Yantramanav';
  98.     font-size: 13px;
  99.     color: {color:Text color};
  100. }
  101.  
  102.  
  103. b, strong {text-transform:bold;}
  104. i, em { text-transform:italic;}
  105. h2, h3, h4 {
  106.     width:350px;
  107.     font-family: 'Boogaloo';
  108.     background-color:#4e8c8a;
  109.     color:#fff;
  110.     text-align:center;
  111.     padding:2px;
  112.     text-decoration:underline;
  113.     border:1px solid #ccc;
  114. }
  115.    
  116. /*everything*/
  117.    
  118. #everything {
  119. margin-left:50px;
  120. margin-top:100px;
  121. margin-bottom:20px;
  122. }
  123.    
  124. /*--title--*/
  125.  #title {
  126.     font-family:'Boogaloo';
  127.     font-size:80px;
  128.     float:center;
  129.     color:#ABDDDB;
  130.     letter-spacing:1px;
  131.     padding:5px;
  132.     width:auto;
  133.     height:auto;
  134.     margin-left:24%;
  135.     margin-top:-50px;
  136.     }
  137.    
  138. /*--sidebar links--*/
  139. #links {
  140.     width:150px;
  141.     font-family:'alegreya sans sc';
  142.     text-transform:uppercase;
  143.     text-align:center;
  144.     margin:20px 0 0 40%;
  145.     }
  146.    
  147. #links a {
  148.     padding:3px;
  149.     font-size:12px;
  150.     color:#ABDDDB;
  151.     -webkit-transition: all 0.4s ease-in-out;
  152.     -moz-transition: all 0.4s ease-in-out;
  153.     -o-transition: all 0.4s ease-in-out;
  154.     -ms-transition: all 0.4s ease-in-out;
  155.     transition: all 0.4s ease-in-out;
  156.     }
  157.    
  158. #links a:hover { border:1px solid #fff;
  159. -webkit-transition: all 0.4s ease-in-out;
  160.     -moz-transition: all 0.4s ease-in-out;
  161.     -o-transition: all 0.4s ease-in-out;
  162.     -ms-transition: all 0.4s ease-in-out;
  163.     transition: all 0.4s ease-in-out;}
  164.    
  165.    
  166. /*main thing*/
  167.  
  168. /*IT IS POSSIBLE TO ADD MORE TABS, JUST FOLLOW THE INSTRUCTIONS IN THE CODE*/
  169. .content {
  170.     background: #fff;
  171.     position: relative;
  172.     width: auto;
  173.     margin: -230px 0 0 80px;
  174.     height: 450px;
  175.     z-index: 5;
  176.     overflow-x: hidden;
  177.     overflow-y: auto;
  178.     box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  179.     border-radius: 3px;
  180. }
  181.  
  182. .content div {
  183.     position: absolute;
  184.     top: 0;
  185.     padding: 10px 40px;
  186.     z-index: 1;
  187.     opacity: 0;
  188.     -webkit-transition: all linear 0.5s;
  189.     -moz-transition: all linear 0.5s;
  190.     -o-transition: all linear 0.5s;
  191.     -ms-transition: all linear 0.5s;
  192.     transition: all linear 0.5s;
  193. }
  194.  
  195. .content div{
  196.     -webkit-transform: translateY(-450px);
  197.     -moz-transform: translateY(-450px);
  198.     -o-transform: translateY(-450px);
  199.     -ms-transform: translateY(-450px);
  200.     transform: translateY(-450px);
  201. }
  202.  
  203. .content div p {
  204.     font-size: 14px;
  205.     text-align: left;
  206.     margin-top: 20px;
  207.     color: #777;
  208.     padding: 10px;
  209.     font-family: 'Crushed';
  210.     font-weight:800;
  211.     border-left: 8px solid rgba(63,148,148, 0.3);
  212. }
  213.  
  214. .content div p a {
  215.     line-height:24px;
  216.     text-decoration:none;
  217.     color:#4e8c8a;
  218.     border-bottom:1px solid #4e8c8a;
  219.     padding:2px;
  220.     -webkit-transition: all 0.5s ease;
  221.     -moz-transition: all 0.5s ease;
  222.     -o-transition: all 0.5s ease;
  223. }
  224.  
  225. .content div p a:hover {letter-spacing:2px;
  226. border:1px solid #5ba4a4;
  227. background-color:rgba(0,0,0,0.1);
  228.     -webkit-transition: all 0.4s ease;
  229.     -moz-transition: all 0.4s ease;
  230.     -o-transition: all 0.4s ease;
  231. }
  232.  
  233. .tabs {
  234.     position: relative;
  235.     margin: 40px 35% 0 auto;
  236.     width: 500px;
  237. }
  238.  
  239. .tabs input {position: absolute;z-index: 1000;width: 120px;height: 40px;left: -10px;top: 5px;opacity: 0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);cursor: pointer;}
  240.  
  241. .tabs input#tab-2{top: 45px;}
  242. .tabs input#tab-3{top: 90px;}
  243. .tabs input#tab-4{top: 135px;}
  244. .tabs input#tab-5{top: 180px;}
  245. /*
  246. If you want more tabs, add .tabs input#tab-6{top: 225px;} .tabs input#tab-7{top: 265px;} etc. Make the next TOP quality be 45px larger than the previous, and don't forget to change the number!!
  247. */
  248.  
  249. .tabs label {
  250.     background: #5ba4a4;
  251.     background: -moz-linear-gradient(top, #5ba4a4 0%, #4e8c8a 100%);
  252.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5ba4a4), color-stop(100%,#4e8c8a));
  253.     background: -webkit-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
  254.     background: -o-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
  255.     background: -ms-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
  256.     background: linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
  257.     font-size: 15px;
  258.     line-height: 40px;
  259.     margin-top:5px;
  260.     height: 40px;
  261.     position: relative;
  262.     padding: 0 20px;
  263.     display: block;
  264.     width: 40px;
  265.     color: #385c5b;
  266.     letter-spacing: 1px;
  267.     text-transform: uppercase;
  268.     font-weight: bold;
  269.     text-align: center;
  270.     float: left;
  271.     clear: both;
  272.     text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
  273.     border-radius: 3px 0 0 3px;
  274.     box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
  275. }
  276.  
  277. .tabs label:after {
  278.     content: '';
  279.     background: #fff;
  280.     position: absolute;
  281.     right: -2px;
  282.     top: 0;
  283.     width: 2px;
  284.     height: 100%;
  285. }
  286.  
  287. .tabs input:hover + label {background: #5ba4a4;}
  288.  
  289. .tabs label:first-of-type {z-index: 5;}
  290. .tab-label-2 {z-index: 4;}
  291. .tab-label-3 {z-index: 3;}
  292. .tab-label-4 {z-index: 2;}
  293. .tab-label-5 {z-index: 1;}
  294.  
  295. /*
  296. If you want more tabs, add .tab-label-6 .tab-label-7, but make sure that the LAST one in the set has the z-index:1; and go up from there
  297. */
  298.  
  299. .tabs input:checked + label {
  300.     background: #fff;
  301.     z-index: 6;  /*DONT FORGET TO MAKE THIS BIGGER THAN THE ONES ABOVE BY TWO*/
  302. }
  303.  
  304. .clear-shadow {clear: both;}
  305.  
  306. /*
  307. If you want more tabs,  add
  308. .tabs input.tab-selector-6:checked ~ .content .content-6
  309. etc. MAKE SURE YOU ADD COMMAS AFTER EACH, EXCEPT THE LAST!!!!
  310. */
  311. .tabs input.tab-selector-1:checked ~ .content .content-1,  /*commas=important*/
  312. .tabs input.tab-selector-2:checked ~ .content .content-2,
  313. .tabs input.tab-selector-3:checked ~ .content .content-3,
  314. .tabs input.tab-selector-4:checked ~ .content .content-4,
  315. .tabs input.tab-selector-5:checked ~ .content .content-5  /*comma=not needed*/
  316. {
  317.     -webkit-transform: translateY(0px);
  318.     -moz-transform: translateY(0px);
  319.     -o-transform: translateY(0px);
  320.     -ms-transform: translateY(0px);
  321.     transform: translateY(0px);
  322.     z-index: 100;
  323.     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  324.     filter: alpha(opacity=100);
  325.     opacity: 1;
  326.     -webkit-transition: all ease-out 0.3s 0.3s;
  327.     -moz-transition: all ease-out 0.3s 0.3s;
  328.     -o-transition: all ease-out 0.3s 0.3s;
  329.     -ms-transition: all ease-out 0.3s 0.3s;
  330.     transition: all ease-out 0.3s 0.3s;
  331. }
  332.  
  333.  
  334. /*CREDIT, KINDLY DO NOT REMOVE!!!*/
  335.  
  336. .tooltip a{color:#ff4141; text-decoration:none;}
  337. .tooltip {text-align:center;font-size:12px;background:#fff; bottom:5px; right:4px; position: fixed;display: inline-block;z-index:99999999;text-decoration:none;padding-left:2px;padding-right:2px;padding-top:4px;padding-bottom:0px;width:17px;height:17px;float:right;-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;border:1px solid #ccc;-moz-box-shadow: 0 5px #888;-webkit-box-shadow: 0 0 5px #888;box-shadow: 0 0 5px #888;}.tooltip a:hover{color:#000;}
  338. .tooltip .tooltiptext {font-family:Alegreya sans sc; font-weight:500;letter-spacing:1px; font-size:9px;visibility: hidden;width: 50px;background-color: rgba(0,0,0,0.8);color: #fff;text-align: center;border-radius: 2px;border:1px solid #ff4141;padding: 5px 5px;position: absolute;z-index: 1;top: -20px;right: 150%; /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */opacity: 0;transition: opacity 1s;font-size:10px;line-height:10px;}
  339. .tooltip:hover .tooltiptext {visibility: visible;opacity: 1;}
  340. .tooltip .tooltiptext::after {content: " ";position: absolute;top: 50%;left: 100%; /* To the right of the tooltip */margin-top: -5px;border-width: 5px; border-style: solid;border-color: transparent transparent transparent #ff4141;}
  341.  
  342. /*CREDIT END, KINDLY DO NOT REMOVE!!!*/
  343.        
  344.     </style>
  345.     </head>
  346.    
  347. <body>
  348.  
  349. <div id="everything">
  350.  
  351. <div id="title">NAVIGATION PAGE</div>
  352.  
  353. <div id="links">
  354. <a href="/">HOME</a>
  355. <a href="/ask">ASK</a>
  356. <a href="/archive">Archive</a>
  357. </div>
  358.  
  359. <section class="tabs">
  360.  
  361. <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
  362. <label for="tab-1" class="tab-label-1">☕</label>
  363.    
  364. <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
  365. <label for="tab-2" class="tab-label-2">☕</label>
  366.  
  367. <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
  368. <label for="tab-3" class="tab-label-3">☕</label>
  369.    
  370. <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
  371. <label for="tab-4" class="tab-label-4">☕</label>
  372.    
  373. <input id="tab-5" type="radio" name="radio-set" class="tab-selector-5" />
  374. <label for="tab-5" class="tab-label-5">☕</label>
  375.  
  376. <!--
  377. If you want more tabs add
  378. <input id="tab-6" type="radio" name="radio-set" class="tab-selector-6" /><label for="tab-6" class="tab-label-6">☕</label>
  379. etc. Replace the coffee cup with what you want.
  380. -->
  381.            
  382.     <div class="clear-shadow"></div>
  383.                
  384.     <div class="content">
  385.         <div class="content-1">
  386.         <h2>Shows</h2>
  387.         <p>
  388. <a href="/tagged/parks">Parks and Recreation</a><br>
  389. <a href="/tagged/b99">Brooklyn 99 </a><br>
  390. <a href="/tagged/el">Elementary</a><br>
  391. <a href="/tagged/sherlock">Sherlock (BBC and RDJ)</a><br>
  392. <a href="/tagged/friends">Friends</a><br>
  393. <a href="/tagged/ncis">NCIS</a><br>
  394. <a href="/tagged/got">Game of Thrones</a><br>
  395. <a href="/tagged/pushing daisies">Pushing Daisies</a><br>
  396. <a href="/tagged/2%20broke%20girls">2 Broke Girls</a><br>
  397. <a href="/tagged/vd">Vampire Diaries/Ian</a><br>
  398. <a href="/tagged/anime">Anime</a><br>
  399. <a href="/tagged/other%20shows">Other Shows</a>
  400.  
  401.         </p>
  402.         </div>
  403.        
  404.         <div class="content-2">
  405.             <p>Some content</p>
  406.         </div>
  407.        
  408.         <div class="content-3">
  409.             <p>Some content</p>
  410.         </div>
  411.        
  412.         <div class="content-4">
  413.             <p>Some content</p>
  414.         </div>
  415.        
  416.         <div class="content-5">
  417.             <p>“All right," said Susan. "I'm not stupid. You're saying humans need... fantasies to make life bearable." REALLY? AS IF IT WAS SOME KIND OF PINK PILL? NO. HUMANS NEED FANTASY TO BE HUMAN. TO BE THE PLACE WHERE THE FALLING ANGEL MEETS THE RISING APE. "Tooth fairies? Hogfathers? Little—" YES. AS PRACTICE. YOU HAVE TO START OUT LEARNING TO BELIEVE THE LITTLE LIES. "So we can believe the big ones?" YES. JUSTICE. MERCY. DUTY. THAT SORT OF THING. "They're not the same at all!" YOU THINK SO? THEN TAKE THE UNIVERSE AND GRIND IT DOWN TO THE FINEST POWDER AND SIEVE IT THROUGH THE FINEST SIEVE AND THEN SHOW ME ONE ATOM OF JUSTICE, ONE MOLECULE OF MERCY. AND YET—Death waved a hand. AND YET YOU ACT AS IF THERE IS SOME IDEAL ORDER IN THE WORLD, AS IF THERE IS SOME...SOME RIGHTNESS IN THE UNIVERSE BY WHICH IT MAY BE JUDGED. "Yes, but people have got to believe that, or what's the point—" MY POINT EXACTLY.”“All right," said Susan. "I'm not stupid. You're saying humans need... fantasies to make life bearable." REALLY? AS IF IT WAS SOME KIND OF PINK PILL? NO. HUMANS NEED FANTASY TO BE HUMAN. TO BE THE PLACE WHERE THE FALLING ANGEL MEETS THE RISING APE. "Tooth fairies? Hogfathers? Little—" YES. AS PRACTICE. YOU HAVE TO START OUT LEARNING TO BELIEVE THE LITTLE LIES. "So we can believe the big ones?" YES. JUSTICE. MERCY. DUTY. THAT SORT OF THING. "They're not the same at all!" YOU THINK SO? THEN TAKE THE UNIVERSE AND GRIND IT DOWN TO THE FINEST POWDER AND SIEVE IT THROUGH THE FINEST SIEVE AND THEN SHOW ME ONE ATOM OF JUSTICE, ONE MOLECULE OF MERCY. AND YET—Death waved a hand. AND YET YOU ACT AS IF THERE IS SOME IDEAL ORDER IN THE WORLD, AS IF THERE IS SOME...SOME RIGHTNESS IN THE UNIVERSE BY WHICH IT MAY BE JUDGED. "Yes, but people have got to believe that, or what's the point—" MY POINT EXACTLY.”</p>
  418.         </div>
  419. <!--
  420. Finally, if you want more tabs, add
  421.             <div class="content-6">
  422.                 <p>Some content</p>
  423.             </div>
  424. The <p></p> are SUPREMELY important. Don't delete them, and add you content in between, or make other paragraphs, just have at least one opening <p> in the beginning and one closing </p> in the end.
  425. -->
  426.        
  427.     </div>
  428. </section>
  429.  
  430.  
  431. </div>
  432.  
  433. <div class="tooltip"><a href="http://two-dames.tumblr.com/"><i class="fa fa-coffee" aria-hidden="true"></i></a><span class="tooltiptext">Theme by Two-Dames</span></div>
  434. </body>
  435. </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!