folder layout | garden

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

  <!-- folder info -->
  <div class="row no-gutters mr-1 ml-1">
    <div class="col-12 pr-2 pl-2">

      <!-- folder name -->
      <h1 class="text-right display-4" style="text-decoration: underline; font-weight: bold; font-family: Courier New, monospace;">
        character garden.. <i class="fas fa-shovel"></i>
      </h1>

      <!-- folder blurb -->
      <p class="text-right">
        Short blurb describing the folder.
        But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system.
      </p>

    </div>
  </div>


  <!-- characters!  copy-paste the entire row div if you need more -->
  <div class="row no-gutters justify-content-right m-1">

    <!-- character 1 -->
    <div class="col-md-4 p-2">

      <!-- change the image in background-image: url(#); -->
      <div class="card border-0" style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/users/admin); background-size: cover; background-position: center; height: 400px;">

        <!-- character name -->
        <div class="card-header border-0 bg-faded">
          <h1 class="text-center">

            <!-- link to character + character name-->
            <a href="#" class="stretched-link" style="text-decoration: underline; font-weight: bold; font-family: Courier New, monospace;">
            Character Name
            </a>
          </h1>
        </div>
        <div class="h-100"></div>


        <!-- blurb/quick info and colour palette -->
        <div class="card-footer border-0 bg-faded">

          <!-- colour palette -->
          <div class="text-center">
            <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
            <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
            <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
            <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
            <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
          </div>

          <!-- quick info / short character blurb -->
          <p class="text-secondary text-center">quick info <i class="fas fa-seedling fa-xs"></i> quick info <i class="fas fa-seedling fa-xs"></i> quick info</p>
        </div>
      </div>
    </div>

    <!-- character 2 -->
    <div class="col-md-4 p-2">

      <!-- change the image in background-image: url(); -->
      <div class="card border-0" style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/users/admin); background-size: cover; background-position: center; height: 400px;">

        <!-- character name -->
        <div class="card-header border-0 bg-faded">
          <h1 class="text-center">

            <!-- link to character + character name -->
            <a href="#" class="stretched-link" style="text-decoration: underline; font-weight: bold; font-family: Courier New, monospace;">
            Character Name
            </a>
          </h1>
        </div>
        <div class="h-100"></div>

        <!-- blurb/quick info and colour palette -->
        <div class="card-footer border-0 bg-faded">

          <!-- colour palette -->
          <div class="text-center">
            <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
            <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
            <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
            <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
            <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
          </div>

          <!-- quick info / short character blurb -->
          <p class="text-secondary text-center">quick info <i class="fas fa-seedling fa-xs"></i> quick info <i class="fas fa-seedling fa-xs"></i> quick info</p>
        </div>
      </div>
    </div>

    <!-- character 3 -->
    <div class="col-md-4 p-2">

      <!-- change the image in background-image: url(); -->
      <div class="card border-0" style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/users/admin); background-size: cover; background-position: right; height: 400px;">

        <!-- character name -->
        <div class="card-header border-0 bg-faded">
          <h1 class="text-center">

            <!-- link to character + character name -->
            <a href="#" class="stretched-link" style="text-decoration: underline; font-weight: bold; font-family: Courier New, monospace;">
            Character Name
            </a>
          </h1>
        </div>
        <div class="h-100"></div>

        <!-- blurb/quick info and colour palette -->
        <div class="card-footer border-0 bg-faded">

          <!-- colour palette -->
          <div class="text-center">
            <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
            <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
            <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
            <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
            <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
          </div>

          <!-- quick info / short character blurb -->
          <p class="text-secondary text-center">quick info <i class="fas fa-seedling fa-xs"></i> quick info <i class="fas fa-seedling fa-xs"></i> quick info</p>
        </div>
      </div>
    </div>
  </div>

  <!-- code credit + tag masterlist -->
  <div class="row no-gutters mr-1 ml-1">

    <!-- code credit!  feel free to reformat to your liking if needed -->
    <div class="col-1 pr-2 pl-2 d-flex align-items-end">
      <a href="https://toyhou.se/snail-legs" class="align-bottom"><i class="fas fa-code"></i></a>
    </div>

    <!-- tag list -->
    <div class="col-11 pr-2 pl-2">
      <h1 class="text-right" style="text-decoration: underline; font-weight: bold; font-family: Courier New, monospace;">
        tag masterlist.. <i class="fas fa-tag"></i>
      </h1>

      <!-- tags -->
      <div class="text-right" style="font-size: 1.25em;">
        <a href="#" class="badge badge-primary">tag1</a>
        <a href="#" class="badge badge-primary">tag2</a>
        <a href="#" class="badge badge-primary">tag3</a>
        <a href="#" class="badge badge-primary">tag4</a>
        <a href="#" class="badge badge-primary">tag5</a>
      </div>
    </div>
  </div>
</div>