big desc
created by:dxscmfrt
BootstrapHTMLCharacter
Copy
<!--
big desc
by dxscmfrt
accent color: -primary
-->
<div class="container" style="max-width:700px">
<!-- quote -->
<div class="bg-primary text-light mx-5 my-2 p-3" style="border-radius:10px">
<p class="text-center font-italic" style="font-weight:500; letter-spacing:1px"><i class="fas fa-quote-left fa-2xs"></i>
short quote here. works if long, but probably don't do that.
<i class="fas fa-quote-right fa-2xs"></i></p>
</div>
<!-- /quote -->
<!-- content -->
<div class="row">
<!-- left -->
<div class="col-sm-6">
<!-- profile image -->
<div class="card card-outline-primary mt-sm-n5" style="height:260px; z-index:-1; border-radius:10px;
background-image:url();
background-size:cover; background-position:center"></div>
<!-- /image -->
<!-- info basic -->
<div class="card card-outline-primary mx-3 mt-n3 mb-2" style="border-radius:10px 10px 0 0">
<!-- name -->
<div class="card-header bg-primary text-light text-center" style="border-radius:7px 7px 0 0; font-weight:500; letter-spacing:1px">
full name
</div>
<!-- /name -->
<!-- extra -->
<div class="row no-gutters">
<!-- nicknames -->
<div class="col-12 card rounded-0 p-1">
<p class="justify-content-between">
<i class="fas fa-tag m-1 tooltipster" title="nicknames"></i>
<span>
nicknames
</span>
</p>
</div>
<!-- /nicknames -->
<!-- gender -->
<div class="col-6 card rounded-0 p-1">
<p class="justify-content-between">
<i class="fas fa-venus-mars m-1 tooltipster" title="gender"></i>
<span>
gender
</span>
</p>
</div>
<!-- /gender -->
<!-- pronouns -->
<div class="col-6 card rounded-0 p-1">
<p class="justify-content-between">
<i class="fas fa-comments m-1 tooltipster" title="pronouns"></i>
<span>
pronouns
</span>
</p>
</div>
<!-- /pronouns -->
<!-- bday -->
<div class="col-6 card rounded-0 p-1">
<p class="justify-content-between">
<i class="fas fa-cake m-1 tooltipster" title="birthday"></i>
<span>
birthday
</span>
</p>
</div>
<!-- /bday -->
<!-- age -->
<div class="col-6 card rounded-0 p-1">
<p class="justify-content-between">
<i class="fas fa-hourglass m-1 tooltipster" title="age"></i>
<span>
age
</span>
</p>
</div>
<!-- /age -->
<!-- orientation -->
<div class="col-6 card rounded-0 p-1">
<p class="justify-content-between">
<i class="fas fa-heart-pulse m-1 tooltipster" title="orientation"></i>
<span>
orientation
</span>
</p>
</div>
<!-- /orientation -->
<!-- species -->
<div class="col-6 card rounded-0 p-1">
<p class="justify-content-between">
<i class="fas fa-user m-1 tooltipster" title="species"></i>
<span>
species
</span>
</p>
</div>
<!-- /species -->
</div>
<!-- /extra -->
</div>
<!-- /info -->
</div>
<!-- /left -->
<!-- right -->
<div class="col-sm-6">
<!-- big desc -->
<div class="card card-outline-primary text-justify p-2" style="height:340px; overflow-y:auto">
<div class="tab-content">
<!-- info -->
<div class="tab-pane fade show active" id="info">
<p>basic character bio here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. </p>
</div>
<!-- /info -->
<!-- trivia -->
<div class="tab-pane fade text-left" id="trivia">
<p class="text-primary mt-1 mb-0" style="font-weight:500; letter-spacing:1px">
likes and dislikes
</p>
<div class="row m-0">
<!-- likes -->
<div class="col-md-6">
<ul class="fa-ul ml-4">
<li><span class="fa-li fas fa-heart"></span>
likes
</li>
<li><span class="fa-li fas fa-heart"></span>
likes
</li>
<li><span class="fa-li fas fa-heart"></span>
likes
</li>
</ul>
</div>
<!-- /likes -->
<!-- dislikes -->
<div class="col-md-6">
<ul class="fa-ul ml-4">
<li><span class="fa-li fas fa-heart-crack"></span>
dislikes
</li>
<li><span class="fa-li fas fa-heart-crack"></span>
dislikes
</li>
<li><span class="fa-li fas fa-heart-crack"></span>
dislikes
</li>
</ul>
</div>
<!-- /dislikes -->
</div>
<p class="text-primary mt-1 mb-0" style="font-weight:500; letter-spacing:1px">
trivia
</p>
<!-- trivia -->
<ul class="fa-ul">
<li><span class="fa-li fas fa-star"></span>
content
</li>
<li><span class="fa-li fas fa-star"></span>
content
</li>
<li><span class="fa-li fas fa-star"></span>
content
</li>
</ul>
<!-- /trivia -->
</div>
<!-- /trivia -->
<!-- lore -->
<div class="tab-pane fade" id="lore">
<p class="text-left text-primary mt-1 mb-0" style="font-weight:500; letter-spacing:1px">
lore heading
</p>
<p>character lore here or smth. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p class="text-left text-primary mt-1 mb-0" style="font-weight:500; letter-spacing:1px">
lore heading
</p>
<p>everything in this box scrolls if very long. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<!-- /lore -->
</div>
</div>
<!-- /big desc -->
<!-- nav / links -->
<ul class="nav p-3 justify-content-around">
<li class="nav-item">
<a data-toggle="tab" class="nav-link p-2 bg-primary text-light fas fa-pencil" style="border-radius:10px"
href="#info"></a>
</li>
<li class="nav-item">
<a data-toggle="tab" class="nav-link p-2 bg-primary text-light fas fa-box-archive" style="border-radius:10px"
href="#trivia"></a>
</li>
<li class="nav-item">
<a data-toggle="tab" class="nav-link p-2 bg-primary text-light fas fa-book" style="border-radius:10px"
href="#lore"></a>
</li>
<li>
<a class="p-2 bg-primary text-light fas fa-sun-haze tooltipster" style="border-radius:10px; text-decoration:0"
href="https://toyhou.se/25370660.big-desc" title="code by dxscmfrt"></a>
</li>
</ul>
<!-- /nav -->
</div>
<!-- /right -->
</div>
<!-- /content -->
</div>
<!-- end -->