Profile
<!------------------------------------------------------------------------
QUEEN B [F2U]
COLOURS:
HEXES:
- White: #fff
- Black: #000
- Bright Gray: #eee
- Gainsboro: #ddd
- Davy's Grey: #555
- American Purple: #482747
- French Lime: #9DFC2D
- Beige: #F4FCE0
RGBA:
- Black (50%): rgba(0,0,0,0.5)
- American Purple (90%): rgba(72,39,71,0.9)
-------------------------------------------------------------------------->
<div class="container p-0" style="max-width:550px; font-size:14px;">
<!-- HIVE MOODBOARD (PC) -->
<div class="hidden-md-down row no-gutters">
<!-- LEFT -->
<div class="col-4 p-0" style="left:40px;">
<div class="card rounded-0 border-0" style="height:160px; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
background-image:url(IMG_1);
background-position:center;
background-size:cover;">
</div>
<div class="card rounded-0 border-0 justify-content-center text-center mt-1" style="height:160px; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); background-color:#9DFC2D; color:#482747;">
<i class="fal fa-bee fa-3x"></i>
</div>
</div>
<!-- MIDDLE-->
<div class="col-4 p-0">
<div class="card rounded-0 border-0 justify-content-center text-center mb-1" style="height:78px; clip-path: polygon(0 0, 100% 0, 75% 100%, 25% 100%); background-color:#482747; color:#9DFC2D;">
<i class="fal fa-crown fa-3x fa-flip" style="animation-duration: 4s;"></i>
</div>
<div class="card border-0" style="height:160px; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
background-image:url(IMG_2);
background-position:center;
background-size:cover;">
</div>
<div class="card rounded-0 border-0 justify-content-center text-center mt-1" style="height:78px; clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%); background-color:#482747; color:#9DFC2D;">
<i class="fal fa-honey-pot fa-3x"></i>
</div>
</div>
<!-- RIGHT -->
<div class="col-4 p-0" style="right:40px;">
<div class="card rounded-0 border-0 justify-content-center text-center mb-1" style="height:160px; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); background-color:#9DFC2D; color:#482747;">
<i class="fal fa-bee fa-3x"></i>
</div>
<div class="card rounded-0 border-0" style="height:160px; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
background-image:url(IMG_3);
background-position:center;
background-size:cover;">
</div>
</div>
<!-- DECOR -->
<i class="fa-duotone fa-link fa-2x" style="position:absolute; left:165px; top:150px; color:#482747;"></i>
<i class="fa-duotone fa-link fa-2x fa-flip-horizontal" style="position:absolute; right:165px; top:150px; color:#482747"></i>
</div>
<!-- HIVE MOODBOARD (MOBILE) -->
<div class="hidden-md-up row no-gutters">
<!-- LEFT -->
<div class="col-4 p-0" style="left:25px;">
<div class="card rounded-0 border-0" style="height:160px; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
background-image:url(IMG_1);
background-position:center;
background-size:cover;">
</div>
<div class="card rounded-0 border-0 justify-content-center text-center mt-1" style="height:160px; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); background-color:#9DFC2D; color:#482747;">
<i class="fal fa-bee fa-3x"></i>
</div>
</div>
<!-- MIDDLE-->
<div class="col-4 p-0">
<div class="card rounded-0 border-0 justify-content-center text-center mb-1" style="height:78px; clip-path: polygon(0 0, 100% 0, 75% 100%, 25% 100%); background-color:#482747; color:#9DFC2D;">
<i class="fal fa-crown fa-3x" style="animation-duration: 4s;"></i>
</div>
<div class="card border-0" style="height:160px; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
background-image:url(IMG_2);
background-position:center;
background-size:cover;">
</div>
<div class="card rounded-0 border-0 justify-content-center text-center mt-1" style="height:78px; clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%); background-color:#482747; color:#9DFC2D;">
<i class="fal fa-honey-pot fa-3x"></i>
</div>
</div>
<!-- RIGHT -->
<div class="col-4 p-0" style="right:25px;">
<div class="card rounded-0 border-0 justify-content-center text-center mb-1" style="height:160px; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); background-color:#9DFC2D; color:#482747;">
<i class="fal fa-bee fa-3x"></i>
</div>
<div class="card rounded-0 border-0" style="height:160px; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
background-image:url(IMG_3);
background-position:center;
background-size:cover;">
</div>
</div>
<!-- DECOR -->
<i class="fa-duotone fa-link fa-2x" style="position:absolute; left:100px; top:150px; color:#482747;"></i>
<i class="fa-duotone fa-link fa-2x fa-flip-horizontal" style="position:absolute; right:100px; top:150px; color:#482747"></i>
</div>
<!-- QUOTE (1) -->
<div class="col-12 p-1 pt-2" style="font-family:times;">
<div class="card p-1 rounded-0 bg-transparent" style="border:double #482747; border-width:4px 0px 4px 0px;">
<div class="card rounded-0 border-0 p-2 text-center text-uppercase" style="background-color:#482747; color:#fff;">
<i><b>Knew it, see, I win again; That will never change!</b></i>
</div>
</div>
</div>
<!-- MAIN CONTENT -->
<div class="col-12 p-1">
<div class="card rounded-0 border-0 p-1" style="background-color:#482747;">
<div class="row no-gutters">
<!-- LEFT -->
<div class="col-md-2 p-1">
<div class="card h-100 rounded-0 border-0 p-1" style="
background-image:url(https://images.unsplash.com/photo-1572635148687-307f8ca9b737?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2728&q=80);
background-position:center;
background-size:cover;">
<!-- NAVIGATION (LEFT) -->
<div class="card rounded-0 border-0 justify-content-center p-1 h-100" style="background-color:rgba(0,0,0,0.5);">
<div>
<ul class="nav row no-gutters text-center">
<li class="nav-item col m-1" style="clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); background-color:#eee; height:50px; width:50px;">
<a data-toggle="tab" href="#one" class="active btn btn-outline-secondary border-0 h-100 w-100 p-3" style="clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);">
<i class="fa-duotone fa-user fa-xl"></i>
</a>
</li>
<li class="nav-item col m-1" style="clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); background-color:#eee; height:50px; width:50px;">
<a data-toggle="tab" href="#two" class="btn btn-outline-secondary border-0 h-100 w-100 p-3" style="clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);">
<i class="fa-duotone fa-masks-theater fa-xl"></i>
</a>
</li>
<li class="nav-item col m-1" style="clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); background-color:#eee; height:50px; width:50px;">
<a data-toggle="tab" href="#three" class="btn btn-outline-secondary border-0 h-100 w-100 p-3" style="clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);">
<i class="fa-duotone fa-books fa-xl"></i>
</a>
</li>
<li class="nav-item col m-1" style="clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); background-color:#eee; height:50px; width:50px;">
<a data-toggle="tab" href="#four" class="btn btn-outline-secondary border-0 h-100 w-100 p-3" style="clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);">
<i class="fa-duotone fa-pen fa-xl"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- MIDDLE -->
<div class="col-md-8 p-1">
<div class="tab-content" style="font-family:tahoma; font-size:12px;">
<!-- ABOUT -->
<div class="tab-pane fade active show" id="one">
<div class="card rounded-0 border-0 p-0" style="height:300px; overflow:auto; background-color:#eee;">
<!-- QUOTE -->
<div class="card p-4 rounded-0 m-1 text-justify bg-transparent" style="border:solid #555; border-width:0px 0px 0px 5px; color:#000">
<p><i>quote here.</i></p>
</div>
<!-- DESCRIPTION -->
<div class="card p-3 rounded-0 m-1 text-justify" style="border:1px solid #ddd; background-color:#fff; color:#000;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is better kept between 3-5 lines!</p>
</div>
<!-- INFO -->
<div class="card p-1 rounded-0 m-1" style="border:1px solid #ddd; background-color:#fff;">
<div class="row no-gutters">
<div class="col-6 p-1">
<!-- NAME -->
<div class="row no-gutters">
<div class="col-2 card justify-content-center text-center rounded-0 p-0 bg-transparent" style="height:30px; border:solid #000; border-width:0px 0px 1px 0px;"><i class="fal fa-signature fa-lg" style="color:#000"></i></div>
<div class="col-10 card rounded-0 justify-content-center text-right bg-transparent p-0" style="height:30px; border:solid #000; border-width:0px 0px 1px 0px; color:#000;">name</div>
</div>
<!-- AGE -->
<div class="row no-gutters">
<div class="col-2 card justify-content-center text-center rounded-0 p-0 bg-transparent" style="height:30px; border:solid #000; border-width:0px 0px 1px 0px;"><i class="fal fa-calendar-days fa-lg" style="color:#000"></i></div>
<div class="col-10 card rounded-0 justify-content-center text-right bg-transparent p-0" style="height:30px; border:solid #000; border-width:0px 0px 1px 0px; color:#000;">age</div>
</div>
<!-- BIRTHDAY -->
<div class="row no-gutters">
<div class="col-2 card justify-content-center text-center rounded-0 p-0 bg-transparent" style="height:30px; border:solid #000; border-width:0px 0px 1px 0px;"><i class="fal fa-cake fa-lg" style="color:#000"></i></div>
<div class="col-10 card rounded-0 justify-content-center text-right bg-transparent p-0" style="height:30px; border:solid #000; border-width:0px 0px 1px 0px; color:#000;">bday (mm/dd)</div>
</div>
<!-- GENDER -->
<div class="row no-gutters">
<div class="col-2 card justify-content-center text-center rounded-0 p-0 bg-transparent" style="height:30px; border:solid #000; border-width:0px 0px 1px 0px;"><i class="fal fa-venus-mars fa-lg" style="color:#000"></i></div>
<div class="col-10 card rounded-0 justify-content-center text-right bg-transparent p-0" style="height:30px; border:solid #000; border-width:0px 0px 1px 0px; color:#000;">gender</div>
</div>
<!-- PRONOUNS -->
<div class="row no-gutters">
<div class="col-2 card justify-content-center text-center rounded-0 p-0 bg-transparent border-0" style="height:30px; border:solid #000; border-width:0px 0px 1px 0px;"><i class="fal fa-id-card fa-lg" style="color:#000"></i></div>
<div class="col-10 card rounded-0 justify-content-center text-right bg-transparent p-0 border-0" style="height:30px; border:solid #000; border-width:0px 0px 1px 0px; color:#000;">pro/noun</div>
</div>
</div>
<div class="col-6 p-1">
<!-- SPECIES -->
<div class="row no-gutters">
<div class="col-2 card justify-content-center text-center rounded-0 p-0 bg-transparent" style="height:30px; border:solid #000; border-width:0px 0px 1px 0px;"><i class="fal fa-dna fa-lg" style="color:#000"></i></div>
<div class="col-10 card rounded-0 justify-content-center text-right bg-transparent p-0" style="height:30px; border:solid #000; border-width:0px 0px 1px 0px; color:#000;">species</div>
</div>
<!-- ORIENTATION -->
<div class="row no-gutters">
<div class="col-2 card justify-content-center text-center rounded-0 p-0 bg-transparent" style="height:30px; border:solid #000; border-width:0px 0px 1px 0px;"><i class="fal fa-heart fa-lg" style="color:#000"></i></div>
<div class="col-10 card rounded-0 justify-content-center text-right bg-transparent p-0" style="height:30px; border:solid #000; border-width:0px 0px 1px 0px; color:#000;">orientation</div>
</div>
<!-- OCCUPATION -->
<div class="row no-gutters">
<div class="col-2 card justify-content-center text-center rounded-0 p-0 bg-transparent" style="height:30px; border:solid #000; border-width:0px 0px 1px 0px;"><i class="fal fa-briefcase fa-lg" style="color:#000"></i></div>
<div class="col-10 card rounded-0 justify-content-center text-right bg-transparent p-0" style="height:30px; border:solid #000; border-width:0px 0px 1px 0px; color:#000;">occupation</div>
</div>
<!-- TRADE STATUS -->
<div class="row no-gutters">
<div class="col-2 card justify-content-center text-center rounded-0 p-0 bg-transparent" style="height:30px; border:solid #000; border-width:0px 0px 1px 0px;"><i class="fal fa-hands-holding fa-lg" style="color:#000"></i></div>
<div class="col-10 card rounded-0 justify-content-center text-right bg-transparent p-0" style="height:30px; border:solid #000; border-width:0px 0px 1px 0px; color:#000;">nft/s</div>
</div>
<!-- WORTH -->
<div class="row no-gutters">
<div class="col-2 card justify-content-center text-center rounded-0 p-0 bg-transparent border-0" style="height:30px; border:solid #000; border-width:0px 0px 1px 0px;"><i class="fal fa-money-from-bracket fa-lg" style="color:#000"></i></div>
<div class="col-10 card rounded-0 justify-content-center text-right bg-transparent p-0 border-0" style="height:30px; border:solid #000; border-width:0px 0px 1px 0px; color:#000;">$$$</div>
</div>
</div>
</div>
</div>
<!-- PLAYLIST -->
<div class="card p-2 rounded-0 m-1" style="border:1px solid #ddd; background-color:#fff;">
<!-- DISPLAY SONG -->
<div class="card rounded-0 p-1 pb-3 bg-transparent" style="border:solid #000; border-width:0px 0px 1px 0px;">
<div class="row no-gutters">
<!-- ICON + PLAY -->
<div class="col-5 pr-1">
<div class="card border-0 rounded-0 p-2" style="height:120px;
background-image:url(ALBUM_ICON);
background-position:center;
background-size:cover;">
<div class="card border-0 rounded-0 p-0 h-100 justify-content-center text-center" style="background-color:rgba(0,0,0,0.3)">
<i class="fas fa-play-circle fa-3x" style="color:rgba(255,255,255,.8);"></i>
<!-- REPLACE [ vMMHocsdrYI ]! Keep "?controls=0" for easy pause/play. -->
<iframe allowfullscreen class="tooltipster d-none d-lg-flex h-100 w-100"
frameborder="0" src="https://www.youtube.com/embed/vMMHocsdrYI?controls=0"
style="opacity:0.001; position:absolute;">
</iframe>
</div>
</div>
</div>
<!-- SONG INFO -->
<div class="col-7 p-0">
<div class="card bg-transparent h-100 border-0 rounded-0 justify-content-center text-center p-1">
<!-- TITLE -->
<span style="font-size:16px; color:#000;"><b>It's Not My Fault</b></span>
<span class="faded" style="font-size:10px; color:#000;">MILGRAM ムウ (CV:香里有佐)</span>
</div>
</div>
</div>
</div>
<!-- LIST -->
<div class="card rounded-0 p-1 bg-transparent border-0" style="height:150px; color:#000; overflow:auto;">
<!-- SONG -->
<div class="row no-gutters">
<div class="col-2 p-0">
<div class="card rounded-0 bg-transparent p-1 justify-content-center text-center h-100" style="border:solid #ddd; border-width:0px 0px 1px 0px;">
<i class="fas fa-play-circle fa-lg"></i>
<!-- REPLACE [ y8MJjqglZKY ]! Keep "?controls=0" for easy pause/play. -->
<iframe allowfullscreen class="tooltipster d-none d-lg-flex h-100 w-100"
frameborder="0" src="https://www.youtube.com/embed/y8MJjqglZKY?controls=0"
style="opacity:0.001; position:absolute;">
</iframe>
</div>
</div>
<div class="col-8 p-0">
<div class="card rounded-0 bg-transparent p-1" style="border:solid #ddd; border-width:0px 0px 1px 0px;">
<span style="font-size:11px;"><b>It's Not My Fault (Instrum.)</b></span>
<span class="faded" style="margin-top:-4px; font-size:10px;">MILGRAM ムウ (CV:香里有佐)</span>
</div>
</div>
<div class="col-2 p-0">
<div class="card rounded-0 bg-transparent p-1 justify-content-center text-center h-100" style="border:solid #ddd; border-width:0px 0px 1px 0px;">
<span class="faded">2:39</span>
</div>
</div>
</div>
<!-- SONG -->
<div class="row no-gutters">
<div class="col-2 p-0">
<div class="card rounded-0 bg-transparent p-1 justify-content-center text-center h-100" style="border:solid #ddd; border-width:0px 0px 1px 0px;">
<i class="fas fa-play-circle fa-lg"></i>
<!-- REPLACE [ q0RFGriQu-A ]! Keep "?controls=0" for easy pause/play. -->
<iframe allowfullscreen class="tooltipster d-none d-lg-flex h-100 w-100"
frameborder="0" src="https://www.youtube.com/embed/q0RFGriQu-A?controls=0"
style="opacity:0.001; position:absolute;">
</iframe>
</div>
</div>
<div class="col-8 p-0">
<div class="card rounded-0 bg-transparent p-1" style="border:solid #ddd; border-width:0px 0px 1px 0px;">
<span style="font-size:11px;"><b>MKDR - Mu Cover</b></span>
<span class="faded" style="margin-top:-4px; font-size:10px;">MILGRAM ムウ (CV:香里有佐)</span>
</div>
</div>
<div class="col-2 p-0">
<div class="card rounded-0 bg-transparent p-1 justify-content-center text-center h-100" style="border:solid #ddd; border-width:0px 0px 1px 0px;">
<span class="faded">3:37</span>
</div>
</div>
</div>
<!-- SONG -->
<div class="row no-gutters">
<div class="col-2 p-0">
<div class="card rounded-0 bg-transparent p-1 justify-content-center text-center h-100" style="border:solid #ddd; border-width:0px 0px 1px 0px;">
<i class="fas fa-play-circle fa-lg"></i>
<!-- REPLACE [ 7P1o99tfJIY ]! Keep "?controls=0" for easy pause/play. -->
<iframe allowfullscreen class="tooltipster d-none d-lg-flex h-100 w-100"
frameborder="0" src="https://www.youtube.com/embed/7P1o99tfJIY?controls=0"
style="opacity:0.001; position:absolute;">
</iframe>
</div>
</div>
<div class="col-8 p-0">
<div class="card rounded-0 bg-transparent p-1 text" style="border:solid #ddd; border-width:0px 0px 1px 0px;">
<span style="font-size:11px;"><b>MKDR - Mu Cover (Instrum.)</b></span>
<span class="faded" style="margin-top:-4px; font-size:10px;">MILGRAM ムウ (CV:香里有佐)</span>
</div>
</div>
<div class="col-2 p-0">
<div class="card rounded-0 bg-transparent p-1 justify-content-center text-center h-100" style="border:solid #ddd; border-width:0px 0px 1px 0px;">
<span class="faded">3:37</span>
</div>
</div>
</div>
<!-- ADD MORE ABOVE THIS LINE! -->
<!-- SONG (LAST) -->
<div class="row no-gutters">
<div class="col-2 p-0">
<div class="card rounded-0 bg-transparent p-1 justify-content-center text-center h-100 border-0">
<i class="fas fa-play-circle fa-lg"></i>
<!-- REPLACE [ TGPrPHVjltM ]! Keep "?controls=0" for easy pause/play. -->
<iframe allowfullscreen class="tooltipster d-none d-lg-flex h-100 w-100"
frameborder="0" src="https://www.youtube.com/embed/TGPrPHVjltM?controls=0"
style="opacity:0.001; position:absolute;">
</iframe>
</div>
</div>
<div class="col-8 p-0">
<div class="card rounded-0 bg-transparent p-1 border-0">
<span style="font-size:11px;"><b>Queen B - Voice Drama -</b></span>
<span class="faded" style="margin-top:-4px; font-size:10px;">MILGRAM ムウ (CV:香里有佐)</span>
</div>
</div>
<div class="col-2 p-0">
<div class="card rounded-0 bg-transparent p-1 justify-content-center text-center h-100 border-0">
<span class="faded">16:36</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- PERSONALITY -->
<div class="tab-pane fade" id="two">
<div class="card rounded-0 border-0 p-0" style="height:300px; overflow:auto; background-color:#eee;">
<!-- BRIEF DESCRIPTION -->
<div class="card p-1 m-1 rounded-0 bg-transparent" style="border:1px solid #ddd;">
<div class="card rounded-0 p-2" style="height:150px; background-color:#fff; border:1px solid #ddd; color:#000; overflow:auto;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dictum ullamcorper justo, nec pharetra tellus tempus in. Nam pellentesque dui in nunc luctus, vel vulputate dolor feugiat. Vestibulum a faucibus lacus. Ut at augue nec orci ullamcorper vulputate quis quis tellus. Cras pulvinar sagittis vulputate. Vestibulum quis sollicitudin nunc. Curabitur ex arcu, blandit eget faucibus nec, maximus ac lorem. Suspendisse consectetur molestie sapien, sed elementum diam tempus nec. Vivamus a tellus eget est malesuada volutpat ac sodales diam. Quisque aliquam eget urna non venenatis. Phasellus fermentum tincidunt mauris. Phasellus sit amet fermentum leo, a lobortis ipsum. Cras egestas sem pellentesque facilisis tincidunt. Quisque commodo ultricies sapien nec blandit. Morbi felis ex, aliquam eget diam at, tempus mattis turpis.</p>
</div>
</div>
<!-- STATS, PT. 1 (BARS) -->
<div class="card rounded-0 p-2 m-1" style="border:1px solid #ddd; background-color:#fff; color:#000;">
<div class="row no-gutters">
<div class="col-6 pr-1">
<!-- INTELLIGENCE -->
<div class="mb-2">
<div class="justify-content-between">
<span>
<i class="fa-light fa-brain-circuit"></i>
INTELLIGENCE
</span>
<span class="faded">[50%]</span>
</div>
<div class="card p-1 rounded-0 bg-transparent" style="border:1px solid #ddd;">
<div class="progress rounded-0" style="background-color:#ddd;">
<div class="progress-bar" style="width:50%; height:5px; background-color:#9DFC2D;"></div>
</div>
</div>
</div>
<!-- CONFIDENCE -->
<div class="mb-2">
<div class="justify-content-between">
<span>
<i class="fa-light fa-face-smile"></i>
CONFIDENCE
</span>
<span class="faded">[50%]</span>
</div>
<div class="card p-1 rounded-0 bg-transparent" style="border:1px solid #ddd;">
<div class="progress rounded-0" style="background-color:#ddd;">
<div class="progress-bar" style="width:50%; height:5px; background-color:#9DFC2D;"></div>
</div>
</div>
</div>
<!-- HUMOUR -->
<div class="mb-1">
<div class="justify-content-between">
<span>
<i class="fa-light fa-face-grin-tears"></i>
HUMOUR
</span>
<span class="faded">[50%]</span>
</div>
<div class="card p-1 rounded-0 bg-transparent" style="border:1px solid #ddd;">
<div class="progress rounded-0" style="background-color:#ddd;">
<div class="progress-bar" style="width:50%; height:5px; background-color:#9DFC2D;"></div>
</div>
</div>
</div>
</div>
<div class="col-6">
<!-- CHARISMA -->
<div class="mb-2">
<div class="justify-content-between">
<span>
<i class="fa-light fa-sparkles"></i>
CHARISMA
</span>
<span class="faded">[50%]</span>
</div>
<div class="card p-1 rounded-0 bg-transparent" style="border:1px solid #ddd;">
<div class="progress rounded-0" style="background-color:#ddd;">
<div class="progress-bar" style="width:50%; height:5px; background-color:#9DFC2D;"></div>
</div>
</div>
</div>
<!-- PATIENCE -->
<div class="mb-2">
<div class="justify-content-between">
<span>
<i class="fa-light fa-comment-dots"></i>
PATIENCE
</span>
<span class="faded">[50%]</span>
</div>
<div class="card p-1 rounded-0 bg-transparent" style="border:1px solid #ddd;">
<div class="progress rounded-0" style="background-color:#ddd;">
<div class="progress-bar" style="width:50%; height:5px; background-color:#9DFC2D;"></div>
</div>
</div>
</div>
<!-- EMPATHY -->
<div class="mb-1">
<div class="justify-content-between">
<span>
<i class="fa-light fa-hand-holding-hand"></i>
EMPATHY
</span>
<span class="faded">[50%]</span>
</div>
<div class="card p-1 rounded-0 bg-transparent" style="border:1px solid #ddd;">
<div class="progress rounded-0" style="background-color:#ddd;">
<div class="progress-bar" style="width:50%; height:5px; background-color:#9DFC2D;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- STATS, PT. 2 (SLIDERS) -->
<div class="card rounded-0 p-2 m-1" style="border:1px solid #ddd; background-color:#fff; color:#000;">
<!-- INTRO/EXTROVERT -->
<div class="mb-2">
<div class="row no-gutters justify-content-between">
<span>
<i class="fa-light fa-user"></i>
INTROVERTED
</span>
<span>
EXTROVERTED
<i class="fa-light fa-users"></i>
</span>
</div>
<div class="card rounded-0 mt-1 p-1 bg-transparent" style="border:1px solid #ddd;">
<div class="progress rounded-0" style="height:10px; background-color:#eee;">
<div class="progress-bar justify-content-end bg-transparent" style="width:50%;">
<div class="h-100" style="width:5px; background-color:#9DFC2D;"></div>
</div>
</div>
</div>
</div>
<!-- INSTINCT/CALCULATED -->
<div class="mb-2">
<div class="row no-gutters justify-content-between">
<span>
<i class="fa-light fa-burst"></i>
INSTINCTIVE
</span>
<span>
CALCULATED
<i class="fa-light fa-thought-bubble"></i>
</span>
</div>
<div class="card rounded-0 mt-1 p-1 bg-transparent" style="border:1px solid #ddd;">
<div class="progress rounded-0" style="height:10px; background-color:#eee;">
<div class="progress-bar justify-content-end bg-transparent" style="width:50%;">
<div class="h-100" style="width:5px; background-color:#9DFC2D;"></div>
</div>
</div>
</div>
</div>
<!-- DECEPTIVE/SINCERE -->
<div class="mb-2">
<div class="row no-gutters justify-content-between">
<span>
<i class="fa-light fa-masks-theater"></i>
DECEPTIVE
</span>
<span>
SINCERE
<i class="fa-light fa-comments"></i>
</span>
</div>
<div class="card rounded-0 mt-1 p-1 bg-transparent" style="border:1px solid #ddd;">
<div class="progress rounded-0" style="height:10px; background-color:#eee;">
<div class="progress-bar justify-content-end bg-transparent" style="width:50%;">
<div class="h-100" style="width:5px; background-color:#9DFC2D;"></div>
</div>
</div>
</div>
</div>
<!-- INDIFFERENT/EMOTIONAL -->
<div class="mb-2">
<div class="row no-gutters justify-content-between">
<span>
<i class="fa-light fa-heart-circle-minus"></i>
INDIFFERENT
</span>
<span>
EMOTIONAL
<i class="fa-light fa-heart-circle-exclamation"></i>
</span>
</div>
<div class="card rounded-0 mt-1 p-1 bg-transparent" style="border:1px solid #ddd;">
<div class="progress rounded-0" style="height:10px; background-color:#eee;">
<div class="progress-bar justify-content-end bg-transparent" style="width:50%;">
<div class="h-100" style="width:5px; background-color:#9DFC2D;"></div>
</div>
</div>
</div>
</div>
<!-- RESERVED/AFFECTIONATE -->
<div class="mb-2">
<div class="row no-gutters justify-content-between">
<span>
<i class="fa-light fa-head-side-heart"></i>
RESERVED
</span>
<span>
AFFECTIONATE
<i class="fa-light fa-hands-holding-heart"></i>
</span>
</div>
<div class="card rounded-0 mt-1 p-1 bg-transparent" style="border:1px solid #ddd;">
<div class="progress rounded-0" style="height:10px; background-color:#eee;">
<div class="progress-bar justify-content-end bg-transparent" style="width:50%;">
<div class="h-100" style="width:5px; background-color:#9DFC2D;"></div>
</div>
</div>
</div>
</div>
<!-- COOPERATIVE/LONE WOLF -->
<div class="mb-1">
<div class="row no-gutters justify-content-between">
<span>
<i class="fa-light fa-handshake-simple"></i>
COOPERATIVE
</span>
<span>
LONE WOLF
<i class="fa-light fa-handshake-slash"></i>
</span>
</div>
<div class="card rounded-0 mt-1 p-1 bg-transparent" style="border:1px solid #ddd;">
<div class="progress rounded-0" style="height:10px; background-color:#eee;">
<div class="progress-bar justify-content-end bg-transparent" style="width:50%;">
<div class="h-100" style="width:5px; background-color:#9DFC2D;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- HISTORY -->
<div class="tab-pane fade" id="three">
<div class="card rounded-0 border-0 p-0" style="height:300px; overflow:auto; background-color:#eee;">
<!-- ENTRY -->
<div class="row no-gutters m-1">
<!-- WARNINGS -->
<div class="col-6 p-0">
<div class="card rounded-0 p-0 h-100" style="background-color:#482747; border:solid #ddd; border-width:1px 0px 1px 1px;">
<div class="row no-gutters">
<!-- INDIVIDUAL -->
<div class="col-auto">
<div class="card p-1 border-0 rounded-0 bg-transparent">
<div class="card rounded-0 border-0 p-1" style="background-color:#fff; color:#482747;">
<i class="fal fa-skull tooltipster" title="warning"></i>
</div>
</div>
</div>
<!-- INDIVIDUAL -->
<div class="col-auto">
<div class="card p-1 border-0 rounded-0 bg-transparent">
<div class="card rounded-0 border-0 p-1" style="background-color:#fff; color:#482747;">
<i class="fal fa-skull tooltipster" title="warning"></i>
</div>
</div>
</div>
<!-- INDIVIDUAL -->
<div class="col-auto">
<div class="card p-1 border-0 rounded-0 bg-transparent">
<div class="card rounded-0 border-0 p-1" style="background-color:#fff; color:#482747;">
<i class="fal fa-skull tooltipster" title="warning"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- TITLE -->
<div class="col-6 p-0">
<div class="card rounded-0 p-1 pr-2 text-right text-uppercase" style="background-color:#482747; color:#fff; font-size:14px; border:solid #ddd; border-width:1px 1px 1px 0px;">
<p><b>title</b></p>
</div>
</div>
<!-- DESCRIPTION -->
<div class="col-12 p-0">
<div class="card rounded-0 p-2" style="height:150px; overflow:auto; background-color:#fff; color:#000; border:solid #ddd; border-width:0px 1px 1px 1px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet pharetra tortor. Morbi nec mi consectetur, auctor nulla interdum, facilisis neque. Proin id diam mollis, elementum neque in, euismod dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec quis nunc diam. Nunc eleifend ante a lectus hendrerit, quis condimentum enim rhoncus. Vivamus dolor arcu, tincidunt vel volutpat eu, varius in purus. Etiam quis eros at tortor ullamcorper ultricies. Sed pellentesque venenatis ligula, ut vestibulum tortor gravida mollis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut hendrerit placerat diam vitae sodales. Vivamus laoreet, nisi quis ultricies ornare, purus ante pretium tellus, et egestas risus neque sed massa.</p>
</div>
</div>
</div>
<!-- ENTRY -->
<div class="row no-gutters m-1">
<!-- WARNINGS -->
<div class="col-6 p-0">
<div class="card rounded-0 p-0 h-100" style="background-color:#482747; border:solid #ddd; border-width:1px 0px 1px 1px;">
<div class="row no-gutters">
<!-- INDIVIDUAL -->
<div class="col-auto">
<div class="card p-1 border-0 rounded-0 bg-transparent">
<div class="card rounded-0 border-0 p-1" style="background-color:#fff; color:#482747;">
<i class="fal fa-skull tooltipster" title="warning"></i>
</div>
</div>
</div>
<!-- INDIVIDUAL -->
<div class="col-auto">
<div class="card p-1 border-0 rounded-0 bg-transparent">
<div class="card rounded-0 border-0 p-1" style="background-color:#fff; color:#482747;">
<i class="fal fa-skull tooltipster" title="warning"></i>
</div>
</div>
</div>
<!-- INDIVIDUAL -->
<div class="col-auto">
<div class="card p-1 border-0 rounded-0 bg-transparent">
<div class="card rounded-0 border-0 p-1" style="background-color:#fff; color:#482747;">
<i class="fal fa-skull tooltipster" title="warning"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- TITLE -->
<div class="col-6 p-0">
<div class="card rounded-0 p-1 pr-2 text-right text-uppercase" style="background-color:#482747; color:#fff; font-size:14px; border:solid #ddd; border-width:1px 1px 1px 0px;">
<p><b>title</b></p>
</div>
</div>
<!-- DESCRIPTION -->
<div class="col-12 p-0">
<div class="card rounded-0 p-2" style="height:150px; overflow:auto; background-color:#fff; color:#000; border:solid #ddd; border-width:0px 1px 1px 1px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet pharetra tortor. Morbi nec mi consectetur, auctor nulla interdum, facilisis neque. Proin id diam mollis, elementum neque in, euismod dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec quis nunc diam. Nunc eleifend ante a lectus hendrerit, quis condimentum enim rhoncus. Vivamus dolor arcu, tincidunt vel volutpat eu, varius in purus. Etiam quis eros at tortor ullamcorper ultricies. Sed pellentesque venenatis ligula, ut vestibulum tortor gravida mollis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut hendrerit placerat diam vitae sodales. Vivamus laoreet, nisi quis ultricies ornare, purus ante pretium tellus, et egestas risus neque sed massa.</p>
</div>
</div>
</div>
<!-- ENTRY -->
<div class="row no-gutters m-1">
<!-- WARNINGS -->
<div class="col-6 p-0">
<div class="card rounded-0 p-0 h-100" style="background-color:#482747; border:solid #ddd; border-width:1px 0px 1px 1px;">
<div class="row no-gutters">
<!-- INDIVIDUAL -->
<div class="col-auto">
<div class="card p-1 border-0 rounded-0 bg-transparent">
<div class="card rounded-0 border-0 p-1" style="background-color:#fff; color:#482747;">
<i class="fal fa-skull tooltipster" title="warning"></i>
</div>
</div>
</div>
<!-- INDIVIDUAL -->
<div class="col-auto">
<div class="card p-1 border-0 rounded-0 bg-transparent">
<div class="card rounded-0 border-0 p-1" style="background-color:#fff; color:#482747;">
<i class="fal fa-skull tooltipster" title="warning"></i>
</div>
</div>
</div>
<!-- INDIVIDUAL -->
<div class="col-auto">
<div class="card p-1 border-0 rounded-0 bg-transparent">
<div class="card rounded-0 border-0 p-1" style="background-color:#fff; color:#482747;">
<i class="fal fa-skull tooltipster" title="warning"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- TITLE -->
<div class="col-6 p-0">
<div class="card rounded-0 p-1 pr-2 text-right text-uppercase" style="background-color:#482747; color:#fff; font-size:14px; border:solid #ddd; border-width:1px 1px 1px 0px;">
<p><b>title</b></p>
</div>
</div>
<!-- DESCRIPTION -->
<div class="col-12 p-0">
<div class="card rounded-0 p-2" style="height:150px; overflow:auto; background-color:#fff; color:#000; border:solid #ddd; border-width:0px 1px 1px 1px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet pharetra tortor. Morbi nec mi consectetur, auctor nulla interdum, facilisis neque. Proin id diam mollis, elementum neque in, euismod dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec quis nunc diam. Nunc eleifend ante a lectus hendrerit, quis condimentum enim rhoncus. Vivamus dolor arcu, tincidunt vel volutpat eu, varius in purus. Etiam quis eros at tortor ullamcorper ultricies. Sed pellentesque venenatis ligula, ut vestibulum tortor gravida mollis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut hendrerit placerat diam vitae sodales. Vivamus laoreet, nisi quis ultricies ornare, purus ante pretium tellus, et egestas risus neque sed massa.</p>
</div>
</div>
</div>
<!-- ADD MORE ABOVE THIS LINE. -->
</div>
</div>
<!-- DESIGN -->
<div class="tab-pane fade" id="four">
<div class="card rounded-0 border-0 p-0" style="height:300px; background-color:#eee;">
<div class="row no-gutters">
<!-- LEFT -->
<div class="col-5 p-1">
<!-- IMAGES -->
<div id="carousel" class="carousel slide mx-auto p-1" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div style="background-image:url(REF_1); height:250px; background-position:center; background-size:contain; background-repeat:no-repeat;"></div>
</div>
<div class="carousel-item">
<div style="background-image:url(REF_2);height:250px; background-position:center; background-size:contain; background-repeat:no-repeat;"></div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- COLOUR PALETTE -->
<div class="card rounded-0 m-1 p-1" style="border:1px solid #ddd; background-color:#fff;">
<div class="row no-gutters mx-auto">
<!-- COLOURS -->
<div class="col-auto pr-1">
<div class="card border-0 tooltipster" title="theme colour" style="border-radius:100%; height:20px; width:20px; background-color:#C0B200;"></div>
</div>
<div class="col-auto pr-1">
<div class="card border-0 tooltipster" title="hair" style="border-radius:100%; height:20px; width:20px; background-color:#E3C1B1;"></div>
</div>
<div class="col-auto pr-1">
<div class="card border-0 tooltipster" title="eyes" style="border-radius:100%; height:20px; width:20px; background-color:#AAC3B9;"></div>
</div>
<div class="col-auto pr-1">
<div class="card border-0 tooltipster" title="skin" style="border-radius:100%; height:20px; width:20px; background-color:#FAF1E2;"></div>
</div>
</div>
</div>
</div>
<!-- RIGHT -->
<div class="col-7 p-1">
<div class="card p-1 rounded-0" style="height:292px; background-color:#fff; border:1px solid #ddd; overflow:auto; color:#000;">
<!-- DESIGN NOTES -->
<div>
<!-- TITLE -->
<div class="card rounded-0 p-1 mb-1 bg-transparent" style="border:double #482747; border-width:2px 0px 2px 0px;">
<div class="card rounded-0 p-1 border-0 text-uppercase" style="background-color:#482747; color:#fff; font-family:times; font-size:13px;">
<span>
<i class="fal fa-pen"></i>
<span class="pull-right"><b>design</b></span>
</span>
</div>
</div>
<!-- SUMMARY -->
<div class="card mb-1 text-center border-0 p-1" style="background-color:#ddd;">Key details in design!</div>
<!-- LIST -->
<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>
<!-- IMPORTANT NOTES -->
<div>
<!-- TITLE -->
<div class="card rounded-0 p-1 mb-1 bg-transparent" style="border:double #482747; border-width:2px 0px 2px 0px;">
<div class="card rounded-0 p-1 border-0 text-uppercase" style="background-color:#482747; color:#fff; font-family:times; font-size:13px;">
<span>
<i class="fal fa-exclamation-circle"></i>
<span class="pull-right"><b>important</b></span>
</span>
</div>
</div>
<!-- SUMMARY -->
<div class="card mb-1 text-center border-0 p-1" style="background-color:#ddd;">Details often missed!</div>
<!-- LIST -->
<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>
</div>
<!-- RELATIONS -->
<div class="tab-pane fade" id="five">
<div class="card rounded-0 border-0 p-0" style="height:300px; overflow:auto; background-color:#eee;">
<!-- RELATION -->
<div class="row no-gutters mb-2">
<!-- NAME -->
<div class="col-12 pl-1 pr-1 pt-1">
<div class="card p-1 rounded-0" style="background-color:#482747; color:#fff; border:solid #ddd; border-width:1px 1px 0px 1px;">
<div class="row no-gutters">
<div class="col-auto text-uppercase font-weight-bold">
<span>
<i class="fal fa-ring mr-1"></i>
<a href="/" style="color:#fff;">name</a>
</span>
</div>
<div class="col ml-1 mr-1"> <hr class="my-2" style="background-color:#fff;"></div>
<div class="col-auto pr-1"><i>relation</i></div>
</div>
</div>
</div>
<!-- ICON -->
<div class="col-4 pl-1">
<div class="card p-1 rounded-0 bg-transparent" style="border:1px solid #ddd;">
<div class="card rounded-0" style="height:100px; border:1px solid #ddd;
background-image:url(REL1_IMG);
background-position:center;
background-size:cover;">
</div>
</div>
</div>
<!-- STATS -->
<div class="col-8 pr-1">
<div class="card rounded-0 h-100 p-2" style="background-color:#fff; color:#000; border:solid #ddd; border-width:1px 1px 1px 0px">
<div class="row no-gutters">
<!-- LEFT -->
<div class="col-6 p-1">
<!-- RESPECT -->
<div class="mb-2">
<div class="text-center">
RESPECT
</div>
<div class="card p-1 rounded-0 bg-transparent" style="border:1px solid #ddd;">
<div class="progress rounded-0" style="background-color:#ddd;">
<div class="progress-bar" style="width:50%; height:5px; background-color:#9DFC2D;"></div>
</div>
</div>
</div>
<!-- COMFORT -->
<div>
<div class="text-center">
COMFORT
</div>
<div class="card p-1 rounded-0 bg-transparent" style="border:1px solid #ddd;">
<div class="progress rounded-0" style="background-color:#ddd;">
<div class="progress-bar" style="width:50%; height:5px; background-color:#9DFC2D;"></div>
</div>
</div>
</div>
</div>
<!-- RIGHT -->
<div class="col-6 p-1">
<!-- TRUST -->
<div class="mb-2">
<div class="text-center">
TRUST
</div>
<div class="card p-1 rounded-0 bg-transparent" style="border:1px solid #ddd;">
<div class="progress rounded-0" style="background-color:#ddd;">
<div class="progress-bar" style="width:50%; height:5px; background-color:#9DFC2D;"></div>
</div>
</div>
</div>
<!-- FONDNESS -->
<div>
<div class="text-center">
FONDNESS
</div>
<div class="card p-1 rounded-0 bg-transparent" style="border:1px solid #ddd;">
<div class="progress rounded-0" style="background-color:#ddd;">
<div class="progress-bar" style="width:50%; height:5px; background-color:#9DFC2D;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- DESCRIPTION -->
<div class="col-12 pl-1 pr-1">
<div class="card p-1 rounded-0" style="height:100px; border:solid #ddd; border-width:0px 1px 1px 1px; background-color:#fff; color:#000; overflow:auto;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dictum ullamcorper justo, nec pharetra tellus tempus in. Nam pellentesque dui in nunc luctus, vel vulputate dolor feugiat. Vestibulum a faucibus lacus. Ut at augue nec orci ullamcorper vulputate quis quis tellus. Cras pulvinar sagittis vulputate. Vestibulum quis sollicitudin nunc. Curabitur ex arcu, blandit eget faucibus nec, maximus ac lorem. Suspendisse consectetur molestie sapien, sed elementum diam tempus nec. Vivamus a tellus eget est malesuada volutpat ac sodales diam. Quisque aliquam eget urna non venenatis. Phasellus fermentum tincidunt mauris. Phasellus sit amet fermentum leo, a lobortis ipsum. Cras egestas sem pellentesque facilisis tincidunt. Quisque commodo ultricies sapien nec blandit. Morbi felis ex, aliquam eget diam at, tempus mattis turpis.</p>
</div>
</div>
</div>
<!-- RELATION -->
<div class="row no-gutters mb-2">
<!-- NAME -->
<div class="col-12 pl-1 pr-1 pt-1">
<div class="card p-1 rounded-0" style="background-color:#482747; color:#fff; border:solid #ddd; border-width:1px 1px 0px 1px;">
<div class="row no-gutters">
<div class="col-auto text-uppercase font-weight-bold">
<span>
<i class="fal fa-handcuffs mr-1"></i>
<a href="/" style="color:#fff;">name</a>
</span>
</div>
<div class="col ml-1 mr-1"> <hr class="my-2" style="background-color:#fff;"></div>
<div class="col-auto pr-1"><i>relation</i></div>
</div>
</div>
</div>
<!-- ICON -->
<div class="col-4 pl-1">
<div class="card p-1 rounded-0 bg-transparent" style="border:1px solid #ddd;">
<div class="card rounded-0" style="height:100px; border:1px solid #ddd;
background-image:url(REL2_IMG);
background-position:center;
background-size:cover;">
</div>
</div>
</div>
<!-- STATS -->
<div class="col-8 pr-1">
<div class="card rounded-0 h-100 p-2" style="background-color:#fff; color:#000; border:solid #ddd; border-width:1px 1px 1px 0px">
<div class="row no-gutters">
<!-- LEFT -->
<div class="col-6 p-1">
<!-- RESPECT -->
<div class="mb-2">
<div class="text-center">
RESPECT
</div>
<div class="card p-1 rounded-0 bg-transparent" style="border:1px solid #ddd;">
<div class="progress rounded-0" style="background-color:#ddd;">
<div class="progress-bar" style="width:50%; height:5px; background-color:#9DFC2D;"></div>
</div>
</div>
</div>
<!-- COMFORT -->
<div>
<div class="text-center">
COMFORT
</div>
<div class="card p-1 rounded-0 bg-transparent" style="border:1px solid #ddd;">
<div class="progress rounded-0" style="background-color:#ddd;">
<div class="progress-bar" style="width:50%; height:5px; background-color:#9DFC2D;"></div>
</div>
</div>
</div>
</div>
<!-- RIGHT -->
<div class="col-6 p-1">
<!-- TRUST -->
<div class="mb-2">
<div class="text-center">
TRUST
</div>
<div class="card p-1 rounded-0 bg-transparent" style="border:1px solid #ddd;">
<div class="progress rounded-0" style="background-color:#ddd;">
<div class="progress-bar" style="width:50%; height:5px; background-color:#9DFC2D;"></div>
</div>
</div>
</div>
<!-- FONDNESS -->
<div>
<div class="text-center">
FONDNESS
</div>
<div class="card p-1 rounded-0 bg-transparent" style="border:1px solid #ddd;">
<div class="progress rounded-0" style="background-color:#ddd;">
<div class="progress-bar" style="width:50%; height:5px; background-color:#9DFC2D;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- DESCRIPTION -->
<div class="col-12 pl-1 pr-1">
<div class="card p-1 rounded-0" style="height:100px; border:solid #ddd; border-width:0px 1px 1px 1px; background-color:#fff; color:#000; overflow:auto;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dictum ullamcorper justo, nec pharetra tellus tempus in. Nam pellentesque dui in nunc luctus, vel vulputate dolor feugiat. Vestibulum a faucibus lacus. Ut at augue nec orci ullamcorper vulputate quis quis tellus. Cras pulvinar sagittis vulputate. Vestibulum quis sollicitudin nunc. Curabitur ex arcu, blandit eget faucibus nec, maximus ac lorem. Suspendisse consectetur molestie sapien, sed elementum diam tempus nec. Vivamus a tellus eget est malesuada volutpat ac sodales diam. Quisque aliquam eget urna non venenatis. Phasellus fermentum tincidunt mauris. Phasellus sit amet fermentum leo, a lobortis ipsum. Cras egestas sem pellentesque facilisis tincidunt. Quisque commodo ultricies sapien nec blandit. Morbi felis ex, aliquam eget diam at, tempus mattis turpis.</p>
</div>
</div>
</div>
<!-- ADD MORE ABOVE THIS LINE. -->
<!-- RELATION -->
<div class="row no-gutters mb-1">
<!-- NAME -->
<div class="col-12 pl-1 pr-1 pt-1">
<div class="card p-1 rounded-0" style="background-color:#482747; color:#fff; border:solid #ddd; border-width:1px 1px 0px 1px;">
<div class="row no-gutters">
<div class="col-auto text-uppercase font-weight-bold">
<span>
<i class="fal fa-user mr-1"></i>
<a href="/" style="color:#fff;">name</a>
</span>
</div>
<div class="col ml-1 mr-1"> <hr class="my-2" style="background-color:#fff;"></div>
<div class="col-auto pr-1"><i>Relation</i></div>
</div>
</div>
</div>
<!-- ICON -->
<div class="col-4 pl-1">
<div class="card p-1 rounded-0 bg-transparent" style="border:1px solid #ddd;">
<div class="card rounded-0" style="height:100px; border:1px solid #ddd;
background-image:url(REL3_IMG);
background-position:center;
background-size:cover;">
</div>
</div>
</div>
<!-- STATS -->
<div class="col-8 pr-1">
<div class="card rounded-0 h-100 p-2" style="background-color:#fff; color:#000; border:solid #ddd; border-width:1px 1px 1px 0px">
<div class="row no-gutters">
<!-- LEFT -->
<div class="col-6 p-1">
<!-- RESPECT -->
<div class="mb-2">
<div class="text-center">
RESPECT
</div>
<div class="card p-1 rounded-0 bg-transparent" style="border:1px solid #ddd;">
<div class="progress rounded-0" style="background-color:#ddd;">
<div class="progress-bar" style="width:50%; height:5px; background-color:#9DFC2D;"></div>
</div>
</div>
</div>
<!-- COMFORT -->
<div>
<div class="text-center">
COMFORT
</div>
<div class="card p-1 rounded-0 bg-transparent" style="border:1px solid #ddd;">
<div class="progress rounded-0" style="background-color:#ddd;">
<div class="progress-bar" style="width:50%; height:5px; background-color:#9DFC2D;"></div>
</div>
</div>
</div>
</div>
<!-- RIGHT -->
<div class="col-6 p-1">
<!-- TRUST -->
<div class="mb-2">
<div class="text-center">
TRUST
</div>
<div class="card p-1 rounded-0 bg-transparent" style="border:1px solid #ddd;">
<div class="progress rounded-0" style="background-color:#ddd;">
<div class="progress-bar" style="width:50%; height:5px; background-color:#9DFC2D;"></div>
</div>
</div>
</div>
<!-- FONDNESS -->
<div>
<div class="text-center">
FONDNESS
</div>
<div class="card p-1 rounded-0 bg-transparent" style="border:1px solid #ddd;">
<div class="progress rounded-0" style="background-color:#ddd;">
<div class="progress-bar" style="width:50%; height:5px; background-color:#9DFC2D;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- DESCRIPTION -->
<div class="col-12 pl-1 pr-1">
<div class="card p-1 rounded-0" style="height:100px; border:solid #ddd; border-width:0px 1px 1px 1px; background-color:#fff; color:#000; overflow:auto;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dictum ullamcorper justo, nec pharetra tellus tempus in. Nam pellentesque dui in nunc luctus, vel vulputate dolor feugiat. Vestibulum a faucibus lacus. Ut at augue nec orci ullamcorper vulputate quis quis tellus. Cras pulvinar sagittis vulputate. Vestibulum quis sollicitudin nunc. Curabitur ex arcu, blandit eget faucibus nec, maximus ac lorem. Suspendisse consectetur molestie sapien, sed elementum diam tempus nec. Vivamus a tellus eget est malesuada volutpat ac sodales diam. Quisque aliquam eget urna non venenatis. Phasellus fermentum tincidunt mauris. Phasellus sit amet fermentum leo, a lobortis ipsum. Cras egestas sem pellentesque facilisis tincidunt. Quisque commodo ultricies sapien nec blandit. Morbi felis ex, aliquam eget diam at, tempus mattis turpis.</p>
</div>
</div>
</div>
</div>
</div>
<!-- TRIVIA -->
<div class="tab-pane fade" id="six">
<div class="card rounded-0 border-0 p-0" style="height:300px; overflow:auto; background-color:#eee;">
<!-- LIKES + DISLIKES -->
<div class="row no-gutters">
<!-- LIKES -->
<div class="col-6 p-1">
<!-- TITLE -->
<div class="card rounded-0 p-1 pl-2 pr-2" style="background-color:#482747; border:1px solid #ddd;; color:#fff;">
<span>
<i class="fal fa-check"></i>
<span class="pull-right"><b>LIKES</b></span>
</span>
</div>
<!-- LIST -->
<div class="card rounded-0 p-1" style="border:solid #ddd; border-width:0px 1px 1px 1px; background-color:#fff; color:#000; height:120px; overflow:auto;">
<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>
<!-- DISLIKES -->
<div class="col-6 p-1">
<!-- TITLE -->
<div class="card rounded-0 p-1 pl-2 pr-2" style="background-color:#482747; border:1px solid #ddd;; color:#fff;">
<span>
<i class="fal fa-xmark"></i>
<span class="pull-right"><b>DISLIKES</b></span>
</span>
</div>
<!-- LIST -->
<div class="card rounded-0 p-1" style="border:solid #ddd; border-width:0px 1px 1px 1px; background-color:#fff; color:#000; height:120px; overflow:auto;">
<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>
<!-- TRIVIA -->
<div class="m-1">
<!-- TITLE -->
<div class="card rounded-0 p-1 pl-2 pr-2" style="background-color:#482747; color:#fff; border:1px solid #ddd;">
<span>
<i class="fal fa-star pull-right" style="color:#fff; margin-top:3px;"></i>
<span class="text-uppercase"><b>TRIVIA</b></span>
</span>
</div>
<!-- LIST -->
<div class="card rounded-0 p-1" style="background-color:#fff;; border:solid #ddd; border-width:0px 1px 1px 1px; color:#000; height:120px; overflow:auto;">
<ul class="fa-ul mt-2">
<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>
<!-- FAVES + DETESTED -->
<div class="row no-gutters">
<!-- FAVES -->
<div class="col-6 p-1">
<!-- TITLE -->
<div class="card rounded-0 p-1 pl-2 pr-2" style="background-color:#482747; border:1px solid #ddd;; color:#fff;">
<span>
<i class="fal fa-heart"></i>
<span class="pull-right"><b>FAVOURITE...</b></span>
</span>
</div>
<!-- LIST -->
<div class="card rounded-0 p-1" style="border:solid #ddd; border-width:0px 1px 1px 1px; background-color:#fff; color:#000; height:120px; overflow:auto;">
<ul class="fa-ul">
<li><span class="fa-li"><i class="fal fa-user"></i></span>person</li>
<li><span class="fa-li"><i class="fal fa-paw"></i></span>animal</li>
<li><span class="fa-li"><i class="fal fa-palette"></i></span>colour</li>
<li><span class="fa-li"><i class="fal fa-spray-can-sparkles"></i></span>scent</li>
<li><span class="fa-li"><i class="fal fa-pot-food"></i></span>food</li>
<li><span class="fa-li"><i class="fal fa-cup-straw"></i></span>drink</li>
<li><span class="fa-li"><i class="fal fa-wind"></i></span>season</li>
<li><span class="fa-li"><i class="fal fa-moon-over-sun"></i></span>time</li>
<li><span class="fa-li"><i class="fal fa-seedling"></i></span>plant</li>
</ul>
</div>
</div>
<!-- DETESTED -->
<div class="col-6 p-1">
<!-- TITLE -->
<div class="card rounded-0 p-1 pl-2 pr-2" style="background-color:#482747; border:1px solid #ddd;; color:#fff;">
<span>
<i class="fal fa-heart-broken"></i>
<span class="pull-right"><b>DETESTED...</b></span>
</span>
</div>
<!-- LIST -->
<div class="card rounded-0 p-1" style="border:solid #ddd; border-width:0px 1px 1px 1px; background-color:#fff; color:#000; height:120px; overflow:auto;">
<ul class="fa-ul">
<li><span class="fa-li"><i class="fal fa-user"></i></span>person</li>
<li><span class="fa-li"><i class="fal fa-paw"></i></span>animal</li>
<li><span class="fa-li"><i class="fal fa-palette"></i></span>colour</li>
<li><span class="fa-li"><i class="fal fa-spray-can-sparkles"></i></span>scent</li>
<li><span class="fa-li"><i class="fal fa-pot-food"></i></span>food</li>
<li><span class="fa-li"><i class="fal fa-cup-straw"></i></span>drink</li>
<li><span class="fa-li"><i class="fal fa-wind"></i></span>season</li>
<li><span class="fa-li"><i class="fal fa-moon-over-sun"></i></span>time</li>
<li><span class="fa-li"><i class="fal fa-seedling"></i></span>plant</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- GALLERY/MOODBOARD -->
<div class="tab-pane fade" id="seven">
<div class="card rounded-0 border-0 p-0" style="height:300px; background-color:#eee; overflow:auto;">
<div class="row no-gutters">
<!-- TOP IMAGE -->
<div class="col-12 p-1">
<div class="card rounded-0 p-0" style="height:150px; border:1px solid #ddd;
background-image:url(TOP_IMG);
background-position:center;
background-size:cover;">
</div>
</div>
<!-- LEFT IMAGE -->
<div class="col-6 p-1">
<div class="card rounded-0 p-0" style="height:100px; border:1px solid #ddd;
background-image:url(L_IMG);
background-position:center;
background-size:cover;">
</div>
</div>
<!-- RIGHT IMAGE -->
<div class="col-6 p-1">
<div class="card rounded-0 p-0" style="height:100px; border:1px solid #ddd;
background-image:url(R_IMG);
background-position:center;
background-size:cover;">
</div>
</div>
<!-- TALL IMAGE -->
<div class="col-5 p-1">
<div class="card rounded-0 p-0" style="height:200px; border:1px solid #ddd;
background-image:url(TALL_IMG);
background-position:center;
background-size:cover;">
</div>
</div>
<!-- SMALL IMAGES -->
<div class="col-7 p-1">
<!-- TOP IMAGE -->
<div class="card rounded-0 p-0 mb-2" style="height:96px; border:1px solid #ddd;
background-image:url(ST_IMG);
background-position:top;
background-size:cover;">
</div>
<!-- BOTTOM IMAGE -->
<div class="card rounded-0 p-0" style="height:96px; border:1px solid #ddd;
background-image:url(SB_IMG);
background-position:center;
background-size:cover;">
</div>
</div>
</div>
</div>
</div>
<!-- Q&A -->
<div class="tab-pane fade" id="eight">
<div class="card rounded-0 border-0 p-0" style="height:300px; overflow:auto; background-color:#eee;">
<!-- SET -->
<div class="m-1">
<!-- QUESTION BOX -->
<div class="card rounded-0 p-0" style="border:1px solid #ddd; background-color:#fff; color:#fff;">
<div class="card border-0 rounded-0 p-3 justify-content-center text-center" style="background-color:rgba(72,39,71,0.9); overflow:hidden;">
<i class="fal fa-question-circle fa-5x" style="position:absolute; opacity:0.09; color:#fff;"></i>
<p><b>q</b></p>
</div>
</div>
<!-- ANSWER BOX -->
<div class="card rounded-0 p-0" style="border:solid #ddd; border-width:0px 1px 1px 1px; background-color:#fff; color:#000;">
<div class="card border-0 rounded-0 p-3 justify-content-center text-center bg-transparent" style="overflow:hidden;">
<i class="fal fa-comment fa-5x fa-flip-horizontal" style="position:absolute; opacity:0.09; color:#000; right:15px;"></i>
<p>a</p>
</div>
</div>
</div>
<!-- SET -->
<div class="m-1">
<!-- QUESTION BOX -->
<div class="card rounded-0 p-0" style="border:1px solid #ddd; background-color:#fff; color:#fff;">
<div class="card border-0 rounded-0 p-3 justify-content-center text-center" style="background-color:rgba(72,39,71,0.9); overflow:hidden;">
<i class="fal fa-question-circle fa-5x" style="position:absolute; opacity:0.09; color:#fff;"></i>
<p><b>q</b></p>
</div>
</div>
<!-- ANSWER BOX -->
<div class="card rounded-0 p-0" style="border:solid #ddd; border-width:0px 1px 1px 1px; background-color:#fff; color:#000;">
<div class="card border-0 rounded-0 p-3 justify-content-center text-center bg-transparent" style="overflow:hidden;">
<i class="fal fa-comment fa-5x fa-flip-horizontal" style="position:absolute; opacity:0.09; color:#000; right:15px;"></i>
<p>a</p>
</div>
</div>
</div>
<!-- ADD MORE ABOVE THIS LINE. -->
<div class="m-1">
<!-- QUESTION BOX -->
<div class="card rounded-0 p-0" style="border:1px solid #ddd; background-color:#fff; color:#fff;">
<div class="card border-0 rounded-0 p-3 justify-content-center text-center" style="background-color:rgba(72,39,71,0.9); overflow:hidden;">
<i class="fal fa-question-circle fa-5x" style="position:absolute; opacity:0.09; color:#fff;"></i>
<p><b>q</b></p>
</div>
</div>
<!-- ANSWER BOX -->
<div class="card rounded-0 p-0" style="border:solid #ddd; border-width:0px 1px 1px 1px; background-color:#fff; color:#000;">
<div class="card border-0 rounded-0 p-3 justify-content-center text-center bg-transparent" style="overflow:hidden;">
<i class="fal fa-comment fa-5x fa-flip-horizontal" style="position:absolute; opacity:0.09; color:#000; right:15px;"></i>
<p>a</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- RIGHT -->
<div class="col-md-2 p-1">
<div class="card h-100 rounded-0 border-0 p-1" style="
background-image:url(https://images.unsplash.com/photo-1512998844734-cd2cca565822?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2821&q=80);
background-position:center;
background-size:cover;">
<!-- NAVIGATION (RIGHT) -->
<div class="card rounded-0 border-0 justify-content-center p-1 h-100" style="background-color:rgba(0,0,0,0.5);">
<div>
<ul class="nav row no-gutters text-center">
<li class="nav-item col m-1" style="clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); background-color:#eee; height:50px; width:50px;">
<a data-toggle="tab" href="#five" class="btn btn-outline-secondary border-0 h-100 w-100 p-3" style="clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);">
<i class="fa-duotone fa-hand-holding-hand fa-xl"></i>
</a>
</li>
<li class="nav-item col m-1" style="clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); background-color:#eee; height:50px; width:50px;">
<a data-toggle="tab" href="#six" class="btn btn-outline-secondary border-0 h-100 w-100 p-3" style="clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);">
<i class="fa-duotone fa-info fa-xl"></i>
</a>
</li>
<li class="nav-item col m-1" style="clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); background-color:#eee; height:50px; width:50px;">
<a data-toggle="tab" href="#seven" class="btn btn-outline-secondary border-0 h-100 w-100 p-3" style="clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);">
<i class="fa-duotone fa-photo-film fa-xl"></i>
</a>
</li>
<li class="nav-item col m-1" style="clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); background-color:#eee; height:50px; width:50px;">
<a data-toggle="tab" href="#eight" class="btn btn-outline-secondary border-0 h-100 w-100 p-3" style="clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);">
<i class="fa-duotone fa-question fa-xl"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- QUOTE (2) -->
<div class="col-12 p-1" style="font-family:times;">
<div class="card p-1 rounded-0 bg-transparent" style="border:double #482747; border-width:4px 0px 4px 0px;">
<div class="card rounded-0 border-0 p-2 text-center text-uppercase" style="background-color:#482747; color:#fff;">
<i><b>Gather that nectar ... and come bring it to me, ‘kay?</b></i>
</div>
</div>
</div>
<!-- CREDIT ; DON'T REMOVE OR TAMPER WITH. -->
<div class="col-12 p-0">
<div class="card p-0 border-0 rounded-0 text-center">
<a href="/itemlabel" class="faded text-secondary"><i class="fas fa-code fa-sm"></i></a>
</div>
</div>
</div>