[F2U] Folder Blocks

created by:BigGayFish
Custom ColorsBootstrapHTMLFolder
Line Count: 104
Difficulty:
Copy
<!--FOLDER BLOCKS - MAIN (BOOTSTRAPS)
I made this code bc I felt like my folder codes was seriously lacking in the design department lol but I still wanted/needed my extra info, thus this code was born.

COLOR KEY: card-outlinesecondary - all the borders in this code; change secondary to primary / success / danger etc to change the bootstraps colors for the code
           bg-dark - the outer edges for the summary portion of the code
           #fff - icon and glow

INDEX:

FOLDER TITLE - What it says on the tin, just the name of the folder

FOLDER SUBTITLE - Also works for a project type (like if this is for a folder for a novel or a comic etc)

IMAGE - A focal image for your folder. Can be a character or logo or can just be something more of a background image for your ICON

ICON - A fontawesome icon to overlay on your image, in case you're using an asthetic or pattern bg instead of a regular image. Has a subtle glow on it and it's at a lower opacity

SUMMARY - Your folder description or summary of the story/project your folder's for

CONTENT WARNING - In case you need it; deletable

NOTES - In case you need it, for updates and stuff; deletable

TAGS - They're not actual tag links, but you can turn them into actual links if you prefer, or delete, it's up to you

BG IMG CREDIT - This is the only portion of the credit that I allow editing to properly link back to whatever image you're using
-->
<div class="container mb-5" style="font-size: 14pt;">

<div class="card card-outline-secondary rounded-0 bg-faded mt-n4" style="border-width: 4px; z-index:100; position:absolute; left:0%; box-shadow: 5px 5px;">
    
    <!--FOLDER TITLE-->
    <p class="display-4 p-1">FOLDER TITLE</p>
    <!--END OF FOLDER TITLE-->
    
</div>

<div class="card card-outline-secondary rounded-0 bg-faded p-1" style="border-width: 4px; z-index:50; position:absolute; top: 4%; left:17%; box-shadow: 5px 5px;">
    
    <!--FOLDER SUBTITLE-->
    <p style="font-style: italic; font-size: 12pt;">subtitle / project type</p>
    <!--END OF FOLDER SUBTITLE-->
    
</div>

<div class="row no-gutters" style="box-shadow: 5px 5px;">
    
    <div class="col-md-4 card card-outline-secondary rounded-0" style="border-width: 4px;">
      
        <!--IMAGE-->
        <div class="bg-faded justify-content-center align-items-center" style="background-image: url(
        
        https://dummyimage.com/400/ffffff/000000
        
        ); height: 402px; background-size: cover; background-position: center; background-repeat: no-repeat;">
        <!--END OF IMAGE-->
            
            <!--ICON-->
            <i class="fad fa-house-chimney fa-4x" style="color: #fff; opacity: .8; text-shadow: 0 0 20px #fff;"></i>
            <!--END OF ICON-->
            
        </div>
    </div>
    
    <div class="col-lg-8 card card-outline-secondary rounded-0" style="border-width: 4px;">
        <div class="bg-dark p-3">
        <div class="card rounded-0 bg-faded p-2 border-0" style="height: 370px; overflow-y: scroll; overflow-x: hidden;">
            
            <!--SUMMARY-->
            <h2 class="font-weight-bold">Summary:</h2>
            <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.</p>
            <!--END OF SUMMARY-->
            
            <div class="row">
            
            <!--CONTENT WARNINGS-->
            <div class="col-md-6">
            <h2 class="font-weight-bold mt-2"><i class="fad fa-solid fa-triangle-exclamation"></i> Content Warnings:</h2>
            <ul>
                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                <li>content</li>
                <li>content</li>
                <li>content</li>
            </ul>
            </div>
            <!--END OF CONTENT WARNINGS-->
            
            <!--NOTES-->
            <div class="col-md-6">
            <h2 class="font-weight-bold mt-2"><i class="fad fa-solid fa-file-pen"></i> Notes:</h2>
            <ul>
                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                <li>content</li>
                <li>content</li>
                <li>content</li>
            </ul>
            </div>
            <!--END OF NOTES-->
            </div>
        </div>
        </div>
    </div>
    
</div>

<!--TAGS
COLLAPSE AND DELETE IF YOU DO NOT WANT TO KEEP-->
<div class="row" style="z-index:50; position: absolute; left:0%; top: 95%;">

<div class="col-sm w-25 border-0 bg-info m-2 d-none d-sm-block" style="border-radius: 40px; max-height: 25px;">
    <p style="font-size:10pt;">#tag_name</p>
</div>

<div class="col-sm w-25 border-0 bg-info m-2 d-none d-sm-block" style="border-radius: 40px; max-height: 25px;">
    <p style="font-size:10pt;">#tag_name</p>
</div>

<div class="col-sm w-25 border-0 bg-info m-2 d-none d-sm-block" style="border-radius: 40px; max-height: 25px;">
    <p style="font-size:10pt;">#tag_name</p>
</div>

<div class="col-sm w-25 border-0 bg-info m-2 d-none d-sm-block" style="border-radius: 40px; max-height: 25px;">
    <p style="font-size:10pt;">#tag_name</p>
</div>

<div class="col-sm w-25 border-0 bg-info m-2 d-none d-sm-block" style="border-radius: 40px; max-height: 25px;">
    <p style="font-size:10pt;">#tag_name</p>
</div>

<div class="col-sm w-25 border-0 bg-info m-2 d-none d-sm-block" style="border-radius: 40px; max-height: 25px;">
    <p style="font-size:10pt;">#tag_name</p>
</div>

<!--PASTE MORE ABOVE HERE
I suggest not going voerboard with these; it'll look ugly if they get too long-->
</div>
<!--END OF TAGS-->

<!--BG IMG CREDIT-->
<div class="card card-outline-secondary mt-n3" style="border-width: 4px; border-radius: 40px; z-index:100; position:absolute; left:69%; font-size: 10pt; box-shadow: 5px 5px;">
    <a href="IMG_LINK" class="bg-faded p-1 tooltipster" title="BG IMG CREDIT" style="border-radius: 40px;"><i class="fa-solid fa-image"></i></a>
</div>
<!--END OF BG IMG CREDIT-->

<div class="card card-outline-secondary mt-n3" style="border-width: 4px; border-radius: 40px; z-index:50; position:absolute; left:73%; font-size: 10pt; box-shadow: 5px 5px;">
    <a href="https://toyhou.se/BigGayFish" class="bg-faded p-1" style="border-radius: 40px;"><i class="fa-solid fa-copyright"></i> BigGayFish</a>
</div>
</div>
Copy
<!--FOLDER BLOCKS - SUB (BOOTSTRAPS)
A subfolder version, I kinda enjoy this more, but I don't think I'd personally use it very often.

COLOR KEY: card-outlinesecondary - all the borders in this code; change secondary to primary / success / danger etc to change the bootstraps colors for the code
           bg-dark - the outer edges for the summary portion of the code
           #ff0000 - icon
           #fff - glow

INDEX:

SUBFOLDER TITLE - What it says on the tin, just the name of the (sub)folder

IMAGE - A focal image for your folder. Can be a character or logo or can just be something more of a background image for your ICON

ICON - A fontawesome icon to overlay on your image, in case you're using an asthetic or pattern bg instead of a regular image. Has a subtle glow on it and it's at a lower opacity

SUMMARY - Your folder description or summary of the story/project your folder's for

TAGS - They're not actual tag links, but you can turn them into actual links if you prefer, or delete, it's up to you

BG IMG CREDIT - This is the only portion of the credit that I allow editing to properly link back to whatever image you're using
-->
<div class="container mb-5" style="font-size: 14pt;">

<div class="card card-outline-secondary rounded-0 bg-faded p-1 mt-n4" style="border-width: 4px; z-index:100; position:absolute; left:40%; box-shadow: 5px 5px;">
    
    <!--SUBFOLDER TITLE-->
    <p class="display-4">SUBFOLDER TITLE</p>
    <!--END OF SUBFOLDER TITLE-->
    
</div>

<div class="row no-gutters" style="box-shadow: 5px 5px;">
    
    <div class="col-md-4 card card-outline-secondary rounded-0" style="border-width: 4px;">
        
        <!--IMAGE-->
        <div class="bg-faded justify-content-center align-items-center" 
        
        style="background-image: url(
        
        https://dummyimage.com/400/ffffff/000000
        
        ); height: 302px; background-size: cover; background-position: center; background-repeat: no-repeat;">
        <!--END OF IMAGE-->
            
            <!--ICON-->
             <i class="fad fa-crown fa-4x" style="color: #ff0000; opacity: .8; text-shadow: 0 0 20px #fff;"></i>
            <!--END OF ICON-->
            
        </div>
    </div>
    
    <div class="col-lg-8 card card-outline-secondary rounded-0" style="border-width: 4px;">
        <div class="bg-dark p-3">
        <div class="card rounded-0 bg-faded p-2 border-0" style="height: 270px; overflow-y: scroll; overflow-x: hidden;">
            
            <!--SUMMARY-->
            <h2 class="font-weight-bold mt-1">Summary:</h2>
            <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.</p>
            <!--END OF SUMMAR-->
            
            <!--TAGS-->
            <div class="row p-3">
                <div class="col-sm border-0 bg-info m-2" style="border-radius: 20px;">
                    <p style="font-size:10pt;">#tag or link</p>
                </div>
                
                <div class="col-sm border-0 bg-info m-2" style="border-radius: 20px;">
                    <p style="font-size:10pt;">#tag or link</p>
                </div>
                
                <div class="col-sm border-0 bg-info m-2" style="border-radius: 20px;">
                    <p style="font-size:10pt;">#tag or link</p>
                </div>
                
                <div class="col-sm border-0 bg-info m-2" style="border-radius: 20px;">
                    <p style="font-size:10pt;">#tag or link</p>
                </div>
                
                <div class="col-sm border-0 bg-info m-2" style="border-radius: 20px;">
                    <p style="font-size:10pt;">#tag or link</p>
                </div>
                
                <div class="col-sm border-0 bg-info m-2" style="border-radius: 20px;">
                    <p style="font-size:10pt;">#tag or link</p>
                </div>
                
            </div>
            <!--END OF TAGS-->
        </div>
        </div>
    </div>
    
</div>

<!--BG IMG CREDIT-->
<div class="card card-outline-secondary mt-n3" style="border-width: 4px; border-radius: 40px; z-index:100; position:absolute; left:69%; font-size: 10pt; box-shadow: 5px 5px;">
    <a href="IMG_LINK" class="bg-faded p-1 tooltipster" title="BG IMG CREDIT" style="border-radius: 40px;"><i class="fa-solid fa-image"></i></a>
</div>
<!--END OF BG IMG CREDIT-->

<div class="card card-outline-secondary mt-n3" style="border-width: 4px; border-radius: 40px; z-index:50; position:absolute; left:73%; font-size: 10pt; box-shadow: 5px 5px;">
    <a href="https://toyhou.se/BigGayFish" class="bg-faded p-1" style="border-radius: 40px;"><i class="fa-solid fa-copyright"></i> BigGayFish</a>
</div>
</div>
Copy
<!--FOLDER BLOCKS - MINI (BOOTSTRAPS)
A mini version of the subfolder, good for if you only have one line or two for a group.

COLOR KEY: card-outlinesecondary - all the borders in this code; change secondary to primary / success / danger etc to change the bootstraps colors for the code
           bg-dark - the outer edges for the summary portion of the code

INDEX:

SUBFOLDER TITLE - What it says on the tin, just the name of the (sub)folder

BG IMAGE - A background image to go around the summary box; better if patterend but it can be anything

SUMMARY - Your folder description; doesn't scroll but expands instead so better if it's for something short

BG IMG CREDIT - This is the only portion of the credit that I allow editing to properly link back to whatever image you're using
-->
<div class="container mb-5" style="font-size: 14pt;">

<div class="card card-outline-secondary rounded-0 bg-faded p-1 mt-n4" style="border-width: 4px; z-index:100; position:absolute; left:40%; box-shadow: 5px 5px;">
    
    <!--SUBFOLDER TITLE-->
    <p>SUBFOLDER TITLE</p>
    <!--END OF SUBFOLDER TITLE-->
    
</div>

<div class="card card-outline-secondary rounded-0" style="border-width: 4px; box-shadow: 5px 5px;">
    
    <!--BG IMAGE-->
    <div class="card rounded-0 bg-dark p-3" style="background: url(
    
    https://dummyimage.com/400/ffffff/000000
    
    ) center;">
    <!--END OF BG IMAGE-->
    
    <!--SUMMARY-->
    <div class="card rounded-0 bg-faded p-2 border-0">
        <p>Simple folder description here. 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>
    <!--END OF SUMMARY-->
    </div>
</div>
    
<div class="card card-outline-secondary mt-n3" style="border-width: 4px; border-radius: 40px; z-index:100; position:absolute; left:73%; font-size: 10pt; box-shadow: 5px 5px; ">
    <a href="https://toyhou.se/BigGayFish" class="bg-faded p-1" style="border-radius: 40px;"><i class="fa-solid fa-copyright"></i> BigGayFish</a>
</div>

<!--BG IMG CREDIT-->
<div class="card card-outline-secondary mt-n3" style="border-width: 4px; border-radius: 40px; z-index:100; position:absolute; left:69%; font-size: 10pt; box-shadow: 5px 5px;">
    <a href="IMG_LINK" class="bg-faded p-1 tooltipster" title="BG IMG CREDIT" style="border-radius: 40px;"><i class="fa-solid fa-image"></i></a>
</div>
<!--END OF BG IMG CREDIT-->

</div>
Copy
<!--FOLDER BLOCKS - MAIN (CUSTOM COLORS)
I made this code bc I felt like my folder codes was seriously lacking in the design department lol but I still wanted/needed my extra info, thus this code was born.

COLOR KEY: #a50000 - all the borders in this code + links
           #500000 - all the box shadows
           #1D1D1D - all the backgrounds for the boxes
           #3e2020 - the outer edges for the summary portion of the code
           #324791 - tags
           #fff - icon + glow and text

INDEX:

FOLDER TITLE - What it says on the tin, just the name of the folder

FOLDER SUBTITLE - Also works for a project type (like if this is for a folder for a novel or a comic etc)

IMAGE - A focal image for your folder. Can be a character or logo or can just be something more of a background image for your ICON

ICON - A fontawesome icon to overlay on your image, in case you're using an asthetic or pattern bg instead of a regular image. Has a subtle glow on it and it's at a lower opacity

SUMMARY - Your folder description or summary of the story/project your folder's for

CONTENT WARNING - In case you need it; deletable

NOTES - In case you need it, for updates and stuff; deletable

TAGS - They're not actual tag links, but you can turn them into actual links if you prefer, or delete, it's up to you
-->
<div class="container mb-5" style="font-size: 14pt; color: #fff;">

<div class="card rounded-0 mt-n4" style="border: #a50000 4px solid; z-index:100; position:absolute; left:0%; box-shadow: 5px 5px #500000; background: #1D1D1D;">
    <!--FOLDER TITLE-->
    <p class="display-4 p-1">FOLDER TITLE</p>
    <!--END OF FOLDER TITLE-->
</div>

<div class="card rounded-0 bg-faded p-1" style="border: #a50000 4px solid; z-index:50; position:absolute; top: 4%; left:17%; box-shadow: 5px 5px #500000; background: #1D1D1D;">
    
    <!--FOLDER SUBTITLE-->
    <p style="font-style: italic; font-size: 12pt;">subtitle / project type</p>
    <!--END OF FOLDER SUBTITLE-->
    
</div>

<div class="row no-gutters" style="box-shadow: 5px 5px #500000;">
    
    <div class="col-md-4 card card-outline-secondary rounded-0" style="border: #a50000 4px solid;">
        
        <!--IMAGE-->
        <div class="justify-content-center align-items-center" style="background: #1D1D1D url(
        
        https://dummyimage.com/400/ffffff/000000
        
        ); height: 402px; background-size: cover; background-position: center; background-repeat: no-repeat;">
        <!--END OF IMAGE-->
            
            <!--ICON-->
            <i class="fad fa-house-chimney fa-4x" style="color: #fff; opacity: .8; text-shadow: 0 0 20px #fff;"></i>
            <!--END OF ICON-->
            
        </div>
    </div>
    
    <div class="col-lg-8 card card-outline-secondary rounded-0" style="border: #a50000 4px solid;">
        <div class="p-3" style="background: #3e2020;">
        <div class="card rounded-0 p-2 border-0" style="background: #1D1D1D; height: 370px; overflow-y: scroll; overflow-x: hidden;">
            
            <!--SUMMARY-->
            <h2 class="font-weight-bold">Summary:</h2>
            <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.</p>
            <!--END OF SUMMARY-->
            
            
            <div class="row">
            
            <!--CONTENT WARNING-->
            <div class="col-md-6">
            <h2 class="font-weight-bold mt-2"><i class="fad fa-solid fa-triangle-exclamation"></i> Content Warnings:</h2>
            <ul>
                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                <li>content</li>
                <li>content</li>
                <li>content</li>
            </ul>
            </div>
            <!--END OF CONTENT WARNING-->
            
            <!--NOTES-->
            <div class="col-md-6">
            <h2 class="font-weight-bold mt-2"><i class="fad fa-solid fa-file-pen"></i> Notes:</h2>
            <ul>
                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                <li>content</li>
                <li>content</li>
                <li>content</li>
            </ul>
            </div>
            <!--END OF NOTES-->
            
            </div>
        </div>
        </div>
    </div>
    
</div>

<!--TAGS-->
<div class="row" style="z-index:50; position: absolute; left:0%; top: 95%;">

<div class="col-sm w-25 border-0 m-2 d-none d-sm-block" style="border-radius: 40px; max-height: 25px; background: #324791;">
    <p style="font-size:10pt;">#tag_name</p>
</div>

<div class="col-sm w-25 border-0 m-2 d-none d-sm-block" style="border-radius: 40px; max-height: 25px; background: #324791;">
    <p style="font-size:10pt;">#tag_name</p>
</div>

<div class="col-sm w-25 border-0 m-2 d-none d-sm-block" style="border-radius: 40px; max-height: 25px; background: #324791;">
    <p style="font-size:10pt;">#tag_name</p>
</div>

<div class="col-sm w-25 border-0 m-2 d-none d-sm-block" style="border-radius: 40px; max-height: 25px; background: #324791;">
    <p style="font-size:10pt;">#tag_name</p>
</div>

<div class="col-sm w-25 border-0 m-2 d-none d-sm-block" style="border-radius: 40px; max-height: 25px; background: #324791;">
    <p style="font-size:10pt;">#tag_name</p>
</div>

<div class="col-sm w-25 border-0 m-2 d-none d-sm-block" style="border-radius: 40px; max-height: 25px; background: #324791;">
    <p style="font-size:10pt;">#tag_name</p>
</div>

<!--PASTE MORE ABOVE HERE
I suggest not going voerboard with these; it'll look ugly if they get too long-->
</div>
<!--END OF TAGS-->

<!--BG IMG CREDIT-->
<div class="card card-outline-secondary p-1 mt-n3" style="border: #a50000 4px solid; border-radius: 40px; z-index:100; position:absolute; left:69%; font-size: 10pt; box-shadow: 5px 5px #500000; background: #1D1D1D;">
    <a href="IMG_LINK" class="tooltipster" title="BG IMG CREDIT" style="border-radius: 40px; color: #a50000;"><i class="fa-solid fa-image"></i></a>
</div>
<!--END OF BG IMG CREDIT-->

<div class="card card-outline-secondary mt-n3 p-1" style="border: #a50000 4px solid; border-radius: 40px; z-index:50; position:absolute; left:73%; font-size: 10pt; box-shadow: 5px 5px #500000; background: #1D1D1D;">
    <a href="https://toyhou.se/BigGayFish" style="border-radius: 40px; color: #a50000;"><i class="fa-solid fa-copyright"></i> BigGayFish</a>
</div>
</div>
Copy
<!--FOLDER BLOCKS - SUB (CUSTOM COLORS)
A subfolder version, I kinda enjoy this more, but I don't think I'd personally use it very often.

COLOR KEY: #a50000 - all the borders in this code + links
           #500000 - all the box shadows
           #1D1D1D - all the backgrounds for the boxes
           #3e2020 - the outer edges for the summary portion of the code
           #324791 - tags
           #ff0000 - icon
           #fff - glow and text


INDEX:

SUBFOLDER TITLE - What it says on the tin, just the name of the (sub)folder

IMAGE - A focal image for your folder. Can be a character or logo or can just be something more of a background image for your ICON

ICON - A fontawesome icon to overlay on your image, in case you're using an asthetic or pattern bg instead of a regular image. Has a subtle glow on it and it's at a lower opacity

SUMMARY - Your folder description or summary of the story/project your folder's for

TAGS - They're not actual tag links, but you can turn them into actual links if you prefer, or delete, it's up to you

BG IMG CREDIT - This is the only portion of the credit that I allow editing to properly link back to whatever image you're using
-->
<div class="container mb-5" style="font-size: 14pt;">

<div class="card card-outline-secondary rounded-0 p-1 mt-n4" style="border: #a50000 4px solid; z-index:100; position:absolute; left:40%; box-shadow: 5px 5px #500000; background: #1D1D1D;">
    
    <!--SUBFOLDER TITLE-->
    <p class="display-4">SUBFOLDER TITLE</p>
    <!--END OF SUBFOLDER TITLE-->
    
</div>

<div class="row no-gutters" style="box-shadow: 5px 5px #500000;">
    
    <div class="col-md-4 card card-outline-secondary rounded-0" style="border: #a50000 4px solid;">
        
        <!--IMAGE-->
        <div class="bg-faded justify-content-center align-items-center" style="background-image: url(
        
        https://dummyimage.com/400/ffffff/000000
        
        ); height: 302px; background-size: cover; background-position: center; background-repeat: no-repeat;">
        <!--END OF IMAGE-->
        
            <!--ICON-->
            <i class="fad fa-crown fa-4x" style="color: #ff0000; opacity: .8; text-shadow: 0 0 20px #fff;"></i>
            <!--END OF ICON-->
            
        </div>
    </div>
    
    <div class="col-lg-8 card card-outline-secondary rounded-0" style="border: #a50000 4px solid;">
        <div class="p-3" style="background: #3e2020;">
        <div class="card rounded-0 p-2 border-0" style="height: 270px; overflow-y: scroll; overflow-x: hidden; background: #1D1D1D;">
            
            <!--SUMMARY-->
            <h2 class="font-weight-bold mt-1">Summary:</h2>
            <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.</p>
            <!--END OF SUMMARY-->
            
            <!--TAGS-->
            <div class="row p-3">
                <div class="col-sm border-0 m-2" style="border-radius: 20px; background: #324791;">
                    <p style="font-size:10pt;">#tag or link</p>
                </div>
                
                <div class="col-sm border-0 m-2" style="border-radius: 20px; background: #324791;">
                    <p style="font-size:10pt;">#tag or link</p>
                </div>
                
                <div class="col-sm border-0 m-2" style="border-radius: 20px; background: #324791;">
                    <p style="font-size:10pt;">#tag or link</p>
                </div>
                
                <div class="col-sm border-0 m-2" style="border-radius: 20px; background: #324791;">
                    <p style="font-size:10pt;">#tag or link</p>
                </div>
                
                <div class="col-sm border-0 m-2" style="border-radius: 20px; background: #324791;">
                    <p style="font-size:10pt;">#tag or link</p>
                </div>
                
                <div class="col-sm border-0 m-2" style="border-radius: 20px; background: #324791;">
                    <p style="font-size:10pt;">#tag or link</p>
                </div>
                
            </div>
            <!--END OF TAGS-->
            
        </div>
        </div>
    </div>
    
</div>

<!--BG IMG CREDIT-->
<div class="card card-outline-secondary p-1 mt-n3" style="border: #a50000 4px solid; border-radius: 40px; z-index:100; position:absolute; left:69%; font-size: 10pt; box-shadow: 5px 5px #500000; background: #1D1D1D;">
    <a href="IMG_LINK" class="tooltipster" title="BG IMG CREDIT" style="border-radius: 40px; color: #a50000;"><i class="fa-solid fa-image"></i></a>
</div>
<!--END OF BG IMG CREDIT-->

<div class="card card-outline-secondary mt-n3 p-1" style="border: #a50000 4px solid; border-radius: 40px; z-index:50; position:absolute; left:73%; font-size: 10pt; box-shadow: 5px 5px #500000; background: #1D1D1D;">
    <a href="https://toyhou.se/BigGayFish" style="border-radius: 40px; color: #a50000;"><i class="fa-solid fa-copyright"></i> BigGayFish</a>
</div>
</div>
Copy
<!--FOLDER BLOCKS - MINI (CUSTOM COLORS)
A mini version of the subfolder, good for if you only have one line or two for a group.

COLOR KEY: #a50000 - all the borders in this code + links
           #500000 - all the box shadows
           #1D1D1D - all the backgrounds for the boxes
           #3e2020 - the outer edges for the summary portion of the code
           #fff - text


INDEX:

SUBFOLDER TITLE - What it says on the tin, just the name of the (sub)folder

BG IMAGE - A background image to go around the summary box; better if patterend but it can be anything

SUMMARY - Your folder description; doesn't scroll but expands instead so better if it's for something short

BG IMG CREDIT - This is the only portion of the credit that I allow editing to properly link back to whatever image you're using
-->
<div class="container mb-5" style="font-size: 14pt;">

<div class="card card-outline-secondary rounded-0 p-1 mt-n4" style="border: #a50000 4px solid; z-index:100; position:absolute; left:40%; box-shadow: 5px 5px #500000; background: #1D1D1D;">
    
    <!--SUBFOLDER TITLE-->
    <p>SUBFOLDER TITLE</p>
    <!--SUBFOLDER TITLE-->
    
</div>

<div class="card card-outline-secondary rounded-0" style="border: #a50000 4px solid; box-shadow: 5px 5px #500000;">
    
    <!--BG IMAGE-->
    <div class="card rounded-0 border-0 p-3" style="background: #3e2020 url(
    
    https://dummyimage.com/400/ffffff/000000
    
    ) center;">
    <!--END OF BG IMAGE-->
    
    <!--SUMMARY-->    
    <div class="card rounded-0 p-2 border-0" style="background: #1D1D1D;">
        <p>Simple folder description here. 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>
    <!--END OF SUMMARY-->
    
    </div>
</div>
    
<div class="card card-outline-secondary p-1 mt-n3" style="border: #a50000 4px solid; border-radius: 40px; z-index:100; position:absolute; left:73%; font-size: 10pt; box-shadow: 5px 5px #500000; background: #1D1D1D;">
    <a href="https://toyhou.se/BigGayFish" style="border-radius: 40px; color: #a50000;"><i class="fa-solid fa-copyright"></i> BigGayFish</a>
</div>

<!--BG IMG CREDIT-->
<div class="card card-outline-secondary p-1 mt-n3" style="border: #a50000 4px solid; border-radius: 40px; z-index:100; position:absolute; left:69%; font-size: 10pt; box-shadow: 5px 5px #500000; background: #1D1D1D;">
    <a href="IMG_LINK" class="tooltipster" title="BG IMG CREDIT" style="border-radius: 40px; color: #a50000;"><i class="fa-solid fa-image"></i></a>
</div>
<!--END OF BG IMG CREDIT-->

</div>

Password (optional)

Users must enter a password before unlocking this specific version. Please note that this password will only apply to this version.