[MISC] Directory!
created by:FlowerlyRat
Custom ColorsHTMLFolder
Copy
<!--
╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
△▽/╱╱╱╱╱╱╱╱╱╱╱╰━╯
V1: code by FlowerlyRat || Part of the folder growing bundle
> It is recommended to use circlejourney's ToyHouse live editor -> https://th.circlejourney.net/
Accent color: #f5335a
-->
<!--============= PAGEDOLL =============-->
<div class="fixed-bottom pb-2 d-inline-block tooltipster" style="right:5px;left:inherit;cursor: grab" title="Don't forget to check my terms and permissions!">
<img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/98881994_XEqoSdWoXKO4gjC.png
" alt="pagedoll" style="max-height: 200px">
</div>
<!--============= PAGEDOLL END =============-->
<!--============= MAIN CODE =============-->
<div class="p-3" style="margin-left: -23px; margin-right: -10px; margin-top: -40px; margin-top: -20px">
<div class="card border-0 rounded-0" style="margin-top:-30px;">
<div class="mb-5" style="border-width: 5px 0 0 0; border-style: double; color: #f5335a"></div>
<!--============= TERMS BUTTON =============-->
<ul class="nav nav-button nav-justified" style="background:#f5335a">
<li class="nav-item">
<a class="nav-link btn btn-outline-primary rounded-0 border-0" style="box-shadow:none;mix-blend-mode: luminosity;color:#fff; font-size:20px" href="
LINK_TO_TERMS_HERE
"><i class="fas fa-star fa-spin fa-spin-reverse" style="animation-duration:4s"></i>
Terms
<i class="fas fa-star fa-spin" style="animation-duration:4s"></i></a>
</li>
</ul>
<!--============= TERMS BUTTON end =============-->
<div class="mt-5 mb-3" style="border-width: 0 0 5px 0; border-style: double; color: #f5335a"></div>
<!--============= FEATURED BUTTONS =============-->
<ul class="nav nav-button nav-justified" style="background:#f5335a">
<li class="nav-item">
<a class="nav-link btn btn-outline-primary rounded-0 border-0" style="box-shadow:none;mix-blend-mode: luminosity;color:#fff;" href="
FEATURED_LINK_HERE
"><i class="fas fa-star fa-spin fa-spin-reverse" style="animation-duration:4s"></i><b>
Name
</b></a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-outline-primary rounded-0 border-0" style="box-shadow:none;mix-blend-mode: luminosity;color:#fff;" href="
FEATURED_LINK_HERE_2
"><i class="fas fa-star fa-spin fa-spin-reverse" style="animation-duration:4s"></i><b>
Name
</b></a>
</li>
</ul>
<!--============= FEATURED BUTTONS end =============-->
<div class="row justify-content-center">
<!--/////////////////// FOLDER 1 ///////////////////--><!-- Duplicate this entire section to add a new folder card -->
<div class="col-md-3"><div class="card my-3 bg-faded" style="border-width: 3px">
<!-- FOLDER IMAGE -->
<div class="card border-0" style="border-radius: 2px 2px 0 0; height: 250px; background-image: url(
https://f2.toyhou.se/file/f2-toyhou-se/images/70743045_q4m0oyA3TGBjUIk.png
); background-size: cover; background-position: center"></div>
<!-- FOLDER IMAGE -->
<div class="p-3">
<!--//// TITLE + DESCRIPTION ////-->
<h5 class="card-title"><i class="fad fa-star-christmas"></i>
Folder name
</h5><p>
Folder description goes here
</p><hr>
<!--//// TITLE + DESCRIPTION end ////-->
<!--//// SUBFOLDER LINKS ////--><!-- Duplicate this entire section to add a new subfolder link -->
<ul class="nav nav-button nav-justified" style="background:#f5335a">
<li class="nav-item">
<a class="nav-link btn btn-outline-primary rounded-0 border-0" style="box-shadow:none;mix-blend-mode: luminosity;color:#fff;" href="
FOLDER_LINK_HERE
"><i class="fas fa-sparkle">
</i><b><span class="text-align:center">
Subfolder name
</span></b></a>
</li>
</ul>
<!--//// SUBFOLDER LINKS end ////-->
</div>
</div></div>
<!--/////////////////// FOLDER 1 end ///////////////////-->
</div>
<a class="mt-1 mb-n4" href="https://toyhou.se/FlowerlyRat/characters/folder:4673560"><i class="fas fa-code tooltipster" title="Code by FlowerlyRat"></i></a>
</div>
</div>
<!--============= MAIN CODE END =============-->Copy
<!--
╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
△▽/╱╱╱╱╱╱╱╱╱╱╱╰━╯
V2: code by FlowerlyRat || Part of the folder growing bundle
> It is recommended to use circlejourney's ToyHouse live editor -> https://th.circlejourney.net/
Text-color: #fff
Accent color: #f5335a
Secondary accent color: #ffd96e
Darkest background: #1c141d
Background: #251a26
Lightest background: #47395c
Border - rgba value used: 245, 51, 90
-->
<!--============= BACKGROUND =============-->
<div class="card border-0 rounded-0" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background-color: #1c141d; background-image: url(
https://www.transparenttextures.com/patterns/stardust.png
); z-index: 0"></div>
<!--============= BACKGROUND =============-->
<!--============= PAGEDOLL =============-->
<div class="fixed-bottom pb-2 d-inline-block tooltipster" style="right: 5px; left: inherit; cursor: grab" title="
Don't forget to check my terms!
">
<img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/98881994_XEqoSdWoXKO4gjC.png
" alt="pagedoll" style="max-height: 170px">
</div>
<!--============= PAGEDOLL END =============-->
<!--============= MAIN CODE =============-->
<div class="card bg-transparent border-0 rounded-0 p-3" style="margin-left: -29px; margin-right: -14px; margin-top: -50px; color: #fff">
<!--//// HEADER ////-->
<div class="row no-gutters mb-3 align-items-center" style="margin-top: -40px">
<div class="col-auto mr-1 align-items-center">
<i class="fas fa-sparkle" style="color: #ffd96e"></i>
</div>
<div class="col" style="border-width: 1px 0 2px 0; height: 5px; border-style: solid; color: #f5335a; opacity: 0.5"></div>
<div class="col-auto"><h1 class="text-capitalize text-white px-2" style="font-variant: small-caps; letter-spacing: 4px; font-size: 35px; text-shadow: 0 0 1px #ffd96e, 0 0 5px #ffd96e, 0 0 10px #f5335a;">
Welcome
</h1></div>
<div class="col" style="border-width: 2px 0 1px 0; height: 5px; border-style: solid; color: #f5335a; opacity: 0.5"></div>
<div class="col-auto mr-1 align-items-center">
<i class="fas fa-sparkle" style="color: #ffd96e"></i>
</div>
</div>
<!--//// HEADER end ////-->
<!--//// TERMS LINK ////-->
<ul class="nav nav-button nav-justified" style="background-color: #f5335a">
<li class="nav-item">
<a class="nav-link btn btn-outline-danger rounded-0 border-0" style="box-shadow: none; mix-blend-mode: screen; color: #ffd96e; font-size:20px" href="
LINK_TO_TERMS_HERE
"><i class="fas fa-star fa-spin fa-spin-reverse" style="animation-duration: 4s"></i><span style="font-variant: small-caps;"><b>
Terms
</b></span><i class="fas fa-star fa-spin" style="animation-duration:4s"></i></a>
</li>
</ul>
<!--//// TERMS LINK end ////-->
<div class="my-3" style="border-width: 2px 0 0 0; height: 5px; border-style: dashed; color: #f5335a; opacity: 0.3"></div>
<!--//// FEATURED ////-->
<div class="row no-gutters justify-content-center align-items-center">
<!-- CARD 1 -->
<div class="card rounded-0 border-0 p-3 pb-3 m-2" style="border-width: 2px; background-color: #47395c">
<div class="row no-gutters align-items-center" style="width: 240px">
<li class="col-auto card bg-transparent border-0 rounded-0">
<a class="btn border-0 rounded-0 align-items-center justify-content-center" style="box-shadow: none" href="
FEATURED_LINK_HERE
"><i class="fas fa-sparkle"
style="font-size: 20px; color: #ffd96e;"></i></a>
</li>
<div class="col card bg-transparent border-0 rounded-0 mr-3">
<p style="font-variant: small-caps; letter-spacing: 4px; text-shadow: 0 0 1px #ffd96e, 0 0 5px #ffd96e, 0 0 10px #f5335a;">
Name
</p>
</div>
</div>
</div>
<!-- CARD 1 end -->
<!-- CARD 2 -->
<div class="card rounded-0 p-3 pb-3 m-2 border-0" style="border-width: 2px; background-color: #47395c">
<div class="row no-gutters align-items-center" style="width: 240px">
<li class="col-auto card bg-transparent border-0 rounded-0">
<a class="btn border-0 rounded-0 align-items-center justify-content-center" style="box-shadow: none" href="
FEATURED_LINK_HERE
"><i class="fas fa-sparkle"
style="font-size: 20px; color: #ffd96e;"></i></a>
</li>
<div class="col card bg-transparent border-0 rounded-0 mr-3">
<p style="font-variant: small-caps; color: #fff; letter-spacing: 4px; text-shadow: 0 0 1px #ffd96e, 0 0 5px #ffd96e, 0 0 10px #f5335a;">
Name
</p>
</div>
</div>
</div>
<!-- CARD 2 end -->
</div>
<!--//// FEATURED end ////-->
<!--///Divider///-->
<div class="card border-0 rounded-0 px-3 pt-4" style="background-color: #1c141d; background-image: url(https://www.transparenttextures.com/patterns/stardust.png)">
<div class="row no-gutters align-items-center">
<div class="col" style="border-width: 2px 0 1px 0; height: 5px; border-style: solid; color: #f5335a; opacity: 0.3"></div>
<div class="col-auto mx-2">
<a class="btn border-0 py-1 px-0 justify-content-center align-items-center" data-toggle="tooltip" title="Code by FlowerlyRat" href="https://toyhou.se/FlowerlyRat/characters/folder:4673560" style="color: #ffd96e; font-size: 15px"><i class="fas fa-sharp fa-less-than" style="font-size: 10px"></i><i class="fas fa-sharp fa-eye-slash fa-flip-horizontal"></i><i class="fas fa-sharp fa-greater-than" style="font-size: 10px"></i></a>
</div>
<div class="col" style="border-width: 1px 0 2px 0; height: 5px; border-style: solid; color: #f5335a; opacity: 0.3"></div>
</div>
</div>
<!--///Divider end///-->
<div class="row no-gutters justify-content-center">
<!--//// FOLDER 1 ////--><!-- Duplictae this entire section to add a folder -->
<div class="col-lg-4 py-4 px-3">
<div class="card rounded-0 p-3 justify-content-center" style="border-width: 2px; background-color: #251a26; border-color: rgba(245, 51, 90, 0.3)">
<div class="row no-gutters">
<div class="col-auto"><h5 class="text-capitalize text-white mr-1" style="font-variant: small-caps; letter-spacing: 4px; text-shadow: 0 0 1px #ffd96e, 0 0 5px #ffd96e, 0 0 10px #f5335a;">
Folder name
</h5></div>
<div class="col my-auto" style="border-width: 1px 0 2px 0; height: 5px; border-style: solid; color: #f5335a; opacity: 0.3"></div>
</div>
<div class="row no-gutters">
<div class="col my-auto">
<p>
Folder description goes here
</p>
</div>
<!--IMAGE-->
<div class="col-auto ml-3">
<div class="img-thumbnail rounded-0" style="height: 90px; width: 90px; background-color: #1c141d; border-color: #f5335a; overflow: hidden">
<img class="d-block mx-auto" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
" style="height: 80px; object-fit: cover; object-position: center;">
</div>
</div>
<!--IMAGE end-->
</div>
<ul class="nav nav-button nav-justified" style="width: 27px; height: 27px">
<!-- SUBFOLDER 1 --><!-- Duplictae this entire section to add a subfolder -->
<li class="card mr-2 border-0 rounded-0 align-items-center justify-content-center" style="background-size:cover; width: 27px; height: 27px; background-color: #f5335a">
<a class="btn btn-outline-danger border-0 rounded-0 align-items-center justify-content-center" style="box-shadow: none;mix-blend-mode: screen; width: 27px; height: 34px;" href="
SUBFOLDER_LINK_HERE
" data-toggle="tooltip" data-placement="top" title="
Subfolder name
"><i class="fas fa-sparkles" style="font-size: 17px; color: #ffd96e"></i></a>
</li>
<!-- SUBFOLDER 1 end -->
</ul>
</div>
</div>
<!--//// FOLDER 1 end ////-->
</div>
<div class="col" style="border-width: 2px 0 0 0; height: 5px; border-style: dashed; color: #f5335a; opacity: 0.3"></div>
<div class="row no-gutters">
<ul class="col-auto nav nav-button nav-justified ">
<li class="card mt-2 border-0 rounded-0 align-items-center justify-content-center" style="background-size: cover; width: 37px; height: 37px; background-color: #f5335a">
<a class="btn btn-outline-danger border-0 rounded-0 align-items-center justify-content-center" style="box-shadow: none;mix-blend-mode: screen; width: 37px; height: 44px;" href="
LINK_TO_ALL_CHARACTERS
"><i class="fad fa-users" style="font-size: 20px; color: #ffd96e"></i></a>
</li>
</ul>
<div class="col my-auto ">
<p class="ml-2" style="font-variant: small-caps; letter-spacing: 4px; text-shadow: 0 0 1px #ffd96e, 0 0 5px #ffd96e, 0 0 10px #f5335a;">All characters</p>
</div>
</div>
</div>
<!--============= MAIN CODE END =============-->