<!--- Notes ---
- This profile uses custom colors, meaning you can change the colors to your liking.
- Use ctrl+f to find and replace each color
- Color 1: #1FA3AF
- Rules and more info: https://toyhou.se/~forums/16.htmlcss-graphics/39007.-free-html-templates
--------------->
<div class="container">
<div class="row justify-content-between">
<!---------------------- Details Section ---------------------->
<div class="col-lg-6">
<div class="card card-block card-inverse rounded-0 text-white display-4" style="background-color:#1FA3AF; border-color:#1FA3AF;">
✦ Details
</div>
<div class="card bg-faded rounded-0 mb-4" style="border-width:3px; border-color:#1FA3AF;">
<table class="table table-striped mb-0" style="border:transparent;">
<tbody>
<tr>
<td width="30%"><b>Name</b></td>
<td width="70%">
<!-- Put Full Name Here -->
Their Name
</td>
</tr>
<tr>
<td><b>Nickname</b></td>
<td>
<!-- Put Nickname Here -->
Their Nickname
</td>
</tr>
<tr>
<td><b>Age</b></td>
<td>
<!-- Put Age Here -->
Their Age
</td>
</tr>
<tr>
<td><b>Gender</b></td>
<td>
<!-- Put Gender Here -->
Their Gender
</td>
</tr>
<tr>
<td><b>Pronouns</b></td>
<td>
<!-- Put Pronouns Here -->
Their Pronouns
</td>
</tr>
<tr>
<td><b>Sexuality</b></td>
<td>
<!-- Put Sexuality Here -->
Their Sexuality
</td>
</tr>
<tr>
<td><b>Ethnicity</b></td>
<td>
<!-- Put Ethnicity Here -->
Their Ethnicity
</td>
</tr>
<tr>
<td><b>Occupation</b></td>
<td>
<!-- Put Occupation Here -->
Their Occupation
</td>
</tr>
<tr>
<td><b>Residence</b></td>
<td>
<!-- Put Residence Here -->
Their Residence
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-------------------- Details Section End -------------------->
<!--------------------- Appearance Section --------------------->
<div class="col-lg-6">
<div class="card card-block card-inverse rounded-0 text-white display-4" style="background-color:#1FA3AF; border-color:#1FA3AF;">
✦ Appearance
</div>
<div class="card bg-faded rounded-0 mb-4" style="border-width:3px; border-color:#1FA3AF;">
<table class="table table-striped mb-0" style="border:transparent;">
<tbody>
<tr>
<td width="30%"><b>Height</b></td>
<td width="70%">
<!-- Put Height Here -->
Their Height
</td>
</tr>
<tr>
<td><b>Body Type</b></td>
<td>
<!-- Put Body Type Here -->
Their Body Type
</td>
</tr>
<tr>
<td><b>Hair Style</b></td>
<td>
<!-- Put Hair Style Here -->
Their Hair Style
</td>
</tr>
<tr>
<td><b>Hair Color</b></td>
<td>
<!-- Put Hair Color Here -->
Their Hair Color
</td>
</tr>
<tr>
<td><b>Eye Color</b></td>
<td>
<!-- Put Eye Color Here -->
Their Eye Color
</td>
</tr>
<tr>
<td><b>Skin Color</b></td>
<td>
<!-- Put Skin Color Here -->
Their Skin Color
</td>
</tr>
<tr>
<td><b>Clothing Style</b></td>
<td>
<!-- Put Clothing Style Here -->
Their Clothing Style
</td>
</tr>
<tr>
<td><b>Posture</b></td>
<td>
<!-- Put Posture Style Here -->
Their Posture
</td>
</tr>
<tr>
<td><b>Other</b></td>
<td>
<!-- Put Other Stuff Here -->
Other Stuff
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!------------------- Appearance Section End ------------------->
</div>
<div class="row justify-content-between">
<!------------------------ Likes Section ------------------------>
<div class="col-lg-4">
<div class="card card-block card-inverse rounded-0 text-white display-4" style="background-color:#1FA3AF; border-color:#1FA3AF;">
✦ Likes
</div>
<div class="card bg-faded rounded-0 mb-4" style="border-width:3px; border-color:#1FA3AF;">
<table class="table table-striped mb-0" style="border:transparent;">
<tbody>
<tr>
<td>
<i class="fa fa-check"></i>
like
</td>
</tr>
<tr>
<td>
<i class="fa fa-check"></i>
like
</td>
</tr>
<tr>
<td>
<i class="fa fa-check"></i>
like
</td>
</tr>
<tr>
<td>
<i class="fa fa-check"></i>
like
</td>
</tr>
<tr>
<td>
<i class="fa fa-check"></i>
like
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!---------------------- Likes Section End ---------------------->
<!----------------------- Dislikes Section ----------------------->
<div class="col-lg-4">
<div class="card card-block card-inverse rounded-0 text-white display-4" style="background-color:#1FA3AF; border-color:#1FA3AF;">
✦ Dislikes
</div>
<div class="card bg-faded rounded-0 mb-4" style="border-width:3px; border-color:#1FA3AF;">
<table class="table table-striped mb-0" style="border:transparent;">
<tbody>
<tr>
<td>
<i class="fa fa-times"></i>
dislike
</td>
</tr>
<tr>
<td>
<i class="fa fa-times"></i>
dislike
</td>
</tr>
<tr>
<td>
<i class="fa fa-times"></i>
dislike
</td>
</tr>
<tr>
<td>
<i class="fa fa-times"></i>
dislike
</td>
</tr>
<tr>
<td>
<i class="fa fa-times"></i>
dislike
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--------------------- Dislikes Section End --------------------->
<!------------------------ Traits Section ------------------------>
<div class="col-lg-4">
<div class="card card-block card-inverse rounded-0 text-white display-4" style="background-color:#1FA3AF; border-color:#1FA3AF;">
✦ Traits
</div>
<div class="card bg-faded rounded-0 mb-4" style="border-width:3px; border-color:#1FA3AF;">
<table class="table table-striped mb-0" style="border:transparent;">
<tbody>
<tr>
<td>
<i class="fa fa-bell"></i>
trait
</td>
</tr>
<tr>
<td>
<i class="fa fa-bell"></i>
trait
</td>
</tr>
<tr>
<td>
<i class="fa fa-bell"></i>
trait
</td>
</tr>
<tr>
<td>
<i class="fa fa-bell"></i>
trait
</td>
</tr>
<tr>
<td>
<i class="fa fa-bell"></i>
trait
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!---------------------- Traits Section End ---------------------->
<!------------------------ Quirks Section ------------------------>
<div class="col-lg-4">
<div class="card card-block card-inverse rounded-0 text-white display-4" style="background-color:#1FA3AF; border-color:#1FA3AF;">
✦ Quirks
</div>
<div class="card bg-faded rounded-0 mb-4" style="border-width:3px; border-color:#1FA3AF;">
<table class="table table-striped mb-0" style="border:transparent;">
<tbody>
<tr>
<td>
<i class="fa fa-bookmark"></i>
quirk
</td>
</tr>
<tr>
<td>
<i class="fa fa-bookmark"></i>
quirk
</td>
</tr>
<tr>
<td>
<i class="fa fa-bookmark"></i>
quirk
</td>
</tr>
<tr>
<td>
<i class="fa fa-bookmark"></i>
quirk
</td>
</tr>
<tr>
<td>
<i class="fa fa-bookmark"></i>
quirk
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!---------------------- Quirks Section End ---------------------->
<!------------------------ Hobbies Section ------------------------>
<div class="col-lg-4">
<div class="card card-block card-inverse rounded-0 text-white display-4" style="background-color:#1FA3AF; border-color:#1FA3AF;">
✦ Hobbies
</div>
<div class="card bg-faded rounded-0 mb-4" style="border-width:3px; border-color:#1FA3AF;">
<table class="table table-striped mb-0" style="border:transparent;">
<tbody>
<tr>
<td>
<i class="fa fa-cog"></i>
hobby
</td>
</tr>
<tr>
<td>
<i class="fa fa-cog"></i>
hobby
</td>
</tr>
<tr>
<td>
<i class="fa fa-cog"></i>
hobby
</td>
</tr>
<tr>
<td>
<i class="fa fa-cog"></i>
hobby
</td>
</tr>
<tr>
<td>
<i class="fa fa-cog"></i>
hobby
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!---------------------- Hobbies Section End ---------------------->
<!------------------------- Skills Section ------------------------->
<div class="col-lg-4">
<div class="card card-block card-inverse rounded-0 text-white display-4" style="background-color:#1FA3AF; border-color:#1FA3AF;">
✦ Skills
</div>
<div class="card bg-faded rounded-0 mb-4" style="border-width:3px; border-color:#1FA3AF;">
<table class="table table-striped mb-0" style="border:transparent;">
<tbody>
<tr>
<td>
<i class="fa fa-star"></i>
skill
</td>
</tr>
<tr>
<td>
<i class="fa fa-star"></i>
skill
</td>
</tr>
<tr>
<td>
<i class="fa fa-star"></i>
skill
</td>
</tr>
<tr>
<td>
<i class="fa fa-star"></i>
skill
</td>
</tr>
<tr>
<td>
<i class="fa fa-star"></i>
skill
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!----------------------- Skills Section End ----------------------->
</div>
<div class="row justify-content-between">
<!-------------------------- Traits Section -------------------------->
<div class="col-lg-12">
<div class="card card-block card-inverse rounded-0 text-white display-4" style="background-color:#1FA3AF; border-color:#1FA3AF;">
✦ Personality Traits
</div>
<div class="card card-block bg-faded rounded-0 mb-4" style="border-width:3px; border-color:#1FA3AF;">
<div class="row justify-content-between">
<div class="col-lg-6">
<ul class="list-unstyled font-weight-bold h4 mb-4">
<!------------ Optimist vs Pessimist ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#1FA3AF;">
Optimist
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#FF8B89;"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%; background-color:#1FA3AF;"></div></div></div>
<span class="col-3" style="color:#FF8B89;">
Pessimist
</span>
</div>
</li>
<!------------ Rude vs Kind ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#1FA3AF;">
Rude
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#FF8B89;"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%; background-color:#1FA3AF;"></div></div></div>
<span class="col-3" style="color:#FF8B89;">
Kind
</span>
</div>
</li>
<!------------ Peaceful vs Chaotic ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#1FA3AF;">
Peaceful
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#FF8B89;"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%; background-color:#1FA3AF;"></div></div></div>
<span class="col-3" style="color:#FF8B89;">
Chaotic
</span>
</div>
</li>
<!------------ Playful vs Serious ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#1FA3AF;">
Playful
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#FF8B89;"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%; background-color:#1FA3AF;"></div></div></div>
<span class="col-3" style="color:#FF8B89;">
Serious
</span>
</div>
</li>
<!------------ Creative vs Copier ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#1FA3AF;">
Creative
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#FF8B89;"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%; background-color:#1FA3AF;"></div></div></div>
<span class="col-3" style="color:#FF8B89;">
Copier
</span>
</div>
</li>
<!------------ Lethargic vs Energetic ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#1FA3AF;">
Lethargic
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#FF8B89;"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%; background-color:#1FA3AF;"></div></div></div>
<span class="col-3" style="color:#FF8B89;">
Energetic
</span>
</div>
</li>
<!------------ Follower vs Leader ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#1FA3AF;">
Follower
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#FF8B89;"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%; background-color:#1FA3AF;"></div></div></div>
<span class="col-3" style="color:#FF8B89;">
Leader
</span>
</div>
</li>
<!------------ Brave vs Coward ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#1FA3AF;">
Brave
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#FF8B89;"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%; background-color:#1FA3AF;"></div></div></div>
<span class="col-3" style="color:#FF8B89;">
Coward
</span>
</div>
</li>
<!------------ Insecure vs Confident ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#1FA3AF;">
Insecure
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#FF8B89;"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%; background-color:#1FA3AF;"></div></div></div>
<span class="col-3" style="color:#FF8B89;">
Confident
</span>
</div>
</li>
</ul></div>
<div class="col-lg-6"><ul class="list-unstyled font-weight-bold h4 mb-4">
<!------------ Intelligent vs Unintelligent ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#1FA3AF;">
Intelligent
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#FF8B89;"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%; background-color:#1FA3AF;"></div></div></div>
<span class="col-3" style="color:#FF8B89;">
Unintelligent
</span>
</div>
</li>
<!------------ Wise vs Mindless ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#1FA3AF;">
Wise
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#FF8B89;"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%; background-color:#1FA3AF;"></div></div></div>
<span class="col-3" style="color:#FF8B89;">
Mindless
</span>
</div>
</li>
<!------------ Forgetful vs Memorious ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#1FA3AF;">
Forgetful
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#FF8B89;"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%; background-color:#1FA3AF;"></div></div></div>
<span class="col-3" style="color:#FF8B89;">
Memorious
</span>
</div>
</li>
<!------------ Impulsive vs Cautious ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#1FA3AF;">
Impulsive
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#FF8B89;"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%; background-color:#1FA3AF;"></div></div></div>
<span class="col-3" style="color:#FF8B89;">
Cautious
</span>
</div>
</li>
<!------------ Neat vs Messy ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#1FA3AF;">
Neat
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#FF8B89;"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%; background-color:#1FA3AF;"></div></div></div>
<span class="col-3" style="color:#FF8B89;">
Messy
</span>
</div>
</li>
<!------------ Curious vs Uninterested ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#1FA3AF;">
Curious
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#FF8B89;"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%; background-color:#1FA3AF;"></div></div></div>
<span class="col-3" style="color:#FF8B89;">
Uninterested
</span>
</div>
</li>
<!------------ Clumsy vs Graceful ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#1FA3AF;">
Clumsy
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#FF8B89;"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%; background-color:#1FA3AF;"></div></div></div>
<span class="col-3" style="color:#FF8B89;">
Graceful
</span>
</div>
</li>
<!------------ Patient vs Impatient ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#1FA3AF;">
Patient
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#FF8B89;"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%; background-color:#1FA3AF;"></div></div></div>
<span class="col-3" style="color:#FF8B89;">
Impatient
</span>
</div>
</li>
<!------------ Liar vs Honest ------------>
<li class="mb-3">
<div class="row justify-content-between">
<span class="col-3 text-right" style="color:#1FA3AF;">
Liar
</span>
<!-- Bar -->
<div class="col-6"><div class="progress progress-bar-striped progress-bar-animated rounded-0 mt-1" style="background-color:#FF8B89;"><div class="progress-bar progress-bar-striped progress-bar-animated rounded-0" style="width:50%; background-color:#1FA3AF;"></div></div></div>
<span class="col-3" style="color:#FF8B89;">
Honest
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!------------------------ Traits Section End ------------------------>
<!-------------------------- Extra Section -------------------------->
<div class="col-lg-12">
<div class="card card-block card-inverse rounded-0 text-white display-4" style="background-color:#1FA3AF; border-color:#1FA3AF;">
<!-- Section Title -->
✦ Section
</div>
<div class="card card-block bg-faded rounded-0 mb-4" style="border-width:3px; border-color:#1FA3AF;">
<!-- Paragraphs -->
<p class="mb-2" style="text-align: justify;">This profile is made for those who don't like writing paragraphs, but this section is here as optional for those who would like to include paragraphs in the profile. If you don't want it, simply delete it. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lectus sapien, rutrum vitae volutpat sit amet, scelerisque euismod velit. Donec leo enim, condimentum vel consectetur ut, sollicitudin ut dolor. In eu auctor odio. In a felis erat. Duis sit amet porttitor nibh. Maecenas eget eros accumsan, finibus neque vel, pretium est. In dictum quam quis ante volutpat, at porta lacus feugiat. Praesent porta, risus ac suscipit vulputate, magna quam sollicitudin mauris, non accumsan eros ligula vel magna. Donec finibus nisi id lacus ultrices tempor. Quisque lacinia justo lectus, non cursus ligula efficitur sit amet. Pellentesque nec augue vitae lacus sollicitudin congue vel ac tellus. Fusce magna enim, facilisis quis est et, gravida efficitur velit. In hac habitasse platea dictumst. Duis id ullamcorper eros, sed gravida magna. Vivamus eleifend, magna at tempus mollis, ipsum odio tempus nunc, nec ultrices ex magna eget sapien. Proin nec erat ornare, ullamcorper libero vitae, pellentesque mi.</p>
<p class="mb-2" style="text-align: justify;">Duis scelerisque quis sapien sodales mattis. Donec porttitor eu turpis vitae tristique. Vestibulum vitae magna id purus vestibulum cursus. Pellentesque libero nunc, lobortis vitae augue a, suscipit aliquam felis. Suspendisse placerat vulputate sollicitudin. Sed vel fermentum justo. Aliquam vitae est dui. Sed molestie ullamcorper mauris, ut accumsan tellus cursus sed.</p>
</div>
</div>
<!------------------------ Extra Section End ------------------------>
</div>
<div class="row justify-content-between">
<!------------------------- Trivia Section ------------------------->
<div class="col-lg-7">
<div class="card card-block card-inverse rounded-0 text-white display-4" style="background-color:#1FA3AF; border-color:#1FA3AF;">
✦ Trivia
</div>
<div class="card bg-faded rounded-0 mb-4" style="border-width:3px; border-color:#1FA3AF;">
<table class="table table-striped mb-0" style="border:transparent;">
<tbody>
<tr>
<td>
● Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</td>
</tr>
<tr>
<td>
● Maecenas eget eros accumsan, finibus neque vel, pretium est. In dictum quam quis ante volutpat, at porta lacus feugiat.
</td>
</tr>
<tr>
<td>
● Duis scelerisque quis sapien sodales mattis, nec porttitor nibh interdum eu.
</td>
</tr>
<tr>
<td>
● Donec elit sapien, facilisis sed arcu eu, rutrum sollicitudin lorem. Sed vel fermentum justo.
</td>
</tr>
<tr>
<td>
● Sed tempus viverra orci, id bibendum urna pellentesque non.
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!----------------------- Trivia Section End ----------------------->
<!---------------------- Relationship Section ---------------------->
<div class="col-lg-5">
<div class="card card-block card-inverse rounded-0 text-white display-4" style="background-color:#1FA3AF; border-color:#1FA3AF;">
✦ Relationships
</div>
<div class="card bg-faded rounded-0 mb-2" style="border-width:3px; border-color:#1FA3AF;">
<table class="table table-striped mb-0" style="border:transparent;">
<tbody>
<!------ First Relationship ------>
<tr>
<td width="30%">
<!-- Character Name and Profile Link -->
<a href="link" style="color:#1FA3AF;"><b>Name</b></a>
</td>
<td width="70%">
<!-- Paragraph -->
In a felis erat. Duis sit amet porttitor nibh. Maecenas eget eros accumsan.
</td>
</tr>
<!---- First Relationship End ---->
<!------ Second Relationship ------>
<tr>
<td width="30%">
<!-- Character Name and Profile Link -->
<a href="link" style="color:#1FA3AF;"><b>Name</b></a>
</td>
<td width="70%">
<!-- Paragraph -->
In a felis erat. Duis sit amet porttitor nibh. Maecenas eget eros accumsan.
</td>
</tr>
<!---- Second Relationship End ---->
<!------ Third Relationship ------>
<tr>
<td width="30%">
<!-- Character Name and Profile Link -->
<a href="link" style="color:#1FA3AF;"><b>Name</b></a>
</td>
<td width="70%">
<!-- Paragraph -->
In a felis erat. Duis sit amet porttitor nibh. Maecenas eget eros accumsan.
</td>
</tr>
<!---- Third Relationship End ---->
</tbody>
</table>
</div>
<!-------------------- Relationship Section End -------------------->
<!-- Credits, Don't Remove -->
<a class="tooltipster pull-right" style="color:#1FA3AF" href="https://toyhou.se/hukiolukio" title="code by hukiolukio">
<i class="fa-solid fa-code"></i>
</a>
</div>
</div>
</div>