<!--- 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
- Color 2: #746586
- Rules and more info: https://toyhou.se/~forums/16.htmlcss-graphics/39007.-free-html-templates
--------------->
<div class="container">
<div class="row justify-content-between">
<!---------------------------- About Section ---------------------------->
<div class="col-lg-8">
<div class="card card-block rounded-0 text-white display-4 shadow" style="background:linear-gradient(135deg,#1FA3AF,#746586);border:transparent;border-top-right-radius:15px;border-top-left-radius:15px;">
<p><i class="far fa-address-card"></i> About</p>
</div>
<div class="card card-block mb-4 shadow bg-faded rounded-0" style="border:transparent;border-bottom-right-radius:15px;border-bottom-left-radius:15px;">
<div class="row justify-content-between">
<ul class="col-lg-6 list-unstyled h3 mb-0" style="color:#1FA3AF;letter-spacing:1px;">
<li class="mb-2">
<span class="mb-0 text-uppercase">
Name
</span>
<span class="pull-right mb-0">
<!-- Put Name Here -->
full name
</span>
<hr class="mt-2" style="border:1px dashed;">
</li>
<li class="mb-2">
<span class="mb-0 text-uppercase">
Nickname
</span>
<span class="pull-right mb-0">
<!-- Put Nickname Here -->
what they go by
</span>
<hr class="mt-2" style="border:1px dashed;">
</li>
<li class="mb-2">
<span class="mb-0 text-uppercase">
Age
</span>
<span class="pull-right mb-0">
<!-- Put Age Here -->
their age
</span>
<hr class="mt-2" style="border:1px dashed;">
</li>
<li class="mb-2">
<span class="mb-0 text-uppercase">
Gender
</span>
<span class="pull-right mb-0">
<!-- Put Gender Here -->
their gender
</span>
<hr class="mt-2" style="border:1px dashed;">
</li>
<li class="mb-2">
<span class="mb-0 text-uppercase">
Pronouns
</span>
<span class="pull-right mb-0">
<!-- Pronouns -->
their pronouns
</span>
<hr class="mt-2" style="border:1px dashed;">
</li>
</ul>
<ul class="col-lg-6 list-unstyled h3 mb-0" style="color:#1FA3AF;letter-spacing:1px;">
<li class="mb-2">
<span class="mb-0 text-uppercase">
MBTI
</span>
<span class="pull-right mb-0">
<!-- Put MBTI Here -->
their mbti type
</span>
<hr class="mt-2" style="border:1px dashed;">
</li>
<li class="mb-2">
<span class="mb-0 text-uppercase">
Sexuality
</span>
<span class="pull-right mb-0">
<!-- Put Sexuality Here -->
their sexuality
</span>
<hr class="mt-2" style="border:1px dashed;">
</li>
<li class="mb-2">
<span class="mb-0 text-uppercase">
Ethnicity
</span>
<span class="pull-right mb-0">
<!-- Put Ethnicity Here -->
ethnicity
</span>
<hr class="mt-2" style="border:1px dashed;">
</li>
<li class="mb-2">
<span class="mb-0 text-uppercase">
Occupation
</span>
<span class="pull-right mb-0">
<!-- Put Occupation Here -->
their occupation
</span>
<hr class="mt-2" style="border:1px dashed;">
</li>
<li class="mb-2">
<span class="mb-0 text-uppercase">
Residence
</span>
<span class="pull-right mb-0">
<!-- Put Residence Here -->
their residence
</span>
<hr class="mt-2" style="border:1px dashed;">
</li>
</ul>
<div class="card-block">
<!-- Paragraphs: About -->
<p class="mb-1" style="text-align:justify; color:#1FA3AF;">Nam posuere, ex ac posuere aliquet, ex lorem convallis mi, a rutrum nunc ligula a odio. Aliquam erat volutpat. Mauris finibus fringilla erat, sit amet eleifend nisi vestibulum id. In venenatis lorem elit, quis mattis lectus consectetur non. Vivamus non purus id leo mollis semper.</p>
<p class="mb-1" style="text-align:justify; color:#1FA3AF;">Pellentesque ac convallis ligula. Integer tincidunt justo eget hendrerit molestie. Sed a metus ac quam rutrum pulvinar. Donec nunc nisi, ultrices ac euismod eget, posuere non augue. Nam et quam enim. Aenean rhoncus auctor diam eget eleifend. Suspendisse potenti. Curabitur varius condimentum lacus, et lacinia ipsum. Nullam nec turpis suscipit, vehicula ex non, convallis metus. Aenean congue posuere massa, bibendum convallis arcu vulputate et. Donec suscipit neque id nulla blandit tincidunt. Nunc mattis, est ac placerat condimentum, nisl sem iaculis sem, et varius quam odio sit amet velit.</p>
</div>
</div>
</div>
</div>
<!-------------------------- About Section End -------------------------->
<div class="col-lg-4 mb-4">
<div class="card" style="border:transparent";>
<!-- Put Image Here
Recommended to be atleast 400px wide to fill space -->
<img class="shadow mb-2" style="border-radius:15px" src="https://via.placeholder.com/400">
<!-- Artist Credit -->
<a class="tooltipster text-white" href="LINK" style="position:absolute; bottom:15px; right:15px;" title="art by NAME">
<i class="fa-solid fa-paintbrush"></i>
</a>
</div>
<!-- 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 id="collapse1" class="w-100 panel-collpase collapse">
<div class="row justify-content-between">
<!--------------------------- Likes Section --------------------------->
<div class="col-lg-4">
<div class="card card-block rounded-0 text-white display-4 shadow" style="background:linear-gradient(135deg,#1FA3AF,#746586);border:transparent;border-top-right-radius:15px;border-top-left-radius:15px;">
<p><i class="far fa-check"></i> Likes</p>
</div>
<div class="card card-block mb-4 rounded-0 bg-faded shadow" style="border:transparent;border-bottom-right-radius:15px;border-bottom-left-radius:15px;">
<ul class="list-unstyled" style="color:#1FA3AF;">
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Praesent vestibulum aliquet
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Fusce mattis dignissim
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Etiam tellus
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Vehicula bibendum dolor
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Dapibus auctor et rhoncus
</li>
</ul>
</div>
</div>
<!--------------------------- Likes Section End --------------------------->
<!---------------------------- Dislikes Section ---------------------------->
<div class="col-lg-4">
<div class="card card-block rounded-0 text-white display-4 shadow" style="background:linear-gradient(135deg,#1FA3AF,#746586);border:transparent;border-top-right-radius:15px;border-top-left-radius:15px;">
<p><i class="far fa-times"></i> Dislikes</p>
</div>
<div class="card card-block mb-4 rounded-0 bg-faded shadow" style="border:transparent;border-bottom-right-radius:15px;border-bottom-left-radius:15px;">
<ul class="list-unstyled" style="color:#1FA3AF;">
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Praesent vestibulum aliquet
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Fusce mattis dignissim
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Etiam tellus
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Vehicula bibendum dolor
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Dapibus auctor et rhoncus
</li>
</ul>
</div>
</div>
<!-------------------------- Dislikes Section End -------------------------->
<!----------------------------- Hobbies Section ----------------------------->
<div class="col-lg-4">
<div class="card card-block rounded-0 text-white display-4 shadow" style="background:linear-gradient(135deg,#1FA3AF,#746586);border:transparent;border-top-right-radius:15px;border-top-left-radius:15px;">
<p><i class="far fa-cog"></i> Hobbies</p>
</div>
<div class="card card-block mb-4 rounded-0 bg-faded shadow" style="border:transparent;border-bottom-right-radius:15px;border-bottom-left-radius:15px;">
<ul class="list-unstyled" style="color:#1FA3AF;">
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Praesent vestibulum aliquet
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Fusce mattis dignissim
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Etiam tellus
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Vehicula bibendum dolor
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Dapibus auctor et rhoncus
</li>
</ul>
</div>
</div>
<!--------------------------- Hobbies Section End --------------------------->
<!------------------------------ Traits Section ------------------------------>
<div class="col-lg-4">
<div class="card card-block rounded-0 text-white display-4 shadow" style="background:linear-gradient(135deg,#1FA3AF,#746586);border:transparent;border-top-right-radius:15px;border-top-left-radius:15px;">
<p><i class="far fa-thumbs-up"></i> Traits</p>
</div>
<div class="card card-block mb-4 rounded-0 bg-faded shadow" style="border:transparent;border-bottom-right-radius:15px;border-bottom-left-radius:15px;">
<ul class="list-unstyled" style="color:#1FA3AF;">
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Praesent vestibulum aliquet
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Fusce mattis dignissim
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Etiam tellus
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Vehicula bibendum dolor
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Dapibus auctor et rhoncus
</li>
</ul>
</div>
</div>
<!---------------------------- Traits Section End ---------------------------->
<!------------------------------- Flaws Section ------------------------------->
<div class="col-lg-4">
<div class="card card-block rounded-0 text-white display-4 shadow" style="background:linear-gradient(135deg,#1FA3AF,#746586);border:transparent;border-top-right-radius:15px;border-top-left-radius:15px;">
<p><i class="far fa-thumbs-down"></i> Flaws</p>
</div>
<div class="card card-block mb-4 rounded-0 bg-faded shadow" style="border:transparent;border-bottom-right-radius:15px;border-bottom-left-radius:15px;">
<ul class="list-unstyled" style="color:#1FA3AF;">
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Praesent vestibulum aliquet
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Fusce mattis dignissim
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Etiam tellus
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Vehicula bibendum dolor
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Dapibus auctor et rhoncus
</li>
</ul>
</div>
</div>
<!----------------------------- Flaws Section End ----------------------------->
<!------------------------------- Skills Section ------------------------------->
<div class="col-lg-4">
<div class="card card-block rounded-0 text-white display-4 shadow" style="background:linear-gradient(135deg,#1FA3AF,#746586);border:transparent;border-top-right-radius:15px;border-top-left-radius:15px;">
<p><i class="far fa-award"></i> Skills</p>
</div>
<div class="card card-block mb-4 rounded-0 bg-faded shadow" style="border:transparent;border-bottom-right-radius:15px;border-bottom-left-radius:15px;">
<ul class="list-unstyled" style="color:#1FA3AF;">
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Praesent vestibulum aliquet
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Fusce mattis dignissim
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Etiam tellus
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Vehicula bibendum dolor
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Dapibus auctor et rhoncus
</li>
</ul>
</div>
</div>
<!----------------------------- Skills Section End ----------------------------->
<div class="col-lg-4 mb-4">
<div class="card" style="border:transparent";>
<!-- Put Image Here
Recommended to be atleast 400px wide to fill space -->
<img class="shadow mb-2" style="border-radius:15px" src="https://via.placeholder.com/400">
<!-- Artist Credit -->
<a class="tooltipster text-white" href="LINK" style="position:absolute; bottom:15px; right:15px;" title="art by NAME">
<i class="fa-solid fa-paintbrush"></i>
</a>
</div>
</div>
<!----------------------------- Appearance Section ----------------------------->
<div class="col-lg-8">
<div class="card card-block rounded-0 text-white display-4 shadow" style="background:linear-gradient(135deg,#1FA3AF,#746586);border:transparent;border-top-right-radius:15px;border-top-left-radius:15px;">
<p><i class="far fa-tshirt"></i> Appearance</p>
</div>
<div class="card card-block mb-4 rounded-0 bg-faded shadow" style="border:transparent;border-bottom-right-radius:15px;border-bottom-left-radius:15px;">
<div class="row justify-content-between">
<ul class="col-lg-6 list-unstyled h3 mb-0" style="color:#1FA3AF;letter-spacing:1px;">
<li class="mb-2">
<span class="mb-0 text-uppercase">
Hair
</span>
<span class="pull-right mb-0">
<!-- Put Hair Here -->
color/length
</span>
<hr class="mt-2" style="border:1px dashed;">
</li>
<li class="mb-2">
<span class="mb-0 text-uppercase">
Eyes
</span>
<span class="pull-right mb-0">
<!-- Put Eyes Here -->
eye color
</span>
<hr class="mt-2" style="border:1px dashed;">
</li>
<li class="mb-2">
<span class="mb-0 text-uppercase">
Skin
</span>
<span class="pull-right mb-0">
<!-- Put Skin Here -->
skin color
</span>
<hr class="mt-2" style="border:1px dashed;">
</li>
<li class="mb-2">
<span class="mb-0 text-uppercase">
Marks
</span>
<span class="pull-right mb-0">
<!-- Put Marks Here -->
freckles/scars/etc
</span>
<hr class="mt-2" style="border:1px dashed;">
</li>
</ul>
<ul class="col-lg-6 list-unstyled h3 mb-0" style="color:#1FA3AF;letter-spacing:1px;">
<li class="mb-2">
<span class="mb-0 text-uppercase">
Height
</span>
<span class="pull-right mb-0">
<!-- Put Height Here -->
their height
</span>
<hr class="mt-2" style="border:1px dashed;">
</li>
<li class="mb-2">
<span class="mb-0 text-uppercase">
Weight
</span>
<span class="pull-right mb-0">
<!-- Put Weight Here -->
their weight
</span>
<hr class="mt-2" style="border:1px dashed;">
</li>
<li class="mb-2">
<span class="mb-0 text-uppercase">
Body
</span>
<span class="pull-right mb-0">
<!-- Put Body Here -->
their body type
</span>
<hr class="mt-2" style="border:1px dashed;">
</li>
<li class="mb-2">
<span class="mb-0 text-uppercase">
Clothing
</span>
<span class="pull-right mb-0">
<!-- Put Clothing Here -->
their clothing style
</span>
<hr class="mt-2" style="border:1px dashed;">
</li>
</ul>
<div class="card-block">
<!-- Paragraphs: Appearance -->
<p class="mb-1" style="text-align:justify; color:#1FA3AF;">Pellentesque ac convallis ligula. Integer tincidunt justo eget hendrerit molestie. Sed a metus ac quam rutrum pulvinar. Donec nunc nisi, ultrices ac euismod eget, posuere non augue. Nam et quam enim. Aenean rhoncus auctor diam eget eleifend. Suspendisse potenti. Curabitur varius condimentum lacus, et lacinia ipsum. Nullam nec turpis suscipit, vehicula ex non, convallis metus. Aenean congue posuere massa, bibendum convallis arcu vulputate et. Donec suscipit neque id nulla blandit tincidunt. Nunc mattis, est ac placerat condimentum, nisl sem iaculis sem, et varius quam odio sit amet velit.</p>
<p class="mb-1" style="text-align:justify; color:#1FA3AF;">Sed a metus ac quam rutrum pulvinar. Donec nunc nisi, ultrices ac euismod eget, posuere non augue. Nam et quam enim. Aenean rhoncus auctor diam eget eleifend. Suspendisse potenti. Curabitur varius condimentum lacus, et lacinia ipsum. Nullam nec turpis suscipit, vehicula ex non, convallis metus. Aenean congue posuere massa, bibendum convallis arcu vulputate et.</p>
</div>
</div>
</div>
</div>
<!--------------------------- Appearance Section End --------------------------->
<!----------------------------- Backstory Section ----------------------------->
<div class="col-lg-7">
<div class="card card-block rounded-0 text-white display-4 shadow" style="background:linear-gradient(135deg,#1FA3AF,#746586);border:transparent;border-top-right-radius:15px;border-top-left-radius:15px;">
<p><i class="far fa-book"></i> Backstory</p>
</div>
<div class="card mb-4 rounded-0 bg-faded shadow" style="border:transparent;border-bottom-right-radius:15px;border-bottom-left-radius:15px;">
<div class="card-block" style="height:350px;overflow:auto;">
<!-- Paragraphs: Backstory -->
<p class="mb-1" style="text-align:justify; color:#1FA3AF;"><p class="mb-1" style="text-align:justify; color:#1FA3AF;">Pellentesque ac convallis ligula. Integer tincidunt justo eget hendrerit molestie. Sed a metus ac quam rutrum pulvinar. Donec nunc nisi, ultrices ac euismod eget, posuere non augue. Nam et quam enim. Aenean rhoncus auctor diam eget eleifend. Suspendisse potenti. Curabitur varius condimentum lacus, et lacinia ipsum. Nullam nec turpis suscipit, vehicula ex non, convallis metus. Aenean congue posuere massa, bibendum convallis arcu vulputate et. Donec suscipit neque id nulla blandit tincidunt. Nunc mattis, est ac placerat condimentum, nisl sem iaculis sem, et varius quam odio sit amet velit.</p></p>
<p class="mb-1" style="text-align:justify; color:#1FA3AF;">Nam posuere, ex ac posuere aliquet, ex lorem convallis mi, a rutrum nunc ligula a odio. Aliquam erat volutpat. Mauris finibus fringilla erat, sit amet eleifend nisi vestibulum id. In venenatis lorem elit, quis mattis lectus consectetur non. Vivamus non purus id leo mollis semper. Nullam quis dapibus ex, rutrum laoreet tellus. Maecenas eget urna turpis. Ut nec lectus molestie leo vulputate dictum. Aenean placerat tincidunt dignissim. Cras sem enim, facilisis in sollicitudin eu, tempor efficitur tellus. Ut cursus felis eu nulla porttitor, ac suscipit lacus tempor.</p>
<p class="mb-1" style="text-align:justify; color:#1FA3AF;">In viverra diam metus, eu posuere odio sagittis vel. Quisque aliquam ultricies ligula at maximus. Nam accumsan at est et cursus. In tellus turpis, fringilla quis quam a, ornare volutpat metus. Cras imperdiet lectus sit amet tempus laoreet. Sed dignissim nisi ac ipsum gravida, nec bibendum lacus gravida. Maecenas eget condimentum enim, nec ultricies nunc. Donec sit amet accumsan lacus. Pellentesque egestas in ex tristique viverra. Cras fringilla pharetra imperdiet. Integer mollis massa et ante pretium sodales. Ut euismod finibus diam, at ultrices turpis condimentum id. Donec posuere elit eget ante accumsan finibus.</p>
</div>
</div>
</div>
<!--------------------------- Backstory Section End --------------------------->
<!------------------------------- Trivia Section ------------------------------->
<div class="col-lg-5">
<div class="card card-block rounded-0 text-white display-4 shadow" style="background:linear-gradient(135deg,#1FA3AF,#746586);border:transparent;border-top-right-radius:15px;border-top-left-radius:15px;">
<p><i class="far fa-list"></i> Trivia</p>
</div>
<div class="card mb-4 rounded-0 bg-faded shadow" style="border:transparent;border-bottom-right-radius:15px;border-bottom-left-radius:15px;">
<div class="card-block" style="height:350px;overflow:auto;">
<ul class="list-unstyled" style="color:#1FA3AF;">
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Maecenas eget eros accumsan, finibus neque vel.
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Duis scelerisque quis sapien sodales mattis, nec porttitor nibh interdum eu.
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Donec elit sapien, facilisis sed arcu eu, rutrum sollicitudin lorem.
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Pellentesque bibendum posuere ipsum, et pellentesque ipsum eleifend eget.
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Nam eleifend tellus augue, id gravida ipsum blandit vel.
</li>
</ul>
</div>
</div>
</div>
<!----------------------------- Trivia Section End ----------------------------->
<!------------------------------ 1st Relationship ------------------------------>
<div class="col-lg-4">
<div class="card mb-2" style="border:transparent";>
<!-- Put Image Here
Recommended to be atleast 400px wide to fill space -->
<img class="shadow mb-2" style="border-radius:15px" src="https://via.placeholder.com/400">
<!-- Artist Credit -->
<a class="tooltipster text-white" href="LINK" style="position:absolute; bottom:15px; right:15px;" title="art by NAME">
<i class="fa-solid fa-paintbrush"></i>
</a>
</div>
<div class="card card-block rounded-0 text-white display-4 shadow" style="background:linear-gradient(135deg,#1FA3AF,#746586);border:transparent;border-top-right-radius:15px;border-top-left-radius:15px;">
<!-- Character Name and Profile Link -->
<p><i class="far fa-comments"></i> <a class="text-white" href="LINK">Name</a></p>
</div>
<div class="card card-block mb-4 rounded-0 bg-faded shadow" style="border:transparent;border-bottom-right-radius:15px;border-bottom-left-radius:15px;">
<ul class="list-unstyled h3 mb-0" style="color:#1FA3AF;letter-spacing:1px;">
<li class="mb-2">
<span class="mb-0 text-uppercase">
Relationship
</span>
<span class="pull-right mb-0">
<!-- Relationship Type -->
type
</span>
<hr class="mt-2" style="border:1px dashed;">
</li>
</ul>
<!-- Paragraphs -->
<p class="mb-1" style="text-align:justify; color:#1FA3AF;">In viverra diam metus, eu posuere odio sagittis vel. Quisque aliquam ultricies ligula at maximus. Nam accumsan at est et cursus. In tellus turpis, fringilla quis quam a, ornare volutpat metus. Cras imperdiet lectus sit amet tempus laoreet. Sed dignissim nisi ac ipsum gravida, nec bibendum lacus gravida.</p>
</div>
</div>
<!---------------------------- 1st Relationship End ---------------------------->
<!------------------------------ 2nd Relationship ------------------------------>
<div class="col-lg-4">
<div class="card mb-2" style="border:transparent";>
<!-- Put Image Here
Recommended to be atleast 400px wide to fill space -->
<img class="shadow mb-2" style="border-radius:15px" src="https://via.placeholder.com/400">
<!-- Artist Credit -->
<a class="tooltipster text-white" href="LINK" style="position:absolute; bottom:15px; right:15px;" title="art by NAME">
<i class="fa-solid fa-paintbrush"></i>
</a>
</div>
<div class="card card-block rounded-0 text-white display-4 shadow" style="background:linear-gradient(135deg,#1FA3AF,#746586);border:transparent;border-top-right-radius:15px;border-top-left-radius:15px;">
<!-- Character Name and Profile Link -->
<p><i class="far fa-comments"></i> <a class="text-white" href="LINK">Name</a></p>
</div>
<div class="card card-block mb-4 rounded-0 bg-faded shadow" style="border:transparent;border-bottom-right-radius:15px;border-bottom-left-radius:15px;">
<ul class="list-unstyled h3 mb-0" style="color:#1FA3AF;letter-spacing:1px;">
<li class="mb-2">
<span class="mb-0 text-uppercase">
Relationship
</span>
<span class="pull-right mb-0">
<!-- Relationship Type -->
type
</span>
<hr class="mt-2" style="border:1px dashed;">
</li>
</ul>
<!-- Paragraphs -->
<p class="mb-1" style="text-align:justify; color:#1FA3AF;">Maecenas quam neque, tempor et semper sed, mattis sed mauris. Aliquam dictum efficitur nunc id convallis. In gravida ipsum id maximus consequat. Curabitur sed nisl ut libero condimentum fringilla.</p>
</div>
</div>
<!---------------------------- 2nd Relationship End ---------------------------->
<!------------------------------ 3rd Relationship ------------------------------>
<div class="col-lg-4">
<div class="card mb-2" style="border:transparent";>
<!-- Put Image Here
Recommended to be atleast 400px wide to fill space -->
<img class="shadow mb-2" style="border-radius:15px" src="https://via.placeholder.com/400">
<!-- Artist Credit -->
<a class="tooltipster text-white" href="LINK" style="position:absolute; bottom:15px; right:15px;" title="art by NAME">
<i class="fa-solid fa-paintbrush"></i>
</a>
</div>
<div class="card card-block rounded-0 text-white display-4 shadow" style="background:linear-gradient(135deg,#1FA3AF,#746586);border:transparent;border-top-right-radius:15px;border-top-left-radius:15px;">
<!-- Character Name and Profile Link -->
<p><i class="far fa-comments"></i> <a class="text-white" href="LINK">Name</a></p>
</div>
<div class="card card-block mb-4 rounded-0 bg-faded shadow" style="border:transparent;border-bottom-right-radius:15px;border-bottom-left-radius:15px;">
<ul class="list-unstyled h3 mb-0" style="color:#1FA3AF;letter-spacing:1px;">
<li class="mb-2">
<span class="mb-0 text-uppercase">
Relationship
</span>
<span class="pull-right mb-0">
<!-- Relationship Type -->
type
</span>
<hr class="mt-2" style="border:1px dashed;">
</li>
</ul>
<!-- Paragraphs -->
<p class="mb-1" style="text-align:justify; color:#1FA3AF;">Proin sodales ornare velit non luctus. Ut consequat augue vel arcu egestas pulvinar. Fusce hendrerit lectus at nisl vestibulum convallis nec ac dui. Pellentesque finibus scelerisque pharetra. Donec ultrices dolor nec est elementum, consectetur vulputate lectus auctor.</p>
</div>
</div>
<!---------------------------- 3rd Relationship End ---------------------------->
</div>
</div>
<div class="row justify-content-center">
<a data-toggle="collapse" href="#collapse1" class="col-2 btn btn-lg d-inline text-left text-center display-1 text-white p-3 shadow shadow-none" style="letter-spacing:7px;border-radius:15px;background-color:#1FA3AF;border:transparent;"><i class="fal fa-chevron-circle-down"></i></a>
</div>
</div>