25. stacks

<div class="container" style="max-width: 650px;">
  <!-- top image -->
  <div class="card bg-default m-1" style="background-image: url(https://images.unsplash.com/photo-1526781100743-007e0dc2b474); background-size: cover; background-position: center; height: 75px;"></div>

  <!-- header  -->
  <div class="card bg-default p-2 m-1">
    <div>
      <h1 style="display: inline;" class="text-primary">charcter name</h1>
      <p class="text-secondary pl-1" style="display: inline; text-transform: uppercase;">pro/nouns</p>
    </div>
  </div>

  <!-- content -->
  <div class="card bg-default p-2 m-1" style="max-height: 400px; overflow-y: auto;">
    <div class="row no-gutters">

      <!-- the basics -->
      <div class="col-md-5 p-1">
        <p class="text-center mb-0 text-primary" style="text-transform: uppercase; border-bottom: 1px dotted #808080;">the basics</p>
        <div class="card border-0 bg-faded p-1 pr-2 pl-2 mt-1"><p>

          <span class="text-secondary" style="float: left; text-transform: uppercase;">names</span>
          <span style="float: right;">name, "nickname"</span>

        </p></div>
        <div class="card border-0 bg-faded p-1 pr-2 pl-2 mt-1"><p>

          <span class="text-secondary" style="float: left; text-transform: uppercase;">pronouns</span>
          <span style="float: right;">pro/nouns</span>

          </p>
        </div>
        <div class="card border-0 bg-faded p-1 pr-2 pl-2 mt-1"><p>

          <span class="text-secondary" style="float: left; text-transform: uppercase;">species</span>
          <span style="float: right;">species</span>

        </p></div>
        <div class="card border-0 bg-faded p-1 pr-2 pl-2 mt-1"><p>

          <span class="text-secondary" style="float: left; text-transform: uppercase;">theme song</span>
          <span style="float: right;"><a href="#" style="text-decoration: underline;">songname, artist</a></span>

        </p></div>
        <div class="card border-0 bg-faded p-1 pr-2 pl-2 mt-1"><p>

          <span class="text-secondary" style="float: left; text-transform: uppercase;">story</span>
          <span style="float: right;">story name</span>

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

      <!-- bio text -->
      <div class="col-md-7 p-1">
        <p class="text-center mb-0 text-primary" style="text-transform: uppercase; border-bottom: 1px dotted #808080;">biography</p>
        <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>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
        </p>
      </div>
    </div>
  </div>

  <!-- footer -->
  <div class="card bg-default p-2 m-1">
    <div>
      <p class="text-secondary" style="text-align: right;">code by <a href="https://toyhou.se/snail-legs" style="text-decoration: underline;">snail-legs</a>,
        images from <a href="https://unsplash.com/" style="text-decoration: underline;">unsplash</a>
      </p>
    </div>
  </div>

  <!-- bottom image -->
  <div class="card bg-default m-1" style="background-image: url(https://images.unsplash.com/photo-1526781100743-007e0dc2b474); background-size: cover; background-position: bottom; height: 75px;">
  </div>
</div>