[MISC/HTML] Sky: CotL folder
created by:FlowerlyRat
Custom ColorsHTMLFolder
Copy
<!--
╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╰━╯
Sky: Children of the Light folder: 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 target="_blank" style="font-weight: bold; color: #7efdfe" href="LINK_HERE">text here!</a>
Orange variant [to link everything else]:
<a target="_blank" style="font-weight: bold; color: #ff7e01" href="LINK_HERE">text here!</a>
Any areas that need the person's username have the "USERNAME" placeholder -> to replace everything at once, highlight "USERNAME", then do ctrl+F and replace it with yours
!!! The report button works differently, instructions for it are given inside this code !!!
Pop-up for the credits is at the end of the 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="margin-top: -15px; margin-bottom: px; left: -40vw; color: #ffffef; z-index: 5;">
<div style="width: 100vw">
<!--///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>
<ul class="nav nav-button nav-justified">
<!--Credits button-->
<li>
<div class="card bg-transparent border-0 rounded-0" style="position: absolute; top: 35px; right: 5px; z-index: 10">
<a class="btn btn-outline-none justify-content-center align-items-center" data-toggle="collapse" href="#CREDIT" style="height: 25px; width: 25px; box-shadow: none"><i class="fas fa-gear" style="font-size: 25px; color: #ffffef; text-shadow: 0 0 2px #684647, 0 0 2px #684647, 0 0 2px #684647"></i></a>
</div>
</li>
<!--///All characters folder///-->
<li>
<div class="card bg-transparent border-0 rounded-0" style="position: absolute; top: 35px; right: 45px; z-index: 10">
<a class="btn btn-outline-none justify-content-center align-items-center" href="https://toyhou.se/USERNAME/characters/folder:all" style="height: 25px; width: 25px; box-shadow: none"><i class="fas fa-user" style="font-size: 25px; color: #ffffef; text-shadow: 0 0 2px #684647, 0 0 2px #684647, 0 0 2px #684647"></i></a>
</div>
</li>
<!--///Unsorted folder///-->
<li>
<div class="card bg-transparent border-0 rounded-0" style="position: absolute; top: 35px; right: 85px; z-index: 10">
<a class="btn btn-outline-none justify-content-center align-items-center" href="https://toyhou.se/USERNAME/characters/folder:unsorted" style="height: 25px; width: 25px; box-shadow: none"><i class="fi-folder" style="font-size: 25px; color: #ffffef; text-shadow: 0 0 2px #684647, 0 0 2px #684647, 0 0 2px #684647"></i></a>
</div>
</li>
<!--///Go back button folder///-->
<li>
<div class="card bg-transparent border-0 rounded-0" style="position: absolute; top: 35px; right: 125px; z-index: 10">
<a class="btn btn-outline-none justify-content-center align-items-center" href="
LINK_HERE
" style="height: 25px; width: 25px; box-shadow: none"><i class="fi-arrow-up" style="font-size: 25px; color: #ffffef; text-shadow: 0 0 2px #684647, 0 0 2px #684647, 0 0 2px #684647"></i></a>
</div>
</li>
</ul>
<div class="card bg-transparent rounded-0 border-0" style=" min-height: 100vh">
<div class="row no-gutters">
<div class="container" style="max-width: 1300px">
<div class="row no-gutters">
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
UPPER CARD ON PHONE
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-12" style="margin-bottom: -70px">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
AVATAR [phone]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card bg-transparent border-0 rounded-0 p-0 align-items-center justify-content-center hidden-sm-up mt-4 mx-auto" style="height: 150px; width: 150px;">
<div class="card 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"></div>
<!--///Outer frame///-->
<img class="d-block mx-auto my-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/images/71211585_IQYjqdDDaiOOeid.png" style="position: absolute; opacity: 1; z-index: 5">
<!--///Inner spinning frame///-->
<div class="align-items-center justify-content-center" style="position: absolute; width: 123px; z-index: 5">
<i class="fas 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" style="margin-top: -75px; width: 100%; border-radius: 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
USERNAME [phone]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card border-0 rounded-0" style="padding: 3px; margin-top: 70px; border-radius: 22px; background: rgba(0, 0, 0, 0.8)">
<div class="btn btn-outline-warning p-0" style="width: 100%; color: #ffffef; border-width: 2px; border-radius: 20px; border-color: rgba(91, 92, 87, 0.7); filter: saturate(60%)">
<div class="card border-0 px-2" style="padding: 4px; border-radius: 18px; background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate" style="display: block">
Username
</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"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</div>
<!--Link-->
<a href="LINK_HERE"
class="btn" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; color: #ffffef; text-decoration: none; box-shadow: none"></a>
</div>
</div>
</div>
<!--===USERNAME [phone] end===-->
<!--Divider-->
<div class="row no-gutters align-items-center">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffef, #ffffef, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffef">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffef, #ffffef, rgba(0, 0, 0, 0))"></div>
</div>
<!--Divider end-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BLURB [phone]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card rounded-0" style="padding: 15px; 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]===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SOCIAL LINKS [phone] - duplicate the "SOCIAL LINK" section to add a platform
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<ul class="nav nav-button nav-justified justify-content-around mt-1 flex-wrap">
<!--===SOCIAL LINK===-->
<li>
<!--Tooltip + link right below this line-->
<a href="LINK_HERE" title="LINK_NAME" target="_blank"
class="tooltipster" style="color: #ffffef; text-decoration: none">
<div class="btn btn-outline-warning border-0" style="padding: 1px; width: 40px; height: 40px; color: #ffffef; border-radius: 11px; border-color: rgba(91, 92, 87, 0.7); filter: saturate(60%)">
<div class="card border-0 h-100 justify-content-center" style="border-radius: 10px; background: rgba(0, 0, 0, 0.8)">
<!--===LINK ICON===-->
<i class="fas fa-link
" style="font-size: 18px"></i>
</div>
</div>
</a>
</li>
<!--===SOCIAL LINK end===-->
</ul>
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BONUS LINKS [phone] - duplicate the "ADDITIONAL SIDE LINK" section to add a link
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--Divider-->
<div class="row no-gutters align-items-center">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffef, #ffffef, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffef">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffef, #ffffef, rgba(0, 0, 0, 0))"></div>
</div>
<!--Divider end-->
<!--===ADDITIONAL SIDE LINK===-->
<div class="card border-0 rounded-0 mb-2" style="padding: 3px; border-radius: 42px; background: rgba(0, 0, 0, 0.8); z-index: 1">
<!--add "disabled" to the div class right below to LOOK like its inactive-->
<div class="btn btn-outline-warning p-0" style="width: 100%; color: #ffffef; border-width: 2px; border-radius: 40px; border-color: rgba(91, 92, 87, 0.7); filter: saturate(60%)">
<div class="card border-0 px-2" style="padding: 4px; border-radius: 37px; background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate" style="display: block">
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"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</div>
<!--Link - add "disabled" to the class to ACTUALLY MAKE it inactive-->
<a href="LINK_HERE"
class="btn" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; color: #ffffef; text-decoration: none; box-shadow: none"></a>
</div>
</div>
</div>
<!--===ADDITIONAL SIDE LINK end===-->
</div>
</div>
<!--===///UPPER CARD PHONE end///===-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
COMPUTER SIDEBAR
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-md-2 mb-n5 mt-n3 mx-md-0 mx-auto hidden-sm-down">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
AVATAR [computer]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card bg-transparent border-0 rounded-0 p-0 align-items-center justify-content-center mt-4 mx-auto" style="height: 150px; width: 150px;">
<div class="card 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"></div>
<!--///Outer frame///-->
<img class="d-block mx-auto my-auto" src="https://f2.toyhou.se/file/f2-toyhou-se/images/71211585_IQYjqdDDaiOOeid.png" style="position: absolute; opacity: 1; z-index: 5">
<!--///Inner spinning frame///-->
<div class="align-items-center justify-content-center" style="position: absolute; width: 123px; z-index: 5">
<i class="fas 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 rounded-0 p-2" style="top: -77px; border-radius: 25px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7)">
<div style="margin-top: 30px">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
USERNAME [computer]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card border-0 rounded-0" style="padding: 3px; margin-top: 45px; border-radius: 22px; background: rgba(0, 0, 0, 0.8)">
<div class="btn btn-outline-warning p-0" style="width: 100%; color: #ffffef; border-width: 2px; border-radius: 20px; border-color: rgba(91, 92, 87, 0.7); filter: saturate(60%)">
<div class="card border-0 px-2" style="padding: 4px; border-radius: 18px; background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate" style="display: block">
Username
</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"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</div>
<!--Link-->
<a href="https://toyhou.se/USERNAME"
class="btn" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; color: #ffffef; text-decoration: none; box-shadow: none"></a>
</div>
</div>
</div>
<!--===USERNAME [computer] end===-->
<!--Divider-->
<div class="row no-gutters align-items-center">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffef, #ffffef, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffef">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffef, #ffffef, rgba(0, 0, 0, 0))"></div>
</div>
<!--Divider end-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BLURB [computer]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card rounded-0" style="padding: 15px; 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]===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SOCIAL LINKS [computer] - duplicate the "SOCIAL LINK" section to add a platform
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<ul class="nav nav-button nav-justified justify-content-around mt-1 flex-wrap">
<!--===SOCIAL LINK===-->
<li>
<!--Tooltip + link right below this line-->
<a href="LINK_HERE" title="LINK_NAME" target="_blank"
class="tooltipster" style="color: #ffffef; text-decoration: none">
<div class="btn btn-outline-warning border-0" style="padding: 1px; width: 40px; height: 40px; color: #ffffef; border-radius: 11px; border-color: rgba(91, 92, 87, 0.7); filter: saturate(60%)">
<div class="card border-0 h-100 justify-content-center" style="border-radius: 10px; background: rgba(0, 0, 0, 0.8)">
<!--===LINK ICON===-->
<i class="fas fa-link
" style="font-size: 18px"></i>
</div>
</div>
</a>
</li>
<!--===SOCIAL LINK end===-->
</ul>
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BONUS LINKS [computer] - duplicate the "ADDITIONAL SIDE LINK" section to add a link
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--Divider-->
<div class="row no-gutters align-items-center">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffef, #ffffef, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffef">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffef, #ffffef, rgba(0, 0, 0, 0))"></div>
</div>
<!--Divider end-->
<!--===ADDITIONAL SIDE LINK===-->
<div class="card border-0 rounded-0 mb-2" style="padding: 3px; border-radius: 42px; background: rgba(0, 0, 0, 0.8)">
<!--add "disabled" to the div class right below to LOOK like its inactive-->
<div class="btn btn-outline-warning p-0" style="width: 100%; color: #ffffef; border-width: 2px; border-radius: 40px; border-color: rgba(91, 92, 87, 0.7); filter: saturate(60%)">
<div class="card border-0 px-2" style="padding: 4px; border-radius: 37px; background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate" style="display: block">
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"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</div>
<!--Link - add "disabled" to the class to ACTUALLY MAKE it inactive-->
<a href="LINK_HERE"
class="btn" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; color: #ffffef; text-decoration: none; box-shadow: none"></a>
</div>
</div>
</div>
<!--===ADDITIONAL SIDE LINK end===-->
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SIDEBAR BUTTONS - change "USERNAME" for your own - !!! Report button works differently !!!
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--Divider-->
<div class="row no-gutters align-items-center mt-n1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffef, #ffffef, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffef">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffef, #ffffef, rgba(0, 0, 0, 0))"></div>
</div>
<!--Divider end-->
<!--===BULLETINS===-->
<div class="card border-0 rounded-0 mb-2" style="padding: 3px; border-radius: 42px; background: rgba(0, 0, 0, 0.8)">
<div class="btn btn-outline-warning p-0" style="width: 100%; color: #ffffef; border-width: 2px; border-radius: 40px; border-color: rgba(91, 92, 87, 0.7); filter: saturate(60%)">
<div class="card border-0 px-2" style="padding: 4px; border-radius: 37px; background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate" style="display: block">
Bulletins
</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-newspaper"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</div>
<!--Link-->
<a href="https://toyhou.se/USERNAME/bulletins"
class="btn" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; color: #ffffef; text-decoration: none; box-shadow: none"></a>
</div>
</div>
</div>
<!--===BULLETINS end===-->
<!--===CHARACTERS===-->
<div class="card border-0 rounded-0 mb-2" style="padding: 3px; border-radius: 42px; background: rgba(0, 0, 0, 0.8)">
<div class="btn btn-outline-warning p-0" style="width: 100%; color: #ffffef; border-width: 2px; border-radius: 40px; border-color: rgba(91, 92, 87, 0.7); filter: saturate(60%)">
<div class="card border-0 px-2" style="padding: 4px; border-radius: 37px; background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate" style="display: block">
Characters
</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-users"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</div>
<!--Link-->
<a href="https://toyhou.se/USERNAME/characters"
class="btn" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; color: #ffffef; text-decoration: none; box-shadow: none"></a>
</div>
</div>
</div>
<!--===CHARACTERS end===-->
<!--===WORLDS===-->
<div class="card border-0 rounded-0 mb-2" style="padding: 3px; border-radius: 42px; background: rgba(0, 0, 0, 0.8)">
<div class="btn btn-outline-warning p-0" style="width: 100%; color: #ffffef; border-width: 2px; border-radius: 40px; border-color: rgba(91, 92, 87, 0.7); filter: saturate(60%)">
<div class="card border-0 px-2" style="padding: 4px; border-radius: 37px; background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate" style="display: block">
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"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</div>
<!--Link-->
<a href="https://toyhou.se/USERNAME/worlds"
class="btn" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; color: #ffffef; text-decoration: none; box-shadow: none"></a>
</div>
</div>
</div>
<!--===WORLDS end===-->
<!--===FAVORITES===-->
<div class="card border-0 rounded-0 mb-2" style="padding: 3px; border-radius: 42px; background: rgba(0, 0, 0, 0.8)">
<div class="btn btn-outline-warning p-0" style="width: 100%; color: #ffffef; border-width: 2px; border-radius: 40px; border-color: rgba(91, 92, 87, 0.7); filter: saturate(60%)">
<div class="card border-0 px-2" style="padding: 4px; border-radius: 37px; background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate" style="display: block">
Favorites
</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-star"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</div>
<!--Link-->
<a href="https://toyhou.se/USERNAME/favorites"
class="btn" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; color: #ffffef; text-decoration: none; box-shadow: none"></a>
</div>
</div>
</div>
<!--===FAVORITES end===-->
<!--Divider-->
<div class="row no-gutters align-items-center mt-n1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffef, #ffffef, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffef">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffef, #ffffef, rgba(0, 0, 0, 0))"></div>
</div>
<!--Divider end-->
<!--===DESIGNS===-->
<div class="card border-0 rounded-0 mb-2" style="padding: 3px; border-radius: 42px; background: rgba(0, 0, 0, 0.8)">
<div class="btn btn-outline-warning p-0" style="width: 100%; color: #ffffef; border-width: 2px; border-radius: 40px; border-color: rgba(91, 92, 87, 0.7); filter: saturate(60%)">
<div class="card border-0 px-2" style="padding: 4px; border-radius: 37px; background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate" style="display: block">
Designs
</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-palette"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</div>
<!--Link-->
<a href="https://toyhou.se/USERNAME/created"
class="btn" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; color: #ffffef; text-decoration: none; box-shadow: none"></a>
</div>
</div>
</div>
<!--===DESIGNS end===-->
<!--===ART===-->
<div class="card border-0 rounded-0 mb-2" style="padding: 3px; border-radius: 42px; background: rgba(0, 0, 0, 0.8)">
<div class="btn btn-outline-warning p-0" style="width: 100%; color: #ffffef; border-width: 2px; border-radius: 40px; border-color: rgba(91, 92, 87, 0.7); filter: saturate(60%)">
<div class="card border-0 px-2" style="padding: 4px; border-radius: 37px; background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate" style="display: block">
Art
</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-paint-brush"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</div>
<!--Link-->
<a href="https://toyhou.se/USERNAME/art"
class="btn" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; color: #ffffef; text-decoration: none; box-shadow: none"></a>
</div>
</div>
</div>
<!--===ART end===-->
<!--===LIBRARY===-->
<div class="card border-0 rounded-0 mb-2" style="padding: 3px; border-radius: 42px; background: rgba(0, 0, 0, 0.8)">
<div class="btn btn-outline-warning p-0" style="width: 100%; color: #ffffef; border-width: 2px; border-radius: 40px; border-color: rgba(91, 92, 87, 0.7); filter: saturate(60%)">
<div class="card border-0 px-2" style="padding: 4px; border-radius: 37px; background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate" style="display: block">
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"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</div>
<!--Link-->
<a href="https://toyhou.se/USERNAME/literatures"
class="btn" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; color: #ffffef; text-decoration: none; box-shadow: none"></a>
</div>
</div>
</div>
<!--===LIBRARY end===-->
<!--Divider-->
<div class="row no-gutters align-items-center mt-n1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffef, #ffffef, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffef">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffef, #ffffef, rgba(0, 0, 0, 0))"></div>
</div>
<!--Divider end-->
<!--===COMMENTS===-->
<div class="card border-0 rounded-0 mb-2" style="padding: 3px; border-radius: 42px; background: rgba(0, 0, 0, 0.8)">
<div class="btn btn-outline-warning p-0" style="width: 100%; color: #ffffef; border-width: 2px; border-radius: 40px; border-color: rgba(91, 92, 87, 0.7); filter: saturate(60%)">
<div class="card border-0 px-2" style="padding: 4px; border-radius: 37px; background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate" style="display: block">
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"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</div>
<!--Link-->
<a href="https://toyhou.se/USERNAME/comments"
class="btn" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; color: #ffffef; text-decoration: none; box-shadow: none"></a>
</div>
</div>
</div>
<!--===COMMENTS end===-->
<!--===STATS===-->
<div class="card border-0 rounded-0 mb-2" style="padding: 3px; border-radius: 42px; background: rgba(0, 0, 0, 0.8)">
<div class="btn btn-outline-warning p-0" style="width: 100%; color: #ffffef; border-width: 2px; border-radius: 40px; border-color: rgba(91, 92, 87, 0.7); filter: saturate(60%)">
<div class="card border-0 px-2" style="padding: 4px; border-radius: 37px; background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate" style="display: block">
Stats
</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-chart-bar"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</div>
<!--Link-->
<a href="https://toyhou.se/USERNAME/stats"
class="btn" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; color: #ffffef; text-decoration: none; box-shadow: none"></a>
</div>
</div>
</div>
<!--===STATS end===-->
<!--Divider-->
<div class="row no-gutters align-items-center mt-n1">
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to left, #ffffef, #ffffef, rgba(0, 0, 0, 0))"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="font-size: px; color: #ffffef">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 1px; background: linear-gradient(to right, #ffffef, #ffffef, rgba(0, 0, 0, 0))"></div>
</div>
<!--Divider end-->
<!--===MESSAGE===-->
<div class="card border-0 rounded-0 mb-2" style="padding: 3px; border-radius: 42px; background: rgba(0, 0, 0, 0.8)">
<div class="btn btn-outline-warning p-0" style="width: 100%; color: #ffffef; border-width: 2px; border-radius: 40px; border-color: rgba(91, 92, 87, 0.7); filter: saturate(60%)">
<div class="card border-0 px-2" style="padding: 4px; border-radius: 37px; background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate" style="display: block">
Message
</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-envelope"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</div>
<!--Link-->
<a href="https://toyhou.se/~messages/create/USERNAME"
class="btn" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; color: #ffffef; text-decoration: none; box-shadow: none"></a>
</div>
</div>
</div>
<!--===MESSAGE end===-->
<!--===SUBSCRIBE===-->
<div class="card border-0 rounded-0 mb-2" style="padding: 3px; border-radius: 42px; background: rgba(0, 0, 0, 0.8)">
<div class="btn btn-outline-warning p-0" style="width: 100%; color: #ffffef; border-width: 2px; border-radius: 40px; border-color: rgba(91, 92, 87, 0.7); filter: saturate(60%)">
<div class="card border-0 px-2" style="padding: 4px; border-radius: 37px; background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate" style="display: block">
Subscribe
</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-plus"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</div>
<!--Link-->
<a href="https://toyhou.se/USERNAME/subscribe"
class="btn" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; color: #ffffef; text-decoration: none; box-shadow: none"></a>
</div>
</div>
</div>
<!--===SUBSCRIBE end===-->
<!--===AUTHORIZE===-->
<div class="card border-0 rounded-0 mb-2" style="padding: 3px; border-radius: 42px; background: rgba(0, 0, 0, 0.8)">
<div class="btn btn-outline-warning p-0" style="width: 100%; color: #ffffef; border-width: 2px; border-radius: 40px; border-color: rgba(91, 92, 87, 0.7); filter: saturate(60%)">
<div class="card border-0 px-2" style="padding: 4px; border-radius: 37px; background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate" style="display: block">
Authorize
</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-heart"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</div>
<!--Link-->
<a href="https://toyhou.se/USERNAME/authorize"
class="btn" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; color: #ffffef; text-decoration: none; box-shadow: none"></a>
</div>
</div>
</div>
<!--===AUTHORIZE end===-->
<!--===BLOCK===-->
<div class="card border-0 rounded-0 mb-2" style="padding: 3px; border-radius: 42px; background: rgba(0, 0, 0, 0.8)">
<div class="btn btn-outline-warning p-0" style="width: 100%; color: #ffffef; border-width: 2px; border-radius: 40px; border-color: rgba(91, 92, 87, 0.7); filter: saturate(60%)">
<div class="card border-0 px-2" style="padding: 4px; border-radius: 37px; background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate" style="display: block">
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"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</div>
<!--Link-->
<a href="https://toyhou.se/USERNAME/block"
class="btn" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; color: #ffffef; text-decoration: none; box-shadow: none"></a>
</div>
</div>
</div>
<!--===BLOCK end===-->
<!--===REPORT===-->
<div class="card border-0 rounded-0 mb-2" style="padding: 3px; border-radius: 42px; background: rgba(0, 0, 0, 0.8)">
<div class="btn btn-outline-warning p-0" style="width: 100%; color: #ffffef; border-width: 2px; border-radius: 40px; border-color: rgba(91, 92, 87, 0.7); filter: saturate(60%)">
<div class="card border-0 px-2" style="padding: 4px; border-radius: 37px; background: rgba(0, 0, 0, 0.8)">
<div class="row no-gutters">
<div class="col-9 my-auto">
<p class="text-left text-truncate" style="display: block">
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"></i>
<!--===BUTTON ICON end===-->
</div>
</div>
</div>
<!--Link
You NEED to get your ID, either ask a friend, use an alternative account, or inspect your profile and search "user-id" to retrieve it-->
<a href="https://toyhou.se/~tickets/create/user/USER_ID"
class="btn" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; color: #ffffef; text-decoration: none; box-shadow: none"></a>
</div>
</div>
</div>
<!--===REPORT end===-->
</div>
</div>
</div>
<!--===///Side bar///===-->
<div class="col-md-10 pl-md-3 mr-md-n3 mx-auto">
<div class="justify-content-center h-100" style="margin-top: 65px">
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
PROPER FOLDER CODE
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card bg-transparent border-0 rounded-0 w-100">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
FOLDER DESCRIPTION
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div id="MAIN-TAB">
<div id="MAIN-TAB-2">
<div class="card align-items-center" style="border-radius: 25px 25px 0 0; border-color: rgba(255, 255, 255, 0.1) rgba(255, 255, 255, 0.1) rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.8); z-index: 5">
<div class="row no-gutters">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
BUTTONS
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col">
<ul class="nav nav-pills">
<!--===Main description===-->
<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">
<!--FA icon [inactive]-->
<i class="fas fa-bookmark"
style="font-size: 20px; color: #ffffef; opacity: 0.6"></i>
<div class="collapse fade show SUM" data-parent="#MAIN-TAB-2" 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: #ffffef;background: rgba(0, 0, 0, 0)">
<!--FA icon [active]-->
<i class="fas fa-bookmark"
style="margin-top: 2px; font-size: 20px; color: #ffffef"></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=".SUM"></a>
</div>
</li>
<!--===Main description end===-->
<!--===Opt. part I description===-->
<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">
<!--FA icon [inactive]-->
<i class="fas fa-link"
style="font-size: 20px; color: #ffffef; opacity: 0.6"></i>
<div class="collapse fade PART-I" data-parent="#MAIN-TAB-2" 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: #ffffef;background: rgba(0, 0, 0, 0)">
<!--FA icon [active]-->
<i class="fas fa-link"
style="margin-top: 2px; font-size: 20px; color: #ffffef"></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=".PART-I"></a>
</div>
</li>
<!--===Opt. part I description end===-->
<!--===Key symbols===-->
<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">
<!--FA icon [inactive]-->
<i class="fas fa-key"
style="font-size: 20px; color: #ffffef; opacity: 0.6"></i>
<div class="collapse fade KEY" data-parent="#MAIN-TAB-2" 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: #ffffef;background: rgba(0, 0, 0, 0)">
<!--FA icon [active]-->
<i class="fas fa-key"
style="margin-top: 2px; font-size: 20px; color: #ffffef"></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=".KEY"></a>
</div>
</li>
<!--===Key symbols end===-->
</ul>
</div>
<!--===///BUTTONS end///===-->
</div>
</div>
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
FOLDER DESCRIPTION
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="card px-3 pb-4" style="color: #cdcfc3; 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; z-index: 5">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SUMMARY DESCRIPTION
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--===///Synopsis///===-->
<div class="collapse fade show active SUM" data-parent="#MAIN-TAB-2">
<div class="card bg-transparent border-0 rounded-0" style="height: 220px; overflow: hidden">
<div class="card bg-transparent border-0 text-justify" style="padding-right: 30px; margin-right: -29px; overflow-y: auto">
<div class="row no-gutters align-items-center mt-4 my-3">
<div class="col-auto"><p style="font-size: 15px; font-weight: bold; color: #ffffef">
Folder name
</p></div>
<div class="col justify-content-center ml-2" style="color: #ffffef; border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<!--===Text===-->
<p>
This is where you add your folder description, whether it be about what this folder is for or to summarise the story. This box scrolls after a certain amount of text!
</p>
<!--===Text end===-->
</div>
</div>
</div>
<!--===///Synopsis end///===-->
<!--===///Opt. part I description///===-->
<div class="collapse fade PART-I" data-parent="#MAIN-TAB-2">
<div class="card bg-transparent border-0 rounded-0 pr-3" style="height: 220px; overflow: hidden">
<div class="card bg-transparent border-0 text-justify" style="padding-right: 30px; margin-right: -29px; overflow-y: auto">
<div class="row no-gutters align-items-center mt-4 my-3">
<div class="col-auto"><p style="font-size: 15px; font-weight: bold; color: #ffffef">
Optional additional description
</p></div>
<div class="col justify-content-center ml-2" style="color: #ffffef; border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<!--===Text===-->
<p>
This tab is to add another description or further information to the folder, for example if a story is split into multiple parts!
</p>
<p>
This box also scrolls after a certain amount of text
</p>
<!--===Text end===-->
</div>
</div>
</div>
<!--===///Opt. part I description end///===-->
<!--===///Key symbols description///===-->
<div class="collapse fade KEY" data-parent="#MAIN-TAB-2">
<div class="card bg-transparent border-0 rounded-0 pr-3" style="height: 220px; overflow: hidden">
<div class="card bg-transparent border-0 text-justify" style="padding-right: 30px; margin-right: -29px; overflow-y: auto">
<div class="row no-gutters align-items-center mt-4 my-3">
<div class="col-auto"><p style="font-size: 15px; font-weight: bold; color: #ffffef">
Key symbols
</p></div>
<div class="col justify-content-center ml-2" style="color: #ffffef; border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<p>
Meaning of the symbols put in front of character names:
</p>
<!--===Text===-->
<ul class="list-unstyled">
<li><i class="fas fa-stars"></i> Absolute favorite</li>
<li><i class="fas fa-star"></i> Favorites</li>
<li><i class="fas fa-heart"></i> Needs more love</li>
<li><i class="fas fa-seedling"></i> Low priority</li>
<li><i class="fas fa-tools"></i> Missing reference/concrete design</li>
</ul>
<!--===Text end===-->
</div>
</div>
</div>
<!--===///Key symbols description end///===-->
<div class="row no-gutters 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>
<!--===///Additional notes///===-->
<p class="text-center">
This area is intended if you happen to have anything to add, such as how you feel about characters being drawn or put into dreamie folders!
</p>
<!--===///Additional notes end///===-->
</div>
<!--===///SUMMARY DESCRIPTION end///===-->
</div>
</div>
<!--===///FOLDER DESCRIPTION end///===-->
<!--Divider-->
<div class="row no-gutters my-4">
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, rgba(0, 0, 0, 0), #ffffef, #ffffef)"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-1" style="margin-top: -23px; font-size: 30px; color: #ffffef">◆</p>
</div>
<div class="col border-0 rounded-0" style="height: 2px; background: linear-gradient(to right, #ffffef, #ffffef, rgba(0, 0, 0, 0))"></div>
</div>
<!--Divider end-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CHARACTERS
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="user-characters-gallery characters-gallery" style="z-index: 10">
<div class="gallery-row">
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
--[ CHARACTER 1 ]-- - Duplicate this entire section to add a character || Simply change the "CHARA_ID" with you character's [the series of numbers found inside the link]
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="text-center gallery-thumb character-thumb gallery-item">
<!--===///IMAGE THUMBNAIL///===-->
<div class="thumb-image">
<div class="card bg-dark border-0 rounded-0 tooltipster justify-content-center align-items-center mx-auto" style="border-radius: 50%; margin-right: -4px; height: 130px; width: 130px">
<img class="d-block mx-auto my-auto" style="position: absolute; top: -21px; max-width: 170px" src="https://f2.toyhou.se/file/f2-toyhou-se/images/75393822_s395YZlvX9nJ2IL.png">
<!--===Image link below===-->
<ul class="nav nav-button nav-justified" style="border-radius: 50%; background-image: url(
CHARA_AVATAR_HERE
);background-size:cover; width: 130px; height: 130px;">
<li class="nav-item">
<a class="nav-link btn btn-outline-danger rounded-0 border-0" style="filter: hue-rotate(240deg) saturate(125%) brightness(150%); border-radius: 50%; box-shadow:none;mix-blend-mode: overlay; width: 130px; height: 130px;" href="
https://toyhou.se/CHARA_ID.
"></a>
<!--===Profile link above [image]===-->
</li>
</ul>
</div>
</div>
<!--===///IMAGE THUMBNAIL END///===-->
<!--===///NAME///===-->
<div class="thumb-caption mt-n2">
<span class="thumb-character-name">
<ul class="nav nav-button nav-justified" style="border-radius: 8px">
<li class="col-12">
<!--===Profile link below [name]===-->
<a href="
https://toyhou.se/CHARA_ID.
" style="color: #ffffef; text-decoration: none">
<div class="btn btn-sm character-name-badge border-0 btn-outline-warning mx-n3" style="padding: 1px; color: #ffffef; border-radius: 8px; filter: saturate(60%)">
<div class="card border-0 justify-content-center" style="padding: 10px; border-radius: 7px; background: rgba(0, 0, 0, 0.8)">
<!--===Key icon + name===-->
<i class="fas fa-star mr-2"></i>
<b>
Chara name
</b>
</div>
</div>
</a>
</li>
</ul>
</span>
</div>
<!--===///NAME end///===-->
<!--===///STATS [you need to manually modify them depending on the character and everytime they change]///===-->
<div class="small thumb-character-stats text-center mt-2 mb-5">
<!--Images-->
<a class="thumb-character-stat images" title="Images"
href="
https://toyhou.se/CHARA_ID./gallery
" style="color: #ffffef; text-shadow: 0 0 2px #684647, 0 0 2px #684647, 0 0 2px #684647">
<i class="fi-photo"></i></a>
<!--Comments-->
<a class="thumb-character-stat comments" title="Comments"
href="
https://toyhou.se/CHARA_ID./comments
" style="color: #ffffef; text-shadow: 0 0 2px #684647, 0 0 2px #684647, 0 0 2px #684647">
<i class="fi-comment"></i></a>
<!--Links-->
<a class="thumb-character-stat links" title="Links"
href="
https://toyhou.se/CHARA_ID./links
" style="color: #ffffef; text-shadow: 0 0 2px #684647, 0 0 2px #684647, 0 0 2px #684647">
<i class="fi-link"></i></a>
<!--Literatures-->
<a class="thumb-character-stat literatures" title="Literatures"
href="
https://toyhou.se/CHARA_ID./literatures
" style="color: #ffffef; text-shadow: 0 0 2px #684647, 0 0 2px #684647, 0 0 2px #684647">
<i class="fi-book"></i></a>
<!--Tabs-->
<span class="thumb-character-stat tabs" title="Tabs" style="color: #ffffef; text-shadow: 0 0 2px #684647, 0 0 2px #684647, 0 0 2px #684647">
<i class="fi-bookmark"></i></span>
<!--Edit [only you can actually have access to the page]-->
<a class="thumb-character-stat edit" title="Edit" href="
https://toyhou.se/~characters/edit/CHARA_ID
" style="color: #ffffef; text-shadow: 0 0 2px #684647, 0 0 2px #684647, 0 0 2px #684647">
<i class="fi-pencil"></i>
</a>
</div>
<!--===///STATS end///===-->
</div>
<!--===////// [ CHARACTER 1 ] end//////===-->
</div>
</div>
<!--===///CHARACTERS end///===-->
<!--===///PROPER FOLDER CODE end///===-->
</div>
</div>
</div>
</div>
</div>
<!--===/////////FOOTER/////////===-->
<div class="mr-lg-2 ml-lg-4 mt-4" style="width: 100%">
<div class="card justify-content-center align-items-center mx-2" style="height: 90px; color: rgba(255, 255, 239, 0.5); border-radius: 10px; 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><br>
Inspired from TheFaerieMerchant
</p>
</div>
</div>
<!--===/////////FOOTER end/////////===-->
</div>
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
CREDITS WINDOW
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="collapse fade" id="CREDIT" style="z-index: 1100">
<div id="ACC-CREDIT">
<div id="ACC-CREDIT-2" 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.1); background: rgba(0, 0, 0, 0.8); z-index: 5">
<!--Close button-->
<div style="position: absolute; top: 13px; right: 25px">
<a class="btn btn-outline-none align-items-center ml-n3" data-toggle="collapse" href="#CREDIT" style="height: 15px; width: 15px; box-shadow: none"><i class="fas fa-times" style="font-size: 20px; color: #ffffef"></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; opacity: 0.6"></i>
<div class="collapse fade show CODE" data-parent="#ACC-CREDIT-2" 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: #ffffef;background: rgba(0, 0, 0, 0)">
<i class="far fa-code" 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=".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">
<i class="far fa-images" style="font-size: 20px; opacity: 0.6"></i>
<div class="collapse fade IMAGE" data-parent="#ACC-CREDIT-2" 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: #ffffef;background: rgba(0, 0, 0, 0)">
<i class="far fa-images" 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=".IMAGE"></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 p-3 pb-4" style="height: 300px; border-radius: 0 0 25px 25px; border-width: 0 1px 1px 1px; border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.7); overflow: hidden; z-index: 5">
<!--///Code credits///-->
<div class="collapse fade show active CODE" data-parent="#ACC-CREDIT-2">
<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 target="_blank" style="font-weight: bold; color: #7efdfe" href="https://toyhou.se/FlowerlyRat"><i class="fi-torso user-name-icon"></i>FlowerlyRat</a><br>
<b>Inspired from:</b> <a target="_blank" style="font-weight: bold; color: #7efdfe" href="https://toyhou.se/TheFaerieMerchant"><i class="fi-torso user-name-icon"></i>TheFaerieMerchant</a><br>
<b>Layout:</b> Based on the game Sky: Children of the Light's UI<br>
<b>Other codes:</b> <a target="_blank" 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-2">
<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 target="_blank" href="https://fontawesome.com/v6/search" style="font-weight: bold; color: #ff7e01">FontAwesome</a>
</p>
<!--Text end-->
</div>
<!--///Image credits///-->
</div>
<div class="row no-gutters my-5" style="position: absolute; bottom: -48px; left: 27px; right: 27px">
<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>
<!--Content-->
</div>
</div>