API tools faq
paste
Advertisement
hunterthemes

Page #16 - All in one v.2

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