HTML || Folder Code

<!---
You must do these for it to work: ctrl+f > find all > then type
QUICK CHANGES:
#8f80c8 || Icon Colors
#5e2bff || Rating Tag Color
#a69df0 || Tag Color
fa-bat  || Main Icons
fa-folder-heart || Folder Icons

Includes only 4 folders that are seperated, just copy and paste what you need and erase the other set of folders. The first two line of code is colored tags.
if you need any help visit my youtube @vistrym

-->
<!--DIRECTORY NAME START-->

      <h1 class="text-center mb-2 display-2" style="font-weight: 300; font-variant: small-caps; letter-spacing: 2px;">
        <i class="fas fa-bat" style="color: #8f80c8;"></i> Directory <i class="fas fa-bat" style="color: #8f80c8;"></i></h1>
      <hr style="width: 800px;">

<!--DIRECTORY NAME END-->

      <div class="container" style="max-width: 1500px;">
        <div class="row justify-content-center mx-1">

<!--FOLDER START-->

          <div class="col-md-6 border-0 text-center p-0 mb-5 pr-4 flex-fill">
            <h1 class="text-left pb-2 display-4" style="font-weight: 300; font-variant: small-caps; letter-spacing: 2px;">

<!--FOLDER ICON AND NAME-->

              <i class="fas fa-folder-heart" style="color: #8f80c8;"></i> Folder Name</h1>
            <div class="row no-gutters">
              <div class="col-4">

<!--CHARACTER LINK-->

                <a href="LINK">

<!--IMAGE LINK-->

                  <img src="https://66.media.tumblr.com/04ff757bcb092016e26b85dcdfcb1147/tumblr_oizk920u5Z1w1wexbo1_640.jpg" style="border-radius: 10px;" />
                </a>
              </div>
              <div class="col-8 pl-3">
                <div class="bg-faded h-100 my-auto p-3" style="border-radius: 10px; max-width: 400px;">

<!--TAGS-->

                  <div class="text-center mx-4 pb-1" style="font-size: 17px; letter-spacing: 2px;">
                    <span class="m-1 badge" style="background: #5e2bff;">rating</span>
                    <span class="m-1 badge" style="background: #a69df0;">tag</span>
                    <span class="m-1 badge" style="background: #a69df0;">tag</span>
                    <hr>
                    </div>

<!--FOLDER BLURB-->

                  <div class="text-justify my-auto" style="font-size: 14px; letter-spacing: 1.5px;">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                  </div>
                </div>
              </div>
            </div>
          </div>

<!--END OF FOLDER-->

<!--FOLDER START-->

          <div class="col-md-6 border-0 text-center p-0 mb-5 pr-4 flex-fill">
            <h1 class="text-left pb-2 display-4" style="font-weight: 300; font-variant: small-caps; letter-spacing: 2px;">

<!--FOLDER ICON AND NAME-->

              <i class="fas fa-folder-heart" style="color: #8f80c8;"></i> Folder Name</h1>
            <div class="row no-gutters">
              <div class="col-4">

<!--CHARACTER LINK-->

                <a href="LINK">

<!--IMAGE LINK-->

                  <img src="https://66.media.tumblr.com/04ff757bcb092016e26b85dcdfcb1147/tumblr_oizk920u5Z1w1wexbo1_640.jpg" style="border-radius: 10px;" />
                </a>
              </div>
              <div class="col-8 pl-3">
                <div class="bg-faded h-100 my-auto p-3" style="border-radius: 10px; max-width: 400px;">

<!--TAGS-->

                  <div class="text-center mx-4 pb-1" style="font-size: 17px; letter-spacing: 2px;">
                    <span class="m-1 badge" style="background: #5e2bff;">rating</span>
                    <span class="m-1 badge" style="background: #a69df0;">tag</span>
                    <span class="m-1 badge" style="background: #a69df0;">tag</span>
                    <hr>
                    </div>

<!--FOLDER BLURB-->

                  <div class="text-justify my-auto" style="font-size: 14px; letter-spacing: 1.5px;">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                  </div>
                </div>
              </div>
            </div>
          </div>

<!--END OF FOLDER-->
<!--


Start of default tag colors


-->
<!--FOLDER START-->

          <div class="col-md-6 border-0 text-center p-0 mb-5 pr-4 flex-fill">
            <h1 class="text-left pb-2 display-4" style="font-weight: 300; font-variant: small-caps; letter-spacing: 2px;">

<!--FOLDER ICON AND NAME-->

              <i class="fas fa-folder-heart" style="color: #8f80c8;"></i> Folder Name</h1>
            <div class="row no-gutters">
              <div class="col-4">

<!--CHARACTER LINK-->

                <a href="LINK">

<!--IMAGE LINK-->

                  <img src="https://66.media.tumblr.com/04ff757bcb092016e26b85dcdfcb1147/tumblr_oizk920u5Z1w1wexbo1_640.jpg" style="border-radius: 10px;" />
                </a>
              </div>
              <div class="col-8 pl-3">
                <div class="bg-faded h-100 my-auto p-3" style="border-radius: 10px; max-width: 400px;">

<!--TAGS-->

                  <div class="text-center mx-4 pb-1" style="font-size: 17px; letter-spacing: 2px;">
                    <span class="m-1 badge bg-dark">rating</span>
                    <span class="m-1 badge bg-dark">tag</span>
                    <span class="m-1 badge bg-dark">tag</span>
                    <hr>
                    </div>

<!--FOLDER BLURB-->

                  <div class="text-justify my-auto" style="font-size: 14px; letter-spacing: 1.5px;">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                  </div>
                </div>
              </div>
            </div>
          </div>

<!--END OF FOLDER-->
<!--FOLDER START-->

          <div class="col-md-6 border-0 text-center p-0 mb-5 pr-4 flex-fill">
            <h1 class="text-left pb-2 display-4" style="font-weight: 300; font-variant: small-caps; letter-spacing: 2px;">

<!--FOLDER ICON AND NAME-->

              <i class="fas fa-folder-heart" style="color: #8f80c8;"></i> Folder Name</h1>
            <div class="row no-gutters">
              <div class="col-4">

<!--CHARACTER LINK-->

                <a href="LINK">

<!--IMAGE LINK-->

                  <img src="https://66.media.tumblr.com/04ff757bcb092016e26b85dcdfcb1147/tumblr_oizk920u5Z1w1wexbo1_640.jpg" style="border-radius: 10px;" />
                </a>
              </div>
              <div class="col-8 pl-3">
                <div class="bg-faded h-100 my-auto p-3" style="border-radius: 10px; max-width: 400px;">

<!--TAGS-->

                  <div class="text-center mx-4 pb-1" style="font-size: 17px; letter-spacing: 2px;">
                    <span class="m-1 badge bg-dark">rating</span>
                    <span class="m-1 badge bg-dark">tag</span>
                    <span class="m-1 badge bg-dark">tag</span>
                    <hr>
                    </div>

<!--FOLDER BLURB-->

                  <div class="text-justify my-auto" style="font-size: 14px; letter-spacing: 1.5px;">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                  </div>
                </div>
              </div>
            </div>
          </div>

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


<!--CREDIT DO NOT REMOVE----CREDIT DO NOT REMOVE----CREDIT DO NOT REMOVE----CREDIT DO NOT REMOVE----CREDIT DO NOT REMOVE----CREDIT DO NOT REMOVE----CREDIT DO NOT REMOVE-->
        <div class="container text-center p-0">
          <hr style="width: 800px;">
        <a href="https://toyhou.se/VisCodes" style="color:#8F80C8;">
         <span data-toggle="tooltip" title="code by VisCodes" data-original-title="code by VisCodes"><i class="fas fa-bat fa-2x"></i></span>
        </div>