syren's Comments

tyt0alb4

funky little deer guy omg hes just a baby

socks-cassette

just a little guy!!! he would never try to kill you what do you mean!!

moonphazed_

I literally love his lore sm ong,… the detail where he got his sickness because of what phasmo did to the forest is just OMSHEBSND ITS SO KEWL HES AWESOM

socks-cassette

TYSM????!!!!! im super glad you like him!! what a horrendous mf... we love syren in this household

moonphazed_

YES WE DO ALL LOVE HIM!!!!!!!!!!!!!!! THE GUY!!!!!(except for erysich LOLLL)

moonphazed_

OMGGGG YGEDUHWJN THEIR LORE IS SO COOL!!!!!???@? IM GOING INSANE RN HES AWESOME A@AA

socks-cassette

WAHH IM GLAD tysm!!

ToastySalmons_

Bro hates lime 😂🙏🙏🙏 ( my old username reference)

socks-cassette

HELPP i didn't even realize that until now (lime usually gets rid of fungi)

ToastySalmons_

ALSO are you able to copy the profile entire code of syren (with spoiler so it doesnt take huge space) here so i can figure out the problem of the font icons not showing 😁😁

socks-cassette

OH DEFINITELY (ive guessed that it must be something to do with the font icons being duotone (i think??) but id absolutely appreciate help with that)

<!----------------------------------------------------------

KEIJI [F2U]

COLOURS:

- Orange: #925c38

- Light Green: #7a7660

- Green: #425347

- Pastel Brown: #BCB4AF

- Lightest Brown: #594639

- Medium Brown: #352A22

- Darkest Brown: #231C16

- Black: #000

- White: #fff

- Off-white: #F1F0EF

- Light Grey: #D8D8D7

RGBA COLOURS:

- Green: 66,83,71,0.2

------------------------------------------------------------>

<div class="card p-0 rounded-0 border-0" style="font-size:13px;

background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTC3jV7OKlhcp8ngikZReOWjsrK3ezmQB67kQ&usqp=CAU);

background-position: bottom;

background-size:cover;">

<div class="card h-100 rounded-0 border-0" style="

background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/characters/18313673?1702169266);

background-position:center;

background-size:cover;">

<br>

</div>

<p style="letter-spacing:1px; font-size:11px;"><em>"take my brain, or what remains, throw it all away cause i've grown tired of this body."</em></p>

</div>

<br>

</div>

</div>

<p>syren</p>

</div>

<br>

</div>

</div>

<p>1 thou. years</p>

</div>

<br>

</div>

</div>

<p>october 7</p>

</div>

<br>

</div>

</div>

</div>

<br>

</div>

</div>

</div>

<br>

</div>

</div>

<p>aroace</p>

</div>

<br>

</div>

</div>

<p>deerfox</p>

</div>

<br>

</div>

</div>

<p>nature oriented</p>

</div>

<br>

</div>

<br>

</div>

<p>alive</p>

</div>

<br>

</div>

<p>syren is important for controlling the growth of mushrooms and decay in delrusia. they are also called a "zombie deer" for quite a couple of reasons.  hes usually seen wandering around the areas of the dead forest where fungi are common. many fauns and satyrs advise to stay away from it since it's been said to carry some kind of sickness thats very similar to rabies and CWD, hell, they even have the ability to curse others with a similar disease. though on a rare occasion the curse may cause you to have mushrooms growing on your body. syren might even see you as a potential prey or threat if you encounter him.</p>

<p>

<br>

</p>while he is a dangerous deerfox, it's very frail and ill and also decomposes the dead, especially where he lives. he HATES having a lack of self-control, being sick, and his own body.

<p>

<br>

</p>

</div>

<p class="font-weight-bold">PERSONALITY</p>

</div>

<br>

</div>

<p class="font-weight-bold text-center">LIKES</p>

</div>

<li><span class="fa-li"><i class="fal fa-heart"></i></span>dark areas</li>

<li><span class="fa-li"><i class="fal fa-heart"></i></span>damp & moist conditions</li>

<li><span class="fa-li"><i class="fal fa-heart"></i></span>dead plants & trees</li>

<li><span class="fa-li"><i class="fal fa-heart"></i></span>rotten food (carrions)</li>

<li><span class="fa-li"><i class="fal fa-heart"></i></span>the dead forest</li>

</ul>

</div>

<br>

</div>

<p class="font-weight-bold text-center">DILIKES</p>

</div>

<li><span class="fa-li"><i class="fal fa-heart-broken"></i></span>being sickly</li>

</ul>

</div>

<br>

</div>

<p class="font-weight-bold">STATISTICS</p>

</div>

<div class="justify-content-between"><span>  INTELLIGENCE </span>

<br>

</div>

<div class="justify-content-between"><span>  STAMINA </span>

<br>

</div>

<div class="justify-content-between"><span>  STRENGTH </span>

<br>

</div>

<div class="justify-content-between"><span>  ANXIETY </span>

<br>

</div>

<div class="justify-content-between"><span>  AGGRESSION </span>

<br>

</div>

<div class="justify-content-between"><span>  FORGETFULLNESS </span>

<br>

</div>

<br>

</div>

<p>Syren used to be a healthy deerfox when he was a fawn. The CWD / rabies-like disease was only evident when the forest he lived in was killed (the dead forest now). It feeds on the dead and rotting organisms of the dead forest to keep his mushrooms and (somewhat) himself healthy, but sometimes it'll eat a prey he killed when it's stale. One day Syren had a run-in with Erysich, who used to be the deerfox of plant growth, and Willow, who's the deerfox of life. Something seemed off.. he suddenly bit Erysich and cursed her to eventually be the deerfox of famine while Willow ran away in fear.</p>

</div>

<p class="font-weight-bold">BACKGROUND</p>

</div>

<br>

</div>

<p class="font-weight-bold text-center">DESIGN NOTES</p>

</div>

<p>- the mushrooms around his body are NOT optional, you may change some of their species if you'd like though!</p>

<p>- almost any type of mushroom grows on his body (aslong as it exists irl), but bright or glowing mushrooms are extremely rare, so avoid drawing that</p>

</div>

<br>

</div>

<p class="font-weight-bold text-center">ADDITIONAL NOTES</p>

</div>

<p>- hes a scavenger idk</p>

</div>

<br>

</div>

</div>

<p>How does your character manage relationships in general? Are they all the same, are there exceptions? Exclusions?</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ullamcorper justo ut diam cursus, faucibus tempor tortor dignissim. Pellentesque placerat, est non porta tempus, lacus ipsum interdum massa, vel ultricies nisi purus pellentesque leo. Nulla vitae nulla eu magna convallis dapibus sit amet in ante. Morbi in elit eu sem accumsan laoreet vitae in ex.</p>

</div>

<p class="font-weight-bold">RELATIONSHIPS</p>

</div>

<br>

</div>

<div class="card rounded-0 border-0" style="height:150px;

background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/characters/23991516?1698010673);

background-position:center;

background-size:cover;">

<br>

</div>

<div class="card rounded-0 border-0 p-2 text-right" style="background-color:#925c38;"><a class="text-uppercase" href="https://toyhou.se/23991516.erysich" style="color:#ffffff;">Erysich</a></div>

</div>

<br>

</div>

<div class="card rounded-0 border-0" style="height:150px;

background-image:url(https://media.istockphoto.com/vectors/thumbnail-image-vector-graphic-vector-id1147544807?k=20&m=1147544807&s=612x612&w=0&h=pBhz1dkwsCMq37Udtp9sfxbjaMl27JUapoyYpQm0anc=);

background-position:center;

background-size:cover;">

<br>

</div>

<div class="card rounded-0 border-0 p-2 text-right" style="background-color:#925c38;"><a class="text-uppercase" href="/" style="color:#ffffff;">CHARACTER NAME</a></div>

</div>

<br>

</div>

<div class="card rounded-0 border-0" style="height:150px;

background-image:url(https://media.istockphoto.com/vectors/thumbnail-image-vector-graphic-vector-id1147544807?k=20&m=1147544807&s=612x612&w=0&h=pBhz1dkwsCMq37Udtp9sfxbjaMl27JUapoyYpQm0anc=);

background-position:center;

background-size:cover;">

<br>

</div>

<div class="card rounded-0 border-0 p-2 text-right" style="background-color:#925c38;"><a class="text-uppercase" href="/" style="color:#ffffff;">CHARACTER NAME</a></div>

</div>

<br>

</div>

</div>

<p>Deerfox of Mushrooms/Decay</p>

</div>

<p>Deerfox of Mushrooms/Decay</p>

</div>

<p>syren</p>

</div>

<p>syren</p>

</div>

<br>

</div>

</li>

</li>

</li>

<a class="btn btn-outline-secondary rounded-0 border-0 w-100 show" d

ata-toggle="tab" href="#rel" style="font-size:15px;"></a>

</li>

</li>

</ul>

</div>

<br>

</div>

ToastySalmons_

no it wasn't duotone problem it was your code tweaking and decided to eat the font icon code and that's why it doesn't appear

i fixed the entire code for you instead

<div class="container p-0" style="max-width:700px; font-family:monospace;">

<div class="col-12 p-0 mt-5">



<div class="card p-3 rounded-0 border-0" style="background-color:#000;">



<span><i class="fas fa-signs-post fa-flip fa-3x" style="position:absolute; top:-40px; left:20px; color:#000; animation-duration: 5s;"></i><i class="fas fa-trees fa-flip-horizontal fa-3x" style="position:absolute; top:-31px; right:90px; color:#000;"></i><i class="fas fa-trees fa-4x" style="position:absolute; top:-40px; right:30px; color:#000;"></i></span>



<div class="card p-0 rounded-0 border-0" style="font-size:13px;

background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTC3jV7OKlhcp8ngikZReOWjsrK3ezmQB67kQ&usqp=CAU);

background-position: bottom;

background-size:cover;">

<div class="card p-4 rounded-0 border-0" style="background-color:rgba(66,83,71, 0.2);">



<div class="row no-gutters">



<div class="col-3 p-0">

<div class="card p-2 rounded-0 border-0 h-100" style="background-color:#594639;">

<div class="card h-100 rounded-0 border-0" style="

background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/characters/18313673?1702169266);

background-position:center;

background-size:cover;">

<br>

</div>

</div>

</div>



<div class="col-9 p-0">

<div class="card p-4 text-center h-100 border-0 rounded-0 justify-content-center" style="min-height:100px; background-color:#352A22; color:#fff;">

<p style="letter-spacing:1px; font-size:11px;"><em>"take my brain, or what remains, throw it all away cause i've grown tired of this body."</em></p>

</div>



<div class="card rounded-0 border-0" style="position:absolute; background-color:#594639; left:-1px; top:37px; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); height:30px; width:20px;">

<br>

</div>

</div>

</div>



<div class="col-12 p-0">

<div class="card rounded-0 border-0 p-3" style="background-color:#231C16;">

<div class="tab-content">



<div class="tab-pane fade active show" id="abt">

<div class="card rounded-0 border-0 mt-3 p-2" style="background-color:#BCB4AF; height:250px; overflow:auto;">





<div class="row no-gutters mt-2">



<div class="col-1 p-0">

<div class="card p-1 text-center justify-content-center h-100 rounded-0 border-0" style="background-color:#7a7660; color:#fff;"><i class="fas fa-signature"></i></div>

</div>

<div class="col-11 p-0">

<div class="card p-2 text-right justify-content-center rounded-0 border-0 text-uppercase" style="height:30px; background-color:#F1F0EF; color:#000;">

<p>syren</p>

</div>



<div class="card rounded-0 border-0" style="position:absolute; background-color:#7a7660; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); height:20px; width:10px; top:8px; left:-1px;">

<br>

</div>

</div>

</div>



<div class="row no-gutters">



<div class="col-1 p-0">

<div class="card p-1 text-center justify-content-center h-100 rounded-0 border-0" style="background-color:#7a7660; color:#fff;"><i class="fas fa-calendar-days"></i></div>

</div>

<div class="col-11 p-0">

<div class="card p-2 text-right justify-content-center rounded-0 border-0 text-uppercase" style="height:30px; background-color:#F1F0EF; color:#000;">

<p>1 thou. years</p>

</div>



<div class="card rounded-0 border-0" style="position:absolute; background-color:#7a7660; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); height:20px; width:10px; top:8px; left:-1px;">

<br>

</div>

</div>

</div>



<div class="row no-gutters">



<div class="col-1 p-0">

<div class="card p-1 text-center justify-content-center h-100 rounded-0 border-0" style="background-color:#7a7660; color:#fff;"><i class="fas fa-cake"></i></div>

</div>

<div class="col-11 p-0">

<div class="card p-2 text-right justify-content-center rounded-0 border-0 text-uppercase" style="height:30px; background-color:#F1F0EF; color:#000;">

<p>october 7</p>

</div>



<div class="card rounded-0 border-0" style="position:absolute; background-color:#7a7660; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); height:20px; width:10px; top:8px; left:-1px;">

<br>

</div>

</div>

</div>



<div class="row no-gutters">



<div class="col-1 p-0">

<div class="card p-1 text-center justify-content-center h-100 rounded-0 border-0" style="background-color:#7a7660; color:#fff;"><i class="fas fa-venus-mars"></i></div>

</div>

<div class="col-11 p-0">

<div class="card p-2 text-right justify-content-center rounded-0 border-0 text-uppercase" style="height:30px; background-color:#F1F0EF; color:#000;">

<p>male</p>

</div>



<div class="card rounded-0 border-0" style="position:absolute; background-color:#7a7660; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); height:20px; width:10px; top:8px; left:-1px;">

<br>

</div>

</div>

</div>



<div class="row no-gutters">



<div class="col-1 p-0">

<div class="card p-1 text-center justify-content-center h-100 rounded-0 border-0" style="background-color:#7a7660; color:#fff;"><i class="fas fa-genderless"></i></div>

</div>

<div class="col-11 p-0">

<div class="card p-2 text-right justify-content-center rounded-0 border-0 text-uppercase" style="height:30px; background-color:#F1F0EF; color:#000;">

<p>he/they/it</p>

</div>



<div class="card rounded-0 border-0" style="position:absolute; background-color:#7a7660; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); height:20px; width:10px; top:8px; left:-1px;">

<br>

</div>

</div>

</div>



<div class="row no-gutters">



<div class="col-1 p-0">

<div class="card p-1 text-center justify-content-center h-100 rounded-0 border-0" style="background-color:#7a7660; color:#fff;"><i class="fas fa-heart"></i></div>

</div>

<div class="col-11 p-0">

<div class="card p-2 text-right justify-content-center rounded-0 border-0 text-uppercase" style="height:30px; background-color:#F1F0EF; color:#000;">

<p>aroace</p>

</div>



<div class="card rounded-0 border-0" style="position:absolute; background-color:#7a7660; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); height:20px; width:10px; top:8px; left:-1px;">

<br>

</div>

</div>

</div>



<div class="row no-gutters">



<div class="col-1 p-0">

<div class="card p-1 text-center justify-content-center h-100 rounded-0 border-0" style="background-color:#7a7660; color:#fff;"><i class="fas fa-dna"></i></div>

</div>

<div class="col-11 p-0">

<div class="card p-2 text-right justify-content-center rounded-0 border-0 text-uppercase" style="height:30px; background-color:#F1F0EF; color:#000;">

<p>deerfox</p>

</div>



<div class="card rounded-0 border-0" style="position:absolute; background-color:#7a7660; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); height:20px; width:10px; top:8px; left:-1px;">

<br>

</div>

</div>

</div>



<div class="row no-gutters">



<div class="col-1 p-0">

<div class="card p-1 text-center justify-content-center h-100 rounded-0 border-0" style="background-color:#7a7660; color:#fff;"><i class="fas fa-seedling"></i></div>

</div>

<div class="col-11 p-0">

<div class="card p-2 text-right justify-content-center rounded-0 border-0 text-uppercase" style="height:30px; background-color:#F1F0EF; color:#000;">

<p>nature oriented</p>

</div>



<div class="card rounded-0 border-0" style="position:absolute; background-color:#7a7660; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); height:20px; width:10px; top:8px; left:-1px;">

<br>

</div>

</div>

</div>



<div class="row no-gutters">



<div class="col-1 p-0">

<div class="card p-1 text-center justify-content-center h-100 rounded-0 border-0" style="background-color:#7a7660; color:#fff;">

<br>

</div>

</div>

<div class="col-11 p-0">

<div class="card p-2 text-right justify-content-center rounded-0 border-0 text-uppercase" style="height:30px; background-color:#F1F0EF; color:#000;">

<p>alive</p>

</div>



<div class="card rounded-0 border-0" style="position:absolute; background-color:#7a7660; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); height:20px; width:10px; top:8px; left:-1px;">

<br>

</div>

</div>

</div>

</div>

</div>



<div class="tab-pane fade" id="pers">

<div class="card rounded-0 border-0 mt-3 p-2" style="background-color:#BCB4AF; height:250px; overflow:auto;">



<div class="row no-gutters">



<div class="col-12 p-0">

<div class="card rounded-0 border-0 p-3" style="background-color:#F1F0EF; height:130px; overflow:auto; color:#000;">

<p>syren is important for controlling the growth of mushrooms and decay in delrusia. they are also called a "zombie deer" for quite a couple of reasons. hes usually seen wandering around the areas of the dead forest where fungi are common. many fauns and satyrs advise to stay away from it since it's been said to carry some kind of sickness thats very similar to rabies and CWD, hell, they even have the ability to curse others with a similar disease. though on a rare occasion the curse may cause you to have mushrooms growing on your body. syren might even see you as a potential prey or threat if you encounter him.</p>

<p>

<br>

</p>while he is a dangerous deerfox, it's very frail and ill and also decomposes the dead, especially where he lives. he HATES having a lack of self-control, being sick, and his own body.

<p>

<br>

</p>

</div>

</div>



<div class="col-12 p-0">

<div class="card rounded-0 border-0 text-center p-2" style="background-color:#7a7660; color:#fff;">

<p class="font-weight-bold">PERSONALITY</p>

</div>

</div>



<div class="card rounded-0 border-0" style="position:absolute; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); height:20px; width:30px; left:275px; top:120px; background-color:#7a7660;">

<br>

</div>

</div>



<div class="row no-gutters mt-2">



<div class="col-6 pr-1">



<div class="card rounded-0 border-0 p-2" style="background-color:#7a7660; color:#fff;">

<p class="font-weight-bold text-center">LIKES</p>

</div>



<div class="card rounded-0 border-0 p-2" style="background-color:#F1F0EF; height:120px; overflow:auto; color:#000;">

<ul class="fa-ul" style="font-size:13px;">

<li><span class="fa-li"><i class="fal fa-heart"></i></span>dark areas</li>

<li><span class="fa-li"><i class="fal fa-heart"></i></span>damp & moist conditions</li>

<li><span class="fa-li"><i class="fal fa-heart"></i></span>dead plants & trees</li>

<li><span class="fa-li"><i class="fal fa-heart"></i></span>rotten food (carrions)</li>

<li><span class="fa-li"><i class="fal fa-heart"></i></span>the dead forest</li>

</ul>

</div>



<div class="card rounded-0 border-0" style="position:absolute; top:35px; left:122px; clip-path: polygon(0 0, 50% 100%, 100% 0%); height:20px; width:30px; background-color: #7a7660;">

<br>

</div>

</div>



<div class="col-6 pl-1">



<div class="card rounded-0 border-0 p-2" style="background-color:#7a7660; color:#fff;">

<p class="font-weight-bold text-center">DILIKES</p>

</div>



<div class="card rounded-0 border-0 p-2" style="background-color:#F1F0EF; height:120px; overflow:auto; color:#000;">

<ul class="fa-ul" style="font-size:13px;">

<li><span class="fa-li"><i class="fal fa-heart-broken"></i></span>being sickly</li>

<li><span class="fa-li"><i class="fal fa-heart-broken"></i></span>his own body</li>

<li><span class="fa-li"><i class="fal fa-heart-broken"></i></span>lime</li>

<li><span class="fa-li"><i class="fal fa-heart-broken"></i></span>tba</li>

<li><span class="fa-li"><i class="fal fa-heart-broken"></i></span>tba</li>

<li><span class="fa-li"><i class="fal fa-heart-broken"></i></span>tba</li>

</ul>

</div>



<div class="card rounded-0 border-0" style="position:absolute; top:35px; left:122px; clip-path: polygon(0 0, 50% 100%, 100% 0%); height:20px; width:30px; background-color:#7a7660;">

<br>

</div>

</div>

</div>



<div class="row no-gutters mt-2">



<div class="col-12 p-0">

<div class="card rounded-0 border-0 text-center p-2" style="background-color:#7a7660; color:#fff;">

<p class="font-weight-bold">STATISTICS</p>

</div>

</div>



<div class="col-12 p-0">

<div class="card rounded-0 border-0 p-3" style="background-color:#F1F0EF; color:#000;">

<div class="row no-gutters">

<div class="col-6 pr-1">



<div class="mb-2">

<div class="justify-content-between"><span> INTELLIGENCE </span>

<span class="faded">[30%]</span></div>

<div class="progress rounded-0" style="background-color:#D8D8D7;">

<div class="progress-bar" style="width:30%; height:10px; background-color:#925c38;">

<br>

</div>

</div>

</div>



<div class="mb-2">

<div class="justify-content-between"><span> STAMINA </span>

<span class="faded">[20%]</span></div>

<div class="progress rounded-0" style="background-color:#D8D8D7;">

<div class="progress-bar" style="width:20%; height:10px; background-color:#925c38;">

<br>

</div>

</div>

</div>



<div class="mb-1">

<div class="justify-content-between"><span> STRENGTH </span>

<span class="faded">[20%]</span></div>

<div class="progress rounded-0" style="background-color:#D8D8D7;">

<div class="progress-bar" style="width:20%; height:10px; background-color:#925c38;">

<br>

</div>

</div>

</div>

</div>

<div class="col-6">



<div class="mb-2">

<div class="justify-content-between"><span> ANXIETY </span>

<span class="faded">[70%]</span></div>

<div class="progress rounded-0" style="background-color:#D8D8D7;">

<div class="progress-bar" style="width:70%; height:10px; background-color:#925c38;">

<br>

</div>

</div>

</div>



<div class="mb-2">

<div class="justify-content-between"><span> AGGRESSION </span>

<span class="faded">[80%]</span></div>

<div class="progress rounded-0" style="background-color:#D8D8D7;">

<div class="progress-bar" style="width:80%; height:10px; background-color:#925c38;">

<br>

</div>

</div>

</div>



<div class="mb-1">

<div class="justify-content-between"><span> FORGETFULLNESS </span>

<span class="faded">[50%]</span></div>

<div class="progress rounded-0" style="background-color:#D8D8D7;">

<div class="progress-bar" style="width:50%; height:10px; background-color:#925c38;">

<br>

</div>

</div>

</div>

</div>

</div>

</div>

</div>



<div class="card rounded-0 border-0" style="position:absolute; clip-path: polygon(0 0, 50% 100%, 100% 0%); height:20px; width:30px; left:275px; bottom:-149px; background-color:#7a7660;">

<br>

</div>

</div>

</div>

</div>



<div class="tab-pane fade" id="hist">

<div class="card rounded-0 border-0 mt-3 p-2" style="background-color:#BCB4AF; height:250px; overflow:auto;">



<div class="row no-gutters">



<div class="col-12 p-0">

<div class="card rounded-0 border-0 p-3" style="background-color:#F1F0EF; height:130px; overflow:auto; color:#000;">

<p>Syren used to be a healthy deerfox when he was a fawn. The CWD / rabies-like disease was only evident when the forest he lived in was killed (the dead forest now). It feeds on the dead and rotting organisms of the dead forest to keep his mushrooms and (somewhat) himself healthy, but sometimes it'll eat a prey he killed when it's stale. One day Syren had a run-in with Erysich, who used to be the deerfox of plant growth, and Willow, who's the deerfox of life. Something seemed off.. he suddenly bit Erysich and cursed her to eventually be the deerfox of famine while Willow ran away in fear.</p>

</div>

</div>



<div class="col-12 p-0">

<div class="card rounded-0 border-0 text-center p-2" style="background-color:#7a7660; color:#fff;">

<p class="font-weight-bold">BACKGROUND</p>

</div>

</div>



<div class="card rounded-0 border-0" style="position:absolute; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); height:20px; width:30px; left:275px; top:120px; background-color:#7a7660;">

<br>

</div>

</div>



<div class="row no-gutters mt-2">



<div class="col-6 pr-1">



<div class="card rounded-0 border-0 p-2" style="background-color:#7a7660; color:#fff;">

<p class="font-weight-bold text-center">DESIGN NOTES</p>

</div>



<div class="card rounded-0 border-0 p-2" style="background-color:#F1F0EF; height:120px; overflow:auto; color:#000;">

<p>- the mushrooms around his body are NOT optional, you may change some of their species if you'd like though!</p>

<p>- almost any type of mushroom grows on his body (aslong as it exists irl), but bright or glowing mushrooms are extremely rare, so avoid drawing that</p>

</div>



<div class="card rounded-0 border-0" style="position:absolute; top:35px; left:122px; clip-path: polygon(0 0, 50% 100%, 100% 0%); height:20px; width:30px; background-color:#7a7660;">

<br>

</div>

</div>



<div class="col-6 pl-1">



<div class="card rounded-0 border-0 p-2" style="background-color:#7a7660; color:#fff;">

<p class="font-weight-bold text-center">ADDITIONAL NOTES</p>

</div>



<div class="card rounded-0 border-0 p-2" style="background-color:#F1F0EF; height:120px; overflow:auto; color:#000;">

<p>- hes a scavenger idk</p>

<p>- tba</p>

</div>



<div class="card rounded-0 border-0" style="position:absolute; top:35px; left:122px; clip-path: polygon(0 0, 50% 100%, 100% 0%); height:20px; width:30px; background-color:#7a7660;">

<br>

</div>

</div>



</div>

</div>

</div>



<div class="tab-pane fade" id="rel">

<div class="card rounded-0 border-0 mt-3 p-2" style="background-color:#BCB4AF; height:250px; overflow:auto;">



<div class="row no-gutters">



<div class="col-12 p-0">

<div class="card rounded-0 border-0 p-3" style="background-color:#F1F0EF; height:130px; overflow:auto; color:#000;">

<p>How does your character manage relationships in general? Are they all the same, are there exceptions? Exclusions?</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ullamcorper justo ut diam cursus, faucibus tempor tortor dignissim. Pellentesque placerat, est non porta tempus, lacus ipsum interdum massa, vel ultricies nisi purus pellentesque leo. Nulla vitae nulla eu magna convallis dapibus sit amet in ante. Morbi in elit eu sem accumsan laoreet vitae in ex.</p>

</div>

</div>



<div class="col-12 p-0">

<div class="card rounded-0 border-0 text-center p-2" style="background-color:#7a7660; color:#fff;">

<p class="font-weight-bold">RELATIONSHIPS</p>

</div>

</div>



<div class="card rounded-0 border-0" style="position:absolute; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); height:20px; width:30px; left:275px; top:120px; background-color:#7a7660;">

<br>

</div>

</div>



<div class="row no-gutters mt-2">



<div class="col-md-4 col-5">

<div class="card rounded-0 border-0 p-2" style="background-color:#925c38;">

<div class="card rounded-0 border-0" style="height:150px;

background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/characters/23991516?1698010673);

background-position:center;

background-size:cover;">

<br>

</div>

</div>

</div>



<div class="col-md-8 col-7">



<div class="card rounded-0 border-0 p-2 text-right" style="background-color:#925c38;"><a class="text-uppercase" href="https://toyhou.se/23991516.erysich" style="color:#ffffff;">Erysich</a></div>



<div class="card rounded-0 border-0 p-2" style="height:130px; overflow:auto; background-color:#F1F0EF; color:#000000;">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ullamcorper justo ut diam cursus, faucibus tempor tortor dignissim. Pellentesque placerat, est non porta tempus, lacus ipsum interdum massa, vel ultricies nisi purus pellentesque leo. Nulla vitae nulla eu magna convallis dapibus sit amet in ante. Morbi in elit eu sem accumsan laoreet vitae in ex.</p>

</div>



<div class="card rounded-0 border-0" style="position:absolute; background-color:#925c38; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); height:20px; width:10px; top:8px; left:-1px;">

<br>

</div>

</div>

</div>



<div class="row no-gutters mt-2">



<div class="col-md-4 col-5">

<div class="card rounded-0 border-0 p-2" style="background-color:#925c38;">

<div class="card rounded-0 border-0" style="height:150px;

background-image:url(https://media.istockphoto.com/vectors/thumbnail-image-vector-graphic-vector-id1147544807?k=20&m=1147544807&s=612x612&w=0&h=pBhz1dkwsCMq37Udtp9sfxbjaMl27JUapoyYpQm0anc=);

background-position:center;

background-size:cover;">

<br>

</div>

</div>

</div>



<div class="col-md-8 col-7">



<div class="card rounded-0 border-0 p-2 text-right" style="background-color:#925c38;"><a class="text-uppercase" href="/" style="color:#ffffff;">CHARACTER NAME</a></div>



<div class="card rounded-0 border-0 p-2" style="height:130px; overflow:auto; background-color:#F1F0EF; color:#000;">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ullamcorper justo ut diam cursus, faucibus tempor tortor dignissim. Pellentesque placerat, est non porta tempus, lacus ipsum interdum massa, vel ultricies nisi purus pellentesque leo. Nulla vitae nulla eu magna convallis dapibus sit amet in ante. Morbi in elit eu sem accumsan laoreet vitae in ex.</p>

</div>



<div class="card rounded-0 border-0" style="position:absolute; background-color:#925c38; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); height:20px; width:10px; top:8px; left:-1px;">

<br>

</div>

</div>

</div>



<div class="row no-gutters mt-2">



<div class="col-md-4 col-5">

<div class="card rounded-0 border-0 p-2" style="background-color:#925c38;">

<div class="card rounded-0 border-0" style="height:150px;

background-image:url(https://media.istockphoto.com/vectors/thumbnail-image-vector-graphic-vector-id1147544807?k=20&m=1147544807&s=612x612&w=0&h=pBhz1dkwsCMq37Udtp9sfxbjaMl27JUapoyYpQm0anc=);

background-position:center;

background-size:cover;">

<br>

</div>

</div>

</div>



<div class="col-md-8 col-7">



<div class="card rounded-0 border-0 p-2 text-right" style="background-color:#925c38;"><a class="text-uppercase" href="/" style="color:#ffffff;">CHARACTER NAME</a></div>



<div class="card rounded-0 border-0 p-2" style="height:130px; overflow:auto; background-color:#F1F0EF; color:#000000;">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ullamcorper justo ut diam cursus, faucibus tempor tortor dignissim. Pellentesque placerat, est non porta tempus, lacus ipsum interdum massa, vel ultricies nisi purus pellentesque leo. Nulla vitae nulla eu magna convallis dapibus sit amet in ante. Morbi in elit eu sem accumsan laoreet vitae in ex.</p>

</div>



<div class="card rounded-0 border-0" style="position:absolute; background-color:#925c38; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); height:20px; width:10px; top:8px; left:-1px;">

<br>

</div>

</div>

</div>



</div>

</div>

</div>

</div>



<div class="col-6 hidden-md-down" style="position:absolute; left:230px; top:20px; transform:rotate(3deg);">

<div class="card rounded-0 border-0 p-1 text-center text-uppercase" style="background-color:#605b4b; color:#ffffff; font-size:14px;">

<p>Deerfox of Mushrooms/Decay</p>

</div>

</div>



<div class="col-6 hidden-md-up" style="position:absolute; left:150px; top:20px; transform:rotate(3deg);">

<div class="card rounded-0 border-0 p-1 text-center text-uppercase" style="background-color:#605b4b; color:#ffffff; font-size:14px;">

<p>Deerfox of Mushrooms/Decay</p>

</div>

</div>



<div class="col-6 hidden-md-down" style="position:absolute; left:60px; top:-4px; transform:rotate(-5deg);">

<div class="card rounded-0 border-0 p-1 text-center font-weight-bold text-uppercase" style="background-color:#925c38; color:#ffffff; letter-spacing:1px; font-size:14px;">

<p>syren</p>

</div>

</div>



<div class="col-6 hidden-md-up" style="position:absolute; left:40px; top:-4px; transform:rotate(-5deg);">

<div class="card rounded-0 border-0 p-1 text-center font-weight-bold text-uppercase" style="background-color:#925c38; color:#ffffff; letter-spacing:1px; font-size:14px;">

<p>syren</p>

</div>

</div>



<div class="card rounded-0 border-0" style="position:absolute; clip-path: polygon(0 0, 50% 100%, 100% 0%); height:20px; width:30px; right:40px; top:-1px; background-color:#352A22;">

<br>

</div>

</div>



<div class="col-12 p-0">

<div class="card p-0 rounded-0 border-0" style="background-color:#594639; color:#ffffff;">

<ul class="nav row no-gutters text-center">

<li class="nav-item col" style="background-color:#594639;">

<a class="btn btn-outline-secondary rounded-0 border-0 w-100 show active" data-toggle="tab" href="#abt" style="font-size:15px;"> <i class="fad fa-user" style="color:#fff"></i> </a>

</li>

<li class="nav-item col" style="background-color:#594639;">

<a class="btn btn-outline-secondary rounded-0 border-0 w-100 show" data-toggle="tab" href="#pers" style="font-size:15px;"> <i class="fa-duotone fa-masks-theater" style="color:#fff"></i></a>

</li>

<li class="nav-item col" style="background-color:#594639;">

<a class="btn btn-outline-secondary rounded-0 border-0 w-100 show" data-toggle="tab" href="#hist" style="font-size:15px;"> <i class="fad fa-books" style="color:#fff"></i></a>

</li>


<li class="nav-item col" style="background-color:#594639;">
<a data-toggle="tab" href="#rel" class="btn btn-outline-secondary rounded-0 border-0 w-100" style="font-size:15px;">
<i class="fad fa-link" style="color:#fff"></i>
</a>
</li>

<li class="col" style="background-color:#594639;">

<a class="btn btn-outline-secondary border-0 rounded-0 w-100" href="https://toyhou.se/18163396.keiji-f2u-" style="font-size:15px;"> <i class="fa-duotone fa-code" style="color:#fff"></i></a>

</li>

</ul>

</div>

</div>



<div class="card rounded-0 border-0" style="position:absolute; clip-path: polygon(0 0, 50% 100%, 100% 0%); height:20px; width:30px; left:25px; bottom:40px; background-color:#231C16;">

<br>

</div>

</div>

</div>

</div>

</div>

</div>