26. blocks

<div class="container" style="max-width: 820px;">

  <!-- header image -->
  <div class="row no-gutters">
    <div class="col-12 p-1">
      <div class="card" style="background-image: url(https://images.unsplash.com/photo-1526781100743-007e0dc2b474); background-size: cover; background-position: 50% 50%; height: 100px;">
      </div>
    </div>
  </div>

  <!-- bio content -->
  <div class="row no-gutters">
    <div class="col-md-4 p-1">
      <div class="card p-1" style="height: 500px;">
        <div class="my-auto">

          <!-- pfp type image / pagedoll -->
          <img src="https://media.discordapp.net/attachments/730913454726316074/900123815219187752/face_placeholder.png" class="img-fluid" style="max-width: 150px; display: block; margin-left: auto; margin-right: auto;">

          <!-- username and quick info -->
          <h1 class="display-2 text-center text-primary mb-0">username</h1>
          <p class="text-center text-secondary">info - info - info</p>

        </div>
      </div>
    </div>
    <div class="col-md-8 p-1">
      <div class="card p-3" style="height: 500px; overflow: auto;">

        <!-- about me -->
        <h2 class="text-primary" style="border-bottom: 1px dotted #808080;">about me</h2>
        <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>

        <!-- art status -->
        <h2 class="text-primary" style="border-bottom: 1px dotted #808080;">art status</h2>
        <p class="bg-faded p-2 rounded">
          <span class="text-secondary" style="float: left;">requests...</span>
          <span style="float: right;">status</span>
          <br>
          <span class="text-secondary" style="float: left;">trades...</span>
          <span style="float: right;">status</span>
          <br>
          <span class="text-secondary" style="float: left;">commissions...</span>
          <span style="float: right;">status</span>
        </p>

        <!-- featured ocs -->
        <h2 class="text-primary" style="border-bottom: 1px dotted #808080;">featured ocs</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
        <div class="row no-gutters">
          <div class="col-4 p-1">

            <!-- thumbnail image -->
            <div class="card border-0" style="background-image: url(https://media.discordapp.net/attachments/730913454726316074/900123823876210748/PH4.png); background-size: cover; background-position: center; height: 150px;"></div>

            <!-- character info -->
            <h5 class="text-center mb-0 text-primary">character name</h5>
            <p class="text-center text-secondary">pro/nouns</p>
            <a href="#" class="stretched-link"></a> <!-- link to oc's bio -->
          </div>
          <div class="col-4 p-1">

            <!-- thumbnail image -->
            <div class="card border-0" style="background-image: url(https://media.discordapp.net/attachments/730913454726316074/900123817194700830/PH1.png); background-size: cover; background-position: center; height: 150px;"></div>

            <!-- character info -->
            <h5 class="text-center mb-0 text-primary">character name</h5>
            <p class="text-center text-secondary">pro/nouns</p>
            <a href="#" class="stretched-link"></a> <!-- link to oc's bio -->
          </div>
          <div class="col-4 p-1">

            <!-- thumbnail image -->
            <div class="card border-0" style="background-image: url(https://media.discordapp.net/attachments/730913454726316074/900123818901790740/PH2.png); background-size: cover; background-position: center; height: 150px;"></div>

            <!-- character info -->
            <h5 class="text-center mb-0 text-primary">character name</h5>
            <p class="text-center text-secondary">pro/nouns</p>
            <a href="#" class="stretched-link"></a> <!-- link to oc's bio -->
          </div>
        </div>

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

  <!-- links -->
  <div class="row no-gutters">
    <div class="col-12 p-1 text-center">
      <div class="card p-3">
        <div>
          <a href="#" style="display: inline;">link</a> -
          <a href="#" style="display: inline;">link</a> -
          <a href="#" style="display: inline;">link</a> -
          <a href="#" style="display: inline;">link</a> -
          <a href="#" style="display: inline;">link</a> -
          <a href="#" style="display: inline;">link</a>
        </div>
      </div>
    </div>
  </div>
  <!-- code credit -->
  <p class="text-right mr-2 text-secondary">code by <a href="https://toyhou.se/snail-legs" class="text-secondary" style="text-decoration: underline;">snail-legs</a></p>
</div>