<!-- ------------------------------
LANGUID — Bootstrap Version
(code by jiko)
RULES
→ Read this thoroughly please, and maybe drop a small comment saying that you've read it? :'3
thank youu [ https://toyhou.se/~bulletins/127417.code-rules ]
→ turn OFF WYSIWYG
→ turn ON Code Editor
TIPPY TIPS
→ insert your img links INSIDE or quotation marks!!
------------------------------- -->
<div class="mx-auto" style="font-size:90%; letter-spacing:0.5px; max-width:650px">
<div class="row no-gutters" style="margin:-4px">
<!-- ------------------------------
TABS
------------------------------- -->
<div class="col-12 order-3 my-1">
<ul class="nav row no-gutters text-center">
<!-- FRONT PAGE -->
<li class="nav-item col mr-2 bg-primary">
<a data-toggle="tab" href="#languidone"
class="active btn btn-outline-secondary w-100 rounded-0 font-weight-bold text-white border-0"
style="font-size:15px;">
<i class="fas fa-user"></i>
</a>
</li>
<!-- PERSONALITY -->
<li class="nav-item col mr-2 bg-primary">
<a data-toggle="tab" href="#languidtwo"
class="btn btn-outline-secondary w-100 rounded-0 font-weight-bold text-white border-0"
style="font-size:15px;">
<i class="fas fa-heart"></i>
</a>
</li>
<!-- TRIVIA -->
<li class="nav-item col mr-2 bg-primary">
<a data-toggle="tab" href="#languidthree"
class="btn btn-outline-secondary w-100 rounded-0 font-weight-bold text-white border-0"
style="font-size:15px;">
<i class="fas fa-book-open"></i>
</a>
</li>
<!-- DESIGN NOTES -->
<li class="nav-item col mr-2 bg-primary">
<a data-toggle="tab" href="#languidfour"
class="btn btn-outline-secondary w-100 rounded-0 font-weight-bold text-white border-0"
style="font-size:15px;">
<i class="fas fa-star"></i>
</a>
</li>
<!-- LORE -->
<li class="nav-item col mr-0 bg-primary">
<a data-toggle="tab" href="#languidfive"
class="btn btn-outline-secondary w-100 rounded-0 font-weight-bold text-white border-0"
style="font-size:15px;">
<i class="fas fa-books"></i>
</a>
</li>
</ul>
</div>
<!-- ------------------------------
NAME TAG
- just the name and icon
------------------------------- -->
<div class="col-12 order-1 my-1">
<div class="bg-primary text-uppercase text-white font-weight-bold p-2 px-3 justify-content-between"
style="font-size:15px; letter-spacing:0.5em;">
Name
<i class="fas fa-seedling my-auto"></i>
</div>
</div>
<!-- --- content starts! --- -->
<div class="col-12 order-2 my-1">
<div class="row no-gutters">
<!-- ------------------------------
CHARACTER IMAGE
------------------------------- -->
<div class="col-lg-4">
<div class="card-transparent w-100 h-100">
<div class="h-100" style="min-height:200px;
background-image: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;">
</div>
</div>
</div>
<!-- --- tab content starts! --- -->
<div class="col-lg-8 tab-content table-responsive h-100">
<!-- ------------------------------
TBA ONE : PROFILE
------------------------------- -->
<div class="tab-pane fade active show" id="languidone">
<div class="bg-faded text-muted p-3" style="height:310px; overflow:auto">
<div class="text-uppercase justify-content-between font-weight-bold text-primary" style="letter-spacing:1px">
<i class="far fa-user"></i>
Profile
</div>
<hr class="my-2">
<div class="justify-content-between p-1">
<span class="text-primary text-uppercase font-weight-bold"
style="letter-spacing:1px;">name</span>
<span>content</span>
</div>
<div class="justify-content-between p-1">
<span class="text-primary text-uppercase font-weight-bold"
style="letter-spacing:1px;">age</span>
<span>content</span>
</div>
<div class="justify-content-between p-1">
<span class="text-primary text-uppercase font-weight-bold"
style="letter-spacing:1px;">gender</span>
<span>content (prn/prn)</span>
</div>
<div class="justify-content-between p-1">
<span class="text-primary text-uppercase font-weight-bold"
style="letter-spacing:1px;">height</span>
<span>content</span>
</div>
<div class="justify-content-between p-1">
<span class="text-primary text-uppercase font-weight-bold"
style="letter-spacing:1px;">race</span>
<span>or species</span>
</div>
<div class="justify-content-between p-1">
<span class="text-primary text-uppercase font-weight-bold"
style="letter-spacing:1px;">birthday</span>
<span>content</span>
</div>
<div class="justify-content-between p-1">
<span class="text-primary text-uppercase font-weight-bold"
style="letter-spacing:1px;">star sign</span>
<span>content</span>
</div>
<div class="justify-content-between p-1">
<span class="text-primary text-uppercase font-weight-bold"
style="letter-spacing:1px;">occupation</span>
<span>content</span>
</div>
<!-- add/delete above THIS line! -->
</div>
</div>
<!-- ------------------------------
TAB TWO : PERSONALITY
------------------------------- -->
<div class="tab-pane fade" id="languidtwo">
<div class="bg-faded text-muted p-3" style="height:310px; overflow:hidden">
<div class="text-primary text-uppercase justify-content-between font-weight-bold" style="letter-spacing:1px">
<i class="far fa-heart"></i>
Personality
</div>
<hr class="my-2">
<div class="text-justify" style="height:250px; overflow:auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut.</p>
<p>Libero id faucibus nisl tincidunt eget nullam. Donec et odio pellentesque diam volutpat commodo sed egestas egestas. Sit amet tellus cras adipiscing.</p>
<p>Amet porttitor eget dolor morbi. Donec ultrices tincidunt arcu non sodales neque sodales ut. At tempor commodo ullamcorper a lacus vestibulum sed.</p>
<p>Diam vel quam elementum pulvinar etiam non. Erat nam at lectus urna duis. Sed vulputate mi sit amet mauris. Ultrices gravida dictum fusce ut placerat orci nulla. Maecenas pharetra convallis posuere morbi leo urna molestie at.</p>
</div>
</div>
</div>
<!-- ------------------------------
TAB THREE : TRIVIA
------------------------------- -->
<div class="tab-pane fade" id="languidthree">
<div class="bg-faded text-muted p-3" style="height:310px; overflow:hidden">
<div class="text-primary text-uppercase justify-content-between font-weight-bold" style="letter-spacing:1px">
<i class="far fa-book-open"></i>
Trivia
</div>
<hr class="my-2">
<div style="height:250px; overflow:auto">
<ul class="fa-ul text-muted">
<li class="mt-2 my-1"><span class="fa-li">
<i class="text-primary fas fa-angle-right" style="font-size:9px;"></i></span>
<span>Leo vel fringilla est ullamcorper eget.</span>
</li>
<li class="my-2"><span class="fa-li">
<i class="text-primary fas fa-angle-right" style="font-size:9px;"></i></span>
<span>Venenatis lectus magna fringilla urna.</span>
</li>
<li class="my-2"><span class="fa-li">
<i class="text-primary fas fa-angle-right" style="font-size:9px;"></i></span>
<span>Aliquam sodales aliquet vehicula.</span>
</li>
<li class="my-2"><span class="fa-li">
<i class="text-primary fas fa-angle-right" style="font-size:9px;"></i></span>
<span>Eget nunc scelerisque viverra mauris in aliquam sem.</span>
</li>
<li class="my-2"><span class="fa-li">
<i class="text-primary fas fa-angle-right" style="font-size:9px;"></i></span>
<span>Diam vulputate ut pharetra sit amet aliquam id diam.</span>
</li>
<!-- add/delete above THIS line! -->
</ul>
</div>
</div>
</div>
<!-- ------------------------------
TAB FOUR : TRIVIA
------------------------------- -->
<div class="tab-pane fade" id="languidfour">
<div class="bg-faded text-muted p-3" style="height:310px; overflow:hidden">
<div class="text-primary text-uppercase justify-content-between font-weight-bold" style="letter-spacing:1px">
<i class="far fa-star"></i>
Design Notes
</div>
<hr class="my-2">
<div style="height:250px; overflow:auto">
<ul class="fa-ul text-muted">
<li class="my-2"><span class="fa-li">
<i class="text-primary fas fa-angle-right" style="font-size:9px;"></i></span>
<span>Quis eleifend quam adipiscing</span>
</li>
<li class="mt-2"><span class="fa-li">
<i class="text-primary fas fa-angle-right" style="font-size:9px;"></i></span>
<span>vitae proin sagittis nisl rhoncus</span>
</li>
<li class="mt-2"><span class="fa-li">
<i class="text-primary fas fa-angle-right" style="font-size:9px;"></i></span>
<span>Purus in mollis</span>
</li>
<li class="my-2"><span class="fa-li">
<i class="text-primary fas fa-angle-right" style="font-size:9px;"></i></span>
<span>Nunc sed id semper</span>
</li>
<li class="my-2"><span class="fa-li">
<i class="text-primary fas fa-angle-right" style="font-size:9px;"></i></span>
<span>Felis eget velit aliquet</span>
</li>
<!-- add/delete above THIS line! -->
</ul>
</div>
</div>
</div>
<!-- ------------------------------
TAB FIVE : LORE
- or free space
------------------------------- -->
<div class="tab-pane fade" id="languidfive">
<div class="bg-faded text-muted p-3" style="height:310px; overflow:hidden">
<div class="text-primary text-uppercase justify-content-between font-weight-bold" style="letter-spacing:1px">
<i class="far fa-books"></i>
Lore
</div>
<hr class="my-2">
<div class="text-justify" style="height:250px; overflow:auto">
<p>Ut porttitor leo a diam sollicitudin tempor id eu. Fermentum iaculis eu non diam phasellus vestibulum. Sed pulvinar proin gravida hendrerit lectus. Donec et odio pellentesque diam volutpat commodo sed egestas egestas.</p>
<p>Gravida quis blandit turpis cursus in hac habitasse. Sed risus pretium quam vulputate. Viverra nam libero justo laoreet.</p>
<p>Amet mauris commodo quis imperdiet massa tincidunt. Dolor sed viverra ipsum nunc aliquet bibendum. Pretium nibh ipsum consequat nisl vel pretium lectus quam id. Mattis molestie a iaculis at erat pellentesque adipiscing commodo.</p>
<p>Nisi vitae suscipit tellus mauris a diam maecenas sed. Sed viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Tellus rutrum tellus pellentesque eu tincidunt tortor. Eu tincidunt tortor aliquam nulla facilisi.</p>
</div>
</div>
</div>
<!-- don't touch the below thanks! -->
</div>
</div>
</div>
<!-- ------------------------------
CREDITS
------------------------------- -->
<div class="small col-12 order-4">
<div class="text-right" style="letter-spacing:0.3em;">
<a href="https://toyhou.se/9931941.-f2u-languid" class="text-muted tooltipster"
title="code by jiko" style="text-decoration: none;">
<i class="far fa-code"></i>
</a> .
<a href="https://toyhou.se/CHRONlCAL" class="text-muted tooltipster"
title="art by CHRONlCAL" style="text-decoration: none;">
<i class="far fa-image"></i>
</a>
</div>
</div>
</div>
</div>
