API tools faq
paste
Advertisement
elsaofarendelle

Tabbed Info Page

elsaofarendelle
Mar 6th, 2018
96
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.72 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="//www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4.  
  5.  
  6. <!-------------------------------------------
  7. Code by elsaofarendelle,
  8. with help from noodlehelps.
  9. Don't copy or distribute.
  10. Don't claim as your own.
  11. -------------------------------------------->
  12.  
  13.  
  14. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  15.  
  16. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  17.  
  18. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  19.  
  20. <link href="https://fonts.googleapis.com/css?family=Sorts+Mill+Goudy" rel="stylesheet">
  21.  
  22. <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
  23.  
  24. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  25. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  26. <script>
  27. (function($){
  28. $(document).ready(function(){
  29. $("a[title]").style_my_tooltips({
  30. tip_follows_cursor:true,
  31. tip_delay_time:90,
  32. tip_fade_speed:600,
  33. attribute:"title"
  34. });
  35. });
  36. })(jQuery);
  37. </script>
  38.  
  39. <style type="text/css">
  40.  
  41. body {
  42. background:#eee;
  43. background-image:url('');
  44. color: #a4a4a4;
  45. font-family: 'Sorts Mill Goudy', serif;
  46. font-size: 11px;
  47. margin: 0;
  48. padding: 0;
  49. word-wrap: break-word;
  50. line-height:150%;
  51. }
  52.  
  53. a {
  54. color: #eee;
  55. text-decoration: none;
  56. -webkit-transition: all .3s;
  57. -moz-transition: all .3s;
  58. -o-transition: all .3s;
  59. -ms-transition: all .3s;
  60. transition: all .3s;
  61. }
  62.  
  63. a:hover{
  64. color: #eee;
  65. -webkit-transition: all .3s;
  66. -moz-transition: all .3s;
  67. -o-transition: all .3s;
  68. -ms-transition: all .3s;
  69. transition: all .3s;
  70. }
  71.  
  72. #kristoff {
  73. width:300px;
  74. position:fixed;
  75. margin-left:530px;
  76. margin-top:75px;
  77. padding:8px;
  78. z-index:50;
  79. }
  80.  
  81. #kristoff a{
  82. width:75px;
  83. display:inline-block;
  84. background: #eee;
  85. color: #546a88;
  86. border: 3px double #546a88;
  87. margin:2px;
  88. font-size:12px
  89. font: font-family: 'Playfair Display', serif;
  90. text-align:center;
  91. text-transform:uppercase;
  92. padding-top:2px;
  93. line-height:120%;
  94. padding:3px;
  95. }
  96.  
  97. h1{
  98. text-transform:uppercase;
  99. font-size:13px;
  100. }
  101.  
  102. ul{
  103. list-style-type:square;
  104. }
  105.  
  106. ol{
  107. list-style-type:;
  108. }
  109.  
  110. #elsa{
  111. width:500px;
  112. margin-left:auto;
  113. margin-right:auto;
  114. }
  115.  
  116. .fixerupper {
  117. background:#546a88;
  118. border:3px double #eee;
  119. color:#eee;
  120. margin-left:auto;
  121. margin-right:auto;
  122. width:515px;
  123. margin-bottom:200px;
  124. text-align:justify;
  125. position:fixed;
  126. }
  127.  
  128. #anna{
  129. position:static;
  130. margin-top:80px;
  131. margin-bottom:50px;
  132. text-align:center;
  133. font-family: 'Playfair Display', serif;
  134. text-transform:uppercase;
  135. letter-spacing:2px;
  136. font-weight:bold;
  137. font-size:9px;
  138. color: #eee;
  139. }
  140.  
  141. .sven{
  142. font-family:'Playfair Display', serif;
  143. color: #546a88;
  144. text-align:center;
  145. font-size: 35px;
  146. position: fixed;
  147. margin-top: auto;
  148. margin-left:200px;
  149. margin-top:-50px;
  150. text-transform:uppercase;
  151. }
  152.  
  153. .description{
  154. background-color: #546a88;
  155. border: 3px double #eee;
  156. width:500px;
  157. height:100px;
  158. padding: 12px;
  159. text-align:justify;
  160. font-style: normal;
  161. font-family: 'Playfair Display', serif;
  162. font-size:10px;
  163. color: #eee;
  164. text-shadow: none;
  165. letter-spacing:1px;
  166. line-height:100%;
  167. margin-bottom:10px;
  168. position:fixed;
  169. }
  170.  
  171. #olaf{
  172. display:inline-block;
  173. text-align:center;
  174. margin-top:120px;
  175. }
  176.  
  177. .tabs {
  178. }
  179.  
  180. .tab-links:after {
  181. display:block;
  182. clear:both;
  183. content:'';
  184. }
  185.  
  186. .tab-links li {
  187. margin-right:0px;
  188. margin-left:0px;
  189. display:inline-block;
  190. min-width:80px;
  191. background: #546a88;
  192. color: #eee;
  193. border: 3px double #eee;
  194. font-size:12px
  195. font-family: 'Playfair Display', serif;
  196. text-align:center;
  197. text-transform:uppercase;
  198. margin:5px;
  199. line-height:50%;
  200. }
  201.  
  202. .tab-links a {
  203. padding:10px;
  204. display:inline-block;
  205. color:#eee;
  206. transition:all linear 0.15s;
  207. }
  208.  
  209. .tab-links a:hover {
  210. border-bottom:1px none #888;
  211. text-decoration:none;
  212. }
  213.  
  214. li.active a, li.active a:hover {
  215. background:transparent;
  216. color:#546a88;
  217. border-bottom:1px none #888;
  218. background: #eee;
  219. -webkit-transition: all .3s;
  220. -moz-transition: all .3s;
  221. -o-transition: all .3s;
  222. -ms-transition: all .3s;
  223. transition: all .3s;
  224. }
  225.  
  226. .pabbi {
  227. }
  228.  
  229.  
  230. .tab {
  231. display:none;
  232. }
  233.  
  234. .tab.active {
  235. display:block;
  236. }
  237.  
  238. .credit{
  239. position:fixed;
  240. font-size:15px;
  241. right:20px;
  242. bottom:10px;
  243. z-index:51;
  244. }
  245.  
  246. .credit a {
  247. text-decoration:none;
  248. text-transform:uppercase;
  249. color:#546a88;
  250. text-shadow: -1px -1px -1px #546a88;
  251. text-shadow: 1px 1px 1px #546a88;
  252. -moz-transition-duration:.7s;
  253. -webkit-transition-duration:.7s;
  254. -o-transition-duration:.7s;
  255. }
  256.  
  257.  
  258. .credit a:hover {
  259. text-decoration:none;
  260. text-transform:uppercase;
  261. color:#546a88;
  262. text-shadow: -1px -1px -1px #546a88;
  263. text-shadow: 1px 1px 1px #546a88;
  264. }
  265.  
  266.  
  267. {CustomCSS}</style></head><body>
  268.  
  269. <div id="kristoff">
  270. <center>
  271. <a href="/">back</a>
  272. <a href="/asks">messages</a>
  273. <a href="http://elsaofarendelle.tumblr.com/dashboard">dashboard</a>
  274.  
  275. </center>
  276. </div>
  277.  
  278.  
  279. <div id="elsa">
  280.  
  281. <div id="anna">
  282.  
  283. <div class="credit">
  284. <a href="http://elsaofarendelle.tumblr.com">𝒆</a>
  285. </div>
  286.  
  287. <div class="sven">
  288. <center>Verses</center>
  289. </div>
  290.  
  291. <div class ="description">
  292. <center>
  293. <p><small>Due to the number of interactions I do, I’m unable to maintain a list of crossover and altered universe verses. The majority of my roleplays fall under these canon timelines ——they range from Frozen to post season 6 of OUAT. I'm always looking for new ideas so if you've got one don't be afraid to approach me.</small></center>
  294. </div>
  295.  
  296. <div id="olaf">
  297. <div class="tabs">
  298. <ul class="tab-links">
  299. <li class="active" style="margin-left: -22px">
  300. <a href="#tab1">Life's Too Short</a></li>
  301. <li><a href="#tab2">A Tale Of Two Sisters</a></li>
  302. <li><a href="#tab3">Once Upon A Time</a></li>
  303. </ul>
  304. </div>
  305. </div>
  306.  
  307. </div>
  308.  
  309. <div class="tabs">
  310.  
  311. <div class="pabbi">
  312. <div id="tab1" class="tab active">
  313.  
  314. <div id="tab1" class="tab">
  315. <div class="fixerupper">
  316. <center>
  317. <p>fdsfds</p>
  318. </center>
  319. </div>
  320. </div>
  321.  
  322. <div id="tab2" class="tab">
  323. <div class="fixerupper">
  324. <center>
  325. <p>dsdsfs</p>
  326. </center>
  327. </div>
  328. </div>
  329.  
  330. <div id="tab3" class="tab">
  331. <div class="fixerupper">
  332. <center>
  333. <p>ffdsgds</p>
  334.  
  335. <p></p>
  336. </center>
  337. </div>
  338. </div>
  339.  
  340. </div></div></div></div></div>
  341.  
  342.  
  343. <script>
  344. $(document).ready(function() {
  345. $('.tabs .tab-links a').on('click', function(e) {
  346. var currentAttrValue = $(this).attr('href');
  347.  
  348. // Show/Hide Tabs
  349. $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
  350.  
  351. // Change/remove current tab to active
  352. $(this).parent('li').addClass('active').siblings().removeClass('active');
  353.  
  354. e.preventDefault();
  355. });
  356. });
  357. </script>
  358.  
  359. <script>
  360. $(document).ready(function() {
  361. $('#filterOptions li a').click(function() {
  362. // fetch the class of the clicked item
  363. var ourClass = $(this).attr('class');
  364.  
  365. // reset the active class on all the buttons
  366. $('#filterOptions li').removeClass('active');
  367. // update the active state on our clicked button
  368. $(this).parent().addClass('active');
  369.  
  370. if(ourClass == 'all') {
  371. // show all our items
  372. $('#ourHolder').children('div.item').show();
  373. }
  374. else {
  375. // hide all elements that don't share ourClass
  376. $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
  377. // show all elements that do share ourClass
  378. $('#ourHolder').children('div.' + ourClass).show();
  379. }
  380. return false;
  381. });
  382. });
  383. </script>
  384.  
  385.  
  386. </body>
  387. </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!