API tools faq
paste
dansmilth

Icon Page

dansmilth
Aug 11th, 2015
1,391
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.94 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3.  
  4. <!----------- ICON PAGE by clumhood :> ------------>
  5.  
  6.  
  7. <title>ICONS</title>
  8. <link rel="shortcut icon" href="{Favicon}">
  9. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  10. <link rel="apple-touicon-icon" href="{PortraitURL-128}"/>
  11.  
  12.  
  13. <link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic,900,900italic' rel='stylesheet' type='text/css'>
  14.  
  15.  
  16. <script type="text/javascript">
  17. WebFontConfig = {
  18. google: { families: [ 'Lato:400,700,400italic,700italic,900,900italic:latin' ] }
  19. };
  20. (function() {
  21. var wf = document.createElement('script');
  22. wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
  23. '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  24. wf.type = 'text/javascript';
  25. wf.async = 'true';
  26. var s = document.getElementsByTagName('script')[0];
  27. s.parentNode.insertBefore(wf, s);
  28. })(); </script>
  29.  
  30.  
  31.  
  32. <!------- filter scripts -------->
  33. <script src="http://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
  34. <script src="http://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
  35. <script>
  36. $(function(){
  37.  
  38. var $container = $('#container');
  39.  
  40. $container.isotope({
  41. itemSelector : '.icon'
  42. });
  43.  
  44.  
  45. var $optionSets = $('#sort .option-set'),
  46. $optionLinks = $optionSets.find('a');
  47.  
  48. $optionLinks.click(function(){
  49. var $this = $(this);
  50. // don't proceed if already selected
  51. if ( $this.hasClass('selected') ) {
  52. return false;
  53. }
  54. var $optionSet = $this.parents('.option-set');
  55. $optionSet.find('.selected').removeClass('selected');
  56. $this.addClass('selected');
  57.  
  58. // make option object dynamically, i.e. { filter: '.my-filter-class' }
  59. var options = {},
  60. key = $optionSet.attr('data-option-key'),
  61. value = $this.attr('data-option-filter');
  62. // parse 'false' as false boolean
  63. value = value === 'false' ? false : value;
  64. options[ key ] = value;
  65. if ( key === 'layoutMode' && typeof iconangeLayoutMode === 'function' ) {
  66. // iconanges in layout modes need extra logic
  67. iconangeLayoutMode( $this, options )
  68. } else {
  69. // otherwise, apply new options
  70. $container.isotope( options );
  71. }
  72.  
  73. return false;
  74. });
  75.  
  76.  
  77. });
  78. </script>
  79.  
  80. <!-----end filter scripts------>
  81.  
  82.  
  83. <style type="text/css">
  84.  
  85. body {
  86. font-family:'Lato', sans-serif;
  87. font-size:11px;
  88. background:#ffffff;
  89. }
  90.  
  91. a {
  92. color:black;
  93. text-decoration:none;
  94. }
  95.  
  96.  
  97. ::-webkit-scrollbar {
  98. background-color: white;
  99. height:8px;
  100. width:5px
  101. }
  102.  
  103. ::-webkit-scrollbar-thumb:vertical {
  104. background-color:black;
  105. height:50px
  106. }
  107.  
  108. ::-webkit-scrollbar-thumb:horizontal {
  109. background-color:black;
  110. height:8px!important
  111. }
  112.  
  113.  
  114. .top {
  115. width:745px;
  116. padding:20px;
  117. background:white;
  118. text-align:left;
  119. text-transform:uppercase;
  120. letter-spacing:2;
  121. font-size:15px;
  122. margin-left:400px;
  123. margin-top:50px;
  124. }
  125.  
  126. .top a {
  127. font-size:9px;
  128. letter-spacing:1;
  129. margin-left:10px;
  130.  
  131. }
  132.  
  133. #container {
  134. width:700px;
  135. margin-top:10px;
  136. padding:10px;
  137. margin-left:400px;
  138. transition-duration:1s;
  139. -webkit-transition-duration:1s;
  140. -moz-transition-duration:1s;
  141. -o-transition-duration:1s;
  142. }
  143.  
  144. #media {
  145. margin:10px;
  146. float:left;
  147. padding:5px;
  148. border:1px solid #eee;
  149. overflow:hidden;
  150. }
  151.  
  152. #sort {
  153. width:150px;
  154. top:200px;
  155. margin-left:150px;
  156. padding:5px;
  157. text-align:right;
  158. border-right:1px solid #eee;
  159. padding-bottom:20px;
  160. position:fixed;
  161. }
  162.  
  163. #sort a {
  164. display:block;
  165. padding:10px;
  166. border-right:1px solid black;
  167. margin-top:20px;
  168. margin-right:-6px;
  169. color:black;
  170. text-transform:uppercase;
  171. font-weight:bold;
  172. letter-spacing:1;
  173. }
  174.  
  175. .credit {
  176. font-size:8px;
  177. position:fixed;
  178. font-weight:bold;
  179. bottom:5px;
  180. right:15px;
  181. z-index:10;
  182. text-align:right;
  183. letter-spacing:1px;
  184. padding:2px;
  185. font-family:arial;
  186. }
  187.  
  188. .credit a {
  189. color:{color:links};
  190. text-decoration:none;
  191. }
  192.  
  193. .credit a:hover {
  194. color:{color:links hover};
  195. text-decoration:none;
  196. }
  197.  
  198. </style>
  199. </head>
  200. <body>
  201.  
  202. <div class="credit">
  203. <a title="theme" href="http://clumhood.tumblr.com/" target="_blank">CH</a></div>
  204.  
  205. <!----- Filter links ------>
  206. <div id="sort">
  207. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  208.  
  209. <a href="#filter" data-option-filter=".icon">all</a>
  210. <a href="#filter" data-option-filter=".halsey">halsey</a>
  211. <a href="#filter" data-option-filter=".filter">filter</a>
  212. <a href="#filter" data-option-filter=".filter">filter</a>
  213. <a href="#filter" data-option-filter=".filter">filter</a>
  214.  
  215. </ul>
  216. </div>
  217.  
  218. <div class="top"><b>icons </b>
  219. <a href="/">home</a>
  220. <a href="/ask">inbox</a>
  221. <a href="http://tumblr.com/dashboard">dashboard</a>
  222. </div>
  223.  
  224. <div id="container" class="clearfix">
  225.  
  226. <!----- COPY AND PASTE THIS <div id="media" class="icon halsey"><img src="http://static.tumblr.com/zy3qjic/Wm5ns5vi4/1.png"></div> TO ADD A NEW ICON ------>
  227.  
  228. <div id="media" class="icon halsey"><img src="http://static.tumblr.com/zy3qjic/Wm5ns5vi4/1.png"></div>
  229. <div id="media" class="icon halsey"><img src="http://static.tumblr.com/zy3qjic/33Rns5vij/2.png"></div>
  230. <div id="media" class="icon halsey"><img src="http://static.tumblr.com/zy3qjic/472ns5vis/3.png"></div>
  231. <div id="media" class="icon halsey"><img src="http://static.tumblr.com/zy3qjic/KKxns5vj4/4.png"></div>
  232. <div id="media" class="icon halsey"><img src="http://static.tumblr.com/zy3qjic/dkans5vjl/5.png"></div>
  233. <div id="media" class="icon halsey"><img src="http://static.tumblr.com/zy3qjic/Swjns5vjw/6.png"></div>
  234. <div id="media" class="icon halsey"><img src="http://static.tumblr.com/zy3qjic/UFnns5vk8/7.png"></div>
  235. <div id="media" class="icon halsey"><img src="http://static.tumblr.com/zy3qjic/2K7ns5vkj/8.png"></div>
  236. <div id="media" class="icon halsey"><img src="http://static.tumblr.com/zy3qjic/wYmns5vl7/10.png"></div>
  237. <div id="media" class="icon halsey"><img src="http://static.tumblr.com/zy3qjic/N7Ins5vlj/11.png"></div>
  238. <div id="media" class="icon halsey"><img src="http://static.tumblr.com/zy3qjic/Wm5ns5vi4/1.png"></div>
  239. <div id="media" class="icon halsey"><img src="http://static.tumblr.com/zy3qjic/33Rns5vij/2.png"></div>
  240. <div id="media" class="icon halsey"><img src="http://static.tumblr.com/zy3qjic/472ns5vis/3.png"></div>
  241. <div id="media" class="icon halsey"><img src="http://static.tumblr.com/zy3qjic/KKxns5vj4/4.png"></div>
  242. <div id="media" class="icon halsey"><img src="http://static.tumblr.com/zy3qjic/dkans5vjl/5.png"></div>
  243. <div id="media" class="icon halsey"><img src="http://static.tumblr.com/zy3qjic/Swjns5vjw/6.png"></div>
  244. <div id="media" class="icon halsey"><img src="http://static.tumblr.com/zy3qjic/UFnns5vk8/7.png"></div>
  245. <div id="media" class="icon halsey"><img src="http://static.tumblr.com/zy3qjic/2K7ns5vkj/8.png"></div>
  246.  
  247.  
  248.  
  249. </div>
  250.  
  251.  
  252. </body>
  253. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!