<!-- -----------------------------
AMPLE (code by jiko, layout by ForrowFolf)
RULES
→ Read this thoroughly please, and maybe leave a small comment saying that you've read it? :'3 thank youu
[ https://toyhou.se/~bulletins/127417.code-rules ]
TIPPY TIPS
→ when editing, use the little down arrows on the far left side to 'hide' the section!
this will not impact the actual code in anyway :3 just a useful thing
----------------------------- -->
<div class="mx-auto text-justify" style="font-size:12px; letter-spacing:0.3px; max-width:800px">
<div class="row no-gutters" style="margin:-5px;">
<!-- -----------------------------
LEFT : CHARACTER BOX
----------------------------- -->
<div class="col-lg-4 p-2">
<div class="h-100">
<div class="row no-gutters">
<!-- --- CHARACTER IMAGE ----------------------------- -->
<!-- --- any image larger than 200x200 is recommended! --- -->
<div class="col-lg-12 pb-2" style="height:200px">
<div class="card rounded-0 p-1 h-100">
<div class="card rounded-0 bg-faded w-100 h-100" style="
/* CHARACTER IMAGE
====================================== */;
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>
<!-- --- CHARACTER INFO ----------------------------- -->
<div class="col-lg-12 pt-1" style="height:210px;">
<div class="card rounded-0 p-1 h-100">
<div class="card rounded-0 bg-faded p-3 h-100" style="overflow:auto">
<div class="justify-content-between">
<i class="far fa-signature text-muted"></i> name
</div><hr class="w-100 mt-2 mb-3">
<div class="justify-content-between">
<i class="far fa-calendar-alt text-muted"></i> age
</div><hr class="w-100 mt-2 mb-3">
<div class="justify-content-between">
<i class="far fa-venus-mars text-muted"></i> gender (prn/prn)
</div><hr class="w-100 mt-2 mb-3">
<div class="justify-content-between">
<i class="far fa-dna text-muted"></i> race or species
</div><hr class="w-100 mt-2 mb-3">
<div class="justify-content-between">
<i class="far fa-heart text-muted"></i> orient.
</div>
<!-- [ add / delete above THIS line! it'll scroll! ] -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- -----------------------------
RIGHT : PROFILE BOX
----------------------------- -->
<div class="col-lg-8 p-2">
<!-- --- TABBY TABS ----------------------------- -->
<!-- --- you can add three more tabs but make sure you know 100% what you're doing! --- -->
<div class="row no-gutters card p-1 rounded-0"><div class="col-lg-12">
<ul class="nav row text-uppercase text-center" style="letter-spacing:1.5px;">
<li class="nav-item col">
<a class="card bg-faded rounded-0 nav-link p-1 active" data-toggle="tab" href="#ampleone">
trivial
</a>
</li>
<li class="nav-item col">
<a class="card bg-faded rounded-0 nav-link p-1" data-toggle="tab" href="#ampletwo">
lore
</a>
</li>
</ul>
</div>
</div>
<div class="mt-2">
<div class="card rounded-0 p-1 table-responsive tab-content" style="height:363px">
<!-- -----------------------------
TRIVIAL
----------------------------- -->
<div class="tab-pane fade active show" id="ampleone">
<div class="card rounded-0 bg-faded p-3" style="min-height:353px">
<!-- --- TRIVIA ----------------------------- -->
<div class="trivia pb-4">
<div class="justify-content-between text-primary">
<i class="lead far fa-info-circle fa-fw" style="font-size:16px;"></i>
<h1 class="lead text-uppercase" style="font-size:16px; letter-spacing:3px">
Trivia
</h1>
</div><hr class="my-1 w-100">
<ul class="fa-ul mb-0 text-muted">
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right fa-xs"></i></span>
<span>Vulputate mi sit amet mauris commodo.</span>
</li>
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right fa-xs"></i></span>
<span>At consectetur lorem donec massa sapien. Justo nec ultrice.</span>
</li>
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right fa-xs"></i></span>
<span>Risus nullam eget felis eget nunc lobortis.</span>
</li>
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right fa-xs"></i></span>
<span>In hendrerit gravida rutrum quisque.</span>
</li>
</ul>
</div>
<!-- --- PREFERENCES ----------------------------- -->
<div class="likes and dislikes pb-4">
<div class="row no-gutters">
<!-- --- LIKES --- -->
<div class="col-6 p-1 pr-2">
<div class="justify-content-between text-primary">
<i class="lead far fa-check fa-fw" style="font-size:14px;"></i>
<h1 class="lead text-uppercase" style="font-size:14px; letter-spacing:3px">
Likes
</h1>
</div><hr class="my-1 w-100">
<ul class="fa-ul mb-0 text-muted">
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right fa-xs"></i></span>
<span>content</span>
</li>
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right fa-xs"></i></span>
<span>content</span>
</li>
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right fa-xs"></i></span>
<span>content</span>
</li>
</ul>
</div>
<!-- --- DISLIKES --- -->
<div class="col-6 p-1 pl-2">
<div class="justify-content-between text-primary">
<i class="lead far fa-times fa-fw" style="font-size:14px;"></i>
<h1 class="lead text-uppercase" style="font-size:14px; letter-spacing:3px">
Dislikes
</h1>
</div><hr class="my-1 w-100">
<ul class="fa-ul mb-0 text-muted">
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right fa-xs"></i></span>
<span>content</span>
</li>
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right fa-xs"></i></span>
<span>content</span>
</li>
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right fa-xs"></i></span>
<span>content</span>
</li>
</ul>
</div>
</div>
</div>
<!-- --- DESIGN NOTES ----------------------------- -->
<div class="design notes">
<div class="justify-content-between text-primary">
<i class="lead far fa-palette fa-fw" style="font-size:16px;"></i>
<h1 class="lead text-uppercase" style="font-size:16px; letter-spacing:3px">
Design Notes
</h1>
</div><hr class="my-1 w-100">
<ul class="fa-ul mb-0 text-muted">
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right fa-xs"></i></span>
<span>Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus.</span>
</li>
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right fa-xs"></i></span>
<span>Ornare suspendisse sed nisi lacus sed viverra tellus.</span>
</li>
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right fa-xs"></i></span>
<span>Semper auctor neque vitae tempus.</span>
</li>
<li class="my-2"><span class="fa-li">
<i class="fas fa-angle-right fa-xs"></i></span>
<span>Ultricies lacus sed turpis tincidunt.</span>
</li>
</ul>
</div>
</div>
</div>
<!-- -----------------------------
LORE
→ buT it's pretty much free space so
do whatever you want :D
----------------------------- -->
<div class="tab-pane fade" id="ampletwo">
<div class="card rounded-0 bg-faded p-3">
<!-- --- HEADER ----------------------------- -->
<div class="justify-content-between text-primary">
<i class="lead far fa-book" style="font-size:16px;"></i>
<h1 class="lead text-uppercase" style="font-size:16px; letter-spacing:3px">
History
</h1>
</div><hr class="my-1 w-100">
<!-- --- CONTENT ----------------------------- -->
<div class="pt-2 text-muted" style="min-height:285px">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. In arcu cursus euismod quis viverra nibh cras pulvinar mattis. Lacus sed turpis tincidunt id aliquet risus feugiat in ante. Id interdum velit laoreet id donec ultrices tincidunt arcu non.</p>
<p>In arcu cursus euismod quis viverra nibh cras pulvinar mattis. Lacus sed turpis tincidunt id aliquet risus feugiat in ante. Id interdum velit laoreet id donec ultrices tincidunt arcu non.</p>
</div>
</div>
</div>
<!-- --- DON'T TOUCH THE BELOW THANKS!! --- -->
</div></div></div>
<!-- -----------------------------
BOTTOM : CREDITS
----------------------------- -->
<div class="col-12 text-right small px-2" style="letter-spacing:4px">
<a href="https://toyhou.se/9463929.-f2u-ample"
data-toggle="tooltip" title="code by jiko" style="text-decoration:none;">
<i class="far fa-code"></i>
</a> .
<a href="https://toyhou.se/ForrowFolf"
data-toggle="tooltip" title="layout by ForrowFolf">
<i class="far fa-lightbulb"></i>
</a>
</div></div></div>
