<!----------------------------------------------------------------------
>_:: [ BUTTON GALLERY ]
by copilot.
>> vers. --------------------------- 0.1
// USAGE.
› tos :: https://toyhou.se/26311303
› turn off WYSIWYG
› turn on code editor
^ reload your page in its entirety if you re-open your edited page
with WYSIWYG turned on, it'll break yourcode and be unfixable
without restarting from the source code.
>_:: colour reference {
#E85786 - main heading, icon borders & focus tag
#573e53 - text dropshadow effect 1 & basic tags
#482C6F - text dropshadow effect 2
#ECDBBC - highlight #332431 - highlight text
>_:: editors notes {
inspired by VisCodes' folder style/tag format
https://toyhou.se/15620116.html-folder-code-2
i wanted to combine the folder buttons to create a roll-over
effect like toyhou.se uses as its base folders, but attempt to
make something a little more 'fancy' for FREE users, since it
requires css and paid features to remove folder headers and add
icons to folders directly.
it ain't perfect but i know some people wanted stuff like this
so here is a makeshift solution for auto-formated folders!
bob gifs from here: https://shinobi-bacon.tumblr.com/post/713981763106619392/it-occurred-to-me-that-ive-never-made-a-gif-set
>_:: [ USEFUL LINKS ]
colour picker :: https://g.co/kgs/jkXDD4k
'live' editor :: https://th.circlejourney.net/
font awesome :: https://fontawesome.com/search
----------------------------------------------------------------------->
<!--// [ FOLDER COLLECTION TITLE ]
> this is replacing the base title bar.
> you can delete this if you want to just use the folders/have
the standard folder title formatting or use a css to remove the
the headers manually.
// -->
<div class="card mb-n4 border-0 p-2 my-2 bg-faded text-uppercase text-center"
style="position: relative; top: -40px; margin-left: -16px;">
<span class="fa-fade font-italic" style="
font-family:monospace; font-weight:900; letter-spacing:3px; font-size:35px;
color: #E85786;
filter: drop-shadow(1px 1px #573e53) drop-shadow(-1px -1px #482C6F) drop-shadow(-1px 1px #482C6F) drop-shadow(1px -1px #482C6F);">
<span class="fa-stack fa-stack hidden-sm-down ml-n5 mt-n4 mr-n4">
<i class="fa-duotone fa-flower fa-stack-1x mt-2 ml-2 fa-spin"></i>
<i class="fa-duotone fa-flower fa-stack-1x fa-spin" style="color:#fdcfde; font-size:30px; animation-duration: 4s;"></i>
<i class="fa-duotone fa-flower fa-stack-1x fa-spin ml-n2 mt-3" style="color:#f584a9; font-size:25px; animation-duration: 1.4s;"></i>
</span>
Cherry Bobssom season...
</span>
</div>
<!-- title end. -->
<!--// [ GALLERY FOLDERS START. ]
> here are your character folders!
> these replace the general th folders but do not override the folders themselves
> you will need to manually link to each respective folder, respectively
// -->
<div class="w-100 mx-n2 pt-2 gallery-row d-flex">
<!-- start of folders -->
<!-- FOLDER START -->
<div class="row card border-0 justify-content-center py-2 my-1 mx-auto bg-faded btn btn-outline-secondary"
style="max-width:200px;">
<!-- modifications. || (all the things you'll want to change are at the end of the line!)
> you can change 'bg-faded' to any bootstrap color code
> 'btn-outline-' can similarly be changed.
|| see: https://getbootstrap.com/docs/4.0/utilities/colors/
> you can also change the max-width, this set size you will need to modify
the inner card/bg image size accordingly as well, however.
> this size is optimized however for people who have trouble seeing small things!
so i rec you don't change it too much or make it too small so others can see :>
--->
<!-- folder title -->
<a href="FOLDERURL"
class="stretched-link" style="text-decoration: none; color: #fff !important;">
<p class="py-2 mb-1 text-uppercase w-100" style="font-family:monospace; font-weight:900; font-size:20px; letter-spacing:3px; filter:drop-shadow(1px 1px #482C6F) drop-shadow(-1px -1px #482C6F) drop-shadow(-1px 1px #482C6F) drop-shadow(1px -1px #482C6F)">
<!-- folder name -->
Folder 1
</p>
</a>
<!-- folder title end -->
<!-- folder img -->
<div class="card p-2 characters-folder align-items-center" style="height: 170px; width: 170px; border: 2px solid #E85786">
<div class="w-100 h-100 rounded" style="
background: url(https://64.media.tumblr.com/7f2f0324f7936db17b2b718774723c51/91f870b4d29cd408-89/s400x600/c2482ca024010696a26365cbec7273cd08c0c9be.gif) center no-repeat;
background-size: cover; filter: grayscale(80%);">
</div> <!-- you can change the grayscale percentage or remove the filter as well! -->
</div>
<!-- folder img end -->
<!-- tags -->
<div class="py-3" style="letter-spacing: 1.5px; font-size: 13px; max-width: 170px; word-wrap: break word; font-family: monospace;">
<!-- modifications. || (all the things you'll want to change are at the end of the line!)
> if your tag overflows the box please use a <br> before the tag to break it into the next line
> // this is due to the fact the folders are buttons, not containers
> if you know css you can get around this and rename the folder to a unique id etc
(only doable w/premium)
> you can also make these links if you wish! just be sure too remove class="stretched-link"
from the 'folderurl' area.
--->
<span class="badge p-1 text-uppercase mr-3" style="background: #ECDBBC; color: #332431;">important tag</span>
<span class="badge p-1 mr-1" style="background: #573e53;">basic</span>
<!-- bleed example -->
<br>
<span class="badge p-1 mr-1 mt-1" style="background: #573e53;">overflow line</span>
<!-- paste above this line -->
</div>
<!-- tags end -->
</div>
<!-- FOLDER END -->
<!-- FOLDER START -->
<div class="row card border-0 justify-content-center py-2 my-1 mx-auto bg-faded btn btn-outline-secondary"
style="max-width:200px;">
<!-- folder title -->
<a href="FOLDERURL"
class="stretched-link" style="text-decoration: none; color: #fff !important;">
<p class="py-2 mb-1 text-uppercase w-100" style="font-family:monospace; font-weight:900; font-size:20px; letter-spacing:3px; filter:drop-shadow(1px 1px #482C6F) drop-shadow(-1px -1px #482C6F) drop-shadow(-1px 1px #482C6F) drop-shadow(1px -1px #482C6F)">
<!-- folder name -->
Folder 2
</p>
</a>
<!-- folder title end -->
<!-- folder img -->
<div class="card p-2 characters-folder align-items-center" style="height: 170px; width: 170px; border: 2px solid #E85786">
<div class="w-100 h-100 rounded" style="
background: url(https://64.media.tumblr.com/49ed113fe12173a53af79759d25e8777/91f870b4d29cd408-ba/s400x600/6f18a8441df294bc01a670cde4d0d13d87d63fe0.gif) center no-repeat;
background-size: cover; filter: grayscale(80%);">
</div>
</div>
<!-- folder img end -->
<!-- tags -->
<div class="py-3" style="letter-spacing: 1.5px; font-size: 13px; max-width: 170px; word-wrap: break word; font-family: monospace;">
<span class="badge p-1 mr-3" style="background: #E7ADDE; color: #573e53;">alt tag</span>
<span class="badge p-1" style="background: #573e53;">basic</span>
<span class="badge p-1" style="background: #573e53;">basic</span>
<!-- paste above this line -->
</div>
<!-- tags end -->
</div>
<!-- FOLDER END -->
<!-- FOLDER START -->
<div class="row card border-0 justify-content-center py-2 my-1 mx-auto bg-faded btn btn-outline-secondary"
style="max-width:200px;">
<!-- folder title -->
<a href="FOLDERURL"
class="stretched-link" style="text-decoration: none; color: #fff !important;">
<p class="py-2 mb-1 text-uppercase w-100" style="font-family:monospace; font-weight:900; font-size:20px; letter-spacing:3px; filter:drop-shadow(1px 1px #482C6F) drop-shadow(-1px -1px #482C6F) drop-shadow(-1px 1px #482C6F) drop-shadow(1px -1px #482C6F)">
<!-- folder name -->
Folder 3
</p>
</a>
<!-- folder title end -->
<!-- folder img -->
<div class="card p-2 characters-folder align-items-center" style="height: 170px; width: 170px; border: 2px solid #E85786">
<div class="w-100 h-100 rounded" style="
background: url(https://64.media.tumblr.com/1f803e4f7be8e3d6d1347a7b1f5d5721/91f870b4d29cd408-d2/s400x600/8eb9b8637c4e24b025f2e63f684e831abb7df50d.gif) center no-repeat;
background-size: cover; filter: grayscale(80%);">
</div>
</div>
<!-- folder img end -->
<!-- tags -->
<div class="py-3" style="letter-spacing: 1.5px; font-size: 13px; max-width: 170px; word-wrap: break word; font-family: monospace;">
<span class="badge p-1 mr-3" style="background: #E85786;">focus tag</span>
<span class="badge p-1" style="background: #573e53;">basic</span>
<!-- paste above this line -->
</div>
<!-- tags end -->
</div>
<!-- FOLDER END -->
<!-- FOLDER START -->
<div class="row card border-0 justify-content-center py-2 my-1 mx-auto bg-faded btn btn-outline-secondary"
style="max-width:200px;">
<!-- folder title -->
<a href="FOLDERURL"
class="stretched-link" style="text-decoration: none; color: #fff !important;">
<p class="py-2 mb-1 text-uppercase w-100" style="font-family:monospace; font-weight:900; font-size:20px; letter-spacing:3px; filter:drop-shadow(1px 1px #482C6F) drop-shadow(-1px -1px #482C6F) drop-shadow(-1px 1px #482C6F) drop-shadow(1px -1px #482C6F)">
<!-- folder name -->
Folder 4
</p>
</a>
<!-- folder title end -->
<!-- folder img -->
<div class="card p-2 characters-folder align-items-center" style="height: 170px; width: 170px; border: 2px solid #E85786">
<div class="w-100 h-100 rounded" style="
background: url(https://64.media.tumblr.com/5de7f5c65bc56082f33baf0fb5815a74/91f870b4d29cd408-e9/s400x600/88434b3e5d5bc6d0ee3076f1694edc3ba79749d3.gif) center no-repeat;
background-size: cover; filter: grayscale(80%);">
</div>
</div>
<!-- folder img end -->
<!-- tags -->
<div class="py-3" style="letter-spacing: 1.5px; font-size: 13px; max-width: 170px; word-wrap: break word; font-family: monospace;">
<span class="badge p-1 mr-3" style="background: #E85786;">focus tag</span>
<span class="badge p-1" style="background: #573e53;">basic</span>
<!-- paste above this line -->
</div>
<!-- tags end -->
</div>
<!-- FOLDER END -->
<!-- FOLDER START -->
<div class="row card border-0 justify-content-center py-2 my-1 mx-auto bg-faded btn btn-outline-secondary"
style="max-width:200px;">
<!-- folder title -->
<a href="FOLDERURL"
class="stretched-link" style="text-decoration: none; color: #fff !important;">
<p class="py-2 mb-1 text-uppercase w-100" style="font-family:monospace; font-weight:900; font-size:20px; letter-spacing:3px; filter:drop-shadow(1px 1px #482C6F) drop-shadow(-1px -1px #482C6F) drop-shadow(-1px 1px #482C6F) drop-shadow(1px -1px #482C6F)">
<!-- folder name -->
Folder 5
</p>
</a>
<!-- folder title end -->
<!-- folder img -->
<div class="card p-2 characters-folder align-items-center" style="height: 170px; width: 170px; border: 2px solid #E85786">
<div class="w-100 h-100 rounded" style="
background: url(https://64.media.tumblr.com/189af80d8966af1507136ea9f48d61af/91f870b4d29cd408-cd/s400x600/82aca9e913542ec12ddfe06fdc56b7fa5625e9d9.gif) center no-repeat;
background-size: cover; filter: grayscale(80%);">
</div>
</div>
<!-- folder img end -->
<!-- tags -->
<div class="py-3" style="letter-spacing: 1.5px; font-size: 13px; max-width: 170px; word-wrap: break word; font-family: monospace;">
<span class="badge p-1 mr-3" style="background: #E85786;">focus tag</span>
<span class="badge p-1" style="background: #573e53;">basic</span>
<!-- paste above this line -->
</div>
<!-- tags end -->
</div>
<!-- FOLDER END -->
<!-- FOLDER START -->
<div class="row card border-0 justify-content-center py-2 my-1 mx-auto bg-faded btn btn-outline-secondary"
style="max-width:200px;">
<!-- folder title -->
<a href="FOLDERURL"
class="stretched-link" style="text-decoration: none; color: #fff !important;">
<p class="py-2 mb-1 text-uppercase w-100" style="font-family:monospace; font-weight:900; font-size:20px; letter-spacing:3px; filter:drop-shadow(1px 1px #482C6F) drop-shadow(-1px -1px #482C6F) drop-shadow(-1px 1px #482C6F) drop-shadow(1px -1px #482C6F)">
<!-- folder name -->
Folder 6
</p>
</a>
<!-- folder title end -->
<!-- folder img -->
<div class="card p-2 characters-folder align-items-center" style="height: 170px; width: 170px; border: 2px solid #E85786">
<div class="w-100 h-100 rounded" style="
background: url(https://64.media.tumblr.com/922ed12792123a27aeb140b65d6bdcb7/aedf5b7bb5ae46f6-27/s1280x1920/3e47b23d860973600c44aac22bcb0ed20f981134.gif) center no-repeat;
background-size: cover; filter: grayscale(80%);">
</div>
</div>
<!-- folder img end -->
<!-- tags -->
<div class="py-3" style="letter-spacing: 1.5px; font-size: 13px; max-width: 170px; word-wrap: break word; font-family: monospace;">
<span class="badge p-1 mr-3" style="background: #E85786;">focus tag</span>
<span class="badge p-1" style="background: #573e53;">basic</span>
<!-- paste above this line -->
</div>
<!-- tags end -->
</div>
<!-- FOLDER END -->
<!-- paste above this line -->
</div>
<!-- [ GALLERY FOLDERS END. ] -->
<!--- cwedits uwu ---->
<div class="text-right p-0 mt-3 faded" style="text-transform: uppercase; font-size: 7px; letter-spacing: 2px;font-family: 'MS Gothic', monospace;">
//:__code cred. <a href="https://toyhou.se/26360276.f2u-folder-button-gallery" target="_blank" data-toggle="tooltip" data-placement="bottom" title="Copilot / VTOL" style="color: #D8A85F;"><i class="fa-duotone fa-jet-fighter"></i></a> /:_ft inspo <a href="https://toyhou.se/15620116.html-folder-code-2" target="_blank" data-toggle="tooltip" data-placement="bottom" title="Inspiration from VisCodes" style="color: #D8A85F;"><i class="fa-duotone fa-lightbulb-on"></i></a>
</div>
<!--- edit and i will crai ---->
<!--- Custom line ---->
<hr class="ml-n2 w-100">
<!--- END.---->
<!--//
[ FAUX FOLDER DESC. ]
// -->
<div class="card ml-n2 border-0 p-4 bg-faded text-muted">
<p>You can write some information here, or just delete the entire box and do what you would with other folder codes as well! This can be formatted as you need to with headers, links or other descriptions/disclaimers. Heck, if you have any rules put them here too! It's totally up to you.</p>
<p>OR If you would like a customized font-awesome list for some rules, here's the base!</p>
<ul class="fa-ul">
<li class="mb-1">
<span class="fa-li"><i class="fa-regular fa-ban"></i></span> <!-- here is where you change the fa icon -->
Some content.
</li>
<li> <!-- removed mb-1 if it's your last bullet for neatness. -->
<span class="fa-li"><i class="fa-regular fa-circle-check text-success"></i></span> <!-- you can also colour it -->
Some content.
</li>
<!-- paste above this line -->
</ul>
</div>
<!--// false folder desc end // -->
