rose04

tumblr collabs page

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