API tools faq
paste
Advertisement
hunterthemes

- Page #14 - Directory (bright)

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