layout: candy cane

<div class="container" style="max-width: 800px;">
  <div class="card bg-danger progress-bar-striped progress-bar-animated" style="padding: 0; border: 0; border-radius: 2em 3em 3em 2em; padding-left: 4em;">
    <div class="card bg-faded" style="border: 0; border-radius: 0 2em 2em 0;">

      <!-- header section -->
      <div class="row no-gutters card-header" style="padding-top: 1.4em; border-radius: 0 2em 0 0;">
        <h1 class="text-danger col-7" style="font-family: georgia; font-weight: bold; font-size: 2em;"><i class="fad fa-candy-cane"></i> Candy Cane</h1> <!-- character name -->
        <p class="col-5 text-secondary" style="float: right; text-align: right; font-style: italic;">pronouns | story | other quick info</p> <!-- info -->
      </div>

      <!-- main profile content! -->
      <!-- I've included a variety of different segments here!!  You should be able to move, delete, duplicate and modify them as you see fit fairly easily!  I just wanted to provide lots of options ^^ -->
      <div class="row no-gutters card-block" style="max-height: 600px; overflow-y: auto; margin-bottom: 1em;">
        <img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0" class="col-md-4 d-none d-sm-block"> <!-- bio image, not visible to mobile users! -->

        <!-- biography block! -->
        <div class="col-md-7" style="margin-left: 1.5em;">
          <h3 class="text-danger" style="font-family: georgia; font-weight: bold;">Biography</h3> <!-- segment title -->
           <!-- segment content -->
           <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. <br><br>
            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>
        <hr style="width: 90%;">

        <!-- stats block -->
        <!-- for info on how to edit these, have a look at https://getbootstrap.com/docs/5.0/components/progress/ !! -->
        <div class="col-9" style="margin-left: 1.5em;">
          <h3 class="text-danger" style="font-family: georgia; font-weight: bold;">Stats</h3> <!-- segment title -->
        </div>
        <!-- intelligence -->
        <div class="col-6" style="padding: 0.5em;">
          <span class="progress">
            <span class="progress-bar bg-danger progress-bar-striped" role="progressbar" style="width: 80%;" aria-valuenow="8" aria-valuemin="0" aria-valuemax="10"><b>INTELLIGENCE</b></span>
          </span>
        </div>
        <!-- wisdom -->
        <div class="col-6" style="padding: 0.5em;">
          <span class="progress">
            <span class="progress-bar bg-danger progress-bar-striped" role="progressbar" style="width: 80%;" aria-valuenow="8" aria-valuemin="0" aria-valuemax="10"><b>WISDOM</b></span>
          </span>
        </div>
        <!-- strength -->
        <div class="col-6" style="padding: 0.5em;">
          <span class="progress">
            <span class="progress-bar bg-danger progress-bar-striped" role="progressbar" style="width: 80%;" aria-valuenow="8" aria-valuemin="0" aria-valuemax="10"><b>STRENGTH</b></span>
          </span>
        </div>
        <!-- dexterity -->
        <div class="col-6" style="padding: 0.5em;">
          <span class="progress">
            <span class="progress-bar bg-danger progress-bar-striped" role="progressbar" style="width: 80%;" aria-valuenow="8" aria-valuemin="0" aria-valuemax="10"><b>DEXTERITY</b></span>
          </span>
        </div>
        <hr style="width: 90%;">

        <!-- quote -->
        <h4 class="text-danger" style="font-family: georgia; margin: auto;"><i>"put a quote, or song lyrics here!"</i></h4>
        <hr style="width: 90%;">

        <!-- history/ additional text only segment! -->
        <div style="margin-left: 1.5em;">
          <h3 class="text-danger" style="font-family: georgia; font-weight: bold;">History</h3> <!-- segment title -->
          <!-- segment content -->
          <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. <br><br>
            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>
        <hr style="width: 90%;">

        <!-- colour pallet- edit the background-color attribute to change the colours! -->
        <div style="margin: auto; padding: 5px;">
          <div style="background-color: #b869a1; height: 30px; width: 30px; border-radius: 50%; display: inline-block;"></div>
          <div style="background-color: #d17d74; height: 30px; width: 30px; border-radius: 50%; display: inline-block;"></div>
          <div style="background-color: #b869a1; height: 30px; width: 30px; border-radius: 50%; display: inline-block;"></div>
          <div style="background-color: #d17d74; height: 30px; width: 30px; border-radius: 50%; display: inline-block;"></div>
          <div style="background-color: #b869a1; height: 30px; width: 30px; border-radius: 50%; display: inline-block;"></div>
          <div style="background-color: #d17d74; height: 30px; width: 30px; border-radius: 50%; display: inline-block;"></div>
          <div style="background-color: #b869a1; height: 30px; width: 30px; border-radius: 50%; display: inline-block;"></div>
        </div>
        <hr style="width: 90%;">

        <!-- playlist segment -->
        <div style="margin-left: 1.5em;">
          <h3 class="text-danger" style="font-family: georgia; font-weight: bold;">Playlist</h3> <!-- segment title -->
          <ul class="fa-ul">
            <li style="margin: 0.25em;"><span class="fa-li text-danger"><i class="fas fa-play"></i></span><a href="#" class="text-danger">song name here</a> | artist name here</li>
            <li style="margin: 0.25em;"><span class="fa-li text-danger"><i class="fas fa-play"></i></span><a href="#" class="text-danger">song name here</a> | artist name here</li>
            <li style="margin: 0.25em;"><span class="fa-li text-danger"><i class="fas fa-play"></i></span><a href="#" class="text-danger">song name here</a> | artist name here</li>
          </ul>
        </div>
        <hr style="width: 90%;">

        <!-- design notes -->
        <div style="margin-left: 1.5em;">
          <h3 class="text-danger" style="font-family: georgia; font-weight: bold;">Design Notes</h3> <!-- segment title -->
        </div>
        <div class="row text-center" style="margin-left: 1.5em;">
          <div class="btn btn-danger" style="margin: 0.25em;">design notes</div>
          <div class="btn btn-danger" style="margin: 0.25em;">you can put anything here!</div>
          <div class="btn btn-danger" style="margin: 0.25em;">I would reccomend</div>
          <div class="btn btn-danger" style="margin: 0.25em;">something short</div>
          <div class="btn btn-danger" style="margin: 0.25em;">and sweet</div>
          <div class="btn btn-danger" style="margin: 0.25em;">but!</div>
          <div class="btn btn-danger" style="margin: 0.25em;">it's up to you!!</div>
        </div>
        <hr style="width: 90%;">

        <!-- relationships segment -->
        <h3 class="text-danger col-10" style="font-family: georgia; font-weight: bold; margin-left: 1.5em;">Relationships</h3> <!-- segment title -->
        <!-- character relationship 1 -->
        <div class="col-3" style="margin: auto; padding: 0.5em;">
          <a href="#" class="text-danger"> <!-- link to the other character's bio here -->
            <img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0"> <!-- other character pfp -->
            <h5 class="text-center">Character name</h5> <!-- other character name -->
          </a>
        </div>

        <!-- character relationship 2 -->
        <div class="col-3" style="margin: auto; padding: 0.5em;">
          <a href="#" class="text-danger"> <!-- link to the other character's bio here -->
            <img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0"> <!-- other character pfp -->
            <h5 class="text-center">Character name</h5> <!-- other character name -->
          </a>
        </div>

        <!-- character relationship 3 -->
        <div class="col-3" style="margin: auto; padding: 0.5em;">
          <a href="#" class="text-danger"> <!-- link to the other character's bio here -->
            <img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0"> <!-- other character pfp -->
            <h5 class="text-center">Character name</h5> <!-- other character name -->
          </a>
        </div>

        <!-- character relationship 4 -->
        <div class="col-3" style="margin: auto; padding: 0.5em;">
          <a href="#" class="text-danger"> <!-- link to the other character's bio here -->
            <img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0"> <!-- other character pfp -->
            <h5 class="text-center">Character name</h5> <!-- other character name -->
          </a>
        </div>
      </div>

      <!-- footer! I've put the code credit here, but you're welcome to move it as long as it remains intact.  This would also make a good place to add like,, any additional credits you might need to! -->
      <div class="row no-gutters card-footer" style="border-radius: 0 0 2em 0;">
        <p class="text-secondary" style="margin: auto; font-style: italic;">code by [<a class="text-danger" href="https://toyhou.se/snail-legs">snail-legs</a>]</p>
      </div>
    </div>
  </div>
</div>