Profile
<!---------------------------------------
MORDECAI [F2U]
COLOURS:
- Black: #000
- White: #fff
- Light Grey: #eee
- Dark Grey: #aaa
- Dark Purple: #5C3A85
- Light Purple: #9460D3
- Accent 1 (About): #F6D6E5
- Accent 2 (Pers): #FEC199
- Accent 3 (Hist): #F872D7
- Accent 4 (Design): #9DE479
- Accent 5 (Relations): #89D9CF
- Accent 6 (Music): #8080E7
--------------------------------------->
<!-- IF YOU DON'T WANT A TAB, ADD HIDE TO ITS CLASS IN THE VERY FIRST LINE OF ITS CODE.
Do it for both the navigation and the tab itself. -->
<div class="container p-0" style="max-width:500px; color:#000;">
<div class="card rounded-0 p-0" style="border:1px solid #000;">
<!-- HEADER -->
<div class="col-12 p-0">
<div class="card rounded-0 border-0 p-2" style="height:150px; background-image:url(IMG_URL); background-size:cover; background-position:center;">
<!-- CREDIT -->
<a href="#" class="text-dark"><i class="pull-right fa-solid fa-pen-circle"></i></a>
</div>
</div>
<!-- Q. DIVIDER -->
<div class="row no-gutters">
<!-- DECOR -->
<div class="col-1 p-0">
<div class="card rounded-0 border-0 justify-content-center text-center h-100 p-2" style="background-color:#5C3A85; color:#fff;">
<i class="fas fa-quote-left"></i>
</div>
</div>
<!-- QUOTE -->
<div class="col-10 p-0">
<div class="card p-1 rounded-0 border-0 justify-content-center text-center" style="min-height:40px; background-color:#5C3A85; color:#fff;">
quote here
</div>
</div>
<!-- DECOR -->
<div class="col-1 p-0">
<div class="card rounded-0 border-0 justify-content-center text-center h-100 p-2" style="background-color:#5C3A85; color:#fff;">
<i class="fas fa-quote-right"></i>
</div>
</div>
</div>
<!-- BOX -->
<div class="row no-gutters">
<!-- CONTENT -->
<div class="col-md-11 p-0">
<div class="card rounded-0 border-0 p-2 h-100" style="background-color:#9460D3;">
<div class="tab-content">
<!-- ABOUT -->
<div class="tab-pane fade active show" id="abt">
<div class="p-2" style="height:227px; background-color:#eee; overflow:auto;">
<!-- NAME PLATE -->
<div class="row no-gutters mt-1">
<!-- FILLER; DON'T TAMPER. -->
<div class="col-1 p-0"></div>
<!-- TITLE -->
<div class="col-10 p-0">
<div class="card p-1 border-0" style="background-color:#aaa;">
<!-- DECOR -->
<span style="position:absolute; top:-5px; left:-35px;">
<span class="fa-stack fa-xl">
<i class="fas fa-badge fa-stack-2x" style="color:#aaa"></i>
<i class="fas fa-paw fa-stack-1x fa-inverse"></i>
</span>
</span>
<!-- NAME -->
<p class="text-center font-weight-bold text-uppercase" style="font-size:16px; letter-spacing:5px; color:#fff;"><i>name</i></p>
<!-- DECOR -->
<span style="position:absolute; top:-5px; right:-35px;">
<span class="fa-stack fa-xl">
<i class="fas fa-badge fa-stack-2x" style="color:#aaa"></i>
<i class="fas fa-paw fa-stack-1x fa-inverse"></i>
</span>
</span>
</div>
</div>
<!-- FILLER; DON'T TAMPER. -->
<div class="col-1 p-0"></div>
</div>
<!-- BASICS -->
<div class="row no-gutters">
<!-- LEFTSIDE -->
<div class="col-6 pl-2 pr-1">
<!-- TOP CONNECT; DON'T TAMPER. -->
<div class="col-12">
<div class="card rounded-0 bg-transparent" style="height:15px; border:solid #aaa; border-width:0px 0px 0px 2px;"></div>
</div>
<!-- NAME -->
<div class="row no-gutters">
<div class="col-2">
<div class="card h-100 border-0 text-center justify-content-center" style="border-radius:5px 0px 0px 5px; border:1px solid #000; background-color:#aaa;">
<div class="fas fa-signature"></div>
</div>
</div>
<div class="col-10">
<div class="card h-100 border-0 text-right pr-2 justify-content-center" style="border-radius:0px 5px 5px 0px; border:1px solid #000; background-color:#fff; border-width:1px 1px 1px 0px;">
content
</div>
</div>
</div>
<!-- CONNECT; DON'T TAMPER. -->
<div class="col-12">
<div class="card rounded-0 bg-transparent" style="height:5px; border:solid #aaa; border-width:0px 0px 0px 2px;"></div>
</div>
<!-- AGE -->
<div class="row no-gutters">
<div class="col-2">
<div class="card h-100 border-0 text-center justify-content-center" style="border-radius:5px 0px 0px 5px; border:1px solid #000; background-color:#aaa;">
<div class="fas fa-calendar-days"></div>
</div>
</div>
<div class="col-10">
<div class="card h-100 border-0 text-right pr-2 justify-content-center" style="border-radius:0px 5px 5px 0px; border:1px solid #000; background-color:#fff; border-width:1px 1px 1px 0px;">
content
</div>
</div>
</div>
<!-- CONNECT; DON'T TAMPER. -->
<div class="col-12">
<div class="card rounded-0 bg-transparent" style="height:5px; border:solid #aaa; border-width:0px 0px 0px 2px;"></div>
</div>
<!-- BIRTHDAY -->
<div class="row no-gutters">
<div class="col-2">
<div class="card h-100 border-0 text-center justify-content-center" style="border-radius:5px 0px 0px 5px; border:1px solid #000; background-color:#aaa;">
<div class="fas fa-cake"></div>
</div>
</div>
<div class="col-10">
<div class="card h-100 border-0 text-right pr-2 justify-content-center" style="border-radius:0px 5px 5px 0px; border:1px solid #000; background-color:#fff; border-width:1px 1px 1px 0px;">
content
</div>
</div>
</div>
<!-- CONNECT; DON'T TAMPER. -->
<div class="col-12">
<div class="card rounded-0 bg-transparent" style="height:5px; border:solid #aaa; border-width:0px 0px 0px 2px;"></div>
</div>
<!-- GENDER -->
<div class="row no-gutters">
<div class="col-2">
<div class="card h-100 border-0 text-center justify-content-center" style="border-radius:5px 0px 0px 5px; border:1px solid #000; background-color:#aaa;">
<div class="fas fa-venus-mars"></div>
</div>
</div>
<div class="col-10">
<div class="card h-100 border-0 text-right pr-2 justify-content-center" style="border-radius:0px 5px 5px 0px; border:1px solid #000; background-color:#fff; border-width:1px 1px 1px 0px;">
content
</div>
</div>
</div>
<!-- CONNECT; DON'T TAMPER. -->
<div class="col-12">
<div class="card rounded-0 bg-transparent" style="height:5px; border:solid #aaa; border-width:0px 0px 0px 2px;"></div>
</div>
<!-- PRONOUNS -->
<div class="row no-gutters">
<div class="col-2">
<div class="card h-100 border-0 text-center justify-content-center" style="border-radius:5px 0px 0px 5px; border:1px solid #000; background-color:#aaa;">
<div class="fas fa-id-card"></div>
</div>
</div>
<div class="col-10">
<div class="card h-100 border-0 text-right pr-2 justify-content-center" style="border-radius:0px 5px 5px 0px; border:1px solid #000; background-color:#fff; border-width:1px 1px 1px 0px;">
content
</div>
</div>
</div>
<!-- BOTTOM CONNECT; DON'T TAMPER. -->
<div class="col-12">
<div class="card rounded-0 bg-transparent" style="height:15px; border:solid #aaa; border-width:0px 0px 0px 2px;"></div>
</div>
</div>
<!-- RIGHTSIDE -->
<div class="col-6 pr-2 pl-1">
<!-- TOP CONNECT; DON'T TAMPER. -->
<div class="col-12">
<div class="card rounded-0 bg-transparent" style="height:15px; border:solid #aaa; border-width:0px 2px 0px 0px;"></div>
</div>
<!-- SPECIES -->
<div class="row no-gutters">
<div class="col-10">
<div class="card h-100 border-0 pl-2 justify-content-center" style="border-radius:5px 0px 0px 5px; border:1px solid #000; background-color:#fff; border-width:1px 1px 1px 0px;">
content
</div>
</div>
<div class="col-2">
<div class="card h-100 border-0 text-center justify-content-center" style="border-radius:0px 5px 5px 0px; border:1px solid #000; background-color:#aaa;">
<div class="fas fa-dna"></div>
</div>
</div>
</div>
<!-- CONNECT; DON'T TAMPER. -->
<div class="col-12">
<div class="card rounded-0 bg-transparent" style="height:5px; border:solid #aaa; border-width:0px 2px 0px 0px;"></div>
</div>
<!-- ORIENTATION -->
<div class="row no-gutters">
<div class="col-10">
<div class="card h-100 border-0 pl-2 justify-content-center" style="border-radius:5px 0px 0px 5px; border:1px solid #000; background-color:#fff; border-width:1px 1px 1px 0px;">
content
</div>
</div>
<div class="col-2">
<div class="card h-100 border-0 text-center justify-content-center" style="border-radius:0px 5px 5px 0px; border:1px solid #000; background-color:#aaa;">
<div class="fas fa-heartbeat"></div>
</div>
</div>
</div>
<!-- CONNECT; DON'T TAMPER. -->
<div class="col-12">
<div class="card rounded-0 bg-transparent" style="height:5px; border:solid #aaa; border-width:0px 2px 0px 0px;"></div>
</div>
<!-- OCCUPATION -->
<div class="row no-gutters">
<div class="col-10">
<div class="card h-100 border-0 pl-2 justify-content-center" style="border-radius:5px 0px 0px 5px; border:1px solid #000; background-color:#fff; border-width:1px 1px 1px 0px;">
content
</div>
</div>
<div class="col-2">
<div class="card h-100 border-0 text-center justify-content-center" style="border-radius:0px 5px 5px 0px; border:1px solid #000; background-color:#aaa;">
<div class="fas fa-briefcase"></div>
</div>
</div>
</div>
<!-- CONNECT; DON'T TAMPER. -->
<div class="col-12">
<div class="card rounded-0 bg-transparent" style="height:5px; border:solid #aaa; border-width:0px 2px 0px 0px;"></div>
</div>
<!-- TRADE STATUS -->
<div class="row no-gutters">
<div class="col-10">
<div class="card h-100 border-0 pl-2 justify-content-center" style="border-radius:5px 0px 0px 5px; border:1px solid #000; background-color:#fff; border-width:1px 1px 1px 0px;">
content
</div>
</div>
<div class="col-2">
<div class="card h-100 border-0 text-center justify-content-center" style="border-radius:0px 5px 5px 0px; border:1px solid #000; background-color:#aaa;">
<div class="fas fa-hands-holding"></div>
</div>
</div>
</div>
<!-- CONNECT; DON'T TAMPER. -->
<div class="col-12">
<div class="card rounded-0 bg-transparent" style="height:5px; border:solid #aaa; border-width:0px 2px 0px 0px;"></div>
</div>
<!-- WORTH -->
<div class="row no-gutters">
<div class="col-10">
<div class="card h-100 border-0 pl-2 justify-content-center" style="border-radius:5px 0px 0px 5px; border:1px solid #000; background-color:#fff; border-width:1px 1px 1px 0px;">
content
</div>
</div>
<div class="col-2">
<div class="card h-100 border-0 text-center justify-content-center" style="border-radius:0px 5px 5px 0px; border:1px solid #000; background-color:#aaa;">
<div class="fa-solid fa-money-from-bracket"></div>
</div>
</div>
</div>
<!-- BOTTOM CONNECT; DON'T TAMPER. -->
<div class="col-12">
<div class="card rounded-0 bg-transparent" style="height:15px; border:solid #aaa; border-width:0px 2px 0px 0px;"></div>
</div>
</div>
</div>
<!-- SHORT DESCRIPTION -->
<div class="col-12 p-0">
<div class="card p-2" style="background-color:#fff; height:150px; border:2px solid #aaa; overflow:auto; font-size:14px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu posuere sapien. Donec congue ultricies turpis quis auctor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla tempus justo ut gravida rhoncus. Nam in odio pretium, egestas tortor sollicitudin, ultricies urna. Mauris finibus, purus eget vestibulum bibendum, mauris est aliquet urna, quis ornare diam lacus non leo. Integer bibendum sodales efficitur. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vitae eros est.</p>
</div>
</div>
</div>
</div>
<!-- PERSONALITY+ -->
<div class="tab-pane fade" id="pers">
<div class="p-2" style="height:227px; background-color:#eee; overflow:auto;">
<!-- TITLE PLATE (PERSONALITY) -->
<div class="row no-gutters mt-1">
<!-- FILLER; DON'T TAMPER. -->
<div class="col-1 p-0"></div>
<!-- TITLE -->
<div class="col-10 p-0">
<div class="card p-1 border-0" style="background-color:#aaa;">
<!-- DECOR -->
<span style="position:absolute; top:-5px; left:-35px;">
<span class="fa-stack fa-xl">
<i class="fas fa-badge fa-stack-2x" style="color:#aaa"></i>
<i class="fas fa-paw fa-stack-1x fa-inverse"></i>
</span>
</span>
<!-- TITLE -->
<p class="text-center font-weight-bold text-uppercase" style="font-size:16px; letter-spacing:5px; color:#fff;"><i>personality</i></p>
<!-- DECOR -->
<span style="position:absolute; top:-5px; right:-35px;">
<span class="fa-stack fa-xl">
<i class="fas fa-badge fa-stack-2x" style="color:#aaa"></i>
<i class="fas fa-paw fa-stack-1x fa-inverse"></i>
</span>
</span>
</div>
</div>
<!-- FILLER; DON'T TAMPER. -->
<div class="col-1 p-0"></div>
</div>
<!-- CONNECT; DON'T TAMPER. -->
<div class="col-12">
<div class="col-12 pr-2 pl-2">
<div class="card rounded-0 bg-transparent" style="height:15px; border:solid #aaa; border-width:0px 2px 0px 2px;"></div>
</div>
</div>
<!-- PERS. DESCRIPTION -->
<div class="col-12 p-0">
<div class="card p-2" style="background-color:#fff; height:150px; border:2px solid #aaa; overflow:auto; font-size:14px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu posuere sapien. Donec congue ultricies turpis quis auctor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla tempus justo ut gravida rhoncus. Nam in odio pretium, egestas tortor sollicitudin, ultricies urna. Mauris finibus, purus eget vestibulum bibendum, mauris est aliquet urna, quis ornare diam lacus non leo. Integer bibendum sodales efficitur. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vitae eros est.</p>
</div>
</div>
<!-- CONNECT; DON'T TAMPER. -->
<div class="col-12">
<div class="col-12 pr-2 pl-2">
<div class="card rounded-0 bg-transparent" style="height:15px; border:solid #aaa; border-width:0px 2px 0px 2px;"></div>
</div>
</div>
<!-- TITLE PLATE (TRIVIA) -->
<div class="row no-gutters">
<!-- FILLER; DON'T TAMPER. -->
<div class="col-1 p-0"></div>
<!-- TITLE -->
<div class="col-10 p-0">
<div class="card p-1 border-0" style="background-color:#aaa;">
<!-- DECOR -->
<span style="position:absolute; top:-5px; left:-35px;">
<span class="fa-stack fa-xl">
<i class="fas fa-badge fa-stack-2x" style="color:#aaa"></i>
<i class="fas fa-paw fa-stack-1x fa-inverse"></i>
</span>
</span>
<!-- TITLE -->
<p class="text-center font-weight-bold text-uppercase" style="font-size:16px; letter-spacing:5px; color:#fff;"><i>trivia</i></p>
<!-- DECOR -->
<span style="position:absolute; top:-5px; right:-35px;">
<span class="fa-stack fa-xl">
<i class="fas fa-badge fa-stack-2x" style="color:#aaa"></i>
<i class="fas fa-paw fa-stack-1x fa-inverse"></i>
</span>
</span>
</div>
</div>
<!-- FILLER; DON'T TAMPER. -->
<div class="col-1 p-0"></div>
</div>
<!-- CONNECT; DON'T TAMPER. -->
<div class="col-12">
<div class="col-12 pr-2 pl-2">
<div class="card rounded-0 bg-transparent" style="height:15px; border:solid #aaa; border-width:0px 2px 0px 2px;"></div>
</div>
</div>
<!-- TRIV. DESCRIPTION -->
<div class="col-12 p-0">
<div class="card p-2" style="background-color:#fff; height:150px; border:2px solid #aaa; overflow:auto; font-size:14px;">
<ul class="fa-ul">
<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>
</div>
<!-- HISTORY -->
<div class="tab-pane fade" id="hist">
<div class="p-2" style="height:227px; background-color:#eee;">
<!-- TITLE PLATE -->
<div class="row no-gutters mt-1">
<!-- FILLER; DON'T TAMPER. -->
<div class="col-1 p-0"></div>
<!-- TITLE -->
<div class="col-10 p-0">
<div class="card p-1 border-0" style="background-color:#aaa;">
<!-- DECOR -->
<span style="position:absolute; top:-5px; left:-35px;">
<span class="fa-stack fa-xl">
<i class="fas fa-badge fa-stack-2x" style="color:#aaa"></i>
<i class="fas fa-paw fa-stack-1x fa-inverse"></i>
</span>
</span>
<!-- TITLE -->
<p class="text-center font-weight-bold text-uppercase" style="font-size:16px; letter-spacing:5px; color:#fff;"><i>history</i></p>
<!-- DECOR -->
<span style="position:absolute; top:-5px; right:-35px;">
<span class="fa-stack fa-xl">
<i class="fas fa-badge fa-stack-2x" style="color:#aaa"></i>
<i class="fas fa-paw fa-stack-1x fa-inverse"></i>
</span>
</span>
</div>
</div>
<!-- FILLER; DON'T TAMPER. -->
<div class="col-1 p-0"></div>
</div>
<!-- CONNECT; DON'T TAMPER. -->
<div class="col-12">
<div class="col-12 pr-2 pl-2">
<div class="card rounded-0 bg-transparent" style="height:15px; border:solid #aaa; border-width:0px 2px 0px 2px;"></div>
</div>
</div>
<!-- DESCRIPTION -->
<div class="col-12 p-0">
<div class="card p-2" style="background-color:#fff; height:160px; border:2px solid #aaa; overflow:auto; font-size:14px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu posuere sapien. Donec congue ultricies turpis quis auctor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla tempus justo ut gravida rhoncus. Nam in odio pretium, egestas tortor sollicitudin, ultricies urna. Mauris finibus, purus eget vestibulum bibendum, mauris est aliquet urna, quis ornare diam lacus non leo. Integer bibendum sodales efficitur. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vitae eros est.</p>
</div>
</div>
</div>
</div>
<!-- DESIGN -->
<div class="tab-pane fade" id="des">
<div class="p-2" style="height:227px; background-color:#eee; overflow:auto;">
<!-- TITLE PLATE -->
<div class="row no-gutters mt-1">
<!-- FILLER; DON'T TAMPER. -->
<div class="col-1 p-0"></div>
<!-- TITLE -->
<div class="col-10 p-0">
<div class="card p-1 border-0" style="background-color:#aaa;">
<!-- DECOR -->
<span style="position:absolute; top:-5px; left:-35px;">
<span class="fa-stack fa-xl">
<i class="fas fa-badge fa-stack-2x" style="color:#aaa"></i>
<i class="fas fa-paw fa-stack-1x fa-inverse"></i>
</span>
</span>
<!-- TITLE -->
<p class="text-center font-weight-bold text-uppercase" style="font-size:16px; letter-spacing:5px; color:#fff;"><i>design</i></p>
<!-- DECOR -->
<span style="position:absolute; top:-5px; right:-35px;">
<span class="fa-stack fa-xl">
<i class="fas fa-badge fa-stack-2x" style="color:#aaa"></i>
<i class="fas fa-paw fa-stack-1x fa-inverse"></i>
</span>
</span>
</div>
</div>
<!-- FILLER; DON'T TAMPER. -->
<div class="col-1 p-0"></div>
</div>
<!-- CONNECT; DON'T TAMPER. -->
<div class="col-12">
<div class="col-12 pr-2 pl-2">
<div class="card rounded-0 bg-transparent" style="height:15px; border:solid #aaa; border-width:0px 2px 0px 2px;"></div>
</div>
</div>
<!-- DESCRIPTIONS -->
<div class="row no-gutters">
<!-- REF -->
<div class="col-6 pr-1">
<div class="card" style="height:250px; background-color:rgba(0,0,0,0); background-image:url(IMG_URL); background-size:contain; background-position:center; background-repeat:no-repeat; border:2px solid #aaa;"></div>
</div>
<!-- NOTES -->
<div class="col-6 pl-1">
<!-- SECTION TITLE- -->
<div class="card p-1 border-0 text-center font-weight-bold" style="background-color:#aaa; border-radius:5px 5px 0px 0px; color:#fff;">
NOTES
</div>
<!-- DESC. -->
<div class="card p-1" style="height:220px; overflow:auto; background-color:#fff; border:2px solid #aaa; border-radius:0px 0px 5px 5px;">
<ul class="fa-ul">
<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>
</div>
</div>
<!-- RELATIONS -->
<div class="tab-pane fade" id="rel">
<div class="p-2" style="height:227px; background-color:#eee;">
<!-- TITLE PLATE -->
<div class="row no-gutters mt-1">
<!-- FILLER; DON'T TAMPER. -->
<div class="col-1 p-0"></div>
<!-- TITLE -->
<div class="col-10 p-0">
<div class="card p-1 border-0" style="background-color:#aaa;">
<!-- DECOR -->
<span style="position:absolute; top:-5px; left:-35px;">
<span class="fa-stack fa-xl">
<i class="fas fa-badge fa-stack-2x" style="color:#aaa"></i>
<i class="fas fa-paw fa-stack-1x fa-inverse"></i>
</span>
</span>
<!-- TITLE -->
<p class="text-center font-weight-bold text-uppercase" style="font-size:16px; letter-spacing:5px; color:#fff;"><i>relationships</i></p>
<!-- DECOR -->
<span style="position:absolute; top:-5px; right:-35px;">
<span class="fa-stack fa-xl">
<i class="fas fa-badge fa-stack-2x" style="color:#aaa"></i>
<i class="fas fa-paw fa-stack-1x fa-inverse"></i>
</span>
</span>
</div>
</div>
<!-- FILLER; DON'T TAMPER. -->
<div class="col-1 p-0"></div>
</div>
<!-- CONNECT; DON'T TAMPER. -->
<div class="col-12">
<div class="col-12 pr-2 pl-2">
<div class="card rounded-0 bg-transparent" style="height:15px; border:solid #aaa; border-width:0px 2px 0px 2px;"></div>
</div>
</div>
<!-- DESCRIPTION -->
<div class="col-12 p-0">
<div class="card p-2 bg-transparent" style="height:160px; border:2px solid #aaa; overflow:auto; font-size:14px;">
<!-- RELATION -->
<div class="row no-gutters mb-2">
<!-- ICON -->
<div class="col-4">
<div class="card h-100 border-0" style="background-image:url(https://via.placeholder.com/150.png); background-size:cover; background-position:center; border-radius:5px 0px 0px 5px;"></div>
</div>
<!-- DETAILS -->
<div class="col-8">
<div class="card border-0 p-1" style="background-color:#aaa; color:#fff; border-radius:0px 5px 0px 0px;">
<span>
<i class="fas fa-heart ml-1"></i>
<span class="pull-right text-uppercase font-weight-bold mr-1">name here</span>
</span>
</div>
<div class="card border-0 p-2" style="height:100px; overflow:auto; background-color:#fff; border-radius:0px 0px 5px 0px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu posuere sapien. Donec congue ultricies turpis quis auctor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla tempus justo ut gravida rhoncus. Nam in odio pretium, egestas tortor sollicitudin, ultricies urna. Mauris finibus, purus eget vestibulum bibendum, mauris est aliquet urna, quis ornare diam lacus non leo. Integer bibendum sodales efficitur. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vitae eros est.</p>
</div>
</div>
</div>
<!-- RELATION -->
<div class="row no-gutters mb-2">
<!-- ICON -->
<div class="col-4">
<div class="card h-100 border-0" style="background-image:url(https://via.placeholder.com/150.png); background-size:cover; background-position:center; border-radius:5px 0px 0px 5px;"></div>
</div>
<!-- DETAILS -->
<div class="col-8">
<div class="card border-0 p-1" style="background-color:#aaa; color:#fff; border-radius:0px 5px 0px 0px;">
<span>
<i class="fas fa-heart ml-1"></i>
<span class="pull-right text-uppercase font-weight-bold mr-1">name here</span>
</span>
</div>
<div class="card border-0 p-2" style="height:100px; overflow:auto; background-color:#fff; border-radius:0px 0px 5px 0px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu posuere sapien. Donec congue ultricies turpis quis auctor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla tempus justo ut gravida rhoncus. Nam in odio pretium, egestas tortor sollicitudin, ultricies urna. Mauris finibus, purus eget vestibulum bibendum, mauris est aliquet urna, quis ornare diam lacus non leo. Integer bibendum sodales efficitur. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vitae eros est.</p>
</div>
</div>
</div>
<!-- ADD MORE ABOVE THIS -->
<!-- LAST RELATION -->
<div class="row no-gutters">
<!-- ICON -->
<div class="col-4">
<div class="card h-100 border-0" style="background-image:url(https://via.placeholder.com/150.png); background-size:cover; background-position:center; border-radius:5px 0px 0px 5px;"></div>
</div>
<!-- DETAILS -->
<div class="col-8">
<div class="card border-0 p-1" style="background-color:#aaa; color:#fff; border-radius:0px 5px 0px 0px;">
<span>
<i class="fas fa-heart ml-1"></i>
<span class="pull-right text-uppercase font-weight-bold mr-1">name here</span>
</span>
</div>
<div class="card border-0 p-2" style="height:100px; overflow:auto; background-color:#fff; border-radius:0px 0px 5px 0px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu posuere sapien. Donec congue ultricies turpis quis auctor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla tempus justo ut gravida rhoncus. Nam in odio pretium, egestas tortor sollicitudin, ultricies urna. Mauris finibus, purus eget vestibulum bibendum, mauris est aliquet urna, quis ornare diam lacus non leo. Integer bibendum sodales efficitur. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vitae eros est.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- MUSIC -->
<div class="tab-pane fade" id="mus">
<div class="p-2" style="height:227px; background-color:#eee;">
<!-- TITLE PLATE -->
<div class="row no-gutters mt-1">
<!-- FILLER; DON'T TAMPER. -->
<div class="col-1 p-0"></div>
<!-- TITLE -->
<div class="col-10 p-0">
<div class="card p-1 border-0" style="background-color:#aaa;">
<!-- DECOR -->
<span style="position:absolute; top:-5px; left:-35px;">
<span class="fa-stack fa-xl">
<i class="fas fa-badge fa-stack-2x" style="color:#aaa"></i>
<i class="fas fa-paw fa-stack-1x fa-inverse"></i>
</span>
</span>
<!-- TITLE -->
<p class="text-center font-weight-bold text-uppercase" style="font-size:16px; letter-spacing:5px; color:#fff;"><i>music</i></p>
<!-- DECOR -->
<span style="position:absolute; top:-5px; right:-35px;">
<span class="fa-stack fa-xl">
<i class="fas fa-badge fa-stack-2x" style="color:#aaa"></i>
<i class="fas fa-paw fa-stack-1x fa-inverse"></i>
</span>
</span>
</div>
</div>
<!-- FILLER; DON'T TAMPER. -->
<div class="col-1 p-0"></div>
</div>
<!-- CONNECT; DON'T TAMPER. -->
<div class="col-12">
<div class="col-12 pr-2 pl-2">
<div class="card rounded-0 bg-transparent" style="height:15px; border:solid #aaa; border-width:0px 2px 0px 2px;"></div>
</div>
</div>
<!-- DESCRIPTION -->
<div class="col-12 p-0">
<div class="card p-2 bg-transparent" style="height:160px; border:2px solid #aaa; overflow:auto; font-size:14px;">
<!-- SONG -->
<div class="row no-gutters mb-2">
<!-- PLAY BUTTON -->
<div class="col-1">
<div class="card h-100 border-0 justify-content-center text-center" style="background-color:#aaa; border-radius:5px 0px 0px 5px;">
<i class="fas fa-play"></i>
</div>
</div>
<!-- TITLE -->
<div class="col-10">
<div class="card border-0 p-1 text-center justify-content-center" style="height:100px; background-color:#fff; border-radius:0px;">
song title - artist
</div>
</div>
<!-- EXTERNAL LINK; FOR MOBILE -->
<div class="col-1">
<div class="card h-100 border-0 justify-content-center text-center" style="background-color:#aaa; border-radius:0px 5px 5px 0px;">
<a href="https://youtu.be/YT_LINK" style="color:#fff;"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
</div>
</div>
<!-- SONG EMBED -->
<!-- REPLACE [ EMBED_URL ]; DO NOT REMOVE [ ?controls=0 ] -->
<iframe allowfullscreen class="d-none d-lg-flex"
frameborder="0"
src="https://www.youtube.com/embed/EMBED_URL?controls=0"
style="height:100px; width:350px; opacity:0.001; position:absolute;">
</iframe>
</div>
<!-- ADD MORE ABOVE HERE -->
<!-- LAST SONG -->
<div class="row no-gutters">
<!-- PLAY BUTTON -->
<div class="col-1">
<div class="card h-100 border-0 justify-content-center text-center" style="background-color:#aaa; border-radius:5px 0px 0px 5px;">
<i class="fas fa-play"></i>
</div>
</div>
<!-- TITLE -->
<div class="col-10">
<div class="card border-0 p-1 text-center justify-content-center" style="height:100px; background-color:#fff; border-radius:0px;">
song title - artist
</div>
</div>
<!-- EXTERNAL LINK; FOR MOBILE -->
<div class="col-1">
<div class="card h-100 border-0 justify-content-center text-center" style="background-color:#aaa; border-radius:0px 5px 5px 0px;">
<a href="https://youtu.be/YT_LINK" style="color:#fff;"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
</div>
</div>
<!-- SONG EMBED -->
<!-- REPLACE [ EMBED_URL ]; DO NOT REMOVE [ ?controls=0 ] -->
<iframe allowfullscreen class="d-none d-lg-flex"
frameborder="0"
src="https://www.youtube.com/embed/EMBED_URL?controls=0"
style="height:100px; width:350px; opacity:0.001; position:absolute;">
</iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- NAVIGATION -->
<div class="col-md-1 p-0">
<div class="card rounded-0 border-0">
<ul class="nav row no-gutters text-center">
<!-- ABOUT -->
<li class="nav-item col" style="background-color:#F6D6E5;">
<a data-toggle="tab" href="#abt" class="active btn btn-outline-secondary rounded-0 border-0 w-100" style="font-size:15px;">
<i class="fas fa-user fa-xs" style="color:#fff"></i>
</a>
</li>
<!-- PERSONALITY -->
<li class="nav-item col" style="background-color:#FEC199;">
<a data-toggle="tab" href="#pers" class="btn btn-outline-secondary rounded-0 border-0 w-100" style="font-size:15px;">
<i class="fas fa-star fa-xs" style="color:#fff"></i>
</a>
</li>
<!-- HISTORY -->
<li class="nav-item col" style="background-color:#F872D7;">
<a data-toggle="tab" href="#hist" class="btn btn-outline-secondary rounded-0 border-0 w-100" style="font-size:15px;">
<i class="fas fa-books fa-xs" style="color:#fff"></i>
</a>
</li>
<!-- DESIGN -->
<li class="nav-item col" style="background-color:#9DE479;">
<a data-toggle="tab" href="#des" class="btn btn-outline-secondary rounded-0 border-0 w-100" style="font-size:15px;">
<i class="fas fa-pen fa-xs" style="color:#fff"></i>
</a>
</li>
<!-- RELATIONS -->
<li class="nav-item col" style="background-color:#89D9CF;">
<a data-toggle="tab" href="#rel" class="btn btn-outline-secondary rounded-0 border-0 w-100" style="font-size:15px;">
<i class="fas fa-link fa-xs" style="color:#fff"></i>
</a>
</li>
<!-- MUSIC -->
<li class="nav-item col" style="background-color:#8080E7;">
<a data-toggle="tab" href="#mus" class="btn btn-outline-secondary rounded-0 border-0 w-100" style="font-size:15px;">
<i class="fas fa-music fa-xs" style="color:#fff"></i>
</a>
</li>
<!-- CREDIT; DO NOT TAMPER OR REMOVE. -->
<li class="col">
<a href="/itemlabel" class="btn rounded-0 border-0 w-100" style="font-size:15px; background-color:#9460D3;">
<i class="fas fa-code fa-xs" style="color:#fff"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
