API tools faq
paste
Advertisement
themesbygeorgia

Theme Page #02

themesbygeorgia
Sep 4th, 2015
520
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.22 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4.  
  5. <!--- Theme Page #02 by wonderfullythemes
  6. please don't steal/resdistribute/copy etc thanks
  7. --->
  8.  
  9. <title>{Title}</title>
  10. <link rel="shortcut icon" href="{Favicon}">
  11. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  12. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  13.  
  14. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  15. <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
  16.  
  17. <!--TOOLTIPS-->
  18. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  19. <stsss>
  20. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  21. <script>
  22. (function($){
  23. $(document).ready(function(){
  24. $("a[title]").style_my_tooltips({
  25. tip_follows_cursor:true,
  26. tip_delay_time:200,
  27. tip_fade_speed:300,
  28. attribute:"title"
  29. });
  30. });
  31. })(jQuery);
  32. </script>
  33.  
  34.  
  35. <!------- filter scripts -------->
  36. <script src="http://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
  37. <script>
  38. $(function(){
  39.  
  40. var $container = $('#container');
  41.  
  42. $container.isotope({
  43. itemSelector : '.story'
  44. });
  45.  
  46.  
  47. var $optionSets = $('#sort .option-set'),
  48. $optionLinks = $optionSets.find('a');
  49.  
  50. $optionLinks.click(function(){
  51. var $this = $(this);
  52. // don't proceed if already selected
  53. if ( $this.hasClass('selected') ) {
  54. return false;
  55. }
  56. var $optionSet = $this.parents('.option-set');
  57. $optionSet.find('.selected').removeClass('selected');
  58. $this.addClass('selected');
  59.  
  60. // make option object dynamically, i.e. { filter: '.my-filter-class' }
  61. var options = {},
  62. key = $optionSet.attr('data-option-key'),
  63. value = $this.attr('data-option-filter');
  64. // parse 'false' as false boolean
  65. value = value === 'false' ? false : value;
  66. options[ key ] = value;
  67. if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
  68. // changes in layout modes need extra logic
  69. changeLayoutMode( $this, options )
  70. } else {
  71. // otherwise, apply new options
  72. $container.isotope( options );
  73. }
  74.  
  75. return false;
  76. });
  77.  
  78.  
  79. });
  80. </script>
  81.  
  82. <!-----end filter scripts------>
  83.  
  84. <style type="text/css">
  85.  
  86. ::-webkit-scrollbar-thumb {
  87. height:auto;
  88. background-color:#000;
  89. border:2px solid #fff;
  90. }
  91.  
  92. ::-webkit-scrollbar {
  93. height:8px;
  94. width:11px;
  95. background-color:#000;
  96. border:5px solid #fff;
  97. }
  98.  
  99. #s-m-t-tooltip {
  100. font-size:13px;
  101. max-width:200px;
  102. background-color:black;
  103. color:white;
  104. line-height:15px;
  105. display:none;
  106. position:absolute;
  107. letter-spacing:1px;
  108. text-transform:uppercase;
  109. padding:10px;
  110. margin:15px 0px 0px 15px;
  111. z-index:99999999999999;
  112. }
  113.  
  114. body {
  115. background-color:#fff;
  116. margin:0px;
  117. color:#444;
  118. font-family:'calibri';
  119. font-size:11px;
  120. line-height:13px;
  121. font-style: none;
  122. cursor: url(http://media.tumblr.com/tumblr_lqs4idHqTZ1qfoi4t.png), auto;
  123. }
  124.  
  125. a {
  126. color:green;
  127. text-decoration:none;
  128. text-decoration:none;
  129. -moz-transition-duration:0.7s;
  130. -webkit-transition-duration:0.7s;
  131. -o-transition-duration:0.7s;
  132. }
  133.  
  134. a:hover {
  135. color:#444;
  136. cursor: url(http://media.tumblr.com/tumblr_m2umkqvNUT1qfamg6.gif), auto;
  137. -moz-transition-duration:0.7s;
  138. -webkit-transition-duration:0.7s;
  139. -o-transition-duration:0.7s;
  140. }
  141.  
  142. blockquote {
  143. padding-left:5px;
  144. border-left:2px solid;
  145. }
  146.  
  147. #sidebar {
  148. position:fixed;
  149. width:180px;
  150. padding:10px;
  151. height:auto;
  152. left:120px;
  153. top:200px;
  154. text-align:center;
  155. }
  156.  
  157. .links {
  158. top:50%;
  159. margin-top:-50px;
  160. position:absolute;
  161. width:33px;
  162. right:-50px;
  163. }
  164.  
  165. .links a {
  166. padding:10px;
  167. background:black;
  168. color:white;
  169. display:block;
  170. }
  171.  
  172. .links a:hover {
  173. background:white;
  174. color:black;
  175. }
  176.  
  177. .sidebarstuff {
  178. position:relative;
  179. text-align:right;
  180. }
  181.  
  182. .icon img {
  183. width:70px;
  184. height:70px;
  185. position:relative;
  186. }
  187.  
  188. .desc {
  189. text-transform:uppercase;
  190. font-family:'corbel';
  191. font-size:11px;
  192. line-height:15px;
  193. text-align:right;
  194. position:relative;
  195. margin-top:20px;
  196. }
  197.  
  198. .click {
  199. text-transform:uppercase;
  200. letter-spacing:1px;
  201. text-decoration:underline;
  202. margin-top:20px;
  203. position:relative;
  204. }
  205.  
  206. #filters {
  207. position:relative;
  208. margin-top:10px;
  209. text-align:right;
  210. }
  211.  
  212. #filters a {
  213. font-family:'corbel';
  214. font-size:11px;
  215. line-height:18px;
  216. letter-spacing:1px;
  217. text-align:right;
  218. text-transform:uppercase;
  219. color:black;
  220. margin-bottom:5px;
  221. padding-left:5px;
  222. -moz-transition-duration:0.7s;
  223. -webkit-transition-duration:0.7s;
  224. -o-transition-duration:0.7s;
  225. }
  226.  
  227. #filters a:hover {
  228. cursor:crosshair;
  229. color:#56bc8a;
  230. -moz-transition-duration:0.7s;
  231. -webkit-transition-duration:0.7s;
  232. -o-transition-duration:0.7s;
  233. }
  234.  
  235. #container {
  236. position:fixed;
  237. left:440px;
  238. top:70px;
  239. width:780px;
  240. }
  241.  
  242. .story {
  243. width:330px;
  244. margin-right:60px;
  245. margin-bottom:60px;
  246. -moz-transition-duration:0.7s;
  247. -webkit-transition-duration:0.7s;
  248. -o-transition-duration:0.7s;
  249. }
  250.  
  251. /*--THEMES--*/
  252.  
  253. .one {
  254. text-transform:uppercase;
  255. letter-spacing:4px;
  256. -moz-transition-duration:0.7s;
  257. -webkit-transition-duration:0.7s;
  258. -o-transition-duration:0.7s;
  259. }
  260.  
  261. .one a {
  262. font-size:10px;
  263. letter-spacing:1px;
  264. text-transform:uppercase;
  265. color:#ddf2e8;
  266. border-bottom:none;
  267. padding-top:1px;
  268. padding-bottom:1px;
  269. border-top:1px solid transparent;
  270. border-bottom:1px solid transparent;
  271. }
  272.  
  273. .one a:hover {
  274. border-top:1px solid #ddf2e8;
  275. border-bottom:1px solid #ddf2e8;
  276. }
  277.  
  278. .one:hover .stuffs {
  279. opacity:1;
  280. -moz-transition-duration:0.7s;
  281. -webkit-transition-duration:0.7s;
  282. -o-transition-duration:0.7s;
  283. }
  284.  
  285. .prev {
  286. }
  287.  
  288. .prev img {
  289. height:155px;
  290. width:330px;
  291. }
  292.  
  293. .stuffs {
  294. color:#ddf2e8;
  295. margin-top:5px;
  296. padding-top:20px;
  297. padding-bottom:20px;
  298. text-align:center;
  299. width:330px;
  300. background-color:black;
  301. -moz-transition-duration:0.7s;
  302. -webkit-transition-duration:0.7s;
  303. -o-transition-duration:0.7s;
  304. }
  305.  
  306. .subtitle {
  307. padding:5px;
  308. border:1px solid #ddf2e8;
  309. text-transform:uppercase;
  310. }
  311.  
  312. #spectrum {
  313. position:fixed;
  314. top:50%;
  315. margin-top:-10px;
  316. right:85px;
  317. text-transform:uppercase;
  318. font-size:13px;
  319. text-align:justify;
  320. }
  321.  
  322. #spectrum a {
  323. display:block;
  324. padding:5px;
  325. color:black;
  326. }
  327.  
  328. #spectrum a:hover {
  329. color:white;
  330. box-shadow:inset 140px 0 black;
  331. }
  332.  
  333. </style></head><body>
  334.  
  335. <div id="sidebar">
  336.  
  337. <div class="links">
  338. <a href="http://" title="link">01.</a>
  339. <a href="http://" title="link">02.</a>
  340. <a href="http://" title="link">03.</a>
  341. <!--please don't remove this link, you can add as many as you like just keep this one visible thanks --><a href="http://wonderfullythemes.tumblr.com" title="credit">04.</a>
  342. </div>
  343.  
  344. <div class="sidebarstuff">
  345. <div class="icon"><a href="/themes" title="Refresh"><img src="http://i.imgur.com/s0JFLns.jpg" /></a></div>
  346. <div class="desc">
  347. Put your description here! I'd recommend keeping it short, e.g. a Creative Commons License or your rules etc
  348. </div>
  349. <div class="click">sort by:</div>
  350. </div>
  351.  
  352. <div id="sort">
  353. <div id="filters" class="option-set clearfix" data-option-key="filter">
  354.  
  355. <a href="#filter" data-option-filter=".story">filter</a>
  356. <a href="#filter" data-option-filter=".filt1">filter #1</a>
  357. <a href="#filter" data-option-filter=".filt2">filter #2</a>
  358. <a href="#filter" data-option-filter=".filt3">filter #3</a>
  359. <a href="#filter" data-option-filter=".filt4">filter #4</a>
  360. <a href="#filter" data-option-filter=".filt5">filter #5</a>
  361. <a href="#filter" data-option-filter=".filt6">filter #6</a>
  362. </div>
  363.  
  364.  
  365.  
  366.  
  367. <a href="#filter" data-option-filter="."></a>
  368.  
  369. </div></div></div>
  370. </div>
  371.  
  372. <div id="container" class="clearfix">
  373.  
  374. <!---- things go here ----->
  375.  
  376. <!------------------------------------------------------------------------>
  377. <!--<div id="fic" class="story">
  378. <div class="one">
  379. <div class="prev">
  380. <img src="" />
  381. </div>
  382.  
  383. <div class="stuffs">
  384. <span class="subtitle">Title</span><br><br>
  385.  
  386. <a href="" target="blank">prev</a> | <a href="" target="blank">info</a> | <a href="" target="blank">code</a>
  387. </div>
  388. </div>
  389. </div>-->
  390. <!------------------------------------------------------------------------>
  391.  
  392.  
  393. <!------------------------------------------------------------------------>
  394. <div id="fic" class="story filt6 filt3 filt5">
  395. <div class="one">
  396. <div class="prev">
  397. <img src="http://imgur.com/tQXO6cz.png.png" />
  398. </div>
  399.  
  400. <div class="stuffs">
  401. <span class="subtitle">Theme Title</span><br><br>
  402.  
  403. <a href="PREVIEW URL" target="blank">prev</a> | <a href="POST URL" target="blank">info</a> | <a href="CODE URL" target="blank">code</a>
  404. </div>
  405. </div>
  406. </div>
  407. <!------------------------------------------------------------------------>
  408.  
  409.  
  410. <!------------------------------------------------------------------------>
  411. <div id="fic" class="story filt4 filt3">
  412. <div class="one">
  413. <div class="prev">
  414. <img src="http://imgur.com/tQXO6cz.png" />
  415. </div>
  416.  
  417. <div class="stuffs">
  418. <span class="subtitle">Theme Title</span><br><br>
  419.  
  420. <a href="PREVIEW URL" target="blank">prev</a> | <a href="POST URL" target="blank">info</a> | <a href="CODE URL" target="blank">code</a>
  421. </div>
  422. </div>
  423. </div>
  424. <!------------------------------------------------------------------------>
  425.  
  426.  
  427. <!------------------------------------------------------------------------>
  428. <div id="fic" class="story filt2">
  429. <div class="one">
  430. <div class="prev">
  431. <img src="http://imgur.com/tQXO6cz.png" />
  432. </div>
  433.  
  434. <div class="stuffs">
  435. <span class="subtitle">Theme Title</span><br><br>
  436.  
  437. <a href="PREVIEW URL" target="blank">prev</a> | <a href="POST URL" target="blank">info</a> | <a href="CODE URL" target="blank">code</a>
  438. </div>
  439. </div>
  440. </div>
  441. <!------------------------------------------------------------------------>
  442.  
  443.  
  444.  
  445. <!------------------------------------------------------------------------>
  446. <div id="fic" class="story filt2 filt4 filt6">
  447. <div class="one">
  448. <div class="prev">
  449. <img src="http://imgur.com/tQXO6cz.png" />
  450. </div>
  451.  
  452. <div class="stuffs">
  453. <span class="subtitle">Theme Title</span><br><br>
  454.  
  455. <a href="PREVIEW URL" target="blank">prev</a> | <a href="POST URL" target="blank">info</a> | <a href="CODE URL" target="blank">code</a>
  456. </div>
  457. </div>
  458. </div>
  459. <!------------------------------------------------------------------------>
  460.  
  461.  
  462.  
  463. <!------------------------------------------------------------------------>
  464. <div id="fic" class="story filt1 filt3 filt5">
  465. <div class="one">
  466. <div class="prev">
  467. <img src="http://imgur.com/tQXO6cz.png" />
  468. </div>
  469.  
  470. <div class="stuffs">
  471. <span class="subtitle">Theme Title</span><br><br>
  472.  
  473. <a href="PREVIEW URL" target="blank">prev</a> | <a href="POST URL" target="blank">info</a> | <a href="CODE URL" target="blank">code</a>
  474. </div>
  475. </div>
  476. </div>
  477. <!------------------------------------------------------------------------>
  478.  
  479.  
  480.  
  481. <!------------------------------------------------------------------------>
  482. <div id="fic" class="story filt1 filt2 filt3">
  483. <div class="one">
  484. <div class="prev">
  485. <img src="http://imgur.com/tQXO6cz.png" />
  486. </div>
  487.  
  488. <div class="stuffs">
  489. <span class="subtitle">Theme Title</span><br><br>
  490.  
  491. <a href="PREVIEW URL" target="blank">prev</a> | <a href="POST URL" target="blank">info</a> | <a href="CODE URL" target="blank">code</a>
  492. </div>
  493. </div>
  494. </div>
  495. <!------------------------------------------------------------------------>
  496.  
  497.  
  498.  
  499. <!------------------------------------------------------------------------>
  500. <div id="fic" class="story filt4 filt5 filt6">
  501. <div class="one">
  502. <div class="prev">
  503. <img src="http://imgur.com/tQXO6cz.png" />
  504. </div>
  505.  
  506. <div class="stuffs">
  507. <span class="subtitle">Theme Title</span><br><br>
  508.  
  509. <a href="PREVIEW URL" target="blank">prev</a> | <a href="POST URL" target="blank">info</a> | <a href="CODE URL" target="blank">code</a>
  510. </div>
  511. </div>
  512. </div>
  513. <!------------------------------------------------------------------------>
  514.  
  515.  
  516.  
  517. <!---- things end ---->
  518. </div>
  519.  
  520.  
  521. </body>
  522. </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!