5cb2ff
<!-- 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>
5cb2ff How to use it? 5cb2ff
            character name
        </b></h1>
        
        <!-- pronouns -->
        <p class="ml-2" style="text-transform: uppercase; display: inline;">
            pro/nouns
        </p>
      </div>
      
      <!-- bio content -->
5cb2ff How to dowload it? 5cb2ff
      <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;">
5cb2ff How to use it? 5cb2ff
                <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>
5cb2ff How to dowload it? 5cb2ff
              </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>
5cb2ff How to get it for free? 5cb2ff
                  <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>
              
5cb2ff How to use it? 5cb2ff
              <!-- 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>
5cb2ff How to get it for free? 5cb2ff
              <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>
5cb2ff How to dowload it? 5cb2ff
      </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>
5cb2ff