[html+css] commission tracker (code)

<div class="d-flex mt-3" style="align-items:stretch;flex-flow: row wrap;justify-content:space-evenly;">
<div class="bg-faded col-5 pt-5 py-1 px-2 card border-0 mb-3 main-box">
    
    <div class="p-3 bg-muted card border-0 mt-n2" style="height:100%">
    <p class="header-text" style="text-transform:lowercase;">to-do</p>
    <hr class="hr-border">
    
    <p class="list">
    <a class="text-success p-1" href="LINK_HERE">user</a> - Fullbody - <a class="text-success" href="LINK_HERE">character</a><br>
    <a class="text-success p-1" href="LINK_HERE">user</a> - Fullbody - <a class="text-success" href="LINK_HERE">character</a><br>
    <a class="text-secondary p-1" href="LINK_HERE">user</a> - Fullbody - <a class="text-secondary" href="LINK_HERE">character</a><br>
    <a class="text-warning p-1" href="LINK_HERE">user</a> - Fullbody - <a class="text-warning" href="LINK_HERE">character</a><br>
    <a class="text-danger p-1" href="LINK_HERE">user</a> - Fullbody - <a class="text-danger" href="LINK_HERE">character</a><br>
    <a class="text-danger p-1" href="LINK_HERE">user</a> - Fullbody - <a class="text-danger" href="LINK_HERE">character</a><br>
    </p>
    
    </div></div>


<div class="bg-faded col-5 pt-5 py-1 px-2 card border-0 mb-3 main-box">
    
    <div class="p-3 bg-muted card border-0 mt-n2" style="height:100%">
    <p class="header-text" style="text-transform:lowercase;">Waiting</p>
    <hr class="hr-border">
    
    <p class="list">
    <a class="text-success p-1" href="LINK_HERE">user</a> - Fullbody - <a class="text-success" href="LINK_HERE">character</a><br>
    <a class="text-success p-1" href="LINK_HERE">user</a> - Fullbody - <a class="text-success" href="LINK_HERE">character</a><br>
    <a class="text-secondary p-1" href="LINK_HERE">user</a> - Fullbody - <a class="text-secondary" href="LINK_HERE">character</a><br>
    <a class="text-warning p-1" href="LINK_HERE">user</a> - Fullbody - <a class="text-warning" href="LINK_HERE">character</a><br>
    <a class="text-danger p-1" href="LINK_HERE">user</a> - Fullbody - <a class="text-danger" href="LINK_HERE">character</a><br>
    <a class="text-danger p-1" href="LINK_HERE">user</a> - Fullbody - <a class="text-danger" href="LINK_HERE">character</a><br>
    </p>
    
    </div></div>


<div class="d-block text-right" style="position:fixed; bottom:50px; right:10px; z-index:99999;"> 

  <!--MENU CONTENT-->
  <div class="collapse active show" id="TOGGLE-MENU">
    <div class="card bg-faded border-0 rounded-0 p-1">
      <div class="card border-0 rounded-0 p-1">       


        <span class="btn-block text-left px-2 p-1 text-success">
          coloring
        </span>

        <span class="btn-block text-left px-2 p-1 text-secondary">
          line art
        </span>

        <span class="btn-block text-left px-2 p-1 text-warning">
          sketch
        </span>
        
        <span class="btn-block text-left px-2 p-1 text-danger">
          not started
        </span>
        
        <a href="https://toyhou.se/databreach" class="tooltipster" title="code by databreach" data-placement="left"><span style="color:#808080;margin-top:5px;text-align:center">code credits</span></a>
        
      </div>
    </div>
  </div> <!--menu content end--> 

 <!--TOGGLE MENU BUTTON-->
  <div class="d-inline-block bg-faded my-1 mr-1 p-1">
    <a class="btn btn-secondary border-0 rounded-0 px-2 py-1" style="font-size:larger;" data-toggle="collapse" href="#TOGGLE-MENU">
      <i class="fas fa-bars"></i>
    </a>
  </div> 

</div></div>

/*
to change the icons please use font-awesome unicodes
https://fontawesome.com/icons/
*/

$ico-coloring:"\f53f";
$ico-lineart:"\f305";
$ico-sketch:"\f1fc";
$ico-no-start:"\f00d";
$main-box-size:400px;

@import '0/13626/fC00Ku/comm-tracker';