Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!--
- - bias page #1 'lullaby' by skye southcodes.tumblr.com
- - modify as you please but please do not touch the credit
- - any errors? need help? have questions? let me know!
- southcodes.tumblr.com/inbox
- - normalize css by https://github.com/necolas
- - fonts by google
- - honeybee icon font by https://honeybee.suiomi.com/
- -->
- <!DOCTYPE html>
- <html>
- <head>
- <title>{title}</title>
- <meta name="viewport" content="width=device-width">
- <link rel="shortcut icon" href="{favicon}">
- <meta name="description" content="{MetaDescription}"/>
- <!-- fonts -->
- <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600|Montserrat:500,600" rel="stylesheet">
- <!-- normalize -->
- <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">
- <!-- honeybee icon font --> <link rel="stylesheet" href="https://solrainha.github.io/honeybee/honeybee.css" >
- <style>
- /* quick color customization */
- :root {
- --background: #fff;
- --links-color: #000000;
- --links-hover: gray;
- --boxes-background:#fcfcfc;
- --borders:#eeeeee;
- }
- .tmblr-iframe {margin:.7rem;opacity:.6;-ms-transform: scale(0.85); /* IE 9 */-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
- .tmblr-iframe:hover {opacity:.8;}
- ::-webkit-scrollbar-thumb:vertical {border-left:2px solid var(--links-color);}
- ::-webkit-scrollbar {width:6px;height: 0}
- ::-webkit-scrollbar-track-piece{margin:5px 0;}
- pre {font-family:consolas;
- white-space: pre-wrap; /* css-3 */
- white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
- white-space: -pre-wrap; /* Opera 4- */
- white-space: -o-pre-wrap; /* Opera 7 */
- word-wrap: break-word;} /* Internet Explorer 5.5+ */
- body, figure{margin:0;padding:0}
- html{font: 14px 'Open Sans', sans-serif;}
- body {font-size:14px;color:#333;background:var(--background);}
- a {text-decoration: none;color:var(--links-color);word-break:break-word;}
- a:hover {color:var(--links-hover);}
- blockquote {margin:0;padding:0;}
- img {max-width:100%;height: auto;display: block;margin: .7rem 0}
- hr {border:0;border-top:1px solid #aaa;margin:0;}
- u {text-decoration: none;
- padding: 0 .3rem .3rem;border-bottom: 1px solid var(--links-color)}
- /* header */
- header {
- width: 90vw;
- max-width: 40rem;
- margin: 7rem auto 5rem;
- }
- .himg {
- width: 7rem;
- height: 7rem;
- margin-right: 1rem;
- display: inline-block;
- vertical-align: middle;}
- img.himg {
- object-fit: cover;
- border-radius: 100%;
- margin: 0}
- #hinside {
- width: calc(100% - 8.4rem);
- display: inline-block;
- vertical-align: middle;
- padding: 0 1rem;
- box-sizing: border-box;
- background: var(--boxes-background);
- border:1px solid var(--borders)}
- #title {
- font:500 1.2rem 'Montserrat', sans-serif;
- margin: 1rem 0 1.5rem;
- letter-spacing: .03rem;
- }
- #title span {
- padding:0 .5rem .5rem;
- border-bottom: 1px solid var(--links-color);
- }
- #desc {
- font-size: .9rem;
- letter-spacing: .05rem;
- font-style: italic;
- margin: 1.5rem 0;
- line-height: 175%
- }
- /* nav */
- #navi ul,#navi li {list-style-type:none;margin:0;padding:0;}
- #navi ul li {display: inline-block;margin: 0 .7rem}
- #navi {
- font:500 .95rem 'Montserrat', sans-serif;
- text-transform: uppercase;
- margin-top: 1rem;
- width: calc(100% - 8.4rem);
- float: right;
- line-height: 170%}
- /* main */
- main {
- width: calc((23rem * 3) + (4rem * 3) + 14px);
- margin: 7rem auto;
- }
- .bias {
- width: calc(23rem + 2px);
- display: inline-block;
- margin: 2rem 2rem;
- border:1px solid var(--borders);
- box-sizing: border-box;
- vertical-align:middle;
- }
- figure.bimg {
- float: left;
- width: 11rem;
- height: 11rem;
- box-sizing: border-box;
- border:.7rem solid #ffffff;
- }
- img.bimg {
- width: 100%;
- height: 100%;
- object-fit: cover;
- margin: 0;
- }
- .binside {
- width: 12rem;
- height: 11rem;
- float: right;
- background: var(--boxes-background);
- overflow: scroll;
- padding: .5rem 1rem;
- box-sizing: border-box;
- word-break: break-word;
- border-left: 1px solid var(--borders)
- }
- .name {
- margin-top: 0rem;
- font:600 .95rem 'Montserrat', sans-serif;
- text-transform: uppercase;
- letter-spacing: .04rem;
- line-height: 220%
- }
- .name span {
- padding:0 .5rem .5rem;
- border-bottom: 1px solid var(--links-color);
- }
- .group {
- font:400 .9rem 'Open Sans', sans-serif;
- text-align: right;
- font-style: italic;
- letter-spacing: .08rem;
- margin-top: 1rem
- }
- .details {
- font-size: .9rem;
- margin-top: 1.5rem;
- padding-top: .5rem;
- border-top: 1px solid var(--borders)
- }
- .details .tag {
- font-weight: 600;
- text-transform: uppercase;
- font:.95rem;
- }
- .details .th {
- color: var(--links-color);
- margin-right: .2rem
- }
- .details .value {
- margin-top: -.5rem;
- margin-bottom: 0;
- font-size: .8rem;
- font-style: italic;
- text-align: right;
- letter-spacing: .04rem
- }
- .bdesc {
- border-top:1px solid var(--borders);
- width: 100%;
- background: var(--boxes-background);
- box-sizing: border-box;
- padding: 1px 1rem;
- text-align: center;
- font-size: .9rem;
- font-style: italic;
- letter-spacing: .07rem;
- clear: both
- }
- .value,.tag {
- margin: 1rem 0
- }
- /* DONT TOUCH */
- #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;}
- /* MEDIA */
- @media only screen and (min-width:0) and (max-width:820px) {
- main,.bias {
- width: calc(31rem + 2px);
- margin:3rem auto;
- }
- figure.bimg,.binside {
- width: 15rem;
- height: 15rem;
- }
- .binside {
- width: 16rem
- }
- }
- @media only screen and (min-width:821px) and (max-width:1050px) {
- main {
- width: calc((23rem * 2) + (4rem * 2) + 14px);
- margin: 7rem auto
- }
- .bias {
- width: calc(23rem + 2px);
- margin: 2rem 2rem
- }
- figure.bimg {
- }
- }
- </style>
- </head>
- <body>
- <header>
- <article class="himg">
- <!-- header image, will automatically crop as a circle -->
- <img class="himg" src="https://i.pinimg.com/236x/98/f0/73/98f073a9c224a692f6e79fb095c58987.jpg"></img>
- </article>
- <article id="hinside">
- <h1 id="title"><span>
- MY COLLABS
- </span></h1>
- <div id="desc">
- <!-- please wrap all paragraphs <p></p> -->
- <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>
- </p>
- </div>
- </article>
- <nav id="navi"><ul>
- <li><a href="https://my-msings.tumblr.com/">home</a></li>
- <li><a href="https://sanguine-bliss.tumblr.com/">graphics</a></li>
- </ul></nav>
- </header>
- <div id="sort">
- <ul class="filter option-set exclusive" data-filter-group="group1">
- <b>groups:</b>
- <li><a href="#" data-filter-value="" class="selected">all</a></li>
- <li><a href="#" data-filter-value=".aeonian">aeonian</a></li>
- <li><a href="#" data-filter-value=".false">false gods</a></li>
- <li><a href="#" data-filter-value=".100">100th</a></li>
- <li><a href="#" data-filter-value=".spirit">spirit kingdom</a></li>
- <li><a href="#" data-filter-value=".selection">the selection</a></li>
- <li><a href="#" data-filter-value=".division">division</a></li>
- <li><a href="#" data-filter-value=".1x1">1x1</a></li>
- <li><a href="#" data-filter-value=".tbote">tbote</a></li>
- <li><a href="#" data-filter-value=".diamond">diamond</a></li>
- </ul>
- </div>
- <main>
- <!-- bias box start --> <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://i.pinimg.com/236x/79/f7/e1/79f7e1b236cdc69a3d4f30ae15ca2af7.jpg"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- gemini
- </span></h2>
- <h3 class="group">
- aeonian
- </h3>
- <div class="details">
- <div class="tag">
- ♡ andria
- </div>
- <div class="value">
- true love
- @ goblin
- </div>
- <div class="tag">
- ● lucien
- </div>
- <div class="value">
- oldest brother
- @ shinnie
- </div>
- <div class="tag">
- ● lukya
- </div>
- <div class="value">
- estranged twin
- @ jenny
- </div>
- <div class="tag">
- ● dovev
- </div>
- <div class="value">
- protective brother
- @ maisie
- </div>
- <div class="tag">
- ♡ name
- </div>
- <div class="value">
- unrequited love
- @ maisie
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>princess of incendium, fading fire powers</p>
- </div>
- </article> <!-- bias box end -->
- <!-- bias box start --> <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://i.pinimg.com/236x/61/74/0c/61740c1ae1b889b85d3a5339c4987429.jpg"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- astro
- </span></h2>
- <h3 class="group">
- aeonian
- </h3>
- <div class="details">
- <div class="tag">
- ♡ name
- </div>
- <div class="value">
- true love
- @ rper
- </div>
- <div class="tag">
- ◌ isla
- </div>
- <div class="value">
- mentor
- @ maisie
- </div>
- <div class="tag">
- ◌ jinny
- </div>
- <div class="value">
- pen friend
- @ miri
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>aecor's royal power instructor, water wielder</p>
- </div>
- </article> <!-- bias box end -->
- <!-- bias box start --> <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://i.pinimg.com/236x/27/b2/06/27b206de09b50e41f87feabff4fc8d7c.jpg"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- rune
- </span></h2>
- <h3 class="group">
- aeonian
- </h3>
- <div class="details">
- <div class="tag">
- ♡ jinny
- </div>
- <div class="value">
- true love
- @ miri
- </div>
- <div class="tag">
- ◌ teddy
- </div>
- <div class="value">
- annoying brother
- @ jammy
- </div>
- <div class="tag">
- ◌ leo
- </div>
- <div class="value">
- annoying brother 2
- @ max
- </div>
- <div class="tag">
- ◌ nyx
- </div>
- <div class="value">
- sassy mom, mentor
- @ maisie
- </div>
- <div class="tag">
- x kya
- </div>
- <div class="value">
- who tf are you
- @ jenny
- </div>
- <div class="tag">
- x ori
- </div>
- <div class="value">
- rocky relationship
- @ shinnie
- </div>
- <div class="tag">
- x saskia
- </div>
- <div class="value">
- annoying flirt
- @ miri
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>member of the basilisks, shadow wielder</p>
- </div>
- </article> <!-- bias box end -->
- <!-- bias box start --> <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://i.pinimg.com/236x/53/5e/a0/535ea0fb8aee49732c7f799e4e0904d3.jpg"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- sera
- </span></h2>
- <h3 class="group">
- aeonian
- </h3>
- <div class="details">
- <div class="tag">
- <s>♡ none</s>
- </div>
- <div class="value">
- <s>true love
- @ rper</s>
- </div>
- <div class="tag">
- ◌ soren
- </div>
- <div class="value">
- rebellious kid
- @ max
- </div>
- <div class="tag">
- x hera
- </div>
- <div class="value">
- killer
- @ jenny
- </div>
- <div class="tag">
- x abu
- </div>
- <div class="value">
- hate you, monkey
- @ di
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>carpenter of the pirates, earth wielder</p>
- </div>
- </article> <!-- bias box end -->
- <!-- bias box start --> <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://i.pinimg.com/236x/74/49/a8/7449a84f0333a833ddf3cf80e84dac6c.jpg"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- ying
- </span></h2>
- <h3 class="group">
- aeonian
- </h3>
- <div class="details">
- <div class="tag">
- ● ru
- </div>
- <div class="value">
- little sis
- @ maisie
- </div>
- <div class="tag">
- ◌ braedon
- </div>
- <div class="value">
- casual acquaintance
- @ jenny
- </div>
- <div class="tag">
- x cronos
- </div>
- <div class="value">
- absolute loathing
- @ jenny
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>competitor, earth wielder</p>
- </div>
- </article> <!-- bias box end -->
- <!-- bias box start --> <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://i.pinimg.com/236x/65/96/3e/65963e04cec9747bc7e8283ca8e5397e.jpg"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- rhea
- </span></h2>
- <h3 class="group">
- false gods
- </h3>
- <div class="details">
- <div class="tag">
- ♡ ricky
- </div>
- <div class="value">
- true love
- @ kt
- </div>
- <div class="tag">
- ◌ kaiden
- </div>
- <div class="value">
- brotherly vibes
- @ jammy
- </div>
- <div class="tag">
- ◌ kairi
- </div>
- <div class="value">
- sisterly vibes
- @ shinnie
- </div>
- <div class="tag">
- x aise
- </div>
- <div class="value">
- feared and hated
- @ di
- </div>
- <div class="tag">
- ● ceilon
- </div>
- <div class="value">
- stepbrother
- @ sun
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>artemis, olympian</p>
- </div>
- </article> <!-- bias box end -->
- <!-- bias box start --> <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://64.media.tumblr.com/41e5465a93b72e55f4c64cd0f902ef7e/tumblr_osi51boOKS1wsov9to7_250.png"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- aera
- </span></h2>
- <h3 class="group">
- false gods
- </h3>
- <div class="details">
- <div class="tag">
- ♡ kaiden
- </div>
- <div class="value">
- previous lover
- @ jammy
- </div>
- <div class="tag">
- ◌ aisha
- </div>
- <div class="value">
- partners in crime
- @ jenny
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>lab supervisor of mirage</p>
- </div>
- </article> <!-- bias box end -->
- <!-- bias box start --> <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://i.pinimg.com/236x/44/de/11/44de11b9adf0793ed1badcb2105c7e32.jpg"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- cassie
- </span></h2>
- <h3 class="group">
- 100th
- </h3>
- <div class="details">
- <div class="tag">
- ● briar
- </div>
- <div class="value">
- stepbrother
- @ badger
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>female tribute of district 7</p>
- </div>
- </article> <!-- bias box end -->
- <!-- bias box start --> <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://i.pinimg.com/236x/80/98/a5/8098a58d5c5257f00d16065677f49325.jpg"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- ellie
- </span></h2>
- <h3 class="group">
- spirit kingdom
- </h3>
- <div class="details">
- <div class="tag">
- ♡ elias
- </div>
- <div class="value">
- true love
- @ jenny
- </div>
- <div class="tag">
- ● kaiden
- </div>
- <div class="value">
- oldest brother
- @ jammy
- </div>
- <div class="tag">
- ◌ elian
- </div>
- <div class="value">
- brotherly vibes
- @ jenny
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>princess of spirit kingdom, non-bender</p>
- </div>
- </article> <!-- bias box end -->
- <!-- bias box start --> <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://i.pinimg.com/236x/5e/c8/69/5ec869f55b8632e8348bd838201691c7.jpg"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- nia
- </span></h2>
- <h3 class="group">
- spirit kingdom
- </h3>
- <div class="details">
- <div class="tag">
- ◌ birdsong
- </div>
- <div class="value">
- fellow maids
- @ birdsong
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>maid, badass fighter, human</p>
- </div>
- </article> <!-- bias box end -->
- <!-- bias box start --> <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://i.pinimg.com/236x/9d/1f/d3/9d1fd3c310fa8b2f43cfeb722cc6665e.jpg"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- styx
- </span></h2>
- <h3 class="group">
- spirit kingdom
- </h3>
- <div class="details">
- <div class="tag">
- ◌ alina
- </div>
- <div class="value">
- bittersweet friendship
- @ jenny
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>guard, fire bender</p>
- </div>
- </article> <!-- bias box end -->
- <!-- bias box start --> <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://i.pinimg.com/236x/4b/18/6e/4b186e3c07fdcee23bf7318404bd3aa8.jpg"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- thea
- </span></h2>
- <h3 class="group">
- 1x1
- </h3>
- <div class="details">
- <div class="tag">
- ♡ candice
- </div>
- <div class="value">
- true love
- @ bee
- </div>
- <div class="tag">
- ● avery
- </div>
- <div class="value">
- foster son
- @ bee
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>police officer, cryokinesis</p>
- </div>
- </article> <!-- bias box end -->
- <!-- bias box start --> <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://i.pinimg.com/236x/c3/86/16/c386161ee848029f73d2474488c3ebcd.jpg"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- sky
- </span></h2>
- <h3 class="group">
- aeonian
- </h3>
- <div class="details">
- <div class="tag">
- ♡ luke
- </div>
- <div class="value">
- true love
- @ max
- </div>
- <div class="tag">
- ◌ hera
- </div>
- <div class="value">
- personal bodyguard
- @ shinnie
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>stirian captain of guards, air wielder</p>
- </div>
- </article> <!-- bias box end -->
- <!-- bias box start --> <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://i.pinimg.com/236x/f5/fa/02/f5fa0230521898900d6a7a95b2120fe4.jpg"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- aaron
- </span></h2>
- <h3 class="group">
- aeonian
- </h3>
- <div class="details">
- <div class="tag">
- ♡ lux
- </div>
- <div class="value">
- true love
- @ kt
- </div>
- <div class="tag">
- ◌ chris
- </div>
- <div class="value">
- loyal puppy
- @ di
- </div>
- <div class="tag">
- ◌ mace
- </div>
- <div class="value">
- brotherly vibes
- @ jammy
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>member of the meraki, light wielder</p>
- </div>
- </article> <!-- bias box end -->
- <!-- bias box start --> <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://i.pinimg.com/236x/a0/8e/4f/a08e4fc8a12583b15e1ed40c48b33613.jpg"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- cyn
- </span></h2>
- <h3 class="group">
- 100th
- </h3>
- <div class="details">
- <div class="tag">
- ♡ aspen
- </div>
- <div class="value">
- unrequited love
- @ pandora
- </div>
- <div class="tag">
- ◌ cedar
- </div>
- <div class="value">
- motherly vibes
- @ britt
- </div>
- <div class="tag">
- x fjord
- </div>
- <div class="value">
- enemy
- @ jenny
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>male tribute of district 9</p>
- </div>
- </article> <!-- bias box end -->
- <!-- bias box start --> <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://i.pinimg.com/236x/c8/2a/79/c82a79b1852b8836c9a6cad0859d355f.jpg"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- oli
- </span></h2>
- <h3 class="group">
- aeonian
- </h3>
- <div class="details">
- <div class="tag">
- ♡ rayna
- </div>
- <div class="value">
- true love
- @ jenny
- </div>
- <div class="tag">
- ● cronos
- </div>
- <div class="value">
- dad
- @ jenny
- </div>
- <div class="tag">
- ● ru
- </div>
- <div class="value">
- stepmother
- @ maisie
- </div>
- <div class="tag">
- ● elias
- </div>
- <div class="value">
- oldest brother
- @ di
- </div>
- <div class="tag">
- ● orion
- </div>
- <div class="value">
- younger brother
- @ shinnie
- </div>
- <div class="tag">
- ● nikolai
- </div>
- <div class="value">
- younger brother
- @ jammy
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>prince of rasavasda, air and water wielder</p>
- </div>
- </article> <!-- bias box end -->
- <!-- bias box start --> <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://i.pinimg.com/236x/5f/dc/1a/5fdc1aa3a8475733d7db36feb48f96c4.jpg"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- ez
- </span></h2>
- <h3 class="group">
- spirit kingdom
- </h3>
- <div class="details">
- <div class="value">
- <br>collabs tbd.</br>
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>archivist, rebel</p>
- </div>
- </article> <!-- bias box end -->
- <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://64.media.tumblr.com/41e5465a93b72e55f4c64cd0f902ef7e/tumblr_osi51boOKS1wsov9to7_250.png"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- aera
- </span></h2>
- <h3 class="group">
- false gods
- </h3>
- <div class="details">
- <div class="tag">
- ♡ kaiden
- </div>
- <div class="value">
- previous lover
- @ jammy
- </div>
- <div class="tag">
- ◌ aisha
- </div>
- <div class="value">
- partners in crime
- @ jenny
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>lab supervisor of mirage</p>
- </div>
- </article> <!-- bias box end -->
- <!-- bias box start --> <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://img.wattpad.com/8af8b006648115e2910087b9e0d3eb44f0d0a245/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f776174747061642d6d656469612d736572766963652f53746f7279496d6167652f507974774246344144697a4a75673d3d2d3336353939383834372e313439653736323266323535613961633237333936343133363538312e676966?s=fit&w=720&h=720"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- will
- </span></h2>
- <h3 class="group">
- tbote
- </h3>
- <div class="details">
- <div class="tag">
- ♡ indy
- </div>
- <div class="value">
- unrequited love
- @ maisie
- </div>
- <div class="tag">
- ◌ armani
- </div>
- <div class="value">
- roommate
- @ sun
- </div>
- <div class="tag">
- ◌ leo
- </div>
- <div class="value">
- previous roommate
- @ di
- </div>
- <div class="tag">
- ● penrose
- </div>
- <div class="value">
- stepsister
- @ kt
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>spring breaker</p>
- </div>
- </article> <!-- bias box end -->
- <!-- bias box start --> <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://dvqlxo2m2q99q.cloudfront.net/000_clients/604577/page/w1000-604577u31TIWZ4.jpg"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- soraya
- </span></h2>
- <h3 class="group">
- tbote
- </h3>
- <div class="details">
- <div class="tag">
- ◌ tessa
- </div>
- <div class="value">
- estranged friend
- @ jenny
- </div>
- <div class="tag">
- ◌ nadine
- </div>
- <div class="value">
- deceased bestie
- @ di
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>secondary character</p>
- </div>
- </article> <!-- bias box end -->
- <!-- bias box start --> <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://iv1.lisimg.com/image/16589307/471full-ellie-thumann.jpg"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- elektra
- </span></h2>
- <h3 class="group">
- selection
- </h3>
- <div class="details">
- <div class="tag">
- ♡ bell
- </div>
- <div class="value">
- lover 001
- @ aine
- </div>
- <div class="tag">
- ♡ name
- </div>
- <div class="value">
- lover 002
- @ maisie
- </div>
- <div class="tag">
- ♡ timmy
- </div>
- <div class="value">
- awkward ex
- @ natsuki
- </div>
- <div class="tag">
- ◌ rom, dahlia, clove, deahna, nadia
- </div>
- <div class="value">
- girl gang
- @ maisie, di, jenny, jammy, miri
- </div>
- <div class="tag">
- ◌ george
- </div>
- <div class="value">
- "you get embarrassed easily"
- @ natsuki
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>the assassin</p>
- </div>
- </article> <!-- bias box end -->
- <!-- bias box start --> <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://iv1.lisimg.com/image/17085038/740full-abigail-f.-cowen.jpg"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- mea
- </span></h2>
- <h3 class="group">
- selection
- </h3>
- <div class="details">
- <div class="tag">
- ♡ becky
- </div>
- <div class="value">
- friend + crush
- @ badge
- </div>
- <div class="tag">
- ◌ enzo
- </div>
- <div class="value">
- childhood friend
- @ shinnie
- </div>
- <div class="tag">
- x deahna
- </div>
- <div class="value">
- "you stole my lover"
- @ jammy
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>the unexpected</p>
- </div>
- </article> <!-- bias box end -->
- <!-- bias box start --> <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLZVWxECGa66amb65iIFzZJ7TsCIgHaxLzvw&usqp=CAU"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- az
- </span></h2>
- <h3 class="group">
- selection
- </h3>
- <div class="details">
- <div class="tag">
- ◌ kraz
- </div>
- <div class="value">
- angsty tense friendship
- @ sun
- </div>
- <div class="tag">
- ◌ amira
- </div>
- <div class="value">
- little sis
- @ maisie
- </div>
- <div class="tag">
- ● galen
- </div>
- <div class="value">
- tense half brother
- @ jenny
- </div>
- <div class="tag">
- x corinne
- </div>
- <div class="value">
- friendly rivalry
- @ jenny
- </div>
- <div class="tag">
- x romeo
- </div>
- <div class="value">
- "i just hate your face"
- @ shinnie
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>2nd in command of the northern rebels</p>
- </div>
- </article> <!-- bias box end -->
- <!-- bias box start --> <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://data.whicdn.com/images/172108297/original.jpg"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- serene
- </span></h2>
- <h3 class="group">
- selection
- </h3>
- <div class="details">
- <div class="tag">
- ♡ kiran
- </div>
- <div class="value">
- awkward but polite ex
- @ badge
- </div>
- <div class="tag">
- ◌ nadia
- </div>
- <div class="value">
- trainee
- @ miri
- </div>
- <div class="tag">
- ◌ galen
- </div>
- <div class="value">
- playful acquaintance
- @ jenny
- </div>
- <div class="tag">
- ◌ sera
- </div>
- <div class="value">
- handmaiden of the princess
- @ miri
- </div>
- <div class="tag">
- ◌ natalia
- </div>
- <div class="value">
- nice boss
- @ natsuki
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>princess sera's handmaiden</p>
- </div>
- </article> <!-- bias box end -->
- <!-- bias box start --> <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/hostedimages/1608795538i/30580218.png"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- liam
- </span></h2>
- <h3 class="group">
- division
- </h3>
- <div class="details">
- <div class="tag">
- ♡ celeste
- </div>
- <div class="value">
- baby's dad
- @ kt
- </div>
- <div class="tag">
- x ophelia
- </div>
- <div class="value">
- enemies
- @ jenny
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>the attention seeker</p>
- </div>
- </article> <!-- bias box end -->
- <!-- bias box start --> <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://images.gr-assets.com/hostedimages/1608886873ra/30585135.gif"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- fin
- </span></h2>
- <h3 class="group">
- division
- </h3>
- <div class="details">
- <div class="tag">
- ◌ quincy
- </div>
- <div class="value">
- playful partners in crime
- @ miri
- </div>
- <div class="tag">
- x aliya
- </div>
- <div class="value">
- eventual betrayal
- @ di
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>the cute innocent spy</p>
- </div>
- </article> <!-- bias box end -->
- <!-- bias box start --> <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://i.pinimg.com/originals/2e/5d/bb/2e5dbbe009ba53b59c22b261b751d692.jpg"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- jordan
- </span></h2>
- <h3 class="group">
- division
- </h3>
- <div class="details">
- <div class="tag">
- ♡ azalea
- </div>
- <div class="value">
- turbulent ex
- @ kt
- </div>
- <div class="tag">
- ♡ laurence
- </div>
- <div class="value">
- seemingly perfect but...?
- @ sun
- </div>
- <div class="tag">
- x trin
- </div>
- <div class="value">
- "you're annoying"
- @ jenny
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>moody project x boy</p>
- </div>
- </article> <!-- bias box end -->
- <!-- bias box start --> <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://i.pinimg.com/236x/de/60/be/de60be1786772656a43fac2510364e0b.jpg"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- kedian
- </span></h2>
- <h3 class="group">
- division
- </h3>
- <div class="details">
- <div class="tag">
- ◌ sammy
- </div>
- <div class="value">
- anti division duo
- @ jenny
- </div>
- <div class="tag">
- ◌ yvonne
- </div>
- <div class="value">
- partners in crime
- @ miri
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>project m deaf boy</p>
- </div>
- </article> <!-- bias box end -->
- <!-- bias box start --> <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://iv1.lisimg.com/image/9084114/551full-imogen-poots.jpg"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- june
- </span></h2>
- <h3 class="group">
- division
- </h3>
- <div class="details">
- <div class="tag">
- ◌ cerise
- </div>
- <div class="value">
- super bestie
- @ maisie
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>assistant of disguises</p>
- </div>
- </article> <!-- bias box end -->
- <!-- bias box start --> <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://ivana-baquero.net/gallery/albums/UPLOADS/TVSeries/TheShannaraChronicles/SeasonTwo/BTS/00007.jpg"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- kylie
- </span></h2>
- <h3 class="group">
- division
- </h3>
- <div class="details">
- <div class="tag">
- ♡ marwan
- </div>
- <div class="value">
- clumsy patient
- @ emma
- </div>
- <div class="tag">
- ◌ henri
- </div>
- <div class="value">
- cute bickering colleagues
- @ maisie
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>recruit instructor</p>
- </div>
- </article> <!-- bias box end -->
- <!-- bias box start --> <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://iv1.lisimg.com/image/5473735/303full-rhys-ward.jpg"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- kye
- </span></h2>
- <h3 class="group">
- 1x1
- </h3>
- <div class="details">
- <div class="tag">
- ♡ name
- </div>
- <div class="value">
- lovers
- @ britt
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>the werewolf</p>
- </div>
- </article> <!-- bias box end -->
- <!-- bias box start --> <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://mediaslide-europe.storage.googleapis.com/uno/pictures/3113/43893/large-1595425905-ac1b4c56036492f85e3acf546f5788a1.jpg"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- ash
- </span></h2>
- <h3 class="group">
- 1x1
- </h3>
- <div class="details">
- <div class="tag">
- ♡ sage
- </div>
- <div class="value">
- enemies to lovers
- @ blue
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>disgraced hunter</p>
- </div>
- </article> <!-- bias box end -->
- <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://i.pinimg.com/236x/79/f7/e1/79f7e1b236cdc69a3d4f30ae15ca2af7.jpg"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- liliana
- </span></h2>
- <h3 class="group">
- diamond of the first water
- </h3>
- <div class="details">
- <div class="tag">
- ♡ gideon
- </div>
- <div class="value">
- mutually beneficial marriage
- @ shad
- </div>
- <div class="tag">
- ● james
- </div>
- <div class="value">
- brother who ruins the fun
- @ di
- </div>
- <div class="tag">
- ● edwin
- </div>
- <div class="value">
- the annoying brother
- @ jenny
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>daughter of kent</p>
- </div>
- </article> <!-- bias box end -->
- <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://i.pinimg.com/236x/79/f7/e1/79f7e1b236cdc69a3d4f30ae15ca2af7.jpg"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- gemini
- </span></h2>
- <h3 class="group">
- aeonian
- </h3>
- <div class="details">
- <div class="tag">
- ♡ andria
- </div>
- <div class="value">
- true love
- @ goblin
- </div>
- <div class="tag">
- ● lucien
- </div>
- <div class="value">
- oldest brother
- @ shinnie
- </div>
- <div class="tag">
- ● lukya
- </div>
- <div class="value">
- estranged twin
- @ jenny
- </div>
- <div class="tag">
- ● dovev
- </div>
- <div class="value">
- protective brother
- @ maisie
- </div>
- <div class="tag">
- ♡ name
- </div>
- <div class="value">
- unrequited love
- @ maisie
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>princess of incendium, fading fire powers</p>
- </div>
- </article> <!-- bias box end -->
- <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://i.pinimg.com/236x/79/f7/e1/79f7e1b236cdc69a3d4f30ae15ca2af7.jpg"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- gemini
- </span></h2>
- <h3 class="group">
- aeonian
- </h3>
- <div class="details">
- <div class="tag">
- ♡ andria
- </div>
- <div class="value">
- true love
- @ goblin
- </div>
- <div class="tag">
- ● lucien
- </div>
- <div class="value">
- oldest brother
- @ shinnie
- </div>
- <div class="tag">
- ● lukya
- </div>
- <div class="value">
- estranged twin
- @ jenny
- </div>
- <div class="tag">
- ● dovev
- </div>
- <div class="value">
- protective brother
- @ maisie
- </div>
- <div class="tag">
- ♡ name
- </div>
- <div class="value">
- unrequited love
- @ maisie
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>princess of incendium, fading fire powers</p>
- </div>
- </article> <!-- bias box end -->
- <article class="bias">
- <figure class="bimg">
- <!-- bias image, will automatically crop as a square -->
- <img class="bimg" src="https://i.pinimg.com/236x/79/f7/e1/79f7e1b236cdc69a3d4f30ae15ca2af7.jpg"></img>
- </figure>
- <article class="binside">
- <h2 class="name"><span>
- gemini
- </span></h2>
- <h3 class="group">
- aeonian
- </h3>
- <div class="details">
- <div class="tag">
- ♡ andria
- </div>
- <div class="value">
- true love
- @ goblin
- </div>
- <div class="tag">
- ● lucien
- </div>
- <div class="value">
- oldest brother
- @ shinnie
- </div>
- <div class="tag">
- ● lukya
- </div>
- <div class="value">
- estranged twin
- @ jenny
- </div>
- <div class="tag">
- ● dovev
- </div>
- <div class="value">
- protective brother
- @ maisie
- </div>
- <div class="tag">
- ♡ name
- </div>
- <div class="value">
- unrequited love
- @ maisie
- </div>
- </div> <!-- details end -->
- </article> <!-- inside end -->
- <div class="bdesc">
- <!-- please wrap all your paragraphs between <p></p> -->
- <p>princess of incendium, fading fire powers</p>
- </div>
- </article> <!-- bias box end -->
- </main>
- <!-- DONT TOUCH -->
- <a id="sc" href="https://southcodes.tumblr.com" target="_blank" title="southcodes">SC</a>
- </body>
- <script src="https://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
- <script src="https://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
- <script>
- $(function(){
- var $container = $('#container');
- $container.isotope({
- itemSelector : '.story'
- });
- var $optionSets = $('#sort .option-set'),
- $optionLinks = $optionSets.find('a');
- $optionLinks.click(function(){
- var $this = $(this);
- // don't proceed if already selected
- if ( $this.hasClass('selected') ) {
- return false;
- }
- var $optionSet = $this.parents('.option-set');
- $optionSet.find('.selected').removeClass('selected');
- $this.addClass('selected');
- // make option object dynamically, i.e. { filter: '.my-filter-class' }
- var options = {},
- key = $optionSet.attr('data-option-key'),
- value = $this.attr('data-option-filter');
- // parse 'false' as false boolean
- value = value === 'false' ? false : value;
- options[ key ] = value;
- if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
- // changes in layout modes need extra logic
- changeLayoutMode( $this, options )
- } else {
- // otherwise, apply new options
- $container.isotope( options );
- }
- return false;
- });
- });
- </script>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment