API tools faq
paste
rose04

muses page code

rose04
Jan 8th, 2021
33
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.56 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3. <!--
  4.  
  5.  
  6. gold
  7.  
  8. @ odeysseus
  9.  
  10.  
  11. -->
  12. <title>icons</title><!--title-->
  13.  
  14.  
  15. <link rel="shortcut icon" href="{Favicon}">
  16. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  17.  
  18. <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="https://static.tumblr.com/aptzszz/5imowy43d/filters.js"></script>
  19.  
  20. <style type="text/css">
  21.  
  22. @-webkit-keyframes fadein {
  23. 0% {opacity: 0;}
  24. 100% { opacity: 1; }
  25. }
  26.  
  27. @-moz-keyframes fadein {
  28. 0% { opacity: 0; }
  29. 100% { opacity: 1; }
  30. }
  31.  
  32. @keyframes fadein {
  33. 0% { opacity: 0; }
  34. 100% { opacity: 1; }
  35. }
  36.  
  37.  
  38. .tmblr-iframe { display:none!important; }
  39.  
  40. body {
  41. background:#fff; /*background*/
  42. font-family:'Merriweather', serif; /*font*/
  43. font-size:9px; /* font size */
  44. font-weight:300;
  45. line-height:190%;
  46. color:#777; /* text color */
  47. -webkit-animation-name: fadein;-webkit-animation-duration: 1s;
  48. -moz-osx-font-smoothing:grayscale;
  49. -webkit-font-smoothing:antialiased;
  50. font-smoothing:antialiased;
  51.  
  52. }
  53.  
  54. a {
  55. color:#aaa; /*links*/
  56. text-decoration:none;
  57. }
  58.  
  59. a,.button {
  60. transition:0.2s ease-in;
  61. -webkit-transition:0.2s ease-in;
  62. -moz-transition:0.2s ease-in;
  63. }
  64.  
  65. a:hover {
  66. color:#444; /*link hover*/
  67. text-decoration:none;
  68. }
  69.  
  70. b,strong { color:#444; /* color of bold text */ }
  71.  
  72. .button {
  73. border:0;border-radius:0;outline:0;display:block;background:inherit;
  74. cursor:help;text-shadow:none;box-shadow:none;line-height:inherit;
  75. color:#aaa;font-size:inherit;font-family:inherit;letter-spacing:inherit;
  76. }
  77.  
  78. .ui-group .button:last-of-type { border:none; }
  79. .button:hover { color:#444;}
  80. .button:active,.button.is-checked {color:#444;}
  81. .button-group:after { content: '';display: block;clear: both;}
  82. section { width:calc(540px + 200px + 40px);margin:60px auto;}
  83. .filters { width:100px;position:fixed;margin-left:0;display:block; }
  84. .right { width:100px;position:fixed;margin-left:680px; }
  85. .filters .button { width:100%;display:block;text-align:right;}
  86. .right .button { width:100%;display:block;text-align:left;}
  87. .grid { width:540px;margin:auto;}
  88.  
  89.  
  90. img.icon {
  91. margin:0px 10px 20px 10px;
  92. width:70px;
  93. border-radius:3px;
  94. float: left;
  95. position:relative;
  96. transition-duration:.35s;
  97. -moz-transition-duration:.35s;
  98. -webkit-transition-duration:.35s;
  99. -o-transition-duration:.35s;
  100. }
  101.  
  102.  
  103. a.c { bottom:27px;right:27px;position:fixed;border:none; }
  104.  
  105. .header { margin:100px auto 50px;text-align:center;width:200px;color:#aaa;}
  106. 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;}
  107. </style>
  108. </head>
  109. <body>
  110. <section>
  111.  
  112.  
  113. <!------ START OF HEADER ------>
  114. <div class="header">
  115.  
  116. <h8>my muses ♡</h8> <!--heading-->
  117.  
  118. <!--links - add or remove as you wish-->
  119. <a href="https://sanguine-bliss.tumblr.com/">graphics</a> /
  120. <a href="https://mycollabs.tumblr.com/">collabs</a> /
  121. <a href="https://www.goodreads.com/_imperfection">goodreads</a>
  122.  
  123. <p>
  124. <!--you can have a short description here if you like-->
  125. requests are currently open.
  126. <br> please credit me if using!
  127.  
  128. </div>
  129. <!------ END OF HEADER ------>
  130.  
  131. <!-- START LEFT FILTERS -->
  132. <div class="filters">
  133. <!--start editing here-->
  134.  
  135. <div class="ui-group">
  136. <div class="button-group js-radio-button-group" data-filter-group="misc">
  137.  
  138. <!--this is your first set of filters-->
  139. <button class="button is-checked" data-filter="">all muses</button>
  140. <button class="button" data-filter=".aeonian">aeonian</button>
  141. <button class="button" data-filter=".spirit">spirit</button>
  142. <button class="button" data-filter=".falsegods">false gods</button>
  143. <button class="button" data-filter=".tbote">tbote</button>
  144.  
  145. </div>
  146. </div>
  147.  
  148. <!-- for another filter group, copy and paste the following
  149. <hr>
  150. <div class="ui-group">
  151. <div class="button-group js-radio-button-group" data-filter-group="CATEGORY">
  152.  
  153. <button class="button is-checked" data-filter="">all icons</button>
  154. <button class="button" data-filter=".filter">filter</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. </div>
  159. </div>
  160. -->
  161.  
  162. <!--stop editing here-->
  163. </div>
  164. <!-- END LEFT FILTERS -->
  165.  
  166. <!-- START RIGHT FILTERS -->
  167. <div class="filters right">
  168. <!--start editing here-->
  169. <div class="ui-group">
  170. <div class="button-group js-radio-button-group" data-filter-group="colour">
  171.  
  172. <button class="button is-checked" data-filter=".100">100th</button>
  173. <button class="button" data-filter=".selection">selection</button>
  174. <button class="button" data-filter=".division">division</button>
  175. <button class="button" data-filter=".1x1">1x1</button>
  176. <button class="button" data-filter=".tba">tba</button>
  177.  
  178. </div>
  179. </div>
  180.  
  181. <!-- for another filter group, copy and paste the following
  182. <hr>
  183. <div class="ui-group">
  184. <div class="button-group js-radio-button-group" data-filter-group="CATEGORY">
  185.  
  186. <button class="button is-checked" data-filter="">all icons</button>
  187. <button class="button" data-filter=".filter">filter</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. </div>
  192. </div>
  193. -->
  194.  
  195. <!--stop editing here-->
  196. </div>
  197. <!-- END RIGHT FILTERS -->
  198.  
  199. <!--- ON FILTERING ICONS
  200.  
  201. <button class="button" data-filter=".filter1">filter 1 name</button>
  202. <button class="button" data-filter=".filter2">filter 2 name</button>
  203.  
  204. <img class="icon" src="IMAGE URL"/> is an icon with no filters
  205. <img class="icon filter1" src="IMAGE URL"/> is an icon with filter 1
  206. <img class="icon filter2" src="IMAGE URL"/> is an icon with filter 2
  207. <img class="icon filter1 filter2" src="IMAGE URL"/> is an icon with both filter1 and filter2 so will show up under both filters
  208.  
  209. --->
  210.  
  211. <div class="grid">
  212. <!--start icons-->
  213.  
  214. <img class="icon aeonian" src="https://i.pinimg.com/564x/7e/82/01/7e820148822282600d5e8365aefa529a.jpg"/>
  215. <img class="icon aeonian" src="https://64.media.tumblr.com/9f13915551cfd241c10ef6e00327f9fc/f9d841187f7bca1d-69/s250x400/bd87ce7820b8b54c039da61dbcc51214f98450f7.jpg"/>
  216. <img class="icon aeonian" src="https://i.pinimg.com/564x/c1/c8/aa/c1c8aabc2e830fa7e73d9f2e0536bb75.jpg"/>
  217. <img class="icon aeonian" src="https://i.pinimg.com/564x/a1/3d/c8/a13dc81feb43dc1e38df6e252fe5dce5.jpg"/>
  218. <img class="icon aeonian" src="https://64.media.tumblr.com/4a79e23c0ba23a740dfe1ebaafb5ad1c/tumblr_pkm5d1Vati1v1ofe3o3_250.png"/>
  219. <img class="icon aeonian" src="https://i.pinimg.com/564x/2d/ab/13/2dab13507bd081154e434dc364ad9b6c.jpg"/>
  220. <img class="icon aeonian" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/hostedimages/1605235541i/30370723.jpg"/>
  221. <img class="icon aeonian" src="https://i.pinimg.com/564x/b9/8a/28/b98a288258f72191f13589fc51270094.jpg"/>
  222. <img class="icon falsegods" src="https://i.pinimg.com/564x/96/8a/f9/968af90b47d36cbd343ad30bdd247d43.jpg"/>
  223. <img class="icon falsegods" src="https://64.media.tumblr.com/7ade4110a4549d2b890de76d4eab61db/tumblr_peaiug86kT1v352o0o5_250.png"/>
  224. <img class="icon 100" src="https://64.media.tumblr.com/8e4d9c6d6f16a703a8b53f567207e797/tumblr_pr19uzHM0S1wmi29do8_250.png"/>
  225. <img class="icon 100" src="https://i.pinimg.com/564x/f3/6e/86/f36e866c10182c56cacb993990e53e65.jpg"/>
  226. <img class="icon tbote" src="https://i.pinimg.com/564x/9b/70/52/9b7052062fe9f3275ac20263a55a9997.jpg"/>
  227. <img class="icon tbote" src="https://i.pinimg.com/564x/7f/87/5b/7f875bb3dfbd85fa499d139dc637732a.jpg"/>
  228. <img class="icon spirit" src="https://64.media.tumblr.com/87b8319c8acd51be90e96e4b78db4a9d/tumblr_pj2wn5xEna1vi0xg2o2_400.png"/>
  229. <img class="icon spirit" src="https://i.pinimg.com/564x/82/cd/b5/82cdb53b6e8b8e143b2f979e3fa5e208.jpg"/>
  230. <img class="icon spirit" src="https://i.pinimg.com/564x/a9/53/2a/a9532a16ee5be3120ba243caad600649.jpg"/>
  231. <img class="icon spirit" src="https://i.pinimg.com/474x/98/de/9f/98de9f9aa9dc64e45ac981c4ce1c4050.jpg"/>
  232. <img class="icon division" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/hostedimages/1608795538i/30580218.png"/>
  233. <img class="icon division" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/hostedimages/1608638714i/30570766.png"/>
  234. <img class="icon division" src="https://64.media.tumblr.com/2e81bdc1b8b226870943ab1318792029/98521ad10449ac13-4a/s400x600/ee69e416647cf18bfcfebd7f863f0deaefbeb170.png"/>
  235. <img class="icon division" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/hostedimages/1608791715i/30580000.png"/>
  236. <img class="icon division" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/hostedimages/1608787020i/30579818.jpg"/>
  237. <img class="icon division" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/hostedimages/1608609111i/30568886.jpg"/>
  238. <img class="icon 1x1" src="https://img.wattpad.com/5feaf2554b3d52f46ec71323f98793525160e640/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f776174747061642d6d656469612d736572766963652f53746f7279496d6167652f315a6f4d414e7171664d657144673d3d2d3731393531353033312e313539353662366233343233653432303138393331393239333239362e6a7067?s=fit&w=720&h=720"/>
  239. <img class="icon 1x1" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/hostedimages/1608433937i/30559874.jpg"/>
  240. <img class="icon 1x1" src="https://pkimgcdn.peekyou.com/e7799ae1318f2dc0de36ce3f67860711.jpeg"/>
  241. <img class="icon selection" src="https://64.media.tumblr.com/6f102c0a10fe790a08f00b0a54828623/84cd13f7203c78ae-4f/s640x960/237b954401a79a18f7b2f687201f8fec4c1cba20.jpg"/>
  242. <img class="icon selection" src="https://64.media.tumblr.com/1a5365968ba11bcd95ac830e297a1eca/tumblr_pii48tWsVG1xno8b4o2_250.jpg"/>
  243. <img class="icon selection" src="https://i.pinimg.com/564x/4b/c0/55/4bc055e145bdc1ec64ab57752c656a38.jpg"/>
  244. <img class="icon selection" src="https://i.pinimg.com/originals/3f/ef/05/3fef05f604ca6b148b1eb50154dedb86.png"/>
  245. <img class="icon selection" src="https://78.media.tumblr.com/c73a510c89cdb3fcd401dee372c3b7c8/tumblr_ou6y6eaS0X1vzezh1o6_400.png"/>
  246.  
  247. <!--end icons-->
  248. </div>
  249. </section>
  250. <!--do not edit beyond this point-->
  251. <a class="c" href="http://odeysseus.tumblr.com">O</a>
  252. </body>
  253.  
  254. </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!