<!--------------------------------
03. ROCKET [ F2U ]
# To change the colours, press CTRL + F and replace all respective codes.
Main: #000
Tabs: #999
Accent: #ba5d5d
* Be careful this time, though!
* You're free to mess around with the colours even further, I honestly cannot list
them all out because it's a whole lot of black and white... curse my habits!
--------------------------------->
<div class="accordion md-accordion" id="accordion" role="tablist" aria-multiselectable="true">
<!-- ICONS -->
<!-- FIRST -->
<div>
<div class="card mx-auto pt-2 pb-3" style="border:1px solid #000; width:600px; background-color:#fff;">
<div class="row no-gutters mx-auto text-center">
<div class="col-auto m-3" role="tab" id="heading1">
<div class="card rounded-0 mb-3" style="height:150px; width:150px; border:1px solid #000;
background-image:url(https://via.placeholder.com/150.png); background-position:center;background-size:cover;"></div>
<a data-toggle="collapse" data-parent="#accordion" href="#accordion1" aria-expanded="true" aria-controls="accordion1"><i class="fad fa-1 fa-xl" style="color:#ba5d5d"></i></a>
</div>
<!-- SECOND -->
<div class="col-auto m-3" role="tab" id="heading2">
<div class="card rounded-0 mb-3" style="height:150px; width:150px; border:1px solid #000;
background-image:url(https://via.placeholder.com/150.png); background-position:center; background-size:cover;"></div>
<a data-toggle="collapse" data-parent="#accordion" href="#accordion2" aria-expanded="false" aria-controls="accordion2"><i class="fad fa-2 fa-xl" style="color:#ba5d5d"></i></a>
</div>
<!-- THIRD -->
<div class="col-auto m-3" role="tab" id="heading3">
<div class="card rounded-0 mb-3" style="height:150px; width:150px; border:1px solid #000;
background-image:url(https://via.placeholder.com/150.png); background-position:center; background-size:cover;"></div>
<a data-toggle="collapse" data-parent="#accordion" href="#accordion3" aria-expanded="false" aria-controls="accordion3"><i class="fad fa-3 fa-xl" style="color:#ba5d5d"></i></a>
</div>
</div>
<!-- DESCRIPTIONS -->
<!-- FIRST -->
<div id="accordion1" class="collapse show" role="tabpanel" aria-labelledby="heading1"
data-parent="#accordion">
<div class="card border-0 mx-auto m-0 p-0" style="width:392px; background-color:rgba(0,0,0,0.0);"><i class="fas fa-triangle fa-2x" style="color:#000;"></i></div>
<div class="card rounded-0 mx-auto p-1" style="background-color:#000; border:1px solid #000;height:300px; width:515px; top:-10px;">
<div class="tab-content">
<!-- BASIC -->
<div class="tab-pane fade active show" id="a1">
<div class="card rounded-0 p-2" style="height:255px; background-color:#fff; color:#000; overflow:auto;">
<!-- TITLE CARD -->
<div class="row no-gutters">
<div class="col-auto">
<span class="fa-stack">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-eye fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="card rounded-0 border-0 col-auto" style="background-color:rgba(0,0,0,0.0)">
<hr class="my-auto d-none d-lg-flex" style="width:20px; border:1px solid #000;">
</div>
<div class="col-auto">
<div class="card rounded-0 justify-content-center text-right p-2 font-weight-bold" style="border:1px solid #000; height:30px; width:185px; background-color:#000; color:#fff; letter-spacing:1px;">ABOUT</div>
</div>
</div>
<!-- DETAILS -->
<div class="row no-gutters">
<div class="card rounded-0 w-100 col-6 p-3 mt-2" style="background-color:#fff; border:1px solid #000; min-height:120px; color:#000; border-width: 0px 0px 1px 0px">
<!-- CONTENT -->
<span><i class="fas fa-signature fa-lg"></i><span class="pull-right">name</span></span>
<!-- CONTENT -->
<span><i class="fas fa-calendar-days fa-lg"></i><span class="pull-right">age</span></span>
<!-- CONTENT -->
<span><i class="fas fa-mars-and-venus fa-lg"></i><span class="pull-right">gender</span></span>
<!-- CONTENT -->
<span><i class="fas fa-id-card fa-lg"></i><span class="pull-right">pronouns</span></span>
<!-- CONTENT -->
<span><i class="fas fa-paw-simple fa-lg"></i><span class="pull-right">species</span></span>
</div>
<div class="card rounded-0 w-100 col-6 p-3 mt-2" style="background-color:#fff; border:1px solid #000; min-height:120px; color:#000; border-width: 0px 0px 1px 1px">
<!-- CONTENT -->
<span><i class="fas fa-briefcase fa-lg"></i><span class="pull-right">occupation</span></span>
<!-- CONTENT -->
<span><i class="fas fa-heart fa-lg"></i><span class="pull-right">orientation</span></span>
<!-- CONTENT -->
<span><i class="fas fa-rings-wedding fa-lg"></i><span class="pull-right">marital status</span></span>
<!-- CONTENT -->
<span><i class="fas fa-hands-holding fa-lg"></i><span class="pull-right">trade status</span></span>
<!-- CONTENT -->
<span><i class="fas fa-dollar fa-lg"></i><span class="pull-right">worth</span></span>
</div>
</div>
<!-- DESCRIPTION -->
<p class="pl-3 pt-3 text-justify"><a class="font-weight-bold text-uppercase" style="font-size:20px">L</a>orem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget lobortis ipsum, vel pharetra odio. Nulla ullamcorper nisl ac nisi convallis, eu vulputate diam hendrerit. Integer at enim ac neque placerat fringilla vitae ultricies lectus. Etiam iaculis, odio ut faucibus fermentum, nibh mi tristique felis, ac rutrum felis turpis vehicula mi.</p>
<p class="pl-3 text-justify"><a class="font-weight-bold text-uppercase" style="font-size:20px">D</a>uis velit magna, aliquam a est eget, accumsan venenatis magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin magna est, imperdiet non malesuada vel, pretium sit amet dui. Nulla quis neque erat. Pellentesque malesuada posuere diam, et consequat ante volutpat non. Pellentesque sit amet interdum ligula, in consectetur ligula. Curabitur ac leo dictum, laoreet dui et, bibendum sapien. Cras id quam non quam malesuada lacinia ut quis justo. Nam eu elit volutpat, ullamcorper nulla et, luctus magna. Donec id tempus urna. Quisque hendrerit est velit, vel pulvinar turpis mollis nec. Sed eu libero facilisis, commodo arcu non, congue magna.</p>
</div>
</div>
<!-- BASIC, END -->
<!-- PERSONALITY -->
<div class="tab-pane fade" id="a2">
<div class="card rounded-0 p-2" style="height:255px; background-color:#fff; color:#000; overflow:auto;">
<!-- TITLE CARD -->
<div class="row no-gutters">
<div class="col-auto">
<span class="fa-stack">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-masks-theater fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="card rounded-0 border-0 col-auto" style="background-color:rgba(0,0,0,0.0)">
<hr class="my-auto d-none d-lg-flex" style="width:20px; border:1px solid #000;">
</div>
<div class="col-auto">
<div class="card rounded-0 justify-content-center text-right p-2 font-weight-bold" style="border:1px solid #000; height:30px; width:185px; background-color:#000; color:#fff; letter-spacing:1px;">PERSONALITY</div>
</div>
</div>
<!-- DESCRIPTION -->
<div class="card border-0 mb-2 p-3 text-justify" style="background-color:rgba(0,0,0,0.0)">
<p><a class="font-weight-bold text-uppercase" style="font-size:20px">L</a>orem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget lobortis ipsum, vel pharetra odio. Nulla ullamcorper nisl ac nisi convallis, eu vulputate diam hendrerit. Integer at enim ac neque placerat fringilla vitae ultricies lectus. Etiam iaculis, odio ut faucibus fermentum, nibh mi tristique felis, ac rutrum felis turpis vehicula mi.</p>
</div>
<!-- STATS -->
<!-- TITLE CARD -->
<div class="row no-gutters">
<div class="col-auto">
<span class="fa-stack">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-chart-simple fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="card rounded-0 border-0 col-auto" style="background-color:rgba(0,0,0,0.0)">
<hr class="my-auto d-none d-lg-flex" style="width:20px; border:1px solid #000;">
</div>
<div class="col-auto">
<div class="card rounded-0 justify-content-center text-right p-2 font-weight-bold" style="border:1px solid #000; height:30px; width:185px; background-color:#000; color:#fff; letter-spacing:1px;">STATS</div>
</div>
</div>
<!-- BARS -->
<div class="row no-gutters mb-2">
<div class="card rounded-0 border-0 w-100 col-6 p-3" style="background-color:#fff; color:#000;">
<!-- INTELLIGENCE -->
<span class="text-uppercase font-weight-bold" style="font-size:13px;">intelligence</span>
<div class="progress my-2 rounded-0"><div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px; background-color:#000;"></div></div>
<!-- CONFIDENCE -->
<span class="text-uppercase font-weight-bold" style="font-size:13px;">confidence</span>
<div class="progress my-2 rounded-0"><div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px; background-color:#000;"></div></div>
<!-- HUMOUR -->
<span class="text-uppercase font-weight-bold" style="font-size:13px;">humour</span>
<div class="progress my-2 rounded-0"><div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px; background-color:#000;"></div></div>
</div>
<div class="card rounded-0 w-100 col-6 p-3 border-0" style="background-color:#fff; border:1px solid #000; color:#000;">
<!-- CHARISMA -->
<span class="text-uppercase font-weight-bold" style="font-size:13px;">charisma</span>
<div class="progress my-2 rounded-0"><div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px; background-color:#000;"></div></div>
<!-- PATIENCE -->
<span class="text-uppercase font-weight-bold" style="font-size:13px;">patience</span>
<div class="progress my-2 rounded-0"><div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px; background-color:#000;"></div></div>
<!-- EMPATHY -->
<span class="text-uppercase font-weight-bold" style="font-size:13px;">empathy</span>
<div class="progress my-2 rounded-0"><div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px; background-color:#000;"></div></div>
</div>
</div>
<!-- LIKES AND DISLIKES -->
<!-- TITLE CARD -->
<div class="row no-gutters">
<div class="col-auto">
<span class="fa-stack">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-heart fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="card rounded-0 border-0 col-auto" style="background-color:rgba(0,0,0,0.0)">
<hr class="my-auto d-none d-lg-flex" style="width:20px; border:1px solid #000;">
</div>
<div class="col-auto">
<div class="card rounded-0 justify-content-center text-right p-2 font-weight-bold" style="border:1px solid #000; height:30px; width:185px; background-color:#000; color:#fff; letter-spacing:1px;">PREFERENCES</div>
</div>
</div>
<!-- DETAILS -->
<div class="row no-gutters">
<div class="card rounded-0 border-0 w-100 col-6 p-3 mt-2" style="background-color:#fff; height:135px; color:#000; overflow:auto;">
<ul class="fa-ul">
<li><span class="fa-li"><i class="fal fa-heart" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart" style="color:#000"></i></span>content</li>
</ul>
</div>
<div class="card rounded-0 w-100 col-6 p-3 mt-2" style="background-color:#fff; border:1px solid #000; height:135px; color:#000; border-width: 0px 0px 0px 1px; overflow:auto;">
<ul class="fa-ul">
<li><span class="fa-li"><i class="fal fa-heart-broken" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart-broken" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart-broken" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart-broken" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart-broken" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart-broken" style="color:#000"></i></span>content</li>
</ul>
</div>
</div>
</div>
</div>
<!-- PERSONALITY, END -->
<!-- HISTORY -->
<div class="tab-pane fade" id="a3">
<div class="card rounded-0 p-2" style="height:255px; background-color:#fff; color:#000; overflow:auto;">
<!-- TITLE CARD -->
<div class="row no-gutters mb-2">
<div class="col-auto">
<span class="fa-stack">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-bookmark fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="card rounded-0 border-0 col-auto" style="background-color:rgba(0,0,0,0.0)">
<hr class="my-auto d-none d-lg-flex" style="width:20px; border:1px solid #000;">
</div>
<div class="col-auto">
<div class="card rounded-0 justify-content-center text-right p-2 font-weight-bold" style="border:1px solid #000; height:30px; width:185px; background-color:#000; color:#fff; letter-spacing:1px;">HISTORY</div>
</div>
</div>
<!-- DESCRIPTION -->
<div class="card border-0 p-3 text-justify" style="background-color:rgba(0,0,0,0.0)">
<p><a class="font-weight-bold text-uppercase" style="font-size:20px">L</a>orem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget lobortis ipsum, vel pharetra odio. Nulla ullamcorper nisl ac nisi convallis, eu vulputate diam hendrerit. Integer at enim ac neque placerat fringilla vitae ultricies lectus. Etiam iaculis, odio ut faucibus fermentum, nibh mi tristique felis, ac rutrum felis turpis vehicula mi.</p>
<p><a class="font-weight-bold text-uppercase" style="font-size:20px">D</a>uis velit magna, aliquam a est eget, accumsan venenatis magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin magna est, imperdiet non malesuada vel, pretium sit amet dui. Nulla quis neque erat. Pellentesque malesuada posuere diam, et consequat ante volutpat non. Pellentesque sit amet interdum ligula, in consectetur ligula. Curabitur ac leo dictum, laoreet dui et, bibendum sapien. Cras id quam non quam malesuada lacinia ut quis justo. Nam eu elit volutpat, ullamcorper nulla et, luctus magna. Donec id tempus urna. Quisque hendrerit est velit, vel pulvinar turpis mollis nec. Sed eu libero facilisis, commodo arcu non, congue magna.</p>
</div>
</div>
</div>
<!-- HISTORY, END -->
<!-- DESIGN NOTES -->
<div class="tab-pane fade" id="a4">
<div class="card rounded-0 p-2 w-100" style="height:255px; background-color:#fff; color:#000; overflow:auto;">
<!-- TITLE CARD -->
<div class="row no-gutters mb-2">
<div class="col-auto">
<span class="fa-stack">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-note-sticky fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="card rounded-0 border-0 col-auto" style="background-color:rgba(0,0,0,0.0)">
<hr class="my-auto d-none d-lg-flex" style="width:20px; border:1px solid #000;">
</div>
<div class="col-auto">
<div class="card rounded-0 justify-content-center text-right p-2 font-weight-bold" style="border:1px solid #000; height:30px; width:185px; background-color:#000; color:#fff; letter-spacing:1px;">DESIGN NOTES</div>
</div>
</div>
<!-- REFERENCE IMAGE -->
<div class="col-auto card border-0 rounded-0" style="height:200px; background-color:#fff; background-image:url(https://via.placeholder.com/200.png); background-position:center; background-size:contain; background-repeat:no-repeat;"></div>
<!-- NOTES -->
<div class="card rounded-0 border-0 w-100 col-auto p-3 mt-2" style="background-color:rgba(0,0,0,0.0); height:135px; color:#000; overflow:auto;">
<ul class="fa-ul">
<li><span class="fa-li"><i class="fal fa-chevron-right" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right" style="color:#000"></i></span>content</li>
</ul>
</div>
</div>
</div>
<!-- DESIGN NOTES, END -->
<!-- RELATIONS -->
<div class="tab-pane fade" id="a5">
<div class="card rounded-0 p-2" style="height:255px; background-color:#fff; color:#000; overflow:auto;">
<!-- TITLE CARD -->
<div class="row no-gutters mb-2">
<div class="col-auto">
<span class="fa-stack">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-link fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="card rounded-0 border-0 col-auto" style="background-color:rgba(0,0,0,0.0)">
<hr class="my-auto d-none d-lg-flex" style="width:20px; border:1px solid #000;">
</div>
<div class="col-auto">
<div class="card rounded-0 justify-content-center text-right p-2 font-weight-bold" style="border:1px solid #000; height:30px; width:185px; background-color:#000; color:#fff; letter-spacing:1px;">RELATIONSHIPS</div>
</div>
</div>
<!-- START COPY: RELATION -->
<div class="row no-gutters mx-auto">
<div class="col-auto">
<!-- ICON -->
<div style="height:150px; width: 150px; background-image:url(https://via.placeholder.com/150.png); background-cover:size; background-position:center; clip-path: polygon(0 10%, 20% 50%, 0 90%, 100% 90%, 100% 10%);"></div>
</div>
<div class="col-auto">
<!-- RELATION -->
<div class="card rounded-0 justify-content-center p-1 font-weight-bold" style="margin-top:15px; height:30px; width:300px; border:1px solid #000; background-color:#000; color:#fff;">
<span><i class="fas fa-heart ml-1 mr-2" style="color:#ba5d5d"></i><a href="/" style="color:#999">NAME</a></span>
</div>
<!-- DESCRIPTION -->
<div class="card rounded-0 p-2" style="height:90px; width:300px; border:1px solid #000; overflow:auto; background-color:#fff">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempor lacus sed eleifend eleifend. Sed ut nunc felis. Suspendisse posuere pharetra tincidunt. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce eu ipsum congue, efficitur dui id, consectetur ex. Nunc mollis luctus gravida. Nulla facilisi. Praesent vestibulum diam cursus quam eleifend, ut finibus nulla scelerisque. Praesent eget malesuada purus, sed aliquam libero. Phasellus vel scelerisque neque, nec interdum libero. Nullam venenatis, urna in tincidunt mollis, nisi arcu egestas nisl, sed feugiat libero ante sit amet neque. Nullam magna mi, cursus nec suscipit nec, cursus eu orci.</div>
</div>
</div>
<!-- END COPY: RELATION -->
<!-- START COPY: RELATION -->
<div class="row no-gutters mx-auto">
<div class="col-auto">
<!-- ICON -->
<div style="height:150px; width: 150px; background-image:url(https://via.placeholder.com/150.png); background-cover:size; background-position:center; clip-path: polygon(0 10%, 20% 50%, 0 90%, 100% 90%, 100% 10%);"></div>
</div>
<div class="col-auto">
<!-- RELATION -->
<div class="card rounded-0 justify-content-center p-1 font-weight-bold" style="margin-top:15px; height:30px; width:300px; border:1px solid #000; background-color:#000; color:#fff;">
<span><i class="fas fa-heart ml-1 mr-2" style="color:#ba5d5d"></i><a href="/" style="color:#999">NAME</a></span>
</div>
<!-- DESCRIPTION -->
<div class="card rounded-0 p-2" style="height:90px; width:300px; border:1px solid #000; overflow:auto; background-color:#fff">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempor lacus sed eleifend eleifend. Sed ut nunc felis. Suspendisse posuere pharetra tincidunt. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce eu ipsum congue, efficitur dui id, consectetur ex. Nunc mollis luctus gravida. Nulla facilisi. Praesent vestibulum diam cursus quam eleifend, ut finibus nulla scelerisque. Praesent eget malesuada purus, sed aliquam libero. Phasellus vel scelerisque neque, nec interdum libero. Nullam venenatis, urna in tincidunt mollis, nisi arcu egestas nisl, sed feugiat libero ante sit amet neque. Nullam magna mi, cursus nec suscipit nec, cursus eu orci.</div>
</div>
</div>
<!-- END COPY: RELATION -->
<!-- START COPY: RELATION -->
<div class="row no-gutters mx-auto">
<div class="col-auto">
<!-- ICON -->
<div style="height:150px; width: 150px; background-image:url(https://via.placeholder.com/150.png); background-cover:size; background-position:center; clip-path: polygon(0 10%, 20% 50%, 0 90%, 100% 90%, 100% 10%);"></div>
</div>
<div class="col-auto">
<!-- RELATION -->
<div class="card rounded-0 justify-content-center p-1 font-weight-bold" style="margin-top:15px; height:30px; width:300px; border:1px solid #000; background-color:#000; color:#fff;">
<span><i class="fas fa-heart ml-1 mr-2" style="color:#ba5d5d"></i><a href="/" style="color:#999">NAME</a></span>
</div>
<!-- DESCRIPTION -->
<div class="card rounded-0 p-2" style="height:90px; width:300px; border:1px solid #000; overflow:auto; background-color:#fff">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempor lacus sed eleifend eleifend. Sed ut nunc felis. Suspendisse posuere pharetra tincidunt. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce eu ipsum congue, efficitur dui id, consectetur ex. Nunc mollis luctus gravida. Nulla facilisi. Praesent vestibulum diam cursus quam eleifend, ut finibus nulla scelerisque. Praesent eget malesuada purus, sed aliquam libero. Phasellus vel scelerisque neque, nec interdum libero. Nullam venenatis, urna in tincidunt mollis, nisi arcu egestas nisl, sed feugiat libero ante sit amet neque. Nullam magna mi, cursus nec suscipit nec, cursus eu orci.</div>
</div>
</div>
<!-- END COPY: RELATION -->
</div>
</div>
<!-- RELATIONS, END -->
<!-- END -->
</div>
<!-- NAVIGATION -->
<div class="justify-content-center">
<ul class="nav row no-gutters text-center">
<!-- BASIC -->
<li class="nav-item">
<a data-toggle="tab" href="#a1" class="active btn btn-outline-primary rounded-0 border-0" style="font-size:15px; background-color:#999; height:35px; width:101px;">
<i class="fas fa-user" style="color:#fff"></i>
</a>
</li>
<!-- PERSONALITY -->
<li class="nav-item">
<a data-toggle="tab" href="#a2" class="btn btn-outline-primary rounded-0 border-0" style="font-size:15px; background-color:#999; height:35px; width:101px;">
<i class="fas fa-star" style="color:#fff"></i>
</a>
</li>
<!-- HISTORY -->
<li class="nav-item">
<a data-toggle="tab" href="#a3" class="btn btn-outline-primary rounded-0 border-0" style="font-size:15px; background-color:#999; height:35px; width:101px;">
<i class="fas fa-books" style="color:#fff"></i>
</a>
<!-- DESIGN -->
<li class="nav-item">
<a data-toggle="tab" href="#a4" class="btn btn-outline-primary rounded-0 border-0" style="font-size:15px; background-color:#999; height:35px; width:101px;">
<i class="fas fa-pen" style="color:#fff"></i>
</a>
</li>
<!-- RELATIONS -->
<li class="nav-item">
<a data-toggle="tab" href="#a5" class="btn btn-outline-primary rounded-0 border-0" style="font-size:15px; background-color:#999; height:35px; width:101px;">
<i class="fas fa-hands-holding-heart" style="color:#fff"></i>
</a>
</li>
</ul>
</div>
</div>
<!-- QUOTE -->
<div class="card rounded-0 mx-auto p-1 text-center" style="background-color:#000; border:1px solid #000;max-height:30px; width:515px; color:#fff">
<span class="font-weight-bold font-italic" style="letter-spacing:1px;">QUOTE HERE...</span>
</div>
</div>
<!-- SECOND -->
<div id="accordion2" class="collapse" role="tabpanel" aria-labelledby="heading2"
data-parent="#accordion">
<div class="card border-0 mx-auto m-0 p-0" style="width:400px; background-color:rgba(0,0,0,0.0);"><i class="fas fa-triangle fa-2x mx-auto" style="color:#000;"></i></div>
<div class="card rounded-0 mx-auto p-1" style="background-color:#000; border:1px solid #000;height:300px; width:515px; top:-10px;">
<div class="tab-content">
<!-- BASIC -->
<div class="tab-pane fade active show" id="b1">
<div class="card rounded-0 p-2" style="height:255px; background-color:#fff; color:#000; overflow:auto;">
<!-- TITLE CARD -->
<div class="row no-gutters">
<div class="col-auto">
<span class="fa-stack">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-eye fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="card rounded-0 border-0 col-auto" style="background-color:rgba(0,0,0,0.0)">
<hr class="my-auto d-none d-lg-flex" style="width:20px; border:1px solid #000;">
</div>
<div class="col-auto">
<div class="card rounded-0 justify-content-center text-right p-2 font-weight-bold" style="border:1px solid #000; height:30px; width:185px; background-color:#000; color:#fff; letter-spacing:1px;">ABOUT</div>
</div>
</div>
<!-- DETAILS -->
<div class="row no-gutters">
<div class="card rounded-0 w-100 col-6 p-3 mt-2" style="background-color:#fff; border:1px solid #000; min-height:120px; color:#000; border-width: 0px 0px 1px 0px">
<!-- CONTENT -->
<span><i class="fas fa-signature fa-lg"></i><span class="pull-right">name</span></span>
<!-- CONTENT -->
<span><i class="fas fa-calendar-days fa-lg"></i><span class="pull-right">age</span></span>
<!-- CONTENT -->
<span><i class="fas fa-mars-and-venus fa-lg"></i><span class="pull-right">gender</span></span>
<!-- CONTENT -->
<span><i class="fas fa-id-card fa-lg"></i><span class="pull-right">pronouns</span></span>
<!-- CONTENT -->
<span><i class="fas fa-paw-simple fa-lg"></i><span class="pull-right">species</span></span>
</div>
<div class="card rounded-0 w-100 col-6 p-3 mt-2" style="background-color:#fff; border:1px solid #000; min-height:120px; color:#000; border-width: 0px 0px 1px 1px">
<!-- CONTENT -->
<span><i class="fas fa-briefcase fa-lg"></i><span class="pull-right">occupation</span></span>
<!-- CONTENT -->
<span><i class="fas fa-heart fa-lg"></i><span class="pull-right">orientation</span></span>
<!-- CONTENT -->
<span><i class="fas fa-rings-wedding fa-lg"></i><span class="pull-right">marital status</span></span>
<!-- CONTENT -->
<span><i class="fas fa-hands-holding fa-lg"></i><span class="pull-right">trade status</span></span>
<!-- CONTENT -->
<span><i class="fas fa-dollar fa-lg"></i><span class="pull-right">worth</span></span>
</div>
</div>
<!-- DESCRIPTION -->
<p class="pl-3 pt-3 text-justify"><a class="font-weight-bold text-uppercase" style="font-size:20px">L</a>orem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget lobortis ipsum, vel pharetra odio. Nulla ullamcorper nisl ac nisi convallis, eu vulputate diam hendrerit. Integer at enim ac neque placerat fringilla vitae ultricies lectus. Etiam iaculis, odio ut faucibus fermentum, nibh mi tristique felis, ac rutrum felis turpis vehicula mi.</p>
<p class="pl-3 text-justify"><a class="font-weight-bold text-uppercase" style="font-size:20px">D</a>uis velit magna, aliquam a est eget, accumsan venenatis magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin magna est, imperdiet non malesuada vel, pretium sit amet dui. Nulla quis neque erat. Pellentesque malesuada posuere diam, et consequat ante volutpat non. Pellentesque sit amet interdum ligula, in consectetur ligula. Curabitur ac leo dictum, laoreet dui et, bibendum sapien. Cras id quam non quam malesuada lacinia ut quis justo. Nam eu elit volutpat, ullamcorper nulla et, luctus magna. Donec id tempus urna. Quisque hendrerit est velit, vel pulvinar turpis mollis nec. Sed eu libero facilisis, commodo arcu non, congue magna.</p>
</div>
</div>
<!-- BASIC, END -->
<!-- PERSONALITY -->
<div class="tab-pane fade" id="b2">
<div class="card rounded-0 p-2" style="height:255px; background-color:#fff; color:#000; overflow:auto;">
<!-- TITLE CARD -->
<div class="row no-gutters">
<div class="col-auto">
<span class="fa-stack">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-masks-theater fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="card rounded-0 border-0 col-auto" style="background-color:rgba(0,0,0,0.0)">
<hr class="my-auto d-none d-lg-flex" style="width:20px; border:1px solid #000;">
</div>
<div class="col-auto">
<div class="card rounded-0 justify-content-center text-right p-2 font-weight-bold" style="border:1px solid #000; height:30px; width:185px; background-color:#000; color:#fff; letter-spacing:1px;">PERSONALITY</div>
</div>
</div>
<!-- DESCRIPTION -->
<div class="card border-0 mb-2 p-3 text-justify" style="background-color:rgba(0,0,0,0.0)">
<p><a class="font-weight-bold text-uppercase" style="font-size:20px">L</a>orem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget lobortis ipsum, vel pharetra odio. Nulla ullamcorper nisl ac nisi convallis, eu vulputate diam hendrerit. Integer at enim ac neque placerat fringilla vitae ultricies lectus. Etiam iaculis, odio ut faucibus fermentum, nibh mi tristique felis, ac rutrum felis turpis vehicula mi.</p>
</div>
<!-- STATS -->
<!-- TITLE CARD -->
<div class="row no-gutters">
<div class="col-auto">
<span class="fa-stack">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-chart-simple fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="card rounded-0 border-0 col-auto" style="background-color:rgba(0,0,0,0.0)">
<hr class="my-auto d-none d-lg-flex" style="width:20px; border:1px solid #000;">
</div>
<div class="col-auto">
<div class="card rounded-0 justify-content-center text-right p-2 font-weight-bold" style="border:1px solid #000; height:30px; width:185px; background-color:#000; color:#fff; letter-spacing:1px;">STATS</div>
</div>
</div>
<!-- BARS -->
<div class="row no-gutters mb-2">
<div class="card rounded-0 border-0 w-100 col-6 p-3" style="background-color:#fff; color:#000;">
<!-- INTELLIGENCE -->
<span class="text-uppercase font-weight-bold" style="font-size:13px;">intelligence</span>
<div class="progress my-2 rounded-0"><div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px; background-color:#000;"></div></div>
<!-- CONFIDENCE -->
<span class="text-uppercase font-weight-bold" style="font-size:13px;">confidence</span>
<div class="progress my-2 rounded-0"><div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px; background-color:#000;"></div></div>
<!-- HUMOUR -->
<span class="text-uppercase font-weight-bold" style="font-size:13px;">humour</span>
<div class="progress my-2 rounded-0"><div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px; background-color:#000;"></div></div>
</div>
<div class="card rounded-0 w-100 col-6 p-3 border-0" style="background-color:#fff; border:1px solid #000; color:#000;">
<!-- CHARISMA -->
<span class="text-uppercase font-weight-bold" style="font-size:13px;">charisma</span>
<div class="progress my-2 rounded-0"><div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px; background-color:#000;"></div></div>
<!-- PATIENCE -->
<span class="text-uppercase font-weight-bold" style="font-size:13px;">patience</span>
<div class="progress my-2 rounded-0"><div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px; background-color:#000;"></div></div>
<!-- EMPATHY -->
<span class="text-uppercase font-weight-bold" style="font-size:13px;">empathy</span>
<div class="progress my-2 rounded-0"><div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px; background-color:#000;"></div></div>
</div>
</div>
<!-- LIKES AND DISLIKES -->
<!-- TITLE CARD -->
<div class="row no-gutters">
<div class="col-auto">
<span class="fa-stack">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-heart fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="card rounded-0 border-0 col-auto" style="background-color:rgba(0,0,0,0.0)">
<hr class="my-auto d-none d-lg-flex" style="width:20px; border:1px solid #000;">
</div>
<div class="col-auto">
<div class="card rounded-0 justify-content-center text-right p-2 font-weight-bold" style="border:1px solid #000; height:30px; width:185px; background-color:#000; color:#fff; letter-spacing:1px;">PREFERENCES</div>
</div>
</div>
<!-- DETAILS -->
<div class="row no-gutters">
<div class="card rounded-0 border-0 w-100 col-6 p-3 mt-2" style="background-color:#fff; height:135px; color:#000; overflow:auto;">
<ul class="fa-ul">
<li><span class="fa-li"><i class="fal fa-heart" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart" style="color:#000"></i></span>content</li>
</ul>
</div>
<div class="card rounded-0 w-100 col-6 p-3 mt-2" style="background-color:#fff; border:1px solid #000; height:135px; color:#000; border-width: 0px 0px 0px 1px; overflow:auto;">
<ul class="fa-ul">
<li><span class="fa-li"><i class="fal fa-heart-broken" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart-broken" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart-broken" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart-broken" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart-broken" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart-broken" style="color:#000"></i></span>content</li>
</ul>
</div>
</div>
</div>
</div>
<!-- PERSONALITY, END -->
<!-- HISTORY -->
<div class="tab-pane fade" id="b3">
<div class="card rounded-0 p-2" style="height:255px; background-color:#fff; color:#000; overflow:auto;">
<!-- TITLE CARD -->
<div class="row no-gutters mb-2">
<div class="col-auto">
<span class="fa-stack">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-bookmark fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="card rounded-0 border-0 col-auto" style="background-color:rgba(0,0,0,0.0)">
<hr class="my-auto d-none d-lg-flex" style="width:20px; border:1px solid #000;">
</div>
<div class="col-auto">
<div class="card rounded-0 justify-content-center text-right p-2 font-weight-bold" style="border:1px solid #000; height:30px; width:185px; background-color:#000; color:#fff; letter-spacing:1px;">HISTORY</div>
</div>
</div>
<!-- DESCRIPTION -->
<div class="card border-0 p-3 text-justify" style="background-color:rgba(0,0,0,0.0)">
<p><a class="font-weight-bold text-uppercase" style="font-size:20px">L</a>orem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget lobortis ipsum, vel pharetra odio. Nulla ullamcorper nisl ac nisi convallis, eu vulputate diam hendrerit. Integer at enim ac neque placerat fringilla vitae ultricies lectus. Etiam iaculis, odio ut faucibus fermentum, nibh mi tristique felis, ac rutrum felis turpis vehicula mi.</p>
<p><a class="font-weight-bold text-uppercase" style="font-size:20px">D</a>uis velit magna, aliquam a est eget, accumsan venenatis magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin magna est, imperdiet non malesuada vel, pretium sit amet dui. Nulla quis neque erat. Pellentesque malesuada posuere diam, et consequat ante volutpat non. Pellentesque sit amet interdum ligula, in consectetur ligula. Curabitur ac leo dictum, laoreet dui et, bibendum sapien. Cras id quam non quam malesuada lacinia ut quis justo. Nam eu elit volutpat, ullamcorper nulla et, luctus magna. Donec id tempus urna. Quisque hendrerit est velit, vel pulvinar turpis mollis nec. Sed eu libero facilisis, commodo arcu non, congue magna.</p>
</div>
</div>
</div>
<!-- HISTORY, END -->
<!-- DESIGN NOTES -->
<div class="tab-pane fade" id="b4">
<div class="card rounded-0 p-2 w-100" style="height:255px; background-color:#fff; color:#000; overflow:auto;">
<!-- TITLE CARD -->
<div class="row no-gutters mb-2">
<div class="col-auto">
<span class="fa-stack">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-note-sticky fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="card rounded-0 border-0 col-auto" style="background-color:rgba(0,0,0,0.0)">
<hr class="my-auto d-none d-lg-flex" style="width:20px; border:1px solid #000;">
</div>
<div class="col-auto">
<div class="card rounded-0 justify-content-center text-right p-2 font-weight-bold" style="border:1px solid #000; height:30px; width:185px; background-color:#000; color:#fff; letter-spacing:1px;">DESIGN NOTES</div>
</div>
</div>
<!-- REFERENCE IMAGE -->
<div class="col-auto card border-0 rounded-0" style="height:200px; background-color:#fff; background-image:url(https://via.placeholder.com/200.png); background-position:center; background-size:contain; background-repeat:no-repeat;"></div>
<!-- NOTES -->
<div class="card rounded-0 border-0 w-100 col-auto p-3 mt-2" style="background-color:rgba(0,0,0,0.0); height:135px; color:#000; overflow:auto;">
<ul class="fa-ul">
<li><span class="fa-li"><i class="fal fa-chevron-right" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right" style="color:#000"></i></span>content</li>
</ul>
</div>
</div>
</div>
<!-- DESIGN NOTES, END -->
<!-- RELATIONS -->
<div class="tab-pane fade" id="b5">
<div class="card rounded-0 p-2" style="height:255px; background-color:#fff; color:#000; overflow:auto;">
<!-- TITLE CARD -->
<div class="row no-gutters mb-2">
<div class="col-auto">
<span class="fa-stack">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-link fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="card rounded-0 border-0 col-auto" style="background-color:rgba(0,0,0,0.0)">
<hr class="my-auto d-none d-lg-flex" style="width:20px; border:1px solid #000;">
</div>
<div class="col-auto">
<div class="card rounded-0 justify-content-center text-right p-2 font-weight-bold" style="border:1px solid #000; height:30px; width:185px; background-color:#000; color:#fff; letter-spacing:1px;">RELATIONSHIPS</div>
</div>
</div>
<!-- START COPY: RELATION -->
<div class="row no-gutters mx-auto">
<div class="col-auto">
<!-- ICON -->
<div style="height:150px; width: 150px; background-image:url(https://via.placeholder.com/150.png); background-cover:size; background-position:center; clip-path: polygon(0 10%, 20% 50%, 0 90%, 100% 90%, 100% 10%);"></div>
</div>
<div class="col-auto">
<!-- RELATION -->
<div class="card rounded-0 justify-content-center p-1 font-weight-bold" style="margin-top:15px; height:30px; width:300px; border:1px solid #000; background-color:#000; color:#fff;">
<span><i class="fas fa-heart ml-1 mr-2" style="color:#ba5d5d"></i><a href="/" style="color:#999">NAME</a></span>
</div>
<!-- DESCRIPTION -->
<div class="card rounded-0 p-2" style="height:90px; width:300px; border:1px solid #000; overflow:auto; background-color:#fff">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempor lacus sed eleifend eleifend. Sed ut nunc felis. Suspendisse posuere pharetra tincidunt. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce eu ipsum congue, efficitur dui id, consectetur ex. Nunc mollis luctus gravida. Nulla facilisi. Praesent vestibulum diam cursus quam eleifend, ut finibus nulla scelerisque. Praesent eget malesuada purus, sed aliquam libero. Phasellus vel scelerisque neque, nec interdum libero. Nullam venenatis, urna in tincidunt mollis, nisi arcu egestas nisl, sed feugiat libero ante sit amet neque. Nullam magna mi, cursus nec suscipit nec, cursus eu orci.</div>
</div>
</div>
<!-- END COPY: RELATION -->
<!-- START COPY: RELATION -->
<div class="row no-gutters mx-auto">
<div class="col-auto">
<!-- ICON -->
<div style="height:150px; width: 150px; background-image:url(https://via.placeholder.com/150.png); background-cover:size; background-position:center; clip-path: polygon(0 10%, 20% 50%, 0 90%, 100% 90%, 100% 10%);"></div>
</div>
<div class="col-auto">
<!-- RELATION -->
<div class="card rounded-0 justify-content-center p-1 font-weight-bold" style="margin-top:15px; height:30px; width:300px; border:1px solid #000; background-color:#000; color:#fff;">
<span><i class="fas fa-heart ml-1 mr-2" style="color:#ba5d5d"></i><a href="/" style="color:#999">NAME</a></span>
</div>
<!-- DESCRIPTION -->
<div class="card rounded-0 p-2" style="height:90px; width:300px; border:1px solid #000; overflow:auto; background-color:#fff">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempor lacus sed eleifend eleifend. Sed ut nunc felis. Suspendisse posuere pharetra tincidunt. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce eu ipsum congue, efficitur dui id, consectetur ex. Nunc mollis luctus gravida. Nulla facilisi. Praesent vestibulum diam cursus quam eleifend, ut finibus nulla scelerisque. Praesent eget malesuada purus, sed aliquam libero. Phasellus vel scelerisque neque, nec interdum libero. Nullam venenatis, urna in tincidunt mollis, nisi arcu egestas nisl, sed feugiat libero ante sit amet neque. Nullam magna mi, cursus nec suscipit nec, cursus eu orci.</div>
</div>
</div>
<!-- END COPY: RELATION -->
<!-- START COPY: RELATION -->
<div class="row no-gutters mx-auto">
<div class="col-auto">
<!-- ICON -->
<div style="height:150px; width: 150px; background-image:url(https://via.placeholder.com/150.png); background-cover:size; background-position:center; clip-path: polygon(0 10%, 20% 50%, 0 90%, 100% 90%, 100% 10%);"></div>
</div>
<div class="col-auto">
<!-- RELATION -->
<div class="card rounded-0 justify-content-center p-1 font-weight-bold" style="margin-top:15px; height:30px; width:300px; border:1px solid #000; background-color:#000; color:#fff;">
<span><i class="fas fa-heart ml-1 mr-2" style="color:#ba5d5d"></i><a href="/" style="color:#999">NAME</a></span>
</div>
<!-- DESCRIPTION -->
<div class="card rounded-0 p-2" style="height:90px; width:300px; border:1px solid #000; overflow:auto; background-color:#fff">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempor lacus sed eleifend eleifend. Sed ut nunc felis. Suspendisse posuere pharetra tincidunt. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce eu ipsum congue, efficitur dui id, consectetur ex. Nunc mollis luctus gravida. Nulla facilisi. Praesent vestibulum diam cursus quam eleifend, ut finibus nulla scelerisque. Praesent eget malesuada purus, sed aliquam libero. Phasellus vel scelerisque neque, nec interdum libero. Nullam venenatis, urna in tincidunt mollis, nisi arcu egestas nisl, sed feugiat libero ante sit amet neque. Nullam magna mi, cursus nec suscipit nec, cursus eu orci.</div>
</div>
</div>
<!-- END COPY: RELATION -->
</div>
</div>
<!-- RELATIONS, END -->
<!-- END -->
</div>
<!-- NAVIGATION -->
<div class="justify-content-center">
<ul class="nav row no-gutters text-center">
<!-- BASIC -->
<li class="nav-item">
<a data-toggle="tab" href="#b1" class="active btn btn-outline-primary rounded-0 border-0" style="font-size:15px; background-color:#999; height:35px; width:101px;">
<i class="fas fa-user" style="color:#fff"></i>
</a>
</li>
<!-- PERSONALITY -->
<li class="nav-item">
<a data-toggle="tab" href="#b2" class="btn btn-outline-primary rounded-0 border-0" style="font-size:15px; background-color:#999; height:35px; width:101px;">
<i class="fas fa-star" style="color:#fff"></i>
</a>
</li>
<!-- HISTORY -->
<li class="nav-item">
<a data-toggle="tab" href="#b3" class="btn btn-outline-primary rounded-0 border-0" style="font-size:15px; background-color:#999; height:35px; width:101px;">
<i class="fas fa-books" style="color:#fff"></i>
</a>
<!-- DESIGN -->
<li class="nav-item">
<a data-toggle="tab" href="#b4" class="btn btn-outline-primary rounded-0 border-0" style="font-size:15px; background-color:#999; height:35px; width:101px;">
<i class="fas fa-pen" style="color:#fff"></i>
</a>
</li>
<!-- RELATIONS -->
<li class="nav-item">
<a data-toggle="tab" href="#b5" class="btn btn-outline-primary rounded-0 border-0" style="font-size:15px; background-color:#999; height:35px; width:101px;">
<i class="fas fa-hands-holding-heart" style="color:#fff"></i>
</a>
</li>
</ul>
</div>
</div>
<!-- QUOTE -->
<div class="card rounded-0 mx-auto p-1 text-center" style="background-color:#000; border:1px solid #000;max-height:30px; width:515px; color:#fff">
<span class="font-weight-bold font-italic" style="letter-spacing:1px;">QUOTE HERE...</span>
</div>
</div>
<!-- THIRD -->
<div id="accordion3" class="collapse" role="tabpanel" aria-labelledby="heading3"
data-parent="#accordion">
<div class="card border-0 mx-auto m-0 p-0" style="width:400px; background-color:rgba(0,0,0,0.0);"><i class="fas fa-triangle fa-2x" style="color:#000; margin-left:368px;"></i></div>
<div class="card rounded-0 mx-auto p-1" style="background-color:#000; border:1px solid #000;height:300px; width:515px; top:-10px;">
<div class="tab-content">
<!-- BASIC -->
<div class="tab-pane fade active show" id="c1">
<div class="card rounded-0 p-2" style="height:255px; background-color:#fff; color:#000; overflow:auto;">
<!-- TITLE CARD -->
<div class="row no-gutters">
<div class="col-auto">
<span class="fa-stack">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-eye fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="card rounded-0 border-0 col-auto" style="background-color:rgba(0,0,0,0.0)">
<hr class="my-auto d-none d-lg-flex" style="width:20px; border:1px solid #000;">
</div>
<div class="col-auto">
<div class="card rounded-0 justify-content-center text-right p-2 font-weight-bold" style="border:1px solid #000; height:30px; width:185px; background-color:#000; color:#fff; letter-spacing:1px;">ABOUT</div>
</div>
</div>
<!-- DETAILS -->
<div class="row no-gutters">
<div class="card rounded-0 w-100 col-6 p-3 mt-2" style="background-color:#fff; border:1px solid #000; min-height:120px; color:#000; border-width: 0px 0px 1px 0px">
<!-- CONTENT -->
<span><i class="fas fa-signature fa-lg"></i><span class="pull-right">name</span></span>
<!-- CONTENT -->
<span><i class="fas fa-calendar-days fa-lg"></i><span class="pull-right">age</span></span>
<!-- CONTENT -->
<span><i class="fas fa-mars-and-venus fa-lg"></i><span class="pull-right">gender</span></span>
<!-- CONTENT -->
<span><i class="fas fa-id-card fa-lg"></i><span class="pull-right">pronouns</span></span>
<!-- CONTENT -->
<span><i class="fas fa-paw-simple fa-lg"></i><span class="pull-right">species</span></span>
</div>
<div class="card rounded-0 w-100 col-6 p-3 mt-2" style="background-color:#fff; border:1px solid #000; min-height:120px; color:#000; border-width: 0px 0px 1px 1px">
<!-- CONTENT -->
<span><i class="fas fa-briefcase fa-lg"></i><span class="pull-right">occupation</span></span>
<!-- CONTENT -->
<span><i class="fas fa-heart fa-lg"></i><span class="pull-right">orientation</span></span>
<!-- CONTENT -->
<span><i class="fas fa-rings-wedding fa-lg"></i><span class="pull-right">marital status</span></span>
<!-- CONTENT -->
<span><i class="fas fa-hands-holding fa-lg"></i><span class="pull-right">trade status</span></span>
<!-- CONTENT -->
<span><i class="fas fa-dollar fa-lg"></i><span class="pull-right">worth</span></span>
</div>
</div>
<!-- DESCRIPTION -->
<p class="pl-3 pt-3 text-justify"><a class="font-weight-bold text-uppercase" style="font-size:20px">L</a>orem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget lobortis ipsum, vel pharetra odio. Nulla ullamcorper nisl ac nisi convallis, eu vulputate diam hendrerit. Integer at enim ac neque placerat fringilla vitae ultricies lectus. Etiam iaculis, odio ut faucibus fermentum, nibh mi tristique felis, ac rutrum felis turpis vehicula mi.</p>
<p class="pl-3 text-justify"><a class="font-weight-bold text-uppercase" style="font-size:20px">D</a>uis velit magna, aliquam a est eget, accumsan venenatis magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin magna est, imperdiet non malesuada vel, pretium sit amet dui. Nulla quis neque erat. Pellentesque malesuada posuere diam, et consequat ante volutpat non. Pellentesque sit amet interdum ligula, in consectetur ligula. Curabitur ac leo dictum, laoreet dui et, bibendum sapien. Cras id quam non quam malesuada lacinia ut quis justo. Nam eu elit volutpat, ullamcorper nulla et, luctus magna. Donec id tempus urna. Quisque hendrerit est velit, vel pulvinar turpis mollis nec. Sed eu libero facilisis, commodo arcu non, congue magna.</p>
</div>
</div>
<!-- BASIC, END -->
<!-- PERSONALITY -->
<div class="tab-pane fade" id="c2">
<div class="card rounded-0 p-2" style="height:255px; background-color:#fff; color:#000; overflow:auto;">
<!-- TITLE CARD -->
<div class="row no-gutters">
<div class="col-auto">
<span class="fa-stack">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-masks-theater fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="card rounded-0 border-0 col-auto" style="background-color:rgba(0,0,0,0.0)">
<hr class="my-auto d-none d-lg-flex" style="width:20px; border:1px solid #000;">
</div>
<div class="col-auto">
<div class="card rounded-0 justify-content-center text-right p-2 font-weight-bold" style="border:1px solid #000; height:30px; width:185px; background-color:#000; color:#fff; letter-spacing:1px;">PERSONALITY</div>
</div>
</div>
<!-- DESCRIPTION -->
<div class="card border-0 mb-2 p-3 text-justify" style="background-color:rgba(0,0,0,0.0)">
<p><a class="font-weight-bold text-uppercase" style="font-size:20px">L</a>orem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget lobortis ipsum, vel pharetra odio. Nulla ullamcorper nisl ac nisi convallis, eu vulputate diam hendrerit. Integer at enim ac neque placerat fringilla vitae ultricies lectus. Etiam iaculis, odio ut faucibus fermentum, nibh mi tristique felis, ac rutrum felis turpis vehicula mi.</p>
</div>
<!-- STATS -->
<!-- TITLE CARD -->
<div class="row no-gutters">
<div class="col-auto">
<span class="fa-stack">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-chart-simple fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="card rounded-0 border-0 col-auto" style="background-color:rgba(0,0,0,0.0)">
<hr class="my-auto d-none d-lg-flex" style="width:20px; border:1px solid #000;">
</div>
<div class="col-auto">
<div class="card rounded-0 justify-content-center text-right p-2 font-weight-bold" style="border:1px solid #000; height:30px; width:185px; background-color:#000; color:#fff; letter-spacing:1px;">STATS</div>
</div>
</div>
<!-- BARS -->
<div class="row no-gutters mb-2">
<div class="card rounded-0 border-0 w-100 col-6 p-3" style="background-color:#fff; color:#000;">
<!-- INTELLIGENCE -->
<span class="text-uppercase font-weight-bold" style="font-size:13px;">intelligence</span>
<div class="progress my-2 rounded-0"><div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px; background-color:#000;"></div></div>
<!-- CONFIDENCE -->
<span class="text-uppercase font-weight-bold" style="font-size:13px;">confidence</span>
<div class="progress my-2 rounded-0"><div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px; background-color:#000;"></div></div>
<!-- HUMOUR -->
<span class="text-uppercase font-weight-bold" style="font-size:13px;">humour</span>
<div class="progress my-2 rounded-0"><div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px; background-color:#000;"></div></div>
</div>
<div class="card rounded-0 w-100 col-6 p-3 border-0" style="background-color:#fff; border:1px solid #000; color:#000;">
<!-- CHARISMA -->
<span class="text-uppercase font-weight-bold" style="font-size:13px;">charisma</span>
<div class="progress my-2 rounded-0"><div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px; background-color:#000;"></div></div>
<!-- PATIENCE -->
<span class="text-uppercase font-weight-bold" style="font-size:13px;">patience</span>
<div class="progress my-2 rounded-0"><div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px; background-color:#000;"></div></div>
<!-- EMPATHY -->
<span class="text-uppercase font-weight-bold" style="font-size:13px;">empathy</span>
<div class="progress my-2 rounded-0"><div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50%;height:16px; background-color:#000;"></div></div>
</div>
</div>
<!-- LIKES AND DISLIKES -->
<!-- TITLE CARD -->
<div class="row no-gutters">
<div class="col-auto">
<span class="fa-stack">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-heart fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="card rounded-0 border-0 col-auto" style="background-color:rgba(0,0,0,0.0)">
<hr class="my-auto d-none d-lg-flex" style="width:20px; border:1px solid #000;">
</div>
<div class="col-auto">
<div class="card rounded-0 justify-content-center text-right p-2 font-weight-bold" style="border:1px solid #000; height:30px; width:185px; background-color:#000; color:#fff; letter-spacing:1px;">PREFERENCES</div>
</div>
</div>
<!-- DETAILS -->
<div class="row no-gutters">
<div class="card rounded-0 border-0 w-100 col-6 p-3 mt-2" style="background-color:#fff; height:135px; color:#000; overflow:auto;">
<ul class="fa-ul">
<li><span class="fa-li"><i class="fal fa-heart" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart" style="color:#000"></i></span>content</li>
</ul>
</div>
<div class="card rounded-0 w-100 col-6 p-3 mt-2" style="background-color:#fff; border:1px solid #000; height:135px; color:#000; border-width: 0px 0px 0px 1px; overflow:auto;">
<ul class="fa-ul">
<li><span class="fa-li"><i class="fal fa-heart-broken" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart-broken" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart-broken" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart-broken" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart-broken" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart-broken" style="color:#000"></i></span>content</li>
</ul>
</div>
</div>
</div>
</div>
<!-- PERSONALITY, END -->
<!-- HISTORY -->
<div class="tab-pane fade" id="c3">
<div class="card rounded-0 p-2" style="height:255px; background-color:#fff; color:#000; overflow:auto;">
<!-- TITLE CARD -->
<div class="row no-gutters mb-2">
<div class="col-auto">
<span class="fa-stack">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-bookmark fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="card rounded-0 border-0 col-auto" style="background-color:rgba(0,0,0,0.0)">
<hr class="my-auto d-none d-lg-flex" style="width:20px; border:1px solid #000;">
</div>
<div class="col-auto">
<div class="card rounded-0 justify-content-center text-right p-2 font-weight-bold" style="border:1px solid #000; height:30px; width:185px; background-color:#000; color:#fff; letter-spacing:1px;">HISTORY</div>
</div>
</div>
<!-- DESCRIPTION -->
<div class="card border-0 p-3 text-justify" style="background-color:rgba(0,0,0,0.0)">
<p><a class="font-weight-bold text-uppercase" style="font-size:20px">L</a>orem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget lobortis ipsum, vel pharetra odio. Nulla ullamcorper nisl ac nisi convallis, eu vulputate diam hendrerit. Integer at enim ac neque placerat fringilla vitae ultricies lectus. Etiam iaculis, odio ut faucibus fermentum, nibh mi tristique felis, ac rutrum felis turpis vehicula mi.</p>
<p><a class="font-weight-bold text-uppercase" style="font-size:20px">D</a>uis velit magna, aliquam a est eget, accumsan venenatis magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin magna est, imperdiet non malesuada vel, pretium sit amet dui. Nulla quis neque erat. Pellentesque malesuada posuere diam, et consequat ante volutpat non. Pellentesque sit amet interdum ligula, in consectetur ligula. Curabitur ac leo dictum, laoreet dui et, bibendum sapien. Cras id quam non quam malesuada lacinia ut quis justo. Nam eu elit volutpat, ullamcorper nulla et, luctus magna. Donec id tempus urna. Quisque hendrerit est velit, vel pulvinar turpis mollis nec. Sed eu libero facilisis, commodo arcu non, congue magna.</p>
</div>
</div>
</div>
<!-- HISTORY, END -->
<!-- DESIGN NOTES -->
<div class="tab-pane fade" id="c4">
<div class="card rounded-0 p-2 w-100" style="height:255px; background-color:#fff; color:#000; overflow:auto;">
<!-- TITLE CARD -->
<div class="row no-gutters mb-2">
<div class="col-auto">
<span class="fa-stack">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-note-sticky fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="card rounded-0 border-0 col-auto" style="background-color:rgba(0,0,0,0.0)">
<hr class="my-auto d-none d-lg-flex" style="width:20px; border:1px solid #000;">
</div>
<div class="col-auto">
<div class="card rounded-0 justify-content-center text-right p-2 font-weight-bold" style="border:1px solid #000; height:30px; width:185px; background-color:#000; color:#fff; letter-spacing:1px;">DESIGN NOTES</div>
</div>
</div>
<!-- REFERENCE IMAGE -->
<div class="col-auto card border-0 rounded-0" style="height:200px; background-color:#fff; background-image:url(https://via.placeholder.com/200.png); background-position:center; background-size:contain; background-repeat:no-repeat;"></div>
<!-- NOTES -->
<div class="card rounded-0 border-0 w-100 col-auto p-3 mt-2" style="background-color:rgba(0,0,0,0.0); height:135px; color:#000; overflow:auto;">
<ul class="fa-ul">
<li><span class="fa-li"><i class="fal fa-chevron-right" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right" style="color:#000"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-chevron-right" style="color:#000"></i></span>content</li>
</ul>
</div>
</div>
</div>
<!-- DESIGN NOTES, END -->
<!-- RELATIONS -->
<div class="tab-pane fade" id="c5">
<div class="card rounded-0 p-2" style="height:255px; background-color:#fff; color:#000; overflow:auto;">
<!-- TITLE CARD -->
<div class="row no-gutters mb-2">
<div class="col-auto">
<span class="fa-stack">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-link fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="card rounded-0 border-0 col-auto" style="background-color:rgba(0,0,0,0.0)">
<hr class="my-auto d-none d-lg-flex" style="width:20px; border:1px solid #000;">
</div>
<div class="col-auto">
<div class="card rounded-0 justify-content-center text-right p-2 font-weight-bold" style="border:1px solid #000; height:30px; width:185px; background-color:#000; color:#fff; letter-spacing:1px;">RELATIONSHIPS</div>
</div>
</div>
<!-- START COPY: RELATION -->
<div class="row no-gutters mx-auto">
<div class="col-auto">
<!-- ICON -->
<div style="height:150px; width: 150px; background-image:url(https://via.placeholder.com/150.png); background-cover:size; background-position:center; clip-path: polygon(0 10%, 20% 50%, 0 90%, 100% 90%, 100% 10%);"></div>
</div>
<div class="col-auto">
<!-- RELATION -->
<div class="card rounded-0 justify-content-center p-1 font-weight-bold" style="margin-top:15px; height:30px; width:300px; border:1px solid #000; background-color:#000; color:#fff;">
<span><i class="fas fa-heart ml-1 mr-2" style="color:#ba5d5d"></i><a href="/" style="color:#999">NAME</a></span>
</div>
<!-- DESCRIPTION -->
<div class="card rounded-0 p-2" style="height:90px; width:300px; border:1px solid #000; overflow:auto; background-color:#fff">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempor lacus sed eleifend eleifend. Sed ut nunc felis. Suspendisse posuere pharetra tincidunt. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce eu ipsum congue, efficitur dui id, consectetur ex. Nunc mollis luctus gravida. Nulla facilisi. Praesent vestibulum diam cursus quam eleifend, ut finibus nulla scelerisque. Praesent eget malesuada purus, sed aliquam libero. Phasellus vel scelerisque neque, nec interdum libero. Nullam venenatis, urna in tincidunt mollis, nisi arcu egestas nisl, sed feugiat libero ante sit amet neque. Nullam magna mi, cursus nec suscipit nec, cursus eu orci.</div>
</div>
</div>
<!-- END COPY: RELATION -->
<!-- START COPY: RELATION -->
<div class="row no-gutters mx-auto">
<div class="col-auto">
<!-- ICON -->
<div style="height:150px; width: 150px; background-image:url(https://via.placeholder.com/150.png); background-cover:size; background-position:center; clip-path: polygon(0 10%, 20% 50%, 0 90%, 100% 90%, 100% 10%);"></div>
</div>
<div class="col-auto">
<!-- RELATION -->
<div class="card rounded-0 justify-content-center p-1 font-weight-bold" style="margin-top:15px; height:30px; width:300px; border:1px solid #000; background-color:#000; color:#fff;">
<span><i class="fas fa-heart ml-1 mr-2" style="color:#ba5d5d"></i><a href="/" style="color:#999">NAME</a></span>
</div>
<!-- DESCRIPTION -->
<div class="card rounded-0 p-2" style="height:90px; width:300px; border:1px solid #000; overflow:auto; background-color:#fff">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempor lacus sed eleifend eleifend. Sed ut nunc felis. Suspendisse posuere pharetra tincidunt. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce eu ipsum congue, efficitur dui id, consectetur ex. Nunc mollis luctus gravida. Nulla facilisi. Praesent vestibulum diam cursus quam eleifend, ut finibus nulla scelerisque. Praesent eget malesuada purus, sed aliquam libero. Phasellus vel scelerisque neque, nec interdum libero. Nullam venenatis, urna in tincidunt mollis, nisi arcu egestas nisl, sed feugiat libero ante sit amet neque. Nullam magna mi, cursus nec suscipit nec, cursus eu orci.</div>
</div>
</div>
<!-- END COPY: RELATION -->
<!-- START COPY: RELATION -->
<div class="row no-gutters mx-auto">
<div class="col-auto">
<!-- ICON -->
<div style="height:150px; width: 150px; background-image:url(https://via.placeholder.com/150.png); background-cover:size; background-position:center; clip-path: polygon(0 10%, 20% 50%, 0 90%, 100% 90%, 100% 10%);"></div>
</div>
<div class="col-auto">
<!-- RELATION -->
<div class="card rounded-0 justify-content-center p-1 font-weight-bold" style="margin-top:15px; height:30px; width:300px; border:1px solid #000; background-color:#000; color:#fff;">
<span><i class="fas fa-heart ml-1 mr-2" style="color:#ba5d5d"></i><a href="/" style="color:#999">NAME</a></span>
</div>
<!-- DESCRIPTION -->
<div class="card rounded-0 p-2" style="height:90px; width:300px; border:1px solid #000; overflow:auto; background-color:#fff">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempor lacus sed eleifend eleifend. Sed ut nunc felis. Suspendisse posuere pharetra tincidunt. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce eu ipsum congue, efficitur dui id, consectetur ex. Nunc mollis luctus gravida. Nulla facilisi. Praesent vestibulum diam cursus quam eleifend, ut finibus nulla scelerisque. Praesent eget malesuada purus, sed aliquam libero. Phasellus vel scelerisque neque, nec interdum libero. Nullam venenatis, urna in tincidunt mollis, nisi arcu egestas nisl, sed feugiat libero ante sit amet neque. Nullam magna mi, cursus nec suscipit nec, cursus eu orci.</div>
</div>
</div>
<!-- END COPY: RELATION -->
</div>
</div>
<!-- RELATIONS, END -->
<!-- END -->
</div>
<!-- NAVIGATION -->
<div class="justify-content-center">
<ul class="nav row no-gutters text-center">
<!-- BASIC -->
<li class="nav-item">
<a data-toggle="tab" href="#c1" class="active btn btn-outline-primary rounded-0 border-0" style="font-size:15px; background-color:#999; height:35px; width:101px;">
<i class="fas fa-user" style="color:#fff"></i>
</a>
</li>
<!-- PERSONALITY -->
<li class="nav-item">
<a data-toggle="tab" href="#c2" class="btn btn-outline-primary rounded-0 border-0" style="font-size:15px; background-color:#999; height:35px; width:101px;">
<i class="fas fa-star" style="color:#fff"></i>
</a>
</li>
<!-- HISTORY -->
<li class="nav-item">
<a data-toggle="tab" href="#c3" class="btn btn-outline-primary rounded-0 border-0" style="font-size:15px; background-color:#999; height:35px; width:101px;">
<i class="fas fa-books" style="color:#fff"></i>
</a>
<!-- DESIGN -->
<li class="nav-item">
<a data-toggle="tab" href="#c4" class="btn btn-outline-primary rounded-0 border-0" style="font-size:15px; background-color:#999; height:35px; width:101px;">
<i class="fas fa-pen" style="color:#fff"></i>
</a>
</li>
<!-- RELATIONS -->
<li class="nav-item">
<a data-toggle="tab" href="#c5" class="btn btn-outline-primary rounded-0 border-0" style="font-size:15px; background-color:#999; height:35px; width:101px;">
<i class="fas fa-hands-holding-heart" style="color:#fff"></i>
</a>
</li>
</ul>
</div>
</div>
<!-- QUOTE -->
<div class="card rounded-0 mx-auto p-1 text-center" style="background-color:#000; border:1px solid #000;max-height:30px; width:515px; color:#fff">
<span class="font-weight-bold font-italic" style="letter-spacing:1px;">QUOTE HERE...</span>
</div>
</div>
<!-- END -->
<!-- CREDIT, DON'T REMOVE -->
<div class="card mt-2 border-0 text-center" style="background-color:rgba(0,0,0,0.0);"><a href="/itemlabel"><i class="fas fa-code" style="color:#ba5d5d"></i></a></div>
</div>
</div>
</div>
