API tools faq
paste
wcrmtails

All in One Page 01

wcrmtails
Feb 3rd, 2019 (edited)
1,405
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 26.81 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <!-----page by arithemes/darthvcder
  5.  
  6. CREDITS
  7.  
  8. icon font by suiomi
  9. tabs base code by neonbikethemes
  10. control fix and filter tutorial by cyantists
  11.  
  12. ----->
  13.  
  14. <head>
  15.  
  16.  
  17.  
  18. <title>All in One</title> <!--Title-->
  19. <link rel="shortcut icon" href="{FavIcon}" />
  20. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  21.  
  22.  
  23.  
  24.  
  25.  
  26.  
  27.  
  28.  
  29. <link href='https://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>
  30.  
  31.  
  32. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  33.  
  34. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  35.  
  36. <script src="https://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  37.  
  38. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  39.  
  40. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  41. <script src="https://static.tumblr.com/xd6ujov/9Rpouml9f/imagesloaded.pkgd.min.js"></script>
  42. <script src="https://static.tumblr.com/f6blkfc/3khouzw5b/masonry.pkgd.min.js"></script>
  43.  
  44.  
  45. <script>
  46.  
  47. $(document).ready(function(){
  48. var $grid = $(".blogroll"); $grid.imagesLoaded(function() {
  49. $grid.masonry({
  50. itemSelector: ".following",
  51. columnWidth: 162
  52. });
  53. });
  54.  
  55. </script>
  56.  
  57. <script>$(document).ready(function(){
  58. var $grid = $(".container"); $grid.imagesLoaded(function() {
  59. $grid.masonry({
  60. itemSelector: ".group",
  61. columnWidth: 100
  62. });
  63. });
  64. $(".button").click(function(){
  65. $(this).addClass("selected");
  66. $(".button").not($(this)).removeClass("selected");
  67. var ssf = $(this).attr("filter");
  68. $(".group." + ssf).show();
  69. $(".group").not("." + ssf).hide();
  70. $grid.masonry();
  71. });
  72. });</script>
  73.  
  74. <script>
  75. $(function(){
  76. var $container = $('.blogroll');
  77. $container.imagesLoaded(function(){
  78. $container.masonry({
  79. itemSelector: '.following',
  80. });
  81. });
  82.  
  83. // trigger Masonry as a callback
  84. function( newElements ) {
  85. var $newElems = $( newElements ).css({ opacity: 0 });
  86. // ensure that images load before adding to masonry layout
  87. $newElems.imagesLoaded(function(){
  88. $newElems.animate({ opacity: 1 });
  89. $container.masonry( 'appended', $newElems, true );
  90. });
  91. }
  92. );
  93. });
  94. </script>
  95.  
  96.  
  97.  
  98. <script>
  99.  
  100. $(document).ready(function(){
  101.  
  102. $(".question").not(".show").find(".answer").hide();
  103.  
  104. $(".question").click(function(){
  105.  
  106. if ($(this).find(".answer").is(":hidden")) {
  107. $(this).find(".answer").slideDown("slow");
  108. }
  109.  
  110. else {
  111. $(this).find(".answer").slideUp("slow");
  112. }
  113. });
  114.  
  115. });
  116.  
  117. </script>
  118.  
  119.  
  120. <style type="text/css">
  121.  
  122. /*FIX BY CYANTISTS*/
  123. iframe.tmblr-iframe {
  124. z-index:99999999999999!important;
  125. top:0!important;
  126. right:0!important;
  127. opacity:0.4;
  128. /* delete from here */
  129. filter:invert(1);
  130. -webkit-filter:invert(1);
  131. -o-filter:invert(1);
  132. -moz-filter:invert(1);
  133. -ms-filter:invert(1);
  134. /* to here if your blog has a dark background */
  135. transform:scale(0.6);
  136. transform-origin:100% 0;
  137. -webkit-transform:scale(0.6);
  138. -webkit-transform-origin:100% 0;
  139. -o-transform:scale(0.6);
  140. -o-transform-origin:100% 0;
  141. -moz-transform:scale(0.6);
  142. -moz-transform-origin:100% 0;
  143. -ms-transform:scale(0.6);
  144. -ms-transform-origin:100% 0;}
  145.  
  146. iframe.tmblr-iframe:hover {
  147. opacity:0.6!important;}
  148.  
  149. body {
  150. color: #9c9c9c; /*text color*/
  151. font-family: 'Karla', sans-serif;
  152. line-height: 16px;
  153. background: url('urlhere') #f8f7f7; /*background image/color*/
  154. }
  155.  
  156. body img {
  157. max-width: 100%;
  158. height: auto;
  159. }
  160.  
  161. a {
  162. text-decoration: none;
  163. color: #eee; /*link color*/
  164. }
  165. a:hover {
  166. color: #000; /*link hover*/
  167. }
  168.  
  169. i, em {
  170. color: #000; /*italics*/
  171. }
  172.  
  173. b, strong {
  174. color: #000; /*bold*/
  175. }
  176.  
  177.  
  178. h1 {
  179. text-align: left;
  180. font-size: 15px;
  181. line-height: 120%;
  182. color: #00deda; /*heading color*/
  183. font-family: 'Karla', sans-serif;
  184. text-transform: uppercase;
  185. letter-spacing: 2px;
  186. border-bottom: 1px solid #00deda; /*heading border color*/
  187. padding-bottom: 5px;
  188. }
  189.  
  190. h2 {
  191. text-align: right;
  192. font-size: 15px;
  193. line-height: 120%;
  194. color: #ffbb0f; /*second heading color*/
  195. font-family: 'Karla', sans-serif;
  196. text-transform: uppercase;
  197. letter-spacing: 2px;
  198. border-bottom: 1px solid #ffbb0f; /*second heading border color*/
  199. padding-bottom: 5px;
  200. }
  201.  
  202. ::-webkit-scrollbar-thumb {
  203. background-color: #ffbb0f; /*scrollbar color*/
  204. height: auto;
  205. border-bottom: none;
  206. }
  207. ::-webkit-scrollbar {
  208. height: 9px;
  209. width: 3px;
  210. }
  211.  
  212. #sidebar {
  213. width: 210px;
  214. padding: 20px;
  215. height: relative;
  216. background-color: #fff; /*sidebar bg color*/
  217. position: fixed;
  218. border-radius: 5px;
  219. margin-top: 150px;
  220. margin-left: 50px;
  221. border: 1px solid #eee;
  222. }
  223.  
  224. #title {
  225. width: 210px;
  226. padding: 20px;
  227. height: relative;
  228. margin-top: -20px;
  229. margin-left: -20px;
  230. background-color: #ffbb0f; /*sidebar title bg*/
  231. color: #fcfcfc; /*sidebar title color*/
  232. font-size: 20px;
  233. font-weight: bold;
  234. text-align: center;
  235. text-transform: uppercase;
  236. letter-spacing: 2px;
  237. }
  238.  
  239. #tabnav {
  240. margin-left: -40px;
  241. }
  242.  
  243. .tab-links:after {
  244. display: block;
  245. clear: both;
  246. content:'';
  247. }
  248.  
  249. .tab-links li {
  250. display: block;
  251. list-style: none;
  252. }
  253.  
  254. .tab-links a {
  255. display: block;
  256. color: #ffbb0f; /*tab name color*/
  257. padding: 10px;
  258. border-radius: 5px;
  259. font-size: 13px;
  260. margin-top: 20px;
  261. width: 190px;
  262. text-transform: uppercase;
  263. letter-spacing: 1px;
  264. }
  265.  
  266. .tab-links b {
  267. color: #00deda; /*tab number color*/
  268. border-bottom: 1px solid #00deda; /*tab number border color*/
  269. padding-bottom: 2px;
  270. }
  271.  
  272. li.active a, li.active a:hover {
  273. color: #fcfcfc; /*active tab text color*/
  274. background-color: #00deda; /*active tab background color*/
  275. -webkit-transition: all .3s;
  276. -moz-transition: all .3s;
  277. -o-transition: all .3s;
  278. -ms-transition: all .3s;
  279. transition: all .3s;
  280. }
  281.  
  282. li.active b {
  283. color: #fcfcfc; /*active tab number color*/
  284. }
  285.  
  286. /*TABS*/
  287.  
  288. .tabcontent {
  289. position: static;
  290. margin-left: auto;
  291. margin-right: auto;
  292. width: 520px;
  293. text-align: center;
  294. margin-bottom: 200px;
  295. }
  296.  
  297. .tabs {
  298. width: 100%;
  299. margin-left: 0px;
  300. display: inline-block;
  301. }
  302.  
  303.  
  304. .tab-content {
  305. }
  306.  
  307. .tab {
  308. display: none;
  309. }
  310.  
  311. .tab.active {
  312. display: block;
  313. }
  314.  
  315. /*about*/
  316.  
  317. #about {
  318. width: 640px;
  319. height: relative;
  320. background-color: #fff; /*about background color*/
  321. border: 1px solid #eee; /*about border color*/
  322. border-radius: 5px;
  323. padding: 20px;
  324. margin-top: 100px;
  325. margin-left: 350px;
  326. }
  327.  
  328. #abticon img {
  329. width: 150px;
  330. height: 150px;
  331. border-radius: 5px;
  332. }
  333.  
  334. #info {
  335. width: 350px;
  336. height: relative;
  337. margin-top: -165px;
  338. margin-left: 155px;
  339. }
  340. .info {
  341. display: inline-block;
  342. margin-top: 15px;
  343. margin-left: 5px;
  344. background-color: #f8f7f7; /*info background color*/
  345. border: 1px solid #eee; /*info border color*/
  346. border-radius: 5px;
  347. padding: 10px;
  348. color: #ffbb0f; /*info like age, name, etc text color*/
  349. width: 130px;
  350. font-size: 15px;
  351. }
  352.  
  353. .info span {
  354. color: #00deda; /*info icon color like the birthday cake/heart/etc*/
  355. padding-right: 2px;
  356. }
  357.  
  358. #abtlinks {
  359. width: 170px;
  360. height: relative;
  361. margin-top: -160px;
  362. margin-left: 480px;
  363. }
  364.  
  365. #abtlinks a {
  366. display: inline-block;
  367. margin-top: 15px;
  368. margin-left: 15px;
  369. background-color: #ffbb0f; /*about links background color*/
  370. border-radius: 5px;
  371. padding: 10px;
  372. color: #fcfcfc; /*about links color*/
  373. font-size: 20px;
  374. width: 45px;
  375. height: 30px;
  376. text-align: center;
  377. padding-top: 25px;
  378. }
  379.  
  380. #abtlinks a:hover {
  381. background-color: #00deda; /*about links hover background*/
  382. color: #fcfcfc; /*about links hover color*/
  383. -webkit-transition: all .5s;
  384. -moz-transition: all .5s;
  385. -o-transition: all .5s;
  386. -ms-transition: all .5s;
  387. transition: all .5s;
  388. }
  389.  
  390. #bio {
  391. width: 600px;
  392. height: relative;
  393. background-color: #f8f7f7; /*bio background color*/
  394. border: 1px solid #eee; /*bio border color*/
  395. border-radius: 5px;
  396. padding: 20px;
  397. color: #9c9c9c; /*bio text color*/
  398. margin-top: 20px;
  399. font-size: 13px;
  400. }
  401.  
  402. /*end about*/
  403.  
  404. /*navigation*/
  405.  
  406. #filters {
  407. width: 600px;
  408. height: relative;
  409. margin-top: 20px;
  410. }
  411.  
  412. .button{
  413. display: inline-block;
  414. color: #ffbb0f; /*filter text color*/
  415. background-color: #fff; /*filter background color*/
  416. border: 1px solid #eee; /*filter border color*/
  417. border-radius: 5px;
  418. font-size: 13px;
  419. margin-top: 20px;
  420. text-transform: uppercase;
  421. letter-spacing: 1px;
  422. padding: 10px;
  423. cursor: help;
  424. }
  425.  
  426. .button b {
  427. color: #00deda; /*filter number color*/
  428. padding-bottom: 2px;
  429. }
  430.  
  431. .button.selected {
  432. background-color: #00deda; /*selected filter background color*/
  433. color: #fff; /*selected filter color*/
  434. }
  435.  
  436. .button.selected b {
  437. color: #fff; /*selected filter number color*/
  438. }
  439.  
  440.  
  441.  
  442. .container {
  443. width: 900px;
  444. height: auto;
  445. margin-bottom: 20px;
  446. margin-top: 50px;
  447. margin-left: -50px;
  448. }
  449.  
  450. .group {
  451. width: 200px;
  452. height: relative;
  453. background-color: #fff; /*tag group background color*/
  454. border: 1px solid #eee; /*tag group border color*/
  455. border-radius: 5px;
  456. padding: 20px;
  457. margin-top: 20px;
  458. margin-left: 20px;
  459. }
  460.  
  461.  
  462.  
  463. .title {
  464. font-size: 15px;
  465. color: #ffbb0f; /*tag group title color*/
  466. display: inline-block;
  467. padding: 6px;
  468. border-bottom: 1px solid #ffbb0f; /*tag group title border color*/
  469. font-family: 'Karla', sans-serif;
  470. }
  471.  
  472.  
  473.  
  474. .tags a {
  475. color: #00deda; /*tag color*/
  476. background-color: #f8f7f7; /*tag background color*/
  477. padding: 6px;
  478. font-size: 13px;
  479. text-align: left;
  480. margin-top: 5px;
  481. letter-spacing: 1px;
  482. display: block;
  483. border: 1px solid #eee; /*tag border color*/
  484. border-radius: 5px;
  485. }
  486.  
  487. .tags a:hover {
  488. color: #fcfcfc; /*tag hover color*/
  489. background-color: #ffbb0f; /*tag background hover color*/
  490. -webkit-transition: 0.5s;
  491. -moz-transition: 0.5s;
  492. transition: 0.5s;
  493. }
  494.  
  495. /*end navigation*/
  496.  
  497. /*blogroll*/
  498.  
  499. .blogroll {
  500. width: 900px;
  501. height: auto;
  502. margin-bottom: 20px;
  503. margin-top: -150px;
  504. margin-left: -50px;
  505. }
  506.  
  507. .following {
  508. background-color: #fff; /*following background color*/
  509. border: 1px solid #eee; /*following border color*/
  510. padding: 10px;
  511. border-radius: 5px;
  512. font-size: 13px;
  513. text-align: left;
  514. margin-top: 20px;
  515. margin-left: 20px;
  516. width: 200px;
  517. height: 100px;
  518. float: left;
  519. }
  520.  
  521. .following img {
  522. border-radius: 5px;
  523. display: block;
  524. }
  525.  
  526. .fname {
  527. border-bottom: 1px solid #00deda; /*following url border*/
  528. padding: 3px;
  529. margin-top: -100px;
  530. margin-left: 100px;
  531. text-transform: uppercase;
  532. font-weight: bold;
  533. display: block;
  534. width: 100px;
  535. height: relative;
  536. overflow: hidden;
  537. white-space: nowrap;
  538. text-overflow: ellipsis;
  539. }
  540.  
  541. .fname a {
  542. color: #00deda; /*following url color*/
  543. }
  544.  
  545. .fname a:hover {
  546. color: #9c9c9c; /*following url hover color*/
  547. -webkit-transition: 0.5s;
  548. -moz-transition: 0.5s;
  549. transition: 0.5s;
  550. }
  551.  
  552. .ftitle {
  553. color: #ffbb0f; /*following title color*/
  554. text-align: center;
  555. font-family: 'Karla', sans-serif;
  556. margin-left: 105px;
  557. margin-top: 10px;
  558. background-color: #f8f7f7; /*following title background color*/
  559. border: 1px solid #eee; /*following title border*/
  560. border-radius: 5px;
  561. padding: 5px;
  562. max-height: 60px;
  563. overflow-y scroll;
  564. overflow-x: hidden;
  565. }
  566.  
  567. /*end blogroll*/
  568.  
  569. /*faq/message*/
  570.  
  571. #mcontain {
  572. width: 600px;
  573. height: relative;
  574. background: transparent;
  575. margin-top: 100px;
  576. margin-left: -50px;
  577. padding: 20px;
  578. padding-top: 10px;
  579. }
  580.  
  581. .question {
  582. background-color: #fff; /*faq question background color*/
  583. border: 1px solid #eee; /*faq question border color*/
  584. border-radius: 5px;
  585. padding: 10px;
  586. text-align: right;
  587. font-size: 13px;
  588. cursor: help;
  589. margin-top: 10px;
  590. font-family: 'Karla', sans-serif;
  591. }
  592.  
  593. .question b {
  594. color: #00deda; /*faq question text*/
  595. }
  596.  
  597. .answer {
  598. background-color: #f8f7f7; /*faq answer background color*/
  599. border: 1px solid #eee; /*faq answer border color*/
  600. border-radius: 5px;
  601. padding: 10px;
  602. display: none;
  603. text-align: left;
  604. color: #9c9c9c; /*faq answer text*/
  605. padding: 10px;
  606. font-family: 'Karla', sans-serif;
  607. font-size: 13px;
  608. margin-top: 20px;
  609. }
  610.  
  611. </style>
  612.  
  613. </head>
  614.  
  615. <body>
  616.  
  617. <div id="sidebar">
  618.  
  619. <div id="title">all in one</div>
  620.  
  621.  
  622. <div id="tabnav">
  623. <div class="tabs">
  624. <ul class="tab-links">
  625.  
  626. <li class="active">
  627. <a href="#tab1"><b>01.</b> about</a></li>
  628.  
  629.  
  630.  
  631. <li><a href="#tab2"><b>02.</b> navigation</a></li>
  632.  
  633.  
  634.  
  635. <li><a href="#tab3"><b>03.</b> blogroll</a></li>
  636.  
  637.  
  638.  
  639. <li><a href="#tab4"><b>04.</b> faq/message</a></li>
  640.  
  641.  
  642. </ul>
  643. </div>
  644. </div>
  645. </div>
  646.  
  647.  
  648.  
  649. </div>
  650.  
  651.  
  652.  
  653. <div class="tabs">
  654.  
  655. <!--about tab-->
  656.  
  657. <div class="tab-content">
  658. <div id="tab1" class="tab active">
  659.  
  660. <div id="about">
  661.  
  662. <div id="abticon">
  663.  
  664. <img src="https://static.tumblr.com/gru63qm/ihypmdidu/all_in_one_icon.jpg"> <!--replace the image url with your image-->
  665.  
  666. <div id="info">
  667. <div class="info"><span class="th th-user"></span> name</div>
  668. <div class="info"><span class="th th-cake-3"></span> age</div>
  669. <div class="info"><span class="th th-heart-1"></span> gender</div>
  670. <div class="info"><span class="th th-location-3"></span> location</div>
  671. <div class="info"><span class="th th-location-1"></span> more info</div>
  672. <div class="info"><span class="th th-information"></span> more info</div>
  673. </div>
  674.  
  675. <div id="abtlinks">
  676. <a href="/" title="link one title">01.</a>
  677. <a href="/" title="link two title">02.</a>
  678. <a href="/" title="link three title">03.</a>
  679. <a href="/" title="link four title">04.</a>
  680. </div>
  681.  
  682. <div id="bio">
  683.  
  684. <h1>heading</h1>
  685.  
  686. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.<br><br>
  687.  
  688. <h2>heading</h2>
  689.  
  690. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
  691.  
  692. </div>
  693.  
  694. </div>
  695.  
  696. </div>
  697.  
  698. </div>
  699.  
  700.  
  701. <!--end about tag-->
  702.  
  703.  
  704. <!--navigation tab-->
  705.  
  706. <!--navigation tab-->
  707.  
  708. <div id="tab2" class="tab">
  709. <div class="tabcontent">
  710.  
  711. <center>
  712. <div id="filters">
  713. <!--only change the "all categories" title if you need. nothing else.-->
  714. <div class="button selected" filter="group">all categories</div>
  715.  
  716. <!--here you can replace filter1/filter2/etc with whatever filter name you want. for example, you could make it filter="fandom" or filter="marvel"-->
  717.  
  718. <div class="button" filter="filter1"><b>01. </b>filter 1</div>
  719. <div class="button" filter="filter2"><b>02. </b>filter 2</div>
  720. <div class="button" filter="filter3"><b>03. </b>filter 3</div>
  721. <div class="button" filter="filter4"><b>04. </b>filter 4</div>
  722. <div class="button" filter="filter5"><b>05. </b>filter 5</div>
  723. <div class="button" filter="filter6"><b>06. </b>filter 6</div>
  724.  
  725. <!--to add more filters just paste the following code below filter 6
  726.  
  727. <div class="button" filter="filter">filter name</div>
  728.  
  729. -->
  730. </div>
  731. </center>
  732.  
  733.  
  734. <div class="container">
  735.  
  736.  
  737.  
  738. <!--tags 1-->
  739. <div class="group filter1 filter2"> <!--replace "filter1" and "filter2" with whatever filter name you gave your filters. for example it might say "fandom" or "marvel"-->
  740.  
  741. <div class="title">
  742. Category 1 <!--category title-->
  743. </div>
  744.  
  745.  
  746. <div class="tags">
  747. <a href="/tagged/tag" style="margin-top: 10px">tag</a>
  748. <a href="/tagged/tag">tag</a>
  749. <a href="/tagged/tag">tag</a>
  750. <a href="/tagged/tag">tag</a>
  751. <a href="/tagged/tag">tag</a>
  752. <a href="/tagged/tag">tag</a>
  753. <a href="/tagged/tag">tag</a>
  754. <a href="/tagged/tag">tag</a>
  755. <a href="/tagged/tag">tag</a>
  756. </div>
  757.  
  758.  
  759.  
  760. </div>
  761. <!--end tags 1-->
  762.  
  763.  
  764. <!--tags 2-->
  765. <div class="group filter6 filter2"> <!--replace "filter1" and "filter2" with whatever filter name you gave your filters. for example it might say "fandom" or "marvel"-->
  766.  
  767. <div class="title">
  768. Category 2 <!--category title-->
  769. </div>
  770.  
  771.  
  772. <div class="tags">
  773. <a href="/tagged/tag" style="margin-top: 10px">tag</a>
  774. <a href="/tagged/tag">tag</a>
  775. <a href="/tagged/tag">tag</a>
  776. <a href="/tagged/tag">tag</a>
  777. <a href="/tagged/tag">tag</a>
  778. <a href="/tagged/tag">tag</a>
  779. <a href="/tagged/tag">tag</a>
  780. <a href="/tagged/tag">tag</a>
  781. <a href="/tagged/tag">tag</a>
  782. </div>
  783.  
  784.  
  785.  
  786. </div>
  787. <!--end tags 2-->
  788.  
  789. <!--tags 3-->
  790. <div class="group filter4 filter1"> <!--replace "filter1" and "filter2" with whatever filter name you gave your filters. for example it might say "fandom" or "marvel"-->
  791.  
  792. <div class="title">
  793. Category 3 <!--category title-->
  794. </div>
  795.  
  796.  
  797. <div class="tags">
  798. <a href="/tagged/tag" style="margin-top: 10px">tag</a>
  799. <a href="/tagged/tag">tag</a>
  800. <a href="/tagged/tag">tag</a>
  801. <a href="/tagged/tag">tag</a>
  802. <a href="/tagged/tag">tag</a>
  803. <a href="/tagged/tag">tag</a>
  804. <a href="/tagged/tag">tag</a>
  805. </div>
  806.  
  807.  
  808.  
  809. </div>
  810. <!--end tags 3-->
  811.  
  812. <!--tags 4-->
  813. <div class="group filter3 filter6"> <!--replace "filter1" and "filter2" with whatever filter name you gave your filters. for example it might say "fandom" or "marvel"-->
  814.  
  815. <div class="title">
  816. Category 4 <!--category title-->
  817. </div>
  818.  
  819.  
  820. <div class="tags">
  821. <a href="/tagged/tag" style="margin-top: 10px">tag</a>
  822. <a href="/tagged/tag">tag</a>
  823. <a href="/tagged/tag">tag</a>
  824. <a href="/tagged/tag">tag</a>
  825. <a href="/tagged/tag">tag</a>
  826. <a href="/tagged/tag">tag</a>
  827. <a href="/tagged/tag">tag</a>
  828. <a href="/tagged/tag">tag</a>
  829. <a href="/tagged/tag">tag</a>
  830. <a href="/tagged/tag">tag</a>
  831. <a href="/tagged/tag">tag</a>
  832. </div>
  833.  
  834.  
  835.  
  836. </div>
  837. <!--end tags 4-->
  838.  
  839. <!--tags 5-->
  840. <div class="group filter3 filter5"> <!--replace "filter1" and "filter2" with whatever filter name you gave your filters. for example it might say "fandom" or "marvel"-->
  841.  
  842. <div class="title">
  843. Category 5 <!--category title-->
  844. </div>
  845.  
  846.  
  847. <div class="tags">
  848. <a href="/tagged/tag" style="margin-top: 10px">tag</a>
  849. <a href="/tagged/tag">tag</a>
  850. <a href="/tagged/tag">tag</a>
  851. <a href="/tagged/tag">tag</a>
  852.  
  853. </div>
  854.  
  855.  
  856.  
  857. </div>
  858. <!--end tags 5-->
  859.  
  860. <!--to add more categories just paste the following code below the end of category 5:
  861.  
  862.  
  863. <div class="group filter3 filter5">
  864.  
  865. <div class="title">
  866. Category 5
  867. </div>
  868.  
  869.  
  870. <div class="tags">
  871. <a href="/tagged/tag" style="margin-top: 10px">tag</a>
  872. <a href="/tagged/tag">tag</a>
  873. <a href="/tagged/tag">tag</a>
  874. <a href="/tagged/tag">tag</a>
  875.  
  876. </div>
  877.  
  878.  
  879.  
  880. </div>
  881.  
  882. -->
  883.  
  884. </div>
  885.  
  886.  
  887. </div>
  888. </div>
  889.  
  890. <!--end navigation tab-->
  891.  
  892.  
  893.  
  894. <!--blogroll tab-->
  895.  
  896. <div id="tab3" class="tab">
  897. <div class="tabcontent">
  898.  
  899. <center>
  900. <div class="blogroll">
  901. {block:Following}
  902.  
  903. {block:Followed}
  904.  
  905. <div class="following">
  906.  
  907. <img src="{FollowedPortraitURL-96}"/>
  908.  
  909. <div class="fname"><a href="{FollowedURL}">{FollowedName}</a></div>
  910.  
  911. <div class="ftitle">"{FollowedTitle}"</div>
  912.  
  913. </div>
  914.  
  915. {/block:Followed}
  916. {/block:Following}
  917.  
  918. </div>
  919. </center>
  920.  
  921. </div>
  922. </div>
  923.  
  924. <!--end blogroll tab-->
  925.  
  926.  
  927. <!--message tab-->
  928.  
  929. <div id="tab4" class="tab">
  930. <div class="tabcontent">
  931.  
  932.  
  933. <div id="mcontain">
  934.  
  935. <!--question 1-->
  936. <div class="question"><b>write question 1 here</b>
  937.  
  938. <div class="answer">
  939.  
  940. <b>bold</b> <i>italic</i> <a href="/">link</a><br><br>
  941.  
  942. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  943. </div>
  944.  
  945. </div>
  946. <!--end of question 1-->
  947.  
  948. <!--question 2-->
  949. <div class="question"><b>write question 2 here</b>
  950.  
  951. <div class="answer">
  952. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  953. </div>
  954.  
  955. </div>
  956. <!--end of question 2-->
  957.  
  958. <!--question 3-->
  959. <div class="question"><b>write question 3 here</b>
  960.  
  961. <div class="answer">
  962. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  963. </div>
  964.  
  965. </div>
  966. <!--end of question 3-->
  967.  
  968. <!--question 4-->
  969. <div class="question"><b>write question 4 here</b>
  970.  
  971. <div class="answer">
  972. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  973. </div>
  974.  
  975. </div>
  976. <!--end of question 4-->
  977.  
  978.  
  979. <!--if you want to add more questions, paste the following under question 4:
  980.  
  981. <div class="question"><b>your question here</b>
  982.  
  983. <div class="answer">
  984. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  985. </div>
  986.  
  987. </div>
  988.  
  989. -->
  990.  
  991.  
  992. <p><iframe frameborder="0" height="200px" id="ask_form" scrolling="no" src="https://www.tumblr.com/ask_form/yoururl.tumblr.com" width="100%" style="background-color: transparent; overflow: hidden;"></iframe></p> <!--replace "yoururl" with your url or the ask box won't work-->
  993.  
  994. </div>
  995.  
  996.  
  997. </div>
  998. </div>
  999.  
  1000. <!--end message tab-->
  1001.  
  1002.  
  1003.  
  1004.  
  1005.  
  1006. </div>
  1007.  
  1008. <!--DO NOT EDIT THIS EXCEPT FOR #00deda TO CHANGE THE LINK COLOR-->
  1009.  
  1010. <div style="position:fixed; bottom:8px; right:15px; font-size: 15px;"><a style="color:#00deda; text-decoration:none; font-weight: bold" class= "th th-stars" href="http://arithemes.tumblr.com/"></a></center></div>
  1011.  
  1012.  
  1013. <!--do not edit beyond here. this is the script for the tabs-->
  1014.  
  1015. <script>
  1016. $(document).ready(function() {
  1017. $('.tabs .tab-links a').on('click', function(e) {
  1018. var currentAttrValue = $(this).attr('href');
  1019.  
  1020. // Show/Hide Tabs
  1021. $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
  1022.  
  1023. // Change/remove current tab to active
  1024. $(this).parent('li').addClass('active').siblings().removeClass('active');
  1025.  
  1026. e.preventDefault();
  1027. });
  1028. });
  1029. </script>
  1030.  
  1031. <script>
  1032. $(document).ready(function() {
  1033. $('#filterOptions li a').click(function() {
  1034. // fetch the class of the clicked item
  1035. var ourClass = $(this).attr('class');
  1036.  
  1037. // reset the active class on all the buttons
  1038. $('#filterOptions li').removeClass('active');
  1039. // update the active state on our clicked button
  1040. $(this).parent().addClass('active');
  1041.  
  1042. if(ourClass == 'all') {
  1043. // show all our items
  1044. $('#ourHolder').children('div.item').show();
  1045. }
  1046. else {
  1047. // hide all elements that don't share ourClass
  1048. $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
  1049. // show all elements that do share ourClass
  1050. $('#ourHolder').children('div.' + ourClass).show();
  1051. }
  1052. return false;
  1053. });
  1054. });
  1055. </script>
  1056.  
  1057.  
  1058. </body>
  1059.  
  1060. </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!