rose04

collabs page with sorter

Jan 18th, 2021
58
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 66.96 KB | None | 0 0
  1. <!--
  2.  
  3. - bias page #1 'lullaby' by skye southcodes.tumblr.com
  4. - modify as you please but please do not touch the credit
  5. - any errors? need help? have questions? let me know!
  6. southcodes.tumblr.com/inbox
  7.  
  8. - normalize css by https://github.com/necolas
  9. - fonts by google
  10. - honeybee icon font by https://honeybee.suiomi.com/
  11.  
  12. -->
  13. <!DOCTYPE html>
  14. <html>
  15. <head>
  16. <title>{title}</title>
  17.  
  18. <meta name="viewport" content="width=device-width">
  19.  
  20. <link rel="shortcut icon" href="{favicon}">
  21. <meta name="description" content="{MetaDescription}"/>
  22.  
  23. <!-- fonts -->
  24. <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600|Montserrat:500,600" rel="stylesheet">
  25.  
  26. <!-- normalize -->
  27. <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">
  28.  
  29. <!-- honeybee icon font --> <link rel="stylesheet" href="https://solrainha.github.io/honeybee/honeybee.css" >
  30.  
  31.  
  32. <style>
  33. /* quick color customization */
  34.  
  35. :root {
  36. --background: #fff;
  37. --links-color: #000000;
  38. --links-hover: gray;
  39. --boxes-background:#fcfcfc;
  40. --borders:#eeeeee;
  41. }
  42.  
  43.  
  44. .tmblr-iframe {margin:.7rem;opacity:.6;-ms-transform: scale(0.85); /* IE 9 */-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
  45. .tmblr-iframe:hover {opacity:.8;}
  46.  
  47. ::-webkit-scrollbar-thumb:vertical {border-left:2px solid var(--links-color);}
  48. ::-webkit-scrollbar {width:6px;height: 0}
  49. ::-webkit-scrollbar-track-piece{margin:5px 0;}
  50.  
  51. pre {font-family:consolas;
  52. white-space: pre-wrap; /* css-3 */
  53. white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  54. white-space: -pre-wrap; /* Opera 4- */
  55. white-space: -o-pre-wrap; /* Opera 7 */
  56. word-wrap: break-word;} /* Internet Explorer 5.5+ */
  57.  
  58. body, figure{margin:0;padding:0}
  59. html{font: 14px 'Open Sans', sans-serif;}
  60. body {font-size:14px;color:#333;background:var(--background);}
  61. a {text-decoration: none;color:var(--links-color);word-break:break-word;}
  62. a:hover {color:var(--links-hover);}
  63. blockquote {margin:0;padding:0;}
  64. img {max-width:100%;height: auto;display: block;margin: .7rem 0}
  65. hr {border:0;border-top:1px solid #aaa;margin:0;}
  66. u {text-decoration: none;
  67. padding: 0 .3rem .3rem;border-bottom: 1px solid var(--links-color)}
  68.  
  69. /* header */
  70.  
  71. header {
  72. width: 90vw;
  73. max-width: 40rem;
  74. margin: 7rem auto 5rem;
  75. }
  76.  
  77. .himg {
  78. width: 7rem;
  79. height: 7rem;
  80. margin-right: 1rem;
  81. display: inline-block;
  82. vertical-align: middle;}
  83. img.himg {
  84. object-fit: cover;
  85. border-radius: 100%;
  86. margin: 0}
  87.  
  88. #hinside {
  89. width: calc(100% - 8.4rem);
  90. display: inline-block;
  91. vertical-align: middle;
  92. padding: 0 1rem;
  93. box-sizing: border-box;
  94. background: var(--boxes-background);
  95. border:1px solid var(--borders)}
  96.  
  97. #title {
  98. font:500 1.2rem 'Montserrat', sans-serif;
  99. margin: 1rem 0 1.5rem;
  100. letter-spacing: .03rem;
  101. }
  102. #title span {
  103. padding:0 .5rem .5rem;
  104. border-bottom: 1px solid var(--links-color);
  105. }
  106.  
  107. #desc {
  108. font-size: .9rem;
  109. letter-spacing: .05rem;
  110. font-style: italic;
  111. margin: 1.5rem 0;
  112. line-height: 175%
  113. }
  114.  
  115.  
  116. /* nav */
  117.  
  118. #navi ul,#navi li {list-style-type:none;margin:0;padding:0;}
  119. #navi ul li {display: inline-block;margin: 0 .7rem}
  120. #navi {
  121. font:500 .95rem 'Montserrat', sans-serif;
  122. text-transform: uppercase;
  123. margin-top: 1rem;
  124. width: calc(100% - 8.4rem);
  125. float: right;
  126. line-height: 170%}
  127.  
  128.  
  129. /* main */
  130.  
  131. main {
  132. width: calc((23rem * 3) + (4rem * 3) + 14px);
  133. margin: 7rem auto;
  134. }
  135.  
  136. .bias {
  137. width: calc(23rem + 2px);
  138. display: inline-block;
  139. margin: 2rem 2rem;
  140. border:1px solid var(--borders);
  141. box-sizing: border-box;
  142. vertical-align:middle;
  143. }
  144.  
  145. figure.bimg {
  146. float: left;
  147. width: 11rem;
  148. height: 11rem;
  149. box-sizing: border-box;
  150. border:.7rem solid #ffffff;
  151. }
  152. img.bimg {
  153. width: 100%;
  154. height: 100%;
  155. object-fit: cover;
  156. margin: 0;
  157. }
  158.  
  159. .binside {
  160. width: 12rem;
  161. height: 11rem;
  162. float: right;
  163. background: var(--boxes-background);
  164. overflow: scroll;
  165. padding: .5rem 1rem;
  166. box-sizing: border-box;
  167. word-break: break-word;
  168. border-left: 1px solid var(--borders)
  169. }
  170.  
  171. .name {
  172. margin-top: 0rem;
  173. font:600 .95rem 'Montserrat', sans-serif;
  174. text-transform: uppercase;
  175. letter-spacing: .04rem;
  176. line-height: 220%
  177. }
  178.  
  179. .name span {
  180.  
  181. padding:0 .5rem .5rem;
  182. border-bottom: 1px solid var(--links-color);
  183. }
  184.  
  185. .group {
  186. font:400 .9rem 'Open Sans', sans-serif;
  187. text-align: right;
  188. font-style: italic;
  189. letter-spacing: .08rem;
  190. margin-top: 1rem
  191. }
  192.  
  193. .details {
  194. font-size: .9rem;
  195. margin-top: 1.5rem;
  196. padding-top: .5rem;
  197. border-top: 1px solid var(--borders)
  198. }
  199. .details .tag {
  200. font-weight: 600;
  201. text-transform: uppercase;
  202. font:.95rem;
  203. }
  204.  
  205. .details .th {
  206. color: var(--links-color);
  207. margin-right: .2rem
  208. }
  209.  
  210. .details .value {
  211. margin-top: -.5rem;
  212. margin-bottom: 0;
  213. font-size: .8rem;
  214. font-style: italic;
  215. text-align: right;
  216. letter-spacing: .04rem
  217. }
  218.  
  219. .bdesc {
  220. border-top:1px solid var(--borders);
  221. width: 100%;
  222. background: var(--boxes-background);
  223. box-sizing: border-box;
  224. padding: 1px 1rem;
  225. text-align: center;
  226. font-size: .9rem;
  227. font-style: italic;
  228. letter-spacing: .07rem;
  229. clear: both
  230. }
  231. .value,.tag {
  232. margin: 1rem 0
  233. }
  234.  
  235.  
  236. /* DONT TOUCH */
  237.  
  238. #sc {z-index:9999;position:fixed;bottom:1.5rem;right:2rem;line-height:0%;padding:1rem .5rem;font-size:.8rem;background:white;font-family:'Open Sans', sans-serif;color:#777;}
  239.  
  240.  
  241. /* MEDIA */
  242.  
  243.  
  244.  
  245. @media only screen and (min-width:0) and (max-width:820px) {
  246.  
  247. main,.bias {
  248. width: calc(31rem + 2px);
  249. margin:3rem auto;
  250. }
  251.  
  252. figure.bimg,.binside {
  253. width: 15rem;
  254. height: 15rem;
  255. }
  256.  
  257. .binside {
  258. width: 16rem
  259. }
  260.  
  261. }
  262.  
  263.  
  264. @media only screen and (min-width:821px) and (max-width:1050px) {
  265.  
  266.  
  267. main {
  268. width: calc((23rem * 2) + (4rem * 2) + 14px);
  269. margin: 7rem auto
  270. }
  271.  
  272. .bias {
  273. width: calc(23rem + 2px);
  274. margin: 2rem 2rem
  275. }
  276.  
  277. figure.bimg {
  278.  
  279. }
  280. }
  281.  
  282.  
  283. </style>
  284.  
  285. </head>
  286. <body>
  287.  
  288. <header>
  289.  
  290. <article class="himg">
  291.  
  292. <!-- header image, will automatically crop as a circle -->
  293.  
  294. <img class="himg" src="https://i.pinimg.com/236x/98/f0/73/98f073a9c224a692f6e79fb095c58987.jpg"></img>
  295.  
  296. </article>
  297.  
  298. <article id="hinside">
  299. <h1 id="title"><span>
  300.  
  301. MY COLLABS
  302.  
  303. </span></h1>
  304.  
  305. <div id="desc">
  306.  
  307. <!-- please wrap all paragraphs <p></p> -->
  308.  
  309. <p>a place where i keep a record of <i>~ my collabs ~</i><br><br><b>key</b></br></br><br>♡ romance</br><br>◌ friends</br><br>● family</br><br>x enemies</br>
  310. </p>
  311.  
  312. </div>
  313. </article>
  314.  
  315. <nav id="navi"><ul>
  316.  
  317. <li><a href="https://my-msings.tumblr.com/">home</a></li>
  318. <li><a href="https://sanguine-bliss.tumblr.com/">graphics</a></li>
  319.  
  320. </ul></nav>
  321.  
  322. </header>
  323.  
  324.  
  325. <div id="sort">
  326. <ul class="filter option-set exclusive" data-filter-group="group1">
  327. <b>groups:</b>
  328. <li><a href="#" data-filter-value="" class="selected">all</a></li>
  329. <li><a href="#" data-filter-value=".aeonian">aeonian</a></li>
  330. <li><a href="#" data-filter-value=".false">false gods</a></li>
  331. <li><a href="#" data-filter-value=".100">100th</a></li>
  332. <li><a href="#" data-filter-value=".spirit">spirit kingdom</a></li>
  333. <li><a href="#" data-filter-value=".selection">the selection</a></li>
  334. <li><a href="#" data-filter-value=".division">division</a></li>
  335. <li><a href="#" data-filter-value=".1x1">1x1</a></li>
  336. <li><a href="#" data-filter-value=".tbote">tbote</a></li>
  337. <li><a href="#" data-filter-value=".diamond">diamond</a></li>
  338. </ul>
  339. </div>
  340.  
  341.  
  342. <main>
  343.  
  344. <!-- bias box start --> <article class="bias">
  345.  
  346.  
  347. <figure class="bimg">
  348.  
  349. <!-- bias image, will automatically crop as a square -->
  350.  
  351. <img class="bimg" src="https://i.pinimg.com/236x/79/f7/e1/79f7e1b236cdc69a3d4f30ae15ca2af7.jpg"></img>
  352.  
  353. </figure>
  354.  
  355. <article class="binside">
  356.  
  357.  
  358. <h2 class="name"><span>
  359.  
  360. gemini
  361.  
  362. </span></h2>
  363.  
  364. <h3 class="group">
  365.  
  366. aeonian
  367.  
  368. </h3>
  369.  
  370. <div class="details">
  371.  
  372.  
  373. <div class="tag">
  374. ♡ andria
  375. </div>
  376.  
  377. <div class="value">
  378. true love
  379. @ goblin
  380. </div>
  381.  
  382. <div class="tag">
  383. ● lucien
  384. </div>
  385.  
  386. <div class="value">
  387. oldest brother
  388. @ shinnie
  389. </div>
  390.  
  391. <div class="tag">
  392. ● lukya
  393. </div>
  394.  
  395. <div class="value">
  396. estranged twin
  397. @ jenny
  398. </div>
  399.  
  400. <div class="tag">
  401. ● dovev
  402. </div>
  403.  
  404. <div class="value">
  405. protective brother
  406. @ maisie
  407. </div>
  408.  
  409. <div class="tag">
  410. ♡ name
  411. </div>
  412.  
  413. <div class="value">
  414. unrequited love
  415. @ maisie
  416. </div>
  417.  
  418. </div> <!-- details end -->
  419.  
  420. </article> <!-- inside end -->
  421.  
  422. <div class="bdesc">
  423. <!-- please wrap all your paragraphs between <p></p> -->
  424.  
  425. <p>princess of incendium, fading fire powers</p>
  426.  
  427. </div>
  428.  
  429. </article> <!-- bias box end -->
  430.  
  431.  
  432. <!-- bias box start --> <article class="bias">
  433.  
  434. <figure class="bimg">
  435.  
  436. <!-- bias image, will automatically crop as a square -->
  437.  
  438. <img class="bimg" src="https://i.pinimg.com/236x/61/74/0c/61740c1ae1b889b85d3a5339c4987429.jpg"></img>
  439.  
  440. </figure>
  441.  
  442. <article class="binside">
  443.  
  444.  
  445. <h2 class="name"><span>
  446.  
  447. astro
  448.  
  449. </span></h2>
  450.  
  451. <h3 class="group">
  452.  
  453. aeonian
  454.  
  455. </h3>
  456.  
  457. <div class="details">
  458.  
  459.  
  460. <div class="tag">
  461. ♡ name
  462. </div>
  463.  
  464. <div class="value">
  465. true love
  466. @ rper
  467. </div>
  468.  
  469. <div class="tag">
  470. ◌ isla
  471. </div>
  472.  
  473. <div class="value">
  474. mentor
  475. @ maisie
  476. </div>
  477.  
  478. <div class="tag">
  479. ◌ jinny
  480. </div>
  481.  
  482. <div class="value">
  483. pen friend
  484. @ miri
  485. </div>
  486.  
  487. </div> <!-- details end -->
  488.  
  489. </article> <!-- inside end -->
  490.  
  491. <div class="bdesc">
  492. <!-- please wrap all your paragraphs between <p></p> -->
  493.  
  494. <p>aecor's royal power instructor, water wielder</p>
  495.  
  496. </div>
  497.  
  498. </article> <!-- bias box end -->
  499.  
  500.  
  501.  
  502.  
  503.  
  504.  
  505. <!-- bias box start --> <article class="bias">
  506.  
  507. <figure class="bimg">
  508.  
  509. <!-- bias image, will automatically crop as a square -->
  510.  
  511. <img class="bimg" src="https://i.pinimg.com/236x/27/b2/06/27b206de09b50e41f87feabff4fc8d7c.jpg"></img>
  512.  
  513. </figure>
  514.  
  515. <article class="binside">
  516.  
  517.  
  518. <h2 class="name"><span>
  519.  
  520. rune
  521.  
  522. </span></h2>
  523.  
  524. <h3 class="group">
  525.  
  526. aeonian
  527.  
  528. </h3>
  529.  
  530. <div class="details">
  531.  
  532.  
  533. <div class="tag">
  534. ♡ jinny
  535. </div>
  536.  
  537. <div class="value">
  538. true love
  539. @ miri
  540. </div>
  541.  
  542. <div class="tag">
  543. ◌ teddy
  544. </div>
  545.  
  546. <div class="value">
  547. annoying brother
  548. @ jammy
  549. </div>
  550.  
  551. <div class="tag">
  552. ◌ leo
  553. </div>
  554.  
  555. <div class="value">
  556. annoying brother 2
  557. @ max
  558. </div>
  559.  
  560. <div class="tag">
  561. ◌ nyx
  562. </div>
  563.  
  564. <div class="value">
  565. sassy mom, mentor
  566. @ maisie
  567. </div>
  568.  
  569. <div class="tag">
  570. x kya
  571. </div>
  572.  
  573. <div class="value">
  574. who tf are you
  575. @ jenny
  576. </div>
  577.  
  578. <div class="tag">
  579. x ori
  580. </div>
  581.  
  582. <div class="value">
  583. rocky relationship
  584. @ shinnie
  585. </div>
  586.  
  587. <div class="tag">
  588. x saskia
  589. </div>
  590.  
  591. <div class="value">
  592. annoying flirt
  593. @ miri
  594. </div>
  595.  
  596. </div> <!-- details end -->
  597.  
  598. </article> <!-- inside end -->
  599.  
  600. <div class="bdesc">
  601. <!-- please wrap all your paragraphs between <p></p> -->
  602.  
  603. <p>member of the basilisks, shadow wielder</p>
  604.  
  605. </div>
  606.  
  607. </article> <!-- bias box end -->
  608.  
  609.  
  610.  
  611.  
  612.  
  613.  
  614. <!-- bias box start --> <article class="bias">
  615.  
  616. <figure class="bimg">
  617.  
  618. <!-- bias image, will automatically crop as a square -->
  619.  
  620. <img class="bimg" src="https://i.pinimg.com/236x/53/5e/a0/535ea0fb8aee49732c7f799e4e0904d3.jpg"></img>
  621.  
  622. </figure>
  623.  
  624. <article class="binside">
  625.  
  626.  
  627. <h2 class="name"><span>
  628.  
  629. sera
  630.  
  631. </span></h2>
  632.  
  633. <h3 class="group">
  634.  
  635. aeonian
  636.  
  637. </h3>
  638.  
  639. <div class="details">
  640.  
  641.  
  642. <div class="tag">
  643. <s>♡ none</s>
  644. </div>
  645.  
  646. <div class="value">
  647. <s>true love
  648. @ rper</s>
  649. </div>
  650.  
  651. <div class="tag">
  652. ◌ soren
  653. </div>
  654.  
  655. <div class="value">
  656. rebellious kid
  657. @ max
  658. </div>
  659.  
  660. <div class="tag">
  661. x hera
  662. </div>
  663.  
  664. <div class="value">
  665. killer
  666. @ jenny
  667. </div>
  668.  
  669. <div class="tag">
  670. x abu
  671. </div>
  672.  
  673. <div class="value">
  674. hate you, monkey
  675. @ di
  676. </div>
  677.  
  678. </div> <!-- details end -->
  679.  
  680. </article> <!-- inside end -->
  681.  
  682. <div class="bdesc">
  683. <!-- please wrap all your paragraphs between <p></p> -->
  684.  
  685. <p>carpenter of the pirates, earth wielder</p>
  686.  
  687. </div>
  688.  
  689. </article> <!-- bias box end -->
  690.  
  691. <!-- bias box start --> <article class="bias">
  692.  
  693. <figure class="bimg">
  694.  
  695. <!-- bias image, will automatically crop as a square -->
  696.  
  697. <img class="bimg" src="https://i.pinimg.com/236x/74/49/a8/7449a84f0333a833ddf3cf80e84dac6c.jpg"></img>
  698.  
  699. </figure>
  700.  
  701. <article class="binside">
  702.  
  703.  
  704. <h2 class="name"><span>
  705.  
  706. ying
  707.  
  708. </span></h2>
  709.  
  710. <h3 class="group">
  711.  
  712. aeonian
  713.  
  714. </h3>
  715.  
  716. <div class="details">
  717.  
  718.  
  719. <div class="tag">
  720. ● ru
  721. </div>
  722.  
  723. <div class="value">
  724. little sis
  725. @ maisie
  726. </div>
  727.  
  728. <div class="tag">
  729. ◌ braedon
  730. </div>
  731.  
  732. <div class="value">
  733. casual acquaintance
  734. @ jenny
  735. </div>
  736.  
  737. <div class="tag">
  738. x cronos
  739. </div>
  740.  
  741. <div class="value">
  742. absolute loathing
  743. @ jenny
  744. </div>
  745.  
  746. </div> <!-- details end -->
  747.  
  748. </article> <!-- inside end -->
  749.  
  750. <div class="bdesc">
  751. <!-- please wrap all your paragraphs between <p></p> -->
  752.  
  753. <p>competitor, earth wielder</p>
  754.  
  755. </div>
  756.  
  757. </article> <!-- bias box end -->
  758.  
  759.  
  760. <!-- bias box start --> <article class="bias">
  761.  
  762. <figure class="bimg">
  763.  
  764. <!-- bias image, will automatically crop as a square -->
  765.  
  766. <img class="bimg" src="https://i.pinimg.com/236x/65/96/3e/65963e04cec9747bc7e8283ca8e5397e.jpg"></img>
  767.  
  768. </figure>
  769.  
  770. <article class="binside">
  771.  
  772.  
  773. <h2 class="name"><span>
  774.  
  775. rhea
  776.  
  777. </span></h2>
  778.  
  779. <h3 class="group">
  780.  
  781. false gods
  782.  
  783. </h3>
  784.  
  785. <div class="details">
  786.  
  787.  
  788. <div class="tag">
  789. ♡ ricky
  790. </div>
  791.  
  792. <div class="value">
  793. true love
  794. @ kt
  795. </div>
  796.  
  797. <div class="tag">
  798. ◌ kaiden
  799. </div>
  800.  
  801. <div class="value">
  802. brotherly vibes
  803. @ jammy
  804. </div>
  805.  
  806. <div class="tag">
  807. ◌ kairi
  808. </div>
  809.  
  810. <div class="value">
  811. sisterly vibes
  812. @ shinnie
  813. </div>
  814.  
  815. <div class="tag">
  816. x aise
  817. </div>
  818.  
  819. <div class="value">
  820. feared and hated
  821. @ di
  822. </div>
  823.  
  824. <div class="tag">
  825. ● ceilon
  826. </div>
  827.  
  828. <div class="value">
  829. stepbrother
  830. @ sun
  831. </div>
  832.  
  833. </div> <!-- details end -->
  834.  
  835. </article> <!-- inside end -->
  836.  
  837. <div class="bdesc">
  838. <!-- please wrap all your paragraphs between <p></p> -->
  839.  
  840. <p>artemis, olympian</p>
  841.  
  842. </div>
  843.  
  844. </article> <!-- bias box end -->
  845.  
  846.  
  847. <!-- bias box start --> <article class="bias">
  848.  
  849. <figure class="bimg">
  850.  
  851. <!-- bias image, will automatically crop as a square -->
  852.  
  853. <img class="bimg" src="https://64.media.tumblr.com/41e5465a93b72e55f4c64cd0f902ef7e/tumblr_osi51boOKS1wsov9to7_250.png"></img>
  854.  
  855. </figure>
  856.  
  857. <article class="binside">
  858.  
  859.  
  860. <h2 class="name"><span>
  861.  
  862. aera
  863.  
  864. </span></h2>
  865.  
  866. <h3 class="group">
  867.  
  868. false gods
  869.  
  870. </h3>
  871.  
  872. <div class="details">
  873.  
  874.  
  875. <div class="tag">
  876. ♡ kaiden
  877. </div>
  878.  
  879. <div class="value">
  880. previous lover
  881. @ jammy
  882. </div>
  883.  
  884. <div class="tag">
  885. ◌ aisha
  886. </div>
  887.  
  888. <div class="value">
  889. partners in crime
  890. @ jenny
  891. </div>
  892.  
  893. </div> <!-- details end -->
  894.  
  895. </article> <!-- inside end -->
  896.  
  897. <div class="bdesc">
  898. <!-- please wrap all your paragraphs between <p></p> -->
  899.  
  900. <p>lab supervisor of mirage</p>
  901.  
  902. </div>
  903.  
  904. </article> <!-- bias box end -->
  905.  
  906.  
  907. <!-- bias box start --> <article class="bias">
  908.  
  909. <figure class="bimg">
  910.  
  911. <!-- bias image, will automatically crop as a square -->
  912.  
  913. <img class="bimg" src="https://i.pinimg.com/236x/44/de/11/44de11b9adf0793ed1badcb2105c7e32.jpg"></img>
  914.  
  915. </figure>
  916.  
  917. <article class="binside">
  918.  
  919.  
  920. <h2 class="name"><span>
  921.  
  922. cassie
  923.  
  924. </span></h2>
  925.  
  926. <h3 class="group">
  927.  
  928. 100th
  929.  
  930. </h3>
  931.  
  932. <div class="details">
  933.  
  934.  
  935. <div class="tag">
  936. ● briar
  937. </div>
  938.  
  939. <div class="value">
  940. stepbrother
  941. @ badger
  942. </div>
  943.  
  944. </div> <!-- details end -->
  945.  
  946. </article> <!-- inside end -->
  947.  
  948. <div class="bdesc">
  949. <!-- please wrap all your paragraphs between <p></p> -->
  950.  
  951. <p>female tribute of district 7</p>
  952.  
  953. </div>
  954.  
  955. </article> <!-- bias box end -->
  956.  
  957.  
  958. <!-- bias box start --> <article class="bias">
  959.  
  960. <figure class="bimg">
  961.  
  962. <!-- bias image, will automatically crop as a square -->
  963.  
  964. <img class="bimg" src="https://i.pinimg.com/236x/80/98/a5/8098a58d5c5257f00d16065677f49325.jpg"></img>
  965.  
  966. </figure>
  967.  
  968. <article class="binside">
  969.  
  970.  
  971. <h2 class="name"><span>
  972.  
  973. ellie
  974.  
  975. </span></h2>
  976.  
  977. <h3 class="group">
  978.  
  979. spirit kingdom
  980.  
  981. </h3>
  982.  
  983. <div class="details">
  984.  
  985.  
  986. <div class="tag">
  987. ♡ elias
  988. </div>
  989.  
  990. <div class="value">
  991. true love
  992. @ jenny
  993. </div>
  994.  
  995. <div class="tag">
  996. ● kaiden
  997. </div>
  998.  
  999. <div class="value">
  1000. oldest brother
  1001. @ jammy
  1002. </div>
  1003.  
  1004. <div class="tag">
  1005. ◌ elian
  1006. </div>
  1007.  
  1008. <div class="value">
  1009. brotherly vibes
  1010. @ jenny
  1011. </div>
  1012.  
  1013.  
  1014. </div> <!-- details end -->
  1015.  
  1016. </article> <!-- inside end -->
  1017.  
  1018. <div class="bdesc">
  1019. <!-- please wrap all your paragraphs between <p></p> -->
  1020.  
  1021. <p>princess of spirit kingdom, non-bender</p>
  1022.  
  1023. </div>
  1024.  
  1025. </article> <!-- bias box end -->
  1026.  
  1027.  
  1028. <!-- bias box start --> <article class="bias">
  1029.  
  1030. <figure class="bimg">
  1031.  
  1032. <!-- bias image, will automatically crop as a square -->
  1033.  
  1034. <img class="bimg" src="https://i.pinimg.com/236x/5e/c8/69/5ec869f55b8632e8348bd838201691c7.jpg"></img>
  1035.  
  1036. </figure>
  1037.  
  1038. <article class="binside">
  1039.  
  1040.  
  1041. <h2 class="name"><span>
  1042.  
  1043. nia
  1044.  
  1045. </span></h2>
  1046.  
  1047. <h3 class="group">
  1048.  
  1049. spirit kingdom
  1050.  
  1051. </h3>
  1052.  
  1053. <div class="details">
  1054.  
  1055.  
  1056. <div class="tag">
  1057. ◌ birdsong
  1058. </div>
  1059.  
  1060. <div class="value">
  1061. fellow maids
  1062. @ birdsong
  1063. </div>
  1064.  
  1065. </div> <!-- details end -->
  1066.  
  1067. </article> <!-- inside end -->
  1068.  
  1069. <div class="bdesc">
  1070. <!-- please wrap all your paragraphs between <p></p> -->
  1071.  
  1072. <p>maid, badass fighter, human</p>
  1073.  
  1074. </div>
  1075.  
  1076. </article> <!-- bias box end -->
  1077.  
  1078.  
  1079. <!-- bias box start --> <article class="bias">
  1080.  
  1081. <figure class="bimg">
  1082.  
  1083. <!-- bias image, will automatically crop as a square -->
  1084.  
  1085. <img class="bimg" src="https://i.pinimg.com/236x/9d/1f/d3/9d1fd3c310fa8b2f43cfeb722cc6665e.jpg"></img>
  1086.  
  1087. </figure>
  1088.  
  1089. <article class="binside">
  1090.  
  1091.  
  1092. <h2 class="name"><span>
  1093.  
  1094. styx
  1095.  
  1096. </span></h2>
  1097.  
  1098. <h3 class="group">
  1099.  
  1100. spirit kingdom
  1101.  
  1102. </h3>
  1103.  
  1104. <div class="details">
  1105.  
  1106.  
  1107. <div class="tag">
  1108. ◌ alina
  1109. </div>
  1110.  
  1111. <div class="value">
  1112. bittersweet friendship
  1113. @ jenny
  1114. </div>
  1115.  
  1116. </div> <!-- details end -->
  1117.  
  1118. </article> <!-- inside end -->
  1119.  
  1120. <div class="bdesc">
  1121. <!-- please wrap all your paragraphs between <p></p> -->
  1122.  
  1123. <p>guard, fire bender</p>
  1124.  
  1125. </div>
  1126.  
  1127. </article> <!-- bias box end -->
  1128.  
  1129.  
  1130. <!-- bias box start --> <article class="bias">
  1131.  
  1132. <figure class="bimg">
  1133.  
  1134. <!-- bias image, will automatically crop as a square -->
  1135.  
  1136. <img class="bimg" src="https://i.pinimg.com/236x/4b/18/6e/4b186e3c07fdcee23bf7318404bd3aa8.jpg"></img>
  1137.  
  1138. </figure>
  1139.  
  1140. <article class="binside">
  1141.  
  1142.  
  1143. <h2 class="name"><span>
  1144.  
  1145. thea
  1146.  
  1147. </span></h2>
  1148.  
  1149. <h3 class="group">
  1150.  
  1151. 1x1
  1152.  
  1153. </h3>
  1154.  
  1155. <div class="details">
  1156.  
  1157.  
  1158. <div class="tag">
  1159. ♡ candice
  1160. </div>
  1161.  
  1162. <div class="value">
  1163. true love
  1164. @ bee
  1165. </div>
  1166.  
  1167. <div class="tag">
  1168. ● avery
  1169. </div>
  1170.  
  1171. <div class="value">
  1172. foster son
  1173. @ bee
  1174. </div>
  1175.  
  1176. </div> <!-- details end -->
  1177.  
  1178. </article> <!-- inside end -->
  1179.  
  1180. <div class="bdesc">
  1181. <!-- please wrap all your paragraphs between <p></p> -->
  1182.  
  1183. <p>police officer, cryokinesis</p>
  1184.  
  1185. </div>
  1186.  
  1187. </article> <!-- bias box end -->
  1188.  
  1189.  
  1190. <!-- bias box start --> <article class="bias">
  1191.  
  1192. <figure class="bimg">
  1193.  
  1194. <!-- bias image, will automatically crop as a square -->
  1195.  
  1196. <img class="bimg" src="https://i.pinimg.com/236x/c3/86/16/c386161ee848029f73d2474488c3ebcd.jpg"></img>
  1197.  
  1198. </figure>
  1199.  
  1200. <article class="binside">
  1201.  
  1202.  
  1203. <h2 class="name"><span>
  1204.  
  1205. sky
  1206.  
  1207. </span></h2>
  1208.  
  1209. <h3 class="group">
  1210.  
  1211. aeonian
  1212.  
  1213. </h3>
  1214.  
  1215. <div class="details">
  1216.  
  1217.  
  1218. <div class="tag">
  1219. ♡ luke
  1220. </div>
  1221.  
  1222. <div class="value">
  1223. true love
  1224. @ max
  1225. </div>
  1226.  
  1227. <div class="tag">
  1228. ◌ hera
  1229. </div>
  1230.  
  1231. <div class="value">
  1232. personal bodyguard
  1233. @ shinnie
  1234. </div>
  1235.  
  1236. </div> <!-- details end -->
  1237.  
  1238. </article> <!-- inside end -->
  1239.  
  1240. <div class="bdesc">
  1241. <!-- please wrap all your paragraphs between <p></p> -->
  1242.  
  1243. <p>stirian captain of guards, air wielder</p>
  1244.  
  1245. </div>
  1246.  
  1247. </article> <!-- bias box end -->
  1248.  
  1249.  
  1250. <!-- bias box start --> <article class="bias">
  1251.  
  1252. <figure class="bimg">
  1253.  
  1254. <!-- bias image, will automatically crop as a square -->
  1255.  
  1256. <img class="bimg" src="https://i.pinimg.com/236x/f5/fa/02/f5fa0230521898900d6a7a95b2120fe4.jpg"></img>
  1257.  
  1258. </figure>
  1259.  
  1260. <article class="binside">
  1261.  
  1262.  
  1263. <h2 class="name"><span>
  1264.  
  1265. aaron
  1266.  
  1267. </span></h2>
  1268.  
  1269. <h3 class="group">
  1270.  
  1271. aeonian
  1272.  
  1273. </h3>
  1274.  
  1275. <div class="details">
  1276.  
  1277.  
  1278. <div class="tag">
  1279. ♡ lux
  1280. </div>
  1281.  
  1282. <div class="value">
  1283. true love
  1284. @ kt
  1285. </div>
  1286.  
  1287. <div class="tag">
  1288. ◌ chris
  1289. </div>
  1290.  
  1291. <div class="value">
  1292. loyal puppy
  1293. @ di
  1294. </div>
  1295.  
  1296. <div class="tag">
  1297. ◌ mace
  1298. </div>
  1299.  
  1300. <div class="value">
  1301. brotherly vibes
  1302. @ jammy
  1303. </div>
  1304.  
  1305. </div> <!-- details end -->
  1306.  
  1307. </article> <!-- inside end -->
  1308.  
  1309. <div class="bdesc">
  1310. <!-- please wrap all your paragraphs between <p></p> -->
  1311.  
  1312. <p>member of the meraki, light wielder</p>
  1313.  
  1314. </div>
  1315.  
  1316. </article> <!-- bias box end -->
  1317.  
  1318.  
  1319. <!-- bias box start --> <article class="bias">
  1320.  
  1321. <figure class="bimg">
  1322.  
  1323. <!-- bias image, will automatically crop as a square -->
  1324.  
  1325. <img class="bimg" src="https://i.pinimg.com/236x/a0/8e/4f/a08e4fc8a12583b15e1ed40c48b33613.jpg"></img>
  1326.  
  1327. </figure>
  1328.  
  1329. <article class="binside">
  1330.  
  1331.  
  1332. <h2 class="name"><span>
  1333.  
  1334. cyn
  1335.  
  1336. </span></h2>
  1337.  
  1338. <h3 class="group">
  1339.  
  1340. 100th
  1341.  
  1342. </h3>
  1343.  
  1344. <div class="details">
  1345.  
  1346.  
  1347. <div class="tag">
  1348. ♡ aspen
  1349. </div>
  1350.  
  1351. <div class="value">
  1352. unrequited love
  1353. @ pandora
  1354. </div>
  1355.  
  1356. <div class="tag">
  1357. ◌ cedar
  1358. </div>
  1359.  
  1360. <div class="value">
  1361. motherly vibes
  1362. @ britt
  1363. </div>
  1364.  
  1365. <div class="tag">
  1366. x fjord
  1367. </div>
  1368.  
  1369. <div class="value">
  1370. enemy
  1371. @ jenny
  1372. </div>
  1373.  
  1374. </div> <!-- details end -->
  1375.  
  1376. </article> <!-- inside end -->
  1377.  
  1378. <div class="bdesc">
  1379. <!-- please wrap all your paragraphs between <p></p> -->
  1380.  
  1381. <p>male tribute of district 9</p>
  1382.  
  1383. </div>
  1384.  
  1385. </article> <!-- bias box end -->
  1386.  
  1387.  
  1388. <!-- bias box start --> <article class="bias">
  1389.  
  1390. <figure class="bimg">
  1391.  
  1392. <!-- bias image, will automatically crop as a square -->
  1393.  
  1394. <img class="bimg" src="https://i.pinimg.com/236x/c8/2a/79/c82a79b1852b8836c9a6cad0859d355f.jpg"></img>
  1395.  
  1396. </figure>
  1397.  
  1398. <article class="binside">
  1399.  
  1400.  
  1401. <h2 class="name"><span>
  1402.  
  1403. oli
  1404.  
  1405. </span></h2>
  1406.  
  1407. <h3 class="group">
  1408.  
  1409. aeonian
  1410.  
  1411. </h3>
  1412.  
  1413. <div class="details">
  1414.  
  1415.  
  1416. <div class="tag">
  1417. ♡ rayna
  1418. </div>
  1419.  
  1420. <div class="value">
  1421. true love
  1422. @ jenny
  1423. </div>
  1424.  
  1425. <div class="tag">
  1426. ● cronos
  1427. </div>
  1428.  
  1429. <div class="value">
  1430. dad
  1431. @ jenny
  1432. </div>
  1433.  
  1434. <div class="tag">
  1435. ● ru
  1436. </div>
  1437.  
  1438. <div class="value">
  1439. stepmother
  1440. @ maisie
  1441. </div>
  1442.  
  1443. <div class="tag">
  1444. ● elias
  1445. </div>
  1446.  
  1447. <div class="value">
  1448. oldest brother
  1449. @ di
  1450. </div>
  1451.  
  1452. <div class="tag">
  1453. ● orion
  1454. </div>
  1455.  
  1456. <div class="value">
  1457. younger brother
  1458. @ shinnie
  1459. </div>
  1460.  
  1461. <div class="tag">
  1462. ● nikolai
  1463. </div>
  1464.  
  1465. <div class="value">
  1466. younger brother
  1467. @ jammy
  1468. </div>
  1469.  
  1470. </div> <!-- details end -->
  1471.  
  1472. </article> <!-- inside end -->
  1473.  
  1474. <div class="bdesc">
  1475. <!-- please wrap all your paragraphs between <p></p> -->
  1476.  
  1477. <p>prince of rasavasda, air and water wielder</p>
  1478.  
  1479. </div>
  1480.  
  1481. </article> <!-- bias box end -->
  1482.  
  1483.  
  1484. <!-- bias box start --> <article class="bias">
  1485.  
  1486. <figure class="bimg">
  1487.  
  1488. <!-- bias image, will automatically crop as a square -->
  1489.  
  1490. <img class="bimg" src="https://i.pinimg.com/236x/5f/dc/1a/5fdc1aa3a8475733d7db36feb48f96c4.jpg"></img>
  1491.  
  1492. </figure>
  1493.  
  1494. <article class="binside">
  1495.  
  1496.  
  1497. <h2 class="name"><span>
  1498.  
  1499. ez
  1500.  
  1501. </span></h2>
  1502.  
  1503. <h3 class="group">
  1504.  
  1505. spirit kingdom
  1506.  
  1507. </h3>
  1508.  
  1509. <div class="details">
  1510.  
  1511. <div class="value">
  1512. <br>collabs tbd.</br>
  1513. </div>
  1514.  
  1515. </div> <!-- details end -->
  1516.  
  1517. </article> <!-- inside end -->
  1518.  
  1519. <div class="bdesc">
  1520. <!-- please wrap all your paragraphs between <p></p> -->
  1521.  
  1522. <p>archivist, rebel</p>
  1523.  
  1524. </div>
  1525.  
  1526. </article> <!-- bias box end -->
  1527.  
  1528. <article class="bias">
  1529.  
  1530. <figure class="bimg">
  1531.  
  1532. <!-- bias image, will automatically crop as a square -->
  1533.  
  1534. <img class="bimg" src="https://64.media.tumblr.com/41e5465a93b72e55f4c64cd0f902ef7e/tumblr_osi51boOKS1wsov9to7_250.png"></img>
  1535.  
  1536. </figure>
  1537.  
  1538. <article class="binside">
  1539.  
  1540.  
  1541. <h2 class="name"><span>
  1542.  
  1543. aera
  1544.  
  1545. </span></h2>
  1546.  
  1547. <h3 class="group">
  1548.  
  1549. false gods
  1550.  
  1551. </h3>
  1552.  
  1553. <div class="details">
  1554.  
  1555.  
  1556. <div class="tag">
  1557. ♡ kaiden
  1558. </div>
  1559.  
  1560. <div class="value">
  1561. previous lover
  1562. @ jammy
  1563. </div>
  1564.  
  1565. <div class="tag">
  1566. ◌ aisha
  1567. </div>
  1568.  
  1569. <div class="value">
  1570. partners in crime
  1571. @ jenny
  1572. </div>
  1573.  
  1574. </div> <!-- details end -->
  1575.  
  1576. </article> <!-- inside end -->
  1577.  
  1578. <div class="bdesc">
  1579. <!-- please wrap all your paragraphs between <p></p> -->
  1580.  
  1581. <p>lab supervisor of mirage</p>
  1582.  
  1583. </div>
  1584.  
  1585. </article> <!-- bias box end -->
  1586.  
  1587.  
  1588. <!-- bias box start --> <article class="bias">
  1589.  
  1590. <figure class="bimg">
  1591.  
  1592. <!-- bias image, will automatically crop as a square -->
  1593.  
  1594. <img class="bimg" src="https://img.wattpad.com/8af8b006648115e2910087b9e0d3eb44f0d0a245/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f776174747061642d6d656469612d736572766963652f53746f7279496d6167652f507974774246344144697a4a75673d3d2d3336353939383834372e313439653736323266323535613961633237333936343133363538312e676966?s=fit&w=720&h=720"></img>
  1595.  
  1596. </figure>
  1597.  
  1598. <article class="binside">
  1599.  
  1600.  
  1601. <h2 class="name"><span>
  1602.  
  1603. will
  1604.  
  1605. </span></h2>
  1606.  
  1607. <h3 class="group">
  1608.  
  1609. tbote
  1610.  
  1611. </h3>
  1612.  
  1613. <div class="details">
  1614.  
  1615.  
  1616. <div class="tag">
  1617. ♡ indy
  1618. </div>
  1619.  
  1620. <div class="value">
  1621. unrequited love
  1622. @ maisie
  1623. </div>
  1624.  
  1625. <div class="tag">
  1626. ◌ armani
  1627. </div>
  1628.  
  1629. <div class="value">
  1630. roommate
  1631. @ sun
  1632. </div>
  1633.  
  1634. <div class="tag">
  1635. ◌ leo
  1636. </div>
  1637.  
  1638. <div class="value">
  1639. previous roommate
  1640. @ di
  1641. </div>
  1642.  
  1643. <div class="tag">
  1644. ● penrose
  1645. </div>
  1646.  
  1647. <div class="value">
  1648. stepsister
  1649. @ kt
  1650. </div>
  1651.  
  1652. </div> <!-- details end -->
  1653.  
  1654. </article> <!-- inside end -->
  1655.  
  1656. <div class="bdesc">
  1657. <!-- please wrap all your paragraphs between <p></p> -->
  1658.  
  1659. <p>spring breaker</p>
  1660.  
  1661. </div>
  1662.  
  1663. </article> <!-- bias box end -->
  1664.  
  1665.  
  1666. <!-- bias box start --> <article class="bias">
  1667.  
  1668. <figure class="bimg">
  1669.  
  1670. <!-- bias image, will automatically crop as a square -->
  1671.  
  1672. <img class="bimg" src="https://dvqlxo2m2q99q.cloudfront.net/000_clients/604577/page/w1000-604577u31TIWZ4.jpg"></img>
  1673.  
  1674. </figure>
  1675.  
  1676. <article class="binside">
  1677.  
  1678.  
  1679. <h2 class="name"><span>
  1680.  
  1681. soraya
  1682.  
  1683. </span></h2>
  1684.  
  1685. <h3 class="group">
  1686.  
  1687. tbote
  1688.  
  1689. </h3>
  1690.  
  1691. <div class="details">
  1692.  
  1693.  
  1694. <div class="tag">
  1695. ◌ tessa
  1696. </div>
  1697.  
  1698. <div class="value">
  1699. estranged friend
  1700. @ jenny
  1701. </div>
  1702.  
  1703. <div class="tag">
  1704. ◌ nadine
  1705. </div>
  1706.  
  1707. <div class="value">
  1708. deceased bestie
  1709. @ di
  1710. </div>
  1711.  
  1712. </div> <!-- details end -->
  1713.  
  1714. </article> <!-- inside end -->
  1715.  
  1716. <div class="bdesc">
  1717. <!-- please wrap all your paragraphs between <p></p> -->
  1718.  
  1719. <p>secondary character</p>
  1720.  
  1721. </div>
  1722.  
  1723. </article> <!-- bias box end -->
  1724.  
  1725. <!-- bias box start --> <article class="bias">
  1726.  
  1727. <figure class="bimg">
  1728.  
  1729. <!-- bias image, will automatically crop as a square -->
  1730.  
  1731. <img class="bimg" src="https://iv1.lisimg.com/image/16589307/471full-ellie-thumann.jpg"></img>
  1732.  
  1733. </figure>
  1734.  
  1735. <article class="binside">
  1736.  
  1737.  
  1738. <h2 class="name"><span>
  1739.  
  1740. elektra
  1741.  
  1742. </span></h2>
  1743.  
  1744. <h3 class="group">
  1745.  
  1746. selection
  1747.  
  1748. </h3>
  1749.  
  1750. <div class="details">
  1751.  
  1752.  
  1753. <div class="tag">
  1754. ♡ bell
  1755. </div>
  1756.  
  1757. <div class="value">
  1758. lover 001
  1759. @ aine
  1760. </div>
  1761.  
  1762. <div class="tag">
  1763. ♡ name
  1764. </div>
  1765.  
  1766. <div class="value">
  1767. lover 002
  1768. @ maisie
  1769. </div>
  1770.  
  1771. <div class="tag">
  1772. ♡ timmy
  1773. </div>
  1774.  
  1775. <div class="value">
  1776. awkward ex
  1777. @ natsuki
  1778. </div>
  1779.  
  1780. <div class="tag">
  1781. ◌ rom, dahlia, clove, deahna, nadia
  1782. </div>
  1783.  
  1784. <div class="value">
  1785. girl gang
  1786. @ maisie, di, jenny, jammy, miri
  1787. </div>
  1788.  
  1789. <div class="tag">
  1790. ◌ george
  1791. </div>
  1792.  
  1793. <div class="value">
  1794. "you get embarrassed easily"
  1795. @ natsuki
  1796. </div>
  1797.  
  1798. </div> <!-- details end -->
  1799.  
  1800. </article> <!-- inside end -->
  1801.  
  1802. <div class="bdesc">
  1803. <!-- please wrap all your paragraphs between <p></p> -->
  1804.  
  1805. <p>the assassin</p>
  1806.  
  1807. </div>
  1808.  
  1809. </article> <!-- bias box end -->
  1810.  
  1811.  
  1812. <!-- bias box start --> <article class="bias">
  1813.  
  1814. <figure class="bimg">
  1815.  
  1816. <!-- bias image, will automatically crop as a square -->
  1817.  
  1818. <img class="bimg" src="https://iv1.lisimg.com/image/17085038/740full-abigail-f.-cowen.jpg"></img>
  1819.  
  1820. </figure>
  1821.  
  1822. <article class="binside">
  1823.  
  1824.  
  1825. <h2 class="name"><span>
  1826.  
  1827. mea
  1828.  
  1829. </span></h2>
  1830.  
  1831. <h3 class="group">
  1832.  
  1833. selection
  1834.  
  1835. </h3>
  1836.  
  1837. <div class="details">
  1838.  
  1839.  
  1840. <div class="tag">
  1841. ♡ becky
  1842. </div>
  1843.  
  1844. <div class="value">
  1845. friend + crush
  1846. @ badge
  1847. </div>
  1848.  
  1849. <div class="tag">
  1850. ◌ enzo
  1851. </div>
  1852.  
  1853. <div class="value">
  1854. childhood friend
  1855. @ shinnie
  1856. </div>
  1857.  
  1858. <div class="tag">
  1859. x deahna
  1860. </div>
  1861.  
  1862. <div class="value">
  1863. "you stole my lover"
  1864. @ jammy
  1865. </div>
  1866.  
  1867. </div> <!-- details end -->
  1868.  
  1869. </article> <!-- inside end -->
  1870.  
  1871. <div class="bdesc">
  1872. <!-- please wrap all your paragraphs between <p></p> -->
  1873.  
  1874. <p>the unexpected</p>
  1875.  
  1876. </div>
  1877.  
  1878. </article> <!-- bias box end -->
  1879.  
  1880. <!-- bias box start --> <article class="bias">
  1881.  
  1882. <figure class="bimg">
  1883.  
  1884. <!-- bias image, will automatically crop as a square -->
  1885.  
  1886. <img class="bimg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLZVWxECGa66amb65iIFzZJ7TsCIgHaxLzvw&usqp=CAU"></img>
  1887.  
  1888. </figure>
  1889.  
  1890. <article class="binside">
  1891.  
  1892.  
  1893. <h2 class="name"><span>
  1894.  
  1895. az
  1896.  
  1897. </span></h2>
  1898.  
  1899. <h3 class="group">
  1900.  
  1901. selection
  1902.  
  1903. </h3>
  1904.  
  1905. <div class="details">
  1906.  
  1907.  
  1908. <div class="tag">
  1909. ◌ kraz
  1910. </div>
  1911.  
  1912. <div class="value">
  1913. angsty tense friendship
  1914. @ sun
  1915. </div>
  1916.  
  1917. <div class="tag">
  1918. ◌ amira
  1919. </div>
  1920.  
  1921. <div class="value">
  1922. little sis
  1923. @ maisie
  1924. </div>
  1925.  
  1926. <div class="tag">
  1927. ● galen
  1928. </div>
  1929.  
  1930. <div class="value">
  1931. tense half brother
  1932. @ jenny
  1933. </div>
  1934.  
  1935. <div class="tag">
  1936. x corinne
  1937. </div>
  1938.  
  1939. <div class="value">
  1940. friendly rivalry
  1941. @ jenny
  1942. </div>
  1943.  
  1944. <div class="tag">
  1945. x romeo
  1946. </div>
  1947.  
  1948. <div class="value">
  1949. "i just hate your face"
  1950. @ shinnie
  1951. </div>
  1952.  
  1953. </div> <!-- details end -->
  1954.  
  1955. </article> <!-- inside end -->
  1956.  
  1957. <div class="bdesc">
  1958. <!-- please wrap all your paragraphs between <p></p> -->
  1959.  
  1960. <p>2nd in command of the northern rebels</p>
  1961.  
  1962. </div>
  1963.  
  1964. </article> <!-- bias box end -->
  1965.  
  1966.  
  1967. <!-- bias box start --> <article class="bias">
  1968.  
  1969. <figure class="bimg">
  1970.  
  1971. <!-- bias image, will automatically crop as a square -->
  1972.  
  1973. <img class="bimg" src="https://data.whicdn.com/images/172108297/original.jpg"></img>
  1974.  
  1975. </figure>
  1976.  
  1977. <article class="binside">
  1978.  
  1979.  
  1980. <h2 class="name"><span>
  1981.  
  1982. serene
  1983.  
  1984. </span></h2>
  1985.  
  1986. <h3 class="group">
  1987.  
  1988. selection
  1989.  
  1990. </h3>
  1991.  
  1992. <div class="details">
  1993.  
  1994.  
  1995. <div class="tag">
  1996. ♡ kiran
  1997. </div>
  1998.  
  1999. <div class="value">
  2000. awkward but polite ex
  2001. @ badge
  2002. </div>
  2003.  
  2004. <div class="tag">
  2005. ◌ nadia
  2006. </div>
  2007.  
  2008. <div class="value">
  2009. trainee
  2010. @ miri
  2011. </div>
  2012.  
  2013. <div class="tag">
  2014. ◌ galen
  2015. </div>
  2016.  
  2017. <div class="value">
  2018. playful acquaintance
  2019. @ jenny
  2020. </div>
  2021.  
  2022. <div class="tag">
  2023. ◌ sera
  2024. </div>
  2025.  
  2026. <div class="value">
  2027. handmaiden of the princess
  2028. @ miri
  2029. </div>
  2030.  
  2031. <div class="tag">
  2032. ◌ natalia
  2033. </div>
  2034.  
  2035. <div class="value">
  2036. nice boss
  2037. @ natsuki
  2038. </div>
  2039.  
  2040. </div> <!-- details end -->
  2041.  
  2042. </article> <!-- inside end -->
  2043.  
  2044. <div class="bdesc">
  2045. <!-- please wrap all your paragraphs between <p></p> -->
  2046.  
  2047. <p>princess sera's handmaiden</p>
  2048.  
  2049. </div>
  2050.  
  2051. </article> <!-- bias box end -->
  2052.  
  2053. <!-- bias box start --> <article class="bias">
  2054.  
  2055. <figure class="bimg">
  2056.  
  2057. <!-- bias image, will automatically crop as a square -->
  2058.  
  2059. <img class="bimg" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/hostedimages/1608795538i/30580218.png"></img>
  2060.  
  2061. </figure>
  2062.  
  2063. <article class="binside">
  2064.  
  2065.  
  2066. <h2 class="name"><span>
  2067.  
  2068. liam
  2069.  
  2070. </span></h2>
  2071.  
  2072. <h3 class="group">
  2073.  
  2074. division
  2075.  
  2076. </h3>
  2077.  
  2078. <div class="details">
  2079.  
  2080.  
  2081. <div class="tag">
  2082. ♡ celeste
  2083. </div>
  2084.  
  2085. <div class="value">
  2086. baby's dad
  2087. @ kt
  2088. </div>
  2089.  
  2090. <div class="tag">
  2091. x ophelia
  2092. </div>
  2093.  
  2094. <div class="value">
  2095. enemies
  2096. @ jenny
  2097. </div>
  2098.  
  2099. </div> <!-- details end -->
  2100.  
  2101. </article> <!-- inside end -->
  2102.  
  2103. <div class="bdesc">
  2104. <!-- please wrap all your paragraphs between <p></p> -->
  2105.  
  2106. <p>the attention seeker</p>
  2107.  
  2108. </div>
  2109.  
  2110. </article> <!-- bias box end -->
  2111.  
  2112.  
  2113. <!-- bias box start --> <article class="bias">
  2114.  
  2115. <figure class="bimg">
  2116.  
  2117. <!-- bias image, will automatically crop as a square -->
  2118.  
  2119. <img class="bimg" src="https://images.gr-assets.com/hostedimages/1608886873ra/30585135.gif"></img>
  2120.  
  2121. </figure>
  2122.  
  2123. <article class="binside">
  2124.  
  2125.  
  2126. <h2 class="name"><span>
  2127.  
  2128. fin
  2129.  
  2130. </span></h2>
  2131.  
  2132. <h3 class="group">
  2133.  
  2134. division
  2135.  
  2136. </h3>
  2137.  
  2138. <div class="details">
  2139.  
  2140.  
  2141. <div class="tag">
  2142. ◌ quincy
  2143. </div>
  2144.  
  2145. <div class="value">
  2146. playful partners in crime
  2147. @ miri
  2148. </div>
  2149.  
  2150. <div class="tag">
  2151. x aliya
  2152. </div>
  2153.  
  2154. <div class="value">
  2155. eventual betrayal
  2156. @ di
  2157. </div>
  2158.  
  2159. </div> <!-- details end -->
  2160.  
  2161. </article> <!-- inside end -->
  2162.  
  2163. <div class="bdesc">
  2164. <!-- please wrap all your paragraphs between <p></p> -->
  2165.  
  2166. <p>the cute innocent spy</p>
  2167.  
  2168. </div>
  2169.  
  2170. </article> <!-- bias box end -->
  2171.  
  2172. <!-- bias box start --> <article class="bias">
  2173.  
  2174. <figure class="bimg">
  2175.  
  2176. <!-- bias image, will automatically crop as a square -->
  2177.  
  2178. <img class="bimg" src="https://i.pinimg.com/originals/2e/5d/bb/2e5dbbe009ba53b59c22b261b751d692.jpg"></img>
  2179.  
  2180. </figure>
  2181.  
  2182. <article class="binside">
  2183.  
  2184.  
  2185. <h2 class="name"><span>
  2186.  
  2187. jordan
  2188.  
  2189. </span></h2>
  2190.  
  2191. <h3 class="group">
  2192.  
  2193. division
  2194.  
  2195. </h3>
  2196.  
  2197. <div class="details">
  2198.  
  2199.  
  2200. <div class="tag">
  2201. ♡ azalea
  2202. </div>
  2203.  
  2204. <div class="value">
  2205. turbulent ex
  2206. @ kt
  2207. </div>
  2208.  
  2209. <div class="tag">
  2210. ♡ laurence
  2211. </div>
  2212.  
  2213. <div class="value">
  2214. seemingly perfect but...?
  2215. @ sun
  2216. </div>
  2217.  
  2218. <div class="tag">
  2219. x trin
  2220. </div>
  2221.  
  2222. <div class="value">
  2223. "you're annoying"
  2224. @ jenny
  2225. </div>
  2226.  
  2227.  
  2228. </div> <!-- details end -->
  2229.  
  2230. </article> <!-- inside end -->
  2231.  
  2232. <div class="bdesc">
  2233. <!-- please wrap all your paragraphs between <p></p> -->
  2234.  
  2235. <p>moody project x boy</p>
  2236.  
  2237. </div>
  2238.  
  2239. </article> <!-- bias box end -->
  2240.  
  2241.  
  2242. <!-- bias box start --> <article class="bias">
  2243.  
  2244. <figure class="bimg">
  2245.  
  2246. <!-- bias image, will automatically crop as a square -->
  2247.  
  2248. <img class="bimg" src="https://i.pinimg.com/236x/de/60/be/de60be1786772656a43fac2510364e0b.jpg"></img>
  2249.  
  2250. </figure>
  2251.  
  2252. <article class="binside">
  2253.  
  2254.  
  2255. <h2 class="name"><span>
  2256.  
  2257. kedian
  2258.  
  2259. </span></h2>
  2260.  
  2261. <h3 class="group">
  2262.  
  2263. division
  2264.  
  2265. </h3>
  2266.  
  2267. <div class="details">
  2268.  
  2269.  
  2270. <div class="tag">
  2271. ◌ sammy
  2272. </div>
  2273.  
  2274. <div class="value">
  2275. anti division duo
  2276. @ jenny
  2277. </div>
  2278.  
  2279. <div class="tag">
  2280. ◌ yvonne
  2281. </div>
  2282.  
  2283. <div class="value">
  2284. partners in crime
  2285. @ miri
  2286. </div>
  2287.  
  2288. </div> <!-- details end -->
  2289.  
  2290. </article> <!-- inside end -->
  2291.  
  2292. <div class="bdesc">
  2293. <!-- please wrap all your paragraphs between <p></p> -->
  2294.  
  2295. <p>project m deaf boy</p>
  2296.  
  2297. </div>
  2298.  
  2299. </article> <!-- bias box end -->
  2300.  
  2301. <!-- bias box start --> <article class="bias">
  2302.  
  2303. <figure class="bimg">
  2304.  
  2305. <!-- bias image, will automatically crop as a square -->
  2306.  
  2307. <img class="bimg" src="https://iv1.lisimg.com/image/9084114/551full-imogen-poots.jpg"></img>
  2308.  
  2309. </figure>
  2310.  
  2311. <article class="binside">
  2312.  
  2313.  
  2314. <h2 class="name"><span>
  2315.  
  2316. june
  2317.  
  2318. </span></h2>
  2319.  
  2320. <h3 class="group">
  2321.  
  2322. division
  2323.  
  2324. </h3>
  2325.  
  2326. <div class="details">
  2327.  
  2328. <div class="tag">
  2329. ◌ cerise
  2330. </div>
  2331.  
  2332. <div class="value">
  2333. super bestie
  2334. @ maisie
  2335. </div>
  2336.  
  2337.  
  2338. </div> <!-- details end -->
  2339.  
  2340. </article> <!-- inside end -->
  2341.  
  2342. <div class="bdesc">
  2343. <!-- please wrap all your paragraphs between <p></p> -->
  2344.  
  2345. <p>assistant of disguises</p>
  2346.  
  2347. </div>
  2348.  
  2349. </article> <!-- bias box end -->
  2350.  
  2351.  
  2352. <!-- bias box start --> <article class="bias">
  2353.  
  2354. <figure class="bimg">
  2355.  
  2356. <!-- bias image, will automatically crop as a square -->
  2357.  
  2358. <img class="bimg" src="https://ivana-baquero.net/gallery/albums/UPLOADS/TVSeries/TheShannaraChronicles/SeasonTwo/BTS/00007.jpg"></img>
  2359.  
  2360. </figure>
  2361.  
  2362. <article class="binside">
  2363.  
  2364.  
  2365. <h2 class="name"><span>
  2366.  
  2367. kylie
  2368.  
  2369. </span></h2>
  2370.  
  2371. <h3 class="group">
  2372.  
  2373. division
  2374.  
  2375. </h3>
  2376.  
  2377. <div class="details">
  2378.  
  2379.  
  2380. <div class="tag">
  2381. ♡ marwan
  2382. </div>
  2383.  
  2384. <div class="value">
  2385. clumsy patient
  2386. @ emma
  2387. </div>
  2388.  
  2389. <div class="tag">
  2390. ◌ henri
  2391. </div>
  2392.  
  2393. <div class="value">
  2394. cute bickering colleagues
  2395. @ maisie
  2396. </div>
  2397.  
  2398. </div> <!-- details end -->
  2399.  
  2400. </article> <!-- inside end -->
  2401.  
  2402. <div class="bdesc">
  2403. <!-- please wrap all your paragraphs between <p></p> -->
  2404.  
  2405. <p>recruit instructor</p>
  2406.  
  2407. </div>
  2408.  
  2409. </article> <!-- bias box end -->
  2410.  
  2411.  
  2412. <!-- bias box start --> <article class="bias">
  2413.  
  2414. <figure class="bimg">
  2415.  
  2416. <!-- bias image, will automatically crop as a square -->
  2417.  
  2418. <img class="bimg" src="https://iv1.lisimg.com/image/5473735/303full-rhys-ward.jpg"></img>
  2419.  
  2420. </figure>
  2421.  
  2422. <article class="binside">
  2423.  
  2424.  
  2425. <h2 class="name"><span>
  2426.  
  2427. kye
  2428.  
  2429. </span></h2>
  2430.  
  2431. <h3 class="group">
  2432.  
  2433. 1x1
  2434.  
  2435. </h3>
  2436.  
  2437. <div class="details">
  2438.  
  2439.  
  2440. <div class="tag">
  2441. ♡ name
  2442. </div>
  2443.  
  2444. <div class="value">
  2445. lovers
  2446. @ britt
  2447. </div>
  2448.  
  2449. </div> <!-- details end -->
  2450.  
  2451. </article> <!-- inside end -->
  2452.  
  2453. <div class="bdesc">
  2454. <!-- please wrap all your paragraphs between <p></p> -->
  2455.  
  2456. <p>the werewolf</p>
  2457.  
  2458. </div>
  2459.  
  2460. </article> <!-- bias box end -->
  2461.  
  2462.  
  2463. <!-- bias box start --> <article class="bias">
  2464.  
  2465. <figure class="bimg">
  2466.  
  2467. <!-- bias image, will automatically crop as a square -->
  2468.  
  2469. <img class="bimg" src="https://mediaslide-europe.storage.googleapis.com/uno/pictures/3113/43893/large-1595425905-ac1b4c56036492f85e3acf546f5788a1.jpg"></img>
  2470.  
  2471. </figure>
  2472.  
  2473. <article class="binside">
  2474.  
  2475.  
  2476. <h2 class="name"><span>
  2477.  
  2478. ash
  2479.  
  2480. </span></h2>
  2481.  
  2482. <h3 class="group">
  2483.  
  2484. 1x1
  2485.  
  2486. </h3>
  2487.  
  2488. <div class="details">
  2489.  
  2490.  
  2491. <div class="tag">
  2492. ♡ sage
  2493. </div>
  2494.  
  2495. <div class="value">
  2496. enemies to lovers
  2497. @ blue
  2498. </div>
  2499.  
  2500. </div> <!-- details end -->
  2501.  
  2502. </article> <!-- inside end -->
  2503.  
  2504. <div class="bdesc">
  2505. <!-- please wrap all your paragraphs between <p></p> -->
  2506.  
  2507. <p>disgraced hunter</p>
  2508.  
  2509. </div>
  2510.  
  2511. </article> <!-- bias box end -->
  2512.  
  2513. <article class="bias">
  2514.  
  2515.  
  2516. <figure class="bimg">
  2517.  
  2518. <!-- bias image, will automatically crop as a square -->
  2519.  
  2520. <img class="bimg" src="https://i.pinimg.com/236x/79/f7/e1/79f7e1b236cdc69a3d4f30ae15ca2af7.jpg"></img>
  2521.  
  2522. </figure>
  2523.  
  2524. <article class="binside">
  2525.  
  2526.  
  2527. <h2 class="name"><span>
  2528.  
  2529. liliana
  2530.  
  2531. </span></h2>
  2532.  
  2533. <h3 class="group">
  2534.  
  2535. diamond of the first water
  2536.  
  2537. </h3>
  2538.  
  2539. <div class="details">
  2540.  
  2541.  
  2542. <div class="tag">
  2543. ♡ gideon
  2544. </div>
  2545.  
  2546. <div class="value">
  2547. mutually beneficial marriage
  2548. @ shad
  2549. </div>
  2550.  
  2551. <div class="tag">
  2552. ● james
  2553. </div>
  2554.  
  2555. <div class="value">
  2556. brother who ruins the fun
  2557. @ di
  2558. </div>
  2559.  
  2560. <div class="tag">
  2561. ● edwin
  2562. </div>
  2563.  
  2564. <div class="value">
  2565. the annoying brother
  2566. @ jenny
  2567. </div>
  2568.  
  2569.  
  2570. </div> <!-- details end -->
  2571.  
  2572. </article> <!-- inside end -->
  2573.  
  2574. <div class="bdesc">
  2575. <!-- please wrap all your paragraphs between <p></p> -->
  2576.  
  2577. <p>daughter of kent</p>
  2578.  
  2579. </div>
  2580.  
  2581. </article> <!-- bias box end -->
  2582.  
  2583. <article class="bias">
  2584.  
  2585.  
  2586. <figure class="bimg">
  2587.  
  2588. <!-- bias image, will automatically crop as a square -->
  2589.  
  2590. <img class="bimg" src="https://i.pinimg.com/236x/79/f7/e1/79f7e1b236cdc69a3d4f30ae15ca2af7.jpg"></img>
  2591.  
  2592. </figure>
  2593.  
  2594. <article class="binside">
  2595.  
  2596.  
  2597. <h2 class="name"><span>
  2598.  
  2599. gemini
  2600.  
  2601. </span></h2>
  2602.  
  2603. <h3 class="group">
  2604.  
  2605. aeonian
  2606.  
  2607. </h3>
  2608.  
  2609. <div class="details">
  2610.  
  2611.  
  2612. <div class="tag">
  2613. ♡ andria
  2614. </div>
  2615.  
  2616. <div class="value">
  2617. true love
  2618. @ goblin
  2619. </div>
  2620.  
  2621. <div class="tag">
  2622. ● lucien
  2623. </div>
  2624.  
  2625. <div class="value">
  2626. oldest brother
  2627. @ shinnie
  2628. </div>
  2629.  
  2630. <div class="tag">
  2631. ● lukya
  2632. </div>
  2633.  
  2634. <div class="value">
  2635. estranged twin
  2636. @ jenny
  2637. </div>
  2638.  
  2639. <div class="tag">
  2640. ● dovev
  2641. </div>
  2642.  
  2643. <div class="value">
  2644. protective brother
  2645. @ maisie
  2646. </div>
  2647.  
  2648. <div class="tag">
  2649. ♡ name
  2650. </div>
  2651.  
  2652. <div class="value">
  2653. unrequited love
  2654. @ maisie
  2655. </div>
  2656.  
  2657. </div> <!-- details end -->
  2658.  
  2659. </article> <!-- inside end -->
  2660.  
  2661. <div class="bdesc">
  2662. <!-- please wrap all your paragraphs between <p></p> -->
  2663.  
  2664. <p>princess of incendium, fading fire powers</p>
  2665.  
  2666. </div>
  2667.  
  2668. </article> <!-- bias box end -->
  2669.  
  2670. <article class="bias">
  2671.  
  2672.  
  2673. <figure class="bimg">
  2674.  
  2675. <!-- bias image, will automatically crop as a square -->
  2676.  
  2677. <img class="bimg" src="https://i.pinimg.com/236x/79/f7/e1/79f7e1b236cdc69a3d4f30ae15ca2af7.jpg"></img>
  2678.  
  2679. </figure>
  2680.  
  2681. <article class="binside">
  2682.  
  2683.  
  2684. <h2 class="name"><span>
  2685.  
  2686. gemini
  2687.  
  2688. </span></h2>
  2689.  
  2690. <h3 class="group">
  2691.  
  2692. aeonian
  2693.  
  2694. </h3>
  2695.  
  2696. <div class="details">
  2697.  
  2698.  
  2699. <div class="tag">
  2700. ♡ andria
  2701. </div>
  2702.  
  2703. <div class="value">
  2704. true love
  2705. @ goblin
  2706. </div>
  2707.  
  2708. <div class="tag">
  2709. ● lucien
  2710. </div>
  2711.  
  2712. <div class="value">
  2713. oldest brother
  2714. @ shinnie
  2715. </div>
  2716.  
  2717. <div class="tag">
  2718. ● lukya
  2719. </div>
  2720.  
  2721. <div class="value">
  2722. estranged twin
  2723. @ jenny
  2724. </div>
  2725.  
  2726. <div class="tag">
  2727. ● dovev
  2728. </div>
  2729.  
  2730. <div class="value">
  2731. protective brother
  2732. @ maisie
  2733. </div>
  2734.  
  2735. <div class="tag">
  2736. ♡ name
  2737. </div>
  2738.  
  2739. <div class="value">
  2740. unrequited love
  2741. @ maisie
  2742. </div>
  2743.  
  2744. </div> <!-- details end -->
  2745.  
  2746. </article> <!-- inside end -->
  2747.  
  2748. <div class="bdesc">
  2749. <!-- please wrap all your paragraphs between <p></p> -->
  2750.  
  2751. <p>princess of incendium, fading fire powers</p>
  2752.  
  2753. </div>
  2754.  
  2755. </article> <!-- bias box end -->
  2756.  
  2757. <article class="bias">
  2758.  
  2759.  
  2760. <figure class="bimg">
  2761.  
  2762. <!-- bias image, will automatically crop as a square -->
  2763.  
  2764. <img class="bimg" src="https://i.pinimg.com/236x/79/f7/e1/79f7e1b236cdc69a3d4f30ae15ca2af7.jpg"></img>
  2765.  
  2766. </figure>
  2767.  
  2768. <article class="binside">
  2769.  
  2770.  
  2771. <h2 class="name"><span>
  2772.  
  2773. gemini
  2774.  
  2775. </span></h2>
  2776.  
  2777. <h3 class="group">
  2778.  
  2779. aeonian
  2780.  
  2781. </h3>
  2782.  
  2783. <div class="details">
  2784.  
  2785.  
  2786. <div class="tag">
  2787. ♡ andria
  2788. </div>
  2789.  
  2790. <div class="value">
  2791. true love
  2792. @ goblin
  2793. </div>
  2794.  
  2795. <div class="tag">
  2796. ● lucien
  2797. </div>
  2798.  
  2799. <div class="value">
  2800. oldest brother
  2801. @ shinnie
  2802. </div>
  2803.  
  2804. <div class="tag">
  2805. ● lukya
  2806. </div>
  2807.  
  2808. <div class="value">
  2809. estranged twin
  2810. @ jenny
  2811. </div>
  2812.  
  2813. <div class="tag">
  2814. ● dovev
  2815. </div>
  2816.  
  2817. <div class="value">
  2818. protective brother
  2819. @ maisie
  2820. </div>
  2821.  
  2822. <div class="tag">
  2823. ♡ name
  2824. </div>
  2825.  
  2826. <div class="value">
  2827. unrequited love
  2828. @ maisie
  2829. </div>
  2830.  
  2831. </div> <!-- details end -->
  2832.  
  2833. </article> <!-- inside end -->
  2834.  
  2835. <div class="bdesc">
  2836. <!-- please wrap all your paragraphs between <p></p> -->
  2837.  
  2838. <p>princess of incendium, fading fire powers</p>
  2839.  
  2840. </div>
  2841.  
  2842. </article> <!-- bias box end -->
  2843.  
  2844.  
  2845.  
  2846. </main>
  2847. <!-- DONT TOUCH -->
  2848. <a id="sc" href="https://southcodes.tumblr.com" target="_blank" title="southcodes">SC</a>
  2849.  
  2850. </body>
  2851.  
  2852. <script src="https://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
  2853. <script src="https://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
  2854. <script>
  2855. $(function(){
  2856.  
  2857. var $container = $('#container');
  2858.  
  2859. $container.isotope({
  2860. itemSelector : '.story'
  2861. });
  2862.  
  2863.  
  2864. var $optionSets = $('#sort .option-set'),
  2865. $optionLinks = $optionSets.find('a');
  2866.  
  2867. $optionLinks.click(function(){
  2868. var $this = $(this);
  2869. // don't proceed if already selected
  2870. if ( $this.hasClass('selected') ) {
  2871. return false;
  2872. }
  2873. var $optionSet = $this.parents('.option-set');
  2874. $optionSet.find('.selected').removeClass('selected');
  2875. $this.addClass('selected');
  2876.  
  2877. // make option object dynamically, i.e. { filter: '.my-filter-class' }
  2878. var options = {},
  2879. key = $optionSet.attr('data-option-key'),
  2880. value = $this.attr('data-option-filter');
  2881. // parse 'false' as false boolean
  2882. value = value === 'false' ? false : value;
  2883. options[ key ] = value;
  2884. if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
  2885. // changes in layout modes need extra logic
  2886. changeLayoutMode( $this, options )
  2887. } else {
  2888. // otherwise, apply new options
  2889. $container.isotope( options );
  2890. }
  2891.  
  2892. return false;
  2893. });
  2894.  
  2895.  
  2896. });
  2897. </script>
  2898.  
  2899.  
  2900. </html>
Advertisement
Add Comment
Please, Sign In to add comment