<!-- THIS CODE USES CUSTOM COLORS
==============================================
26. || Melted || F2U
==============================================
DEFAULT PINK == #F2B5D4
DEFAULT PALE PINK == #F7D6E0
DEFAULT BLUE == #7BDFF2
DEFAULT MINT == #B2F7EF
DEFAULT WHITE-ISH == #EFF7F6
TEXT COLOR == #315259
WHITE TEXT == #fff
Use CTRL+F to quickly find & replace the colors!
-->
<!-- OPTIONAL LAYOUT BACKGROUND == You can change the image link or delete the whole " style="" " to remove it -->
<div class="py-5"
style="
background-image: url(https://images.unsplash.com/photo-1505394033641-40c6ad1178d7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1787&q=80);
background-size: cover;
background-position: center;"
>
<div class="container" style="max-width: 900px; color: #315259;">
<div class="row no-gutters">
<!--
============================================================
LEFT BLOCK (RELATIONSHIPS CAROUSEL)
============================================================
-->
<div class="col-12 col-lg p-lg-5 mr-lg-n5 order-3 order-lg-0 mt-4 mt-lg-0">
<div class="card ml-lg-5 mr-lg-n5 flex-column" style="min-height: 370px; border-radius: 12em 12em 0 0; border: solid 3px #EFF7F6; background: linear-gradient(to bottom, #B2F7EF 33%, #EFF7F6 33%); overflow: hidden; box-shadow: 2px 2px 8px rgba(101,46,53, .5); z-index: 2;">
<div class="flex-grow-1">
<div class="carousel slide" id="beep" data-ride="false" data-pause="true">
<div class="carousel-inner">
<!--
=========================================
CHARACTER RELATIONSHIP BLOCK
=========================================
-->
<div class="carousel-item active p-3">
<div class="align-items-center justify-content-center" style="border-radius: 50%; padding: 50%; background: #EFF7F6; position: relative;">
<div class="card rounded-circle" style="height: calc(100% - 10px); width: calc(100% - 10px); position: absolute; top: 5px; left: 5px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
<h2 class="text-center text-uppercase m-0">
<a style="color: #F2B5D4; font-family: Georgia, serif;" target="_BLANK"
href="LINK_HERE">
<!-- CHARACTER NAME + RELATIONSHIP BELOW, CHARACTER LINK ABOVE -->
<b>
Name
</b>
</a>
</h2>
<p class="text-lowercase text-center mt-n1 mb-2" style="font-size: 17px;">
relationship
</p>
<!--
=======================================
RESPECT STAT
=======================================
-->
<div class="row no-gutters">
<!-- STAT NAME -->
<div class="col align-items-center">
respect
</div>
<div class="col align-items-center">
<div class="progress w-100 rounded-0 fa-flip-horizontal" style="border: solid 4px #7BDFF2; height: 12px; background: #7BDFF2;">
<!-- STAT VALUE == Change 50% to 1-100%
Note that 1% is FAR RIGHT and 100% IS AN EMPTY BAR -->
<div class="progress-bar" style="background: #EFF7F6; width:
50%
;"></div>
</div>
</div>
</div>
<!--
=======================================
TRUST STAT
=======================================
-->
<div class="row no-gutters">
<!-- STAT NAME -->
<div class="col align-items-center">
trust
</div>
<div class="col align-items-center">
<div class="progress w-100 rounded-0 fa-flip-horizontal" style="border: solid 4px #7BDFF2; height: 12px; background: #7BDFF2;">
<!-- STAT VALUE == Change 50% to 1-100%
Note that 1% is FAR RIGHT and 100% IS AN EMPTY BAR -->
<div class="progress-bar" style="background: #EFF7F6; width:
50%
;"></div>
</div>
</div>
</div>
<!--
=======================================
COMFORT STAT
=======================================
-->
<div class="row no-gutters mb-n2">
<!-- STAT NAME -->
<div class="col align-items-center">
comfort
</div>
<div class="col align-items-center">
<div class="progress w-100 rounded-0 fa-flip-horizontal" style="border: solid 4px #7BDFF2; height: 12px; background: #7BDFF2;">
<!-- STAT VALUE == Change 50% to 1-100%
Note that 1% is FAR RIGHT and 100% IS AN EMPTY BAR -->
<div class="progress-bar" style="background: #EFF7F6; width:
50%
;"></div>
</div>
</div>
</div>
</div>
<!--
=========================================
CHARACTER RELATIONSHIP BLOCK
=========================================
-->
<div class="carousel-item p-3">
<div class="align-items-center justify-content-center" style="border-radius: 50%; padding: 50%; background: #EFF7F6; position: relative;">
<div class="card rounded-circle" style="height: calc(100% - 10px); width: calc(100% - 10px); position: absolute; top: 5px; left: 5px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
<h2 class="text-center text-uppercase m-0">
<a style="color: #F2B5D4; font-family: Georgia, serif;" target="_BLANK"
href="LINK_HERE">
<!-- CHARACTER NAME + RELATIONSHIP BELOW, CHARACTER LINK ABOVE -->
<b>
Name
</b>
</a>
</h2>
<p class="text-lowercase text-center mt-n1 mb-2" style="font-size: 17px;">
relationship
</p>
<!--
=======================================
RESPECT STAT
=======================================
-->
<div class="row no-gutters">
<!-- STAT NAME -->
<div class="col align-items-center">
respect
</div>
<div class="col align-items-center">
<div class="progress w-100 rounded-0 fa-flip-horizontal" style="border: solid 4px #7BDFF2; height: 12px; background: #7BDFF2;">
<!-- STAT VALUE == Change 50% to 1-100%
Note that 1% is FAR RIGHT and 100% IS AN EMPTY BAR -->
<div class="progress-bar" style="background: #EFF7F6; width:
50%
;"></div>
</div>
</div>
</div>
<!--
=======================================
TRUST STAT
=======================================
-->
<div class="row no-gutters">
<!-- STAT NAME -->
<div class="col align-items-center">
trust
</div>
<div class="col align-items-center">
<div class="progress w-100 rounded-0 fa-flip-horizontal" style="border: solid 4px #7BDFF2; height: 12px; background: #7BDFF2;">
<!-- STAT VALUE == Change 50% to 1-100%
Note that 1% is FAR RIGHT and 100% IS AN EMPTY BAR -->
<div class="progress-bar" style="background: #EFF7F6; width:
50%
;"></div>
</div>
</div>
</div>
<!--
=======================================
COMFORT STAT
=======================================
-->
<div class="row no-gutters mb-n2">
<!-- STAT NAME -->
<div class="col align-items-center">
comfort
</div>
<div class="col align-items-center">
<div class="progress w-100 rounded-0 fa-flip-horizontal" style="border: solid 4px #7BDFF2; height: 12px; background: #7BDFF2;">
<!-- STAT VALUE == Change 50% to 1-100%
Note that 1% is FAR RIGHT and 100% IS AN EMPTY BAR -->
<div class="progress-bar" style="background: #EFF7F6; width:
50%
;"></div>
</div>
</div>
</div>
</div>
<!--
=========================================
CHARACTER RELATIONSHIP BLOCK
=========================================
-->
<div class="carousel-item p-3">
<div class="align-items-center justify-content-center" style="border-radius: 50%; padding: 50%; background: #EFF7F6; position: relative;">
<div class="card rounded-circle" style="height: calc(100% - 10px); width: calc(100% - 10px); position: absolute; top: 5px; left: 5px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
</div>
<h2 class="text-center text-uppercase m-0">
<a style="color: #F2B5D4; font-family: Georgia, serif;" target="_BLANK"
href="LINK_HERE">
<!-- CHARACTER NAME + RELATIONSHIP BELOW, CHARACTER LINK ABOVE -->
<b>
Name
</b>
</a>
</h2>
<p class="text-lowercase text-center mt-n1 mb-2" style="font-size: 17px;">
relationship
</p>
<!--
=======================================
RESPECT STAT
=======================================
-->
<div class="row no-gutters">
<!-- STAT NAME -->
<div class="col align-items-center">
respect
</div>
<div class="col align-items-center">
<div class="progress w-100 rounded-0 fa-flip-horizontal" style="border: solid 4px #7BDFF2; height: 12px; background: #7BDFF2;">
<!-- STAT VALUE == Change 50% to 1-100%
Note that 1% is FAR RIGHT and 100% IS AN EMPTY BAR -->
<div class="progress-bar" style="background: #EFF7F6; width:
50%
;"></div>
</div>
</div>
</div>
<!--
=======================================
TRUST STAT
=======================================
-->
<div class="row no-gutters">
<!-- STAT NAME -->
<div class="col align-items-center">
trust
</div>
<div class="col align-items-center">
<div class="progress w-100 rounded-0 fa-flip-horizontal" style="border: solid 4px #7BDFF2; height: 12px; background: #7BDFF2;">
<!-- STAT VALUE == Change 50% to 1-100%
Note that 1% is FAR RIGHT and 100% IS AN EMPTY BAR -->
<div class="progress-bar" style="background: #EFF7F6; width:
50%
;"></div>
</div>
</div>
</div>
<!--
=======================================
COMFORT STAT
=======================================
-->
<div class="row no-gutters mb-n2">
<!-- STAT NAME -->
<div class="col align-items-center">
comfort
</div>
<div class="col align-items-center">
<div class="progress w-100 rounded-0 fa-flip-horizontal" style="border: solid 4px #7BDFF2; height: 12px; background: #7BDFF2;">
<!-- STAT VALUE == Change 50% to 1-100%
Note that 1% is FAR RIGHT and 100% IS AN EMPTY BAR -->
<div class="progress-bar" style="background: #EFF7F6; width:
50%
;"></div>
</div>
</div>
</div>
</div>
<!-- YOU CAN ADD MOR REELATIONSHIP BLOCKS ABOVE -->
</div>
</div>
</div>
<!-- SLIDE BUTTONS AND SECTION HEADER -->
<div class="p-2" style="background: #F7D6E0; text-shadow: 1px 1px 0px #7BDFF2, 2px 2px 0px #7BDFF2, 3px 3px 0px #7BDFF2; font-size: 25px;">
<div class="row no-gutters align-items-center">
<div class="col-auto">
<a href="#beep" style="color: #fff;" data-slide="prev"><i class="fas fa-angle-left"></i></a>
</div>
<div class="col">
<h2 class="m-0 text-center text-uppercase" style="color: #fff;">
<b>
Related
</b>
</h2>
</div>
<div class="col-auto">
<a href="#beep" style="color: #fff;" data-slide="next"><i class="fas fa-angle-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<!--
============================================================
CENTRAL BLOCK (CHARACTER NAME + IMAGE + ADJ)
============================================================
-->
<div class="card col-12 col-lg-5 flex-column rounded-0" style="min-height: 550px; border: solid 3px #F2B5D4; background: #F2B5D4; box-shadow: 0 0 10px rgba(101,46,53, .8);">
<div class="p-1 py-2" style="min-height: 50px; font-family: Georgia, serif;">
<h2 class="m-0 text-center text-uppercase" style="color: #fff; font-size: 30px; text-shadow: 1px 1px 0px #F7D6E0, 2px 2px 0px #F7D6E0, 3px 3px 0px #F7D6E0;">
<b>
Character name
</b>
</h2>
</div>
<!-- CHARACTER IMAGE BANNER -->
<div class="flex-grow-1" style="border: solid 3px; border-top-color: #EFF7F6; border-left-color: #EFF7F6; border-right-color: #B2F7EF; border-bottom-color: #B2F7EF;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
<!-- CHARACTER ADJECTIVES LINE -->
<div class="p-1 py-2 align-items-center justify-content-center" style="min-height: 50px;">
<p class="m-0 text-center text-uppercase" style="color: #fff;">
<b>
adjective • adjective • adjective
</b>
</p>
</div>
</div>
<!--
============================================================
RIGHT BLOCK (INFO ACCORDION TABS)
============================================================
-->
<div class="col-12 col-lg p-lg-5 ml-lg-n5 align-items-end mt-4 mt-lg-0" style="z-index: 2;">
<div class="card ml-lg-n5 mr-lg-5 rounded-0 w-100 mb-lg-3" style="min-height: 340px; border: solid 3px #7BDFF2; background: #7BDFF2; box-shadow: -2px 2px 8px rgba(101,46,53, .5); ">
<div class="accordion" id="showinfo">
<!--
=====================================================
FIRST ACCORDION TAB (BASICS)
=====================================================
-->
<div>
<!--
==================================
ACCORDION TAB HEADER
==================================
-->
<div class="card rounded-0 border-0 p-1" style="background: #7BDFF2;">
<a data-toggle="collapse" data-target="#one" class="text-center" aria-expandanded="true">
<h2 class="m-0 text-center text-uppercase" style="color: #fff; text-shadow: 1px 1px 0px #F7D6E0, 2px 2px 0px #F7D6E0, 3px 3px 0px #F7D6E0;"><b>
Basics
</b></h2></a>
</div>
<!--
==================================
ACCORDION TAB CONTENT
==================================
-->
<div id="one" class="collapse show" data-parent="#showinfo">
<div class="p-2" style="background: #EFF7F6; height: 241px; overflow: auto;">
<!-- GENDER -->
<div class="row no-gutters justify-content-between">
<span class="text-uppercase" style="font-weight: 700; letter-spacing: -1px; color: #F2B5D4;"><i class="fas fa-venus-mars fa-fw"></i>
gender
</span>
<span>
content
</span>
</div>
<!-- PRONOUNS -->
<div class="row no-gutters justify-content-between">
<span class="text-uppercase" style="font-weight: 700; letter-spacing: -1px; color: #F2B5D4;"><i class="fas fa-comments fa-fw"></i>
prns
</span>
<span>
Cont/Cont
</span>
</div>
<!-- ORIENTATION -->
<div class="row no-gutters justify-content-between">
<span class="text-uppercase" style="font-weight: 700; letter-spacing: -1px; color: #F2B5D4;"><i class="fas fa-heartbeat fa-fw"></i>
S.O.
</span>
<span>
content
</span>
</div>
<!-- AGE -->
<div class="row no-gutters justify-content-between">
<span class="text-uppercase" style="font-weight: 700; letter-spacing: -1px; color: #F2B5D4;"><i class="fas fa-hourglass fa-fw"></i>
age
</span>
<span>
content
</span>
</div>
<!-- DOB -->
<div class="row no-gutters justify-content-between">
<span class="text-uppercase" style="font-weight: 700; letter-spacing: -1px; color: #F2B5D4;"><i class="fas fa-birthday-cake fa-fw"></i>
DoB
</span>
<span>
content
</span>
</div>
<!-- SIGN -->
<div class="row no-gutters justify-content-between">
<span class="text-uppercase" style="font-weight: 700; letter-spacing: -1px; color: #F2B5D4;"><i class="fas fa-star-shooting fa-fw"></i>
Sign
</span>
<span>
content
</span>
</div>
<!-- ROLE -->
<div class="row no-gutters justify-content-between">
<span class="text-uppercase" style="font-weight: 700; letter-spacing: -1px; color: #F2B5D4;"><i class="fas fa-suitcase fa-fw"></i>
Role
</span>
<span>
content
</span>
</div>
<!-- SPECIES -->
<div class="row no-gutters justify-content-between">
<span class="text-uppercase" style="font-weight: 700; letter-spacing: -1px; color: #F2B5D4;"><i class="fas fa-dna fa-fw"></i>
Species
</span>
<span>
content
</span>
</div>
<!-- HEIGHT -->
<div class="row no-gutters justify-content-between">
<span class="text-uppercase" style="font-weight: 700; letter-spacing: -1px; color: #F2B5D4;"><i class="fas fa-ruler-vertical fa-fw"></i>
Height
</span>
<span>
content
</span>
</div>
<!-- DIVIDER -->
<hr style="border-top: dashed 3px #F7D6E0; margin: 3px 0;">
<!-- THEME -->
<div class="row no-gutters justify-content-between">
<div class="col">
<span class="text-uppercase" style="font-weight: 700; letter-spacing: -1px; color: #F2B5D4;"><i class="fas fa-music fa-fw"></i>
Theme
</span>
</div>
<div class="col-auto d-flex col-auto align-items-center justify-content-center">
<div class="card border-0 align-items-center tooltipster" style="width: 20px; height: 15px; background: none; position: relative; overflow: hidden;"
title="The Knocks - Classic">
<!-- ^ SONG NAME + AUTHOR ABOVE -->
<i class="fas fa-play" style="position: absolute; color: #7BDFF2;"></i>
<iframe style="opacity: 0.001; height: 800%; width: 1250%; position: absolute; bottom: -2px; left: -2px;"
src="https://www.youtube.com/embed/EbEm0WadtMs"></iframe>
<!-- YOUTUBE EMBED == INSERT VIDEO ID HERE ^ -->
</div>
</div>
</div>
</div>
</div>
</div>
<!--
=====================================================
SECOND ACCORDION TAB (PERSONALITY)
=====================================================
-->
<div>
<!--
==================================
ACCORDION TAB HEADER
==================================
-->
<div class="card rounded-0 border-0 p-1" style="background: #7BDFF2;">
<a data-toggle="collapse" data-target="#two" class="text-center" aria-expandanded="true">
<h2 class="m-0 text-center text-uppercase" style="color: #fff; text-shadow: 1px 1px 0px #F7D6E0, 2px 2px 0px #F7D6E0, 3px 3px 0px #F7D6E0;"><b>
Personality
</b></h2></a>
</div>
<!--
==================================
ACCORDION TAB CONTENT
==================================
-->
<div id="two" class="collapse" data-parent="#showinfo">
<div class="p-2" style="background: #EFF7F6; height: 241px; overflow: auto;">
<!--
=======================================
CHARISMA STAT
=======================================
-->
<div class="row no-gutters">
<!-- STAT NAME -->
<div class="col align-items-center">
charisma
</div>
<div class="col align-items-center">
<div class="progress w-100 rounded-0 fa-flip-horizontal" style="border: solid 4px #F2B5D4; background: #F2B5D4; height: 12px;">
<!-- STAT VALUE == Change 50% to 1-100%
Note that 1% is FAR RIGHT and 100% IS AN EMPTY BAR -->
<div class="progress-bar" style="background: #EFF7F6; width:
50%
;"></div>
</div>
</div>
</div>
<!--
=======================================
KINDNESS STAT
=======================================
-->
<div class="row no-gutters">
<!-- STAT NAME -->
<div class="col align-items-center">
kindness
</div>
<div class="col align-items-center">
<div class="progress w-100 rounded-0 fa-flip-horizontal" style="border: solid 4px #F2B5D4; background: #F2B5D4; height: 12px;">
<!-- STAT VALUE == Change 50% to 1-100%
Note that 1% is FAR RIGHT and 100% IS AN EMPTY BAR -->
<div class="progress-bar" style="background: #EFF7F6; width:
50%
;"></div>
</div>
</div>
</div>
<!--
=======================================
PATIENCE STAT
=======================================
-->
<div class="row no-gutters">
<!-- STAT NAME -->
<div class="col align-items-center">
patience
</div>
<div class="col align-items-center">
<div class="progress w-100 rounded-0 fa-flip-horizontal" style="border: solid 4px #F2B5D4; background: #F2B5D4; height: 12px;">
<!-- STAT VALUE == Change 50% to 1-100%
Note that 1% is FAR RIGHT and 100% IS AN EMPTY BAR -->
<div class="progress-bar" style="background: #EFF7F6; width:
50%
;"></div>
</div>
</div>
</div>
<!--
=======================================
INTEGRITY STAT
=======================================
-->
<div class="row no-gutters">
<!-- STAT NAME -->
<div class="col align-items-center">
integrity
</div>
<div class="col align-items-center">
<div class="progress w-100 rounded-0 fa-flip-horizontal" style="border: solid 4px #F2B5D4; background: #F2B5D4; height: 12px;">
<!-- STAT VALUE == Change 50% to 1-100%
Note that 1% is FAR RIGHT and 100% IS AN EMPTY BAR -->
<div class="progress-bar" style="background: #EFF7F6; width:
50%
;"></div>
</div>
</div>
</div>
<!--
=======================================
INTELELCT STAT
=======================================
-->
<div class="row no-gutters">
<!-- STAT NAME -->
<div class="col align-items-center">
intellect
</div>
<div class="col align-items-center">
<div class="progress w-100 rounded-0 fa-flip-horizontal" style="border: solid 4px #F2B5D4; background: #F2B5D4; height: 12px;">
<!-- STAT VALUE == Change 50% to 1-100%
Note that 1% is FAR RIGHT and 100% IS AN EMPTY BAR -->
<div class="progress-bar" style="background: #EFF7F6; width:
50%
;"></div>
</div>
</div>
</div>
<!--
=======================================
MATURITY STAT
=======================================
-->
<div class="row no-gutters">
<!-- STAT NAME -->
<div class="col align-items-center">
maturity
</div>
<div class="col align-items-center">
<div class="progress w-100 rounded-0 fa-flip-horizontal" style="border: solid 4px #F2B5D4; background: #F2B5D4; height: 12px;">
<!-- STAT VALUE == Change 50% to 1-100%
Note that 1% is FAR RIGHT and 100% IS AN EMPTY BAR -->
<div class="progress-bar" style="background: #EFF7F6; width:
50%
;"></div>
</div>
</div>
</div>
<!--
=======================================
COURAGE STAT
=======================================
-->
<div class="row no-gutters">
<!-- STAT NAME -->
<div class="col align-items-center">
courage
</div>
<div class="col align-items-center">
<div class="progress w-100 rounded-0 fa-flip-horizontal" style="border: solid 4px #F2B5D4; background: #F2B5D4; height: 12px;">
<!-- STAT VALUE == Change 50% to 1-100%
Note that 1% is FAR RIGHT and 100% IS AN EMPTY BAR -->
<div class="progress-bar" style="background: #EFF7F6; width:
50%
;"></div>
</div>
</div>
</div>
<!--
=======================================
HUMOUR STAT
=======================================
-->
<div class="row no-gutters">
<!-- STAT NAME -->
<div class="col align-items-center">
humour
</div>
<div class="col align-items-center">
<div class="progress w-100 rounded-0 fa-flip-horizontal" style="border: solid 4px #F2B5D4; background: #F2B5D4; height: 12px;">
<!-- STAT VALUE == Change 50% to 1-100%
Note that 1% is FAR RIGHT and 100% IS AN EMPTY BAR -->
<div class="progress-bar" style="background: #EFF7F6; width:
50%
;"></div>
</div>
</div>
</div>
<!--
=======================================
TEMPER STAT
=======================================
-->
<div class="row no-gutters">
<!-- STAT NAME -->
<div class="col align-items-center">
temper
</div>
<div class="col align-items-center">
<div class="progress w-100 rounded-0 fa-flip-horizontal" style="border: solid 4px #F2B5D4; background: #F2B5D4; height: 12px;">
<!-- STAT VALUE == Change 50% to 1-100%
Note that 1% is FAR RIGHT and 100% IS AN EMPTY BAR -->
<div class="progress-bar" style="background: #EFF7F6; width:
50%
;"></div>
</div>
</div>
</div>
<!-- DIVIDER -->
<hr class="my-2" style="border-top: dashed 3px #F7D6E0;">
<h5 class="text-uppercase text-center" style="color: #F2B5D4;"><b>
Positive traits
</b></h5>
<!--
======================================
POSITIVE TRAITS LIST
======================================
-->
<ul class="fa-ul text-lowercase">
<!-- TRAIT ITEM (PINK) -->
<li><span class="fa-li"><i class="fas fa-plus" style="color: #F2B5D4;"></i></span>
trait
</li>
<!-- TRAIT ITEM (BLUE) -->
<li><span class="fa-li"><i class="fas fa-plus" style="color: #7BDFF2;"></i></span>
trait
</li>
<!-- TRAIT ITEM (PINK) -->
<li><span class="fa-li"><i class="fas fa-plus" style="color: #F2B5D4;"></i></span>
trait
</li>
<!-- TRAIT ITEM (BLUE) -->
<li><span class="fa-li"><i class="fas fa-plus" style="color: #7BDFF2;"></i></span>
trait
</li>
<!-- YOU CAN ADD MORE TRAITS ABOVE -->
</ul>
<h5 class="text-uppercase text-center" style="color: #F2B5D4;"><b>
Negative traits
</b></h5>
<!--
======================================
NEGATIVE TRAITS LIST
======================================
-->
<ul class="fa-ul text-lowercase">
<!-- TRAIT ITEM (PINK) -->
<li><span class="fa-li"><i class="fas fa-minus" style="color: #F2B5D4;"></i></span>
trait
</li>
<!-- TRAIT ITEM (BLUE) -->
<li><span class="fa-li"><i class="fas fa-minus" style="color: #7BDFF2;"></i></span>
trait
</li>
<!-- TRAIT ITEM (PINK) -->
<li><span class="fa-li"><i class="fas fa-minus" style="color: #F2B5D4;"></i></span>
trait
</li>
<!-- TRAIT ITEM (BLUE) -->
<li><span class="fa-li"><i class="fas fa-minus" style="color: #7BDFF2;"></i></span>
trait
</li>
<!-- YOU CAN ADD MORE TRAITS ABOVE -->
</ul>
<!-- DIVIDER -->
<hr class="my-2" style="border-top: dashed 3px #F7D6E0;">
<h5 class="text-uppercase text-center" style="color: #F2B5D4;"><b>
Trivia
</b></h5>
<!--
======================================
TRIVIA LIST
======================================
-->
<ul class="fa-ul text-lowercase" style="font-size: 13px;">
<!-- TRAIT ITEM (PINK ICECREAM) -->
<li><span class="fa-li"><i class="fas fa-ice-cream" style="color: #F2B5D4;"></i></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<!-- TRAIT ITEM (BLUE ICECREAM) -->
<li><span class="fa-li"><i class="fas fa-ice-cream" style="color: #7BDFF2;"></i></span>
Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.
</li>
<!-- TRAIT ITEM (PINK ICECREAM) -->
<li><span class="fa-li"><i class="fas fa-ice-cream" style="color: #F2B5D4;"></i></span>
Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.
</li>
<!-- TRAIT ITEM (BLUE ICECREAM) -->
<li><span class="fa-li"><i class="fas fa-ice-cream" style="color: #7BDFF2;"></i></span>
Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</li>
<!-- YOU CAN ADD MORE ITEMS ABOVE -->
</ul>
<!--
======================================
LIKES LIST
======================================
-->
<div class="p-1 mb-2" style="background: #F7D6E0;">
<h2 class="m-0 mb-2 text-center text-uppercase" style="color: #fff; text-shadow: 1px 1px 0px #7BDFF2, 2px 2px 0px #7BDFF2, 3px 3px 0px #7BDFF2;">
<b>
Likes
</b>
</h2>
<ul class="fa-ul text-lowercase mb-1" style="color: #fff; font-weight: 700; text-shadow: 1px 1px 0px #7BDFF2, 2px 2px 0px #7BDFF2;">
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fas fa-heart"></i></span>
content
</li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fas fa-heart"></i></span>
content
</li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fas fa-heart"></i></span>
content
</li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fas fa-heart"></i></span>
content
</li>
<!-- YOU CAN ADD MORE LIST ITEMS ABOVE -->
</ul>
</div>
<!--
======================================
DISLIKES LIST
======================================
-->
<div class="p-1" style="background: #F7D6E0;">
<h2 class="m-0 mb-2 text-center text-uppercase" style="color: #fff; text-shadow: 1px 1px 0px #7BDFF2, 2px 2px 0px #7BDFF2, 3px 3px 0px #7BDFF2;">
<b>
Dislikes
</b>
</h2>
<ul class="fa-ul text-lowercase mb-1" style="color: #fff; font-weight: 700; text-shadow: 1px 1px 0px #7BDFF2, 2px 2px 0px #7BDFF2;">
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fas fa-heart-crack"></i></span>
content
</li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fas fa-heart-crack"></i></span>
content
</li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fas fa-heart-crack"></i></span>
content
</li>
<!-- LIST ITEM -->
<li><span class="fa-li"><i class="fas fa-heart-crack"></i></span>
content
</li>
<!-- YOU CAN ADD MORE LIST ITEMS ABOVE -->
</ul>
</div>
</div>
</div>
</div>
<!--
=====================================================
THIRD ACCORDION TAB (STORY)
=====================================================
-->
<div>
<!--
==================================
ACCORDION TAB HEADER
==================================
-->
<div class="card rounded-0 border-0 p-1" style="background: #7BDFF2;">
<a data-toggle="collapse" data-target="#three" class="text-center" aria-expandanded="true">
<h2 class="m-0 text-center text-uppercase" style="color: #fff; text-shadow: 1px 1px 0px #F7D6E0, 2px 2px 0px #F7D6E0, 3px 3px 0px #F7D6E0;"><b>
Story
</b></h2></a>
</div>
<!--
==================================
ACCORDION TAB CONTENT
==================================
-->
<div id="three" class="collapse" data-parent="#showinfo">
<div class="p-2 text-justify" style="background: #EFF7F6; font-size: 13px; height: 241px; overflow: auto;">
<h5 class="text-uppercase" style="color: #F2B5D4;"><b><span class="pull-right"><i class="fas fa-bookmark"></i></span>
Subheader
</b></h5>
<!-- DIVIDER -->
<hr class="my-2" style="border-top: dashed 3px #F7D6E0;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<h5 class="text-uppercase" style="color: #F2B5D4;"><b><span class="pull-right"><i class="fas fa-bookmark"></i></span>
Subheader
</b></h5>
<!-- DIVIDER -->
<hr class="my-2" style="border-top: dashed 3px #F7D6E0;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<h5 class="text-uppercase" style="color: #F2B5D4;"><b><span class="pull-right"><i class="fas fa-bookmark"></i></span>
Subheader
</b></h5>
<!-- DIVIDER -->
<hr class="my-2" style="border-top: dashed 3px #F7D6E0;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<!-- YOU CAN ADD MORE PARAGRAPHS AND SUBHEADERS ABOVE -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CREDIT == DO NOT REMOVE -->
<div class="col-12 text-center mt-1 order-4 order-lg-0">
<a class="text-uppercase" href="https://toyhou.se/ChiiAka" style="color: #fff; text-shadow: 0 0 5px rgba(101,46,53, .8), 0 0 10px rgba(101,46,53, .8); font-size: 13px;">
<b>
Code by chiiaka
</b>
</a>
</div>
</div>
</div>
</div>