API tools faq
paste
foundcas

riveroses javascript request

foundcas
Oct 7th, 2022
30
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.30 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <title>navigation</title>
  6.  
  7. <link rel="shortcut icon" href="{Favicon}">
  8. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  9.  
  10. <!--google fonts-->
  11. <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
  12.  
  13. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  14. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  15. <script>
  16. (function($){
  17. $(document).ready(function(){
  18. $("[title]").style_my_tooltips({
  19. tip_follows_cursor:true,
  20. tip_delay_time:200,
  21. tip_fade_speed:300
  22. }
  23. );
  24. });
  25. })(jQuery);
  26. </script>
  27.  
  28. <style type="text/css">
  29. :root{
  30. --text:#444;
  31. --background:#fbfbfb;
  32. --accent:#eee;
  33. --accent-two:#fff;
  34. }
  35. #s-m-t-tooltip{
  36. max-width:300px;
  37. margin:15px;
  38. padding:2px 8px;
  39. border:1px solid #000;
  40. background:rgba(255,255,255,.3);
  41. color:#000;
  42. z-index:999999;
  43. font-size:10px;
  44. font-style:italic;
  45. text-transform:lowercase;
  46. box-shadow:1px 1px 3px rgba(204, 221, 221, 0.3);
  47. }
  48.  
  49. ::selection{
  50. color:#334455;
  51. background:rgba(255,255,255,.3);
  52. }
  53.  
  54. ::-webkit-scrollbar{
  55. background:none;
  56. width:4px;
  57. }
  58.  
  59. ::-webkit-scrollbar-thumb{
  60. background:var(--accent);
  61. border:1px solid #333;
  62. }
  63.  
  64. a{
  65. color:#333;
  66. text-decoration:underline;
  67. }
  68.  
  69. a:hover{
  70. cursor:help;
  71. }
  72.  
  73. body{
  74. font-family:poppins;
  75. font-size:14px;
  76. cursor:crosshair;
  77. margin:0px;
  78. color:var(--text);
  79. background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAIUlEQVQoU2O8c+3DfwYiACNIoYqWACMhtaMK8YYQ0cEDAD+RJ6zYB9QqAAAAAElFTkSuQmCC) repeat;
  80. }
  81.  
  82. #container{
  83. align-self:center;
  84. }
  85. h1,h2,h3,h4,h5,h6{
  86. text-align:center;
  87. border-bottom:1px solid var(--text);
  88. margin-bottom:0px;
  89. }
  90. .box{
  91. width:calc(100% / 4);
  92. margin:50px;
  93. display:inline-block;
  94. background:rgba( 255, 255, 255, 0.3);
  95. box-shadow:0 8px 32px 0 rgba( 31, 38, 135, 0.35);
  96. backdrop-filter:blur( 2px );
  97. -webkit-backdrop-filter:blur(1px);
  98. border-radius:10px;
  99. border:1px solid rgba( 0, 0, 0, 0.5);
  100. }
  101.  
  102. .box a{
  103. text-align:center;
  104. display:block;
  105. text-decoration:none;
  106. padding:10px;
  107. border-radius:10px;
  108. }
  109.  
  110. .box a:hover{
  111. background: var(--accent-two);
  112. }
  113. .box img{
  114. width:30px;
  115. height:30px;
  116. border-radius:100%;
  117. vertical-align:middle;
  118. }
  119. /* Style the tab */
  120. .tab {
  121. overflow: hidden;
  122. border: 1px solid var(--text);
  123. background-color: rgba( 255, 255, 255, 0.7);
  124. }
  125.  
  126. /* Style the buttons inside the tab */
  127. .tab button {
  128. font-weight:bold;
  129. background-color: rgba( 255, 255, 255, 0);
  130. float: left;
  131. border: none;
  132. outline: none;
  133. cursor: pointer;
  134. padding: 14px 16px;
  135. transition: 0.3s;
  136. }
  137.  
  138. /* Change background color of buttons on hover */
  139. .tab button:hover {
  140. background-color:rgba( 255, 255, 255, 0.8);
  141. }
  142.  
  143. /* Create an active/current tablink class */
  144. .tab button.active {
  145. background-color:var(--accent);
  146. }
  147.  
  148. /* Style the tab content */
  149. .tabcontent {
  150. display: none;
  151. padding: 6px 12px;
  152. -webkit-animation: fadeEffect 1s;
  153. animation: fadeEffect 1s;
  154. }
  155.  
  156. /*credit*/
  157. .credit{
  158. position:fixed;
  159. bottom:15px;
  160. right:15px;
  161. -moz-transition:.8s ease;
  162. -webkit-transition:.8s ease;
  163. -o-transition:.8s ease;
  164. }
  165. .credit img{
  166. width:30px;
  167. height:auto;
  168. }
  169. .credit:hover{
  170. -moz-transform:rotate(360deg);
  171. -webkit-transform:rotate(360deg);
  172. -o-transform:rotate(360deg);
  173. -moz-transition:.8s ease;
  174. -webkit-transition:.8s ease;
  175. -o-transition:.8s ease;
  176. }
  177. </style>
  178. </head>
  179. <body>
  180.  
  181. <!--boxes for links-->
  182. <div id="container">
  183.  
  184. <div class="tab">
  185. <button id="defaultOpen" class="tablinks" onclick="openTab(event, 'Group-1')">category 1</button>
  186. <button class="tablinks" onclick="openTab(event, 'Group-2')">category 2</button>
  187. <button class="tablinks" onclick="openTab(event, 'Group-3')">category 3</button>
  188. </div>
  189.  
  190. <div id="Group-1" class="tabcontent">
  191. <div class="box">
  192. <h3>title</h3>
  193. <a href="/">link</a>
  194. <a href="/">link</a>
  195. <a href="/">link</a>
  196. <a href="/">link</a>
  197. </div>
  198.  
  199. <div class="box">
  200. <h3>title</h3>
  201. <a href="/">link</a>
  202. <a href="/">link</a>
  203. <a href="/">link</a>
  204. <a href="/">link</a>
  205. </div>
  206. </div>
  207.  
  208. <div id="Group-2" class="tabcontent">
  209. <div class="box">
  210. <h3>title</h3>
  211. <a href="/">link</a>
  212. <a href="/">link</a>
  213. <a href="/">link</a>
  214. <a href="/">link</a>
  215. </div>
  216.  
  217. <div class="box">
  218. <h3>title</h3>
  219. <a href="/">link</a>
  220. <a href="/">link</a>
  221. <a href="/">link</a>
  222. <a href="/">link</a>
  223. </div>
  224. <div class="box">
  225. <h3>title</h3>
  226. <a href="/">link</a>
  227. <a href="/">link</a>
  228. <a href="/">link</a>
  229. <a href="/">link</a>
  230. </div>
  231. </div>
  232.  
  233. <div id="Group-3" class="tabcontent">
  234. <div class="box">
  235. <h3>title</h3>
  236. <a href="/">link</a>
  237. <a href="/">link</a>
  238. <a href="/">link</a>
  239. <a href="/">link</a>
  240. </div>
  241.  
  242. <div class="box">
  243. <h3>title</h3>
  244. <a href="/">link</a>
  245. <a href="/">link</a>
  246. <a href="/">link</a>
  247. <a href="/">link</a>
  248. </div>
  249. </div>
  250. </div>
  251. <!--credit-->
  252. <div class="credit">
  253. <a title="theme by capecoding" href="https://capecoding.tumblr.com"><img src="https://static.tumblr.com/r44duse/taiqn636j/hjj_copy.png"></a>
  254. </div>
  255. <script>
  256. // Get the element with id="defaultOpen" and click on it
  257. document.getElementById("defaultOpen").click();
  258. function openTab(evt, cityName) {
  259. var i, tabcontent, tablinks;
  260. tabcontent = document.getElementsByClassName("tabcontent");
  261. for (i = 0; i < tabcontent.length; i++) {
  262. tabcontent[i].style.display = "none";
  263. }
  264. tablinks = document.getElementsByClassName("tablinks");
  265. for (i = 0; i < tablinks.length; i++) {
  266. tablinks[i].className = tablinks[i].className.replace(" active", "");
  267. }
  268. document.getElementById(cityName).style.display = "block";
  269. evt.currentTarget.className += " active";
  270. }
  271. </script>
  272.  
  273. </body>
  274. </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!