Toyhouse template

<div class="container">
 <div class="row">
  <div class="col-12 panel card-block bg-primary card-outline-primary rounded-0 card-header" style="height:125px;">
   <p class="display-3 text-white text-center font-weight-bold" style="margin-top:25px;letter-spacing:5px">Title</p>
 </div>
 <div class="card card-outline-primary card-block bg-faded rounded-0 mb-4" style="border-width:5px">
  <div class="row justify-content-center">
   <div class="col-md-3 text-center">

    <!-- Link the profile's picture in the src="" part-->
    <img src="https://en.wikifur.com/w/images/4/41/Toyhouse.png" style="margin-top:-50px;" class="img-thumbnail bg-faded border-0 rounded-circle mb-2">

  </div>
  <div class="col-md-4">
   <ul class="list-unstyled text-primary font-weight-bold">
     <li class="mb-3">
       <span class="mb-0">
        Name
      </span>
      <span class="pull-right mb-0">
        Character name
      </span>
      <hr class="mt-1" style="border:1px dashed;">
    </li>
    <li class="mb-3">
     <span class="mb-0">
      Age
    </span>
    <span class="pull-right mb-0">
      Character age
    </span>
    <hr class="mt-1" style="border:1px dashed;">
  </li>
  <li>
   <span class="mb-0">
    Gender
  </span>
  <span class="pull-right mb-0">
    Character gender
  </span>
  <hr class="mt-1" style="border:1px dashed;">
</li>
<li class="mb-3">
 <span class="mb-0">
  Species
</span>
<span class="pull-right mb-0">
  Character species
</span>
<hr class="mt-1" style="border:1px dashed;">
</li>
</ul>
</div>
</div>
</div>
<a data-toggle="collapse" href="#collapse1" class="col-12 btn btn-block btn-lg btn-success d-inline text-left text-center display-1 rounded-0 text-white p-3" style="letter-spacing:7px">
 <i class="fal fa-chevron-circle-down"></i> About
</a>
<div id="collapse1" class="w-100 panel-collpase collapse">
 <div class="card card-block bg-faded card-outline-success rounded-0" style="border-width:5px">
  <div class="row justify-content-between">
   <div class="col-md-5">
    <ul class="list-unstyled font-weight-bold mb-4">
     <li class="mb-3">

      <!-- Sliders for personality traits, edit names if needed and progression in the next comment -->
      <span class="text-warning mb-2">
       Introvert
     </span>
     <span class="pull-right text-danger">
       Extrovert
     </span>
     <!-- Percentage of the first trait against the other is in the style="width:X%;" part, corresponds to the orange part of the progress bar  -->
     <div class="progress bg-danger rounded-0"><div class="progress-bar bg-warning rounded-0" style="width:50%;"></div></div>

   </li>
   <li class="mb-3">
    <!-- Sliders for personality traits, edit names if needed and progression in the next comment -->
    <span class="text-warning mb-2">
     Intuitive
   </span>
   <span class="pull-right text-danger">
     Observant
   </span>
   <!-- Percentage of the first trait against the other is in the style="width:X%;" part, corresponds to the orange part of the progress bar  -->
   <div class="progress bg-danger rounded-0"><div class="progress-bar bg-warning rounded-0" style="width:50%;"></div></div>

 </li>
 <li class="mb-3">
  <!-- Sliders for personality traits, edit names if needed and progression in the next comment -->
  <span class="text-warning mb-2">
   Thinking
 </span>
 <span class="pull-right text-danger">
   Feeling
 </span>
 <div class="progress bg-danger rounded-0"><div class="progress-bar bg-warning rounded-0" style="width:50%;"></div></div>
</li>
<li class="mb-3">
  <!-- Sliders for personality traits, edit names if needed and progression in the next comment -->
  <span class="text-warning mb-2">
   Judging
 </span>
 <span class="pull-right text-danger">
   Prospecting
 </span>
 <!-- Percentage of the first trait against the other is in the style="width:X%;" part, corresponds to the orange part of the progress bar  -->
 <div class="progress bg-danger rounded-0"><div class="progress-bar bg-warning rounded-0" style="width:50%;"></div></div>
</li>
</ul>

<div class="card card-block card-success text-white display-4 rounded-0 mb-4">
 <em style="text-align: justify;">"Character's favorite quote"</em>
</div>
</div>
<div class="col-md-7 mb-4">
 <p class="display-4 text-success text-right font-weight-bold mb-2" style="letter-spacing:5px">Personality <i class="fa fa-cog"></i></p>
 <div class="bg-success mb-2" style="height:2px; width:100%;"></div>
 <p class="mb-2" style="text-align: justify;">Write a little text about your character and how they are.</p>
 <p class="display-4 text-success font-weight-bold mb-2" style="letter-spacing:5px"><i class="fa fa-user"></i> Appearance</p>
 <div class="bg-success mb-2" style="height:2px; width:100%;"></div>
 <div class="row justify-content-between mb-4">
   <div class="col-md-6 mt-4">
     <p class="mb-2" style="text-align: justify;">
      <!-- Link to character image or remove for text -->
      <img src="https://en.wikifur.com/w/images/4/41/Toyhouse.png" width="355" height="390">
    </p>
  </div>
  <div class="col-md-6 mt-4">
    <ul style="list-style: square;">
      <!-- Bullet points list of physical traits, make sure to add <li> </li> around your text when adding more -->
      <li>
        Point 1
      </li>
      <li>
        Point 2
      </li>
      <li>
        Point 3
      </li>
      <li>
        Point 4
      </li>
    </ul>

  </div>
</div>
</div>
</div>
<a data-toggle="collapse" href="#collapse2" class="col-12 btn btn-block btn-lg btn-warning d-inline text-left text-center display-1 rounded-0 text-white p-3" style="letter-spacing:7px">
 <i class="fal fa-chevron-circle-down"></i> Details
</a>
<div id="collapse2" class="w-100 panel-collpase collapse">
 <div class="card card-block card-outline-warning text-warning rounded-0" style="border-width:3px">
   <div class="row justify-content-between">
    <div class="col-md-5">
     <ul class="list-unstyled font-weight-bold">
      <li class="mb-3">
       <span class="mb-0">
        Ethnicity
      </span>
      <span class="pull-right mb-0">
        Character ethnicity
      </span>
      <hr class="mt-1" style="border:1px dashed;">
    </li>
    <li class="mb-3">
     <span class="mb-0">
      Residence
    </span>
    <span class="pull-right mb-0">
      Character's residence
    </span>
    <hr class="mt-1" style="border:1px dashed;">
  </li>
  <li class="mb-3">
   <span class="mb-0">
    Job
  </span>
  <span class="pull-right mb-0">
    Character's job
  </span>
  <hr class="mt-1" style="border:1px dashed;">
</li>
<li class="mb-3">
 <span class="mb-0">
  Sexuality
</span>
<span class="pull-right mb-0">
  Character's sexuality
</span>
<hr class="mt-1" style="border:1px dashed;">
</li>
</ul>
</div>
<div class="col-md-7">
 <ul class="list-unstyled" style="text-align: justify;">
  <!-- Bullet list of traits of your character, make sure to add <li class="mb-2"> </li> if adding new points -->
  <li class="mb-2">
   ● Fact 1
 </li>
 <li class="mb-2">
   ● Fact 2
 </li>
 <li class="mb-2">
   ● Fact 3
 </li>
 <li class="mb-2">
   ● Fact 4
 </li>
 <li class="mb-2">
   ● Fact 5
 </li>
</ul>
</div>
</div>
</div>
</div>
<div class="row justify-content-between mb-4">
 <div class="col-md-6 mt-4">
  <div class="card card-danger card-block text-left text-center font-weight-bold display-4 rounded-0 text-white" style="letter-spacing:5px">
   Likes
 </div>
 <div class="card card-block card-outline-danger text-danger font-weight-bold rounded-0" style="border-width:3px">
   <ul class="list-unstyled">

    <!-- Bullet list of likes, make sure to add  <li class="mb-1"><i class="fa fa-check"></i> and </li> around your text (the </i> goes before your text, it's the check symbol image)-->
    <li class="mb-1">
     <i class="fa fa-check"></i>
     Likes 1
   </li>
   <li class="mb-1">
     <i class="fa fa-check"></i>
     Likes 2
   </li>
   <li class="mb-1">
     <i class="fa fa-check"></i>
     Likes 3
   </li>
   <li class="mb-1">
     <i class="fa fa-check"></i>
     Likes 3
   </li>
   <li class="mb-1">
     <i class="fa fa-check"></i>
     Likes 3
   </li>
   <li class="mb-1">
     <i class="fa fa-check"></i>
     Likes 3
   </li>
 </ul>
</div>
</div>
<div class="col-md-6 mt-4">
  <div class="card card-danger card-block text-left text-center font-weight-bold display-4 rounded-0 text-white" style="letter-spacing:5px">
   Dislikes
 </div>
 <div class="card card-block card-outline-danger text-danger font-weight-bold rounded-0" style="border-width:3px">
   <ul class="list-unstyled">
    <!-- Bullet list of dislikes, make sure to add  <li class="mb-1"><i class="fa fa-times"></i> and </li> around your text (the </i> goes before your text, it's the cross symbol image)-->
    <li class="mb-1">
     <i class="fa fa-times"></i>
     Dislikes 1
   </li>
   <li class="mb-1">
     <i class="fa fa-times"></i>
     Dislikes 2
   </li>
   <li class="mb-1">
     <i class="fa fa-times"></i>
     Dislikes 3
   </li>
   <li class="mb-1">
     <i class="fa fa-times"></i>
     Dislikes 4
   </li>
 </ul>
</div>
</div>
</div>


<a data-toggle="collapse" href="#collapse3" class="col-12 btn btn-block btn-lg btn-warning d-inline text-left text-center display-1 rounded-0 text-white p-3" style="letter-spacing:7px">
 <i class="fal fa-chevron-circle-down"></i> Playlist
</a>
<div id="collapse3" class="w-100 panel-collpase collapse">
  <div class="card card-block card-outline-warning text-warning rounded-0" style="border-width:3px">
   <div class="row justify-content-between">
    <div class="col-md-7">
     <ul class="list-unstyled" style="text-align: justify;">

      <!-- Bullet list of musics, text will be clickable and head to the link you'll input, goes by this format for each music :
      <li class="mb-2">
       <a href="LINK TO THE MUSIC"><i class="fa fa-music"></i>
       TITLE OF THE MUSIC</a>
     </li>
   -->
   <li class="mb-2">
     <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"><i class="fa fa-music"></i>
     TITLE OF THE MUSIC</a>
   </li>


 </ul>
</div>
</div>
</div>
</div>
<div class="row justify-content-between mb-4"></div>

<p class="display-4 text-success text-right font-weight-bold mb-2" style="letter-spacing:5px">Backstory <i class="fa fa-cog"></i></p>
<div class="bg-success mb-2" style="height:2px; width:100%;"></div>
<!-- Backstory part, for each paragraph you want separations around, put your text between <p class="mb-2" style="text-align: justify;"> and </p> -->
<p class="mb-2" style="text-align: justify;">Backstory part 1</p>
<p class="mb-2" style="text-align: justify;">Backstory part 2</p>

<p class="display-4 text-success font-weight-bold mb-2" style="letter-spacing:5px"><i class="fa fa-user"></i> Relations </p>
<div class="bg-success mb-2" style="height:2px; width:100%;"></div>
<div class="row justify-content-between">
  <!-- Relations to other character, to add more characters, change class class="col-md-4" to class="col-md-6" or class="col-md-2" and add the "<div class="col-md-6"><p style="text-align: justify;"><a href="link" class="text-success font-weight-bold">Name </a>TEXT</p></div>" accordingly(careful about the space after the name, it's important).
  col-md-6 should make 2 blocks to write in, col-md-2 should make 4.
  You can add `href="LINK TO WEB PAGE"` in the <a> part to make the name a clickable link.
-->
<div class="col-md-4"><p style="text-align: justify;"><a class="text-success font-weight-bold">Acquitance 1 </a>Text about the acquitance</p></div>
<div class="col-md-4"><p style="text-align: justify;"><a class="text-success font-weight-bold">Acquitance 2 </a>Text about the acquitance</p></div>
<div class="col-md-4"><p style="text-align: justify;"><a class="text-success font-weight-bold">Acquitance 3 </a>Text about the acquitance</p></div>

</div>
</div>
</div>
</div>
<p class="text-right">profile html by @hukiolukio tweaked by @FasoGris</p>
<p class="text-right">Download code on <a href="https://pastebin.com/3VK99Nue">Pastebin</a></p>
</div>