FOLDER V.1

<!--
i recommend changing the font color from white to another color if the background image is light.
to replace colors: select the hex, press ctrl + f,  replace all
text color: #fff
the color picker i use: https://rgbcolorcode.com/


please do not use this with WYSIWYG enabled
-->


<div class="container-fluid" style="max-width: 700px;">

<div class="py-4 px-4 container-fluid mb-1" style="max-width: 900px; background-image: url(BACKGROUND-IMAGE-URL); background-size: cover; background-position: center; background-attachment: fixed; background-color: rgb(0, 0, 0, 0.0); background-repeat: no-repeat; border-radius: 15px;">


    <!-- TITLE -->
    <h1 class="text-center" style="font-weight:300; color:#fff;">
        <i class="fal fa-stars" style="transform: rotateY(180deg);"></i>
        FOLDER NAME
        <i class="fal fa-stars"></i>
    </h1>
    <!-- you can change the stars to be another icon, just change "stars" to an option provided by fontawesome.com -->
    <!-- TITLE END -->

    <hr style="border-color:#fff;">

    <!-- DIVIDER -->
    <p class="text-center"><a href="IMAGE-SOURCE"><img src="IMAGE-URL" style="opacity:0.8;"></a></p>
    <!-- DIVIDER END -->

    <!-- DESCRIPTION -->
    <p class="text-center mb-2" style="color:#fff;">
        Write about the folder here, copy and paste for a new paragaph! 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>
    <!-- DESCRIPTION END -->

</div>

    <!-- FOLDERS -->
    <div class="row justify-content-center">

        <!-- FOLDER -->
        <div class="container-fluid p-2 m-2" style="max-width:200px; background-image: url(BACKGROUND-IMAGE-URL); background-size: cover; background-position: center; background-color: rgb(0, 0, 0, 0.0); opacity:0.8; background-repeat: no-repeat; border-radius:10px;">

            <!-- FOLDER TITLE -->
            <h3 class="text-center" style="font-weight:300; color:#fff;">
                <a href="FOLDER-LINK" style="color:#fff;">FOLDER TITLE</a>
            </h3>
            <!-- FOLDER TITLE END -->

            <!-- FOLDER DESCRIPTION -->
            <p class="text-center" style="color:#fff; font-size:smaller; opacity:0.9;">
                Short description
            </p>
            <!-- FOLDER DESCRIPTION END -->

        </div>
        <!-- FOLDER END -->

        <!-- FOLDER -->
        <div class="container-fluid p-2 m-2" style="max-width:200px; background-image: url(BACKGROUND-IMAGE-URL); background-size: cover; background-position: center; background-color: rgb(0, 0, 0, 0.0); opacity:0.8; background-repeat: no-repeat; border-radius:10px;">

            <!-- FOLDER TITLE -->
            <h3 class="text-center" style="font-weight:300; color:#fff;">
                <a href="FOLDER-LINK" style="color:#fff;">FOLDER TITLE</a>
            </h3>
            <!-- FOLDER TITLE END -->

            <!-- FOLDER DESCRIPTION -->
            <p class="text-center" style="color:#fff; font-size:smaller; opacity:0.9;">
                Short description
            </p>
            <!-- FOLDER DESCRIPTION END -->

        </div>
        <!-- FOLDER END -->

        <!-- FOLDER  -->
        <div class="container-fluid p-2 m-2" style="max-width:200px; background-image: url(BACKGROUND-IMAGE-URL); background-size: cover; background-position: center; background-color: rgb(0, 0, 0, 0.0); opacity:0.8; background-repeat: no-repeat; border-radius:10px;">

            <!-- FOLDER TITLE -->
            <h3 class="text-center" style="font-weight:300; color:#fff;">
                <a href="FOLDER-LINK" style="color:#fff;">FOLDER TITLE</a>
            </h3>
            <!-- FOLDER TITLE END -->

            <!-- FOLDER DESCRIPTION -->
            <p class="text-center" style="color:#fff; font-size:smaller; opacity:0.9;">
                Short description
            </p>
            <!-- FOLDER DESCRIPTION END -->

        </div>
        <!-- FOLDER END -->

    </div>
    <!-- FOLDERS END -->

<p class="text-center" style="font-size:smaller; opacity:0.4;"><a href="https://toyhou.se/16251931.wip-f2u-folder"><i class="fas fa-code"></i></a></p>

</div>