layout: midnight oil

<div class="card" style="width: 80%; margin: auto; border-width: 5px;">

  <!-- card header/basic info section -->
  <div class="card-header card-inverse" style="background-image: linear-gradient(to right, #8FBC8F, #00CED1); text-align: center; border-width: 0px 0px 2px 0px;">
    <h1><i class="far fa-star"></i> character name (nickname)</h1>
    <h4>pronouns | job | story</h4>
  </div>

  <!-- biography section -->
  <div class="card-block">
    <h3 class="card-title" style="text-align: center;">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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

  <!-- design notes section -->
  <div class="card-block" style="margin: auto;">
    <h3 class="card-title" style="text-align: center;">Design Notes</h3>
    <div class="card-block container-fluid">
      <div class="row">

        <!-- you can put anything in these but I'd reccomend trying to keep it short and sweet -->
        <div class="btn btn-default" style="text-align: center; margin: 5px;">
          wears friendship bracelets
        </div>

        <div class="btn btn-default" style="text-align: center; margin: 5px;">
          many freckles
        </div>

        <div class="btn btn-default" style="text-align: center; margin: 5px;">
          always smiling
        </div>

        <div class="btn btn-default" style="text-align: center; margin: 5px;">
          can be drawn covered in paint!
        </div>

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

  <!-- trivia section -->
  <div class="card-block">
  <h3 class="card-title" style="text-align: center;">Trivia</h3>
    <ul class="list-group list-group-flush">
      <li class="list-group-item">appears as a character in this comic!</li>
      <li class="list-group-item">hates spaghetti</li>
      <li class="list-group-item">secretly really good at making popcorn</li>
    </ul>
  </div>

  <!-- relationships section -->
  <div class="card-block">
    <h3 class="card-title" style="text-align: center;">Relationships</h3>

    <div class="card-group" style="text-align: center;">

      <div class="card card-block">
        <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/6488161?1586041871" width=100px height=100px class="rounded-circle" style="margin: auto;">
        <a href="#"><h3 style="margin-top: 10px;">character name</h3></a>
        <p>character name's childhood best friend!</p>
      </div>

      <div class="card card-block">
        <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/6488161?1586041871" width=100px height=100px class="rounded-circle" style="margin: auto;">
        <a href="#"><h3 style="margin-top: 10px;">character name</h3></a>
        <p>character name's childhood best friend!</p>
      </div>

      <div class="card card-block">
        <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/6488161?1586041871" width=100px height=100px class="rounded-circle" style="margin: auto;">
        <a href="#"><h3 style="margin-top: 10px;">character name</h3></a>
        <p>character name's childhood best friend!</p>
      </div>

      <div class="card card-block">
        <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/6488161?1586041871" width=100px height=100px class="rounded-circle" style="margin: auto;">
        <a href="#"><h3 style="margin-top: 10px;">character name</h3></a>
        <p>character name's childhood best friend!</p>
      </div>
    </div>
  </div>
</div>

<!-- this is the code credit! feel free to move it, but please keep it in here somewhere -->
<div style="width: 80%; margin: auto;">code by [<a href="https://toyhou.se/snail-legs">snail-legs</a>]</div>