shipping dynamics (front only)

<!---

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

  code by Lullah
  colors used:
    > primary (bootstrap)
    > #fff (whites; box background)
    > #333 (very dark grey; text)
  accent colors:
    > character 1: #4C0020
    > character 2: #F7C39E
    > mixed (character 1 x character 2): #a1625f

  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:550px;">

<div class="" style="color:#333">
  <!-------------- FIRST COLUMN ---------------->
  <div class="">
    <div class="p-1 bg-primary rounded"
         style="background-color: ;
                background-image:url();
                background-size:cover;
                background-position:center;">

    <!------------------------------------->
    <!------------------------------------->
    <!-------------- INTRO ---------------->
    <!------------------------------------->
    <!------------------------------------->
    <div class="card-block p-3 rounded-0 text-uppercase" style="background-color:#fff;">

      <div style="font-size:1.1em;letter-spacing:1.5px;font-weight:bold;">
        <!-------------- names ---------------->
        <a href="" style="color:#4C0020;">
          Name</a> &
        <a href="" style="color:#F7C39E;">
          Name</a></div>

        <!-------------- relationship status ---------------->
      <div style="font-size:0.9em;letter-spacing:1.5px;">
        Status
      </div>

        <!-------------- closeness ---------------->
      <div style="font-size:1em;">
        <i class="fas fa-heart mr-1"></i>
        <i class="fas fa-heart mx-1"></i>
        <i class="fas fa-heart mx-1"></i>
        <i class="far fa-heart mx-1"></i>
        <i class="far fa-heart mx-1"></i>
      </div>
    </div>

      <!------------------------------------------->
      <!------------------------------------------->
      <!-------------- DIFFERENCES ---------------->
      <!------------------------------------------->
      <!------------------------------------------->
      <div class="card-block p-3 mt-1 rounded-0 bg-white" style="">
      <div class="row no-gutters text-center" style="font-size:1em;letter-spacing:1.5px;">
          <div class="col-md-6">
            <!-------------- age ---------------->
            <span class="text-uppercase">Age Diff.</span><br>
            0
          </div>

          <div class="col-md-6">
            <!-------------- height ---------------->
            <span class="text-uppercase">Height Diff.</span><br>
            0
          </div>
      </div>
      </div>

      <!------------------------------------->
      <!------------------------------------->
      <!-------------- STATS ---------------->
      <!------------------------------------->
      <!------------------------------------->
      <div class="p-3 mt-1 rounded-0" style="background-color:#fff;">
        <div class="row no-gutters" style="font-size:1em;">

          <!-------------- big spoon <=> lil spoon ---------------->
          <div class="col-md-3" style="text-align:left;">Big Spoon</div>
          <div class="col-md-6" style="text-align:center;">
            <i class="far fa-heart mx-1" style="color: #;"></i>
            <i class="fas fa-heart mx-1" style="color: #4C0020;"></i>
            <i class="far fa-heart mx-1" style="color: #;"></i>
            <i class="fas fa-heart mx-1" style="color: #F7C39E;"></i>
            <i class="far fa-heart mx-1" style="color: #;"></i>
          </div>
          <div class="col-md-3" style="text-align:right;">Lil' Spoon</div>

          <!-------------- extroverted <=> introverted ---------------->
          <div class="col-md-3 mt-1" style="text-align:left;">Extroverted</div>
          <div class="col-md-6 mt-1" style="text-align:center;">
            <i class="far fa-heart mx-1" style="color: #;"></i>
            <i class="fas fa-heart mx-1" style="color: #4C0020;"></i>
            <i class="far fa-heart mx-1" style="color: #;"></i>
            <i class="fas fa-heart mx-1" style="color: #F7C39E;"></i>
            <i class="far fa-heart mx-1" style="color: #;"></i>
          </div>
          <div class="col-md-3 mt-1" style="text-align:right;">Introverted</div>

          <!-------------- proactive <=> reactive ---------------->
          <div class="col-md-3 mt-1" style="text-align:left;">Proactive</div>
          <div class="col-md-6 mt-1" style="text-align:center;">
            <i class="fas fa-heart mx-1" style="color: #4C0020;"></i>
            <i class="far fa-heart mx-1" style="color: #;"></i>
            <i class="fas fa-heart mx-1" style="color: #F7C39E;"></i>
            <i class="far fa-heart mx-1" style="color: #;"></i>
            <i class="far fa-heart mx-1" style="color: #;"></i>
          </div>
          <div class="col-md-3 mt-1" style="text-align:right;">Reactive</div>

          <!-------------- pet names <=> real name ---------------->
          <div class="col-md-3 mt-1" style="text-align:left;">Pet Names</div>
          <div class="col-md-6 mt-1" style="text-align:center;">
            <i class="far fa-heart mx-1" style="color: #;"></i>
            <i class="far fa-heart mx-1" style="color: #;"></i>
            <i class="far fa-heart mx-1" style="color: #;"></i>
            <i class="fas fa-heart mx-1" style="color: #a1625f;"></i>
            <i class="far fa-heart mx-1" style="color: #;"></i>
          </div>
          <div class="col-md-3 mt-1" style="text-align:right;">Real Name</div>

          <!-------------- protective <=> chill ---------------->
          <div class="col-md-3 mt-1" style="text-align:left;">Protective</div>
          <div class="col-md-6 mt-1" style="text-align:center;">
            <i class="far fa-heart mx-1" style="color: #;"></i>
            <i class="fas fa-heart mx-1" style="color: #4C0020;"></i>
            <i class="far fa-heart mx-1" style="color: #;"></i>
            <i class="far fa-heart mx-1" style="color: #;"></i>
            <i class="fas fa-heart mx-1" style="color: #F7C39E;"></i>
          </div>
          <div class="col-md-3 mt-1" style="text-align:right;">Chill</div>

          <!-------------- sensitive <=> dense ---------------->
          <div class="col-md-3 mt-1" style="text-align:left;">Sensitive</div>
          <div class="col-md-6 mt-1" style="text-align:center;">
            <i class="far fa-heart mx-1" style="color: #;"></i>
            <i class="far fa-heart mx-1" style="color: #;"></i>
            <i class="fas fa-heart mx-1" style="color: #4C0020;"></i>
            <i class="far fa-heart mx-1" style="color: #;"></i>
            <i class="fas fa-heart mx-1" style="color: #F7C39E;"></i>
          </div>
          <div class="col-md-3 mt-1" style="text-align:right;">Dense</div>

          <!-------------- experienced <=> first-timer ---------------->
          <div class="col-md-3 mt-1" style="text-align:left;">Experienced</div>
          <div class="col-md-6 mt-1" style="text-align:center;">
            <i class="far fa-heart mx-1" style="color: #;"></i>
            <i class="far fa-heart mx-1" style="color: #;"></i>
            <i class="far fa-heart mx-1" style="color: #;"></i>
            <i class="far fa-heart mx-1" style="color: #;"></i>
            <i class="fas fa-heart mx-1" style="color: #a1625f;"></i>
          </div>
          <div class="col-md-3 mt-1" style="text-align:right;">First-Timer</div>
        </div>
      </div>

      <!-------------------------------------->
      <!-------------------------------------->
      <!-------------- LEVELS ---------------->
      <!-------------------------------------->
      <!-------------------------------------->
      <div class="p-3 mt-1 rounded-0" style="background-color:#fff">

        <!-------------- THIRST ---------------->
        <div class="text-uppercase" style="font-size:1em;font-weight:bold;letter-spacing:1px;">
          Thirst</div>

        <div class="justify-content-between">
          <!-------------- thirst char #1 ---------------->
    	    <div class="">Name</div>
      		<div class="w-75 my-auto progress" style="height:10px;">
      		  <!-------------- thirst char #1 percentage ---------------->
      			<div class="progress-bar"
      			     style="width:50%;
      			            background-color:#4C0020;"></div>
      		</div>
    	  </div>
    	  <div class="justify-content-between">
    	    <!-------------- thirst char #2 ---------------->
      		<div class="">Name</div>
      		<div class="w-75 my-auto progress" style="height:10px;">
      		  <!-------------- thirst char #2 percentage ---------------->
      			<div class="progress-bar"
      			     style="width:50%;
      			            background-color:#F7C39E;"></div>
      		</div>
    	  </div>

    	  <!-------------- AWKWARDNESS ---------------->
        <div class="mt-1 text-uppercase" style="font-size:1em;font-weight:bold;letter-spacing:1px;">
          Awkwardness</div>

    	  <div class="justify-content-between">
    	    <!-------------- awkwardness char #1 ---------------->
    	    <div class="">Name</div>
      		<div class="w-75 my-auto progress" style="height:10px;">
      		  <!-------------- awkwardness char #1 percentage ---------------->
      			<div class="progress-bar"
      			     style="width:50%;
      			            background-color:#4C0020;"></div>
      		</div>
    	  </div>
    	  <div class="justify-content-between">
    	    <!-------------- awkwardness char #2 ---------------->
      		<div class="">Name</div>
      		<div class="w-75 my-auto progress" style="height:10px;">
      		  <!-------------- awkwardness char #2 ---------------->
      			<div class="progress-bar"
      			     style="width:50%;
      			            background-color:#F7C39E;"></div>
      		</div>
    	  </div>

        <!-------------- TRUST ---------------->
        <div class="mt-1 text-uppercase" style="font-size:1em;font-weight:bold;letter-spacing:1px;">
          Trust</div>

        <!-------------- trust char #1 ---------------->
    	  <div class="justify-content-between">
    	    <div class="">Name</div>
      		<div class="w-75 my-auto progress" style="height:10px;">
      		  <!-------------- trust char #1 percentage ---------------->
      			<div class="progress-bar"
      			     style="width:50%;
      			            background-color:#4C0020;"></div>
      		</div>
    	  </div>
    	  <div class="justify-content-between">
    	   <!-------------- trust char #2 ---------------->
      		<div class="">Name</div>
      		<div class="w-75 my-auto progress" style="height:10px;">
      		  <!-------------- trust char #2 percentage ---------------->
      			<div class="progress-bar"
      			     style="width:50%;
      			            background-color:#F7C39E;"></div>
      		</div>
    	  </div>
    	</div>

      </div>
    </div>
</div>

  <div class="text-right text-primary">
    <a class="fas fa-paw tooltipster" style="color;" title="code by Lullah" href="lullah"></i>
  </div>
</div>