<!------------------------------
MEME [ F2U ]
COLOURS:
- Black: #000
- White: #fff
- Accent 1 (Brown?): #2F0D10
- Accent 2 (Green): #699076
RGBA COLOURS:
- Transparent: background-color:rgba(0,0,0,0)
- 50% White: background-color:rgba(255,255,255,0.5)
- 60% Brown?: background-color:rgba(54,69,61,0.6)
------------------------------>
<div class="container p-0" style="max-width:800px; color:#000; font-family:times;">
<!-- NAME -->
<div class="col-12 p-0">
<div class="card rounded-0 border-0 bg-transparent text-right" style="color:#2F0D10; font-size:30px; text-shadow:-3px 2px #699076"><b><i>NAME HERE</i></b></div>
</div>
<!-- HEADER -->
<div class="row no-gutters">
<!-- IMAGE -->
<div class="col-8 p-1">
<div class="card rounded-0 h-100" style="border:1px solid #2F0D10;
background-image:url(IMG_URL);
background-size:cover;
background-position:top;">
</div>
</div>
<!-- QUOTE BOX -->
<div class="col-4 p-1">
<div class="card rounded-0 justify-content-center text-center p-2" style="border:1px solid #2F0D10; background-color:#2F0D10; color:#fff; min-height:100px; font-size:13px; letter-spacing:1px;">quote here.</div>
</div>
</div>
<!-- PROFILE SECTION -->
<div class="row no-gutters">
<!-- LEFT IMAGE -->
<div class="col-2 p-1">
<div class="card rounded-0 h-100" style="border:1px solid #2F0D10;
background-image:url(IMG_URL);
background-size:cover;
background-position:center;"></div>
</div>
<!-- LEFT CONTENT -->
<div class="col-md-4 col-10 p-1">
<!-- CONTENT BOX -->
<div class="card p-0 rounded-0" style="border:1px solid #2F0D10; height:250px; background-color:#699076;">
<div class="tab-content">
<!-- ABOUT -->
<div class="tab-pane fade active show" id="abt">
<div class="card rounded-0 border-0 p-1 h-100" style="background-color:rgba(0,0,0,0);">
<!-- INFO -->
<div class="row no-gutters">
<div class="col-6">
<!-- NAME -->
<div class="row no-gutters">
<div class="col-3 card justify-content-center text-center rounded-0" style="border:1px solid #2F0D10; height:30px; background-color:#2F0D10;"><i class="fas fa-signature" style="color:#fff"></i></div>
<div class="col-9 card rounded-0 justify-content-center text-center" style="border:1px solid #2F0D10; border-width:1px 1px 0px 0px; height:30px; width:109px; background-color:rgba(255,255,255,0.5); color:#000; font-size:13px;">name</div>
</div>
<!-- AGE -->
<div class="row no-gutters">
<div class="col-3 card justify-content-center text-center rounded-0" style="border:1px solid #2F0D10; height:30px; background-color:#2F0D10;"><i class="fas fa-calendar-days" style="color:#fff"></i></div>
<div class="col-9 card rounded-0 justify-content-center text-center" style="border:1px solid #2F0D10; border-width:1px 1px 0px 0px; height:30px; width:109px; background-color:rgba(255,255,255,0.5); color:#000; font-size:13px;">age</div>
</div>
<!-- BIRTHDAY -->
<div class="row no-gutters">
<div class="col-3 card justify-content-center text-center rounded-0" style="border:1px solid #2F0D10; height:30px; background-color:#2F0D10;"><i class="fas fa-cake" style="color:#fff"></i></div>
<div class="col-9 card rounded-0 justify-content-center text-center" style="border:1px solid #2F0D10; border-width:1px 1px 0px 0px; height:30px; width:109px; background-color:rgba(255,255,255,0.5); color:#000; font-size:13px;">birthday</div>
</div>
<!-- GENDER -->
<div class="row no-gutters">
<div class="col-3 card justify-content-center text-center rounded-0" style="border:1px solid #2F0D10; height:30px; background-color:#2F0D10;"><i class="fas fa-venus-mars" style="color:#fff"></i></div>
<div class="col-9 card rounded-0 justify-content-center text-center" style="border:1px solid #2F0D10; border-width:1px 1px 0px 0px; height:30px; width:109px; background-color:rgba(255,255,255,0.5); color:#000; font-size:13px;">gender</div>
</div>
<!-- PRONOUNS -->
<div class="row no-gutters">
<div class="col-3 card justify-content-center text-center rounded-0" style="border:1px solid #2F0D10; height:30px; background-color:#2F0D10;"><i class="fas fa-id-card" style="color:#fff"></i></div>
<div class="col-9 card rounded-0 justify-content-center text-center" style="border:1px solid #2F0D10; border-width:1px 1px 1px 0px; height:30px; width:109px; background-color:rgba(255,255,255,0.5); color:#000; font-size:13px;">pronouns</div>
</div>
</div>
<div class="col-6">
<!-- SPECIES/RACE -->
<div class="row no-gutters">
<div class="col-3 card justify-content-center text-center rounded-0" style="border:1px solid #2F0D10; height:30px; background-color:#2F0D10;"><i class="fas fa-dna" style="color:#fff"></i></div>
<div class="col-9 card rounded-0 justify-content-center text-center" style="border:1px solid #2F0D10; border-width:1px 1px 0px 0px; height:30px; width:109px; background-color:rgba(255,255,255,0.5); color:#000; font-size:13px;">species</div>
</div>
<!-- ORIENTATION -->
<div class="row no-gutters">
<div class="col-3 card justify-content-center text-center rounded-0" style="border:1px solid #2F0D10; height:30px; background-color:#2F0D10;"><i class="fas fa-heart" style="color:#fff"></i></div>
<div class="col-9 card rounded-0 justify-content-center text-center" style="border:1px solid #2F0D10; border-width:1px 1px 0px 0px; height:30px; width:109px; background-color:rgba(255,255,255,0.5); color:#000; font-size:13px;">orientation</div>
</div>
<!-- OCCUPATION -->
<div class="row no-gutters">
<div class="col-3 card justify-content-center text-center rounded-0" style="border:1px solid #2F0D10; height:30px; background-color:#2F0D10;"><i class="fas fa-briefcase" style="color:#fff"></i></div>
<div class="col-9 card rounded-0 justify-content-center text-center" style="border:1px solid #2F0D10; border-width:1px 1px 0px 0px; height:30px; width:109px; background-color:rgba(255,255,255,0.5); color:#000; font-size:13px;">occupation</div>
</div>
<!-- STATUS -->
<div class="row no-gutters">
<div class="col-3 card justify-content-center text-center rounded-0" style="border:1px solid #2F0D10; height:30px; background-color:#2F0D10;"><i class="fas fa-hands-holding" style="color:#fff"></i></div>
<div class="col-9 card rounded-0 justify-content-center text-center" style="border:1px solid #2F0D10; border-width:1px 1px 0px 0px; height:30px; width:109px; background-color:rgba(255,255,255,0.5); color:#000; font-size:13px;">status</div>
</div>
<!-- WORTH -->
<div class="row no-gutters">
<div class="col-3 card justify-content-center text-center rounded-0" style="border:1px solid #2F0D10; height:30px; background-color:#2F0D10;"><i class="fa-solid fa-money-from-bracket" style="color:#fff"></i></div>
<div class="col-9 card rounded-0 justify-content-center text-center" style="border:1px solid #2F0D10; border-width:1px 1px 1px 0px; height:30px; width:109px; background-color:rgba(255,255,255,0.5); color:#000; font-size:13px;">$$$</div>
</div>
</div>
</div>
<!-- BRIEF DESCRIPTION -->
<div class="card rounded-0 w-100 p-2 mt-1" style="height:85px; background-color:rgba(255,255,255,0.5); color:#000; overflow:auto; border:1px solid #2F0D10;">
<p class="text-justify" style="font-size:13px;">write a brief about here or smth</p>
</div>
</div>
</div>
<!-- PERSONALITY -->
<div class="tab-pane fade" id="pers">
<div class="card rounded-0 border-0 p-1" style="background-color:rgba(0,0,0,0);">
<div class="card border-0 rounded-0 p-2 justify-content-center text-center" style="background-color:#2F0D10; color:#fff; font-size:13px; height:80px;">Ahhh, I really don't understand anything at all. Tell me what sin I have committed.</div>
</div>
<div class="card rounded-0 border-0 p-1" style="background-color:rgba(0,0,0,0);">
<div class="card rounded-0 w-100 p-2 text-justify" style="height:151px; background-color:rgba(255,255,255,0.5); color:#000; overflow:auto; font-size:13px; border:1px solid #2F0D10;">
<p>An ordinary prisoner who is confused and perplexed by the personalities of his fellow prisoners. Mikoto always tries to adapt to the situation. Unlike the other prisoners, Mikoto doesn't know what crime he committed and suspects that he got involved by mistake.</p>
<p>Due to thinking that MILGRAM is some sort of reality show, he acts normally, being friendly with the other prisoners, going as far as calling some of them by nicknames.</p>
</div>
</div>
</div>
<!-- HISTORY -->
<div class="tab-pane fade" id="hist">
<div class="card rounded-0 border-0 p-1" style="background-color:rgba(0,0,0,0);">
<div class="card rounded-0 w-100 p-2" style="height:151px; background-color:rgba(255,255,255,0.5); color:#000; overflow:auto; font-size:13px; border:1px solid #2F0D10;">
<p>Some hints were given about Mikoto's background in "MeMe", but for the time being, very little has been confirmed.</p>
<p>During a MILGRAM Portal session, Mikoto talked about how he was accepted into an arts university although he isn't the best at drawing. He was also working at a company before being brought to the prison, which is why he believes he is able to converse with all of the prisoners easily.</p>
<p>Mikoto is part of the Smokers Group within the prison, a group including Kazui, Shidou, and himself.</p>
</div>
</div>
<div class="card rounded-0 border-0 p-1" style="background-color:rgba(0,0,0,0);">
<div class="card border-0 rounded-0 p-2 justify-content-center text-center" style="background-color:#2F0D10; color:#fff; font-size:13px; height:80px;">Ahh, I really don’t get it, you know. What kinda sin could I have committed? Prison guard, do you know?</div>
</div>
</div>
<!-- DESIGN -->
<div class="tab-pane fade" id="des">
<div class="row no-gutters">
<div class="col-6 p-1">
<div class="card rounded-0" style="border:1px solid #2F0D10; height:130px; background-image:url(IMG_URL); background-size:cover; background-position:center;"></div>
</div>
<div class="col-6 p-1">
<div class="card rounded-0" style="border:1px solid #2F0D10; height:130px; background-image:url(IMG_URL); background-size:cover; background-position:center;"></div>
</div>
</div>
<div class="card rounded-0 border-0 p-1" style="background-color:rgba(0,0,0,0);">
<div class="card rounded-0 w-100 p-2" style="height:101px; background-color:rgba(255,255,255,0.5); color:#000; overflow:auto; font-size:13px; border:1px solid #2F0D10;">
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-angle-right" style="color:#2F0D10"></i></span>content</li>
<li><span class="fa-li"><i class="fas fa-angle-right" style="color:#2F0D10"></i></span>content</li>
<li><span class="fa-li"><i class="fas fa-angle-right" style="color:#2F0D10"></i></span>content</li>
<li><span class="fa-li"><i class="fas fa-angle-right" style="color:#2F0D10"></i></span>content</li>
<li><span class="fa-li"><i class="fas fa-angle-right" style="color:#2F0D10"></i></span>content</li>
<li><span class="fa-li"><i class="fas fa-angle-right" style="color:#2F0D10"></i></span>content</li>
<li><span class="fa-li"><i class="fas fa-angle-right" style="color:#2F0D10"></i></span>content</li>
<li><span class="fa-li"><i class="fas fa-angle-right" style="color:#2F0D10"></i></span>content</li>
</ul>
</div>
</div>
</div>
<!-- RELATIONSHIPS -->
<div class="tab-pane fade" id="rel">
<div class="card rounded-0 border-0 p-1" style="background-color:rgba(0,0,0,0);">
<div class="card rounded-0 p-2" style="height:239px; background-color:rgba(255,255,255,0.5); color:#000; overflow:auto; border:1px solid #2F0D10;">
<!-- START -->
<!-- NAME -->
<div class="card rounded-0 pr-2 text-right w-100" style="border:1px solid #2F0D10; background-color:#2F0D10; color:#fff; font-size:14px;">
<span><i class="fas fa-dagger pull-left mt-1 ml-2"></i><b>NAME HERE</b></span></div>
<div class="row no-gutters">
<!-- ICON -->
<div class="col-4">
<a href="/LINK_HERE"><div class="card rounded-0" style="border:1px solid #2F0D10; height:80px; background-color:#2F0D10; background-image:url(IMG_URL); background-size:cover; background-position:center;"></div></a>
</div>
<!-- DESCRIPTION -->
<div class="col-8">
<div class="card rounded-0 text-justify p-2" style="border:1px solid #2F0D10; border-width:1px 1px 1px 0px; height:80px; background-color:rgba(255,255,255,0.5); color:#000; font-size:13px; overflow:auto;">relationship description</div>
</div>
</div>
<!-- END -->
<br>
<!-- START -->
<!-- NAME -->
<div class="card rounded-0 pr-2 text-right w-100" style="border:1px solid #2F0D10; background-color:#2F0D10; color:#fff; font-size:14px;">
<span><i class="fas fa-apple-whole pull-left mt-1 ml-2"></i><b>NAME HERE</b></span></div>
<div class="row no-gutters">
<!-- ICON -->
<div class="col-4">
<a href="/LINK_HERE"><div class="card rounded-0" style="border:1px solid #2F0D10; height:80px; background-color:#2F0D10; background-image:url(IMG_URL); background-size:cover; background-position:center;"></div></a>
</div>
<!-- DESCRIPTION -->
<div class="col-8">
<div class="card rounded-0 text-justify p-2" style="border:1px solid #2F0D10; border-width:1px 1px 1px 0px; height:80px; background-color:rgba(255,255,255,0.5); color:#000; font-size:13px; overflow:auto;">relationship description</div>
</div>
</div>
<!-- END -->
<br>
<!-- START -->
<!-- NAME -->
<div class="card rounded-0 pr-2 text-right w-100" style="border:1px solid #2F0D10; background-color:#2F0D10; color:#fff; font-size:14px;">
<span><i class="fas fa-syringe pull-left mt-1 ml-2"></i><b>NAME HERE</b></span></div>
<div class="row no-gutters">
<!-- ICON -->
<div class="col-4">
<a href="/LINK_HERE"><div class="card rounded-0" style="border:1px solid #2F0D10; height:80px; background-color:#2F0D10; background-image:url(IMG_URL); background-size:cover; background-position:center;"></div></a>
</div>
<!-- DESCRIPTION -->
<div class="col-8">
<div class="card rounded-0 text-justify p-2" style="border:1px solid #2F0D10; border-width:1px 1px 1px 0px; height:80px; background-color:rgba(255,255,255,0.5); color:#000; font-size:13px; overflow:auto;">relationship description</div>
</div>
</div>
<!-- END -->
<!-- ADD MORE ABOVE HERE -->
</div>
</div>
</div>
</div>
</div>
<!-- NAVIGATION -->
<div class="card rounded-0" style="border:1px solid #2F0D10; border-width:0px 1px 1px 1px;">
<ul class="nav row no-gutters text-center">
<!-- ABOUT -->
<li class="nav-item col" style="background-color:#2F0D10;">
<a data-toggle="tab" href="#abt" class="active btn btn-outline-secondary rounded-0 border-0 w-100" style="font-size:15px;">
<i class="fad fa-user" style="color:#fff"></i>
</a>
</li>
<!-- PERSONALITY -->
<li class="nav-item col" style="background-color:#2F0D10;">
<a data-toggle="tab" href="#pers" class="btn btn-outline-secondary border-0 rounded-0 w-100" style="font-size:15px;">
<i class="fa-duotone fa-masks-theater" style="color:#fff"></i>
</a>
</li>
<!-- HISTORY -->
<li class="nav-item col" style="background-color:#2F0D10;">
<a data-toggle="tab" href="#hist" class="btn btn-outline-secondary border-0 rounded-0 w-100" style="font-size:15px;">
<i class="fad fa-books" style="color:#fff"></i>
</a>
</li>
<!-- DESIGN -->
<li class="nav-item col" style="background-color:#2F0D10;">
<a data-toggle="tab" href="#des" class="btn btn-outline-secondary border-0 rounded-0 w-100" style="font-size:15px;">
<i class="fad fa-pen" style="color:#fff"></i>
</a>
</li>
<!-- RELATIONS -->
<li class="nav-item col" style="background-color:#2F0D10;">
<a data-toggle="tab" href="#rel" class="btn btn-outline-secondary border-0 rounded-0 w-100" style="font-size:15px;">
<i class="fad fa-link" style="color:#fff"></i>
</a>
</li>
</ul>
</div>
</div>
<!-- RIGHT CONTENT -->
<div class="col-md-4 col-10 p-1">
<!-- CONTENT BOX -->
<div class="card p-0 rounded-0" style="border:1px solid #2F0D10; height:250px; background-color:#699076;">
<div class="tab-content">
<!-- TRIVIA -->
<div class="tab-pane fade active show" id="triv">
<div class="card rounded-0 border-0 h-100" style="background-color:rgba(0,0,0,0); font-size:13px; color:#000">
<div class="row no-gutters">
<!-- LIKES -->
<div class="col-6 p-1">
<div class="card rounded-0 border-0 p-1 text-center" style="background-color:#2F0D10; color:#fff"><b>LIKES</b></div>
<div class="card rounded-0 pt-2" style="height:99px; background-color:rgba(255,255,255,0.5); overflow:auto; border:1px solid #2F0D10;">
<ul class="fa-ul">
<li><span class="fa-li"><i class="fal fa-heart" style="color:#2F0D10"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart" style="color:#2F0D10"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart" style="color:#2F0D10"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart" style="color:#2F0D10"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart" style="color:#2F0D10"></i></span>content</li>
</ul>
</div>
</div>
<!-- DISLIKES -->
<div class="col-6 p-1">
<div class="card rounded-0 border-0 p-1 text-center" style="background-color:#2F0D10; color:#fff"><b>DISLIKES</b></div>
<div class="card rounded-0 pt-2" style="height:99px; background-color:rgba(255,255,255,0.5); overflow:auto; border:1px solid #2F0D10;">
<ul class="fa-ul">
<li><span class="fa-li"><i class="fal fa-heart-broken" style="color:#2F0D10"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart-broken" style="color:#2F0D10"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart-broken" style="color:#2F0D10"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart-broken" style="color:#2F0D10"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart-broken" style="color:#2F0D10"></i></span>content</li>
</ul>
</div>
</div>
</div>
<!-- TRIVIA BOX -->
<div class="col-12 pl-1 pr-1">
<div class="card rounded-0 mt-1 pt-2" style="height:104px; overflow:auto; background-color:rgba(255,255,255,0.5); border:1px solid #2F0D10;">
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-angle-right" style="color:#2F0D10"></i></span>content</li>
<li><span class="fa-li"><i class="fas fa-angle-right" style="color:#2F0D10"></i></span>content</li>
<li><span class="fa-li"><i class="fas fa-angle-right" style="color:#2F0D10"></i></span>content</li>
<li><span class="fa-li"><i class="fas fa-angle-right" style="color:#2F0D10"></i></span>content</li>
<li><span class="fa-li"><i class="fas fa-angle-right" style="color:#2F0D10"></i></span>content</li>
</ul>
</div>
</div>
</div>
</div>
<!-- STATS -->
<div class="tab-pane fade" id="stats">
<div class="card rounded-0 border-0 p-1" style="background-color:rgba(0,0,0,0); font-size:13px;">
<div class="card rounded-0 w-100 p-2" style="height:239px; background-color:rgba(255,255,255,0.5); color:#000; overflow:auto; border:1px solid #2F0D10;">
<!-- BARS -->
<div class="row no-gutters">
<div class="card rounded-0 border-0 w-100 col-auto p-1" style="background-color:rgba(0,0,0,0); color:#2F0D10;">
<!-- INTELLIGENCE -->
<span class="text-uppercase font-weight-bold" style="font-size:15px;">
<span class="fa-stack fa-sm">
<i class="fal fa-circle fa-stack-2x"></i>
<i class="fa-light fa-brain-circuit fa-stack-1x"></i>
</span>
<span>intelligence</span>
</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:#2F0D10;"></div></div>
<div class="card p-1 rounded-0 mb-3" style="height:70px; overflow:auto; color:#000; border:1px solid #2F0D10; background-color:rgba(255,255,255,0.5);">Insert brief summary about this stat here... This scrolls though, so you can type whatever you want.</div>
<!-- CONFIDENCE -->
<span class="text-uppercase font-weight-bold" style="font-size:15px;">
<span class="fa-stack fa-sm">
<i class="fal fa-circle fa-stack-2x"></i>
<i class="fa-light fa-burst fa-stack-1x"></i>
</span>
<span>confidence</span>
</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:#2F0D10;"></div></div>
<div class="card p-1 rounded-0 mb-3" style="height:70px; overflow:auto; color:#000; border:1px solid #2F0D10; background-color:rgba(255,255,255,0.5);">Insert brief summary about this stat here.</div>
<!-- HUMOUR -->
<span class="text-uppercase font-weight-bold" style="font-size:15px;">
<span class="fa-stack fa-sm">
<i class="fal fa-circle fa-stack-2x"></i>
<i class="fa-light fa-face-grin-squint-tears fa-stack-1x"></i>
</span>
<span>humour</span>
</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:#2F0D10;"></div></div>
<div class="card p-1 rounded-0 mb-3" style="height:70px; overflow:auto; color:#000; border:1px solid #2F0D10; background-color:rgba(255,255,255,0.5);">Insert brief summary about this stat here.</div>
</div>
<div class="card rounded-0 w-100 col-auto p-1 border-0" style="background-color:rgba(0,0,0,0); border:1px solid #000; color:#000;">
<!-- CHARISMA -->
<span class="text-uppercase font-weight-bold" style="font-size:15px;">
<span class="fa-stack fa-sm">
<i class="fal fa-circle fa-stack-2x"></i>
<i class="fal fa-messages fa-stack-1x"></i>
</span>
<span>charisma</span>
</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:#2F0D10;"></div></div>
<div class="card p-1 rounded-0 mb-3" style="height:70px; overflow:auto; color:#000; border:1px solid #2F0D10; background-color:rgba(255,255,255,0.5);">Insert brief summary about this stat here.</div>
<!-- PATIENCE -->
<span class="text-uppercase font-weight-bold" style="font-size:15px;">
<span class="fa-stack fa-sm">
<i class="fal fa-circle fa-stack-2x"></i>
<i class="fal fa-hands-praying fa-stack-1x"></i>
</span>
<span>patience</span>
</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:#2F0D10;"></div></div>
<div class="card p-1 rounded-0 mb-3" style="height:70px; overflow:auto; color:#000; border:1px solid #2F0D10; background-color:rgba(255,255,255,0.5);">Insert brief summary about this stat here.</div>
<!-- EMPATHY -->
<span class="text-uppercase font-weight-bold" style="font-size:15px;">
<span class="fa-stack fa-sm">
<i class="fal fa-circle fa-stack-2x"></i>
<i class="fal fa-hands-holding-heart fa-stack-1x"></i>
</span>
<span>empathy</span>
</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:#2F0D10;"></div></div>
<div class="card p-1 rounded-0" style="height:70px; overflow:auto; color:#000; border:1px solid #2F0D10; background-color:rgba(255,255,255,0.5);">Insert brief summary about this stat here.</div>
</div>
</div>
</div>
</div>
</div>
<!-- Q&A -->
<div class="tab-pane fade" id="qa">
<div class="card rounded-0 border-0 p-0" style="background-color:rgba(0,0,0,0); font-size:13px;">
<div class="card border-0 rounded-0 w-100 p-1" style="height:248px; background-color:rgba(255,255,255,0.0); color:#000; overflow:auto;">
<!-- START -->
<!-- QUESTION -->
<!-- ICON -->
<div class="row no-gutters">
<div class="col-2">
<div class="card rounded-0 justify-content-center text-center" style="height:90px; color:#fff; background-color:#2F0D10; border:1px solid #2F0D10;"><i class="fas fa-q"></i></div>
</div>
<!-- WORDS -->
<div class="col-10">
<div class="card rounded-0 text-center justify-content-center" style="height:90px; border:1px solid #2F0D10; background-color:#2F0D10; color:#fff; overflow:auto; font-size:15px;">question</div>
</div>
</div>
<!-- ANSWER -->
<!-- ICON -->
<div class="row no-gutters">
<div class="col-2">
<div class="card rounded-0 justify-content-center text-center" style="height:90px; color:#fff; background-color:#2F0D10; border:1px solid #2F0D10;"><i class="fas fa-a"></i></div>
</div>
<!-- WORDS -->
<div class="col-10">
<div class="card rounded-0 text-center p-2" style="height:90px; border:1px solid #2F0D10; background-color:rgba(255,255,255,0.5); color:#000; overflow:auto;">answer</div>
</div>
</div>
<!-- END -->
<br>
<!-- START -->
<!-- QUESTION -->
<!-- ICON -->
<div class="row no-gutters">
<div class="col-2">
<div class="card rounded-0 justify-content-center text-center" style="height:90px; color:#fff; background-color:#2F0D10; border:1px solid #2F0D10;"><i class="fas fa-q"></i></div>
</div>
<!-- WORDS -->
<div class="col-10">
<div class="card rounded-0 text-center justify-content-center" style="height:90px; border:1px solid #2F0D10; background-color:#2F0D10; color:#fff; overflow:auto; font-size:15px;">question</div>
</div>
</div>
<!-- ANSWER -->
<!-- ICON -->
<div class="row no-gutters">
<div class="col-2">
<div class="card rounded-0 justify-content-center text-center" style="height:90px; color:#fff; background-color:#2F0D10; border:1px solid #2F0D10;"><i class="fas fa-a"></i></div>
</div>
<!-- WORDS -->
<div class="col-10">
<div class="card rounded-0 text-center p-2" style="height:90px; border:1px solid #2F0D10; background-color:rgba(255,255,255,0.5); color:#000; overflow:auto;">answer</div>
</div>
</div>
<!-- END -->
<br>
<!-- START -->
<!-- QUESTION -->
<!-- ICON -->
<div class="row no-gutters">
<div class="col-2">
<div class="card rounded-0 justify-content-center text-center" style="height:90px; color:#fff; background-color:#2F0D10; border:1px solid #2F0D10;"><i class="fas fa-q"></i></div>
</div>
<!-- WORDS -->
<div class="col-10">
<div class="card rounded-0 text-center justify-content-center" style="height:90px; border:1px solid #2F0D10; background-color:#2F0D10; color:#fff; overflow:auto; font-size:15px;">question</div>
</div>
</div>
<!-- ANSWER -->
<!-- ICON -->
<div class="row no-gutters">
<div class="col-2">
<div class="card rounded-0 justify-content-center text-center" style="height:90px; color:#fff; background-color:#2F0D10; border:1px solid #2F0D10;"><i class="fas fa-a"></i></div>
</div>
<!-- WORDS -->
<div class="col-10">
<div class="card rounded-0 text-center p-2" style="height:90px; border:1px solid #2F0D10; background-color:rgba(255,255,255,0.5); color:#000; overflow:auto;">answer</div>
</div>
</div>
<!-- END -->
<br>
<!-- START -->
<!-- QUESTION -->
<!-- ICON -->
<div class="row no-gutters">
<div class="col-2">
<div class="card rounded-0 justify-content-center text-center" style="height:90px; color:#fff; background-color:#2F0D10; border:1px solid #2F0D10;"><i class="fas fa-q"></i></div>
</div>
<!-- WORDS -->
<div class="col-10">
<div class="card rounded-0 text-center justify-content-center" style="height:90px; border:1px solid #2F0D10; background-color:#2F0D10; color:#fff; overflow:auto; font-size:15px;">question</div>
</div>
</div>
<!-- ANSWER -->
<!-- ICON -->
<div class="row no-gutters">
<div class="col-2">
<div class="card rounded-0 justify-content-center text-center" style="height:90px; color:#fff; background-color:#2F0D10; border:1px solid #2F0D10;"><i class="fas fa-a"></i></div>
</div>
<!-- WORDS -->
<div class="col-10">
<div class="card rounded-0 text-center p-2" style="height:90px; border:1px solid #2F0D10; background-color:rgba(255,255,255,0.5); color:#000; overflow:auto;">answer</div>
</div>
</div>
<!-- END -->
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
</div>
</div>
</div>
<!-- NAVIGATION -->
<div class="card rounded-0" style="border:1px solid #2F0D10; border-width:0px 1px 1px 1px;">
<ul class="nav row no-gutters text-center">
<!-- TRIVIA -->
<li class="nav-item col" style="background-color:#2F0D10;">
<a data-toggle="tab" href="#triv" class="active btn btn-outline-secondary rounded-0 border-0 w-100" style="font-size:15px;">
<i class="fa-duotone fa-info" style="color:#fff"></i>
</a>
</li>
<!-- STATS -->
<li class="nav-item col" style="background-color:#2F0D10;">
<a data-toggle="tab" href="#stats" class="btn btn-outline-secondary border-0 rounded-0 w-100" style="font-size:15px;">
<i class="fa-duotone fa-bars-staggered" style="color:#fff"></i>
</a>
</li>
<!-- Q&A -->
<li class="nav-item col" style="background-color:#2F0D10;">
<a data-toggle="tab" href="#qa" class="btn btn-outline-secondary border-0 rounded-0 w-100" style="font-size:15px;">
<i class="fa-duotone fa-question" style="color:#fff"></i>
</a>
</li>
</ul>
</div>
</div>
<!-- RIGHT IMAGE -->
<div class="col-2 p-1">
<div class="card rounded-0 h-100" style="border:1px solid #2F0D10;
background-image:url(IMG_URL);
background-size:cover;
background-position:center;"></div>
</div>
</div>
<!-- FOOTER -->
<div class="row no-gutters">
<!-- QUOTE BOX -->
<div class="col-4 p-1">
<div class="card rounded-0 justify-content-center text-center p-2" style="border:1px solid #2F0D10; background-color:#2F0D10; color:#fff; min-height:100px; font-size:13px; letter-spacing:1px;">quote here.</div>
</div>
<!-- IMAGE -->
<div class="col-8 p-1">
<div class="card rounded-0 h-100" style="border:1px solid #2F0D10;
background-image:url(IMG_URL);
background-size:cover;
background-position:top;">
</div>
</div>
</div>
<!-- SONGS (HIDDEN ON MOBILE) -->
<div class="hidden-md-down">
<!-- FIRST -->
<div class="card p-1" style="position:absolute; border:1px solid #2F0D10; background-color:rgba(54,69,61,0.6); border-radius:100px; left:-25px; top:70px;">
<div class="card justify-content-center text-center" style="border:1px solid #2F0D10; background-color:#2F0D10; border-radius:100px; height:50px; width:50px;">
<i class="fas fa-play fa-lg" style="color:#fff"></i>
<iframe allowfullscreen class="tooltipster d-none d-lg-flex"
frameborder="0"
src="https://www.youtube.com/embed/EMBED2"
data-placement="top" title="song - author"
style="height:45px; width:45px; opacity:0.001; position:absolute;"></iframe>
</div>
</div>
<!-- SECOND -->
<div class="card p-1" style="position:absolute; border:1px solid #2F0D10; background-color:rgba(54,69,61,0.6); border-radius:100px; right:-25px; bottom:52px;">
<div class="card justify-content-center text-center" style="border:1px solid #2F0D10; background-color:#2F0D10; border-radius:100px; height:50px; width:50px;">
<i class="fas fa-play fa-lg" style="color:#fff"></i>
<iframe allowfullscreen class="tooltipster d-none d-lg-flex"
frameborder="0"
src="https://www.youtube.com/embed/EMBED2"
data-placement="top" title="song - author"
style="height:45px; width:45px; opacity:0.001; position:absolute;">
</iframe>
</div>
</div>
</div>
<!-- CREDIT; DO NOT TAMPER OR REMOVE. -->
<div class="col-12 p-1 text-center">
<a class="text-secondary" href="/itemlabel"><i class="fas fa-code"></i></a>
</div>
</div>