21. OC trading card

<!-- info button -->
<div class="p-2 m-auto text-right" style="max-width: 25em; position: relative;">
  <a data-toggle="collapse" href="#info" role="button" aria-expanded="false" aria-controls="info">
  <i class="fas fa-info-square p-2" style="font-size: 2em; position: absolute; top: 0.75em; right: 0.5em; z-index: 1;"></i>
  </a>
</div>

<!-- background image -->
<div class="card m-auto bg-faded" style="background-image: url(https://cdn.discordapp.com/attachments/730913454726316074/881940845941653594/bg_bedroom.png); background-position: 35%; background-size: cover; max-width: 25em; height:35em; border: 1px solid;">

  <!-- character art - you might need to fiddle with the percentage in background-position to position it correctly!  lower the percentage to move the image right, raise it to move the image left  -->
  <div class="card border-0 bg-transparent" style="background-image: url(https://cdn.discordapp.com/attachments/730913454726316074/881249990813552700/august_small_smile.png); background-position: 25%; background-size: cover; height: 100%;">
    <div class="card-body" style="height: 100%;"></div>

    <!-- character name, stars, credits, collapsing bio -->
    <div class="card-footer pb-4 border-0 bg-faded">
      <div class="row no-gutters">

        <!-- character name and credits -->
        <div class="col-12">
          <h1 style="font-family: 'Georgia', serif; font-size: 1.75em; font-weight: bold;">character name</h1>
        </div>
      </div>

      <!-- collapsing bio - will scroll to include extra content if needed! a real trading card could never -->
      <div class="row no-gutters">
        <div class="col-12">
          <div class="collapse" id="info">
            <div style="height: 28.75em; overflow-x: auto;">

              <!-- quick info -->
              <div class="card p-2 m-2 bg-default border-0">
                <p class="text-secondary text-center">pronouns . age . occupation . story</p>
              </div>

              <!-- stat 1 -->
              <div class="card p-2 m-2 bg-default border-0">
                <p style="border-bottom: 2px dotted;"><span class="float-left">STR</span><span class="float-right">10</span></p>
              </div>

              <!-- stat 2 -->
              <div class="card p-2 m-2 bg-default border-0">
                <p style="border-bottom: 2px dotted;"><span class="float-left">WIS</span><span class="float-right">10</span></p>
              </div>

              <!-- stat 3 -->
              <div class="card p-2 m-2 bg-default border-0">
                <p style="border-bottom: 2px dotted;"><span class="float-left">DEX</span><span class="float-right">10</span></p>
              </div>

              <!-- quote -->
              <div class="card p-2 m-2 bg-default border-0 text-primary">
                <p class="m-auto text-center" style="font-family: 'Georgia', serif; font-size: 1.2em;">
                  <i class="fas fa-quote-left"></i>
                  quote or song lyrics!
                  <i class="fas fa-quote-right"></i>
                </p>
              </div>

              <!-- bio text -->
              <div class="card p-1 m-1 bg-default border-0">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row no-gutters">
        <div class="col-12">
          <p class="text-secondary pt-2" style="line-height: 0.5rem;"><i>art by <a href="#">artist</a> | code by <a href="https://toyhou.se/snail-legs">snail-legs</a></i></p>
        </div>
      </div>
    </div>
  </div>
</div>