API tools faq
paste
rose04

tumblr muses page with sorter

rose04
Jan 20th, 2021
42
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.96 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. - icons page #1 'swim' by sur southcodes.tumblr.com
  3. - modify as you please but please do not touch the credit
  4. - any errors? need help? have questions? let me know!
  5. southcodes.tumblr.com/ask
  6. -->
  7.  
  8. <!DOCtype html>
  9. <html>
  10. <head>
  11.  
  12. <title>{Title}</title>
  13.  
  14. <link rel="shortcut icon" href="{favicon}">
  15. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  16.  
  17. <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet">
  18. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  19. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
  20.  
  21. <style type="text/css">
  22.  
  23. .tooltip-wrap {
  24. position: relative;
  25. }
  26. .tooltip-wrap .tooltip-content {
  27. display: none;
  28. position: absolute;
  29. bottom: 5%;
  30. left: 5%;
  31. right: 5%;
  32. background-color: #fff;
  33. padding: .5em;
  34. }
  35. .tooltip-wrap:hover .tooltip-content {
  36. display: block;
  37. }
  38.  
  39. ::-webkit-scrollbar-thumb:vertical {
  40. height:0px;
  41. background-color: #888;
  42. border-right:3px solid #fff;
  43. border-top:4px solid #fff;
  44. border-bottom:4px solid #fff;}
  45. ::-webkit-scrollbar {
  46. background-color: inherit;
  47. width:4px;
  48. height:0px;}
  49. * {padding:0px;margin:0px;}
  50. .tmblr-iframe {margin:10px;opacity:.7;}
  51.  
  52. body {
  53. font-family:'Open Sans', sans-serif;
  54. font-size:13px;
  55. color:#444; /*text color*/
  56. background:#fff;
  57. font-weight: 400}
  58. a {color:#8e1f1f; /*links color*/
  59. text-decoration:none;}
  60. a:hover {
  61. color:#000; /*links on hover color*/
  62. }
  63.  
  64. /* header */
  65.  
  66. header {
  67. width:100%;
  68. height:130px;
  69. background:#e2cec9; /* header background color */
  70. position:relative;}
  71. .info {position:absolute;bottom:-30px;left:200px;}
  72.  
  73. .simg{width:70px;
  74. height:70px;
  75. padding:0px;margin:0px;border-radius:4px;}
  76. .about{display:inline-block;vertical-align: top;margin:0px 0 0 15px;}
  77.  
  78. .title {
  79. font-size:15px;
  80. font-weight:normal;
  81. text-transform:uppercase;
  82. font-weight: 700;
  83. color:#fff; /*page title color*/
  84. text-shadow:1px 1px 3px #8e1f1f; /*page title shadow color*/
  85. letter-spacing:1.2px;
  86. }
  87. nav {margin-top:2px;}
  88. nav a {padding-right:15px;font-weight: 400;font-size:12px;letter-spacing: .5px;}
  89. .desc {font-size: 13.4px;letter-spacing: .3px;margin-top:9px;}
  90.  
  91.  
  92.  
  93. /* filters */
  94.  
  95. .filters {
  96. vertical-align: top;
  97. max-height:120px;
  98. overflow:scroll;
  99. line-height:26px;
  100. z-index:2;
  101. padding: 13px 7px 5px;
  102. background: rgba(255,255,255, .95); /*background color of filters bar*/
  103. position: -webkit-sticky;position: sticky;top: 0;}
  104. .filtert {
  105. background:#e0d0d0; /*background color of filters titles*/
  106. padding:2px 4px;
  107. margin-right:6px;
  108. font-weight: 600;
  109. color:#fff; /*text color of filters titles*/
  110. text-transform: uppercase;
  111. letter-spacing:.5px;}
  112.  
  113. /* buttons */
  114.  
  115. button {border:0px;background: transparent;font-size: inherit;margin: 0px 2px;padding:0px 3px 3px;}
  116. button:focus {outline:0;}
  117. .is-checked {
  118. border-bottom: 2px solid #e0d0d0; /*underline in checked filter color*/
  119. }
  120. .button-group {margin-bottom: 13px;}
  121.  
  122. /* grid */
  123.  
  124. .container {
  125. width:calc(115px * 6); /* change the last number for the number of rows you want */
  126. margin: 100px 0 50px 200px;}
  127.  
  128. .grid {margin-top: 60px}
  129. .grid-item {height:95px;width:95px;margin:10px;}
  130. .grid-item img{height:95px;width:95px;}
  131.  
  132. </style>
  133. </head>
  134. <body>
  135.  
  136. <header>
  137.  
  138. <aside class="info">
  139.  
  140. <a href="/"><img class="simg" src="https://i.pinimg.com/236x/72/50/5e/72505e1374e1fb3687f8394ee8285272.jpg"/></a>
  141.  
  142. <div class="about">
  143. <h1 class="title">my muses</h1>
  144.  
  145. <nav>
  146. <a href="https://sanguine-bliss.tumblr.com/">inspo</a>
  147. <a href="https://mycollabs.tumblr.com/">collabs</a>
  148. <a href="https://www.goodreads.com/_imperfection">goodreads</a>
  149. <a href="https://www.pinterest.com/imperfection__">pinterest</a>
  150. </nav>
  151.  
  152. <div class="desc">my babies!!! i love them so much ♡ please click on the pictures to find posts tagged under
  153. <br> their names. to reset the filters, click on 'all options' for every category. only select one</br>group per time !!!</br></br></br></div>
  154. </div>
  155.  
  156. </aside> <!--info-->
  157.  
  158. </header> <!--header-->
  159.  
  160.  
  161. <section class="container">
  162.  
  163.  
  164. <!--
  165.  
  166. PART 1: HOW TO CUSTOMIZE FILTERS:
  167.  
  168. 1) copy the group template and paste it right under <div class="filters"> :
  169.  
  170. <div class="button-group" data-filter-group="UNIQUE NAME HERE">
  171. <span class="filtert">FILTER TITLE</span>
  172.  
  173. <button class="button is-checked" data-filter="">ALL OPTIONS</button>
  174. <button class="button" data-filter=".UNIQUE FILTER NAME">OPTION 1</button>
  175. </div>
  176.  
  177. 2) change the 'UNIQUE NAME HERE' for whatever you want. only letters and no spaces (if you add more groups always choose different names). DO NOT delete the dot at the start of the word or the filters wont work
  178.  
  179. 3) change the 'FILTER TITLE' and 'ALL OPTIONS' for whatever you want them to say
  180.  
  181. 4) change the OPTION 1 for the name of the filter you want, then change the 'UNIQUE FILTER NAME' for a single word (no spaces) with a dot which you will use to link each icon to each filter. repeat this step and copy paste for multiple options
  182.  
  183. should look something like this:
  184.  
  185. <div class="button-group" data-filter-group="colors">
  186. <span class="filtert">filter by color</span>
  187.  
  188. <button class="button is-checked" data-filter="">all colors</button>
  189. <button class="button" data-filter=".red">red hair</button>
  190. <button class="button" data-filter=".blue">blue hair</button>
  191. <button class="button" data-filter=".green">green hair</button>
  192. </div>
  193.  
  194.  
  195. keep scrolling for the second part
  196.  
  197. -->
  198.  
  199.  
  200.  
  201.  
  202. <!-- FILTERS -->
  203.  
  204. <div class="filters">
  205.  
  206.  
  207.  
  208. <div class="button-group" data-filter-group="a">
  209. <span class="filtert">medieval</span>
  210.  
  211. <button class="button is-checked" data-filter="">all options</button>
  212. <button class="button" data-filter=".aeonian">aeonian</button>
  213. <button class="button" data-filter=".spirit">spirit kingdom</button>
  214. <button class="button" data-filter=".diamond">diamond of the first water</button>
  215. </div>
  216.  
  217.  
  218. <div class="button-group" data-filter-group="b">
  219. <span class="filtert">modern</span>
  220.  
  221. <button class="button is-checked" data-filter="">all options</button>
  222. <button class="button" data-filter=".tbote">the beginning of the end</button>
  223. </div>
  224.  
  225.  
  226. <div class="button-group" data-filter-group="c">
  227. <span class="filtert">futuristic</span>
  228.  
  229. <button class="button is-checked" data-filter="">all options</button>
  230. <button class="button" data-filter=".falsegods">false gods</button>
  231. <button class="button" data-filter=".division">division</button>
  232. </div>
  233.  
  234. <div class="button-group" data-filter-group="c">
  235. <span class="filtert">others</span>
  236.  
  237. <button class="button is-checked" data-filter="">all options</button>
  238. <button class="button" data-filter=".100">100th</button>
  239. <button class="button" data-filter=".selection">the selection</button>
  240. <button class="button" data-filter=".1x1">1x1</button>
  241. </div>
  242.  
  243.  
  244.  
  245. </div><!--filters end-->
  246.  
  247.  
  248. <!--
  249.  
  250. PART 2: HOW TO CUSTOMIZE ICONS
  251.  
  252. 1) TEMPLATES:
  253.  
  254. template with link
  255.  
  256. <figure class="grid-item FILTER1 FILTER2">
  257. <a href="LINK"><img src="IMAGE_URL"/></a>
  258. </figure>
  259.  
  260. ____________
  261.  
  262. template without link
  263.  
  264. <figure class="grid-item FILTER1 FILTER2">
  265. <img src="IMAGE_URL"/>
  266. </figure>
  267.  
  268.  
  269. ^ choose the template you need and paste it right after <main class="grid">
  270. then change the 'FILTER1' to the same filter name you wrote previously (eg. 'blue' or 'green'), and the FILTER2 for whatever other filter you want that icon to have, delete it if not, remember they need to be separated with a space. change the image url and link accordingly: should look like this at the end
  271.  
  272. <figure class="grid-item blue long">
  273. <a href="LINK"><img src="IMAGE_URL"/></a>
  274. </figure>
  275.  
  276.  
  277. that's it! it can be quite hard to understand, so shoot me an ask if you have any issues: http://southcodes.tumblr.com/ask
  278.  
  279. -->
  280.  
  281. <!-- ICONS -->
  282.  
  283. <main class="grid">
  284.  
  285.  
  286.  
  287.  
  288.  
  289.  
  290.  
  291. <!--template with link-->
  292. <figure class="grid-item aeonian">
  293. <div class="tooltip-wrap">
  294. <a href="https://sanguine-bliss.tumblr.com/tagged/gem"><img src="https://i.pinimg.com/564x/7e/82/01/7e820148822282600d5e8365aefa529a.jpg"/></a>
  295. <div class="tooltip-content">
  296. <p>gem</p>
  297. </div>
  298. </div>
  299. </figure>
  300. <figure class="grid-item aeonian">
  301. <div class="tooltip-wrap">
  302. <a href="https://sanguine-bliss.tumblr.com/tagged/astro"><img src="https://64.media.tumblr.com/9f13915551cfd241c10ef6e00327f9fc/f9d841187f7bca1d-69/s250x400/bd87ce7820b8b54c039da61dbcc51214f98450f7.jpg"/></a>
  303. <div class="tooltip-content">
  304. <p>astro</p>
  305. </div>
  306. </div>
  307. </figure>
  308. <figure class="grid-item aeonian">
  309. <div class="tooltip-wrap">
  310. <a href="https://sanguine-bliss.tumblr.com/tagged/rune"><img src="https://i.pinimg.com/564x/c1/c8/aa/c1c8aabc2e830fa7e73d9f2e0536bb75.jpg"/></a>
  311. <div class="tooltip-content">
  312. <p>rune</p>
  313. </div>
  314. </div>
  315. </figure>
  316. <figure class="grid-item aeonian">
  317. <div class="tooltip-wrap">
  318. <a href="https://sanguine-bliss.tumblr.com/tagged/sera"><img src="https://i.pinimg.com/564x/a1/3d/c8/a13dc81feb43dc1e38df6e252fe5dce5.jpg"/></a>
  319. <div class="tooltip-content">
  320. <p>sera</p>
  321. </div>
  322. </div>
  323. </figure>
  324. <figure class="grid-item aeonian">
  325. <div class="tooltip-wrap">
  326. <a href="https://sanguine-bliss.tumblr.com/tagged/ying"><img src="https://64.media.tumblr.com/4a79e23c0ba23a740dfe1ebaafb5ad1c/tumblr_pkm5d1Vati1v1ofe3o3_250.png"/></a>
  327. <div class="tooltip-content">
  328. <p>ying</p>
  329. </div>
  330. </div>
  331. </figure>
  332. <figure class="grid-item aeonian">
  333. <div class="tooltip-wrap">
  334. <a href="https://sanguine-bliss.tumblr.com/tagged/sky"><img src="https://i.pinimg.com/564x/2d/ab/13/2dab13507bd081154e434dc364ad9b6c.jpg"/></a>
  335. <div class="tooltip-content">
  336. <p>sky</p>
  337. </div>
  338. </div>
  339. </figure>
  340. <figure class="grid-item aeonian">
  341. <div class="tooltip-wrap">
  342. <a href="https://sanguine-bliss.tumblr.com/tagged/oli"><img src="https://i.pinimg.com/564x/b9/8a/28/b98a288258f72191f13589fc51270094.jpg"/></a>
  343. <div class="tooltip-content">
  344. <p>oli</p>
  345. </div>
  346. </div>
  347. </figure>
  348. <figure class="grid-item falsegods">
  349. <div class="tooltip-wrap">
  350. <a href="https://sanguine-bliss.tumblr.com/tagged/rhea"><img src="https://i.pinimg.com/564x/96/8a/f9/968af90b47d36cbd343ad30bdd247d43.jpg"/></a>
  351. <div class="tooltip-content">
  352. <p>rhea</p>
  353. </div>
  354. </div>
  355. </figure>
  356. <figure class="grid-item falsegods">
  357. <div class="tooltip-wrap">
  358. <a href="https://sanguine-bliss.tumblr.com/tagged/aera"><img src="https://64.media.tumblr.com/7ade4110a4549d2b890de76d4eab61db/tumblr_peaiug86kT1v352o0o5_250.png"/></a>
  359. <div class="tooltip-content">
  360. <p>aera</p>
  361. </div>
  362. </div>
  363. </figure>
  364. <figure class="grid-item 100">
  365. <div class="tooltip-wrap">
  366. <a href="https://sanguine-bliss.tumblr.com/tagged/cassie"><img src="https://64.media.tumblr.com/8e4d9c6d6f16a703a8b53f567207e797/tumblr_pr19uzHM0S1wmi29do8_250.png"/></a>
  367. <div class="tooltip-content">
  368. <p>cassie</p>
  369. </div>
  370. </div>
  371. </figure>
  372. <figure class="grid-item 100">
  373. <div class="tooltip-wrap">
  374. <a href="https://sanguine-bliss.tumblr.com/tagged/cyn"><img src="https://i.pinimg.com/564x/f3/6e/86/f36e866c10182c56cacb993990e53e65.jpg"/></a>
  375. <div class="tooltip-content">
  376. <p>cyn</p>
  377. </div>
  378. </div>
  379. </figure>
  380. <figure class="grid-item tbote">
  381. <div class="tooltip-wrap">
  382. <a href="https://sanguine-bliss.tumblr.com/tagged/will"><img src="https://i.pinimg.com/564x/9b/70/52/9b7052062fe9f3275ac20263a55a9997.jpg"/></a>
  383. <div class="tooltip-content">
  384. <p>will</p>
  385. </div>
  386. </div>
  387. </figure>
  388. <figure class="grid-item tbote">
  389. <div class="tooltip-wrap">
  390. <a href="https://sanguine-bliss.tumblr.com/tagged/soraya"><img src="https://i.pinimg.com/564x/7f/87/5b/7f875bb3dfbd85fa499d139dc637732a.jpg"/></a>
  391. <div class="tooltip-content">
  392. <p>soraya</p>
  393. </div>
  394. </div>
  395. </figure>
  396. <figure class="grid-item spirit">
  397. <div class="tooltip-wrap">
  398. <a href="https://sanguine-bliss.tumblr.com/tagged/ellie"><img src="https://64.media.tumblr.com/87b8319c8acd51be90e96e4b78db4a9d/tumblr_pj2wn5xEna1vi0xg2o2_400.png"/></a>
  399. <div class="tooltip-content">
  400. <p>ellie</p>
  401. </div>
  402. </div>
  403. </figure>
  404. <figure class="grid-item spirit">
  405. <div class="tooltip-wrap">
  406. <a href="https://sanguine-bliss.tumblr.com/tagged/nia"><img src="https://i.pinimg.com/564x/82/cd/b5/82cdb53b6e8b8e143b2f979e3fa5e208.jpg"/></a>
  407. <div class="tooltip-content">
  408. <p>nia</p>
  409. </div>
  410. </div>
  411. </figure>
  412. <figure class="grid-item spirit">
  413. <div class="tooltip-wrap">
  414. <a href="https://sanguine-bliss.tumblr.com/tagged/styx"><img src="https://i.pinimg.com/564x/a9/53/2a/a9532a16ee5be3120ba243caad600649.jpg"/></a>
  415. <div class="tooltip-content">
  416. <p>styx</p>
  417. </div>
  418. </div>
  419. </figure>
  420. <figure class="grid-item spirit">
  421. <div class="tooltip-wrap">
  422. <a href="https://sanguine-bliss.tumblr.com/tagged/ez"><img src="https://i.pinimg.com/474x/98/de/9f/98de9f9aa9dc64e45ac981c4ce1c4050.jpg"/></a>
  423. <div class="tooltip-content">
  424. <p>ez</p>
  425. </div>
  426. </div>
  427. </figure>
  428. <figure class="grid-item aeonian">
  429. <div class="tooltip-wrap">
  430. <a href="https://sanguine-bliss.tumblr.com/tagged/aaron"><img src="https://i.pinimg.com/originals/6f/c7/41/6fc7415c35e42d5a658f676e3d6b7ffa.jpg"/></a>
  431. <div class="tooltip-content">
  432. <p>aaron</p>
  433. </div>
  434. </div>
  435. </figure>
  436. <figure class="grid-item division">
  437. <div class="tooltip-wrap">
  438. <a href="https://sanguine-bliss.tumblr.com/tagged/liam"><img src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/hostedimages/1608795538i/30580218.png"/></a>
  439. <div class="tooltip-content">
  440. <p>liam</p>
  441. </div>
  442. </div>
  443. </figure>
  444. <figure class="grid-item division">
  445. <div class="tooltip-wrap">
  446. <a href="https://sanguine-bliss.tumblr.com/tagged/fin"><img src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/hostedimages/1608638714i/30570766.png"/></a>
  447. <div class="tooltip-content">
  448. <p>fin</p>
  449. </div>
  450. </div>
  451. </figure>
  452. <figure class="grid-item division">
  453. <div class="tooltip-wrap">
  454. <a href="https://sanguine-bliss.tumblr.com/tagged/june"><img src="https://64.media.tumblr.com/2e81bdc1b8b226870943ab1318792029/98521ad10449ac13-4a/s400x600/ee69e416647cf18bfcfebd7f863f0deaefbeb170.png"/></a>
  455. <div class="tooltip-content">
  456. <p>june</p>
  457. </div>
  458. </div>
  459. </figure>
  460. <figure class="grid-item division">
  461. <div class="tooltip-wrap">
  462. <a href="https://sanguine-bliss.tumblr.com/tagged/kylie"><img src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/hostedimages/1608791715i/30580000.png"/></a>
  463. <div class="tooltip-content">
  464. <p>kylie</p>
  465. </div>
  466. </div>
  467. </figure>
  468. <figure class="grid-item division">
  469. <div class="tooltip-wrap">
  470. <a href="https://sanguine-bliss.tumblr.com/tagged/jordan"><img src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/hostedimages/1608787020i/30579818.jpg"/></a>
  471. <div class="tooltip-content">
  472. <p>jordan</p>
  473. </div>
  474. </div>
  475. </figure>
  476. <figure class="grid-item division">
  477. <div class="tooltip-wrap">
  478. <a href="https://sanguine-bliss.tumblr.com/tagged/kedian"><img src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/hostedimages/1608609111i/30568886.jpg"/></a>
  479. <div class="tooltip-content">
  480. <p>kedian</p>
  481. </div>
  482. </div>
  483. </figure>
  484. <figure class="grid-item 1x1">
  485. <div class="tooltip-wrap">
  486. <a href="https://sanguine-bliss.tumblr.com/tagged/thea"><img src="https://img.wattpad.com/5feaf2554b3d52f46ec71323f98793525160e640/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f776174747061642d6d656469612d736572766963652f53746f7279496d6167652f315a6f4d414e7171664d657144673d3d2d3731393531353033312e313539353662366233343233653432303138393331393239333239362e6a7067?s=fit&w=720&h=720"/></a>
  487. <div class="tooltip-content">
  488. <p>thea</p>
  489. </div>
  490. </div>
  491. </figure>
  492. <figure class="grid-item 1x1">
  493. <div class="tooltip-wrap">
  494. <a href="https://sanguine-bliss.tumblr.com/tagged/kye"><img src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/hostedimages/1608433937i/30559874.jpg"/></a>
  495. <div class="tooltip-content">
  496. <p>kye</p>
  497. </div>
  498. </div>
  499. </figure>
  500. <figure class="grid-item 1x1">
  501. <div class="tooltip-wrap">
  502. <a href="https://sanguine-bliss.tumblr.com/tagged/ash"><img src="https://pkimgcdn.peekyou.com/e7799ae1318f2dc0de36ce3f67860711.jpeg"/></a>
  503. <div class="tooltip-content">
  504. <p>ash</p>
  505. </div>
  506. </div>
  507. </figure>
  508. <figure class="grid-item selection">
  509. <div class="tooltip-wrap">
  510. <a href="https://sanguine-bliss.tumblr.com/tagged/elektra"><img src="https://64.media.tumblr.com/6f102c0a10fe790a08f00b0a54828623/84cd13f7203c78ae-4f/s640x960/237b954401a79a18f7b2f687201f8fec4c1cba20.jpg"/></a>
  511. <div class="tooltip-content">
  512. <p>elektra</p>
  513. </div>
  514. </div>
  515. </figure>
  516. <figure class="grid-item selection">
  517. <div class="tooltip-wrap">
  518. <a href="https://sanguine-bliss.tumblr.com/tagged/mea"><img src="https://64.media.tumblr.com/1a5365968ba11bcd95ac830e297a1eca/tumblr_pii48tWsVG1xno8b4o2_250.jpg"/></a>
  519. <div class="tooltip-content">
  520. <p>mea</p>
  521. </div>
  522. </div>
  523. </figure>
  524. <figure class="grid-item selection">
  525. <div class="tooltip-wrap">
  526. <a href="https://sanguine-bliss.tumblr.com/tagged/az"><img src="https://i.pinimg.com/564x/4b/c0/55/4bc055e145bdc1ec64ab57752c656a38.jpg"/></a>
  527. <div class="tooltip-content">
  528. <p>az</p>
  529. </div>
  530. </div>
  531. </figure>
  532. <figure class="grid-item selection">
  533. <div class="tooltip-wrap">
  534. <a href="https://sanguine-bliss.tumblr.com/tagged/leia"><img src="https://i.pinimg.com/originals/3f/ef/05/3fef05f604ca6b148b1eb50154dedb86.png"/></a>
  535. <div class="tooltip-content">
  536. <p>leia</p>
  537. </div>
  538. </div>
  539. </figure>
  540. <figure class="grid-item selection">
  541. <div class="tooltip-wrap">
  542. <a href="https://sanguine-bliss.tumblr.com/tagged/serene"><img src="https://64.media.tumblr.com/c73a510c89cdb3fcd401dee372c3b7c8/tumblr_ou6y6eaS0X1vzezh1o6_400.png"/></a>
  543. <div class="tooltip-content">
  544. <p>serene</p>
  545. </div>
  546. </div>
  547. </figure>
  548. <figure class="grid-item diamond">
  549. <div class="tooltip-wrap">
  550. <a href="https://sanguine-bliss.tumblr.com/tagged/liliana"><img src="https://64.media.tumblr.com/440fad863c14e9cde8bce4310822f14b/tumblr_ptcqnoLXoS1smeeqf_1280.png"/></a>
  551. <div class="tooltip-content">
  552. <p>liliana</p>
  553. </div>
  554. </div>
  555. </figure>
  556. <figure class="grid-item diamond">
  557. <div class="tooltip-wrap">
  558. <a href="https://sanguine-bliss.tumblr.com/tagged/ria"><img src="https://images6.fanpop.com/image/photos/35500000/Im-YoonA-Icons-im-yoona-35542900-240-240.png"/></a>
  559. <div class="tooltip-content">
  560. <p>ria</p>
  561. </div>
  562. </div>
  563. </figure>
  564. <figure class="grid-item diamond">
  565. <div class="tooltip-wrap">
  566. <a href="https://sanguine-bliss.tumblr.com/tagged/archer"><img src="https://64.media.tumblr.com/0f7810ea2ffc86428a1c8b5a9bd166da/tumblr_p6xdr04Ie91x06fpko9_400.png"/></a>
  567. <div class="tooltip-content">
  568. <p>archer</p>
  569. </div>
  570. </div>
  571. </figure>
  572. <figure class="grid-item diamond">
  573. <div class="tooltip-wrap">
  574. <a href="https://sanguine-bliss.tumblr.com/tagged/cyrus"><img src="https://64.media.tumblr.com/231260ea873327d458d000e660e621b9/tumblr_p92u5jvKXr1xno8b4o5_400.jpg"/></a>
  575. <div class="tooltip-content">
  576. <p>cyrus</p>
  577. </div>
  578. </div>
  579. </figure>
  580.  
  581.  
  582.  
  583.  
  584.  
  585.  
  586.  
  587.  
  588.  
  589. </main> <!--grid--> <!-- END ICONS -->
  590.  
  591. </section> <!-- container -->
  592. <script type="text/javascript">
  593. $(document).ready( function() {
  594. // init Isotope
  595. var $grid = $('.grid').isotope({
  596. itemSelector: '.grid-item'
  597. });
  598. // store filter for each group
  599. var filters = {};
  600. $('.filters').on( 'click', '.button', function() {
  601. var $this = $(this);
  602. // get group key
  603. var $buttonGroup = $this.parents('.button-group');
  604. var filterGroup = $buttonGroup.attr('data-filter-group');
  605. // set filter for group
  606. filters[ filterGroup ] = $this.attr('data-filter');
  607. // combine filters
  608. var filterValue = concatValues( filters );
  609. // set filter for Isotope
  610. $grid.isotope({ filter: filterValue });
  611. });
  612. // change is-checked class on buttons
  613. $('.button-group').each( function( i, buttonGroup ) {
  614. var $buttonGroup = $( buttonGroup );
  615. $buttonGroup.on( 'click', 'button', function() {
  616. $buttonGroup.find('.is-checked').removeClass('is-checked');
  617. $( this ).addClass('is-checked');
  618. });
  619. });
  620. });
  621. // flatten object by concatting values
  622. function concatValues( obj ) {
  623. var value = '';
  624. for ( var prop in obj ) {
  625. value += obj[ prop ];
  626. }
  627. return value;
  628. }
  629. </script>
  630.  
  631. <script>
  632. $(".filters").hover(function() {
  633. var oldScrollPos = $(window).scrollTop();
  634.  
  635. $(window).on('scroll.scrolldisabler', function(event) {
  636. $(window).scrollTop(oldScrollPos);
  637. event.preventDefault();
  638. });
  639. }, function() {
  640. $(window).off('scroll.scrolldisabler');
  641. });
  642. </script>
  643.  
  644. <div style="position:fixed;bottom:18px;right:18px;font-family:calibri;font-size:14.5px;line-height:18px;height:20px;text-align:center;width:20px;color:#777;letter-spacing:.7px;background:white"><a style="color:#555" href="http://southcodes.tumblr.com" title="southcodes">sc</a></div>
  645. </body>
  646. </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!