23. haunt

<!-- container, sets text colour -->
<div class="container" style="max-width: 850px; color: #A7D2F8;">
  <!-- nested cards for double-border effect -->
  <div class="card" style="background-color: #405478; border: 1px solid #FFFFFF;">
    <div class="card p-2" style="border: 2px solid #FFFFFF; margin: 2px; background-color: #020C39;">

      <!-- header - contains character name and pronouns -->
      <div class="card-header pb-0 mb-2" style="background: none; border-bottom: 2px solid #5B8CFA;">

        <!-- name -->
        <h1 class="display-3" style="display: inline; text-shadow: 0px 0px 3px #2D72FF; color: #5CB2FF; font-family: 'Georgia', serif;"><b>
            character name
        </b></h1>

        <!-- pronouns -->
        <p class="ml-2" style="text-transform: uppercase; display: inline;">
            pro/nouns
        </p>
      </div>

      <!-- bio content -->
      <div class="card-body">
        <div class="row no-gutters">
          <div class="col-md-5 p-1">

            <!-- header image - change 'background-image: url(URLHERE);' - you can adjust the crop using 'background-position: X Y;' -->
            <div class="card border-0 mb-1" style="background-image: url(https://media.discordapp.net/attachments/730913454726316074/899048850516492408/vent_edit_small.png); background-size: cover; background-position: 50% 25%; height: 200px;"></div>

            <!-- info fields - if you add a lot of these it'll create a scrollbox! -->
            <div style="max-height: 200px; overflow: auto;">
              <div class="card border-0 p-1 pr-2 pl-2 mt-1" style="background-color: #112D5F;">
                <p>
                  <span style="float: left; color: #5CB2FF; text-transform: uppercase;">names</span>
                  <span style="float: right;">name, nicknames</span>
                </p>
              </div>
              <div class="card border-0 p-1 pr-2 pl-2 mt-1" style="background-color: #112D5F;">
                <p>
                  <span style="float: left; color: #5CB2FF; text-transform: uppercase;">pronouns</span>
                  <span style="float: right;">pro/nouns</span>
                </p>
              </div>
              <div class="card border-0 p-1 pr-2 pl-2 mt-1" style="background-color: #112D5F;">
                <p>
                  <span style="float: left; color: #5CB2FF; text-transform: uppercase;">species</span>
                  <span style="float: right;">species</span>
                </p>
              </div>
              <div class="card border-0 p-1 pr-2 pl-2 mt-1" style="background-color: #112D5F;">
                <p>
                  <span style="float: left; color: #5CB2FF; text-transform: uppercase;">theme song</span>
                  <span style="float: right;"><a href="#" style="color: #A7D2F8; text-decoration: underline;">songname, artist</a></span>
                </p>
              </div>
              <div class="card border-0 p-1 pr-2 pl-2 mt-1" style="background-color: #112D5F;">
                <p>
                  <span style="float: left; color: #5CB2FF; text-transform: uppercase;">story</span>
                  <span style="float: right;">story name</span>
                </p>
              </div>

              <!-- code credit -->
              <p class="text-center" style="color: #5CB2FF;">code by <a href="https://toyhou.se/snail-legs" style="color: #5CB2FF; text-decoration: underline;">snail-legs</a></p>
            </div>
          </div>

          <!-- main text/bio -->
          <div class="col-md-7 p-1">
            <div class="card border-0 bg-default p-1 pr-2 pl-2" style="max-height: 400px; overflow: auto; background-color: #112D5F;">

              <h4 style="text-shadow: 0px 0px 2px #2D72FF; color: #5CB2FF;"><i class="fas fa-tombstone fa-sm"></i> summary</h4>
              <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>

              <h4 style="text-shadow: 0px 0px 2px #2D72FF; color: #5CB2FF;"><i class="fas fa-tombstone fa-sm"></i> background</h4>
              <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>

              <h4 style="text-shadow: 0px 0px 2px #2D72FF; color: #5CB2FF;"><i class="fas fa-tombstone fa-sm"></i> personality</h4>
              <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>

  <!-- pagedoll - you'll probably have to fiddle with the 'bottom' and 'right' style attributes to get the placement just right, especially if you don't want it to block too much text,, shouldn't be visible on mobile -->
  <img src="https://cdn.discordapp.com/attachments/730913454726316074/899045199773335622/vent_ghost_boy.png" style="width: 170px; position: absolute; bottom: -75px; right: -20px; transform: rotate(10DEG); color: #FFFFFF;" class="d-none d-sm-block">
</div>