Story
Profile
f2u code - dulcet
for the spring 2026 coder's quarters challange!
babies first coder's quarters...wow...
i probably could've done something cooler for the desktop layout but. i'm also lazy.
(i kinda slacked off on annotations past the personality section i apologize for that)
overall i'm pretty happy with this thing! it's the longest i've released publicly so far at 640 lines unnannotated and 1.3k annotated...wow...
i dunno hope people like it
aurelius
owned by me
tos
- feel free to edit as much as you'd like
- keep the credit intact and visible, but feel free to move it
- do not redistribute my codes, link back to this profile if you'd like to share it
- frankesteining is perfectly alright
- have fun!
Overview
Aurelius - she's probably my favorite oc of all time, along with the first design I received via DTA! She's also one of my oldest ocs who I still use actively.
Currently over a year old, plus she was one of my first ocs I got after delving in to the actual art and character trading community! She was part of the reason I managed to secure my first art trade, so she has alot sentimental value to me.
Her story is very much a work in progress, but it's the first bit of oc lore I ended up really loving and is still working on even after over a year - although, there's still so much i have to work on...
Basic Info
Aurelius
16-17
May 24th
INFJ
She/Her
DTA
Personality
No. No, I don't think that's how its supposed to be!
introverted
extroverted
reckless
cautious
lazy
hardworking
trusting
paranoid
polite
blunt
selfish
alturistic
She's really nice and kind! Awkward with other people considering how she was isolated with one single friend for most of her life - however, the more you get to know her, the more she'll open up.
She's very paranoid about people disliking her, and will freak out about every tiny social interaction. She says sorry really often, even when it's not really her fault - and if she does something to upset one of her friends she'll do anything to fox that mistake - although usually by herself, as she does kinda struggle in asking people for help. Along with, well, just being nervous.
Surprisingly reckless! Very trusting and gullible to other people, and this leads her to alot of trouble. She hates being alone and generally tries to be with someone at all times.
After her powers manifested, she went and moved away from her parents to live in the temple. She wasn't allowed to meet with people her age, and the temple workers were the ones took care of her, basically like a bunch of babysitters.
The room she lived in was nice, she had books, toys, and even a garden outside! Most of the days she'd spend ages lying on the grass, just staring at the clouds and tending to the garden. She was allowed outside her room, it wasn't like she was being trapped or something. She was allowed to explore the west wing of the temple, which is also equiped with a library - so the times where she wasn't in the garden she would just read and explore the library.
She was "homeschooled" in a way there. One of the temple workers, Daybreak, went over a few times a week to give her lessons about math, science etc. Daybreak was basically the only person Aurelius interacted with outside of the occasional "sorries" and "excuse mes" whenever she bumped into a temple worker. Still, it was kinda lonely. There weren't anyone her age to talk to.
She was really lonely for the first few months - most temple workers weren't allowed to talk to her, as to not "taint" her heart. Or something it's just really weird lmao.
At some point, someone managed to stumble into her garden while she was there. That person was Lune, the other vessel. Now Aurelius was told that meeting "the other vessel" would be dangerous for her, but she didn't know that Lune was said "other vessel"! She just thought this was some weird kid that broke in and was scared, obviously. Lune managed to convince her not to call the temple workers, and left and said goodbye. Although, now Lune tries and sneak in her garden pretty often to poke around the west wing - they lived in the east wing, and never went to the west wing.
Aurelius was pretty wary of Lune at first, but warmed up to them slowly. They talk, and grew close. At some point Lune tells her that they're the moon vessel, which makes their meetings kinda like. Forbidden?? I mean they were forbidden in the forst place but like more uagaha I don't know man. Lune also mentions how Daybreak used to be their only friend, being a temple worker and their brother. Or stuff idk.
Flash-foward multiple years, and the date of the sacrifice arrives. The Red Moon comes every 16 years and there's this big ritual they have todo to die and "return to Taevalin". Up till this point, Lune and Aurelius kinda got gaslighted into thinking that they're not really dying, they're just returning to where they came from. Or something. The ritual starts, and Aurelius realizes. She's going to die. She's not going to be able to laze around the library anymore, she can't lay down and go cloud gazing anymore, she can't go take care of her garden anymore, she-
She freaks out.
Her powers explode.
Killing Daybreak. Right in front of Lune.
She didn't know what todo. Lune hates her now. Why wouldn't they? She killed their brother. Right? All she could do was run - and that's what she did. She flew out from the temple, with no particular goal in mind she just needed to get out of there. However, a storm hit midway through her flight - she lost her balance, and fell into the sea, eventually washing up on the shores of the mainland.
What was she doing again? Everything was so hazy and the only thing she could remember was...Lune. She thinks that finding Lune her the way to get her memories back - and then she wakes up. In a cage. So basically, she washed up on a beach. A bunch of hunters found her and saw her wings, went "wow these things are rare, it'll probably go for alot on the black market, let's catch and sell it!". So yeah. She was about to be killed and have her wings taken from her - but she doesn't want that!! So she busts open her cage (somehow??) steals some stuff from her captors, and runs. Eventually she realizes her wings attract alot of unwanted attention, and she tries and hide them with a cape. Her goal stays the same though, to find Lune, and get back home.
She stumbles from village to village, trying to survive, trying to find Lune. It's not that easy - she has a good education, but she doesn't know how the world works, and is also dirt poor. Then she meets Kasper, a guy that does odd jobs and magic shows for a living. She passes by a town where he was performing at, and got into some...trouble. Kasper helps her out, and agrees to accompany her on her journey.
So uh, her and Kaspy travel together for a while. Kaspy drops by a town for supplies every now and then, and to put on shows for some cash - they mostly travelled along forests and nature areas. Or something. They stumble on places that remind Aurelius of some of her memories, so throughout their travels she regains her memory bit by bit.
At some point, Kaspy reunites with Cal again - although it doesn't end on a happy note. Kasper gets pretty heavily affected by this encounter, and starts feeling more distant from Aurelius. She panics, why was he doing this, what did she do wrong, how can she fix this? But she also might just be overthinking things, and keeps her mouth shut. Kaspy doesn't tell her about the encounter aswell.
They continue their travels, and uh. Finds Aureliuses tribe all locked up and stuff, their wings about to be cut off - so it turns out that because of Aurelius leaving, the blessing of Taevalin breaks and they aren't able to fly, and they were discovered and captured by the land-dwellers. Seeing Lune face to face, Aurelius feels so happy - she finally found them, and her people, even if the situation isn't the best. But Lune looks horrified at her presence, and seeing that look, filled with rage and sadness, all the memories come back. The blood moon. Oh god, the blood moon. Lune turns to leave, and Aurelius breaks. Lune's going to leave her again, after all this, was it for nothing? She deserved it, she killed their brother, but still. She begs them not to go, to stay, please -
And Lune does. But they don't forgive her, no, they won't be able to. But they can't hate her fully either, Lune cares for her too much - they stayed together all those years afterall. Lune didn't want to make the mistake of leaving her again.
That's it folks, all I got for now. I'm sorry if anything sounds weird I'm a terrible writer and really I'm just brain dumping (plus the writing on this profile is like suuper old). Also, props to you for reading all that! Since it's just a silly code preview, aha.
"hiding in the blue - rielle and thefatrat"
"hiding in the blue - rielle and thefatrat"
Trivia
I...I'm not the angel that you thought I was. You know that, right?
Likes
- Sunny, open skies
- Windy moutains
- Flowers
- Pastries
Dislikes
- Large bodies of water
- Loud noises
- Being left behind
- Bees
Clouds, open skies, high off places and windy moutains reminds her of her home. She loves cloud-watching and used to lay down and stare and the clouds for ages. One of her closest friends taught her about flowers and flower symbolism, part of the reason why she likes them. She used to tend to a garden in her spare time aswell.
A storm and drowning in the sea is what caused her to get animesia, and she's always been nervous about large bodies of waters and loud noises since then. She also has a bee sting allergy - nearly died as a kid when one stung her, so it makes sense for her to be scared lmao.
Relationships
Daybreak
former mentor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
Lune
former best friend
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
Kasper
friend
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
<!-- f2u code - dulcet
turn off wysiwyg while editing!! this will break the code, so you'd have to restart with a fresh copy if you do
replace all IMAGE_URL_HERE with your raw image links!
i recommend filegarden.com to host them
this code uses fontawesome icons!
you can change them by finding the icons at fontawesome.com and copying the html code snippet in place of any <i class> tags
use th.circlejourney.net for a live preview
custom colors are only used in the header and music player, you can adjust the colors directly by changing the hex codes below -->
<!-- variables -->
<div style="--outline: #fff;
--text-shadow: #fff;
--text-color: #000;">
<!-- code start -->
<div class="flex-column mx-auto mt-n2" style="font-family:avenir; max-width: 450px">
<!-- header start -->
<div style="overflow: hidden; color: var(--text-color); text-shadow: 0px 0px 5px var(--text-shadow); margin-top: -30px">
<!-- background image card start -->
<!-- don't forget the ' ' surrounding the url -->
<div class="card p-2" style="background-image: url(
'IMAGE_URL_HERE'
); background-size:cover; background-position:center; margin-top: 50px; min-height: 100px">
<!-- you can safely delete anything you don't want under this line -->
<!-- decorative border start -->
<div class="flex-fill bg-transparent"
style="/* change the style of the border by changing solid to dashed or double, however if you set it to double the width (px value in front of solid) must be at least 3 px for it to show */;
border: 1px solid var(--outline); border-radius: 2px; opacity: 0.25"></div>
<!-- decorative border end -->
<!-- decorative icons start -->
<div class="flex-column" style="font-size: 27px; position: absolute; top: 5px; left: 2px">
<i class="fal fa-sparkle"></i>
<i class="fal fa-sparkle my-1"></i>
<i class="fal fa-sparkle"></i>
</div>
<!-- decorative icons end -->
<!-- name start -->
<!-- while you can type fairly long names without it looking weird (ex "sir lorem ipsum dolor sit amet" will fit), but if it's any longer i recommend you adjust the font-size to something smaller -->
<span style="font-size: 50px; position: absolute; font-variant: small-caps; bottom: -3px; margin-left: 27px; line-height: 0.9">
Placeholder
</span>
<!-- name end -->
<!-- pagedoll start -->
<!-- you can add fa-bounce, fa-fade, fa-beat, fa-beat-fade, or fa-flip to add animation to the image after the "tooltipster" in the "class"
adjust the shadow color by changing #000 to whatever hex code you'd like -->
<a href="
ARTIST_URL_HERE
" style="position: absolute; right: 0; margin-top: -35px; margin-right: -15px">
<img src="
IMAGE_URL_HERE
" class="tooltipster" title="
art by ARTIST_NAME
" style="width: 175px; filter: drop-shadow(0px 0px 1px #000)">
</a>
<!-- pagedoll end -->
</div>
<!-- background image card end -->
</div>
<!-- header end -->
<!-- first profile block start -->
<div class="d-flex mt-1">
<!-- main profile content start -->
<div class="flex-fill">
<!-- scrollbox start -->
<div class="mb-1" style="overflow: auto; max-height: 400px">
<!-- overview section start -->
<!-- header start -->
<div style="margin-top: 12px" id="overview">
<!-- background start -->
<div class="bg-secondary flex-fill" style="border-radius: 5px; opacity: 0.2; height: 10px"></div>
<!-- content start -->
<div class="justify-content-between align-items-center" style="position: relative; z-index: 1; font-size: 20px; margin-top: -25px">
<!-- text -->
<span>
Overview
</span>
<!-- icon start -->
<i class="fal text-muted fa-sparkle"></i>
<!-- icon end -->
</div>
<!-- content end -->
</div>
<!-- header end -->
<!-- content start -->
<div class="d-flex">
<!-- line start -->
<div class="bg-secondary faded pr-1 mr-2"></div>
<!-- line end -->
<!-- text start -->
<div class="my-1 small">
<p>
This expands to fit the text, but you shouldn't have to worry about typing too much. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
</div>
<!-- text end -->
</div>
<!-- content end -->
<!-- overview section end -->
<!-- basics section start -->
<!-- header start -->
<div style="margin-top: 20px" id="basics">
<!-- background start -->
<div class="bg-secondary flex-fill" style="border-radius: 5px; opacity: 0.2; height: 10px"></div>
<!-- content start-->
<div class="justify-content-between align-items-center" style="position: relative; z-index: 1; font-size: 20px; margin-top: -25px">
<!-- text -->
<span>
Basic Info
</span>
<!-- icon start -->
<i class="fal text-muted fa-feather"></i>
<!-- icon end -->
</div>
<!-- content end -->
</div>
<!-- header end -->
<!-- content box start -->
<div class="card bg-transparent p-2">
<div class="d-flex">
<!-- column 1 -->
<!-- make sure the first item is mt-1, and everything below it is mt-3 -->
<div class="w-50 mr-2">
<!-- name start -->
<div class="mt-1">
<!-- background -->
<div class="bg-secondary flex-fill" style="border-radius: 2px; opacity: 0.2; height: 10px"></div>
<!-- content start -->
<div class="justify-content-between align-items-center px-1" style="margin-top: -20px">
<!-- icon -->
<i class="fal text-muted fa-signature"></i>
<!-- text -->
<i>
Name
</i>
</div>
<!-- content end -->
</div>
<!-- name end -->
<!-- age start -->
<div class="mt-3">
<!-- background -->
<div class="bg-secondary flex-fill" style="border-radius: 2px; opacity: 0.2; height: 10px"></div>
<!-- content start -->
<div class="justify-content-between align-items-center px-1" style="margin-top: -20px">
<!-- icon -->
<i class="fal text-muted fa-tally"></i>
<!-- text -->
<i>
Age
</i>
</div>
<!-- content end -->
</div>
<!-- age end -->
<!-- birthday start -->
<div class="mt-3">
<!-- background -->
<div class="bg-secondary flex-fill" style="border-radius: 2px; opacity: 0.2; height: 10px"></div>
<!-- content start -->
<div class="justify-content-between align-items-center px-1" style="margin-top: -20px">
<!-- icon -->
<i class="fal text-muted fa-cake"></i>
<!-- text -->
<i>
Birthday
</i>
</div>
<!-- content end -->
</div>
<!-- birthday end -->
</div>
<!-- column 1 end -->
<!-- column 2 -->
<!-- make sure the first item is mt-1, and everything below it is mt-3 -->
<div class="w-50">
<!-- name start -->
<div class="mt-1">
<!-- background -->
<div class="bg-secondary flex-fill" style="border-radius: 2px; opacity: 0.2; height: 10px"></div>
<!-- content start -->
<div class="justify-content-between align-items-center px-1" style="margin-top: -20px">
<!-- icon -->
<i class="fal text-muted fa-head-side-brain"></i>
<!-- text -->
<i>
MBTI
</i>
</div>
<!-- content end -->
</div>
<!-- name end -->
<!-- age start -->
<div class="mt-3">
<!-- background -->
<div class="bg-secondary flex-fill" style="border-radius: 2px; opacity: 0.2; height: 10px"></div>
<!-- content start -->
<div class="justify-content-between align-items-center px-1" style="margin-top: -20px">
<!-- icon -->
<i class="fal text-muted fa-comment"></i>
<!-- text -->
<i>
Pro/Nouns
</i>
</div>
<!-- content end -->
</div>
<!-- age end -->
<!-- birthday start -->
<div class="mt-3">
<!-- background -->
<div class="bg-secondary flex-fill" style="border-radius: 2px; opacity: 0.2; height: 10px"></div>
<!-- content start -->
<div class="justify-content-between align-items-center px-1" style="margin-top: -20px">
<!-- icon -->
<i class="fal text-muted fa-handshake"></i>
<!-- text -->
<i>
Obtained Via
</i>
</div>
<!-- content end -->
</div>
<!-- birthday end -->
</div>
<!-- column 2 end -->
</div>
</div>
<!-- content box end -->
<!-- basic info section end -->
<!-- personality section start -->
<!-- header start -->
<div style="margin-top: 20px" id="personality">
<div class="bg-secondary flex-fill" style="border-radius: 5px; opacity: 0.2; height: 10px"></div>
<div class="justify-content-between align-items-center" style="position: relative; z-index: 1; font-size: 20px; margin-top: -25px">
<!-- text -->
<span>
Personality
</span>
<!-- icon -->
<i class="fal text-muted fa-paw"></i>
</div>
</div>
<!-- header end -->
<!-- quote start -->
<div class="d-flex text-center mt-1 faded mx-auto justify-content-center" style="width: 90%">
<div class="d-flex align-items-start">
<!-- icon -->
<i class="fa fa-quote-left faded fa-xs my-1"></i>
<span class="small mx-1">
<i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</i>
</span>
<!-- icon -->
<i class="fa fa-quote-right faded fa-xs mt-1"></i>
</div>
</div>
<!-- quote end -->
<!-- content box -->
<div class="card bg-transparent px-2 py-1 mt-2">
<div class="d-flex">
<!-- column 1 start -->
<!-- make sure that the last scale does not have a class="mb-2" -->
<div class="w-50 mr-2">
<!-- scale start -->
<!-- text -->
<div class="justify-content-around">
<span class="small">
introverted
</span>
<span class="small">
extroverted
</span>
</div>
<!-- progress bar -->
<div class="mb-2">
<div class="progress flex-fill mb-1 bg-secondary" style="border-radius: 2px; height: 5px; opacity: 0.2"></div>
<div class="progress flex-fill mb-1 bg-transparent" style="border-radius: 2px; height: 5px; margin-top: -9px">
<div class="progress-bar bg-secondary"
style="/* adjust the width percentage accordingly */;
width:
50%
; opacity: 0.5"></div>
</div>
</div>
<!-- scale end -->
<!-- scale start -->
<!-- text -->
<div class="justify-content-around">
<span class="small">
reckless
</span>
<span class="small">
cautious
</span>
</div>
<!-- progress bar -->
<div class="mb-2">
<div class="progress flex-fill mb-1 bg-secondary" style="border-radius: 2px; height: 5px; opacity: 0.2"></div>
<div class="progress flex-fill mb-1 bg-transparent" style="border-radius: 2px; height: 5px; margin-top: -9px">
<div class="progress-bar bg-secondary"
style="/* adjust the width percentage accordingly */;
width:
50%
; opacity: 0.5"></div>
</div>
</div>
<!-- scale end -->
<!-- scale start -->
<!-- text -->
<div class="justify-content-around">
<span class="small">
lazy
</span>
<span class="small">
hardworking
</span>
</div>
<!-- progress bar -->
<div>
<div class="progress flex-fill mb-1 bg-secondary" style="border-radius: 2px; height: 5px; opacity: 0.2"></div>
<div class="progress flex-fill mb-1 bg-transparent" style="border-radius: 2px; height: 5px; margin-top: -9px">
<div class="progress-bar bg-secondary"
style="/* adjust the width percentage accordingly */;
width:
50%
; opacity: 0.5"></div>
</div>
</div>
<!-- scale end -->
</div>
<!-- column 1 end -->
<!-- column 2 start -->
<!-- make sure that the last scale does not have a class="mb-2" -->
<div class="w-50">
<!-- scale start -->
<!-- text -->
<div class="justify-content-around">
<span class="small">
trusting
</span>
<span class="small">
paranoid
</span>
</div>
<!-- progress bar -->
<div class="mb-2">
<div class="progress flex-fill mb-1 bg-secondary" style="border-radius: 2px; height: 5px; opacity: 0.2"></div>
<div class="progress flex-fill mb-1 bg-transparent" style="border-radius: 2px; height: 5px; margin-top: -9px">
<div class="progress-bar bg-secondary"
style="/* adjust the width percentage accordingly */;
width:
50%
; opacity: 0.5"></div>
</div>
</div>
<!-- scale end -->
<!-- scale start -->
<!-- text -->
<div class="justify-content-around">
<span class="small">
polite
</span>
<span class="small">
blunt
</span>
</div>
<!-- progress bar -->
<div class="mb-2">
<div class="progress flex-fill mb-1 bg-secondary" style="border-radius: 2px; height: 5px; opacity: 0.2"></div>
<div class="progress flex-fill mb-1 bg-transparent" style="border-radius: 2px; height: 5px; margin-top: -9px">
<div class="progress-bar bg-secondary"
style="/* adjust the width percentage accordingly */;
width:
50%
; opacity: 0.5"></div>
</div>
</div>
<!-- scale end -->
<!-- scale start -->
<div class="justify-content-around">
<span class="small">
selfish
</span>
<span class="small">
alturistic
</span>
</div>
<!-- progress bar -->
<div>
<div class="progress flex-fill mb-1 bg-secondary" style="border-radius: 2px; height: 5px; opacity: 0.2"></div>
<div class="progress flex-fill mb-1 bg-transparent" style="border-radius: 2px; height: 5px; margin-top: -9px">
<div class="progress-bar bg-secondary"
style="/* adjust the width percentage accordingly */;
width:
50%
; opacity: 0.5"></div>
</div>
</div>
<!-- scale end -->
</div>
<!-- column 2 end -->
</div>
</div>
<!-- content box end -->
<!-- text content start -->
<div class="d-flex mt-2">
<div class="bg-secondary faded pr-1 mr-2"></div>
<div class="my-1 small">
<p>
This expands to fit the text, but you shouldn't have to worry about typing too much. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
</div>
</div>
<!-- text content end -->
<!-- personality section end -->
<!-- story section start -->
<!-- header start -->
<div style="margin-top: 20px" id="story">
<div class="bg-secondary flex-fill" style="border-radius: 5px; opacity: 0.2; height: 10px"></div>
<div class="justify-content-between align-items-center" style="position: relative; z-index: 1; font-size: 20px; margin-top: -25px">
<!-- text -->
<span>
Story
</span>
<!-- icon -->
<i class="fal text-muted fa-book"></i>
</div>
</div>
<!-- header end -->
<!-- accordion start -->
<!-- make sure that the last chapter does not have a class="mb-1"
when adding more chapters, make sure the data-target content in the header and id in the content match eachother, and that they're different for every chapter -->
<div class="accordion" id="accordion">
<!-- chapter start -->
<div class="mb-1">
<!-- header -->
<a data-toggle="collapse" data-target="#chapter1">
<div class="bg-secondary text-white px-2 py-1" style="border-radius: 4px">
<div class="d-flex align-items-center">
Chapter 1
<div class="flex-fill my-0 mx-2" style="border: solid var(--outline); border-width: 1px 0 0 0; opacity: 0.2"></div>
<i class="fal fa-sparkle mr-1"></i>
</div>
</div>
</a>
<!-- content -->
<div class="collapse small" id="chapter1" data-parent="#accordion">
<div class="card px-2 py-1 mt-1">
<p>
This expands to fit the text, but you shouldn't have to worry about typing too much. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
</div>
</div>
</div>
<!-- chapter end -->
<!-- chapter start -->
<div class="mb-1">
<!-- header -->
<a data-toggle="collapse" data-target="#chapter2">
<div class="bg-secondary text-white px-2 py-1" style="border-radius: 4px">
<div class="d-flex align-items-center">
Chapter 2
<div class="flex-fill my-0 mx-2" style="border: solid var(--outline); border-width: 1px 0 0 0; opacity: 0.2"></div>
<i class="fal fa-sparkle mr-1"></i>
</div>
</div>
</a>
<!-- content -->
<div class="collapse small" id="chapter2" data-parent="#accordion">
<div class="card px-2 py-1 mt-1">
<p>
This expands to fit the text, but you shouldn't have to worry about typing too much. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
</div>
</div>
</div>
<!-- chapter end -->
<!-- chapter start -->
<div class="mb-1">
<!-- header -->
<a data-toggle="collapse" data-target="#chapter3">
<div class="bg-secondary text-white px-2 py-1" style="border-radius: 4px">
<div class="d-flex align-items-center">
Chapter 3
<div class="flex-fill my-0 mx-2" style="border: solid var(--outline); border-width: 1px 0 0 0; opacity: 0.2"></div>
<i class="fal fa-sparkle mr-1"></i>
</div>
</div>
</a>
<!-- content -->
<div class="collapse small" id="chapter3" data-parent="#accordion">
<div class="card px-2 py-1 mt-1">
<p>
This expands to fit the text, but you shouldn't have to worry about typing too much. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
</div>
</div>
</div>
<!-- chapter end -->
<!-- chapter start -->
<div class="mb-1">
<!-- header -->
<a data-toggle="collapse" data-target="#chapter4">
<div class="bg-secondary text-white px-2 py-1" style="border-radius: 4px">
<div class="d-flex align-items-center">
Chapter 4
<div class="flex-fill my-0 mx-2" style="border: solid var(--outline); border-width: 1px 0 0 0; opacity: 0.2"></div>
<i class="fal fa-sparkle mr-1"></i>
</div>
</div>
</a>
<!-- content -->
<div class="collapse small" id="chapter4" data-parent="#accordion">
<div class="card px-2 py-1 mt-1">
<p>
This expands to fit the text, but you shouldn't have to worry about typing too much. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
</div>
</div>
</div>
<!-- chapter end -->
<!-- chapter start -->
<div>
<!-- header -->
<a data-toggle="collapse" data-target="#chapter5">
<div class="bg-secondary text-white px-2 py-1" style="border-radius: 4px">
<div class="d-flex align-items-center">
Chapter 5
<div class="flex-fill my-0 mx-2" style="border: solid var(--outline); border-width: 1px 0 0 0; opacity: 0.2"></div>
<i class="fal fa-sparkle mr-1"></i>
</div>
</div>
</a>
<!-- content -->
<div class="collapse small" id="chapter5" data-parent="#accordion">
<div class="card px-2 py-1 mt-1">
<p>
This expands to fit the text, but you shouldn't have to worry about typing too much. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
</div>
</div>
</div>
<!-- chapter end -->
</div>
<!-- story section end -->
</div>
<!-- scrollbox end -->
<!-- music player start -->
<div class="d-flex" style="position: relative">
<!-- icon -->
<div class="align-items-center faded justify-content-center" style="width: 5%">
<i class="fa text-muted fa-compact-disc fa-spin" style="font-size: 45px; position: absolute; margin-left: 20px"></i>
</div>
<!-- background image -->
<!-- don't forget the ' ' surrounding the url -->
<div class="small card w-100 p-2"
style="background-image: url(
'IMAGE_URL_HERE'
); background-size:cover; background-position:center; height: 50px; color: var(--text-color); text-shadow: 0px 0px 2px var(--text-shadow), 0px 0px 5px var(--text-shadow)">
<!-- outline -->
<div class="flex-fill bg-transparent text-center p-3" style="border: 1px solid #fff; border-radius: 2px; opacity: 0.25">
</div>
<!-- content -->
<div class="flex-fill bg-transparent text-center p-2" style="margin-top: -34px">
<i>
"song title - artist"
</i>
</div>
</div>
<!-- embed -->
<!-- when changing out the yt embed, change watch?v= to embed/
ex. https://www.youtube.com/watch?v=visRMohDgmU to https://www.youtube.com/embed/visRMohDgmU -->
<div class="d-flex justify-content-center align-items-center" style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; opacity: 0">
<iframe src="
https://www.youtube.com/embed/aQzUaZGDJ80
" style="border: 0; position: absolute; width: 100%; transform: scale(5.2)"></iframe>
</div>
</div>
<!-- music player end -->
</div>
<!-- main profile content end -->
<!-- nagivation buttons start -->
<div class="ml-2">
<div class="align-items-center flex-column">
<div style="width: 35px; font-size: 17px">
<!-- overview start -->
<a class="text-white" href="#overview">
<div class="bg-secondary mt-2 align-items-center justify-content-center" style="height: 35px; border-radius: 4px">
<!-- icon -->
<i class="fal fa-sparkle"></i>
</div>
</a>
<!-- overview end -->
<!-- basics start -->
<a class="text-white" href="#basics">
<div class="bg-secondary mt-2 align-items-center justify-content-center" style="height: 35px; border-radius: 4px">
<!-- icon -->
<i class="fal fa-feather"></i>
</div>
</a>
<!-- basics end -->
<!-- personality start -->
<a class="text-white" href="#personality">
<div class="bg-secondary mt-2 align-items-center justify-content-center" style="height: 35px; border-radius: 4px">
<!-- icon -->
<i class="fal fa-paw"></i>
</div>
</a>
<!-- personality end -->
<!-- story start -->
<a class="text-white" href="#story">
<div class="bg-secondary mt-2 align-items-center justify-content-center" style="height: 35px; border-radius: 4px">
<!-- icon -->
<i class="fal fa-book"></i>
</div>
</a>
<!-- story end -->
<!-- credit start, DO NOT DELETE -->
<a class="text-white tooltipster" title="code by foolfttun" href="https://toyhou.se/foolfttun">
<div class="bg-secondary mt-2 align-items-center justify-content-center" style="height: 35px; border-radius: 4px">
<!-- icon -->
<i class="far fa-code fa-xs"></i>
</div>
</a>
<!-- credit end -->
</div>
</div>
<!-- line -->
<div class="bg-transparent card w-50 rounded-0" style="border-width: 0px 1px 0px 0px; margin-top: -195px; position: relative; z-index: -1; height: 76%"></div>
<!-- icons -->
<div class="flex-column align-items-center mt-1" style="opacity: 0.2; font-size: 25px">
<i class="fat fa-sparkle"></i>
<i class="fat fa-sparkle my-1"></i>
<i class="fat fa-sparkle"></i>
</div>
</div>
<!-- nagivation buttons end -->
</div>
<!-- first profile block end -->
<!-- moodboard start -->
<div style="position: relative" class="justify-content-center align-items-center">
<!-- pagedoll start -->
<a href="
ARTIST_URL_HERE
" style="position: absolute; z-index: 1; width: 250px; filter: drop-shadow(0px 0px 1px #000)" class="tooltipster" title="
art by ARTIST_NAME
">
<img src="
IMAGE_URL_HERE
">
</a>
<!-- pagedoll end -->
<!-- images -->
<!-- don't forget the ' ' surrounding the url -->
<div class="w-100 d-flex mt-2">
<!-- column 1 -->
<div class="flex-fill mr-1">
<!-- image -->
<div class="card mb-1" style="background-image: url(
'IMAGE_URL_HERE'
); background-size:cover; background-position:center; height: 100px"></div>
<!-- image -->
<div class="card" style="background-image: url(
'IMAGE_URL_HERE'
); background-size:cover; background-position:center; height: 100px"></div>
</div>
<!-- column 2 -->
<div class="flex-fill">
<!-- image -->
<div class="card mb-1" style="background-image: url(
'IMAGE_URL_HERE'
); background-size:cover; background-position:center; height: 100px"></div>
<!-- image -->
<div class="card" style="background-image: url(
'IMAGE_URL_HERE'
); background-size:cover; background-position:center; height: 100px"></div>
</div>
</div>
</div>
<!-- moodboard end -->
<!-- second profile block start -->
<div class="d-flex mt-2">
<!-- tab buttons start -->
<div class="mr-2">
<ul style="width: 35px; font-size: 17px" class="list-unstyled nav flex-column">
<!-- trivia start -->
<li class="nav-item">
<a data-toggle="tab" class="text-white bg-secondary mt-2 align-items-center justify-content-center" style="height: 35px; border-radius: 4px" href="#trivia">
<!-- icon -->
<i class="fal fa-lightbulb"></i>
</a>
</li>
<!-- trivia end -->
<!-- relaionships start -->
<li class="nav-item">
<a data-toggle="tab" class="text-white bg-secondary mt-2 align-items-center justify-content-center" style="height: 35px; border-radius: 4px" href="#relationships">
<!-- icon -->
<i class="fal fa-heart-pulse"></i>
</a>
</li>
<!-- relationships end -->
</ul>
<!-- line -->
<div class="bg-transparent card w-50 rounded-0" style="border-width: 0px 1px 0px 0px; margin-top: -125px; position: relative; z-index: -1; height: 81%"></div>
<!-- icons -->
<div class="flex-column align-items-center mt-1" style="opacity: 0.2; font-size: 25px">
<i class="fat fa-sparkle"></i>
<i class="fat fa-sparkle my-1"></i>
<i class="fat fa-sparkle" ></i>
</div>
</div>
<!-- tab buttons end -->
<!-- content start -->
<div class="tab-content w-100" style="max-height: 250px; overflow: auto">
<!-- trivia start -->
<div class="tab-pane fade show active" id="trivia">
<!-- header start -->
<div style="margin-top: 12px">
<div class="bg-secondary flex-fill" style="border-radius: 5px; opacity: 0.2; height: 10px"></div>
<div class="justify-content-between align-items-center" style="position: relative; z-index: 1; font-size: 20px; margin-top: -25px">
<!-- text -->
<span>
Trivia
</span>
<!-- icon -->
<i class="fal text-muted fa-lightbulb"></i>
</div>
</div>
<!-- header end -->
<!-- quote start -->
<div class="d-flex text-center mt-1 faded mx-auto justify-content-center" style="width: 90%">
<div class="d-flex align-items-start">
<!-- icon -->
<i class="fa fa-quote-left faded fa-xs my-1"></i>
<!-- text -->
<span class="small mx-1">
<i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</i>
</span>
<!-- icon -->
<i class="fa fa-quote-right faded fa-xs mt-1"></i>
</div>
</div>
<!-- quote end -->
<!-- preferences start -->
<div class="d-flex mt-2">
<!-- likes start -->
<div class="card px-2 py-1 w-50 mr-1">
<i>
<!-- icon -->
<i class="fal fa-heart text-muted"></i>
Likes
</i>
<!-- content -->
<!-- add more points by adding more <li> tags-->
<ul class="mb-0 small" style="margin-left: -20px">
<li>
Content
</li>
<li>
Content
</li>
<li>
Content
</li>
<li>
Content
</li>
</ul>
</div>
<!-- likes end -->
<!-- dislikes start -->
<div class="card px-2 py-1 w-50">
<i>
<!-- icon -->
<i class="fal fa-heart-crack text-muted"></i>
Dislikes
</i>
<!-- content -->
<!-- add more points by adding more <li> tags-->
<ul class="mb-0 small" style="margin-left: -20px">
<li>
Content
</li>
<li>
Content
</li>
<li>
Content
</li>
<li>
Content
</li>
</ul>
</div>
<!-- dislikes end -->
</div>
<!-- preferences end -->
<!-- extra info -->
<div class="d-flex mt-2">
<!-- line -->
<div class="bg-secondary faded pr-1 mr-2"></div>
<!-- text -->
<div class="my-1 small">
<p>
This expands to fit the text, but you shouldn't have to worry about typing too much. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
</div>
</div>
<!-- extra info end -->
</div>
<!-- trivia end -->
<!-- relationships start -->
<div class="tab-pane fade" id="relationships">
<!-- header start -->
<div style="margin-top: 12px">
<div class="bg-secondary flex-fill" style="border-radius: 5px; opacity: 0.2; height: 10px"></div>
<div class="justify-content-between align-items-center" style="position: relative; z-index: 1; font-size: 20px; margin-top: -25px">
<!-- text -->
<span>
Relationships
</span>
<!-- icon -->
<i class="fal text-muted fa-heart-pulse"></i>
</div>
</div>
<!-- header end -->
<!-- relationship start -->
<div class="d-flex mb-1" style="height: 150px">
<!-- image goes here if you want it on the left -->
<!-- content start -->
<div class="flex-fill">
<div class="d-flex align-items-center">
<div class="align-items-end">
<!-- name -->
<a href="URL_HERE" class="text-body">
Name
</a>
<!-- dot -->
<i class="fa faded fa-circle mx-1" style="font-size: 2px; margin-bottom: 5px"></i>
<!-- relation -->
<i class="faded small" style="margin-bottom: 1px">
relation
</i>
</div>
<!-- line -->
<hr class="my-0 mx-2 flex-fill">
<!-- affection level -->
<!-- change fa to fal if you want it empty, fal to fa if you want it filled -->
<i class="fa fa-sparkle"></i>
<i class="fa fa-sparkle mx-1"></i>
<i class="fal fa-sparkle"></i>
<i class="fal fa-sparkle ml-1"></i>
</div>
<div class="d-flex">
<!-- line -->
<div class="bg-secondary faded pr-1 mr-2"></div>
<!-- text -->
<div class="small" style="max-height: 128px; overflow: auto">
<p>
This scrolls, so type as much as you'd like here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
</div>
</div>
</div>
<!-- content end -->
<!-- image start -->
<!-- move the code between "image start" and "image end" right in front of the "content" if you want the image to be on the left
and change ml-2 to mr-2 -->
<div class="card ml-2" style="background-image: url(
'IMAGE_URL_HERE'
); background-size:cover; background-position: center;min-width: 60px"></div>
<!-- image end -->
</div>
<!-- relationship end -->
<!-- relationship start -->
<div class="d-flex mb-1" style="height: 150px">
<!-- image start -->
<!-- move the code between "image start" and "image end" right after "content" if you want the image to be on the left
and change mr-2 to ml-2 -->
<div class="card mr-2" style="background-image: url(
'IMAGE_URL_HERE'
); background-size:cover; background-position: center;min-width: 60px"></div>
<!-- image end -->
<!-- content start -->
<div class="flex-fill">
<div class="d-flex align-items-center">
<div class="align-items-end">
<!-- name -->
<a href="URL_HERE" class="text-body">
Name
</a>
<!-- dot -->
<i class="fa faded fa-circle mx-1" style="font-size: 2px; margin-bottom: 5px"></i>
<!-- relation -->
<i class="faded small" style="margin-bottom: 1px">
relation
</i>
</div>
<!-- line -->
<hr class="my-0 mx-2 flex-fill">
<!-- affection level -->
<!-- change fa to fal if you want it empty, fal to fa if you want it filled -->
<i class="fa fa-sparkle"></i>
<i class="fa fa-sparkle mx-1"></i>
<i class="fal fa-sparkle"></i>
<i class="fal fa-sparkle ml-1"></i>
</div>
<div class="d-flex">
<!-- line -->
<div class="bg-secondary faded pr-1 mr-2"></div>
<!-- text -->
<div class="small" style="max-height: 128px; overflow: auto">
<p>
This scrolls, so type as much as you'd like here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
</div>
</div>
</div>
<!-- content end -->
<!-- image goes here if you want it on the right -->
</div>
<!-- relationship end -->
</div>
<!-- relationships end -->
</div>
<!-- content end -->
</div>
<!-- second profile block end -->
</div>
<!-- code end -->
</div>
<!-- variables end-->