worth tracker

<!---

  ========================================================

  code by Lullah
  colors used:
    > primary (bootstrap; links, horizontal lines)
    > faded (bootstrap; background)

  You may...
    > Edit this code to oblivion!
    > Recycle parts for your own use!

  You may not...
    > Remove my watermark!

  ========================================================

--->

<div class="container" style="max-width:900px;">
  <hr class="w-100 mt-0 mb-2 bg-primary">
  <div class="display-4 text-center" style="font-size:1.3em;letter-spacing:1px;">
    Worth Tracker</div>
  <div class="display-4 text-center" style="font-size:1.2em;letter-spacing:1px;">
    <!------------- CHARACTER LINK + NAME ------------->
    <a href="" class="text-primary">Name</a></div><hr class="w-100 mt-2 mb-0 bg-primary">

  <div class="row no-gutters">
    <div class="col-md-4 pr-md-2 mt-2">
      <div class="bg-faded p-2">
      <!------------- IMAGE ------------->
      <div style="height:470px;
                  background-image:url(https://images.unsplash.com/photo-1505142468610-359e7d316be0?ixlib=rb-1.2.1&auto=format&fit=crop&w=562&q=80);
                  background-size:cover;
                  background-position:center;"></div>
      </div>
    </div>

    <div class="col-md-8 mt-2" style="">
      <div class="">
      <div class="px-3 py-2 bg-faded row no-gutters">
        <!------------- IDENTIFIER TAB ------------->
        <div class="col-5">Item</div>
        <div class="col-3">Artist</div>
        <div class="col-3">Value</div>
        <div class="col-1">Link</div>
      </div>

      <div style="">
      <div class="px-3 py-2 mt-2 row no-gutters bg-faded" style="font-size:0.9em;max-height:395px;overflow:auto;">
        <!------------- this box scrolls after 15 items, go wild! ------------->
        <!------------- ITEM #1 ------------->
        <div class="col-5">Item</div>
        <div class="col-3">Artist</div>
        <div class="col-3">Value</div>
        <div class="col-1 text-center"><a href="#"><i class="fas fa-star"></i></a></div>

        <!------------- ITEM #2 ------------->
        <div class="col-5 mt-2">Item</div>
        <div class="col-3 mt-2">Artist</div>
        <div class="col-3 mt-2">Value</div>
        <div class="col-1 mt-2 text-center"><a href="#"><i class="fas fa-star"></i></a></div>

        <!------------- ITEM #3 ------------->
        <div class="col-5 mt-2">Item</div>
        <div class="col-3 mt-2">Artist</div>
        <div class="col-3 mt-2">Value</div>
        <div class="col-1 mt-2 text-center"><a href="#"><i class="fas fa-star"></i></a></div>

        <!------------- ITEM #4 ------------->
        <div class="col-5 mt-2">Item</div>
        <div class="col-3 mt-2">Artist</div>
        <div class="col-3 mt-2">Value</div>
        <div class="col-1 mt-2 text-center"><a href="#"><i class="fas fa-star"></i></a></div>

        <!------------- ITEM #5 ------------->
        <div class="col-5 mt-2">Item</div>
        <div class="col-3 mt-2">Artist</div>
        <div class="col-3 mt-2">Value</div>
        <div class="col-1 mt-2 text-center"><a href="#"><i class="fas fa-star"></i></a></div>

        <!------------- ITEM #6 ------------->
        <div class="col-5 mt-2">Item</div>
        <div class="col-3 mt-2">Artist</div>
        <div class="col-3 mt-2">Value</div>
        <div class="col-1 mt-2 text-center"><a href="#"><i class="fas fa-star"></i></a></div>

      <!------------- add more above this line!! ------------->
      </div>
      </div>

      <div class="px-3 py-2 bg-faded mt-2">
        <div class="justify-content-between">
          <!------------- TOTAL ------------->
          <span>Total: 0 USD</span>
          <!------------- LAST UPDATE ------------->
          <span>Last Updated: MM/DD/YYYY</span>
        </div>
      </div>

      </div>
    </div>
  </div><hr class="w-100 mt-2 mb-0 bg-primary">
  <!------------- credit ------------->
  <div class="text-right"><a href="Lullah" class="tooltipster" title="code by Lullah"><i class="fas fa-paw"></i></a></div>
</div>