layout: side by side

<div class="container" style="max-width: 60em; margin: auto;">
  <div class="row no-gutters">

    <!-- image/s -->
    <div class="col-sm-5">

      <!-- there are technically two images here,
        which image is shown depends on the device that the viewer is using
        you can use different images here, or the same one! -->
      <!-- this image should be visible on tablets/desktops -->
      <div style="background: url(https://media.discordapp.net/attachments/730913454726316074/737635200447676436/dragon.png); background-size: cover; background-position; center; height: 30em;" class="d-none d-sm-block"></div>

      <!-- this image should be visible on mobile -->
      <div style="background: url(https://media.discordapp.net/attachments/730913454726316074/739132619807260734/redraw_dragon_crop.png); background-size: cover; background-position; center; height: 15em;" class="d-sm-none"></div>

    </div>

    <!-- written content -->
    <div class="col-sm-7 card bg-faded" style="height: 30em; overflow-y: scroll; border: 0; border-radius: 0;">

      <!-- header -->
      <div class="card-header" style="line-height: 0.2em;padding-bottom: 2em;">
        <h1 class="display-4 text-primary">Character Name</h1>
        <p class="text-secondary">pronouns | title/quote</p>
      </div>

      <!-- bio, quote, playlist, trivia and design notes!  you can add/remove sections here as you need them, I just wanted to include one of each type for you! -->
      <div style="padding: 1em 2em;">

        <!-- bio -->
        <h3 class="text-primary">Biography</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

        <!-- quote -->
        <hr style="width: 90%; padding: 0.1em;">
        <h4 class="text-primary" style="text-align: center;"><i>"put a quote, or song lyrics here!"</i></h4>
        <hr style="width: 90%; padding: 0.1em;">

        <!-- playlist -->
        <h3 class="text-primary">Playlist</h3>
        <ul class="fa-ul">
            <li style="margin: 0.25em;"><span class="fa-li text-primary"><i class="fas fa-play"></i></span><a href="#">song name</a> | artist</li>
            <li style="margin: 0.25em;"><span class="fa-li text-primary"><i class="fas fa-play"></i></span><a href="#">song name</a> | artist</li>
            <li style="margin: 0.25em;"><span class="fa-li text-primary"><i class="fas fa-play"></i></span><a href="#">song name</a> | artist</li>
        </ul>
        <hr style="width: 90%; padding: 0.1em;">

        <!-- trivia and design notes -->
        <div class="row">

          <!-- trivia -->
          <div class="col-sm-6">
            <h3 class="text-primary">Trivia</h3>
            <ul class="fa-ul">
              <li><span class="fa-li text-primary"><i class="fad fa-stars"></i></span>lorem ipsum</li>
              <li><span class="fa-li text-primary"><i class="fad fa-stars"></i></span>lorem ipsum</li>
              <li><span class="fa-li text-primary"><i class="fad fa-stars"></i></span>lorem ipsum</li>
            </ul>
          </div>

          <!-- design notes -->
          <div class="col-sm-6">
            <h3 class="text-primary">Design Notes</h3>
            <ul class="fa-ul">
              <li><span class="fa-li text-primary"><i class="fad fa-stars"></i></span>lorem ipsum</li>
              <li><span class="fa-li text-primary"><i class="fad fa-stars"></i></span>lorem ipsum</li>
              <li><span class="fa-li text-primary"><i class="fad fa-stars"></i></span>lorem ipsum</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- footer/code credit, please keep the credit intact!!  this is probably a good place to add image credit as well, if you need to. -->
      <p class="text-secondary card-footer" style="text-align: center; padding-bottom: 1em;">code by [<a href="https://toyhou.se/snail-legs">snail-legs</a>]</p>
    </div>
  </div>
</div>