<!--
VERSION 1 | Complex
HANDY WEBSITES
> Font Awesome (for icons): https://fontawesome.com/v5.15/icons/reddit?style=brands
> W3 Schools Bootstrap: https://www.w3schools.com/bootstrap/
> W3 Schools HTML: https://www.w3schools.com/html/default.asp
> Bootstrap Docs: https://getbootstrap.com/docs/5.1/getting-started/introduction/
THINGS TO NOTE
> image used: https://images.unsplash.com/photo-1599882647619-add8a7c97c6f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2025&q=80
> image link: https://unsplash.com/photos/VbtUsaFldtw
THANKS FOR USING! <3
-->
<!-- container -->
<div class="container-fluid" style="max-width:950px;
background-image: url('https://images.unsplash.com/photo-1599882647619-add8a7c97c6f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2025&q=80');
background-size: cover;
background-position: bottom;
background-attachment: fixed;
background-repeat: no-repeat;">
<!-- row -->
<div class="row p-0">
<!-- first column -->
<div class="col-md-7 p-2">
<div class="p-3" style="background-color:rgba(0,0,0,0.5);">
<!-- header -->
<div class="p-3 mb-2" style="font-size:25px; font-variant: small-caps; font-weight: 200; border-top: 1px #ffffff solid; border-left: 1px #ffffff solid;">
<span style="color:rgba(255,255,255,1); letter-spacing: 4px;">Title of Folder</span>
</div>
<!-- content -->
<div class="p-2" style="font-size:13px; font-weight: 200; background-color:rgba(0, 0, 0, 0.1)">
<div class="px-3 text-justify" style="color:rgba(255,255,255,1);">
<p>These boxes do not scroll. You will have to add <em>br</em> tags or <em>shift+enter</em> if you want this to look symmetrical. Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio iusto, harum quis tenetur unde quasi? Optio.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, libero nulla. Tempore vitae architecto ea culpa soluta aut asperiores laborum unde officia distinctio alias dolorem dolor molestiae velit, sit veniam.</p>
</div>
<hr style="background-color:rgba(255, 255, 255, 0.5);">
<div class="px-4 py-2 text-center" style="font-weight: 200; letter-spacing: 5px; color:rgba(255,255,255,1); background-color:rgba(0,0,0,0.2);">
<a href="LINK">l i n k</a>
</div>
</div>
<!-- tags -->
<div class="px-4 text-white text-center" style="font-size:10px; font-weight:200;">
adjective | adjective | adjective
</div>
</div>
</div>
<!-- end first column -->
<!-- second column -->
<div class="col-md-5 p-3" style="background-color:rgba(0,0,0,0.7); box-shadow: 3rem;">
<div style="font-size:x-large;">
<div class="pull-left" style="letter-spacing: 5px; font-variant: small-caps; color:rgba(255, 255, 255, 0.5);">Index</div>
<div class="pull-right"><i class="fal fa-archive" style="color:rgba(255, 255, 255, 0.5);"></i></div>
</div>
<div class="mt-5" style="
background-image: url('https://images.unsplash.com/photo-1599882647619-add8a7c97c6f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2025&q=80');
background-size: cover;
background-position: bottom;
background-attachment: fixed;
background-repeat: no-repeat;">
<!-- list ------------------------------------------------------->
<!---------------
TO ADD AN INDENTED <UL> CLASS, PUT IT INSIDE OF AN <LI> CLASS
I.E.
<ul>
<li>Content.</li>
<li>Content.
<ul>
<li>Content.</li>
</ul>
</li>
</ul>
-------------------------->
<div style="background-color:rgba(0, 0, 0, 0.5); font-weight:100; color:rgba(255,255,255,0.7);" class="px-3 py-2">
<!-- list content ------------------------>
<!-- FIRST UL CLASS -------------------------------------->
<ul class="fa-ul">
<!-- FIRST LI OF FIRST UL CLASS ------------------------------------------>
<li>
<i class="fa-li fal fa-chevron-right"></i><a href="LINK" style="color:rgba(255,255,255,0.6);">Content.</a>
<!-- SECOND UL CLASS ---------- INSIDE OF FIRST LI CLASS IN FIRST UL CLASS --------------->
<ul class="fa-ul">
<!-- FIRST LI CLASS OF SECOND UL CLASS -------->
<li>
<i class="fa-li fal fa-chevron-double-right"></i><a href="LINK" style="color:rgba(255,255,255,0.6);">Content.</a>
</li>
<li>
<i class="fa-li fal fa-chevron-double-right"></i><a href="LINK" style="color:rgba(255,255,255,0.6);">Content.</a>
</li>
<!-- ADD MORE ABOVE THIS LINE -->
</ul>
<!-- END OF SECOND UL CLASS --------------------------->
</li>
<!-- SECOND LI OF FIRST UL CLASS ------------------------------->
<li>
<i class="fa-li fal fa-chevron-right"></i><a href="LINK" style="color:rgba(255,255,255,0.6);">Content.</a>
<!-- THIRD UL CLASS, INSIDE SECOND LI OF FIRST UL CLASS -------------------->
<ul class="fa-ul">
<li>
<i class="fa-li fal fa-chevron-double-right"></i><a href="LINK" style="color:rgba(255,255,255,0.6);">Content.</a>
</li>
<!-- ADD MORE ABOVE THIS LINE -->
<li>
<i class="fa-li fal fa-chevron-double-right"></i><a href="LINK" style="color:rgba(255,255,255,0.6);">Content.</a>
<!-- FORTH UL CLASS, INSIDE THIRD LI OF FIRST UL CLASS ------------------------------->
<ul class="fa-ul">
<li>
<i class="fa-li fal fa-level-up fa-rotate-90"></i><a href="LINK" style="color:rgba(255,255,255,0.6);">Content.</a>
</li>
<li>
<i class="fa-li fal fa-level-up fa-rotate-90"></i><a href="LINK" style="color:rgba(255,255,255,0.6);">Content.</a>
</li>
<li>
<i class="fa-li fal fa-level-up fa-rotate-90"></i><a href="LINK" style="color:rgba(255,255,255,0.6);">Content.</a>
</li>
<!-- ADD MORE ABOVE THIS LINE ------------------------------------>
</ul>
</li>
</ul>
</li>
<li><i class="fa-li fal fa-chevron-right"></i><a href="LINK" style="color:rgba(255,255,255,0.6);">Content.</a></li>
<li><i class="fa-li fal fa-chevron-right"></i><a href="LINK" style="color:rgba(255,255,255,0.6);">Content.</a></li>
<!-- ADD MORE ABOVE THIS LINE --------------------------------------->
</ul>
<!-- END OF FIRST UL CLASS ------------------------------------------------->
</div>
<!-- END LISTED CONTENT --------------------------------------------------------------- -->
</div>
</div>
<!-- end second column -->
</div>
<!-- credit -->
<div class="pull-right">
<a href="https://unsplash.com/photos/VbtUsaFldtw"><i class="far fa-image-polaroid"></i></a>
<a href="https://toyhou.se/acodingperson"><i class="fal fa-blanket"></i></a>
</div>
<!-- /credit-->
</div>
<!-- end of first -->