[CHARA] Ult. Sky: CotL bundle
created by:FlowerlyRat
HTMLCustom ColorsCharacter
Copy
<!--
╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
△▽/╱╱╱╱╱╱╱╱╱╱╱╰━╯
Ultimate Sky: Children of the Light profile bundle [character profile: abridged version]: code by FlowerlyRat || Based on the game Sky: Children of the Light's UI by ThatGameCompany
> It is recommended to use circlejourney's ToyHouse live editor to see what you're doing -> https://th.circlejourney.net/
Any links added use the following formats [target="_blank" is optional]:
Blue variant [to link characters, groups, species, and entities]:
<a style="font-weight: bold; color: #7efdfe" href="LINK_HERE">text_here</a>
Orange variant [to link everything else]:
<a style="font-weight: bold; color: #ff7e01" href="LINK_HERE">text_here</a>
Pop-up for the credits collapsible is at the end of the code
Relationship images have 5 different border options that represent how liked they are by the character. All 5 have been provided in the code, going from lvl 0 to lvl 5 [least to most liked]. Lvl 5 represents the one with the spinning border, used for characters your oc absolutely loves, lvl 0 has no border, meaning they either hate the other or don't have any feelings towards them. Each lvl has been precised in the code between commentary.
Code is compatible with the "Sky: Children of the Light avatar frame" and "Sky: Children of the Light candle UI" add-ons.
To add them to this code, please copy and paste them above this commentary.
Code is also compatible with the "Sky quests!" add-on.
To add it, please copy and paste the code between the "FUN LINKS" commentaries below.
Multiple background images have been screenshoted from the game to give a wide variety of possibilities [ToyHouse gallery: https://toyhou.se/25042050./gallery || Google Drive: https://drive.google.com/drive/folders/12YBvvXe9MoIYj9oUo8MVpngCojj8vCv3?usp=sharing], however if none of them suits your taste or vision, please go on and take your own in-game
-->
<div class="card bg-faded border-0 rounded-0 px-3" style="margin-top: -17px; margin-left: -15px; margin-right: -15px; background: url(
LINK_TO_BACKGROUND_IMAGE_HERE
); background-size: cover; background-position: center; background-attachment: fixed; color: #ffffea">
<!-- Change the image link for the main background right above this line -->
<div class="mt-4" style="margin-bottom: 20px">
<!--===/// WINGED LIGHT COUNT ///===-->
<img class="d-block mx-auto tooltipster" data-placement="bottom" title="
200
" src="https://f2.toyhou.se/file/f2-toyhou-se/images/72538958_Qzn1IfB8liC2Y5H.png" style="height: 50px">
<!--===/// WINGED LIGHT COUNT end ///===-->
<!-- Credits button -->
<div style="position: absolute; top: 20px; right: 25px">
<a data-toggle="collapse" href="#CREDIT">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96600008_K9c0uSM4k7pfpXi.png" width="35">
</a>
</div>
<!-- Credits button end -->
</div>
<!--=======/////// FUN LINKS ///////========-->
<!--=======/////// FUN LINKS end ///////========-->
<div class="row no-gutters align-items-end mt-4">
<!--/// Right column sticky ///-->
<div class="col-md h-100 mt-auto">
<div class="card bg-transparent rounded-0 border-0 mb-3">
<p class="text-center" style="font-weight: bold; font-size: 30px; text-shadow: 0 0 5px #000, 0 0 3px #000">
Name
</p>
<!--===/// Quote ///===-->
<div class="card bg-transparent border-0 rounded-0 align-items-center">
<div class="card border-0 my-2" style="padding: 10px; max-height: 75px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<p>"
This is a very cool and epic quote woa<br>
This box will scroll after a certain height!
"</p>
</div>
</div>
<!--===/// Quote end ///===-->
<!--===/// Basic ///===-->
<div class="card border-0 my-2" style="padding: 10px; max-height: 168px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<!-- Age -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Age</p></div>
<div class="col-auto ml-auto"><p>
##
</p></div>
</div>
<!-- Age end -->
<!-- Height -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Height</p></div>
<div class="col-auto ml-auto"><p><a style="font-weight: bold; color: #ff7e01" href="https://www.reddit.com/media?url=https%3A%2F%2Fi.redd.it%2Fyazzlze83qh41.jpg">
#
</a></p></div>
</div>
<!-- Height end -->
<!-- Gender -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Gender</p></div>
<div class="col-auto ml-auto"><p>
content
</p></div>
</div>
<!-- Gender end -->
<!-- Pronouns -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Pronouns</p></div>
<div class="col-auto ml-auto"><p>
pro/nouns
</p></div>
</div>
<!-- Pronouns end -->
<!-- Orientation -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Orientation</p></div>
<div class="col-auto ml-auto"><p>
<!--
Change the link and tooltip titles to the appropriate ones
Copy and paste the "<a>" tag to add another flag
-->
<a data-toggle="tooltip" title="LGBT+">
<img width="30px"
src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/0b1cb6ed-b614-4d6f-a792-6e2d2db50e49/df12p8i-5148214b-27e1-4cea-b418-420e2c629e25.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzBiMWNiNmVkLWI2MTQtNGQ2Zi1hNzkyLTZlMmQyZGI1MGU0OVwvZGYxMnA4aS01MTQ4MjE0Yi0yN2UxLTRjZWEtYjQxOC00MjBlMmM2MjllMjUucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.bfUU644_Y-XtP6mk5Iw-rkWSCGz48RVRya12UOkjtMA"></a>
<a data-toggle="tooltip" title="Queer">
<img width="30px"
src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/0b1cb6ed-b614-4d6f-a792-6e2d2db50e49/df12p7u-5aae0688-c8e6-408f-9360-bfe27b1b9397.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzBiMWNiNmVkLWI2MTQtNGQ2Zi1hNzkyLTZlMmQyZGI1MGU0OVwvZGYxMnA3dS01YWFlMDY4OC1jOGU2LTQwOGYtOTM2MC1iZmUyN2IxYjkzOTcucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.VfwaRcQsMLGFHptAVp77zWeA-p1LT_DE8YRuyXVWmuw"></a>
</p></div>
</div>
<!-- Orientation end -->
</div>
<!--===/// Basic end ///===-->
<!--===/// Decorative controls ///===-->
<div class="row no-gutters mt-2 mb-md-3 mb-2">
<div class="col">
<div class="card" style="padding: 10px; border-radius: 30px 0 0 30px; border-width: 1px 0 1px 1px; border-color: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.5)">
<div class="row no-gutters">
<div class="col-4">
<p class="justify-content-between pl-2 pr-3">
<img class="fa-flip-horizontal" src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574399_ISOXkfgYQFhmHqy.png" width="25" style="opacity: 0.5">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574399_ISOXkfgYQFhmHqy.png" width="25" style="opacity: 0.5">
</p>
</div>
<div class="my-n1" style="border-width: 0 1px 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<div class="col">
<p class="justify-content-between px-3" style="font-size: 25px">
<a class="mb-n2" style="margin-top: -10px" href="#" data-toggle="th-favorite">
<span class="favorite toggle-favorite">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574328_c1SwrAQE2AwiKXr.png" width="25">
</span>
<span class="unfavorite toggle-favorite">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574352_AVC7CTgM30PYCuZ.png" width="25">
</span>
</a>
<span style="font-size: 12px"><img class="mr-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574424_pTAU3yttAd8jqPl.png" width="25">0</span>
</p>
</div>
<div class="my-n1" style="border-width: 0 1px 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<div class="col-auto">
<p class="justify-content-between pl-4 pr-3" style="font-size: 25px">
<i class="fas fa-ellipsis" style="text-shadow: 0 0 3px #684647, 0 0 3px #684647"></i>
</p>
</div>
</div>
</div>
</div>
<div class="card rounded-0" style="padding: 0.5px; border-width: 1px 0; border-color: rgba(0, 0, 0, 0.8); background-color: rgba(255, 255, 239, 0.5)"></div>
<div class="col-auto mx-auto">
<div class="card h-100 justify-content-center" style="padding-left: 13px; padding-right: 13px; font-size: 15px; border-width: 1px 1px 1px 0; border-radius: 0 30px 30px 0; border-color: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.7)">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</div>
<!--===/// Decorative controls end ///===-->
</div>
</div>
<!--/// Right column sticky end ///-->
<!--/// Middle column ///-->
<div class="col-md-3">
<!--/// Full body image ///--><!-- You may play with the max and min height if your image doesn't look correctly proportioned -->
<div class="card bg-transparent border-0 rounded-0 mx-md-1">
<img class="d-block mx-auto mb-3" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/69495205_Ir72I07ys8SlDvP.png
" style="max-height: 470px; min-height: 350px; object-fit: cover; object-position: center; "><!--
If the full body gets muddied with the background, add the following snippet to the style to add a white border around it:
filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-0.5px 0px 0 #fff) drop-shadow(-0px -0px 0 #fff) drop-shadow(-0px -0.5px 0 #fff)
-->
</div>
<!--/// Full body image end ///-->
</div>
<!--/// Middle column end ///-->
<!--/// Left column ///-->
<div class="col-md my-3 h-100 mt-auto">
<!--===/// Description ///===-->
<div class="mb-3">
<!-- Title -->
<div class="card py-3 px-4" style="border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters align-items-center">
<div class="col-auto"><p style="font-weight: bold; font-size: 17px">Quick description</p></div>
<div class="col justify-content-center mx-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.1"></div>
<!-- Title end -->
<!-- Content -->
<div class="card" style="height: 255px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 255px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-4 pb-4">
<!-- Text -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Subheader
</span><br><!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
A place to write a quick description about your ocs! For when you don't have a lot of information, or otherwise don't want to share a lot of it. It's to keep it at the bear minimum :] If you're looking for way more information I would suggest looking at the other codes in this bundle!
</p>
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Subheader
</span><br><!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Also hey look! A subheader to write even more things or better organise this box!!! Very cool and neat hehehe. This ends up scrolling!
</p>
<!-- Text end -->
</div>
</div>
</div>
<!-- Content end -->
<!--===/// Description end ///===-->
</div>
</div>
<!--/// Left column end ///-->
</div>
<!--=======/////// RELATIONSHIP DIVIDER ///////========-->
<div class="row no-gutters my-3">
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, rgba(0, 0, 0, 0), #ffffea, #ffffea)"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="margin-top: -23px; font-size: 30px">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!--=======/////// RELATIONSHIP DIVIDER end ///////========-->
<!--=======/////// SECTION TITLE ///////========-->
<div class="card p-3 mb-4 text-center" style="border-radius: 10px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<h1 class="mt-1">Friendship constellation</h1>
<p style="font-size: 15px; color: #cdcfc3">Relationships</p>
</div>
<!--=======/////// SECTION TITLE end ///////========-->
<!--=======/////// RELATIONSHIPS ///////========-->
<div class="row no-gutters justify-content-around text-center mb-3">
<!--===/// CHARA [1] ///===-->
<div class="col-sm-2">
<!--/// Picture ///-->
<div class="card mx-auto bg-transparent border-0 rounded-0 p-0 align-items-center justify-content-center" style="height: 150px; width: 150px;">
<!--/// Avatar ///-->
<div class="card border-0 p-0" style="height: 115px; width: 115px; border-radius: 50%; z-index: 5; background: url(
AVATAR_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"></div>
<!--/// Outer frame [LVL 4, SPINS] ///-->
<img class="d-block mx-auto my-auto" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/75393819_T9bW5LwCHDfGkvO.png
" style="position: absolute; width: 150px; opacity: 1; z-index: 5">
<!--/// Inner spinning frame ///-->
<div class="align-items-center justify-content-center" style="position: absolute; width: 116px; z-index: 5">
<i class="fa-spin" style="animation-duration: 26s"><img class="d-block mx-auto my-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75393824_cNfM0cZkOOKtPRh.png"></i>
</div>
<!--/// Inner spinning frame end ///-->
</div>
<!--/// Picture end ///-->
<!--/// Name + link ///-->
<p class="card col-12 border-0 my-2" style="font-weight: bold; font-size: 17px; color: #7efdfe; border-radius: 7px; background: rgba(0, 0, 0, 0.8); display: inline-block">
<a class="nav-link text-truncate px-0" style="font-weight: bold; color: #7efdfe" href="
LINK_PROFILE_HERE">
Name
</a>
</p>
<!--/// Name + link end ///-->
</div>
<!--===/// CHARA [1] end ///===-->
<!--===/// CHARA [2] ///===-->
<div class="col-sm-2">
<!--/// Picture ///-->
<div class="card mx-auto bg-transparent border-0 rounded-0 p-0 align-items-center justify-content-center" style="height: 150px; width: 150px;">
<!--/// Avatar ///-->
<div class="card border-0 p-0" style="height: 115px; width: 115px; border-radius: 50%; z-index: 5; background: url(
AVATAR_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"></div>
<!--/// Outer frame [LVL 4, SPINS] ///-->
<img class="d-block mx-auto my-auto" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/75393819_T9bW5LwCHDfGkvO.png
" style="position: absolute; width: 170px; opacity: 1; z-index: 5">
</div>
<!--/// Picture end ///-->
<!--/// Name + link ///-->
<p class="card col-12 border-0 my-2 text-truncate" style="font-weight: bold; font-size: 17px; color: #7efdfe; border-radius: 7px; background: rgba(0, 0, 0, 0.8); display: inline-block">
<a class="nav-link text-truncate px-0" style="font-weight: bold; color: #7efdfe" href="
LINK_PROFILE_HERE">
Name
</a>
</p>
<!--/// Name + link end ///-->
</div>
<!--===/// CHARA [2] end ///===-->
<!--===/// CHARA [3] ///===-->
<div class="col-sm-2">
<!--/// Picture ///-->
<div class="card mx-auto bg-transparent border-0 rounded-0 p-0 align-items-center justify-content-center" style="height: 150px; width: 150px;">
<!--/// Avatar ///-->
<div class="card border-0 p-0" style="height: 115px; width: 115px; border-radius: 50%; z-index: 5; background: url(
AVATAR_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"></div>
<!--/// Outer frame [LVL 4, SPINS] ///-->
<img class="d-block mx-auto my-auto" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/75393822_s395YZlvX9nJ2IL.png
" style="position: absolute; width: 170px; opacity: 1; z-index: 5">
</div>
<!--/// Picture end ///-->
<!--/// Name + link ///-->
<p class="card col-12 border-0 my-2 text-truncate" style="font-weight: bold; font-size: 17px; color: #7efdfe; border-radius: 7px; background: rgba(0, 0, 0, 0.8); display: inline-block">
<a class="nav-link text-truncate px-0" style="font-weight: bold; color: #7efdfe" href="
LINK_PROFILE_HERE">
Name
</a>
</p>
<!--/// Name + link end ///-->
</div>
<!--===/// CHARA [3] end ///===-->
<!--===/// CHARA [4] ///===-->
<div class="col-sm-2">
<!--/// Picture ///-->
<div class="card mx-auto bg-transparent border-0 rounded-0 p-0 align-items-center justify-content-center" style="height: 150px; width: 150px;">
<!--/// Avatar ///-->
<div class="card border-0 p-0" style="height: 115px; width: 115px; border-radius: 50%; z-index: 5; background: url(
AVATAR_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"></div>
<!--/// Outer frame [LVL 4, SPINS] ///-->
<img class="d-block mx-auto my-auto" src="
https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/75393824_cNf.png
" style="position: absolute; width: 170px; opacity: 1; z-index: 5">
</div>
<!--/// Picture end ///-->
<!--/// Name + link ///-->
<p class="card col-12 border-0 my-2 text-truncate" style="font-weight: bold; font-size: 17px; color: #7efdfe; border-radius: 7px; background: rgba(0, 0, 0, 0.8); display: inline-block">
<a class="nav-link text-truncate px-0" style="font-weight: bold; color: #7efdfe" href="
LINK_PROFILE_HERE">
Name
</a>
</p>
<!--/// Name + link end ///-->
</div>
<!--===/// CHARA [4] end ///===-->
<!--===/// CHARA [5] ///===-->
<div class="col-sm-2">
<!--/// Picture ///-->
<div class="card mx-auto bg-transparent border-0 rounded-0 p-0 align-items-center justify-content-center" style="height: 150px; width: 150px;">
<!--/// Avatar ///-->
<div class="card border-0 p-0" style="height: 115px; width: 115px; border-radius: 50%; z-index: 5; background: url(
AVATAR_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"></div>
</div>
<!--/// Picture end ///-->
<!--/// Name + link ///-->
<p class="card col-12 border-0 my-2 text-truncate" style="font-weight: bold; font-size: 17px; color: #7efdfe; border-radius: 7px; background: rgba(0, 0, 0, 0.8); display: inline-block">
<a class="nav-link text-truncate px-0" style="font-weight: bold; color: #7efdfe" href="
LINK_PROFILE_HERE">
Name
</a>
</p>
<!--/// Name + link end ///-->
</div>
<!--===/// CHARA [5] end ///===-->
</div>
<!--=======/////// RELATIONSHIPS end ///////========-->
<!--====///// CREDITS WINDOW //////====-->
<div class="collapse fade" id="CREDIT" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; z-index: 1100">
<div id="ACC-CREDIT" class="card bg-faded border-0 rounded-0 p-3" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.7)">
<div class="mx-auto sticky-top" style="min-width: 55%">
<div class="card align-items-center" style="margin-top: 120px; border-radius: 25px 25px 0 0; border-width: 1px 1px 0 1px; border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.8); z-index: 5">
<!-- Close button -->
<div style="position: absolute; top: 10px; right: 25px">
<a data-toggle="collapse" href="#CREDIT"><i class="fas fa-times" style="font-size: 25px; color: #ffffea"></i></a>
</div>
<!-- Close button end -->
<div class="row no-gutters">
<!-- Buttons -->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 40px; height: 40px; cursor: pointer">
<i class="far fa-code" style="font-size: 20px; color: #ffffea; opacity: 0.6; text-shadow: 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745"></i>
<div class="collapse fade show CODE" data-parent="#ACC-CREDIT" style="position:absolute; top:0; left:0; right:0; bottom:0;">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea;background: rgba(0, 0, 0, 0)">
<i class="far fa-code" style="margin-top: 2px; font-size: 20px; color: #ffffea; text-shadow: 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745"></i>
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none" data-toggle="collapse" data-target=".CODE"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 40px; height: 40px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96599998_5kOvqGuUpH9aIfH.png" width="25px" style="opacity: 0.6">
<div class="collapse fade IMAGE" data-parent="#ACC-CREDIT" style="position:absolute; top:0; left:0; right:0; bottom:0;">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea;background: rgba(0, 0, 0, 0)">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96599998_5kOvqGuUpH9aIfH.png" width="25px" style="margin-top: 2px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none" data-toggle="collapse" data-target=".IMAGE"></a>
</div>
</li>
</ul>
</div>
<!-- Buttons end -->
</div>
</div>
<div class="card p-3 pb-4" style="height: 300px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.7)">
<!--/// Code credits ///-->
<div class="collapse fade show active CODE" data-parent="#ACC-CREDIT">
<div class="row no-gutters align-items-center mt-3">
<div class="col-auto"><p style="font-size: 15px; font-weight: bold">Code credits</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<!-- Text -->
<p class="mt-4">
<b>Code:</b> <a style="font-weight: bold; color: #7efdfe" href="https://toyhou.se/FlowerlyRat"><i class="fi-torso user-name-icon"></i>FlowerlyRat</a><br>
<b>Layout:</b> Based on the game Sky: Children of the Light's UI<br>
<b>Other codes:</b> <a style="font-weight: bold; color: #ff7e01" href="https://toyhou.se/FlowerlyRat/characters/folder:4673560">Folder</a>
</p>
<!-- Text end -->
</div>
<!--/// Code credits ///-->
<!--/// Image credits ///-->
<div class="collapse fade IMAGE" data-parent="#ACC-CREDIT">
<div class="row no-gutters align-items-center mt-3">
<div class="col-auto"><p style="font-size: 15px; font-weight: bold">Image credits</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<!-- Text -->
<p class="mt-4">
<b>Background image:</b> Sky: Children of the Light © thatgamecompany<br>
<b>Icons:</b> <a href="https://fontawesome.com/v6/search" style="font-weight: bold; color: #ff7e01">FontAwesome</a>, Sky: Children of the Light<br>
<b>Flags/ribbons:</b> taken from CoraMagics' <a href="https://toyhou.se/20187371." style="font-weight: bold; color: #ff7e01">Ribbon Masterlist</a>
</p>
<!-- Text end -->
</div>
<!--/// Image credits ///-->
<div class="row no-gutters" style="position: absolute; bottom: -3px; left: 27px; right: 27px; opacity: 0.3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
</div>
</div>
</div>
<!--====///// CREDITS WINDOW end //////====-->
</div>Copy
<!--
╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
△▽/╱╱╱╱╱╱╱╱╱╱╱╰━╯
Ultimate Sky: Children of the Light profile bundle [CSS emulator V1 - character profile: abridged version]: code by FlowerlyRat || Inspired from TheFaerieMerchant's CSS emulators || Based on the game Sky: Children of the Light's UI by ThatGameCompany
> It is HIGHLY recommended to use circlejourney's ToyHouse live editor to see what you're doing!!!! -> https://th.circlejourney.net/
Any links added use the following formats [target="_blank" is optional]:
Blue variant [to link characters, groups, species, and entities]:
<a style="font-weight: bold; color: #7efdfe" href="LINK_HERE">text_here</a>
Orange variant [to link everything else]:
<a style="font-weight: bold; color: #ff7e01" href="LINK_HERE">text_here</a>
Any areas that need the character's ID have the "CHARA_ID_HERE" placeholder -> to replace everything at once, highlight "CHARA_ID_HERE", then do ctrl+F and replace it with your character's.
Pop-up for the credits collapsible is at the end of the code.
> I cannot guarantee compatibility with actual custom CSS codes.
Code is compatible with the "Sky: Children of the Light candle UI" add-on.
Instructions to add them is given in the profile itself -> https://toyhou.se/23648694.misc-sky-cotl-candle-ui/25906098.
Code is also compatible with the "Sky quests!" add-on.
To add it, please copy and paste the code between the "FUN LINKS" commentaries below, between the "MAIN CHARACTER CODE HERE" commentaries.
-> https://toyhou.se/32862504.snip-sky-quests/32862518.code
Multiple background images have been screenshoted from the game to give a wide variety of possibilities [ToyHouse gallery: https://toyhou.se/25042050./gallery || Google Drive: https://drive.google.com/drive/folders/12YBvvXe9MoIYj9oUo8MVpngCojj8vCv3?usp=sharing], however if none of them suit your taste or vision, please go on and take your own in-game.
!!! TO BE WARNED !!!
This code has a hidden section intended for mobile users, so be sure to also modify it with the sidebar!
-->
<div class="flex-row justify-content-end sp-top-inner" style="left: -40vw; z-index: 5">
<div style="width: 100vw">
<div class="ml-md-3">
<!--///BACKGROUND IMAGE///-->
<div class="card bg-dark rounded-0 border-0 col-lg-12" style="overflow: hidden; position: fixed; bottom: 0; top: 0; left: 0; background-image: url(
LINK_TO_BACKGROUND_IMAGE_HERE
); background-size: cover; background-position: center"></div>
<div class="row no-gutters">
<!-- Code container -->
<div class="col-12 ">
<div class="card bg-transparent border-0 rounded-0 mx-auto">
<div class="card bg-transparent rounded-0 border-0" style=" min-height: 100vh">
<div class="container p-3" style="max-width: 100%">
<div class="row no-gutters">
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
COMPUTER SIDEBAR
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-md-2 hidden-sm-down" style="margin-bottom: -75px; color: #ffffea">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
AVATAR [computer]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-auto" style="height: 150px; width: 150px">
<div class="card bg-dark border-0 p-0" style="position: absolute; height: 115px; width: 115px; border-radius: 50%; z-index: 1; background: url(
AVATAR_IMAGE_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"><!--PFP IMAGE LINK ABOVE--></div>
<!--///Outer frame///--><!--Check [https://toyhou.se/23579684.misc-sky-cotl-avatar-frame] for more borders and meaning explanation-->
<img class="d-block mx-auto my-auto" style="position: absolute; opacity: 1; z-index: 5" src=
"https://f2.toyhou.se/file/f2-toyhou-se/images/71211585_IQYjqdDDaiOOeid.png">
<!--///Inner spinning frame///--><!-- Feel free to delete -->
<div class="align-items-center justify-content-center" style="position: absolute; width: 123px; z-index: 5">
<i class="fa-spin" style="animation-duration: 26s; opacity: 1"><img class="d-block mx-auto my-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/images/71211558_s1BGtB1nlee2eVn.png"></i>
</div>
<!--///Inner spinning frame end///-->
</div>
<!--===////// AVATAR end //////===-->
<div class="card p-2" style="top: -77px; border-radius: 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER NAME [computer]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE."
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-sparkles fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// CHARACTER NAME [computer] end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
FOLDER LINK
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/FlowerlyRat/characters/folder:FOLDER_ID"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Folder name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-folder fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// FOLDER LINK end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BLURB [computer]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card" style="padding: 15px; font-size: 0.8em; color: #cdcfc3; border-radius: 23px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<p>
This is a blurb, feel free to delete it tho
</p>
</div>
<!--===////// BLURB [computer] end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SOCIAL LINKS [computer] - duplicate the "SOCIAL LINK" section to add a platform - can be used to add links to an Art Fight profile, playlist, etc
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<ul class="nav nav-button nav-justified justify-content-around mt-2 flex-wrap">
<!--=== SOCIAL LINK ===-->
<li>
<div class="gallery-thumb">
<div class="thumb-image justify-content-center align-items-center" style="width: 35px; height: 35px; font-weight: bold; border-radius: 10px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="SOCIAL_LINK_HERE" title="SOCIAL_NAME_HERE"
class="th tooltipster" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 10px; box-shadow: 0 0 8px rgba(255, 255, 233, 0.5), inset 0 0 8px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!--=== BUTTON ICON ===-->
<i class="fas fa-link
" style="font-size: 13px"></i>
</a>
</div>
</div>
</li>
<!--=== SOCIAL LINK end===-->
</ul>
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BONUS LINKS [computer] - duplicate the "ADDITIONAL SIDE LINK" section to add a link
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--===////// ADDITIONAL SIDE LINK //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="LINK_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Link name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-link fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// ADDITIONAL SIDE LINK end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SIDEBAR BUTTONS - tabs require their own links with their own ID
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--===////// TAB 1 //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="LINK_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Tab 1
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-bookmark fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// TAB 1 end //////===-->
<div class="my-1 mb-2 mx-2" style="border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<!--===////// TAB 2 //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="LINK_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Tab 2
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="far fa-bookmark fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// TAB 2 end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--===////// GALLERY //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./gallery"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Gallery
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-image fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// GALLERY end //////===-->
<!--===////// LIBRARY //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./literatures"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Library
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-book fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// LIBRARY end //////===-->
<!--===////// WORLDS //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./worlds"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Worlds
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-globe fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// WORLDS end //////===-->
<!--===////// LINKS //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./links"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Links
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-link fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// LINKS end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--===////// COMMENTS //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./comments"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Comments
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-comment fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// COMMENTS end //////===-->
<!--===////// FAVORITE //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./comments"
class="th" data-toggle="th-favorite" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="favorite toggle-favorite" style="position: absolute; top: 8px; right: 13px; z-index: 5">
<span style="position: absolute; left: -184px">Favorite</span>
<i class="fal fa-sparkle"></i>
</span>
<span class="unfavorite toggle-favorite" style="position: absolute; top: 8px; right: 13px; z-index: 5">
<span style="position: absolute; left: -184px">Unfavorite</span>
<i class="fas fa-sparkle"></i>
</span>
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9"></div>
<div class="col justify-content-end align-items-center">
<div class="card border-0" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57"></div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// FAVORITE end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--===////// OWNERSHIP //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./ownership"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Ownership
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-check-square fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// OWNERSHIP end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--===////// REPORT //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/~tickets/create/character/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Report
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-warning fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// REPORT end //////===-->
<!--===////// BLOCK //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./block"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Block
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-cancel fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// BLOCK end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<div class="accordion container p-0" id="accordion">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="#MANAGE"
class="th" data-toggle="collapse" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Manage character
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-caret-right fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div id="MANAGE" class="collapse" data-parent="#accordion">
<!--===AVATAR===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/avatar/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Avatar
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-image fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===AVATAR end===-->
<!--===EDIT PROFILE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/edit/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Edit profile
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-pencil fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===EDIT PROFILE end===-->
<!--===TABS===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/tabs/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Tabs
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-bookmark fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===TABS end===-->
<!--===HISTORY===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/history/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
History
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-history fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===HISTORY end===-->
<div class="my-3 ml-3" style="border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<!--===WARNINGS===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/warnings/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Warnings
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-warning fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===WARNINGS end===-->
<!--===ACCESS KEYS===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/keys/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Access keys
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-key fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===ACCESS KEYS end===-->
<!--===TRADE LISTING===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/trade-listing/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Trade listing
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-handshake fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===TRADE LISTING end===-->
<div class="my-3 ml-3" style="border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<!--===DELETE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/delete/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Delete
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-trash fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===DELETE end===-->
</div>
<!--=== CHARACTER end ===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
IMAGES
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="#MANAGE-IMG"
class="th" data-toggle="collapse" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Manage images
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-caret-right fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div id="MANAGE-IMG" class="collapse" data-parent="#accordion">
<!--===UPLOAD IMAGE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~images/upload/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Upload image
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-plus fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===UPLOAD IMAGE end===-->
<!--===MANAGE IMAGES===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~images/manage-character/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Manage images
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-image fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===MANAGE IMAGES end===-->
<!--===SORT IMAGES===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~images/sort/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Sort images
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-random fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===SORT IMAGES end===-->
</div>
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
LITERATURES
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="#MANAGE-LIT"
class="th" data-toggle="collapse" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Manage literatures
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-caret-right fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div id="MANAGE-LIT" class="collapse" data-parent="#accordion">
<!--===ADD LITERATURE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~literatures/create/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Upload literature
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-plus fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===ADD LITERATURE end===-->
<!--===SORT LITERATURE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~literatures/sort/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Sort literatures
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-random fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===SORT LITERATURE end===-->
</div>
<!--=== LITERATURES end ===-->
</div>
</div>
</div>
<!--===/////////////////////////////////// COMPUTER SIDEBAR end ///////////////////////////////////===-->
<!--===////// MAIN CODE //////===-->
<div class="col-md-10 mx-auto pl-md-3 h-100">
<!-- Utility buttons -->
<ul class="nav nav-button align-items-center justify-content-end mt-3 mr-2" style="margin-bottom: 22px">
<!--///Creation information button///-->
<li class="mx-4">
<a data-toggle="collapse" href="#CREA" style="box-shadow: none; color: #ffffea">
<i class="fa fa-info-circle mt-1" style="font-size: 30px; color: #fdf8da; text-shadow: 0 0 2px #713745, 0 0 2px #713745"></i>
</a>
</li>
<!--Credits button-->
<li>
<a data-toggle="collapse" href="#CREDIT">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96600008_K9c0uSM4k7pfpXi.png" width="35">
</a>
</li>
</ul>
<!-- Utility buttons -->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
UPPER CARD ON PHONE
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
AVATAR [phone]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-auto hidden-sm-up" style="margin-top: -70px; height: 150px; width: 150px">
<div class="card bg-dark border-0 p-0" style="position: absolute; height: 115px; width: 115px; border-radius: 50%; z-index: 1; background: url(
AVATAR_IMAGE_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"><!--PFP IMAGE LINK ABOVE--></div>
<!--///Outer frame///--><!--Check [https://toyhou.se/23579684.misc-sky-cotl-avatar-frame] for more borders and meaning explanation-->
<img class="d-block mx-auto my-auto" style="position: absolute; opacity: 1; z-index: 5" src=
"https://f2.toyhou.se/file/f2-toyhou-se/images/71211585_IQYjqdDDaiOOeid.png">
<!--///Inner spinning frame///--><!-- Feel free to delete -->
<div class="align-items-center justify-content-center" style="position: absolute; width: 123px; z-index: 5">
<i class="fa-spin" style="animation-duration: 26s; opacity: 1"><img class="d-block mx-auto my-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/images/71211558_s1BGtB1nlee2eVn.png"></i>
</div>
<!--///Inner spinning frame end///-->
</div>
<!--===////// AVATAR end //////===-->
<div class="card p-2 mx-auto hidden-sm-up mb-4" style="margin-top: -76px; width: 100%; color: #ffffea; border-radius: 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER NAME [phone]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE."
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-sparkles fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// CHARACTER NAME [phone] end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BLURB [phone]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card" style="padding: 15px; font-size: 0.8em; color: #cdcfc3; border-radius: 23px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<p>
This is a blurb, feel free to delete it tho
</p>
</div>
<!--===////// BLURB [phone] end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SOCIAL LINKS [computer] - duplicate the "SOCIAL LINK" section to add a platform - can be used to add links to an Art Fight profile, playlist, etc
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<ul class="nav nav-button nav-justified justify-content-around mt-2 flex-wrap">
<!--=== SOCIAL LINK ===-->
<li>
<div class="gallery-thumb">
<div class="thumb-image justify-content-center align-items-center" style="width: 35px; height: 35px; font-weight: bold; border-radius: 10px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="SOCIAL_LINK_HERE" title="SOCIAL_NAME_HERE"
class="th tooltipster" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 10px; box-shadow: 0 0 8px rgba(255, 255, 233, 0.5), inset 0 0 8px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!--=== BUTTON ICON ===-->
<i class="fas fa-link
" style="font-size: 13px"></i>
</a>
</div>
</div>
</li>
<!--=== SOCIAL LINK end===-->
</ul>
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BONUS LINKS [phone] - duplicate the "ADDITIONAL SIDE LINK" section to add a link
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--===////// ADDITIONAL SIDE LINK //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="LINK_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Link name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-link fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// ADDITIONAL SIDE LINK end //////===-->
</div>
<!--===/// UPPER CARD PHONE end ///===-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER CREATION INFO
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="collapse fade mt-1 mb-3" id="CREA" style="color: #ffffea">
<div class="col row no-gutters hidden-sm-up mt-n2 mb-3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<div class="row no-gutters">
<div class="col-md-9 card order-md-2 px-3" style="border-radius: 8px; border-width: 1px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<!--Close button-->
<div class="justify-content-end mt-3">
<a data-toggle="collapse" href="#CREA"><i class="fas fa-times" style="font-size: 25px; color: #ffffea"></i></a>
</div>
<!--Close button end-->
<div class="row">
<!--===/// CREATION INFO ///===-->
<div class="col-md-5 pr-3 mr-n2" style="height: 155px; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<!--===CREATED===-->
<div class="row mb-2">
<div class="col-4" style="font-weight: bold">
<p>Created</p>
</div>
<div class="col">
<!--Date-->
<p>
1 Jan 2024, 1:20:30 am
</p>
</div>
</div>
<!--===CREATED end===-->
<!--===CREATOR===-->
<div class="row mb-2">
<div class="col-4" style="font-weight: bold">
<p>Creator</p>
</div>
<div class="col">
<!--Username-->
<a style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/Username">
<i class="fi-star user-name-icon"></i>Username
</a>
</div>
</div>
<!--===CREATOR end===-->
<!--===DESIGNERS===-->
<div class="row mb-2">
<div class="col-4" style="font-weight: bold">
<p>Designers</p>
</div>
<div class="col">
<!--Username-->
<!--Username [external link]-->
<a style="font-weight: bold; color: #7efdfe" href=
"EXTERNAL_LINK_HERE">
Username<i class="fa-solid fa-up-right-from-square ml-1" style="font-size: 10px"></i>
</a>
</div>
</div>
<!--===DESIGNERS end===-->
<!--===OWNER===-->
<div class="row mb-2">
<div class="col-4" style="font-weight: bold">
<p>Owner</p>
</div>
<div class="col">
<!--Username-->
<a style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/Username">
<i class="fi-torso user-name-icon"></i>Username
</a>
</div>
</div>
<!--===OWNER end===-->
</div>
<!--===/// CREATION INFO end ///===-->
<!--===/// Divider ///===-->
<div class="col row no-gutters hidden-sm-up my-2 mb-3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<div class="col-auto hidden-sm-down mr-n4">
<div style="height: 41%; border-width: 0 0 0 1px; border-style: solid"></div>
<div class="border-0 rounded-0 my-1">
<p style="margin-left: -3.4px; font-size: 10px">◆</p>
</div>
<div style="height: 41%; border-width: 0 0 0 1px; border-style: solid"></div>
</div>
<!--===/// Divider end ///===-->
<!--===/// TAGS ///===-->
<div class="col-md card bg-transparent border-0 rounded-0">
<div class="pr-3 mr-n3" style="height: 155px; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<!--Tag 1-->
<div class="card border-0 px-1 mb-1" style="border-radius: 5px; background: #ffffea; display: inline-block">
<a style="font-weight: bold; color: #000" href=
"TAG_LINK_HERE">
tag 1
</a>
</div>
<!--Tag 1 end-->
<!--Tag 2-->
<div class="card border-0 px-1 mb-1" style="border-radius: 5px; background: #ffffea; display: inline-block">
<a style="font-weight: bold; color: #000" href=
"TAG_LINK_HERE">
tag 2
</a>
</div>
<!--Tag 2 end-->
<!--Tag 3-->
<div class="card border-0 px-1 mb-1" style="border-radius: 5px; background: #ffffea; display: inline-block">
<a style="font-weight: bold; color: #000" href=
"TAG_LINK_HERE">
tag 3
</a>
</div>
<!--Tag 3 end-->
</div>
</div>
<!--===/// TAGS end ///===-->
</div>
</div>
<div class="col-md card mr-md-2 mt-md-0 mt-2 order-md-1" style="height: 200px; border-radius: 8px; border-width: 1px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<div class="card bg-transparent border-0 rounded-0 my-auto p-3" style="height: 200px; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="row no-gutters text-center">
<!--===/// Creator ribbons ///===-->
<!-- ||[ 1 ]|| -->
<div class="col-4 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description"><!-- Don't make the tooltips too long, otherwise they won't display! -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 1 ]|| -->
<!--===/// Creator ribbons end ///===-->
</div>
</div>
</div>
</div>
<div class="col row no-gutters hidden-sm-up mt-3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
<!--===/// CHARACTER CREATION INFO end ///===-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
PASTE YOUR CHARACTER CODE HERE
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!-- [REMINDER]
> I cannot guarantee compatibility with actual custom CSS codes.
-->
<div class="card bg-transparent border-0 rounded-0 mb-n4" style="color: #ffffea">
<!-- Change the image link for the main background right above this line -->
<div class="mt-4" style="margin-bottom: 20px">
<!--===/// WINGED LIGHT COUNT ///===-->
<img class="d-block mx-auto tooltipster" data-placement="bottom" title="
200
" src="https://f2.toyhou.se/file/f2-toyhou-se/images/72538958_Qzn1IfB8liC2Y5H.png" style="height: 50px">
<!--===/// WINGED LIGHT COUNT end ///===-->
</div>
<!--=======/////// FUN LINKS ///////========-->
<!--=======/////// FUN LINKS end ///////========-->
<div class="row no-gutters align-items-end mt-4">
<!--/// Right column sticky ///-->
<div class="col-md h-100 mt-auto">
<div class="card bg-transparent rounded-0 border-0 mb-3">
<p class="text-center" style="font-weight: bold; font-size: 30px; text-shadow: 0 0 5px #000, 0 0 3px #000">
Name
</p>
<!--===/// Quote ///===-->
<div class="card bg-transparent border-0 rounded-0 align-items-center">
<div class="card border-0 my-2" style="padding: 10px; max-height: 75px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<p>"
This is a very cool and epic quote woa<br>
This box will scroll after a certain height!
"</p>
</div>
</div>
<!--===/// Quote end ///===-->
<!--===/// Basic ///===-->
<div class="card border-0 my-2" style="padding: 10px; max-height: 168px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<!-- Age -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Age</p></div>
<div class="col-auto ml-auto"><p>
##
</p></div>
</div>
<!-- Age end -->
<!-- Height -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Height</p></div>
<div class="col-auto ml-auto"><p><a style="font-weight: bold; color: #ff7e01" href="https://www.reddit.com/media?url=https%3A%2F%2Fi.redd.it%2Fyazzlze83qh41.jpg">
#
</a></p></div>
</div>
<!-- Height end -->
<!-- Gender -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Gender</p></div>
<div class="col-auto ml-auto"><p>
content
</p></div>
</div>
<!-- Gender end -->
<!-- Pronouns -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Pronouns</p></div>
<div class="col-auto ml-auto"><p>
pro/nouns
</p></div>
</div>
<!-- Pronouns end -->
<!-- Orientation -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Orientation</p></div>
<div class="col-auto ml-auto"><p>
<!--
Change the link and tooltip titles to the appropriate ones
Copy and paste the "<a>" tag to add another flag
-->
<a data-toggle="tooltip" title="LGBT+">
<img width="30px"
src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/0b1cb6ed-b614-4d6f-a792-6e2d2db50e49/df12p8i-5148214b-27e1-4cea-b418-420e2c629e25.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzBiMWNiNmVkLWI2MTQtNGQ2Zi1hNzkyLTZlMmQyZGI1MGU0OVwvZGYxMnA4aS01MTQ4MjE0Yi0yN2UxLTRjZWEtYjQxOC00MjBlMmM2MjllMjUucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.bfUU644_Y-XtP6mk5Iw-rkWSCGz48RVRya12UOkjtMA"></a>
<a data-toggle="tooltip" title="Queer">
<img width="30px"
src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/0b1cb6ed-b614-4d6f-a792-6e2d2db50e49/df12p7u-5aae0688-c8e6-408f-9360-bfe27b1b9397.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzBiMWNiNmVkLWI2MTQtNGQ2Zi1hNzkyLTZlMmQyZGI1MGU0OVwvZGYxMnA3dS01YWFlMDY4OC1jOGU2LTQwOGYtOTM2MC1iZmUyN2IxYjkzOTcucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.VfwaRcQsMLGFHptAVp77zWeA-p1LT_DE8YRuyXVWmuw"></a>
</p></div>
</div>
<!-- Orientation end -->
</div>
<!--===/// Basic end ///===-->
<!--===/// Decorative controls ///===-->
<div class="row no-gutters mt-2 mb-md-3 mb-2">
<div class="col">
<div class="card" style="padding: 10px; border-radius: 30px 0 0 30px; border-width: 1px 0 1px 1px; border-color: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.5)">
<div class="row no-gutters">
<div class="col-4">
<p class="justify-content-between pl-2 pr-3">
<img class="fa-flip-horizontal" src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574399_ISOXkfgYQFhmHqy.png" width="25" style="opacity: 0.5">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574399_ISOXkfgYQFhmHqy.png" width="25" style="opacity: 0.5">
</p>
</div>
<div class="my-n1" style="border-width: 0 1px 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<div class="col">
<p class="justify-content-between px-3" style="font-size: 25px">
<a class="mb-n2" style="margin-top: -10px" href="#" data-toggle="th-favorite">
<span class="favorite toggle-favorite">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574328_c1SwrAQE2AwiKXr.png" width="25">
</span>
<span class="unfavorite toggle-favorite">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574352_AVC7CTgM30PYCuZ.png" width="25">
</span>
</a>
<span style="font-size: 12px"><img class="mr-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574424_pTAU3yttAd8jqPl.png" width="25">0</span>
</p>
</div>
<div class="my-n1" style="border-width: 0 1px 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<div class="col-auto">
<p class="justify-content-between pl-4 pr-3" style="font-size: 25px">
<i class="fas fa-ellipsis" style="text-shadow: 0 0 3px #684647, 0 0 3px #684647"></i>
</p>
</div>
</div>
</div>
</div>
<div class="card rounded-0" style="padding: 0.5px; border-width: 1px 0; border-color: rgba(0, 0, 0, 0.8); background-color: rgba(255, 255, 239, 0.5)"></div>
<div class="col-auto mx-auto">
<div class="card h-100 justify-content-center" style="padding-left: 13px; padding-right: 13px; font-size: 15px; border-width: 1px 1px 1px 0; border-radius: 0 30px 30px 0; border-color: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.7)">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</div>
<!--===/// Decorative controls end ///===-->
</div>
</div>
<!--/// Right column sticky end ///-->
<!--/// Middle column ///-->
<div class="col-md-3">
<!--/// Full body image ///--><!-- You may play with the max and min height if your image doesn't look correctly proportioned -->
<div class="card bg-transparent border-0 rounded-0 mx-md-1">
<img class="d-block mx-auto mb-3" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/69495205_Ir72I07ys8SlDvP.png
" style="max-height: 470px; min-height: 350px; object-fit: cover; object-position: center; "><!--
If the full body gets muddied with the background, add the following snippet to the style to add a white border around it:
filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-0.5px 0px 0 #fff) drop-shadow(-0px -0px 0 #fff) drop-shadow(-0px -0.5px 0 #fff)
-->
</div>
<!--/// Full body image end ///-->
</div>
<!--/// Middle column end ///-->
<!--/// Left column ///-->
<div class="col-md my-3 h-100 mt-auto">
<!--===/// Description ///===-->
<div class="mb-3">
<!-- Title -->
<div class="card py-3 px-4" style="border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters align-items-center">
<div class="col-auto"><p style="font-weight: bold; font-size: 17px">Quick description</p></div>
<div class="col justify-content-center mx-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.1"></div>
<!-- Title end -->
<!-- Content -->
<div class="card" style="height: 255px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 255px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-4 pb-4">
<!-- Text -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Subheader
</span><br><!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
A place to write a quick description about your ocs! For when you don't have a lot of information, or otherwise don't want to share a lot of it. It's to keep it at the bear minimum :] If you're looking for way more information I would suggest looking at the other codes in this bundle!
</p>
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Subheader
</span><br><!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Also hey look! A subheader to write even more things or better organise this box!!! Very cool and neat hehehe. This ends up scrolling!
</p>
<!-- Text end -->
</div>
</div>
</div>
<!-- Content end -->
<!--===/// Description end ///===-->
</div>
</div>
<!--/// Left column end ///-->
</div>
<!--=======/////// RELATIONSHIP DIVIDER ///////========-->
<div class="row no-gutters my-3">
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, rgba(0, 0, 0, 0), #ffffea, #ffffea)"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="margin-top: -23px; font-size: 30px">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!--=======/////// RELATIONSHIP DIVIDER end ///////========-->
<!--=======/////// SECTION TITLE ///////========-->
<div class="card p-3 mb-4 text-center" style="border-radius: 10px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<h1 class="mt-1">Friendship constellation</h1>
<p style="font-size: 15px; color: #cdcfc3">Relationships</p>
</div>
<!--=======/////// SECTION TITLE end ///////========-->
<!--=======/////// RELATIONSHIPS ///////========-->
<div class="row no-gutters justify-content-around text-center mb-3">
<!--===/// CHARA [1] ///===-->
<div class="col-sm-2">
<!--/// Picture ///-->
<div class="card mx-auto bg-transparent border-0 rounded-0 p-0 align-items-center justify-content-center" style="height: 150px; width: 150px;">
<!--/// Avatar ///-->
<div class="card border-0 p-0" style="height: 115px; width: 115px; border-radius: 50%; z-index: 5; background: url(
AVATAR_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"></div>
<!--/// Outer frame [LVL 4, SPINS] ///-->
<img class="d-block mx-auto my-auto" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/75393819_T9bW5LwCHDfGkvO.png
" style="position: absolute; width: 150px; opacity: 1; z-index: 5">
<!--/// Inner spinning frame ///-->
<div class="align-items-center justify-content-center" style="position: absolute; width: 116px; z-index: 5">
<i class="fa-spin" style="animation-duration: 26s"><img class="d-block mx-auto my-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75393824_cNfM0cZkOOKtPRh.png"></i>
</div>
<!--/// Inner spinning frame end ///-->
</div>
<!--/// Picture end ///-->
<!--/// Name + link ///-->
<p class="card col-12 border-0 my-2" style="font-weight: bold; font-size: 17px; color: #7efdfe; border-radius: 7px; background: rgba(0, 0, 0, 0.8); display: inline-block">
<a class="nav-link text-truncate px-0" style="font-weight: bold; color: #7efdfe" href="
LINK_PROFILE_HERE">
Name
</a>
</p>
<!--/// Name + link end ///-->
</div>
<!--===/// CHARA [1] end ///===-->
<!--===/// CHARA [2] ///===-->
<div class="col-sm-2">
<!--/// Picture ///-->
<div class="card mx-auto bg-transparent border-0 rounded-0 p-0 align-items-center justify-content-center" style="height: 150px; width: 150px;">
<!--/// Avatar ///-->
<div class="card border-0 p-0" style="height: 115px; width: 115px; border-radius: 50%; z-index: 5; background: url(
AVATAR_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"></div>
<!--/// Outer frame [LVL 4, SPINS] ///-->
<img class="d-block mx-auto my-auto" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/75393819_T9bW5LwCHDfGkvO.png
" style="position: absolute; width: 170px; opacity: 1; z-index: 5">
</div>
<!--/// Picture end ///-->
<!--/// Name + link ///-->
<p class="card col-12 border-0 my-2 text-truncate" style="font-weight: bold; font-size: 17px; color: #7efdfe; border-radius: 7px; background: rgba(0, 0, 0, 0.8); display: inline-block">
<a class="nav-link text-truncate px-0" style="font-weight: bold; color: #7efdfe" href="
LINK_PROFILE_HERE">
Name
</a>
</p>
<!--/// Name + link end ///-->
</div>
<!--===/// CHARA [2] end ///===-->
<!--===/// CHARA [3] ///===-->
<div class="col-sm-2">
<!--/// Picture ///-->
<div class="card mx-auto bg-transparent border-0 rounded-0 p-0 align-items-center justify-content-center" style="height: 150px; width: 150px;">
<!--/// Avatar ///-->
<div class="card border-0 p-0" style="height: 115px; width: 115px; border-radius: 50%; z-index: 5; background: url(
AVATAR_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"></div>
<!--/// Outer frame [LVL 4, SPINS] ///-->
<img class="d-block mx-auto my-auto" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/75393822_s395YZlvX9nJ2IL.png
" style="position: absolute; width: 170px; opacity: 1; z-index: 5">
</div>
<!--/// Picture end ///-->
<!--/// Name + link ///-->
<p class="card col-12 border-0 my-2 text-truncate" style="font-weight: bold; font-size: 17px; color: #7efdfe; border-radius: 7px; background: rgba(0, 0, 0, 0.8); display: inline-block">
<a class="nav-link text-truncate px-0" style="font-weight: bold; color: #7efdfe" href="
LINK_PROFILE_HERE">
Name
</a>
</p>
<!--/// Name + link end ///-->
</div>
<!--===/// CHARA [3] end ///===-->
<!--===/// CHARA [4] ///===-->
<div class="col-sm-2">
<!--/// Picture ///-->
<div class="card mx-auto bg-transparent border-0 rounded-0 p-0 align-items-center justify-content-center" style="height: 150px; width: 150px;">
<!--/// Avatar ///-->
<div class="card border-0 p-0" style="height: 115px; width: 115px; border-radius: 50%; z-index: 5; background: url(
AVATAR_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"></div>
<!--/// Outer frame [LVL 4, SPINS] ///-->
<img class="d-block mx-auto my-auto" src="
https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/75393824_cNf.png
" style="position: absolute; width: 170px; opacity: 1; z-index: 5">
</div>
<!--/// Picture end ///-->
<!--/// Name + link ///-->
<p class="card col-12 border-0 my-2 text-truncate" style="font-weight: bold; font-size: 17px; color: #7efdfe; border-radius: 7px; background: rgba(0, 0, 0, 0.8); display: inline-block">
<a class="nav-link text-truncate px-0" style="font-weight: bold; color: #7efdfe" href="
LINK_PROFILE_HERE">
Name
</a>
</p>
<!--/// Name + link end ///-->
</div>
<!--===/// CHARA [4] end ///===-->
<!--===/// CHARA [5] ///===-->
<div class="col-sm-2">
<!--/// Picture ///-->
<div class="card mx-auto bg-transparent border-0 rounded-0 p-0 align-items-center justify-content-center" style="height: 150px; width: 150px;">
<!--/// Avatar ///-->
<div class="card border-0 p-0" style="height: 115px; width: 115px; border-radius: 50%; z-index: 5; background: url(
AVATAR_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"></div>
</div>
<!--/// Picture end ///-->
<!--/// Name + link ///-->
<p class="card col-12 border-0 my-2 text-truncate" style="font-weight: bold; font-size: 17px; color: #7efdfe; border-radius: 7px; background: rgba(0, 0, 0, 0.8); display: inline-block">
<a class="nav-link text-truncate px-0" style="font-weight: bold; color: #7efdfe" href="
LINK_PROFILE_HERE">
Name
</a>
</p>
<!--/// Name + link end ///-->
</div>
<!--===/// CHARA [5] end ///===-->
</div>
<!--=======/////// RELATIONSHIPS end ///////========-->
</div>
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
PASTE YOUR CHARACTER CODE HERE end
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!-- Divider -->
<div class="row no-gutters mt-5 mb-4">
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, rgba(0, 0, 0, 0), #ffffea, #ffffea)"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="margin-top: -23px; font-size: 30px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
FEATURED GALLERY
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card p-3" style="border-radius: 25px; border-width: 1px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<div class="row no-gutters align-items-center mb-2">
<div class="col-auto">
<a href="https://toyhou.se/CHARA_ID_HERE./gallery" style="font-size: 20px; font-weight: bold; color: #ffffea">
Featured images
</a>
</div>
<div class="col justify-content-center ml-2" style="color: #ffffea; border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<ul class="magnific-gallery image-gallery auto-clear gallery-row large-block-grid-6 justify-content-around">
<!--
THERE ARE 2 DIFFERENT VERSIONS OF THE FEATURED IMAGE GALLERY
The first is very basic, it simply shows the image, and when clicked on, redirects you to the gallery with its full size version, it's the simpler variant of the 2.
Can be found between the commentary "SIMPLE IMAGE SHOWCASE".
The second is way more complex, and requires being able to navigate the code and pay CLOSE ATTENTION to the commentaries left inside it. It mimicks the image viewer and is very tedious to put in place. I would not recommend this version if you do not know what you are doing or do not want to bother with this level of customisation!
Can be found between the commentary "IMAGE VIEWER MIMIC".
I HIGHLY recommend completely removing the version you will not be using so that every image has the same functionality, as well as to avoid getting lost in it, as it's VERY easy to be so. Each version has been put between commentaries as you can see below.
Side note: due to how the interactive element has been implemented, the images are slightly desaturated [by 40% more precisely]. So if you see your images being less vibrant than they actually are, it's perfectly normal!
-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SIMPLE IMAGE SHOWCASE - Delete this entire section if going unsused
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--/// Image ///--><!-- Duplicate this entire "image" section to add an image - maximum of 6 recommended -->
<li class="gallery-item">
<div class="gallery-thumb text-center">
<div class="card border-0 thumb-image" style="border-radius: 10px; background: rgba(0, 0, 0, 0.8)">
<!-- Full image link [aka paste the link from the URL found in the SEARCH BAR when you open the image viewer inside the gallery] -->
<a href="FULL_SIZE_IMAGE_LINK_FROM_GALLERY_HERE"
class="th" style="padding: 6.5px; box-shadow: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 10px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!-- Thumbnail image link from gallery [aka paste the link of the THUMBNAIL - not the full size image itself - by "click right + copy image address" on the THUMBNAIL] -->
<img src="THUMBNAIL_LINK_FROM_IMAGE_HERE"
style="max-height: 200px; border-radius: 5px; object-fit: contain; object-position: center">
</a>
</div>
</div>
</li>
<!--/// Image end ///-->
<!--===///////// SIMPLE IMAGE SHOWCASE end /////////===-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
IMAGE VIEWER MIMIC - Delete this entire section if going unsused
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--/// Image ///--><!-- Duplicate this entire "image" section to add an image - maximum of 6 recommended -->
<li class="gallery-item">
<div class="gallery-thumb text-center">
<div class="card border-0 thumb-image" style="border-radius: 10px; background: rgba(0, 0, 0, 0.8)">
<!-- Full image link [aka paste the link of the FULL SIZE image from the gallery - "click right + copy image address"] -->
<a href="FULL_SIZE_IMAGE_LINK_HERE"
class="th magnific-item" style="padding: 6.5px; box-shadow: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 10px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!-- Thumbnail image link from gallery [aka paste the link of the THUMBNAIL - not the full size image itself - by "click right + copy image address" on the THUMBNAIL] -->
<img src="THUMBNAIL_LINK_FROM_IMAGE_HERE"
style="max-height: 200px; border-radius: 5px; object-fit: contain; object-position: center">
</a>
<!--===/////// IMAGE METADATA ///////===--><!-- Feel free to remove this entire section if you don't need it -->
<div class="magnific-caption hide">
<div class="card rounded-0 border-0 mt-n1" style="color: #ffffea; background-image: url(
LINK_TO_BACKGROUND_IMAGE_HERE
); background-size: cover; background-position: center"><!-- Background link right above -->
<div class="card rounded-0 p-3" style="border-width: 2px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<!--===/// BUTTONS ///===-->
<div class="row no-gutters align-items-center mt-n2 mb-2">
<div class="col-auto"><p class="mt-3" style="font-size: 20px; font-weight: bold">Details</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto">
<ul class="nav nav-button nav-justified justify-content-left mt-1 flex-wrap">
<!--=== FULL SIZE IMAGE BUTTON ===-->
<li class="mx-1 card border-0 align-items-center" style="padding: 2px; width: 50px; height: 50px; border-radius: 11px; background: rgba(0, 0, 0, 0.8)">
<div class="gallery-item">
<div class="gallery-thumb">
<div class="card border-0 thumb-image bg-transparent" style="position: absolute; left: 2px; width: 46px; height: 46px">
<!-- Full size image link [aka copy the image ID - it's the numbers found at the end of the URL after the '#'] -->
<a href="https://toyhou.se/~images/IMAGE_ID_HERE"
class="th m-auto justify-content-center" style="padding: 6px; color: #ffffe9; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 2px solid #ffffe9; border-radius: 9px; box-shadow: 0 0 5px rgba(255, 255, 233, 0.5), inset 0 0 5px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!--=== BUTTON ICON ===-->
<i class="fas fa-link
" style="font-size: 25px"></i>
</a>
</div>
</div>
</div>
</li>
<!--=== FULL SIZE IMAGE BUTTON end ===-->
<!--=== EDIT IMAGE BUTTON ===-->
<li class="mx-1 card border-0 align-items-center" style="padding: 2px; width: 50px; height: 50px; border-radius: 11px; background: rgba(0, 0, 0, 0.8)">
<div class="gallery-item">
<div class="gallery-thumb">
<div class="card border-0 thumb-image bg-transparent" style="position: absolute; left: 2px; width: 46px; height: 46px">
<!-- Full size image link [aka copy the image ID - it's the numbers found at the end of the URL after the '#'] -->
<a href="https://toyhou.se/~images/edit/IMAGE_ID_HERE"
class="th m-auto justify-content-center" style="padding: 6px; color: #ffffe9; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 2px solid #ffffe9; border-radius: 9px; box-shadow: 0 0 5px rgba(255, 255, 233, 0.5), inset 0 0 5px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!--=== BUTTON ICON ===-->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96663874_TlSEdTha2UZZpgi.png?1741029340" width="33">
</a>
</div>
</div>
</div>
</li>
<!--=== EDIT IMAGE BUTTON end ===-->
</ul>
</div>
</div>
<!--===/// BUTTONS end ///===-->
<p class="mt-n3 mb-2" style="color: #cdcfc3">
Viewing full image.
</p>
<!--===/// OPTIONAL CAPTION ///===--><!-- Remove this entire section if going unused, or just write "No caption" -->
<div class="mt-3">
<p style="font-size: 20px; font-weight: bold">Caption</p>
<p class="mt-n2" style="color: #cdcfc3">
Caption here.
</p>
</div>
<!--===/// OPTIONAL CAPTION ///===-->
<div class="row">
<!--===/// IMAGE CREDITS ///===-->
<div class="col-md-6 mt-3">
<p style="font-size: 20px; font-weight: bold">Credits</p>
<p class="mt-n2" style="color: #cdcfc3">
<!-- Date -->
1 Jan 2024, 12:12:12 am
</p>
<p class="mx-n2 mt-n2">
<!-- Username [star/premium] -->
<a class="m-2" style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/Username">
<i class="fi-star user-name-icon"></i>Username
</a>
<!-- Username [torso/normal] -->
<a class="m-2" style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/Username">
<i class="fi-torso user-name-icon"></i>Username
</a>
<!-- Username [external link] -->
<a class="m-2" style="font-weight: bold; color: #7efdfe" href=
"EXTERNAL_LINK_HERE">
Username<i class="fa-solid fa-up-right-from-square ml-1" style="font-size: 10px"></i>
</a>
</p>
</div>
<!--===/// IMAGE CREDITS end ///===-->
<!--===/// TAGGED CHARACTERS ///===-->
<div class="col-md-6 mt-3">
<p style="font-size: 20px; font-weight: bold">Characters</p>
<div class="row no-gutters mx-n1 mt-1" style="margin-top: -12px">
<!--===/// NAME ///===--><!-- Duplicate this entire "name" section to add a character/tab/gallery -->
<div class="col-auto mx-1">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="font-weight: bold; border-radius: 8px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="LINK_TO_TAB_CHARA_OR_GALLERY_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 8px; z-index: 5"></span>
<!--=== Name ===-->
Character/tab/gallery name
</a>
</div>
</div>
</div>
<!--===/// NAME end ///===-->
</div>
</div>
<!--===/// TAGGED CHARACTERS end ///===-->
</div>
</div>
</div>
</div>
<!--===/////// IMAGE METADATA end ///////===-->
</div>
</div>
</li>
<!--/// Image end ///-->
<!--===///////// IMAGE VIEWER MIMIC end /////////===-->
</ul>
</div>
<!--===/// FEATURED GALLERY end ///===-->
</div>
<!--===////// MAIN CODE end //////===-->
</div>
</div>
<!--===///////// FOOTER /////////===-->
<div class="mt-auto px-3 pb-3" style="width: 100%">
<div class="card justify-content-center align-items-center" style="height: 90px; color: rgba(255, 255, 239, 0.5); border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7); z-index: 50">
<p class="text-center" style="font-size: 12px; line-height: 25px">Code by FlowerlyRat layout ©
<a href="https://thatgamecompany.com/" style="color: #7efdfe">thatgamecompany</a><br>
<a href="https://toyhou.se/~about" class="mr-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">About</a>
<a href="https://toyhou.se/~faq/general" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">FAQ</a>
<a href="https://toyhou.se/~tickets" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">HelpDesk</a>
<a href="https://toyhou.se/~rules" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">Rules</a>
<a href="https://toyhou.se/~tos" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">ToS</a>
<a href="https://toyhou.se/~browse/search" class="ml-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">Search</a>
</p>
</div>
</div>
<!--===///////// FOOTER end /////////===-->
</div>
<!--====/////CREDITS WINDOW//////====-->
<div class="collapse fade" id="CREDIT" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; color: #ffffea; z-index: 1100">
<div id="ACC-CREDIT" class="card bg-faded border-0 rounded-0 p-3" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.7)">
<div class="mx-auto sticky-top" style="min-width: 55%">
<div class="card align-items-center" style="margin-top: 120px; border-radius: 25px 25px 0 0; border-width: 1px 1px 0 1px; border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.8); z-index: 5">
<!--Close button-->
<div style="position: absolute; top: 10px; right: 25px">
<a data-toggle="collapse" href="#CREDIT"><i class="fas fa-times" style="font-size: 25px; color: #ffffea"></i></a>
</div>
<!--Close button end-->
<div class="row no-gutters">
<!--Buttons-->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 40px; height: 40px; cursor: pointer">
<i class="far fa-code" style="font-size: 20px; color: #ffffea; opacity: 0.6; text-shadow: 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745"></i>
<div class="collapse fade show CODE" data-parent="#ACC-CREDIT" style="position:absolute; top:0; left:0; right:0; bottom:0;">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea;background: rgba(0, 0, 0, 0)">
<i class="far fa-code" style="margin-top: 2px; font-size: 20px; color: #ffffea; text-shadow: 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745"></i>
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none" data-toggle="collapse" data-target=".CODE"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 40px; height: 40px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96599998_5kOvqGuUpH9aIfH.png" width="25px" style="opacity: 0.6">
<div class="collapse fade IMAGE" data-parent="#ACC-CREDIT" style="position:absolute; top:0; left:0; right:0; bottom:0;">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea;background: rgba(0, 0, 0, 0)">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96599998_5kOvqGuUpH9aIfH.png" width="25px" style="margin-top: 2px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none" data-toggle="collapse" data-target=".IMAGE"></a>
</div>
</li>
</ul>
</div>
<!--Buttons end-->
</div>
</div>
<div class="card p-3 pb-4" style="height: 300px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.7)">
<!--///Code credits///-->
<div class="collapse fade show active CODE" data-parent="#ACC-CREDIT">
<div class="row no-gutters align-items-center mt-3">
<div class="col-auto"><p style="font-size: 15px; font-weight: bold">Code credits</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<!--Text-->
<p class="mt-4">
<b>Code:</b> <a style="font-weight: bold; color: #7efdfe" href="https://toyhou.se/FlowerlyRat"><i class="fi-torso user-name-icon"></i>FlowerlyRat</a><br>
<b>Layout:</b> Based on the game Sky: Children of the Light's UI<br>
<b>Other codes:</b> <a style="font-weight: bold; color: #ff7e01" href="https://toyhou.se/FlowerlyRat/characters/folder:4673560">Folder</a>
</p>
<!--Text end-->
</div>
<!--///Code credits///-->
<!--///Image credits///-->
<div class="collapse fade IMAGE" data-parent="#ACC-CREDIT">
<div class="row no-gutters align-items-center mt-3">
<div class="col-auto"><p style="font-size: 15px; font-weight: bold">Image credits</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<!--Text-->
<p class="mt-4">
<b>Background image:</b> Sky: Children of the Light © thatgamecompany<br>
<b>Icons:</b> <a href="https://fontawesome.com/v6/search" style="font-weight: bold; color: #ff7e01">FontAwesome</a>, Sky: Children of the Light<br>
<b>Flags/ribbons:</b> taken from CoraMagics' <a href="https://toyhou.se/20187371." style="font-weight: bold; color: #ff7e01">Ribbon Masterlist</a>
</p>
<!--Text end-->
</div>
<!--///Image credits///-->
<div class="row no-gutters" style="position: absolute; bottom: -3px; left: 27px; right: 27px; opacity: 0.3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
</div>
</div>
</div>
<!--====/////CREDITS WINDOW end//////====-->
</div>
</div>
<!-- Code container -->
</div>
</div>
</div>
</div>Copy
<!--
╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
△▽/╱╱╱╱╱╱╱╱╱╱╱╰━╯
Ultimate Sky: Children of the Light profile bundle [CSS emulator V2 - character profile: abridged version]: code by FlowerlyRat || Inspired from TheFaerieMerchant's CSS emulators || Based on the game Sky: Children of the Light's UI by ThatGameCompany
> It is HIGHLY recommended to use circlejourney's ToyHouse live editor to see what you're doing!!!! -> https://th.circlejourney.net/
Any links added use the following formats [target="_blank" is optional]:
Blue variant [to link characters, groups, species, and entities]:
<a style="font-weight: bold; color: #7efdfe" href="LINK_HERE">text_here</a>
Orange variant [to link everything else]:
<a style="font-weight: bold; color: #ff7e01" href="LINK_HERE">text_here</a>
Any areas that need the character's ID have the "CHARA_ID_HERE" placeholder -> to replace everything at once, highlight "CHARA_ID_HERE", then do ctrl+F and replace it with your character's.
Pop-up for the credits collapsible is at the end of the code.
> I cannot guarantee compatibility with actual custom CSS codes.
Code is compatible with the "Sky: Children of the Light candle UI" add-on.
Instructions to add them is given in the profile itself -> https://toyhou.se/23648694.misc-sky-cotl-candle-ui/25906098.
Code is also compatible with the "Sky quests!" add-on.
To add it, please copy and paste the code between the "FUN LINKS" commentaries below, between the "MAIN CHARACTER CODE HERE" commentaries.
-> https://toyhou.se/32862504.snip-sky-quests/32862518.code
Multiple background images have been screenshoted from the game to give a wide variety of possibilities [ToyHouse gallery: https://toyhou.se/25042050./gallery || Google Drive: https://drive.google.com/drive/folders/12YBvvXe9MoIYj9oUo8MVpngCojj8vCv3?usp=sharing], however if none of them suit your taste or vision, please go on and take your own in-game.
!!! TO BE WARNED !!!
This code has a hidden section intended for mobile users, so be sure to also modify it with the sidebar!
-->
<div class="flex-row justify-content-end sp-top-inner" style="left: -40vw; z-index: 5">
<div style="width: 100vw">
<div class="ml-md-3">
<!--///BACKGROUND IMAGE///-->
<div class="card bg-dark rounded-0 border-0 col-lg-12" style="overflow: hidden; position: fixed; bottom: 0; top: 0; left: 0; background-image: url(
LINK_TO_BACKGROUND_IMAGE_HERE
); background-size: cover; background-position: center"></div>
<div class="row no-gutters">
<!-- Code container -->
<div class="col-12 ">
<div class="card bg-transparent border-0 rounded-0 mx-auto">
<div class="card bg-transparent rounded-0 border-0" style="min-height: 100vh">
<div class="container pl-md-0" style="max-width: 100%">
<div class="row no-gutters">
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
COMPUTER SIDEBAR
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-md-2 hidden-sm-down" style="color: #ffffea">
<div class="card rounded-0 p-2 h-100" style="margin-left: -1px; border-width: 0 1px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
AVATAR [computer]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-auto my-2" style="height: 150px; width: 150px">
<div class="card bg-dark border-0 p-0" style="position: absolute; height: 115px; width: 115px; border-radius: 50%; z-index: 1; background: url(
AVATAR_IMAGE_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"><!--PFP IMAGE LINK ABOVE--></div>
<!--///Outer frame///--><!--Check [https://toyhou.se/23579684.misc-sky-cotl-avatar-frame] for more borders and meaning explanation-->
<img class="d-block mx-auto my-auto" style="position: absolute; opacity: 1; z-index: 5" src=
"https://f2.toyhou.se/file/f2-toyhou-se/images/71211585_IQYjqdDDaiOOeid.png">
<!--///Inner spinning frame///--><!-- Feel free to delete -->
<div class="align-items-center justify-content-center" style="position: absolute; width: 123px; z-index: 5">
<i class="fa-spin" style="animation-duration: 26s; opacity: 1"><img class="d-block mx-auto my-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/images/71211558_s1BGtB1nlee2eVn.png"></i>
</div>
<!--///Inner spinning frame end///-->
</div>
<!--===////// AVATAR end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER NAME [computer]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE."
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-sparkles fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// CHARACTER NAME [computer] end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
FOLDER LINK
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/FlowerlyRat/characters/folder:FOLDER_ID"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Folder name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-folder fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// FOLDER LINK end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BLURB [computer]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card" style="padding: 15px; font-size: 0.8em; color: #cdcfc3; border-radius: 23px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<p>
This is a blurb, feel free to delete it tho
</p>
</div>
<!--===////// BLURB [computer] end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SOCIAL LINKS [computer] - duplicate the "SOCIAL LINK" section to add a platform - can be used to add links to an Art Fight profile, playlist, etc
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<ul class="nav nav-button nav-justified justify-content-around mt-2 flex-wrap">
<!--=== SOCIAL LINK ===-->
<li>
<div class="gallery-thumb">
<div class="thumb-image justify-content-center align-items-center" style="width: 35px; height: 35px; font-weight: bold; border-radius: 10px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="SOCIAL_LINK_HERE" title="SOCIAL_NAME_HERE"
class="th tooltipster" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 10px; box-shadow: 0 0 8px rgba(255, 255, 233, 0.5), inset 0 0 8px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!--=== BUTTON ICON ===-->
<i class="fas fa-link
" style="font-size: 13px"></i>
</a>
</div>
</div>
</li>
<!--=== SOCIAL LINK end===-->
</ul>
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BONUS LINKS [computer] - duplicate the "ADDITIONAL SIDE LINK" section to add a link
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--===////// ADDITIONAL SIDE LINK //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="LINK_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Link name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-link fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// ADDITIONAL SIDE LINK end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SIDEBAR BUTTONS - tabs require their own links with their own ID
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--===////// TAB 1 //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="LINK_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Tab 1
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-bookmark fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// TAB 1 end //////===-->
<div class="my-1 mb-2 mx-2" style="border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<!--===////// TAB 2 //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="LINK_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Tab 2
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="far fa-bookmark fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// TAB 2 end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--===////// GALLERY //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./gallery"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Gallery
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-image fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// GALLERY end //////===-->
<!--===////// LIBRARY //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./literatures"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Library
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-book fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// LIBRARY end //////===-->
<!--===////// WORLDS //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./worlds"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Worlds
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-globe fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// WORLDS end //////===-->
<!--===////// LINKS //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./links"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Links
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-link fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// LINKS end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--===////// COMMENTS //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./comments"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Comments
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-comment fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// COMMENTS end //////===-->
<!--===////// FAVORITE //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./comments"
class="th" data-toggle="th-favorite" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="favorite toggle-favorite" style="position: absolute; top: 8px; right: 12.5px; z-index: 5">
<span style="position: absolute; left: -189px">Favorite</span>
<i class="fal fa-sparkle"></i>
</span>
<span class="unfavorite toggle-favorite" style="position: absolute; top: 8px; right: 12.5px; z-index: 5">
<span style="position: absolute; left: -189px">Unfavorite</span>
<i class="fas fa-sparkle"></i>
</span>
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9"></div>
<div class="col justify-content-end align-items-center">
<div class="card border-0" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57"></div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// FAVORITE end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--===////// OWNERSHIP //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./ownership"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Ownership
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-check-square fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// OWNERSHIP end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--===////// REPORT //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/~tickets/create/character/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Report
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-warning fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// REPORT end //////===-->
<!--===////// BLOCK //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./block"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Block
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-cancel fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// BLOCK end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<div class="accordion container p-0" id="accordion">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="#MANAGE"
class="th" data-toggle="collapse" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Manage character
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-caret-right fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div id="MANAGE" class="collapse" data-parent="#accordion">
<!--===AVATAR===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/avatar/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Avatar
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-image fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===AVATAR end===-->
<!--===EDIT PROFILE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/edit/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Edit profile
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-pencil fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===EDIT PROFILE end===-->
<!--===TABS===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/tabs/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Tabs
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-bookmark fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===TABS end===-->
<!--===HISTORY===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/history/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
History
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-history fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===HISTORY end===-->
<div class="my-3 ml-3" style="border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<!--===WARNINGS===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/warnings/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Warnings
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-warning fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===WARNINGS end===-->
<!--===ACCESS KEYS===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/keys/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Access keys
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-key fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===ACCESS KEYS end===-->
<!--===TRADE LISTING===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/trade-listing/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Trade listing
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-handshake fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===TRADE LISTING end===-->
<div class="my-3 ml-3" style="border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<!--===DELETE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/delete/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Delete
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-trash fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===DELETE end===-->
</div>
<!--=== CHARACTER end ===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
IMAGES
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="#MANAGE-IMG"
class="th" data-toggle="collapse" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Manage images
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-caret-right fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div id="MANAGE-IMG" class="collapse" data-parent="#accordion">
<!--===UPLOAD IMAGE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~images/upload/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Upload image
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-plus fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===UPLOAD IMAGE end===-->
<!--===MANAGE IMAGES===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~images/manage-character/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Manage images
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-image fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===MANAGE IMAGES end===-->
<!--===SORT IMAGES===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~images/sort/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Sort images
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-random fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===SORT IMAGES end===-->
</div>
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
LITERATURES
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="#MANAGE-LIT"
class="th" data-toggle="collapse" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Manage literatures
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-caret-right fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div id="MANAGE-LIT" class="collapse" data-parent="#accordion">
<!--===ADD LITERATURE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~literatures/create/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Upload literature
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-plus fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===ADD LITERATURE end===-->
<!--===SORT LITERATURE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~literatures/sort/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Sort literatures
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-random fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===SORT LITERATURE end===-->
</div>
<!--=== LITERATURES end ===-->
</div>
</div>
</div>
<!--===/////////////////////////////////// COMPUTER SIDEBAR end ///////////////////////////////////===-->
<!--===////// MAIN CODE //////===-->
<div class="col-md-10 mx-auto pt-md-3 pl-md-3 h-100">
<!-- Utility buttons [computer] -->
<ul class="nav nav-button align-items-center justify-content-end mt-3 mr-2 hidden-sm-down" style="margin-bottom: 22px">
<!--///Creation information button///-->
<li class="mx-4">
<a data-toggle="collapse" href="#CREA" style="box-shadow: none; color: #ffffea">
<i class="fa fa-info-circle mt-1" style="font-size: 30px; color: #fdf8da; text-shadow: 0 0 2px #713745, 0 0 2px #713745"></i>
</a>
</li>
<!--Credits button-->
<li>
<a data-toggle="collapse" href="#CREDIT">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96600008_K9c0uSM4k7pfpXi.png" width="35">
</a>
</li>
</ul>
<!-- Utility buttons [computer] -->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
UPPER CARD ON PHONE
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card pt-3 p-2 hidden-sm-up mb-4 rounded-0" style="margin-left: -15px; margin-right: -15px; color: #ffffea; border-width: 0 0 1px 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<!-- Utility buttons [phone] -->
<ul class="nav nav-button align-items-center justify-content-end mr-2 hidden-sm-up" style="margin-bottom: 22px">
<!--///Creation information button///-->
<li class="mx-4">
<a data-toggle="collapse" href="#CREA" style="box-shadow: none; color: #ffffea">
<i class="fa fa-info-circle mt-1" style="font-size: 30px; color: #fdf8da; text-shadow: 0 0 2px #713745, 0 0 2px #713745"></i>
</a>
</li>
<!--Credits button-->
<li>
<a data-toggle="collapse" href="#CREDIT">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96600008_K9c0uSM4k7pfpXi.png" width="35">
</a>
</li>
</ul>
<!-- Utility buttons [phone] -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
AVATAR [phone]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-auto hidden-sm-up mt-n5 mb-2" style="height: 150px; width: 150px">
<div class="card bg-dark border-0 p-0" style="position: absolute; height: 115px; width: 115px; border-radius: 50%; z-index: 1; background: url(
AVATAR_IMAGE_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"><!--PFP IMAGE LINK ABOVE--></div>
<!--///Outer frame///--><!--Check [https://toyhou.se/23579684.misc-sky-cotl-avatar-frame] for more borders and meaning explanation-->
<img class="d-block mx-auto my-auto" style="position: absolute; opacity: 1; z-index: 5" src=
"https://f2.toyhou.se/file/f2-toyhou-se/images/71211585_IQYjqdDDaiOOeid.png">
<!--///Inner spinning frame///--><!-- Feel free to delete -->
<div class="align-items-center justify-content-center" style="position: absolute; width: 123px; z-index: 5">
<i class="fa-spin" style="animation-duration: 26s; opacity: 1"><img class="d-block mx-auto my-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/images/71211558_s1BGtB1nlee2eVn.png"></i>
</div>
<!--///Inner spinning frame end///-->
</div>
<!--===////// AVATAR end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER NAME [phone]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE."
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-sparkles fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// CHARACTER NAME [phone] end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BLURB [phone]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card" style="padding: 15px; font-size: 0.8em; color: #cdcfc3; border-radius: 23px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<p>
This is a blurb, feel free to delete it tho
</p>
</div>
<!--===////// BLURB [phone] end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SOCIAL LINKS [computer] - duplicate the "SOCIAL LINK" section to add a platform - can be used to add links to an Art Fight profile, playlist, etc
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<ul class="nav nav-button nav-justified justify-content-around mt-2 flex-wrap">
<!--=== SOCIAL LINK ===-->
<li>
<div class="gallery-thumb">
<div class="thumb-image justify-content-center align-items-center" style="width: 35px; height: 35px; font-weight: bold; border-radius: 10px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="SOCIAL_LINK_HERE" title="SOCIAL_NAME_HERE"
class="th tooltipster" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 10px; box-shadow: 0 0 8px rgba(255, 255, 233, 0.5), inset 0 0 8px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!--=== BUTTON ICON ===-->
<i class="fas fa-link
" style="font-size: 13px"></i>
</a>
</div>
</div>
</li>
<!--=== SOCIAL LINK end===-->
</ul>
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BONUS LINKS [phone] - duplicate the "ADDITIONAL SIDE LINK" section to add a link
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--===////// ADDITIONAL SIDE LINK //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="LINK_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Link name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-link fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// ADDITIONAL SIDE LINK end //////===-->
</div>
<!--===/// UPPER CARD PHONE end ///===-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER CREATION INFO
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="collapse fade mt-1 mb-3" id="CREA" style="color: #ffffea">
<div class="col row no-gutters hidden-sm-up mt-n2 mb-3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<div class="row no-gutters">
<div class="col-md-9 card order-md-2 px-3" style="border-radius: 8px; border-width: 1px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<!--Close button-->
<div class="justify-content-end mt-3">
<a data-toggle="collapse" href="#CREA"><i class="fas fa-times" style="font-size: 25px; color: #ffffea"></i></a>
</div>
<!--Close button end-->
<div class="row">
<!--===/// CREATION INFO ///===-->
<div class="col-md-5 pr-3 mr-n2" style="height: 155px; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<!--===CREATED===-->
<div class="row mb-2">
<div class="col-4" style="font-weight: bold">
<p>Created</p>
</div>
<div class="col">
<!--Date-->
<p>
1 Jan 2024, 1:20:30 am
</p>
</div>
</div>
<!--===CREATED end===-->
<!--===CREATOR===-->
<div class="row mb-2">
<div class="col-4" style="font-weight: bold">
<p>Creator</p>
</div>
<div class="col">
<!--Username-->
<a style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/Username">
<i class="fi-star user-name-icon"></i>Username
</a>
</div>
</div>
<!--===CREATOR end===-->
<!--===DESIGNERS===-->
<div class="row mb-2">
<div class="col-4" style="font-weight: bold">
<p>Designers</p>
</div>
<div class="col">
<!--Username-->
<!--Username [external link]-->
<a style="font-weight: bold; color: #7efdfe" href=
"EXTERNAL_LINK_HERE">
Username<i class="fa-solid fa-up-right-from-square ml-1" style="font-size: 10px"></i>
</a>
</div>
</div>
<!--===DESIGNERS end===-->
<!--===OWNER===-->
<div class="row mb-2">
<div class="col-4" style="font-weight: bold">
<p>Owner</p>
</div>
<div class="col">
<!--Username-->
<a style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/Username">
<i class="fi-torso user-name-icon"></i>Username
</a>
</div>
</div>
<!--===OWNER end===-->
</div>
<!--===/// CREATION INFO end ///===-->
<!--===/// Divider ///===-->
<div class="col row no-gutters hidden-sm-up my-2 mb-3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<div class="col-auto hidden-sm-down mr-n4">
<div style="height: 41%; border-width: 0 0 0 1px; border-style: solid"></div>
<div class="border-0 rounded-0 my-1">
<p style="margin-left: -3.4px; font-size: 10px">◆</p>
</div>
<div style="height: 41%; border-width: 0 0 0 1px; border-style: solid"></div>
</div>
<!--===/// Divider end ///===-->
<!--===/// TAGS ///===-->
<div class="col-md card bg-transparent border-0 rounded-0">
<div class="pr-3 mr-n3" style="height: 155px; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<!--Tag 1-->
<div class="card border-0 px-1 mb-1" style="border-radius: 5px; background: #ffffea; display: inline-block">
<a style="font-weight: bold; color: #000" href=
"TAG_LINK_HERE">
tag 1
</a>
</div>
<!--Tag 1 end-->
<!--Tag 2-->
<div class="card border-0 px-1 mb-1" style="border-radius: 5px; background: #ffffea; display: inline-block">
<a style="font-weight: bold; color: #000" href=
"TAG_LINK_HERE">
tag 2
</a>
</div>
<!--Tag 2 end-->
<!--Tag 3-->
<div class="card border-0 px-1 mb-1" style="border-radius: 5px; background: #ffffea; display: inline-block">
<a style="font-weight: bold; color: #000" href=
"TAG_LINK_HERE">
tag 3
</a>
</div>
<!--Tag 3 end-->
</div>
</div>
<!--===/// TAGS end ///===-->
</div>
</div>
<div class="col-md card mr-md-2 mt-md-0 mt-2 order-md-1" style="height: 200px; border-radius: 8px; border-width: 1px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<div class="card bg-transparent border-0 rounded-0 my-auto p-3" style="height: 200px; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="row no-gutters text-center">
<!--===/// Creator ribbons ///===-->
<!-- ||[ 1 ]|| -->
<div class="col-4 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description"><!-- Don't make the tooltips too long, otherwise they won't display! -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 1 ]|| -->
<!--===/// Creator ribbons end ///===-->
</div>
</div>
</div>
</div>
<div class="col row no-gutters hidden-sm-up mt-3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
<!--===/// CHARACTER CREATION INFO end ///===-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
PASTE YOUR CHARACTER CODE HERE
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!-- [REMINDER]
> I cannot guarantee compatibility with actual custom CSS codes.
-->
<div class="card bg-transparent border-0 rounded-0 mb-n4" style="color: #ffffea">
<!-- Change the image link for the main background right above this line -->
<div class="mt-4" style="margin-bottom: 20px">
<!--===/// WINGED LIGHT COUNT ///===-->
<img class="d-block mx-auto tooltipster" data-placement="bottom" title="
200
" src="https://f2.toyhou.se/file/f2-toyhou-se/images/72538958_Qzn1IfB8liC2Y5H.png" style="height: 50px">
<!--===/// WINGED LIGHT COUNT end ///===-->
</div>
<!--=======/////// FUN LINKS ///////========-->
<!--=======/////// FUN LINKS end ///////========-->
<div class="row no-gutters align-items-end mt-4">
<!--/// Right column sticky ///-->
<div class="col-md h-100 mt-auto">
<div class="card bg-transparent rounded-0 border-0 mb-3">
<p class="text-center" style="font-weight: bold; font-size: 30px; text-shadow: 0 0 5px #000, 0 0 3px #000">
Name
</p>
<!--===/// Quote ///===-->
<div class="card bg-transparent border-0 rounded-0 align-items-center">
<div class="card border-0 my-2" style="padding: 10px; max-height: 75px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<p>"
This is a very cool and epic quote woa<br>
This box will scroll after a certain height!
"</p>
</div>
</div>
<!--===/// Quote end ///===-->
<!--===/// Basic ///===-->
<div class="card border-0 my-2" style="padding: 10px; max-height: 168px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<!-- Age -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Age</p></div>
<div class="col-auto ml-auto"><p>
##
</p></div>
</div>
<!-- Age end -->
<!-- Height -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Height</p></div>
<div class="col-auto ml-auto"><p><a style="font-weight: bold; color: #ff7e01" href="https://www.reddit.com/media?url=https%3A%2F%2Fi.redd.it%2Fyazzlze83qh41.jpg">
#
</a></p></div>
</div>
<!-- Height end -->
<!-- Gender -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Gender</p></div>
<div class="col-auto ml-auto"><p>
content
</p></div>
</div>
<!-- Gender end -->
<!-- Pronouns -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Pronouns</p></div>
<div class="col-auto ml-auto"><p>
pro/nouns
</p></div>
</div>
<!-- Pronouns end -->
<!-- Orientation -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Orientation</p></div>
<div class="col-auto ml-auto"><p>
<!--
Change the link and tooltip titles to the appropriate ones
Copy and paste the "<a>" tag to add another flag
-->
<a data-toggle="tooltip" title="LGBT+">
<img width="30px"
src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/0b1cb6ed-b614-4d6f-a792-6e2d2db50e49/df12p8i-5148214b-27e1-4cea-b418-420e2c629e25.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzBiMWNiNmVkLWI2MTQtNGQ2Zi1hNzkyLTZlMmQyZGI1MGU0OVwvZGYxMnA4aS01MTQ4MjE0Yi0yN2UxLTRjZWEtYjQxOC00MjBlMmM2MjllMjUucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.bfUU644_Y-XtP6mk5Iw-rkWSCGz48RVRya12UOkjtMA"></a>
<a data-toggle="tooltip" title="Queer">
<img width="30px"
src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/0b1cb6ed-b614-4d6f-a792-6e2d2db50e49/df12p7u-5aae0688-c8e6-408f-9360-bfe27b1b9397.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzBiMWNiNmVkLWI2MTQtNGQ2Zi1hNzkyLTZlMmQyZGI1MGU0OVwvZGYxMnA3dS01YWFlMDY4OC1jOGU2LTQwOGYtOTM2MC1iZmUyN2IxYjkzOTcucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.VfwaRcQsMLGFHptAVp77zWeA-p1LT_DE8YRuyXVWmuw"></a>
</p></div>
</div>
<!-- Orientation end -->
</div>
<!--===/// Basic end ///===-->
<!--===/// Decorative controls ///===-->
<div class="row no-gutters mt-2 mb-md-3 mb-2">
<div class="col">
<div class="card" style="padding: 10px; border-radius: 30px 0 0 30px; border-width: 1px 0 1px 1px; border-color: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.5)">
<div class="row no-gutters">
<div class="col-4">
<p class="justify-content-between pl-2 pr-3">
<img class="fa-flip-horizontal" src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574399_ISOXkfgYQFhmHqy.png" width="25" style="opacity: 0.5">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574399_ISOXkfgYQFhmHqy.png" width="25" style="opacity: 0.5">
</p>
</div>
<div class="my-n1" style="border-width: 0 1px 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<div class="col">
<p class="justify-content-between px-3" style="font-size: 25px">
<a class="mb-n2" style="margin-top: -10px" href="#" data-toggle="th-favorite">
<span class="favorite toggle-favorite">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574328_c1SwrAQE2AwiKXr.png" width="25">
</span>
<span class="unfavorite toggle-favorite">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574352_AVC7CTgM30PYCuZ.png" width="25">
</span>
</a>
<span style="font-size: 12px"><img class="mr-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574424_pTAU3yttAd8jqPl.png" width="25">0</span>
</p>
</div>
<div class="my-n1" style="border-width: 0 1px 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<div class="col-auto">
<p class="justify-content-between pl-4 pr-3" style="font-size: 25px">
<i class="fas fa-ellipsis" style="text-shadow: 0 0 3px #684647, 0 0 3px #684647"></i>
</p>
</div>
</div>
</div>
</div>
<div class="card rounded-0" style="padding: 0.5px; border-width: 1px 0; border-color: rgba(0, 0, 0, 0.8); background-color: rgba(255, 255, 239, 0.5)"></div>
<div class="col-auto mx-auto">
<div class="card h-100 justify-content-center" style="padding-left: 13px; padding-right: 13px; font-size: 15px; border-width: 1px 1px 1px 0; border-radius: 0 30px 30px 0; border-color: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.7)">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</div>
<!--===/// Decorative controls end ///===-->
</div>
</div>
<!--/// Right column sticky end ///-->
<!--/// Middle column ///-->
<div class="col-md-3">
<!--/// Full body image ///--><!-- You may play with the max and min height if your image doesn't look correctly proportioned -->
<div class="card bg-transparent border-0 rounded-0 mx-md-1">
<img class="d-block mx-auto mb-3" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/69495205_Ir72I07ys8SlDvP.png
" style="max-height: 470px; min-height: 350px; object-fit: cover; object-position: center; "><!--
If the full body gets muddied with the background, add the following snippet to the style to add a white border around it:
filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-0.5px 0px 0 #fff) drop-shadow(-0px -0px 0 #fff) drop-shadow(-0px -0.5px 0 #fff)
-->
</div>
<!--/// Full body image end ///-->
</div>
<!--/// Middle column end ///-->
<!--/// Left column ///-->
<div class="col-md my-3 h-100 mt-auto">
<!--===/// Description ///===-->
<div class="mb-3">
<!-- Title -->
<div class="card py-3 px-4" style="border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters align-items-center">
<div class="col-auto"><p style="font-weight: bold; font-size: 17px">Quick description</p></div>
<div class="col justify-content-center mx-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.1"></div>
<!-- Title end -->
<!-- Content -->
<div class="card" style="height: 255px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 255px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-4 pb-4">
<!-- Text -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Subheader
</span><br><!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
A place to write a quick description about your ocs! For when you don't have a lot of information, or otherwise don't want to share a lot of it. It's to keep it at the bear minimum :] If you're looking for way more information I would suggest looking at the other codes in this bundle!
</p>
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Subheader
</span><br><!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Also hey look! A subheader to write even more things or better organise this box!!! Very cool and neat hehehe. This ends up scrolling!
</p>
<!-- Text end -->
</div>
</div>
</div>
<!-- Content end -->
<!--===/// Description end ///===-->
</div>
</div>
<!--/// Left column end ///-->
</div>
<!--=======/////// RELATIONSHIP DIVIDER ///////========-->
<div class="row no-gutters my-3">
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, rgba(0, 0, 0, 0), #ffffea, #ffffea)"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="margin-top: -23px; font-size: 30px">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!--=======/////// RELATIONSHIP DIVIDER end ///////========-->
<!--=======/////// SECTION TITLE ///////========-->
<div class="card p-3 mb-4 text-center" style="border-radius: 10px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<h1 class="mt-1">Friendship constellation</h1>
<p style="font-size: 15px; color: #cdcfc3">Relationships</p>
</div>
<!--=======/////// SECTION TITLE end ///////========-->
<!--=======/////// RELATIONSHIPS ///////========-->
<div class="row no-gutters justify-content-around text-center mb-3">
<!--===/// CHARA [1] ///===-->
<div class="col-sm-2">
<!--/// Picture ///-->
<div class="card mx-auto bg-transparent border-0 rounded-0 p-0 align-items-center justify-content-center" style="height: 150px; width: 150px;">
<!--/// Avatar ///-->
<div class="card border-0 p-0" style="height: 115px; width: 115px; border-radius: 50%; z-index: 5; background: url(
AVATAR_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"></div>
<!--/// Outer frame [LVL 4, SPINS] ///-->
<img class="d-block mx-auto my-auto" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/75393819_T9bW5LwCHDfGkvO.png
" style="position: absolute; width: 150px; opacity: 1; z-index: 5">
<!--/// Inner spinning frame ///-->
<div class="align-items-center justify-content-center" style="position: absolute; width: 116px; z-index: 5">
<i class="fa-spin" style="animation-duration: 26s"><img class="d-block mx-auto my-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75393824_cNfM0cZkOOKtPRh.png"></i>
</div>
<!--/// Inner spinning frame end ///-->
</div>
<!--/// Picture end ///-->
<!--/// Name + link ///-->
<p class="card col-12 border-0 my-2" style="font-weight: bold; font-size: 17px; color: #7efdfe; border-radius: 7px; background: rgba(0, 0, 0, 0.8); display: inline-block">
<a class="nav-link text-truncate px-0" style="font-weight: bold; color: #7efdfe" href="
LINK_PROFILE_HERE">
Name
</a>
</p>
<!--/// Name + link end ///-->
</div>
<!--===/// CHARA [1] end ///===-->
<!--===/// CHARA [2] ///===-->
<div class="col-sm-2">
<!--/// Picture ///-->
<div class="card mx-auto bg-transparent border-0 rounded-0 p-0 align-items-center justify-content-center" style="height: 150px; width: 150px;">
<!--/// Avatar ///-->
<div class="card border-0 p-0" style="height: 115px; width: 115px; border-radius: 50%; z-index: 5; background: url(
AVATAR_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"></div>
<!--/// Outer frame [LVL 4, SPINS] ///-->
<img class="d-block mx-auto my-auto" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/75393819_T9bW5LwCHDfGkvO.png
" style="position: absolute; width: 170px; opacity: 1; z-index: 5">
</div>
<!--/// Picture end ///-->
<!--/// Name + link ///-->
<p class="card col-12 border-0 my-2 text-truncate" style="font-weight: bold; font-size: 17px; color: #7efdfe; border-radius: 7px; background: rgba(0, 0, 0, 0.8); display: inline-block">
<a class="nav-link text-truncate px-0" style="font-weight: bold; color: #7efdfe" href="
LINK_PROFILE_HERE">
Name
</a>
</p>
<!--/// Name + link end ///-->
</div>
<!--===/// CHARA [2] end ///===-->
<!--===/// CHARA [3] ///===-->
<div class="col-sm-2">
<!--/// Picture ///-->
<div class="card mx-auto bg-transparent border-0 rounded-0 p-0 align-items-center justify-content-center" style="height: 150px; width: 150px;">
<!--/// Avatar ///-->
<div class="card border-0 p-0" style="height: 115px; width: 115px; border-radius: 50%; z-index: 5; background: url(
AVATAR_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"></div>
<!--/// Outer frame [LVL 4, SPINS] ///-->
<img class="d-block mx-auto my-auto" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/75393822_s395YZlvX9nJ2IL.png
" style="position: absolute; width: 170px; opacity: 1; z-index: 5">
</div>
<!--/// Picture end ///-->
<!--/// Name + link ///-->
<p class="card col-12 border-0 my-2 text-truncate" style="font-weight: bold; font-size: 17px; color: #7efdfe; border-radius: 7px; background: rgba(0, 0, 0, 0.8); display: inline-block">
<a class="nav-link text-truncate px-0" style="font-weight: bold; color: #7efdfe" href="
LINK_PROFILE_HERE">
Name
</a>
</p>
<!--/// Name + link end ///-->
</div>
<!--===/// CHARA [3] end ///===-->
<!--===/// CHARA [4] ///===-->
<div class="col-sm-2">
<!--/// Picture ///-->
<div class="card mx-auto bg-transparent border-0 rounded-0 p-0 align-items-center justify-content-center" style="height: 150px; width: 150px;">
<!--/// Avatar ///-->
<div class="card border-0 p-0" style="height: 115px; width: 115px; border-radius: 50%; z-index: 5; background: url(
AVATAR_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"></div>
<!--/// Outer frame [LVL 4, SPINS] ///-->
<img class="d-block mx-auto my-auto" src="
https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/75393824_cNf.png
" style="position: absolute; width: 170px; opacity: 1; z-index: 5">
</div>
<!--/// Picture end ///-->
<!--/// Name + link ///-->
<p class="card col-12 border-0 my-2 text-truncate" style="font-weight: bold; font-size: 17px; color: #7efdfe; border-radius: 7px; background: rgba(0, 0, 0, 0.8); display: inline-block">
<a class="nav-link text-truncate px-0" style="font-weight: bold; color: #7efdfe" href="
LINK_PROFILE_HERE">
Name
</a>
</p>
<!--/// Name + link end ///-->
</div>
<!--===/// CHARA [4] end ///===-->
<!--===/// CHARA [5] ///===-->
<div class="col-sm-2">
<!--/// Picture ///-->
<div class="card mx-auto bg-transparent border-0 rounded-0 p-0 align-items-center justify-content-center" style="height: 150px; width: 150px;">
<!--/// Avatar ///-->
<div class="card border-0 p-0" style="height: 115px; width: 115px; border-radius: 50%; z-index: 5; background: url(
AVATAR_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"></div>
</div>
<!--/// Picture end ///-->
<!--/// Name + link ///-->
<p class="card col-12 border-0 my-2 text-truncate" style="font-weight: bold; font-size: 17px; color: #7efdfe; border-radius: 7px; background: rgba(0, 0, 0, 0.8); display: inline-block">
<a class="nav-link text-truncate px-0" style="font-weight: bold; color: #7efdfe" href="
LINK_PROFILE_HERE">
Name
</a>
</p>
<!--/// Name + link end ///-->
</div>
<!--===/// CHARA [5] end ///===-->
</div>
<!--=======/////// RELATIONSHIPS end ///////========-->
</div>
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
PASTE YOUR CHARACTER CODE HERE end
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!-- Divider -->
<div class="row no-gutters mt-5 mb-4">
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, rgba(0, 0, 0, 0), #ffffea, #ffffea)"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="margin-top: -23px; font-size: 30px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
FEATURED GALLERY
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card p-3 mb-3" style="border-radius: 25px; border-width: 1px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<div class="row no-gutters align-items-center mb-2">
<div class="col-auto">
<a href="https://toyhou.se/CHARA_ID_HERE./gallery" style="font-size: 20px; font-weight: bold; color: #ffffea">
Featured images
</a>
</div>
<div class="col justify-content-center ml-2" style="color: #ffffea; border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<ul class="magnific-gallery image-gallery auto-clear gallery-row large-block-grid-6 justify-content-around">
<!--
THERE ARE 2 DIFFERENT VERSIONS OF THE FEATURED IMAGE GALLERY
The first is very basic, it simply shows the image, and when clicked on, redirects you to the gallery with its full size version, it's the simpler variant of the 2.
Can be found between the commentary "SIMPLE IMAGE SHOWCASE".
The second is way more complex, and requires being able to navigate the code and pay CLOSE ATTENTION to the commentaries left inside it. It mimicks the image viewer and is very tedious to put in place. I would not recommend this version if you do not know what you are doing or do not want to bother with this level of customisation!
Can be found between the commentary "IMAGE VIEWER MIMIC".
I HIGHLY recommend completely removing the version you will not be using so that every image has the same functionality, as well as to avoid getting lost in it, as it's VERY easy to be so. Each version has been put between commentaries as you can see below.
Side note: due to how the interactive element has been implemented, the images are slightly desaturated [by 40% more precisely]. So if you see your images being less vibrant than they actually are, it's perfectly normal!
-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SIMPLE IMAGE SHOWCASE - Delete this entire section if going unsused
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--/// Image ///--><!-- Duplicate this entire "image" section to add an image - maximum of 6 recommended -->
<li class="gallery-item">
<div class="gallery-thumb text-center">
<div class="card border-0 thumb-image" style="border-radius: 10px; background: rgba(0, 0, 0, 0.8)">
<!-- Full image link [aka paste the link from the URL found in the SEARCH BAR when you open the image viewer inside the gallery] -->
<a href="FULL_SIZE_IMAGE_LINK_FROM_GALLERY_HERE"
class="th" style="padding: 6.5px; box-shadow: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 10px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!-- Thumbnail image link from gallery [aka paste the link of the THUMBNAIL - not the full size image itself - by "click right + copy image address" on the THUMBNAIL] -->
<img src="THUMBNAIL_LINK_FROM_IMAGE_HERE"
style="max-height: 200px; border-radius: 5px; object-fit: contain; object-position: center">
</a>
</div>
</div>
</li>
<!--/// Image end ///-->
<!--===///////// SIMPLE IMAGE SHOWCASE end /////////===-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
IMAGE VIEWER MIMIC - Delete this entire section if going unsused
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--/// Image ///--><!-- Duplicate this entire "image" section to add an image - maximum of 6 recommended -->
<li class="gallery-item">
<div class="gallery-thumb text-center">
<div class="card border-0 thumb-image" style="border-radius: 10px; background: rgba(0, 0, 0, 0.8)">
<!-- Full image link [aka paste the link of the FULL SIZE image from the gallery - "click right + copy image address"] -->
<a href="FULL_SIZE_IMAGE_LINK_HERE"
class="th magnific-item" style="padding: 6.5px; box-shadow: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 10px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!-- Thumbnail image link from gallery [aka paste the link of the THUMBNAIL - not the full size image itself - by "click right + copy image address" on the THUMBNAIL] -->
<img src="THUMBNAIL_LINK_FROM_IMAGE_HERE"
style="max-height: 200px; border-radius: 5px; object-fit: contain; object-position: center">
</a>
<!--===/////// IMAGE METADATA ///////===--><!-- Feel free to remove this entire section if you don't need it -->
<div class="magnific-caption hide">
<div class="card rounded-0 border-0 mt-n1" style="color: #ffffea; background-image: url(
LINK_TO_BACKGROUND_IMAGE_HERE
); background-size: cover; background-position: center"><!-- Background link right above -->
<div class="card rounded-0 p-3" style="border-width: 2px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<!--===/// BUTTONS ///===-->
<div class="row no-gutters align-items-center mt-n2 mb-2">
<div class="col-auto"><p class="mt-3" style="font-size: 20px; font-weight: bold">Details</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto">
<ul class="nav nav-button nav-justified justify-content-left mt-1 flex-wrap">
<!--=== FULL SIZE IMAGE BUTTON ===-->
<li class="mx-1 card border-0 align-items-center" style="padding: 2px; width: 50px; height: 50px; border-radius: 11px; background: rgba(0, 0, 0, 0.8)">
<div class="gallery-item">
<div class="gallery-thumb">
<div class="card border-0 thumb-image bg-transparent" style="position: absolute; left: 2px; width: 46px; height: 46px">
<!-- Full size image link [aka copy the image ID - it's the numbers found at the end of the URL after the '#'] -->
<a href="https://toyhou.se/~images/IMAGE_ID_HERE"
class="th m-auto justify-content-center" style="padding: 6px; color: #ffffe9; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 2px solid #ffffe9; border-radius: 9px; box-shadow: 0 0 5px rgba(255, 255, 233, 0.5), inset 0 0 5px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!--=== BUTTON ICON ===-->
<i class="fas fa-link
" style="font-size: 25px"></i>
</a>
</div>
</div>
</div>
</li>
<!--=== FULL SIZE IMAGE BUTTON end ===-->
<!--=== EDIT IMAGE BUTTON ===-->
<li class="mx-1 card border-0 align-items-center" style="padding: 2px; width: 50px; height: 50px; border-radius: 11px; background: rgba(0, 0, 0, 0.8)">
<div class="gallery-item">
<div class="gallery-thumb">
<div class="card border-0 thumb-image bg-transparent" style="position: absolute; left: 2px; width: 46px; height: 46px">
<!-- Full size image link [aka copy the image ID - it's the numbers found at the end of the URL after the '#'] -->
<a href="https://toyhou.se/~images/edit/IMAGE_ID_HERE"
class="th m-auto justify-content-center" style="padding: 6px; color: #ffffe9; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 2px solid #ffffe9; border-radius: 9px; box-shadow: 0 0 5px rgba(255, 255, 233, 0.5), inset 0 0 5px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!--=== BUTTON ICON ===-->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96663874_TlSEdTha2UZZpgi.png?1741029340" width="33">
</a>
</div>
</div>
</div>
</li>
<!--=== EDIT IMAGE BUTTON end ===-->
</ul>
</div>
</div>
<!--===/// BUTTONS end ///===-->
<p class="mt-n3 mb-2" style="color: #cdcfc3">
Viewing full image.
</p>
<!--===/// OPTIONAL CAPTION ///===--><!-- Remove this entire section if going unused, or just write "No caption" -->
<div class="mt-3">
<p style="font-size: 20px; font-weight: bold">Caption</p>
<p class="mt-n2" style="color: #cdcfc3">
Caption here.
</p>
</div>
<!--===/// OPTIONAL CAPTION ///===-->
<div class="row">
<!--===/// IMAGE CREDITS ///===-->
<div class="col-md-6 mt-3">
<p style="font-size: 20px; font-weight: bold">Credits</p>
<p class="mt-n2" style="color: #cdcfc3">
<!-- Date -->
1 Jan 2024, 12:12:12 am
</p>
<p class="mx-n2 mt-n2">
<!-- Username [star/premium] -->
<a class="m-2" style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/Username">
<i class="fi-star user-name-icon"></i>Username
</a>
<!-- Username [torso/normal] -->
<a class="m-2" style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/Username">
<i class="fi-torso user-name-icon"></i>Username
</a>
<!-- Username [external link] -->
<a class="m-2" style="font-weight: bold; color: #7efdfe" href=
"EXTERNAL_LINK_HERE">
Username<i class="fa-solid fa-up-right-from-square ml-1" style="font-size: 10px"></i>
</a>
</p>
</div>
<!--===/// IMAGE CREDITS end ///===-->
<!--===/// TAGGED CHARACTERS ///===-->
<div class="col-md-6 mt-3">
<p style="font-size: 20px; font-weight: bold">Characters</p>
<div class="row no-gutters mx-n1 mt-1" style="margin-top: -12px">
<!--===/// NAME ///===--><!-- Duplicate this entire "name" section to add a character/tab/gallery -->
<div class="col-auto mx-1">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="font-weight: bold; border-radius: 8px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="LINK_TO_TAB_CHARA_OR_GALLERY_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 8px; z-index: 5"></span>
<!--=== Name ===-->
Character/tab/gallery name
</a>
</div>
</div>
</div>
<!--===/// NAME end ///===-->
</div>
</div>
<!--===/// TAGGED CHARACTERS end ///===-->
</div>
</div>
</div>
</div>
<!--===/////// IMAGE METADATA end ///////===-->
</div>
</div>
</li>
<!--/// Image end ///-->
<!--===///////// IMAGE VIEWER MIMIC end /////////===-->
</ul>
</div>
<!--===/// FEATURED GALLERY end ///===-->
</div>
<!--===////// MAIN CODE end //////===-->
</div>
</div>
<!--===///////// FOOTER /////////===-->
<div class="mt-auto" style="width: 100%">
<div class="card justify-content-center align-items-center border-0 rounded-0" style="margin-left: -1px; height: 90px; color: rgba(255, 255, 239, 0.5); background: rgba(0, 0, 0, 0.7); z-index: 50">
<p class="text-center" style="font-size: 12px; line-height: 25px">Code by FlowerlyRat layout ©
<a href="https://thatgamecompany.com/" style="color: #7efdfe">thatgamecompany</a><br>
<a href="https://toyhou.se/~about" class="mr-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">About</a>
<a href="https://toyhou.se/~faq/general" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">FAQ</a>
<a href="https://toyhou.se/~tickets" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">HelpDesk</a>
<a href="https://toyhou.se/~rules" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">Rules</a>
<a href="https://toyhou.se/~tos" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">ToS</a>
<a href="https://toyhou.se/~browse/search" class="ml-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">Search</a>
</p>
</div>
</div>
<!--===///////// FOOTER end /////////===-->
</div>
<!--====/////CREDITS WINDOW//////====-->
<div class="collapse fade" id="CREDIT" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; color: #ffffea; z-index: 1100">
<div id="ACC-CREDIT" class="card bg-faded border-0 rounded-0 p-3" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.7)">
<div class="mx-auto sticky-top" style="min-width: 55%">
<div class="card align-items-center" style="margin-top: 120px; border-radius: 25px 25px 0 0; border-width: 1px 1px 0 1px; border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.8); z-index: 5">
<!--Close button-->
<div style="position: absolute; top: 10px; right: 25px">
<a data-toggle="collapse" href="#CREDIT"><i class="fas fa-times" style="font-size: 25px; color: #ffffea"></i></a>
</div>
<!--Close button end-->
<div class="row no-gutters">
<!--Buttons-->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 40px; height: 40px; cursor: pointer">
<i class="far fa-code" style="font-size: 20px; color: #ffffea; opacity: 0.6; text-shadow: 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745"></i>
<div class="collapse fade show CODE" data-parent="#ACC-CREDIT" style="position:absolute; top:0; left:0; right:0; bottom:0;">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea;background: rgba(0, 0, 0, 0)">
<i class="far fa-code" style="margin-top: 2px; font-size: 20px; color: #ffffea; text-shadow: 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745"></i>
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none" data-toggle="collapse" data-target=".CODE"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 40px; height: 40px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96599998_5kOvqGuUpH9aIfH.png" width="25px" style="opacity: 0.6">
<div class="collapse fade IMAGE" data-parent="#ACC-CREDIT" style="position:absolute; top:0; left:0; right:0; bottom:0;">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea;background: rgba(0, 0, 0, 0)">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96599998_5kOvqGuUpH9aIfH.png" width="25px" style="margin-top: 2px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none" data-toggle="collapse" data-target=".IMAGE"></a>
</div>
</li>
</ul>
</div>
<!--Buttons end-->
</div>
</div>
<div class="card p-3 pb-4" style="height: 300px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.7)">
<!--///Code credits///-->
<div class="collapse fade show active CODE" data-parent="#ACC-CREDIT">
<div class="row no-gutters align-items-center mt-3">
<div class="col-auto"><p style="font-size: 15px; font-weight: bold">Code credits</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<!--Text-->
<p class="mt-4">
<b>Code:</b> <a style="font-weight: bold; color: #7efdfe" href="https://toyhou.se/FlowerlyRat"><i class="fi-torso user-name-icon"></i>FlowerlyRat</a><br>
<b>Layout:</b> Based on the game Sky: Children of the Light's UI<br>
<b>Other codes:</b> <a style="font-weight: bold; color: #ff7e01" href="https://toyhou.se/FlowerlyRat/characters/folder:4673560">Folder</a>
</p>
<!--Text end-->
</div>
<!--///Code credits///-->
<!--///Image credits///-->
<div class="collapse fade IMAGE" data-parent="#ACC-CREDIT">
<div class="row no-gutters align-items-center mt-3">
<div class="col-auto"><p style="font-size: 15px; font-weight: bold">Image credits</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<!--Text-->
<p class="mt-4">
<b>Background image:</b> Sky: Children of the Light © thatgamecompany<br>
<b>Icons:</b> <a href="https://fontawesome.com/v6/search" style="font-weight: bold; color: #ff7e01">FontAwesome</a>, Sky: Children of the Light<br>
<b>Flags/ribbons:</b> taken from CoraMagics' <a href="https://toyhou.se/20187371." style="font-weight: bold; color: #ff7e01">Ribbon Masterlist</a>
</p>
<!--Text end-->
</div>
<!--///Image credits///-->
<div class="row no-gutters" style="position: absolute; bottom: -3px; left: 27px; right: 27px; opacity: 0.3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
</div>
</div>
</div>
<!--====/////CREDITS WINDOW end//////====-->
</div>
</div>
<!-- Code container -->
</div>
</div>
</div>
</div>Copy
<!--
╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
△▽/╱╱╱╱╱╱╱╱╱╱╱╰━╯
Ultimate Sky: Children of the Light profile bundle [character profile: scrolling hell version]: code by FlowerlyRat || Based on the game Sky: Children of the Light's UI by ThatGameCompany
> It is recommended to use circlejourney's ToyHouse live editor to see what you're doing -> https://th.circlejourney.net/
Any links added use the following formats [target="_blank" is optional]:
Blue variant [to link characters, groups, species, and entities]:
<a style="font-weight: bold; color: #7efdfe" href="LINK_HERE">text_here</a>
Orange variant [to link everything else]:
<a style="font-weight: bold; color: #ff7e01" href="LINK_HERE">text_here</a>
Pop-up for the credits collapsible is at the end of the code
Relationship images have 5 different border options that represent how liked they are by the character. All 5 have been provided in the code, going from lvl 0 to lvl 5 [least to most liked]. Lvl 5 represents the one with the spinning border, used for characters your oc absolutely loves, lvl 0 has no border, meaning they either hate the other or don't have any feelings towards them. Each lvl has been precised in the code between commentary.
Code is compatible with the "Sky: Children of the Light avatar frame" and "Sky: Children of the Light candle UI" add-ons.
To add them to this code, please copy and paste them above this commentary.
Code is also compatible with the "Sky quests!" add-on.
To add it, please copy and paste the code between the "FUN LINKS" commentaries below.
Multiple background images have been screenshoted from the game to give a wide variety of possibilities [ToyHouse gallery: https://toyhou.se/25042050./gallery || Google Drive: https://drive.google.com/drive/folders/12YBvvXe9MoIYj9oUo8MVpngCojj8vCv3?usp=sharing], however if none of them suits your taste or vision, please go on and take your own in-game
-->
<div class="card bg-faded border-0 rounded-0 pb-3 px-3" style="margin-top: -17px; margin-left: -15px; margin-right: -15px; background: url(
LINK_TO_BACKGROUND_IMAGE_HERE
); background-size: cover; background-position: center; background-attachment: fixed; color: #ffffea">
<!-- Change the image link for the main background right above this line -->
<div class="mt-4" style="margin-bottom: 20px">
<!--===/// WINGED LIGHT COUNT ///===-->
<img class="d-block mx-auto tooltipster" data-placement="bottom" title="
200
" src="https://f2.toyhou.se/file/f2-toyhou-se/images/72538958_Qzn1IfB8liC2Y5H.png" style="height: 50px">
<!--===/// WINGED LIGHT COUNT end ///===-->
<!-- Credits button -->
<div style="position: absolute; top: 20px; right: 25px">
<a data-toggle="collapse" href="#CREDIT">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96600008_K9c0uSM4k7pfpXi.png" width="35">
</a>
</div>
<!-- Credits button end -->
</div>
<!--=======/////// FUN LINKS ///////========-->
<!--=======/////// FUN LINKS end ///////========-->
<div class="row my-4">
<!--/// Right column sticky ///-->
<div class="col-md mb-2 col-12" style="width: 0%">
<div class="sticky-top">
<div class="card bg-transparent rounded-0 border-0 mb-3">
<p class="text-center text-truncate" style="font-weight: bold; font-size: 30px; text-shadow: 0 0 5px #000, 0 0 3px #000">
Name
</p>
<!--===/// Quote ///===-->
<div class="card bg-transparent border-0 rounded-0 align-items-center">
<div class="card border-0 mt-2" style="padding: 10px; max-height: 75px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<p>"
This is a very cool and epic quote woa<br>
This box will scroll after a certain height!
"</p>
</div>
</div>
<!--===/// Quote end ///===-->
<!--===/// Basic ///===-->
<div class="card border-0 my-2" style="padding: 10px; max-height: 168px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<!-- Age -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Age</p></div>
<div class="col-auto ml-auto"><p>
##
</p></div>
</div>
<!-- Age end -->
<!-- Height -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Height</p></div>
<div class="col-auto ml-auto"><p><a style="font-weight: bold; color: #ff7e01" href="https://www.reddit.com/media?url=https%3A%2F%2Fi.redd.it%2Fyazzlze83qh41.jpg">
#
</a></p></div>
</div>
<!-- Height end -->
<!-- Gender -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Gender</p></div>
<div class="col-auto ml-auto"><p>
content
</p></div>
</div>
<!-- Gender end -->
<!-- Pronouns -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Pronouns</p></div>
<div class="col-auto ml-auto"><p>
pro/nouns
</p></div>
</div>
<!-- Pronouns end -->
<!-- Orientation -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Orientation</p></div>
<div class="col-auto ml-auto"><p>
<!--
Change the link and tooltip titles to the appropriate ones
Copy and paste the "<a>" tag to add another flag
-->
<a data-toggle="tooltip" title="LGBT+">
<img width="30px"
src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/0b1cb6ed-b614-4d6f-a792-6e2d2db50e49/df12p8i-5148214b-27e1-4cea-b418-420e2c629e25.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzBiMWNiNmVkLWI2MTQtNGQ2Zi1hNzkyLTZlMmQyZGI1MGU0OVwvZGYxMnA4aS01MTQ4MjE0Yi0yN2UxLTRjZWEtYjQxOC00MjBlMmM2MjllMjUucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.bfUU644_Y-XtP6mk5Iw-rkWSCGz48RVRya12UOkjtMA"></a>
<a data-toggle="tooltip" title="Queer">
<img width="30px"
src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/0b1cb6ed-b614-4d6f-a792-6e2d2db50e49/df12p7u-5aae0688-c8e6-408f-9360-bfe27b1b9397.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzBiMWNiNmVkLWI2MTQtNGQ2Zi1hNzkyLTZlMmQyZGI1MGU0OVwvZGYxMnA3dS01YWFlMDY4OC1jOGU2LTQwOGYtOTM2MC1iZmUyN2IxYjkzOTcucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.VfwaRcQsMLGFHptAVp77zWeA-p1LT_DE8YRuyXVWmuw"></a>
</p></div>
</div>
<!-- Orientation end -->
</div>
<!--===/// Basic end ///===-->
<!--===/// Voice claim ///===-->
<div class="card border-0 text-center" style="padding: 10px; border-radius: 6px; background: rgba(0, 0, 0, 0.5)">
<p>Voice claim</p>
<p class="mt-n3" style="font-size: 12px; opacity: 0.7">
Name of voice claim here
</p>
<p class="text-center"><i class="fas fa-play-circle" style="font-size: 20px"></i>
<iframe class="flex-fill" style="position: absolute; margin-top: -8px; margin-left: -39px; width: 60px; height: 35px; opacity: 0.001" frameborder="0"
src="https://www.youtube.com/embed/VIDEOID?ps=docs&controls=1">
<!-- ONLY CHANGE "VIDEOID" -->
</iframe>
</p>
</div>
<!--===/// Voice claim end ///===-->
<!--===/// Theme song ///===-->
<div class="card border-0 my-2 text-center" style="padding: 10px; border-radius: 6px; background: rgba(0, 0, 0, 0.5)">
<p>Theme</p>
<p class="mt-n3" style="font-size: 12px; opacity: 0.7">
Song title - artist
</p>
<p class="text-center"><i class="fas fa-play-circle" style="font-size: 20px"></i>
<iframe class="flex-fill" style="position: absolute; margin-top: -8px; margin-left: -39px; width: 60px; height: 35px; opacity: 0.001" frameborder="0"
src="https://www.youtube.com/embed/VIDEOID?ps=docs&controls=1">
<!-- ONLY CHANGE "VIDEOID" -->
</iframe>
</p>
</div>
<!--===/// Theme song end ///===-->
<!--===/// Playist ///===-->
<div class="card border-0 text-center" style="padding: 10px; border-radius: 6px; background: rgba(0, 0, 0, 0.5)">
<p>Playlist</p>
<p class="mt-n3" style="font-size: 12px; opacity: 0.7">
Spotify or YouTube
</p>
<p class="text-center">
<a href="
LINK_HERE
"><i class="fas fa-external-link-square-alt" style="font-size: 20px; color: #ffffea"></i></a>
</p>
</div>
<!--===/// Playist end ///===-->
<!--===/// Decorative controls ///===-->
<div class="row no-gutters mt-2">
<div class="col">
<div class="card" style="padding: 10px; border-radius: 30px 0 0 30px; border-width: 1px 0 1px 1px; border-color: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.5)">
<div class="row no-gutters">
<div class="col-4">
<p class="justify-content-between pl-2 pr-3">
<img class="fa-flip-horizontal" src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574399_ISOXkfgYQFhmHqy.png" width="25" style="opacity: 0.5">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574399_ISOXkfgYQFhmHqy.png" width="25" style="opacity: 0.5">
</p>
</div>
<div class="mx-md-2 my-n1" style="border-width: 0 1px 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<div class="col">
<p class="justify-content-between px-3" style="font-size: 25px">
<a class="mb-n2" style="margin-top: -10px" href="#" data-toggle="th-favorite">
<span class="favorite toggle-favorite">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574328_c1SwrAQE2AwiKXr.png" width="25">
</span>
<span class="unfavorite toggle-favorite">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574352_AVC7CTgM30PYCuZ.png" width="25">
</span>
</a>
<span style="font-size: 12px"><img class="mr-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574424_pTAU3yttAd8jqPl.png" width="25">0</span>
</p>
</div>
<div class="my-n1" style="border-width: 0 1px 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<div class="col-auto">
<p class="justify-content-between pl-4 pr-3" style="font-size: 25px">
<i class="fas fa-ellipsis" style="text-shadow: 0 0 3px #684647, 0 0 3px #684647"></i>
</p>
</div>
</div>
</div>
</div>
<div class="card rounded-0" style="padding: 0.5px; border-width: 1px 0; border-color: rgba(0, 0, 0, 0.8); background-color: rgba(255, 255, 239, 0.5)"></div>
<div class="col-auto mx-auto">
<div class="card h-100 justify-content-center" style="padding-left: 13px; padding-right: 13px; font-size: 15px; border-width: 1px 1px 1px 0; border-radius: 0 30px 30px 0; border-color: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.7)">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</div>
<!--===/// Decorative controls end ///===-->
</div>
</div>
</div>
<!--/// Right column sticky end ///-->
<!--/// Left column ///-->
<div class="col-md-7 mt-md-0 mt-n3 mb-md-0 mb-3">
<!--===/// Description ///===-->
<!-- Title -->
<div class="card py-3 px-4 mt-3" style="border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters align-items-center">
<div class="col-auto"><p style="font-weight: bold; font-size: 17px">Character description</p></div>
<div class="col justify-content-center mx-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.1"></div>
<!-- Title end -->
<!-- Content -->
<div class="card" style="height: 300px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 300px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-4 pb-4">
<!-- Text -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Subheader
</span><br><!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
This is where you write the very juicy juicy juicy information about your silly little character! Whether it be describing their personality or just talk about their life, and what they do, honestly you can just go wild with this!!! Maybe you want to talk about how people perceive them? Perhaps even how their thought process functions? You can write as much [or as little] as you want!!! This box scrolls anyway so you'll never run out of space!!!
</p>
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Subheader
</span><br><!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
This is another subheader, in case you want to split the description into multiple, defined, parts. Like maybe have a description for the character through time? Starting from when they were little to now! Or even in the <em>~future~</em>,,,
</p>
<!-- Text end -->
</div>
</div>
</div>
<!-- Content end -->
<!--===/// Description end ///===-->
<!--===/// Interests ///===-->
<!-- Title -->
<div class="card py-3 px-4 mt-3" style="border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters align-items-center">
<div class="col-auto"><p style="font-weight: bold; font-size: 17px">Interests</p></div>
<div class="col justify-content-center mx-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.1"></div>
<!-- Title end -->
<!-- Content -->
<div class="card" style="height: 300px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 300px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-4 pb-4">
<!-- Text -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Subheader
</span><br><!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Write about your character's silly ineterest, whether it's the usual ones like having fun dodging krills, or the bat shxt insane stuff like having an unhealthy obsession with gold, write at your heart's content! Let's here about this silly guy's hobbies, what do they like doing on a daily basis? Are they good at it? Are they ashamed of others learning about it? Or maybe it is such a defining trait of their personality that they would literally shut down if they ever stopped practicing it? Go wild man!!!! Infodump!!!
</p>
<!-- Text end -->
</div>
</div>
</div>
<!-- Content end -->
<!--===/// Interests end ///===-->
<!--===/// Backstory ///===-->
<!-- Title -->
<div class="card py-3 px-4 mt-3" style="border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters align-items-center">
<div class="col-auto"><p style="font-weight: bold; font-size: 17px">Backstory</p></div>
<div class="col justify-content-center mx-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.1"></div>
<!-- Title end -->
<!-- Content -->
<div class="card" style="height: 300px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 210px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-4 pb-4">
<!-- Text -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Subheader
</span><br><!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Write the backstory of your silly critter!!! I do recommend keeping it rather short as to not overwhelm others with text! If there is a need to have a longer backstory, I recommend using the button at the very end of this scrollbox to link a litterature or separate tab with it, so people get to choose whether or not they want to read the rest!
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>
<!-- Text end -->
</div>
</div>
<!-- Read more button -->
<div class="mx-4">
<div class="mb-3" style="border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<div class="justify-content-center">
<div class="gallery-thumb">
<div class="thumb-image justify-content-center tooltipster" title="Read more" style="width: 57px; height: 57px; border-radius: 16px; background: rgba(0, 0, 0, 0.5)">
<!--
To "disable" the button, delete the "href" below and add "cursor: not-allowed; opacity: 0.5" in the "style"
Don't forget to add back the "href" and delete the "cursor: not-allowed; opacity: 0.5" once you want to link something to this button!
-->
<!--== Link ==-->
<a href="READ_MORE_LINK_HERE"
style="color: #ffffea; box-shadow: none; text-decoration: none" class="th m-auto">
<span class="card bg-transparent thumb-sensitive" style="position: absolute; top: 2.5px; left: 2.4px; height: 52px; width: 52px; border: 2px solid #ffffe9; border-radius: 14px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent m-auto" style="width: 52px; height: 52px; border-width: 2px; border-radius: 14px; border-color: rgba(91, 92, 87, 0.7)">
<!--=== BUTTON ICON ===-->
<i class="fas fa-book m-auto" style="font-size: 35px; color: #ffffe9"></i>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- Read more button end -->
</div>
<!-- Content end -->
<!--===/// Backstory end ///===-->
<!--===/// Trivia ///===-->
<!-- Title -->
<div class="card py-3 px-4 mt-3" style="border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters align-items-center">
<div class="col-auto"><p style="font-weight: bold; font-size: 17px">Trivia</p></div>
<div class="col justify-content-center mx-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.1"></div>
<!-- Title end -->
<!-- Content -->
<div class="card" style="height: 300px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 300px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-4 pb-4">
<!-- List -->
<ul class="list-unstyled mt-3">
<li><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>content</li>
<li><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>content</li>
<li><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>content</li>
<li><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>content</li>
<li><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>content</li>
</ul>
<!-- List end -->
</div>
</div>
</div>
<!-- Content end -->
<!--===/// Trivia end ///===-->
<!--===/// Ribbons ///===-->
<!-- Title -->
<div class="card py-3 px-4 mt-3" style="border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters align-items-center">
<div class="col-auto"><p style="font-weight: bold; font-size: 17px">Ribbon collection</p></div>
<div class="col justify-content-center mx-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.1"></div>
<!-- Title end -->
<!-- Content -->
<div class="card" style="height: 300px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 300px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-4 pb-4">
<!-- SECTION 1 -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Name of ribbon collection
</span></p>
<div class="row no-gutters text-center mb-2">
<!-- ||[ 0 ]|| = 1 ribbon -->
<!-- ||[ 1 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 1 ]|| -->
<!-- ||[ 2 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 2 ]|| -->
<!-- ||[ 3 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 3 ]|| -->
<!-- ||[ 4 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 4 ]|| -->
<!-- ||[ 5 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 5 ]|| -->
<!-- ||[ 6 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 6 ]|| -->
</div>
<!--SECTION 1-->
<!--SECTION 2-->
<!--Subheader-->
<p><span class="justify-content-start mt-3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Name of ribbon collection
</span></p>
<div class="row no-gutters text-center mb-2">
<!-- ||[ 0 ]|| = 1 ribbon -->
<!-- ||[ 1 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 1 ]|| -->
<!-- ||[ 2 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 2 ]|| -->
<!-- ||[ 3 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 3 ]|| -->
<!-- ||[ 4 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 4 ]|| -->
<!-- ||[ 5 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 5 ]|| -->
<!-- ||[ 6 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 6 ]|| -->
</div>
<!-- SECTION 2 -->
<!--
Dont mind this random p tag,,, its the only solution I found for the different ribbon sections to have the same margin between the title and the ribbons smh
If you delete it, you'll notice the very last section doesn't have the same margin, and I do not know why
-->
<p></p>
<!-- Text end -->
</div>
</div>
</div>
<!-- Content end -->
<!--===/// Ribbons end ///===-->
</div>
<!--/// Left column end ///-->
</div>
<!--=======/////// CLOSET DIVIDER ///////========-->
<div class="row no-gutters my-3">
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, rgba(0, 0, 0, 0), #ffffea, #ffffea)"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="margin-top: -23px; font-size: 30px">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!--=======/////// CLOSET DIVIDER end ///////========-->
<!--=======/////// SECTION TITLE ///////========-->
<div class="card p-3 mb-md-4 text-center" style="border-radius: 10px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<h1 class="mt-1">Outfit shrine</h1>
<p style="font-size: 15px; color: #cdcfc3">Design notes</p>
</div>
<!--=======/////// SECTION TITLE end ///////========-->
<div class="row no-gutters mb-3">
<!--/// Full body image ///--><!-- You may play with the max and min height if your image doesn't look correctly proportionned -->
<div class="col-lg-5">
<div class="sticky-top">
<div class="card bg-transparent border-0 rounded-0 pt-md-5">
<img class="d-block my-3 mx-auto" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/69495205_Ir72I07ys8SlDvP.png
" style="max-height: 470px; min-height: 350px; object-fit: cover; object-position: center; "><!--
If the full body gets muddied with the background, add the following snippet to the style to add a white border around it:
filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-0.5px 0px 0 #fff) drop-shadow(-0px -0px 0 #fff) drop-shadow(-0px -0.5px 0 #fff)
-->
</div>
</div>
</div>
<!--/// Full body image end ///-->
<!--/// CLOSET ///-->
<div class="col" style="margin-right: -15px">
<!--===/// OUTFITS PAGE ///===-->
<div id="ACC-OUTFIT" class="mt-3">
<div id="ACC-OUTFIT-2" class="card border-0 rounded-0 align-items-center" style="background: rgba(0, 0, 0, 0.7)">
<div class="row no-gutters">
<!-- Buttons -->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603077_thtEYQo0GPQ2R1Y.png" style="height: 40px;opacity: 0.6">
<div class="collapse fade show OUTFIT" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-OUTFIT-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603077_thtEYQo0GPQ2R1Y.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".OUTFIT"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358456_6g3cv2EpYvBIwJj.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade SHOES" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-OUTFIT-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358456_6g3cv2EpYvBIwJj.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".SHOES"></a>
</div>
</li>
</ul>
</div>
<!-- Buttons end -->
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.2"></div>
</div>
<div class="card border-0 rounded-0 pl-3" style="height: 450px; background: rgba(0, 0, 0, 0.6); overflow: hidden">
<!--/// PANTS TAB ///-->
<div class="collapse fade show active OUTFIT" data-parent="#ACC-OUTFIT">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Top -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Top
</span><br>
<!--Image-->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Write a small description about the outfit your character wears! Notably the top portion! Maybe they have addtional details that don't exist in-game, or maybe you just want to describe it to be visible by screen readers or help people better understand what it looks like! You can also add an image to it if you have drawn it, or taken a screenshott of it!
</p>
<!-- Top end -->
<!-- Bottom -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Bottom
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
This part is for the bottom of the outfit, such as pants, skirt, shorts, etc! You can also add a picture to the side of the text! The text warps around it anyways.<br>
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>
<!-- Bottom end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
If the outfit has additional details that are easily forgotten by others or aren't part of the in-game model, write them here! You can basically put an image next to anything on this entire outfit shrine if you copy paste the line of code related to it lol. You can also add the body type here!<br>
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>
<!-- Details end -->
</div>
</div>
</div>
<!--/// PANTS TAB ///-->
<!--/// SHOES TABS ///-->
<div class="collapse fade SHOES" data-parent="#ACC-OUTFIT">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Shoes -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Shoes
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Pretty self explanatory, it's for the shoes!<br>
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>
<!-- Shoes end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Just in case you need to add details here!<br>
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>
<!-- Details end -->
</div>
</div>
</div>
<!--/// SHOES TAB ///-->
</div>
</div>
<!--===/// OUTFITS PAGE end ///===-->
<!--===/// FACE PAGE ///===-->
<div id="ACC-FACE" class="mt-3">
<div id="ACC-FACE-2" class="card border-0 rounded-0 align-items-center" style="background: rgba(0, 0, 0, 0.7)">
<div class="row no-gutters">
<!-- Buttons -->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358447_AvXVBRPZEBqf2TC.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade show MASK" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-FACE-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358447_AvXVBRPZEBqf2TC.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".MASK"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72359091_6loKsROxA4qtouq.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade ACCS-FACE" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-FACE-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72359091_6loKsROxA4qtouq.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".ACCS-FACE"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603441_NoEUznqETpxByiG.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade NECK" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-FACE-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603441_NoEUznqETpxByiG.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".NECK"></a>
</div>
</li>
</ul>
</div>
<!-- Buttons end -->
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.2"></div>
</div>
<div class="card border-0 rounded-0 pl-3" style="height: 450px; background: rgba(0, 0, 0, 0.6)">
<!--/// MASK AND FACE TAB ///-->
<div class="collapse fade show active MASK" data-parent="#ACC-FACE">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Structure -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Face structure
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line-->
Text area to write what facial feature and structure your character has!! Such as face, eye, and nose shape.<br>
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>
<!-- Structure end -->
<!-- Mask -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Mask
</span><br>
<!-- Image -->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Also a self explanatory section, just write anything about the mask they wear, or the lack thereof! Face paint also fits this category.<br>
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>
<!-- Mask end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
If your character has some specific features, such as tattoos, moles, crooked teeth, etc etc!<br>
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>
<!-- Details end -->
</div>
</div>
</div>
<!--/// MASK AND FACE TAB ///-->
<!--/// FACE ACCESSORIES TAB ///-->
<div class="collapse fade ACCS-FACE" data-parent="#ACC-FACE">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Accessories -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Accessories
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Face accessories, such as sunglasses, or any of the cosmetics in this tab in-game, fit here!<br>
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>
<!-- Accessories end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
More details!!!<br>
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>
<!-- Details end -->
</div>
</div>
</div>
<!--/// FACE ACCESSORIES TAB ///-->
<!--/// NECK ACCESSORIES TAB ///-->
<div class="collapse fade NECK" data-parent="#ACC-FACE">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Accessories neck -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Accessories
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Neck accessories!!!! For when they have something around their neck.<br>
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>
<!-- Accessories neck end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Oh yeah here's the details section!!!<br>
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>
<!-- Details end -->
</div>
</div>
</div>
<!--/// Neck accessories tab end ///-->
</div>
</div>
<!--===/// FACE PAGE end///===-->
<!--===/// HEAD PAGE ///===-->
<div id="ACC-HEAD" class="mt-3">
<div id="ACC-HEAD-2" class="card border-0 rounded-0 align-items-center" style="background: rgba(0, 0, 0, 0.7)">
<div class="row no-gutters">
<!-- Buttons -->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358424_KTeHcdt16OquTVN.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade show HAIR" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-HEAD-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358424_KTeHcdt16OquTVN.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".HAIR"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603451_tXV4olsXIf3MP1A.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade ACCS-HEAD" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-HEAD-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603451_tXV4olsXIf3MP1A.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".ACCS-HEAD"></a>
</div>
</li>
</ul>
</div>
<!-- Buttons end -->
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.2"></div>
</div>
<div class="card border-0 rounded-0 pl-3" style="height: 450px; background: rgba(0, 0, 0, 0.6)">
<!--/// HAIR TAB ///-->
<div class="collapse fade show HAIR" data-parent="#ACC-HEAD">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Hairstyle -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Hairstyle
</span><br>
<!-- Image -->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Ok at this point you must have understood how these tab work!<br>
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>
<!-- Hairstyle end -->
<!-- Texture + details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Texture and details
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!--Image end-->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
This is for the hair texture and other details!!!<br>
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>
<!-- Texture + details end -->
</div>
</div>
</div>
<!--/// HAIR TAB ///-->
<!--/// HEAD ACCESSORIES TAB ///-->
<div class="collapse fade ACCS-HEAD" data-parent="#ACC-HEAD">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Hat -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Hat
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Hat end -->
<!-- Accessories hair -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Accessories
</span><br>
<!-- Image -->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Accessories hair end -->
</div>
</div>
</div>
<!--/// HEAD ACCESSORIES TAB end///-->
</div>
</div>
<!--===///HEAD PAGE end///===-->
<!--===/// CAPE PAGE ///===-->
<div class="card border-0 rounded-0 align-items-center mt-3" style="height: 57px; background: rgba(0, 0, 0, 0.7)"></div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.2"></div>
<div class="card border-0 rounded-0" style="height: 450px; color: #cdcfc3; background: rgba(0, 0, 0, 0.6); scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-4 pb-4">
<!-- Cape -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Cape
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Cape end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Details end -->
</div>
</div>
<!--/// Details tab ///-->
<!--===/// CAPE PAGE end///===-->
<!--===/// PROPS PAGE ///===-->
<div id="ACC-PROP" class="mt-3">
<div id="ACC-PROP-2" class="card border-0 rounded-0 align-items-center" style="background: rgba(0, 0, 0, 0.7)">
<div class="row no-gutters">
<!-- Buttons -->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358385_8caxhrNR0gkFChw.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade show INSTRU" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-PROP-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358385_8caxhrNR0gkFChw.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".INSTRU"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603460_F1W5Ymc1aOvESjr.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade PROP" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-PROP-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603460_F1W5Ymc1aOvESjr.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".PROP"></a>
</div>
</li>
</ul>
</div>
<!-- Buttons end -->
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.2"></div>
</div>
<div class="card border-0 rounded-0 pl-3" style="height: 450px; background: rgba(0, 0, 0, 0.6)">
<!--/// INSTRUMENT TAB ///-->
<div class="collapse fade show INSTRU" data-parent="#ACC-PROP">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Main -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Main instrument
</span><br>
<!-- Image -->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Main end -->
<!-- Secondary -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Secondary instrument/prop
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Secondary end -->
</div>
</div>
</div>
<!--/// INSTRUMENT TAB ///-->
<!--/// PROP TAB ///-->
<div class="collapse fade PROP" data-parent="#ACC-PROP">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Main -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Main prop
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Main end -->
<!-- Secondary -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Secondary prop
</span><br>
<!-- Image -->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Secondary end -->
</div>
</div>
</div>
<!--/// PROP TAB end///-->
</div>
</div>
<!--===/// PROPS PAGE end ///===-->
</div>
<!--/// CLOSET end ///-->
</div>
<!--=======/////// RELATIONSHIP DIVIDER ///////========-->
<div class="row no-gutters my-3">
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, rgba(0, 0, 0, 0), #ffffea, #ffffea)"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="margin-top: -23px; font-size: 30px">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!--=======/////// RELATIONSHIP DIVIDER end ///////========-->
<!--=======/////// SECTION TITLE ///////========-->
<div class="card p-3 mb-4 text-center" style="border-radius: 10px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<h1 class="mt-1">Friendship constellation</h1>
<p style="font-size: 15px; color: #cdcfc3">Relationships</p>
</div>
<!--=======/////// SECTION TITLE end ///////========-->
<!--=======/////// RELATIONSHIP DESCRIPTIONS ///////========-->
<!--===/// CHARA [1] ///===--><!-- Copy the entire "CHARA [0]" section to add a new link -->
<div class="row mt-3">
<!--===/// Right picture ///===-->
<div class="col-md-auto mb-3 order-md-2 my-auto">
<!--/// Picture ///-->
<div class="card mx-auto bg-transparent border-0 rounded-0 p-0 align-items-center justify-content-center" style="height: 196px; width: 196px;">
<!--/// Avatar ///-->
<div class="card border-0 p-0" style="height: 150px; width: 150px; border-radius: 50%; z-index: 5; background: url(
AVATAR_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"></div>
<!--/// Outer frame [LVL 4, SPINS] ///-->
<img class="d-block mx-auto my-auto" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/75393819_T9bW5LwCHDfGkvO.png
" style="position: absolute; opacity: 1; z-index: 5">
<!--/// Inner spinning frame ///-->
<div class="align-items-center justify-content-center" style="position: absolute; width: 156px; z-index: 5">
<i class="fa-spin" style="animation-duration: 26s"><img class="d-block mx-auto my-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75393824_cNfM0cZkOOKtPRh.png"></i>
</div>
<!--/// Inner spinning frame end ///-->
</div>
<!--/// Picture end ///-->
</div>
<!--===/// Right picture end ///===-->
<!--===/// Left description ///===-->
<div class="col-md order-md-1">
<!-- Title + Link -->
<div class="card p-3" style="font-weight: bold; font-size: 17px; border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters align-items-center">
<div class="col-auto"><p><a style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/CHARAID.">
Name
</a></p></div>
<div class="col justify-content-center mx-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto ml-auto"><p>
Relationship status
</p></div>
</div>
</div>
<!-- Title + Link end -->
<!-- Content -->
<div class="card" style="height: 150px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 150px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-3 pt-3 pb-4">
<!-- Text -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p>
This is a box to further develop the relationship between the 2 characters! This box scrolls so you can write as much as you'd like! Tho I do recommend to not write <em>too</em> much to avoid overwhelming others with the amount of text. But do whatever you want, I'm not your legal guardien :p
</p>
<!-- Text end -->
</div>
</div>
</div>
<!-- Content end -->
</div>
<!--===/// Left description end ///===-->
</div>
<!--===/// CHARA [1] end ///===-->
<!--===/// CHARA [2] ///===-->
<div class="row mt-3">
<!--===/// Right picture ///===-->
<div class="col-md-auto mb-3 order-md-2 my-auto">
<!--/// Picture ///-->
<div class="card mx-auto bg-transparent border-0 rounded-0 p-0 align-items-center justify-content-center" style="height: 196px; width: 196px;">
<!--/// Avatar ///-->
<div class="card border-0 p-0" style="height: 150px; width: 150px; border-radius: 50%; z-index: 5; background: url(
AVATAR_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"></div>
<!--/// Outer frame [LVL 3] ///-->
<img class="d-block mx-auto my-auto" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/75393819_T9bW5LwCHDfGkvO.png
" style="position: absolute; opacity: 1; z-index: 5">
</div>
<!--/// Picture end ///-->
</div>
<!--===/// Right picture end ///===-->
<!--===/// Left description ///===-->
<div class="col-md order-md-1">
<!-- Title + Link -->
<div class="card p-3" style="font-weight: bold; font-size: 17px; border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters align-items-center">
<div class="col-auto"><p><a style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/CHARAID.">
Name
</a></p></div>
<div class="col justify-content-center mx-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto ml-auto"><p>
Relationship status
</p></div>
</div>
</div>
<!-- Title + Link end -->
<!-- Content -->
<div class="card" style="height: 150px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 150px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-3 pt-3 pb-4">
<!-- Text -->
<!-- Subheader -->
<p>
Silly fun fact! The frames around the pictures are used to showcase how strong a relationship is! The more your character loves the other, the more detailed the frame is! This empty template has all 5 possible levels, going from strongest to weakest, so don't hesistate to copy paste, and move those frames around if need be!
</p>
<!-- Text end -->
</div>
</div>
</div>
<!-- Content end -->
</div>
<!--===/// Left description end ///===-->
</div>
<!--===/// CHARA [2] end ///===-->
<!--===/// CHARA [3] ///===-->
<div class="row mt-3">
<!--===/// Right picture ///===-->
<div class="col-md-auto mb-3 order-md-2 my-auto">
<!--/// Picture ///-->
<div class="card mx-auto bg-transparent border-0 rounded-0 p-0 align-items-center justify-content-center" style="height: 196px; width: 196px;">
<!--/// Avatar ///-->
<div class="card border-0 p-0" style="height: 150px; width: 150px; border-radius: 50%; z-index: 5; background: url(
AVATAR_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"></div>
<!--/// Outer frame [LVL 2] ///-->
<img class="d-block mx-auto my-auto" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/75393822_s395YZlvX9nJ2IL.png
" style="position: absolute; opacity: 1; z-index: 5">
</div>
<!--/// Picture end ///-->
</div>
<!--===/// Right picture end ///===-->
<!--===/// Left description ///===-->
<div class="col-md order-md-1">
<!-- Title + Link -->
<div class="card p-3" style="font-weight: bold; font-size: 17px; border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters align-items-center">
<div class="col-auto"><p><a style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/CHARAID.">
Name
</a></p></div>
<div class="col justify-content-center mx-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto ml-auto"><p>
Relationship status
</p></div>
</div>
</div>
<!-- Title + Link end -->
<!-- Content -->
<div class="card" style="height: 150px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 150px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-3 pt-3 pb-4">
<!-- Text -->
<!-- Subheader -->
<p>
Oh also the character profile link is in the name in the card above. I wanted to put it on the image at first, but ehhhh, too much of a hassle! So I opted for the easy way out lololol
</p>
<!-- Text end -->
</div>
</div>
</div>
<!-- Content end -->
</div>
<!--===/// Left description end ///===-->
</div>
<!--===/// CHARA [3] end ///===-->
<!--===/// CHARA [4] ///===-->
<div class="row mt-3">
<!--===/// Right picture ///===-->
<div class="col-md-auto mb-3 order-md-2 my-auto">
<!--/// Picture ///-->
<div class="card mx-auto bg-transparent border-0 rounded-0 p-0 align-items-center justify-content-center" style="height: 196px; width: 196px;">
<!--/// Avatar ///-->
<div class="card border-0 p-0" style="height: 150px; width: 150px; border-radius: 50%; z-index: 5; background: url(
AVATAR_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"></div>
<!--/// Outer frame [LVL 1] ///-->
<img class="d-block mx-auto my-auto" src="
https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/75393824_cNf.png
" style="position: absolute; opacity: 1; z-index: 5">
</div>
<!--/// Picture end ///-->
</div>
<!--===/// Right picture end ///===-->
<!--===/// Left description ///===-->
<div class="col-md order-md-1">
<!-- Title + Link -->
<div class="card p-3" style="font-weight: bold; font-size: 17px; border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters align-items-center">
<div class="col-auto"><p><a style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/CHARAID.">
Name
</a></p></div>
<div class="col justify-content-center mx-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto ml-auto"><p>
Relationship status
</p></div>
</div>
</div>
<!-- Title + Link end -->
<!-- Content -->
<div class="card" style="height: 150px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 150px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-3 pt-3 pb-4">
<!-- Text -->
<!-- Subheader -->
<p>
Ok I don't have anything else to add here, have filler text!<br>
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>
<!-- Text end -->
</div>
</div>
</div>
<!-- Content end -->
</div>
<!--===/// Left description end ///===-->
</div>
<!--===/// CHARA [4] end ///===-->
<!--===/// CHARA [5] ///===-->
<div class="row mt-3">
<!--===/// Right picture ///===-->
<div class="col-md-auto mb-3 order-md-2 my-auto">
<!--/// Picture ///-->
<div class="card mx-auto bg-transparent border-0 rounded-0 p-0 align-items-center justify-content-center" style="height: 196px; width: 196px;">
<!--/// Avatar ///-->
<div class="card border-0 p-0" style="height: 150px; width: 150px; border-radius: 50%; z-index: 5; background: url(
AVATAR_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"></div>
<!--/// Outer frame [LVL 0, NO FRAME] ///-->
</div>
<!--/// Picture end ///-->
</div>
<!--===/// Right picture end ///===-->
<!--===/// Left description ///===-->
<div class="col-md order-md-1">
<!-- Title + Link -->
<div class="card p-3" style="font-weight: bold; font-size: 17px; border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters align-items-center">
<div class="col-auto"><p><a style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/CHARAID.">
Name
</a></p></div>
<div class="col justify-content-center mx-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto ml-auto"><p>
Relationship status
</p></div>
</div>
</div>
<!-- Title + Link end -->
<!-- Content -->
<div class="card" style="height: 150px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 150px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-3 pt-3 pb-4">
<!-- Text -->
<!-- Subheader -->
<p>
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.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>
<!-- Text end -->
</div>
</div>
</div>
<!-- Content end -->
</div>
<!--===/// Left description end ///===-->
</div>
<!--===/// CHARA [5] end ///===-->
<!--=======/////// RELATIONSHIP DESCRIPTIONS end ///////========-->
<!--====///// CREDITS WINDOW //////====-->
<div class="collapse fade" id="CREDIT" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; z-index: 1100">
<div id="ACC-CREDIT" class="card bg-faded border-0 rounded-0 p-3" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.7)">
<div class="mx-auto sticky-top" style="min-width: 55%">
<div class="card align-items-center" style="margin-top: 120px; border-radius: 25px 25px 0 0; border-width: 1px 1px 0 1px; border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.8); z-index: 5">
<!-- Close button -->
<div style="position: absolute; top: 10px; right: 25px">
<a data-toggle="collapse" href="#CREDIT"><i class="fas fa-times" style="font-size: 25px; color: #ffffea"></i></a>
</div>
<!-- Close button end -->
<div class="row no-gutters">
<!-- Buttons -->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 40px; height: 40px; cursor: pointer">
<i class="far fa-code" style="font-size: 20px; color: #ffffea; opacity: 0.6; text-shadow: 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745"></i>
<div class="collapse fade show CODE" data-parent="#ACC-CREDIT" style="position:absolute; top:0; left:0; right:0; bottom:0;">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea;background: rgba(0, 0, 0, 0)">
<i class="far fa-code" style="margin-top: 2px; font-size: 20px; color: #ffffea; text-shadow: 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745"></i>
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none" data-toggle="collapse" data-target=".CODE"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 40px; height: 40px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96599998_5kOvqGuUpH9aIfH.png" width="25px" style="opacity: 0.6">
<div class="collapse fade IMAGE" data-parent="#ACC-CREDIT" style="position:absolute; top:0; left:0; right:0; bottom:0;">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea;background: rgba(0, 0, 0, 0)">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96599998_5kOvqGuUpH9aIfH.png" width="25px" style="margin-top: 2px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none" data-toggle="collapse" data-target=".IMAGE"></a>
</div>
</li>
</ul>
</div>
<!-- Buttons end -->
</div>
</div>
<div class="card p-3 pb-4" style="height: 300px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.7)">
<!--/// Code credits ///-->
<div class="collapse fade show active CODE" data-parent="#ACC-CREDIT">
<div class="row no-gutters align-items-center mt-3">
<div class="col-auto"><p style="font-size: 15px; font-weight: bold">Code credits</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<!-- Text -->
<p class="mt-4">
<b>Code:</b> <a style="font-weight: bold; color: #7efdfe" href="https://toyhou.se/FlowerlyRat"><i class="fi-torso user-name-icon"></i>FlowerlyRat</a><br>
<b>Layout:</b> Based on the game Sky: Children of the Light's UI<br>
<b>Other codes:</b> <a style="font-weight: bold; color: #ff7e01" href="https://toyhou.se/FlowerlyRat/characters/folder:4673560">Folder</a>
</p>
<!-- Text end -->
</div>
<!--/// Code credits ///-->
<!--/// Image credits ///-->
<div class="collapse fade IMAGE" data-parent="#ACC-CREDIT">
<div class="row no-gutters align-items-center mt-3">
<div class="col-auto"><p style="font-size: 15px; font-weight: bold">Image credits</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<!-- Text -->
<p class="mt-4">
<b>Background image:</b> Sky: Children of the Light © thatgamecompany<br>
<b>Icons:</b> <a href="https://fontawesome.com/v6/search" style="font-weight: bold; color: #ff7e01">FontAwesome</a>, Sky: Children of the Light<br>
<b>Flags/ribbons:</b> taken from CoraMagics' <a href="https://toyhou.se/20187371." style="font-weight: bold; color: #ff7e01">Ribbon Masterlist</a>
</p>
<!-- Text end -->
</div>
<!--/// Image credits ///-->
<div class="row no-gutters" style="position: absolute; bottom: -3px; left: 27px; right: 27px; opacity: 0.3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
</div>
</div>
</div>
<!--====///// CREDITS WINDOW end //////====-->
</div>Copy
<!--
╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
△▽/╱╱╱╱╱╱╱╱╱╱╱╰━╯
Ultimate Sky: Children of the Light profile bundle [CSS emulator V1 - character profile: scrolling hell version]: code by FlowerlyRat || Inspired from TheFaerieMerchant's CSS emulators || Based on the game Sky: Children of the Light's UI by ThatGameCompany
> It is HIGHLY recommended to use circlejourney's ToyHouse live editor to see what you're doing!!!! -> https://th.circlejourney.net/
Any links added use the following formats [target="_blank" is optional]:
Blue variant [to link characters, groups, species, and entities]:
<a style="font-weight: bold; color: #7efdfe" href="LINK_HERE">text_here</a>
Orange variant [to link everything else]:
<a style="font-weight: bold; color: #ff7e01" href="LINK_HERE">text_here</a>
Any areas that need the character's ID have the "CHARA_ID_HERE" placeholder -> to replace everything at once, highlight "CHARA_ID_HERE", then do ctrl+F and replace it with your character's.
Pop-up for the credits collapsible is at the end of the code.
> I cannot guarantee compatibility with actual custom CSS codes.
Code is compatible with the "Sky: Children of the Light candle UI" add-on.
Instructions to add them is given in the profile itself -> https://toyhou.se/23648694.misc-sky-cotl-candle-ui/25906098.
Code is also compatible with the "Sky quests!" add-on.
To add it, please copy and paste the code between the "FUN LINKS" commentaries below, between the "MAIN CHARACTER CODE HERE" commentaries.
-> https://toyhou.se/32862504.snip-sky-quests/32862518.code
Multiple background images have been screenshoted from the game to give a wide variety of possibilities [ToyHouse gallery: https://toyhou.se/25042050./gallery || Google Drive: https://drive.google.com/drive/folders/12YBvvXe9MoIYj9oUo8MVpngCojj8vCv3?usp=sharing], however if none of them suit your taste or vision, please go on and take your own in-game.
!!! TO BE WARNED !!!
This code has a hidden section intended for mobile users, so be sure to also modify it with the sidebar!
-->
<div class="flex-row justify-content-end sp-top-inner" style="left: -40vw; z-index: 5">
<div style="width: 100vw">
<div class="ml-md-3">
<!--///BACKGROUND IMAGE///-->
<div class="card bg-dark rounded-0 border-0 col-lg-12" style="overflow: hidden; position: fixed; bottom: 0; top: 0; left: 0; background-image: url(
LINK_TO_BACKGROUND_IMAGE_HERE
); background-size: cover; background-position: center"></div>
<div class="row no-gutters">
<!-- Code container -->
<div class="col-12 ">
<div class="card bg-transparent border-0 rounded-0 mx-auto">
<div class="card bg-transparent rounded-0 border-0" style=" min-height: 100vh">
<div class="container p-3" style="max-width: 100%">
<div class="row no-gutters">
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
COMPUTER SIDEBAR
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-md-2 hidden-sm-down" style="margin-bottom: -75px; color: #ffffea">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
AVATAR [computer]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-auto" style="height: 150px; width: 150px">
<div class="card bg-dark border-0 p-0" style="position: absolute; height: 115px; width: 115px; border-radius: 50%; z-index: 1; background: url(
AVATAR_IMAGE_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"><!--PFP IMAGE LINK ABOVE--></div>
<!--///Outer frame///--><!--Check [https://toyhou.se/23579684.misc-sky-cotl-avatar-frame] for more borders and meaning explanation-->
<img class="d-block mx-auto my-auto" style="position: absolute; opacity: 1; z-index: 5" src=
"https://f2.toyhou.se/file/f2-toyhou-se/images/71211585_IQYjqdDDaiOOeid.png">
<!--///Inner spinning frame///--><!-- Feel free to delete -->
<div class="align-items-center justify-content-center" style="position: absolute; width: 123px; z-index: 5">
<i class="fa-spin" style="animation-duration: 26s; opacity: 1"><img class="d-block mx-auto my-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/images/71211558_s1BGtB1nlee2eVn.png"></i>
</div>
<!--///Inner spinning frame end///-->
</div>
<!--===////// AVATAR end //////===-->
<div class="card p-2" style="top: -77px; border-radius: 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER NAME [computer]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE."
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-sparkles fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// CHARACTER NAME [computer] end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
FOLDER LINK
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/FlowerlyRat/characters/folder:FOLDER_ID"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Folder name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-folder fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// FOLDER LINK end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BLURB [computer]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card" style="padding: 15px; font-size: 0.8em; color: #cdcfc3; border-radius: 23px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<p>
This is a blurb, feel free to delete it tho
</p>
</div>
<!--===////// BLURB [computer] end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SOCIAL LINKS [computer] - duplicate the "SOCIAL LINK" section to add a platform - can be used to add links to an Art Fight profile, playlist, etc
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<ul class="nav nav-button nav-justified justify-content-around mt-2 flex-wrap">
<!--=== SOCIAL LINK ===-->
<li>
<div class="gallery-thumb">
<div class="thumb-image justify-content-center align-items-center" style="width: 35px; height: 35px; font-weight: bold; border-radius: 10px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="SOCIAL_LINK_HERE" title="SOCIAL_NAME_HERE"
class="th tooltipster" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 10px; box-shadow: 0 0 8px rgba(255, 255, 233, 0.5), inset 0 0 8px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!--=== BUTTON ICON ===-->
<i class="fas fa-link
" style="font-size: 13px"></i>
</a>
</div>
</div>
</li>
<!--=== SOCIAL LINK end===-->
</ul>
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BONUS LINKS [computer] - duplicate the "ADDITIONAL SIDE LINK" section to add a link
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--===////// ADDITIONAL SIDE LINK //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="LINK_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Link name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-link fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// ADDITIONAL SIDE LINK end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SIDEBAR BUTTONS - tabs require their own links with their own ID
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--===////// TAB 1 //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="LINK_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Tab 1
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-bookmark fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// TAB 1 end //////===-->
<div class="my-1 mb-2 mx-2" style="border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<!--===////// TAB 2 //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="LINK_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Tab 2
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="far fa-bookmark fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// TAB 2 end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--===////// GALLERY //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./gallery"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Gallery
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-image fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// GALLERY end //////===-->
<!--===////// LIBRARY //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./literatures"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Library
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-book fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// LIBRARY end //////===-->
<!--===////// WORLDS //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./worlds"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Worlds
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-globe fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// WORLDS end //////===-->
<!--===////// LINKS //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./links"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Links
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-link fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// LINKS end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--===////// COMMENTS //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./comments"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Comments
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-comment fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// COMMENTS end //////===-->
<!--===////// FAVORITE //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./comments"
class="th" data-toggle="th-favorite" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="favorite toggle-favorite" style="position: absolute; top: 8px; right: 13px; z-index: 5">
<span style="position: absolute; left: -184px">Favorite</span>
<i class="fal fa-sparkle"></i>
</span>
<span class="unfavorite toggle-favorite" style="position: absolute; top: 8px; right: 13px; z-index: 5">
<span style="position: absolute; left: -184px">Unfavorite</span>
<i class="fas fa-sparkle"></i>
</span>
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9"></div>
<div class="col justify-content-end align-items-center">
<div class="card border-0" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57"></div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// FAVORITE end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--===////// OWNERSHIP //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./ownership"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Ownership
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-check-square fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// OWNERSHIP end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--===////// REPORT //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/~tickets/create/character/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Report
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-warning fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// REPORT end //////===-->
<!--===////// BLOCK //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./block"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Block
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-cancel fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// BLOCK end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<div class="accordion container p-0" id="accordion">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="#MANAGE"
class="th" data-toggle="collapse" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Manage character
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-caret-right fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div id="MANAGE" class="collapse" data-parent="#accordion">
<!--===AVATAR===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/avatar/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Avatar
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-image fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===AVATAR end===-->
<!--===EDIT PROFILE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/edit/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Edit profile
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-pencil fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===EDIT PROFILE end===-->
<!--===TABS===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/tabs/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Tabs
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-bookmark fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===TABS end===-->
<!--===HISTORY===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/history/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
History
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-history fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===HISTORY end===-->
<div class="my-3 ml-3" style="border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<!--===WARNINGS===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/warnings/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Warnings
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-warning fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===WARNINGS end===-->
<!--===ACCESS KEYS===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/keys/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Access keys
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-key fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===ACCESS KEYS end===-->
<!--===TRADE LISTING===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/trade-listing/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Trade listing
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-handshake fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===TRADE LISTING end===-->
<div class="my-3 ml-3" style="border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<!--===DELETE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/delete/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Delete
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-trash fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===DELETE end===-->
</div>
<!--=== CHARACTER end ===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
IMAGES
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="#MANAGE-IMG"
class="th" data-toggle="collapse" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Manage images
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-caret-right fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div id="MANAGE-IMG" class="collapse" data-parent="#accordion">
<!--===UPLOAD IMAGE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~images/upload/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Upload image
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-plus fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===UPLOAD IMAGE end===-->
<!--===MANAGE IMAGES===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~images/manage-character/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Manage images
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-image fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===MANAGE IMAGES end===-->
<!--===SORT IMAGES===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~images/sort/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Sort images
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-random fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===SORT IMAGES end===-->
</div>
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
LITERATURES
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="#MANAGE-LIT"
class="th" data-toggle="collapse" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Manage literatures
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-caret-right fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div id="MANAGE-LIT" class="collapse" data-parent="#accordion">
<!--===ADD LITERATURE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~literatures/create/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Upload literature
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-plus fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===ADD LITERATURE end===-->
<!--===SORT LITERATURE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~literatures/sort/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Sort literatures
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-random fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===SORT LITERATURE end===-->
</div>
<!--=== LITERATURES end ===-->
</div>
</div>
</div>
<!--===/////////////////////////////////// COMPUTER SIDEBAR end ///////////////////////////////////===-->
<!--===////// MAIN CODE //////===-->
<div class="col-md-10 mx-auto pl-md-3 h-100">
<!-- Utility buttons -->
<ul class="nav nav-button align-items-center justify-content-end mt-3 mr-2" style="margin-bottom: 22px">
<!--///Creation information button///-->
<li class="mx-4">
<a data-toggle="collapse" href="#CREA" style="box-shadow: none; color: #ffffea">
<i class="fa fa-info-circle mt-1" style="font-size: 30px; color: #fdf8da; text-shadow: 0 0 2px #713745, 0 0 2px #713745"></i>
</a>
</li>
<!--Credits button-->
<li>
<a data-toggle="collapse" href="#CREDIT">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96600008_K9c0uSM4k7pfpXi.png" width="35">
</a>
</li>
</ul>
<!-- Utility buttons -->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
UPPER CARD ON PHONE
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
AVATAR [phone]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-auto hidden-sm-up" style="margin-top: -70px; height: 150px; width: 150px">
<div class="card bg-dark border-0 p-0" style="position: absolute; height: 115px; width: 115px; border-radius: 50%; z-index: 1; background: url(
AVATAR_IMAGE_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"><!--PFP IMAGE LINK ABOVE--></div>
<!--///Outer frame///--><!--Check [https://toyhou.se/23579684.misc-sky-cotl-avatar-frame] for more borders and meaning explanation-->
<img class="d-block mx-auto my-auto" style="position: absolute; opacity: 1; z-index: 5" src=
"https://f2.toyhou.se/file/f2-toyhou-se/images/71211585_IQYjqdDDaiOOeid.png">
<!--///Inner spinning frame///--><!-- Feel free to delete -->
<div class="align-items-center justify-content-center" style="position: absolute; width: 123px; z-index: 5">
<i class="fa-spin" style="animation-duration: 26s; opacity: 1"><img class="d-block mx-auto my-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/images/71211558_s1BGtB1nlee2eVn.png"></i>
</div>
<!--///Inner spinning frame end///-->
</div>
<!--===////// AVATAR end //////===-->
<div class="card p-2 mx-auto hidden-sm-up mb-4" style="margin-top: -76px; width: 100%; color: #ffffea; border-radius: 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER NAME [phone]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE."
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-sparkles fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// CHARACTER NAME [phone] end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BLURB [phone]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card" style="padding: 15px; font-size: 0.8em; color: #cdcfc3; border-radius: 23px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<p>
This is a blurb, feel free to delete it tho
</p>
</div>
<!--===////// BLURB [phone] end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SOCIAL LINKS [computer] - duplicate the "SOCIAL LINK" section to add a platform - can be used to add links to an Art Fight profile, playlist, etc
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<ul class="nav nav-button nav-justified justify-content-around mt-2 flex-wrap">
<!--=== SOCIAL LINK ===-->
<li>
<div class="gallery-thumb">
<div class="thumb-image justify-content-center align-items-center" style="width: 35px; height: 35px; font-weight: bold; border-radius: 10px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="SOCIAL_LINK_HERE" title="SOCIAL_NAME_HERE"
class="th tooltipster" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 10px; box-shadow: 0 0 8px rgba(255, 255, 233, 0.5), inset 0 0 8px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!--=== BUTTON ICON ===-->
<i class="fas fa-link
" style="font-size: 13px"></i>
</a>
</div>
</div>
</li>
<!--=== SOCIAL LINK end===-->
</ul>
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BONUS LINKS [phone] - duplicate the "ADDITIONAL SIDE LINK" section to add a link
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--===////// ADDITIONAL SIDE LINK //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="LINK_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Link name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-link fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// ADDITIONAL SIDE LINK end //////===-->
</div>
<!--===/// UPPER CARD PHONE end ///===-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER CREATION INFO
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="collapse fade mt-1 mb-3" id="CREA" style="color: #ffffea">
<div class="col row no-gutters hidden-sm-up mt-n2 mb-3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<div class="row no-gutters">
<div class="col-md-9 card order-md-2 px-3" style="border-radius: 8px; border-width: 1px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<!--Close button-->
<div class="justify-content-end mt-3">
<a data-toggle="collapse" href="#CREA"><i class="fas fa-times" style="font-size: 25px; color: #ffffea"></i></a>
</div>
<!--Close button end-->
<div class="row">
<!--===/// CREATION INFO ///===-->
<div class="col-md-5 pr-3 mr-n2" style="height: 155px; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<!--===CREATED===-->
<div class="row mb-2">
<div class="col-4" style="font-weight: bold">
<p>Created</p>
</div>
<div class="col">
<!--Date-->
<p>
1 Jan 2024, 1:20:30 am
</p>
</div>
</div>
<!--===CREATED end===-->
<!--===CREATOR===-->
<div class="row mb-2">
<div class="col-4" style="font-weight: bold">
<p>Creator</p>
</div>
<div class="col">
<!--Username-->
<a style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/Username">
<i class="fi-star user-name-icon"></i>Username
</a>
</div>
</div>
<!--===CREATOR end===-->
<!--===DESIGNERS===-->
<div class="row mb-2">
<div class="col-4" style="font-weight: bold">
<p>Designers</p>
</div>
<div class="col">
<!--Username-->
<!--Username [external link]-->
<a style="font-weight: bold; color: #7efdfe" href=
"EXTERNAL_LINK_HERE">
Username<i class="fa-solid fa-up-right-from-square ml-1" style="font-size: 10px"></i>
</a>
</div>
</div>
<!--===DESIGNERS end===-->
<!--===OWNER===-->
<div class="row mb-2">
<div class="col-4" style="font-weight: bold">
<p>Owner</p>
</div>
<div class="col">
<!--Username-->
<a style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/Username">
<i class="fi-torso user-name-icon"></i>Username
</a>
</div>
</div>
<!--===OWNER end===-->
</div>
<!--===/// CREATION INFO end ///===-->
<!--===/// Divider ///===-->
<div class="col row no-gutters hidden-sm-up my-2 mb-3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<div class="col-auto hidden-sm-down mr-n4">
<div style="height: 41%; border-width: 0 0 0 1px; border-style: solid"></div>
<div class="border-0 rounded-0 my-1">
<p style="margin-left: -3.4px; font-size: 10px">◆</p>
</div>
<div style="height: 41%; border-width: 0 0 0 1px; border-style: solid"></div>
</div>
<!--===/// Divider end ///===-->
<!--===/// TAGS ///===-->
<div class="col-md card bg-transparent border-0 rounded-0">
<div class="pr-3 mr-n3" style="height: 155px; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<!--Tag 1-->
<div class="card border-0 px-1 mb-1" style="border-radius: 5px; background: #ffffea; display: inline-block">
<a style="font-weight: bold; color: #000" href=
"TAG_LINK_HERE">
tag 1
</a>
</div>
<!--Tag 1 end-->
<!--Tag 2-->
<div class="card border-0 px-1 mb-1" style="border-radius: 5px; background: #ffffea; display: inline-block">
<a style="font-weight: bold; color: #000" href=
"TAG_LINK_HERE">
tag 2
</a>
</div>
<!--Tag 2 end-->
<!--Tag 3-->
<div class="card border-0 px-1 mb-1" style="border-radius: 5px; background: #ffffea; display: inline-block">
<a style="font-weight: bold; color: #000" href=
"TAG_LINK_HERE">
tag 3
</a>
</div>
<!--Tag 3 end-->
</div>
</div>
<!--===/// TAGS end ///===-->
</div>
</div>
<div class="col-md card mr-md-2 mt-md-0 mt-2 order-md-1" style="height: 200px; border-radius: 8px; border-width: 1px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<div class="card bg-transparent border-0 rounded-0 my-auto p-3" style="height: 200px; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="row no-gutters text-center">
<!--===/// Creator ribbons ///===-->
<!-- ||[ 1 ]|| -->
<div class="col-4 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description"><!-- Don't make the tooltips too long, otherwise they won't display! -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 1 ]|| -->
<!--===/// Creator ribbons end ///===-->
</div>
</div>
</div>
</div>
<div class="col row no-gutters hidden-sm-up mt-3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
<!--===/// CHARACTER CREATION INFO end ///===-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
PASTE YOUR CHARACTER CODE HERE
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!-- [REMINDER]
> I cannot guarantee compatibility with actual custom CSS codes.
-->
<div class="card bg-transparent border-0 rounded-0" style="color: #ffffea">
<!-- Change the image link for the main background right above this line -->
<div class="mt-4" style="margin-bottom: 20px">
<!--===/// WINGED LIGHT COUNT ///===-->
<img class="d-block mx-auto tooltipster" data-placement="bottom" title="
200
" src="https://f2.toyhou.se/file/f2-toyhou-se/images/72538958_Qzn1IfB8liC2Y5H.png" style="height: 50px">
<!--===/// WINGED LIGHT COUNT end ///===-->
</div>
<!--=======/////// FUN LINKS ///////========-->
<!--=======/////// FUN LINKS end ///////========-->
<div class="row my-4">
<!--/// Right column sticky ///-->
<div class="col-md mb-2 col-12" style="width: 0%">
<div class="sticky-top">
<div class="card bg-transparent rounded-0 border-0 mb-3">
<p class="text-center text-truncate" style="font-weight: bold; font-size: 30px; text-shadow: 0 0 5px #000, 0 0 3px #000">
Name
</p>
<!--===/// Quote ///===-->
<div class="card bg-transparent border-0 rounded-0 align-items-center">
<div class="card border-0 mt-2" style="padding: 10px; max-height: 75px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<p>"
This is a very cool and epic quote woa<br>
This box will scroll after a certain height!
"</p>
</div>
</div>
<!--===/// Quote end ///===-->
<!--===/// Basic ///===-->
<div class="card border-0 my-2" style="padding: 10px; max-height: 168px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<!-- Age -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Age</p></div>
<div class="col-auto ml-auto"><p>
##
</p></div>
</div>
<!-- Age end -->
<!-- Height -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Height</p></div>
<div class="col-auto ml-auto"><p><a style="font-weight: bold; color: #ff7e01" href="https://www.reddit.com/media?url=https%3A%2F%2Fi.redd.it%2Fyazzlze83qh41.jpg">
#
</a></p></div>
</div>
<!-- Height end -->
<!-- Gender -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Gender</p></div>
<div class="col-auto ml-auto"><p>
content
</p></div>
</div>
<!-- Gender end -->
<!-- Pronouns -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Pronouns</p></div>
<div class="col-auto ml-auto"><p>
pro/nouns
</p></div>
</div>
<!-- Pronouns end -->
<!-- Orientation -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Orientation</p></div>
<div class="col-auto ml-auto"><p>
<!--
Change the link and tooltip titles to the appropriate ones
Copy and paste the "<a>" tag to add another flag
-->
<a data-toggle="tooltip" title="LGBT+">
<img width="30px"
src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/0b1cb6ed-b614-4d6f-a792-6e2d2db50e49/df12p8i-5148214b-27e1-4cea-b418-420e2c629e25.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzBiMWNiNmVkLWI2MTQtNGQ2Zi1hNzkyLTZlMmQyZGI1MGU0OVwvZGYxMnA4aS01MTQ4MjE0Yi0yN2UxLTRjZWEtYjQxOC00MjBlMmM2MjllMjUucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.bfUU644_Y-XtP6mk5Iw-rkWSCGz48RVRya12UOkjtMA"></a>
<a data-toggle="tooltip" title="Queer">
<img width="30px"
src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/0b1cb6ed-b614-4d6f-a792-6e2d2db50e49/df12p7u-5aae0688-c8e6-408f-9360-bfe27b1b9397.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzBiMWNiNmVkLWI2MTQtNGQ2Zi1hNzkyLTZlMmQyZGI1MGU0OVwvZGYxMnA3dS01YWFlMDY4OC1jOGU2LTQwOGYtOTM2MC1iZmUyN2IxYjkzOTcucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.VfwaRcQsMLGFHptAVp77zWeA-p1LT_DE8YRuyXVWmuw"></a>
</p></div>
</div>
<!-- Orientation end -->
</div>
<!--===/// Basic end ///===-->
<!--===/// Voice claim ///===-->
<div class="card border-0 text-center" style="padding: 10px; border-radius: 6px; background: rgba(0, 0, 0, 0.5)">
<p>Voice claim</p>
<p class="mt-n3" style="font-size: 12px; opacity: 0.7">
Name of voice claim here
</p>
<p class="text-center"><i class="fas fa-play-circle" style="font-size: 20px"></i>
<iframe class="flex-fill" style="position: absolute; margin-top: -8px; margin-left: -39px; width: 60px; height: 35px; opacity: 0.001" frameborder="0"
src="https://www.youtube.com/embed/VIDEOID?ps=docs&controls=1">
<!-- ONLY CHANGE "VIDEOID" -->
</iframe>
</p>
</div>
<!--===/// Voice claim end ///===-->
<!--===/// Theme song ///===-->
<div class="card border-0 my-2 text-center" style="padding: 10px; border-radius: 6px; background: rgba(0, 0, 0, 0.5)">
<p>Theme</p>
<p class="mt-n3" style="font-size: 12px; opacity: 0.7">
Song title - artist
</p>
<p class="text-center"><i class="fas fa-play-circle" style="font-size: 20px"></i>
<iframe class="flex-fill" style="position: absolute; margin-top: -8px; margin-left: -39px; width: 60px; height: 35px; opacity: 0.001" frameborder="0"
src="https://www.youtube.com/embed/VIDEOID?ps=docs&controls=1">
<!-- ONLY CHANGE "VIDEOID" -->
</iframe>
</p>
</div>
<!--===/// Theme song end ///===-->
<!--===/// Playist ///===-->
<div class="card border-0 text-center" style="padding: 10px; border-radius: 6px; background: rgba(0, 0, 0, 0.5)">
<p>Playlist</p>
<p class="mt-n3" style="font-size: 12px; opacity: 0.7">
Spotify or YouTube
</p>
<p class="text-center">
<a href="
LINK_HERE
"><i class="fas fa-external-link-square-alt" style="font-size: 20px; color: #ffffea"></i></a>
</p>
</div>
<!--===/// Playist end ///===-->
<!--===/// Decorative controls ///===-->
<div class="row no-gutters mt-2">
<div class="col">
<div class="card" style="padding: 10px; border-radius: 30px 0 0 30px; border-width: 1px 0 1px 1px; border-color: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.5)">
<div class="row no-gutters">
<div class="col-4">
<p class="justify-content-between pl-2 pr-3">
<img class="fa-flip-horizontal" src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574399_ISOXkfgYQFhmHqy.png" width="25" style="opacity: 0.5">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574399_ISOXkfgYQFhmHqy.png" width="25" style="opacity: 0.5">
</p>
</div>
<div class="mx-md-2 my-n1" style="border-width: 0 1px 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<div class="col">
<p class="justify-content-between px-3" style="font-size: 25px">
<a class="mb-n2" style="margin-top: -10px" href="#" data-toggle="th-favorite">
<span class="favorite toggle-favorite">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574328_c1SwrAQE2AwiKXr.png" width="25">
</span>
<span class="unfavorite toggle-favorite">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574352_AVC7CTgM30PYCuZ.png" width="25">
</span>
</a>
<span style="font-size: 12px"><img class="mr-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574424_pTAU3yttAd8jqPl.png" width="25">0</span>
</p>
</div>
<div class="my-n1" style="border-width: 0 1px 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<div class="col-auto">
<p class="justify-content-between pl-4 pr-3" style="font-size: 25px">
<i class="fas fa-ellipsis" style="text-shadow: 0 0 3px #684647, 0 0 3px #684647"></i>
</p>
</div>
</div>
</div>
</div>
<div class="card rounded-0" style="padding: 0.5px; border-width: 1px 0; border-color: rgba(0, 0, 0, 0.8); background-color: rgba(255, 255, 239, 0.5)"></div>
<div class="col-auto mx-auto">
<div class="card h-100 justify-content-center" style="padding-left: 13px; padding-right: 13px; font-size: 15px; border-width: 1px 1px 1px 0; border-radius: 0 30px 30px 0; border-color: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.7)">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</div>
<!--===/// Decorative controls end ///===-->
</div>
</div>
</div>
<!--/// Right column sticky end ///-->
<!--/// Left column ///-->
<div class="col-md-7 mt-md-0 mt-n3 mb-md-0 mb-3">
<!--===/// Description ///===-->
<!-- Title -->
<div class="card py-3 px-4 mt-3" style="border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters align-items-center">
<div class="col-auto"><p style="font-weight: bold; font-size: 17px">Character description</p></div>
<div class="col justify-content-center mx-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.1"></div>
<!-- Title end -->
<!-- Content -->
<div class="card" style="height: 300px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 300px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-4 pb-4">
<!-- Text -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Subheader
</span><br><!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
This is where you write the very juicy juicy juicy information about your silly little character! Whether it be describing their personality or just talk about their life, and what they do, honestly you can just go wild with this!!! Maybe you want to talk about how people perceive them? Perhaps even how their thought process functions? You can write as much [or as little] as you want!!! This box scrolls anyway so you'll never run out of space!!!
</p>
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Subheader
</span><br><!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
This is another subheader, in case you want to split the description into multiple, defined, parts. Like maybe have a description for the character through time? Starting from when they were little to now! Or even in the <em>~future~</em>,,,
</p>
<!-- Text end -->
</div>
</div>
</div>
<!-- Content end -->
<!--===/// Description end ///===-->
<!--===/// Interests ///===-->
<!-- Title -->
<div class="card py-3 px-4 mt-3" style="border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters align-items-center">
<div class="col-auto"><p style="font-weight: bold; font-size: 17px">Interests</p></div>
<div class="col justify-content-center mx-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.1"></div>
<!-- Title end -->
<!-- Content -->
<div class="card" style="height: 300px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 300px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-4 pb-4">
<!-- Text -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Subheader
</span><br><!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Write about your character's silly ineterest, whether it's the usual ones like having fun dodging krills, or the bat shxt insane stuff like having an unhealthy obsession with gold, write at your heart's content! Let's here about this silly guy's hobbies, what do they like doing on a daily basis? Are they good at it? Are they ashamed of others learning about it? Or maybe it is such a defining trait of their personality that they would literally shut down if they ever stopped practicing it? Go wild man!!!! Infodump!!!
</p>
<!-- Text end -->
</div>
</div>
</div>
<!-- Content end -->
<!--===/// Interests end ///===-->
<!--===/// Backstory ///===-->
<!-- Title -->
<div class="card py-3 px-4 mt-3" style="border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters align-items-center">
<div class="col-auto"><p style="font-weight: bold; font-size: 17px">Backstory</p></div>
<div class="col justify-content-center mx-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.1"></div>
<!-- Title end -->
<!-- Content -->
<div class="card" style="height: 300px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 210px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-4 pb-4">
<!-- Text -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Subheader
</span><br><!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Write the backstory of your silly critter!!! I do recommend keeping it rather short as to not overwhelm others with text! If there is a need to have a longer backstory, I recommend using the button at the very end of this scrollbox to link a litterature or separate tab with it, so people get to choose whether or not they want to read the rest!
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>
<!-- Text end -->
</div>
</div>
<!-- Read more button -->
<div class="mx-4">
<div class="mb-3" style="border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<div class="justify-content-center">
<div class="gallery-thumb">
<div class="thumb-image justify-content-center tooltipster" title="Read more" style="width: 57px; height: 57px; border-radius: 16px; background: rgba(0, 0, 0, 0.5)">
<!--
To "disable" the button, delete the "href" below and add "cursor: not-allowed; opacity: 0.5" in the "style"
Don't forget to add back the "href" and delete the "cursor: not-allowed; opacity: 0.5" once you want to link something to this button!
-->
<!--== Link ==-->
<a href="READ_MORE_LINK_HERE"
style="color: #ffffea; box-shadow: none; text-decoration: none" class="th m-auto">
<span class="card bg-transparent thumb-sensitive" style="position: absolute; top: 2.5px; left: 2.4px; height: 52px; width: 52px; border: 2px solid #ffffe9; border-radius: 14px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent m-auto" style="width: 52px; height: 52px; border-width: 2px; border-radius: 14px; border-color: rgba(91, 92, 87, 0.7)">
<!--=== BUTTON ICON ===-->
<i class="fas fa-book m-auto" style="font-size: 35px; color: #ffffe9"></i>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- Read more button end -->
</div>
<!-- Content end -->
<!--===/// Backstory end ///===-->
<!--===/// Trivia ///===-->
<!-- Title -->
<div class="card py-3 px-4 mt-3" style="border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters align-items-center">
<div class="col-auto"><p style="font-weight: bold; font-size: 17px">Trivia</p></div>
<div class="col justify-content-center mx-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.1"></div>
<!-- Title end -->
<!-- Content -->
<div class="card" style="height: 300px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 300px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-4 pb-4">
<!-- List -->
<ul class="list-unstyled mt-3">
<li><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>content</li>
<li><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>content</li>
<li><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>content</li>
<li><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>content</li>
<li><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>content</li>
</ul>
<!-- List end -->
</div>
</div>
</div>
<!-- Content end -->
<!--===/// Trivia end ///===-->
<!--===/// Ribbons ///===-->
<!-- Title -->
<div class="card py-3 px-4 mt-3" style="border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters align-items-center">
<div class="col-auto"><p style="font-weight: bold; font-size: 17px">Ribbon collection</p></div>
<div class="col justify-content-center mx-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.1"></div>
<!-- Title end -->
<!-- Content -->
<div class="card" style="height: 300px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 300px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-4 pb-4">
<!-- SECTION 1 -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Name of ribbon collection
</span></p>
<div class="row no-gutters text-center mb-2">
<!-- ||[ 0 ]|| = 1 ribbon -->
<!-- ||[ 1 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 1 ]|| -->
<!-- ||[ 2 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 2 ]|| -->
<!-- ||[ 3 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 3 ]|| -->
<!-- ||[ 4 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 4 ]|| -->
<!-- ||[ 5 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 5 ]|| -->
<!-- ||[ 6 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 6 ]|| -->
</div>
<!--SECTION 1-->
<!--SECTION 2-->
<!--Subheader-->
<p><span class="justify-content-start mt-3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Name of ribbon collection
</span></p>
<div class="row no-gutters text-center mb-2">
<!-- ||[ 0 ]|| = 1 ribbon -->
<!-- ||[ 1 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 1 ]|| -->
<!-- ||[ 2 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 2 ]|| -->
<!-- ||[ 3 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 3 ]|| -->
<!-- ||[ 4 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 4 ]|| -->
<!-- ||[ 5 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 5 ]|| -->
<!-- ||[ 6 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 6 ]|| -->
</div>
<!-- SECTION 2 -->
<!--
Dont mind this random p tag,,, its the only solution I found for the different ribbon sections to have the same margin between the title and the ribbons smh
If you delete it, you'll notice the very last section doesn't have the same margin, and I do not know why
-->
<p></p>
<!-- Text end -->
</div>
</div>
</div>
<!-- Content end -->
<!--===/// Ribbons end ///===-->
</div>
<!--/// Left column end ///-->
</div>
<!--=======/////// CLOSET DIVIDER ///////========-->
<div class="row no-gutters my-3">
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, rgba(0, 0, 0, 0), #ffffea, #ffffea)"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="margin-top: -23px; font-size: 30px">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!--=======/////// CLOSET DIVIDER end ///////========-->
<!--=======/////// SECTION TITLE ///////========-->
<div class="card p-3 mb-md-4 text-center" style="border-radius: 10px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<h1 class="mt-1">Outfit shrine</h1>
<p style="font-size: 15px; color: #cdcfc3">Design notes</p>
</div>
<!--=======/////// SECTION TITLE end ///////========-->
<div class="row no-gutters mb-3">
<!--/// Full body image ///--><!-- You may play with the max and min height if your image doesn't look correctly proportionned -->
<div class="col-lg-5">
<div class="sticky-top">
<div class="card bg-transparent border-0 rounded-0 pt-md-5">
<img class="d-block my-3 mx-auto" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/69495205_Ir72I07ys8SlDvP.png
" style="max-height: 470px; min-height: 350px; object-fit: cover; object-position: center; "><!--
If the full body gets muddied with the background, add the following snippet to the style to add a white border around it:
filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-0.5px 0px 0 #fff) drop-shadow(-0px -0px 0 #fff) drop-shadow(-0px -0.5px 0 #fff)
-->
</div>
</div>
</div>
<!--/// Full body image end ///-->
<!--/// CLOSET ///-->
<div class="col" style="margin-right: -15px">
<!--===/// OUTFITS PAGE ///===-->
<div id="ACC-OUTFIT" class="mt-3">
<div id="ACC-OUTFIT-2" class="card border-0 rounded-0 align-items-center" style="background: rgba(0, 0, 0, 0.7)">
<div class="row no-gutters">
<!-- Buttons -->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603077_thtEYQo0GPQ2R1Y.png" style="height: 40px;opacity: 0.6">
<div class="collapse fade show OUTFIT" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-OUTFIT-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603077_thtEYQo0GPQ2R1Y.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".OUTFIT"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358456_6g3cv2EpYvBIwJj.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade SHOES" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-OUTFIT-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358456_6g3cv2EpYvBIwJj.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".SHOES"></a>
</div>
</li>
</ul>
</div>
<!-- Buttons end -->
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.2"></div>
</div>
<div class="card border-0 rounded-0 pl-3" style="height: 450px; background: rgba(0, 0, 0, 0.6); overflow: hidden">
<!--/// PANTS TAB ///-->
<div class="collapse fade show active OUTFIT" data-parent="#ACC-OUTFIT">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Top -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Top
</span><br>
<!--Image-->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Write a small description about the outfit your character wears! Notably the top portion! Maybe they have addtional details that don't exist in-game, or maybe you just want to describe it to be visible by screen readers or help people better understand what it looks like! You can also add an image to it if you have drawn it, or taken a screenshott of it!
</p>
<!-- Top end -->
<!-- Bottom -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Bottom
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
This part is for the bottom of the outfit, such as pants, skirt, shorts, etc! You can also add a picture to the side of the text! The text warps around it anyways.<br>
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>
<!-- Bottom end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
If the outfit has additional details that are easily forgotten by others or aren't part of the in-game model, write them here! You can basically put an image next to anything on this entire outfit shrine if you copy paste the line of code related to it lol. You can also add the body type here!<br>
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>
<!-- Details end -->
</div>
</div>
</div>
<!--/// PANTS TAB ///-->
<!--/// SHOES TABS ///-->
<div class="collapse fade SHOES" data-parent="#ACC-OUTFIT">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Shoes -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Shoes
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Pretty self explanatory, it's for the shoes!<br>
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>
<!-- Shoes end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Just in case you need to add details here!<br>
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>
<!-- Details end -->
</div>
</div>
</div>
<!--/// SHOES TAB ///-->
</div>
</div>
<!--===/// OUTFITS PAGE end ///===-->
<!--===/// FACE PAGE ///===-->
<div id="ACC-FACE" class="mt-3">
<div id="ACC-FACE-2" class="card border-0 rounded-0 align-items-center" style="background: rgba(0, 0, 0, 0.7)">
<div class="row no-gutters">
<!-- Buttons -->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358447_AvXVBRPZEBqf2TC.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade show MASK" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-FACE-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358447_AvXVBRPZEBqf2TC.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".MASK"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72359091_6loKsROxA4qtouq.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade ACCS-FACE" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-FACE-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72359091_6loKsROxA4qtouq.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".ACCS-FACE"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603441_NoEUznqETpxByiG.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade NECK" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-FACE-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603441_NoEUznqETpxByiG.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".NECK"></a>
</div>
</li>
</ul>
</div>
<!-- Buttons end -->
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.2"></div>
</div>
<div class="card border-0 rounded-0 pl-3" style="height: 450px; background: rgba(0, 0, 0, 0.6)">
<!--/// MASK AND FACE TAB ///-->
<div class="collapse fade show active MASK" data-parent="#ACC-FACE">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Structure -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Face structure
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line-->
Text area to write what facial feature and structure your character has!! Such as face, eye, and nose shape.<br>
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>
<!-- Structure end -->
<!-- Mask -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Mask
</span><br>
<!-- Image -->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Also a self explanatory section, just write anything about the mask they wear, or the lack thereof! Face paint also fits this category.<br>
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>
<!-- Mask end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
If your character has some specific features, such as tattoos, moles, crooked teeth, etc etc!<br>
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>
<!-- Details end -->
</div>
</div>
</div>
<!--/// MASK AND FACE TAB ///-->
<!--/// FACE ACCESSORIES TAB ///-->
<div class="collapse fade ACCS-FACE" data-parent="#ACC-FACE">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Accessories -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Accessories
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Face accessories, such as sunglasses, or any of the cosmetics in this tab in-game, fit here!<br>
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>
<!-- Accessories end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
More details!!!<br>
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>
<!-- Details end -->
</div>
</div>
</div>
<!--/// FACE ACCESSORIES TAB ///-->
<!--/// NECK ACCESSORIES TAB ///-->
<div class="collapse fade NECK" data-parent="#ACC-FACE">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Accessories neck -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Accessories
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Neck accessories!!!! For when they have something around their neck.<br>
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>
<!-- Accessories neck end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Oh yeah here's the details section!!!<br>
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>
<!-- Details end -->
</div>
</div>
</div>
<!--/// Neck accessories tab end ///-->
</div>
</div>
<!--===/// FACE PAGE end///===-->
<!--===/// HEAD PAGE ///===-->
<div id="ACC-HEAD" class="mt-3">
<div id="ACC-HEAD-2" class="card border-0 rounded-0 align-items-center" style="background: rgba(0, 0, 0, 0.7)">
<div class="row no-gutters">
<!-- Buttons -->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358424_KTeHcdt16OquTVN.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade show HAIR" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-HEAD-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358424_KTeHcdt16OquTVN.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".HAIR"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603451_tXV4olsXIf3MP1A.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade ACCS-HEAD" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-HEAD-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603451_tXV4olsXIf3MP1A.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".ACCS-HEAD"></a>
</div>
</li>
</ul>
</div>
<!-- Buttons end -->
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.2"></div>
</div>
<div class="card border-0 rounded-0 pl-3" style="height: 450px; background: rgba(0, 0, 0, 0.6)">
<!--/// HAIR TAB ///-->
<div class="collapse fade show HAIR" data-parent="#ACC-HEAD">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Hairstyle -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Hairstyle
</span><br>
<!-- Image -->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Ok at this point you must have understood how these tab work!<br>
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>
<!-- Hairstyle end -->
<!-- Texture + details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Texture and details
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!--Image end-->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
This is for the hair texture and other details!!!<br>
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>
<!-- Texture + details end -->
</div>
</div>
</div>
<!--/// HAIR TAB ///-->
<!--/// HEAD ACCESSORIES TAB ///-->
<div class="collapse fade ACCS-HEAD" data-parent="#ACC-HEAD">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Hat -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Hat
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Hat end -->
<!-- Accessories hair -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Accessories
</span><br>
<!-- Image -->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Accessories hair end -->
</div>
</div>
</div>
<!--/// HEAD ACCESSORIES TAB end///-->
</div>
</div>
<!--===///HEAD PAGE end///===-->
<!--===/// CAPE PAGE ///===-->
<div class="card border-0 rounded-0 align-items-center mt-3" style="height: 57px; background: rgba(0, 0, 0, 0.7)"></div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.2"></div>
<div class="card border-0 rounded-0" style="height: 450px; color: #cdcfc3; background: rgba(0, 0, 0, 0.6); scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-4 pb-4">
<!-- Cape -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Cape
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Cape end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Details end -->
</div>
</div>
<!--/// Details tab ///-->
<!--===/// CAPE PAGE end///===-->
<!--===/// PROPS PAGE ///===-->
<div id="ACC-PROP" class="mt-3">
<div id="ACC-PROP-2" class="card border-0 rounded-0 align-items-center" style="background: rgba(0, 0, 0, 0.7)">
<div class="row no-gutters">
<!-- Buttons -->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358385_8caxhrNR0gkFChw.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade show INSTRU" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-PROP-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358385_8caxhrNR0gkFChw.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".INSTRU"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603460_F1W5Ymc1aOvESjr.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade PROP" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-PROP-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603460_F1W5Ymc1aOvESjr.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".PROP"></a>
</div>
</li>
</ul>
</div>
<!-- Buttons end -->
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.2"></div>
</div>
<div class="card border-0 rounded-0 pl-3" style="height: 450px; background: rgba(0, 0, 0, 0.6)">
<!--/// INSTRUMENT TAB ///-->
<div class="collapse fade show INSTRU" data-parent="#ACC-PROP">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Main -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Main instrument
</span><br>
<!-- Image -->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Main end -->
<!-- Secondary -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Secondary instrument/prop
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Secondary end -->
</div>
</div>
</div>
<!--/// INSTRUMENT TAB ///-->
<!--/// PROP TAB ///-->
<div class="collapse fade PROP" data-parent="#ACC-PROP">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Main -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Main prop
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Main end -->
<!-- Secondary -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Secondary prop
</span><br>
<!-- Image -->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Secondary end -->
</div>
</div>
</div>
<!--/// PROP TAB end///-->
</div>
</div>
<!--===/// PROPS PAGE end ///===-->
</div>
<!--/// CLOSET end ///-->
</div>
<!--=======/////// RELATIONSHIP DIVIDER ///////========-->
<div class="row no-gutters my-3">
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, rgba(0, 0, 0, 0), #ffffea, #ffffea)"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="margin-top: -23px; font-size: 30px">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!--=======/////// RELATIONSHIP DIVIDER end ///////========-->
<!--=======/////// SECTION TITLE ///////========-->
<div class="card p-3 mb-4 text-center" style="border-radius: 10px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<h1 class="mt-1">Friendship constellation</h1>
<p style="font-size: 15px; color: #cdcfc3">Relationships</p>
</div>
<!--=======/////// SECTION TITLE end ///////========-->
<!--=======/////// RELATIONSHIP DESCRIPTIONS ///////========-->
<!--===/// CHARA [1] ///===--><!-- Copy the entire "CHARA [0]" section to add a new link -->
<div class="row mt-3">
<!--===/// Right picture ///===-->
<div class="col-md-auto mb-3 order-md-2 my-auto">
<!--/// Picture ///-->
<div class="card mx-auto bg-transparent border-0 rounded-0 p-0 align-items-center justify-content-center" style="height: 196px; width: 196px;">
<!--/// Avatar ///-->
<div class="card border-0 p-0" style="height: 150px; width: 150px; border-radius: 50%; z-index: 5; background: url(
AVATAR_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"></div>
<!--/// Outer frame [LVL 4, SPINS] ///-->
<img class="d-block mx-auto my-auto" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/75393819_T9bW5LwCHDfGkvO.png
" style="position: absolute; opacity: 1; z-index: 5">
<!--/// Inner spinning frame ///-->
<div class="align-items-center justify-content-center" style="position: absolute; width: 156px; z-index: 5">
<i class="fa-spin" style="animation-duration: 26s"><img class="d-block mx-auto my-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75393824_cNfM0cZkOOKtPRh.png"></i>
</div>
<!--/// Inner spinning frame end ///-->
</div>
<!--/// Picture end ///-->
</div>
<!--===/// Right picture end ///===-->
<!--===/// Left description ///===-->
<div class="col-md order-md-1">
<!-- Title + Link -->
<div class="card p-3" style="font-weight: bold; font-size: 17px; border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters align-items-center">
<div class="col-auto"><p><a style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/CHARAID.">
Name
</a></p></div>
<div class="col justify-content-center mx-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto ml-auto"><p>
Relationship status
</p></div>
</div>
</div>
<!-- Title + Link end -->
<!-- Content -->
<div class="card" style="height: 150px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 150px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-3 pt-3 pb-4">
<!-- Text -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p>
This is a box to further develop the relationship between the 2 characters! This box scrolls so you can write as much as you'd like! Tho I do recommend to not write <em>too</em> much to avoid overwhelming others with the amount of text. But do whatever you want, I'm not your legal guardien :p
</p>
<!-- Text end -->
</div>
</div>
</div>
<!-- Content end -->
</div>
<!--===/// Left description end ///===-->
</div>
<!--===/// CHARA [1] end ///===-->
<!--===/// CHARA [2] ///===-->
<div class="row mt-3">
<!--===/// Right picture ///===-->
<div class="col-md-auto mb-3 order-md-2 my-auto">
<!--/// Picture ///-->
<div class="card mx-auto bg-transparent border-0 rounded-0 p-0 align-items-center justify-content-center" style="height: 196px; width: 196px;">
<!--/// Avatar ///-->
<div class="card border-0 p-0" style="height: 150px; width: 150px; border-radius: 50%; z-index: 5; background: url(
AVATAR_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"></div>
<!--/// Outer frame [LVL 3] ///-->
<img class="d-block mx-auto my-auto" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/75393819_T9bW5LwCHDfGkvO.png
" style="position: absolute; opacity: 1; z-index: 5">
</div>
<!--/// Picture end ///-->
</div>
<!--===/// Right picture end ///===-->
<!--===/// Left description ///===-->
<div class="col-md order-md-1">
<!-- Title + Link -->
<div class="card p-3" style="font-weight: bold; font-size: 17px; border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters align-items-center">
<div class="col-auto"><p><a style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/CHARAID.">
Name
</a></p></div>
<div class="col justify-content-center mx-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto ml-auto"><p>
Relationship status
</p></div>
</div>
</div>
<!-- Title + Link end -->
<!-- Content -->
<div class="card" style="height: 150px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 150px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-3 pt-3 pb-4">
<!-- Text -->
<!-- Subheader -->
<p>
Silly fun fact! The frames around the pictures are used to showcase how strong a relationship is! The more your character loves the other, the more detailed the frame is! This empty template has all 5 possible levels, going from strongest to weakest, so don't hesistate to copy paste, and move those frames around if need be!
</p>
<!-- Text end -->
</div>
</div>
</div>
<!-- Content end -->
</div>
<!--===/// Left description end ///===-->
</div>
<!--===/// CHARA [2] end ///===-->
<!--===/// CHARA [3] ///===-->
<div class="row mt-3">
<!--===/// Right picture ///===-->
<div class="col-md-auto mb-3 order-md-2 my-auto">
<!--/// Picture ///-->
<div class="card mx-auto bg-transparent border-0 rounded-0 p-0 align-items-center justify-content-center" style="height: 196px; width: 196px;">
<!--/// Avatar ///-->
<div class="card border-0 p-0" style="height: 150px; width: 150px; border-radius: 50%; z-index: 5; background: url(
AVATAR_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"></div>
<!--/// Outer frame [LVL 2] ///-->
<img class="d-block mx-auto my-auto" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/75393822_s395YZlvX9nJ2IL.png
" style="position: absolute; opacity: 1; z-index: 5">
</div>
<!--/// Picture end ///-->
</div>
<!--===/// Right picture end ///===-->
<!--===/// Left description ///===-->
<div class="col-md order-md-1">
<!-- Title + Link -->
<div class="card p-3" style="font-weight: bold; font-size: 17px; border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters align-items-center">
<div class="col-auto"><p><a style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/CHARAID.">
Name
</a></p></div>
<div class="col justify-content-center mx-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto ml-auto"><p>
Relationship status
</p></div>
</div>
</div>
<!-- Title + Link end -->
<!-- Content -->
<div class="card" style="height: 150px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 150px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-3 pt-3 pb-4">
<!-- Text -->
<!-- Subheader -->
<p>
Oh also the character profile link is in the name in the card above. I wanted to put it on the image at first, but ehhhh, too much of a hassle! So I opted for the easy way out lololol
</p>
<!-- Text end -->
</div>
</div>
</div>
<!-- Content end -->
</div>
<!--===/// Left description end ///===-->
</div>
<!--===/// CHARA [3] end ///===-->
<!--===/// CHARA [4] ///===-->
<div class="row mt-3">
<!--===/// Right picture ///===-->
<div class="col-md-auto mb-3 order-md-2 my-auto">
<!--/// Picture ///-->
<div class="card mx-auto bg-transparent border-0 rounded-0 p-0 align-items-center justify-content-center" style="height: 196px; width: 196px;">
<!--/// Avatar ///-->
<div class="card border-0 p-0" style="height: 150px; width: 150px; border-radius: 50%; z-index: 5; background: url(
AVATAR_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"></div>
<!--/// Outer frame [LVL 1] ///-->
<img class="d-block mx-auto my-auto" src="
https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/75393824_cNf.png
" style="position: absolute; opacity: 1; z-index: 5">
</div>
<!--/// Picture end ///-->
</div>
<!--===/// Right picture end ///===-->
<!--===/// Left description ///===-->
<div class="col-md order-md-1">
<!-- Title + Link -->
<div class="card p-3" style="font-weight: bold; font-size: 17px; border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters align-items-center">
<div class="col-auto"><p><a style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/CHARAID.">
Name
</a></p></div>
<div class="col justify-content-center mx-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto ml-auto"><p>
Relationship status
</p></div>
</div>
</div>
<!-- Title + Link end -->
<!-- Content -->
<div class="card" style="height: 150px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 150px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-3 pt-3 pb-4">
<!-- Text -->
<!-- Subheader -->
<p>
Ok I don't have anything else to add here, have filler text!<br>
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>
<!-- Text end -->
</div>
</div>
</div>
<!-- Content end -->
</div>
<!--===/// Left description end ///===-->
</div>
<!--===/// CHARA [4] end ///===-->
<!--===/// CHARA [5] ///===-->
<div class="row mt-3">
<!--===/// Right picture ///===-->
<div class="col-md-auto mb-3 order-md-2 my-auto">
<!--/// Picture ///-->
<div class="card mx-auto bg-transparent border-0 rounded-0 p-0 align-items-center justify-content-center" style="height: 196px; width: 196px;">
<!--/// Avatar ///-->
<div class="card border-0 p-0" style="height: 150px; width: 150px; border-radius: 50%; z-index: 5; background: url(
AVATAR_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"></div>
<!--/// Outer frame [LVL 0, NO FRAME] ///-->
</div>
<!--/// Picture end ///-->
</div>
<!--===/// Right picture end ///===-->
<!--===/// Left description ///===-->
<div class="col-md order-md-1">
<!-- Title + Link -->
<div class="card p-3" style="font-weight: bold; font-size: 17px; border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters align-items-center">
<div class="col-auto"><p><a style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/CHARAID.">
Name
</a></p></div>
<div class="col justify-content-center mx-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto ml-auto"><p>
Relationship status
</p></div>
</div>
</div>
<!-- Title + Link end -->
<!-- Content -->
<div class="card" style="height: 150px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 150px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-3 pt-3 pb-4">
<!-- Text -->
<!-- Subheader -->
<p>
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.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>
<!-- Text end -->
</div>
</div>
</div>
<!-- Content end -->
</div>
<!--===/// Left description end ///===-->
</div>
<!--===/// CHARA [5] end ///===-->
<!--=======/////// RELATIONSHIP DESCRIPTIONS end ///////========-->
</div>
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
PASTE YOUR CHARACTER CODE HERE end
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!-- Divider -->
<div class="row no-gutters mt-5 mb-4">
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, rgba(0, 0, 0, 0), #ffffea, #ffffea)"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="margin-top: -23px; font-size: 30px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
FEATURED GALLERY
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card p-3" style="border-radius: 25px; border-width: 1px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<div class="row no-gutters align-items-center mb-2">
<div class="col-auto">
<a href="https://toyhou.se/CHARA_ID_HERE./gallery" style="font-size: 20px; font-weight: bold; color: #ffffea">
Featured images
</a>
</div>
<div class="col justify-content-center ml-2" style="color: #ffffea; border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<ul class="magnific-gallery image-gallery auto-clear gallery-row large-block-grid-6 justify-content-around">
<!--
THERE ARE 2 DIFFERENT VERSIONS OF THE FEATURED IMAGE GALLERY
The first is very basic, it simply shows the image, and when clicked on, redirects you to the gallery with its full size version, it's the simpler variant of the 2.
Can be found between the commentary "SIMPLE IMAGE SHOWCASE".
The second is way more complex, and requires being able to navigate the code and pay CLOSE ATTENTION to the commentaries left inside it. It mimicks the image viewer and is very tedious to put in place. I would not recommend this version if you do not know what you are doing or do not want to bother with this level of customisation!
Can be found between the commentary "IMAGE VIEWER MIMIC".
I HIGHLY recommend completely removing the version you will not be using so that every image has the same functionality, as well as to avoid getting lost in it, as it's VERY easy to be so. Each version has been put between commentaries as you can see below.
Side note: due to how the interactive element has been implemented, the images are slightly desaturated [by 40% more precisely]. So if you see your images being less vibrant than they actually are, it's perfectly normal!
-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SIMPLE IMAGE SHOWCASE - Delete this entire section if going unsused
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--/// Image ///--><!-- Duplicate this entire "image" section to add an image - maximum of 6 recommended -->
<li class="gallery-item">
<div class="gallery-thumb text-center">
<div class="card border-0 thumb-image" style="border-radius: 10px; background: rgba(0, 0, 0, 0.8)">
<!-- Full image link [aka paste the link from the URL found in the SEARCH BAR when you open the image viewer inside the gallery] -->
<a href="FULL_SIZE_IMAGE_LINK_FROM_GALLERY_HERE"
class="th" style="padding: 6.5px; box-shadow: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 10px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!-- Thumbnail image link from gallery [aka paste the link of the THUMBNAIL - not the full size image itself - by "click right + copy image address" on the THUMBNAIL] -->
<img src="THUMBNAIL_LINK_FROM_IMAGE_HERE"
style="max-height: 200px; border-radius: 5px; object-fit: contain; object-position: center">
</a>
</div>
</div>
</li>
<!--/// Image end ///-->
<!--===///////// SIMPLE IMAGE SHOWCASE end /////////===-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
IMAGE VIEWER MIMIC - Delete this entire section if going unsused
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--/// Image ///--><!-- Duplicate this entire "image" section to add an image - maximum of 6 recommended -->
<li class="gallery-item">
<div class="gallery-thumb text-center">
<div class="card border-0 thumb-image" style="border-radius: 10px; background: rgba(0, 0, 0, 0.8)">
<!-- Full image link [aka paste the link of the FULL SIZE image from the gallery - "click right + copy image address"] -->
<a href="FULL_SIZE_IMAGE_LINK_HERE"
class="th magnific-item" style="padding: 6.5px; box-shadow: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 10px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!-- Thumbnail image link from gallery [aka paste the link of the THUMBNAIL - not the full size image itself - by "click right + copy image address" on the THUMBNAIL] -->
<img src="THUMBNAIL_LINK_FROM_IMAGE_HERE"
style="max-height: 200px; border-radius: 5px; object-fit: contain; object-position: center">
</a>
<!--===/////// IMAGE METADATA ///////===--><!-- Feel free to remove this entire section if you don't need it -->
<div class="magnific-caption hide">
<div class="card rounded-0 border-0 mt-n1" style="color: #ffffea; background-image: url(
LINK_TO_BACKGROUND_IMAGE_HERE
); background-size: cover; background-position: center"><!-- Background link right above -->
<div class="card rounded-0 p-3" style="border-width: 2px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<!--===/// BUTTONS ///===-->
<div class="row no-gutters align-items-center mt-n2 mb-2">
<div class="col-auto"><p class="mt-3" style="font-size: 20px; font-weight: bold">Details</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto">
<ul class="nav nav-button nav-justified justify-content-left mt-1 flex-wrap">
<!--=== FULL SIZE IMAGE BUTTON ===-->
<li class="mx-1 card border-0 align-items-center" style="padding: 2px; width: 50px; height: 50px; border-radius: 11px; background: rgba(0, 0, 0, 0.8)">
<div class="gallery-item">
<div class="gallery-thumb">
<div class="card border-0 thumb-image bg-transparent" style="position: absolute; left: 2px; width: 46px; height: 46px">
<!-- Full size image link [aka copy the image ID - it's the numbers found at the end of the URL after the '#'] -->
<a href="https://toyhou.se/~images/IMAGE_ID_HERE"
class="th m-auto justify-content-center" style="padding: 6px; color: #ffffe9; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 2px solid #ffffe9; border-radius: 9px; box-shadow: 0 0 5px rgba(255, 255, 233, 0.5), inset 0 0 5px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!--=== BUTTON ICON ===-->
<i class="fas fa-link
" style="font-size: 25px"></i>
</a>
</div>
</div>
</div>
</li>
<!--=== FULL SIZE IMAGE BUTTON end ===-->
<!--=== EDIT IMAGE BUTTON ===-->
<li class="mx-1 card border-0 align-items-center" style="padding: 2px; width: 50px; height: 50px; border-radius: 11px; background: rgba(0, 0, 0, 0.8)">
<div class="gallery-item">
<div class="gallery-thumb">
<div class="card border-0 thumb-image bg-transparent" style="position: absolute; left: 2px; width: 46px; height: 46px">
<!-- Full size image link [aka copy the image ID - it's the numbers found at the end of the URL after the '#'] -->
<a href="https://toyhou.se/~images/edit/IMAGE_ID_HERE"
class="th m-auto justify-content-center" style="padding: 6px; color: #ffffe9; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 2px solid #ffffe9; border-radius: 9px; box-shadow: 0 0 5px rgba(255, 255, 233, 0.5), inset 0 0 5px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!--=== BUTTON ICON ===-->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96663874_TlSEdTha2UZZpgi.png?1741029340" width="33">
</a>
</div>
</div>
</div>
</li>
<!--=== EDIT IMAGE BUTTON end ===-->
</ul>
</div>
</div>
<!--===/// BUTTONS end ///===-->
<p class="mt-n3 mb-2" style="color: #cdcfc3">
Viewing full image.
</p>
<!--===/// OPTIONAL CAPTION ///===--><!-- Remove this entire section if going unused, or just write "No caption" -->
<div class="mt-3">
<p style="font-size: 20px; font-weight: bold">Caption</p>
<p class="mt-n2" style="color: #cdcfc3">
Caption here.
</p>
</div>
<!--===/// OPTIONAL CAPTION ///===-->
<div class="row">
<!--===/// IMAGE CREDITS ///===-->
<div class="col-md-6 mt-3">
<p style="font-size: 20px; font-weight: bold">Credits</p>
<p class="mt-n2" style="color: #cdcfc3">
<!-- Date -->
1 Jan 2024, 12:12:12 am
</p>
<p class="mx-n2 mt-n2">
<!-- Username [star/premium] -->
<a class="m-2" style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/Username">
<i class="fi-star user-name-icon"></i>Username
</a>
<!-- Username [torso/normal] -->
<a class="m-2" style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/Username">
<i class="fi-torso user-name-icon"></i>Username
</a>
<!-- Username [external link] -->
<a class="m-2" style="font-weight: bold; color: #7efdfe" href=
"EXTERNAL_LINK_HERE">
Username<i class="fa-solid fa-up-right-from-square ml-1" style="font-size: 10px"></i>
</a>
</p>
</div>
<!--===/// IMAGE CREDITS end ///===-->
<!--===/// TAGGED CHARACTERS ///===-->
<div class="col-md-6 mt-3">
<p style="font-size: 20px; font-weight: bold">Characters</p>
<div class="row no-gutters mx-n1 mt-1" style="margin-top: -12px">
<!--===/// NAME ///===--><!-- Duplicate this entire "name" section to add a character/tab/gallery -->
<div class="col-auto mx-1">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="font-weight: bold; border-radius: 8px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="LINK_TO_TAB_CHARA_OR_GALLERY_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 8px; z-index: 5"></span>
<!--=== Name ===-->
Character/tab/gallery name
</a>
</div>
</div>
</div>
<!--===/// NAME end ///===-->
</div>
</div>
<!--===/// TAGGED CHARACTERS end ///===-->
</div>
</div>
</div>
</div>
<!--===/////// IMAGE METADATA end ///////===-->
</div>
</div>
</li>
<!--/// Image end ///-->
<!--===///////// IMAGE VIEWER MIMIC end /////////===-->
</ul>
</div>
<!--===/// FEATURED GALLERY end ///===-->
</div>
<!--===////// MAIN CODE end //////===-->
</div>
</div>
<!--===///////// FOOTER /////////===-->
<div class="mt-auto px-3 pb-3" style="width: 100%">
<div class="card justify-content-center align-items-center" style="height: 90px; color: rgba(255, 255, 239, 0.5); border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7); z-index: 50">
<p class="text-center" style="font-size: 12px; line-height: 25px">Code by FlowerlyRat layout ©
<a href="https://thatgamecompany.com/" style="color: #7efdfe">thatgamecompany</a><br>
<a href="https://toyhou.se/~about" class="mr-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">About</a>
<a href="https://toyhou.se/~faq/general" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">FAQ</a>
<a href="https://toyhou.se/~tickets" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">HelpDesk</a>
<a href="https://toyhou.se/~rules" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">Rules</a>
<a href="https://toyhou.se/~tos" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">ToS</a>
<a href="https://toyhou.se/~browse/search" class="ml-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">Search</a>
</p>
</div>
</div>
<!--===///////// FOOTER end /////////===-->
</div>
<!--====/////CREDITS WINDOW//////====-->
<div class="collapse fade" id="CREDIT" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; color: #ffffea; z-index: 1100">
<div id="ACC-CREDIT" class="card bg-faded border-0 rounded-0 p-3" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.7)">
<div class="mx-auto sticky-top" style="min-width: 55%">
<div class="card align-items-center" style="margin-top: 120px; border-radius: 25px 25px 0 0; border-width: 1px 1px 0 1px; border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.8); z-index: 5">
<!--Close button-->
<div style="position: absolute; top: 10px; right: 25px">
<a data-toggle="collapse" href="#CREDIT"><i class="fas fa-times" style="font-size: 25px; color: #ffffea"></i></a>
</div>
<!--Close button end-->
<div class="row no-gutters">
<!--Buttons-->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 40px; height: 40px; cursor: pointer">
<i class="far fa-code" style="font-size: 20px; color: #ffffea; opacity: 0.6; text-shadow: 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745"></i>
<div class="collapse fade show CODE" data-parent="#ACC-CREDIT" style="position:absolute; top:0; left:0; right:0; bottom:0;">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea;background: rgba(0, 0, 0, 0)">
<i class="far fa-code" style="margin-top: 2px; font-size: 20px; color: #ffffea; text-shadow: 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745"></i>
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none" data-toggle="collapse" data-target=".CODE"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 40px; height: 40px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96599998_5kOvqGuUpH9aIfH.png" width="25px" style="opacity: 0.6">
<div class="collapse fade IMAGE" data-parent="#ACC-CREDIT" style="position:absolute; top:0; left:0; right:0; bottom:0;">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea;background: rgba(0, 0, 0, 0)">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96599998_5kOvqGuUpH9aIfH.png" width="25px" style="margin-top: 2px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none" data-toggle="collapse" data-target=".IMAGE"></a>
</div>
</li>
</ul>
</div>
<!--Buttons end-->
</div>
</div>
<div class="card p-3 pb-4" style="height: 300px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.7)">
<!--///Code credits///-->
<div class="collapse fade show active CODE" data-parent="#ACC-CREDIT">
<div class="row no-gutters align-items-center mt-3">
<div class="col-auto"><p style="font-size: 15px; font-weight: bold">Code credits</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<!--Text-->
<p class="mt-4">
<b>Code:</b> <a style="font-weight: bold; color: #7efdfe" href="https://toyhou.se/FlowerlyRat"><i class="fi-torso user-name-icon"></i>FlowerlyRat</a><br>
<b>Layout:</b> Based on the game Sky: Children of the Light's UI<br>
<b>Other codes:</b> <a style="font-weight: bold; color: #ff7e01" href="https://toyhou.se/FlowerlyRat/characters/folder:4673560">Folder</a>
</p>
<!--Text end-->
</div>
<!--///Code credits///-->
<!--///Image credits///-->
<div class="collapse fade IMAGE" data-parent="#ACC-CREDIT">
<div class="row no-gutters align-items-center mt-3">
<div class="col-auto"><p style="font-size: 15px; font-weight: bold">Image credits</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<!--Text-->
<p class="mt-4">
<b>Background image:</b> Sky: Children of the Light © thatgamecompany<br>
<b>Icons:</b> <a href="https://fontawesome.com/v6/search" style="font-weight: bold; color: #ff7e01">FontAwesome</a>, Sky: Children of the Light<br>
<b>Flags/ribbons:</b> taken from CoraMagics' <a href="https://toyhou.se/20187371." style="font-weight: bold; color: #ff7e01">Ribbon Masterlist</a>
</p>
<!--Text end-->
</div>
<!--///Image credits///-->
<div class="row no-gutters" style="position: absolute; bottom: -3px; left: 27px; right: 27px; opacity: 0.3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
</div>
</div>
</div>
<!--====/////CREDITS WINDOW end//////====-->
</div>
</div>
<!-- Code container -->
</div>
</div>
</div>
</div>Copy
<!--
╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
△▽/╱╱╱╱╱╱╱╱╱╱╱╰━╯
Ultimate Sky: Children of the Light profile bundle [CSS emulator V2 - character profile: scrolling hell version]: code by FlowerlyRat || Inspired from TheFaerieMerchant's CSS emulators || Based on the game Sky: Children of the Light's UI by ThatGameCompany
> It is HIGHLY recommended to use circlejourney's ToyHouse live editor to see what you're doing!!!! -> https://th.circlejourney.net/
Any links added use the following formats [target="_blank" is optional]:
Blue variant [to link characters, groups, species, and entities]:
<a style="font-weight: bold; color: #7efdfe" href="LINK_HERE">text_here</a>
Orange variant [to link everything else]:
<a style="font-weight: bold; color: #ff7e01" href="LINK_HERE">text_here</a>
Any areas that need the character's ID have the "CHARA_ID_HERE" placeholder -> to replace everything at once, highlight "CHARA_ID_HERE", then do ctrl+F and replace it with your character's.
Pop-up for the credits collapsible is at the end of the code.
> I cannot guarantee compatibility with actual custom CSS codes.
Code is compatible with the "Sky: Children of the Light candle UI" add-on.
Instructions to add them is given in the profile itself -> https://toyhou.se/23648694.misc-sky-cotl-candle-ui/25906098.
Code is also compatible with the "Sky quests!" add-on.
To add it, please copy and paste the code between the "FUN LINKS" commentaries below, between the "MAIN CHARACTER CODE HERE" commentaries.
-> https://toyhou.se/32862504.snip-sky-quests/32862518.code
Multiple background images have been screenshoted from the game to give a wide variety of possibilities [ToyHouse gallery: https://toyhou.se/25042050./gallery || Google Drive: https://drive.google.com/drive/folders/12YBvvXe9MoIYj9oUo8MVpngCojj8vCv3?usp=sharing], however if none of them suit your taste or vision, please go on and take your own in-game.
!!! TO BE WARNED !!!
This code has a hidden section intended for mobile users, so be sure to also modify it with the sidebar!
-->
<div class="flex-row justify-content-end sp-top-inner" style="left: -40vw; z-index: 5">
<div style="width: 100vw">
<div class="ml-md-3">
<!--///BACKGROUND IMAGE///-->
<div class="card bg-dark rounded-0 border-0 col-lg-12" style="overflow: hidden; position: fixed; bottom: 0; top: 0; left: 0; background-image: url(
LINK_TO_BACKGROUND_IMAGE_HERE
); background-size: cover; background-position: center"></div>
<div class="row no-gutters">
<!-- Code container -->
<div class="col-12 ">
<div class="card bg-transparent border-0 rounded-0 mx-auto">
<div class="card bg-transparent rounded-0 border-0" style="min-height: 100vh">
<div class="container pl-md-0" style="max-width: 100%">
<div class="row no-gutters">
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
COMPUTER SIDEBAR
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-md-2 hidden-sm-down" style="color: #ffffea">
<div class="card rounded-0 p-2 h-100" style="margin-left: -1px; border-width: 0 1px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
AVATAR [computer]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-auto my-2" style="height: 150px; width: 150px">
<div class="card bg-dark border-0 p-0" style="position: absolute; height: 115px; width: 115px; border-radius: 50%; z-index: 1; background: url(
AVATAR_IMAGE_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"><!--PFP IMAGE LINK ABOVE--></div>
<!--///Outer frame///--><!--Check [https://toyhou.se/23579684.misc-sky-cotl-avatar-frame] for more borders and meaning explanation-->
<img class="d-block mx-auto my-auto" style="position: absolute; opacity: 1; z-index: 5" src=
"https://f2.toyhou.se/file/f2-toyhou-se/images/71211585_IQYjqdDDaiOOeid.png">
<!--///Inner spinning frame///--><!-- Feel free to delete -->
<div class="align-items-center justify-content-center" style="position: absolute; width: 123px; z-index: 5">
<i class="fa-spin" style="animation-duration: 26s; opacity: 1"><img class="d-block mx-auto my-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/images/71211558_s1BGtB1nlee2eVn.png"></i>
</div>
<!--///Inner spinning frame end///-->
</div>
<!--===////// AVATAR end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER NAME [computer]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE."
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-sparkles fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// CHARACTER NAME [computer] end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
FOLDER LINK
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/FlowerlyRat/characters/folder:FOLDER_ID"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Folder name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-folder fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// FOLDER LINK end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BLURB [computer]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card" style="padding: 15px; font-size: 0.8em; color: #cdcfc3; border-radius: 23px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<p>
This is a blurb, feel free to delete it tho
</p>
</div>
<!--===////// BLURB [computer] end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SOCIAL LINKS [computer] - duplicate the "SOCIAL LINK" section to add a platform - can be used to add links to an Art Fight profile, playlist, etc
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<ul class="nav nav-button nav-justified justify-content-around mt-2 flex-wrap">
<!--=== SOCIAL LINK ===-->
<li>
<div class="gallery-thumb">
<div class="thumb-image justify-content-center align-items-center" style="width: 35px; height: 35px; font-weight: bold; border-radius: 10px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="SOCIAL_LINK_HERE" title="SOCIAL_NAME_HERE"
class="th tooltipster" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 10px; box-shadow: 0 0 8px rgba(255, 255, 233, 0.5), inset 0 0 8px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!--=== BUTTON ICON ===-->
<i class="fas fa-link
" style="font-size: 13px"></i>
</a>
</div>
</div>
</li>
<!--=== SOCIAL LINK end===-->
</ul>
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BONUS LINKS [computer] - duplicate the "ADDITIONAL SIDE LINK" section to add a link
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--===////// ADDITIONAL SIDE LINK //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="LINK_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Link name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-link fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// ADDITIONAL SIDE LINK end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SIDEBAR BUTTONS - tabs require their own links with their own ID
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--===////// TAB 1 //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="LINK_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Tab 1
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-bookmark fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// TAB 1 end //////===-->
<div class="my-1 mb-2 mx-2" style="border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<!--===////// TAB 2 //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="LINK_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Tab 2
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="far fa-bookmark fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// TAB 2 end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--===////// GALLERY //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./gallery"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Gallery
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-image fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// GALLERY end //////===-->
<!--===////// LIBRARY //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./literatures"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Library
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-book fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// LIBRARY end //////===-->
<!--===////// WORLDS //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./worlds"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Worlds
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-globe fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// WORLDS end //////===-->
<!--===////// LINKS //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./links"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Links
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-link fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// LINKS end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--===////// COMMENTS //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./comments"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Comments
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-comment fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// COMMENTS end //////===-->
<!--===////// FAVORITE //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./comments"
class="th" data-toggle="th-favorite" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="favorite toggle-favorite" style="position: absolute; top: 8px; right: 12.5px; z-index: 5">
<span style="position: absolute; left: -189px">Favorite</span>
<i class="fal fa-sparkle"></i>
</span>
<span class="unfavorite toggle-favorite" style="position: absolute; top: 8px; right: 12.5px; z-index: 5">
<span style="position: absolute; left: -189px">Unfavorite</span>
<i class="fas fa-sparkle"></i>
</span>
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9"></div>
<div class="col justify-content-end align-items-center">
<div class="card border-0" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57"></div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// FAVORITE end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--===////// OWNERSHIP //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./ownership"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Ownership
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-check-square fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// OWNERSHIP end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--===////// REPORT //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/~tickets/create/character/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Report
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-warning fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// REPORT end //////===-->
<!--===////// BLOCK //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./block"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Block
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-cancel fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// BLOCK end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<div class="accordion container p-0" id="accordion">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="#MANAGE"
class="th" data-toggle="collapse" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Manage character
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-caret-right fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div id="MANAGE" class="collapse" data-parent="#accordion">
<!--===AVATAR===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/avatar/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Avatar
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-image fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===AVATAR end===-->
<!--===EDIT PROFILE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/edit/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Edit profile
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-pencil fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===EDIT PROFILE end===-->
<!--===TABS===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/tabs/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Tabs
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-bookmark fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===TABS end===-->
<!--===HISTORY===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/history/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
History
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-history fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===HISTORY end===-->
<div class="my-3 ml-3" style="border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<!--===WARNINGS===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/warnings/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Warnings
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-warning fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===WARNINGS end===-->
<!--===ACCESS KEYS===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/keys/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Access keys
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-key fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===ACCESS KEYS end===-->
<!--===TRADE LISTING===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/trade-listing/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Trade listing
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-handshake fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===TRADE LISTING end===-->
<div class="my-3 ml-3" style="border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<!--===DELETE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/delete/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Delete
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-trash fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===DELETE end===-->
</div>
<!--=== CHARACTER end ===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
IMAGES
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="#MANAGE-IMG"
class="th" data-toggle="collapse" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Manage images
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-caret-right fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div id="MANAGE-IMG" class="collapse" data-parent="#accordion">
<!--===UPLOAD IMAGE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~images/upload/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Upload image
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-plus fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===UPLOAD IMAGE end===-->
<!--===MANAGE IMAGES===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~images/manage-character/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Manage images
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-image fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===MANAGE IMAGES end===-->
<!--===SORT IMAGES===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~images/sort/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Sort images
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-random fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===SORT IMAGES end===-->
</div>
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
LITERATURES
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="#MANAGE-LIT"
class="th" data-toggle="collapse" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Manage literatures
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-caret-right fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div id="MANAGE-LIT" class="collapse" data-parent="#accordion">
<!--===ADD LITERATURE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~literatures/create/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Upload literature
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-plus fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===ADD LITERATURE end===-->
<!--===SORT LITERATURE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~literatures/sort/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Sort literatures
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-random fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===SORT LITERATURE end===-->
</div>
<!--=== LITERATURES end ===-->
</div>
</div>
</div>
<!--===/////////////////////////////////// COMPUTER SIDEBAR end ///////////////////////////////////===-->
<!--===////// MAIN CODE //////===-->
<div class="col-md-10 mx-auto pt-md-3 pl-md-3 h-100">
<!-- Utility buttons [computer] -->
<ul class="nav nav-button align-items-center justify-content-end mt-3 mr-2 hidden-sm-down" style="margin-bottom: 22px">
<!--///Creation information button///-->
<li class="mx-4">
<a data-toggle="collapse" href="#CREA" style="box-shadow: none; color: #ffffea">
<i class="fa fa-info-circle mt-1" style="font-size: 30px; color: #fdf8da; text-shadow: 0 0 2px #713745, 0 0 2px #713745"></i>
</a>
</li>
<!--Credits button-->
<li>
<a data-toggle="collapse" href="#CREDIT">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96600008_K9c0uSM4k7pfpXi.png" width="35">
</a>
</li>
</ul>
<!-- Utility buttons [computer] -->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
UPPER CARD ON PHONE
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card pt-3 p-2 hidden-sm-up mb-4 rounded-0" style="margin-left: -15px; margin-right: -15px; color: #ffffea; border-width: 0 0 1px 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<!-- Utility buttons [phone] -->
<ul class="nav nav-button align-items-center justify-content-end mr-2 hidden-sm-up" style="margin-bottom: 22px">
<!--///Creation information button///-->
<li class="mx-4">
<a data-toggle="collapse" href="#CREA" style="box-shadow: none; color: #ffffea">
<i class="fa fa-info-circle mt-1" style="font-size: 30px; color: #fdf8da; text-shadow: 0 0 2px #713745, 0 0 2px #713745"></i>
</a>
</li>
<!--Credits button-->
<li>
<a data-toggle="collapse" href="#CREDIT">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96600008_K9c0uSM4k7pfpXi.png" width="35">
</a>
</li>
</ul>
<!-- Utility buttons [phone] -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
AVATAR [phone]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-auto hidden-sm-up mt-n5 mb-2" style="height: 150px; width: 150px">
<div class="card bg-dark border-0 p-0" style="position: absolute; height: 115px; width: 115px; border-radius: 50%; z-index: 1; background: url(
AVATAR_IMAGE_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"><!--PFP IMAGE LINK ABOVE--></div>
<!--///Outer frame///--><!--Check [https://toyhou.se/23579684.misc-sky-cotl-avatar-frame] for more borders and meaning explanation-->
<img class="d-block mx-auto my-auto" style="position: absolute; opacity: 1; z-index: 5" src=
"https://f2.toyhou.se/file/f2-toyhou-se/images/71211585_IQYjqdDDaiOOeid.png">
<!--///Inner spinning frame///--><!-- Feel free to delete -->
<div class="align-items-center justify-content-center" style="position: absolute; width: 123px; z-index: 5">
<i class="fa-spin" style="animation-duration: 26s; opacity: 1"><img class="d-block mx-auto my-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/images/71211558_s1BGtB1nlee2eVn.png"></i>
</div>
<!--///Inner spinning frame end///-->
</div>
<!--===////// AVATAR end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER NAME [phone]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE."
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-sparkles fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// CHARACTER NAME [phone] end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BLURB [phone]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card" style="padding: 15px; font-size: 0.8em; color: #cdcfc3; border-radius: 23px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<p>
This is a blurb, feel free to delete it tho
</p>
</div>
<!--===////// BLURB [phone] end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SOCIAL LINKS [computer] - duplicate the "SOCIAL LINK" section to add a platform - can be used to add links to an Art Fight profile, playlist, etc
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<ul class="nav nav-button nav-justified justify-content-around mt-2 flex-wrap">
<!--=== SOCIAL LINK ===-->
<li>
<div class="gallery-thumb">
<div class="thumb-image justify-content-center align-items-center" style="width: 35px; height: 35px; font-weight: bold; border-radius: 10px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="SOCIAL_LINK_HERE" title="SOCIAL_NAME_HERE"
class="th tooltipster" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 10px; box-shadow: 0 0 8px rgba(255, 255, 233, 0.5), inset 0 0 8px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!--=== BUTTON ICON ===-->
<i class="fas fa-link
" style="font-size: 13px"></i>
</a>
</div>
</div>
</li>
<!--=== SOCIAL LINK end===-->
</ul>
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BONUS LINKS [phone] - duplicate the "ADDITIONAL SIDE LINK" section to add a link
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--===////// ADDITIONAL SIDE LINK //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="LINK_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Link name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-link fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// ADDITIONAL SIDE LINK end //////===-->
</div>
<!--===/// UPPER CARD PHONE end ///===-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER CREATION INFO
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="collapse fade mt-1 mb-3" id="CREA" style="color: #ffffea">
<div class="col row no-gutters hidden-sm-up mt-n2 mb-3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<div class="row no-gutters">
<div class="col-md-9 card order-md-2 px-3" style="border-radius: 8px; border-width: 1px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<!--Close button-->
<div class="justify-content-end mt-3">
<a data-toggle="collapse" href="#CREA"><i class="fas fa-times" style="font-size: 25px; color: #ffffea"></i></a>
</div>
<!--Close button end-->
<div class="row">
<!--===/// CREATION INFO ///===-->
<div class="col-md-5 pr-3 mr-n2" style="height: 155px; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<!--===CREATED===-->
<div class="row mb-2">
<div class="col-4" style="font-weight: bold">
<p>Created</p>
</div>
<div class="col">
<!--Date-->
<p>
1 Jan 2024, 1:20:30 am
</p>
</div>
</div>
<!--===CREATED end===-->
<!--===CREATOR===-->
<div class="row mb-2">
<div class="col-4" style="font-weight: bold">
<p>Creator</p>
</div>
<div class="col">
<!--Username-->
<a style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/Username">
<i class="fi-star user-name-icon"></i>Username
</a>
</div>
</div>
<!--===CREATOR end===-->
<!--===DESIGNERS===-->
<div class="row mb-2">
<div class="col-4" style="font-weight: bold">
<p>Designers</p>
</div>
<div class="col">
<!--Username-->
<!--Username [external link]-->
<a style="font-weight: bold; color: #7efdfe" href=
"EXTERNAL_LINK_HERE">
Username<i class="fa-solid fa-up-right-from-square ml-1" style="font-size: 10px"></i>
</a>
</div>
</div>
<!--===DESIGNERS end===-->
<!--===OWNER===-->
<div class="row mb-2">
<div class="col-4" style="font-weight: bold">
<p>Owner</p>
</div>
<div class="col">
<!--Username-->
<a style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/Username">
<i class="fi-torso user-name-icon"></i>Username
</a>
</div>
</div>
<!--===OWNER end===-->
</div>
<!--===/// CREATION INFO end ///===-->
<!--===/// Divider ///===-->
<div class="col row no-gutters hidden-sm-up my-2 mb-3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<div class="col-auto hidden-sm-down mr-n4">
<div style="height: 41%; border-width: 0 0 0 1px; border-style: solid"></div>
<div class="border-0 rounded-0 my-1">
<p style="margin-left: -3.4px; font-size: 10px">◆</p>
</div>
<div style="height: 41%; border-width: 0 0 0 1px; border-style: solid"></div>
</div>
<!--===/// Divider end ///===-->
<!--===/// TAGS ///===-->
<div class="col-md card bg-transparent border-0 rounded-0">
<div class="pr-3 mr-n3" style="height: 155px; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<!--Tag 1-->
<div class="card border-0 px-1 mb-1" style="border-radius: 5px; background: #ffffea; display: inline-block">
<a style="font-weight: bold; color: #000" href=
"TAG_LINK_HERE">
tag 1
</a>
</div>
<!--Tag 1 end-->
<!--Tag 2-->
<div class="card border-0 px-1 mb-1" style="border-radius: 5px; background: #ffffea; display: inline-block">
<a style="font-weight: bold; color: #000" href=
"TAG_LINK_HERE">
tag 2
</a>
</div>
<!--Tag 2 end-->
<!--Tag 3-->
<div class="card border-0 px-1 mb-1" style="border-radius: 5px; background: #ffffea; display: inline-block">
<a style="font-weight: bold; color: #000" href=
"TAG_LINK_HERE">
tag 3
</a>
</div>
<!--Tag 3 end-->
</div>
</div>
<!--===/// TAGS end ///===-->
</div>
</div>
<div class="col-md card mr-md-2 mt-md-0 mt-2 order-md-1" style="height: 200px; border-radius: 8px; border-width: 1px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<div class="card bg-transparent border-0 rounded-0 my-auto p-3" style="height: 200px; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="row no-gutters text-center">
<!--===/// Creator ribbons ///===-->
<!-- ||[ 1 ]|| -->
<div class="col-4 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description"><!-- Don't make the tooltips too long, otherwise they won't display! -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 1 ]|| -->
<!--===/// Creator ribbons end ///===-->
</div>
</div>
</div>
</div>
<div class="col row no-gutters hidden-sm-up mt-3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
<!--===/// CHARACTER CREATION INFO end ///===-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
PASTE YOUR CHARACTER CODE HERE
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!-- [REMINDER]
> I cannot guarantee compatibility with actual custom CSS codes.
-->
<div class="card bg-transparent border-0 rounded-0" style="color: #ffffea">
<!-- Change the image link for the main background right above this line -->
<div class="mt-4" style="margin-bottom: 20px">
<!--===/// WINGED LIGHT COUNT ///===-->
<img class="d-block mx-auto tooltipster" data-placement="bottom" title="
200
" src="https://f2.toyhou.se/file/f2-toyhou-se/images/72538958_Qzn1IfB8liC2Y5H.png" style="height: 50px">
<!--===/// WINGED LIGHT COUNT end ///===-->
</div>
<!--=======/////// FUN LINKS ///////========-->
<!--=======/////// FUN LINKS end ///////========-->
<div class="row my-4">
<!--/// Right column sticky ///-->
<div class="col-md mb-2 col-12" style="width: 0%">
<div class="sticky-top">
<div class="card bg-transparent rounded-0 border-0 mb-3">
<p class="text-center text-truncate" style="font-weight: bold; font-size: 30px; text-shadow: 0 0 5px #000, 0 0 3px #000">
Name
</p>
<!--===/// Quote ///===-->
<div class="card bg-transparent border-0 rounded-0 align-items-center">
<div class="card border-0 mt-2" style="padding: 10px; max-height: 75px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<p>"
This is a very cool and epic quote woa<br>
This box will scroll after a certain height!
"</p>
</div>
</div>
<!--===/// Quote end ///===-->
<!--===/// Basic ///===-->
<div class="card border-0 my-2" style="padding: 10px; max-height: 168px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<!-- Age -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Age</p></div>
<div class="col-auto ml-auto"><p>
##
</p></div>
</div>
<!-- Age end -->
<!-- Height -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Height</p></div>
<div class="col-auto ml-auto"><p><a style="font-weight: bold; color: #ff7e01" href="https://www.reddit.com/media?url=https%3A%2F%2Fi.redd.it%2Fyazzlze83qh41.jpg">
#
</a></p></div>
</div>
<!-- Height end -->
<!-- Gender -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Gender</p></div>
<div class="col-auto ml-auto"><p>
content
</p></div>
</div>
<!-- Gender end -->
<!-- Pronouns -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Pronouns</p></div>
<div class="col-auto ml-auto"><p>
pro/nouns
</p></div>
</div>
<!-- Pronouns end -->
<!-- Orientation -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Orientation</p></div>
<div class="col-auto ml-auto"><p>
<!--
Change the link and tooltip titles to the appropriate ones
Copy and paste the "<a>" tag to add another flag
-->
<a data-toggle="tooltip" title="LGBT+">
<img width="30px"
src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/0b1cb6ed-b614-4d6f-a792-6e2d2db50e49/df12p8i-5148214b-27e1-4cea-b418-420e2c629e25.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzBiMWNiNmVkLWI2MTQtNGQ2Zi1hNzkyLTZlMmQyZGI1MGU0OVwvZGYxMnA4aS01MTQ4MjE0Yi0yN2UxLTRjZWEtYjQxOC00MjBlMmM2MjllMjUucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.bfUU644_Y-XtP6mk5Iw-rkWSCGz48RVRya12UOkjtMA"></a>
<a data-toggle="tooltip" title="Queer">
<img width="30px"
src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/0b1cb6ed-b614-4d6f-a792-6e2d2db50e49/df12p7u-5aae0688-c8e6-408f-9360-bfe27b1b9397.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzBiMWNiNmVkLWI2MTQtNGQ2Zi1hNzkyLTZlMmQyZGI1MGU0OVwvZGYxMnA3dS01YWFlMDY4OC1jOGU2LTQwOGYtOTM2MC1iZmUyN2IxYjkzOTcucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.VfwaRcQsMLGFHptAVp77zWeA-p1LT_DE8YRuyXVWmuw"></a>
</p></div>
</div>
<!-- Orientation end -->
</div>
<!--===/// Basic end ///===-->
<!--===/// Voice claim ///===-->
<div class="card border-0 text-center" style="padding: 10px; border-radius: 6px; background: rgba(0, 0, 0, 0.5)">
<p>Voice claim</p>
<p class="mt-n3" style="font-size: 12px; opacity: 0.7">
Name of voice claim here
</p>
<p class="text-center"><i class="fas fa-play-circle" style="font-size: 20px"></i>
<iframe class="flex-fill" style="position: absolute; margin-top: -8px; margin-left: -39px; width: 60px; height: 35px; opacity: 0.001" frameborder="0"
src="https://www.youtube.com/embed/VIDEOID?ps=docs&controls=1">
<!-- ONLY CHANGE "VIDEOID" -->
</iframe>
</p>
</div>
<!--===/// Voice claim end ///===-->
<!--===/// Theme song ///===-->
<div class="card border-0 my-2 text-center" style="padding: 10px; border-radius: 6px; background: rgba(0, 0, 0, 0.5)">
<p>Theme</p>
<p class="mt-n3" style="font-size: 12px; opacity: 0.7">
Song title - artist
</p>
<p class="text-center"><i class="fas fa-play-circle" style="font-size: 20px"></i>
<iframe class="flex-fill" style="position: absolute; margin-top: -8px; margin-left: -39px; width: 60px; height: 35px; opacity: 0.001" frameborder="0"
src="https://www.youtube.com/embed/VIDEOID?ps=docs&controls=1">
<!-- ONLY CHANGE "VIDEOID" -->
</iframe>
</p>
</div>
<!--===/// Theme song end ///===-->
<!--===/// Playist ///===-->
<div class="card border-0 text-center" style="padding: 10px; border-radius: 6px; background: rgba(0, 0, 0, 0.5)">
<p>Playlist</p>
<p class="mt-n3" style="font-size: 12px; opacity: 0.7">
Spotify or YouTube
</p>
<p class="text-center">
<a href="
LINK_HERE
"><i class="fas fa-external-link-square-alt" style="font-size: 20px; color: #ffffea"></i></a>
</p>
</div>
<!--===/// Playist end ///===-->
<!--===/// Decorative controls ///===-->
<div class="row no-gutters mt-2">
<div class="col">
<div class="card" style="padding: 10px; border-radius: 30px 0 0 30px; border-width: 1px 0 1px 1px; border-color: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.5)">
<div class="row no-gutters">
<div class="col-4">
<p class="justify-content-between pl-2 pr-3">
<img class="fa-flip-horizontal" src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574399_ISOXkfgYQFhmHqy.png" width="25" style="opacity: 0.5">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574399_ISOXkfgYQFhmHqy.png" width="25" style="opacity: 0.5">
</p>
</div>
<div class="mx-md-2 my-n1" style="border-width: 0 1px 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<div class="col">
<p class="justify-content-between px-3" style="font-size: 25px">
<a class="mb-n2" style="margin-top: -10px" href="#" data-toggle="th-favorite">
<span class="favorite toggle-favorite">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574328_c1SwrAQE2AwiKXr.png" width="25">
</span>
<span class="unfavorite toggle-favorite">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574352_AVC7CTgM30PYCuZ.png" width="25">
</span>
</a>
<span style="font-size: 12px"><img class="mr-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574424_pTAU3yttAd8jqPl.png" width="25">0</span>
</p>
</div>
<div class="my-n1" style="border-width: 0 1px 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<div class="col-auto">
<p class="justify-content-between pl-4 pr-3" style="font-size: 25px">
<i class="fas fa-ellipsis" style="text-shadow: 0 0 3px #684647, 0 0 3px #684647"></i>
</p>
</div>
</div>
</div>
</div>
<div class="card rounded-0" style="padding: 0.5px; border-width: 1px 0; border-color: rgba(0, 0, 0, 0.8); background-color: rgba(255, 255, 239, 0.5)"></div>
<div class="col-auto mx-auto">
<div class="card h-100 justify-content-center" style="padding-left: 13px; padding-right: 13px; font-size: 15px; border-width: 1px 1px 1px 0; border-radius: 0 30px 30px 0; border-color: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.7)">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</div>
<!--===/// Decorative controls end ///===-->
</div>
</div>
</div>
<!--/// Right column sticky end ///-->
<!--/// Left column ///-->
<div class="col-md-7 mt-md-0 mt-n3 mb-md-0 mb-3">
<!--===/// Description ///===-->
<!-- Title -->
<div class="card py-3 px-4 mt-3" style="border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters align-items-center">
<div class="col-auto"><p style="font-weight: bold; font-size: 17px">Character description</p></div>
<div class="col justify-content-center mx-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.1"></div>
<!-- Title end -->
<!-- Content -->
<div class="card" style="height: 300px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 300px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-4 pb-4">
<!-- Text -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Subheader
</span><br><!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
This is where you write the very juicy juicy juicy information about your silly little character! Whether it be describing their personality or just talk about their life, and what they do, honestly you can just go wild with this!!! Maybe you want to talk about how people perceive them? Perhaps even how their thought process functions? You can write as much [or as little] as you want!!! This box scrolls anyway so you'll never run out of space!!!
</p>
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Subheader
</span><br><!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
This is another subheader, in case you want to split the description into multiple, defined, parts. Like maybe have a description for the character through time? Starting from when they were little to now! Or even in the <em>~future~</em>,,,
</p>
<!-- Text end -->
</div>
</div>
</div>
<!-- Content end -->
<!--===/// Description end ///===-->
<!--===/// Interests ///===-->
<!-- Title -->
<div class="card py-3 px-4 mt-3" style="border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters align-items-center">
<div class="col-auto"><p style="font-weight: bold; font-size: 17px">Interests</p></div>
<div class="col justify-content-center mx-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.1"></div>
<!-- Title end -->
<!-- Content -->
<div class="card" style="height: 300px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 300px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-4 pb-4">
<!-- Text -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Subheader
</span><br><!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Write about your character's silly ineterest, whether it's the usual ones like having fun dodging krills, or the bat shxt insane stuff like having an unhealthy obsession with gold, write at your heart's content! Let's here about this silly guy's hobbies, what do they like doing on a daily basis? Are they good at it? Are they ashamed of others learning about it? Or maybe it is such a defining trait of their personality that they would literally shut down if they ever stopped practicing it? Go wild man!!!! Infodump!!!
</p>
<!-- Text end -->
</div>
</div>
</div>
<!-- Content end -->
<!--===/// Interests end ///===-->
<!--===/// Backstory ///===-->
<!-- Title -->
<div class="card py-3 px-4 mt-3" style="border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters align-items-center">
<div class="col-auto"><p style="font-weight: bold; font-size: 17px">Backstory</p></div>
<div class="col justify-content-center mx-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.1"></div>
<!-- Title end -->
<!-- Content -->
<div class="card" style="height: 300px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 210px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-4 pb-4">
<!-- Text -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Subheader
</span><br><!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Write the backstory of your silly critter!!! I do recommend keeping it rather short as to not overwhelm others with text! If there is a need to have a longer backstory, I recommend using the button at the very end of this scrollbox to link a litterature or separate tab with it, so people get to choose whether or not they want to read the rest!
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>
<!-- Text end -->
</div>
</div>
<!-- Read more button -->
<div class="mx-4">
<div class="mb-3" style="border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<div class="justify-content-center">
<div class="gallery-thumb">
<div class="thumb-image justify-content-center tooltipster" title="Read more" style="width: 57px; height: 57px; border-radius: 16px; background: rgba(0, 0, 0, 0.5)">
<!--
To "disable" the button, delete the "href" below and add "cursor: not-allowed; opacity: 0.5" in the "style"
Don't forget to add back the "href" and delete the "cursor: not-allowed; opacity: 0.5" once you want to link something to this button!
-->
<!--== Link ==-->
<a href="READ_MORE_LINK_HERE"
style="color: #ffffea; box-shadow: none; text-decoration: none" class="th m-auto">
<span class="card bg-transparent thumb-sensitive" style="position: absolute; top: 2.5px; left: 2.4px; height: 52px; width: 52px; border: 2px solid #ffffe9; border-radius: 14px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent m-auto" style="width: 52px; height: 52px; border-width: 2px; border-radius: 14px; border-color: rgba(91, 92, 87, 0.7)">
<!--=== BUTTON ICON ===-->
<i class="fas fa-book m-auto" style="font-size: 35px; color: #ffffe9"></i>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- Read more button end -->
</div>
<!-- Content end -->
<!--===/// Backstory end ///===-->
<!--===/// Trivia ///===-->
<!-- Title -->
<div class="card py-3 px-4 mt-3" style="border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters align-items-center">
<div class="col-auto"><p style="font-weight: bold; font-size: 17px">Trivia</p></div>
<div class="col justify-content-center mx-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.1"></div>
<!-- Title end -->
<!-- Content -->
<div class="card" style="height: 300px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 300px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-4 pb-4">
<!-- List -->
<ul class="list-unstyled mt-3">
<li><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>content</li>
<li><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>content</li>
<li><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>content</li>
<li><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>content</li>
<li><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>content</li>
</ul>
<!-- List end -->
</div>
</div>
</div>
<!-- Content end -->
<!--===/// Trivia end ///===-->
<!--===/// Ribbons ///===-->
<!-- Title -->
<div class="card py-3 px-4 mt-3" style="border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters align-items-center">
<div class="col-auto"><p style="font-weight: bold; font-size: 17px">Ribbon collection</p></div>
<div class="col justify-content-center mx-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.1"></div>
<!-- Title end -->
<!-- Content -->
<div class="card" style="height: 300px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 300px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-4 pb-4">
<!-- SECTION 1 -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Name of ribbon collection
</span></p>
<div class="row no-gutters text-center mb-2">
<!-- ||[ 0 ]|| = 1 ribbon -->
<!-- ||[ 1 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 1 ]|| -->
<!-- ||[ 2 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 2 ]|| -->
<!-- ||[ 3 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 3 ]|| -->
<!-- ||[ 4 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 4 ]|| -->
<!-- ||[ 5 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 5 ]|| -->
<!-- ||[ 6 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 6 ]|| -->
</div>
<!--SECTION 1-->
<!--SECTION 2-->
<!--Subheader-->
<p><span class="justify-content-start mt-3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Name of ribbon collection
</span></p>
<div class="row no-gutters text-center mb-2">
<!-- ||[ 0 ]|| = 1 ribbon -->
<!-- ||[ 1 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 1 ]|| -->
<!-- ||[ 2 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 2 ]|| -->
<!-- ||[ 3 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 3 ]|| -->
<!-- ||[ 4 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 4 ]|| -->
<!-- ||[ 5 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 5 ]|| -->
<!-- ||[ 6 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 6 ]|| -->
</div>
<!-- SECTION 2 -->
<!--
Dont mind this random p tag,,, its the only solution I found for the different ribbon sections to have the same margin between the title and the ribbons smh
If you delete it, you'll notice the very last section doesn't have the same margin, and I do not know why
-->
<p></p>
<!-- Text end -->
</div>
</div>
</div>
<!-- Content end -->
<!--===/// Ribbons end ///===-->
</div>
<!--/// Left column end ///-->
</div>
<!--=======/////// CLOSET DIVIDER ///////========-->
<div class="row no-gutters my-3">
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, rgba(0, 0, 0, 0), #ffffea, #ffffea)"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="margin-top: -23px; font-size: 30px">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!--=======/////// CLOSET DIVIDER end ///////========-->
<!--=======/////// SECTION TITLE ///////========-->
<div class="card p-3 mb-md-4 text-center" style="border-radius: 10px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<h1 class="mt-1">Outfit shrine</h1>
<p style="font-size: 15px; color: #cdcfc3">Design notes</p>
</div>
<!--=======/////// SECTION TITLE end ///////========-->
<div class="row no-gutters mb-3">
<!--/// Full body image ///--><!-- You may play with the max and min height if your image doesn't look correctly proportionned -->
<div class="col-lg-5">
<div class="sticky-top">
<div class="card bg-transparent border-0 rounded-0 pt-md-5">
<img class="d-block my-3 mx-auto" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/69495205_Ir72I07ys8SlDvP.png
" style="max-height: 470px; min-height: 350px; object-fit: cover; object-position: center; "><!--
If the full body gets muddied with the background, add the following snippet to the style to add a white border around it:
filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-0.5px 0px 0 #fff) drop-shadow(-0px -0px 0 #fff) drop-shadow(-0px -0.5px 0 #fff)
-->
</div>
</div>
</div>
<!--/// Full body image end ///-->
<!--/// CLOSET ///-->
<div class="col" style="margin-right: -15px">
<!--===/// OUTFITS PAGE ///===-->
<div id="ACC-OUTFIT" class="mt-3">
<div id="ACC-OUTFIT-2" class="card border-0 rounded-0 align-items-center" style="background: rgba(0, 0, 0, 0.7)">
<div class="row no-gutters">
<!-- Buttons -->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603077_thtEYQo0GPQ2R1Y.png" style="height: 40px;opacity: 0.6">
<div class="collapse fade show OUTFIT" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-OUTFIT-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603077_thtEYQo0GPQ2R1Y.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".OUTFIT"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358456_6g3cv2EpYvBIwJj.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade SHOES" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-OUTFIT-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358456_6g3cv2EpYvBIwJj.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".SHOES"></a>
</div>
</li>
</ul>
</div>
<!-- Buttons end -->
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.2"></div>
</div>
<div class="card border-0 rounded-0 pl-3" style="height: 450px; background: rgba(0, 0, 0, 0.6); overflow: hidden">
<!--/// PANTS TAB ///-->
<div class="collapse fade show active OUTFIT" data-parent="#ACC-OUTFIT">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Top -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Top
</span><br>
<!--Image-->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Write a small description about the outfit your character wears! Notably the top portion! Maybe they have addtional details that don't exist in-game, or maybe you just want to describe it to be visible by screen readers or help people better understand what it looks like! You can also add an image to it if you have drawn it, or taken a screenshott of it!
</p>
<!-- Top end -->
<!-- Bottom -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Bottom
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
This part is for the bottom of the outfit, such as pants, skirt, shorts, etc! You can also add a picture to the side of the text! The text warps around it anyways.<br>
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>
<!-- Bottom end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
If the outfit has additional details that are easily forgotten by others or aren't part of the in-game model, write them here! You can basically put an image next to anything on this entire outfit shrine if you copy paste the line of code related to it lol. You can also add the body type here!<br>
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>
<!-- Details end -->
</div>
</div>
</div>
<!--/// PANTS TAB ///-->
<!--/// SHOES TABS ///-->
<div class="collapse fade SHOES" data-parent="#ACC-OUTFIT">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Shoes -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Shoes
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Pretty self explanatory, it's for the shoes!<br>
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>
<!-- Shoes end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Just in case you need to add details here!<br>
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>
<!-- Details end -->
</div>
</div>
</div>
<!--/// SHOES TAB ///-->
</div>
</div>
<!--===/// OUTFITS PAGE end ///===-->
<!--===/// FACE PAGE ///===-->
<div id="ACC-FACE" class="mt-3">
<div id="ACC-FACE-2" class="card border-0 rounded-0 align-items-center" style="background: rgba(0, 0, 0, 0.7)">
<div class="row no-gutters">
<!-- Buttons -->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358447_AvXVBRPZEBqf2TC.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade show MASK" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-FACE-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358447_AvXVBRPZEBqf2TC.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".MASK"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72359091_6loKsROxA4qtouq.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade ACCS-FACE" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-FACE-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72359091_6loKsROxA4qtouq.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".ACCS-FACE"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603441_NoEUznqETpxByiG.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade NECK" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-FACE-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603441_NoEUznqETpxByiG.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".NECK"></a>
</div>
</li>
</ul>
</div>
<!-- Buttons end -->
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.2"></div>
</div>
<div class="card border-0 rounded-0 pl-3" style="height: 450px; background: rgba(0, 0, 0, 0.6)">
<!--/// MASK AND FACE TAB ///-->
<div class="collapse fade show active MASK" data-parent="#ACC-FACE">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Structure -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Face structure
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line-->
Text area to write what facial feature and structure your character has!! Such as face, eye, and nose shape.<br>
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>
<!-- Structure end -->
<!-- Mask -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Mask
</span><br>
<!-- Image -->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Also a self explanatory section, just write anything about the mask they wear, or the lack thereof! Face paint also fits this category.<br>
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>
<!-- Mask end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
If your character has some specific features, such as tattoos, moles, crooked teeth, etc etc!<br>
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>
<!-- Details end -->
</div>
</div>
</div>
<!--/// MASK AND FACE TAB ///-->
<!--/// FACE ACCESSORIES TAB ///-->
<div class="collapse fade ACCS-FACE" data-parent="#ACC-FACE">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Accessories -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Accessories
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Face accessories, such as sunglasses, or any of the cosmetics in this tab in-game, fit here!<br>
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>
<!-- Accessories end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
More details!!!<br>
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>
<!-- Details end -->
</div>
</div>
</div>
<!--/// FACE ACCESSORIES TAB ///-->
<!--/// NECK ACCESSORIES TAB ///-->
<div class="collapse fade NECK" data-parent="#ACC-FACE">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Accessories neck -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Accessories
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Neck accessories!!!! For when they have something around their neck.<br>
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>
<!-- Accessories neck end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Oh yeah here's the details section!!!<br>
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>
<!-- Details end -->
</div>
</div>
</div>
<!--/// Neck accessories tab end ///-->
</div>
</div>
<!--===/// FACE PAGE end///===-->
<!--===/// HEAD PAGE ///===-->
<div id="ACC-HEAD" class="mt-3">
<div id="ACC-HEAD-2" class="card border-0 rounded-0 align-items-center" style="background: rgba(0, 0, 0, 0.7)">
<div class="row no-gutters">
<!-- Buttons -->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358424_KTeHcdt16OquTVN.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade show HAIR" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-HEAD-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358424_KTeHcdt16OquTVN.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".HAIR"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603451_tXV4olsXIf3MP1A.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade ACCS-HEAD" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-HEAD-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603451_tXV4olsXIf3MP1A.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".ACCS-HEAD"></a>
</div>
</li>
</ul>
</div>
<!-- Buttons end -->
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.2"></div>
</div>
<div class="card border-0 rounded-0 pl-3" style="height: 450px; background: rgba(0, 0, 0, 0.6)">
<!--/// HAIR TAB ///-->
<div class="collapse fade show HAIR" data-parent="#ACC-HEAD">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Hairstyle -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Hairstyle
</span><br>
<!-- Image -->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Ok at this point you must have understood how these tab work!<br>
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>
<!-- Hairstyle end -->
<!-- Texture + details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Texture and details
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!--Image end-->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
This is for the hair texture and other details!!!<br>
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>
<!-- Texture + details end -->
</div>
</div>
</div>
<!--/// HAIR TAB ///-->
<!--/// HEAD ACCESSORIES TAB ///-->
<div class="collapse fade ACCS-HEAD" data-parent="#ACC-HEAD">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Hat -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Hat
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Hat end -->
<!-- Accessories hair -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Accessories
</span><br>
<!-- Image -->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Accessories hair end -->
</div>
</div>
</div>
<!--/// HEAD ACCESSORIES TAB end///-->
</div>
</div>
<!--===///HEAD PAGE end///===-->
<!--===/// CAPE PAGE ///===-->
<div class="card border-0 rounded-0 align-items-center mt-3" style="height: 57px; background: rgba(0, 0, 0, 0.7)"></div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.2"></div>
<div class="card border-0 rounded-0" style="height: 450px; color: #cdcfc3; background: rgba(0, 0, 0, 0.6); scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-4 pb-4">
<!-- Cape -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Cape
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Cape end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Details end -->
</div>
</div>
<!--/// Details tab ///-->
<!--===/// CAPE PAGE end///===-->
<!--===/// PROPS PAGE ///===-->
<div id="ACC-PROP" class="mt-3">
<div id="ACC-PROP-2" class="card border-0 rounded-0 align-items-center" style="background: rgba(0, 0, 0, 0.7)">
<div class="row no-gutters">
<!-- Buttons -->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358385_8caxhrNR0gkFChw.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade show INSTRU" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-PROP-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358385_8caxhrNR0gkFChw.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".INSTRU"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603460_F1W5Ymc1aOvESjr.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade PROP" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-PROP-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603460_F1W5Ymc1aOvESjr.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".PROP"></a>
</div>
</li>
</ul>
</div>
<!-- Buttons end -->
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.2"></div>
</div>
<div class="card border-0 rounded-0 pl-3" style="height: 450px; background: rgba(0, 0, 0, 0.6)">
<!--/// INSTRUMENT TAB ///-->
<div class="collapse fade show INSTRU" data-parent="#ACC-PROP">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Main -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Main instrument
</span><br>
<!-- Image -->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Main end -->
<!-- Secondary -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Secondary instrument/prop
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Secondary end -->
</div>
</div>
</div>
<!--/// INSTRUMENT TAB ///-->
<!--/// PROP TAB ///-->
<div class="collapse fade PROP" data-parent="#ACC-PROP">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Main -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Main prop
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Main end -->
<!-- Secondary -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffea; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Secondary prop
</span><br>
<!-- Image -->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Secondary end -->
</div>
</div>
</div>
<!--/// PROP TAB end///-->
</div>
</div>
<!--===/// PROPS PAGE end ///===-->
</div>
<!--/// CLOSET end ///-->
</div>
<!--=======/////// RELATIONSHIP DIVIDER ///////========-->
<div class="row no-gutters my-3">
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, rgba(0, 0, 0, 0), #ffffea, #ffffea)"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="margin-top: -23px; font-size: 30px">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!--=======/////// RELATIONSHIP DIVIDER end ///////========-->
<!--=======/////// SECTION TITLE ///////========-->
<div class="card p-3 mb-4 text-center" style="border-radius: 10px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<h1 class="mt-1">Friendship constellation</h1>
<p style="font-size: 15px; color: #cdcfc3">Relationships</p>
</div>
<!--=======/////// SECTION TITLE end ///////========-->
<!--=======/////// RELATIONSHIP DESCRIPTIONS ///////========-->
<!--===/// CHARA [1] ///===--><!-- Copy the entire "CHARA [0]" section to add a new link -->
<div class="row mt-3">
<!--===/// Right picture ///===-->
<div class="col-md-auto mb-3 order-md-2 my-auto">
<!--/// Picture ///-->
<div class="card mx-auto bg-transparent border-0 rounded-0 p-0 align-items-center justify-content-center" style="height: 196px; width: 196px;">
<!--/// Avatar ///-->
<div class="card border-0 p-0" style="height: 150px; width: 150px; border-radius: 50%; z-index: 5; background: url(
AVATAR_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"></div>
<!--/// Outer frame [LVL 4, SPINS] ///-->
<img class="d-block mx-auto my-auto" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/75393819_T9bW5LwCHDfGkvO.png
" style="position: absolute; opacity: 1; z-index: 5">
<!--/// Inner spinning frame ///-->
<div class="align-items-center justify-content-center" style="position: absolute; width: 156px; z-index: 5">
<i class="fa-spin" style="animation-duration: 26s"><img class="d-block mx-auto my-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75393824_cNfM0cZkOOKtPRh.png"></i>
</div>
<!--/// Inner spinning frame end ///-->
</div>
<!--/// Picture end ///-->
</div>
<!--===/// Right picture end ///===-->
<!--===/// Left description ///===-->
<div class="col-md order-md-1">
<!-- Title + Link -->
<div class="card p-3" style="font-weight: bold; font-size: 17px; border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters align-items-center">
<div class="col-auto"><p><a style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/CHARAID.">
Name
</a></p></div>
<div class="col justify-content-center mx-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto ml-auto"><p>
Relationship status
</p></div>
</div>
</div>
<!-- Title + Link end -->
<!-- Content -->
<div class="card" style="height: 150px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 150px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-3 pt-3 pb-4">
<!-- Text -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p>
This is a box to further develop the relationship between the 2 characters! This box scrolls so you can write as much as you'd like! Tho I do recommend to not write <em>too</em> much to avoid overwhelming others with the amount of text. But do whatever you want, I'm not your legal guardien :p
</p>
<!-- Text end -->
</div>
</div>
</div>
<!-- Content end -->
</div>
<!--===/// Left description end ///===-->
</div>
<!--===/// CHARA [1] end ///===-->
<!--===/// CHARA [2] ///===-->
<div class="row mt-3">
<!--===/// Right picture ///===-->
<div class="col-md-auto mb-3 order-md-2 my-auto">
<!--/// Picture ///-->
<div class="card mx-auto bg-transparent border-0 rounded-0 p-0 align-items-center justify-content-center" style="height: 196px; width: 196px;">
<!--/// Avatar ///-->
<div class="card border-0 p-0" style="height: 150px; width: 150px; border-radius: 50%; z-index: 5; background: url(
AVATAR_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"></div>
<!--/// Outer frame [LVL 3] ///-->
<img class="d-block mx-auto my-auto" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/75393819_T9bW5LwCHDfGkvO.png
" style="position: absolute; opacity: 1; z-index: 5">
</div>
<!--/// Picture end ///-->
</div>
<!--===/// Right picture end ///===-->
<!--===/// Left description ///===-->
<div class="col-md order-md-1">
<!-- Title + Link -->
<div class="card p-3" style="font-weight: bold; font-size: 17px; border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters align-items-center">
<div class="col-auto"><p><a style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/CHARAID.">
Name
</a></p></div>
<div class="col justify-content-center mx-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto ml-auto"><p>
Relationship status
</p></div>
</div>
</div>
<!-- Title + Link end -->
<!-- Content -->
<div class="card" style="height: 150px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 150px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-3 pt-3 pb-4">
<!-- Text -->
<!-- Subheader -->
<p>
Silly fun fact! The frames around the pictures are used to showcase how strong a relationship is! The more your character loves the other, the more detailed the frame is! This empty template has all 5 possible levels, going from strongest to weakest, so don't hesistate to copy paste, and move those frames around if need be!
</p>
<!-- Text end -->
</div>
</div>
</div>
<!-- Content end -->
</div>
<!--===/// Left description end ///===-->
</div>
<!--===/// CHARA [2] end ///===-->
<!--===/// CHARA [3] ///===-->
<div class="row mt-3">
<!--===/// Right picture ///===-->
<div class="col-md-auto mb-3 order-md-2 my-auto">
<!--/// Picture ///-->
<div class="card mx-auto bg-transparent border-0 rounded-0 p-0 align-items-center justify-content-center" style="height: 196px; width: 196px;">
<!--/// Avatar ///-->
<div class="card border-0 p-0" style="height: 150px; width: 150px; border-radius: 50%; z-index: 5; background: url(
AVATAR_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"></div>
<!--/// Outer frame [LVL 2] ///-->
<img class="d-block mx-auto my-auto" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/75393822_s395YZlvX9nJ2IL.png
" style="position: absolute; opacity: 1; z-index: 5">
</div>
<!--/// Picture end ///-->
</div>
<!--===/// Right picture end ///===-->
<!--===/// Left description ///===-->
<div class="col-md order-md-1">
<!-- Title + Link -->
<div class="card p-3" style="font-weight: bold; font-size: 17px; border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters align-items-center">
<div class="col-auto"><p><a style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/CHARAID.">
Name
</a></p></div>
<div class="col justify-content-center mx-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto ml-auto"><p>
Relationship status
</p></div>
</div>
</div>
<!-- Title + Link end -->
<!-- Content -->
<div class="card" style="height: 150px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 150px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-3 pt-3 pb-4">
<!-- Text -->
<!-- Subheader -->
<p>
Oh also the character profile link is in the name in the card above. I wanted to put it on the image at first, but ehhhh, too much of a hassle! So I opted for the easy way out lololol
</p>
<!-- Text end -->
</div>
</div>
</div>
<!-- Content end -->
</div>
<!--===/// Left description end ///===-->
</div>
<!--===/// CHARA [3] end ///===-->
<!--===/// CHARA [4] ///===-->
<div class="row mt-3">
<!--===/// Right picture ///===-->
<div class="col-md-auto mb-3 order-md-2 my-auto">
<!--/// Picture ///-->
<div class="card mx-auto bg-transparent border-0 rounded-0 p-0 align-items-center justify-content-center" style="height: 196px; width: 196px;">
<!--/// Avatar ///-->
<div class="card border-0 p-0" style="height: 150px; width: 150px; border-radius: 50%; z-index: 5; background: url(
AVATAR_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"></div>
<!--/// Outer frame [LVL 1] ///-->
<img class="d-block mx-auto my-auto" src="
https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/75393824_cNf.png
" style="position: absolute; opacity: 1; z-index: 5">
</div>
<!--/// Picture end ///-->
</div>
<!--===/// Right picture end ///===-->
<!--===/// Left description ///===-->
<div class="col-md order-md-1">
<!-- Title + Link -->
<div class="card p-3" style="font-weight: bold; font-size: 17px; border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters align-items-center">
<div class="col-auto"><p><a style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/CHARAID.">
Name
</a></p></div>
<div class="col justify-content-center mx-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto ml-auto"><p>
Relationship status
</p></div>
</div>
</div>
<!-- Title + Link end -->
<!-- Content -->
<div class="card" style="height: 150px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 150px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-3 pt-3 pb-4">
<!-- Text -->
<!-- Subheader -->
<p>
Ok I don't have anything else to add here, have filler text!<br>
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>
<!-- Text end -->
</div>
</div>
</div>
<!-- Content end -->
</div>
<!--===/// Left description end ///===-->
</div>
<!--===/// CHARA [4] end ///===-->
<!--===/// CHARA [5] ///===-->
<div class="row mt-3">
<!--===/// Right picture ///===-->
<div class="col-md-auto mb-3 order-md-2 my-auto">
<!--/// Picture ///-->
<div class="card mx-auto bg-transparent border-0 rounded-0 p-0 align-items-center justify-content-center" style="height: 196px; width: 196px;">
<!--/// Avatar ///-->
<div class="card border-0 p-0" style="height: 150px; width: 150px; border-radius: 50%; z-index: 5; background: url(
AVATAR_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"></div>
<!--/// Outer frame [LVL 0, NO FRAME] ///-->
</div>
<!--/// Picture end ///-->
</div>
<!--===/// Right picture end ///===-->
<!--===/// Left description ///===-->
<div class="col-md order-md-1">
<!-- Title + Link -->
<div class="card p-3" style="font-weight: bold; font-size: 17px; border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters align-items-center">
<div class="col-auto"><p><a style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/CHARAID.">
Name
</a></p></div>
<div class="col justify-content-center mx-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto ml-auto"><p>
Relationship status
</p></div>
</div>
</div>
<!-- Title + Link end -->
<!-- Content -->
<div class="card" style="height: 150px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 150px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-3 pt-3 pb-4">
<!-- Text -->
<!-- Subheader -->
<p>
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.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>
<!-- Text end -->
</div>
</div>
</div>
<!-- Content end -->
</div>
<!--===/// Left description end ///===-->
</div>
<!--===/// CHARA [5] end ///===-->
<!--=======/////// RELATIONSHIP DESCRIPTIONS end ///////========-->
</div>
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
PASTE YOUR CHARACTER CODE HERE end
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!-- Divider -->
<div class="row no-gutters mt-5 mb-4">
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, rgba(0, 0, 0, 0), #ffffea, #ffffea)"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="margin-top: -23px; font-size: 30px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
FEATURED GALLERY
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card p-3 mb-3" style="border-radius: 25px; border-width: 1px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<div class="row no-gutters align-items-center mb-2">
<div class="col-auto">
<a href="https://toyhou.se/CHARA_ID_HERE./gallery" style="font-size: 20px; font-weight: bold; color: #ffffea">
Featured images
</a>
</div>
<div class="col justify-content-center ml-2" style="color: #ffffea; border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<ul class="magnific-gallery image-gallery auto-clear gallery-row large-block-grid-6 justify-content-around">
<!--
THERE ARE 2 DIFFERENT VERSIONS OF THE FEATURED IMAGE GALLERY
The first is very basic, it simply shows the image, and when clicked on, redirects you to the gallery with its full size version, it's the simpler variant of the 2.
Can be found between the commentary "SIMPLE IMAGE SHOWCASE".
The second is way more complex, and requires being able to navigate the code and pay CLOSE ATTENTION to the commentaries left inside it. It mimicks the image viewer and is very tedious to put in place. I would not recommend this version if you do not know what you are doing or do not want to bother with this level of customisation!
Can be found between the commentary "IMAGE VIEWER MIMIC".
I HIGHLY recommend completely removing the version you will not be using so that every image has the same functionality, as well as to avoid getting lost in it, as it's VERY easy to be so. Each version has been put between commentaries as you can see below.
Side note: due to how the interactive element has been implemented, the images are slightly desaturated [by 40% more precisely]. So if you see your images being less vibrant than they actually are, it's perfectly normal!
-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SIMPLE IMAGE SHOWCASE - Delete this entire section if going unsused
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--/// Image ///--><!-- Duplicate this entire "image" section to add an image - maximum of 6 recommended -->
<li class="gallery-item">
<div class="gallery-thumb text-center">
<div class="card border-0 thumb-image" style="border-radius: 10px; background: rgba(0, 0, 0, 0.8)">
<!-- Full image link [aka paste the link from the URL found in the SEARCH BAR when you open the image viewer inside the gallery] -->
<a href="FULL_SIZE_IMAGE_LINK_FROM_GALLERY_HERE"
class="th" style="padding: 6.5px; box-shadow: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 10px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!-- Thumbnail image link from gallery [aka paste the link of the THUMBNAIL - not the full size image itself - by "click right + copy image address" on the THUMBNAIL] -->
<img src="THUMBNAIL_LINK_FROM_IMAGE_HERE"
style="max-height: 200px; border-radius: 5px; object-fit: contain; object-position: center">
</a>
</div>
</div>
</li>
<!--/// Image end ///-->
<!--===///////// SIMPLE IMAGE SHOWCASE end /////////===-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
IMAGE VIEWER MIMIC - Delete this entire section if going unsused
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--/// Image ///--><!-- Duplicate this entire "image" section to add an image - maximum of 6 recommended -->
<li class="gallery-item">
<div class="gallery-thumb text-center">
<div class="card border-0 thumb-image" style="border-radius: 10px; background: rgba(0, 0, 0, 0.8)">
<!-- Full image link [aka paste the link of the FULL SIZE image from the gallery - "click right + copy image address"] -->
<a href="FULL_SIZE_IMAGE_LINK_HERE"
class="th magnific-item" style="padding: 6.5px; box-shadow: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 10px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!-- Thumbnail image link from gallery [aka paste the link of the THUMBNAIL - not the full size image itself - by "click right + copy image address" on the THUMBNAIL] -->
<img src="THUMBNAIL_LINK_FROM_IMAGE_HERE"
style="max-height: 200px; border-radius: 5px; object-fit: contain; object-position: center">
</a>
<!--===/////// IMAGE METADATA ///////===--><!-- Feel free to remove this entire section if you don't need it -->
<div class="magnific-caption hide">
<div class="card rounded-0 border-0 mt-n1" style="color: #ffffea; background-image: url(
LINK_TO_BACKGROUND_IMAGE_HERE
); background-size: cover; background-position: center"><!-- Background link right above -->
<div class="card rounded-0 p-3" style="border-width: 2px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<!--===/// BUTTONS ///===-->
<div class="row no-gutters align-items-center mt-n2 mb-2">
<div class="col-auto"><p class="mt-3" style="font-size: 20px; font-weight: bold">Details</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto">
<ul class="nav nav-button nav-justified justify-content-left mt-1 flex-wrap">
<!--=== FULL SIZE IMAGE BUTTON ===-->
<li class="mx-1 card border-0 align-items-center" style="padding: 2px; width: 50px; height: 50px; border-radius: 11px; background: rgba(0, 0, 0, 0.8)">
<div class="gallery-item">
<div class="gallery-thumb">
<div class="card border-0 thumb-image bg-transparent" style="position: absolute; left: 2px; width: 46px; height: 46px">
<!-- Full size image link [aka copy the image ID - it's the numbers found at the end of the URL after the '#'] -->
<a href="https://toyhou.se/~images/IMAGE_ID_HERE"
class="th m-auto justify-content-center" style="padding: 6px; color: #ffffe9; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 2px solid #ffffe9; border-radius: 9px; box-shadow: 0 0 5px rgba(255, 255, 233, 0.5), inset 0 0 5px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!--=== BUTTON ICON ===-->
<i class="fas fa-link
" style="font-size: 25px"></i>
</a>
</div>
</div>
</div>
</li>
<!--=== FULL SIZE IMAGE BUTTON end ===-->
<!--=== EDIT IMAGE BUTTON ===-->
<li class="mx-1 card border-0 align-items-center" style="padding: 2px; width: 50px; height: 50px; border-radius: 11px; background: rgba(0, 0, 0, 0.8)">
<div class="gallery-item">
<div class="gallery-thumb">
<div class="card border-0 thumb-image bg-transparent" style="position: absolute; left: 2px; width: 46px; height: 46px">
<!-- Full size image link [aka copy the image ID - it's the numbers found at the end of the URL after the '#'] -->
<a href="https://toyhou.se/~images/edit/IMAGE_ID_HERE"
class="th m-auto justify-content-center" style="padding: 6px; color: #ffffe9; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 2px solid #ffffe9; border-radius: 9px; box-shadow: 0 0 5px rgba(255, 255, 233, 0.5), inset 0 0 5px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!--=== BUTTON ICON ===-->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96663874_TlSEdTha2UZZpgi.png?1741029340" width="33">
</a>
</div>
</div>
</div>
</li>
<!--=== EDIT IMAGE BUTTON end ===-->
</ul>
</div>
</div>
<!--===/// BUTTONS end ///===-->
<p class="mt-n3 mb-2" style="color: #cdcfc3">
Viewing full image.
</p>
<!--===/// OPTIONAL CAPTION ///===--><!-- Remove this entire section if going unused, or just write "No caption" -->
<div class="mt-3">
<p style="font-size: 20px; font-weight: bold">Caption</p>
<p class="mt-n2" style="color: #cdcfc3">
Caption here.
</p>
</div>
<!--===/// OPTIONAL CAPTION ///===-->
<div class="row">
<!--===/// IMAGE CREDITS ///===-->
<div class="col-md-6 mt-3">
<p style="font-size: 20px; font-weight: bold">Credits</p>
<p class="mt-n2" style="color: #cdcfc3">
<!-- Date -->
1 Jan 2024, 12:12:12 am
</p>
<p class="mx-n2 mt-n2">
<!-- Username [star/premium] -->
<a class="m-2" style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/Username">
<i class="fi-star user-name-icon"></i>Username
</a>
<!-- Username [torso/normal] -->
<a class="m-2" style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/Username">
<i class="fi-torso user-name-icon"></i>Username
</a>
<!-- Username [external link] -->
<a class="m-2" style="font-weight: bold; color: #7efdfe" href=
"EXTERNAL_LINK_HERE">
Username<i class="fa-solid fa-up-right-from-square ml-1" style="font-size: 10px"></i>
</a>
</p>
</div>
<!--===/// IMAGE CREDITS end ///===-->
<!--===/// TAGGED CHARACTERS ///===-->
<div class="col-md-6 mt-3">
<p style="font-size: 20px; font-weight: bold">Characters</p>
<div class="row no-gutters mx-n1 mt-1" style="margin-top: -12px">
<!--===/// NAME ///===--><!-- Duplicate this entire "name" section to add a character/tab/gallery -->
<div class="col-auto mx-1">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="font-weight: bold; border-radius: 8px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="LINK_TO_TAB_CHARA_OR_GALLERY_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 8px; z-index: 5"></span>
<!--=== Name ===-->
Character/tab/gallery name
</a>
</div>
</div>
</div>
<!--===/// NAME end ///===-->
</div>
</div>
<!--===/// TAGGED CHARACTERS end ///===-->
</div>
</div>
</div>
</div>
<!--===/////// IMAGE METADATA end ///////===-->
</div>
</div>
</li>
<!--/// Image end ///-->
<!--===///////// IMAGE VIEWER MIMIC end /////////===-->
</ul>
</div>
<!--===/// FEATURED GALLERY end ///===-->
</div>
<!--===////// MAIN CODE end //////===-->
</div>
</div>
<!--===///////// FOOTER /////////===-->
<div class="mt-auto" style="width: 100%">
<div class="card justify-content-center align-items-center border-0 rounded-0" style="margin-left: -1px; height: 90px; color: rgba(255, 255, 239, 0.5); background: rgba(0, 0, 0, 0.7); z-index: 50">
<p class="text-center" style="font-size: 12px; line-height: 25px">Code by FlowerlyRat layout ©
<a href="https://thatgamecompany.com/" style="color: #7efdfe">thatgamecompany</a><br>
<a href="https://toyhou.se/~about" class="mr-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">About</a>
<a href="https://toyhou.se/~faq/general" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">FAQ</a>
<a href="https://toyhou.se/~tickets" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">HelpDesk</a>
<a href="https://toyhou.se/~rules" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">Rules</a>
<a href="https://toyhou.se/~tos" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">ToS</a>
<a href="https://toyhou.se/~browse/search" class="ml-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">Search</a>
</p>
</div>
</div>
<!--===///////// FOOTER end /////////===-->
</div>
<!--====/////CREDITS WINDOW//////====-->
<div class="collapse fade" id="CREDIT" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; color: #ffffea; z-index: 1100">
<div id="ACC-CREDIT" class="card bg-faded border-0 rounded-0 p-3" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.7)">
<div class="mx-auto sticky-top" style="min-width: 55%">
<div class="card align-items-center" style="margin-top: 120px; border-radius: 25px 25px 0 0; border-width: 1px 1px 0 1px; border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.8); z-index: 5">
<!--Close button-->
<div style="position: absolute; top: 10px; right: 25px">
<a data-toggle="collapse" href="#CREDIT"><i class="fas fa-times" style="font-size: 25px; color: #ffffea"></i></a>
</div>
<!--Close button end-->
<div class="row no-gutters">
<!--Buttons-->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 40px; height: 40px; cursor: pointer">
<i class="far fa-code" style="font-size: 20px; color: #ffffea; opacity: 0.6; text-shadow: 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745"></i>
<div class="collapse fade show CODE" data-parent="#ACC-CREDIT" style="position:absolute; top:0; left:0; right:0; bottom:0;">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea;background: rgba(0, 0, 0, 0)">
<i class="far fa-code" style="margin-top: 2px; font-size: 20px; color: #ffffea; text-shadow: 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745"></i>
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none" data-toggle="collapse" data-target=".CODE"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 40px; height: 40px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96599998_5kOvqGuUpH9aIfH.png" width="25px" style="opacity: 0.6">
<div class="collapse fade IMAGE" data-parent="#ACC-CREDIT" style="position:absolute; top:0; left:0; right:0; bottom:0;">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea;background: rgba(0, 0, 0, 0)">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96599998_5kOvqGuUpH9aIfH.png" width="25px" style="margin-top: 2px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none" data-toggle="collapse" data-target=".IMAGE"></a>
</div>
</li>
</ul>
</div>
<!--Buttons end-->
</div>
</div>
<div class="card p-3 pb-4" style="height: 300px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.7)">
<!--///Code credits///-->
<div class="collapse fade show active CODE" data-parent="#ACC-CREDIT">
<div class="row no-gutters align-items-center mt-3">
<div class="col-auto"><p style="font-size: 15px; font-weight: bold">Code credits</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<!--Text-->
<p class="mt-4">
<b>Code:</b> <a style="font-weight: bold; color: #7efdfe" href="https://toyhou.se/FlowerlyRat"><i class="fi-torso user-name-icon"></i>FlowerlyRat</a><br>
<b>Layout:</b> Based on the game Sky: Children of the Light's UI<br>
<b>Other codes:</b> <a style="font-weight: bold; color: #ff7e01" href="https://toyhou.se/FlowerlyRat/characters/folder:4673560">Folder</a>
</p>
<!--Text end-->
</div>
<!--///Code credits///-->
<!--///Image credits///-->
<div class="collapse fade IMAGE" data-parent="#ACC-CREDIT">
<div class="row no-gutters align-items-center mt-3">
<div class="col-auto"><p style="font-size: 15px; font-weight: bold">Image credits</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<!--Text-->
<p class="mt-4">
<b>Background image:</b> Sky: Children of the Light © thatgamecompany<br>
<b>Icons:</b> <a href="https://fontawesome.com/v6/search" style="font-weight: bold; color: #ff7e01">FontAwesome</a>, Sky: Children of the Light<br>
<b>Flags/ribbons:</b> taken from CoraMagics' <a href="https://toyhou.se/20187371." style="font-weight: bold; color: #ff7e01">Ribbon Masterlist</a>
</p>
<!--Text end-->
</div>
<!--///Image credits///-->
<div class="row no-gutters" style="position: absolute; bottom: -3px; left: 27px; right: 27px; opacity: 0.3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
</div>
</div>
</div>
<!--====/////CREDITS WINDOW end//////====-->
</div>
</div>
<!-- Code container -->
</div>
</div>
</div>
</div>Copy
<!--
╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
△▽/╱╱╱╱╱╱╱╱╱╱╱╰━╯
Ultimate Sky: Children of the Light profile bundle [character profile: multitab version]: code by FlowerlyRat || Based on the game Sky: Children of the Light's UI by ThatGameCompany
This code is paired with the "Constellation" code in this same ToyHouse code bundle profile, please refer to it to know how to set it up properly.
THE CONSTELLATION CODE IS STILL AN UNAVAILABLE WORK IN PROGRESS, THANK YOU FOR YOUR UNDERSTANDING!
REPLACE IT WITH A LINK TO THE CHARACTERS "LINKS" TAB INSTEAD FOR THE TIME BEING
> It is recommended to use circlejourney's ToyHouse live editor to see what you're doing -> https://th.circlejourney.net/
Any links added use the following formats [target="_blank" is optional]:
Blue variant [to link characters, groups, species, and entities]:
<a style="font-weight: bold; color: #7efdfe" href="LINK_HERE">text_here</a>
Orange variant [to link everything else]:
<a style="font-weight: bold; color: #ff7e01" href="LINK_HERE">text_here</a>
Pop-up for the additional information, music and credits collapsibles are at the end of the code
To get rid of the relationship button, please simply delete the code snippet put between the "Relationship divider" commentaries, and replace it with the following lines:
<div class="row no-gutters my-5">
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, rgba(0, 0, 0, 0), #ffffe9, #ffffe9)"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="margin-top: -23px; font-size: 30px">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, #ffffe9, #ffffe9, rgba(0, 0, 0, 0))"></div>
</div>
Code is compatible with the "Sky: Children of the Light avatar frame" and the "Sky: Children of the Light candle UI" add-ons.
-> https://toyhou.se/23579684.
-> https://toyhou.se/23648694.
To add them to this code, please copy and paste them above this commentary.
Code is also compatible with the "Sky quests!" add-on.
-> https://toyhou.se/32862504.
To add it, please copy and paste the code between the "FUN LINKS" commentaries below.
Multiple background images have been screenshoted from the game to give a wide variety of possibilities [ToyHouse gallery: https://toyhou.se/25042050./gallery || Google Drive: https://drive.google.com/drive/folders/12YBvvXe9MoIYj9oUo8MVpngCojj8vCv3?usp=sharing], however if none of them suit your taste or vision, please go on and take your own in-game.
-->
<div class="card bg-faded border-0 rounded-0 px-3" style="margin-top: -17px; margin-left: -15px; margin-right: -15px; background: url(
LINK_TO_BACKGROUND_IMAGE_HERE
); background-size: cover; background-position: center; color: #ffffe9">
<!--Change the image link for the main background right above this line-->
<div class="mt-4" style="margin-bottom: 20px">
<!--===/// WINGED LIGHT COUNT ///===-->
<img class="d-block mx-auto tooltipster" data-placement="bottom" title="
200
" src="https://f2.toyhou.se/file/f2-toyhou-se/images/72538958_Qzn1IfB8liC2Y5H.png" style="height: 50px">
<!--===/// WINGED LIGHT COUNT end ///===-->
<!-- Credits button -->
<div style="position: absolute; top: 20px; right: 25px">
<a data-toggle="collapse" href="#CREDIT">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96600008_K9c0uSM4k7pfpXi.png" width="35">
</a>
</div>
<!-- Credits button end -->
</div>
<!--=======/////// FUN LINKS ///////========-->
<!--=======/////// FUN LINKS end ///////========-->
<!--=======/////// MAIN INFORMATION ///////========-->
<div class="row mt-4">
<!--/// Right column ///-->
<div class="col-md mb-2 col-12" style="width: 0%">
<div class="card bg-transparent rounded-0 border-0 mb-3 accordion" id="WINDOW" style="height: 472px">
<div class="collapse fade show active" id="COMMENTS" data-parent="#WINDOW">
<p class="text-center text-truncate" style="font-weight: bold; font-size: 30px; text-shadow: 0 0 5px #000, 0 0 3px #000">
Name
</p>
<div id="BASE" class="carousel slide align-items-end" data-ride="false" data-pause="true" style="max-height: 271px; min-height: 270px; overflow: hidden">
<div class="carousel-inner">
<!--===/// Basic page ///===-->
<div class="carousel-item active" style="transition: none">
<div class="card border-0" style="padding: 10px; max-height: 218px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<!-- Age -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Age</p></div>
<div class="col-auto ml-auto"><p>
##
</p></div>
</div>
<!-- Age end -->
<!-- Height -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Height</p></div>
<div class="col-auto ml-auto"><p><a style="font-weight: bold; color: #ff7e01" href="https://www.reddit.com/media?url=https%3A%2F%2Fi.redd.it%2Fyazzlze83qh41.jpg">
#
</a></p></div>
</div>
<!-- Height end -->
<!-- Gender -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Gender</p></div>
<div class="col-auto ml-auto"><p>
content
</p></div>
</div>
<!-- Gender end -->
<!-- Pronouns -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Pronouns</p></div>
<div class="col-auto ml-auto"><p>
pro/nouns
</p></div>
</div>
<!-- Pronouns end -->
<!-- Orientation -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Orientation</p></div>
<div class="col-auto ml-auto"><p>
<!--
Change the link and tooltip titles to the appropriate ones
Copy and paste the "<a>" tag to add another flag
-->
<a data-toggle="tooltip" title="LGBT+">
<img width="30"
src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/0b1cb6ed-b614-4d6f-a792-6e2d2db50e49/df12p8i-5148214b-27e1-4cea-b418-420e2c629e25.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzBiMWNiNmVkLWI2MTQtNGQ2Zi1hNzkyLTZlMmQyZGI1MGU0OVwvZGYxMnA4aS01MTQ4MjE0Yi0yN2UxLTRjZWEtYjQxOC00MjBlMmM2MjllMjUucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.bfUU644_Y-XtP6mk5Iw-rkWSCGz48RVRya12UOkjtMA"></a>
<a data-toggle="tooltip" title="Queer">
<img width="30"
src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/0b1cb6ed-b614-4d6f-a792-6e2d2db50e49/df12p7u-5aae0688-c8e6-408f-9360-bfe27b1b9397.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzBiMWNiNmVkLWI2MTQtNGQ2Zi1hNzkyLTZlMmQyZGI1MGU0OVwvZGYxMnA3dS01YWFlMDY4OC1jOGU2LTQwOGYtOTM2MC1iZmUyN2IxYjkzOTcucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.VfwaRcQsMLGFHptAVp77zWeA-p1LT_DE8YRuyXVWmuw"></a>
</p></div>
</div>
<!-- Orientation end -->
</div>
<p class="text-center mt-1 mb-n2" style="font-size: 12px; text-shadow: 0 0 5px #000, 0 0 3px #000">
Click on the arrows and speech bubble for more
</p>
<!--===/// Indicators [purely aesthetic] ///===--><!-- Dont forget to add more of them if you add slides -->
<p class="align-items-center justify-content-center mt-4 mb-1" style="font-size: 10px">
<!-- Active slide --><i class="fas fa-circle mx-2" style="text-shadow: 0 0 5px #000"></i>
<!-- Inactive slide --><i class="fas fa-circle mx-2" style="font-size: 7px; opacity: 0.6; text-shadow: 0 0 5px #000"></i>
<!-- Inactive slide --><i class="fas fa-circle mx-2" style="font-size: 7px; opacity: 0.6; text-shadow: 0 0 5px #000"></i>
</p>
<!--===/// Indicators [purely aesthetic] end ///===-->
</div>
<!--===/// Basic page end ///===-->
<!--===/// Quote page ///===-->
<div class="carousel-item" style="transition: none">
<div class="card bg-transparent border-0 rounded-0 align-items-center">
<div class="card border-0" style="padding: 10px; max-height: 232px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<p>"
This is a very cool and epic quote woa
"</p>
</div>
</div>
<!--===/// Indicators [purely aesthetic] ///===--><!-- Dont forget to add more of them if you add slides -->
<p class="align-items-center justify-content-center mt-4 mb-1" style="font-size: 10px">
<!-- Inactive slide --><i class="fas fa-circle mx-2" style="font-size: 7px; opacity: 0.6; text-shadow: 0 0 5px #000"></i>
<!-- Active slide --><i class="fas fa-circle mx-2" style="text-shadow: 0 0 5px #000"></i>
<!-- Inactive slide --><i class="fas fa-circle mx-2" style="font-size: 7px; opacity: 0.6; text-shadow: 0 0 5px #000"></i>
</p>
<!--===/// Indicators [purely aesthetic] end ///===-->
</div>
<!--===/// Quote page end ///===-->
<!--===/// Additional slide ///===--><!-- Copy this entire section to add a slide -->
<div class="carousel-item" style="transition: none">
<div class="card bg-transparent border-0 rounded-0 align-items-center">
<div class="card border-0" style="padding: 10px; max-height: 232px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<p>
Add whatever you want here, can be notes, inside jokes, author's notes, etc. This box has a maximum height and does scroll :]
</p>
</div>
</div>
<!--===/// Indicators [purely aesthetic]///===--><!-- Dont forget to add more of them if you add slides -->
<p class="align-items-center justify-content-center mt-4 mb-1" style="font-size: 10px">
<!--Inactive slide--><i class="fas fa-circle mx-2" style="font-size: 7px; opacity: 0.6; text-shadow: 0 0 5px #000"></i>
<!--Inactive slide--><i class="fas fa-circle mx-2" style="font-size: 7px; opacity: 0.6; text-shadow: 0 0 5px #000"></i>
<!--Active slide--><i class="fas fa-circle mx-2" style="text-shadow: 0 0 5px #000"></i>
</p>
<!--===/// Indicators [purely aesthetic] end ///===-->
</div>
<!--===/// Additional slide end ///===-->
</div>
</div>
<!--===/// Controls ///===-->
<div class="row no-gutters mt-2">
<div class="col">
<div class="card" style="padding: 10px; border-radius: 30px 0 0 30px; border-width: 1px 0 1px 1px; border-color: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.5)">
<div class="row no-gutters">
<div class="col-4">
<p class="justify-content-between pl-2 pr-3">
<a href="#BASE" data-slide="prev"><img class="fa-flip-horizontal" src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574399_ISOXkfgYQFhmHqy.png" width="25"></a>
<a href="#BASE" data-slide="next"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574399_ISOXkfgYQFhmHqy.png" width="25"></a>
</p>
</div>
<div class="my-n1" style="border-width: 0 1px 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<div class="col">
<p class="justify-content-between px-3" style="font-size: 25px">
<a class="mb-n2" style="margin-top: -10px" href="#" data-toggle="th-favorite">
<span class="favorite toggle-favorite">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574328_c1SwrAQE2AwiKXr.png" width="25">
</span>
<span class="unfavorite toggle-favorite">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574352_AVC7CTgM30PYCuZ.png" width="25">
</span>
</a>
<!-- Comment number -->
<a data-toggle="collapse" href="#BASICS" style="font-size: 12px; color: #ffffe9; text-decoration: none"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574424_pTAU3yttAd8jqPl.png" width="25">
2
</a>
<!-- Comment number -->
</p>
</div>
<div class="my-n1" style="border-width: 0 1px 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<div class="col-auto">
<p class="justify-content-between pl-4 pr-3" style="font-size: 25px">
<i class="fas fa-ellipsis" style="text-shadow: 0 0 3px #684647, 0 0 3px #684647"></i>
</p>
</div>
</div>
</div>
</div>
<div class="card rounded-0" style="padding: 0.5px; border-width: 1px 0; border-color: rgba(0, 0, 0, 0.8); background-color: rgba(255, 255, 239, 0.5)"></div>
<div class="col-auto mx-auto">
<div class="card h-100 justify-content-center" style="padding-left: 13px; padding-right: 13px; font-size: 15px; border-width: 1px 1px 1px 0; border-radius: 0 30px 30px 0; border-color: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.7)">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</div>
<!--===/// Controls end ///===-->
<!-- Additional buttons -->
<div class="card border-0 rounded-0 bg-transparent mt-4">
<ul class="nav nav-button nav-justified justify-content-around">
<!-- Additional info -->
<li class="gallery-thumb mx-1 fa-beat" style="animation-duration: 2.5s; z-index: 5">
<div class="thumb-image justify-content-center" style="width: 65px; height: 65px; border-radius: 50%; background: rgba(0, 0, 0, 0.6)">
<!--== Link ==-->
<a href="#MORE" data-toggle="collapse" style="color: #ffffea; box-shadow: none; text-decoration: none" class="th m-auto">
<span class="card bg-transparent thumb-sensitive" style="position: absolute; top: 2.5px; left: 2.5px; height: 60px; width: 60px; border: 2px solid #ffffe9; border-radius: 50%; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent m-auto" style="width: 60px; height: 60px; border-width: 2px; border-radius: 50%; border-color: rgba(255, 255, 233, 0.4)">
<!--=== BUTTON ICON ===-->
<img class="d-block m-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/images/96614223_hbjPcwNrpN5hl0B.png" width="45">
</div>
</a>
</div>
</li>
<!-- Additional info end -->
<!-- Music -->
<li class="gallery-thumb mx-1 fa-beat" style="animation-duration: 2.5s; animation-delay: 0.5s; z-index: 5">
<div class="thumb-image justify-content-center" style="width: 65px; height: 65px; border-radius: 50%; background: rgba(0, 0, 0, 0.6)">
<!--== Link ==-->
<a href="#MUSIC" data-toggle="collapse" style="color: #ffffea; box-shadow: none; text-decoration: none" class="th m-auto">
<span class="card bg-transparent thumb-sensitive" style="position: absolute; top: 2.5px; left: 2.5px; height: 60px; width: 60px; border: 2px solid #ffffe9; border-radius: 50%; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent m-auto" style="width: 60px; height: 60px; border-width: 2px; border-radius: 50%; border-color: rgba(255, 255, 233, 0.4)">
<!--=== BUTTON ICON ===-->
<img class="d-block mx-auto mb-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/96613490_lnoBfVQLEGFLaSz.png" width="45">
</div>
</a>
</div>
</li>
<!-- Music end -->
</ul>
</div>
<!-- Additional buttons end -->
</div>
<!--===/// Comments and opinions end ///===-->
<div class="collapse fade" id="BASICS" data-parent="#WINDOW">
<div class="card rounded-0 pt-3 pb-2 pr-4 align-items-end" style="border-width: 0 0 1px 0; background: rgba(0, 0, 0, 0.7)">
<!-- Close button -->
<a data-toggle="collapse" href="#COMMENTS" style="box-shadow: none"><i class="fas fa-times" style="font-size: 25px; color: #ffffe9"></i></a>
<!-- Close button end -->
</div>
<div class="card border-0 rounded-0" style="height: 417px; color: #ffffe9; background: rgba(0, 0, 0, 0.6); scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 px-3 pb-4">
<!--/// Comment [1] ///--><!-- Copy and past this entire section to add a comment -->
<div class="card p-3 mt-3" style="border-width: 1px; border-radius: 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<!-- Name and text -->
<p><span style="color: #cdcfc3; font-size: 12px">
Commenter name</span><br>
Little section to add comments or opinions about the character from other people!
</p>
<!-- Name and text -->
<!-- Likes number -->
<div class="mt-2 mb-n2 row no-gutters align-items-center">
<img class="col-auto" style="height: 15px; width: 15px" src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574352_AVC7CTgM30PYCuZ.png">
<p class="col-auto ml-1">
0
</p>
</div>
<!-- Likes number end -->
</div>
<!--/// Comment [1] end ///-->
<!--/// Comment [2] ///--><!-- Copy and past this entire section to add a comment -->
<div class="card p-3 mt-3" style="border-width: 1px; border-radius: 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<!-- Name and text -->
<p><span style="color: #cdcfc3; font-size: 12px">
Commenter name</span><br>
It can be yours or your friends'! Just have fun lol
</p>
<!-- Name and text -->
<!-- Likes number -->
<div class="mt-2 mb-n2 row no-gutters align-items-center">
<img class="col-auto" style="height: 15px; width: 15px" src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574352_AVC7CTgM30PYCuZ.png">
<p class="col-auto ml-1">
0
</p>
</div>
<!-- Likes number end -->
</div>
<!--/// Comment [2] end ///-->
</div>
</div>
</div>
<!--===/// Comments and opinions end ///===-->
</div>
</div>
<!--/// Right column sticky end ///-->
<!--/// Left column ///-->
<div class="col-md-7 mt-md-0 mt-n3 mb-md-0 mb-3">
<div class="card bg-transparent rounded-0 border-0">
<div id="MENU" class="carousel slide carousel-fade" data-ride="false" data-pause="true">
<div class="carousel-inner">
<!--===/// Main page ///===-->
<div class="carousel-item active">
<div class="card" style="padding: 23.5px; border-radius: 25px 25px 0 0; border-color: rgba(91, 92, 87, 0.4); background: rgba(0, 0, 0, 0.6)"></div>
<div class="card border-0" style="height: 420px; font-size: 20px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; background: rgba(0, 0, 0, 0.5); overflow: hidden">
<div class="p-3 my-auto" style="scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow-y: auto">
<!--/// Description button ///-->
<div class="gallery-thumb" style="padding: 3px; border-radius: 42px; background: rgba(0, 0, 0, 0.7)">
<div class="thumb-image m-0">
<a href="#MENU" data-slide-to="1" class="th" style="color: #ffffe9; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 39px; box-shadow: 0 0 20px rgba(255, 255, 233, 0.5), inset 0 0 25px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent" style="padding: 15px; width: 100%; border-width: 2px; border-radius: 39px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">Character description</p>
<!-- Line -->
<p class="text-left text-truncate" style="font-size: 15px; color: #a4a49b; display: block">
1 line long note
</p>
<!-- Line end -->
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 57px; height: 57px; border-radius: 19px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-book fa-fw" style="font-size: 35px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--/// Description button end ///-->
<!--/// Interests button ///-->
<div class="gallery-thumb" style="padding: 3px; border-radius: 42px; background: rgba(0, 0, 0, 0.7)">
<div class="thumb-image m-0">
<a href="#MENU" data-slide-to="2" class="th" style="color: #ffffe9; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 39px; box-shadow: 0 0 20px rgba(255, 255, 233, 0.5), inset 0 0 25px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent" style="padding: 15px; width: 100%; border-width: 2px; border-radius: 39px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">Interests</p>
<!-- Line -->
<p class="text-left text-truncate" style="font-size: 15px; color:#a4a49b; display: block">
1 line long note
</p>
<!-- Line end -->
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 57px; height: 57px; border-radius: 19px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-heart fa-fw" style="font-size: 35px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--/// Interests button end ///-->
<!--/// Backstory button ///-->
<div class="gallery-thumb" style="padding: 3px; border-radius: 42px; background: rgba(0, 0, 0, 0.7)">
<div class="thumb-image m-0">
<a href="#MENU" data-slide-to="3" class="th" style="color: #ffffe9; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 39px; box-shadow: 0 0 20px rgba(255, 255, 233, 0.5), inset 0 0 25px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent" style="padding: 15px; width: 100%; border-width: 2px; border-radius: 39px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">Backstory</p>
<!-- Line -->
<p class="text-left text-truncate" style="font-size: 15px; color:#a4a49b; display: block">
1 line long note
</p>
<!-- Line end -->
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 57px; height: 57px; border-radius: 19px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fad fa-bookmark fa-swap-opacity fa-fw" style="font-size: 35px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--/// Backstory button end ///-->
</div>
</div>
</div>
<!--===/// Main page end ///===-->
<!--===/// Description text ///===-->
<div class="carousel-item">
<!-- Upper card button -->
<div class="card p-3" style="border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<a data-slide-to="0" href="#MENU" style="height: 15px; width: 15px"><i class="fas fa-chevron-left" style="font-size: 20px; color: #ffffe9"></i></a>
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.1"></div>
<!-- Upper card button end -->
<!-- Content -->
<div class="card" style="height: 420px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 420px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto"><div class="card bg-transparent border-0 rounded-0 text-justify px-4 pb-4">
<!-- Header -->
<div class="row no-gutters pt-4" style="color: #ffffe9">
<div class="col-auto justify-content-center align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 57px; height: 57px; border-radius: 19px; background-color: #5b5c57">
<i class="fas fa-book" style="font-size: 35px"></i>
</div>
</div>
<div class="col-9 my-auto ml-2">
<h1 class="text-truncate">Character description</h1>
</div>
</div>
<!-- Header end -->
<div class="my-4" style="width: 70px; border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<!-- Line -->
<p class="align-items-end justify-content-start mb-1" style="font-weight: bold; color: #ffffe9;">
1 line long note
</p>
<!-- Line end -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Subheader
</span><br><!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
This is where you write the very juicy juicy juicy information about your silly little character! Whether it be describing their personality or just talk about their life, and what they do, honestly you can just go wild with this!!! Maybe you want to talk about how people perceive them? Perhaps even how their thought process functions? You can write as much [or as little] as you want!!! This box scrolls anyway so you'll never run out of space!!!
</p>
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Subheader
</span><br><!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
This is another subheader, in case you want to split the description into multiple, defined, parts. Like maybe have a description for the character through time? Starting from when they were little to now! Or even in the <em>~future~</em>,,,
</p>
</div>
</div>
</div>
<!-- Content -->
</div>
<!--===/// Description text end ///===-->
<!--===/// Interests text ///===-->
<div class="carousel-item">
<!-- Upper card button -->
<div class="card p-3" style="border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<a data-slide-to="0" href="#MENU" style="height: 15px; width: 15px"><i class="fas fa-chevron-left" style="font-size: 20px; color: #ffffe9"></i></a>
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.1"></div>
<!-- Upper card button end -->
<!-- Content -->
<div class="card" style="height: 420px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 420px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto"><div class="card bg-transparent border-0 rounded-0 text-justify px-4 pb-4">
<!-- Header -->
<div class="row no-gutters pt-4" style="color: #ffffe9">
<div class="col-auto justify-content-center align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 57px; height: 57px; border-radius: 19px; background-color: #5b5c57">
<i class="fas fa-heart" style="font-size: 35px"></i>
</div>
</div>
<div class="col-9 my-auto ml-2">
<h1 class="text-truncate">Interests</h1>
</div>
</div>
<!-- Header end -->
<div class="my-4" style="width: 70px; border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<!-- Line -->
<p class="align-items-end justify-content-start mb-1" style="font-weight: bold; color: #ffffe9;">
1 line long note
</p>
<!-- Line end -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Subheader
</span><br><!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Write about your character's silly interest, whether it's the usual ones like having fun dodging krills, or the bat shxt insane stuff like having an unhealthy obsession with gold, write at your heart's content! Let's here about this silly guy's hobbies, what do they like doing on a daily basis? Are they good at it? Are they ashamed of others learning about it? Or maybe it is such a defining trait of their personality that they would literally shut down if they ever stopped practicing it? Go wild man!!!! Infodump!!!
</p>
</div>
</div>
</div>
<!-- Content -->
</div>
<!--===/// Interests text end ///===-->
<!--===/// Backstory text ///===-->
<div class="carousel-item">
<!-- Upper card button -->
<div class="card p-3" style="border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<a data-slide-to="0" href="#MENU" style="height: 15px; width: 15px"><i class="fas fa-chevron-left" style="font-size: 20px; color: #ffffe9"></i></a>
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.1"></div>
<!-- Upper card button end -->
<!-- Content -->
<div class="card" style="height: 420px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 330px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto"><div class="card bg-transparent border-0 rounded-0 text-justify px-4 pb-4">
<!-- Header -->
<div class="row no-gutters pt-4" style="color: #ffffe9">
<div class="col-auto justify-content-center align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 57px; height: 57px; border-radius: 19px; background-color: #5b5c57">
<i class="fad fa-bookmark fa-swap-opacity" style="font-size: 35px"></i>
</div>
</div>
<div class="col-9 my-auto ml-2">
<h1 class="text-truncate">Backstory</h1>
</div>
</div>
<!-- Header end -->
<div class="my-4" style="width: 70px; border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<!-- Line -->
<p class="align-items-end justify-content-start mb-1" style="font-weight: bold; color: #ffffe9;">
1 line long note
</p>
<!-- Line end -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Subheader
</span><br><!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Write the backstory of your silly critter!!! I do recommend keeping it rather short as to not overwhelm others with text! If there is a need to have a longer backstory, I recommend using the button at the very end of this scrollbox to link a litterature or separate tab with it, so people get to choose whether or not they want to read the rest!
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>
<!-- Read more button -->
<div class="mx-4">
<div class="mb-3" style="border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<div class="justify-content-center">
<div class="gallery-thumb m-0">
<div class="thumb-image justify-content-center tooltipster" title="Read more" style="width: 57px; height: 57px; border-radius: 16px; background: rgba(0, 0, 0, 0.5)">
<!--
To "disable" the button, delete the "href" below and add "cursor: not-allowed; opacity: 0.5" in the "style"
Don't forget to add back the "href" and delete the "cursor: not-allowed; opacity: 0.5" once you want to link something to this button!
-->
<!--== Link ==-->
<a href="READ_MORE_LINK_HERE"
style="color: #ffffea; box-shadow: none; text-decoration: none" class="th m-auto">
<span class="card bg-transparent thumb-sensitive" style="position: absolute; top: 2.5px; left: 2.4px; height: 52px; width: 52px; border: 2px solid #ffffe9; border-radius: 14px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent m-auto" style="width: 52px; height: 52px; border-width: 2px; border-radius: 14px; border-color: rgba(91, 92, 87, 0.7)">
<!--=== BUTTON ICON ===-->
<i class="fas fa-book m-auto" style="font-size: 35px; color: #ffffe9"></i>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- Read more button end -->
</div>
<!-- Content -->
</div>
<!--===/// Backstory text end ///===-->
</div>
</div>
</div>
</div>
<!--/// Left column end ///-->
</div>
<!--=======/////// MAIN INFORMATION end ///////========-->
<!--=======/////// RELATIONSHIP DIVIDER ///////========-->
<div class="row no-gutters align-items-center my-3">
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, rgba(0, 0, 0, 0), #ffffe9, #ffffe9)"></div>
<div class="gallery-thumb mx-4 fa-beat" style="animation-duration: 2.5s; animation-delay: 1s; z-index: 5">
<div class="thumb-image justify-content-center tooltipster" title="Friendship constellation" style="width: 65px; height: 65px; border-radius: 50%; background: rgba(0, 0, 0, 0.6)">
<!--== Link ==-->
<a href="CONSTELLATION_TAB_OR_LINKS_SECTION_LINK_HERE"
style="color: #ffffea; box-shadow: none; text-decoration: none" class="th m-auto">
<span class="card bg-transparent thumb-sensitive" style="position: absolute; top: 2.5px; left: 2.5px; height: 60px; width: 60px; border: 2px solid #ffffe9; border-radius: 50%; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent m-auto" style="width: 60px; height: 60px; border-width: 2px; border-radius: 50%; border-color: rgba(255, 255, 233, 0.4)">
<!--=== BUTTON ICON ===-->
<img class="d-block m-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/72534752_TMp.png?1698146702" width="40">
</div>
</a>
</div>
</div>
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, #ffffe9, #ffffe9, rgba(0, 0, 0, 0))"></div>
</div>
<!--=======/////// RELATIONSHIP DIVIDER end ///////========-->
<!--=======/////// DESIGN NOTES ///////========-->
<div class="row no-gutters">
<!--/// Full body image ///--><!-- You may play with the max and min height if your image doesn't look correctly proportionned -->
<div class="col-lg-5 my-auto">
<img class="d-block mb-md-0 mb-3 mx-auto" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/69495205_Ir72I07ys8SlDvP.png
" style="max-height: 470px; min-height: 350px; object-fit: cover; object-position: center; "><!--
If the full body gets muddied with the background, add the following snippet to the style to add a white border around it:
filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-0.5px 0px 0 #fff) drop-shadow(-0px -0px 0 #fff) drop-shadow(-0px -0.5px 0 #fff)
-->
</div>
<!--/// Full body image end ///-->
<!--/// CLOSET ///-->
<div class="col">
<div class="card bg-transparent border-0 rounded-0" style="height: 507px; margin-left: -15px; margin-right: -15px">
<div id="OUTFIT-A" class="carousel slide carousel-fade" data-ride="false" data-pause="true">
<div class="carousel-inner">
<!--===/// MAIN PAGE ///===-->
<div class="carousel-item active" style="margin-right: 16px">
<div class="card p-3 mx-3 my-4 text-center" style="border-radius: 10px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<h1 class="mt-1">Outfit shrine</h1>
<p style="font-size: 15px; opacity: 0.7">Design notes</p>
</div>
<div class="row no-gutters mt-4 mx-3" style="height: 366px">
<!-- Outfits button -->
<div class="col justify-content-center">
<div class="gallery-thumb my-2">
<div class="thumb-image p-2 justify-content-center text-center" style="width: 86px; border-radius: 16px; background: rgba(0, 0, 0, 0.7)">
<a href="#OUTFIT-A" data-slide-to="1" class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="position: absolute; top: 2px; left: 2.5px; height: 150px; width: 81px; border: 2px solid #ffffe9; border-radius: 14px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 15px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div>
<p class="mb-2" style="font-size: 18px; color: #ffffe9">Outfit</p>
<img class="d-block mb-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/80032569_EsOacrJKz6JEbIG.png">
</div>
</a>
</div>
</div>
</div>
<!-- Outfits button end -->
<!-- Face button -->
<div class="col justify-content-center">
<div class="gallery-thumb my-2">
<div class="thumb-image p-2 justify-content-center text-center" style="width: 86px; border-radius: 16px; background: rgba(0, 0, 0, 0.7)">
<a href="#OUTFIT-A" data-slide-to="2" class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="position: absolute; top: 2px; left: 2.5px; height: 150px; width: 81px; border: 2px solid #ffffe9; border-radius: 14px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 15px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div>
<p class="mb-2" style="font-size: 18px; color: #ffffe9">Face</p>
<img class="d-block mb-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/80032560_ZrwKaLpidmPCrpT.png">
</div>
</a>
</div>
</div>
</div>
<!-- Face button end -->
<!-- Head button -->
<div class="col justify-content-center">
<div class="gallery-thumb my-2">
<div class="thumb-image p-2 justify-content-center text-center" style="width: 86px; border-radius: 16px; background: rgba(0, 0, 0, 0.7)">
<a href="#OUTFIT-A" data-slide-to="3" class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="position: absolute; top: 2px; left: 2.5px; height: 150px; width: 81px; border: 2px solid #ffffe9; border-radius: 14px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 15px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div>
<p class="mb-2" style="font-size: 18px; color: #ffffe9">Head</p>
<img class="d-block mb-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/80032467_KIUqIW9SO3AezEa.png">
</div>
</a>
</div>
</div>
</div>
<!-- Head button end -->
<!-- Capes button -->
<div class="col justify-content-center">
<div class="gallery-thumb my-2">
<div class="thumb-image p-2 justify-content-center text-center" style="width: 86px; border-radius: 16px; background: rgba(0, 0, 0, 0.7)">
<a href="#OUTFIT-A" data-slide-to="4" class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="position: absolute; top: 2px; left: 2.5px; height: 150px; width: 81px; border: 2px solid #ffffe9; border-radius: 14px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 15px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div>
<p class="mb-2" style="font-size: 18px; color: #ffffe9">Cape</p>
<img class="d-block mb-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/80032461_JY0FyFpFdDy1bRU.png">
</div>
</a>
</div>
</div>
</div>
<!-- Capes button end -->
<!-- Props button -->
<div class="col justify-content-center">
<div class="gallery-thumb my-2">
<div class="thumb-image p-2 justify-content-center text-center" style="width: 86px; border-radius: 16px; background: rgba(0, 0, 0, 0.7)">
<a href="#OUTFIT-A" data-slide-to="5" class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="position: absolute; top: 2px; left: 2.5px; height: 150px; width: 81px; border: 2px solid #ffffe9; border-radius: 14px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 15px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div>
<p class="mb-2" style="font-size: 18px; color: #ffffe9">Prop</p>
<img class="d-block mb-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/80032444_O4QKGFCXgNXUJJ6.png">
</div>
</a>
</div>
</div>
</div>
<!-- Props button end -->
</div>
</div>
<!--===/// MAIN PAGE end///===-->
<!--===/// OUTFITS PAGE ///===-->
<div class="carousel-item">
<div id="ACC-OUTFIT">
<div id="ACC-OUTFIT-2" class="card border-0 rounded-0 align-items-center" style="background: rgba(0, 0, 0, 0.7)">
<div class="row no-gutters">
<!-- Close button -->
<div style="position: absolute; top: 17px; right: 20px">
<a data-slide-to="0" href="#OUTFIT-A"><i class="fas fa-times" style="font-size: 25px; color: #ffffe9"></i></a>
</div>
<!-- Close button -->
<!-- Buttons -->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603077_thtEYQo0GPQ2R1Y.png" style="height: 40px;opacity: 0.6">
<div class="collapse fade show OUTFIT" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-OUTFIT-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603077_thtEYQo0GPQ2R1Y.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".OUTFIT"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358456_6g3cv2EpYvBIwJj.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade SHOES" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-OUTFIT-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358456_6g3cv2EpYvBIwJj.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".SHOES"></a>
</div>
</li>
</ul>
</div>
<!-- Buttons end -->
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.2"></div>
</div>
<div class="card border-0 rounded-0 pl-3" style="height: 450px; background: rgba(0, 0, 0, 0.6); overflow: hidden">
<!--/// PANTS TAB ///-->
<div class="collapse fade show active OUTFIT" data-parent="#ACC-OUTFIT">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Top -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Top
</span><br>
<!-- Image -->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Write a small description about the outfit your character wears! Notably the top portion! Maybe they have addtional details that don't exist in-game, or maybe you just want to describe it to be visible by screen readers or help people better understand what it looks like! You can also add an image to it if you have drawn it, or taken a screenshott of it!
</p>
<!-- Top end -->
<!-- Bottom -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Bottom
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
This part is for the bottom of the outfit, such as pants, skirt, shorts, etc! You can also add a picture to the side of the text! The text warps around it anyways.<br>
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>
<!-- Bottom end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!--Add "<br>" at the end to go back to the line, add a new p tag to jump a line-->
If the outfit has additional details that are easily forgotten by others or aren't part of the in-game model, write them here! You can basically put an image next to anything on this entire outfit shrine if you copy paste the line of code related to it lol. You can also add the body type here!<br>
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>
<!-- Details end -->
</div>
</div>
</div>
<!--/// PANTS TAB ///-->
<!--/// SHOES TABS ///-->
<div class="collapse fade SHOES" data-parent="#ACC-OUTFIT">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Shoes -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Shoes
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Pretty self explanatory, it's for the shoes!<br>
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>
<!-- Shoes end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Just in case you need to add details here!<br>
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>
<!-- Details end -->
</div>
</div>
</div>
<!--/// SHOES TAB ///-->
</div>
</div>
</div>
<!--===/// OUTFITS PAGE end ///===-->
<!--===/// FACE PAGE ///===-->
<div class="carousel-item">
<div id="ACC-FACE">
<div id="ACC-FACE-2" class="card border-0 rounded-0 align-items-center" style="background: rgba(0, 0, 0, 0.7)">
<div class="row no-gutters">
<!-- Close button -->
<div style="position: absolute; top: 17px; right: 20px">
<a data-slide-to="0" href="#OUTFIT-A"><i class="fas fa-times" style="font-size: 25px; color: #ffffe9"></i></a>
</div>
<!-- Close button -->
<!-- Buttons -->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358447_AvXVBRPZEBqf2TC.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade show MASK" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-FACE-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358447_AvXVBRPZEBqf2TC.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".MASK"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72359091_6loKsROxA4qtouq.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade ACCS-FACE" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-FACE-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72359091_6loKsROxA4qtouq.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".ACCS-FACE"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603441_NoEUznqETpxByiG.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade NECK" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-FACE-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603441_NoEUznqETpxByiG.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".NECK"></a>
</div>
</li>
</ul>
</div>
<!-- Buttons end -->
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.2"></div>
</div>
<div class="card border-0 rounded-0 pl-3" style="height: 450px; background: rgba(0, 0, 0, 0.6)">
<!--/// MASK AND FACE TAB ///-->
<div class="collapse fade show active MASK" data-parent="#ACC-FACE">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Structure -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Face structure
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Text area to write what facial feature and structure your character has!! Such as face, eye, and nose shape.<br>
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>
<!-- Structure end -->
<!-- Mask -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Mask
</span><br>
<!-- Image -->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Also a self explanatory section, just write anything about the mask they wear, or the lack thereof! Face paint also fits this category.<br>
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>
<!-- Mask end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
If your character has some specific features, such as tattoos, moles, crooked teeth, etc etc!<br>
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>
<!-- Details end -->
</div>
</div>
</div>
<!--/// MASK AND FACE TAB ///-->
<!--/// FACE ACCESSORIES TAB ///-->
<div class="collapse fade ACCS-FACE" data-parent="#ACC-FACE">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Accessories -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Accessories
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Face accessories, such as sunglasses, or any of the cosmetics in this tab in-game, fit here!<br>
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>
<!-- Accessories end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
More details!!!<br>
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>
<!-- Details end -->
</div>
</div>
</div>
<!--/// FACE ACCESSORIES TAB ///-->
<!--/// NECK ACCESSORIES TAB ///-->
<div class="collapse fade NECK" data-parent="#ACC-FACE">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Accessories neck -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Accessories
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Neck accessories!!!! For when they have something around their neck.<br>
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>
<!-- Accessories neck end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Oh yeah here's the details section!!!<br>
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>
<!-- Details end -->
</div>
</div>
</div>
<!--/// Neck accessories tab end ///-->
</div>
</div>
</div>
<!--===/// FACE PAGE end///===-->
<!--===/// HEAD PAGE ///===-->
<div class="carousel-item">
<div id="ACC-HEAD">
<div id="ACC-HEAD-2" class="card border-0 rounded-0 align-items-center" style="background: rgba(0, 0, 0, 0.7)">
<div class="row no-gutters">
<!-- Close button -->
<div style="position: absolute; top: 17px; right: 20px">
<a data-slide-to="0" href="#OUTFIT-A"><i class="fas fa-times" style="font-size: 25px; color: #ffffe9"></i></a>
</div>
<!-- Close button -->
<!-- Buttons -->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358424_KTeHcdt16OquTVN.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade show HAIR" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-HEAD-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358424_KTeHcdt16OquTVN.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".HAIR"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603451_tXV4olsXIf3MP1A.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade ACCS-HEAD" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-HEAD-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603451_tXV4olsXIf3MP1A.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".ACCS-HEAD"></a>
</div>
</li>
</ul>
</div>
<!-- Buttons end -->
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.2"></div>
</div>
<div class="card border-0 rounded-0 pl-3" style="height: 450px; background: rgba(0, 0, 0, 0.6)">
<!--/// HAIR TAB ///-->
<div class="collapse fade show HAIR" data-parent="#ACC-HEAD">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Hairstyle -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Hairstyle
</span><br>
<!-- Image -->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Ok at this point you must have understood how these tab work!<br>
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>
<!-- Hairstyle end -->
<!-- Texture + details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Texture and details
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
This is for the hair texture and other details!!!<br>
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>
<!-- Texture + details end -->
</div>
</div>
</div>
<!--/// HAIR TAB ///-->
<!--/// HEAD ACCESSORIES TAB ///-->
<div class="collapse fade ACCS-HEAD" data-parent="#ACC-HEAD">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Hat -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Hat
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Hat end -->
<!-- Accessories hair -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Accessories
</span><br>
<!-- Image -->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Accessories hair end -->
</div>
</div>
</div>
<!--/// HEAD ACCESSORIES TAB end ///-->
</div>
</div>
</div>
<!--===/// HEAD PAGE end ///===-->
<!--===/// CAPE PAGE ///===-->
<div class="carousel-item">
<div class="card border-0 rounded-0 align-items-center" style="height: 57px; background: rgba(0, 0, 0, 0.7)">
<!-- Close button -->
<div style="position: absolute; top: 17px; right: 20px">
<a data-slide-to="0" href="#OUTFIT-A"><i class="fas fa-times" style="font-size: 25px; color: #ffffe9"></i></a>
</div>
<!-- Close button -->
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.2"></div>
<div class="card border-0 rounded-0" style="height: 450px; color: #cdcfc3; background: rgba(0, 0, 0, 0.6); scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-4 pb-4">
<!-- Cape -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Cape
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Cape end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Details end -->
</div>
</div>
<!--/// Details tab ///-->
</div>
<!--===/// CAPE PAGE end ///===-->
<!--===/// PROPS PAGE ///===-->
<div class="carousel-item">
<div id="ACC-PROP">
<div id="ACC-PROP-2" class="card border-0 rounded-0 align-items-center" style="background: rgba(0, 0, 0, 0.7)">
<div class="row no-gutters">
<!-- Close button -->
<div style="position: absolute; top: 17px; right: 20px">
<a data-slide-to="0" href="#OUTFIT-A"><i class="fas fa-times" style="font-size: 25px; color: #ffffe9"></i></a>
</div>
<!-- Close button -->
<!-- Buttons -->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358385_8caxhrNR0gkFChw.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade show INSTRU" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-PROP-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358385_8caxhrNR0gkFChw.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".INSTRU"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603460_F1W5Ymc1aOvESjr.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade PROP" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-PROP-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603460_F1W5Ymc1aOvESjr.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".PROP"></a>
</div>
</li>
</ul>
</div>
<!-- Buttons end -->
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.2"></div>
</div>
<div class="card border-0 rounded-0 pl-3" style="height: 450px; background: rgba(0, 0, 0, 0.6)">
<!--/// INSTRUMENT TAB ///-->
<div class="collapse fade show INSTRU" data-parent="#ACC-PROP">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Main -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Main instrument
</span><br>
<!-- Image -->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Main end -->
<!-- Secondary -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Secondary instrument/prop
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Secondary end -->
</div>
</div>
</div>
<!--/// INSTRUMENT TAB ///-->
<!--/// PROP TAB ///-->
<div class="collapse fade PROP" data-parent="#ACC-PROP">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Main -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Main prop
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Main end -->
<!-- Secondary -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Secondary prop
</span><br>
<!-- Image -->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Secondary end -->
</div>
</div>
</div>
<!--/// PROP TAB end ///-->
</div>
</div>
</div>
<!--===///PROPS PAGE end ///===-->
</div>
</div>
</div>
<!--/// CLOSET end ///-->
</div>
</div>
<!--=======/////// DESIGN NOTES end ///////========-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--====///// ADDITIONAL INFO WINDOW //////====-->
<div class="collapse fade" id="MORE" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; z-index: 1100">
<div id="ACC-ADD" class="card bg-faded border-0 rounded-0 p-3" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.5)">
<div class="mx-auto sticky-top" style="width: 55%; min-width: 360px">
<div class="card align-items-center" style="margin-top: 120px; border-radius: 25px 25px 0 0; border-width: 1px 1px 0 1px; border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.8); z-index: 5">
<!-- Close button -->
<div style="position: absolute; top: 10px; right: 25px">
<a data-toggle="collapse" href="#MORE"><i class="fas fa-times" style="font-size: 25px; color: #ffffe9"></i></a>
</div>
<!-- Close button end -->
<div class="row no-gutters">
<!-- Buttons -->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 40px; height: 40px; cursor: pointer">
<i class="far fa-lightbulb" style="font-size: 20px; opacity: 0.6"></i>
<div class="collapse fade show TRIVIA" data-parent="#ACC-ADD" style="position:absolute; top:0; left:0; right:0; bottom:0;">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: rgba(0, 0, 0, 0)">
<i class="far fa-lightbulb" style="margin-top: 2px; font-size: 20px"></i>
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none" data-toggle="collapse" data-target=".TRIVIA"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 40px; height: 40px; cursor: pointer">
<i class="far fa-heart" style="font-size: 20px; opacity: 0.6"></i>
<div class="collapse fade TASTE" data-parent="#ACC-ADD" style="position:absolute; top:0; left:0; right:0; bottom:0;">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: rgba(0, 0, 0, 0)">
<i class="far fa-heart" style="margin-top: 2px; font-size: 20px"></i>
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none" data-toggle="collapse" data-target=".TASTE"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 40px; height: 40px; cursor: pointer">
<i class="fas fa-award" style="font-size: 20px; opacity: 0.6"></i>
<div class="collapse fade RIBBONS" data-parent="#ACC-ADD" style="position:absolute; top:0; left:0; right:0; bottom:0;">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: rgba(0, 0, 0, 0)">
<i class="fas fa-award" style="margin-top: 2px; font-size: 20px"></i>
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none" data-toggle="collapse" data-target=".RIBBONS"></a>
</div>
</li>
</ul>
</div>
<!-- Buttons end -->
</div>
</div>
<div class="card" style="height: 300px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.7); overflow: hidden">
<!--/// Trivia ///-->
<div class="collapse fade show active TRIVIA" data-parent="#ACC-ADD">
<div class="row no-gutters align-items-center mt-3 px-3 pt-3">
<div class="col-auto"><p style="font-size: 15px; font-weight: bold">Trivia</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<!-- List -->
<div class="card bg-transparent border-0 text-justify px-3 pt-3" style="height: 239px; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<ul class="list-unstyled" style="color: #cdcfc3">
<li><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>content</li>
<li><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>content</li>
<li><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>content</li>
<li><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>content</li>
<li><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>content</li>
</ul>
</div>
<!-- List -->
</div>
<!--/// Trivia end ///-->
<!--/// Tastes ///-->
<div class="collapse fade TASTE" data-parent="#ACC-ADD">
<div class="row no-gutters align-items-center mt-3 px-3 pt-3">
<div class="col-auto"><p style="font-size: 15px; font-weight: bold">Tastes</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<!-- Text -->
<div class="card bg-transparent border-0 text-justify px-3 pt-3" style="height: 239px; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="row no-gutters">
<!-- Likes -->
<div class="col-lg mr-2">
<p class="justify-content-start mt-2 mb-n3" style="margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>Likes</p><br>
<ul class="list-unstyled" style="color: #cdcfc3">
<li><i class="fas fa-genderless"></i> content</li>
<li><i class="fas fa-genderless"></i> content</li>
<li><i class="fas fa-genderless"></i> content</li>
<li><i class="fas fa-genderless"></i> content</li>
<li><i class="fas fa-genderless"></i> content</li>
</ul>
</div>
<!-- Likes -->
<!-- Dislikes -->
<div class="col-lg">
<p class="justify-content-start mt-2 mb-n3" style="margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>Dislikes</p><br>
<ul class="list-unstyled" style="color: #cdcfc3">
<li><i class="fas fa-times"></i> content</li>
<li><i class="fas fa-times"></i> content</li>
<li><i class="fas fa-times"></i> content</li>
<li><i class="fas fa-times"></i> content</li>
<li><i class="fas fa-times"></i> content</li>
</ul>
</div>
<!-- Dislikes -->
</div>
</div>
<!-- Text -->
</div>
<!--/// Tastes end ///-->
<!--/// Ribbons ///-->
<div class="collapse fade RIBBONS" data-parent="#ACC-ADD">
<div class="row no-gutters align-items-center mt-3 px-3 pt-3">
<div class="col-auto"><p style="font-size: 15px; font-weight: bold">Ribbons</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<div class="card bg-transparent border-0 text-justify px-3 pt-3" style="height: 239px; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<!--/// SECTION 1 ///--><!-- Duplicate this entire section to add a new ribbon collection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-2" style="margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Name of ribbon collection
</span></p>
<div class="row no-gutters text-center mb-3">
<!-- ||[ 0 ]|| = 1 ribbon -->
<!-- ||[ 1 ]|| --><!-- Duplicate this entire section to add a new ribbon -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 1 ]|| -->
<!-- ||[ 2 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 2 ]|| -->
<!-- ||[ 3 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 3 ]|| -->
<!-- ||[ 4 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 4 ]|| -->
<!-- ||[ 5 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 5 ]|| -->
<!-- ||[ 6 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 6 ]|| -->
</div>
<!--/// SECTION 1 ///-->
<!--/// SECTION 2 ///-->
<!-- Subheader -->
<p><span class="justify-content-start mt-2" style="margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Name of ribbon collection
</span></p>
<div class="row no-gutters text-center mb-3">
<!-- ||[ 0 ]|| = 1 ribbon -->
<!-- ||[ 1 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 1 ]|| -->
<!-- ||[ 2 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 2 ]|| -->
<!-- ||[ 3 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 3 ]|| -->
<!-- ||[ 4 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 4 ]|| -->
<!-- ||[ 5 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 5 ]|| -->
<!-- ||[ 6 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 6 ]|| -->
</div>
<!--/// SECTION 2 ///-->
<!--
Dont mind this random p tag,,, its the only solution I found for the different ribbon sections to have the same margin between the title and the ribbons smh
If you delete it, you'll notice the very last section doesn't have the same margin, and I do not know why
-->
<p></p>
</div>
</div>
<!--/// Ribbons end ///-->
<div class="row no-gutters" style="position: absolute; bottom: -3px; left: 27px; right: 27px; opacity: 0.3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
</div>
</div>
</div>
<!--====///// ADDITIONAL INFO WINDOW end //////====-->
<!--====///// MUSIC WINDOW //////====-->
<div class="collapse fade" id="MUSIC" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; z-index: 1100">
<div class="card bg-faded border-0 rounded-0 p-3" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.5)">
<div class="mx-auto sticky-top" style="padding-top: 74px">
<!--////// VOICE CLAIM + THEME + PLAYLIST //////-->
<div style="max-width: 440px; border-radius: 20px; overflow: hidden"><div class="card bg-faded mx-auto pt-3" style="border-radius: 20px; border-width: 1px; border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.8)">
<!-- Close button -->
<div style="position: absolute; top: 10px; right: 15px">
<a data-toggle="collapse" href="#MUSIC"><i class="fas fa-times" style="font-size: 25px; color: #ffffe9"></i></a>
</div>
<!-- Close button end -->
<h1 class="text-center">Audio Settings</h1>
<div class="px-4 py-3" style="max-height: 400px; overflow: auto; scrollbar-width: thin; scrollbar-color: #afb1b0 rgba(0, 0, 0, 0)">
<!--/// VOICE CLAIM ///-->
<div class="row no-gutters mb-2 align-items-center">
<div class="col">
<p class="text-truncate" style="font-weight: bold">
Voice claim
</p>
</div>
<div class="col-auto ml-auto">
<div class="card border-0 p-2" style="border-radius: 40px; background: #3fb452">
<div class="row no-gutters align-items-center">
<div class="tooltipster" title="
Voice name - source
"><!-- Please also change the tooltip, so that when it gets cut off, people can still see the full name by hovering over or clicking on it -->
<p class="text-truncate ml-1 mt-n1" style="width: 220px; font-size: 12px">
<!-- Title -->
Voice name
</p><p class="text-truncate ml-3 mb-n1" style="width: 200px; font-size: 10px; font-style: oblique; margin-top: -17px; opacity: 0.7">
<!-- Source -->
source of voice
</p>
</div>
<div class="col-auto align-items-center">
<i class="fas fa-play-circle" style="font-size: 20px"></i>
<span>
<!-- YOUTUBE VIDEO ID -->
<iframe class="flex-fill" style="position: absolute; top: -4px; right: -3px; width: 40px; height: 25px; opacity: 0.0001" frameborder="0" src="
https://www.youtube.com/embed/VIDEO_ID?ps=docs&controls=1
"></iframe>
<!-- YOUTUBE VIDEO ID end -->
</span>
</div>
</div>
</div>
</div>
</div>
<!--/// VOICE CLAIM end ///-->
<!--/// MUSIC THEME ///-->
<div class="row no-gutters mb-2 align-items-center">
<div class="col">
<p class="text-truncate" style="font-weight: bold">
Music theme
</p>
</div>
<div class="col-auto ml-auto">
<div class="card border-0 p-2" style="border-radius: 40px; background: #3fb452">
<div class="row no-gutters align-items-center">
<div class="tooltipster" title="
Song title - artist
"><!-- Please also change the tooltip, so that when it gets cut off, people can still see the full name by hovering over or clicking on it -->
<p class="text-truncate ml-1 mt-n1" style="width: 220px; font-size: 12px">
<!-- Title -->
Song title
</p><p class="text-truncate ml-3 mb-n1" style="width: 200px; font-size: 10px; font-style: oblique; margin-top: -17px; opacity: 0.7">
<!-- Source -->
artist
</p>
</div>
<div class="col-auto align-items-center">
<i class="fas fa-play-circle" style="font-size: 20px"></i>
<span>
<!-- YOUTUBE VIDEO ID -->
<iframe class="flex-fill" style="position: absolute; top: -4px; right: -3px; width: 40px; height: 25px; opacity: 0.0001" frameborder="0" src="
https://www.youtube.com/embed/VIDEO_ID?ps=docs&controls=1
"></iframe>
<!-- YOUTUBE VIDEO ID end -->
</span>
</div>
</div>
</div>
</div>
</div>
<!--/// MUSIC THEME end ///-->
<!--//////////// PLAYLIST ////////////-->
<!--
Feel free to delete certain parts of this section if you don't like how it looks!
Such as the divider, description, link to outside platform, or the songs themselves
-->
<!-- Divider -->
<div class="row no-gutters mt-3 mb-2">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<!-- Divider end -->
<!--/// TEXT ///-->
<p class="mb-3" style="color: #cdcfc3; text-align: justify">
Short playlist description
</p>
<!--/// TEXT end ///-->
<!--/// LINK TO OUTSIDE PLATFORM ///-->
<div class="row no-gutters mb-2 align-items-center">
<div class="col">
<p class="text-truncate" style="font-weight: bold">
Playlist link
</p>
</div>
<div class="col-auto ml-auto">
<div class="card border-0 p-2" style="border-radius: 40px; background: #3fb452">
<div class="row no-gutters align-items-center">
<div class="tooltipster" title="
Playlist name - platform
"><!-- Please also change the tooltip, so that when it gets cut off, people can still see the full name by hovering over or clicking on it -->
<p class="text-truncate ml-1 mt-n1" style="width: 220px; font-size: 12px">
<!-- Title -->
Playlist name
</p><p class="text-truncate ml-3 mb-n1" style="width: 200px; font-size: 10px; font-style: oblique; margin-top: -17px; opacity: 0.7">
<!-- Source -->
platform
</p>
</div>
<div class="col-auto align-items-center">
<a
href="PLAYLIST_LINK_GOES_HERE"
><i class="fas fa-external-link-square-alt mt-1" style="font-size: 20px; color: #ffffe9"></i></a>
</div>
</div>
</div>
</div>
</div>
<!--/// LINK TO OUTSIDE PLATFORM end ///-->
<!--/// IN-TOYHOUSE PLAYLIST ///-->
<!--/// [1] ///--><!-- Duplicate this entire senction to add a new song -->
<div class="row no-gutters mb-2 align-items-center">
<div class="col">
<!-- SONG NAME --> <!-- Please also change the tooltip for the name, so that when it gets cut off, people can still see the full name by hovering over or clicking on it -->
<a class="tooltipster" title="
Song name
"><p class="text-truncate" style="font-weight: bold; width: 170px">
Song name
</p></a>
<!-- SONG NAME end -->
</div>
<div class="col-auto ml-auto">
<div class="card border-0 p-2" style="border-radius: 40px; background: #3fb452">
<div class="row no-gutters align-items-center">
<!-- ARTIST NAME -->
<div class="col tooltipster" title="
Artist name
"><!-- Please also change the tooltip for the name, so that when it gets cut off, people can still see the full name by hovering over or clicking on it -->
<p class="text-truncate" style="width: 170px; font-size: 12px">
Artist name
</p>
</div>
<!-- ARTIST NAME end -->
<div class="col-auto align-items-center">
<i class="fas fa-play-circle" style="font-size: 20px"></i>
<span>
<!-- YOUTUBE VIDEO ID -->
<iframe class="flex-fill" style="position: absolute; top: -4px; right: -3px; width: 40px; height: 25px; opacity: 0.0001" frameborder="0" src="
https://www.youtube.com/embed/VIDEO_ID?ps=docs&controls=1
"></iframe>
<!-- YOUTUBE VIDEO ID end -->
</span>
</div>
</div>
</div>
</div>
</div>
<!--/// [1] ///-->
<!--/// IN-TOYHOUSE PLAYLIST ///-->
<!--//////////// PLAYLIST end ////////////-->
</div>
</div></div>
<!--////// VOICE CLAIM + THEME + PLAYLIST end //////-->
</div>
</div>
</div>
<!--====///// MUSIC WINDOW end //////====-->
<!--====///// CREDITS WINDOW //////====-->
<div class="collapse fade" id="CREDIT" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; z-index: 1100">
<div id="ACC-CREDIT" class="card bg-faded border-0 rounded-0 p-3" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.7)">
<div class="mx-auto sticky-top" style="min-width: 55%">
<div class="card align-items-center" style="margin-top: 120px; border-radius: 25px 25px 0 0; border-width: 1px 1px 0 1px; border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.8); z-index: 5">
<!-- Close button -->
<div style="position: absolute; top: 10px; right: 25px">
<a data-toggle="collapse" href="#CREDIT"><i class="fas fa-times" style="font-size: 25px; color: #ffffe9"></i></a>
</div>
<!-- Close button end -->
<div class="row no-gutters">
<!-- Buttons -->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 40px; height: 40px; cursor: pointer">
<i class="far fa-code" style="font-size: 20px; color: #ffffe9; opacity: 0.6; text-shadow: 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745"></i>
<div class="collapse fade show CODE" data-parent="#ACC-CREDIT" style="position:absolute; top:0; left:0; right:0; bottom:0;">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: rgba(0, 0, 0, 0)">
<i class="far fa-code" style="margin-top: 2px; font-size: 20px; color: #ffffe9; text-shadow: 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745"></i>
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none" data-toggle="collapse" data-target=".CODE"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 40px; height: 40px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96599998_5kOvqGuUpH9aIfH.png" width="25px" style="opacity: 0.6">
<div class="collapse fade IMAGE" data-parent="#ACC-CREDIT" style="position:absolute; top:0; left:0; right:0; bottom:0;">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: rgba(0, 0, 0, 0)">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96599998_5kOvqGuUpH9aIfH.png" width="25px" style="margin-top: 2px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none" data-toggle="collapse" data-target=".IMAGE"></a>
</div>
</li>
</ul>
</div>
<!-- Buttons end -->
</div>
</div>
<div class="card p-3 pb-4" style="height: 300px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.7)">
<!--/// Code credits ///-->
<div class="collapse fade show active CODE" data-parent="#ACC-CREDIT">
<div class="row no-gutters align-items-center mt-3">
<div class="col-auto"><p style="font-size: 15px; font-weight: bold">Code credits</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<!-- Text -->
<p class="mt-4">
<b>Code:</b> <a style="font-weight: bold; color: #7efdfe" href="https://toyhou.se/FlowerlyRat"><i class="fi-torso user-name-icon"></i>FlowerlyRat</a><br>
<b>Layout:</b> Based on the game Sky: Children of the Light's UI<br>
<b>Other codes:</b> <a style="font-weight: bold; color: #ff7e01" href="https://toyhou.se/FlowerlyRat/characters/folder:4673560">Folder</a>
</p>
<!-- Text end -->
</div>
<!--/// Code credits ///-->
<!--/// Image credits ///-->
<div class="collapse fade IMAGE" data-parent="#ACC-CREDIT">
<div class="row no-gutters align-items-center mt-3">
<div class="col-auto"><p style="font-size: 15px; font-weight: bold">Image credits</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<!-- Text -->
<p class="mt-4">
<b>Background image:</b> Sky: Children of the Light © thatgamecompany<br>
<b>Icons:</b> <a href="https://fontawesome.com/v6/search" style="font-weight: bold; color: #ff7e01">FontAwesome</a>, Sky: Children of the Light<br>
<b>Flags/ribbons:</b> taken from CoraMagics' <a href="https://toyhou.se/20187371." style="font-weight: bold; color: #ff7e01">Ribbon Masterlist</a>
</p>
<!-- Text end -->
</div>
<!--/// Image credits ///-->
<div class="row no-gutters" style="position: absolute; bottom: -3px; left: 27px; right: 27px; opacity: 0.3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
</div>
</div>
</div>
<!--====///// CREDITS WINDOW end //////====-->
</div>Copy
<!--
╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
△▽/╱╱╱╱╱╱╱╱╱╱╱╰━╯
Ultimate Sky: Children of the Light profile bundle [CSS emulator V1 - character profile: multitab version]: code by FlowerlyRat || Inspired from TheFaerieMerchant's CSS emulators || Based on the game Sky: Children of the Light's UI by ThatGameCompany
This code is paired with the "Constellation" code in this same ToyHouse code bundle profile, please refer to it to know how to set it up properly.
THE CONSTELLATION CODE IS STILL AN UNAVAILABLE WORK IN PROGRESS, THANK YOU FOR YOUR UNDERSTANDING!
REPLACE IT WITH A LINK TO THE CHARACTERS "LINKS" TAB INSTEAD FOR THE TIME BEING
> It is HIGHLY recommended to use circlejourney's ToyHouse live editor to see what you're doing!!!! -> https://th.circlejourney.net/
Any links added use the following formats [target="_blank" is optional]:
Blue variant [to link characters, groups, species, and entities]:
<a style="font-weight: bold; color: #7efdfe" href="LINK_HERE">text_here</a>
Orange variant [to link everything else]:
<a style="font-weight: bold; color: #ff7e01" href="LINK_HERE">text_here</a>
Any areas that need the character's ID have the "CHARA_ID_HERE" placeholder -> to replace everything at once, highlight "CHARA_ID_HERE", then do ctrl+F and replace it with your character's.
Pop-ups for the additional information, music and credits collapsibles are at the end of the code.
> I cannot guarantee compatibility with actual custom CSS codes.
Code is compatible with the "Sky: Children of the Light candle UI" add-on.
Instructions to add them is given in the profile itself -> https://toyhou.se/23648694.misc-sky-cotl-candle-ui/25906098.
Code is also compatible with the "Sky quests!" add-on.
To add it, please copy and paste the code between the "FUN LINKS" commentaries below, between the "MAIN CHARACTER CODE HERE" commentaries.
-> https://toyhou.se/32862504.snip-sky-quests/32862518.code
Multiple background images have been screenshoted from the game to give a wide variety of possibilities [ToyHouse gallery: https://toyhou.se/25042050./gallery || Google Drive: https://drive.google.com/drive/folders/12YBvvXe9MoIYj9oUo8MVpngCojj8vCv3?usp=sharing], however if none of them suit your taste or vision, please go on and take your own in-game.
!!! TO BE WARNED !!!
This code has a hidden section intended for mobile users, so be sure to also modify it with the sidebar!
-->
<div class="flex-row justify-content-end sp-top-inner" style="left: -40vw; z-index: 5">
<div style="width: 100vw">
<div class="ml-md-3">
<!--///BACKGROUND IMAGE///-->
<div class="card bg-dark rounded-0 border-0 col-lg-12" style="overflow: hidden; position: fixed; bottom: 0; top: 0; left: 0; background-image: url(
LINK_TO_BACKGROUND_IMAGE_HERE
); background-size: cover; background-position: center"></div>
<div class="row no-gutters">
<!-- Code container -->
<div class="col-12 ">
<div class="card bg-transparent border-0 rounded-0 mx-auto">
<div class="card bg-transparent rounded-0 border-0" style=" min-height: 100vh">
<div class="container p-3" style="max-width: 100%">
<div class="row no-gutters">
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
COMPUTER SIDEBAR
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-md-2 hidden-sm-down" style="margin-bottom: -75px; color: #ffffea">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
AVATAR [computer]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-auto" style="height: 150px; width: 150px">
<div class="card bg-dark border-0 p-0" style="position: absolute; height: 115px; width: 115px; border-radius: 50%; z-index: 1; background: url(
AVATAR_IMAGE_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"><!--PFP IMAGE LINK ABOVE--></div>
<!--///Outer frame///--><!--Check [https://toyhou.se/23579684.misc-sky-cotl-avatar-frame] for more borders and meaning explanation-->
<img class="d-block mx-auto my-auto" style="position: absolute; opacity: 1; z-index: 5" src=
"https://f2.toyhou.se/file/f2-toyhou-se/images/71211585_IQYjqdDDaiOOeid.png">
<!--///Inner spinning frame///--><!-- Feel free to delete -->
<div class="align-items-center justify-content-center" style="position: absolute; width: 123px; z-index: 5">
<i class="fa-spin" style="animation-duration: 26s; opacity: 1"><img class="d-block mx-auto my-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/images/71211558_s1BGtB1nlee2eVn.png"></i>
</div>
<!--///Inner spinning frame end///-->
</div>
<!--===////// AVATAR end //////===-->
<div class="card p-2" style="top: -77px; border-radius: 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER NAME [computer]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE."
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-sparkles fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// CHARACTER NAME [computer] end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
FOLDER LINK
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/FlowerlyRat/characters/folder:FOLDER_ID"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Folder name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-folder fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// FOLDER LINK end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BLURB [computer]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card" style="padding: 15px; font-size: 0.8em; color: #cdcfc3; border-radius: 23px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<p>
This is a blurb, feel free to delete it tho
</p>
</div>
<!--===////// BLURB [computer] end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SOCIAL LINKS [computer] - duplicate the "SOCIAL LINK" section to add a platform - can be used to add links to an Art Fight profile, playlist, etc
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<ul class="nav nav-button nav-justified justify-content-around mt-2 flex-wrap">
<!--=== SOCIAL LINK ===-->
<li>
<div class="gallery-thumb">
<div class="thumb-image justify-content-center align-items-center" style="width: 35px; height: 35px; font-weight: bold; border-radius: 10px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="SOCIAL_LINK_HERE" title="SOCIAL_NAME_HERE"
class="th tooltipster" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 10px; box-shadow: 0 0 8px rgba(255, 255, 233, 0.5), inset 0 0 8px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!--=== BUTTON ICON ===-->
<i class="fas fa-link
" style="font-size: 13px"></i>
</a>
</div>
</div>
</li>
<!--=== SOCIAL LINK end===-->
</ul>
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BONUS LINKS [computer] - duplicate the "ADDITIONAL SIDE LINK" section to add a link
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--===////// ADDITIONAL SIDE LINK //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="LINK_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Link name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-link fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// ADDITIONAL SIDE LINK end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SIDEBAR BUTTONS - tabs require their own links with their own ID
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--===////// TAB 1 //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="LINK_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Tab 1
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-bookmark fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// TAB 1 end //////===-->
<div class="my-1 mb-2 mx-2" style="border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<!--===////// TAB 2 //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="LINK_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Tab 2
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="far fa-bookmark fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// TAB 2 end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--===////// GALLERY //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./gallery"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Gallery
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-image fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// GALLERY end //////===-->
<!--===////// LIBRARY //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./literatures"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Library
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-book fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// LIBRARY end //////===-->
<!--===////// WORLDS //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./worlds"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Worlds
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-globe fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// WORLDS end //////===-->
<!--===////// LINKS //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./links"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Links
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-link fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// LINKS end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--===////// COMMENTS //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./comments"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Comments
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-comment fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// COMMENTS end //////===-->
<!--===////// FAVORITE //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./comments"
class="th" data-toggle="th-favorite" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="favorite toggle-favorite" style="position: absolute; top: 8px; right: 13px; z-index: 5">
<span style="position: absolute; left: -184px">Favorite</span>
<i class="fal fa-sparkle"></i>
</span>
<span class="unfavorite toggle-favorite" style="position: absolute; top: 8px; right: 13px; z-index: 5">
<span style="position: absolute; left: -184px">Unfavorite</span>
<i class="fas fa-sparkle"></i>
</span>
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9"></div>
<div class="col justify-content-end align-items-center">
<div class="card border-0" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57"></div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// FAVORITE end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--===////// OWNERSHIP //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./ownership"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Ownership
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-check-square fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// OWNERSHIP end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--===////// REPORT //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/~tickets/create/character/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Report
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-warning fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// REPORT end //////===-->
<!--===////// BLOCK //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./block"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Block
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-cancel fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// BLOCK end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<div class="accordion container p-0" id="accordion">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="#MANAGE"
class="th" data-toggle="collapse" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Manage character
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-caret-right fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div id="MANAGE" class="collapse" data-parent="#accordion">
<!--===AVATAR===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/avatar/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Avatar
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-image fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===AVATAR end===-->
<!--===EDIT PROFILE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/edit/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Edit profile
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-pencil fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===EDIT PROFILE end===-->
<!--===TABS===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/tabs/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Tabs
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-bookmark fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===TABS end===-->
<!--===HISTORY===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/history/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
History
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-history fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===HISTORY end===-->
<div class="my-3 ml-3" style="border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<!--===WARNINGS===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/warnings/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Warnings
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-warning fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===WARNINGS end===-->
<!--===ACCESS KEYS===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/keys/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Access keys
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-key fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===ACCESS KEYS end===-->
<!--===TRADE LISTING===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/trade-listing/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Trade listing
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-handshake fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===TRADE LISTING end===-->
<div class="my-3 ml-3" style="border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<!--===DELETE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/delete/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Delete
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-trash fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===DELETE end===-->
</div>
<!--=== CHARACTER end ===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
IMAGES
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="#MANAGE-IMG"
class="th" data-toggle="collapse" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Manage images
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-caret-right fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div id="MANAGE-IMG" class="collapse" data-parent="#accordion">
<!--===UPLOAD IMAGE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~images/upload/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Upload image
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-plus fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===UPLOAD IMAGE end===-->
<!--===MANAGE IMAGES===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~images/manage-character/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Manage images
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-image fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===MANAGE IMAGES end===-->
<!--===SORT IMAGES===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~images/sort/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Sort images
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-random fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===SORT IMAGES end===-->
</div>
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
LITERATURES
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="#MANAGE-LIT"
class="th" data-toggle="collapse" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Manage literatures
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-caret-right fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div id="MANAGE-LIT" class="collapse" data-parent="#accordion">
<!--===ADD LITERATURE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~literatures/create/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Upload literature
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-plus fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===ADD LITERATURE end===-->
<!--===SORT LITERATURE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~literatures/sort/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Sort literatures
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-random fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===SORT LITERATURE end===-->
</div>
<!--=== LITERATURES end ===-->
</div>
</div>
</div>
<!--===/////////////////////////////////// COMPUTER SIDEBAR end ///////////////////////////////////===-->
<!--===////// MAIN CODE //////===-->
<div class="col-md-10 mx-auto pl-md-3 h-100">
<!-- Utility buttons -->
<ul class="nav nav-button align-items-center justify-content-end mt-3 mr-2" style="margin-bottom: 22px">
<!--///Creation information button///-->
<li class="mx-4">
<a data-toggle="collapse" href="#CREA" style="box-shadow: none; color: #ffffea">
<i class="fa fa-info-circle mt-1" style="font-size: 30px; color: #fdf8da; text-shadow: 0 0 2px #713745, 0 0 2px #713745"></i>
</a>
</li>
<!--Credits button-->
<li>
<a data-toggle="collapse" href="#CREDIT">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96600008_K9c0uSM4k7pfpXi.png" width="35">
</a>
</li>
</ul>
<!-- Utility buttons -->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
UPPER CARD ON PHONE
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
AVATAR [phone]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-auto hidden-sm-up" style="margin-top: -70px; height: 150px; width: 150px">
<div class="card bg-dark border-0 p-0" style="position: absolute; height: 115px; width: 115px; border-radius: 50%; z-index: 1; background: url(
AVATAR_IMAGE_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"><!--PFP IMAGE LINK ABOVE--></div>
<!--///Outer frame///--><!--Check [https://toyhou.se/23579684.misc-sky-cotl-avatar-frame] for more borders and meaning explanation-->
<img class="d-block mx-auto my-auto" style="position: absolute; opacity: 1; z-index: 5" src=
"https://f2.toyhou.se/file/f2-toyhou-se/images/71211585_IQYjqdDDaiOOeid.png">
<!--///Inner spinning frame///--><!-- Feel free to delete -->
<div class="align-items-center justify-content-center" style="position: absolute; width: 123px; z-index: 5">
<i class="fa-spin" style="animation-duration: 26s; opacity: 1"><img class="d-block mx-auto my-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/images/71211558_s1BGtB1nlee2eVn.png"></i>
</div>
<!--///Inner spinning frame end///-->
</div>
<!--===////// AVATAR end //////===-->
<div class="card p-2 mx-auto hidden-sm-up mb-4" style="margin-top: -76px; width: 100%; color: #ffffea; border-radius: 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER NAME [phone]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE."
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-sparkles fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// CHARACTER NAME [phone] end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BLURB [phone]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card" style="padding: 15px; font-size: 0.8em; color: #cdcfc3; border-radius: 23px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<p>
This is a blurb, feel free to delete it tho
</p>
</div>
<!--===////// BLURB [phone] end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SOCIAL LINKS [computer] - duplicate the "SOCIAL LINK" section to add a platform - can be used to add links to an Art Fight profile, playlist, etc
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<ul class="nav nav-button nav-justified justify-content-around mt-2 flex-wrap">
<!--=== SOCIAL LINK ===-->
<li>
<div class="gallery-thumb">
<div class="thumb-image justify-content-center align-items-center" style="width: 35px; height: 35px; font-weight: bold; border-radius: 10px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="SOCIAL_LINK_HERE" title="SOCIAL_NAME_HERE"
class="th tooltipster" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 10px; box-shadow: 0 0 8px rgba(255, 255, 233, 0.5), inset 0 0 8px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!--=== BUTTON ICON ===-->
<i class="fas fa-link
" style="font-size: 13px"></i>
</a>
</div>
</div>
</li>
<!--=== SOCIAL LINK end===-->
</ul>
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BONUS LINKS [phone] - duplicate the "ADDITIONAL SIDE LINK" section to add a link
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--===////// ADDITIONAL SIDE LINK //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="LINK_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Link name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-link fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// ADDITIONAL SIDE LINK end //////===-->
</div>
<!--===/// UPPER CARD PHONE end ///===-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER CREATION INFO
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="collapse fade mt-1 mb-3" id="CREA" style="color: #ffffea">
<div class="col row no-gutters hidden-sm-up mt-n2 mb-3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<div class="row no-gutters">
<div class="col-md-9 card order-md-2 px-3" style="border-radius: 8px; border-width: 1px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<!--Close button-->
<div class="justify-content-end mt-3">
<a data-toggle="collapse" href="#CREA"><i class="fas fa-times" style="font-size: 25px; color: #ffffea"></i></a>
</div>
<!--Close button end-->
<div class="row">
<!--===/// CREATION INFO ///===-->
<div class="col-md-5 pr-3 mr-n2" style="height: 155px; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<!--===CREATED===-->
<div class="row mb-2">
<div class="col-4" style="font-weight: bold">
<p>Created</p>
</div>
<div class="col">
<!--Date-->
<p>
1 Jan 2024, 1:20:30 am
</p>
</div>
</div>
<!--===CREATED end===-->
<!--===CREATOR===-->
<div class="row mb-2">
<div class="col-4" style="font-weight: bold">
<p>Creator</p>
</div>
<div class="col">
<!--Username-->
<a style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/Username">
<i class="fi-star user-name-icon"></i>Username
</a>
</div>
</div>
<!--===CREATOR end===-->
<!--===DESIGNERS===-->
<div class="row mb-2">
<div class="col-4" style="font-weight: bold">
<p>Designers</p>
</div>
<div class="col">
<!--Username-->
<!--Username [external link]-->
<a style="font-weight: bold; color: #7efdfe" href=
"EXTERNAL_LINK_HERE">
Username<i class="fa-solid fa-up-right-from-square ml-1" style="font-size: 10px"></i>
</a>
</div>
</div>
<!--===DESIGNERS end===-->
<!--===OWNER===-->
<div class="row mb-2">
<div class="col-4" style="font-weight: bold">
<p>Owner</p>
</div>
<div class="col">
<!--Username-->
<a style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/Username">
<i class="fi-torso user-name-icon"></i>Username
</a>
</div>
</div>
<!--===OWNER end===-->
</div>
<!--===/// CREATION INFO end ///===-->
<!--===/// Divider ///===-->
<div class="col row no-gutters hidden-sm-up my-2 mb-3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<div class="col-auto hidden-sm-down mr-n4">
<div style="height: 41%; border-width: 0 0 0 1px; border-style: solid"></div>
<div class="border-0 rounded-0 my-1">
<p style="margin-left: -3.4px; font-size: 10px">◆</p>
</div>
<div style="height: 41%; border-width: 0 0 0 1px; border-style: solid"></div>
</div>
<!--===/// Divider end ///===-->
<!--===/// TAGS ///===-->
<div class="col-md card bg-transparent border-0 rounded-0">
<div class="pr-3 mr-n3" style="height: 155px; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<!--Tag 1-->
<div class="card border-0 px-1 mb-1" style="border-radius: 5px; background: #ffffea; display: inline-block">
<a style="font-weight: bold; color: #000" href=
"TAG_LINK_HERE">
tag 1
</a>
</div>
<!--Tag 1 end-->
<!--Tag 2-->
<div class="card border-0 px-1 mb-1" style="border-radius: 5px; background: #ffffea; display: inline-block">
<a style="font-weight: bold; color: #000" href=
"TAG_LINK_HERE">
tag 2
</a>
</div>
<!--Tag 2 end-->
<!--Tag 3-->
<div class="card border-0 px-1 mb-1" style="border-radius: 5px; background: #ffffea; display: inline-block">
<a style="font-weight: bold; color: #000" href=
"TAG_LINK_HERE">
tag 3
</a>
</div>
<!--Tag 3 end-->
</div>
</div>
<!--===/// TAGS end ///===-->
</div>
</div>
<div class="col-md card mr-md-2 mt-md-0 mt-2 order-md-1" style="height: 200px; border-radius: 8px; border-width: 1px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<div class="card bg-transparent border-0 rounded-0 my-auto p-3" style="height: 200px; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="row no-gutters text-center">
<!--===/// Creator ribbons ///===-->
<!-- ||[ 1 ]|| -->
<div class="col-4 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description"><!-- Don't make the tooltips too long, otherwise they won't display! -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 1 ]|| -->
<!--===/// Creator ribbons end ///===-->
</div>
</div>
</div>
</div>
<div class="col row no-gutters hidden-sm-up mt-3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
<!--===/// CHARACTER CREATION INFO end ///===-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
PASTE YOUR CHARACTER CODE HERE
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!-- [REMINDER]
> I cannot guarantee compatibility with actual custom CSS codes.
-->
<div class="card bg-transparent border-0 rounded-0" style=" color: #ffffe9">
<!--Change the image link for the main background right above this line-->
<div class="mt-4" style="margin-bottom: 20px">
<!--===/// WINGED LIGHT COUNT ///===-->
<img class="d-block mx-auto tooltipster" data-placement="bottom" title="
200
" src="https://f2.toyhou.se/file/f2-toyhou-se/images/72538958_Qzn1IfB8liC2Y5H.png" style="height: 50px">
<!--===/// WINGED LIGHT COUNT end ///===-->
</div>
<!--=======/////// FUN LINKS ///////========-->
<!--=======/////// FUN LINKS end ///////========-->
<!--=======/////// MAIN INFORMATION ///////========-->
<div class="row mt-4">
<!--/// Right column ///-->
<div class="col-md mb-2 col-12" style="width: 0%">
<div class="card bg-transparent rounded-0 border-0 mb-3 accordion" id="WINDOW" style="height: 472px">
<div class="collapse fade show active" id="COMMENTS" data-parent="#WINDOW">
<p class="text-center text-truncate" style="font-weight: bold; font-size: 30px; text-shadow: 0 0 5px #000, 0 0 3px #000">
Name
</p>
<div id="BASE" class="carousel slide align-items-end" data-ride="false" data-pause="true" style="max-height: 271px; min-height: 270px; overflow: hidden">
<div class="carousel-inner">
<!--===/// Basic page ///===-->
<div class="carousel-item active" style="transition: none">
<div class="card border-0" style="padding: 10px; max-height: 218px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<!-- Age -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Age</p></div>
<div class="col-auto ml-auto"><p>
##
</p></div>
</div>
<!-- Age end -->
<!-- Height -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Height</p></div>
<div class="col-auto ml-auto"><p><a style="font-weight: bold; color: #ff7e01" href="https://www.reddit.com/media?url=https%3A%2F%2Fi.redd.it%2Fyazzlze83qh41.jpg">
#
</a></p></div>
</div>
<!-- Height end -->
<!-- Gender -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Gender</p></div>
<div class="col-auto ml-auto"><p>
content
</p></div>
</div>
<!-- Gender end -->
<!-- Pronouns -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Pronouns</p></div>
<div class="col-auto ml-auto"><p>
pro/nouns
</p></div>
</div>
<!-- Pronouns end -->
<!-- Orientation -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Orientation</p></div>
<div class="col-auto ml-auto"><p>
<!--
Change the link and tooltip titles to the appropriate ones
Copy and paste the "<a>" tag to add another flag
-->
<a data-toggle="tooltip" title="LGBT+">
<img width="30"
src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/0b1cb6ed-b614-4d6f-a792-6e2d2db50e49/df12p8i-5148214b-27e1-4cea-b418-420e2c629e25.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzBiMWNiNmVkLWI2MTQtNGQ2Zi1hNzkyLTZlMmQyZGI1MGU0OVwvZGYxMnA4aS01MTQ4MjE0Yi0yN2UxLTRjZWEtYjQxOC00MjBlMmM2MjllMjUucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.bfUU644_Y-XtP6mk5Iw-rkWSCGz48RVRya12UOkjtMA"></a>
<a data-toggle="tooltip" title="Queer">
<img width="30"
src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/0b1cb6ed-b614-4d6f-a792-6e2d2db50e49/df12p7u-5aae0688-c8e6-408f-9360-bfe27b1b9397.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzBiMWNiNmVkLWI2MTQtNGQ2Zi1hNzkyLTZlMmQyZGI1MGU0OVwvZGYxMnA3dS01YWFlMDY4OC1jOGU2LTQwOGYtOTM2MC1iZmUyN2IxYjkzOTcucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.VfwaRcQsMLGFHptAVp77zWeA-p1LT_DE8YRuyXVWmuw"></a>
</p></div>
</div>
<!-- Orientation end -->
</div>
<p class="text-center mt-1 mb-n2" style="font-size: 12px; text-shadow: 0 0 5px #000, 0 0 3px #000">
Click on the arrows and speech bubble for more
</p>
<!--===/// Indicators [purely aesthetic] ///===--><!-- Dont forget to add more of them if you add slides -->
<p class="align-items-center justify-content-center mt-4 mb-1" style="font-size: 10px">
<!-- Active slide --><i class="fas fa-circle mx-2" style="text-shadow: 0 0 5px #000"></i>
<!-- Inactive slide --><i class="fas fa-circle mx-2" style="font-size: 7px; opacity: 0.6; text-shadow: 0 0 5px #000"></i>
<!-- Inactive slide --><i class="fas fa-circle mx-2" style="font-size: 7px; opacity: 0.6; text-shadow: 0 0 5px #000"></i>
</p>
<!--===/// Indicators [purely aesthetic] end ///===-->
</div>
<!--===/// Basic page end ///===-->
<!--===/// Quote page ///===-->
<div class="carousel-item" style="transition: none">
<div class="card bg-transparent border-0 rounded-0 align-items-center">
<div class="card border-0" style="padding: 10px; max-height: 232px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<p>"
This is a very cool and epic quote woa
"</p>
</div>
</div>
<!--===/// Indicators [purely aesthetic] ///===--><!-- Dont forget to add more of them if you add slides -->
<p class="align-items-center justify-content-center mt-4 mb-1" style="font-size: 10px">
<!-- Inactive slide --><i class="fas fa-circle mx-2" style="font-size: 7px; opacity: 0.6; text-shadow: 0 0 5px #000"></i>
<!-- Active slide --><i class="fas fa-circle mx-2" style="text-shadow: 0 0 5px #000"></i>
<!-- Inactive slide --><i class="fas fa-circle mx-2" style="font-size: 7px; opacity: 0.6; text-shadow: 0 0 5px #000"></i>
</p>
<!--===/// Indicators [purely aesthetic] end ///===-->
</div>
<!--===/// Quote page end ///===-->
<!--===/// Additional slide ///===--><!-- Copy this entire section to add a slide -->
<div class="carousel-item" style="transition: none">
<div class="card bg-transparent border-0 rounded-0 align-items-center">
<div class="card border-0" style="padding: 10px; max-height: 232px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<p>
Add whatever you want here, can be notes, inside jokes, author's notes, etc. This box has a maximum height and does scroll :]
</p>
</div>
</div>
<!--===/// Indicators [purely aesthetic]///===--><!-- Dont forget to add more of them if you add slides -->
<p class="align-items-center justify-content-center mt-4 mb-1" style="font-size: 10px">
<!--Inactive slide--><i class="fas fa-circle mx-2" style="font-size: 7px; opacity: 0.6; text-shadow: 0 0 5px #000"></i>
<!--Inactive slide--><i class="fas fa-circle mx-2" style="font-size: 7px; opacity: 0.6; text-shadow: 0 0 5px #000"></i>
<!--Active slide--><i class="fas fa-circle mx-2" style="text-shadow: 0 0 5px #000"></i>
</p>
<!--===/// Indicators [purely aesthetic] end ///===-->
</div>
<!--===/// Additional slide end ///===-->
</div>
</div>
<!--===/// Controls ///===-->
<div class="row no-gutters mt-2">
<div class="col">
<div class="card" style="padding: 10px; border-radius: 30px 0 0 30px; border-width: 1px 0 1px 1px; border-color: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.5)">
<div class="row no-gutters">
<div class="col-4">
<p class="justify-content-between pl-2 pr-3">
<a href="#BASE" data-slide="prev"><img class="fa-flip-horizontal" src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574399_ISOXkfgYQFhmHqy.png" width="25"></a>
<a href="#BASE" data-slide="next"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574399_ISOXkfgYQFhmHqy.png" width="25"></a>
</p>
</div>
<div class="my-n1" style="border-width: 0 1px 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<div class="col">
<p class="justify-content-between px-3" style="font-size: 25px">
<a class="mb-n2" style="margin-top: -10px" href="#" data-toggle="th-favorite">
<span class="favorite toggle-favorite">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574328_c1SwrAQE2AwiKXr.png" width="25">
</span>
<span class="unfavorite toggle-favorite">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574352_AVC7CTgM30PYCuZ.png" width="25">
</span>
</a>
<!-- Comment number -->
<a data-toggle="collapse" href="#BASICS" style="font-size: 12px; color: #ffffe9; text-decoration: none"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574424_pTAU3yttAd8jqPl.png" width="25">
2
</a>
<!-- Comment number -->
</p>
</div>
<div class="my-n1" style="border-width: 0 1px 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<div class="col-auto">
<p class="justify-content-between pl-4 pr-3" style="font-size: 25px">
<i class="fas fa-ellipsis" style="text-shadow: 0 0 3px #684647, 0 0 3px #684647"></i>
</p>
</div>
</div>
</div>
</div>
<div class="card rounded-0" style="padding: 0.5px; border-width: 1px 0; border-color: rgba(0, 0, 0, 0.8); background-color: rgba(255, 255, 239, 0.5)"></div>
<div class="col-auto mx-auto">
<div class="card h-100 justify-content-center" style="padding-left: 13px; padding-right: 13px; font-size: 15px; border-width: 1px 1px 1px 0; border-radius: 0 30px 30px 0; border-color: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.7)">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</div>
<!--===/// Controls end ///===-->
<!-- Additional buttons -->
<div class="card border-0 rounded-0 bg-transparent mt-4">
<ul class="nav nav-button nav-justified justify-content-around">
<!-- Additional info -->
<li class="gallery-thumb mx-1 fa-beat" style="animation-duration: 2.5s; z-index: 5">
<div class="thumb-image justify-content-center" style="width: 65px; height: 65px; border-radius: 50%; background: rgba(0, 0, 0, 0.6)">
<!--== Link ==-->
<a href="#MORE" data-toggle="collapse" style="color: #ffffea; box-shadow: none; text-decoration: none" class="th m-auto">
<span class="card bg-transparent thumb-sensitive" style="position: absolute; top: 2.5px; left: 2.5px; height: 60px; width: 60px; border: 2px solid #ffffe9; border-radius: 50%; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent m-auto" style="width: 60px; height: 60px; border-width: 2px; border-radius: 50%; border-color: rgba(255, 255, 233, 0.4)">
<!--=== BUTTON ICON ===-->
<img class="d-block m-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/images/96614223_hbjPcwNrpN5hl0B.png" width="45">
</div>
</a>
</div>
</li>
<!-- Additional info end -->
<!-- Music -->
<li class="gallery-thumb mx-1 fa-beat" style="animation-duration: 2.5s; animation-delay: 0.5s; z-index: 5">
<div class="thumb-image justify-content-center" style="width: 65px; height: 65px; border-radius: 50%; background: rgba(0, 0, 0, 0.6)">
<!--== Link ==-->
<a href="#MUSIC" data-toggle="collapse" style="color: #ffffea; box-shadow: none; text-decoration: none" class="th m-auto">
<span class="card bg-transparent thumb-sensitive" style="position: absolute; top: 2.5px; left: 2.5px; height: 60px; width: 60px; border: 2px solid #ffffe9; border-radius: 50%; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent m-auto" style="width: 60px; height: 60px; border-width: 2px; border-radius: 50%; border-color: rgba(255, 255, 233, 0.4)">
<!--=== BUTTON ICON ===-->
<img class="d-block mx-auto mb-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/96613490_lnoBfVQLEGFLaSz.png" width="45">
</div>
</a>
</div>
</li>
<!-- Music end -->
</ul>
</div>
<!-- Additional buttons end -->
</div>
<!--===/// Comments and opinions end ///===-->
<div class="collapse fade" id="BASICS" data-parent="#WINDOW">
<div class="card rounded-0 pt-3 pb-2 pr-4 align-items-end" style="border-width: 0 0 1px 0; background: rgba(0, 0, 0, 0.7)">
<!-- Close button -->
<a data-toggle="collapse" href="#COMMENTS" style="box-shadow: none"><i class="fas fa-times" style="font-size: 25px; color: #ffffe9"></i></a>
<!-- Close button end -->
</div>
<div class="card border-0 rounded-0" style="height: 417px; color: #ffffe9; background: rgba(0, 0, 0, 0.6); scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 px-3 pb-4">
<!--/// Comment [1] ///--><!-- Copy and past this entire section to add a comment -->
<div class="card p-3 mt-3" style="border-width: 1px; border-radius: 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<!-- Name and text -->
<p><span style="color: #cdcfc3; font-size: 12px">
Commenter name</span><br>
Little section to add comments or opinions about the character from other people!
</p>
<!-- Name and text -->
<!-- Likes number -->
<div class="mt-2 mb-n2 row no-gutters align-items-center">
<img class="col-auto" style="height: 15px; width: 15px" src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574352_AVC7CTgM30PYCuZ.png">
<p class="col-auto ml-1">
0
</p>
</div>
<!-- Likes number end -->
</div>
<!--/// Comment [1] end ///-->
<!--/// Comment [2] ///--><!-- Copy and past this entire section to add a comment -->
<div class="card p-3 mt-3" style="border-width: 1px; border-radius: 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<!-- Name and text -->
<p><span style="color: #cdcfc3; font-size: 12px">
Commenter name</span><br>
It can be yours or your friends'! Just have fun lol
</p>
<!-- Name and text -->
<!-- Likes number -->
<div class="mt-2 mb-n2 row no-gutters align-items-center">
<img class="col-auto" style="height: 15px; width: 15px" src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574352_AVC7CTgM30PYCuZ.png">
<p class="col-auto ml-1">
0
</p>
</div>
<!-- Likes number end -->
</div>
<!--/// Comment [2] end ///-->
</div>
</div>
</div>
<!--===/// Comments and opinions end ///===-->
</div>
</div>
<!--/// Right column sticky end ///-->
<!--/// Left column ///-->
<div class="col-md-7 mt-md-0 mt-n3 mb-md-0 mb-3">
<div class="card bg-transparent rounded-0 border-0">
<div id="MENU" class="carousel slide carousel-fade" data-ride="false" data-pause="true">
<div class="carousel-inner">
<!--===/// Main page ///===-->
<div class="carousel-item active">
<div class="card" style="padding: 23.5px; border-radius: 25px 25px 0 0; border-color: rgba(91, 92, 87, 0.4); background: rgba(0, 0, 0, 0.6)"></div>
<div class="card border-0" style="height: 420px; font-size: 20px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; background: rgba(0, 0, 0, 0.5); overflow: hidden">
<div class="p-3 my-auto" style="scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow-y: auto">
<!--/// Description button ///-->
<div class="gallery-thumb" style="padding: 3px; border-radius: 42px; background: rgba(0, 0, 0, 0.7)">
<div class="thumb-image m-0">
<a href="#MENU" data-slide-to="1" class="th" style="color: #ffffe9; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 39px; box-shadow: 0 0 20px rgba(255, 255, 233, 0.5), inset 0 0 25px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent" style="padding: 15px; width: 100%; border-width: 2px; border-radius: 39px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">Character description</p>
<!-- Line -->
<p class="text-left text-truncate" style="font-size: 15px; color: #a4a49b; display: block">
1 line long note
</p>
<!-- Line end -->
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 57px; height: 57px; border-radius: 19px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-book fa-fw" style="font-size: 35px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--/// Description button end ///-->
<!--/// Interests button ///-->
<div class="gallery-thumb" style="padding: 3px; border-radius: 42px; background: rgba(0, 0, 0, 0.7)">
<div class="thumb-image m-0">
<a href="#MENU" data-slide-to="2" class="th" style="color: #ffffe9; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 39px; box-shadow: 0 0 20px rgba(255, 255, 233, 0.5), inset 0 0 25px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent" style="padding: 15px; width: 100%; border-width: 2px; border-radius: 39px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">Interests</p>
<!-- Line -->
<p class="text-left text-truncate" style="font-size: 15px; color:#a4a49b; display: block">
1 line long note
</p>
<!-- Line end -->
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 57px; height: 57px; border-radius: 19px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-heart fa-fw" style="font-size: 35px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--/// Interests button end ///-->
<!--/// Backstory button ///-->
<div class="gallery-thumb" style="padding: 3px; border-radius: 42px; background: rgba(0, 0, 0, 0.7)">
<div class="thumb-image m-0">
<a href="#MENU" data-slide-to="3" class="th" style="color: #ffffe9; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 39px; box-shadow: 0 0 20px rgba(255, 255, 233, 0.5), inset 0 0 25px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent" style="padding: 15px; width: 100%; border-width: 2px; border-radius: 39px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">Backstory</p>
<!-- Line -->
<p class="text-left text-truncate" style="font-size: 15px; color:#a4a49b; display: block">
1 line long note
</p>
<!-- Line end -->
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 57px; height: 57px; border-radius: 19px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fad fa-bookmark fa-swap-opacity fa-fw" style="font-size: 35px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--/// Backstory button end ///-->
</div>
</div>
</div>
<!--===/// Main page end ///===-->
<!--===/// Description text ///===-->
<div class="carousel-item">
<!-- Upper card button -->
<div class="card p-3" style="border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<a data-slide-to="0" href="#MENU" style="height: 15px; width: 15px"><i class="fas fa-chevron-left" style="font-size: 20px; color: #ffffe9"></i></a>
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.1"></div>
<!-- Upper card button end -->
<!-- Content -->
<div class="card" style="height: 420px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 420px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto"><div class="card bg-transparent border-0 rounded-0 text-justify px-4 pb-4">
<!-- Header -->
<div class="row no-gutters pt-4" style="color: #ffffe9">
<div class="col-auto justify-content-center align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 57px; height: 57px; border-radius: 19px; background-color: #5b5c57">
<i class="fas fa-book" style="font-size: 35px"></i>
</div>
</div>
<div class="col-9 my-auto ml-2">
<h1 class="text-truncate">Character description</h1>
</div>
</div>
<!-- Header end -->
<div class="my-4" style="width: 70px; border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<!-- Line -->
<p class="align-items-end justify-content-start mb-1" style="font-weight: bold; color: #ffffe9;">
1 line long note
</p>
<!-- Line end -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Subheader
</span><br><!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
This is where you write the very juicy juicy juicy information about your silly little character! Whether it be describing their personality or just talk about their life, and what they do, honestly you can just go wild with this!!! Maybe you want to talk about how people perceive them? Perhaps even how their thought process functions? You can write as much [or as little] as you want!!! This box scrolls anyway so you'll never run out of space!!!
</p>
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Subheader
</span><br><!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
This is another subheader, in case you want to split the description into multiple, defined, parts. Like maybe have a description for the character through time? Starting from when they were little to now! Or even in the <em>~future~</em>,,,
</p>
</div>
</div>
</div>
<!-- Content -->
</div>
<!--===/// Description text end ///===-->
<!--===/// Interests text ///===-->
<div class="carousel-item">
<!-- Upper card button -->
<div class="card p-3" style="border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<a data-slide-to="0" href="#MENU" style="height: 15px; width: 15px"><i class="fas fa-chevron-left" style="font-size: 20px; color: #ffffe9"></i></a>
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.1"></div>
<!-- Upper card button end -->
<!-- Content -->
<div class="card" style="height: 420px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 420px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto"><div class="card bg-transparent border-0 rounded-0 text-justify px-4 pb-4">
<!-- Header -->
<div class="row no-gutters pt-4" style="color: #ffffe9">
<div class="col-auto justify-content-center align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 57px; height: 57px; border-radius: 19px; background-color: #5b5c57">
<i class="fas fa-heart" style="font-size: 35px"></i>
</div>
</div>
<div class="col-9 my-auto ml-2">
<h1 class="text-truncate">Interests</h1>
</div>
</div>
<!-- Header end -->
<div class="my-4" style="width: 70px; border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<!-- Line -->
<p class="align-items-end justify-content-start mb-1" style="font-weight: bold; color: #ffffe9;">
1 line long note
</p>
<!-- Line end -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Subheader
</span><br><!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Write about your character's silly interest, whether it's the usual ones like having fun dodging krills, or the bat shxt insane stuff like having an unhealthy obsession with gold, write at your heart's content! Let's here about this silly guy's hobbies, what do they like doing on a daily basis? Are they good at it? Are they ashamed of others learning about it? Or maybe it is such a defining trait of their personality that they would literally shut down if they ever stopped practicing it? Go wild man!!!! Infodump!!!
</p>
</div>
</div>
</div>
<!-- Content -->
</div>
<!--===/// Interests text end ///===-->
<!--===/// Backstory text ///===-->
<div class="carousel-item">
<!-- Upper card button -->
<div class="card p-3" style="border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<a data-slide-to="0" href="#MENU" style="height: 15px; width: 15px"><i class="fas fa-chevron-left" style="font-size: 20px; color: #ffffe9"></i></a>
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.1"></div>
<!-- Upper card button end -->
<!-- Content -->
<div class="card" style="height: 420px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 330px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto"><div class="card bg-transparent border-0 rounded-0 text-justify px-4 pb-4">
<!-- Header -->
<div class="row no-gutters pt-4" style="color: #ffffe9">
<div class="col-auto justify-content-center align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 57px; height: 57px; border-radius: 19px; background-color: #5b5c57">
<i class="fad fa-bookmark fa-swap-opacity" style="font-size: 35px"></i>
</div>
</div>
<div class="col-9 my-auto ml-2">
<h1 class="text-truncate">Backstory</h1>
</div>
</div>
<!-- Header end -->
<div class="my-4" style="width: 70px; border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<!-- Line -->
<p class="align-items-end justify-content-start mb-1" style="font-weight: bold; color: #ffffe9;">
1 line long note
</p>
<!-- Line end -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Subheader
</span><br><!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Write the backstory of your silly critter!!! I do recommend keeping it rather short as to not overwhelm others with text! If there is a need to have a longer backstory, I recommend using the button at the very end of this scrollbox to link a litterature or separate tab with it, so people get to choose whether or not they want to read the rest!
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>
<!-- Read more button -->
<div class="mx-4">
<div class="mb-3" style="border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<div class="justify-content-center">
<div class="gallery-thumb m-0">
<div class="thumb-image justify-content-center tooltipster" title="Read more" style="width: 57px; height: 57px; border-radius: 16px; background: rgba(0, 0, 0, 0.5)">
<!--
To "disable" the button, delete the "href" below and add "cursor: not-allowed; opacity: 0.5" in the "style"
Don't forget to add back the "href" and delete the "cursor: not-allowed; opacity: 0.5" once you want to link something to this button!
-->
<!--== Link ==-->
<a href="READ_MORE_LINK_HERE"
style="color: #ffffea; box-shadow: none; text-decoration: none" class="th m-auto">
<span class="card bg-transparent thumb-sensitive" style="position: absolute; top: 2.5px; left: 2.4px; height: 52px; width: 52px; border: 2px solid #ffffe9; border-radius: 14px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent m-auto" style="width: 52px; height: 52px; border-width: 2px; border-radius: 14px; border-color: rgba(91, 92, 87, 0.7)">
<!--=== BUTTON ICON ===-->
<i class="fas fa-book m-auto" style="font-size: 35px; color: #ffffe9"></i>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- Read more button end -->
</div>
<!-- Content -->
</div>
<!--===/// Backstory text end ///===-->
</div>
</div>
</div>
</div>
<!--/// Left column end ///-->
</div>
<!--=======/////// MAIN INFORMATION end ///////========-->
<!--=======/////// RELATIONSHIP DIVIDER ///////========-->
<div class="row no-gutters align-items-center my-3">
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, rgba(0, 0, 0, 0), #ffffe9, #ffffe9)"></div>
<div class="gallery-thumb mx-4 fa-beat" style="animation-duration: 2.5s; animation-delay: 1s; z-index: 5">
<div class="thumb-image justify-content-center tooltipster" title="Friendship constellation" style="width: 65px; height: 65px; border-radius: 50%; background: rgba(0, 0, 0, 0.6)">
<!--== Link ==-->
<a href="CONSTELLATION_TAB_OR_LINKS_SECTION_LINK_HERE"
style="color: #ffffea; box-shadow: none; text-decoration: none" class="th m-auto">
<span class="card bg-transparent thumb-sensitive" style="position: absolute; top: 2.5px; left: 2.5px; height: 60px; width: 60px; border: 2px solid #ffffe9; border-radius: 50%; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent m-auto" style="width: 60px; height: 60px; border-width: 2px; border-radius: 50%; border-color: rgba(255, 255, 233, 0.4)">
<!--=== BUTTON ICON ===-->
<img class="d-block m-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/72534752_TMp.png?1698146702" width="40">
</div>
</a>
</div>
</div>
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, #ffffe9, #ffffe9, rgba(0, 0, 0, 0))"></div>
</div>
<!--=======/////// RELATIONSHIP DIVIDER end ///////========-->
<!--=======/////// DESIGN NOTES ///////========-->
<div class="row no-gutters">
<!--/// Full body image ///--><!-- You may play with the max and min height if your image doesn't look correctly proportionned -->
<div class="col-lg-5 my-auto">
<img class="d-block mb-md-0 mb-3 mx-auto" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/69495205_Ir72I07ys8SlDvP.png
" style="max-height: 470px; min-height: 350px; object-fit: cover; object-position: center; "><!--
If the full body gets muddied with the background, add the following snippet to the style to add a white border around it:
filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-0.5px 0px 0 #fff) drop-shadow(-0px -0px 0 #fff) drop-shadow(-0px -0.5px 0 #fff)
-->
</div>
<!--/// Full body image end ///-->
<!--/// CLOSET ///-->
<div class="col">
<div class="card bg-transparent border-0 rounded-0" style="height: 507px; margin-left: -15px; margin-right: -15px">
<div id="OUTFIT-A" class="carousel slide carousel-fade" data-ride="false" data-pause="true">
<div class="carousel-inner">
<!--===/// MAIN PAGE ///===-->
<div class="carousel-item active" style="margin-right: 16px">
<div class="card p-3 mx-3 my-4 text-center" style="border-radius: 10px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<h1 class="mt-1">Outfit shrine</h1>
<p style="font-size: 15px; opacity: 0.7">Design notes</p>
</div>
<div class="row no-gutters mt-4 mx-3" style="height: 366px">
<!-- Outfits button -->
<div class="col justify-content-center">
<div class="gallery-thumb my-2">
<div class="thumb-image p-2 justify-content-center text-center" style="width: 86px; border-radius: 16px; background: rgba(0, 0, 0, 0.7)">
<a href="#OUTFIT-A" data-slide-to="1" class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="position: absolute; top: 2px; left: 2.5px; height: 150px; width: 81px; border: 2px solid #ffffe9; border-radius: 14px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 15px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div>
<p class="mb-2" style="font-size: 18px; color: #ffffe9">Outfit</p>
<img class="d-block mb-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/80032569_EsOacrJKz6JEbIG.png">
</div>
</a>
</div>
</div>
</div>
<!-- Outfits button end -->
<!-- Face button -->
<div class="col justify-content-center">
<div class="gallery-thumb my-2">
<div class="thumb-image p-2 justify-content-center text-center" style="width: 86px; border-radius: 16px; background: rgba(0, 0, 0, 0.7)">
<a href="#OUTFIT-A" data-slide-to="2" class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="position: absolute; top: 2px; left: 2.5px; height: 150px; width: 81px; border: 2px solid #ffffe9; border-radius: 14px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 15px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div>
<p class="mb-2" style="font-size: 18px; color: #ffffe9">Face</p>
<img class="d-block mb-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/80032560_ZrwKaLpidmPCrpT.png">
</div>
</a>
</div>
</div>
</div>
<!-- Face button end -->
<!-- Head button -->
<div class="col justify-content-center">
<div class="gallery-thumb my-2">
<div class="thumb-image p-2 justify-content-center text-center" style="width: 86px; border-radius: 16px; background: rgba(0, 0, 0, 0.7)">
<a href="#OUTFIT-A" data-slide-to="3" class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="position: absolute; top: 2px; left: 2.5px; height: 150px; width: 81px; border: 2px solid #ffffe9; border-radius: 14px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 15px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div>
<p class="mb-2" style="font-size: 18px; color: #ffffe9">Head</p>
<img class="d-block mb-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/80032467_KIUqIW9SO3AezEa.png">
</div>
</a>
</div>
</div>
</div>
<!-- Head button end -->
<!-- Capes button -->
<div class="col justify-content-center">
<div class="gallery-thumb my-2">
<div class="thumb-image p-2 justify-content-center text-center" style="width: 86px; border-radius: 16px; background: rgba(0, 0, 0, 0.7)">
<a href="#OUTFIT-A" data-slide-to="4" class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="position: absolute; top: 2px; left: 2.5px; height: 150px; width: 81px; border: 2px solid #ffffe9; border-radius: 14px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 15px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div>
<p class="mb-2" style="font-size: 18px; color: #ffffe9">Cape</p>
<img class="d-block mb-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/80032461_JY0FyFpFdDy1bRU.png">
</div>
</a>
</div>
</div>
</div>
<!-- Capes button end -->
<!-- Props button -->
<div class="col justify-content-center">
<div class="gallery-thumb my-2">
<div class="thumb-image p-2 justify-content-center text-center" style="width: 86px; border-radius: 16px; background: rgba(0, 0, 0, 0.7)">
<a href="#OUTFIT-A" data-slide-to="5" class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="position: absolute; top: 2px; left: 2.5px; height: 150px; width: 81px; border: 2px solid #ffffe9; border-radius: 14px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 15px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div>
<p class="mb-2" style="font-size: 18px; color: #ffffe9">Prop</p>
<img class="d-block mb-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/80032444_O4QKGFCXgNXUJJ6.png">
</div>
</a>
</div>
</div>
</div>
<!-- Props button end -->
</div>
</div>
<!--===/// MAIN PAGE end///===-->
<!--===/// OUTFITS PAGE ///===-->
<div class="carousel-item">
<div id="ACC-OUTFIT">
<div id="ACC-OUTFIT-2" class="card border-0 rounded-0 align-items-center" style="background: rgba(0, 0, 0, 0.7)">
<div class="row no-gutters">
<!-- Close button -->
<div style="position: absolute; top: 17px; right: 20px">
<a data-slide-to="0" href="#OUTFIT-A"><i class="fas fa-times" style="font-size: 25px; color: #ffffe9"></i></a>
</div>
<!-- Close button -->
<!-- Buttons -->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603077_thtEYQo0GPQ2R1Y.png" style="height: 40px;opacity: 0.6">
<div class="collapse fade show OUTFIT" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-OUTFIT-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603077_thtEYQo0GPQ2R1Y.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".OUTFIT"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358456_6g3cv2EpYvBIwJj.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade SHOES" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-OUTFIT-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358456_6g3cv2EpYvBIwJj.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".SHOES"></a>
</div>
</li>
</ul>
</div>
<!-- Buttons end -->
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.2"></div>
</div>
<div class="card border-0 rounded-0 pl-3" style="height: 450px; background: rgba(0, 0, 0, 0.6); overflow: hidden">
<!--/// PANTS TAB ///-->
<div class="collapse fade show active OUTFIT" data-parent="#ACC-OUTFIT">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Top -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Top
</span><br>
<!-- Image -->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Write a small description about the outfit your character wears! Notably the top portion! Maybe they have addtional details that don't exist in-game, or maybe you just want to describe it to be visible by screen readers or help people better understand what it looks like! You can also add an image to it if you have drawn it, or taken a screenshott of it!
</p>
<!-- Top end -->
<!-- Bottom -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Bottom
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
This part is for the bottom of the outfit, such as pants, skirt, shorts, etc! You can also add a picture to the side of the text! The text warps around it anyways.<br>
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>
<!-- Bottom end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!--Add "<br>" at the end to go back to the line, add a new p tag to jump a line-->
If the outfit has additional details that are easily forgotten by others or aren't part of the in-game model, write them here! You can basically put an image next to anything on this entire outfit shrine if you copy paste the line of code related to it lol. You can also add the body type here!<br>
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>
<!-- Details end -->
</div>
</div>
</div>
<!--/// PANTS TAB ///-->
<!--/// SHOES TABS ///-->
<div class="collapse fade SHOES" data-parent="#ACC-OUTFIT">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Shoes -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Shoes
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Pretty self explanatory, it's for the shoes!<br>
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>
<!-- Shoes end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Just in case you need to add details here!<br>
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>
<!-- Details end -->
</div>
</div>
</div>
<!--/// SHOES TAB ///-->
</div>
</div>
</div>
<!--===/// OUTFITS PAGE end ///===-->
<!--===/// FACE PAGE ///===-->
<div class="carousel-item">
<div id="ACC-FACE">
<div id="ACC-FACE-2" class="card border-0 rounded-0 align-items-center" style="background: rgba(0, 0, 0, 0.7)">
<div class="row no-gutters">
<!-- Close button -->
<div style="position: absolute; top: 17px; right: 20px">
<a data-slide-to="0" href="#OUTFIT-A"><i class="fas fa-times" style="font-size: 25px; color: #ffffe9"></i></a>
</div>
<!-- Close button -->
<!-- Buttons -->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358447_AvXVBRPZEBqf2TC.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade show MASK" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-FACE-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358447_AvXVBRPZEBqf2TC.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".MASK"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72359091_6loKsROxA4qtouq.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade ACCS-FACE" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-FACE-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72359091_6loKsROxA4qtouq.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".ACCS-FACE"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603441_NoEUznqETpxByiG.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade NECK" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-FACE-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603441_NoEUznqETpxByiG.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".NECK"></a>
</div>
</li>
</ul>
</div>
<!-- Buttons end -->
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.2"></div>
</div>
<div class="card border-0 rounded-0 pl-3" style="height: 450px; background: rgba(0, 0, 0, 0.6)">
<!--/// MASK AND FACE TAB ///-->
<div class="collapse fade show active MASK" data-parent="#ACC-FACE">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Structure -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Face structure
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Text area to write what facial feature and structure your character has!! Such as face, eye, and nose shape.<br>
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>
<!-- Structure end -->
<!-- Mask -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Mask
</span><br>
<!-- Image -->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Also a self explanatory section, just write anything about the mask they wear, or the lack thereof! Face paint also fits this category.<br>
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>
<!-- Mask end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
If your character has some specific features, such as tattoos, moles, crooked teeth, etc etc!<br>
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>
<!-- Details end -->
</div>
</div>
</div>
<!--/// MASK AND FACE TAB ///-->
<!--/// FACE ACCESSORIES TAB ///-->
<div class="collapse fade ACCS-FACE" data-parent="#ACC-FACE">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Accessories -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Accessories
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Face accessories, such as sunglasses, or any of the cosmetics in this tab in-game, fit here!<br>
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>
<!-- Accessories end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
More details!!!<br>
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>
<!-- Details end -->
</div>
</div>
</div>
<!--/// FACE ACCESSORIES TAB ///-->
<!--/// NECK ACCESSORIES TAB ///-->
<div class="collapse fade NECK" data-parent="#ACC-FACE">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Accessories neck -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Accessories
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Neck accessories!!!! For when they have something around their neck.<br>
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>
<!-- Accessories neck end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Oh yeah here's the details section!!!<br>
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>
<!-- Details end -->
</div>
</div>
</div>
<!--/// Neck accessories tab end ///-->
</div>
</div>
</div>
<!--===/// FACE PAGE end///===-->
<!--===/// HEAD PAGE ///===-->
<div class="carousel-item">
<div id="ACC-HEAD">
<div id="ACC-HEAD-2" class="card border-0 rounded-0 align-items-center" style="background: rgba(0, 0, 0, 0.7)">
<div class="row no-gutters">
<!-- Close button -->
<div style="position: absolute; top: 17px; right: 20px">
<a data-slide-to="0" href="#OUTFIT-A"><i class="fas fa-times" style="font-size: 25px; color: #ffffe9"></i></a>
</div>
<!-- Close button -->
<!-- Buttons -->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358424_KTeHcdt16OquTVN.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade show HAIR" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-HEAD-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358424_KTeHcdt16OquTVN.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".HAIR"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603451_tXV4olsXIf3MP1A.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade ACCS-HEAD" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-HEAD-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603451_tXV4olsXIf3MP1A.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".ACCS-HEAD"></a>
</div>
</li>
</ul>
</div>
<!-- Buttons end -->
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.2"></div>
</div>
<div class="card border-0 rounded-0 pl-3" style="height: 450px; background: rgba(0, 0, 0, 0.6)">
<!--/// HAIR TAB ///-->
<div class="collapse fade show HAIR" data-parent="#ACC-HEAD">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Hairstyle -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Hairstyle
</span><br>
<!-- Image -->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Ok at this point you must have understood how these tab work!<br>
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>
<!-- Hairstyle end -->
<!-- Texture + details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Texture and details
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
This is for the hair texture and other details!!!<br>
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>
<!-- Texture + details end -->
</div>
</div>
</div>
<!--/// HAIR TAB ///-->
<!--/// HEAD ACCESSORIES TAB ///-->
<div class="collapse fade ACCS-HEAD" data-parent="#ACC-HEAD">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Hat -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Hat
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Hat end -->
<!-- Accessories hair -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Accessories
</span><br>
<!-- Image -->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Accessories hair end -->
</div>
</div>
</div>
<!--/// HEAD ACCESSORIES TAB end ///-->
</div>
</div>
</div>
<!--===/// HEAD PAGE end ///===-->
<!--===/// CAPE PAGE ///===-->
<div class="carousel-item">
<div class="card border-0 rounded-0 align-items-center" style="height: 57px; background: rgba(0, 0, 0, 0.7)">
<!-- Close button -->
<div style="position: absolute; top: 17px; right: 20px">
<a data-slide-to="0" href="#OUTFIT-A"><i class="fas fa-times" style="font-size: 25px; color: #ffffe9"></i></a>
</div>
<!-- Close button -->
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.2"></div>
<div class="card border-0 rounded-0" style="height: 450px; color: #cdcfc3; background: rgba(0, 0, 0, 0.6); scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-4 pb-4">
<!-- Cape -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Cape
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Cape end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Details end -->
</div>
</div>
<!--/// Details tab ///-->
</div>
<!--===/// CAPE PAGE end ///===-->
<!--===/// PROPS PAGE ///===-->
<div class="carousel-item">
<div id="ACC-PROP">
<div id="ACC-PROP-2" class="card border-0 rounded-0 align-items-center" style="background: rgba(0, 0, 0, 0.7)">
<div class="row no-gutters">
<!-- Close button -->
<div style="position: absolute; top: 17px; right: 20px">
<a data-slide-to="0" href="#OUTFIT-A"><i class="fas fa-times" style="font-size: 25px; color: #ffffe9"></i></a>
</div>
<!-- Close button -->
<!-- Buttons -->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358385_8caxhrNR0gkFChw.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade show INSTRU" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-PROP-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358385_8caxhrNR0gkFChw.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".INSTRU"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603460_F1W5Ymc1aOvESjr.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade PROP" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-PROP-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603460_F1W5Ymc1aOvESjr.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".PROP"></a>
</div>
</li>
</ul>
</div>
<!-- Buttons end -->
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.2"></div>
</div>
<div class="card border-0 rounded-0 pl-3" style="height: 450px; background: rgba(0, 0, 0, 0.6)">
<!--/// INSTRUMENT TAB ///-->
<div class="collapse fade show INSTRU" data-parent="#ACC-PROP">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Main -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Main instrument
</span><br>
<!-- Image -->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Main end -->
<!-- Secondary -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Secondary instrument/prop
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Secondary end -->
</div>
</div>
</div>
<!--/// INSTRUMENT TAB ///-->
<!--/// PROP TAB ///-->
<div class="collapse fade PROP" data-parent="#ACC-PROP">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Main -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Main prop
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Main end -->
<!-- Secondary -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Secondary prop
</span><br>
<!-- Image -->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Secondary end -->
</div>
</div>
</div>
<!--/// PROP TAB end ///-->
</div>
</div>
</div>
<!--===///PROPS PAGE end ///===-->
</div>
</div>
</div>
<!--/// CLOSET end ///-->
</div>
</div>
<!--=======/////// DESIGN NOTES end ///////========-->
</div>
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
PASTE YOUR CHARACTER CODE HERE end
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!-- Divider -->
<div class="row no-gutters mt-5 mb-4">
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, rgba(0, 0, 0, 0), #ffffea, #ffffea)"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="margin-top: -23px; font-size: 30px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
FEATURED GALLERY
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card p-3" style="border-radius: 25px; border-width: 1px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<div class="row no-gutters align-items-center mb-2">
<div class="col-auto">
<a href="https://toyhou.se/CHARA_ID_HERE./gallery" style="font-size: 20px; font-weight: bold; color: #ffffea">
Featured images
</a>
</div>
<div class="col justify-content-center ml-2" style="color: #ffffea; border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<ul class="magnific-gallery image-gallery auto-clear gallery-row large-block-grid-6 justify-content-around">
<!--
THERE ARE 2 DIFFERENT VERSIONS OF THE FEATURED IMAGE GALLERY
The first is very basic, it simply shows the image, and when clicked on, redirects you to the gallery with its full size version, it's the simpler variant of the 2.
Can be found between the commentary "SIMPLE IMAGE SHOWCASE".
The second is way more complex, and requires being able to navigate the code and pay CLOSE ATTENTION to the commentaries left inside it. It mimicks the image viewer and is very tedious to put in place. I would not recommend this version if you do not know what you are doing or do not want to bother with this level of customisation!
Can be found between the commentary "IMAGE VIEWER MIMIC".
I HIGHLY recommend completely removing the version you will not be using so that every image has the same functionality, as well as to avoid getting lost in it, as it's VERY easy to be so. Each version has been put between commentaries as you can see below.
Side note: due to how the interactive element has been implemented, the images are slightly desaturated [by 40% more precisely]. So if you see your images being less vibrant than they actually are, it's perfectly normal!
-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SIMPLE IMAGE SHOWCASE - Delete this entire section if going unsused
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--/// Image ///--><!-- Duplicate this entire "image" section to add an image - maximum of 6 recommended -->
<li class="gallery-item">
<div class="gallery-thumb text-center">
<div class="card border-0 thumb-image" style="border-radius: 10px; background: rgba(0, 0, 0, 0.8)">
<!-- Full image link [aka paste the link from the URL found in the SEARCH BAR when you open the image viewer inside the gallery] -->
<a href="FULL_SIZE_IMAGE_LINK_FROM_GALLERY_HERE"
class="th" style="padding: 6.5px; box-shadow: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 10px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!-- Thumbnail image link from gallery [aka paste the link of the THUMBNAIL - not the full size image itself - by "click right + copy image address" on the THUMBNAIL] -->
<img src="THUMBNAIL_LINK_FROM_IMAGE_HERE"
style="max-height: 200px; border-radius: 5px; object-fit: contain; object-position: center">
</a>
</div>
</div>
</li>
<!--/// Image end ///-->
<!--===///////// SIMPLE IMAGE SHOWCASE end /////////===-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
IMAGE VIEWER MIMIC - Delete this entire section if going unsused
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--/// Image ///--><!-- Duplicate this entire "image" section to add an image - maximum of 6 recommended -->
<li class="gallery-item">
<div class="gallery-thumb text-center">
<div class="card border-0 thumb-image" style="border-radius: 10px; background: rgba(0, 0, 0, 0.8)">
<!-- Full image link [aka paste the link of the FULL SIZE image from the gallery - "click right + copy image address"] -->
<a href="FULL_SIZE_IMAGE_LINK_HERE"
class="th magnific-item" style="padding: 6.5px; box-shadow: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 10px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!-- Thumbnail image link from gallery [aka paste the link of the THUMBNAIL - not the full size image itself - by "click right + copy image address" on the THUMBNAIL] -->
<img src="THUMBNAIL_LINK_FROM_IMAGE_HERE"
style="max-height: 200px; border-radius: 5px; object-fit: contain; object-position: center">
</a>
<!--===/////// IMAGE METADATA ///////===--><!-- Feel free to remove this entire section if you don't need it -->
<div class="magnific-caption hide">
<div class="card rounded-0 border-0 mt-n1" style="color: #ffffea; background-image: url(
LINK_TO_BACKGROUND_IMAGE_HERE
); background-size: cover; background-position: center"><!-- Background link right above -->
<div class="card rounded-0 p-3" style="border-width: 2px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<!--===/// BUTTONS ///===-->
<div class="row no-gutters align-items-center mt-n2 mb-2">
<div class="col-auto"><p class="mt-3" style="font-size: 20px; font-weight: bold">Details</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto">
<ul class="nav nav-button nav-justified justify-content-left mt-1 flex-wrap">
<!--=== FULL SIZE IMAGE BUTTON ===-->
<li class="mx-1 card border-0 align-items-center" style="padding: 2px; width: 50px; height: 50px; border-radius: 11px; background: rgba(0, 0, 0, 0.8)">
<div class="gallery-item">
<div class="gallery-thumb">
<div class="card border-0 thumb-image bg-transparent" style="position: absolute; left: 2px; width: 46px; height: 46px">
<!-- Full size image link [aka copy the image ID - it's the numbers found at the end of the URL after the '#'] -->
<a href="https://toyhou.se/~images/IMAGE_ID_HERE"
class="th m-auto justify-content-center" style="padding: 6px; color: #ffffe9; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 2px solid #ffffe9; border-radius: 9px; box-shadow: 0 0 5px rgba(255, 255, 233, 0.5), inset 0 0 5px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!--=== BUTTON ICON ===-->
<i class="fas fa-link
" style="font-size: 25px"></i>
</a>
</div>
</div>
</div>
</li>
<!--=== FULL SIZE IMAGE BUTTON end ===-->
<!--=== EDIT IMAGE BUTTON ===-->
<li class="mx-1 card border-0 align-items-center" style="padding: 2px; width: 50px; height: 50px; border-radius: 11px; background: rgba(0, 0, 0, 0.8)">
<div class="gallery-item">
<div class="gallery-thumb">
<div class="card border-0 thumb-image bg-transparent" style="position: absolute; left: 2px; width: 46px; height: 46px">
<!-- Full size image link [aka copy the image ID - it's the numbers found at the end of the URL after the '#'] -->
<a href="https://toyhou.se/~images/edit/IMAGE_ID_HERE"
class="th m-auto justify-content-center" style="padding: 6px; color: #ffffe9; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 2px solid #ffffe9; border-radius: 9px; box-shadow: 0 0 5px rgba(255, 255, 233, 0.5), inset 0 0 5px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!--=== BUTTON ICON ===-->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96663874_TlSEdTha2UZZpgi.png?1741029340" width="33">
</a>
</div>
</div>
</div>
</li>
<!--=== EDIT IMAGE BUTTON end ===-->
</ul>
</div>
</div>
<!--===/// BUTTONS end ///===-->
<p class="mt-n3 mb-2" style="color: #cdcfc3">
Viewing full image.
</p>
<!--===/// OPTIONAL CAPTION ///===--><!-- Remove this entire section if going unused, or just write "No caption" -->
<div class="mt-3">
<p style="font-size: 20px; font-weight: bold">Caption</p>
<p class="mt-n2" style="color: #cdcfc3">
Caption here.
</p>
</div>
<!--===/// OPTIONAL CAPTION ///===-->
<div class="row">
<!--===/// IMAGE CREDITS ///===-->
<div class="col-md-6 mt-3">
<p style="font-size: 20px; font-weight: bold">Credits</p>
<p class="mt-n2" style="color: #cdcfc3">
<!-- Date -->
1 Jan 2024, 12:12:12 am
</p>
<p class="mx-n2 mt-n2">
<!-- Username [star/premium] -->
<a class="m-2" style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/Username">
<i class="fi-star user-name-icon"></i>Username
</a>
<!-- Username [torso/normal] -->
<a class="m-2" style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/Username">
<i class="fi-torso user-name-icon"></i>Username
</a>
<!-- Username [external link] -->
<a class="m-2" style="font-weight: bold; color: #7efdfe" href=
"EXTERNAL_LINK_HERE">
Username<i class="fa-solid fa-up-right-from-square ml-1" style="font-size: 10px"></i>
</a>
</p>
</div>
<!--===/// IMAGE CREDITS end ///===-->
<!--===/// TAGGED CHARACTERS ///===-->
<div class="col-md-6 mt-3">
<p style="font-size: 20px; font-weight: bold">Characters</p>
<div class="row no-gutters mx-n1 mt-1" style="margin-top: -12px">
<!--===/// NAME ///===--><!-- Duplicate this entire "name" section to add a character/tab/gallery -->
<div class="col-auto mx-1">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="font-weight: bold; border-radius: 8px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="LINK_TO_TAB_CHARA_OR_GALLERY_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 8px; z-index: 5"></span>
<!--=== Name ===-->
Character/tab/gallery name
</a>
</div>
</div>
</div>
<!--===/// NAME end ///===-->
</div>
</div>
<!--===/// TAGGED CHARACTERS end ///===-->
</div>
</div>
</div>
</div>
<!--===/////// IMAGE METADATA end ///////===-->
</div>
</div>
</li>
<!--/// Image end ///-->
<!--===///////// IMAGE VIEWER MIMIC end /////////===-->
</ul>
</div>
<!--===/// FEATURED GALLERY end ///===-->
</div>
<!--===////// MAIN CODE end //////===-->
</div>
</div>
<!--===///////// FOOTER /////////===-->
<div class="mt-auto px-3 pb-3" style="width: 100%">
<div class="card justify-content-center align-items-center" style="height: 90px; color: rgba(255, 255, 239, 0.5); border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7); z-index: 50">
<p class="text-center" style="font-size: 12px; line-height: 25px">Code by FlowerlyRat layout ©
<a href="https://thatgamecompany.com/" style="color: #7efdfe">thatgamecompany</a><br>
<a href="https://toyhou.se/~about" class="mr-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">About</a>
<a href="https://toyhou.se/~faq/general" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">FAQ</a>
<a href="https://toyhou.se/~tickets" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">HelpDesk</a>
<a href="https://toyhou.se/~rules" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">Rules</a>
<a href="https://toyhou.se/~tos" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">ToS</a>
<a href="https://toyhou.se/~browse/search" class="ml-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">Search</a>
</p>
</div>
</div>
<!--===///////// FOOTER end /////////===-->
</div>
<!--====///// ADDITIONAL INFO WINDOW //////====-->
<div class="collapse fade" id="MORE" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; z-index: 1100">
<div id="ACC-ADD" class="card bg-faded border-0 rounded-0 p-3" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.5)">
<div class="mx-auto sticky-top" style="width: 55%; min-width: 360px">
<div class="card align-items-center" style="margin-top: 120px; border-radius: 25px 25px 0 0; border-width: 1px 1px 0 1px; border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.8); z-index: 5">
<!-- Close button -->
<div style="position: absolute; top: 10px; right: 25px">
<a data-toggle="collapse" href="#MORE"><i class="fas fa-times" style="font-size: 25px; color: #ffffe9"></i></a>
</div>
<!-- Close button end -->
<div class="row no-gutters">
<!-- Buttons -->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 40px; height: 40px; cursor: pointer">
<i class="far fa-lightbulb" style="font-size: 20px; opacity: 0.6"></i>
<div class="collapse fade show TRIVIA" data-parent="#ACC-ADD" style="position:absolute; top:0; left:0; right:0; bottom:0;">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: rgba(0, 0, 0, 0)">
<i class="far fa-lightbulb" style="margin-top: 2px; font-size: 20px"></i>
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none" data-toggle="collapse" data-target=".TRIVIA"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 40px; height: 40px; cursor: pointer">
<i class="far fa-heart" style="font-size: 20px; opacity: 0.6"></i>
<div class="collapse fade TASTE" data-parent="#ACC-ADD" style="position:absolute; top:0; left:0; right:0; bottom:0;">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: rgba(0, 0, 0, 0)">
<i class="far fa-heart" style="margin-top: 2px; font-size: 20px"></i>
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none" data-toggle="collapse" data-target=".TASTE"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 40px; height: 40px; cursor: pointer">
<i class="fas fa-award" style="font-size: 20px; opacity: 0.6"></i>
<div class="collapse fade RIBBONS" data-parent="#ACC-ADD" style="position:absolute; top:0; left:0; right:0; bottom:0;">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: rgba(0, 0, 0, 0)">
<i class="fas fa-award" style="margin-top: 2px; font-size: 20px"></i>
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none" data-toggle="collapse" data-target=".RIBBONS"></a>
</div>
</li>
</ul>
</div>
<!-- Buttons end -->
</div>
</div>
<div class="card" style="height: 300px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.7); overflow: hidden">
<!--/// Trivia ///-->
<div class="collapse fade show active TRIVIA" data-parent="#ACC-ADD">
<div class="row no-gutters align-items-center mt-3 px-3 pt-3">
<div class="col-auto"><p style="font-size: 15px; font-weight: bold">Trivia</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<!-- List -->
<div class="card bg-transparent border-0 text-justify px-3 pt-3" style="height: 239px; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<ul class="list-unstyled" style="color: #cdcfc3">
<li><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>content</li>
<li><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>content</li>
<li><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>content</li>
<li><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>content</li>
<li><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>content</li>
</ul>
</div>
<!-- List -->
</div>
<!--/// Trivia end ///-->
<!--/// Tastes ///-->
<div class="collapse fade TASTE" data-parent="#ACC-ADD">
<div class="row no-gutters align-items-center mt-3 px-3 pt-3">
<div class="col-auto"><p style="font-size: 15px; font-weight: bold">Tastes</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<!-- Text -->
<div class="card bg-transparent border-0 text-justify px-3 pt-3" style="height: 239px; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="row no-gutters">
<!-- Likes -->
<div class="col-lg mr-2">
<p class="justify-content-start mt-2 mb-n3" style="margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>Likes</p><br>
<ul class="list-unstyled" style="color: #cdcfc3">
<li><i class="fas fa-genderless"></i> content</li>
<li><i class="fas fa-genderless"></i> content</li>
<li><i class="fas fa-genderless"></i> content</li>
<li><i class="fas fa-genderless"></i> content</li>
<li><i class="fas fa-genderless"></i> content</li>
</ul>
</div>
<!-- Likes -->
<!-- Dislikes -->
<div class="col-lg">
<p class="justify-content-start mt-2 mb-n3" style="margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>Dislikes</p><br>
<ul class="list-unstyled" style="color: #cdcfc3">
<li><i class="fas fa-times"></i> content</li>
<li><i class="fas fa-times"></i> content</li>
<li><i class="fas fa-times"></i> content</li>
<li><i class="fas fa-times"></i> content</li>
<li><i class="fas fa-times"></i> content</li>
</ul>
</div>
<!-- Dislikes -->
</div>
</div>
<!-- Text -->
</div>
<!--/// Tastes end ///-->
<!--/// Ribbons ///-->
<div class="collapse fade RIBBONS" data-parent="#ACC-ADD">
<div class="row no-gutters align-items-center mt-3 px-3 pt-3">
<div class="col-auto"><p style="font-size: 15px; font-weight: bold">Ribbons</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<div class="card bg-transparent border-0 text-justify px-3 pt-3" style="height: 239px; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<!--/// SECTION 1 ///--><!-- Duplicate this entire section to add a new ribbon collection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-2" style="margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Name of ribbon collection
</span></p>
<div class="row no-gutters text-center mb-3">
<!-- ||[ 0 ]|| = 1 ribbon -->
<!-- ||[ 1 ]|| --><!-- Duplicate this entire section to add a new ribbon -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 1 ]|| -->
<!-- ||[ 2 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 2 ]|| -->
<!-- ||[ 3 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 3 ]|| -->
<!-- ||[ 4 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 4 ]|| -->
<!-- ||[ 5 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 5 ]|| -->
<!-- ||[ 6 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 6 ]|| -->
</div>
<!--/// SECTION 1 ///-->
<!--/// SECTION 2 ///-->
<!-- Subheader -->
<p><span class="justify-content-start mt-2" style="margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Name of ribbon collection
</span></p>
<div class="row no-gutters text-center mb-3">
<!-- ||[ 0 ]|| = 1 ribbon -->
<!-- ||[ 1 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 1 ]|| -->
<!-- ||[ 2 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 2 ]|| -->
<!-- ||[ 3 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 3 ]|| -->
<!-- ||[ 4 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 4 ]|| -->
<!-- ||[ 5 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 5 ]|| -->
<!-- ||[ 6 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 6 ]|| -->
</div>
<!--/// SECTION 2 ///-->
<!--
Dont mind this random p tag,,, its the only solution I found for the different ribbon sections to have the same margin between the title and the ribbons smh
If you delete it, you'll notice the very last section doesn't have the same margin, and I do not know why
-->
<p></p>
</div>
</div>
<!--/// Ribbons end ///-->
<div class="row no-gutters" style="position: absolute; bottom: -3px; left: 27px; right: 27px; opacity: 0.3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
</div>
</div>
</div>
<!--====///// ADDITIONAL INFO WINDOW end //////====-->
<!--====///// MUSIC WINDOW //////====-->
<div class="collapse fade" id="MUSIC" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; z-index: 1100">
<div class="card bg-faded border-0 rounded-0 p-3" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.5)">
<div class="mx-auto sticky-top" style="padding-top: 74px">
<!--////// VOICE CLAIM + THEME + PLAYLIST //////-->
<div style="max-width: 440px; border-radius: 20px; overflow: hidden"><div class="card bg-faded mx-auto pt-3" style="border-radius: 20px; border-width: 1px; border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.8)">
<!-- Close button -->
<div style="position: absolute; top: 10px; right: 15px">
<a data-toggle="collapse" href="#MUSIC"><i class="fas fa-times" style="font-size: 25px; color: #ffffe9"></i></a>
</div>
<!-- Close button end -->
<h1 class="text-center">Audio Settings</h1>
<div class="px-4 py-3" style="max-height: 400px; overflow: auto; scrollbar-width: thin; scrollbar-color: #afb1b0 rgba(0, 0, 0, 0)">
<!--/// VOICE CLAIM ///-->
<div class="row no-gutters mb-2 align-items-center">
<div class="col">
<p class="text-truncate" style="font-weight: bold">
Voice claim
</p>
</div>
<div class="col-auto ml-auto">
<div class="card border-0 p-2" style="border-radius: 40px; background: #3fb452">
<div class="row no-gutters align-items-center">
<div class="tooltipster" title="
Voice name - source
"><!-- Please also change the tooltip, so that when it gets cut off, people can still see the full name by hovering over or clicking on it -->
<p class="text-truncate ml-1 mt-n1" style="width: 220px; font-size: 12px">
<!-- Title -->
Voice name
</p><p class="text-truncate ml-3 mb-n1" style="width: 200px; font-size: 10px; font-style: oblique; margin-top: -17px; opacity: 0.7">
<!-- Source -->
source of voice
</p>
</div>
<div class="col-auto align-items-center">
<i class="fas fa-play-circle" style="font-size: 20px"></i>
<span>
<!-- YOUTUBE VIDEO ID -->
<iframe class="flex-fill" style="position: absolute; top: -4px; right: -3px; width: 40px; height: 25px; opacity: 0.0001" frameborder="0" src="
https://www.youtube.com/embed/VIDEO_ID?ps=docs&controls=1
"></iframe>
<!-- YOUTUBE VIDEO ID end -->
</span>
</div>
</div>
</div>
</div>
</div>
<!--/// VOICE CLAIM end ///-->
<!--/// MUSIC THEME ///-->
<div class="row no-gutters mb-2 align-items-center">
<div class="col">
<p class="text-truncate" style="font-weight: bold">
Music theme
</p>
</div>
<div class="col-auto ml-auto">
<div class="card border-0 p-2" style="border-radius: 40px; background: #3fb452">
<div class="row no-gutters align-items-center">
<div class="tooltipster" title="
Song title - artist
"><!-- Please also change the tooltip, so that when it gets cut off, people can still see the full name by hovering over or clicking on it -->
<p class="text-truncate ml-1 mt-n1" style="width: 220px; font-size: 12px">
<!-- Title -->
Song title
</p><p class="text-truncate ml-3 mb-n1" style="width: 200px; font-size: 10px; font-style: oblique; margin-top: -17px; opacity: 0.7">
<!-- Source -->
artist
</p>
</div>
<div class="col-auto align-items-center">
<i class="fas fa-play-circle" style="font-size: 20px"></i>
<span>
<!-- YOUTUBE VIDEO ID -->
<iframe class="flex-fill" style="position: absolute; top: -4px; right: -3px; width: 40px; height: 25px; opacity: 0.0001" frameborder="0" src="
https://www.youtube.com/embed/VIDEO_ID?ps=docs&controls=1
"></iframe>
<!-- YOUTUBE VIDEO ID end -->
</span>
</div>
</div>
</div>
</div>
</div>
<!--/// MUSIC THEME end ///-->
<!--//////////// PLAYLIST ////////////-->
<!--
Feel free to delete certain parts of this section if you don't like how it looks!
Such as the divider, description, link to outside platform, or the songs themselves
-->
<!-- Divider -->
<div class="row no-gutters mt-3 mb-2">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<!-- Divider end -->
<!--/// TEXT ///-->
<p class="mb-3" style="color: #cdcfc3; text-align: justify">
Short playlist description
</p>
<!--/// TEXT end ///-->
<!--/// LINK TO OUTSIDE PLATFORM ///-->
<div class="row no-gutters mb-2 align-items-center">
<div class="col">
<p class="text-truncate" style="font-weight: bold">
Playlist link
</p>
</div>
<div class="col-auto ml-auto">
<div class="card border-0 p-2" style="border-radius: 40px; background: #3fb452">
<div class="row no-gutters align-items-center">
<div class="tooltipster" title="
Playlist name - platform
"><!-- Please also change the tooltip, so that when it gets cut off, people can still see the full name by hovering over or clicking on it -->
<p class="text-truncate ml-1 mt-n1" style="width: 220px; font-size: 12px">
<!-- Title -->
Playlist name
</p><p class="text-truncate ml-3 mb-n1" style="width: 200px; font-size: 10px; font-style: oblique; margin-top: -17px; opacity: 0.7">
<!-- Source -->
platform
</p>
</div>
<div class="col-auto align-items-center">
<a
href="PLAYLIST_LINK_GOES_HERE"
><i class="fas fa-external-link-square-alt mt-1" style="font-size: 20px; color: #ffffe9"></i></a>
</div>
</div>
</div>
</div>
</div>
<!--/// LINK TO OUTSIDE PLATFORM end ///-->
<!--/// IN-TOYHOUSE PLAYLIST ///-->
<!--/// [1] ///--><!-- Duplicate this entire senction to add a new song -->
<div class="row no-gutters mb-2 align-items-center">
<div class="col">
<!-- SONG NAME --> <!-- Please also change the tooltip for the name, so that when it gets cut off, people can still see the full name by hovering over or clicking on it -->
<a class="tooltipster" title="
Song name
"><p class="text-truncate" style="font-weight: bold; width: 170px">
Song name
</p></a>
<!-- SONG NAME end -->
</div>
<div class="col-auto ml-auto">
<div class="card border-0 p-2" style="border-radius: 40px; background: #3fb452">
<div class="row no-gutters align-items-center">
<!-- ARTIST NAME -->
<div class="col tooltipster" title="
Artist name
"><!-- Please also change the tooltip for the name, so that when it gets cut off, people can still see the full name by hovering over or clicking on it -->
<p class="text-truncate" style="width: 170px; font-size: 12px">
Artist name
</p>
</div>
<!-- ARTIST NAME end -->
<div class="col-auto align-items-center">
<i class="fas fa-play-circle" style="font-size: 20px"></i>
<span>
<!-- YOUTUBE VIDEO ID -->
<iframe class="flex-fill" style="position: absolute; top: -4px; right: -3px; width: 40px; height: 25px; opacity: 0.0001" frameborder="0" src="
https://www.youtube.com/embed/VIDEO_ID?ps=docs&controls=1
"></iframe>
<!-- YOUTUBE VIDEO ID end -->
</span>
</div>
</div>
</div>
</div>
</div>
<!--/// [1] ///-->
<!--/// IN-TOYHOUSE PLAYLIST ///-->
<!--//////////// PLAYLIST end ////////////-->
</div>
</div></div>
<!--////// VOICE CLAIM + THEME + PLAYLIST end //////-->
</div>
</div>
</div>
<!--====///// MUSIC WINDOW end //////====-->
<!--====/////CREDITS WINDOW//////====-->
<div class="collapse fade" id="CREDIT" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; color: #ffffea; z-index: 1100">
<div id="ACC-CREDIT" class="card bg-faded border-0 rounded-0 p-3" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.7)">
<div class="mx-auto sticky-top" style="min-width: 55%">
<div class="card align-items-center" style="margin-top: 120px; border-radius: 25px 25px 0 0; border-width: 1px 1px 0 1px; border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.8); z-index: 5">
<!--Close button-->
<div style="position: absolute; top: 10px; right: 25px">
<a data-toggle="collapse" href="#CREDIT"><i class="fas fa-times" style="font-size: 25px; color: #ffffea"></i></a>
</div>
<!--Close button end-->
<div class="row no-gutters">
<!--Buttons-->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 40px; height: 40px; cursor: pointer">
<i class="far fa-code" style="font-size: 20px; color: #ffffea; opacity: 0.6; text-shadow: 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745"></i>
<div class="collapse fade show CODE" data-parent="#ACC-CREDIT" style="position:absolute; top:0; left:0; right:0; bottom:0;">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea;background: rgba(0, 0, 0, 0)">
<i class="far fa-code" style="margin-top: 2px; font-size: 20px; color: #ffffea; text-shadow: 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745"></i>
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none" data-toggle="collapse" data-target=".CODE"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 40px; height: 40px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96599998_5kOvqGuUpH9aIfH.png" width="25px" style="opacity: 0.6">
<div class="collapse fade IMAGE" data-parent="#ACC-CREDIT" style="position:absolute; top:0; left:0; right:0; bottom:0;">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea;background: rgba(0, 0, 0, 0)">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96599998_5kOvqGuUpH9aIfH.png" width="25px" style="margin-top: 2px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none" data-toggle="collapse" data-target=".IMAGE"></a>
</div>
</li>
</ul>
</div>
<!--Buttons end-->
</div>
</div>
<div class="card p-3 pb-4" style="height: 300px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.7)">
<!--///Code credits///-->
<div class="collapse fade show active CODE" data-parent="#ACC-CREDIT">
<div class="row no-gutters align-items-center mt-3">
<div class="col-auto"><p style="font-size: 15px; font-weight: bold">Code credits</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<!--Text-->
<p class="mt-4">
<b>Code:</b> <a style="font-weight: bold; color: #7efdfe" href="https://toyhou.se/FlowerlyRat"><i class="fi-torso user-name-icon"></i>FlowerlyRat</a><br>
<b>Layout:</b> Based on the game Sky: Children of the Light's UI<br>
<b>Other codes:</b> <a style="font-weight: bold; color: #ff7e01" href="https://toyhou.se/FlowerlyRat/characters/folder:4673560">Folder</a>
</p>
<!--Text end-->
</div>
<!--///Code credits///-->
<!--///Image credits///-->
<div class="collapse fade IMAGE" data-parent="#ACC-CREDIT">
<div class="row no-gutters align-items-center mt-3">
<div class="col-auto"><p style="font-size: 15px; font-weight: bold">Image credits</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<!--Text-->
<p class="mt-4">
<b>Background image:</b> Sky: Children of the Light © thatgamecompany<br>
<b>Icons:</b> <a href="https://fontawesome.com/v6/search" style="font-weight: bold; color: #ff7e01">FontAwesome</a>, Sky: Children of the Light<br>
<b>Flags/ribbons:</b> taken from CoraMagics' <a href="https://toyhou.se/20187371." style="font-weight: bold; color: #ff7e01">Ribbon Masterlist</a>
</p>
<!--Text end-->
</div>
<!--///Image credits///-->
<div class="row no-gutters" style="position: absolute; bottom: -3px; left: 27px; right: 27px; opacity: 0.3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
</div>
</div>
</div>
<!--====/////CREDITS WINDOW end//////====-->
</div>
</div>
<!-- Code container -->
</div>
</div>
</div>
</div>Copy
<!--
╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
△▽/╱╱╱╱╱╱╱╱╱╱╱╰━╯
Ultimate Sky: Children of the Light profile bundle [CSS emulator V2 - character profile: multitab version]: code by FlowerlyRat || Inspired from TheFaerieMerchant's CSS emulators || Based on the game Sky: Children of the Light's UI by ThatGameCompany
This code is paired with the "Constellation" code in this same ToyHouse code bundle profile, please refer to it to know how to set it up properly.
THE CONSTELLATION CODE IS STILL AN UNAVAILABLE WORK IN PROGRESS, THANK YOU FOR YOUR UNDERSTANDING!
REPLACE IT WITH A LINK TO THE CHARACTERS "LINKS" TAB INSTEAD FOR THE TIME BEING
> It is HIGHLY recommended to use circlejourney's ToyHouse live editor to see what you're doing!!!! -> https://th.circlejourney.net/
Any links added use the following formats [target="_blank" is optional]:
Blue variant [to link characters, groups, species, and entities]:
<a style="font-weight: bold; color: #7efdfe" href="LINK_HERE">text_here</a>
Orange variant [to link everything else]:
<a style="font-weight: bold; color: #ff7e01" href="LINK_HERE">text_here</a>
Any areas that need the character's ID have the "CHARA_ID_HERE" placeholder -> to replace everything at once, highlight "CHARA_ID_HERE", then do ctrl+F and replace it with your character's.
Pop-ups for the additional information, music and credits collapsibles are at the end of the code.
> I cannot guarantee compatibility with actual custom CSS codes.
Code is compatible with the "Sky: Children of the Light candle UI" add-on.
Instructions to add them is given in the profile itself -> https://toyhou.se/23648694.misc-sky-cotl-candle-ui/25906098.
Code is also compatible with the "Sky quests!" add-on.
To add it, please copy and paste the code between the "FUN LINKS" commentaries below, between the "MAIN CHARACTER CODE HERE" commentaries.
-> https://toyhou.se/32862504.snip-sky-quests/32862518.code
Multiple background images have been screenshoted from the game to give a wide variety of possibilities [ToyHouse gallery: https://toyhou.se/25042050./gallery || Google Drive: https://drive.google.com/drive/folders/12YBvvXe9MoIYj9oUo8MVpngCojj8vCv3?usp=sharing], however if none of them suit your taste or vision, please go on and take your own in-game.
!!! TO BE WARNED !!!
This code has a hidden section intended for mobile users, so be sure to also modify it with the sidebar!
-->
<div class="flex-row justify-content-end sp-top-inner" style="left: -40vw; z-index: 5">
<div style="width: 100vw">
<div class="ml-md-3">
<!--///BACKGROUND IMAGE///-->
<div class="card bg-dark rounded-0 border-0 col-lg-12" style="overflow: hidden; position: fixed; bottom: 0; top: 0; left: 0; background-image: url(
LINK_TO_BACKGROUND_IMAGE_HERE
); background-size: cover; background-position: center"></div>
<div class="row no-gutters">
<!-- Code container -->
<div class="col-12 ">
<div class="card bg-transparent border-0 rounded-0 mx-auto">
<div class="card bg-transparent rounded-0 border-0" style="min-height: 100vh">
<div class="container pl-md-0" style="max-width: 100%">
<div class="row no-gutters">
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
COMPUTER SIDEBAR
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-md-2 hidden-sm-down" style="color: #ffffea">
<div class="card rounded-0 p-2 h-100" style="margin-left: -1px; border-width: 0 1px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
AVATAR [computer]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-auto my-2" style="height: 150px; width: 150px">
<div class="card bg-dark border-0 p-0" style="position: absolute; height: 115px; width: 115px; border-radius: 50%; z-index: 1; background: url(
AVATAR_IMAGE_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"><!--PFP IMAGE LINK ABOVE--></div>
<!--///Outer frame///--><!--Check [https://toyhou.se/23579684.misc-sky-cotl-avatar-frame] for more borders and meaning explanation-->
<img class="d-block mx-auto my-auto" style="position: absolute; opacity: 1; z-index: 5" src=
"https://f2.toyhou.se/file/f2-toyhou-se/images/71211585_IQYjqdDDaiOOeid.png">
<!--///Inner spinning frame///--><!-- Feel free to delete -->
<div class="align-items-center justify-content-center" style="position: absolute; width: 123px; z-index: 5">
<i class="fa-spin" style="animation-duration: 26s; opacity: 1"><img class="d-block mx-auto my-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/images/71211558_s1BGtB1nlee2eVn.png"></i>
</div>
<!--///Inner spinning frame end///-->
</div>
<!--===////// AVATAR end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER NAME [computer]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE."
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-sparkles fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// CHARACTER NAME [computer] end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
FOLDER LINK
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/FlowerlyRat/characters/folder:FOLDER_ID"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Folder name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-folder fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// FOLDER LINK end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BLURB [computer]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card" style="padding: 15px; font-size: 0.8em; color: #cdcfc3; border-radius: 23px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<p>
This is a blurb, feel free to delete it tho
</p>
</div>
<!--===////// BLURB [computer] end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SOCIAL LINKS [computer] - duplicate the "SOCIAL LINK" section to add a platform - can be used to add links to an Art Fight profile, playlist, etc
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<ul class="nav nav-button nav-justified justify-content-around mt-2 flex-wrap">
<!--=== SOCIAL LINK ===-->
<li>
<div class="gallery-thumb">
<div class="thumb-image justify-content-center align-items-center" style="width: 35px; height: 35px; font-weight: bold; border-radius: 10px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="SOCIAL_LINK_HERE" title="SOCIAL_NAME_HERE"
class="th tooltipster" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 10px; box-shadow: 0 0 8px rgba(255, 255, 233, 0.5), inset 0 0 8px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!--=== BUTTON ICON ===-->
<i class="fas fa-link
" style="font-size: 13px"></i>
</a>
</div>
</div>
</li>
<!--=== SOCIAL LINK end===-->
</ul>
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BONUS LINKS [computer] - duplicate the "ADDITIONAL SIDE LINK" section to add a link
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--===////// ADDITIONAL SIDE LINK //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="LINK_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Link name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-link fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// ADDITIONAL SIDE LINK end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SIDEBAR BUTTONS - tabs require their own links with their own ID
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--===////// TAB 1 //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="LINK_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Tab 1
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-bookmark fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// TAB 1 end //////===-->
<div class="my-1 mb-2 mx-2" style="border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<!--===////// TAB 2 //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="LINK_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Tab 2
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="far fa-bookmark fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// TAB 2 end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--===////// GALLERY //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./gallery"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Gallery
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-image fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// GALLERY end //////===-->
<!--===////// LIBRARY //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./literatures"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Library
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-book fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// LIBRARY end //////===-->
<!--===////// WORLDS //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./worlds"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Worlds
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-globe fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// WORLDS end //////===-->
<!--===////// LINKS //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./links"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Links
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-link fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// LINKS end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--===////// COMMENTS //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./comments"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Comments
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-comment fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// COMMENTS end //////===-->
<!--===////// FAVORITE //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./comments"
class="th" data-toggle="th-favorite" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="favorite toggle-favorite" style="position: absolute; top: 8px; right: 12.5px; z-index: 5">
<span style="position: absolute; left: -189px">Favorite</span>
<i class="fal fa-sparkle"></i>
</span>
<span class="unfavorite toggle-favorite" style="position: absolute; top: 8px; right: 12.5px; z-index: 5">
<span style="position: absolute; left: -189px">Unfavorite</span>
<i class="fas fa-sparkle"></i>
</span>
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9"></div>
<div class="col justify-content-end align-items-center">
<div class="card border-0" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57"></div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// FAVORITE end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--===////// OWNERSHIP //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./ownership"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Ownership
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-check-square fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// OWNERSHIP end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--===////// REPORT //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/~tickets/create/character/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Report
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-warning fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// REPORT end //////===-->
<!--===////// BLOCK //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./block"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Block
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-cancel fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// BLOCK end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<div class="accordion container p-0" id="accordion">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="#MANAGE"
class="th" data-toggle="collapse" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Manage character
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-caret-right fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div id="MANAGE" class="collapse" data-parent="#accordion">
<!--===AVATAR===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/avatar/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Avatar
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-image fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===AVATAR end===-->
<!--===EDIT PROFILE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/edit/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Edit profile
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-pencil fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===EDIT PROFILE end===-->
<!--===TABS===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/tabs/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Tabs
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-bookmark fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===TABS end===-->
<!--===HISTORY===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/history/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
History
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-history fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===HISTORY end===-->
<div class="my-3 ml-3" style="border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<!--===WARNINGS===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/warnings/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Warnings
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-warning fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===WARNINGS end===-->
<!--===ACCESS KEYS===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/keys/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Access keys
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-key fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===ACCESS KEYS end===-->
<!--===TRADE LISTING===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/trade-listing/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Trade listing
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-handshake fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===TRADE LISTING end===-->
<div class="my-3 ml-3" style="border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<!--===DELETE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/delete/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Delete
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-trash fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===DELETE end===-->
</div>
<!--=== CHARACTER end ===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
IMAGES
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="#MANAGE-IMG"
class="th" data-toggle="collapse" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Manage images
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-caret-right fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div id="MANAGE-IMG" class="collapse" data-parent="#accordion">
<!--===UPLOAD IMAGE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~images/upload/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Upload image
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-plus fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===UPLOAD IMAGE end===-->
<!--===MANAGE IMAGES===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~images/manage-character/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Manage images
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-image fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===MANAGE IMAGES end===-->
<!--===SORT IMAGES===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~images/sort/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Sort images
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-random fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===SORT IMAGES end===-->
</div>
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
LITERATURES
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="#MANAGE-LIT"
class="th" data-toggle="collapse" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Manage literatures
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-caret-right fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div id="MANAGE-LIT" class="collapse" data-parent="#accordion">
<!--===ADD LITERATURE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~literatures/create/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Upload literature
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-plus fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===ADD LITERATURE end===-->
<!--===SORT LITERATURE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~literatures/sort/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Sort literatures
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-random fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===SORT LITERATURE end===-->
</div>
<!--=== LITERATURES end ===-->
</div>
</div>
</div>
<!--===/////////////////////////////////// COMPUTER SIDEBAR end ///////////////////////////////////===-->
<!--===////// MAIN CODE //////===-->
<div class="col-md-10 mx-auto pt-md-3 pl-md-3 h-100">
<!-- Utility buttons [computer] -->
<ul class="nav nav-button align-items-center justify-content-end mt-3 mr-2 hidden-sm-down" style="margin-bottom: 22px">
<!--///Creation information button///-->
<li class="mx-4">
<a data-toggle="collapse" href="#CREA" style="box-shadow: none; color: #ffffea">
<i class="fa fa-info-circle mt-1" style="font-size: 30px; color: #fdf8da; text-shadow: 0 0 2px #713745, 0 0 2px #713745"></i>
</a>
</li>
<!--Credits button-->
<li>
<a data-toggle="collapse" href="#CREDIT">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96600008_K9c0uSM4k7pfpXi.png" width="35">
</a>
</li>
</ul>
<!-- Utility buttons [computer] -->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
UPPER CARD ON PHONE
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card pt-3 p-2 hidden-sm-up mb-4 rounded-0" style="margin-left: -15px; margin-right: -15px; color: #ffffea; border-width: 0 0 1px 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<!-- Utility buttons [phone] -->
<ul class="nav nav-button align-items-center justify-content-end mr-2 hidden-sm-up" style="margin-bottom: 22px">
<!--///Creation information button///-->
<li class="mx-4">
<a data-toggle="collapse" href="#CREA" style="box-shadow: none; color: #ffffea">
<i class="fa fa-info-circle mt-1" style="font-size: 30px; color: #fdf8da; text-shadow: 0 0 2px #713745, 0 0 2px #713745"></i>
</a>
</li>
<!--Credits button-->
<li>
<a data-toggle="collapse" href="#CREDIT">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96600008_K9c0uSM4k7pfpXi.png" width="35">
</a>
</li>
</ul>
<!-- Utility buttons [phone] -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
AVATAR [phone]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-auto hidden-sm-up mt-n5 mb-2" style="height: 150px; width: 150px">
<div class="card bg-dark border-0 p-0" style="position: absolute; height: 115px; width: 115px; border-radius: 50%; z-index: 1; background: url(
AVATAR_IMAGE_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"><!--PFP IMAGE LINK ABOVE--></div>
<!--///Outer frame///--><!--Check [https://toyhou.se/23579684.misc-sky-cotl-avatar-frame] for more borders and meaning explanation-->
<img class="d-block mx-auto my-auto" style="position: absolute; opacity: 1; z-index: 5" src=
"https://f2.toyhou.se/file/f2-toyhou-se/images/71211585_IQYjqdDDaiOOeid.png">
<!--///Inner spinning frame///--><!-- Feel free to delete -->
<div class="align-items-center justify-content-center" style="position: absolute; width: 123px; z-index: 5">
<i class="fa-spin" style="animation-duration: 26s; opacity: 1"><img class="d-block mx-auto my-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/images/71211558_s1BGtB1nlee2eVn.png"></i>
</div>
<!--///Inner spinning frame end///-->
</div>
<!--===////// AVATAR end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER NAME [phone]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE."
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-sparkles fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// CHARACTER NAME [phone] end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BLURB [phone]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card" style="padding: 15px; font-size: 0.8em; color: #cdcfc3; border-radius: 23px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<p>
This is a blurb, feel free to delete it tho
</p>
</div>
<!--===////// BLURB [phone] end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SOCIAL LINKS [computer] - duplicate the "SOCIAL LINK" section to add a platform - can be used to add links to an Art Fight profile, playlist, etc
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<ul class="nav nav-button nav-justified justify-content-around mt-2 flex-wrap">
<!--=== SOCIAL LINK ===-->
<li>
<div class="gallery-thumb">
<div class="thumb-image justify-content-center align-items-center" style="width: 35px; height: 35px; font-weight: bold; border-radius: 10px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="SOCIAL_LINK_HERE" title="SOCIAL_NAME_HERE"
class="th tooltipster" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 10px; box-shadow: 0 0 8px rgba(255, 255, 233, 0.5), inset 0 0 8px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!--=== BUTTON ICON ===-->
<i class="fas fa-link
" style="font-size: 13px"></i>
</a>
</div>
</div>
</li>
<!--=== SOCIAL LINK end===-->
</ul>
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BONUS LINKS [phone] - duplicate the "ADDITIONAL SIDE LINK" section to add a link
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--===////// ADDITIONAL SIDE LINK //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="LINK_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Link name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-link fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// ADDITIONAL SIDE LINK end //////===-->
</div>
<!--===/// UPPER CARD PHONE end ///===-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER CREATION INFO
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="collapse fade mt-1 mb-3" id="CREA" style="color: #ffffea">
<div class="col row no-gutters hidden-sm-up mt-n2 mb-3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<div class="row no-gutters">
<div class="col-md-9 card order-md-2 px-3" style="border-radius: 8px; border-width: 1px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<!--Close button-->
<div class="justify-content-end mt-3">
<a data-toggle="collapse" href="#CREA"><i class="fas fa-times" style="font-size: 25px; color: #ffffea"></i></a>
</div>
<!--Close button end-->
<div class="row">
<!--===/// CREATION INFO ///===-->
<div class="col-md-5 pr-3 mr-n2" style="height: 155px; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<!--===CREATED===-->
<div class="row mb-2">
<div class="col-4" style="font-weight: bold">
<p>Created</p>
</div>
<div class="col">
<!--Date-->
<p>
1 Jan 2024, 1:20:30 am
</p>
</div>
</div>
<!--===CREATED end===-->
<!--===CREATOR===-->
<div class="row mb-2">
<div class="col-4" style="font-weight: bold">
<p>Creator</p>
</div>
<div class="col">
<!--Username-->
<a style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/Username">
<i class="fi-star user-name-icon"></i>Username
</a>
</div>
</div>
<!--===CREATOR end===-->
<!--===DESIGNERS===-->
<div class="row mb-2">
<div class="col-4" style="font-weight: bold">
<p>Designers</p>
</div>
<div class="col">
<!--Username-->
<!--Username [external link]-->
<a style="font-weight: bold; color: #7efdfe" href=
"EXTERNAL_LINK_HERE">
Username<i class="fa-solid fa-up-right-from-square ml-1" style="font-size: 10px"></i>
</a>
</div>
</div>
<!--===DESIGNERS end===-->
<!--===OWNER===-->
<div class="row mb-2">
<div class="col-4" style="font-weight: bold">
<p>Owner</p>
</div>
<div class="col">
<!--Username-->
<a style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/Username">
<i class="fi-torso user-name-icon"></i>Username
</a>
</div>
</div>
<!--===OWNER end===-->
</div>
<!--===/// CREATION INFO end ///===-->
<!--===/// Divider ///===-->
<div class="col row no-gutters hidden-sm-up my-2 mb-3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<div class="col-auto hidden-sm-down mr-n4">
<div style="height: 41%; border-width: 0 0 0 1px; border-style: solid"></div>
<div class="border-0 rounded-0 my-1">
<p style="margin-left: -3.4px; font-size: 10px">◆</p>
</div>
<div style="height: 41%; border-width: 0 0 0 1px; border-style: solid"></div>
</div>
<!--===/// Divider end ///===-->
<!--===/// TAGS ///===-->
<div class="col-md card bg-transparent border-0 rounded-0">
<div class="pr-3 mr-n3" style="height: 155px; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<!--Tag 1-->
<div class="card border-0 px-1 mb-1" style="border-radius: 5px; background: #ffffea; display: inline-block">
<a style="font-weight: bold; color: #000" href=
"TAG_LINK_HERE">
tag 1
</a>
</div>
<!--Tag 1 end-->
<!--Tag 2-->
<div class="card border-0 px-1 mb-1" style="border-radius: 5px; background: #ffffea; display: inline-block">
<a style="font-weight: bold; color: #000" href=
"TAG_LINK_HERE">
tag 2
</a>
</div>
<!--Tag 2 end-->
<!--Tag 3-->
<div class="card border-0 px-1 mb-1" style="border-radius: 5px; background: #ffffea; display: inline-block">
<a style="font-weight: bold; color: #000" href=
"TAG_LINK_HERE">
tag 3
</a>
</div>
<!--Tag 3 end-->
</div>
</div>
<!--===/// TAGS end ///===-->
</div>
</div>
<div class="col-md card mr-md-2 mt-md-0 mt-2 order-md-1" style="height: 200px; border-radius: 8px; border-width: 1px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<div class="card bg-transparent border-0 rounded-0 my-auto p-3" style="height: 200px; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="row no-gutters text-center">
<!--===/// Creator ribbons ///===-->
<!-- ||[ 1 ]|| -->
<div class="col-4 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description"><!-- Don't make the tooltips too long, otherwise they won't display! -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 1 ]|| -->
<!--===/// Creator ribbons end ///===-->
</div>
</div>
</div>
</div>
<div class="col row no-gutters hidden-sm-up mt-3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
<!--===/// CHARACTER CREATION INFO end ///===-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
PASTE YOUR CHARACTER CODE HERE
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!-- [REMINDER]
> I cannot guarantee compatibility with actual custom CSS codes.
-->
<div class="card bg-transparent border-0 rounded-0" style=" color: #ffffe9">
<!--Change the image link for the main background right above this line-->
<div class="mt-4" style="margin-bottom: 20px">
<!--===/// WINGED LIGHT COUNT ///===-->
<img class="d-block mx-auto tooltipster" data-placement="bottom" title="
200
" src="https://f2.toyhou.se/file/f2-toyhou-se/images/72538958_Qzn1IfB8liC2Y5H.png" style="height: 50px">
<!--===/// WINGED LIGHT COUNT end ///===-->
</div>
<!--=======/////// FUN LINKS ///////========-->
<!--=======/////// FUN LINKS end ///////========-->
<!--=======/////// MAIN INFORMATION ///////========-->
<div class="row mt-4">
<!--/// Right column ///-->
<div class="col-md mb-2 col-12" style="width: 0%">
<div class="card bg-transparent rounded-0 border-0 mb-3 accordion" id="WINDOW" style="height: 472px">
<div class="collapse fade show active" id="COMMENTS" data-parent="#WINDOW">
<p class="text-center text-truncate" style="font-weight: bold; font-size: 30px; text-shadow: 0 0 5px #000, 0 0 3px #000">
Name
</p>
<div id="BASE" class="carousel slide align-items-end" data-ride="false" data-pause="true" style="max-height: 271px; min-height: 270px; overflow: hidden">
<div class="carousel-inner">
<!--===/// Basic page ///===-->
<div class="carousel-item active" style="transition: none">
<div class="card border-0" style="padding: 10px; max-height: 218px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<!-- Age -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Age</p></div>
<div class="col-auto ml-auto"><p>
##
</p></div>
</div>
<!-- Age end -->
<!-- Height -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Height</p></div>
<div class="col-auto ml-auto"><p><a style="font-weight: bold; color: #ff7e01" href="https://www.reddit.com/media?url=https%3A%2F%2Fi.redd.it%2Fyazzlze83qh41.jpg">
#
</a></p></div>
</div>
<!-- Height end -->
<!-- Gender -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Gender</p></div>
<div class="col-auto ml-auto"><p>
content
</p></div>
</div>
<!-- Gender end -->
<!-- Pronouns -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Pronouns</p></div>
<div class="col-auto ml-auto"><p>
pro/nouns
</p></div>
</div>
<!-- Pronouns end -->
<!-- Orientation -->
<div class="row no-gutters align-items-center my-1">
<div class="col-auto"><p>Orientation</p></div>
<div class="col-auto ml-auto"><p>
<!--
Change the link and tooltip titles to the appropriate ones
Copy and paste the "<a>" tag to add another flag
-->
<a data-toggle="tooltip" title="LGBT+">
<img width="30"
src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/0b1cb6ed-b614-4d6f-a792-6e2d2db50e49/df12p8i-5148214b-27e1-4cea-b418-420e2c629e25.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzBiMWNiNmVkLWI2MTQtNGQ2Zi1hNzkyLTZlMmQyZGI1MGU0OVwvZGYxMnA4aS01MTQ4MjE0Yi0yN2UxLTRjZWEtYjQxOC00MjBlMmM2MjllMjUucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.bfUU644_Y-XtP6mk5Iw-rkWSCGz48RVRya12UOkjtMA"></a>
<a data-toggle="tooltip" title="Queer">
<img width="30"
src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/0b1cb6ed-b614-4d6f-a792-6e2d2db50e49/df12p7u-5aae0688-c8e6-408f-9360-bfe27b1b9397.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzBiMWNiNmVkLWI2MTQtNGQ2Zi1hNzkyLTZlMmQyZGI1MGU0OVwvZGYxMnA3dS01YWFlMDY4OC1jOGU2LTQwOGYtOTM2MC1iZmUyN2IxYjkzOTcucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.VfwaRcQsMLGFHptAVp77zWeA-p1LT_DE8YRuyXVWmuw"></a>
</p></div>
</div>
<!-- Orientation end -->
</div>
<p class="text-center mt-1 mb-n2" style="font-size: 12px; text-shadow: 0 0 5px #000, 0 0 3px #000">
Click on the arrows and speech bubble for more
</p>
<!--===/// Indicators [purely aesthetic] ///===--><!-- Dont forget to add more of them if you add slides -->
<p class="align-items-center justify-content-center mt-4 mb-1" style="font-size: 10px">
<!-- Active slide --><i class="fas fa-circle mx-2" style="text-shadow: 0 0 5px #000"></i>
<!-- Inactive slide --><i class="fas fa-circle mx-2" style="font-size: 7px; opacity: 0.6; text-shadow: 0 0 5px #000"></i>
<!-- Inactive slide --><i class="fas fa-circle mx-2" style="font-size: 7px; opacity: 0.6; text-shadow: 0 0 5px #000"></i>
</p>
<!--===/// Indicators [purely aesthetic] end ///===-->
</div>
<!--===/// Basic page end ///===-->
<!--===/// Quote page ///===-->
<div class="carousel-item" style="transition: none">
<div class="card bg-transparent border-0 rounded-0 align-items-center">
<div class="card border-0" style="padding: 10px; max-height: 232px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<p>"
This is a very cool and epic quote woa
"</p>
</div>
</div>
<!--===/// Indicators [purely aesthetic] ///===--><!-- Dont forget to add more of them if you add slides -->
<p class="align-items-center justify-content-center mt-4 mb-1" style="font-size: 10px">
<!-- Inactive slide --><i class="fas fa-circle mx-2" style="font-size: 7px; opacity: 0.6; text-shadow: 0 0 5px #000"></i>
<!-- Active slide --><i class="fas fa-circle mx-2" style="text-shadow: 0 0 5px #000"></i>
<!-- Inactive slide --><i class="fas fa-circle mx-2" style="font-size: 7px; opacity: 0.6; text-shadow: 0 0 5px #000"></i>
</p>
<!--===/// Indicators [purely aesthetic] end ///===-->
</div>
<!--===/// Quote page end ///===-->
<!--===/// Additional slide ///===--><!-- Copy this entire section to add a slide -->
<div class="carousel-item" style="transition: none">
<div class="card bg-transparent border-0 rounded-0 align-items-center">
<div class="card border-0" style="padding: 10px; max-height: 232px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<p>
Add whatever you want here, can be notes, inside jokes, author's notes, etc. This box has a maximum height and does scroll :]
</p>
</div>
</div>
<!--===/// Indicators [purely aesthetic]///===--><!-- Dont forget to add more of them if you add slides -->
<p class="align-items-center justify-content-center mt-4 mb-1" style="font-size: 10px">
<!--Inactive slide--><i class="fas fa-circle mx-2" style="font-size: 7px; opacity: 0.6; text-shadow: 0 0 5px #000"></i>
<!--Inactive slide--><i class="fas fa-circle mx-2" style="font-size: 7px; opacity: 0.6; text-shadow: 0 0 5px #000"></i>
<!--Active slide--><i class="fas fa-circle mx-2" style="text-shadow: 0 0 5px #000"></i>
</p>
<!--===/// Indicators [purely aesthetic] end ///===-->
</div>
<!--===/// Additional slide end ///===-->
</div>
</div>
<!--===/// Controls ///===-->
<div class="row no-gutters mt-2">
<div class="col">
<div class="card" style="padding: 10px; border-radius: 30px 0 0 30px; border-width: 1px 0 1px 1px; border-color: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.5)">
<div class="row no-gutters">
<div class="col-4">
<p class="justify-content-between pl-2 pr-3">
<a href="#BASE" data-slide="prev"><img class="fa-flip-horizontal" src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574399_ISOXkfgYQFhmHqy.png" width="25"></a>
<a href="#BASE" data-slide="next"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574399_ISOXkfgYQFhmHqy.png" width="25"></a>
</p>
</div>
<div class="my-n1" style="border-width: 0 1px 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<div class="col">
<p class="justify-content-between px-3" style="font-size: 25px">
<a class="mb-n2" style="margin-top: -10px" href="#" data-toggle="th-favorite">
<span class="favorite toggle-favorite">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574328_c1SwrAQE2AwiKXr.png" width="25">
</span>
<span class="unfavorite toggle-favorite">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574352_AVC7CTgM30PYCuZ.png" width="25">
</span>
</a>
<!-- Comment number -->
<a data-toggle="collapse" href="#BASICS" style="font-size: 12px; color: #ffffe9; text-decoration: none"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574424_pTAU3yttAd8jqPl.png" width="25">
2
</a>
<!-- Comment number -->
</p>
</div>
<div class="my-n1" style="border-width: 0 1px 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<div class="col-auto">
<p class="justify-content-between pl-4 pr-3" style="font-size: 25px">
<i class="fas fa-ellipsis" style="text-shadow: 0 0 3px #684647, 0 0 3px #684647"></i>
</p>
</div>
</div>
</div>
</div>
<div class="card rounded-0" style="padding: 0.5px; border-width: 1px 0; border-color: rgba(0, 0, 0, 0.8); background-color: rgba(255, 255, 239, 0.5)"></div>
<div class="col-auto mx-auto">
<div class="card h-100 justify-content-center" style="padding-left: 13px; padding-right: 13px; font-size: 15px; border-width: 1px 1px 1px 0; border-radius: 0 30px 30px 0; border-color: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.7)">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</div>
<!--===/// Controls end ///===-->
<!-- Additional buttons -->
<div class="card border-0 rounded-0 bg-transparent mt-4">
<ul class="nav nav-button nav-justified justify-content-around">
<!-- Additional info -->
<li class="gallery-thumb mx-1 fa-beat" style="animation-duration: 2.5s; z-index: 5">
<div class="thumb-image justify-content-center" style="width: 65px; height: 65px; border-radius: 50%; background: rgba(0, 0, 0, 0.6)">
<!--== Link ==-->
<a href="#MORE" data-toggle="collapse" style="color: #ffffea; box-shadow: none; text-decoration: none" class="th m-auto">
<span class="card bg-transparent thumb-sensitive" style="position: absolute; top: 2.5px; left: 2.5px; height: 60px; width: 60px; border: 2px solid #ffffe9; border-radius: 50%; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent m-auto" style="width: 60px; height: 60px; border-width: 2px; border-radius: 50%; border-color: rgba(255, 255, 233, 0.4)">
<!--=== BUTTON ICON ===-->
<img class="d-block m-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/images/96614223_hbjPcwNrpN5hl0B.png" width="45">
</div>
</a>
</div>
</li>
<!-- Additional info end -->
<!-- Music -->
<li class="gallery-thumb mx-1 fa-beat" style="animation-duration: 2.5s; animation-delay: 0.5s; z-index: 5">
<div class="thumb-image justify-content-center" style="width: 65px; height: 65px; border-radius: 50%; background: rgba(0, 0, 0, 0.6)">
<!--== Link ==-->
<a href="#MUSIC" data-toggle="collapse" style="color: #ffffea; box-shadow: none; text-decoration: none" class="th m-auto">
<span class="card bg-transparent thumb-sensitive" style="position: absolute; top: 2.5px; left: 2.5px; height: 60px; width: 60px; border: 2px solid #ffffe9; border-radius: 50%; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent m-auto" style="width: 60px; height: 60px; border-width: 2px; border-radius: 50%; border-color: rgba(255, 255, 233, 0.4)">
<!--=== BUTTON ICON ===-->
<img class="d-block mx-auto mb-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/96613490_lnoBfVQLEGFLaSz.png" width="45">
</div>
</a>
</div>
</li>
<!-- Music end -->
</ul>
</div>
<!-- Additional buttons end -->
</div>
<!--===/// Comments and opinions end ///===-->
<div class="collapse fade" id="BASICS" data-parent="#WINDOW">
<div class="card rounded-0 pt-3 pb-2 pr-4 align-items-end" style="border-width: 0 0 1px 0; background: rgba(0, 0, 0, 0.7)">
<!-- Close button -->
<a data-toggle="collapse" href="#COMMENTS" style="box-shadow: none"><i class="fas fa-times" style="font-size: 25px; color: #ffffe9"></i></a>
<!-- Close button end -->
</div>
<div class="card border-0 rounded-0" style="height: 417px; color: #ffffe9; background: rgba(0, 0, 0, 0.6); scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 px-3 pb-4">
<!--/// Comment [1] ///--><!-- Copy and past this entire section to add a comment -->
<div class="card p-3 mt-3" style="border-width: 1px; border-radius: 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<!-- Name and text -->
<p><span style="color: #cdcfc3; font-size: 12px">
Commenter name</span><br>
Little section to add comments or opinions about the character from other people!
</p>
<!-- Name and text -->
<!-- Likes number -->
<div class="mt-2 mb-n2 row no-gutters align-items-center">
<img class="col-auto" style="height: 15px; width: 15px" src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574352_AVC7CTgM30PYCuZ.png">
<p class="col-auto ml-1">
0
</p>
</div>
<!-- Likes number end -->
</div>
<!--/// Comment [1] end ///-->
<!--/// Comment [2] ///--><!-- Copy and past this entire section to add a comment -->
<div class="card p-3 mt-3" style="border-width: 1px; border-radius: 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.6); overflow: hidden">
<!-- Name and text -->
<p><span style="color: #cdcfc3; font-size: 12px">
Commenter name</span><br>
It can be yours or your friends'! Just have fun lol
</p>
<!-- Name and text -->
<!-- Likes number -->
<div class="mt-2 mb-n2 row no-gutters align-items-center">
<img class="col-auto" style="height: 15px; width: 15px" src="https://f2.toyhou.se/file/f2-toyhou-se/images/96574352_AVC7CTgM30PYCuZ.png">
<p class="col-auto ml-1">
0
</p>
</div>
<!-- Likes number end -->
</div>
<!--/// Comment [2] end ///-->
</div>
</div>
</div>
<!--===/// Comments and opinions end ///===-->
</div>
</div>
<!--/// Right column sticky end ///-->
<!--/// Left column ///-->
<div class="col-md-7 mt-md-0 mt-n3 mb-md-0 mb-3">
<div class="card bg-transparent rounded-0 border-0">
<div id="MENU" class="carousel slide carousel-fade" data-ride="false" data-pause="true">
<div class="carousel-inner">
<!--===/// Main page ///===-->
<div class="carousel-item active">
<div class="card" style="padding: 23.5px; border-radius: 25px 25px 0 0; border-color: rgba(91, 92, 87, 0.4); background: rgba(0, 0, 0, 0.6)"></div>
<div class="card border-0" style="height: 420px; font-size: 20px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; background: rgba(0, 0, 0, 0.5); overflow: hidden">
<div class="p-3 my-auto" style="scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow-y: auto">
<!--/// Description button ///-->
<div class="gallery-thumb" style="padding: 3px; border-radius: 42px; background: rgba(0, 0, 0, 0.7)">
<div class="thumb-image m-0">
<a href="#MENU" data-slide-to="1" class="th" style="color: #ffffe9; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 39px; box-shadow: 0 0 20px rgba(255, 255, 233, 0.5), inset 0 0 25px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent" style="padding: 15px; width: 100%; border-width: 2px; border-radius: 39px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">Character description</p>
<!-- Line -->
<p class="text-left text-truncate" style="font-size: 15px; color: #a4a49b; display: block">
1 line long note
</p>
<!-- Line end -->
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 57px; height: 57px; border-radius: 19px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-book fa-fw" style="font-size: 35px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--/// Description button end ///-->
<!--/// Interests button ///-->
<div class="gallery-thumb" style="padding: 3px; border-radius: 42px; background: rgba(0, 0, 0, 0.7)">
<div class="thumb-image m-0">
<a href="#MENU" data-slide-to="2" class="th" style="color: #ffffe9; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 39px; box-shadow: 0 0 20px rgba(255, 255, 233, 0.5), inset 0 0 25px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent" style="padding: 15px; width: 100%; border-width: 2px; border-radius: 39px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">Interests</p>
<!-- Line -->
<p class="text-left text-truncate" style="font-size: 15px; color:#a4a49b; display: block">
1 line long note
</p>
<!-- Line end -->
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 57px; height: 57px; border-radius: 19px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-heart fa-fw" style="font-size: 35px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--/// Interests button end ///-->
<!--/// Backstory button ///-->
<div class="gallery-thumb" style="padding: 3px; border-radius: 42px; background: rgba(0, 0, 0, 0.7)">
<div class="thumb-image m-0">
<a href="#MENU" data-slide-to="3" class="th" style="color: #ffffe9; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 39px; box-shadow: 0 0 20px rgba(255, 255, 233, 0.5), inset 0 0 25px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent" style="padding: 15px; width: 100%; border-width: 2px; border-radius: 39px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">Backstory</p>
<!-- Line -->
<p class="text-left text-truncate" style="font-size: 15px; color:#a4a49b; display: block">
1 line long note
</p>
<!-- Line end -->
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 57px; height: 57px; border-radius: 19px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fad fa-bookmark fa-swap-opacity fa-fw" style="font-size: 35px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--/// Backstory button end ///-->
</div>
</div>
</div>
<!--===/// Main page end ///===-->
<!--===/// Description text ///===-->
<div class="carousel-item">
<!-- Upper card button -->
<div class="card p-3" style="border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<a data-slide-to="0" href="#MENU" style="height: 15px; width: 15px"><i class="fas fa-chevron-left" style="font-size: 20px; color: #ffffe9"></i></a>
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.1"></div>
<!-- Upper card button end -->
<!-- Content -->
<div class="card" style="height: 420px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 420px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto"><div class="card bg-transparent border-0 rounded-0 text-justify px-4 pb-4">
<!-- Header -->
<div class="row no-gutters pt-4" style="color: #ffffe9">
<div class="col-auto justify-content-center align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 57px; height: 57px; border-radius: 19px; background-color: #5b5c57">
<i class="fas fa-book" style="font-size: 35px"></i>
</div>
</div>
<div class="col-9 my-auto ml-2">
<h1 class="text-truncate">Character description</h1>
</div>
</div>
<!-- Header end -->
<div class="my-4" style="width: 70px; border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<!-- Line -->
<p class="align-items-end justify-content-start mb-1" style="font-weight: bold; color: #ffffe9;">
1 line long note
</p>
<!-- Line end -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Subheader
</span><br><!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
This is where you write the very juicy juicy juicy information about your silly little character! Whether it be describing their personality or just talk about their life, and what they do, honestly you can just go wild with this!!! Maybe you want to talk about how people perceive them? Perhaps even how their thought process functions? You can write as much [or as little] as you want!!! This box scrolls anyway so you'll never run out of space!!!
</p>
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Subheader
</span><br><!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
This is another subheader, in case you want to split the description into multiple, defined, parts. Like maybe have a description for the character through time? Starting from when they were little to now! Or even in the <em>~future~</em>,,,
</p>
</div>
</div>
</div>
<!-- Content -->
</div>
<!--===/// Description text end ///===-->
<!--===/// Interests text ///===-->
<div class="carousel-item">
<!-- Upper card button -->
<div class="card p-3" style="border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<a data-slide-to="0" href="#MENU" style="height: 15px; width: 15px"><i class="fas fa-chevron-left" style="font-size: 20px; color: #ffffe9"></i></a>
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.1"></div>
<!-- Upper card button end -->
<!-- Content -->
<div class="card" style="height: 420px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 420px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto"><div class="card bg-transparent border-0 rounded-0 text-justify px-4 pb-4">
<!-- Header -->
<div class="row no-gutters pt-4" style="color: #ffffe9">
<div class="col-auto justify-content-center align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 57px; height: 57px; border-radius: 19px; background-color: #5b5c57">
<i class="fas fa-heart" style="font-size: 35px"></i>
</div>
</div>
<div class="col-9 my-auto ml-2">
<h1 class="text-truncate">Interests</h1>
</div>
</div>
<!-- Header end -->
<div class="my-4" style="width: 70px; border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<!-- Line -->
<p class="align-items-end justify-content-start mb-1" style="font-weight: bold; color: #ffffe9;">
1 line long note
</p>
<!-- Line end -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Subheader
</span><br><!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Write about your character's silly interest, whether it's the usual ones like having fun dodging krills, or the bat shxt insane stuff like having an unhealthy obsession with gold, write at your heart's content! Let's here about this silly guy's hobbies, what do they like doing on a daily basis? Are they good at it? Are they ashamed of others learning about it? Or maybe it is such a defining trait of their personality that they would literally shut down if they ever stopped practicing it? Go wild man!!!! Infodump!!!
</p>
</div>
</div>
</div>
<!-- Content -->
</div>
<!--===/// Interests text end ///===-->
<!--===/// Backstory text ///===-->
<div class="carousel-item">
<!-- Upper card button -->
<div class="card p-3" style="border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8)">
<a data-slide-to="0" href="#MENU" style="height: 15px; width: 15px"><i class="fas fa-chevron-left" style="font-size: 20px; color: #ffffe9"></i></a>
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.1"></div>
<!-- Upper card button end -->
<!-- Content -->
<div class="card" style="height: 420px; border-width: 0 1px 1px 1px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7); overflow: hidden">
<div class="card bg-transparent border-0 rounded-0" style="height: 330px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto"><div class="card bg-transparent border-0 rounded-0 text-justify px-4 pb-4">
<!-- Header -->
<div class="row no-gutters pt-4" style="color: #ffffe9">
<div class="col-auto justify-content-center align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 57px; height: 57px; border-radius: 19px; background-color: #5b5c57">
<i class="fad fa-bookmark fa-swap-opacity" style="font-size: 35px"></i>
</div>
</div>
<div class="col-9 my-auto ml-2">
<h1 class="text-truncate">Backstory</h1>
</div>
</div>
<!-- Header end -->
<div class="my-4" style="width: 70px; border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<!-- Line -->
<p class="align-items-end justify-content-start mb-1" style="font-weight: bold; color: #ffffe9;">
1 line long note
</p>
<!-- Line end -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Subheader
</span><br><!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Write the backstory of your silly critter!!! I do recommend keeping it rather short as to not overwhelm others with text! If there is a need to have a longer backstory, I recommend using the button at the very end of this scrollbox to link a litterature or separate tab with it, so people get to choose whether or not they want to read the rest!
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>
<!-- Read more button -->
<div class="mx-4">
<div class="mb-3" style="border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<div class="justify-content-center">
<div class="gallery-thumb m-0">
<div class="thumb-image justify-content-center tooltipster" title="Read more" style="width: 57px; height: 57px; border-radius: 16px; background: rgba(0, 0, 0, 0.5)">
<!--
To "disable" the button, delete the "href" below and add "cursor: not-allowed; opacity: 0.5" in the "style"
Don't forget to add back the "href" and delete the "cursor: not-allowed; opacity: 0.5" once you want to link something to this button!
-->
<!--== Link ==-->
<a href="READ_MORE_LINK_HERE"
style="color: #ffffea; box-shadow: none; text-decoration: none" class="th m-auto">
<span class="card bg-transparent thumb-sensitive" style="position: absolute; top: 2.5px; left: 2.4px; height: 52px; width: 52px; border: 2px solid #ffffe9; border-radius: 14px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent m-auto" style="width: 52px; height: 52px; border-width: 2px; border-radius: 14px; border-color: rgba(91, 92, 87, 0.7)">
<!--=== BUTTON ICON ===-->
<i class="fas fa-book m-auto" style="font-size: 35px; color: #ffffe9"></i>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- Read more button end -->
</div>
<!-- Content -->
</div>
<!--===/// Backstory text end ///===-->
</div>
</div>
</div>
</div>
<!--/// Left column end ///-->
</div>
<!--=======/////// MAIN INFORMATION end ///////========-->
<!--=======/////// RELATIONSHIP DIVIDER ///////========-->
<div class="row no-gutters align-items-center my-3">
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, rgba(0, 0, 0, 0), #ffffe9, #ffffe9)"></div>
<div class="gallery-thumb mx-4 fa-beat" style="animation-duration: 2.5s; animation-delay: 1s; z-index: 5">
<div class="thumb-image justify-content-center tooltipster" title="Friendship constellation" style="width: 65px; height: 65px; border-radius: 50%; background: rgba(0, 0, 0, 0.6)">
<!--== Link ==-->
<a href="CONSTELLATION_TAB_OR_LINKS_SECTION_LINK_HERE"
style="color: #ffffea; box-shadow: none; text-decoration: none" class="th m-auto">
<span class="card bg-transparent thumb-sensitive" style="position: absolute; top: 2.5px; left: 2.5px; height: 60px; width: 60px; border: 2px solid #ffffe9; border-radius: 50%; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent m-auto" style="width: 60px; height: 60px; border-width: 2px; border-radius: 50%; border-color: rgba(255, 255, 233, 0.4)">
<!--=== BUTTON ICON ===-->
<img class="d-block m-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/72534752_TMp.png?1698146702" width="40">
</div>
</a>
</div>
</div>
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, #ffffe9, #ffffe9, rgba(0, 0, 0, 0))"></div>
</div>
<!--=======/////// RELATIONSHIP DIVIDER end ///////========-->
<!--=======/////// DESIGN NOTES ///////========-->
<div class="row no-gutters">
<!--/// Full body image ///--><!-- You may play with the max and min height if your image doesn't look correctly proportionned -->
<div class="col-lg-5 my-auto">
<img class="d-block mb-md-0 mb-3 mx-auto" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/69495205_Ir72I07ys8SlDvP.png
" style="max-height: 470px; min-height: 350px; object-fit: cover; object-position: center; "><!--
If the full body gets muddied with the background, add the following snippet to the style to add a white border around it:
filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-0.5px 0px 0 #fff) drop-shadow(-0px -0px 0 #fff) drop-shadow(-0px -0.5px 0 #fff)
-->
</div>
<!--/// Full body image end ///-->
<!--/// CLOSET ///-->
<div class="col">
<div class="card bg-transparent border-0 rounded-0" style="height: 507px; margin-left: -15px; margin-right: -15px">
<div id="OUTFIT-A" class="carousel slide carousel-fade" data-ride="false" data-pause="true">
<div class="carousel-inner">
<!--===/// MAIN PAGE ///===-->
<div class="carousel-item active" style="margin-right: 16px">
<div class="card p-3 mx-3 my-4 text-center" style="border-radius: 10px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<h1 class="mt-1">Outfit shrine</h1>
<p style="font-size: 15px; opacity: 0.7">Design notes</p>
</div>
<div class="row no-gutters mt-4 mx-3" style="height: 366px">
<!-- Outfits button -->
<div class="col justify-content-center">
<div class="gallery-thumb my-2">
<div class="thumb-image p-2 justify-content-center text-center" style="width: 86px; border-radius: 16px; background: rgba(0, 0, 0, 0.7)">
<a href="#OUTFIT-A" data-slide-to="1" class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="position: absolute; top: 2px; left: 2.5px; height: 150px; width: 81px; border: 2px solid #ffffe9; border-radius: 14px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 15px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div>
<p class="mb-2" style="font-size: 18px; color: #ffffe9">Outfit</p>
<img class="d-block mb-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/80032569_EsOacrJKz6JEbIG.png">
</div>
</a>
</div>
</div>
</div>
<!-- Outfits button end -->
<!-- Face button -->
<div class="col justify-content-center">
<div class="gallery-thumb my-2">
<div class="thumb-image p-2 justify-content-center text-center" style="width: 86px; border-radius: 16px; background: rgba(0, 0, 0, 0.7)">
<a href="#OUTFIT-A" data-slide-to="2" class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="position: absolute; top: 2px; left: 2.5px; height: 150px; width: 81px; border: 2px solid #ffffe9; border-radius: 14px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 15px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div>
<p class="mb-2" style="font-size: 18px; color: #ffffe9">Face</p>
<img class="d-block mb-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/80032560_ZrwKaLpidmPCrpT.png">
</div>
</a>
</div>
</div>
</div>
<!-- Face button end -->
<!-- Head button -->
<div class="col justify-content-center">
<div class="gallery-thumb my-2">
<div class="thumb-image p-2 justify-content-center text-center" style="width: 86px; border-radius: 16px; background: rgba(0, 0, 0, 0.7)">
<a href="#OUTFIT-A" data-slide-to="3" class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="position: absolute; top: 2px; left: 2.5px; height: 150px; width: 81px; border: 2px solid #ffffe9; border-radius: 14px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 15px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div>
<p class="mb-2" style="font-size: 18px; color: #ffffe9">Head</p>
<img class="d-block mb-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/80032467_KIUqIW9SO3AezEa.png">
</div>
</a>
</div>
</div>
</div>
<!-- Head button end -->
<!-- Capes button -->
<div class="col justify-content-center">
<div class="gallery-thumb my-2">
<div class="thumb-image p-2 justify-content-center text-center" style="width: 86px; border-radius: 16px; background: rgba(0, 0, 0, 0.7)">
<a href="#OUTFIT-A" data-slide-to="4" class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="position: absolute; top: 2px; left: 2.5px; height: 150px; width: 81px; border: 2px solid #ffffe9; border-radius: 14px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 15px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div>
<p class="mb-2" style="font-size: 18px; color: #ffffe9">Cape</p>
<img class="d-block mb-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/80032461_JY0FyFpFdDy1bRU.png">
</div>
</a>
</div>
</div>
</div>
<!-- Capes button end -->
<!-- Props button -->
<div class="col justify-content-center">
<div class="gallery-thumb my-2">
<div class="thumb-image p-2 justify-content-center text-center" style="width: 86px; border-radius: 16px; background: rgba(0, 0, 0, 0.7)">
<a href="#OUTFIT-A" data-slide-to="5" class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="position: absolute; top: 2px; left: 2.5px; height: 150px; width: 81px; border: 2px solid #ffffe9; border-radius: 14px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 15px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div>
<p class="mb-2" style="font-size: 18px; color: #ffffe9">Prop</p>
<img class="d-block mb-1" src="https://f2.toyhou.se/file/f2-toyhou-se/images/80032444_O4QKGFCXgNXUJJ6.png">
</div>
</a>
</div>
</div>
</div>
<!-- Props button end -->
</div>
</div>
<!--===/// MAIN PAGE end///===-->
<!--===/// OUTFITS PAGE ///===-->
<div class="carousel-item">
<div id="ACC-OUTFIT">
<div id="ACC-OUTFIT-2" class="card border-0 rounded-0 align-items-center" style="background: rgba(0, 0, 0, 0.7)">
<div class="row no-gutters">
<!-- Close button -->
<div style="position: absolute; top: 17px; right: 20px">
<a data-slide-to="0" href="#OUTFIT-A"><i class="fas fa-times" style="font-size: 25px; color: #ffffe9"></i></a>
</div>
<!-- Close button -->
<!-- Buttons -->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603077_thtEYQo0GPQ2R1Y.png" style="height: 40px;opacity: 0.6">
<div class="collapse fade show OUTFIT" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-OUTFIT-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603077_thtEYQo0GPQ2R1Y.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".OUTFIT"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358456_6g3cv2EpYvBIwJj.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade SHOES" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-OUTFIT-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358456_6g3cv2EpYvBIwJj.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".SHOES"></a>
</div>
</li>
</ul>
</div>
<!-- Buttons end -->
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.2"></div>
</div>
<div class="card border-0 rounded-0 pl-3" style="height: 450px; background: rgba(0, 0, 0, 0.6); overflow: hidden">
<!--/// PANTS TAB ///-->
<div class="collapse fade show active OUTFIT" data-parent="#ACC-OUTFIT">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Top -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Top
</span><br>
<!-- Image -->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Write a small description about the outfit your character wears! Notably the top portion! Maybe they have addtional details that don't exist in-game, or maybe you just want to describe it to be visible by screen readers or help people better understand what it looks like! You can also add an image to it if you have drawn it, or taken a screenshott of it!
</p>
<!-- Top end -->
<!-- Bottom -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Bottom
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
This part is for the bottom of the outfit, such as pants, skirt, shorts, etc! You can also add a picture to the side of the text! The text warps around it anyways.<br>
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>
<!-- Bottom end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!--Add "<br>" at the end to go back to the line, add a new p tag to jump a line-->
If the outfit has additional details that are easily forgotten by others or aren't part of the in-game model, write them here! You can basically put an image next to anything on this entire outfit shrine if you copy paste the line of code related to it lol. You can also add the body type here!<br>
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>
<!-- Details end -->
</div>
</div>
</div>
<!--/// PANTS TAB ///-->
<!--/// SHOES TABS ///-->
<div class="collapse fade SHOES" data-parent="#ACC-OUTFIT">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Shoes -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Shoes
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Pretty self explanatory, it's for the shoes!<br>
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>
<!-- Shoes end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Just in case you need to add details here!<br>
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>
<!-- Details end -->
</div>
</div>
</div>
<!--/// SHOES TAB ///-->
</div>
</div>
</div>
<!--===/// OUTFITS PAGE end ///===-->
<!--===/// FACE PAGE ///===-->
<div class="carousel-item">
<div id="ACC-FACE">
<div id="ACC-FACE-2" class="card border-0 rounded-0 align-items-center" style="background: rgba(0, 0, 0, 0.7)">
<div class="row no-gutters">
<!-- Close button -->
<div style="position: absolute; top: 17px; right: 20px">
<a data-slide-to="0" href="#OUTFIT-A"><i class="fas fa-times" style="font-size: 25px; color: #ffffe9"></i></a>
</div>
<!-- Close button -->
<!-- Buttons -->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358447_AvXVBRPZEBqf2TC.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade show MASK" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-FACE-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358447_AvXVBRPZEBqf2TC.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".MASK"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72359091_6loKsROxA4qtouq.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade ACCS-FACE" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-FACE-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72359091_6loKsROxA4qtouq.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".ACCS-FACE"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603441_NoEUznqETpxByiG.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade NECK" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-FACE-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603441_NoEUznqETpxByiG.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".NECK"></a>
</div>
</li>
</ul>
</div>
<!-- Buttons end -->
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.2"></div>
</div>
<div class="card border-0 rounded-0 pl-3" style="height: 450px; background: rgba(0, 0, 0, 0.6)">
<!--/// MASK AND FACE TAB ///-->
<div class="collapse fade show active MASK" data-parent="#ACC-FACE">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Structure -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Face structure
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Text area to write what facial feature and structure your character has!! Such as face, eye, and nose shape.<br>
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>
<!-- Structure end -->
<!-- Mask -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Mask
</span><br>
<!-- Image -->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Also a self explanatory section, just write anything about the mask they wear, or the lack thereof! Face paint also fits this category.<br>
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>
<!-- Mask end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
If your character has some specific features, such as tattoos, moles, crooked teeth, etc etc!<br>
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>
<!-- Details end -->
</div>
</div>
</div>
<!--/// MASK AND FACE TAB ///-->
<!--/// FACE ACCESSORIES TAB ///-->
<div class="collapse fade ACCS-FACE" data-parent="#ACC-FACE">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Accessories -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Accessories
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Face accessories, such as sunglasses, or any of the cosmetics in this tab in-game, fit here!<br>
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>
<!-- Accessories end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
More details!!!<br>
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>
<!-- Details end -->
</div>
</div>
</div>
<!--/// FACE ACCESSORIES TAB ///-->
<!--/// NECK ACCESSORIES TAB ///-->
<div class="collapse fade NECK" data-parent="#ACC-FACE">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Accessories neck -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Accessories
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Neck accessories!!!! For when they have something around their neck.<br>
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>
<!-- Accessories neck end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Oh yeah here's the details section!!!<br>
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>
<!-- Details end -->
</div>
</div>
</div>
<!--/// Neck accessories tab end ///-->
</div>
</div>
</div>
<!--===/// FACE PAGE end///===-->
<!--===/// HEAD PAGE ///===-->
<div class="carousel-item">
<div id="ACC-HEAD">
<div id="ACC-HEAD-2" class="card border-0 rounded-0 align-items-center" style="background: rgba(0, 0, 0, 0.7)">
<div class="row no-gutters">
<!-- Close button -->
<div style="position: absolute; top: 17px; right: 20px">
<a data-slide-to="0" href="#OUTFIT-A"><i class="fas fa-times" style="font-size: 25px; color: #ffffe9"></i></a>
</div>
<!-- Close button -->
<!-- Buttons -->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358424_KTeHcdt16OquTVN.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade show HAIR" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-HEAD-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358424_KTeHcdt16OquTVN.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".HAIR"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603451_tXV4olsXIf3MP1A.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade ACCS-HEAD" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-HEAD-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603451_tXV4olsXIf3MP1A.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".ACCS-HEAD"></a>
</div>
</li>
</ul>
</div>
<!-- Buttons end -->
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.2"></div>
</div>
<div class="card border-0 rounded-0 pl-3" style="height: 450px; background: rgba(0, 0, 0, 0.6)">
<!--/// HAIR TAB ///-->
<div class="collapse fade show HAIR" data-parent="#ACC-HEAD">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Hairstyle -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Hairstyle
</span><br>
<!-- Image -->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
Ok at this point you must have understood how these tab work!<br>
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>
<!-- Hairstyle end -->
<!-- Texture + details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Texture and details
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
This is for the hair texture and other details!!!<br>
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>
<!-- Texture + details end -->
</div>
</div>
</div>
<!--/// HAIR TAB ///-->
<!--/// HEAD ACCESSORIES TAB ///-->
<div class="collapse fade ACCS-HEAD" data-parent="#ACC-HEAD">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Hat -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Hat
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Hat end -->
<!-- Accessories hair -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Accessories
</span><br>
<!-- Image -->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Accessories hair end -->
</div>
</div>
</div>
<!--/// HEAD ACCESSORIES TAB end ///-->
</div>
</div>
</div>
<!--===/// HEAD PAGE end ///===-->
<!--===/// CAPE PAGE ///===-->
<div class="carousel-item">
<div class="card border-0 rounded-0 align-items-center" style="height: 57px; background: rgba(0, 0, 0, 0.7)">
<!-- Close button -->
<div style="position: absolute; top: 17px; right: 20px">
<a data-slide-to="0" href="#OUTFIT-A"><i class="fas fa-times" style="font-size: 25px; color: #ffffe9"></i></a>
</div>
<!-- Close button -->
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.2"></div>
<div class="card border-0 rounded-0" style="height: 450px; color: #cdcfc3; background: rgba(0, 0, 0, 0.6); scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify px-4 pb-4">
<!-- Cape -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Cape
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Cape end -->
<!-- Details -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Details
</span><br>
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Details end -->
</div>
</div>
<!--/// Details tab ///-->
</div>
<!--===/// CAPE PAGE end ///===-->
<!--===/// PROPS PAGE ///===-->
<div class="carousel-item">
<div id="ACC-PROP">
<div id="ACC-PROP-2" class="card border-0 rounded-0 align-items-center" style="background: rgba(0, 0, 0, 0.7)">
<div class="row no-gutters">
<!-- Close button -->
<div style="position: absolute; top: 17px; right: 20px">
<a data-slide-to="0" href="#OUTFIT-A"><i class="fas fa-times" style="font-size: 25px; color: #ffffe9"></i></a>
</div>
<!-- Close button -->
<!-- Buttons -->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358385_8caxhrNR0gkFChw.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade show INSTRU" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-PROP-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72358385_8caxhrNR0gkFChw.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".INSTRU"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 57px; height: 57px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603460_F1W5Ymc1aOvESjr.png" style="height: 40px; opacity: 0.6">
<div class="collapse fade PROP" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#ACC-PROP-2">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 239, 0.1), rgba(255, 255, 239, 0.3))">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96603460_F1W5Ymc1aOvESjr.png" style="margin-top: 2px; height: 40px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".PROP"></a>
</div>
</li>
</ul>
</div>
<!-- Buttons end -->
</div>
<div class="col justify-content-center" style="margin-top: -1px; border-width: 0 0 1px 0; border-style: solid; opacity: 0.2"></div>
</div>
<div class="card border-0 rounded-0 pl-3" style="height: 450px; background: rgba(0, 0, 0, 0.6)">
<!--/// INSTRUMENT TAB ///-->
<div class="collapse fade show INSTRU" data-parent="#ACC-PROP">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Main -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Main instrument
</span><br>
<!-- Image -->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Main end -->
<!-- Secondary -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Secondary instrument/prop
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Secondary end -->
</div>
</div>
</div>
<!--/// INSTRUMENT TAB ///-->
<!--/// PROP TAB ///-->
<div class="collapse fade PROP" data-parent="#ACC-PROP">
<div class="card bg-transparent border-0 rounded-0" style="height: 450px; color: #cdcfc3; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="card bg-transparent border-0 rounded-0 text-justify pl-2 pr-4 pb-4">
<!-- Main -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Main prop
</span><br>
<!-- Image -->
<img class="float-left m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Main end -->
<!-- Secondary -->
<!-- Copy paste the entire p(aragraph) tag to add a new subsection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-3 mb-n3" style="color: #ffffe9; margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Secondary prop
</span><br>
<!-- Image -->
<img class="float-right m-2" src="https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png" style="max-width: 172px">
<!-- Image end -->
<!-- Add "<br>" at the end to go back to the line, add a new p tag to jump a line -->
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>
<!-- Secondary end -->
</div>
</div>
</div>
<!--/// PROP TAB end ///-->
</div>
</div>
</div>
<!--===///PROPS PAGE end ///===-->
</div>
</div>
</div>
<!--/// CLOSET end ///-->
</div>
</div>
<!--=======/////// DESIGN NOTES end ///////========-->
</div>
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
PASTE YOUR CHARACTER CODE HERE end
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!-- Divider -->
<div class="row no-gutters mt-5 mb-4">
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, rgba(0, 0, 0, 0), #ffffea, #ffffea)"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="margin-top: -23px; font-size: 30px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
FEATURED GALLERY
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card p-3 mb-3" style="border-radius: 25px; border-width: 1px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<div class="row no-gutters align-items-center mb-2">
<div class="col-auto">
<a href="https://toyhou.se/CHARA_ID_HERE./gallery" style="font-size: 20px; font-weight: bold; color: #ffffea">
Featured images
</a>
</div>
<div class="col justify-content-center ml-2" style="color: #ffffea; border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<ul class="magnific-gallery image-gallery auto-clear gallery-row large-block-grid-6 justify-content-around">
<!--
THERE ARE 2 DIFFERENT VERSIONS OF THE FEATURED IMAGE GALLERY
The first is very basic, it simply shows the image, and when clicked on, redirects you to the gallery with its full size version, it's the simpler variant of the 2.
Can be found between the commentary "SIMPLE IMAGE SHOWCASE".
The second is way more complex, and requires being able to navigate the code and pay CLOSE ATTENTION to the commentaries left inside it. It mimicks the image viewer and is very tedious to put in place. I would not recommend this version if you do not know what you are doing or do not want to bother with this level of customisation!
Can be found between the commentary "IMAGE VIEWER MIMIC".
I HIGHLY recommend completely removing the version you will not be using so that every image has the same functionality, as well as to avoid getting lost in it, as it's VERY easy to be so. Each version has been put between commentaries as you can see below.
Side note: due to how the interactive element has been implemented, the images are slightly desaturated [by 40% more precisely]. So if you see your images being less vibrant than they actually are, it's perfectly normal!
-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SIMPLE IMAGE SHOWCASE - Delete this entire section if going unsused
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--/// Image ///--><!-- Duplicate this entire "image" section to add an image - maximum of 6 recommended -->
<li class="gallery-item">
<div class="gallery-thumb text-center">
<div class="card border-0 thumb-image" style="border-radius: 10px; background: rgba(0, 0, 0, 0.8)">
<!-- Full image link [aka paste the link from the URL found in the SEARCH BAR when you open the image viewer inside the gallery] -->
<a href="FULL_SIZE_IMAGE_LINK_FROM_GALLERY_HERE"
class="th" style="padding: 6.5px; box-shadow: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 10px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!-- Thumbnail image link from gallery [aka paste the link of the THUMBNAIL - not the full size image itself - by "click right + copy image address" on the THUMBNAIL] -->
<img src="THUMBNAIL_LINK_FROM_IMAGE_HERE"
style="max-height: 200px; border-radius: 5px; object-fit: contain; object-position: center">
</a>
</div>
</div>
</li>
<!--/// Image end ///-->
<!--===///////// SIMPLE IMAGE SHOWCASE end /////////===-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
IMAGE VIEWER MIMIC - Delete this entire section if going unsused
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--/// Image ///--><!-- Duplicate this entire "image" section to add an image - maximum of 6 recommended -->
<li class="gallery-item">
<div class="gallery-thumb text-center">
<div class="card border-0 thumb-image" style="border-radius: 10px; background: rgba(0, 0, 0, 0.8)">
<!-- Full image link [aka paste the link of the FULL SIZE image from the gallery - "click right + copy image address"] -->
<a href="FULL_SIZE_IMAGE_LINK_HERE"
class="th magnific-item" style="padding: 6.5px; box-shadow: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 10px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!-- Thumbnail image link from gallery [aka paste the link of the THUMBNAIL - not the full size image itself - by "click right + copy image address" on the THUMBNAIL] -->
<img src="THUMBNAIL_LINK_FROM_IMAGE_HERE"
style="max-height: 200px; border-radius: 5px; object-fit: contain; object-position: center">
</a>
<!--===/////// IMAGE METADATA ///////===--><!-- Feel free to remove this entire section if you don't need it -->
<div class="magnific-caption hide">
<div class="card rounded-0 border-0 mt-n1" style="color: #ffffea; background-image: url(
LINK_TO_BACKGROUND_IMAGE_HERE
); background-size: cover; background-position: center"><!-- Background link right above -->
<div class="card rounded-0 p-3" style="border-width: 2px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<!--===/// BUTTONS ///===-->
<div class="row no-gutters align-items-center mt-n2 mb-2">
<div class="col-auto"><p class="mt-3" style="font-size: 20px; font-weight: bold">Details</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto">
<ul class="nav nav-button nav-justified justify-content-left mt-1 flex-wrap">
<!--=== FULL SIZE IMAGE BUTTON ===-->
<li class="mx-1 card border-0 align-items-center" style="padding: 2px; width: 50px; height: 50px; border-radius: 11px; background: rgba(0, 0, 0, 0.8)">
<div class="gallery-item">
<div class="gallery-thumb">
<div class="card border-0 thumb-image bg-transparent" style="position: absolute; left: 2px; width: 46px; height: 46px">
<!-- Full size image link [aka copy the image ID - it's the numbers found at the end of the URL after the '#'] -->
<a href="https://toyhou.se/~images/IMAGE_ID_HERE"
class="th m-auto justify-content-center" style="padding: 6px; color: #ffffe9; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 2px solid #ffffe9; border-radius: 9px; box-shadow: 0 0 5px rgba(255, 255, 233, 0.5), inset 0 0 5px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!--=== BUTTON ICON ===-->
<i class="fas fa-link
" style="font-size: 25px"></i>
</a>
</div>
</div>
</div>
</li>
<!--=== FULL SIZE IMAGE BUTTON end ===-->
<!--=== EDIT IMAGE BUTTON ===-->
<li class="mx-1 card border-0 align-items-center" style="padding: 2px; width: 50px; height: 50px; border-radius: 11px; background: rgba(0, 0, 0, 0.8)">
<div class="gallery-item">
<div class="gallery-thumb">
<div class="card border-0 thumb-image bg-transparent" style="position: absolute; left: 2px; width: 46px; height: 46px">
<!-- Full size image link [aka copy the image ID - it's the numbers found at the end of the URL after the '#'] -->
<a href="https://toyhou.se/~images/edit/IMAGE_ID_HERE"
class="th m-auto justify-content-center" style="padding: 6px; color: #ffffe9; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 2px solid #ffffe9; border-radius: 9px; box-shadow: 0 0 5px rgba(255, 255, 233, 0.5), inset 0 0 5px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!--=== BUTTON ICON ===-->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96663874_TlSEdTha2UZZpgi.png?1741029340" width="33">
</a>
</div>
</div>
</div>
</li>
<!--=== EDIT IMAGE BUTTON end ===-->
</ul>
</div>
</div>
<!--===/// BUTTONS end ///===-->
<p class="mt-n3 mb-2" style="color: #cdcfc3">
Viewing full image.
</p>
<!--===/// OPTIONAL CAPTION ///===--><!-- Remove this entire section if going unused, or just write "No caption" -->
<div class="mt-3">
<p style="font-size: 20px; font-weight: bold">Caption</p>
<p class="mt-n2" style="color: #cdcfc3">
Caption here.
</p>
</div>
<!--===/// OPTIONAL CAPTION ///===-->
<div class="row">
<!--===/// IMAGE CREDITS ///===-->
<div class="col-md-6 mt-3">
<p style="font-size: 20px; font-weight: bold">Credits</p>
<p class="mt-n2" style="color: #cdcfc3">
<!-- Date -->
1 Jan 2024, 12:12:12 am
</p>
<p class="mx-n2 mt-n2">
<!-- Username [star/premium] -->
<a class="m-2" style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/Username">
<i class="fi-star user-name-icon"></i>Username
</a>
<!-- Username [torso/normal] -->
<a class="m-2" style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/Username">
<i class="fi-torso user-name-icon"></i>Username
</a>
<!-- Username [external link] -->
<a class="m-2" style="font-weight: bold; color: #7efdfe" href=
"EXTERNAL_LINK_HERE">
Username<i class="fa-solid fa-up-right-from-square ml-1" style="font-size: 10px"></i>
</a>
</p>
</div>
<!--===/// IMAGE CREDITS end ///===-->
<!--===/// TAGGED CHARACTERS ///===-->
<div class="col-md-6 mt-3">
<p style="font-size: 20px; font-weight: bold">Characters</p>
<div class="row no-gutters mx-n1 mt-1" style="margin-top: -12px">
<!--===/// NAME ///===--><!-- Duplicate this entire "name" section to add a character/tab/gallery -->
<div class="col-auto mx-1">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="font-weight: bold; border-radius: 8px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="LINK_TO_TAB_CHARA_OR_GALLERY_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 8px; z-index: 5"></span>
<!--=== Name ===-->
Character/tab/gallery name
</a>
</div>
</div>
</div>
<!--===/// NAME end ///===-->
</div>
</div>
<!--===/// TAGGED CHARACTERS end ///===-->
</div>
</div>
</div>
</div>
<!--===/////// IMAGE METADATA end ///////===-->
</div>
</div>
</li>
<!--/// Image end ///-->
<!--===///////// IMAGE VIEWER MIMIC end /////////===-->
</ul>
</div>
<!--===/// FEATURED GALLERY end ///===-->
</div>
<!--===////// MAIN CODE end //////===-->
</div>
</div>
<!--===///////// FOOTER /////////===-->
<div class="mt-auto" style="width: 100%">
<div class="card justify-content-center align-items-center border-0 rounded-0" style="margin-left: -1px; height: 90px; color: rgba(255, 255, 239, 0.5); background: rgba(0, 0, 0, 0.7); z-index: 50">
<p class="text-center" style="font-size: 12px; line-height: 25px">Code by FlowerlyRat layout ©
<a href="https://thatgamecompany.com/" style="color: #7efdfe">thatgamecompany</a><br>
<a href="https://toyhou.se/~about" class="mr-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">About</a>
<a href="https://toyhou.se/~faq/general" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">FAQ</a>
<a href="https://toyhou.se/~tickets" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">HelpDesk</a>
<a href="https://toyhou.se/~rules" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">Rules</a>
<a href="https://toyhou.se/~tos" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">ToS</a>
<a href="https://toyhou.se/~browse/search" class="ml-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">Search</a>
</p>
</div>
</div>
<!--===///////// FOOTER end /////////===-->
</div>
<!--====///// ADDITIONAL INFO WINDOW //////====-->
<div class="collapse fade" id="MORE" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; z-index: 1100">
<div id="ACC-ADD" class="card bg-faded border-0 rounded-0 p-3" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.5)">
<div class="mx-auto sticky-top" style="width: 55%; min-width: 360px">
<div class="card align-items-center" style="margin-top: 120px; border-radius: 25px 25px 0 0; border-width: 1px 1px 0 1px; border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.8); z-index: 5">
<!-- Close button -->
<div style="position: absolute; top: 10px; right: 25px">
<a data-toggle="collapse" href="#MORE"><i class="fas fa-times" style="font-size: 25px; color: #ffffe9"></i></a>
</div>
<!-- Close button end -->
<div class="row no-gutters">
<!-- Buttons -->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 40px; height: 40px; cursor: pointer">
<i class="far fa-lightbulb" style="font-size: 20px; opacity: 0.6"></i>
<div class="collapse fade show TRIVIA" data-parent="#ACC-ADD" style="position:absolute; top:0; left:0; right:0; bottom:0;">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: rgba(0, 0, 0, 0)">
<i class="far fa-lightbulb" style="margin-top: 2px; font-size: 20px"></i>
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none" data-toggle="collapse" data-target=".TRIVIA"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 40px; height: 40px; cursor: pointer">
<i class="far fa-heart" style="font-size: 20px; opacity: 0.6"></i>
<div class="collapse fade TASTE" data-parent="#ACC-ADD" style="position:absolute; top:0; left:0; right:0; bottom:0;">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: rgba(0, 0, 0, 0)">
<i class="far fa-heart" style="margin-top: 2px; font-size: 20px"></i>
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none" data-toggle="collapse" data-target=".TASTE"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 40px; height: 40px; cursor: pointer">
<i class="fas fa-award" style="font-size: 20px; opacity: 0.6"></i>
<div class="collapse fade RIBBONS" data-parent="#ACC-ADD" style="position:absolute; top:0; left:0; right:0; bottom:0;">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffe9; background: rgba(0, 0, 0, 0)">
<i class="fas fa-award" style="margin-top: 2px; font-size: 20px"></i>
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none" data-toggle="collapse" data-target=".RIBBONS"></a>
</div>
</li>
</ul>
</div>
<!-- Buttons end -->
</div>
</div>
<div class="card" style="height: 300px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.7); overflow: hidden">
<!--/// Trivia ///-->
<div class="collapse fade show active TRIVIA" data-parent="#ACC-ADD">
<div class="row no-gutters align-items-center mt-3 px-3 pt-3">
<div class="col-auto"><p style="font-size: 15px; font-weight: bold">Trivia</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<!-- List -->
<div class="card bg-transparent border-0 text-justify px-3 pt-3" style="height: 239px; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<ul class="list-unstyled" style="color: #cdcfc3">
<li><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>content</li>
<li><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>content</li>
<li><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>content</li>
<li><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>content</li>
<li><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>content</li>
</ul>
</div>
<!-- List -->
</div>
<!--/// Trivia end ///-->
<!--/// Tastes ///-->
<div class="collapse fade TASTE" data-parent="#ACC-ADD">
<div class="row no-gutters align-items-center mt-3 px-3 pt-3">
<div class="col-auto"><p style="font-size: 15px; font-weight: bold">Tastes</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<!-- Text -->
<div class="card bg-transparent border-0 text-justify px-3 pt-3" style="height: 239px; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="row no-gutters">
<!-- Likes -->
<div class="col-lg mr-2">
<p class="justify-content-start mt-2 mb-n3" style="margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>Likes</p><br>
<ul class="list-unstyled" style="color: #cdcfc3">
<li><i class="fas fa-genderless"></i> content</li>
<li><i class="fas fa-genderless"></i> content</li>
<li><i class="fas fa-genderless"></i> content</li>
<li><i class="fas fa-genderless"></i> content</li>
<li><i class="fas fa-genderless"></i> content</li>
</ul>
</div>
<!-- Likes -->
<!-- Dislikes -->
<div class="col-lg">
<p class="justify-content-start mt-2 mb-n3" style="margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>Dislikes</p><br>
<ul class="list-unstyled" style="color: #cdcfc3">
<li><i class="fas fa-times"></i> content</li>
<li><i class="fas fa-times"></i> content</li>
<li><i class="fas fa-times"></i> content</li>
<li><i class="fas fa-times"></i> content</li>
<li><i class="fas fa-times"></i> content</li>
</ul>
</div>
<!-- Dislikes -->
</div>
</div>
<!-- Text -->
</div>
<!--/// Tastes end ///-->
<!--/// Ribbons ///-->
<div class="collapse fade RIBBONS" data-parent="#ACC-ADD">
<div class="row no-gutters align-items-center mt-3 px-3 pt-3">
<div class="col-auto"><p style="font-size: 15px; font-weight: bold">Ribbons</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<div class="card bg-transparent border-0 text-justify px-3 pt-3" style="height: 239px; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<!--/// SECTION 1 ///--><!-- Duplicate this entire section to add a new ribbon collection -->
<!-- Subheader -->
<p><span class="justify-content-start mt-2" style="margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Name of ribbon collection
</span></p>
<div class="row no-gutters text-center mb-3">
<!-- ||[ 0 ]|| = 1 ribbon -->
<!-- ||[ 1 ]|| --><!-- Duplicate this entire section to add a new ribbon -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 1 ]|| -->
<!-- ||[ 2 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 2 ]|| -->
<!-- ||[ 3 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 3 ]|| -->
<!-- ||[ 4 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 4 ]|| -->
<!-- ||[ 5 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 5 ]|| -->
<!-- ||[ 6 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 6 ]|| -->
</div>
<!--/// SECTION 1 ///-->
<!--/// SECTION 2 ///-->
<!-- Subheader -->
<p><span class="justify-content-start mt-2" style="margin-left: 1px"><i class="fas fa-circle my-auto mr-1" style="font-size: 10px"></i>
Name of ribbon collection
</span></p>
<div class="row no-gutters text-center mb-3">
<!-- ||[ 0 ]|| = 1 ribbon -->
<!-- ||[ 1 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 1 ]|| -->
<!-- ||[ 2 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 2 ]|| -->
<!-- ||[ 3 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 3 ]|| -->
<!-- ||[ 4 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 4 ]|| -->
<!-- ||[ 5 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 5 ]|| -->
<!-- ||[ 6 ]|| -->
<div class="col-2 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 6 ]|| -->
</div>
<!--/// SECTION 2 ///-->
<!--
Dont mind this random p tag,,, its the only solution I found for the different ribbon sections to have the same margin between the title and the ribbons smh
If you delete it, you'll notice the very last section doesn't have the same margin, and I do not know why
-->
<p></p>
</div>
</div>
<!--/// Ribbons end ///-->
<div class="row no-gutters" style="position: absolute; bottom: -3px; left: 27px; right: 27px; opacity: 0.3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
</div>
</div>
</div>
<!--====///// ADDITIONAL INFO WINDOW end //////====-->
<!--====///// MUSIC WINDOW //////====-->
<div class="collapse fade" id="MUSIC" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; z-index: 1100">
<div class="card bg-faded border-0 rounded-0 p-3" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.5)">
<div class="mx-auto sticky-top" style="padding-top: 74px">
<!--////// VOICE CLAIM + THEME + PLAYLIST //////-->
<div style="max-width: 440px; border-radius: 20px; overflow: hidden"><div class="card bg-faded mx-auto pt-3" style="border-radius: 20px; border-width: 1px; border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.8)">
<!-- Close button -->
<div style="position: absolute; top: 10px; right: 15px">
<a data-toggle="collapse" href="#MUSIC"><i class="fas fa-times" style="font-size: 25px; color: #ffffe9"></i></a>
</div>
<!-- Close button end -->
<h1 class="text-center">Audio Settings</h1>
<div class="px-4 py-3" style="max-height: 400px; overflow: auto; scrollbar-width: thin; scrollbar-color: #afb1b0 rgba(0, 0, 0, 0)">
<!--/// VOICE CLAIM ///-->
<div class="row no-gutters mb-2 align-items-center">
<div class="col">
<p class="text-truncate" style="font-weight: bold">
Voice claim
</p>
</div>
<div class="col-auto ml-auto">
<div class="card border-0 p-2" style="border-radius: 40px; background: #3fb452">
<div class="row no-gutters align-items-center">
<div class="tooltipster" title="
Voice name - source
"><!-- Please also change the tooltip, so that when it gets cut off, people can still see the full name by hovering over or clicking on it -->
<p class="text-truncate ml-1 mt-n1" style="width: 220px; font-size: 12px">
<!-- Title -->
Voice name
</p><p class="text-truncate ml-3 mb-n1" style="width: 200px; font-size: 10px; font-style: oblique; margin-top: -17px; opacity: 0.7">
<!-- Source -->
source of voice
</p>
</div>
<div class="col-auto align-items-center">
<i class="fas fa-play-circle" style="font-size: 20px"></i>
<span>
<!-- YOUTUBE VIDEO ID -->
<iframe class="flex-fill" style="position: absolute; top: -4px; right: -3px; width: 40px; height: 25px; opacity: 0.0001" frameborder="0" src="
https://www.youtube.com/embed/VIDEO_ID?ps=docs&controls=1
"></iframe>
<!-- YOUTUBE VIDEO ID end -->
</span>
</div>
</div>
</div>
</div>
</div>
<!--/// VOICE CLAIM end ///-->
<!--/// MUSIC THEME ///-->
<div class="row no-gutters mb-2 align-items-center">
<div class="col">
<p class="text-truncate" style="font-weight: bold">
Music theme
</p>
</div>
<div class="col-auto ml-auto">
<div class="card border-0 p-2" style="border-radius: 40px; background: #3fb452">
<div class="row no-gutters align-items-center">
<div class="tooltipster" title="
Song title - artist
"><!-- Please also change the tooltip, so that when it gets cut off, people can still see the full name by hovering over or clicking on it -->
<p class="text-truncate ml-1 mt-n1" style="width: 220px; font-size: 12px">
<!-- Title -->
Song title
</p><p class="text-truncate ml-3 mb-n1" style="width: 200px; font-size: 10px; font-style: oblique; margin-top: -17px; opacity: 0.7">
<!-- Source -->
artist
</p>
</div>
<div class="col-auto align-items-center">
<i class="fas fa-play-circle" style="font-size: 20px"></i>
<span>
<!-- YOUTUBE VIDEO ID -->
<iframe class="flex-fill" style="position: absolute; top: -4px; right: -3px; width: 40px; height: 25px; opacity: 0.0001" frameborder="0" src="
https://www.youtube.com/embed/VIDEO_ID?ps=docs&controls=1
"></iframe>
<!-- YOUTUBE VIDEO ID end -->
</span>
</div>
</div>
</div>
</div>
</div>
<!--/// MUSIC THEME end ///-->
<!--//////////// PLAYLIST ////////////-->
<!--
Feel free to delete certain parts of this section if you don't like how it looks!
Such as the divider, description, link to outside platform, or the songs themselves
-->
<!-- Divider -->
<div class="row no-gutters mt-3 mb-2">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<!-- Divider end -->
<!--/// TEXT ///-->
<p class="mb-3" style="color: #cdcfc3; text-align: justify">
Short playlist description
</p>
<!--/// TEXT end ///-->
<!--/// LINK TO OUTSIDE PLATFORM ///-->
<div class="row no-gutters mb-2 align-items-center">
<div class="col">
<p class="text-truncate" style="font-weight: bold">
Playlist link
</p>
</div>
<div class="col-auto ml-auto">
<div class="card border-0 p-2" style="border-radius: 40px; background: #3fb452">
<div class="row no-gutters align-items-center">
<div class="tooltipster" title="
Playlist name - platform
"><!-- Please also change the tooltip, so that when it gets cut off, people can still see the full name by hovering over or clicking on it -->
<p class="text-truncate ml-1 mt-n1" style="width: 220px; font-size: 12px">
<!-- Title -->
Playlist name
</p><p class="text-truncate ml-3 mb-n1" style="width: 200px; font-size: 10px; font-style: oblique; margin-top: -17px; opacity: 0.7">
<!-- Source -->
platform
</p>
</div>
<div class="col-auto align-items-center">
<a
href="PLAYLIST_LINK_GOES_HERE"
><i class="fas fa-external-link-square-alt mt-1" style="font-size: 20px; color: #ffffe9"></i></a>
</div>
</div>
</div>
</div>
</div>
<!--/// LINK TO OUTSIDE PLATFORM end ///-->
<!--/// IN-TOYHOUSE PLAYLIST ///-->
<!--/// [1] ///--><!-- Duplicate this entire senction to add a new song -->
<div class="row no-gutters mb-2 align-items-center">
<div class="col">
<!-- SONG NAME --> <!-- Please also change the tooltip for the name, so that when it gets cut off, people can still see the full name by hovering over or clicking on it -->
<a class="tooltipster" title="
Song name
"><p class="text-truncate" style="font-weight: bold; width: 170px">
Song name
</p></a>
<!-- SONG NAME end -->
</div>
<div class="col-auto ml-auto">
<div class="card border-0 p-2" style="border-radius: 40px; background: #3fb452">
<div class="row no-gutters align-items-center">
<!-- ARTIST NAME -->
<div class="col tooltipster" title="
Artist name
"><!-- Please also change the tooltip for the name, so that when it gets cut off, people can still see the full name by hovering over or clicking on it -->
<p class="text-truncate" style="width: 170px; font-size: 12px">
Artist name
</p>
</div>
<!-- ARTIST NAME end -->
<div class="col-auto align-items-center">
<i class="fas fa-play-circle" style="font-size: 20px"></i>
<span>
<!-- YOUTUBE VIDEO ID -->
<iframe class="flex-fill" style="position: absolute; top: -4px; right: -3px; width: 40px; height: 25px; opacity: 0.0001" frameborder="0" src="
https://www.youtube.com/embed/VIDEO_ID?ps=docs&controls=1
"></iframe>
<!-- YOUTUBE VIDEO ID end -->
</span>
</div>
</div>
</div>
</div>
</div>
<!--/// [1] ///-->
<!--/// IN-TOYHOUSE PLAYLIST ///-->
<!--//////////// PLAYLIST end ////////////-->
</div>
</div></div>
<!--////// VOICE CLAIM + THEME + PLAYLIST end //////-->
</div>
</div>
</div>
<!--====///// MUSIC WINDOW end //////====-->
<!--====/////CREDITS WINDOW//////====-->
<div class="collapse fade" id="CREDIT" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; color: #ffffea; z-index: 1100">
<div id="ACC-CREDIT" class="card bg-faded border-0 rounded-0 p-3" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.7)">
<div class="mx-auto sticky-top" style="min-width: 55%">
<div class="card align-items-center" style="margin-top: 120px; border-radius: 25px 25px 0 0; border-width: 1px 1px 0 1px; border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.8); z-index: 5">
<!--Close button-->
<div style="position: absolute; top: 10px; right: 25px">
<a data-toggle="collapse" href="#CREDIT"><i class="fas fa-times" style="font-size: 25px; color: #ffffea"></i></a>
</div>
<!--Close button end-->
<div class="row no-gutters">
<!--Buttons-->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 40px; height: 40px; cursor: pointer">
<i class="far fa-code" style="font-size: 20px; color: #ffffea; opacity: 0.6; text-shadow: 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745"></i>
<div class="collapse fade show CODE" data-parent="#ACC-CREDIT" style="position:absolute; top:0; left:0; right:0; bottom:0;">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea;background: rgba(0, 0, 0, 0)">
<i class="far fa-code" style="margin-top: 2px; font-size: 20px; color: #ffffea; text-shadow: 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745"></i>
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none" data-toggle="collapse" data-target=".CODE"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 40px; height: 40px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96599998_5kOvqGuUpH9aIfH.png" width="25px" style="opacity: 0.6">
<div class="collapse fade IMAGE" data-parent="#ACC-CREDIT" style="position:absolute; top:0; left:0; right:0; bottom:0;">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea;background: rgba(0, 0, 0, 0)">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96599998_5kOvqGuUpH9aIfH.png" width="25px" style="margin-top: 2px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none" data-toggle="collapse" data-target=".IMAGE"></a>
</div>
</li>
</ul>
</div>
<!--Buttons end-->
</div>
</div>
<div class="card p-3 pb-4" style="height: 300px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.7)">
<!--///Code credits///-->
<div class="collapse fade show active CODE" data-parent="#ACC-CREDIT">
<div class="row no-gutters align-items-center mt-3">
<div class="col-auto"><p style="font-size: 15px; font-weight: bold">Code credits</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<!--Text-->
<p class="mt-4">
<b>Code:</b> <a style="font-weight: bold; color: #7efdfe" href="https://toyhou.se/FlowerlyRat"><i class="fi-torso user-name-icon"></i>FlowerlyRat</a><br>
<b>Layout:</b> Based on the game Sky: Children of the Light's UI<br>
<b>Other codes:</b> <a style="font-weight: bold; color: #ff7e01" href="https://toyhou.se/FlowerlyRat/characters/folder:4673560">Folder</a>
</p>
<!--Text end-->
</div>
<!--///Code credits///-->
<!--///Image credits///-->
<div class="collapse fade IMAGE" data-parent="#ACC-CREDIT">
<div class="row no-gutters align-items-center mt-3">
<div class="col-auto"><p style="font-size: 15px; font-weight: bold">Image credits</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<!--Text-->
<p class="mt-4">
<b>Background image:</b> Sky: Children of the Light © thatgamecompany<br>
<b>Icons:</b> <a href="https://fontawesome.com/v6/search" style="font-weight: bold; color: #ff7e01">FontAwesome</a>, Sky: Children of the Light<br>
<b>Flags/ribbons:</b> taken from CoraMagics' <a href="https://toyhou.se/20187371." style="font-weight: bold; color: #ff7e01">Ribbon Masterlist</a>
</p>
<!--Text end-->
</div>
<!--///Image credits///-->
<div class="row no-gutters" style="position: absolute; bottom: -3px; left: 27px; right: 27px; opacity: 0.3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
</div>
</div>
</div>
<!--====/////CREDITS WINDOW end//////====-->
</div>
</div>
<!-- Code container -->
</div>
</div>
</div>
</div>Copy
PLEASE COME BACK AT A LATER DATE, THANK YOU FOR YOUR UNDERSTANDING!
Copy
<!--
╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
△▽/╱╱╱╱╱╱╱╱╱╱╱╰━╯
Ultimate Sky: Children of the Light profile bundle [CSS emulator V1]: code by FlowerlyRat || Inspired from TheFaerieMerchant's CSS emulators || Based on the game Sky: Children of the Light's UI by ThatGameCompany
> It is HIGHLY recommended to use circlejourney's ToyHouse live editor to see what you're doing!!!! -> https://th.circlejourney.net/
Any links added use the following formats [target="_blank" is optional]:
Blue variant [to link characters, groups, species, and entities]:
<a style="font-weight: bold; color: #7efdfe" href="LINK_HERE">text_here</a>
Orange variant [to link everything else]:
<a style="font-weight: bold; color: #ff7e01" href="LINK_HERE">text_here</a>
Any areas that need the character's ID have the "CHARA_ID_HERE" placeholder -> to replace everything at once, highlight "CHARA_ID_HERE", then do ctrl+F and replace it with your character's.
Pop-up for the credits collapsible is at the end of the code.
Code should be compatible with any and all other HTML codes, I have tested it with over 80 codes, from multiple creators, to make sure of it. If adding one breaks the format, this means the HTML you chose has open tags that have been forgotten. To fix the issue simply add said tags, generally its one or multiple "</div>" at the end of it
Some codes have an additonal "margin-top: -0px"/"mt-n0", "margin-left: -0px"/"ml-n0" or "margin-right: -0px"/"mr-n0" at the beginning of their codes, these might break the formatting so please remove them.
If the one you chose has a colored background that is bootstrap color and clashes with the emulator, find the "card" element responsible for it and add "bg-transparent" to the div's class.
> I cannot guarantee compatibility with actual custom CSS codes.
Code is compatible with the "Sky: Children of the Light candle UI" add-on.
Instructions to add them is given in the profile itself -> https://toyhou.se/23648694.misc-sky-cotl-candle-ui/25906098.
Code is also compatible with the "Sky quests!" add-on.
To add it, please copy and paste the code between the "FUN LINKS" commentaries below, between the "MAIN CHARACTER CODE HERE" commentaries.
-> https://toyhou.se/32862504.snip-sky-quests/32862518.code
Multiple background images have been screenshoted from the game to give a wide variety of possibilities [ToyHouse gallery: https://toyhou.se/25042050./gallery || Google Drive: https://drive.google.com/drive/folders/12YBvvXe9MoIYj9oUo8MVpngCojj8vCv3?usp=sharing], however if none of them suit your taste or vision, please go on and take your own in-game.
!!! TO BE WARNED !!!
This code has a hidden section intended for mobile users, so be sure to also modify it with the sidebar!
-->
<div class="flex-row justify-content-end sp-top-inner" style="left: -40vw; z-index: 5">
<div style="width: 100vw">
<div class="ml-md-3">
<!--///BACKGROUND IMAGE///-->
<div class="card bg-dark rounded-0 border-0 col-lg-12" style="overflow: hidden; position: fixed; bottom: 0; top: 0; left: 0; background-image: url(
LINK_TO_BACKGROUND_IMAGE_HERE
); background-size: cover; background-position: center"></div>
<div class="row no-gutters">
<!-- Code container -->
<div class="col-12 ">
<div class="card bg-transparent border-0 rounded-0 mx-auto">
<div class="card bg-transparent rounded-0 border-0" style=" min-height: 100vh">
<div class="container p-3" style="max-width: 100%">
<div class="row no-gutters">
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
COMPUTER SIDEBAR
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-md-2 hidden-sm-down" style="margin-bottom: -75px; color: #ffffea">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
AVATAR [computer]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-auto" style="height: 150px; width: 150px">
<div class="card bg-dark border-0 p-0" style="position: absolute; height: 115px; width: 115px; border-radius: 50%; z-index: 1; background: url(
AVATAR_IMAGE_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"><!--PFP IMAGE LINK ABOVE--></div>
<!--///Outer frame///--><!--Check [https://toyhou.se/23579684.misc-sky-cotl-avatar-frame] for more borders and meaning explanation-->
<img class="d-block mx-auto my-auto" style="position: absolute; opacity: 1; z-index: 5" src=
"https://f2.toyhou.se/file/f2-toyhou-se/images/71211585_IQYjqdDDaiOOeid.png">
<!--///Inner spinning frame///--><!-- Feel free to delete -->
<div class="align-items-center justify-content-center" style="position: absolute; width: 123px; z-index: 5">
<i class="fa-spin" style="animation-duration: 26s; opacity: 1"><img class="d-block mx-auto my-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/images/71211558_s1BGtB1nlee2eVn.png"></i>
</div>
<!--///Inner spinning frame end///-->
</div>
<!--===////// AVATAR end //////===-->
<div class="card p-2" style="top: -77px; border-radius: 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER NAME [computer]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE."
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-sparkles fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// CHARACTER NAME [computer] end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
FOLDER LINK
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/FlowerlyRat/characters/folder:FOLDER_ID"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Folder name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-folder fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// FOLDER LINK end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BLURB [computer]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card" style="padding: 15px; font-size: 0.8em; color: #cdcfc3; border-radius: 23px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<p>
This is a blurb, feel free to delete it tho
</p>
</div>
<!--===////// BLURB [computer] end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SOCIAL LINKS [computer] - duplicate the "SOCIAL LINK" section to add a platform - can be used to add links to an Art Fight profile, playlist, etc
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<ul class="nav nav-button nav-justified justify-content-around mt-2 flex-wrap">
<!--=== SOCIAL LINK ===-->
<li>
<div class="gallery-thumb">
<div class="thumb-image justify-content-center align-items-center" style="width: 35px; height: 35px; font-weight: bold; border-radius: 10px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="SOCIAL_LINK_HERE" title="SOCIAL_NAME_HERE"
class="th tooltipster" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 10px; box-shadow: 0 0 8px rgba(255, 255, 233, 0.5), inset 0 0 8px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!--=== BUTTON ICON ===-->
<i class="fas fa-link
" style="font-size: 13px"></i>
</a>
</div>
</div>
</li>
<!--=== SOCIAL LINK end===-->
</ul>
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BONUS LINKS [computer] - duplicate the "ADDITIONAL SIDE LINK" section to add a link
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--===////// ADDITIONAL SIDE LINK //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="LINK_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Link name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-link fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// ADDITIONAL SIDE LINK end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SIDEBAR BUTTONS - tabs require their own links with their own ID
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--===////// TAB 1 //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="LINK_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Tab 1
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-bookmark fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// TAB 1 end //////===-->
<div class="my-1 mb-2 mx-2" style="border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<!--===////// TAB 2 //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="LINK_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Tab 2
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="far fa-bookmark fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// TAB 2 end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--===////// GALLERY //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./gallery"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Gallery
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-image fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// GALLERY end //////===-->
<!--===////// LIBRARY //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./literatures"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Library
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-book fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// LIBRARY end //////===-->
<!--===////// WORLDS //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./worlds"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Worlds
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-globe fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// WORLDS end //////===-->
<!--===////// LINKS //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./links"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Links
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-link fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// LINKS end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--===////// COMMENTS //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./comments"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Comments
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-comment fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// COMMENTS end //////===-->
<!--===////// FAVORITE //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./comments"
class="th" data-toggle="th-favorite" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="favorite toggle-favorite" style="position: absolute; top: 8px; right: 13px; z-index: 5">
<span style="position: absolute; left: -184px">Favorite</span>
<i class="fal fa-sparkle"></i>
</span>
<span class="unfavorite toggle-favorite" style="position: absolute; top: 8px; right: 13px; z-index: 5">
<span style="position: absolute; left: -184px">Unfavorite</span>
<i class="fas fa-sparkle"></i>
</span>
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9"></div>
<div class="col justify-content-end align-items-center">
<div class="card border-0" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57"></div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// FAVORITE end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--===////// OWNERSHIP //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./ownership"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Ownership
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-check-square fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// OWNERSHIP end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--===////// REPORT //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/~tickets/create/character/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Report
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-warning fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// REPORT end //////===-->
<!--===////// BLOCK //////===-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./block"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Block
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-cancel fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// BLOCK end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<div class="accordion container p-0" id="accordion">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="#MANAGE"
class="th" data-toggle="collapse" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Manage character
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-caret-right fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div id="MANAGE" class="collapse" data-parent="#accordion">
<!--===AVATAR===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/avatar/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Avatar
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-image fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===AVATAR end===-->
<!--===EDIT PROFILE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/edit/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Edit profile
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-pencil fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===EDIT PROFILE end===-->
<!--===TABS===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/tabs/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Tabs
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-bookmark fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===TABS end===-->
<!--===HISTORY===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/history/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
History
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-history fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===HISTORY end===-->
<div class="my-3 ml-3" style="border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<!--===WARNINGS===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/warnings/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Warnings
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-warning fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===WARNINGS end===-->
<!--===ACCESS KEYS===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/keys/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Access keys
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-key fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===ACCESS KEYS end===-->
<!--===TRADE LISTING===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/trade-listing/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Trade listing
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-handshake fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===TRADE LISTING end===-->
<div class="my-3 ml-3" style="border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<!--===DELETE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/delete/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Delete
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-trash fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===DELETE end===-->
</div>
<!--=== CHARACTER end ===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
IMAGES
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="#MANAGE-IMG"
class="th" data-toggle="collapse" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Manage images
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-caret-right fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div id="MANAGE-IMG" class="collapse" data-parent="#accordion">
<!--===UPLOAD IMAGE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~images/upload/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Upload image
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-plus fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===UPLOAD IMAGE end===-->
<!--===MANAGE IMAGES===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~images/manage-character/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Manage images
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-image fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===MANAGE IMAGES end===-->
<!--===SORT IMAGES===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~images/sort/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Sort images
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-random fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===SORT IMAGES end===-->
</div>
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
LITERATURES
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0 mb-1" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="#MANAGE-LIT"
class="th" data-toggle="collapse" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Manage literatures
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-caret-right fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div id="MANAGE-LIT" class="collapse" data-parent="#accordion">
<!--===ADD LITERATURE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~literatures/create/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Upload literature
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-plus fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===ADD LITERATURE end===-->
<!--===SORT LITERATURE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~literatures/sort/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Sort literatures
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-random fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===SORT LITERATURE end===-->
</div>
<!--=== LITERATURES end ===-->
</div>
</div>
</div>
<!--===/////////////////////////////////// COMPUTER SIDEBAR end ///////////////////////////////////===-->
<!--===////// MAIN CODE //////===-->
<div class="col-md-10 mx-auto pl-md-3 h-100">
<!-- Utility buttons -->
<ul class="nav nav-button align-items-center justify-content-end mt-3 mr-2" style="margin-bottom: 22px">
<!--///Creation information button///-->
<li class="mx-4">
<a data-toggle="collapse" href="#CREA" style="box-shadow: none; color: #ffffea">
<i class="fa fa-info-circle mt-1" style="font-size: 30px; color: #fdf8da; text-shadow: 0 0 2px #713745, 0 0 2px #713745"></i>
</a>
</li>
<!--Credits button-->
<li>
<a data-toggle="collapse" href="#CREDIT">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96600008_K9c0uSM4k7pfpXi.png" width="35">
</a>
</li>
</ul>
<!-- Utility buttons -->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
UPPER CARD ON PHONE
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
AVATAR [phone]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-auto hidden-sm-up" style="margin-top: -70px; height: 150px; width: 150px">
<div class="card bg-dark border-0 p-0" style="position: absolute; height: 115px; width: 115px; border-radius: 50%; z-index: 1; background: url(
AVATAR_IMAGE_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"><!--PFP IMAGE LINK ABOVE--></div>
<!--///Outer frame///--><!--Check [https://toyhou.se/23579684.misc-sky-cotl-avatar-frame] for more borders and meaning explanation-->
<img class="d-block mx-auto my-auto" style="position: absolute; opacity: 1; z-index: 5" src=
"https://f2.toyhou.se/file/f2-toyhou-se/images/71211585_IQYjqdDDaiOOeid.png">
<!--///Inner spinning frame///--><!-- Feel free to delete -->
<div class="align-items-center justify-content-center" style="position: absolute; width: 123px; z-index: 5">
<i class="fa-spin" style="animation-duration: 26s; opacity: 1"><img class="d-block mx-auto my-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/images/71211558_s1BGtB1nlee2eVn.png"></i>
</div>
<!--///Inner spinning frame end///-->
</div>
<!--===////// AVATAR end //////===-->
<div class="card p-2 mx-auto hidden-sm-up mb-4" style="margin-top: -76px; width: 100%; color: #ffffea; border-radius: 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER NAME [phone]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE."
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-sparkles fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// CHARACTER NAME [phone] end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BLURB [phone]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card" style="padding: 15px; font-size: 0.8em; color: #cdcfc3; border-radius: 23px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<p>
This is a blurb, feel free to delete it tho
</p>
</div>
<!--===////// BLURB [phone] end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SOCIAL LINKS [computer] - duplicate the "SOCIAL LINK" section to add a platform - can be used to add links to an Art Fight profile, playlist, etc
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<ul class="nav nav-button nav-justified justify-content-around mt-2 flex-wrap">
<!--=== SOCIAL LINK ===-->
<li>
<div class="gallery-thumb">
<div class="thumb-image justify-content-center align-items-center" style="width: 35px; height: 35px; font-weight: bold; border-radius: 10px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="SOCIAL_LINK_HERE" title="SOCIAL_NAME_HERE"
class="th tooltipster" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 10px; box-shadow: 0 0 8px rgba(255, 255, 233, 0.5), inset 0 0 8px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!--=== BUTTON ICON ===-->
<i class="fas fa-link
" style="font-size: 13px"></i>
</a>
</div>
</div>
</li>
<!--=== SOCIAL LINK end===-->
</ul>
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BONUS LINKS [phone] - duplicate the "ADDITIONAL SIDE LINK" section to add a link
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--===////// ADDITIONAL SIDE LINK //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="LINK_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Link name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-link fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// ADDITIONAL SIDE LINK end //////===-->
</div>
<!--===/// UPPER CARD PHONE end ///===-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER CREATION INFO
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="collapse fade mt-1 mb-3" id="CREA" style="color: #ffffea">
<div class="col row no-gutters hidden-sm-up mt-n2 mb-3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<div class="row no-gutters">
<div class="col-md-9 card order-md-2 px-3" style="border-radius: 8px; border-width: 1px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<!--Close button-->
<div class="justify-content-end mt-3">
<a data-toggle="collapse" href="#CREA"><i class="fas fa-times" style="font-size: 25px; color: #ffffea"></i></a>
</div>
<!--Close button end-->
<div class="row">
<!--===/// CREATION INFO ///===-->
<div class="col-md-5 pr-3 mr-n2" style="height: 155px; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<!--===CREATED===-->
<div class="row mb-2">
<div class="col-4" style="font-weight: bold">
<p>Created</p>
</div>
<div class="col">
<!--Date-->
<p>
1 Jan 2024, 1:20:30 am
</p>
</div>
</div>
<!--===CREATED end===-->
<!--===CREATOR===-->
<div class="row mb-2">
<div class="col-4" style="font-weight: bold">
<p>Creator</p>
</div>
<div class="col">
<!--Username-->
<a style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/Username">
<i class="fi-star user-name-icon"></i>Username
</a>
</div>
</div>
<!--===CREATOR end===-->
<!--===DESIGNERS===-->
<div class="row mb-2">
<div class="col-4" style="font-weight: bold">
<p>Designers</p>
</div>
<div class="col">
<!--Username-->
<!--Username [external link]-->
<a style="font-weight: bold; color: #7efdfe" href=
"EXTERNAL_LINK_HERE">
Username<i class="fa-solid fa-up-right-from-square ml-1" style="font-size: 10px"></i>
</a>
</div>
</div>
<!--===DESIGNERS end===-->
<!--===OWNER===-->
<div class="row mb-2">
<div class="col-4" style="font-weight: bold">
<p>Owner</p>
</div>
<div class="col">
<!--Username-->
<a style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/Username">
<i class="fi-torso user-name-icon"></i>Username
</a>
</div>
</div>
<!--===OWNER end===-->
</div>
<!--===/// CREATION INFO end ///===-->
<!--===/// Divider ///===-->
<div class="col row no-gutters hidden-sm-up my-2 mb-3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<div class="col-auto hidden-sm-down mr-n4">
<div style="height: 41%; border-width: 0 0 0 1px; border-style: solid"></div>
<div class="border-0 rounded-0 my-1">
<p style="margin-left: -3.4px; font-size: 10px">◆</p>
</div>
<div style="height: 41%; border-width: 0 0 0 1px; border-style: solid"></div>
</div>
<!--===/// Divider end ///===-->
<!--===/// TAGS ///===-->
<div class="col-md card bg-transparent border-0 rounded-0">
<div class="pr-3 mr-n3" style="height: 155px; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<!--Tag 1-->
<div class="card border-0 px-1 mb-1" style="border-radius: 5px; background: #ffffea; display: inline-block">
<a style="font-weight: bold; color: #000" href=
"TAG_LINK_HERE">
tag 1
</a>
</div>
<!--Tag 1 end-->
<!--Tag 2-->
<div class="card border-0 px-1 mb-1" style="border-radius: 5px; background: #ffffea; display: inline-block">
<a style="font-weight: bold; color: #000" href=
"TAG_LINK_HERE">
tag 2
</a>
</div>
<!--Tag 2 end-->
<!--Tag 3-->
<div class="card border-0 px-1 mb-1" style="border-radius: 5px; background: #ffffea; display: inline-block">
<a style="font-weight: bold; color: #000" href=
"TAG_LINK_HERE">
tag 3
</a>
</div>
<!--Tag 3 end-->
</div>
</div>
<!--===/// TAGS end ///===-->
</div>
</div>
<div class="col-md card mr-md-2 mt-md-0 mt-2 order-md-1" style="height: 200px; border-radius: 8px; border-width: 1px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<div class="card bg-transparent border-0 rounded-0 my-auto p-3" style="height: 200px; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="row no-gutters text-center">
<!--===/// Creator ribbons ///===-->
<!-- ||[ 1 ]|| -->
<div class="col-4 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description"><!-- Don't make the tooltips too long, otherwise they won't display! -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 1 ]|| -->
<!--===/// Creator ribbons end ///===-->
</div>
</div>
</div>
</div>
<div class="col row no-gutters hidden-sm-up mt-3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
<!--===/// CHARACTER CREATION INFO end ///===-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
PASTE YOUR CHARACTER CODE HERE
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--=======/////// FUN LINKS ///////========-->
<!--=======/////// FUN LINKS end ///////========-->
<!-- [REMINDER]
If adding the code breaks the format, this means the HTML you chose has open tags that have been forgotten. To fix the issue simply add said tags, generally its one or multiple "</div>" at the end of it
Some codes have an additonal "margin-top: -0px"/"mt-n0", "margin-left: -0px"/"ml-n0" or "margin-right: -0px"/"mr-n0" at the beginning of their codes, these might break the formatting so please remove them.
If the one you chose has a colored background that is bootstrap color and clashes with the emulator, find the "card" element responsible for it and add "bg-transparent" to the div's class.
> I cannot guarantee compatibility with actual custom CSS codes.
-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
PASTE YOUR CHARACTER CODE HERE end
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!-- Divider -->
<div class="row no-gutters mt-5 mb-4">
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, rgba(0, 0, 0, 0), #ffffea, #ffffea)"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="margin-top: -23px; font-size: 30px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
FEATURED GALLERY
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card p-3" style="border-radius: 25px; border-width: 1px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<div class="row no-gutters align-items-center mb-2">
<div class="col-auto">
<a href="https://toyhou.se/CHARA_ID_HERE./gallery" style="font-size: 20px; font-weight: bold; color: #ffffea">
Featured images
</a>
</div>
<div class="col justify-content-center ml-2" style="color: #ffffea; border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<ul class="magnific-gallery image-gallery auto-clear gallery-row large-block-grid-6 justify-content-around">
<!--
THERE ARE 2 DIFFERENT VERSIONS OF THE FEATURED IMAGE GALLERY
The first is very basic, it simply shows the image, and when clicked on, redirects you to the gallery with its full size version, it's the simpler variant of the 2.
Can be found between the commentary "SIMPLE IMAGE SHOWCASE".
The second is way more complex, and requires being able to navigate the code and pay CLOSE ATTENTION to the commentaries left inside it. It mimicks the image viewer and is very tedious to put in place. I would not recommend this version if you do not know what you are doing or do not want to bother with this level of customisation!
Can be found between the commentary "IMAGE VIEWER MIMIC".
I HIGHLY recommend completely removing the version you will not be using so that every image has the same functionality, as well as to avoid getting lost in it, as it's VERY easy to be so. Each version has been put between commentaries as you can see below.
Side note: due to how the interactive element has been implemented, the images are slightly desaturated [by 40% more precisely]. So if you see your images being less vibrant than they actually are, it's perfectly normal!
-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SIMPLE IMAGE SHOWCASE - Delete this entire section if going unsused
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--/// Image ///--><!-- Duplicate this entire "image" section to add an image - maximum of 6 recommended -->
<li class="gallery-item">
<div class="gallery-thumb text-center">
<div class="card border-0 thumb-image" style="border-radius: 10px; background: rgba(0, 0, 0, 0.8)">
<!-- Full image link [aka paste the link from the URL found in the SEARCH BAR when you open the image viewer inside the gallery] -->
<a href="FULL_SIZE_IMAGE_LINK_FROM_GALLERY_HERE"
class="th" style="padding: 6.5px; box-shadow: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 10px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!-- Thumbnail image link from gallery [aka paste the link of the THUMBNAIL - not the full size image itself - by "click right + copy image address" on the THUMBNAIL] -->
<img src="THUMBNAIL_LINK_FROM_IMAGE_HERE"
style="max-height: 200px; border-radius: 5px; object-fit: contain; object-position: center">
</a>
</div>
</div>
</li>
<!--/// Image end ///-->
<!--===///////// SIMPLE IMAGE SHOWCASE end /////////===-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
IMAGE VIEWER MIMIC - Delete this entire section if going unsused
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--/// Image ///--><!-- Duplicate this entire "image" section to add an image - maximum of 6 recommended -->
<li class="gallery-item">
<div class="gallery-thumb text-center">
<div class="card border-0 thumb-image" style="border-radius: 10px; background: rgba(0, 0, 0, 0.8)">
<!-- Full image link [aka paste the link of the FULL SIZE image from the gallery - "click right + copy image address"] -->
<a href="FULL_SIZE_IMAGE_LINK_HERE"
class="th magnific-item" style="padding: 6.5px; box-shadow: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 10px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!-- Thumbnail image link from gallery [aka paste the link of the THUMBNAIL - not the full size image itself - by "click right + copy image address" on the THUMBNAIL] -->
<img src="THUMBNAIL_LINK_FROM_IMAGE_HERE"
style="max-height: 200px; border-radius: 5px; object-fit: contain; object-position: center">
</a>
<!--===/////// IMAGE METADATA ///////===--><!-- Feel free to remove this entire section if you don't need it -->
<div class="magnific-caption hide">
<div class="card rounded-0 border-0 mt-n1" style="color: #ffffea; background-image: url(
LINK_TO_BACKGROUND_IMAGE_HERE
); background-size: cover; background-position: center"><!-- Background link right above -->
<div class="card rounded-0 p-3" style="border-width: 2px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<!--===/// BUTTONS ///===-->
<div class="row no-gutters align-items-center mt-n2 mb-2">
<div class="col-auto"><p class="mt-3" style="font-size: 20px; font-weight: bold">Details</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto">
<ul class="nav nav-button nav-justified justify-content-left mt-1 flex-wrap">
<!--=== FULL SIZE IMAGE BUTTON ===-->
<li class="mx-1 card border-0 align-items-center" style="padding: 2px; width: 50px; height: 50px; border-radius: 11px; background: rgba(0, 0, 0, 0.8)">
<div class="gallery-item">
<div class="gallery-thumb">
<div class="card border-0 thumb-image bg-transparent" style="position: absolute; left: 2px; width: 46px; height: 46px">
<!-- Full size image link [aka copy the image ID - it's the numbers found at the end of the URL after the '#'] -->
<a href="https://toyhou.se/~images/IMAGE_ID_HERE"
class="th m-auto justify-content-center" style="padding: 6px; color: #ffffe9; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 2px solid #ffffe9; border-radius: 9px; box-shadow: 0 0 5px rgba(255, 255, 233, 0.5), inset 0 0 5px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!--=== BUTTON ICON ===-->
<i class="fas fa-link
" style="font-size: 25px"></i>
</a>
</div>
</div>
</div>
</li>
<!--=== FULL SIZE IMAGE BUTTON end ===-->
<!--=== EDIT IMAGE BUTTON ===-->
<li class="mx-1 card border-0 align-items-center" style="padding: 2px; width: 50px; height: 50px; border-radius: 11px; background: rgba(0, 0, 0, 0.8)">
<div class="gallery-item">
<div class="gallery-thumb">
<div class="card border-0 thumb-image bg-transparent" style="position: absolute; left: 2px; width: 46px; height: 46px">
<!-- Full size image link [aka copy the image ID - it's the numbers found at the end of the URL after the '#'] -->
<a href="https://toyhou.se/~images/edit/IMAGE_ID_HERE"
class="th m-auto justify-content-center" style="padding: 6px; color: #ffffe9; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 2px solid #ffffe9; border-radius: 9px; box-shadow: 0 0 5px rgba(255, 255, 233, 0.5), inset 0 0 5px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!--=== BUTTON ICON ===-->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96663874_TlSEdTha2UZZpgi.png?1741029340" width="33">
</a>
</div>
</div>
</div>
</li>
<!--=== EDIT IMAGE BUTTON end ===-->
</ul>
</div>
</div>
<!--===/// BUTTONS end ///===-->
<p class="mt-n3 mb-2" style="color: #cdcfc3">
Viewing full image.
</p>
<!--===/// OPTIONAL CAPTION ///===--><!-- Remove this entire section if going unused, or just write "No caption" -->
<div class="mt-3">
<p style="font-size: 20px; font-weight: bold">Caption</p>
<p class="mt-n2" style="color: #cdcfc3">
Caption here.
</p>
</div>
<!--===/// OPTIONAL CAPTION ///===-->
<div class="row">
<!--===/// IMAGE CREDITS ///===-->
<div class="col-md-6 mt-3">
<p style="font-size: 20px; font-weight: bold">Credits</p>
<p class="mt-n2" style="color: #cdcfc3">
<!-- Date -->
1 Jan 2024, 12:12:12 am
</p>
<p class="mx-n2 mt-n2">
<!-- Username [star/premium] -->
<a class="m-2" style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/Username">
<i class="fi-star user-name-icon"></i>Username
</a>
<!-- Username [torso/normal] -->
<a class="m-2" style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/Username">
<i class="fi-torso user-name-icon"></i>Username
</a>
<!-- Username [external link] -->
<a class="m-2" style="font-weight: bold; color: #7efdfe" href=
"EXTERNAL_LINK_HERE">
Username<i class="fa-solid fa-up-right-from-square ml-1" style="font-size: 10px"></i>
</a>
</p>
</div>
<!--===/// IMAGE CREDITS end ///===-->
<!--===/// TAGGED CHARACTERS ///===-->
<div class="col-md-6 mt-3">
<p style="font-size: 20px; font-weight: bold">Characters</p>
<div class="row no-gutters mx-n1 mt-1" style="margin-top: -12px">
<!--===/// NAME ///===--><!-- Duplicate this entire "name" section to add a character/tab/gallery -->
<div class="col-auto mx-1">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="font-weight: bold; border-radius: 8px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="LINK_TO_TAB_CHARA_OR_GALLERY_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 8px; z-index: 5"></span>
<!--=== Name ===-->
Character/tab/gallery name
</a>
</div>
</div>
</div>
<!--===/// NAME end ///===-->
</div>
</div>
<!--===/// TAGGED CHARACTERS end ///===-->
</div>
</div>
</div>
</div>
<!--===/////// IMAGE METADATA end ///////===-->
</div>
</div>
</li>
<!--/// Image end ///-->
<!--===///////// IMAGE VIEWER MIMIC end /////////===-->
</ul>
</div>
<!--===/// FEATURED GALLERY end ///===-->
</div>
<!--===////// MAIN CODE end //////===-->
</div>
</div>
<!--===///////// FOOTER /////////===-->
<div class="mt-auto px-3 pb-3" style="width: 100%">
<div class="card justify-content-center align-items-center" style="height: 90px; color: rgba(255, 255, 239, 0.5); border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7); z-index: 50">
<p class="text-center" style="font-size: 12px; line-height: 25px">Code by FlowerlyRat layout ©
<a href="https://thatgamecompany.com/" style="color: #7efdfe">thatgamecompany</a><br>
<a href="https://toyhou.se/~about" class="mr-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">About</a>
<a href="https://toyhou.se/~faq/general" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">FAQ</a>
<a href="https://toyhou.se/~tickets" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">HelpDesk</a>
<a href="https://toyhou.se/~rules" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">Rules</a>
<a href="https://toyhou.se/~tos" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">ToS</a>
<a href="https://toyhou.se/~browse/search" class="ml-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">Search</a>
</p>
</div>
</div>
<!--===///////// FOOTER end /////////===-->
</div>
<!--====/////CREDITS WINDOW//////====-->
<div class="collapse fade" id="CREDIT" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; color: #ffffea; z-index: 1100">
<div id="ACC-CREDIT" class="card bg-faded border-0 rounded-0 p-3" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.7)">
<div class="mx-auto sticky-top" style="min-width: 55%">
<div class="card align-items-center" style="margin-top: 120px; border-radius: 25px 25px 0 0; border-width: 1px 1px 0 1px; border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.8); z-index: 5">
<!--Close button-->
<div style="position: absolute; top: 10px; right: 25px">
<a data-toggle="collapse" href="#CREDIT"><i class="fas fa-times" style="font-size: 25px; color: #ffffea"></i></a>
</div>
<!--Close button end-->
<div class="row no-gutters">
<!--Buttons-->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 40px; height: 40px; cursor: pointer">
<i class="far fa-code" style="font-size: 20px; color: #ffffea; opacity: 0.6; text-shadow: 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745"></i>
<div class="collapse fade show CODE" data-parent="#ACC-CREDIT" style="position:absolute; top:0; left:0; right:0; bottom:0;">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea;background: rgba(0, 0, 0, 0)">
<i class="far fa-code" style="margin-top: 2px; font-size: 20px; color: #ffffea; text-shadow: 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745"></i>
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none" data-toggle="collapse" data-target=".CODE"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 40px; height: 40px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96599998_5kOvqGuUpH9aIfH.png" width="25px" style="opacity: 0.6">
<div class="collapse fade IMAGE" data-parent="#ACC-CREDIT" style="position:absolute; top:0; left:0; right:0; bottom:0;">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea;background: rgba(0, 0, 0, 0)">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96599998_5kOvqGuUpH9aIfH.png" width="25px" style="margin-top: 2px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none" data-toggle="collapse" data-target=".IMAGE"></a>
</div>
</li>
</ul>
</div>
<!--Buttons end-->
</div>
</div>
<div class="card p-3 pb-4" style="height: 300px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.7)">
<!--///Code credits///-->
<div class="collapse fade show active CODE" data-parent="#ACC-CREDIT">
<div class="row no-gutters align-items-center mt-3">
<div class="col-auto"><p style="font-size: 15px; font-weight: bold">Code credits</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<!--Text-->
<p class="mt-4">
<b>Code:</b> <a style="font-weight: bold; color: #7efdfe" href="https://toyhou.se/Username">
<!--
Free user
<i class="fi-torso user-name-icon"></i>Username
Premium user
<i class="fi-star user-name-icon"></i>Username
-->
<i class="fi-torso user-name-icon"></i>Username
</a><br>
<b>CSS emulator code:</b> <a style="font-weight: bold; color: #7efdfe" href="https://toyhou.se/FlowerlyRat"><i class="fi-torso user-name-icon"></i>FlowerlyRat</a><br>
<b>Layout:</b> Based on the game Sky: Children of the Light's UI<br>
<b>Other codes:</b> <a style="font-weight: bold; color: #ff7e01" href="https://toyhou.se/FlowerlyRat/characters/folder:4673560">Folder</a>
</p>
<!--Text end-->
</div>
<!--///Code credits///-->
<!--///Image credits///-->
<div class="collapse fade IMAGE" data-parent="#ACC-CREDIT">
<div class="row no-gutters align-items-center mt-3">
<div class="col-auto"><p style="font-size: 15px; font-weight: bold">Image credits</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<!--Text-->
<p class="mt-4">
<b>Background image:</b> Sky: Children of the Light © thatgamecompany<br>
<b>Icons:</b> <a href="https://fontawesome.com/v6/search" style="font-weight: bold; color: #ff7e01">FontAwesome</a>, Sky: Children of the Light<br>
<b>Flags/ribbons:</b> taken from CoraMagics' <a href="https://toyhou.se/20187371." style="font-weight: bold; color: #ff7e01">Ribbon Masterlist</a>
</p>
<!--Text end-->
</div>
<!--///Image credits///-->
<div class="row no-gutters" style="position: absolute; bottom: -3px; left: 27px; right: 27px; opacity: 0.3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
</div>
</div>
</div>
<!--====/////CREDITS WINDOW end//////====-->
</div>
</div>
<!-- Code container -->
</div>
</div>
</div>
</div>Copy
<!--
╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
△▽/╱╱╱╱╱╱╱╱╱╱╱╰━╯
Ultimate Sky: Children of the Light profile bundle [CSS emulator V2]: code by FlowerlyRat || Inspired from TheFaerieMerchant's CSS emulators || Based on the game Sky: Children of the Light's UI by ThatGameCompany
> It is HIGHLY recommended to use circlejourney's ToyHouse live editor to see what you're doing!!!! -> https://th.circlejourney.net/
Any links added use the following formats [target="_blank" is optional]:
Blue variant [to link characters, groups, species, and entities]:
<a style="font-weight: bold; color: #7efdfe" href="LINK_HERE">text_here</a>
Orange variant [to link everything else]:
<a style="font-weight: bold; color: #ff7e01" href="LINK_HERE">text_here</a>
Any areas that need the character's ID have the "CHARA_ID_HERE" placeholder -> to replace everything at once, highlight "CHARA_ID_HERE", then do ctrl+F and replace it with your character's.
Pop-up for the credits collapsible is at the end of the code.
Code should be compatible with any and all other HTML codes, I have tested it with over 80 codes, from multiple creators, to make sure of it. If adding one breaks the format, this means the HTML you chose has open tags that have been forgotten. To fix the issue simply add said tags, generally its one or multiple "</div>" at the end of it
Some codes have an additonal "margin-top: -0px"/"mt-n0", "margin-left: -0px"/"ml-n0" or "margin-right: -0px"/"mr-n0" at the beginning of their codes, these might break the formatting so please remove them.
If the one you chose has a colored background that is bootstrap color and clashes with the emulator, find the "card" element responsible for it and add "bg-transparent" to the div's class.
> I cannot guarantee compatibility with actual custom CSS codes.
Code is compatible with the "Sky: Children of the Light candle UI" add-on.
Instructions to add them is given in the profile itself -> https://toyhou.se/23648694.misc-sky-cotl-candle-ui/25906098.
Code is also compatible with the "Sky quests!" add-on.
To add it, please copy and paste the code between the "FUN LINKS" commentaries below, between the "MAIN CHARACTER CODE HERE" commentaries.
-> https://toyhou.se/32862504.snip-sky-quests/32862518.code
Multiple background images have been screenshoted from the game to give a wide variety of possibilities [ToyHouse gallery: https://toyhou.se/25042050./gallery || Google Drive: https://drive.google.com/drive/folders/12YBvvXe9MoIYj9oUo8MVpngCojj8vCv3?usp=sharing], however if none of them suit your taste or vision, please go on and take your own in-game.
!!! TO BE WARNED !!!
This code has a hidden section intended for mobile users, so be sure to also modify it with the sidebar!
-->
<div class="flex-row justify-content-end sp-top-inner" style="left: -40vw; z-index: 5">
<div style="width: 100vw">
<div class="ml-md-3">
<!--///BACKGROUND IMAGE///-->
<div class="card bg-dark rounded-0 border-0 col-lg-12" style="overflow: hidden; position: fixed; bottom: 0; top: 0; left: 0; background-image: url(
LINK_TO_BACKGROUND_IMAGE_HERE
); background-size: cover; background-position: center"></div>
<div class="row no-gutters">
<!-- Code container -->
<div class="col-12 ">
<div class="card bg-transparent border-0 rounded-0 mx-auto">
<div class="card bg-transparent rounded-0 border-0" style="min-height: 100vh">
<div class="container pl-md-0" style="max-width: 100%">
<div class="row no-gutters">
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
COMPUTER SIDEBAR
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-md-2 hidden-sm-down" style="color: #ffffea">
<div class="card rounded-0 p-2 h-100" style="margin-left: -1px; border-width: 0 1px 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
AVATAR [computer]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-auto my-2" style="height: 150px; width: 150px">
<div class="card bg-dark border-0 p-0" style="position: absolute; height: 115px; width: 115px; border-radius: 50%; z-index: 1; background: url(
AVATAR_IMAGE_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"><!--PFP IMAGE LINK ABOVE--></div>
<!--///Outer frame///--><!--Check [https://toyhou.se/23579684.misc-sky-cotl-avatar-frame] for more borders and meaning explanation-->
<img class="d-block mx-auto my-auto" style="position: absolute; opacity: 1; z-index: 5" src=
"https://f2.toyhou.se/file/f2-toyhou-se/images/71211585_IQYjqdDDaiOOeid.png">
<!--///Inner spinning frame///--><!-- Feel free to delete -->
<div class="align-items-center justify-content-center" style="position: absolute; width: 123px; z-index: 5">
<i class="fa-spin" style="animation-duration: 26s; opacity: 1"><img class="d-block mx-auto my-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/images/71211558_s1BGtB1nlee2eVn.png"></i>
</div>
<!--///Inner spinning frame end///-->
</div>
<!--===////// AVATAR end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER NAME [computer]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE."
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-sparkles fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// CHARACTER NAME [computer] end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
FOLDER LINK
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/FlowerlyRat/characters/folder:FOLDER_ID"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Folder name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-folder fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// FOLDER LINK end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BLURB [computer]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card" style="padding: 15px; font-size: 0.8em; color: #cdcfc3; border-radius: 23px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<p>
This is a blurb, feel free to delete it tho
</p>
</div>
<!--===////// BLURB [computer] end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SOCIAL LINKS [computer] - duplicate the "SOCIAL LINK" section to add a platform - can be used to add links to an Art Fight profile, playlist, etc
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<ul class="nav nav-button nav-justified justify-content-around mt-2 flex-wrap">
<!--=== SOCIAL LINK ===-->
<li>
<div class="gallery-thumb">
<div class="thumb-image justify-content-center align-items-center" style="width: 35px; height: 35px; font-weight: bold; border-radius: 10px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="SOCIAL_LINK_HERE" title="SOCIAL_NAME_HERE"
class="th tooltipster" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 10px; box-shadow: 0 0 8px rgba(255, 255, 233, 0.5), inset 0 0 8px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!--=== BUTTON ICON ===-->
<i class="fas fa-link
" style="font-size: 13px"></i>
</a>
</div>
</div>
</li>
<!--=== SOCIAL LINK end===-->
</ul>
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BONUS LINKS [computer] - duplicate the "ADDITIONAL SIDE LINK" section to add a link
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--===////// ADDITIONAL SIDE LINK //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="LINK_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Link name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-link fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// ADDITIONAL SIDE LINK end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SIDEBAR BUTTONS - tabs require their own links with their own ID
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--===////// TAB 1 //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="LINK_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Tab 1
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-bookmark fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// TAB 1 end //////===-->
<div class="my-1 mb-2 mx-2" style="border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<!--===////// TAB 2 //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="LINK_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Tab 2
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="far fa-bookmark fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// TAB 2 end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--===////// GALLERY //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./gallery"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Gallery
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-image fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// GALLERY end //////===-->
<!--===////// LIBRARY //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./literatures"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Library
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-book fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// LIBRARY end //////===-->
<!--===////// WORLDS //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./worlds"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Worlds
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-globe fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// WORLDS end //////===-->
<!--===////// LINKS //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./links"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Links
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-link fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// LINKS end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--===////// COMMENTS //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./comments"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Comments
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-comment fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// COMMENTS end //////===-->
<!--===////// FAVORITE //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./comments"
class="th" data-toggle="th-favorite" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="favorite toggle-favorite" style="position: absolute; top: 8px; right: 12.5px; z-index: 5">
<span style="position: absolute; left: -189px">Favorite</span>
<i class="fal fa-sparkle"></i>
</span>
<span class="unfavorite toggle-favorite" style="position: absolute; top: 8px; right: 12.5px; z-index: 5">
<span style="position: absolute; left: -189px">Unfavorite</span>
<i class="fas fa-sparkle"></i>
</span>
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9"></div>
<div class="col justify-content-end align-items-center">
<div class="card border-0" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57"></div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// FAVORITE end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--===////// OWNERSHIP //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./ownership"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Ownership
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-check-square fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// OWNERSHIP end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--===////// REPORT //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/~tickets/create/character/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Report
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-warning fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// REPORT end //////===-->
<!--===////// BLOCK //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE./block"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Block
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-cancel fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// BLOCK end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<div class="accordion container p-0" id="accordion">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="#MANAGE"
class="th" data-toggle="collapse" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Manage character
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-caret-right fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div id="MANAGE" class="collapse" data-parent="#accordion">
<!--===AVATAR===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/avatar/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Avatar
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-image fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===AVATAR end===-->
<!--===EDIT PROFILE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/edit/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Edit profile
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-pencil fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===EDIT PROFILE end===-->
<!--===TABS===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/tabs/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Tabs
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-bookmark fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===TABS end===-->
<!--===HISTORY===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/history/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
History
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-history fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===HISTORY end===-->
<div class="my-3 ml-3" style="border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<!--===WARNINGS===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/warnings/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Warnings
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-warning fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===WARNINGS end===-->
<!--===ACCESS KEYS===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/keys/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Access keys
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-key fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===ACCESS KEYS end===-->
<!--===TRADE LISTING===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/trade-listing/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Trade listing
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-handshake fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===TRADE LISTING end===-->
<div class="my-3 ml-3" style="border-width: 1px 0 0 0; border-style: solid; border-color: rgba(255, 255, 239, 0.5)"></div>
<!--===DELETE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~characters/delete/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Delete
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-trash fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===DELETE end===-->
</div>
<!--=== CHARACTER end ===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
IMAGES
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="#MANAGE-IMG"
class="th" data-toggle="collapse" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Manage images
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-caret-right fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div id="MANAGE-IMG" class="collapse" data-parent="#accordion">
<!--===UPLOAD IMAGE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~images/upload/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Upload image
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-plus fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===UPLOAD IMAGE end===-->
<!--===MANAGE IMAGES===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~images/manage-character/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Manage images
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-image fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===MANAGE IMAGES end===-->
<!--===SORT IMAGES===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~images/sort/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Sort images
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-random fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===SORT IMAGES end===-->
</div>
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
LITERATURES
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="#MANAGE-LIT"
class="th" data-toggle="collapse" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Manage literatures
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-caret-right fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div id="MANAGE-LIT" class="collapse" data-parent="#accordion">
<!--===ADD LITERATURE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~literatures/create/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Upload literature
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-plus fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===ADD LITERATURE end===-->
<!--===SORT LITERATURE===-->
<div class="mb-2 mx-2">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="border-radius: 5px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="https://toyhou.se/~literatures/sort/CHARA_ID_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 5px; z-index: 5"></span>
<div class="row no-gutters">
<div class="col text-left">
Sort literatures
</div>
<div class="col-auto">
<!--===BUTTON ICON===-->
<i class="fas fa-random fa-fw"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</a>
</div>
</div>
</div>
<!--===SORT LITERATURE end===-->
</div>
<!--=== LITERATURES end ===-->
</div>
</div>
</div>
<!--===/////////////////////////////////// COMPUTER SIDEBAR end ///////////////////////////////////===-->
<!--===////// MAIN CODE //////===-->
<div class="col-md-10 mx-auto pt-md-3 pl-md-3 h-100">
<!-- Utility buttons [computer] -->
<ul class="nav nav-button align-items-center justify-content-end mt-3 mr-2 hidden-sm-down" style="margin-bottom: 22px">
<!--///Creation information button///-->
<li class="mx-4">
<a data-toggle="collapse" href="#CREA" style="box-shadow: none; color: #ffffea">
<i class="fa fa-info-circle mt-1" style="font-size: 30px; color: #fdf8da; text-shadow: 0 0 2px #713745, 0 0 2px #713745"></i>
</a>
</li>
<!--Credits button-->
<li>
<a data-toggle="collapse" href="#CREDIT">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96600008_K9c0uSM4k7pfpXi.png" width="35">
</a>
</li>
</ul>
<!-- Utility buttons [computer] -->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
UPPER CARD ON PHONE
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card pt-3 p-2 hidden-sm-up mb-4 rounded-0" style="margin-left: -15px; margin-right: -15px; color: #ffffea; border-width: 0 0 1px 0; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<!-- Utility buttons [phone] -->
<ul class="nav nav-button align-items-center justify-content-end mr-2 hidden-sm-up" style="margin-bottom: 22px">
<!--///Creation information button///-->
<li class="mx-4">
<a data-toggle="collapse" href="#CREA" style="box-shadow: none; color: #ffffea">
<i class="fa fa-info-circle mt-1" style="font-size: 30px; color: #fdf8da; text-shadow: 0 0 2px #713745, 0 0 2px #713745"></i>
</a>
</li>
<!--Credits button-->
<li>
<a data-toggle="collapse" href="#CREDIT">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96600008_K9c0uSM4k7pfpXi.png" width="35">
</a>
</li>
</ul>
<!-- Utility buttons [phone] -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
AVATAR [phone]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-auto hidden-sm-up mt-n5 mb-2" style="height: 150px; width: 150px">
<div class="card bg-dark border-0 p-0" style="position: absolute; height: 115px; width: 115px; border-radius: 50%; z-index: 1; background: url(
AVATAR_IMAGE_LINK_HERE
); background-size: cover; background-position: center; margin-top: 1px"><!--PFP IMAGE LINK ABOVE--></div>
<!--///Outer frame///--><!--Check [https://toyhou.se/23579684.misc-sky-cotl-avatar-frame] for more borders and meaning explanation-->
<img class="d-block mx-auto my-auto" style="position: absolute; opacity: 1; z-index: 5" src=
"https://f2.toyhou.se/file/f2-toyhou-se/images/71211585_IQYjqdDDaiOOeid.png">
<!--///Inner spinning frame///--><!-- Feel free to delete -->
<div class="align-items-center justify-content-center" style="position: absolute; width: 123px; z-index: 5">
<i class="fa-spin" style="animation-duration: 26s; opacity: 1"><img class="d-block mx-auto my-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/images/71211558_s1BGtB1nlee2eVn.png"></i>
</div>
<!--///Inner spinning frame end///-->
</div>
<!--===////// AVATAR end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER NAME [phone]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="https://toyhou.se/CHARA_ID_HERE."
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-sparkles fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// CHARACTER NAME [phone] end //////===-->
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BLURB [phone]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card" style="padding: 15px; font-size: 0.8em; color: #cdcfc3; border-radius: 23px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<p>
This is a blurb, feel free to delete it tho
</p>
</div>
<!--===////// BLURB [phone] end //////===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SOCIAL LINKS [computer] - duplicate the "SOCIAL LINK" section to add a platform - can be used to add links to an Art Fight profile, playlist, etc
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<ul class="nav nav-button nav-justified justify-content-around mt-2 flex-wrap">
<!--=== SOCIAL LINK ===-->
<li>
<div class="gallery-thumb">
<div class="thumb-image justify-content-center align-items-center" style="width: 35px; height: 35px; font-weight: bold; border-radius: 10px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="SOCIAL_LINK_HERE" title="SOCIAL_NAME_HERE"
class="th tooltipster" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 10px; box-shadow: 0 0 8px rgba(255, 255, 233, 0.5), inset 0 0 8px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!--=== BUTTON ICON ===-->
<i class="fas fa-link
" style="font-size: 13px"></i>
</a>
</div>
</div>
</li>
<!--=== SOCIAL LINK end===-->
</ul>
<!-- Divider -->
<div class="row no-gutters align-items-center mb-1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BONUS LINKS [phone] - duplicate the "ADDITIONAL SIDE LINK" section to add a link
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--===////// ADDITIONAL SIDE LINK //////===-->
<div class="gallery-thumb mt-0" style="padding: 3px; margin-top: 75px; border-radius: 22px; background: rgba(0, 0, 0, 0.9)">
<div class="thumb-image m-0">
<!--== Link ==-->
<a href="LINK_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 22px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<div class="card bg-transparent px-2" style="padding: 4px; width: 100%; border-width: 2px; border-radius: 21px; border-color: rgba(91, 92, 87, 0.7)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate">
Link name
</p>
</div>
<div class="col justify-content-end align-items-center">
<div class="card border-0 justify-content-center align-items-center" style="width: 25px; height: 25px; border-radius: 8px; background-color: #5b5c57">
<!--=== BUTTON ICON ===-->
<i class="fas fa-link fa-fw" style="margin-top: 1px"></i>
<!--=== BUTTON ICON end ===-->
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!--===////// ADDITIONAL SIDE LINK end //////===-->
</div>
<!--===/// UPPER CARD PHONE end ///===-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTER CREATION INFO
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="collapse fade mt-1 mb-3" id="CREA" style="color: #ffffea">
<div class="col row no-gutters hidden-sm-up mt-n2 mb-3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<div class="row no-gutters">
<div class="col-md-9 card order-md-2 px-3" style="border-radius: 8px; border-width: 1px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<!--Close button-->
<div class="justify-content-end mt-3">
<a data-toggle="collapse" href="#CREA"><i class="fas fa-times" style="font-size: 25px; color: #ffffea"></i></a>
</div>
<!--Close button end-->
<div class="row">
<!--===/// CREATION INFO ///===-->
<div class="col-md-5 pr-3 mr-n2" style="height: 155px; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<!--===CREATED===-->
<div class="row mb-2">
<div class="col-4" style="font-weight: bold">
<p>Created</p>
</div>
<div class="col">
<!--Date-->
<p>
1 Jan 2024, 1:20:30 am
</p>
</div>
</div>
<!--===CREATED end===-->
<!--===CREATOR===-->
<div class="row mb-2">
<div class="col-4" style="font-weight: bold">
<p>Creator</p>
</div>
<div class="col">
<!--Username-->
<a style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/Username">
<i class="fi-star user-name-icon"></i>Username
</a>
</div>
</div>
<!--===CREATOR end===-->
<!--===DESIGNERS===-->
<div class="row mb-2">
<div class="col-4" style="font-weight: bold">
<p>Designers</p>
</div>
<div class="col">
<!--Username-->
<!--Username [external link]-->
<a style="font-weight: bold; color: #7efdfe" href=
"EXTERNAL_LINK_HERE">
Username<i class="fa-solid fa-up-right-from-square ml-1" style="font-size: 10px"></i>
</a>
</div>
</div>
<!--===DESIGNERS end===-->
<!--===OWNER===-->
<div class="row mb-2">
<div class="col-4" style="font-weight: bold">
<p>Owner</p>
</div>
<div class="col">
<!--Username-->
<a style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/Username">
<i class="fi-torso user-name-icon"></i>Username
</a>
</div>
</div>
<!--===OWNER end===-->
</div>
<!--===/// CREATION INFO end ///===-->
<!--===/// Divider ///===-->
<div class="col row no-gutters hidden-sm-up my-2 mb-3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<div class="col-auto hidden-sm-down mr-n4">
<div style="height: 41%; border-width: 0 0 0 1px; border-style: solid"></div>
<div class="border-0 rounded-0 my-1">
<p style="margin-left: -3.4px; font-size: 10px">◆</p>
</div>
<div style="height: 41%; border-width: 0 0 0 1px; border-style: solid"></div>
</div>
<!--===/// Divider end ///===-->
<!--===/// TAGS ///===-->
<div class="col-md card bg-transparent border-0 rounded-0">
<div class="pr-3 mr-n3" style="height: 155px; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<!--Tag 1-->
<div class="card border-0 px-1 mb-1" style="border-radius: 5px; background: #ffffea; display: inline-block">
<a style="font-weight: bold; color: #000" href=
"TAG_LINK_HERE">
tag 1
</a>
</div>
<!--Tag 1 end-->
<!--Tag 2-->
<div class="card border-0 px-1 mb-1" style="border-radius: 5px; background: #ffffea; display: inline-block">
<a style="font-weight: bold; color: #000" href=
"TAG_LINK_HERE">
tag 2
</a>
</div>
<!--Tag 2 end-->
<!--Tag 3-->
<div class="card border-0 px-1 mb-1" style="border-radius: 5px; background: #ffffea; display: inline-block">
<a style="font-weight: bold; color: #000" href=
"TAG_LINK_HERE">
tag 3
</a>
</div>
<!--Tag 3 end-->
</div>
</div>
<!--===/// TAGS end ///===-->
</div>
</div>
<div class="col-md card mr-md-2 mt-md-0 mt-2 order-md-1" style="height: 200px; border-radius: 8px; border-width: 1px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<div class="card bg-transparent border-0 rounded-0 my-auto p-3" style="height: 200px; scrollbar-width: thin; scrollbar-color: #a8a8a8 rgba(0, 0, 0, 0); overflow: auto">
<div class="row no-gutters text-center">
<!--===/// Creator ribbons ///===-->
<!-- ||[ 1 ]|| -->
<div class="col-4 p-1 mx-auto" data-toggle="tooltip"
title="Ribbon name - Ribbon description"><!-- Don't make the tooltips too long, otherwise they won't display! -->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
</div>
<!-- ||[ 1 ]|| -->
<!--===/// Creator ribbons end ///===-->
</div>
</div>
</div>
</div>
<div class="col row no-gutters hidden-sm-up mt-3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
<!--===/// CHARACTER CREATION INFO end ///===-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
PASTE YOUR CHARACTER CODE HERE
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--=======/////// FUN LINKS ///////========-->
<!--=======/////// FUN LINKS end ///////========-->
<!-- [REMINDER]
If adding the code breaks the format, this means the HTML you chose has open tags that have been forgotten. To fix the issue simply add said tags, generally its one or multiple "</div>" at the end of it
Some codes have an additonal "margin-top: -0px"/"mt-n0", "margin-left: -0px"/"ml-n0" or "margin-right: -0px"/"mr-n0" at the beginning of their codes, these might break the formatting so please remove them.
If the one you chose has a colored background that is bootstrap color and clashes with the emulator, find the "card" element responsible for it and add "bg-transparent" to the div's class.
> I cannot guarantee compatibility with actual custom CSS codes.
-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
PASTE YOUR CHARACTER CODE HERE end
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!-- Divider -->
<div class="row no-gutters mt-5 mb-4">
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, rgba(0, 0, 0, 0), #ffffea, #ffffea)"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="margin-top: -23px; font-size: 30px; color: #ffffea">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, #ffffea, #ffffea, rgba(0, 0, 0, 0))"></div>
</div>
<!-- Divider end -->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
FEATURED GALLERY
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card p-3 mb-3" style="border-radius: 25px; border-width: 1px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<div class="row no-gutters align-items-center mb-2">
<div class="col-auto">
<a href="https://toyhou.se/CHARA_ID_HERE./gallery" style="font-size: 20px; font-weight: bold; color: #ffffea">
Featured images
</a>
</div>
<div class="col justify-content-center ml-2" style="color: #ffffea; border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<ul class="magnific-gallery image-gallery auto-clear gallery-row large-block-grid-6 justify-content-around">
<!--
THERE ARE 2 DIFFERENT VERSIONS OF THE FEATURED IMAGE GALLERY
The first is very basic, it simply shows the image, and when clicked on, redirects you to the gallery with its full size version, it's the simpler variant of the 2.
Can be found between the commentary "SIMPLE IMAGE SHOWCASE".
The second is way more complex, and requires being able to navigate the code and pay CLOSE ATTENTION to the commentaries left inside it. It mimicks the image viewer and is very tedious to put in place. I would not recommend this version if you do not know what you are doing or do not want to bother with this level of customisation!
Can be found between the commentary "IMAGE VIEWER MIMIC".
I HIGHLY recommend completely removing the version you will not be using so that every image has the same functionality, as well as to avoid getting lost in it, as it's VERY easy to be so. Each version has been put between commentaries as you can see below.
Side note: due to how the interactive element has been implemented, the images are slightly desaturated [by 40% more precisely]. So if you see your images being less vibrant than they actually are, it's perfectly normal!
-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SIMPLE IMAGE SHOWCASE - Delete this entire section if going unsused
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--/// Image ///--><!-- Duplicate this entire "image" section to add an image - maximum of 6 recommended -->
<li class="gallery-item">
<div class="gallery-thumb text-center">
<div class="card border-0 thumb-image" style="border-radius: 10px; background: rgba(0, 0, 0, 0.8)">
<!-- Full image link [aka paste the link from the URL found in the SEARCH BAR when you open the image viewer inside the gallery] -->
<a href="FULL_SIZE_IMAGE_LINK_FROM_GALLERY_HERE"
class="th" style="padding: 6.5px; box-shadow: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 10px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!-- Thumbnail image link from gallery [aka paste the link of the THUMBNAIL - not the full size image itself - by "click right + copy image address" on the THUMBNAIL] -->
<img src="THUMBNAIL_LINK_FROM_IMAGE_HERE"
style="max-height: 200px; border-radius: 5px; object-fit: contain; object-position: center">
</a>
</div>
</div>
</li>
<!--/// Image end ///-->
<!--===///////// SIMPLE IMAGE SHOWCASE end /////////===-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
IMAGE VIEWER MIMIC - Delete this entire section if going unsused
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--/// Image ///--><!-- Duplicate this entire "image" section to add an image - maximum of 6 recommended -->
<li class="gallery-item">
<div class="gallery-thumb text-center">
<div class="card border-0 thumb-image" style="border-radius: 10px; background: rgba(0, 0, 0, 0.8)">
<!-- Full image link [aka paste the link of the FULL SIZE image from the gallery - "click right + copy image address"] -->
<a href="FULL_SIZE_IMAGE_LINK_HERE"
class="th magnific-item" style="padding: 6.5px; box-shadow: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 10px; box-shadow: 0 0 10px rgba(255, 255, 233, 0.5), inset 0 0 10px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!-- Thumbnail image link from gallery [aka paste the link of the THUMBNAIL - not the full size image itself - by "click right + copy image address" on the THUMBNAIL] -->
<img src="THUMBNAIL_LINK_FROM_IMAGE_HERE"
style="max-height: 200px; border-radius: 5px; object-fit: contain; object-position: center">
</a>
<!--===/////// IMAGE METADATA ///////===--><!-- Feel free to remove this entire section if you don't need it -->
<div class="magnific-caption hide">
<div class="card rounded-0 border-0 mt-n1" style="color: #ffffea; background-image: url(
LINK_TO_BACKGROUND_IMAGE_HERE
); background-size: cover; background-position: center"><!-- Background link right above -->
<div class="card rounded-0 p-3" style="border-width: 2px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<!--===/// BUTTONS ///===-->
<div class="row no-gutters align-items-center mt-n2 mb-2">
<div class="col-auto"><p class="mt-3" style="font-size: 20px; font-weight: bold">Details</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto">
<ul class="nav nav-button nav-justified justify-content-left mt-1 flex-wrap">
<!--=== FULL SIZE IMAGE BUTTON ===-->
<li class="mx-1 card border-0 align-items-center" style="padding: 2px; width: 50px; height: 50px; border-radius: 11px; background: rgba(0, 0, 0, 0.8)">
<div class="gallery-item">
<div class="gallery-thumb">
<div class="card border-0 thumb-image bg-transparent" style="position: absolute; left: 2px; width: 46px; height: 46px">
<!-- Full size image link [aka copy the image ID - it's the numbers found at the end of the URL after the '#'] -->
<a href="https://toyhou.se/~images/IMAGE_ID_HERE"
class="th m-auto justify-content-center" style="padding: 6px; color: #ffffe9; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 2px solid #ffffe9; border-radius: 9px; box-shadow: 0 0 5px rgba(255, 255, 233, 0.5), inset 0 0 5px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!--=== BUTTON ICON ===-->
<i class="fas fa-link
" style="font-size: 25px"></i>
</a>
</div>
</div>
</div>
</li>
<!--=== FULL SIZE IMAGE BUTTON end ===-->
<!--=== EDIT IMAGE BUTTON ===-->
<li class="mx-1 card border-0 align-items-center" style="padding: 2px; width: 50px; height: 50px; border-radius: 11px; background: rgba(0, 0, 0, 0.8)">
<div class="gallery-item">
<div class="gallery-thumb">
<div class="card border-0 thumb-image bg-transparent" style="position: absolute; left: 2px; width: 46px; height: 46px">
<!-- Full size image link [aka copy the image ID - it's the numbers found at the end of the URL after the '#'] -->
<a href="https://toyhou.se/~images/edit/IMAGE_ID_HERE"
class="th m-auto justify-content-center" style="padding: 6px; color: #ffffe9; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 2px solid #ffffe9; border-radius: 9px; box-shadow: 0 0 5px rgba(255, 255, 233, 0.5), inset 0 0 5px rgba(255, 255, 233, 0.7); z-index: 5"></span>
<!--=== BUTTON ICON ===-->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96663874_TlSEdTha2UZZpgi.png?1741029340" width="33">
</a>
</div>
</div>
</div>
</li>
<!--=== EDIT IMAGE BUTTON end ===-->
</ul>
</div>
</div>
<!--===/// BUTTONS end ///===-->
<p class="mt-n3 mb-2" style="color: #cdcfc3">
Viewing full image.
</p>
<!--===/// OPTIONAL CAPTION ///===--><!-- Remove this entire section if going unused, or just write "No caption" -->
<div class="mt-3">
<p style="font-size: 20px; font-weight: bold">Caption</p>
<p class="mt-n2" style="color: #cdcfc3">
Caption here.
</p>
</div>
<!--===/// OPTIONAL CAPTION ///===-->
<div class="row">
<!--===/// IMAGE CREDITS ///===-->
<div class="col-md-6 mt-3">
<p style="font-size: 20px; font-weight: bold">Credits</p>
<p class="mt-n2" style="color: #cdcfc3">
<!-- Date -->
1 Jan 2024, 12:12:12 am
</p>
<p class="mx-n2 mt-n2">
<!-- Username [star/premium] -->
<a class="m-2" style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/Username">
<i class="fi-star user-name-icon"></i>Username
</a>
<!-- Username [torso/normal] -->
<a class="m-2" style="font-weight: bold; color: #7efdfe" href=
"https://toyhou.se/Username">
<i class="fi-torso user-name-icon"></i>Username
</a>
<!-- Username [external link] -->
<a class="m-2" style="font-weight: bold; color: #7efdfe" href=
"EXTERNAL_LINK_HERE">
Username<i class="fa-solid fa-up-right-from-square ml-1" style="font-size: 10px"></i>
</a>
</p>
</div>
<!--===/// IMAGE CREDITS end ///===-->
<!--===/// TAGGED CHARACTERS ///===-->
<div class="col-md-6 mt-3">
<p style="font-size: 20px; font-weight: bold">Characters</p>
<div class="row no-gutters mx-n1 mt-1" style="margin-top: -12px">
<!--===/// NAME ///===--><!-- Duplicate this entire "name" section to add a character/tab/gallery -->
<div class="col-auto mx-1">
<div class="gallery-thumb">
<div class="thumb-image p-2" style="font-weight: bold; border-radius: 8px; background: rgba(0, 0, 0, 0.8)">
<!--=== Link ===-->
<a href="LINK_TO_TAB_CHARA_OR_GALLERY_HERE"
class="th" style="color: #ffffea; box-shadow: none; text-decoration: none">
<span class="card bg-transparent thumb-sensitive" style="border: 3px solid #ffffe9; border-radius: 8px; z-index: 5"></span>
<!--=== Name ===-->
Character/tab/gallery name
</a>
</div>
</div>
</div>
<!--===/// NAME end ///===-->
</div>
</div>
<!--===/// TAGGED CHARACTERS end ///===-->
</div>
</div>
</div>
</div>
<!--===/////// IMAGE METADATA end ///////===-->
</div>
</div>
</li>
<!--/// Image end ///-->
<!--===///////// IMAGE VIEWER MIMIC end /////////===-->
</ul>
</div>
<!--===/// FEATURED GALLERY end ///===-->
</div>
<!--===////// MAIN CODE end //////===-->
</div>
</div>
<!--===///////// FOOTER /////////===-->
<div class="mt-auto" style="width: 100%">
<div class="card justify-content-center align-items-center border-0 rounded-0" style="margin-left: -1px; height: 90px; color: rgba(255, 255, 239, 0.5); background: rgba(0, 0, 0, 0.7); z-index: 50">
<p class="text-center" style="font-size: 12px; line-height: 25px">Code by FlowerlyRat layout ©
<a href="https://thatgamecompany.com/" style="color: #7efdfe">thatgamecompany</a><br>
<a href="https://toyhou.se/~about" class="mr-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">About</a>
<a href="https://toyhou.se/~faq/general" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">FAQ</a>
<a href="https://toyhou.se/~tickets" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">HelpDesk</a>
<a href="https://toyhou.se/~rules" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">Rules</a>
<a href="https://toyhou.se/~tos" class="mx-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">ToS</a>
<a href="https://toyhou.se/~browse/search" class="ml-2" style="font-size: 14.5px; font-weight: bold; color: #ff7e01">Search</a>
</p>
</div>
</div>
<!--===///////// FOOTER end /////////===-->
</div>
<!--====/////CREDITS WINDOW//////====-->
<div class="collapse fade" id="CREDIT" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; color: #ffffea; z-index: 1100">
<div id="ACC-CREDIT" class="card bg-faded border-0 rounded-0 p-3" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.7)">
<div class="mx-auto sticky-top" style="min-width: 55%">
<div class="card align-items-center" style="margin-top: 120px; border-radius: 25px 25px 0 0; border-width: 1px 1px 0 1px; border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.8); z-index: 5">
<!--Close button-->
<div style="position: absolute; top: 10px; right: 25px">
<a data-toggle="collapse" href="#CREDIT"><i class="fas fa-times" style="font-size: 25px; color: #ffffea"></i></a>
</div>
<!--Close button end-->
<div class="row no-gutters">
<!--Buttons-->
<div class="col">
<ul class="nav nav-pills">
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 40px; height: 40px; cursor: pointer">
<i class="far fa-code" style="font-size: 20px; color: #ffffea; opacity: 0.6; text-shadow: 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745"></i>
<div class="collapse fade show CODE" data-parent="#ACC-CREDIT" style="position:absolute; top:0; left:0; right:0; bottom:0;">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea;background: rgba(0, 0, 0, 0)">
<i class="far fa-code" style="margin-top: 2px; font-size: 20px; color: #ffffea; text-shadow: 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745, 0 0 1px #713745"></i>
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none" data-toggle="collapse" data-target=".CODE"></a>
</div>
</li>
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-2" style="width: 40px; height: 40px; cursor: pointer">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96599998_5kOvqGuUpH9aIfH.png" width="25px" style="opacity: 0.6">
<div class="collapse fade IMAGE" data-parent="#ACC-CREDIT" style="position:absolute; top:0; left:0; right:0; bottom:0;">
<div class="card rounded-0 h-100 justify-content-center align-items-center" style="border-width: 0 0 2px 0; border-color: #ffffea;background: rgba(0, 0, 0, 0)">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/96599998_5kOvqGuUpH9aIfH.png" width="25px" style="margin-top: 2px">
</div>
</div>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none" data-toggle="collapse" data-target=".IMAGE"></a>
</div>
</li>
</ul>
</div>
<!--Buttons end-->
</div>
</div>
<div class="card p-3 pb-4" style="height: 300px; border-radius: 0 0 25px 25px; border-color: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.7)">
<!--///Code credits///-->
<div class="collapse fade show active CODE" data-parent="#ACC-CREDIT">
<div class="row no-gutters align-items-center mt-3">
<div class="col-auto"><p style="font-size: 15px; font-weight: bold">Code credits</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<!--Text-->
<p class="mt-4">
<b>Code:</b> <a style="font-weight: bold; color: #7efdfe" href="https://toyhou.se/Username">
<!--
Free user
<i class="fi-torso user-name-icon"></i>Username
Premium user
<i class="fi-star user-name-icon"></i>Username
-->
<i class="fi-torso user-name-icon"></i>Username
</a><br>
<b>CSS emulator code:</b> <a style="font-weight: bold; color: #7efdfe" href="https://toyhou.se/FlowerlyRat"><i class="fi-torso user-name-icon"></i>FlowerlyRat</a><br>
<b>Layout:</b> Based on the game Sky: Children of the Light's UI<br>
<b>Other codes:</b> <a style="font-weight: bold; color: #ff7e01" href="https://toyhou.se/FlowerlyRat/characters/folder:4673560">Folder</a>
</p>
<!--Text end-->
</div>
<!--///Code credits///-->
<!--///Image credits///-->
<div class="collapse fade IMAGE" data-parent="#ACC-CREDIT">
<div class="row no-gutters align-items-center mt-3">
<div class="col-auto"><p style="font-size: 15px; font-weight: bold">Image credits</p></div>
<div class="col justify-content-center ml-2" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<!--Text-->
<p class="mt-4">
<b>Background image:</b> Sky: Children of the Light © thatgamecompany<br>
<b>Icons:</b> <a href="https://fontawesome.com/v6/search" style="font-weight: bold; color: #ff7e01">FontAwesome</a>, Sky: Children of the Light<br>
<b>Flags/ribbons:</b> taken from CoraMagics' <a href="https://toyhou.se/20187371." style="font-weight: bold; color: #ff7e01">Ribbon Masterlist</a>
</p>
<!--Text end-->
</div>
<!--///Image credits///-->
<div class="row no-gutters" style="position: absolute; bottom: -3px; left: 27px; right: 27px; opacity: 0.3">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
</div>
</div>
</div>
</div>
<!--====/////CREDITS WINDOW end//////====-->
</div>
</div>
<!-- Code container -->
</div>
</div>
</div>
</div>