Stor8

<!-----------------------------------------------------------------
      LINED - Folder Directory (CC)
      Profile by HTMLobster (noll) 
      
      Accent: #5099BF
      
      
      TOS:
      Do not remove my credit. You may edit it, however.
      You may edit code/frankenstein with others as long as their TOS allows!
      Turn off WYSIWYG and turn on Code Editor.
      Do not redistribute edits.
------------------------------------------------------------------>
<div class="container">
  <!-- Folders -->
  <div class="row justify-content-center">
    <!-- folder one - flat style (no collapse) -->
    <div class="col-lg-4 mt-4">
      <div class="card rounded-0 bg-faded p-2 h-100" style="border-color:#5099BF;">
        <!-- heading -->
        <div>
          <div class="card bg-faded rounded-0 p-2 mb-2">
            <!-- heading background -->
            <div class="p-2 align-items-center justify-content-center" style="background:#5099BF url(image_URL) center; background-size:cover; height:200px;">
              <div class="card bg-faded rounded-0 p-2">
                <h1 class="display-4 mb-0 text-center" style="font-family:Serif;">
                  <!-- folder name/link -->
                  <a href="FOLDER_LINK" style="color:#5099BF;">
                    I. Folder Name
                  </a>
                </h1>
              </div>
            </div>
          </div>
        </div>
        <!-- heading end -->
        
        <!-- tags -->
        <div class="row" style="padding:0px .7rem; font-size:12px;">
          <!-- tag -->
          <div class="col px-1 mb-2">
            <div class="card bg-faded rounded-0 p-1 text-center text-truncate">
              <!-- tag link & name -->
              <a href="TAG_URL" style="color:#5099BF;">
                Tag
              </a>
            </div>
          </div>
          <!-- tag -->
          <div class="col px-1 mb-2">
            <div class="card bg-faded rounded-0 p-1 text-center text-truncate">
              <!-- tag link & name -->
              <a href="TAG_URL" style="color:#5099BF;">
                Tag
              </a>
            </div>
          </div>
          <!-- tag -->
          <div class="col px-1 mb-2">
            <div class="card bg-faded rounded-0 p-1 text-center text-truncate">
              <!-- tag link & name -->
              <a href="TAG_URL" style="color:#5099BF;">
                Tag
              </a>
            </div>
          </div>
          <!-- tag -->
          <div class="col px-1 mb-2">
            <div class="card bg-faded rounded-0 p-1 text-center text-truncate">
              <!-- tag link & name -->
              <a href="TAG_URL" style="color:#5099BF;">
                Tag
              </a>
            </div>
          </div>
        </div>
        <!-- tags end -->
        
        <!-- description -->
        <div class="d-flex h-100">
          <div class="card bg-faded rounded-0 p-2 w-100">
            <!-- content -->
            <p>
              Folder description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </p>
          </div>
        </div>
        <!-- description end -->
        
        <!-- characters -->
        <div class="mt-auto">
          <div class="row justify-content-center" style="padding:0px .7rem;">
            <!-- character -->
            <div class="col-sm-4 col-6 px-1 mt-2">
              <!-- character link -->
              <a class="card bg-faded rounded-0 p-1" href="CHAR_URL">
                <!-- character image -->
                <img alt="Describe image" src="image_URL">
              </a>
            </div>
            <!-- character end -->
            
            <!-- character -->
            <div class="col-sm-4 col-6 px-1 mt-2">
              <!-- character link -->
              <a class="card bg-faded rounded-0 p-1" href="CHAR_URL">
                <!-- character image -->
                <img alt="Describe image" src="image_URL">
              </a>
            </div>
            <!-- character end -->
            
            <!-- character -->
            <div class="col-sm-4 col-6 px-1 mt-2">
              <!-- character link -->
              <a class="card bg-faded rounded-0 p-1" href="CHAR_URL">
                <!-- character image -->
                <img alt="Describe image" src="image_URL">
              </a>
            </div>
            <!-- character end -->
            
            <!-- to add more, copy characters from start to end and paste below -->
            
          </div>
        </div>
        <!-- characters end -->
      </div>
    </div>
    <!-- folder one end -->
    
    <!-- folder two - collapse style -->
    <div class="col-lg-4 mt-4">
      <div class="card rounded-0 bg-faded p-2 h-100" style="border-color:#5099BF;">
        <!-- heading -->
        <div>
          <div class="card bg-faded rounded-0 p-2 mb-2">
            <!-- heading background -->
            <div class="p-2 align-items-center justify-content-center" style="background:#5099BF url(image_URL) center; background-size:cover; height:200px;">
              <div class="card bg-faded rounded-0 p-2">
                <h1 class="display-4 mb-0 text-center" style="font-family:Serif;">
                  <!-- folder name/link -->
                  <a href="FOLDER_LINK" style="color:#5099BF;">
                    II. Folder Name
                  </a>
                </h1>
              </div>
            </div>
          </div>
        </div>
        <!-- heading end -->
        
        <!-- tags -->
        <div class="row" style="padding:0px .7rem; font-size:12px;">
          <!-- tag -->
          <div class="col px-1 mb-2">
            <div class="card bg-faded rounded-0 p-1 text-center text-truncate">
              <!-- tag link & name -->
              <a href="TAG_URL" style="color:#5099BF;">
                Tag
              </a>
            </div>
          </div>
          <!-- tag -->
          <div class="col px-1 mb-2">
            <div class="card bg-faded rounded-0 p-1 text-center text-truncate">
              <!-- tag link & name -->
              <a href="TAG_URL" style="color:#5099BF;">
                Tag
              </a>
            </div>
          </div>
          <!-- tag -->
          <div class="col px-1 mb-2">
            <div class="card bg-faded rounded-0 p-1 text-center text-truncate">
              <!-- tag link & name -->
              <a href="TAG_URL" style="color:#5099BF;">
                Tag
              </a>
            </div>
          </div>
          <!-- tag -->
          <div class="col px-1 mb-2">
            <div class="card bg-faded rounded-0 p-1 text-center text-truncate">
              <!-- tag link & name -->
              <a href="TAG_URL" style="color:#5099BF;">
                Tag
              </a>
            </div>
          </div>
        </div>
        <!-- tags end -->
        
        <!-- description -->
        <div class="d-flex h-100 mb-2">
          <div class="card bg-faded rounded-0 p-2 w-100">
            <!-- content -->
            <p>
              Folder description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            </p>
          </div>
        </div>
        <!-- description end -->
        
        <!-- collapse button -->
        <div>
          <div class="card bg-faded p-2 rounded-0 text-center">
            <!-- href/aria-controls must match unique collapse ID below -->
            <a data-toggle="collapse" href="#collapseChar1" role="button" aria-expanded="false" aria-controls="collapseChar1" style="color:#5099BF;">
              Characters
            </a>
          </div>
        </div>
        <!-- collapse button end -->
        
        <!-- characters - collapse ID must be unique to each folder -->
        <div class="collapse" id="collapseChar1">
          <div class="mt-auto">
            <div class="row justify-content-center" style="padding:0px .7rem;">
              <!-- character -->
              <div class="col-sm-4 col-6 px-1 mt-2">
                <!-- character link -->
                <a class="card bg-faded rounded-0 p-1" href="CHAR_URL">
                  <!-- character image -->
                  <img alt="Describe image" src="image_URL">
                </a>
              </div>
              <!-- character end -->
              
              <!-- character -->
              <div class="col-sm-4 col-6 px-1 mt-2">
                <!-- character link -->
                <a class="card bg-faded rounded-0 p-1" href="CHAR_URL">
                  <!-- character image -->
                  <img alt="Describe image" src="image_URL">
                </a>
              </div>
              <!-- character end -->
              
              <!-- character -->
              <div class="col-sm-4 col-6 px-1 mt-2">
                <!-- character link -->
                <a class="card bg-faded rounded-0 p-1" href="CHAR_URL">
                  <!-- character image -->
                  <img alt="Describe image" src="image_URL">
                </a>
              </div>
              <!-- character end -->
              
              <!-- to add more, copy characters from start to end and paste below -->
              
            </div>
          </div>
        </div>
        <!-- characters end -->
      </div>
    </div>
    <!-- folder two end -->
    
    <!-- to add more folders, copy the folder start to end and paste above. there are two styles: flat and collapsed (collapse hides characters by default) -->
    <!-- three folders will display per row, folders will be centered -->
  </div>
  <!-- folders end -->
  
  <!-- credit -->
  <div class="text-center mt-4">
    <a href="https://toyhou.se/HTMLobster" data-toggle="tooltip" title="Code by HTMLobster" style="color:#5099BF;">
      <i class="fa-solid fa-lobster"></i>
    </a>
  </div>
</div>