API tools faq
paste
Advertisement
astraeacodes

piece of mind by astraeawrites

astraeacodes
Aug 11th, 2017
6,499
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.28 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
  2.  
  3.  
  4. <!----------------✧ ☾ ☆ ☄ ⁛ THEMES BY ASTRAEAWRITES ⁛ ☄ ☾ ✧
  5. DO NOT STEAL OR CLAIM AS YOURS!
  6. report problems or questions @ astraeawrites.tumblr.com----------->
  7.  
  8. <!----------------------✧ ☾ ☆ ☄ ⁛ CREDITS !! ⁛ ☄ ☾ ✧
  9. THE TABS SCRIPT IS FROM @nbthm.tk & I CALIM NO CREDIT FOR IT---------->
  10.  
  11. <html>
  12. <head>
  13. <title>{Title}</title>
  14. <link rel="shortcut icon" href="{Favicon}">
  15.  
  16. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  17.  
  18. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  19.  
  20. <script src="https://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  21.  
  22. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  23.  
  24. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script><script>(function($){$(document).ready(function(){$("a[title]").style_my_tooltips({tip_follows_cursor:true,tip_delay_time:90,tip_fade_speed:600,attribute:"title"});});})(jQuery);</script>
  25.  
  26. <link href="https://fonts.googleapis.com/css?family=Inconsolata|Lato|Montserrat|Muli|Open+Sans|Quicksand|Raleway|Roboto|Source+Sans+Pro" rel="stylesheet">
  27.  
  28. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  29.  
  30.  
  31.  
  32. <style type="text/css">
  33.  
  34.  
  35.  
  36.  
  37. /*---------------BODY & BASICS---------------*/
  38.  
  39. #s-m-t-tooltip {
  40. max-width:400px;
  41. background-color:#ececec;
  42. font-family:"Roboto", sans-serif;
  43. font-size:8.5px;
  44. color:#000;
  45. letter-spacing:2px;
  46. text-transform:lowercase;
  47. padding:6.5px;
  48. line-height:100%;
  49. margin:20px 0px 0px 20px;
  50. z-index:99999999999999999999999999999999;
  51. border-radius:1px;
  52. box-shadow:1px 1px 3px rgba(0,0,0,.0);
  53. }
  54.  
  55. ::-webkit-scrollbar-thumb:vertical {
  56. display:none;
  57. }
  58.  
  59. ::-webkit-scrollbar-thumb:horizontal {
  60. display:none;
  61. }
  62.  
  63. ::-webkit-scrollbar {
  64. display:none;
  65. }
  66.  
  67. ::selection {
  68. background-color:#bbb;
  69. color: #fff;
  70. }
  71.  
  72.  
  73. body{
  74. background-color:#f6f6f6;
  75. font-size:10px;
  76. font-family:"calibri";
  77. color:#333;
  78. }
  79.  
  80. a{
  81. text-decoration:none;
  82. color:#333;
  83. -webkit-transition: all 0.4s ease-in-out;
  84. -moz-transition: all 0.4s ease-in-out;
  85. -o-transition: all 0.4s ease-in-out;
  86. -ms-transition: all 0.4s ease-in-out;
  87. transition: all 0.4s ease-in-out;
  88. }
  89.  
  90. a:hover{
  91. -webkit-transition: all 0.4s ease-in-out;
  92. -moz-transition: all 0.4s ease-in-out;
  93. -o-transition: all 0.4s ease-in-out;
  94. -ms-transition: all 0.4s ease-in-out;
  95. transition: all 0.4s ease-in-out;
  96. text-shadow:0px 0px 0.5px #000;
  97. color:#464646;
  98. }
  99.  
  100.  
  101.  
  102.  
  103.  
  104. /*---------------BOX & STRUCTURE---------------*/
  105.  
  106. #box{
  107. width:620px;
  108. height:450px;
  109. background-color:#fff;
  110. left:50%;
  111. margin-left:-325px;
  112. top:50%;
  113. margin-top:-225px;
  114. position:fixed;
  115. border-radius:2.5px;
  116. border:1px solid #eee;
  117. overflow:auto;
  118. }
  119.  
  120. #box2{
  121. width:469px!important;
  122. height:450px;
  123. left:50%;
  124. margin-left:-173.5px;
  125. top:50%;
  126. margin-top:-224.5px;
  127. position:fixed;
  128. z-index:999999999;
  129. overflow:auto;
  130. }
  131.  
  132.  
  133.  
  134.  
  135. /*---------------SIDEBAR---------------*/
  136.  
  137. .sidebar{
  138. margin-top:-1px;
  139. margin-left:-1px;
  140. width:160px;
  141. height:450px;
  142. border-top-left-radius:2.5px;
  143. border-bottom-left-radius:2.5px;
  144. background-color:#fff;
  145. border:1px solid #eee;
  146. overflow:hidden;
  147. }
  148.  
  149. .sidebar img{
  150. width:110px;
  151. height:110px;
  152. max-width:110px;
  153. border-radius:3px;
  154. padding:10px;
  155. background-color:#eee;
  156. margin:10px 10px 30px 10px;
  157. overflow:hidden;
  158. }
  159.  
  160.  
  161.  
  162.  
  163.  
  164. /*---------------LINKS---------------*/
  165.  
  166. .sidelinks{
  167. z-index:999999999999999999;
  168. padding-top:25px;
  169. text-align:center;
  170. margin-bottom:10px;
  171.  
  172. }
  173.  
  174. .sidelinks a{
  175. font-size:11.5px;
  176. color:#000;
  177. text-decoration:none;
  178. background-color:#f5f5f5;
  179. padding:10px;
  180. border-radius:2.5px;
  181. border:1px solid #eee;
  182. -webkit-transition: all 0.4s ease-in-out;
  183. -moz-transition: all 0.4s ease-in-out;
  184. -o-transition: all 0.4s ease-in-out;
  185. -ms-transition: all 0.4s ease-in-out;
  186. transition: all 0.4s ease-in-out;
  187. }
  188.  
  189. .sidelinks a:hover{
  190. color:white;
  191. background-color:#aaa;
  192. -webkit-transition: all 0.4s ease-in-out;
  193. -moz-transition: all 0.4s ease-in-out;
  194. -o-transition: all 0.4s ease-in-out;
  195. -ms-transition: all 0.4s ease-in-out;
  196. transition: all 0.4s ease-in-out;
  197. }
  198.  
  199. .sidelinks ul{
  200. list-style:none;
  201. }
  202.  
  203. .sidelinks li{
  204. list-style:none;
  205. display:inline-block;
  206. padding:6px;
  207. }
  208.  
  209. .tab-links{
  210. max-width:135px;
  211. margin-top:15px;
  212. margin-left:-37.5px;
  213. }
  214.  
  215. .tab-links i{
  216. margin-right:3px;
  217. }
  218.  
  219. .tab-links ul{
  220. list-style:none;
  221. margin-left:0px;
  222. padding-left:0px;
  223. }
  224.  
  225. .tab-links li{
  226. list-style:none;
  227. line-height:40px;
  228. margin-left:0px;
  229. padding-left:0px;
  230. border-bottom:1px solid #ddd;
  231. }
  232.  
  233. .tab-links a{
  234. font-size:9px;
  235. text-decoration:none;
  236. text-transform:uppercase;
  237. margin-left:5px;
  238. font-family:"roboto";
  239. color:#808080;
  240. letter-spacing:1px;
  241. -webkit-transition: all 0.4s ease-in-out;
  242. -moz-transition: all 0.4s ease-in-out;
  243. -o-transition: all 0.4s ease-in-out;
  244. -ms-transition: all 0.4s ease-in-out;
  245. transition: all 0.4s ease-in-out;
  246. }
  247.  
  248. .tab-links a:hover{
  249. padding-left:20px;
  250. -webkit-transition: all 0.4s ease-in-out;
  251. -moz-transition: all 0.4s ease-in-out;
  252. -o-transition: all 0.4s ease-in-out;
  253. -ms-transition: all 0.4s ease-in-out;
  254. transition: all 0.4s ease-in-out;
  255. color:#464646;
  256. }
  257.  
  258. li.active a, li.active a:hover{
  259. padding-left:20px;
  260. color:#000;
  261. text-shadow:0px 0px 0.5px #000;
  262. padding-left:;
  263. }
  264.  
  265. .tab-links:after {
  266. display:block;
  267. clear:both;
  268. content:'';
  269. }
  270.  
  271. .tab-content {
  272. }
  273.  
  274. .tab {
  275. display:none;
  276. }
  277.  
  278. .tab.active {
  279. display:block;
  280. }
  281.  
  282.  
  283.  
  284.  
  285. /*---------------TABS---------------*/
  286.  
  287. .tabcontent{
  288. position:static;
  289. max-width:460px!important;
  290. max-height:450px;
  291. }
  292.  
  293. .tabs {
  294. width:460px;
  295. margin-left:10px;
  296. display:inline-block;
  297. }
  298.  
  299.  
  300.  
  301.  
  302. /*---------------TAB 1 // NAVIGATION TAB // ACTIVE---------------*/
  303.  
  304. .navigationtab{
  305. margin:0px;
  306. padding:20px;
  307. line-height:20px;
  308. }
  309.  
  310. .navigationtab h1{
  311. margin:0px;
  312. font-size:15px;
  313. font-family:"open sans";
  314. text-transform:uppercase;
  315. letter-spacing:1px;
  316. border-bottom:2px solid #eee;
  317. margin-bottom:3px;
  318. padding:0px;
  319. font-weight:700;
  320. }
  321.  
  322. .navigationtab a{
  323. color:#808080;
  324. -webkit-transition: all 0.4s ease-in-out;
  325. -moz-transition: all 0.4s ease-in-out;
  326. -o-transition: all 0.4s ease-in-out;
  327. -ms-transition: all 0.4s ease-in-out;
  328. transition: all 0.4s ease-in-out;
  329. text-transform:lowercase;
  330. text-decoration:none;
  331. margin-right:20px;
  332. margin-left:20px;
  333. }
  334.  
  335. .navigationtab a:hover{
  336. color:black;
  337. text-shadow:0px 0px 0.5px #000;
  338. -webkit-transition: all 0.4s ease-in-out;
  339. -moz-transition: all 0.4s ease-in-out;
  340. -o-transition: all 0.4s ease-in-out;
  341. -ms-transition: all 0.4s ease-in-out;
  342. transition: all 0.4s ease-in-out;
  343. }
  344.  
  345.  
  346.  
  347.  
  348.  
  349. /*---------------TAB 2 // ABOUT ME // CLICK---------------*/
  350.  
  351. .aboutmetab{
  352. margin:0px;
  353. padding:20px;
  354. font-size:10.5px;
  355. }
  356.  
  357. .aboutmetabtitle{
  358. margin:0px;
  359. font-size:15px;
  360. font-family:"open sans";
  361. text-transform:uppercase;
  362. letter-spacing:1px;
  363. border-bottom:2px solid #eee;
  364. margin-bottom:3px;
  365. padding:0px;
  366. font-weight:700;
  367. }
  368.  
  369. .aboutmetabstats{
  370. margin:10px;
  371. font-family:"roboto";
  372. text-align:center;
  373. width:25%;
  374. line-height:25px!important;
  375. font-size:9.5px;
  376. position:absolute;
  377. border-right:1px solid #eee;
  378. padding-right:5px;
  379. height:130px;
  380. }
  381.  
  382. .aboutmetabstats ul{
  383. list-style:none;
  384. margin:0px;
  385. padding:0px;
  386. }
  387.  
  388. .aboutmetabstats b{
  389. text-transform:uppercase;
  390. margin-right:5px;
  391. }
  392.  
  393. .aboutmetabheader{
  394. width:100%;
  395. height:145px;
  396. max-height:145px !important;
  397. overflow:hidden;
  398. padding-bottom:10px;
  399. border-bottom:1px solid #eee;
  400. }
  401.  
  402. .aboutmetabheader img{
  403. height:100%;
  404. width:100%;
  405. max-height:120px;
  406. max-width:120px;
  407. border-radius:50%;
  408. overflow:hidden;
  409. position:absolute;
  410. margin:9px;
  411. left:50%;
  412. margin-left:-55px;
  413. border:5px solid #ececec;
  414. }
  415.  
  416. .aboutmetabquote{
  417. width:25%;
  418. left:67%;
  419. position:absolute;
  420. margin:10px;
  421. border-left:1px solid #eee;
  422. padding-left:5px;
  423. text-align:center;
  424. line-height:25px!important;
  425. height:130px;
  426. font-size:9.5px;
  427. font-family:"roboto";
  428. }
  429.  
  430. .aboutmetabbody{
  431. margin:10px;
  432. padding-top:5px;
  433. line-height:16px;
  434. }
  435.  
  436. .aboutmetabbody p{
  437. text-indent:2em;
  438. padding-bottom:5px;
  439. }
  440.  
  441. .aboutmetabbody h1{
  442. margin:0px;
  443. font-size:13px;
  444. font-family:"open sans";
  445. text-transform:uppercase;
  446. letter-spacing:1px;
  447. padding:0px;
  448. text-align:center;
  449. font-weight:100;
  450. }
  451.  
  452. .aboutmetabbody pre{
  453. white-space: pre-wrap;
  454. white-space: -moz-pre-wrap;
  455. white-space: -pre-wrap;
  456. white-space: -o-pre-wrap;
  457. word-wrap: break-word;
  458. font-family:"inconsolata";
  459. }
  460.  
  461.  
  462.  
  463.  
  464. /*---------------TAB 3 // BLOGROLL TAB // CLICK---------------*/
  465.  
  466. .blogrolltab{
  467. margin:0px;
  468. padding:20px;
  469. }
  470.  
  471. .blogrolltab h1{
  472. margin:0px;
  473. font-size:15px;
  474. font-family:"open sans";
  475. text-transform:uppercase;
  476. letter-spacing:1px;
  477. border-bottom:2px solid #eee;
  478. margin-bottom:3px;
  479. padding:0px;
  480. font-weight:700;
  481. }
  482.  
  483. .blogrolltabdetails{
  484. margin-top:10px;
  485. margin:5px;
  486. padding-left:1px;
  487. }
  488.  
  489. .blogrolltabdetails img{
  490. margin:10px;
  491. border-radius:50%;
  492. -webkit-filter: grayscale(80%);
  493. -webkit-transition: all 0.9s ease-in-out;
  494. -moz-transition: all 0.9s ease-in-out;
  495. -o-transition: all 0.9s ease-in-out;
  496. -ms-transition: all 0.9s ease-in-out;
  497. transition: all 0.9s ease-in-out;
  498. }
  499.  
  500. .blogrolltabdetails img:hover{
  501. margin:10px;
  502. border-radius:50%;
  503. -webkit-filter: grayscale(50%);
  504. -webkit-transition: all 0.9s ease-in-out;
  505. -moz-transition: all 0.9s ease-in-out;
  506. -o-transition: all 0.9s ease-in-out;
  507. -ms-transition: all 0.9s ease-in-out;
  508. transition: all 0.9s ease-in-out;
  509. }
  510.  
  511.  
  512.  
  513.  
  514. /*---------------TAB 4 // FAQ TAB // CLICK---------------*/
  515.  
  516. .faqtab{
  517. margin:0px;
  518. padding:20px;
  519. }
  520.  
  521. .faqtab h1{
  522. margin:0px;
  523. font-size:15px;
  524. font-family:"open sans";
  525. text-transform:uppercase;
  526. letter-spacing:1px;
  527. border-bottom:2px solid #eee;
  528. margin-bottom:3px;
  529. padding:0px;
  530. font-weight:700;
  531. }
  532.  
  533. .faqtab h2{
  534. font-size:13;
  535. font-family:"open sans";
  536. text-transform:lowercase;
  537. font-weight:100;
  538. margin-top:10px;
  539. margin-bottom:-5px;
  540. }
  541.  
  542. .faqtab p{
  543. margin-left:15px;
  544. margin-bottom:2.5em;
  545. }
  546.  
  547.  
  548.  
  549.  
  550. /*---------------CREDIT, DO NOT MOVE OR MAKE LESS VISIBLE!!---------------*/
  551. .credit a{
  552. font-size:11px;
  553. position:fixed;
  554. font-family:"lato";
  555. font-weight:900;
  556. color:black;
  557. text-align:right;
  558. right:25px;
  559. bottom:25px;
  560. }
  561.  
  562. .credit a:hover{
  563. color:white;
  564. }
  565.  
  566.  
  567. {CustomCSS}
  568. </style>
  569. </head>
  570. <body>
  571.  
  572.  
  573.  
  574. <!---------------STRUCTURE--------------->
  575.  
  576. <div id="box">
  577.  
  578. <div class="sidebar">
  579.  
  580.  
  581. <div class="sidelinks">
  582. <img src="https://68.media.tumblr.com/b22674e7c522aaffcc4cd0eca2f16768/tumblr_inline_otoq9yBj4D1slfjc1_250.png">
  583. <li><a href="/" title="return"><i class="fa fa-spinner"></i></a></li>
  584. <li><a href="/archive" title="archive"><i class="fa fa-folder-o"></i></a></li>
  585. <li><a href="https://www.tumblr.com/dashboard" title="dashboard"><i class="fa fa-external-link"></i></a></li>
  586. </div>
  587.  
  588. <div class="tabs">
  589. <ul class="tab-links">
  590. <li class="active"><a href="#tab1"><i class="fa fa-bars"></i> navigation</a></li>
  591. <li><a href="#tab2"><i class="fa fa-user"></i> about me</a></li>
  592. <li><a href="#tab3"><i class="fa fa-globe"></i> blogroll</a></li>
  593. <li><a href="#tab4"><i class="fa fa-question"></i> f.a.q.</a></li>
  594. </ul>
  595. </div>
  596. </div>
  597.  
  598. </div>
  599.  
  600.  
  601.  
  602.  
  603.  
  604.  
  605. <!---------------TABS--------------->
  606.  
  607. <div id="box2">
  608. <div class="tabs">
  609.  
  610. <!---------------TABS--------------->
  611.  
  612. <div id="box2">
  613.  
  614.  
  615. <div id="tab1">
  616.  
  617.  
  618. <div class="navigationtab">
  619. <h1>title1</h1>
  620. <a href="URL">wow 1</a>
  621. <a href="URL">wow 2</a>
  622. <a href="URL">wow 3</a>
  623. <a href="URL">wow 4</a>
  624. <a href="URL">wow 5</a>
  625.  
  626. <br>
  627.  
  628. <a href="URL">wow 1</a>
  629. <a href="URL">wow 2</a>
  630. <a href="URL">wow 3</a>
  631. <a href="URL">wow 4</a>
  632. <a href="URL">wow 5</a>
  633.  
  634. <br>
  635. <br>
  636.  
  637. <h1>title2</h1>
  638. <a href="URL">wow 1</a>
  639. <a href="URL">wow 2</a>
  640. <a href="URL">wow 3</a>
  641. <a href="URL">wow 4</a>
  642. <a href="URL">wow 5</a>
  643.  
  644. <br>
  645.  
  646. <a href="URL">wow 1</a>
  647. <a href="URL">wow 2</a>
  648. <a href="URL">wow 3</a>
  649. <a href="URL">wow 4</a>
  650. <a href="URL">wow 5</a>
  651. <br>
  652. <br>
  653.  
  654. <h1>title3</h1>
  655. <a href="URL">wow 1</a>
  656. <a href="URL">wow 2</a>
  657. <a href="URL">wow 3</a>
  658. <a href="URL">wow 4</a>
  659. <a href="URL">wow 5</a>
  660.  
  661. <br>
  662.  
  663. <a href="URL">wow 1</a>
  664. <a href="URL">wow 2</a>
  665. <a href="URL">wow 3</a>
  666. <a href="URL">wow 4</a>
  667. <a href="URL">wow 5</a>
  668. <br>
  669. <br>
  670.  
  671. <h1>title4</h1>
  672. <a href="URL">wow 1</a>
  673. <a href="URL">wow 2</a>
  674. <a href="URL">wow 3</a>
  675. <a href="URL">wow 4</a>
  676. <a href="URL">wow 5</a>
  677.  
  678. <br>
  679.  
  680. <a href="URL">wow 1</a>
  681. <a href="URL">wow 2</a>
  682. <a href="URL">wow 3</a>
  683. <a href="URL">wow 4</a>
  684. <a href="URL">wow 5</a>
  685.  
  686. <br>
  687.  
  688. <a href="URL">wow 1</a>
  689. <a href="URL">wow 2</a>
  690. <a href="URL">wow 3</a>
  691. <a href="URL">wow 4</a>
  692. <a href="URL">wow 5</a>
  693.  
  694. <br>
  695.  
  696. <a href="URL">wow 1</a>
  697. <a href="URL">wow 2</a>
  698. <a href="URL">wow 3</a>
  699. <a href="URL">wow 4</a>
  700. <a href="URL">wow 5</a>
  701.  
  702. </div>
  703. </div>
  704.  
  705.  
  706.  
  707.  
  708.  
  709. <!---------------TAB 2 // ABOUT ME TAB !!
  710. i advise that you try to keep everything in the header the same length as the one in the preview, specifically the quote. don't make it longer because it'll stick out of the container and might look gross. you can make it shorter, though, since a height is applied to it.
  711. ------------------------------>
  712.  
  713.  
  714. <div id="tab2" class="tab">
  715. <div class="tabcontent">
  716.  
  717. <div class="aboutmetab">
  718. <div class="aboutmetabtitle">meet the blogger.</div>
  719. <div class="aboutmetabheader">
  720. <img src="https://68.media.tumblr.com/da929318d4d301084fdd2ba213684404/tumblr_inline_otoqaeI4QM1slfjc1_250.png">
  721. <div class="aboutmetabquote">
  722. <big>❝</big> I'm <b>sorry</b> you forgot the way I <i>arose</i> like the moon, night after night with the <u>burden</u> to forgive, eager to feed you <b><i>everything</b></i> . . . <big>❞</big>
  723. </div>
  724. <div class="aboutmetabstats">
  725. <ul>
  726. <li><b>alias:</b> astra</li>
  727. <li><b>age:</b> seventeen</li>
  728. <li><b>pronouns:</b> she/her</li>
  729. <li><b>location:</b> los angeles</li>
  730. <li><b>personality:</b> istp</li>
  731. </ul>
  732. </div>
  733. </div>
  734. <div class="aboutmetabbody">
  735.  
  736. <p>There's an automatic text-indent and paragraph spacing because i'm really into that, okay. But look, check it:</p>
  737.  
  738. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus purus risus, a feugiat justo iaculis eget. Cras lobortis feugiat cursus. Mauris laoreet, neque vitae venenatis efficitur, leo augue gravida risus, ut mollis risus tellus quis dui. Morbi pharetra fringilla placerat. Cras luctus dolor ac massa tincidunt, eu ullamcorper augue feugiat. In at dui aliquam, finibus tortor sed, accumsan mauris. Nullam interdum scelerisque risus. Nunc vehicula justo nec orci mattis faucibus. Quisque laoreet nulla magna, eu ullamcorper eros ultrices non. Sed eget purus dolor. Vivamus ut ullamcorper lectus, eu posuere ante.</p>
  739.  
  740. <h1>& here's a title</h1>
  741.  
  742. <pre>PRE TEXT YA BOI !! Donec bibendum euismod purus sit amet semper. Proin malesuada arcu tincidunt venenatis pulvinar. Morbi justo nulla, molestie molestie commodo sit amet, mollis sed nibh. Nam nisl nibh, condimentum in arcu sed, posuere elementum leo. Cras nec eros commodo, egestas lectus ac, dictum libero. </pre>
  743.  
  744. </div>
  745. </div>
  746.  
  747. </div>
  748. </div>
  749.  
  750.  
  751.  
  752.  
  753.  
  754. <!-- -------------------------- TAB 3 // BLOGROLL TAB ------------------------->
  755.  
  756. <div id="tab3" class="tab">
  757. <div class="tabcontent">
  758. <div class="blogrolltab">
  759. <h1>currently following.</h1>
  760. <div class="blogrolltabdetails">
  761. {block:Following}{block:Followed}<a href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-48}"></a>{/block:Followed}{/block:Following}
  762. </div>
  763. </div>
  764. </div>
  765. </div>
  766.  
  767.  
  768.  
  769.  
  770.  
  771. <!-- -------------------------- TAB 4 // FAQ TAB -------------------------- -->
  772.  
  773. <div id="tab4" class="tab">
  774. <div class="tabcontent">
  775. <div class="faqtab">
  776. <h1>frequently asked questions.</h1>
  777.  
  778. <!-----------if you want more questions and answers, just copy and paste the following:
  779.  
  780. <h2>here's a question??</h2>
  781. <p>answer</p>
  782.  
  783. -------->
  784.  
  785. <h2>here's a question??</h2>
  786. <p>Nam dapibus euismod vehicula. Vestibulum luctus non turpis ut cursus. Vivamus at purus sit amet ipsum laoreet convallis. Donec aliquet elit at purus iaculis, eget auctor lacus vestibulum. Phasellus nec lobortis lectus, eget ultrices quam. In ultrices magna eu viverra vulputate. Curabitur ante mi, dictum quis blandit ac, faucibus id turpis. Sed pellentesque purus ipsum, at malesuada enim facilisis nec. Cras purus neque, ullamcorper eget dictum eget, consequat a quam. Nulla facilisi. Mauris vitae nibh sit amet ante condimentum tincidunt ut id lacus. Nullam aliquam augue erat, hendrerit pretium mauris molestie eget. Morbi sit amet blandit sapien, a fringilla lorem.</p>
  787. <h2>wow another question??</h2>
  788. <p>yeah, dude. and here's another answer</p>
  789. <h2>lmao idk anymore guys??</h2>
  790. <p>Donec tristique diam arcu, et posuere nibh suscipit eget. Duis id nisl non elit auctor mattis. Curabitur finibus at mauris nec porttitor. Aliquam non lacinia sapien, a blandit lacus. Aenean dolor velit, aliquam lacinia tristique et, scelerisque in nibh. Vivamus maximus finibus mi quis efficitur. Maecenas sit amet lorem sit amet sem viverra egestas ac sit amet ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus sapien libero, suscipit quis vestibulum quis, sodales at purus. Aenean vel viverra ipsum. Praesent accumsan lectus eget hendrerit maximus. Aliquam sed urna nisl. Fusce vehicula convallis mollis. Quisque vulputate nisl tortor, viverra suscipit nisi bibendum vel.</p>
  791.  
  792. <br>
  793.  
  794. <!-----------this is the code for the askbox. if you want it on this page, leave it. if you don't, delete it !!
  795. if you want to keep the code, make sure your askbox is turned on and you have entered your url where it says YOURURLHERE-------->
  796.  
  797. <p><iframe frameborder="0" scrolling="no" width="96.5%" height="190" margin="10px" src="https://www.tumblr.com/ask_form/YOURURLHERE.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]--></p>
  798.  
  799.  
  800.  
  801. </p>
  802. </div>
  803. </div>
  804. </div>
  805. </div>
  806. </div>
  807.  
  808.  
  809.  
  810.  
  811. <!---------------CREDIT // DO NOT REMOVE OR ALTER PLS !! --------------- -->
  812.  
  813. <div class="credit"><a href="https://astraeawrites.tumblr.com/">AW</a></div>
  814.  
  815.  
  816.  
  817.  
  818.  
  819.  
  820.  
  821. <!---------------TABS SCRIPT // DON'T REMOVE !! --------------- -->
  822.  
  823. <script>
  824. $(document).ready(function() {
  825. $('.tabs .tab-links a').on('click', function(e) {
  826. var currentAttrValue = $(this).attr('href');
  827.  
  828. // Show/Hide Tabs
  829. $('.tabs ' + currentAttrValue).fadeIn(800).siblings().hide();
  830.  
  831. // Change/remove current tab to active
  832. $(this).parent('li').addClass('active').siblings().removeClass('active');
  833.  
  834. e.preventDefault();
  835. });
  836. });
  837. </script>
  838.  
  839. <script>
  840. $(document).ready(function() {
  841. $('#filterOptions li a').click(function() {
  842. // fetch the class of the clicked item
  843. var ourClass = $(this).attr('class');
  844.  
  845. // reset the active class on all the buttons
  846. $('#filterOptions li').removeClass('active');
  847. // update the active state on our clicked button
  848. $(this).parent().addClass('active');
  849.  
  850. if(ourClass == 'all') {
  851. // show all our items
  852. $('#ourHolder').children('div.item').show();
  853. }
  854. else {
  855. // hide all elements that don't share ourClass
  856. $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
  857. // show all elements that do share ourClass
  858. $('#ourHolder').children('div.' + ourClass).show();
  859. }
  860. return false;
  861. });
  862. });
  863. </script>
  864.  
  865.  
  866.  
  867.  
  868. </body>
  869. </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!