[F2U] Folder Blocks
created by:BigGayFish
Custom ColorsBootstrapHTMLFolder
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>