API tools faq
paste
Advertisement
artiecore

custom about page

artiecore
Apr 17th, 2021 (edited)
1,710
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.77 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!-----
  5. ♡ custom about page by him1974 ♡
  6.  
  7. check the original post for resources and shit ^__^
  8.  
  9. u can change the credit but dont remove it plz and thx
  10. ----->
  11.  
  12. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  13. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script src="https://static.tumblr.com/rtrqcib/VGGnlh8rf/jquery.style-my-tooltips.min.js"></script><script>(function($){$(document).ready(function(){$("a[title]").style_my_tooltips({tip_follows_cursor:true,tip_delay_time:0,tip_fade_speed:0,attribute:"title"});});})(jQuery);</script>
  14.  
  15. <title> TITLE HERE </title>
  16.  
  17. <script>document.oncontextmenu = new Function("return false;");</script>
  18.  
  19.  
  20. <link rel="shortcut icon" href="IMAGE URL HERE">
  21. <link rel="alternate" type="application/rss+xml" href="{rss}">
  22.  
  23.  
  24. <style type="text/css">
  25.  
  26.  
  27. body {
  28. font-family: Arial; /* font */
  29. font-size:15px; /* font size */
  30. color:#000; /* font color */
  31. text-align:center;
  32. background-color:#fff; /* bg color */
  33. background-image: url(BG IMAGE URL);
  34. background-size: cover;
  35. background-attachment: fixed;
  36. }
  37.  
  38. .hej{
  39. top:50%;
  40. left:50%;
  41. height:auto;
  42. transform:translate(-50%,-50%);
  43. text-align:center;
  44. position:fixed;
  45. background-color:#dedede; /* container bg color */
  46. border:2px solid #000; /* mess w the border */
  47. }
  48.  
  49. a {
  50. color:#000; /* link color */
  51. text-decoration:none;
  52. }
  53.  
  54. a:hover {
  55. color:#fff;/* link color hover */
  56. -moz-transition-duration:0.4s;
  57. -webkit-transition-duration:0.4s;
  58. -o-transition-duration:0.4s;
  59. }
  60.  
  61. /* Style the tab */
  62. .tab {
  63. overflow: hidden;
  64. width:700px;
  65. text-align:center;
  66.  
  67. }
  68.  
  69. .tab button {
  70. width:100px;
  71. cursor:pointer;
  72. background-color:inherit;
  73. border: none;
  74. outline: none;
  75. padding: 14px 16px;
  76. color:#ff0000; /* tab font color */
  77. font-size: 20px; /* tab font size */
  78. }
  79.  
  80. .tab button a{
  81. color:#ff0000; /* tab font color */
  82. }
  83.  
  84. .tabcontent {
  85. display: none;
  86. z-index:1;
  87. width:700px;
  88. text-align:center;
  89. }
  90.  
  91. .tooltip{
  92. display:inline;
  93. position:relative;
  94. }
  95.  
  96. #s-m-t-tooltip{
  97. max-width:300px;
  98. padding:5px;
  99. margin:20px 7px -2px 20px;
  100. background-color: rgba(255,255,255, 0.5);
  101. backdrop-filter: blur(5px);
  102. letter-spacing:1px;
  103. text-align:center;
  104. color:black;
  105. text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  106. z-index:11;
  107. -o-transition: all 0.3s ease-out;
  108. -webkit-transition: all 0.3s ease-out;
  109. -moz-transition: all 0.3s ease-out;
  110. }
  111.  
  112.  
  113. ::selection {
  114. background: black;
  115. color:white;
  116. }
  117. ::-moz-selection {
  118. background: black;
  119. color:white;
  120. }
  121. ::-webkit-scrollbar {
  122. width: 16px;
  123. height: 10px;
  124. }
  125. ::-webkit-scrollbar-thumb {
  126. background-color: #fff;
  127. background-image: url(https://i.imgur.com/Qtm9Z60.png);
  128. border-top: 1px solid #bdbdbd;
  129. border-left: 1px solid #bdbdbd;
  130. border-right: 1px solid black;
  131. border-bottom: 1px solid black;
  132. }
  133. ::-webkit-scrollbar-track {
  134. background-color: #fff;
  135. background-image: url(https://i.imgur.com/IGXGYKz.png);
  136. }
  137. ::-webkit-scrollbar-button:vertical:increment {
  138. background-image: url(https://i.imgur.com/WhC8iy3.png);
  139. width: 14px;
  140. height: 16px;
  141. border-top: 1px solid #bdbdbd;
  142. border-left: 1px solid #bdbdbd;
  143. border-right: 1px solid black;
  144. border-bottom: 1px solid black;
  145. }
  146. ::-webkit-scrollbar-button:vertical:decrement {
  147. background-image: url(https://i.imgur.com/fQ18mrR.png);
  148. border-top: 1px solid #bdbdbd;
  149. border-left: 1px solid #bdbdbd;
  150. border-right: 1px solid black;
  151. border-bottom: 1px solid black;
  152. width: 14px;
  153. height: 16px;
  154. }
  155. ::-webkit-scrollbar-button:vertical:decrement {
  156. background-image: url(https://i.imgur.com/fQ18mrR.png);
  157. border-top: 1px solid #bdbdbd;
  158. border-left: 1px solid #bdbdbd;
  159. border-right: 1px solid black;
  160. border-bottom: 1px solid black;
  161. width: 14px;
  162. height: 16px;
  163. }
  164.  
  165. .tmblr-iframe-compact .tmblr-iframe--unified-controls {display:none!important;}
  166. </style>
  167.  
  168.  
  169. </head>
  170.  
  171. <body>
  172. <div class="hej">
  173.  
  174. <div class="tab">
  175. <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">ONE</button>
  176. <button class="tablinks" onclick="openCity(event, 'Paris')">TWO</button>
  177. <button class="tablinks" onclick="openCity(event, 'Tokyo')">THREE</button>
  178. <button class="tablinks"><a href="https://ur url here.tumblr.com/">HOME</a></button>
  179.  
  180. </div>
  181.  
  182.  
  183.  
  184. <div id="London" class="tabcontent">
  185. <table style="width:100%; table-layout: fixed;">
  186. <tr>
  187. <center>
  188. <td style="width: 50%;">
  189. <img style="height:auto; width:100%" src="put an image here...or dont"/>
  190. </td>
  191.  
  192. <td style="width: 50%;">
  193. <p style="font-size: 25px;">TITLE</p>
  194. <p> text text text text text <br>
  195. text text text text text <br>
  196. text text text text text<br>
  197. text text text text text <br>
  198. <a href="/">this is a link lol</a></p>
  199. </td>
  200. </tr>
  201. </table>
  202. </center>
  203. </div>
  204.  
  205.  
  206. <div id="Paris" class="tabcontent">
  207. <table style="text-align: center; border-spacing: 0px; width:100%">
  208. <tbody>
  209. <tr>
  210. <td style="width:50%">
  211. <p style="font-size: 25px;">TITLE</p>
  212. <p>text text text text text <br>
  213. text text text text text <br>
  214. text text text text text<br>
  215. text text text text text <br>
  216. text text text text text <br></p>
  217. </td>
  218.  
  219. <td style="width:50%">
  220. <p style="font-size: 25px;">TITLE</p>
  221. <p>text text text text text<br>
  222. text text text text text <br>
  223. text text text text text<br>
  224. text text text text text <br>
  225. text text text text text <br></p>
  226. </td>
  227. </tr>
  228. </tbody>
  229. </table>
  230. <p>text text text text text
  231. text text text text text <br>
  232. text text text text text
  233. text text text text text<br>
  234. text text text text text
  235. text text text text text <br></p>
  236.  
  237. </div>
  238.  
  239. <div id="Tokyo" class="tabcontent">
  240. <p style="font-size: 25px;">TITLE</p>
  241. <p>text text text text text
  242. text text text text text <br>
  243. text text text text text
  244. text text text text text<br>
  245. text text text text text
  246. text text text text text <br></p>
  247. </div>
  248. </div>
  249.  
  250. <script>
  251. function openCity(evt, cityName) {
  252. var i, tabcontent, tablinks;
  253. tabcontent = document.getElementsByClassName("tabcontent");
  254. for (i = 0; i < tabcontent.length; i++) {
  255. tabcontent[i].style.display = "none";
  256. }
  257. tablinks = document.getElementsByClassName("tablinks");
  258. for (i = 0; i < tablinks.length; i++) {
  259. tablinks[i].className = tablinks[i].className.replace(" active", "");
  260. }
  261. document.getElementById(cityName).style.display = "block";
  262. evt.currentTarget.className += " active";
  263. }
  264.  
  265. // Get the element with id="defaultOpen" and click on it
  266. document.getElementById("defaultOpen").click();
  267. </script>
  268. <a style="position:fixed;left:3px;bottom:3px;" <a href="https://him1974.tumblr.com/" title="code by artie">🃏</a>
  269. </body>
  270. </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!