Stor8

<!-----------------------------------------------------------------
      Commission Tracker - Misc
      Profile by HTMLobster (noll) 
      
      
      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">
  <!-- heading -->
  <div class="rounded bg-secondary text-white display-3 p-3" style="font-variant:small-caps; box-shadow:0 0 5px var(--input-color);">
    <div class="row text-center justify-content-between">
      <!-- title -->
      <div class="col-sm-auto">
        Commissions
      </div>
      <!-- status/slots -->
      <div class="col-sm-auto mt-sm-0 mt-2">
        [ Open ]
      </div>
    </div>
  </div>
  <!-- heading end -->
  
  <!-- content -->
  <div class="row">
    <!-- to do list --> 
    <div class="col-lg-4 mt-3">
      <div class="card card-outline-danger" style="box-shadow:0 0 5px var(--color-danger);">
        <!-- title -->
        <div class="card-header bg-danger text-white display-4 border-bottom-0" style="font-variant:small-caps;">
          To Do
        </div>
        <!-- list -->
        <ul class="list-group list-group-flush">
          <!-- item -->
          <li class="list-group-item">
            <!-- project info -->
            <div class="text-capitalize">
              <!-- client -->
              @HTMLobster
              <!-- type -->
              - project type 
              <!-- payment status -->
              - paid/unpaid
              <!-- date -->
              - due date
            </div>
            <!-- optional note -->
            <div>
              <small>
              Note: Lorem ipsum dolor sit amet, consectetur adipiscing.
              </small>
            </div>
            <!-- note end -->
          </li>
          <!-- item end -->
          
          <!-- item -->
          <li class="list-group-item">
            <!-- project info -->
            <div class="text-capitalize">
              <!-- client -->
              @HTMLobster
              <!-- type -->
              - project type 
              <!-- payment status -->
              - paid/unpaid
              <!-- date -->
              - due date
            </div>
          </li>
          <!-- item end -->
          
          <!-- item -->
          <li class="list-group-item">
            <!-- project info -->
            <div class="text-capitalize">
              <!-- client -->
              @HTMLobster
              <!-- type -->
              - project type 
              <!-- payment status -->
              - paid/unpaid
              <!-- date -->
              - due date
            </div>
          </li>
          <!-- item end -->
        </ul>
      </div>
    </div>
    <!-- to do end --> 
    
    <!-- in progress list -->
    <div class="col-lg-4 mt-3">
      <div class="card card-outline-primary" style="box-shadow:0 0 5px var(--color-primary);">
        <!-- title -->
        <div class="card-header bg-primary text-white display-4 border-bottom-0" style="font-variant:small-caps;">
          In Progress
        </div>
        <!-- list -->
        <ul class="list-group list-group-flush">
          <!-- item -->
          <li class="list-group-item">
            <!-- project info -->
            <div class="text-capitalize">
              <!-- client -->
              @HTMLobster
              <!-- type -->
              - project type 
              <!-- payment status -->
              - paid/unpaid
              <!-- date -->
              - due date
            </div>
            <!-- optional note -->
            <div>
              <small>
              Note: Lorem ipsum dolor sit amet, consectetur adipiscing.
              </small>
            </div>
            <!-- note end -->
            
            <!-- progress bar -->
            <div class="progress w-100 mt-2">
              <!-- change width % to set progress -->
              <div style="width:25%;" class="progress-bar progress-bar-striped bg-primary" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                <!-- stage -->
                lining
              </div>
            </div>
            <!-- progress bar -->
          </li>
          <!-- item end -->
          
          <!-- item -->
          <li class="list-group-item">
            <!-- project info -->
            <div class="text-capitalize">
              <!-- client -->
              @HTMLobster
              <!-- type -->
              - project type 
              <!-- payment status -->
              - paid/unpaid
              <!-- date -->
              - due date
            </div>
            
            <!-- progress bar -->
            <div class="progress w-100 mt-2">
              <!-- change width % to set progress -->
              <div style="width:50%;" class="progress-bar progress-bar-striped bg-primary" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
                <!-- stage -->
                shading
              </div>
            </div>
            <!-- progress bar -->
          </li>
          <!-- item end -->
          
          <!-- item -->
          <li class="list-group-item">
            <!-- project info -->
            <div class="text-capitalize">
              <!-- client -->
              @HTMLobster
              <!-- type -->
              - project type 
              <!-- payment status -->
              - paid/unpaid
              <!-- date -->
              - due date
            </div>
            
            <!-- progress bar -->
            <div class="progress w-100 mt-2">
              <!-- change width % to set progress -->
              <div style="width:75%;" class="progress-bar progress-bar-striped bg-primary" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
                <!-- stage -->
                finishing
              </div>
            </div>
            <!-- progress bar -->
          </li>
          <!-- item end -->
        </ul>
      </div>
    </div>
    <!-- in progress list end -->
    
    <!-- completed list -->
    <div class="col-lg-4 mt-3">
      <div class="card card-outline-success" style="box-shadow:0 0 5px var(--color-success);">
        <!-- title -->
        <div class="card-header bg-success text-white display-4 border-bottom-0" style="font-variant:small-caps;">
          Complete
        </div>
        <!-- list -->
        <ul class="list-group list-group-flush">
          <!-- item -->
          <li class="list-group-item">
            <!-- project info -->
            <div class="text-capitalize">
              <!-- client -->
              @HTMLobster
              <!-- type -->
              - project type 
              <!-- finished comm showcase -->
              - <a href="showcase_url">
                showcase
                </a>
            </div>
          </li>
          <!-- item end -->
          
          <!-- item -->
          <li class="list-group-item">
            <!-- project info -->
            <div class="text-capitalize">
              <!-- client -->
              @HTMLobster
              <!-- type -->
              - project type 
              <!-- finished comm showcase -->
              - <a href="showcase_url">
                showcase
                </a>
            </div>
          </li>
          <!-- item end -->
          
          <!-- item -->
          <li class="list-group-item">
            <!-- project info -->
            <div class="text-capitalize">
              <!-- client -->
              @HTMLobster
              <!-- type -->
              - project type 
              <!-- finished comm showcase -->
              - <a href="showcase_url">
                showcase
                </a>
            </div>
          </li>
          <!-- item end -->
        </ul>
      </div>
    </div>
    <!-- completed list -->
  </div>
  
  <div class="mt-3 text-center">
    <a href="https://toyhou.se/HTMLobster" class="tooltipster" title="Code by HTMLobster">
      <i class="fa-solid fa-lobster"></i>
    </a>
  </div>
</div>