<div class="card tab-content">
<!------ MAIN BOX -------------------------------------------------------------------------------->
<div class="card tab-content">
<div class="card tab-content">
<!------ BOX ONE ----------- BACKGROUND -------------------------------------------------------->
<div class="tab-pane card-block active" id="ONE" style="background: url(https://file.toyhou.se/images/10998071_gL3BpiTyBndWphR.png?1544843583); height: 560px; padding-bottom: 5px; overflow:hidden;">
<!------ BOX ONE ----------- STATUS BAR -------------------------------------------------------->
<div class="col-md-4">
<div class="card bg-faded">
<div class="card-block">
<h1 class="text-uppercase text-primary mb-2">Character name</h1>
<h3>HP</h3>
<div class="progress">
<div class="progress-bar" style="width:75%;">
<br>
</div>
</div>
<h3>MP</h3>
<div class="progress">
<div class="progress-bar" style="width:75%;">
<br>
</div>
</div>
</div>
</div>
</div>
<!------ BOX ONE ----------- CHARACTER -------------------------------------------------------->
<div class="row no-gutters"><img src="https://file.toyhou.se/images/4899673_10sbac6FwUJobtD.png?1510246421" class="fr-fic fr-dib fr-fir" width="562" height="744">
<div class="col-md-4">
<div class="card bg-faded">
<h1 class="card-block">Yo, what's up?</h1>
</div>
<p>
<br>
</p>
</div>
</div>
</div>
<!------ BOX TWO ----------- BACKGROUND -------------------------------------------------------->
<div class="tab-pane card-block" id="TWO" style="background: url(https://file.toyhou.se/images/10998071_gL3BpiTyBndWphR.png?1544843583); height: 560px; padding-bottom: 5px; overflow:hidden;">
<!------ BOX TWO ----------- STATUS BAR -------------------------------------------------------->
<div class="col-md-4">
<div class="card bg-faded">
<div class="card-block">
<h1 class="text-uppercase text-primary mb-2">Character name</h1>
<h3>HP</h3>
<div class="progress">
<div class="progress-bar" style="width:75%;">
<br>
</div>
</div>
<h3>MP</h3>
<div class="progress">
<div class="progress-bar" style="width:75%;">
<br>
</div>
</div>
</div>
</div>
</div>
<!------ BOX TWO ----------- CHARACTER -------------------------------------------------------->
<div class="row no-gutters"><img src="https://file.toyhou.se/images/4899673_10sbac6FwUJobtD.png?1510246421" class="fr-fic fr-dib fr-fir" width="562" height="744">
<div class="col-md-4">
<div class="card bg-faded">
<h1 class="card-block">Never better!</h1>
</div>
<p>
<br>
</p>
</div>
</div>
</div>
<!------ BOX THREE ----------- BACKGROUND -------------------------------------------------------->
<div class="tab-pane card-block" id="THREE" style="background: url(https://file.toyhou.se/images/10998071_gL3BpiTyBndWphR.png?1544843583); height: 560px; padding-bottom: 5px; overflow:hidden;">
<!------ SECTION THREE ----------- STATUS BAR -------------------------------------------------------->
<div class="col-md-4">
<div class="card bg-faded">
<div class="card-block">
<h1 class="text-uppercase text-primary mb-2">Character name</h1>
<h3>HP</h3>
<div class="progress">
<div class="progress-bar" style="width:75%;">
<br>
</div>
</div>
<h3>MP</h3>
<div class="progress">
<div class="progress-bar" style="width:75%;">
<br>
</div>
</div>
</div>
</div>
</div>
<!------ BOX THREE ----------- CHARACTER -------------------------------------------------------->
<div class="row no-gutters"><img src="https://file.toyhou.se/images/4899673_10sbac6FwUJobtD.png?1510246421" class="fr-fic fr-dib fr-fir" width="562" height="744">
<div class="col-md-4">
<div class="card bg-faded">
<h1 class="card-block">I love sushi!</h1>
</div>
<p>
<br>
</p>
</div>
</div>
</div>
<!------ BOX FOUR ----------- BACKGROUND -------------------------------------------------------->
<div class="tab-pane card-block" id="FOUR" style="background: url(https://file.toyhou.se/images/10998071_gL3BpiTyBndWphR.png?1544843583); height: 560px; padding-bottom: 5px; overflow:hidden;">
<!------ BOX FOUR ----------- STATUS BAR -------------------------------------------------------->
<div class="col-md-4">
<div class="card bg-faded">
<div class="card-block">
<h1 class="text-uppercase text-primary mb-2">Character name</h1>
<h3>HP</h3>
<div class="progress">
<div class="progress-bar" style="width:75%;">
<br>
</div>
</div>
<h3>MP</h3>
<div class="progress">
<div class="progress-bar" style="width:75%;">
<br>
</div>
</div>
</div>
</div>
</div>
<!------ BOX FOUR ----------- CHARACTER -------------------------------------------------------->
<div class="row no-gutters"><img src="https://file.toyhou.se/images/4899673_10sbac6FwUJobtD.png?1510246421" class="fr-fic fr-dib fr-fir" width="562" height="744">
<div class="col-md-4">
<div class="card bg-faded">
<h1 class="card-block">Thanks!!!</h1>
</div>
<p>
<br>
</p>
</div>
</div>
</div>
<!------ BOX FIVE ----------- BACKGROUND -------------------------------------------------------->
<div class="tab-pane card-block" id="FIVE" style="background: url(https://file.toyhou.se/images/10998071_gL3BpiTyBndWphR.png?1544843583); height: 560px; padding-bottom: 5px; overflow:hidden;">
<!------ BOX FIVE ----------- STATUS BAR -------------------------------------------------------->
<div class="col-md-4">
<div class="card bg-faded">
<div class="card-block">
<h1 class="text-uppercase text-primary mb-2">Character name</h1>
<h3>HP</h3>
<div class="progress">
<div class="progress-bar" style="width:25%;">
<br>
</div>
</div>
<h3>MP</h3>
<div class="progress">
<div class="progress-bar" style="width:75%;">
<br>
</div>
</div>
</div>
</div>
</div>
<!------ SECTION FIVE ----------- CHARACTER -------------------------------------------------------->
<div class="row no-gutters"><img src="https://file.toyhou.se/images/4899673_10sbac6FwUJobtD.png?1510246421" class="fr-fic fr-dib fr-fir" width="562" height="744">
<div class="col-md-4">
<div class="card bg-faded">
<h1 class="card-block" style="text-align: center;">Yeah, I'm pretty tired too. See ya!</h1>
</div>
<p>
<br>
</p>
</div>
</div>
</div>
<div class="card card-inverse card-success">
<!------ TEXT BOX ------------------------------------------------------------------------------>
<h1 class="card-block text-white" style="text-align: center;">What do you want to say to [CHARACTER NAME]?</h1>
</div>
<p>
<br>
</p>
<!------ BUTTONS ------------------------------------------------------------------------------>
<ul class="nav row text-center text-uppercase mx-0 mb-2">
<li class="nav-item col pl-0 pr-1"><a class="nav-item rounded-5 nav-link px-1 btn btn-outline-success active" data-toggle="tab" href="#ONE">hello!</a></li>
<li class="nav-item col px-1"><a class="nav-item rounded-5 nav-link px-1 btn btn-outline-success" data-toggle="tab" href="#TWO">how are you?</a></li>
<li class="nav-item col px-1"><a class="nav-item rounded-5 nav-link px-1 btn btn-outline-success" data-toggle="tab" href="#THREE">what's your favorite food?</a></li>
<li class="nav-item col px-1"><a class="nav-item rounded-5 nav-link px-1 btn btn-outline-success" data-toggle="tab" href="#FOUR">your hair looks cool!</a></li>
<li class="nav-item col px-1"><a class="nav-item rounded-5 nav-link px-1 btn btn-outline-success" data-toggle="tab" href="#FIVE">bye!</a></li>
</ul>
</div>
</div>
</div>
<p style="text-align: right;"><a href="https://toyhou.se/Unicore" id=""><i class="fas fa-code"></i></a></p>
