API tools faq
paste
odeysseus_thm

icons / GOLD

odeysseus_thm
Sep 28th, 2017
4,510
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.57 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE html>
  3. <head>
  4. <!--
  5.  
  6.  
  7. gold
  8.  
  9. @ odeysseus
  10.  
  11.  
  12. -->
  13. <title>icons</title><!--title-->
  14.  
  15.  
  16. <link rel="shortcut icon" href="{Favicon}">
  17. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  18.  
  19. <link href='https://fonts.googleapis.com/css?family=Merriweather:300' rel='stylesheet' type='text/css'><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script src="https://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script><script src="http://static.tumblr.com/aptzszz/5imowy43d/filters.js"></script>
  20.  
  21. <style type="text/css">
  22.  
  23. @-webkit-keyframes fadein {
  24. 0% {opacity: 0;}
  25. 100% { opacity: 1; }
  26. }
  27.  
  28. @-moz-keyframes fadein {
  29. 0% { opacity: 0; }
  30. 100% { opacity: 1; }
  31. }
  32.  
  33. @keyframes fadein {
  34. 0% { opacity: 0; }
  35. 100% { opacity: 1; }
  36. }
  37.  
  38.  
  39. .tmblr-iframe { display:none!important; }
  40.  
  41. body {
  42. background:#fff; /*background*/
  43. font-family:'Merriweather', serif; /*font*/
  44. font-size:9px; /* font size */
  45. font-weight:300;
  46. line-height:190%;
  47. color:#777; /* text color */
  48. -webkit-animation-name: fadein;-webkit-animation-duration: 1s;
  49. -moz-osx-font-smoothing:grayscale;
  50. -webkit-font-smoothing:antialiased;
  51. font-smoothing:antialiased;
  52.  
  53. }
  54.  
  55. a {
  56. color:#aaa; /*links*/
  57. text-decoration:none;
  58. }
  59.  
  60. a,.button {
  61. transition:0.2s ease-in;
  62. -webkit-transition:0.2s ease-in;
  63. -moz-transition:0.2s ease-in;
  64. }
  65.  
  66. a:hover {
  67. color:#444; /*link hover*/
  68. text-decoration:none;
  69. }
  70.  
  71. b,strong { color:#444; /* color of bold text */ }
  72.  
  73. .button {
  74. border:0;border-radius:0;outline:0;display:block;background:inherit;
  75. cursor:help;text-shadow:none;box-shadow:none;line-height:inherit;
  76. color:#aaa;font-size:inherit;font-family:inherit;letter-spacing:inherit;
  77. }
  78.  
  79. .ui-group .button:last-of-type { border:none; }
  80. .button:hover { color:#444;}
  81. .button:active,.button.is-checked {color:#444;}
  82. .button-group:after { content: '';display: block;clear: both;}
  83. section { width:calc(540px + 200px + 40px);margin:60px auto;}
  84. .filters { width:100px;position:fixed;margin-left:0;display:block; }
  85. .right { width:100px;position:fixed;margin-left:680px; }
  86. .filters .button { width:100%;display:block;text-align:right;}
  87. .right .button { width:100%;display:block;text-align:left;}
  88. .grid { width:540px;margin:auto;}
  89.  
  90.  
  91. img.icon {
  92. margin:0px 10px 20px 10px;
  93. width:70px;
  94. border-radius:3px;
  95. float: left;
  96. position:relative;
  97. transition-duration:.35s;
  98. -moz-transition-duration:.35s;
  99. -webkit-transition-duration:.35s;
  100. -o-transition-duration:.35s;
  101. }
  102.  
  103.  
  104. a.c { bottom:27px;right:27px;position:fixed;border:none; }
  105.  
  106. .header { margin:100px auto 50px;text-align:center;width:200px;color:#aaa;}
  107. h8 { display:block;color:#444;font-size:12px;margin-bottom:5px;letter-spacing:.5px; } hr { border:none;height:1px;width:90%;margin:10px auto;display:block;background:#eee;}
  108. </style>
  109. </head>
  110. <body>
  111. <section>
  112.  
  113.  
  114. <!------ START OF HEADER ------>
  115. <div class="header">
  116.  
  117. <h8>icons by username</h8> <!--heading-->
  118.  
  119. <!--links - add or remove as you wish-->
  120. <a href="/">home</a> /
  121. <a href="/ask">request</a> /
  122. <a href="http://tumblr.com/dashboard">dashboard</a>
  123.  
  124. <p>
  125. <!--you can have a short description here if you like-->
  126. requests are currently open.
  127. <br> please credit me if using!
  128.  
  129. </div>
  130. <!------ END OF HEADER ------>
  131.  
  132. <!-- START LEFT FILTERS -->
  133. <div class="filters">
  134. <!--start editing here-->
  135.  
  136. <div class="ui-group">
  137. <div class="button-group js-radio-button-group" data-filter-group="misc">
  138.  
  139. <!--this is your first set of filters-->
  140. <button class="button is-checked" data-filter="">all icons</button>
  141. <button class="button" data-filter=".femme">femme</button>
  142. <button class="button" data-filter=".homme">homme</button>
  143. <button class="button" data-filter=".faceless">faceless</button>
  144. <button class="button" data-filter=".latest">latest</button>
  145.  
  146. </div>
  147. </div>
  148.  
  149. <!-- for another filter group, copy and paste the following
  150. <hr>
  151. <div class="ui-group">
  152. <div class="button-group js-radio-button-group" data-filter-group="CATEGORY">
  153.  
  154. <button class="button is-checked" data-filter="">all icons</button>
  155. <button class="button" data-filter=".filter">filter</button>
  156. <button class="button" data-filter=".filter">filter</button>
  157. <button class="button" data-filter=".filter">filter</button>
  158. <button class="button" data-filter=".filter">filter</button>
  159. </div>
  160. </div>
  161. -->
  162.  
  163. <!--stop editing here-->
  164. </div>
  165. <!-- END LEFT FILTERS -->
  166.  
  167. <!-- START RIGHT FILTERS -->
  168. <div class="filters right">
  169. <!--start editing here-->
  170. <div class="ui-group">
  171. <div class="button-group js-radio-button-group" data-filter-group="colour">
  172.  
  173. <button class="button is-checked" data-filter="">all icons</button>
  174. <button class="button" data-filter=".bw">black&white</button>
  175. <button class="button" data-filter=".col">colorful</button>
  176. <button class="button" data-filter=".pale">pale</button>
  177. <button class="button" data-filter=".pink">pink</button>
  178.  
  179. </div>
  180. </div>
  181.  
  182. <!-- for another filter group, copy and paste the following
  183. <hr>
  184. <div class="ui-group">
  185. <div class="button-group js-radio-button-group" data-filter-group="CATEGORY">
  186.  
  187. <button class="button is-checked" data-filter="">all icons</button>
  188. <button class="button" data-filter=".filter">filter</button>
  189. <button class="button" data-filter=".filter">filter</button>
  190. <button class="button" data-filter=".filter">filter</button>
  191. <button class="button" data-filter=".filter">filter</button>
  192. </div>
  193. </div>
  194. -->
  195.  
  196. <!--stop editing here-->
  197. </div>
  198. <!-- END RIGHT FILTERS -->
  199.  
  200. <!--- ON FILTERING ICONS
  201.  
  202. <button class="button" data-filter=".filter1">filter 1 name</button>
  203. <button class="button" data-filter=".filter2">filter 2 name</button>
  204.  
  205. <img class="icon" src="IMAGE URL"/> is an icon with no filters
  206. <img class="icon filter1" src="IMAGE URL"/> is an icon with filter 1
  207. <img class="icon filter2" src="IMAGE URL"/> is an icon with filter 2
  208. <img class="icon filter1 filter2" src="IMAGE URL"/> is an icon with both filter1 and filter2 so will show up under both filters
  209.  
  210. --->
  211.  
  212. <div class="grid">
  213. <!--start icons-->
  214.  
  215. <img class="icon FILTER" src="image url"/>
  216. <img class="icon FILTER" src="image url"/>
  217. <img class="icon FILTER" src="image url"/>
  218.  
  219. <!--end icons-->
  220. </div>
  221. </section>
  222. <!--do not edit beyond this point-->
  223. <a class="c" href="http://odeysseus.tumblr.com">O</a>
  224. </body>
  225.  
  226. </html>
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!