layout: heliotrope

<div class="container" style="max-width: 800px;">
  <!-- header -->
  <!-- if you change the custom colour of the bg, please remember to change the text colour too! use class="text-light" on the <h1> and <h4> elements if you're going for a darker bg colour! -->
  <div class="row no-gutters" style="margin-bottom: 5px;">
    <div style="padding: 0 10px 10px; width: 100%; background: rgba(195, 156, 199, 0.9);">
      <h1 class="display-2 text-dark" style="font-weight: bold; display: inline;">Character Name</h1>
      <h4 class="text-dark" style="font-style: italic; display: inline;">info | info | info</h4>
    </div>
  </div>

  <!-- artwork and bio -->
  <div class="row no-gutters h-100" style="margin-bottom: 10px;">

    <!-- image, this will show up above the bio text rather than next to it on mobile, so I reccomend not making it super tall!!  fullbody/halfbody art will probably look nicest :-) -->
    <div class="col-md-7">
      <img src="https://cdn.discordapp.com/attachments/730909751122329612/839977735732068352/placeholder_image.png">
    </div>

    <!-- bio, this will expand as you add more text so works best for smaller-medium bios! -->
    <div class="col-md-5 my-auto">
      <h1 class="display-4">biography</h1>
      <p>Vosaltres lo bon servir que fet m'haveu E féu-se traure. Havia portades moltes batalles a. La santa dona Judic ab ànimo viril gosà matar Holofernes. Gloriós Sant Lluc en lo seu Evangeli Mereixedor és doncs. Pel mig restant cascuna part anell sancer e ab. Aprés féu donació a la Comtessa de tot lo comdat. Cinquena és què signifiquen les armes. </p>
      <p>E cavalleries se fa singular e expressa menció. Servidors la sua partida En la fèrtil. Ab les armes sues e de la Comtessa lo qual. Actes dels sants pares del noble Josuè e dels.</p>

      <hr style="width: 75%; margin-bottom: 0.25em;">

      <!-- playlist -->
      <h1 class="display-4">playlist</h1>
      <ul class="fa-ul">
        <!-- replace the "#" with a link to the song! -->
        <li style="margin: 0.25em;"><span class="fa-li" style="color: #A979AE;"><i class="fas fa-play"></i></span>
          <a href="#"  style="color: #A979AE;">song name</a> | artist
        </li>
        <li style="margin: 0.25em;"><span class="fa-li" style="color: #A979AE;"><i class="fas fa-play"></i></span>
          <a href="#"  style="color: #A979AE;">song name</a> | artist
        </li>
        <li style="margin: 0.25em;"><span class="fa-li" style="color: #A979AE;"><i class="fas fa-play"></i></span>
          <a href="#"  style="color: #A979AE;">song name</a> | artist
        </li>
      </ul>
    </div>
  </div>

  <!-- footer + code credit - also a good place to put your image credit!! -->
  <!-- if you're changing the custom colour, remember to change the text colours too!  so if you're going for a darker bg use class="text-light" on the <p> and style="color: white;" on the <a> for example-->
  <div class="row no-gutters" style="margin-bottom: 5px;">
    <div style="padding: 0 10px 10px; width: 100%; background: rgba(195, 156, 199, 0.9);">
      <p class="text-dark text-center" style="font-style: italic;">code by <a style="color: black;" href="https://toyhou.se/snail-legs">snail-legs</a></p>
    </div>
  </div>
</div>