<!--
[ SLITHERING ] - F2U, FOLDER DIRECTORY CODE (BS)
#001 COLOR PALETTE
accent : primary
light : secondary
text : muted
background : faded
#002 TERMS
do not redistribute
do not remove credit
you may frankenstein for personal use with credit
you may edit however you'd like for personal use
#003 TIPS
turn off WYSIWYG and turn on Code Editor
{ ctrl + F, *search*, +, *Replace with*, All } to change colors
ask questions in 'https://toyhou.se/~forums/16.htmlcss-graphics'
-->
<div class="container" style="font-family:comic sans ms;text-align:center">
<div class="row">
<!-- FIRST START -->
<div class="col-md-4">
<div class="bg-primary" style="margin-top:20px;border-top-right-radius:10px;border-top-left-radius:10px">
<a class="text-white text-uppercase" style="font-size:40px;font-family:Courier New"
href="FOLDER_LINK"
>
Folder
</a>
<hr class="mt-0 mb-1 bg-white" style="height:1px;border-radius:5px;width:90%">
<div class="text-lowercase text-secondary" style="letter-spacing:10px">
<span style="letter-spacing:.7px">#TAG</span>
<span style="letter-spacing:.7px">#TAG</span>
<span style="letter-spacing:.7px">#TAG</span>
</div>
<a data-toggle="collapse" class="text-white"
href="#Folder7" style="font-size:30px"><i class="fa-light fa-chevron-down fa-lg"></i><a></div>
<div class="collapse" id="Folder7">
<div class="bg-faded text-muted" style="margin-top:-15px;border-bottom-left-radius:10px;border-bottom-right-radius:10px"> <hr style="opacity:0;height:.3px">
<p style="margin-right:15px;margin-left:15px">
Description about your folder. This does not scroll, but it will expand infinitely, so feel free to go wild! Mess with the style if you want to change how it looks! But make sure you know what you're doing about that.
</p><hr style="opacity:0;height:.3px">
</div>
</div>
</div>
<!-- FIRST END -->
<!-- SECOND START -->
<div class="col-md-4">
<div class="bg-primary" style="margin-top:20px;border-top-right-radius:10px;border-top-left-radius:10px">
<a class="text-white text-uppercase" style="font-size:40px;font-family:Courier New"
href="FOLDER_LINK"
>
Folder
</a>
<hr class="mt-0 mb-1 bg-white" style="height:1px;border-radius:5px;width:90%">
<div class="text-lowercase" style="letter-spacing:10px">
<span style="letter-spacing:.7px">#TAG</span>
<span style="letter-spacing:.7px">#TAG</span>
<span style="letter-spacing:.7px">#TAG</span>
</div>
<a data-toggle="collapse" class="text-white"
href="#Folder8" style="font-size:30px"><i class="fa-light fa-chevron-down fa-lg"></i><a></div>
<div class="collapse" id="Folder8">
<div class="bg-faded text-muted" style="margin-top:-15px;border-bottom-left-radius:10px;border-bottom-right-radius:10px"> <hr style="opacity:0;height:.3px">
<p style="margin-right:15px;margin-left:15px">
Description about your folder. This does not scroll, but it will expand infinitely, so feel free to go wild! Mess with the style if you want to change how it looks! But make sure you know what you're doing about that.
</p><hr style="opacity:0;height:.3px">
</div>
</div>
</div>
<!-- SECOND END -->
<!-- THIRD START -->
<div class="col-md-4">
<div class="bg-primary" style="margin-top:20px;border-top-right-radius:10px;border-top-left-radius:10px">
<a class="text-white text-uppercase" style="font-size:40px;font-family:Courier New"
href="FOLDER_LINK"
>
Folder
</a>
<hr class="mt-0 mb-1 bg-white" style="height:1px;border-radius:5px;width:90%">
<div class="text-lowercase" style="letter-spacing:10px">
<span style="letter-spacing:.7px">#TAG</span>
<span style="letter-spacing:.7px">#TAG</span>
<span style="letter-spacing:.7px">#TAG</span>
</div>
<a data-toggle="collapse" class="text-white"
href="#Folder9" style="font-size:30px"><i class="fa-light fa-chevron-down fa-lg"></i><a></div>
<div class="collapse" id="Folder9">
<div class="bg-faded text-muted" style="margin-top:-15px;border-bottom-left-radius:10px;border-bottom-right-radius:10px"> <hr style="opacity:0;height:.3px">
<p style="margin-right:15px;margin-left:15px">
Description about your folder. This does not scroll, but it will expand infinitely, so feel free to go wild! Mess with the style if you want to change how it looks! But make sure you know what you're doing about that.
</p><hr style="opacity:0;height:.3px">
</div>
</div>
</div>
<!-- THIRD END -->
<!-- Add more folders if you'd like! Just copy paste each folder above this line.
Just do these following stuff.
- Edit each folder number. This is what's stated like 'href="#Folder1"' and 'id="Folder1"'. Make sure to change their numbers accordingly.
- Make sure to add them in full sizes, so nothing goes wrong. I mean you have to copy paste the entire thing starting from 'FIRST START' to 'FIRST END'.
-->
</div>
</div>
<!-- CREDIT : DO NOT REMOVE -->
<div class="mx-auto my-3 text-center" style="max-width:100px">
<a href="https://toyhou.se/15752105.f2u-slithering" style="color:#628278" class="tooltipster" title="code by shimmeriq"><i class="fa-light fa-martini-glass-citrus"></i></a>
</div>