API tools faq
paste
Advertisement
hunterthemes

Page #16 - All in one v.1

hunterthemes
Apr 16th, 2018
269
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.08 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!----
  4.  
  5. © hunterthemes.tumblr.com | Page #16 - All in one v.1
  6.  
  7. * Do not redistribute this theme and claim it as your own.
  8. * Do not remove the credit or move it to another page.
  9. * Minor changes to this theme are allowed.
  10.  
  11. ---->
  12.  
  13. <html>
  14. <head>
  15.  
  16. <meta charset="utf-8">
  17. <meta name="viewport" content="width=device-width, initial-scale=1">
  18. <link rel="shortcut icon" href="{Favicon}">
  19. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  20.  
  21. <!-- GOOGLE FONTS -->
  22.  
  23. <link href="https://fonts.googleapis.com/css?family=Rouge+Script|Lato|Open+Sans|Playfair+Display|Lora" rel="stylesheet">
  24.  
  25. <style type="text/css">
  26.  
  27. /* CSS */
  28.  
  29. /*-- GENERAL --*/
  30.  
  31. body {
  32. margin: 0;
  33. padding: 0;
  34. width: 100%;
  35. height: 100%;
  36. color: #bbb;
  37. font-family:"Open Sans";
  38. font-size: 12px;
  39. line-height: 18px;
  40. background-color: #111;
  41. background-image:url();
  42. background-attachment: fixed;
  43. background-repeat: no-repeat;
  44. background-size:cover;
  45. }
  46.  
  47. /* Headings (titles) */
  48.  
  49. h1{
  50. margin:0;
  51. padding:0;
  52. font-family:"Playfair Display";
  53. font-weight:normal;
  54. }
  55.  
  56. h2 {
  57. font-family:"Playfair Display";
  58. margin:10px 0;
  59. padding:0;
  60. font-size:18px;
  61. letter-spacing:2px;
  62. color:#D14FAE;
  63. }
  64.  
  65. p {
  66. padding:0;
  67. }
  68.  
  69. /* Lists */
  70.  
  71. ul, ol {
  72. padding:0px;
  73. margin-left:18.5px;
  74. }
  75.  
  76. li {
  77. margin:0px;
  78. padding:0px;
  79. }
  80.  
  81. /* Links */
  82.  
  83. a {
  84. text-decoration: none;
  85. -webkit-transition: all 0.5s ease-in-out;
  86. -moz-transition: all 0.5s ease-in-out;
  87. -o-transition: all 0.5s ease-in-out;
  88. transition: all 0.5s ease-in-out;
  89. }
  90.  
  91. a:hover {
  92. text-decoration: none;
  93. color:#EB6C70;
  94. }
  95.  
  96. /* Bold */
  97.  
  98. b, strong {color: #fff; }
  99.  
  100. /* Italic */
  101.  
  102. i, em {color: #D756A3; }
  103.  
  104. /* Blockquote */
  105.  
  106. blockquote{
  107. padding:0px 0px 2px 10px;
  108. margin:10px 0px 10px 10px;
  109. border-left: 1px solid #bbb;
  110. }
  111.  
  112. /* Tumblr controls */
  113.  
  114. iframe.tmblr-iframe {
  115. top:2px!important;
  116. right:40px!important;
  117. opacity:0.8;
  118. transform:scale(0.6);
  119. transform-origin:100% 0;
  120. -webkit-transform:scale(0.8);
  121. -webkit-transform-origin:100% 0;
  122. -o-transform:scale(0.8);
  123. -o-transform-origin:100% 0;
  124. -moz-transform:scale(0.8);
  125. -moz-transform-origin:100% 0;
  126. -ms-transform:scale(0.8);
  127. -ms-transform-origin:100% 0;
  128. z-index:100000!important;
  129. }
  130.  
  131. iframe.tmblr-iframe:hover {
  132. opacity:1!important;}
  133.  
  134. /* Webkit scrollbar */
  135.  
  136. ::-webkit-scrollbar {
  137. width: 9px;
  138. height: 0px;
  139. }
  140.  
  141. ::-webkit-scrollbar-button:start:decrement,
  142. ::-webkit-scrollbar-button:end:increment {
  143. height: 0px;
  144. display: block;
  145. background-color: #000;
  146. }
  147.  
  148. ::-webkit-scrollbar-track-piece {
  149. background-color: #000;
  150. }
  151.  
  152. ::-webkit-scrollbar-thumb:vertical {
  153. height: 0px;
  154. background-color: #222;
  155. border: 4px solid #000;
  156. }
  157.  
  158. /* Tooltips */
  159.  
  160. #s-m-t-tooltip {
  161. margin:24px 14px 7px 12px;
  162. padding: 5px;
  163. max-width: 250px;
  164. color: #111;
  165. background: #000;
  166. border: 1px solid pink;
  167. font-size: 12px;
  168. line-height: 15px;
  169. z-index: 100000;
  170. }
  171.  
  172. /* Fix */
  173.  
  174. iframe, img, embed, object, video {
  175. max-width: 100%;
  176. border: none;
  177. }
  178.  
  179. input, textarea, select, a { outline: none; }
  180.  
  181. /*------ CONTAINER -----*/
  182.  
  183. #container {
  184. position:fixed;
  185. left:50%;
  186. top:50%;
  187. width:700px;
  188. height:520px;
  189. z-index:100;
  190. -webkit-transform: translateX(-50%) translateY(-50%);
  191. -moz-transform: translateX(-50%) translateY(-50%);
  192. -ms-transform: translateX(-50%) translateY(-50%);
  193. transform: translateX(-50%) translateY(-50%);
  194. }
  195.  
  196. /*-- SIDEBAR --*/
  197.  
  198. #sidebar {
  199. position:fixed;
  200. margin:0;
  201. margin-top:50px;
  202. width:40%;
  203. height:calc(100% - 100px);
  204. background-color: #000;
  205. border:1px solid #222;
  206. z-index:100;
  207. }
  208.  
  209. /* Sidebar top */
  210.  
  211. #side-top {
  212. position:fixed;
  213. margin:0;
  214. width:40%;
  215. height:100px;
  216. background-color: #111;
  217. background-image:url(https://78.media.tumblr.com/2353622fa40377d61d3c14a4dbd15d9a/tumblr_p7a0yosaph1uo5urho2_1280.png);
  218. background-repeat: no-repeat;
  219. background-size:cover;
  220. z-index:1;
  221. }
  222.  
  223. /* Wave */
  224.  
  225. .wave {
  226. margin-top: 30px;
  227. width: 100%;
  228. height: 100px;
  229. z-index:1000;
  230. }
  231.  
  232. path {
  233. fill: rgba(0,0,0, 0.9);
  234. animation: wave infinite linear;
  235. }
  236.  
  237. path:first-child {
  238. animation-duration: 18s;
  239. }
  240.  
  241. path:last-child {
  242. animation-duration: 30s;
  243. }
  244.  
  245. @keyframes wave {
  246. 0%, 100% {
  247. transform: scaleX(1);
  248. }
  249. 50% {
  250. transform: scaleX(1.3);
  251. }
  252. }
  253.  
  254. /* Sidebar in */
  255.  
  256. #sidebarin {
  257. position:absolute;
  258. left:50%;
  259. top:calc(50% + 45px);
  260. width:70%;
  261. height:auto;
  262. -webkit-transform: translateX(-50%) translateY(-50%);
  263. -moz-transform: translateX(-50%) translateY(-50%);
  264. -ms-transform: translateX(-50%) translateY(-50%);
  265. transform: translateX(-50%) translateY(-50%);
  266. }
  267.  
  268. /* Siedbar title */
  269.  
  270. #sidebar-title {
  271. margin:0px;
  272. width:100%;
  273. height:35px;
  274. line-height:35px;
  275. color:#eee;
  276. letter-spacing:1px;
  277. }
  278.  
  279. /* Avatar */
  280.  
  281. #avatar {
  282. float:left;
  283. margin:0;
  284. margin-right:20px;
  285. width:35px;
  286. height:35px;
  287. }
  288.  
  289. #avatar img {
  290. width:100%;
  291. height:100%;
  292. border-radius:5px;
  293. }
  294.  
  295. /* Sidebar links */
  296.  
  297. .tab-links {
  298. margin:5px 0;
  299. width:100%;
  300. padding:0;
  301. margin:0;
  302. margin-top:10px;
  303. padding:5px 0;
  304. width:100%;
  305. height:auto;
  306. text-align:left;
  307. border-top:1px solid #222;
  308. border-bottom:1px solid #222;
  309. }
  310.  
  311. /* Clearfix */
  312. .tab-links:after {
  313. display:block;
  314. clear:both;
  315. content:'';
  316. }
  317.  
  318. .tab-links li {
  319. list-style:none;
  320. -webkit-transition: all .3s;
  321. -moz-transition: all .3s;
  322. -o-transition: all .3s;
  323. -ms-transition: all .3s;
  324. transition: all .3s;
  325. }
  326.  
  327. .tab-links a {
  328. display:block;
  329. margin:0;
  330. padding:4px 5px;
  331. font-size:15px;
  332. color:#eee;
  333. }
  334.  
  335. .tab-links a:hover {
  336. color:#EB6C70;
  337. background: #111;
  338. }
  339.  
  340. li.active a, li.active a:hover {
  341. color:#EB6C70;
  342. }
  343.  
  344. .tab-links span {
  345. float:left;
  346. margin-right:15px;
  347. }
  348.  
  349. /* Sidebar icons */
  350.  
  351. #sidebar-icons {
  352. margin:0px;
  353. width:100%;
  354. height:30px;
  355. line-height:30px;
  356. text-align:center;
  357. }
  358.  
  359. #sidebar-icons span {
  360. display:inline-block;
  361. margin:10px;
  362. color:#eee;
  363. font-size:16px;
  364. -webkit-transition: all 0.5s ease-in-out;
  365. -moz-transition: all 0.5s ease-in-out;
  366. -o-transition: all 0.5s ease-in-out;
  367. transition: all 0.5s ease-in-out;
  368. }
  369.  
  370. #sidebar-icons span:hover {
  371. color:#EB6C70;
  372. }
  373.  
  374. /*-- CONTENT CONTAINER --*/
  375.  
  376. #content-container {
  377. position:fixed;
  378. left:20%;
  379. top:0px;
  380. width:60%;
  381. height:100%;
  382. padding-left:20%;
  383. overflow:hidden;
  384. background:#000;
  385. z-index:10;
  386. border:5px double #222;
  387. }
  388.  
  389. .tab {
  390. display:none;
  391. }
  392.  
  393. .tab.active {
  394. display:block;
  395. }
  396.  
  397. /* Content headings */
  398.  
  399. .tab h1 {
  400. font-family:"Playfair Display";
  401. margin:0px;
  402. padding:5px 0px;
  403. font-size:25px;
  404. line-height:30px;
  405. letter-spacing:2px
  406. color:#eee;
  407. text-align:left;
  408. }
  409.  
  410. .divider {
  411. margin:15px 0;
  412. width:40px;
  413. height:2px;
  414. background-color: #111;
  415. background-image:url(https://78.media.tumblr.com/2353622fa40377d61d3c14a4dbd15d9a/tumblr_p7a0yosaph1uo5urho2_1280.png);
  416. background-repeat: no-repeat;
  417. border-radius:2px;
  418. }
  419.  
  420. /*-- Quote section --*/
  421.  
  422. #quote {
  423. position:absolute;
  424. top:50%;
  425. left:62%;
  426. width:50%;
  427. height:auto;
  428. padding:20px;
  429. line-height:30px;
  430. text-align:center;
  431. font-family:"Playfair Display";
  432. font-size:25px;
  433. color:#eee;
  434. -webkit-transform: translateX(-50%) translateY(-50%);
  435. -moz-transform: translateX(-50%) translateY(-50%);
  436. -ms-transform: translateX(-50%) translateY(-50%);
  437. transform: translateX(-50%) translateY(-50%);
  438. }
  439.  
  440. /*-- About panel --*/
  441.  
  442. #about {
  443. position:absolute;
  444. top:50%;
  445. left:62%;
  446. width:50%;
  447. height:auto;
  448. max-height:calc(100% - 100px);
  449. padding:20px;
  450. font-size:14px;
  451. line-height:18px;
  452. text-align:justify;
  453. color:#eee;
  454. overflow-y:auto;
  455. -webkit-transform: translateX(-50%) translateY(-50%);
  456. -moz-transform: translateX(-50%) translateY(-50%);
  457. -ms-transform: translateX(-50%) translateY(-50%);
  458. transform: translateX(-50%) translateY(-50%);
  459. }
  460.  
  461. /*-- Navigation panel --*/
  462.  
  463. #navigation {
  464. position:absolute;
  465. top:50%;
  466. left:62%;
  467. width:50%;
  468. height:auto;
  469. max-height:calc(100% - 100px);
  470. overflow-y:auto;
  471. -webkit-transform: translateX(-50%) translateY(-50%);
  472. -moz-transform: translateX(-50%) translateY(-50%);
  473. -ms-transform: translateX(-50%) translateY(-50%);
  474. transform: translateX(-50%) translateY(-50%);
  475. }
  476.  
  477. .navi-section {
  478. padding:10px 0;
  479. border-bottom:1px solid #111;
  480. }
  481.  
  482. #navigation h2 {
  483. margin:0;
  484. padding:0;
  485. font-size:18px;
  486. letter-spacing:2px
  487. color:#D14FAE;
  488. }
  489.  
  490. /* Style of the links and tags */
  491.  
  492. #navigation a {
  493. display:inline-block;
  494. margin-top:8px;
  495. margin-right:10px;
  496. padding:5px 0;
  497. font-size:14px;
  498. color:#eee;
  499. }
  500.  
  501. #navigation a:hover {
  502. color:#EB6C70;
  503. padding:5px;
  504. background:#111;
  505. }
  506.  
  507. /*-- F.A.Q. panel --*/
  508.  
  509. #faq {
  510. position:absolute;
  511. top:50%;
  512. left:62%;
  513. width:50%;
  514. height:auto;
  515. max-height:calc(100% - 100px);
  516. padding:20px;
  517. overflow-y:auto;
  518. -webkit-transform: translateX(-50%) translateY(-50%);
  519. -moz-transform: translateX(-50%) translateY(-50%);
  520. -ms-transform: translateX(-50%) translateY(-50%);
  521. transform: translateX(-50%) translateY(-50%);
  522. }
  523.  
  524. .faq-section {
  525. border-bottom:1px solid #111;
  526. padding-bottom:10px;
  527. /* Answer */
  528. font-size:14px;
  529. color:#eee;
  530. }
  531.  
  532. /* Question */
  533.  
  534. #faq h2 {
  535. margin-top:10px;
  536. margin-bottom:8px;
  537. padding:0;
  538. font-size:18px;
  539. letter-spacing:2px;
  540. color:#D14FAE;
  541. font-style:italic;
  542. }
  543.  
  544. /*-- Blogroll panel --*/
  545.  
  546. #blogroll {
  547. position:absolute;
  548. top:50%;
  549. left:62%;
  550. width:50%;
  551. height:auto;
  552. max-height:calc(100% - 100px);
  553. padding:20px;
  554. text-align:center;
  555. overflow-y:auto;
  556. -webkit-transform: translateX(-50%) translateY(-50%);
  557. -moz-transform: translateX(-50%) translateY(-50%);
  558. -ms-transform: translateX(-50%) translateY(-50%);
  559. transform: translateX(-50%) translateY(-50%);
  560. }
  561.  
  562. .blogroll-section {
  563. display:inline-block;
  564. margin:0px;
  565. margin-top:0px;
  566. width:calc(100% - 20px);
  567. height:40px;
  568. padding:10px;
  569. line-height:20px;
  570. font-size:12px;
  571. color:#eee;
  572. text-align:left;
  573. border-bottom:1px solid #111;
  574. }
  575.  
  576. .blogroll-section:hover {
  577. background:#111;
  578. }
  579.  
  580. /* Style of the blogroll images */
  581.  
  582. .blogroll-section img {
  583. float:left;
  584. width:40px;
  585. height:40px;
  586. margin-left:0px;
  587. margin-right:15px;
  588. border-radius:5px;
  589. opacity:0.8;
  590. -webkit-transition: all 0.5s ease-in-out;
  591. -moz-transition: all 0.5s ease-in-out;
  592. -o-transition: all 0.5s ease-in-out;
  593. transition: all 0.5s ease-in-out;
  594. }
  595.  
  596. .blogroll-section:hover img {
  597. opacity:1;
  598. }
  599.  
  600. .followed-name {
  601. color:#eee;
  602. font-weight:bold;
  603. font-size:15px;
  604. text-transform:lowercase;
  605. }
  606.  
  607. .blogroll-section:hover .followed-name {
  608. color:#D14FAE;
  609. }
  610.  
  611. /*-- Extra panel --*/
  612.  
  613. #extra {
  614. position:absolute;
  615. top:50%;
  616. left:62%;
  617. width:50%;
  618. height:auto;
  619. max-height:calc(100% - 100px);
  620. padding:20px;
  621. text-align:justify;
  622. color:#eee;
  623. font-size:14px;
  624. line-height:18px;
  625. overflow-y:auto;
  626. -webkit-transform: translateX(-50%) translateY(-50%);
  627. -moz-transform: translateX(-50%) translateY(-50%);
  628. -ms-transform: translateX(-50%) translateY(-50%);
  629. transform: translateX(-50%) translateY(-50%);
  630. }
  631.  
  632. /*-- PAGE CREDIT --*/
  633.  
  634. #credit {
  635. position:fixed;
  636. right:10px;
  637. top:10px;
  638. width:30px;
  639. }
  640.  
  641. /* END CSS */
  642.  
  643. {CustomCSS}
  644.  
  645. </style>
  646.  
  647. </head>
  648.  
  649. <!-- HTML -->
  650.  
  651. <body>
  652.  
  653. <!-- CONTAINER -->
  654. <div id="container">
  655.  
  656. <!-- SIDEBAR -->
  657. <div id="sidebar">
  658.  
  659. <div id="side-top">
  660.  
  661. <svg class="wave" viewBox="0 0 100 100" preserveAspectRatio="none">
  662. <path>
  663. <animate attributeName="d" values="M0,50 A50,200 0 0,1 50,50 A50,200 0 0,0 100,50 L100,100 L0,100;M0,50 A50,0 0 0,1 50,50 A50,0 0 0,0 100,50 L100,100 L0,100;M0,50 A50,0 0 0,0 50,50 A50,0 0 0,1 100,50 L100,100 L0,100;M0,50 A50,200 0 0,0 50,50 A50,200 0 0,1 100,50 L100,100 L0,100;M0,50 A50,0 0 0,0 50,50 A50,0 0 0,1 100,50 L100,100 L0,100;M0,50 A50,0 0 0,1 50,50 A50,0 0 0,0 100,50 L100,100 L0,100;M0,50 A50,200 0 0,1 50,50 A50,200 0 0,0 100,50 L100,100 L0,100;" keyTimes="0; 0.25; 0.25; 0.5; 0.75; 0.75; 1" dur="18s" repeatCount="indefinite" rotate="auto"></animate>
  664. </path>
  665. <path>
  666. <animate attributeName="d" values="M0,50 A50,200 0 0,1 50,50 A50,200 0 0,0 100,50 L100,100 L0,100;M0,50 A50,0 0 0,1 50,50 A50,0 0 0,0 100,50 L100,100 L0,100;M0,50 A50,0 0 0,0 50,50 A50,0 0 0,1 100,50 L100,100 L0,100;M0,50 A50,200 0 0,0 50,50 A50,200 0 0,1 100,50 L100,100 L0,100;M0,50 A50,0 0 0,0 50,50 A50,0 0 0,1 100,50 L100,100 L0,100;M0,50 A50,0 0 0,1 50,50 A50,0 0 0,0 100,50 L100,100 L0,100;M0,50 A50,200 0 0,1 50,50 A50,200 0 0,0 100,50 L100,100 L0,100;" keyTimes="0; 0.25; 0.25; 0.5; 0.75; 0.75; 1" dur="30s" repeatCount="indefinite" rotate="auto"></animate>
  667. </path>
  668. </svg>
  669.  
  670. </div>
  671. <!-- End side-op -->
  672.  
  673. <div id="sidebarin">
  674.  
  675. <div id="sidebar-title">
  676.  
  677. <div id="avatar">
  678. <img src="https://static.tumblr.com/f13871c690646ad4e0cafbe32d653729/6dvmes1/peWp5pacn/tumblr_static_27kovsw519lw4o4sscwsgc8so.png">
  679. </div>
  680. <!--End avatar-->
  681.  
  682. <h1> Title </h1>
  683.  
  684. </div>
  685. <!-- End sidebar-title -->
  686.  
  687. <div class="tabs">
  688. <ul class="tab-links">
  689. <li class="active"><a href="#tab1"> <span>00</span> Refresh </a></li>
  690. <li><a href="#tab2"> <span>01</span> About </a></li>
  691. <li><a href="#tab3"> <span>02</span> Navigation </a></li>
  692. <li><a href="#tab4"> <span>03</span> F.A.Q. </a></li>
  693. <li><a href="#tab5"> <span>04</span> Blogroll </a></li>
  694. <li><a href="#tab6"> <span>05</span> Extra </a></li>
  695. </ul>
  696. </div>
  697. <!-- End tabs -->
  698.  
  699. <div id="sidebar-icons">
  700.  
  701. <a href="/" title="Index"><span class="sf sf-home-o"></span></a>
  702. <a href="/ask" title="Ask"><span class="sf sf-envelope-2-o"></span></a>
  703. <a href="/submit" title="Submit"><span class="sf sf-paperclip-o"></span></a>
  704. <a href="/archive" title="Archive"><span class="sf sf-clock-3-o"></span></a>
  705.  
  706. </div>
  707. <!-- End sidebar-icons -->
  708.  
  709. </div>
  710. <!-- End sidebarin -->
  711.  
  712.  
  713. </div>
  714. <!-- End sidebar -->
  715.  
  716. <div id="content-container">
  717.  
  718. <div class="tabs">
  719.  
  720. <!------------------------------ TAB 1 ------------------------------>
  721.  
  722. <div id="tab1" class="tab active">
  723. <div class="tab-content">
  724.  
  725. <!-- Quote -->
  726. <div id="quote">
  727. "Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
  728.  
  729. </div>
  730. <!-- End quote -->
  731.  
  732. </div>
  733. <!-- End tab-content -->
  734. </div>
  735. <!-- End tab1 -->
  736.  
  737. <!------------------------------ TAB 2 ------------------------------>
  738.  
  739. <div id="tab2" class="tab">
  740. <div class="tabcontent">
  741.  
  742. <!-- About -->
  743. <div id="about">
  744.  
  745. <h1> ABOUT ME </h1>
  746.  
  747. <div class="divider"></div>
  748.  
  749. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi <b>lorem</b>, pulvinar id, commodo feugiat, vehicula et, mauris.
  750.  
  751. <ul>
  752. <li> Lorem ipsum dolor sit amet. </li>
  753. <li> Consectetuer adipiscing elit. </li>
  754. <li> Nam at tortor quis ipsum tempor aliquet. </li>
  755. </ul>
  756.  
  757. Cum sociis <u>natoque</u> penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  758.  
  759. <h2> Suspendisse sed ligula. </h2>
  760.  
  761. Sed volutpat odio non turpis gravida luctus. Suspendisse ac pede.
  762.  
  763. <blockquote> Donec placerat mauris commodo dolor. Nulla tincidunt. Nulla vitae augue. </blockquote>
  764.  
  765. Cras tincidunt <i>pretium</i> felis. Cum sociis natoque penatibus et magnis dis parturient.
  766.  
  767. </div>
  768. <!--End about-->
  769.  
  770. </div>
  771. <!-- End tab-content -->
  772. </div>
  773. <!-- End tab2 -->
  774.  
  775. <!------------------------------ TAB 3 ------------------------------>
  776.  
  777. <div id="tab3" class="tab">
  778. <div class="tabcontent">
  779.  
  780. <!-- Navigation -->
  781. <div id="navigation">
  782.  
  783. <h1> NAVIGATION </h1>
  784.  
  785. <div class="divider"></div>
  786.  
  787. <div class="navi-section">
  788.  
  789. <h2> Section 1 </h2>
  790.  
  791. <a href="http://"> Link </a>
  792. <a href="http://"> Link </a>
  793. <a href="http://"> Link </a>
  794. <a href="http://"> Link </a>
  795. <a href="http://"> Link </a>
  796.  
  797. </div>
  798. <!-- End navi-section -->
  799.  
  800. <div class="navi-section">
  801.  
  802. <h2> Section 2 </h2>
  803.  
  804. <a href="http://"> Link </a>
  805. <a href="http://"> Link </a>
  806. <a href="http://"> Link </a>
  807. <a href="http://"> Link </a>
  808. <a href="http://"> Link </a>
  809.  
  810. </div>
  811. <!-- End navi-section -->
  812.  
  813. <div class="navi-section">
  814.  
  815. <h2> Section 3 </h2>
  816.  
  817. <a href="http://"> Link </a>
  818. <a href="http://"> Link </a>
  819. <a href="http://"> Link </a>
  820. <a href="http://"> Link </a>
  821. <a href="http://"> Link </a>
  822.  
  823. </div>
  824. <!-- End navi-section -->
  825.  
  826.  
  827. <!--------------------------------------------- COMMENT
  828.  
  829. To add more links:
  830. copy and paste <a href="http://"> Link </a> under previous.
  831.  
  832. To add more sections:
  833. copy and paste
  834.  
  835. <div class="navi-section">
  836.  
  837. <h2> Section 3 </h2>
  838.  
  839. <a href="http://"> Link </a>
  840. <a href="http://"> Link </a>
  841. <a href="http://"> Link </a>
  842. <a href="http://"> Link </a>
  843. <a href="http://"> Link </a>
  844.  
  845. </div>
  846.  
  847. under previous
  848.  
  849. END COMMENT ----------------------------------------->
  850.  
  851. </div>
  852. <!-- End navigation -->
  853.  
  854. </div>
  855. <!-- End tab-content -->
  856. </div>
  857. <!-- End tab3 -->
  858.  
  859. <!------------------------------ TAB 4 ------------------------------>
  860.  
  861.  
  862. <div id="tab4" class="tab">
  863. <div class="tabcontent">
  864.  
  865. <!-- F.A.Q. -->
  866. <div id="faq">
  867.  
  868. <h1> Frequently Asked Questions </h1>
  869.  
  870. <div class="divider"></div>
  871.  
  872. <div class="faq-section">
  873.  
  874. <h2> Question goes here </h2>
  875. - Answer goes here
  876.  
  877. </div>
  878. <!-- End faq-section -->
  879.  
  880. <div class="faq-section">
  881.  
  882. <h2> Question goes here </h2>
  883. - Answer goes here
  884.  
  885. </div>
  886. <!-- End faq-section -->
  887.  
  888. <div class="faq-section">
  889.  
  890. <h2> Question goes here </h2>
  891. - Answer goes here
  892.  
  893. </div>
  894. <!-- End faq-section -->
  895.  
  896. <div class="question">
  897.  
  898. <h2> Question goes here </h2>
  899. - Answer goes here
  900.  
  901. </div>
  902. <!-- End faq-section -->
  903.  
  904. <div class="faq-section">
  905.  
  906. <h2> Question goes here </h2>
  907. - Answer goes here
  908.  
  909. </div>
  910. <!-- End faq-section -->
  911.  
  912.  
  913. <!--------------------------------------------- COMMENT
  914.  
  915. To add more questions:
  916. copy and paste
  917.  
  918. <div class="faq-section">
  919.  
  920. <h2> Question goes here </h2>
  921. - Answer goes here
  922.  
  923. </div>
  924.  
  925. under previous
  926.  
  927. END COMMENT ----------------------------------------->
  928.  
  929. </div>
  930. <!--End faq-->
  931.  
  932. </div>
  933. <!-- End tab-content -->
  934. </div>
  935. <!-- End tab4 -->
  936.  
  937. <!------------------------------ TAB 5 ------------------------------>
  938.  
  939. <div id="tab5" class="tab">
  940. <div class="tabcontent">
  941.  
  942. <!-- Blogroll-->
  943. <div id="blogroll">
  944.  
  945. <h1> BLOGROLL </h1>
  946.  
  947. <div class="divider"></div>
  948.  
  949. {block:Following}
  950. {block:Followed}
  951. <a href="{FollowedURL}">
  952. <div class="blogroll-section">
  953. <img src="{FollowedPortraitURL-128}">
  954. <div class="followed-name"> {FollowedName} </div>
  955. {FollowedTitle}
  956. </div>
  957. </a>
  958. {/block:Followed}
  959. {/block:Following}
  960.  
  961. </div>
  962. <!--End blogroll-->
  963.  
  964. </div>
  965. <!-- End tab-content -->
  966. </div>
  967. <!-- End tab5 -->
  968.  
  969. <!------------------------------ TAB 6 ------------------------------>
  970.  
  971. <div id="tab6" class="tab">
  972. <div class="tab-content">
  973.  
  974. <!-- Extra -->
  975. <div id="extra">
  976.  
  977. <h1> EXTRA </h1>
  978.  
  979. <div class="divider"></div>
  980.  
  981. - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi <b>lorem</b>, pulvinar id, commodo feugiat, vehicula et, mauris. Cum sociis <u>natoque</u> penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  982.  
  983. <blockquote> Cras tincidunt <i>pretium</i> felis. Cum sociis natoque penatibus et magnis dis parturient. </blockquote>
  984.  
  985. - Suspendisse sed ligula. Sed volutpat odio non turpis gravida luctus. Suspendisse ac pede. Donec placerat mauris commodo dolor. Nulla tincidunt. Nulla vitae augue.
  986.  
  987. </div>
  988. <!--End extra-->
  989.  
  990. </div>
  991. <!-- End tab-content -->
  992. </div>
  993. <!-- End tab6 -->
  994.  
  995. </div>
  996. <!------------------------------ END TABS ------------------------------>
  997.  
  998. </div>
  999. <!--End content-container-->
  1000. </div>
  1001. <!--End container-->
  1002.  
  1003.  
  1004. <!------------------------------ SCRIPTS ------------------------------>
  1005.  
  1006. <!--Saturnicons script-->
  1007.  
  1008. <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
  1009.  
  1010. <!-- Jquery -->
  1011.  
  1012. <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
  1013.  
  1014. <script>
  1015. $(document).ready(function() {
  1016. $('.tabs .tab-links a').on('click', function(e) {
  1017. var currentAttrValue = $(this).attr('href');
  1018.  
  1019. // Show/Hide Tabs
  1020. $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
  1021.  
  1022. // Change/remove current tab to active
  1023. $(this).parent('li').addClass('active').siblings().removeClass('active');
  1024.  
  1025. e.preventDefault();
  1026. });
  1027. });
  1028. </script>
  1029.  
  1030. <script>
  1031. $(document).ready(function() {
  1032. $('#filterOptions li a').click(function() {
  1033. // fetch the class of the clicked item
  1034. var ourClass = $(this).attr('class');
  1035.  
  1036. // reset the active class on all the buttons
  1037. $('#filterOptions li').removeClass('active');
  1038. // update the active state on our clicked button
  1039. $(this).parent().addClass('active');
  1040.  
  1041. if(ourClass == 'all') {
  1042. // show all our items
  1043. $('#ourHolder').children('div.item').show();
  1044. }
  1045. else {
  1046. // hide all elements that don't share ourClass
  1047. $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
  1048. // show all elements that do share ourClass
  1049. $('#ourHolder').children('div.' + ourClass).show();
  1050. }
  1051. return false;
  1052. });
  1053. });
  1054. </script>
  1055.  
  1056. <!-- Style my tooltips script -->
  1057.  
  1058. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  1059. <script src="jquery.style-my-tooltips.js"></script>
  1060.  
  1061. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  1062. <script>
  1063. (function($){
  1064. $(document).ready(function(){
  1065. $("[title]").style_my_tooltips({
  1066. tip_follows_cursor:true,
  1067. tip_delay_time:200,
  1068. tip_fade_speed: 300
  1069. }
  1070. );
  1071. });
  1072. })(jQuery);
  1073. </script>
  1074.  
  1075. <!-- CREDIT (DO NOT REMOVE) -->
  1076. <div id="credit"><a href="http://www.hunterthemes.tumblr.com">
  1077. <img src="http://i60.tinypic.com/b5qp0o.png" title="page by hunter themes"></div></a>
  1078.  
  1079. </body>
  1080. </html>
  1081.  
  1082. <!-- END 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!