API tools faq
paste
Advertisement
abv2

Piggy Wiggy

abv2
Sep 23rd, 2016
382
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 14.96 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. <link href="https://fonts.googleapis.com/css?family=Bangers" rel="stylesheet">
  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.  
  29. <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>
  30.  
  31.  
  32.  
  33. <script>
  34. (function($){
  35. $(document).ready(function(){
  36. $("a[title]").style_my_tooltips({
  37. tip_follows_cursor:true,
  38. tip_delay_time:60,
  39. tip_fade_speed:300,
  40. attribute:"title"
  41. });
  42. });
  43. })(jQuery);
  44. </script>
  45. <!--basic tooltip from tutorial-baby! Enjoy-->
  46. <style>
  47. .tooltip{
  48.     display: inline;
  49.     position: relative;
  50. }
  51.  
  52. #s-m-t-tooltip {
  53. max-width:300px; /*how big the tooltip can be at most*/
  54. border-radius: 0px; /*change your border radius*/
  55. padding:3px 4px 5px 4px; /*padding inside tooltip*/
  56. margin:20px 7px -2px 20px; /*distance from word*/
  57. background-color:#ffffff; /*background color*/
  58.   border:1px solid #E0E0E0; /*border info*/
  59.   font-family:alegreya sans sc; /*tooltip font*/
  60.   font-weight:bold;
  61. font-size:9px; /*tooltip font size*/
  62. letter-spacing:1px; /*tooltip letter spacing*/
  63. text-transform:uppercase; /*makes the tooltip title uppercase*/
  64. color:#000; /*tooltip font color*/
  65. z-index:999999999999999999999999999999999999;
  66.  
  67.  -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1)    inset;
  68.  -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  69.   box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  70.   word-wrap: break-word;
  71. }
  72. </style>
  73.  
  74. <!---end tooltip--->
  75.  
  76. <link rel="shortcut icon" href="{Favicon}" />
  77. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  78.  
  79. <style type="text/css">
  80.  
  81.    /*selection*/
  82. ::selection {background-color:#5ba4a4;color:white;text-shadow:none;}
  83. ::-moz-selection {background-color:#5ba4a4;color:white;text-shadow:none;}
  84. ::-o-selection {background-color:#5ba4a4;color:white;text-shadow:none;}
  85.  /*--scrollbar--*/
  86. ::-webkit-scrollbar {width: 9px; height: 9px; background: #fff;}
  87. ::-webkit-scrollbar-thumb {background-color:#5ba4a4 ; border: 1px solid #ccc;}
  88.    
  89.    /*--body--*/
  90. body {
  91.     background-color:#fff ;
  92.     background-image: url('http://www.planwallpaper.com/static/images/flat-mountains-wallpaper.jpg');
  93.     background-repeat:no-repeat;
  94.     background-attachment:fixed;
  95.     background-size:100% 100%;
  96.     font-family: 'Yantramanav';
  97.     font-size: 13px;
  98.     color: {color:Text color};
  99. }
  100.  
  101. b, strong {text-transform:bold;}
  102. i, em { text-transform:italic;}
  103. h2, h3, h4 {
  104.     width:350px;
  105.     font-family: 'Rationale';
  106.     background-color:#4e8c8a;
  107.     color:#fff;
  108.     text-align:center;
  109.     padding:2px;
  110.     text-decoration:underline;
  111.     border:1px solid #ccc;
  112. }
  113.    
  114. /*everything*/
  115.    
  116. #everything {
  117. margin-left:50px;
  118. margin-top:100px;
  119. margin-bottom:20px;
  120. }
  121.    
  122. /*--title--*/
  123.  #title {
  124.     font-family:'Bangers';
  125.     font-size:80px;
  126.     position:fixed;
  127.     float:center;
  128.     color:#fff;
  129.     background-color:rgba(0,0,0,0.6);
  130.     padding:15px;
  131.     letter-spacing:1px;
  132.     width:auto;
  133.     height:auto;
  134.     margin-left:32%;
  135.     margin-top:550px;
  136.     }
  137.    
  138.     #title:hover{background:rgba(0,0,0,1);
  139.         -webkit-transition: all 0.4s ease-in-out;
  140.     -moz-transition: all 0.4s ease-in-out;
  141.     -o-transition: all 0.4s ease-in-out;
  142.     -ms-transition: all 0.4s ease-in-out;
  143.     transition: all 0.4s ease-in-out;}
  144.    
  145. /*--sidebar links--*/
  146. #links {
  147.     width:150px;
  148.     position:fixed;
  149.     font-family:'alegreya sans sc';
  150.     text-transform:uppercase;
  151.     text-align:center;
  152.     margin:700px 0 0 40%;
  153.     background:rgba(0,0,0,0.6);
  154.     padding:10px;
  155.     }
  156.    
  157. #links:hover{background:rgba(0,0,0,1);
  158.    -webkit-transition: all 0.4s ease-in-out;
  159.     -moz-transition: all 0.4s ease-in-out;
  160.     -o-transition: all 0.4s ease-in-out;
  161.     -ms-transition: all 0.4s ease-in-out;
  162.     transition: all 0.4s ease-in-out;
  163. }
  164.    
  165. #links a {
  166.     padding:3px;
  167.     font-size:12px;
  168.     color:#fff;
  169.  
  170.     }
  171.    
  172. #links a:hover { border:1px solid #fff; text-decoration:none;
  173. -webkit-transition: all 0.4s ease-in-out;
  174.     -moz-transition: all 0.4s ease-in-out;
  175.     -o-transition: all 0.4s ease-in-out;
  176.     -ms-transition: all 0.4s ease-in-out;
  177.     transition: all 0.4s ease-in-out;}
  178.    
  179.    /*main stuff*/
  180.  
  181. .oe_overlay{
  182.     background:#000;
  183.     opacity:0;
  184.     position:fixed;
  185.     top:0px;
  186.     left:0px;
  187.     width:100%;
  188.     height:100%;
  189. }
  190. ul.oe_menu{
  191.     list-style:none;
  192.     position:relative;
  193.     margin:30px 0px 0px 200px;
  194.     width:720px;
  195.     float:center;
  196.     clear:both;
  197. }  
  198.    
  199. ul.oe_menu > li{
  200.     width:116px;
  201.     height:130px;
  202.     padding-bottom:2px;
  203.     padding-right:2px;
  204.     float:left;
  205.     position:relative;
  206.     padding-bottom:25px;
  207. }
  208.  
  209. ul.oe_menu > li > a > img{
  210.     vertical-align:middle;
  211.     width:114px;
  212.     height:101px;
  213.     margin-top:-10px;
  214.     margin-left:-10px;
  215. }
  216.  
  217. ul.oe_menu > li > a{
  218.     display:block;
  219.     background-color:#101010;
  220.     color:#aaa;
  221.     text-decoration:none;
  222.     font-weight:bold;
  223.     font-size:14px;
  224.     width:94px;
  225.     height:110px;
  226.     padding:10px;
  227.     text-shadow:0px 0px 1px #000;
  228.     opacity:0.8;
  229.     font-family:alegreya sans sc;
  230. }
  231. ul.oe_menu > li > a:hover, ul.oe_menu > li.selected > a{
  232.     background:#fff;
  233.     color:#101010;
  234.     opacity:1.0;
  235. }
  236. .oe_wrapper ul.hovered > li > a{
  237.     background:#fff;
  238.     text-shadow:0px 0px 1px #FFF;
  239.    
  240. }
  241. ul.oe_menu div{
  242.     position:absolute;
  243.     top:103px;
  244.     left:1px;
  245.     background:#fff;
  246.     width:600px;
  247.     height:180px;
  248.     padding:30px;
  249.     display:none;
  250.     overflow-y:auto;
  251.     overflow-x:hidden;
  252.     margin-top:30px;
  253. }
  254. ul.oe_menu div ul li a{
  255.     text-decoration:none;
  256.     color:#222;
  257.     padding:2px 2px 2px 4px;
  258.     margin:2px;
  259.     display:block;
  260.     font-size:12px;
  261.     border-bottom:1px solid #5ba4a4;
  262.     font-family:yantramanav;
  263. }
  264. ul.oe_menu div ul.oe_full{
  265.     width:100%;
  266. }
  267. ul.oe_menu div ul li a:hover{
  268.     background:#000;
  269.     color:#fff;
  270. }
  271. ul.oe_menu li ul{
  272.     list-style:none;
  273.     float:left;
  274.     width: 130px;
  275.     margin-right:10px;
  276. }
  277. li.oe_heading{
  278.     color:#aaa;
  279.     font-size:16px;
  280.     margin-bottom:10px;
  281.     padding-bottom:6px;
  282.     border-bottom:1px solid #ddd;
  283. }
  284.  
  285. /*CREDIT, KINDLY DO NOT REMOVE!!!*/
  286.  
  287. .tooltip a{color:#ff4141; text-decoration:none;}
  288. .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;}
  289. .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;}
  290. .tooltip:hover .tooltiptext {visibility: visible;opacity: 1;}
  291. .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;}
  292.  
  293. /*CREDIT END, KINDLY DO NOT REMOVE!!!*/
  294.        
  295.     </style>
  296.     </head>
  297.    
  298. <body>
  299.  
  300. <div id="everything">
  301.  
  302.  
  303. <div class="oe_wrapper">
  304.             <div id="oe_overlay" class="oe_overlay"></div>
  305.             <ul id="oe_menu" class="oe_menu">
  306.                 <li><a href=""><img src="https://s-media-cache-ak0.pinimg.com/originals/fc/70/e0/fc70e0968c1d92405e4bde9f51630ac7.gif">Tag title 1</a>
  307.                     <div>
  308.                         <ul>
  309.                             <li class="oe_heading">Tag collection 1</li>
  310.                             <li><a href="#">Tag</a></li>
  311.                             <li><a href="#">Tag</a></li>
  312.                             <li><a href="#">A very long tag, requiring lots of space</a></li>
  313.                             <li><a href="#">Tag</a></li>
  314.                             <li><a href="#">Tag</a></li>
  315.                         </ul>
  316.                         <ul>
  317.                             <li class="oe_heading">Tag collection 2</li>
  318.                             <li><a href="#">Tag</a></li>
  319.                             <li><a href="#">Tag</a></li>
  320.                             <li><a href="#">Tag</a></li>
  321.                             <li><a href="#">Tag</a></li>
  322.                             <li><a href="#">Tag</a></li>
  323.                             <li><a href="#">Tag</a></li>
  324.                         </ul>
  325.                         <ul>
  326.                             <li class="oe_heading">Tag collection 3</li>
  327.                             <li><a href="#">Tag</a></li>
  328.                             <li><a href="#">Tag</a></li>
  329.                             <li><a href="#">Tag</a></li>
  330.                             <li><a href="#">Tag</a></li>
  331.                             <li><a href="#">Tag</a></li>
  332.                             <li><a href="#">Tag</a></li>
  333.                             <li><a href="#">Tag</a></li>
  334.                             <li><a href="#">Tag</a></li>
  335.                             <li><a href="#">Tag</a></li>
  336.                             <li><a href="#">Tag</a></li>
  337.                            
  338.                         </ul>
  339.                     </div>
  340.                 </li>
  341.                 <li><a href=""><img src="">Tag title 2</a>
  342.                     <div style="left:-115px;"><!-- -112px -->
  343.                         <ul>
  344.                             <li class="oe_heading">Tag collection 1</li>
  345.                             <li><a href="#">Tag</a></li>
  346.                             <li><a href="#">Tag</a></li>
  347.                             <li><a href="#">Tag</a></li>
  348.                             <li><a href="#">Tag</a></li>
  349.                             <li><a href="#">Tag</a></li>
  350.                         </ul>
  351.                         <ul>
  352.                             <li class="oe_heading">Tag collection 2</li>
  353.                             <li><a href="#">Tag</a></li>
  354.                             <li><a href="#">Tag</a></li>
  355.                             <li><a href="#">Tag</a></li>
  356.                         </ul>
  357.                     </div>
  358.                 </li>
  359.                 <li><a href=""><img src="https://s-media-cache-ak0.pinimg.com/236x/78/b8/e5/78b8e5291e8309bfacb19aeb5b27a445.jpg">Tag title 3</a>
  360.                     <div style="left:-228px;">
  361.                         <ul>
  362.                             <li class="oe_heading">Tag collection 1</li>
  363.                             <li><a href="#">Tag</a></li>
  364.                             <li><a href="#">Tag</a></li>
  365.                             <li><a href="#">Tag</a></li>
  366.                             <li><a href="#">Tag</a></li>
  367.                             <li><a href="#">Tag</a></li>
  368.                         </ul>
  369.                     </div>
  370.                 </li>
  371.                 <li><a href=""><img src="">Tag title 4</a>
  372.                     <div style="left:-340px;">
  373.                         <ul>
  374.                             <li class="oe_heading">Tag collection 1</li>
  375.                             <li><a href="#">Tag</a></li>
  376.                             <li><a href="#">Tag</a></li>
  377.                             <li><a href="#">Tag</a></li>
  378.                             <li><a href="#">Tag</a></li>
  379.                             <li><a href="#">Tag</a></li>
  380.                         </ul>
  381.                         <ul>
  382.                             <li class="oe_heading">Tag collection 2</li>
  383.                             <li><a href="#">Tag</a></li>
  384.                             <li><a href="#">Tag</a></li>
  385.                             <li><a href="#">Tag</a></li>
  386.                             <li><a href="#">Tag</a></li>
  387.                             <li><a href="#">Tag</a></li>
  388.                         </ul>
  389.                         <ul>
  390.                             <li class="oe_heading">Tag collection 3</li>
  391.                             <li><a href="#">Tag</a></li>
  392.                             <li><a href="#">Tag</a></li>
  393.                             <li><a href="#">Tag</a></li>
  394.                             <li><a href="#">Tag</a></li>
  395.                             <li><a href="#">Tag</a></li>
  396.                         </ul>
  397.                     </div>
  398.                 </li>
  399.                 <li><a href=""><img src="http://38.media.tumblr.com/6223d2293cdca61380f84cb9b1b1518d/tumblr_nfvj4p3HJU1tpdcs9o1_250.gif">Tag title 5</a>
  400.                     <div style="left:-452px;">
  401.                         <ul>
  402.                             <li class="oe_heading">Tag collection 1</li>
  403.                             <li><a href="#">Tag</a></li>
  404.                             <li><a href="#">Tag</a></li>
  405.                             <li><a href="#">Tag</a></li>
  406.                             <li><a href="#">Tag</a></li>
  407.                         </ul>
  408.                         <ul>
  409.                             <li class="oe_heading">Tag collection 2</li>
  410.                             <li><a href="#">Tag</a></li>
  411.                             <li><a href="#">Tag</a></li>
  412.                             <li><a href="#">Tag</a></li>
  413.                             <li><a href="#">Tag</a></li>
  414.                         </ul>
  415.                         <ul>
  416.                             <li><a href="#">This collection has no title</a></li>
  417.                             <li><a href="#">Tag</a></li>
  418.                             <li><a href="#">Tag</a></li>
  419.                             <li><a href="#">Tag</a></li>
  420.                             <li><a href="#">Tag</a></li>
  421.                         </ul>
  422.                     </div>
  423.                 </li>
  424.                 <li><a href=""><img src="">Tag title 6</a>
  425.                     <div style="left:-569px;">
  426.                         <ul>
  427.                             <li class="oe_heading">Tag collection 1</li>
  428.                             <li><a href="#">Tag</a></li>
  429.                             <li><a href="#">Tag</a></li>
  430.                             <li><a href="#">Tag</a></li>
  431.                             <li><a href="#">Tag</a></li>
  432.                         </ul>
  433.                         <ul>
  434.                             <li class="oe_heading">Tag collection 2</li>
  435.                             <li><a href="#">Tag</a></li>
  436.                             <li><a href="#">Tag</a></li>
  437.                             <li><a href="#">Tag</a></li>
  438.                             <li><a href="#">Tag</a></li>
  439.                         </ul>
  440.                         <ul>
  441.                             <li class="oe_heading">Tag collection 3</li>
  442.                             <li><a href="#">Tag</a></li>
  443.                             <li><a href="#">Tag</a></li>
  444.                             <li><a href="#">Tag</a></li>
  445.                             <li><a href="#">Tag</a></li>
  446.                         </ul>
  447.                     </div>
  448.                 </li>
  449.             </ul>
  450.         </div>
  451.        
  452.  
  453. <div id="title">PIGGY WIGGY</div>
  454.  
  455. <div id="links">
  456. <a href="/">HOME</a>
  457. <a href="/ask">ASK</a>
  458. <a href="/archive">Archive</a>
  459. </div>
  460. </div>
  461.  
  462. <!-- The JavaScript -->
  463.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
  464.         <script type="text/javascript">
  465.        
  466.             $(function() {
  467.                 var $oe_menu        = $('#oe_menu');
  468.                 var $oe_menu_items  = $oe_menu.children('li');
  469.                 var $oe_overlay     = $('#oe_overlay');
  470.  
  471.                 $oe_menu_items.bind('mouseenter',function(){
  472.                     var $this = $(this);
  473.                     $this.addClass('slided selected');
  474.                     $this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
  475.                         $oe_menu_items.not('.slided').children('div').hide();
  476.                         $this.removeClass('slided');
  477.                     });
  478.                 }).bind('mouseleave',function(){
  479.                     var $this = $(this);
  480.                     $this.removeClass('selected').children('div').css('z-index','1');
  481.                 });
  482.  
  483.                 $oe_menu.bind('mouseenter',function(){
  484.                     var $this = $(this);
  485.                     $oe_overlay.stop(true,true).fadeTo(200, 0.6);
  486.                     $this.addClass('hovered');
  487.                 }).bind('mouseleave',function(){
  488.                     var $this = $(this);
  489.                     $this.removeClass('hovered');
  490.                     $oe_overlay.stop(true,true).fadeTo(200, 0);
  491.                     $oe_menu_items.children('div').hide();
  492.                 })
  493.             });
  494.         </script>
  495.     <script src="http://tympanus.net/codrops/adpacks/demoad.js"></script>
  496.  
  497. <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>
  498. </body>
  499. </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!