<!--------------------------------------------------------------------------
CORUNCHI [F2U]
COLOURS:
- Black: #000
- White: #fff
- Eggshell: #f1ebde
- Liver: #714c4b
- Deep Saffron: #f19e38
- Parrot Pink: #e29c9a
- Pastel Pink: #f3b09d
- Rhythm: #8b729c
- Manatee: #9594b4
---------------------------------------------------------------------------->
<div class="container pt-5 pb-5" style="max-width:700px; font-family:helvetica;">
<div class="card pt-5 pb-5 pl-3 pr-3 border-0 bg-transparent">
<div class="row no-gutters">
<!-- TOP -->
<div class="col-12 pl-2 pr-2">
<div class="card rounded-0 border-0 p-2" style="box-shadow:0px 0px 15px 1px #000; background-color:#f1ebde; overflow:hidden;">
<div class="row no-gutters">
<!-- CHARACTER IMAGE (MOBILE ONLY) -->
<div class="col-md-4 p-0">
<div class="hidden-md-up card h-100 bg-transparent rounded-0" style="min-height:200px; border:2px solid #714c4b;
background-image:url(CHARAIMG_HERE);
background-size:cover;
background-position:center;">
</div>
</div>
<!-- BIO -->
<div class="col-md-8 pr-3">
<!-- DECOR; You have to adjust the margins yourself to make it fit where you want it... -->
<i class="fal fa-bat fa-10x" style="position:absolute; right:-50px; top:20px; color:#714c4b; opacity:0.2"></i>
<!-- NAME + BADGE -->
<div class="card rounded-0 bg-transparent border-0">
<div class="row no-gutters">
<!-- NAME -->
<div class="col-8 p-0">
<div class="card text-uppercase bg-transparent rounded-0 pl-3 h-100 justify-content-center" style="font-family:monospace; font-size:20px; color:#8b729c; border:solid #714c4b; border-width:0px 0px 3px 0px;">
<p>name_</p> <!-- ADD THE UNDERSCORE (_) FOR STYLE! DON'T HAVE TO, THOUGH. -->
</div>
</div>
<!-- 'CHARA. INFO' BADGE -->
<div class="col-4 p-0">
<div class="card p-1 bg-transparent rounded-0" style="border:solid #714c4b; border-width:0px 0px 3px 0px;">
<div class="card text-uppercase rounded-0 p-1 text-center justify-content-center border-0 mb-2 mt-2" style="font-size:10px; background-color:#f19e38; color:#f1ebde;">
<p>character info</p>
</div>
</div>
</div>
</div>
</div>
<!-- BIOGRAPHY TEXT; DOESN'T SCROLL, BOX GROWS WITH IT. -->
<div class="card rounded-0 bg-transparent border-0 p-2 mb-1 mt-1" style="min-height:100px; color:#000;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris suscipit risus at porttitor faucibus. Donec consectetur tortor vitae ex ultricies rutrum. Sed suscipit orci a blandit dictum. </p>
</div>
</div>
<!-- PAGEDOLL (PC ONLY) -->
<div class="hidden-md-down col-5 p-0">
<div class="card w-100 rounded-0 bg-transparent border-0" style="position:absolute; top:-180px; left:-35px; height:250px;
background-image:url(PAGEDOLL_HERE);
background-size:contain;
background-position:center;
background-repeat:no-repeat;">
</div>
</div>
</div>
</div>
</div>
<!-- BOTTOM -->
<div class="col-12 p-0">
<div class="card rounded-0 p-0" style="box-shadow:0px 0px 15px 1px #000; background-color:#fff;">
<div class="row no-gutters">
<!-- TEXT -->
<div class="hidden-md-down col-3 p-0">
<div class="card h-100 justify-content-center text-center rounded-0 bg-transparent border-0" style="color:#000;">
<span class="text-uppercase font-weight-bold"><span style="color:#714c4b; font-size:17px;">attributes</span> <span> > </span></span>
</div>
</div>
<!-- LIST OF ATTRIBUTES -->
<div class="col-md-8 p-0">
<div class="card bg-transparent p-0 rounded-0 border-0">
<div class="row no-gutters">
<!-- ATTRIBUTE -->
<div class="col p-1">
<div class="card p-1 rounded-0 border-0 text-uppercase justify-content-center text-center font-weight-bold" style="background-color:#e29c9a; color:#fff;">
<p>trait</p>
</div>
</div>
<!-- ATTRIBUTE -->
<div class="col p-1">
<div class="card p-1 rounded-0 border-0 text-uppercase justify-content-center text-center font-weight-bold" style="background-color:#f3b09d; color:#fff;">
<p>trait</p>
</div>
</div>
<!-- ATTRIBUTE -->
<div class="col p-1">
<div class="card p-1 rounded-0 border-0 text-uppercase justify-content-center text-center font-weight-bold" style="background-color:#8b729c; color:#fff;">
<p>trait</p>
</div>
</div>
<!-- ATTRIBUTE -->
<div class="col p-1">
<div class="card p-1 rounded-0 border-0 text-uppercase justify-content-center text-center font-weight-bold" style="background-color:#9594b4; color:#fff;">
<p>trait</p>
</div>
</div>
<!-- ADD MORE ABOVE THIS LINE. -->
</div>
</div>
</div>
<!-- CREDIT (PC); DON'T REMOVE. -->
<div class="hidden-md-down col-1 p-0">
<div class="card border-0 text-center pr-1 h-100 justify-content-center bg-transparent rounded-0">
<a href="/itemlabel" class="text-secondary"><i class="fas fa-code fa-sm"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- CREDIT (MOBILE); DON'T REMOVE. -->
<div class="hidden-md-up col-12 pt-1">
<div class="card border-0 text-center pt-1 h-100 text-center bg-transparent rounded-0">
<a href="/itemlabel" class="text-secondary"><i class="fas fa-code fa-sm"></i></a>
</div>
</div>
</div>
</div>
</div>