Barkpaw's Comments

Hey is this code available? id love to use it!
This code is for be used by RSW members or anyone that want to join the group! But I can send you it :D
<!------- BIGGER BACKGROUND SECTION -------->
<div style="position:absolute;top:0;bottom:0;left:0;filter:blur(4px);width:100%;box-shadow:inset 0 10000px rgba(0,0,0,0.35);
background: #000 url(https://i.pinimg.com/564x/9a/55/84/9a55846afde2fdd8a824b06978ab5243.jpg) fixed center;background-size:cover;">
<br>
</div>
<!------- END BIGGER BACKGROUND SECTION -------->
<!-------------------------

Notes:

- Yes, you can change some things of this code
example: changing the border size for 0 or higher size or deleting the rounded-circle!
- You can edit this code for a normal character outside of warrior cats world!
- DO NOT SELL OR DESTRIBUDE THIS CODE !!!
- DO NOT REMOVE THE CREDITS PLEASE
- If you need anything, you can ask me !!
- No, I won't change the card backgrounds to faded ones, if you want to do that do it yourself please!
- For changing the code colors add to "color: #" a #hex-code-color
- Thank you so much for using this code, please considare in donating!

--------------------------->
<div class="mx-auto col-lg-12 rounded-0 text-justify text-white" style="max-width:900px; font-size:12px; letter-spacing:0.2px;">
<div class="row no-gutters">
<!---------- image ------------>
<div class="col-md-4 p-1">
<div class="card h-100 rounded border-0" style="min-height: 245.5px;
border-radius:20px;
background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/characters/10702918?1618371957);
background-position: center;
background-size: cover;
box-shadow: 0px 0px 5px rgba(0,0,0,0.75);">
<br>
</div>
</div>
<!-- PROFILE ------------->
<div class="col-md-8">
<div class="text-white" style="overflow: none;">
<div class="row no-gutters">
<!--LEFT COLUMN-->
<div class="col-lg-6 pt-2 pl-2 pb-2 pr-0">
<div class="card bg-0 rounded-0 border-0" style="max-height: 300px; overflow: auto;border-radius:10px;
background: rgba(0,0,0,0.25);box-shadow: 0px 0px 5px rgba(0,0,0,0.75);">

<ul class="list-group list-group-flush bg-0 text-white">
<li class="d-flex justify-content-between align-items-center px-3 py-2 text" style="background: rgba(0,0,0,0.25);"><span class="text-uppercase mr-3 text-muted" style="color:#;">NAME</span> -</li>
<li class="d-flex justify-content-between align-items-center px-3 py-2"><span class="text-uppercase mr-3 text-muted" style="color:#;">NICKNAMES</span> -</li>
<li class="d-flex justify-content-between align-items-center px-3 py-2" style="background: rgba(0,0,0,0.25);"><span class="text-uppercase mr-3 text-muted" style="color:#;">BIRTHSEASON</span> -</li>
<li class="d-flex justify-content-between align-items-center px-3 py-2"><span class="text-uppercase mr-3 text-muted" style="color:#;">AGE</span> -</li>
<li class="d-flex justify-content-between align-items-center px-3 py-2" style="background: rgba(0,0,0,0.25);"><span class="text-uppercase mr-3 text-muted" style="color:#;">GENDER</span> -</li>
<li class="d-flex justify-content-between align-items-center px-3 py-2"><span class="text-uppercase mr-3 text-muted" style="color:#;">PRONOUNS</span> -</li>
<li class="d-flex justify-content-between align-items-center px-3 py-2" style="background: rgba(0,0,0,0.25);"><span class="text-uppercase mr-3 text-muted" style="color:#;">ORIENTATION</span> -</li>
</ul>
</div>
</div>
<!--left column end-->
<!--RIGHT COLUMN-->
<div class="col-lg-6 pt-2 pl-2 pb-2">
<div class="card bg-0 rounded-0 border-0" style="max-height: 300px; overflow: auto;border-radius:10px;
background: rgba(0,0,0,0.25);box-shadow: 0px 0px 5px rgba(0,0,0,0.75);">

<ul class="list-group list-group-flush bg-0 text-white">
<li class="d-flex justify-content-between align-items-center px-3 py-2 text" style="background: rgba(0,0,0,0.25);"><span class="text-uppercase mr-3 text-muted" style="color:#;">RESIDENCE</span> -</li>
<li class="d-flex justify-content-between align-items-center px-3 py-2"><span class="text-uppercase mr-3 text-muted" style="color:#;">RANK</span> -</li>
<li class="d-flex justify-content-between align-items-center px-3 py-2" style="background: rgba(0,0,0,0.25);"><span class="text-uppercase mr-3 text-muted" style="color:#;">MENTOR</span> -</li>
<li class="d-flex justify-content-between align-items-center px-3 py-2"><span class="text-uppercase mr-3 text-muted" style="color:#;">APPRENTICE</span> -</li>
<li class="d-flex justify-content-between align-items-center px-3 py-2" style="background: rgba(0,0,0,0.25);"><span class="text-uppercase mr-3 text-muted" style="color:#;">STATUS</span> -</li>
<li class="d-flex justify-content-between align-items-center px-3 py-2"><span class="text-uppercase mr-3 text-muted" style="color:#;">VOICE CLAIM</span>
<a href="link" style="color: #;">-</a></li>
<li class="d-flex justify-content-between align-items-center px-3 py-2" style="background: rgba(0,0,0,0.25);"><span class="text-uppercase mr-3 text-muted" style="color:#;">MAIN THEME</span>
<a href="link" style="color: #;">-</a></li>
</ul>
</div>
</div>
<!--right column end-->
</div>
</div>
</div>
</div>
<div class="row no-gutters mt-1">
<!--------------------------------


Notes: For turning this code into CUSTOM COLORS you must delete ALL BS Colors and adding a hex color!!
- Hex Colors Used: #4E84AB
- BS Colors Used: Primary , Muted
- Background Code: 0.55 , 0.25
- Shadow Code: 0.75

--------------------------------->
<div class="col-lg-1 order-1 order-lg-0 p-0">

<ul class="nav row no-gutters h-100">
<li class="col-lg-12 col m-1 nav-item text-center"><a class="btn btn-outline-primary rounded-circle border-0 d-flex p-3 h-100 m-auto active show" data-toggle="tab" href="#ABOUT" style="width:60px; color:#;
background: rgba(0,0,0,0.50);box-shadow: 0px 0px 5.5px rgba(0,0,0,0.75);"><i class="fas fa-paw-claws m-auto" style="font-size:13.5px;"></i></a></li>
<li class="col-lg-12 col m-1 nav-item text-center"><a class="btn btn-outline-primary rounded-circle border-0 d-flex p-3 h-100 m-auto" data-toggle="tab" href="#PERSONALITY" style="width:60px; color:#;
background: rgba(0,0,0,0.55);box-shadow: 0px 0px 5.5px rgba(0,0,0,0.75);"><i class="fas fa-heart m-auto" style="font-size:13.5px;"></i></a></li>
<li class="col-lg-12 col m-1 nav-item text-center"><a class="btn btn-outline-primary rounded-circle border-0 d-flex p-3 h-100 m-auto" data-toggle="tab" href="#STORY" style="width:60px; color:#;
background: rgba(0,0,0,0.55);box-shadow: 0px 0px 5.5px rgba(0,0,0,0.75);"><i class="fas fa-books m-auto" style="font-size:13.5px;"></i></a></li>
<li class="col-lg-12 col m-1 nav-item text-center"><a class="btn btn-outline-primary rounded-circle border-0 d-flex p-3 h-100 m-auto" data-toggle="tab" href="#FAMILY" style="width:60px; color:#;
background: rgba(0,0,0,0.55);box-shadow: 0px 0px 5.5px rgba(0,0,0,0.75);"><i class="fas fa-trees m-auto" style="font-size:13.5px;"></i></a></li>
<li class="col-lg-12 col m-1 nav-item text-center"><a class="btn btn-outline-primary rounded-circle border-0 d-flex p-3 h-100 m-auto" data-toggle="tab" href="#FRIENDS" style="width:60px; color:#;
background: rgba(0,0,0,0.55);box-shadow: 0px 0px 5.5px rgba(0,0,0,0.75);"><i class="fas fa-leaf m-auto" style="font-size:13.5px;"></i></a></li>
<li class="col-lg-12 col m-1 nav-item text-center"><a class="btn btn-outline-primary rounded-circle border-0 d-flex p-3 h-100 m-auto" data-toggle="tab" href="#DESIGN" style="width:60px; color:#;
background: rgba(0,0,0,0.55);box-shadow: 0px 0px 5.5px rgba(0,0,0,0.75);"><i class="fas fa-cat fa-sm fa-fw m-auto"></i></a></li>
<li class="col-lg-12 col m-1 nav-item text-center"><a class="btn btn-outline-primary rounded-circle border-0 d-flex p-3 h-100 m-auto" data-toggle="tab" href="#MISC" style="width:60px; color:#;
background: rgba(0,0,0,0.55);box-shadow: 0px 0px 5.5px rgba(0,0,0,0.75);"><i class="fas fa-scroll-old m-auto" style="font-size:13.5px;"></i></a></li>

</ul>
</div>
<div class="col-lg-11 order-2 order-lg-1 col-sm- p-2">
<div class="tab-content table-responsive d-block card border-0 bg-faded col-lg w-100" style="border-radius: 10px;background: rgba(0,0,0,0.55);box-shadow: 0px 0px 5.5px rgba(0,0,0,0.75);">
<!--------------------------------


ABOUT - PROFILE SECTION


--------------------------------->
<div class="tab-pane fade active show" id="ABOUT">
<div class="pt-2 px-3" style="height:470px; overflow:auto;">
<!-- -----------------------------

QUOTE

------------------------------ -->

<h1 class="p-3 text-primary text-center m-auto text-uppercase" style="color: #;
letter-spacing: 2px; font-size: 18px;font-weight: 300;background: rgba(0,0,0,0.2);"><i class="fal fa-quote-left pull-left" style="text-shadow: 0px 0px px;"></i>
<span class="text-center mx-2">Winners are not always the good guys of the story</span>
<i class="fal fa-quote-right pull-right my-2" style="text-shadow: 0px 0px px;"></i></h1>
<hr class="w-100 mt-2 mb-1 m-auto">
<!--- SEPARATOR - DO NOT EDIT THIS ---->
<div class="card bg-0 rounded-0 border-0 p-2 mb-0 mt-1" style="min-height:170px;max-height: 170px; overflow: auto;background: rgba(0,0,0,0.0);font-size:12px;">

<p>Describe a summary of your cat skills. How do your cat contributes to their clan? Is they popular?</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac eros non nisl accumsan luctus. Nam et diam ac orci maximus feugiat. Morbi dapibus sed ipsum in commodo. Aliquam ac elementum nulla, ac suscipit lectus. Integer varius ante iaculis ipsum dictum, a sodales urna porta. Maecenas viverra, leo non accumsan tempus, enim nibh cursus justo, eget congue libero nulla sed augue. Ut vel lacus massa.</p>

<p>Even this box will scroll, try to be brief !!</p>
</div>
<hr class="w-100 mt-0 mb-1 mt-1 m-auto">
<!--- SEPARATOR - DO NOT EDIT THIS ---->
<div class="row px-2 text-muted" style="color: #;">
<div class="col-lg-3 p-2">
<div class="bloodline card bg-0 rounded-0 border-0" style="background: rgba(0,0,0,0.0);">
<div class="col-12 p-2" style="background: rgba(0,0,0,0.2);">
<!-----IS THEY THE BEST FIGHTER?------>
<span class="text-uppercase pull-left" style="letter-spacing:1px;">Agility</span>
<span class="text-uppercase pull-right" style="letter-spacing:1px;">0/10</span>
<br>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background-color: #; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<div class="col-12 p-2">
<!-----IS THEY THE BEST HUNTER?------>
<span class="text-uppercase pull-left" style="letter-spacing:1px;">Stealth</span>
<span class="text-uppercase pull-right" style="letter-spacing:1px;">0/10</span>
<br>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background-color: #; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<div class="col-12 p-2" style="background: rgba(0,0,0,0.2);">
<!-----IS THEY A TANK?------>
<span class="text-uppercase pull-left" style="letter-spacing:1px;">Speed</span>
<span class="text-uppercase pull-right" style="letter-spacing:1px;">0/10</span>
<br>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background-color: #; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<div class="col-12 p-2">
<!-----IS YOUR CHARACTER SPEED?------>
<span class="text-uppercase pull-left" style="letter-spacing:1px;">Strength</span>
<span class="text-uppercase pull-right" style="letter-spacing:1px;">0/10</span>
<br>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background-color: #; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<div class="col-12 p-2" style="background: rgba(0,0,0,0.2);">
<!-----THEY GOT THE BEST IDEAS IN BATTLE?------>
<span class="text-uppercase pull-left" style="letter-spacing:1px;">Endurance</span>
<span class="text-uppercase pull-right" style="letter-spacing:1px;">0/10</span>
<br>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background-color: #; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<!------ SEPARATOR ------>
</div>
</div>
<div class="col-lg-3 p-2">
<div class="bloodline text-secondary card bg-0 rounded-0 border-0" style="background: rgba(0,0,0,0.0);color:#;">
<div class="col-12 p-2" style="background: rgba(0,0,0,0.2);">
<!-----IS THEY A RIVERCLAN WARRIOR OF HEART?------>
<span class="text-uppercase pull-left" style="letter-spacing:1px;">Climbing</span>
<span class="text-uppercase pull-right" style="letter-spacing:1px;">0/10</span>
<br>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background-color: #; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<div class="col-12 p-2">
<!-----ARE YOU THE BEST MENTOR OPTION FOR YOUR LEADER?------>
<span class="text-uppercase pull-left" style="letter-spacing:1px;">Swimming</span>
<span class="text-uppercase pull-right" style="letter-spacing:1px;">0/10</span>
<br>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background-color: #; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<div class="col-12 p-2" style="background: rgba(0,0,0,0.2);">
<!-----DO THEY FOLLOWS THE RULES?------>
<span class="text-uppercase pull-left" style="letter-spacing:1px;">Loyalty</span>
<span class="text-uppercase pull-right" style="letter-spacing:1px;">0/10</span>
<br>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background-color: #; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<div class="col-12 p-2">
<!-----THEY LOVE STAYING AT THE MEDICINE DEN?------>
<span class="text-uppercase pull-left" style="letter-spacing:1px;">Faith</span>
<span class="text-uppercase pull-right" style="letter-spacing:1px;">0/10</span>
<br>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background-color: #; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<div class="col-12 p-2" style="background: rgba(0,0,0,0.2);">
<!-----DO YOUR CHARACTER BELIEVE IN STARCLAN?------>
<span class="text-uppercase pull-left" style="letter-spacing:1px;">Compassion</span>
<span class="text-uppercase pull-right" style="letter-spacing:1px;">0/10</span>
<br>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background-color: #; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<!------ SEPARATOR ------>
</div>
</div>
<div class="col-lg-3 p-2">
<div class="bloodline text-secondary card bg-0 rounded-0 border-0" style="background: rgba(0,0,0,0.0);color:#;">
<div class="col-12 p-2" style="background: rgba(0,0,0,0.2);">
<!-----IS THEY A RIVERCLAN WARRIOR OF HEART?------>
<span class="text-uppercase pull-left" style="letter-spacing:1px;">Sight</span>
<span class="text-uppercase pull-right" style="letter-spacing:1px;">0/10</span>
<br>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background-color: #; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<div class="col-12 p-2">
<!-----ARE YOU THE BEST MENTOR OPTION FOR YOUR LEADER?------>
<span class="text-uppercase pull-left" style="letter-spacing:1px;">Scent</span>
<span class="text-uppercase pull-right" style="letter-spacing:1px;">0/10</span>
<br>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background-color: #; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<div class="col-12 p-2" style="background: rgba(0,0,0,0.2);">
<!-----DO THEY FOLLOWS THE RULES?------>
<span class="text-uppercase pull-left" style="letter-spacing:1px;">Hearing</span>
<span class="text-uppercase pull-right" style="letter-spacing:1px;">0/10</span>
<br>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background-color: #; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<div class="col-12 p-2">
<!-----THEY LOVE STAYING AT THE MEDICINE DEN?------>
<span class="text-uppercase pull-left" style="letter-spacing:1px;">Taste</span>
<span class="text-uppercase pull-right" style="letter-spacing:1px;">0/10</span>
<br>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background-color: #; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<div class="col-12 p-2" style="background: rgba(0,0,0,0.2);">
<!-----DO YOUR CHARACTER BELIEVE IN STARCLAN?------>
<span class="text-uppercase pull-left" style="letter-spacing:1px;">Touch</span>
<span class="text-uppercase pull-right" style="letter-spacing:1px;">0/10</span>
<br>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background-color: #; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<!------ SEPARATOR ------>
</div>
</div>
<div class="col-lg-3 p-2">
<div class="bloodline text-secondary card bg-0 rounded-0 border-0" style="background: rgba(0,0,0,0.0);color:#;">
<div class="col-12 p-2" style="background: rgba(0,0,0,0.2);">
<!-----IS THEY A RIVERCLAN WARRIOR OF HEART?------>
<span class="text-uppercase pull-left" style="letter-spacing:1px;">Den Building</span>
<span class="text-uppercase pull-right" style="letter-spacing:1px;">0/10</span>
<br>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background-color: #; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<div class="col-12 p-2">
<!-----ARE YOU THE BEST MENTOR OPTION FOR YOUR LEADER?------>
<span class="text-uppercase pull-left" style="letter-spacing:1px;">Battle</span>
<span class="text-uppercase pull-right" style="letter-spacing:1px;">0/10</span>
<br>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background-color: #; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<div class="col-12 p-2" style="background: rgba(0,0,0,0.2);">
<!-----DO THEY FOLLOWS THE RULES?------>
<span class="text-uppercase pull-left" style="letter-spacing:1px;">Hunting</span>
<span class="text-uppercase pull-right" style="letter-spacing:1px;">0/10</span>
<br>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background-color: #; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<div class="col-12 p-2">
<!-----THEY LOVE STAYING AT THE MEDICINE DEN?------>
<span class="text-uppercase pull-left" style="letter-spacing:1px;">Kitting</span>
<span class="text-uppercase pull-right" style="letter-spacing:1px;">0/10</span>
<br>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background-color: #; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<div class="col-12 p-2" style="background: rgba(0,0,0,0.2);">
<!-----DO YOUR CHARACTER BELIEVE IN STARCLAN?------>
<span class="text-uppercase pull-left" style="letter-spacing:1px;">Herbal</span>
<span class="text-uppercase pull-right" style="letter-spacing:1px;">0/10</span>
<br>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background-color: #; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<!------ SEPARATOR ------>
</div>
</div>
<!------------- ABOUT END --------------->
</div>
</div>
</div>

<!--------------------------------


PERSONALITY SECTION


--------------------------------->
<div class="tab-pane fade" id="PERSONALITY">
<div class="pt-2 px-3" style="height:470px; overflow:auto;">
<div class="row pl-2 pr-2 mt-0 text-muted" style="color: #;">
<div class="col-lg-4 px-2 pt-1 pb-2">
<div class="bloodline card bg-0 rounded-0 border-0" style="background: rgba(0,0,0,0.0);">
<div class="col-12 p-2" style="background: rgba(0,0,0,0.2);">
<!-----IS THEY SMART??------>
<span class="text-uppercase pull-left" style="letter-spacing:1px;">knowledge</span>
<br>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background- color:#e0beec; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<div class="col-12 p-2">
<!-----YOU'RE CHARACTER HAVE GOOD MANNERS??------>
<span class="text-uppercase pull-left" style="letter-spacing:1px;">Discipline</span>
<br>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background- color:#e0beec; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<div class="col-12 p-2" style="background: rgba(0,0,0,0.2);">
<!-----DO OTHERS LOVE YOUR CHARACTER, IS THEY FUNNY OR THEY IS ALWAYS CALLING ATENTION?------>
<span class="text-uppercase pull-left" style="letter-spacing:1px;">Charisma</span>
<br>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background- color:#e0beec; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<div class="col-12 p-2">
<!-----IS YOUR CHARACTER CAPRICIOUS?------>
<span class="text-uppercase pull-left" style="letter-spacing:1px;">Greediness</span>
<br>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background- color:#e0beec; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<div class="col-12 p-2" style="background: rgba(0,0,0,0.2);">
<!-----DO YOUR CHARACTER BELIEVE IN THEMSELF?------>
<span class="text-uppercase pull-left" style="letter-spacing:1px;">Confidence</span>
<br>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background- color:#e0beec; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<!------ SEPARATOR ------>
</div>
</div>
<div class="col-lg-4 px-2 pt-1 pb-2">
<div class="bloodline text-secondary card bg-0 rounded-0 border-0" style="background: rgba(0,0,0,0.0);color:#;">
<div class="col-12 p-2" style="background: rgba(0,0,0,0.2);">
<div class="mx-auto"><span class="text-uppercase" style="letter-spacing:1px;">pessimist</span>
<span class="text-uppercase pull-right" style="letter-spacing:1px;">optimist</span></div>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background- color:#e0beec; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<div class="col-12 p-2">
<div class="mx-auto"><span class="text-uppercase" style="letter-spacing:1px;">Naive</span>
<span class="text-uppercase pull-right" style="letter-spacing:1px;">Perceptive</span></div>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background- color:#e0beec; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<div class="col-12 p-2" style="background: rgba(0,0,0,0.2);">
<div class="mx-auto"><span class="text-uppercase" style="letter-spacing:1px;">Reserved</span>
<span class="text-uppercase pull-right" style="letter-spacing:1px;">Social</span></div>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background- color:#e0beec; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<div class="col-12 p-2">
<div class="mx-auto"><span class="text-uppercase" style="letter-spacing:1px;">sassy</span>
<span class="text-uppercase pull-right" style="letter-spacing:1px;">polite</span></div>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background- color:#e0beec; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<div class="col-12 p-2" style="background: rgba(0,0,0,0.2);">
<div class="mx-auto"><span class="text-uppercase" style="letter-spacing:1px;">patient</span>
<span class="text-uppercase pull-right" style="letter-spacing:1px;">foolhardy</span></div>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background- color:#e0beec; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<!----SEPARATOR---->
</div>
</div>
<div class="col-lg-4 px-2 pt-1 pb-2">
<div class="bloodline text-secondary card bg-0 rounded-0 border-0" style="background: rgba(0,0,0,0.0);color:#;">
<div class="col-12 p-2" style="background: rgba(0,0,0,0.2);">
<!-----IS YOUR CHARACTER ALTRUIST??------>
<span class="text-uppercase pull-left" style="letter-spacing:1px;">integrity</span>
<br>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background- color:#e0beec; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<div class="col-12 p-2">
<!-----IS YOUR CHARACTER A NATURAL LEADER??------>
<span class="text-uppercase pull-left" style="letter-spacing:1px;">leadership</span>
<br>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background- color:#e0beec; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<div class="col-12 p-2" style="background: rgba(0,0,0,0.2);">
<!-----IS YOUR CHARACTER A PERSON WITHOUT FILTERS??------>
<span class="text-uppercase pull-left" style="letter-spacing:1px;">Frankness</span>
<br>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background- color:#e0beec; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<div class="col-12 p-2">
<!-----DO YOUR CHARACTER HAVE A HIGHER SEX DRIVE OR LOWER?------>
<span class="text-uppercase pull-left" style="letter-spacing:1px;">libido</span>
<br>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background- color:#e0beec; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<div class="col-12 p-2" style="background: rgba(0,0,0,0.2);">
<!-----IS YOUR CHARACTER MOODY OR CALM??------>
<span class="text-uppercase pull-left" style="letter-spacing:1px;">Temper</span>
<br>
<div class="mt-1 progress" style="background-color: rgba(0,0,0,0.25);">
<div class="progress-bar text-primary" style="background- color:#e0beec; width:50%; height:5px;">
<br>
</div>
</div>
</div>
<!------ SEPARATOR ------>
</div>
</div>
<!-------- [ add/remove more above THIS line! ] -------->
</div>
<hr class="w-100 mt-2 mb-1 m-auto">
<!--- SEPARATOR - DO NOT EDIT THIS ---->
<div class="mt-2">
    <div class="d-flex justify-content-between align-items-center px-3 py-2" style="background: rgba(0,0,0,0.25);"><span class="text-uppercase mr-3 text-muted" style="color: #;"><i class="far fa-plus pr-1"></i> POSITIVE TRAITS</span></div>
<hr class="w-100 m-auto">
<div class="p-2 mt-1 mb-2 text-white">
    <div class="mb-3"><span class="col-auto rounded text-muted p-1 px-2 mr-2 my-2" style="background:rgba(0,0,0,0.25);">
        <i class="fas fas fa-angle-right text-success pr-1"></i> Trait</span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div class="mb-3"><span class="col-auto rounded text-muted p-1 px-2 mr-2 my-2" style="background:rgba(0,0,0,0.25);">
        <i class="fas fas fa-angle-right text-success pr-1"></i> Trait</span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div class="mb-3"><span class="col-auto rounded text-muted p-1 px-2 mr-2 my-2" style="background:rgba(0,0,0,0.25);">
        <i class="fas fas fa-angle-right text-success pr-1"></i> Trait</span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
</div>
<div class="d-flex justify-content-between align-items-center px-3 py-2" style="background: rgba(0,0,0,0.25);"><span class="text-uppercase mr-3 text-muted" style="color: #;"><i class="far fa-equals pr-1"></i> NEUTRAL TRAITS</span></div>
<hr class="w-100 m-auto">
<div class="p-2 mt-1 mb-2">
    <div class="mb-3"><span class="col-auto rounded text-muted p-1 px-2 mr-2 my-2" style="background:rgba(0,0,0,0.25);">
        <i class="fas fas fa-angle-right text-warning pr-1"></i> Trait</span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div class="mb-3"><span class="col-auto rounded text-muted p-1 px-2 mr-2 my-2" style="background:rgba(0,0,0,0.25);">
        <i class="fas fas fa-angle-right text-warning pr-1"></i> Trait</span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div class="mb-3"><span class="col-auto rounded text-muted p-1 px-2 mr-2 my-2" style="background:rgba(0,0,0,0.25);">
        <i class="fas fas fa-angle-right text-warning pr-1"></i> Trait</span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
</div>
<div class="d-flex justify-content-between align-items-center px-3 py-2" style="background: rgba(0,0,0,0.25);"><span class="text-uppercase mr-3 text-muted" style="color: #;"><i class="far fa-minus pr-1"></i> NEGATIVE TRAITS</span></div>
<hr class="w-100 m-auto">
<div class="p-2 mt-1 mb-2">
    <div class="mb-3"><span class="col-auto rounded text-muted p-1 px-2 mr-2 my-2" style="background:rgba(0,0,0,0.25);">
        <i class="fas fas fa-angle-right text-info pr-1"></i> Trait</span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div class="mb-3"><span class="col-auto rounded text-muted p-1 px-2 mr-2 my-2" style="background:rgba(0,0,0,0.25);">
        <i class="fas fas fa-angle-right text-info pr-1"></i> Trait</span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div class="mb-3"><span class="col-auto rounded text-muted p-1 px-2 mr-2 my-2" style="background:rgba(0,0,0,0.25);">
        <i class="fas fas fa-angle-right text-info pr-1"></i> Trait</span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
</div>
</div>
<!------------- PERSONALITY END --------------->
</div>
</div>
<!--------------------------------


STORY SECTION


--------------------------------->
<div class="tab-pane fade" id="STORY">
<div class="pt-2 px-3" style="height:470px; overflow:auto;">
<!--KITHOOD-->

<div class="text-uppercase py-0 mt-1 p-2 px-3 text-muted" style="font-size:18.5px; letter-spacing:3px;font-weight: 450;background: rgba(0,0,0,0.2);"><i class="fal fa-bookmark fa-sm" style="text-shadow: 0px 0px 2px;"></i> KITHOOD (0-6 Moons)</div>
<div class="text-white mb-3 pt-1" style="border-top:1px solid #4E84AB;font-size:12px;max-height:300px;overflow:auto;background: rgba(0,0,0,0.0);">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem erat, iaculis vel velit at, mattis euismod lacus. Morbi suscipit ipsum accumsan leo dapibus, eu mattis neque facilisis. Etiam consequat eget eros a mollis. Donec bibendum nibh id augue pharetra consequat. Donec lobortis risus nunc.</p>
</div>
<!--KITHOOD END-->
<!--APPRENTICEHOOD-->

<div class="text-uppercase py-0 mt-1 p-2 px-3 text-muted text-right" style="font-size:18.5px; letter-spacing:3px;font-weight: 450;background: rgba(0,0,0,0.2);"><i class="fal fa-bookmark fa-sm" style="text-shadow: 0px 0px 2px;"></i> APPRENTICEHOOD (6-12 Moons)</div>
<div class="text-white mb-3 pt-1" style="border-top:1px solid #4E84AB;font-size:12px;max-height:300px;overflow:auto;background: rgba(0,0,0,0.0);">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem erat, iaculis vel velit at, mattis euismod lacus. Morbi suscipit ipsum accumsan leo dapibus, eu mattis neque facilisis. Etiam consequat eget eros a mollis. Donec bibendum nibh id augue pharetra consequat. Donec lobortis risus nunc.</p>
</div>
<!--APPRENTICEHOOD END-->
<!--WARRIORHOOD-->

<div class="text-uppercase py-0 mt-1 p-2 px-3 text-muted" style="font-size:18.5px; letter-spacing:3px;font-weight: 450;background: rgba(0,0,0,0.2);"><i class="fal fa-bookmark fa-sm" style="text-shadow: 0px 0px 2px;"></i> WARRIORHOOD (12-Actual Moons)</div>
<div class="text-white mb-3 pt-1" style="border-top:1px solid #4E84AB;font-size:12px;max-height:300px;overflow:auto;background: rgba(0,0,0,0.0);">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem erat, iaculis vel velit at, mattis euismod lacus. Morbi suscipit ipsum accumsan leo dapibus, eu mattis neque facilisis. Etiam consequat eget eros a mollis. Donec bibendum nibh id augue pharetra consequat. Donec lobortis risus nunc.</p>
</div>
<!--WARRIORHOOD END-->
<!------------- STORY END --------------->
</div>
</div>



<!--------------------------------


FAMILY SECTION


--------------------------------->
<div class="tab-pane fade" id="FAMILY">
<div class="pt-2 px-3" style="height:470px; overflow:auto;">

<div class="card bg-0 rounded-0 border-0 pt-3" style="background: rgba(0,0,0,0.0);font-size:12px;">


<div class="d-flex justify-content-between align-items-center px-3 py-2" style="background: rgba(0,0,0,0.25);"><span class="text-uppercase mr-3 text-muted" style="color: #;">MOTHER━ <a href="#APP LINK" target="_blank">Name</a></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="d-flex justify-content-between align-items-center px-3 py-2">
    <span class="text-uppercase mr-3 text-muted" style="color: #;">FATHER━ <a href="#APP LINK" target="_blank">Name</a></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <hr class="w-100 m-auto">
<div class="d-flex justify-content-between align-items-center px-3 py-2" style="background: rgba(0,0,0,0.25);"><span class="text-uppercase mr-3 text-muted" style="color: #;"><i class="far fa-bars"></i> SIBLINGS</span> </div>
<hr class="w-100 m-auto">
<div class="d-flex justify-content-between align-items-center px-3 py-2 pl-4" style="background: rgba(0,0,0,0.0);"><span class="text-uppercase mr-3 text-muted" style="color: #;">
    <a href="#APP LINK" target="_blank">Name</a>━</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="d-flex justify-content-between align-items-center px-3 py-2 pl-4" style="background: rgba(0,0,0,0.25);"><span class="text-uppercase mr-3 text-muted" style="color: #;">
    <a href="#APP LINK" target="_blank">Name</a>━</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="d-flex justify-content-between align-items-center px-3 py-2 pl-4" style="background: rgba(0,0,0,0.0);"><span class="text-uppercase mr-3 text-muted" style="color: #;">
    <a href="#APP LINK" target="_blank">Name</a>━</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <hr class="w-100 m-auto">
<div class="d-flex justify-content-between align-items-center px-3 py-2" style="background: rgba(0,0,0,0.25);">
    <span class="text-uppercase mr-3 text-muted" style="color: #;">MATE━ 
    <a href="#APP LINK" target="_blank">Name</a></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <hr class="w-100 m-auto">
<div class="d-flex justify-content-between align-items-center px-3 py-2" style="background: rgba(0,0,0,0.0);"><span class="text-uppercase mr-3 text-muted" style="color: #;"><i class="far fa-bars"></i> OFFSPRING</span></div>
<hr class="w-100 m-auto">
<div class="d-flex justify-content-between align-items-center px-3 py-2 pl-4" style="background: rgba(0,0,0,0.25);"><span class="text-uppercase mr-3 text-muted" style="color: #;"><a href="#APP LINK" target="_blank">Name</a>━</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="d-flex justify-content-between align-items-center px-3 py-2 pl-4" style="background: rgba(0,0,0,0.0);"><span class="text-uppercase mr-3 text-muted" style="color: #;"><a href="#APP LINK" target="_blank">Name</a>━</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="d-flex justify-content-between align-items-center px-3 py-2 pl-4" style="background: rgba(0,0,0,0.25);"><span class="text-uppercase mr-3 text-muted" style="color: #;"><a href="#APP LINK" target="_blank">Name</a>━</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<hr class="w-100 m-auto">


<!--FAMILY END-->
</div>
<!------------- FAMILY SECTION END --------------->
</div>
</div>

<!--------------------------------


TRIVIA SECTION


--------------------------------->
<div class="tab-pane fade" id="MISC">
<div class="pt-2 px-3" style="height:470px; overflow:auto;">
<div class="row no-gutters">
<!--------- NAMING ----------->
<div class="col-6 card bg-0 rounded-0 border-0 p-2 mx-0 mb-0 mt-1" style="background: rgba(0,0,0,0.0);font-size:12px;">
<div class="text-uppercase mr- px-2 mx-0 py-2 text-muted" style="color: #;
background: rgba(0,0,0,0.25);">NOMENCLATURE</div>

<ul class="fa-ul mb-2 mx-4 pr-2 text-muted" style="color: #;">
<li><span class="fa-li"><i class="fal fa-angle-right"></i></span>
<span class="w-50 pr-2 text-truncate text-uppercase">Preffix ━</span>
<span class="w-50 text-right text-white"><em> explanation for their prefix</em></span></li>
<li><span class="fa-li"><i class="fal fa-angle-right"></i></span>
<span class="w-50 pr-2 text-truncate text-uppercase">Suffix ━</span>
<span class="w-50 text-right text-white"><em> explanation for their suffix</em></span></li>
</ul>
<div class="text-uppercase mr- px-2 mx-0 py-2 text-muted" style="color: #;
background: rgba(0,0,0,0.25);">PREVIOUS RANKS</div>
<div style="min-height:75px;max-height: 100px; overflow: auto;">

<ul class="fa-ul mb-2 mx-4 text-muted" style="color: #;">
<li><span class="fa-li"><i class="fal fa-angle-right"></i></span>
<span class="w-50 pr-2 text-truncate text-uppercase">KIT ━</span>
<span class="w-50 text-right text-white"><em> -</em></span></li>
<li><span class="fa-li"><i class="fal fa-angle-right"></i></span>
<span class="w-50 pr-2 text-truncate text-uppercase">APPRENTICE ━</span>
<span class="w-50 text-right text-white"><em> -</em></span></li>
<li><span class="fa-li"><i class="fal fa-angle-right"></i></span>
<span class="w-50 pr-2 text-truncate text-uppercase">WARRIOR ━</span>
<span class="w-50 text-right text-white"><em> -</em></span></li>
<li><span class="fa-li"><i class="fal fa-angle-right"></i></span>
<span class="w-50 pr-2 text-truncate text-uppercase">QUEEN ━</span>
<span class="w-50 text-right text-white"><em> -</em></span></li>
<li><span class="fa-li"><i class="fal fa-angle-right"></i></span>
<span class="w-50 pr-2 text-truncate text-uppercase">DEPUTY ━</span>
<span class="w-50 text-right text-white"><em> -</em></span></li>
<li><span class="fa-li"><i class="fal fa-angle-right"></i></span>
<span class="w-50 pr-2 text-truncate text-uppercase">LEADER ━</span>
<span class="w-50 text-right text-white"><em> -</em></span></li>
</ul>
</div>
</div>
<!--------- NAMING END ----------->
<!--------- LIKES ----------->
<div class="col-3 card bg-0 rounded-0 border-0 p-2 mb-0 mt-1 text-white" style="color: #;
background: rgba(0,0,0,0.0);font-size:12px;">
<div class="text-uppercase mr-0 px-2 py-2 text-muted" style="color: #;
background: rgba(0,0,0,0.25);">LIKES</div>
<div style="min-height:150px;max-height: 150px; overflow: auto;">

<ul class="fa-ul mb-1 mr-3">
<li><span class="fa-li"><i class="fal fa-check"></i></span> Trait</li>
<li><span class="fa-li"><i class="fal fa-check"></i></span> Trait</li>
<li><span class="fa-li"><i class="fal fa-check"></i></span> Trait</li>
</ul>
</div>
<!--------- LIKES END ----------->
</div>
<!--------- DISLIKES ----------->
<div class="col-3 card bg-0 rounded-0 border-0 p-2 mb-0 mt-1 text-white" style="color: #;
background: rgba(0,0,0,0.0);font-size:12px;">
<div class="text-uppercase mr-0 px-2 py-2 text-muted" style="color: #;
background: rgba(0,0,0,0.25);">DISLIKES</div>
<div style="min-height:150px;max-height: 150px; overflow: auto;">

<ul class="fa-ul mb-1 mr-3">
<li><span class="fa-li"><i class="fal fa-times"></i></span> Trait</li>
<li><span class="fa-li"><i class="fal fa-times"></i></span> Trait</li>
<li><span class="fa-li"><i class="fal fa-times"></i></span> Trait</li>
</ul>
</div>
<!--------- DISLIKES END ----------->
</div>
</div>
<hr class="w-100 mt-2 mb-1 m-auto">
<div class="row no-gutters">
<!--------- LIKES ----------->
<div class="col-3 card bg-0 rounded-0 border-0 p-2 mb-0 mt-1 text-white" style="color: #;
background: rgba(0,0,0,0.0);font-size:12px;">
<!--------- STRENGHTS ----------->
<div class="text-uppercase mr-0 px-2 py-2 text-muted" style="color: #;
background: rgba(0,0,0,0.25);">STRENGHTS</div>
<div style="max-height: 200px; overflow: auto;">

<ul class="fa-ul mb-1 mr-3">
<li><span class="fa-li"><i class="fal fa-plus"></i></span> Trait</li>
<li><span class="fa-li"><i class="fal fa-plus"></i></span> Trait</li>
<li><span class="fa-li"><i class="fal fa-plus"></i></span> Trait</li>
</ul>
</div>
<!--------- STRENGHTS END ----------->
</div>
<!--------- WEAKNESESS ----------->
<div class="col-3 card bg-0 rounded-0 border-0 p-2 mb-0 mt-1 text-white" style="color: #;
background: rgba(0,0,0,0.0);font-size:12px;">
<div class="text-uppercase mr-0 px-2 py-2 text-muted" style="color: #;
background: rgba(0,0,0,0.25);">WEAKNESESS</div>
<div style="max-height: 200px; overflow: auto;">

<ul class="fa-ul mb-1 mr-3">
<li><span class="fa-li"><i class="fal fa-minus"></i></span> Trait</li>
<li><span class="fa-li"><i class="fal fa-minus"></i></span> Trait</li>
<li><span class="fa-li"><i class="fal fa-minus"></i></span> Trait</li>
</ul>
</div>
<!--------- WEAKNESESS END ----------->
</div>
<!--------- TRIVIA ----------->
<div class="col-6 card bg-0 rounded-0 border-0 p-2 mx-0 mb-0 mt-1" style="background: rgba(0,0,0,0.0);font-size:12px;">
<div class="text-uppercase mr- px-2 mx-0 py-2 text-muted" style="color: #;
background: rgba(0,0,0,0.25);">TRIVIA</div>
<div style="max-height: 200px;overflow: auto;">

<ul class="fa-ul mb-2 mx-4 pr-2 text-white" style="color: #;">
<li><span class="fa-li"><i class="fal fa-angle-right"></i></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><span class="fa-li"><i class="fal fa-angle-right"></i></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
</div>
<!--------- TRIVIA END ----------->
</div>
<!--- SEPARATOR - DO NOT EDIT THIS ---->
<!------------- TRIVIA END --------------->
</div>
</div>
<!--------------------------------


DESIGN NOTES - APPEARANCE SECTION


--------------------------------->
<div class="tab-pane fade" id="DESIGN">
<div class="pt-2 px-3" style="height:470px; overflow:auto;">
<div class="row no-gutters">
<!--LEFT COLUMN-->
<div class="col-lg-6 pt-2 pl-0 pb-2 pr-0">
<div class="card bg-0 rounded-0 border-0" style="max-height: 300px; overflow: auto;border-radius:0px;
background: rgba(0,0,0,0.0);">

<ul class="list-group list-group-flush bg-0 text-white">
<li class="d-flex justify-content-between align-items-center px-3 py-2 text" style="background: rgba(0,0,0,0.25);"><span class="text-uppercase mr-3 text-muted" style="color:#;">BREED</span> -</li>
<li class="d-flex justify-content-between align-items-center px-3 py-2"><span class="text-uppercase mr-3 text-muted" style="color:#;">BODY TYPE</span> -</li>
<li class="d-flex justify-content-between align-items-center px-3 py-2" style="background: rgba(0,0,0,0.25);"><span class="text-uppercase mr-3 text-muted" style="color:#;">BUILD</span> -</li>
<li class="d-flex justify-content-between align-items-center px-3 py-2"><span class="text-uppercase mr-3 text-muted" style="color:#;">HEIGHT</span> -</li>
<li class="d-flex justify-content-between align-items-center px-3 py-2" style="background: rgba(0,0,0,0.25);"><span class="text-uppercase mr-3 text-muted" style="color:#;">SEX/DSAB</span> -</li>
<li class="d-flex justify-content-between align-items-center px-3 py-2"><span class="text-uppercase mr-3 text-muted" style="color:#;">SCARS</span> -</li>
<li class="d-flex justify-content-between align-items-center px-3 py-2" style="background: rgba(0,0,0,0.25);"><span class="text-uppercase mr-3 text-muted" style="color:#;">SCENT</span> -</li>
</ul>
</div>
</div>
<!--left column end-->
<!--RIGHT COLUMN-->
<div class="col-lg-6 pt-2 pl-2 pb-2">
<div class="card bg-0 rounded-0 border-0" style="max-height: 300px; overflow: auto;border-radius:0px;
background: rgba(0,0,0,0.0);">

<ul class="list-group list-group-flush bg-0 text-white">
<li class="d-flex justify-content-between align-items-center px-3 py-2 text" style="background: rgba(0,0,0,0.25);"><span class="text-uppercase mr-3 text-muted" style="color:#;">PELT COLOUR</span> -</li>
<li class="d-flex justify-content-between align-items-center px-3 py-2"><span class="text-uppercase mr-3 text-muted" style="color:#;">FUR SHAPE</span> -</li>
<li class="d-flex justify-content-between align-items-center px-3 py-2" style="background: rgba(0,0,0,0.25);"><span class="text-uppercase mr-3 text-muted" style="color:#;">EYES COLOUR</span> -</li>
<li class="d-flex justify-content-between align-items-center px-3 py-2"><span class="text-uppercase mr-3 text-muted" style="color:#;">WEIGHT</span> -</li>
<li class="d-flex justify-content-between align-items-center px-3 py-2" style="background: rgba(0,0,0,0.25);"><span class="text-uppercase mr-3 text-muted" style="color:#;">DISABILITIES</span> -</li>
<li class="d-flex justify-content-between align-items-center px-3 py-2"><span class="text-uppercase mr-3 text-muted" style="color:#;">DESIGNER</span>
<a href="link" style="color: #;">-</a></li>
<li class="d-flex justify-content-between align-items-center px-3 py-2" style="background: rgba(0,0,0,0.25);"><span class="text-uppercase mr-3 text-muted" style="color:#;">WORTH</span> -</li>
</ul>
</div>
</div>
<!--right column end-->
</div>
<hr class="w-100 mt-2 mb-1 m-auto">
<!--- SEPARATOR - DO NOT EDIT THIS ---->
<div class="card bg-0 rounded-0 border-0 p-2 mb-0 mt-1" style="min-height:170px;height: 190px; overflow: auto;background: rgba(0,0,0,0.0);font-size:12px;">

<p>Extensive description of you character overview!! What are their notable traits? Do they have a weird posture?</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac eros non nisl accumsan luctus. Nam et diam ac orci maximus feugiat. Morbi dapibus sed ipsum in commodo. Aliquam ac elementum nulla, ac suscipit lectus. Integer varius ante iaculis ipsum dictum, a sodales urna porta. Maecenas viverra, leo non accumsan tempus, enim nibh cursus justo, eget congue libero nulla sed augue. Ut vel lacus massa.</p>

<p>Hey look, I'm a scrollbox!!</p>
</div>
<!------------- DESIGN NOTES - APPEARANCE END --------------->
</div>
</div>
<!--------------------------------


RELATIONSHIPS SECTION


--------------------------------->
<div class="tab-pane fade" id="FRIENDS">
<div class="pt-2 px-3" style="height:470px; overflow:auto;">
<div class="row no-gutters">
<!--------- NAMING ----------->
<div class="col-6 card bg-0 rounded-0 border-0 p-2 mx-0 mb-0 mt-1" style="background: rgba(0,0,0,0.0);font-size:12px;">
<div class="text-uppercase mr-3 px-2 mx-0 py-2 text-muted" style="color: #;
background: rgba(0,0,0,0.25);">LOVE LIFE</div>
<div style="max-height: 100px; overflow: auto;">
<ul class="fa-ul mb-2 mx-4 pr-2 text-muted" style="color: #;">
<li><span class="fa-li"><i class="fal fa-angle-right"></i></span>
<span class="w-50 pr-2 text-truncate text-uppercase">Mate ━</span>
<span class="w-50 text-right text-white"><em> -</em></span></li>
<li><span class="fa-li"><i class="fal fa-angle-right"></i></span>
<span class="w-50 pr-2 text-truncate text-uppercase">Previous Mate ━</span>
<span class="w-50 text-right text-white"><em> -</em></span></li>
<li><span class="fa-li"><i class="fal fa-angle-right"></i></span>
<span class="w-50 pr-2 text-truncate text-uppercase">Interested In ━</span>
<span class="w-50 text-right text-white"><em> -</em></span></li>
<li><span class="fa-li"><i class="fal fa-angle-right"></i></span>
<span class="w-50 pr-2 text-truncate text-uppercase">Looking For ━</span>
<span class="w-50 text-right text-white"><em> -</em></span></li>
</ul>
</div>
<div class="text-uppercase mr-3 px-2 mx-0 py-2 text-muted" style="color: #;
background: rgba(0,0,0,0.25);">LOVE TRIVIA</div>


<ul class="fa-ul mb-2 mx-4 text-muted" style="color: #;">
<li><span class="fa-li"><i class="fal fa-angle-right"></i></span>
<span class="w-50 pr-2 text-truncate text-uppercase">INTERESTED IN KITS? ━</span>
<span class="w-50 text-right text-white"><em> -</em></span></li>
<li><span class="fa-li"><i class="fal fa-angle-right"></i></span>
<span class="w-50 pr-2 text-truncate text-uppercase">PREFERRED FAMILY SIZE ━</span>
<span class="w-50 text-right text-white"><em> -</em></span></li>
</ul>

</div>
<!--------- NAMING END ----------->
<!--------- LIKES ----------->
<div class="col-3 card bg-0 rounded-0 border-0 p-2 mb-0 mt-1 text-white" style="color: #;
background: rgba(0,0,0,0.0);font-size:12px;">
<div class="text-uppercase mr-0 px-2 py-2 text-muted" style="color: #;
background: rgba(0,0,0,0.25);">Preferential mate</div>
<div style="min-height:150px;max-height: 150px; overflow: auto;">

<ul class="fa-ul mb-1 mr-3">
<li><span class="fa-li"><i class="fal fa-check"></i></span> Trait</li>
<li><span class="fa-li"><i class="fal fa-check"></i></span> Trait</li>
<li><span class="fa-li"><i class="fal fa-check"></i></span> Trait</li>
</ul>
</div>
<!--------- LIKES END ----------->
</div>
<!--------- DISLIKES ----------->
<div class="col-3 card bg-0 rounded-0 border-0 p-2 mb-0 mt-1 text-white" style="color: #;
background: rgba(0,0,0,0.0);font-size:12px;">
<div class="text-uppercase mr-0 px-2 py-2 text-muted" style="color: #;
background: rgba(0,0,0,0.25);">NonPreferential mate</div>
<div style="min-height:150px;max-height: 150px; overflow: auto;">

<ul class="fa-ul mb-1 mr-3">
<li><span class="fa-li"><i class="fal fa-times"></i></span> Trait</li>
<li><span class="fa-li"><i class="fal fa-times"></i></span> Trait</li>
<li><span class="fa-li"><i class="fal fa-times"></i></span> Trait</li>
</ul>
</div>
<!--------- DISLIKES END ----------->
</div>
</div>
<hr class="w-100 mt-2 mb-1 m-auto">

<div class="row no-gutters">

<!-- --- RELATIONSHIP ONE --- -->
<div class="col-lg-6 p-3 text-muted">

<!-- GENERAL INFO -->  
<div class="pt-1 pb-1 px-2 text-uppercase justify-content-between" style="background: rgba(0,0,0,0.25)">

<a href="CHARA LINK">Name</a>
<span>Status</span>

</div>
<hr class="w-100 m-auto">
<div class="pt-2 pb-2 px-2 justify-content-between" style="background: rgba(0,0,0,0.25)">
<!--
full : <i class="fas fa-heart"></i>
empty: <i class="far fa-heart text-muted"></i>
-->
<span>Relation</span>
<span>
Clan/Role
</span>

</div>

<hr class="w-100 m-auto">
<!-- IMAGE --> 
<div class="card mr-lg-2 float-left justify-content-center border-0 mt-2" style="background-image: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
background-position:center; background-size:cover;height:90px; width:90px;">


</div>

<!-- CONTENT -->  
<div class="pt-2 text-white">

<p>Your character's thoughts of this character. Can be in character or not.</p>
<p>Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>

</div>
</div>


<!-- --- RELATIONSHIP TWO --- -->
<div class="col-lg-6 p-3 text-muted">

<!-- GENERAL INFO -->  
<div class="pt-1 pb-1 px-2 text-uppercase justify-content-between" style="background: rgba(0,0,0,0.25)">

<a href="CHARA LINK">Name</a>
<span>Status</span>

</div>
<hr class="w-100 m-auto">
<div class="pt-2 pb-2 px-2 justify-content-between" style="background: rgba(0,0,0,0.25)">
<!--
full : <i class="fas fa-heart"></i>
empty: <i class="far fa-heart text-muted"></i>
-->
<span>Relation</span>
<span>
Clan/Role
</span>

</div>

<hr class="w-100 m-auto">
<!-- IMAGE --> 
<div class="card mr-lg-2 float-left justify-content-center border-0 mt-2" style="background-image: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
background-position:center; background-size:cover;height:90px; width:90px;">


</div>

<!-- CONTENT -->  
<div class="pt-2 text-white">

<p>One paragraph would fit nicely! Facilisi morbi tempus iaculis urna id volutpat lacus laoreet non. Ut venenatis tellus in metus vulputate. Elit at imperdiet dui accumsan sit amet nulla facilisi. Dignissim suspendisse in est ante in nibh.</p>

</div>
</div>


<!-- --- RELATIONSHIP THREE --- -->
<div class="col-lg-6 p-3 text-muted">

<!-- GENERAL INFO -->  
<div class="pt-1 pb-1 px-2 text-uppercase justify-content-between" style="background: rgba(0,0,0,0.25)">

<a href="CHARA LINK">Name</a>
<span>Status</span>

</div>
<hr class="w-100 m-auto">
<div class="pt-2 pb-2 px-2 justify-content-between" style="background: rgba(0,0,0,0.25)">
<!--
full : <i class="fas fa-heart"></i>
empty: <i class="far fa-heart text-muted"></i>
-->
<span>Relation</span>
<span>
Clan/Role
</span>

</div>

<hr class="w-100 m-auto">
<!-- IMAGE --> 
<div class="card mr-lg-2 float-left justify-content-center border-0 mt-2" style="background-image: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
background-position:center; background-size:cover;height:90px; width:90px;">


</div>

<!-- CONTENT -->  
<div class="pt-2 text-white">

<p>Egestas tellus rutrum tellus pellentesque eu tincidunt. Amet tellus cras adipiscing enim eu. Aliquet bibendum enim facilisis gravida neque convallis a cras semper. Non sodales neque sodales ut. Eu volutpat odio facilisis mauris sit amet massa vitae tortor.</p>

</div>
</div>


<!-- --- RELATIONSHIP FOUR --- -->
<div class="col-lg-6 p-3 text-muted">

<!-- GENERAL INFO -->  
<div class="pt-1 pb-1 px-2 text-uppercase justify-content-between" style="background: rgba(0,0,0,0.25)">

<a href="CHARA LINK">Name</a>
<span>Status</span>

</div>
<hr class="w-100 m-auto">
<div class="pt-2 pb-2 px-2 justify-content-between" style="background: rgba(0,0,0,0.25)">
<!--
full : <i class="fas fa-heart"></i>
empty: <i class="far fa-heart text-muted"></i>
-->
<span>Relation</span>
<span>
Clan/Role
</span>

</div>

<hr class="w-100 m-auto">
<!-- IMAGE --> 
<div class="card mr-lg-2 float-left justify-content-center border-0 mt-2" style="background-image: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
background-position:center; background-size:cover;height:90px; width:90px;">


</div>

<!-- CONTENT -->  
<div class="pt-2 text-white">

<p>Nunc scelerisque viverra mauris in. In mollis nunc sed id semper risus in hendrerit gravida. Semper quis lectus nulla at volutpat. Arcu dui vivamus arcu felis bibendum ut tristique. Eget est lorem ipsum dolor sit amet consectetur adipiscing elit. Ipsum dolor sit amet consectetur adipiscing elit ut.</p>

</div>
</div>


<!-- add/delete more relationship boxes ABOVE this line! -->
</div>
</div>

<!------------- RELANTIONSHIPS END --------------->
</div>
</div>
</div>
</div>
<!----- CREDITS / DO NOT REMOVE !!! 

Notes:
    - You can only change the position!! Nothing more, don't delete this please
    
--------->
<div class="pull-right d-flex text-primary"><a class="mx-1" href="https://toyhou.se/pixelboy" title=""><i class="fas fa-sparkles"></i></a></div>
</div>

</div>
RoyalHound
thank you so much! Ill look into joining maybe <3 have a blessed day!