[RT] Le Complex Folders (CODE 3)

  
      <!-- 

        VERSION 3 | No Index, Row

    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-1588406320565-9fa6d9901d1d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1886&q=80
        > image link: https://unsplash.com

        THANKS FOR USING! <3

    -->

<!-- container -->
<div class="container-fluid" style="max-width:950px;
    background-image: url('https://images.unsplash.com/photo-1588406320565-9fa6d9901d1d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1886&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 -->
        </div>

<!-- credit -->
<div class="pull-right">
    <a href="https://unsplash.com"><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 -->