<!-- THIS CODE USES CUSTOM COLORS
==============================================
34. || DECAY || F2U
==============================================
ACCENT COLOR (RED) == #dc543d
POLAROIDS BG == #eee
SECONDARY (BROWN) == #594639
Use CTRL+F to quickly find & replace the colors!
-->
<div class="p-2">
<!-- BACKGROUND IMAGE (WOODS IN THE FAR BACKGROUND)-->
<div class="container px-4 p-lg-0" style="
background-image: url(https://images.unsplash.com/photo-1612288443047-edd40b6196d4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80);
background-size: cover;
background-position: center; overflow: hidden;">
<div class="container p-0" style="max-width: 800px; font-family: Book Antiqua, serif; color: #222;">
<!-- BACKGROUND IMAGE (WOOD PANEL)-->
<div class="row no-gutters justify-content-around px-lg-2" style="
background-image: url(https://images.unsplash.com/photo-1475332340095-a12d7b5a7fdc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80);
background-size: cover;
background-position: center; box-shadow: 0 0 10px rgba(0,0,0, .9);">
<!--
================================================
FOLDER BLOCK
================================================
-->
<div class="col-12 col-lg-6 p-3 flex-column">
<div class="ml-n2 mr-3 mr-lg-5" style="min-height: 200px; border-radius: 0; background-color: #eee; position: relative; box-shadow: 2px 2px 8px rgba(0,0,0, .5); z-index: 2;">
<!-- BACKGROUND TEXTURE (POLAROID) -->
<div class="w-100 h-100" style="position: absolute; left: 0; top: 0;
background-image: url(https://images.unsplash.com/photo-1598078413734-e4b3c11c2039?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80);
background-size: cover;
background-position: center; opacity: .2;"></div>
<div class="card border-0 bg-transparent p-2">
<!-- FOLDER IMAGE BANNER -->
<div class="p-2 small" style="border-radius: 0; min-height: 150px; box-shadow: inset 0 0 10px rgba(0,0,0, .9);
background-image: url(URLHERE);
background-size: cover;
background-position: center;">
<!-- SMALL QUOTE AT THE TOP OF THE BANNER == If your banner is light you can change the text color and remove the shadow-->
<i style="color: #fff;
text-shadow: 0 0 5px rgba(0,0,0, .9), 0 0 10px rgba(0,0,0, .9), 0 0 15px rgba(0,0,0, .9), 1px 1px 0 rgba(0,0,0, .9);">
<i class="fal fa-quote-left fa-xs" style="opacity: .5;"></i>
Small quote goes here.
<i class="fal fa-quote-right fa-xs" style="opacity: .5;"></i></i>
</div>
<div class="row no-gutters justify-content-end">
<div class="col-auto pl-5">
<p class="font-italic text-center pr-2 pt-2 mb-2" style="font-size: 25px; transform: rotate(-2deg); line-height: .8;"><a style="color: #dc543d; text-decoration: none;"
href="FOLDER_LINK_HERE">
Folder name
</a></p>
</div>
</div>
<div class="row no-gutters justify-content-between align-items-end mt-n3">
<div class="col-auto">
<span class="fa-stack" style="color: #dc543d; transform: rotate(-30deg); font-size: 18px;">
<i class="fal fa-seal fa-stack-2x"></i>
<!-- STAMP ICON == Replace "mushroom" with another icon name -->
<i class="fas fa-mushroom fa-xs fa-stack-1x"></i>
</span>
</div>
<!-- DECORATIVE DATE -->
<div class="col-auto">
<p class="text-right font-italic small">
xx.xx.20xx
</p>
</div>
</div>
</div>
</div>
<!-- BACKGROUND TEXTURE (PAPER SHEET WITH DESCRIPTION) -->
<div class="card rounded-0 border-0 mt-n5 p-2 flex-grow-1" style="box-shadow: 2px 2px 8px rgba(0,0,0, .5);
background-image: url(https://images.unsplash.com/photo-1528458965990-428de4b1cb0d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1929&q=80);
background-size: cover;
background-position: center;">
<div class="p-2 font-italic" style="background: repeating-linear-gradient(rgba(89,70,57, .3), rgba(89,70,57, .3) 1px, rgba(0,0,0, 0) 1px, rgba(0,0,0, 0) 24px);">
<!-- FOLDER DESCRIPTION == WILL EXPAND WITH CONTENT -->
<p style="line-height: 1.67; margin-top: 44px;">
Write a bit about this folder. 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>
<div class="row no-gutters flex-row text-lowercase align-items-end flex-grow-1">
<!-- DIRECTION SIGNS -->
<div class="col-auto pr-1">
<i class="fal fa-signs-post fa-3x"></i>
</div>
<!-- TAG -->
<div class="col-auto flex-grow-1 p-1">
<div class="px-3 pb-1 text-white text-center" style="background-color: #594639; border-radius: .6em;">
<span><i class="fas fa-code-commit fa-xs"></i></span>
<p class="mt-n2">
tag
</p>
</div>
</div>
<!-- TAG -->
<div class="col-auto flex-grow-1 p-1">
<div class="px-3 pb-1 text-white text-center" style="background-color: #594639; border-radius: .6em;">
<span><i class="fas fa-code-commit fa-xs"></i></span>
<p class="mt-n2">
tag
</p>
</div>
</div>
<!-- TAG -->
<div class="col-auto flex-grow-1 p-1">
<div class="px-3 pb-1 text-white text-center" style="background-color: #594639; border-radius: .6em;">
<span><i class="fas fa-code-commit fa-xs"></i></span>
<p class="mt-n2">
tag
</p>
</div>
</div>
<!-- YOU CAN ADD MORE TAGS ABOVE -->
</div>
</div>
</div>
<!--
================================================
FOLDER BLOCK
================================================
-->
<div class="col-12 col-lg-6 p-3 flex-column">
<div class="ml-n2 mr-3 mr-lg-5" style="min-height: 200px; border-radius: 0; background-color: #eee; position: relative; box-shadow: 2px 2px 8px rgba(0,0,0, .5); z-index: 2;">
<!-- BACKGROUND TEXTURE (POLAROID) -->
<div class="w-100 h-100" style="position: absolute; left: 0; top: 0;
background-image: url(https://images.unsplash.com/photo-1598078413734-e4b3c11c2039?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80);
background-size: cover;
background-position: center; opacity: .2;"></div>
<div class="card border-0 bg-transparent p-2">
<!-- FOLDER IMAGE BANNER -->
<div class="p-2 small" style="border-radius: 0; min-height: 150px; box-shadow: inset 0 0 10px rgba(0,0,0, .9);
background-image: url(URLHERE);
background-size: cover;
background-position: center;">
<!-- SMALL QUOTE AT THE TOP OF THE BANNER == If your banner is light you can change the text color and remove the shadow-->
<i style="color: #fff;
text-shadow: 0 0 5px rgba(0,0,0, .9), 0 0 10px rgba(0,0,0, .9), 0 0 15px rgba(0,0,0, .9), 1px 1px 0 rgba(0,0,0, .9);">
<i class="fal fa-quote-left fa-xs" style="opacity: .5;"></i>
Small quote goes here.
<i class="fal fa-quote-right fa-xs" style="opacity: .5;"></i></i>
</div>
<div class="row no-gutters justify-content-end">
<div class="col-auto pl-5">
<p class="font-italic text-center pr-2 pt-2 mb-2" style="font-size: 25px; transform: rotate(-2deg); line-height: .8;"><a style="color: #dc543d; text-decoration: none;"
href="FOLDER_LINK_HERE">
Folder name
</a></p>
</div>
</div>
<div class="row no-gutters justify-content-between align-items-end mt-n3">
<div class="col-auto">
<span class="fa-stack" style="color: #dc543d; transform: rotate(-30deg); font-size: 18px;">
<i class="fal fa-seal fa-stack-2x"></i>
<!-- STAMP ICON == Replace "trees" with another icon name -->
<i class="fas fa-trees fa-xs fa-stack-1x"></i>
</span>
</div>
<!-- DECORATIVE DATE -->
<div class="col-auto">
<p class="text-right font-italic small">
xx.xx.20xx
</p>
</div>
</div>
</div>
</div>
<!-- BACKGROUND TEXTURE (PAPER SHEET WITH DESCRIPTION) -->
<div class="card rounded-0 border-0 mt-n5 p-2 flex-grow-1" style="box-shadow: 2px 2px 8px rgba(0,0,0, .5);
background-image: url(https://images.unsplash.com/photo-1528458965990-428de4b1cb0d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1929&q=80);
background-size: cover;
background-position: center;">
<div class="p-2 font-italic" style="background: repeating-linear-gradient(rgba(89,70,57, .3), rgba(89,70,57, .3) 1px, rgba(0,0,0, 0) 1px, rgba(0,0,0, 0) 24px);">
<!-- FOLDER DESCRIPTION == WILL EXPAND WITH CONTENT -->
<p style="line-height: 1.67; margin-top: 44px;">
Write a bit about this folder. 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>
<div class="row no-gutters flex-row text-lowercase align-items-end flex-grow-1">
<!-- DIRECTION SIGNS -->
<div class="col-auto pr-1">
<i class="fal fa-signs-post fa-3x"></i>
</div>
<!-- TAG -->
<div class="col-auto flex-grow-1 p-1">
<div class="px-3 pb-1 text-white text-center" style="background-color: #594639; border-radius: .6em;">
<span><i class="fas fa-code-commit fa-xs"></i></span>
<p class="mt-n2">
tag
</p>
</div>
</div>
<!-- TAG -->
<div class="col-auto flex-grow-1 p-1">
<div class="px-3 pb-1 text-white text-center" style="background-color: #594639; border-radius: .6em;">
<span><i class="fas fa-code-commit fa-xs"></i></span>
<p class="mt-n2">
tag
</p>
</div>
</div>
<!-- TAG -->
<div class="col-auto flex-grow-1 p-1">
<div class="px-3 pb-1 text-white text-center" style="background-color: #594639; border-radius: .6em;">
<span><i class="fas fa-code-commit fa-xs"></i></span>
<p class="mt-n2">
tag
</p>
</div>
</div>
<!-- YOU CAN ADD MORE TAGS ABOVE -->
</div>
</div>
</div>
<!-- YOU CAN ADD MORE FOLDER BLOCKS ABOVE -->
</div>
</div>
<!-- CREDIT == DO NOT REMOVE -->
<a class="text-white tooltipster" title="Code by ChiiAka" href="https://toyhou.se/ChiiAka" style="position: absolute; right: 10px; bottom: 4px;">
<i class="far fa-code" style="text-shadow: 0 0 6px rgba(0,0,0, .9);"></i>
</a>
</div>
</div>