API tools faq
paste
LatviaCPI

for Mayy

LatviaCPI
Aug 15th, 2017
77
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.81 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <title>Sniff Title Here</title>
  4. <!--- CODED BY LATVIA // EVAN, PLEASE DO NOT TAKE THESE CODES. --->
  5. <head>
  6.  
  7. <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>
  8.  
  9.  
  10. <style>
  11.  
  12. body {
  13. background: url(https://i.ytimg.com/vi/qyYIK7wSZ6g/maxresdefault.jpg);
  14. background-size: cover;
  15. background-repeat: no-repeat;
  16. }
  17.  
  18. .main {
  19. border: 15px solid transparent;
  20. padding: 15px;
  21. border-image-source: url(https://i.ytimg.com/vi/-Or3_YFLyyA/maxresdefault.jpg);
  22. border-image-slice: 30;
  23. margin: 0 auto;
  24. overflow: hidden;
  25. height: 300px;
  26. width: 600px;
  27. margin-top: 50px;
  28. }
  29.  
  30.  
  31. /* Style the tab */
  32. div.tab {
  33. float: left;
  34. border: 1px solid #ccc;
  35. background: url(http://flylib.com/books/2/105/1/html/2/images/0321316207/graphics/13fig12_02.gif);
  36. background-size: cover;
  37. background-color: #8A8A8A;
  38. width: 20%;
  39. text-align: center;
  40. margin-right: 30px;
  41. height: 300px;
  42. }
  43.  
  44. /* Style the buttons inside the tab */
  45. div.tab button {
  46. display: block;
  47. background-color: #A06868;
  48. color: black; /* text color */
  49. margin: 15px 0px 15px 0px;
  50. padding: 8px 0px 8px 0px;
  51. text-align: center;
  52. width: 100%;
  53. border: none;
  54. outline: none;
  55. cursor: pointer;
  56. transition: 0.3s;
  57. font-size: 17px
  58. }
  59.  
  60. /* Change background color of buttons on hover */
  61. div.tab button:hover {
  62. background-color: #926262;
  63. }
  64.  
  65. /* Create an active/current "tab button" class */
  66. div.tab button.active {
  67. background-color: black;
  68. color: white;
  69. }
  70.  
  71. /* Style the tab content */
  72. .tabcontent {
  73. float: left;
  74. padding: 0px 12px;
  75. border: 1px solid #ccc;
  76. text-align: center;
  77. width: 70%;
  78. overflow: auto;
  79. color: white;
  80. height: 300px;
  81. -webkit-animation: fadeEffect 1.8s;
  82. animation: fadeEffect 1.8s;
  83. }
  84.  
  85. /* Fade in tabs */
  86. @-webkit-keyframes fadeEffect {
  87. from {opacity: 0;}
  88. to {opacity: 1;}
  89. }
  90.  
  91. @keyframes fadeEffect {
  92. from {opacity: 0;}
  93. to {opacity: 1;}
  94. }
  95.  
  96. iframe {display:none !important;}
  97.  
  98.  
  99.  
  100. /* MUSIC PLAYER*/
  101. #musicicon {
  102. position: fixed;
  103. bottom: 20px;
  104. left: 20px;
  105. width: 26px;
  106. height: 26px;
  107. -webkit-transition: all .7s ease;
  108. -moz-transition: all .7s ease;
  109. -o-transition: all .7s ease;
  110. transition: all .7s ease;
  111. }
  112.  
  113. .micon {
  114. z-index: 1;
  115. width: 15px;
  116. background: #000;
  117. padding: 2px;
  118. width: 26px;
  119. height: 26px;
  120. border-radius: 4px;
  121. -webkit-transition: all .7s ease;
  122. -moz-transition: all .7s ease;
  123. -o-transition: all .7s ease;
  124. transition: all .7s ease;
  125. }
  126.  
  127. .micon:hover{
  128. border-top-left-radius: 4px;
  129. border-bottom-left-radius: 4px;
  130. border-top-right-radius: 0px;
  131. border-bottom-right-radius: 0px;
  132. }
  133.  
  134. .micon img { width: 15px; margin: 5px; }
  135.  
  136. .musicplayer {
  137. z-index: -1;
  138. position: absolute;
  139. margin-top: -30px;
  140. background: #000;
  141. border: 1px solid #fff;
  142. border-left: none;
  143. margin-left: 5px;
  144. border-radius: 4px;
  145. width: 0px;
  146. height: 10px;
  147. padding: 9px;
  148. overflow: hidden;
  149. -webkit-transition: all .7s ease;
  150. -moz-transition: all .7s ease;
  151. -o-transition: all .7s ease;
  152. transition: all .7s ease;
  153. }
  154.  
  155. .mplayer { margin-left: -27px; }
  156.  
  157. #musicicon:hover .musicplayer {
  158. margin-left: 29px;
  159. height: 10px;
  160. width: 100px;
  161. border-top-left-radius: 0px;
  162. border-bottom-left-radius: 0px;
  163. border-top-right-radius: 4px;
  164. border-bottom-right-radius: 4px;
  165. }
  166.  
  167. #musicicon:hover .micon {
  168. border-top-left-radius: 4px;
  169. border-bottom-left-radius: 4px;
  170. border-top-right-radius: 0px;
  171. border-bottom-right-radius: 0px;
  172. }
  173.  
  174. .player {
  175. margin-top: -9px;
  176. margin-left: -33px;
  177. }
  178. /* END OF PLAYER */
  179.  
  180.  
  181. /* Scrollbar mapping */
  182. .tabcontent::-webkit-scrollbar {
  183. width: 5px;
  184. }
  185.  
  186. /* Track */
  187. .tabcontent::-webkit-scrollbar-track {
  188. -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  189. -webkit-border-radius: 10px;
  190. border-radius: 10px;
  191. }
  192.  
  193. /* Handle */
  194. .tabcontent::-webkit-scrollbar-thumb {
  195. -webkit-border-radius: 10px;
  196. height:auto;
  197. border-radius: 10px;
  198. background: rgba(0, 0, 0,1);
  199. -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  200. }
  201.  
  202. .tabcontent::-webkit-scrollbar-track-piece {
  203. -webkit-border-radius: 10px;
  204. border-radius: 10px;
  205. background: rgba(213, 211, 211,0.8);
  206. }
  207.  
  208.  
  209. #s-m-t-tooltip {
  210. position: relative;
  211. overflow: hidden;
  212. z-index: 99999;
  213. max-width: 200px;
  214. margin: 10px 0 0 10px;
  215. padding: 6px 10px 6px 10px;
  216. font-family: 'Raleway', sans-serif;
  217. background: black;
  218. border: 0px solid black;
  219. border-radius: 0px;
  220. line-height: 100%;
  221. text-transform: uppercase;
  222. letter-spacing: 1px;
  223. color: #fff;
  224. font-size: 10px;
  225. font-weight: lighter;
  226. }
  227.  
  228. /* this is for the credit please dont touch */
  229.  
  230. .credit {
  231. position:fixed;
  232. background-color:
  233. #ffffff;
  234. right:10px;
  235. bottom:10px;
  236. padding:4px;
  237. color:#ffffff;
  238. border:1px solid #000000;
  239. font-size:10px;
  240. }
  241.  
  242. .credit a {
  243. color: black;
  244. text-decoration: none;
  245. -webkit-transition: all 0.3s ease-in-out;
  246. -moz-transition: all 0.3s ease-in-out;
  247. -ms-transition: all 0.3s ease-in-out;
  248. -o-transition: all 0.3s ease-in-out;
  249. }
  250.  
  251. .credit a:hover {
  252. text-shadow: 2px 0 .2px #FF0000, -2px 0 .2px #00F1F5;
  253. -webkit-transition: all 0.3s ease-in-out;
  254. -moz-transition: all 0.3s ease-in-out;
  255. -ms-transition: all 0.3s ease-in-out;
  256. -o-transition: all 0.3s ease-in-out;
  257. }
  258.  
  259. /* end of credit */
  260.  
  261. </style>
  262. </head>
  263.  
  264. <body onload="window.resizeTo(1200,650)">
  265.  
  266. <div class="main">
  267.  
  268. <div class="tab">
  269. <button class="tablinks" onclick="openCity(event, 'One')" id="defaultOpen">Placehold</button>
  270. <button class="tablinks" onclick="openCity(event, 'Two')">Placehold</button>
  271. <button class="tablinks" onclick="openCity(event, 'Three')">Placehold</button>
  272. <button class="tablinks" onclick="openCity(event, 'Four')">Placehold</button>
  273.  
  274. <div id="musicicon"><div class="micon"><img src="http://static.tumblr.com/n9vj50j/cxEn20wqg/12.gif"></div><div class="musicplayer"><div class="player"><embed src="https://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=http://k003.kiwi6.com/hotlink/uwalzb10l2/Dark_Foreboding.mp3&t0=Darkness&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" /></div><div class="mplayer"></div></div></div>
  275.  
  276. </div>
  277.  
  278. <div id="One" class="tabcontent">
  279. <h3>Placehold</h3>
  280. <p>Placehold<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
  281. </div>
  282.  
  283. <div id="Two" class="tabcontent">
  284. <h3>Placehold</h3>
  285. <p>Placehold</p>
  286. </div>
  287.  
  288. <div id="Three" class="tabcontent">
  289. <h3>Placehold</h3>
  290. <p>Placehold</p>
  291. </div>
  292.  
  293. <div id="Four" class="tabcontent">
  294. <h3>Placehold</h3>
  295. <p>Placehold</p>
  296. </div>
  297.  
  298. </div>
  299.  
  300.  
  301. <div class="credit"><a title="made by latvia" href="http://latvia.co.vu/">credit</a></div>
  302.  
  303.  
  304. <script>
  305. function openCity(evt, cityName) {
  306. var i, tabcontent, tablinks;
  307. tabcontent = document.getElementsByClassName("tabcontent");
  308. for (i = 0; i < tabcontent.length; i++) {
  309. tabcontent[i].style.display = "none";
  310. }
  311. tablinks = document.getElementsByClassName("tablinks");
  312. for (i = 0; i < tablinks.length; i++) {
  313. tablinks[i].className = tablinks[i].className.replace(" active", "");
  314. }
  315. document.getElementById(cityName).style.display = "block";
  316. evt.currentTarget.className += " active";
  317. }
  318.  
  319. // Get the element with id="defaultOpen" and click on it
  320. document.getElementById("defaultOpen").click();
  321. </script>
  322.  
  323.  
  324. </body>
  325. </html>
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!