Profile
<!---------------------------------------------------------
BRING IT ON [F2U]
COLOURS:
- Black: #181818
- White: #fff
- Off-White: #eee
- Accent (Red): #
BAR COLOURS (GRADIENTS):
HEALTH:
- Blue: #0396CF
- Green: #72F964
CHARGE:
- Red: #E51E1B
- Yellow: #FEEA6D
This code also features various bootstrap aspects, such as:
bg-faded, text-secondary, bg-outline-secondary,
text-light, and likely more.
It is up to you whether to mess with these or not.
----------------------------------------------------------->
<div class="container p-0" style="width:800px; font-family:monospace;">
<div class="card rounded-0 border-0 p-3" style="background-color:#181818"><i class="fa-solid fa-scale-unbalanced fa-xl p-2 faded" style="color:#fff;"></i></div>
<div class="card rounded-0 p-4 bg-faded" style="border:solid #181818; border-width:0px 1px 0px 1px;">
<!--------------------------------------------------------------------------------------------------------------->
<!-- NAME + BARS -->
<div class="row no-gutters ml-1" style="max-height:110px;">
<!-- FILLER -->
<div class="col-3 p-1"></div>
<!-- NAME + BARS -->
<div class="col-7 ml-4 p-1">
<!-- NAME -->
<div class="card p-1 border-0 rounded-0 bg-transparent" style="font-size:30px;">
<span>
<span class="font-weight-bold text-uppercase" style="letter-spacing:1px;">Name</span>
<i class="fa-solid fa-fire-flame-curved" style="margin-left:-8px;"></i>
</span>
</div>
<!-- HEALTH BAR; Change [width:100%] to depict how full/empty it is! -->
<div class="row no-gutters mb-2">
<div class="col-1">
<div class="card rounded-0" style="background-color:#eee; border:3px solid #181818; height:15px;"></div>
</div>
<div class="col-11">
<div class="progress rounded-0" style="border:solid #181818; border-width:3px 3px 3px 0px; height:15px; background-color:#181818;">
<div class="progress-bar" style="width:100%; background-image:linear-gradient(to right,#0396CF 0%,#72F964 100%);"></div>
</div>
</div>
</div>
<!-- CHARGE BAR; Change [width:100%] to depict how full/empty it is! -->
<div class="row no-gutters mb-2">
<div class="col-1">
<div class="card rounded-0" style="background-color:#eee; border:3px solid #181818; height:15px;"></div>
</div>
<div class="col-11">
<div class="progress rounded-0" style="border:solid #181818; border-width:3px 3px 3px 0px; height:15px; background-color:#181818;">
<div class="progress-bar" style="width:100%; background-image:linear-gradient(to right,#E51E1B 0%,#FEEA6D 100%);"></div>
</div>
</div>
</div>
</div>
<!-- FILLER -->
<div class="col-2 p-1"></div>
</div>
<!-- SONG -->
<div class="row no-gutters">
<!-- FILLER -->
<div class="col-4 p-1"></div>
<!-- SONG PLATE -->
<div class="col-8 p-1">
<div class="card rounded-0 border-0 p-2" style="background-color:#181818; color:#fff;">
<p class="text-uppercase"><b>Song Title</b> - <i>Artist</i></p>
<div class="card rounded-0 border-0 p-2 justify-content-center text-center bg-faded" style="position:absolute; top:-12px; right:10px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);">
<div class="card rounded-0 border-0 p-3" style="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background-color:#181818;">
<i class="fas fa-play" style="color:#fff;"></i>
</div>
</div>
<!-- Replace [ EMBED_URL ] with the string after "watch?v=". -->
<iframe allowfullscreen class="tooltipster d-none d-lg-flex"
frameborder="0"
src="https://www.youtube.com/embed/EMBED_URL"
style="height:50px; width:50px; opacity:0.0001; position:absolute; top:-5px; right:15px; "></iframe>
</div>
</div>
</div>
<!-- PORTRAIT + CONTENT BOX -->
<div class="row no-gutters">
<!-- PORTRAIT -->
<div class="col-4 p-1">
<div class="card h-100 border-0 rounded-0 p-1" style="clip-path: polygon(15% 0, 85% 0, 100% 20%, 100% 80%, 85% 100%, 15% 100%, 0% 80%, 0% 20%); background-color:#181818;">
<div class="card h-100 border-0 rounded-0 bg-faded p-1" style="clip-path: polygon(15% 0, 85% 0, 100% 20%, 100% 80%, 85% 100%, 15% 100%, 0% 80%, 0% 20%);">
<div class="card h-100 border-0 rounded-0 p-1" style="clip-path: polygon(15% 0, 85% 0, 100% 20%, 100% 80%, 85% 100%, 15% 100%, 0% 80%, 0% 20%); background-color:#181818;">
<div class="card h-100 border-0 rounded-0 bg-faded" style="clip-path: polygon(15% 0, 85% 0, 100% 20%, 100% 80%, 85% 100%, 15% 100%, 0% 80%, 0% 20%);
background-image:url(POR_URL);
background-size:cover;
background-position:center;">
</div>
</div>
</div>
</div>
</div>
<!-- CONTENT -->
<div class="col-8 p-1">
<div class="card border-0 rounded-0 p-1" style="background-color:#181818;">
<div class="card border-0 rounded-0 bg-faded p-1 h-100">
<div class="tab-content">
<!-- HOME -->
<div class="tab-pane fade active show" id="one">
<div class="card border-0 rounded-0 p-2" style="height:300px; background-color:#eee; color:#181818;">
<div class="row no-gutters">
<div class="col-6 p-1">
<!-- NAME -->
<div>
<div class="row no-gutters">
<div class="col-2">
<div class="card h-100 p-2 border-0 text-center justify-content-center" style="border-radius:0px 10px;background-color:#181818;">
<i class="fas fa-signature" style="color:#EA170A;"></i>
</div>
</div>
<div class="col-10">
<div class="card rounded-0 p-1 pr-1 bg-transparent text-right" style="border:solid #181818; border-width:0px 0px 1px 0px;">content</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-8"></div>
<div class="col-4">
<div class="card text-center rounded-0 p-1 border-0" style="background-color:#181818; color:#fff; font-size:10px;">NAME</div>
</div>
</div>
</div>
<!-- AGE -->
<div>
<div class="row no-gutters">
<div class="col-2">
<div class="card h-100 p-2 border-0 text-center justify-content-center" style="border-radius:0px 10px;background-color:#181818;">
<i class="fas fa-calendar-day" style="color:#EA170A;"></i>
</div>
</div>
<div class="col-10">
<div class="card rounded-0 p-1 pr-1 bg-transparent text-right" style="border:solid #181818; border-width:0px 0px 1px 0px;">content</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-8"></div>
<div class="col-4">
<div class="card text-center rounded-0 p-1 border-0" style="background-color:#181818; color:#fff; font-size:10px;">AGE</div>
</div>
</div>
</div>
<!-- BIRTHDAY -->
<div>
<div class="row no-gutters">
<div class="col-2">
<div class="card h-100 p-2 border-0 text-center justify-content-center" style="border-radius:0px 10px;background-color:#181818;">
<i class="fas fa-cake" style="color:#EA170A;"></i>
</div>
</div>
<div class="col-10">
<div class="card rounded-0 p-1 pr-1 bg-transparent text-right" style="border:solid #181818; border-width:0px 0px 1px 0px;">content</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-8"></div>
<div class="col-4">
<div class="card text-center rounded-0 p-1 border-0" style="background-color:#181818; color:#fff; font-size:10px;">BIRTHDAY</div>
</div>
</div>
</div>
<!-- GENDER -->
<div>
<div class="row no-gutters">
<div class="col-2">
<div class="card h-100 p-2 border-0 text-center justify-content-center" style="border-radius:0px 10px;background-color:#181818;">
<i class="fas fa-venus-mars" style="color:#EA170A;"></i>
</div>
</div>
<div class="col-10">
<div class="card rounded-0 p-1 pr-1 bg-transparent text-right" style="border:solid #181818; border-width:0px 0px 1px 0px;">content</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-8"></div>
<div class="col-4">
<div class="card text-center rounded-0 p-1 border-0" style="background-color:#181818; color:#fff; font-size:10px;">GENDER</div>
</div>
</div>
</div>
<!-- PRONOUNS -->
<div>
<div class="row no-gutters">
<div class="col-2">
<div class="card h-100 p-2 border-0 text-center justify-content-center" style="border-radius:0px 10px;background-color:#181818;">
<i class="fas fa-id-card" style="color:#EA170A;"></i>
</div>
</div>
<div class="col-10">
<div class="card rounded-0 p-1 pr-1 bg-transparent text-right" style="border:solid #181818; border-width:0px 0px 1px 0px;">content</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-8"></div>
<div class="col-4">
<div class="card text-center rounded-0 p-1 border-0" style="background-color:#181818; color:#fff; font-size:10px;">PRONOUNS</div>
</div>
</div>
</div>
</div>
<div class="col-6 p-1">
<!-- SPECIES -->
<div>
<div class="row no-gutters">
<div class="col-10">
<div class="card rounded-0 p-1 pr-1 bg-transparent" style="border:solid #181818; border-width:0px 0px 1px 0px;">content</div>
</div>
<div class="col-2">
<div class="card h-100 p-2 border-0 text-center justify-content-center" style="border-radius:10px 0px;background-color:#181818;">
<i class="fas fa-dna" style="color:#EA170A;"></i>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-4">
<div class="card text-center rounded-0 p-1 border-0" style="background-color:#181818; color:#fff; font-size:10px;">SPECIES</div>
</div>
<div class="col-8"></div>
</div>
</div>
<!-- ORIENTATION -->
<div>
<div class="row no-gutters">
<div class="col-10">
<div class="card rounded-0 p-1 pr-1 bg-transparent" style="border:solid #181818; border-width:0px 0px 1px 0px;">content</div>
</div>
<div class="col-2">
<div class="card h-100 p-2 border-0 text-center justify-content-center" style="border-radius:10px 0px;background-color:#181818;">
<i class="fas fa-heart" style="color:#EA170A;"></i>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-4">
<div class="card text-center rounded-0 p-1 border-0" style="background-color:#181818; color:#fff; font-size:10px;">ORIENTATION</div>
</div>
<div class="col-8"></div>
</div>
</div>
<!-- OCCUPATION -->
<div>
<div class="row no-gutters">
<div class="col-10">
<div class="card rounded-0 p-1 pr-1 bg-transparent" style="border:solid #181818; border-width:0px 0px 1px 0px;">content</div>
</div>
<div class="col-2">
<div class="card h-100 p-2 border-0 text-center justify-content-center" style="border-radius:10px 0px;background-color:#181818;">
<i class="fas fa-briefcase" style="color:#EA170A;"></i>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-4">
<div class="card text-center rounded-0 p-1 border-0" style="background-color:#181818; color:#fff; font-size:10px;">OCCUPATION</div>
</div>
<div class="col-8"></div>
</div>
</div>
<!-- DESIGNER -->
<div>
<div class="row no-gutters">
<div class="col-10">
<div class="card rounded-0 p-1 pr-1 bg-transparent" style="border:solid #181818; border-width:0px 0px 1px 0px;">
<a href="/" class="text-secondary">content</a>
</div>
</div>
<div class="col-2">
<div class="card h-100 p-2 border-0 text-center justify-content-center" style="border-radius:10px 0px;background-color:#181818;">
<i class="fas fa-ruler-combined" style="color:#EA170A;"></i>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-4">
<div class="card text-center rounded-0 p-1 border-0" style="background-color:#181818; color:#fff; font-size:10px;">DESIGNER</div>
</div>
<div class="col-8"></div>
</div>
</div>
<!-- STATUS -->
<div>
<div class="row no-gutters">
<div class="col-10">
<div class="card rounded-0 p-1 pr-1 bg-transparent" style="border:solid #181818; border-width:0px 0px 1px 0px;">content</div>
</div>
<div class="col-2">
<div class="card h-100 p-2 border-0 text-center justify-content-center" style="border-radius:10px 0px;background-color:#181818;">
<i class="fa-solid fa-hands-holding" style="color:#EA170A;"></i>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-4">
<div class="card text-center rounded-0 p-1 border-0" style="background-color:#181818; color:#fff; font-size:10px;">STATUS</div>
</div>
<div class="col-8"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ABOUT -->
<div class="tab-pane fade" id="two">
<div class="card border-0 rounded-0 p-2" style="height:300px; background-color:#eee; color:#181818; overflow:auto;">
<!-- BRIEF DESCRIPTION -->
<div class="card rounded-0 border-0 p-0 mb-2" style="background-color:#181818; color:#fff;">
<div class="card rounded-0 border-0 p-3 bg-transparent text-justify" style="overflow:auto; height:130px; font-size:13px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat, nisi ac auctor fermentum, lorem neque tempor elit, hendrerit vulputate dolor orci sed neque. Cras pellentesque, quam nec ultricies ullamcorper, erat ipsum sollicitudin dui, nec luctus enim nunc sed est. Duis blandit turpis id lectus tincidunt placerat. Aenean lacus dolor, blandit nec sollicitudin in, blandit ac mauris. Suspendisse a egestas risus. Nullam auctor feugiat risus vel malesuada. Aenean consequat, libero sed imperdiet feugiat, elit sapien fermentum risus, in elementum risus neque in risus. Cras dapibus massa sit amet dictum efficitur. Nunc scelerisque mauris nec auctor euismod. Nunc at orci dictum, rhoncus leo eu, ultrices sapien. Suspendisse laoreet urna a vehicula lacinia. Aliquam blandit pellentesque sagittis. Sed ut fringilla nibh. Phasellus ultricies fermentum vulputate.</p>
</div>
</div>
<!-- STATS, PT. 1 (BARS) -->
<div class="card rounded-0 p-2 bg-transparent mb-2" style="border:2px solid #181818;">
<div class="row no-gutters">
<div class="col-6 pr-1">
<!-- INTELLIGENCE -->
<div class="mb-2">
<div class="justify-content-between">
<span>
<i class="fa-light fa-brain-circuit"></i>
INTELLIGENCE
</span>
<span class="faded">[50%]</span>
</div>
<div class="progress rounded-0" style="background-color:#181818;">
<div class="progress-bar" style="width:50%; height:10px; background-color:#EA170A;"></div>
</div>
</div>
<!-- CONFIDENCE -->
<div class="mb-2">
<div class="justify-content-between">
<span>
<i class="fa-light fa-face-smile"></i>
CONFIDENCE
</span>
<span class="faded">[50%]</span>
</div>
<div class="progress rounded-0" style="background-color:#181818;">
<div class="progress-bar" style="width:50%; height:10px; background-color:#EA170A;"></div>
</div>
</div>
<!-- HUMOUR -->
<div class="mb-1">
<div class="justify-content-between">
<span>
<i class="fa-light fa-face-grin-tears"></i>
HUMOUR
</span>
<span class="faded">[50%]</span>
</div>
<div class="progress rounded-0" style="background-color:#181818;">
<div class="progress-bar" style="width:50%; height:10px; background-color:#EA170A;"></div>
</div>
</div>
</div>
<div class="col-6">
<!-- CHARISMA -->
<div class="mb-2">
<div class="justify-content-between">
<span>
<i class="fa-light fa-sparkles"></i>
CHARISMA
</span>
<span class="faded">[50%]</span>
</div>
<div class="progress rounded-0" style="background-color:#181818;">
<div class="progress-bar" style="width:50%; height:10px; background-color:#EA170A;"></div>
</div>
</div>
<!-- PATIENCE -->
<div class="mb-2">
<div class="justify-content-between">
<span>
<i class="fa-light fa-comment-dots"></i>
PATIENCE
</span>
<span class="faded">[50%]</span>
</div>
<div class="progress rounded-0" style="background-color:#181818;">
<div class="progress-bar" style="width:50%; height:10px; background-color:#EA170A;"></div>
</div>
</div>
<!-- EMPATHY -->
<div class="mb-1">
<div class="justify-content-between">
<span>
<i class="fa-light fa-hand-holding-hand"></i>
EMPATHY
</span>
<span class="faded">[50%]</span>
</div>
<div class="progress rounded-0" style="background-color:#181818;">
<div class="progress-bar" style="width:50%; height:10px; background-color:#EA170A;"></div>
</div>
</div>
</div>
</div>
</div>
<!-- LIKES + DISLIKES -->
<div class="row no-gutters mb-2">
<!-- LIKES -->
<div class="col-6 pr-1">
<!-- TITLE -->
<div class="card rounded-0 p-1 pl-2 pr-2" style="background-color:#181818; color:#fff">
<span>
<i class="fas fa-heart" style="color:#fff"></i>
<span class="pull-right">LIKES</span>
</span>
</div>
<!-- LIST -->
<div class="card rounded-0 p-1 bg-transparent" style="border:2px solid #181818; color:#181818; height:120px; overflow:auto;">
<ul class="fa-ul" style="font-size:13px;">
<li><span class="fa-li"><i class="fal fa-chevron-right"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right"></i></span>content</li>
</ul>
</div>
</div>
<!-- DISLIKES -->
<div class="col-6 p-0">
<!-- TITLE -->
<div class="card rounded-0 p-1 pl-2 pr-2" style="background-color:#181818; color:#fff">
<span>
<i class="fas fa-heart-broken" style="color:#fff"></i>
<span class="pull-right">DISLIKES</span>
</span>
</div>
<!-- LIST -->
<div class="card rounded-0 p-1 bg-transparent" style="border:2px solid #181818; color:#181818; height:120px; overflow:auto;">
<ul class="fa-ul" style="font-size:13px;">
<li><span class="fa-li"><i class="fal fa-chevron-right"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right"></i></span>content</li>
</ul>
</div>
</div>
</div>
<!-- STATS, PT. 2 (SLIDERS) -->
<div class="card rounded-0 p-2 bg-transparent mb-2" style="border:2px solid #181818;">
<!-- INTRO/EXTROVERT -->
<div class="mb-2">
<div class="row no-gutters justify-content-between">
<span>
<i class="fa-light fa-user"></i>
INTROVERTED
</span>
<span>
EXTROVERTED
<i class="fa-light fa-users"></i>
</span>
</div>
<div class="progress mt-1 rounded-0" style="height:10px; background-color:#181818;">
<div class="progress-bar justify-content-end bg-transparent" style="width:50%;">
<div class="h-100" style="width:5px; background-color:#EA170A;"></div>
</div>
</div>
</div>
<!-- INSTINCT/CALCULATED -->
<div class="mb-2">
<div class="row no-gutters justify-content-between">
<span>
<i class="fa-light fa-burst"></i>
INSTINCTIVE
</span>
<span>
CALCULATED
<i class="fa-light fa-thought-bubble"></i>
</span>
</div>
<div class="progress mt-1 rounded-0" style="height:10px; background-color:#181818;">
<div class="progress-bar justify-content-end bg-transparent" style="width:50%;">
<div class="h-100" style="width:5px; background-color:#EA170A;"></div>
</div>
</div>
</div>
<!-- DECEPTIVE/SINCERE -->
<div class="mb-2">
<div class="row no-gutters justify-content-between">
<span>
<i class="fa-light fa-masks-theater"></i>
DECEPTIVE
</span>
<span>
SINCERE
<i class="fa-light fa-comments"></i>
</span>
</div>
<div class="progress mt-1 rounded-0" style="height:10px; background-color:#181818;">
<div class="progress-bar justify-content-end bg-transparent" style="width:50%;">
<div class="h-100" style="width:5px; background-color:#EA170A;"></div>
</div>
</div>
</div>
<!-- INDIFFERENT/EMOTIONAL -->
<div class="mb-2">
<div class="row no-gutters justify-content-between">
<span>
<i class="fa-light fa-heart-circle-minus"></i>
INDIFFERENT
</span>
<span>
EMOTIONAL
<i class="fa-light fa-heart-circle-exclamation"></i>
</span>
</div>
<div class="progress mt-1 rounded-0" style="height:10px; background-color:#181818;">
<div class="progress-bar justify-content-end bg-transparent" style="width:50%;">
<div class="h-100" style="width:5px; background-color:#EA170A;"></div>
</div>
</div>
</div>
<!-- RESERVED/AFFECTIONATE -->
<div class="mb-2">
<div class="row no-gutters justify-content-between">
<span>
<i class="fa-light fa-head-side-heart"></i>
RESERVED
</span>
<span>
AFFECTIONATE
<i class="fa-light fa-hands-holding-heart"></i>
</span>
</div>
<div class="progress mt-1 rounded-0" style="height:10px; background-color:#181818;">
<div class="progress-bar justify-content-end bg-transparent" style="width:50%;">
<div class="h-100" style="width:5px; background-color:#EA170A;"></div>
</div>
</div>
</div>
<!-- COOPERATIVE/LONE WOLF -->
<div class="mb-1">
<div class="row no-gutters justify-content-between">
<span>
<i class="fa-light fa-handshake-simple"></i>
COOPERATIVE
</span>
<span>
LONE WOLF
<i class="fa-light fa-handshake-slash"></i>
</span>
</div>
<div class="progress mt-1 rounded-0" style="height:10px; background-color:#181818;">
<div class="progress-bar justify-content-end bg-transparent" style="width:50%;">
<div class="h-100" style="width:5px; background-color:#EA170A;"></div>
</div>
</div>
</div>
</div>
<!-- TRIVIA -->
<div class="mb-3">
<!-- TITLE -->
<div class="card rounded-0 p-1 pl-2 pr-2 justify" style="background-color:#181818; color:#fff">
<span>
<i class="fas fa-star pull-right" style="color:#fff; margin-top:5px;"></i>
<span class="">TRIVIA</span>
</span>
</div>
<!-- LIST -->
<div class="card rounded-0 p-1 bg-transparent" style="border:2px solid #181818; color:#181818; height:150px; overflow:auto;">
<ul class="fa-ul mt-2" style="font-size:13px;">
<li><span class="fa-li"><i class="fal fa-chevron-right"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right"></i></span>content</li>
</ul>
</div>
</div>
</div>
</div>
<!-- HISTORY -->
<div class="tab-pane fade" id="three">
<div class="card border-0 rounded-0 p-2" style="height:300px; background-color:#eee; color:#181818; overflow:auto;">
<div class="accordion md-accordion" id="history" role="tablist" aria-multiselectable="true">
<!-- SECTION -->
<div class="card rounded-0 border-0 bg-transparent mb-2">
<!-- MAIN HEADER -->
<div class="card rounded-0 border-0 p-2" style="background-color:#181818; color:#fff;" role="tab" id="heading1">
<a data-toggle="collapse" data-parent="#history" href="#history1" aria-expanded="true" aria-controls="history1" class="text-light">
<div class="card rounded-0 border-0 bg-transparent justify-content-center" style="height:30px;">
<span>
<i class="fas fa-sword fa-xl"></i>
<span class="pull-right">SECTION NAME</span>
</span>
</div>
</a>
</div>
<!-- DESCRIPTION -->
<div id="history1" class="collapse show" role="tabpanel" aria-labelledby="heading1" data-parent="#history">
<div class="card-body p-3" style="height:150px; overflow:auto; font-size:13px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut urna lectus, luctus sit amet ante sed, vehicula gravida sem. Vivamus fringilla id justo varius feugiat. Quisque eleifend, risus quis faucibus tristique, lectus arcu ullamcorper tortor, at gravida enim orci sed tortor. Donec rutrum aliquet quam, eget placerat mauris. Integer ac urna quam. Praesent id laoreet orci, quis fermentum est. Ut in commodo tellus. Maecenas bibendum scelerisque est ac luctus.</p>
</div>
</div>
</div>
<!-- SECTION -->
<div class="card rounded-0 border-0 bg-transparent mb-2">
<!-- MAIN HEADER -->
<div class="card rounded-0 border-0 p-2" style="background-color:#181818; color:#fff;" role="tab" id="heading2">
<a data-toggle="collapse" data-parent="#history" href="#history2" aria-expanded="false" aria-controls="history1" class="text-light">
<div class="card rounded-0 border-0 bg-transparent justify-content-center" style="height:30px;">
<span>
<i class="fas fa-shield-halved fa-xl"></i>
<span class="pull-right">SECTION NAME</span>
</span>
</div>
</a>
</div>
<!-- DESCRIPTION -->
<div id="history2" class="collapse" role="tabpanel" aria-labelledby="heading2" data-parent="#history">
<div class="card-body p-3" style="height:150px; overflow:auto; font-size:13px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut urna lectus, luctus sit amet ante sed, vehicula gravida sem. Vivamus fringilla id justo varius feugiat. Quisque eleifend, risus quis faucibus tristique, lectus arcu ullamcorper tortor, at gravida enim orci sed tortor. Donec rutrum aliquet quam, eget placerat mauris. Integer ac urna quam. Praesent id laoreet orci, quis fermentum est. Ut in commodo tellus. Maecenas bibendum scelerisque est ac luctus.</p>
</div>
</div>
</div>
<!-- ADD MORE ABOVE HERE. Don't forget to change the [id]s to be something different; if not, they'll open multiple! -->
<!-- LAST SECTION -->
<div class="card rounded-0 border-0 bg-transparent mb-3">
<!-- MAIN HEADER -->
<div class="card rounded-0 border-0 p-2" style="background-color:#181818; color:#fff;" role="tab" id="heading3">
<a data-toggle="collapse" data-parent="#history" href="#history3" aria-expanded="false" aria-controls="history3" class="text-light">
<div class="card rounded-0 border-0 bg-transparent justify-content-center" style="height:30px;">
<span>
<i class="fas fa-question fa-xl"></i>
<span class="pull-right">SECTION NAME</span>
</span>
</div>
</a>
</div>
<!-- DESCRIPTION -->
<div id="history3" class="collapse" role="tabpanel" aria-labelledby="heading3" data-parent="#history">
<div class="card-body p-3" style="height:150px; overflow:auto; font-size:13px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut urna lectus, luctus sit amet ante sed, vehicula gravida sem. Vivamus fringilla id justo varius feugiat. Quisque eleifend, risus quis faucibus tristique, lectus arcu ullamcorper tortor, at gravida enim orci sed tortor. Donec rutrum aliquet quam, eget placerat mauris. Integer ac urna quam. Praesent id laoreet orci, quis fermentum est. Ut in commodo tellus. Maecenas bibendum scelerisque est ac luctus.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- LINKS -->
<div class="tab-pane fade" id="four">
<div class="card border-0 rounded-0 p-2" style="height:300px; background-color:#eee; color:#181818; overflow:auto;">
<!-- RELATION -->
<div class="mb-2">
<!-- NAME -->
<div class="card rounded-0 border-0 p-1" style="background-color:#181818; color:#fff;">
<span>
<i class="fas fa-apple-whole ml-2" style="color:#fff;"></i>
<span class="pull-right mr-2 text-uppercase font-weight-bold">
<a href="/" class="text-white">NAME</a>
</span>
</span>
</div>
<!-- ICON + DESC -->
<div class="card rounded-0 p-2 bg-transparent" style="border:2px solid #181818;">
<div class="row no-gutters">
<!-- ICON -->
<div class="col-4 p-1">
<div class="card rounded-0 p-1 bg-transparent" style="border:2px solid #181818;">
<div class="card rounded-0" style="border:2px solid #181818; height:120px;
background-image:url(REL_ICON);
background-size:cover;
background-position:center;">
</div>
</div>
</div>
<!-- DESCRIPTION -->
<div class="col-8 p-1">
<div class="card rounded-0 bg-transparent p-2" style="height:132px; border:2px solid #181818; overflow:auto;">
<p style="font-size:13px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar condimentum felis, in vehicula velit molestie at. Duis eget nisi eleifend, hendrerit orci sed, imperdiet urna. Curabitur quis dapibus eros. Curabitur sem ipsum, dapibus vel cursus a, tempus sed turpis. Fusce maximus massa metus, viverra dapibus sapien efficitur eget. Sed commodo aliquam mi, at tincidunt dolor fermentum ac. Nulla tincidunt, nunc a ullamcorper feugiat, tortor velit consequat arcu, molestie semper justo risus nec eros. Vestibulum aliquam velit a pharetra hendrerit. Quisque tincidunt eget urna rutrum commodo.</p>
</div>
</div>
</div>
</div>
</div>
<!-- RELATION -->
<div class="mb-2">
<!-- NAME -->
<div class="card rounded-0 border-0 p-1" style="background-color:#181818; color:#fff;">
<span>
<i class="fas fa-apple-whole ml-2" style="color:#fff;"></i>
<span class="pull-right mr-2 text-uppercase font-weight-bold">
<a href="/" class="text-white">NAME</a>
</span>
</span>
</div>
<!-- ICON + DESC -->
<div class="card rounded-0 p-2 bg-transparent" style="border:2px solid #181818;">
<div class="row no-gutters">
<!-- ICON -->
<div class="col-4 p-1">
<div class="card rounded-0 p-1 bg-transparent" style="border:2px solid #181818;">
<div class="card rounded-0" style="border:2px solid #181818; height:120px;
background-image:url(REL_ICON);
background-size:cover;
background-position:center;">
</div>
</div>
</div>
<!-- DESCRIPTION -->
<div class="col-8 p-1">
<div class="card rounded-0 bg-transparent p-2" style="height:132px; border:2px solid #181818; overflow:auto;">
<p style="font-size:13px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar condimentum felis, in vehicula velit molestie at. Duis eget nisi eleifend, hendrerit orci sed, imperdiet urna. Curabitur quis dapibus eros. Curabitur sem ipsum, dapibus vel cursus a, tempus sed turpis. Fusce maximus massa metus, viverra dapibus sapien efficitur eget. Sed commodo aliquam mi, at tincidunt dolor fermentum ac. Nulla tincidunt, nunc a ullamcorper feugiat, tortor velit consequat arcu, molestie semper justo risus nec eros. Vestibulum aliquam velit a pharetra hendrerit. Quisque tincidunt eget urna rutrum commodo.</p>
</div>
</div>
</div>
</div>
</div>
<!-- ADD MORE ABOVE HERE -->
<!-- LAST RELATION -->
<div class="mb-3">
<!-- NAME -->
<div class="card rounded-0 border-0 p-1" style="background-color:#181818; color:#fff;">
<span>
<i class="fas fa-apple-whole ml-2" style="color:#fff;"></i>
<span class="pull-right mr-2 text-uppercase font-weight-bold">
<a href="/" class="text-white">NAME</a>
</span>
</span>
</div>
<!-- ICON + DESC -->
<div class="card rounded-0 p-2 bg-transparent" style="border:2px solid #181818;">
<div class="row no-gutters">
<!-- ICON -->
<div class="col-4 p-1">
<div class="card rounded-0 p-1 bg-transparent" style="border:2px solid #181818;">
<div class="card rounded-0" style="border:2px solid #181818; height:120px;
background-image:url(REL_ICON);
background-size:cover;
background-position:center;">
</div>
</div>
</div>
<!-- DESCRIPTION -->
<div class="col-8 p-1">
<div class="card rounded-0 bg-transparent p-2" style="height:132px; border:2px solid #181818; overflow:auto;">
<p style="font-size:13px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar condimentum felis, in vehicula velit molestie at. Duis eget nisi eleifend, hendrerit orci sed, imperdiet urna. Curabitur quis dapibus eros. Curabitur sem ipsum, dapibus vel cursus a, tempus sed turpis. Fusce maximus massa metus, viverra dapibus sapien efficitur eget. Sed commodo aliquam mi, at tincidunt dolor fermentum ac. Nulla tincidunt, nunc a ullamcorper feugiat, tortor velit consequat arcu, molestie semper justo risus nec eros. Vestibulum aliquam velit a pharetra hendrerit. Quisque tincidunt eget urna rutrum commodo.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- QUOTE BOX -->
<div class="row no-gutters" style="margin-bottom:-10px;">
<!-- FILLER -->
<div class="col-2 p-1"></div>
<!-- QUOTE BOX -->
<div class="col-10 p-1" style="margin-top:-32px;">
<div class="card rounded-0 border-0 p-1 bg-faded ml-2 mr-2">
<div class="card rounded-0 border-0 p-2 text-center" style="background-color:#181818; color:#fff; font-size:13px;">
<i>quote here; better short, but expands!</i>
</div>
</div>
</div>
</div>
<!-- BANNER -->
<div class="card rounded-0 border-0 p-1 ml-3" style="position:absolute; height:200px; width:150px; left:56px; clip-path: polygon(0% 0%, 0 75%, 50% 100%, 100% 75%, 100% 0); background-color:#181818;">
<div class="card rounded-0 border-0 p-1 bg-faded h-100" style="clip-path: polygon(0% 0%, 0 75%, 50% 100%, 100% 75%, 100% 0);">
<div class="card rounded-0 border-0 p-1 h-100 text-center" style="clip-path: polygon(0% 0%, 0 75%, 50% 100%, 100% 75%, 100% 0); background-color:#181818; color:#fff;">
<span class="mt-2 mb-2 text-uppercase">
<i class="fa-regular fa-d" style="margin-right:-4px;"></i>
<span>eez</span>
<span>nut</span>
<i class="fa-regular fa-s" style="margin-left:-4px;"></i>
</span>
<span class="mb-2">
<i class="fas fa-horizontal-rule"></i>
<i class="fa-solid fa-peanuts"></i>
<i class="fas fa-horizontal-rule"></i>
</span>
<span>LV</span>
<span style="font-size:45px; margin-top:-10px;">000</span>
</div>
</div>
</div>
<!-- NAVIGATION -->
<div class="col-4 p-1" style="position:absolute; top:-29px; right:50px;">
<div class="col-12">
<ul class="nav row no-gutters text-center">
<li class="nav-item col mr-2" style="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background-color:#181818; height:50px; width:50px;">
<a data-toggle="tab" href="#one" class="active btn btn-outline-secondary border-0 h-100 w-100" style="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);">
<i class="fa-solid fa-1 fa-2x"></i>
</a>
</li>
<li class="nav-item col mr-2 justify-content-center" style="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background-color:#181818; height:50px; width:50px;">
<a data-toggle="tab" href="#two" class="btn btn-outline-secondary border-0 h-100 w-100" style="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);">
<i class="fa-solid fa-2 fa-2x"></i>
</a>
</li>
<li class="nav-item col mr-2" style="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background-color:#181818; height:50px; width:50px;">
<a data-toggle="tab" href="#three" class="btn btn-outline-secondary border-0 h-100 w-100" style="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);">
<i class="fa-solid fa-3 fa-2x"></i>
</a>
</li>
<li class="nav-item col" style="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background-color:#181818; height:50px; width:50px;">
<a data-toggle="tab" href="#four" class="btn btn-outline-secondary border-0 h-100 w-100" style="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);">
<i class="fa-solid fa-4 fa-2x"></i>
</a>
</li>
</ul>
</div>
</div>
<!--------------------------------------------------------------------------------------------------------------->
</div>
<div class="card rounded-0 border-0 p-1" style="background-color:#181818; font-size:13px; color:#fff;">
<div class="row no-gutters">
<div class="col-7 p-1">
<div class="card bg-transparent border-0 faded pl-1"><p>VER.1.03</p></div>
</div>
<div class="col-2 p-1">
<div class="card text-center bg-transparent faded" style="border:1px solid #fff;">SUPPORT</div>
</div>
<div class="col-2 p-1">
<div class="card text-center bg-transparent faded" style="border:1px solid #fff;">NEWS</div>
</div>
<!-- CREDIT; DO NOT TAMPER OR REMOVE. -->
<div class="col-1 p-1">
<div class="card text-center bg-transparent faded h-100 justify-content-center" style="border:1px solid #fff;">
<a href="/itemlabel"><i class="fas fa-code text-light"></i></a>
</div>
</div>
</div>
</div>
</div>