API tools faq
paste
Advertisement
hunterthemes

- Page #14 - Directory (dark)

hunterthemes
Jan 6th, 2018
603
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.18 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.  
  3. <!----
  4.  
  5. © hunterthemes.tumblr.com | Page #14 - Directory (dark)
  6.  
  7. * Do not redistribute this page and claim it as your own.
  8. * Do not remove the credit or move it to another page.
  9. * Minor changes to this page are allowed.
  10.  
  11. ---->
  12.  
  13. <!-- GOOGLE FONTS -->
  14.  
  15. <link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
  16. <link href="https://fonts.googleapis.com/css?family=Exo" rel="stylesheet">
  17. <link href="https://fonts.googleapis.com/css?family=Rozha+One" rel="stylesheet">
  18. <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
  19. <link href="https://fonts.googleapis.com/css?family=Nova+Slim" rel="stylesheet">
  20.  
  21. <style type="text/css">
  22.  
  23. /* CSS */
  24.  
  25. /*-- GENERAL --*/
  26.  
  27. body {
  28. margin: 0;
  29. padding: 0;
  30. width: 100%;
  31. height: 100%;
  32. color: #eeeeee;
  33. font-family: Arial, Helvetica, sans-serif;
  34. font-size: 12px;
  35. line-height: 18px;
  36. background-color: #111111;
  37. background-image:url();
  38. background-attachment: fixed;
  39. background-repeat: no-repeat;
  40. background-size:cover;
  41. }
  42.  
  43. /* Headings */
  44.  
  45. h1{
  46. color: #fff;
  47. max-width:100px;
  48. font-family: Baumans;
  49. font-size: 20px;
  50. line-height: 30px;
  51. padding:5px 10px;
  52. border-bottom: 1px solid #000;
  53. text-align:right;
  54. }
  55.  
  56. h2{
  57. font-family:Helvetica, Arial, sans-serif;
  58. font-size: 11px;
  59. line-height: 13px;
  60. }
  61.  
  62. /* Links */
  63.  
  64. a {
  65. color: #444444;
  66. text-decoration: none;
  67. }
  68.  
  69. a:hover {
  70. text-decoration: none;
  71. color: #eee;
  72. -webkit-transition: all 0.5s ease-in-out;
  73. -moz-transition: all 0.5s ease-in-out;
  74. -o-transition: all 0.5s ease-in-out;
  75. transition: all 0.5s ease-in-out;
  76. }
  77.  
  78. /* Bold and italic */
  79.  
  80. b, strong {color: #222222;}
  81.  
  82. i, em {color: #bbbbbb;}
  83.  
  84. /* Tumblr controls */
  85.  
  86. iframe.tmblr-iframe {
  87. top:2px!important;
  88. right:40px!important;
  89. opacity:0.8;
  90. transform:scale(0.6);
  91. transform-origin:100% 0;
  92. -webkit-transform:scale(0.8);
  93. -webkit-transform-origin:100% 0;
  94. -o-transform:scale(0.8);
  95. -o-transform-origin:100% 0;
  96. -moz-transform:scale(0.8);
  97. -moz-transform-origin:100% 0;
  98. -ms-transform:scale(0.8);
  99. -ms-transform-origin:100% 0;
  100. z-index:100000!important;
  101. filter:invert(100%) hue-rotate(180deg);
  102. -webkit-filter:invert(100%) hue-rotate(180deg);
  103. -moz-filter:invert(100%) hue-rotate(180deg);
  104. -o-filter:invert(100%) hue-rotate(180deg);
  105. -ms-filter:invert(100%) hue-rotate(180deg);
  106. }
  107.  
  108. iframe.tmblr-iframe:hover {
  109. opacity:1!important;}
  110.  
  111. /*-- Webkit scrollbar --*/
  112.  
  113. ::-webkit-scrollbar {
  114. width: 9px;
  115. height: 0px;
  116. }
  117.  
  118. ::-webkit-scrollbar-button:start:decrement,
  119. ::-webkit-scrollbar-button:end:increment {
  120. height: 0px;
  121. display: block;
  122. background-color: #000000;
  123. }
  124.  
  125. ::-webkit-scrollbar-track-piece {
  126. background-color: #000000;
  127. }
  128.  
  129. ::-webkit-scrollbar-thumb:vertical {
  130. height: 0px;
  131. background-color: #ddd;
  132. border: 4px solid #000000;
  133. }
  134.  
  135. /*-- TOOLTIPS --*/
  136.  
  137. #s-m-t-tooltip {
  138. margin:24px 14px 7px 12px;
  139. padding: 5px;
  140. max-width: 250px;
  141. color: #222;
  142. background: #000000;
  143. border: 1px solid #222;
  144. font-size: 12px;
  145. line-height: 15px;
  146. z-index: 100000;
  147. }
  148.  
  149. /* Fix */
  150.  
  151. iframe, img, embed, object, video {
  152. max-width: 100%;
  153. border: none;
  154. }
  155.  
  156. input, textarea, select, a { outline: none; }
  157.  
  158. /*------ MENU -----*/
  159.  
  160. #menu{
  161. position:fixed;
  162. top:0;
  163. left:0;
  164. width:100%;
  165. height:45px;
  166. background:#000000;
  167. border-bottom:1px solid #222222;
  168. z-index:100;
  169. }
  170.  
  171. /* Blog title */
  172.  
  173. #blogtitle{
  174. margin-top:0px;
  175. margin-left:200px;
  176. width:210px;
  177. font-family:"Exo";
  178. font-size:25px;
  179. line-height:45px;
  180. color:#ffffff;
  181. letter-spacing:1px;
  182. text-align:center;
  183. z-index:10000;
  184. }
  185.  
  186. /*------ SIDEBAR -----*/
  187.  
  188. #sidebar{
  189. position:fixed;
  190. top:0;
  191. left:0;
  192. width:230px;
  193. height:100%;
  194. background:#000000;
  195. border-right:1px solid #222222;
  196. z-index:100;
  197. }
  198.  
  199. .triangle1{
  200. position:absolute;
  201. margin:0;
  202. width: 0;
  203. height: 0;
  204. border-style: solid;
  205. border-width: 0 230px 200px 0;
  206. /* triangle background */
  207. border-color:transparent #B2DDC1 transparent transparent;
  208. z-index:1;
  209. }
  210.  
  211. #avatar{
  212. position:absolute;
  213. margin-top:65px;
  214. margin-left:60px;
  215. width:100px;
  216. height:100px;
  217. border:2px solid #FCCBAD;
  218. border-radius:100%;
  219. z-index:10;
  220. overflow:hidden;
  221. }
  222.  
  223. #avatar img{
  224. width:100%;
  225. height:100%;
  226. border-radius:100%;
  227. }
  228.  
  229. #avatar img:hover {
  230. -webkit-transition: all .7s ease;
  231. -moz-transition: all .7s ease;
  232. -o-transition: all .7s ease;
  233. transition: all .7s ease;
  234. -ms-transform: scale(1.2);
  235. -webkit-transform: scale(1.2);
  236. -moz-transform: scale(1.2);
  237. transform: scale(1.2);
  238. }
  239.  
  240. /*-- Main icons --*/
  241.  
  242. #mainicons{
  243. position:absolute;
  244. margin-left:40px;
  245. bottom:10px;
  246. width:150px;
  247. height:20px;
  248. padding-top:10px;
  249. border-top:1px solid #ddd;
  250. text-align:center;
  251. }
  252.  
  253. /* Main icons */
  254.  
  255. #mainicons span{
  256. margin-top:10px;
  257. margin-left:5px;
  258. margin-right:5px;
  259. width:20px;
  260. height:25px;
  261. font-size:17px;
  262. text-align:center;
  263. color:#B2DDC1;
  264. }
  265.  
  266. #mainicons span:hover{
  267. color:#FCCBAD;
  268. -webkit-transition: all .7s ease;
  269. -moz-transition: all .7s ease;
  270. -o-transition: all .7s ease;
  271. transition: all .7s ease;
  272. }
  273.  
  274. /* -------- SORTING CONTENT ------- */
  275.  
  276. /* Sort box style */
  277.  
  278. #sorting{
  279. margin-top:190px;
  280. margin-left:30px;
  281. width:170px;
  282. max-height: -moz-calc(100% - 250px);
  283. max-height: -webkit-calc(100% - 250px);
  284. max-height: -o-calc(100% - 250px);
  285. max-height: calc(100% - 250px);
  286. overflow-y:auto;
  287. }
  288.  
  289. #sorting ul {
  290. margin:0px;
  291. width:170px;
  292. padding:0px;
  293. list-style: none;
  294. }
  295.  
  296. /* Sorting titles */
  297.  
  298. #titleone, #titletwo, #titlethree{
  299. margin-bottom:15px;
  300. height:25px;
  301. line-height:30px;
  302. font-size:15px;
  303. color:#ffffff;
  304. cursor:pointer;
  305. text-align:center;
  306. }
  307.  
  308. .sdivider{
  309. margin:auto;
  310. width:30px;
  311. height:3px;
  312. background:#FCCBAD;
  313. }
  314.  
  315. #titleone:hover, #titletwo:hover, #titlethree:hover{
  316. color:#FCCBAD;
  317. }
  318.  
  319. #titleone:hover .tdivider, #titletwo:hover .tdivider, #titlethree:hover .tdivider{
  320. width:70px;
  321. }
  322.  
  323. #linkboxone, #linkboxtwo, #linkboxthree{
  324. display:none;
  325. }
  326.  
  327. /* Sorting links */
  328.  
  329. #sorting a {
  330. display:block;
  331. margin-left:15px;
  332. width:125px;
  333. padding:5px;
  334. color:#bbbbbb;
  335. font-size:12px;
  336. text-align:center;
  337. }
  338.  
  339. #sorting li a.selected {
  340. color:#FCCBAD;
  341. }
  342.  
  343. #sorting a:hover {
  344. color:#FCCBAD;
  345. }
  346.  
  347. /*------ CONTAINER -----*/
  348.  
  349. #container{
  350. margin-left:250px;
  351. top:60px;
  352. width: -moz-calc(100% - 250px);
  353. width: -webkit-calc(100% - 250px);
  354. width: -o-calc(100% - 250px);
  355. width:: calc(100% - 250px);
  356. height:auto;
  357. z-index:10;
  358. }
  359.  
  360. /* Entries */
  361.  
  362. .story{
  363. width:230px;
  364. margin:15px;
  365. -moz-transition-duration:1s;
  366. -webkit-transition-duration:1s;
  367. -o-transition-duration:1s;
  368. }
  369.  
  370. /* Entries */
  371.  
  372. #entry{
  373. width:250px;
  374. height:auto;
  375. font-size:12px;
  376. background:#000000;
  377. border:1px solid #222222;
  378. }
  379.  
  380. /* Images */
  381.  
  382. #entry img{
  383. width:250px;
  384. height:auto;
  385. }
  386.  
  387. /* Titles */
  388.  
  389. #entry h1{
  390. color: #ffffff;
  391. margin:0;
  392. font-family:"Exo";
  393. font-size: 20px;
  394. line-height: 20px;
  395. padding:10px;
  396. background:#000000;
  397. text-align:left;
  398. }
  399.  
  400. /* Title divider */
  401.  
  402. .tdivider{
  403. margin-left:10px;
  404. width:50px;
  405. height:3px;
  406. background:#B2DDC1;
  407. }
  408.  
  409. /* Info */
  410.  
  411. .info{
  412. margin-top:0px;
  413. margin-left:-1px;
  414. width:230px;
  415. padding:10px;
  416. color:#bbbbbb;
  417. font-size:12px;
  418. line-height:18px;
  419. text-align:justify;
  420. }
  421.  
  422. .info-text{
  423. max-height:200px;
  424. overflow-y:auto;
  425. }
  426.  
  427. #entry:hover{
  428. border:1px solid #222222;
  429. -moz-transition-duration:1s;
  430. -webkit-transition-duration:1s;
  431. -o-transition-duration:1s;
  432. }
  433.  
  434. .etags{
  435. margin-top:10px;
  436. border-top:1px solid #222222;
  437. padding-top:5px;
  438. color:#FCCBAD;
  439. }
  440.  
  441. .etags b{
  442. color:#B2DDC1;
  443. }
  444.  
  445. /*-- PAGE CREDIT --*/
  446.  
  447. #credit {
  448. position:fixed;
  449. right:10px;
  450. top:8px;
  451. width:30px;
  452. z-index:10000;
  453. }
  454.  
  455. /* END CSS */
  456.  
  457. {CustomCSS}
  458.  
  459. </style>
  460.  
  461. </head>
  462.  
  463. <meta charset="utf-8">
  464. <title>{Title}</title>
  465. <link rel="shortcut icon" href="{Favicon}">
  466. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  467. <meta name="viewport" content="width=device-width, initial-scale=1">
  468.  
  469. <!-- HTML -->
  470.  
  471. <body>
  472.  
  473. <div id="menu">
  474. <div id="blogtitle">Page #14</div>
  475. </div>
  476. <!--End menu-->
  477.  
  478. <div id="sidebar">
  479.  
  480. <div class="triangle1"></div>
  481.  
  482. <div id="avatar"><img src="http://i.imgur.com/gzwmImF.png"></div>
  483.  
  484. <div id="mainicons">
  485. <a href="/" title="Index"><span class="sf sf-home-o"></span></a>
  486. <a href="/ask" title="Ask"><span class="sf sf-envelope-2-o"></span></a>
  487. <a href="/submit" title="Submit"><span class="sf sf-paperclip-o"></span></a>
  488. <a href="/archive" title="Archive"><span class="sf sf-clock-3-o"></span></a>
  489. </div>
  490. <!--End mainicons-->
  491.  
  492. <!-- These are the filter links. Don't change ".story" tag because it refreshes the page -->
  493.  
  494. <div id="sorting">
  495.  
  496. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  497.  
  498. <!-- Replace .tag1, .tag2 etc with names of the tags that you want to add -->
  499.  
  500. <div id="titleone"> Title one <div class="sdivider"></div></div>
  501. <div id="linkboxone">
  502. <li><a href="#filter" data-option-filter=".tag1"> #tag1 </a></li>
  503. <li><a href="#filter" data-option-filter=".tag2"> #tag2 </a></li>
  504. <li><a href="#filter" data-option-filter=".tag3"> #tag3 </a></li>
  505. <li><a href="#filter" data-option-filter=".tag4"> #tag4 </a></li>
  506. <li><a href="#filter" data-option-filter=".tag5"> #tag5 </a></li>
  507. </div>
  508. <!--End linkboxone-->
  509.  
  510. <div id="titletwo"> Title two <div class="sdivider"></div></div>
  511. <div id="linkboxtwo">
  512. <li><a href="#filter" data-option-filter=".tag6"> #tag6 </a></li>
  513. <li><a href="#filter" data-option-filter=".tag7"> #tag7 </a></li>
  514. <li><a href="#filter" data-option-filter=".tag8"> #tag8 </a></li>
  515. <li><a href="#filter" data-option-filter=".tag9"> #tag9 </a></li>
  516. <li><a href="#filter" data-option-filter=".tag10"> #tag10 </a></li>
  517. </div>
  518. <!--End linkboxtwo-->
  519.  
  520. <div id="titlethree"> Title three <div class="sdivider"></div></div>
  521. <div id="linkboxthree">
  522. <li><a href="#filter" data-option-filter=".tag11"> #tag11 </a></li>
  523. <li><a href="#filter" data-option-filter=".tag12"> #tag12 </a></li>
  524. <li><a href="#filter" data-option-filter=".tag13"> #tag13 </a></li>
  525. <li><a href="#filter" data-option-filter=".tag14"> #tag14 </a></li>
  526. <li><a href="#filter" data-option-filter=".tag15"> #tag15 </a></li>
  527. </div>
  528. <!--End linkboxthree-->
  529.  
  530. <li><a href="#filter" data-option-filter=".story"> All tags </a></li>
  531.  
  532. </ul>
  533. </div>
  534. <!--End sorting-->
  535. </div>
  536. <!--End sidebar-->
  537.  
  538. <!-- Container -->
  539. <div id="container" class="clearfix">
  540.  
  541. <!--- Replace tag1, tag2 etc. with the tags you've previously chosen and added to filter links
  542.  
  543. --->
  544.  
  545. <div id="entry" class="story tag1 tag2">
  546. <!--You can insert image here-->
  547. <img src="https://68.media.tumblr.com/10b29c807491889b42dedaa008dcbcbe/tumblr_owc6s1Bs8Y1uo5urho3_r1_400.png"></a>
  548. <h1>Title</h1>
  549. <div class="tdivider"></div>
  550. <div class="info">
  551.  
  552. <div class="info-text">
  553. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
  554. </div>
  555. <!--End info-text-->
  556.  
  557. <div class="etags">
  558. <b> label </b> <br>
  559. #tag, #tag, #tag
  560. </div>
  561. <!--End etags -->
  562.  
  563. </div>
  564. <!--End info-->
  565. </div>
  566. <!--End entry-->
  567.  
  568. <div id="entry" class="story tag2 tag3">
  569. <!--You can insert image here-->
  570. <img src="https://68.media.tumblr.com/10b29c807491889b42dedaa008dcbcbe/tumblr_owc6s1Bs8Y1uo5urho3_r1_400.png"></a>
  571. <h1>Title</h1>
  572. <div class="tdivider"></div>
  573. <div class="info">
  574.  
  575. <div class="info-text">
  576. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
  577. </div>
  578. <!--End info-text-->
  579.  
  580. <div class="etags">
  581. <b> label </b> <br>
  582. #tag, #tag, #tag
  583. </div>
  584. <!--End etags -->
  585.  
  586. </div>
  587. <!--End info-->
  588. </div>
  589. <!--End entry-->
  590.  
  591. <div id="entry" class="story tag3 tag4">
  592. <!--You can insert image here-->
  593. <img src="https://68.media.tumblr.com/10b29c807491889b42dedaa008dcbcbe/tumblr_owc6s1Bs8Y1uo5urho3_r1_400.png"></a>
  594. <h1>Title</h1>
  595. <div class="tdivider"></div>
  596. <div class="info">
  597.  
  598. <div class="info-text">
  599. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
  600. </div>
  601. <!--End info-text-->
  602.  
  603. <div class="etags">
  604. <b> label </b> <br>
  605. #tag, #tag, #tag
  606. </div>
  607. <!--End etags -->
  608.  
  609. </div>
  610. <!--End info-->
  611. </div>
  612. <!--End entry-->
  613.  
  614. <div id="entry" class="story tag4 tag5">
  615. <!--You can insert image here-->
  616. <img src="https://68.media.tumblr.com/10b29c807491889b42dedaa008dcbcbe/tumblr_owc6s1Bs8Y1uo5urho3_r1_400.png"></a>
  617. <h1>Title</h1>
  618. <div class="tdivider"></div>
  619. <div class="info">
  620.  
  621. <div class="info-text">
  622. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
  623. </div>
  624. <!--End info-text-->
  625.  
  626. <div class="etags">
  627. <b> label </b> <br>
  628. #tag, #tag, #tag
  629. </div>
  630. <!--End etags -->
  631.  
  632. </div>
  633. <!--End info-->
  634. </div>
  635. <!--End entry-->
  636.  
  637. <div id="entry" class="story tag5 tag6">
  638. <!--You can insert image here-->
  639. <img src="https://68.media.tumblr.com/10b29c807491889b42dedaa008dcbcbe/tumblr_owc6s1Bs8Y1uo5urho3_r1_400.png"></a>
  640. <h1>Title</h1>
  641. <div class="tdivider"></div>
  642. <div class="info">
  643.  
  644. <div class="info-text">
  645. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
  646. </div>
  647. <!--End info-text-->
  648.  
  649. <div class="etags">
  650. <b> label </b> <br>
  651. #tag, #tag, #tag
  652. </div>
  653. <!--End etags -->
  654.  
  655. </div>
  656. <!--End info-->
  657. </div>
  658. <!--End entry-->
  659.  
  660. <div id="entry" class="story tag1 tag2 tag3">
  661. <!--You can insert image here-->
  662. <img src="https://68.media.tumblr.com/10b29c807491889b42dedaa008dcbcbe/tumblr_owc6s1Bs8Y1uo5urho3_r1_400.png"></a>
  663. <h1>Title</h1>
  664. <div class="tdivider"></div>
  665. <div class="info">
  666.  
  667. <div class="info-text">
  668. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
  669. </div>
  670. <!--End info-text-->
  671.  
  672. <div class="etags">
  673. <b> label </b> <br>
  674. #tag, #tag, #tag
  675. </div>
  676. <!--End etags -->
  677.  
  678. </div>
  679. <!--End info-->
  680. </div>
  681. <!--End entry-->
  682.  
  683. <div id="entry" class="story tag4 tag5 tag6">
  684. <!--You can insert image here-->
  685. <img src="https://68.media.tumblr.com/10b29c807491889b42dedaa008dcbcbe/tumblr_owc6s1Bs8Y1uo5urho3_r1_400.png"></a>
  686. <h1>Title</h1>
  687. <div class="tdivider"></div>
  688. <div class="info">
  689.  
  690. <div class="info-text">
  691. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
  692. </div>
  693. <!--End info-text-->
  694.  
  695. <div class="etags">
  696. <b> label </b> <br>
  697. #tag, #tag, #tag
  698. </div>
  699. <!--End etags -->
  700.  
  701. </div>
  702. <!--End info-->
  703. </div>
  704. <!--End entry-->
  705.  
  706. <div id="entry" class="story tag1 tag2">
  707. <!--You can insert image here-->
  708. <img src="https://68.media.tumblr.com/10b29c807491889b42dedaa008dcbcbe/tumblr_owc6s1Bs8Y1uo5urho3_r1_400.png"></a>
  709. <h1>Title</h1>
  710. <div class="tdivider"></div>
  711. <div class="info">
  712.  
  713. <div class="info-text">
  714. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
  715. </div>
  716. <!--End info-text-->
  717.  
  718. <div class="etags">
  719. <b> label </b> <br>
  720. #tag, #tag, #tag
  721. </div>
  722. <!--End etags -->
  723.  
  724. </div>
  725. <!--End info-->
  726. </div>
  727. <!--End entry-->
  728.  
  729. <div id="entry" class="story tag1 tag2 tag3">
  730. <!--You can insert image here-->
  731. <img src="https://68.media.tumblr.com/10b29c807491889b42dedaa008dcbcbe/tumblr_owc6s1Bs8Y1uo5urho3_r1_400.png"></a>
  732. <h1>Title</h1>
  733. <div class="tdivider"></div>
  734. <div class="info">
  735.  
  736. <div class="info-text">
  737. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
  738. </div>
  739. <!--End info-text-->
  740.  
  741. <div class="etags">
  742. <b> label </b> <br>
  743. #tag, #tag, #tag
  744. </div>
  745. <!--End etags -->
  746.  
  747. </div>
  748. <!--End info-->
  749. </div>
  750. <!--End entry-->
  751.  
  752. <!---- To insert more entries just copy/paste the following:
  753.  
  754. <div id="entry" class="story tag1 tag2 tag3">
  755. <img src="https://68.media.tumblr.com/10b29c807491889b42dedaa008dcbcbe/tumblr_owc6s1Bs8Y1uo5urho3_r1_400.png"></a>
  756. <h1>Title</h1>
  757. <div class="tdivider"></div>
  758. <div class="info">
  759.  
  760. <div class="info-text">
  761. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
  762. </div>
  763.  
  764. <div class="etags">
  765. <b> label </b> <br>
  766. #tag, #tag, #tag
  767. </div>
  768.  
  769. </div>
  770. </div>
  771.  
  772. ---->
  773.  
  774. </div>
  775. <!--End container-->
  776.  
  777. <!-- CREDIT (DO NOT REMOVE) -->
  778. <div id="credit"><a href="http://www.hunterthemes.tumblr.com">
  779. <img src="http://i60.tinypic.com/b5qp0o.png" title="page #14 by @hunterthemes"></div></a>
  780.  
  781. </body>
  782.  
  783. <!---------- SCRIPTS ---------->
  784.  
  785. <!-- Saturnicons script -->
  786.  
  787. <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
  788.  
  789. <!-- Jquery -->
  790.  
  791. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  792.  
  793. <!-- Style my tooltips script -->
  794.  
  795. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  796. <script src="jquery.style-my-tooltips.js"></script>
  797.  
  798. <script type="text/javascript" src="http://static.tumblr.com/imovwvl/dJWl20ley/jqueryformasonry.js"></script>
  799.  
  800. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  801. <script>
  802. (function($){
  803. $(document).ready(function(){
  804. $("[title]").style_my_tooltips({
  805. tip_follows_cursor:true,
  806. tip_delay_time:200,
  807. tip_fade_speed: 300
  808. }
  809. );
  810. });
  811. })(jQuery);
  812. </script>
  813.  
  814. <!-- Filter scripts -->
  815.  
  816. <script src="http://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
  817. <script src="http://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
  818.  
  819. <script>
  820. $(function(){
  821. var $container = $('#container');
  822.  
  823. $container.isotope({
  824. itemSelector : '.story'
  825. });
  826.  
  827. var $optionSets = $('#sorting .option-set'),
  828. $optionLinks = $optionSets.find('a');
  829.  
  830. $optionLinks.click(function(){
  831. var $this = $(this);
  832. // don't proceed if already selected
  833. if ( $this.hasClass('selected') ) {
  834. return false;
  835. }
  836.  
  837. var $optionSet = $this.parents('.option-set');
  838. $optionSet.find('.selected').removeClass('selected');
  839. $this.addClass('selected');
  840.  
  841. // make option object dynamically, i.e. { filter: '.my-filter-class' }
  842. var options = {},
  843. key = $optionSet.attr('data-option-key'),
  844. value = $this.attr('data-option-filter');
  845. // parse 'false' as false boolean
  846. value = value === 'false' ? false : value;
  847. options[ key ] = value;
  848. if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
  849. // changes in layout modes need extra logic
  850. changeLayoutMode( $this, options )
  851. } else {
  852. // otherwise, apply new options
  853. $container.isotope( options );
  854. }
  855.  
  856. return false;
  857. });
  858.  
  859. });
  860. </script>
  861.  
  862. <!-- Hide/show on click -->
  863.  
  864. <script>
  865. $(document).ready(function(){
  866.  
  867. $("#titleone").click(function(){
  868. $("#linkboxone").slideToggle(300);
  869. });
  870.  
  871. $("#titletwo").click(function(){
  872. $("#linkboxtwo").slideToggle(300);
  873. });
  874.  
  875. $("#titlethree").click(function(){
  876. $("#linkboxthree").slideToggle(300);
  877. });
  878.  
  879. });
  880. </script>
  881.  
  882.  
  883. </html>
  884.  
  885. <!-- 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!