API tools faq
paste
LatviaCPI

Beloved's sniff

LatviaCPI
Jun 22nd, 2017
218
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 6.93 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <title>Your Page Title</title>
  4. <head>
  5. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script><script>(function($){$(document).ready(function(){$("[title]").style_my_tooltips();});})(jQuery);</script>
  6. <style>
  7.  
  8. body {
  9.     background: url("http://www.desktopwallpaperhd.net/wallpapers/2/f/sunset-widescreen-red-background-wallpaper-sunsets-26911.jpg");
  10.     background-size: cover;
  11.     background-repeat: no-repeat;
  12. }
  13.  
  14. /* Style the tab */
  15. div.tab {
  16.     left: 15px;
  17.     border: 1px solid #000; /* border color */
  18.     background-color: #EC7063;
  19.     width: 100px;
  20.     border-radius: 20px 10px 10px 10px;
  21.     z-index: 99999;
  22.     position: absolute;
  23.     background: url("https://scontent.cdninstagram.com/hphotos-xpf1/t51.2885-15/e15/11055923_396237250556283_1469732585_n.jpg");
  24.     background-size: cover;
  25. }
  26.  
  27. /* Style the buttons inside the tab */
  28. div.tab button {
  29.     display: block;
  30.     background-color: inherit;
  31.     color: black; /* text color */
  32.     margin: 15px 0px 15px 0px;
  33.     padding: 5px 0px 5px 0px;
  34.     text-align: center;
  35.     width: 100%;
  36.     border: none;
  37.     outline: none;
  38.     cursor: pointer;
  39.     transition: 0.3s;
  40.     font-size: 17px;
  41. }
  42.  
  43. /* Change background color of buttons on hover */
  44. div.tab button:hover {
  45.     background-color: #ddd; /* buttons color on hover */
  46. }
  47.  
  48. /* Create an active/current "tab button" class */
  49. div.tab button.active {
  50.     background-color: #ccc; /* button color while active */
  51. }
  52.  
  53. iframe {display:none !important;}
  54.  
  55. /* THIS IS THE BOX THAT HOLDS YOUR INFO */
  56. .info {
  57.     text-align: center;
  58.     margin: 0 auto;
  59.     padding: 0px 12px;
  60.     background: rgba(206, 136, 51, 0.8); /* background color */
  61.     border: 1px solid #ccc; /* border color */
  62.     width: 50%;
  63.     color: black; /* text color */
  64.     overflow: auto;
  65.     height: 300px;
  66.     border-radius: 10px;
  67.     box-shadow: 10px 10px 10px #888888; /* box shadow color */
  68.     margin-top: 5px;
  69. }
  70.  
  71. /* Style the tab */
  72. div.links {
  73.     right: 15px;
  74.     border: 1px solid #000; /* border color */
  75.     background-color: #EC7063;
  76.     width: 100px;
  77.     border-radius: 10px 20px 10px 10px;
  78.     z-index: 99999;
  79.     position: absolute;
  80.     background: url("https://scontent.cdninstagram.com/hphotos-xpf1/t51.2885-15/e15/11055923_396237250556283_1469732585_n.jpg");
  81.     background-size: cover;
  82. }
  83.  
  84. /* Style the buttons inside the tab */
  85. div.links a {
  86.     display: block;
  87.     background-color: inherit;
  88.     color: black; /* text color */
  89.     margin: 15px 0px 15px 0px;
  90.     padding: 5px 0px 5px 0px;
  91.     text-align: center;
  92.     width: 100%;
  93.     border: none;
  94.     outline: none;
  95.     cursor: pointer;
  96.     transition: 0.3s;
  97.     font-size: 17px;
  98.     text-decoration: none;
  99. }
  100.  
  101. /* Change background color of buttons on hover */
  102. div.links a:hover {
  103.     background-color: #ddd; /* buttons color on hover */
  104. }
  105.  
  106. /* Let's get this party started */
  107. .info::-webkit-scrollbar {
  108.     width: 5px;
  109. }
  110.  
  111. /* Track */
  112. .info::-webkit-scrollbar-track {
  113.     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
  114.     -webkit-border-radius: 10px;
  115.     border-radius: 10px;
  116. }
  117.  
  118. /* Handle */
  119. .info::-webkit-scrollbar-thumb {
  120.     -webkit-border-radius: 10px;
  121.             height:auto;
  122.     border-radius: 10px;
  123.     background: rgba(206, 136, 51, 0.8); /* scrollbar color */
  124.     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  125. }
  126.  
  127. /* headshot at top */
  128.  
  129. .himg {
  130.     border: 1px solid black; /* headshot image border */
  131.     border-radius: 100px;
  132.     padding: 5px;
  133.     margin-top: 10px;
  134.     background-color: white; /* headshot image background color */
  135. }
  136.  
  137. #s-m-t-tooltip {
  138.     position: relative;
  139.     overflow: hidden;
  140.     z-index: 99999;
  141.     max-width: 200px;
  142.     margin: 10px 0 0 10px;
  143.     padding: 6px 6px 6px 6px;
  144.     font-family: 'Raleway', sans-serif;
  145.     background: #CE8833; /* link title background color */
  146.     border: 0px solid black;
  147.     border-radius: 5px;
  148.     line-height: 100%;
  149.     letter-spacing: 1px;
  150.     color: #fff;
  151.     font-size: 10px;
  152.     font-weight: lighter;
  153. }
  154.  
  155. /* this is for the credit please dont touch */
  156.  
  157. .credit {
  158.     position:fixed;
  159.     background-color:
  160.     #ffffff;
  161.     right:10px;
  162.     bottom:10px;
  163.     padding:4px;
  164.     color:#ffffff;
  165.     border:1px solid #000000;
  166.     font-size:10px;
  167. }
  168.  
  169. .credit a {
  170.     color: black;
  171.     text-decoration: none;
  172.     -webkit-transition: all 0.3s ease-in-out;
  173.     -moz-transition: all 0.3s ease-in-out;
  174.     -ms-transition: all 0.3s ease-in-out;
  175.     -o-transition: all 0.3s ease-in-out;
  176. }
  177.  
  178. .credit a:hover {
  179.     text-shadow: 2px 0 .2px #FF0000, -2px 0 .2px #00F1F5;
  180.     -webkit-transition: all 0.3s ease-in-out;
  181.     -moz-transition: all 0.3s ease-in-out;
  182.     -ms-transition: all 0.3s ease-in-out;
  183.     -o-transition: all 0.3s ease-in-out;
  184. }
  185.  
  186. /* end of credit */
  187.  
  188.  
  189. </style>
  190. </head>
  191. <body onload="window.resizeTo(1000,600)">
  192.  
  193. <center><img src="http://orig13.deviantart.net/53fa/f/2017/137/5/e/serendipitxus_by_fiorak-db9j7si.png" class="himg"></center>
  194.  
  195. <div class="tab">
  196.   <button class="tablinks" onclick="openTab(event, 'One')" id="defaultOpen">1</button>
  197.   <button class="tablinks" onclick="openTab(event, 'Two')">2</button>
  198.   <button class="tablinks" onclick="openTab(event, 'Three')">3</button>
  199.   <button class="tablinks" onclick="openTab(event, 'Four')">4</button>
  200.   <button class="tablinks" onclick="openTab(event, 'Five')">5</button>
  201. </div>
  202.  
  203. <div class="links">
  204.   <a href="URL" title="title">link 1</a>
  205.   <a href="URL" title="title">link 2</a>
  206.   <a href="URL" title="title">link 3</a>
  207.   <a href="URL" title="title">link 4</a>
  208.   <a href="URL" title="title">link 5</a>
  209. </div>
  210.  
  211. <div class="info">
  212.  
  213. <div id="One" class="tabcontent">
  214.   <h3>Title</h3>
  215.   <p>Info
  216.   </p>
  217. </div>
  218.  
  219. <div id="Two" class="tabcontent">
  220.   <h3>Title</h3>
  221.   <p>Info</p>
  222. </div>
  223.  
  224. <div id="Three" class="tabcontent">
  225.   <h3>Title</h3>
  226.   <p>Info</p>
  227. </div>
  228.  
  229. <div id="Four" class="tabcontent">
  230.   <h3>Title</h3>
  231.   <p>Info</p>
  232. </div>
  233.  
  234. <div id="Five" class="tabcontent">
  235.   <h3>Title</h3>
  236.   <p>Info</p>
  237. </div>
  238.  
  239. </div>
  240.  
  241.  
  242. <div class="credit"><a title="made by latvia" href="http://latvia.co.vu/">credit</font></a></div>
  243.  
  244. <script>
  245. function openTab(evt, tabName) {
  246.     var i, tabcontent, tablinks;
  247.     tabcontent = document.getElementsByClassName("tabcontent");
  248.     for (i = 0; i < tabcontent.length; i++) {
  249.         tabcontent[i].style.display = "none";
  250.     }
  251.     tablinks = document.getElementsByClassName("tablinks");
  252.     for (i = 0; i < tablinks.length; i++) {
  253.         tablinks[i].className = tablinks[i].className.replace(" active", "");
  254.     }
  255.     document.getElementById(tabName).style.display = "block";
  256.     evt.currentTarget.className += " active";
  257. }
  258.  
  259. // Get the element with id="defaultOpen" and click on it
  260. document.getElementById("defaultOpen").click();
  261. </script>
  262.      
  263. </body>
  264. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!