o6. ghost stats

<div class="row justify-content-center">

<div class="ui-accordion card" style="height:400px; width:900px; align-items: center;">

    <div class="ui-accordion-content card-block">
        <div class="row">
        <div class="col-4">
            <p align="center">
                <img class="mx-auto d-block rounded-circle" src="https://i.imgur.com/heTV7HW.png" style="height: 200px;">
        <p class="m-0 display-4 text-lowercase" style="font-size: 1.1em;" align="center"><strong>FULL NAME</strong> <br>
        birth date - death date</p>
                <p align="center">
 <a href="#appearance" data-toggle="collapse"><i class="fas fa-square"data-toggle="tooltip" title="appearence"></i></a>  <a href="#personality" data-toggle="collapse"><i class="fas fa-square" data-toggle="tooltip" title="personality"></i></a>  <a href="#background" data-toggle="collapse"><i class="fas fa-square" data-toggle="tooltip" title="background"></i></a>  <a href="#relationships" data-toggle="collapse"><i class="fas fa-square" data-toggle="tooltip" title="relationships"></i></a> <a href="#trivia" data-toggle="collapse"><i class="fas fa-square" data-toggle="tooltip" title="trivia"></i></a>  </p>
 <p align="center"><a href="https://toyhou.se/starpowder" class="btn mt-1 mb-1" style="background-color:#999;border:1px dashed #333;color:white;" target="_blank">credit</a></p>
        </div>
        <div class="col-8">

          <p class="m-0 display-4" style="text-align:center; margin:0px; font-size:1.2em; font-weight:500;">
            “Another woman! Is this your freedom from me?”
          </p>
          <p class="px-4" style="text-align:right; font-size:.9em;">—
            Full Name
          </p>

<div class="container-fluid"><div class="row"><div class="col-2"><strong>Name</strong></div><div class="col-4">a name</div>
<div class="col-2"><strong>C.O.D</strong></div><div class="col-4">cause of death</div></div></div>
<div class="container-fluid"><div class="row"><div class="col-2"><strong>Gender</strong></div><div class="col-4">gender (pronouns)</div>
<div class="col-2"><strong>Type</strong></div><div class="col-4">what type of ghost?</div></div></div>
<div class="container-fluid"><div class="row"><div class="col-2"><strong>Age</strong></div><div class="col-4">age at death</div>
<div class="col-2"><strong>Injuries</strong></div><div class="col-4">what injuries?</div></div></div>
<div class="container-fluid"><div class="row mb-4"><div class="col-2"><strong>Height</strong></div><div class="col-4">height in life</div>
<div class="col-2"><strong>Haunts</strong></div><div class="col-4">where do they mainly haunt?</div></div></div>
            <p></p> <p></p>
           You can put a neat introduction here. It's preferable if you include something, though, about them. A warning. A rumor. Whispers of horror. A story. As long as it takes up this space, go hog wild. Just keep in mind it does scroll along with whatever you include in the tabs on the side. Oh, if you click multiple boxes open, they'll in the order of the squares.
           <p></p><p></p>
           <hr class="my-1" style="border-color:#918d8d; width: 75%;">

            <div id="appearance" class="collapse">
                 <p></p>
                <div><p class="m-0 display-4 text-lowercase" style="font-size:large; letter-spacing:2px;" align="center"><strong>appearance</strong></div>
                 <p></p>
      what the heckie does your character look like? you can include ethnicity, race, and even their favorite fashions of clothing if you <i>really</i> want to.
       <p></p><p></p>
           <hr class="my-1" style="border-color:#918d8d; width: 75%;">
      </div>


      <div id="personality" class="collapse">
           <p></p>
          <div><p class="m-0 display-4 text-lowercase" style="font-size:large; letter-spacing:2px;" align="center"><strong>personality</strong></div> <p></p>
  this is for the personality

   <p></p><p></p>
           <hr class="my-1" style="border-color:#918d8d; width: 75%;">
</div>

<div id="background" class="collapse">
     <p></p>

    <div><p class="m-0 display-4 text-lowercase" style="font-size:large; letter-spacing:2px;" align="center"><strong>background</strong></div>
    <p></p>
  the background story for the character before the story. what was life like before the events of the story? you can talk about their childhood here if it's applicable. what about any notable events, accidents, moments? you don't have to be so detailed - they're your character and you can go all out if you want.
  <p>  </p><p></p>
  personally, i like doing the before story and after story in case it wasn't clear enough in the story. once again, include any notable events, accidents, moments, death, children in the future, accomplishments, etc? there's so much to consider. but if you don't want to do that, that's totally fine too. include what you want in your character's background.

   <p></p><p></p>
           <hr class="my-1" style="border-color:#918d8d; width: 75%;">
</div>
<div id="relationships" class="collapse">
    <p></p>
    <div><p class="m-0 display-4 text-lowercase" style="font-size:large; letter-spacing:2px;" align="center"><strong>relationships</strong></div><p></p>
  talk about the character's relationships. you can add as many relationships you want, no one will care. just please make sure that the image is <b>100x100</b>. using this kpop star (she's <b>nana from orange caramel</b>) as an image placement.<p></p>
  <img src="https://i.imgur.com/UQ5o9.png" align="right"> <b>character's name</b> - their relationship started out as children but over time, it whittled down because they became busy with their own shit. oh, make sure their image is 100x100 in order to make sure this looks as it does. i guess more text is needed but that's how it be. you can set it up however you want but please make sure the image is <b>100x100</b>
  <p></p><p></p>
    <img src="https://i.imgur.com/UQ5o9.png" align="left"> <b>character's name</b> - their relationship started out as teenagers but over time, it whittled down because they became busy with their own shit. oh, make sure their image is 100x100 in order to make sure this looks as it does. i guess more text is needed but that's how it be. you can set it up however you want but please make sure the image is <b>100x100</b>
     <p></p><p></p>
       <img src="https://i.imgur.com/UQ5o9.png" align="right"> <b>character's name</b> - their relationship started out as young adults but over time, it whittled down because they became busy with their own shit. oh, make sure their image is 100x100 in order to make sure this looks as it does. i guess more text is needed but that's how it be. you can set it up however you want but please make sure the image is <b>100x100</b>
         <p></p><p></p>
    <img src="https://i.imgur.com/UQ5o9.png" align="left"> <b>character's name</b> - their relationship started out as adults but over time, it whittled down because they became busy with their own shit. oh, make sure their image is 100x100 in order to make sure this looks as it does. i guess more text is needed but that's how it be. you can set it up however you want but please make sure the image is <b>100x100</b>.

    <p></p><p></p>
           <hr class="my-1" style="border-color:#918d8d; width: 75%;">
</div>
<div id="trivia" class="collapse">
<p></p>
       <div><p class="m-0 display-4 text-lowercase" style="font-size:large; letter-spacing:2px;" align="center"><strong>trivia</b></strong><p></p>
                <div class="row no-gutters mt-3">
                <div class="col-md-6 pr-md-1">
                    <ul class="mb-3 pl-4">
                        <li class="mb-1">Lorem ipsum dolor sit amet</li>
                        <li class="mb-1">Lorem ipsum dolor sit amet</li>
                        <li class="mb-1">Lorem ipsum dolor sit amet</li>
                        <li class="mb-1">Lorem ipsum dolor sit amet</li>
                    </ul>
                </div>
                <div class="col-md-6 pl-md-1">
                    <ul class="mb-3 pl-4">
                        <li class="mb-1">Lorem ipsum dolor sit amet</li>
                        <li class="mb-1">Lorem ipsum dolor sit amet</li>
                        <li class="mb-1">Lorem ipsum dolor sit amet</li>
                        <li class="mb-1">Lorem ipsum dolor sit amet</li>
                    </ul>
                </div>
                </div>
</div>
        </div>
    </div>
    </div>
    <p></p>
</div></div>
<p></p>