<!--------------------------------
"OVERVIEW" - F2U HTML by @StormyStarlight
VERSION - 16 Jul 2023
https://toyhou.se/22488792.f2u-html-overview
• Do not remove or redirect the credit. You may change how the credit is displayed/move it elsewhere, but it may not be removed altogether. Do not claim you made this layout.
• Feel free to modify/frankenstein this layout as much as you want as long as I am still credited, along with any other involved (consenting) creators.
• Keep Profile Text WYSIWYG disabled and Code Editor enabled when using this layout.
• Do not publicly redistribute this layout, or modified/copied/frankensteined versions of it, regardless of whether it is for free or paid use.
--------------------------------->
<div class="justify-content-center"><div class="col-lg-10 col-xl-8 px-0 d-block d-lg-flex flex-column">
<!------ NAVIGATION ----------->
<ul class="nav nav-tabs border-0" style="justify-content: right;">
<li class="nav-item pl-2 mb-0"><a class="nav-link py-1 bg-faded border-0 active" data-toggle="tab"href="#home">Home</a></li>
<li class="nav-item pl-2 mb-0"><a class="nav-link py-1 bg-faded border-0" data-toggle="tab" href="#about">About</a></li>
<li class="nav-item pl-2 mb-0"><a class="nav-link py-1 bg-faded border-0" data-toggle="tab"href="#background">Background</a></li>
<li class="nav-item pl-2 mb-0"><a class="nav-link py-1 px-2 bg-faded border-0 text-muted tooltipster" title="Layout by macaronichewtoyz" href="https://toyhou.se/macaronichewtoyz"><i class="fa-light fa-table-layout"></i></a></li>
<li class="nav-item pl-2 mb-0"><a class="nav-link py-1 px-2 bg-faded border-0 text-muted tooltipster" title="HTML by StormyStarlight" href="https://toyhou.se/22488792.f2u-html-overview"><i class="fa-light fa-code"></i></a></li>
</ul>
<!------ MAIN CONTENT --------->
<div class="card border-0 bg-faded p-3 pt-5 pt-sm-4 tab-content" style="position: static; border-radius: 0.25rem 0 0.25rem 0.25rem;">
<!------ HOME --------------->
<div class="tab-pane fade active show" id="home">
<h1 class="display-3 mb-0 pt-4 pt-sm-0 mt-3 mt-sm-0" style="position: absolute; top: 0; z-index: 2;">
NAME <i class="fa-light fa-star"></i>
</h1>
<div class="col-sm-6 col-lg-5 px-0 pl-sm-3 float-sm-right">
<h2 class="mt-3 mt-sm-0">Current Ref</h2>
<a class="card border-0" style="overflow: hidden;" href="
CREDITLINK
"><img src="
IMAGELINK
"></a>
</div>
<h2 class="mt-2 mt-sm-0">Basics</h2>
<div class="col-sm-6 col-lg-7 px-0">
<div class="justify-content-between mt-1">
<div class="font-weight-bold text-lowercase text-muted mr-1">Full Name</div>
<div class="text-right">CONTENT</div>
</div>
<div class="justify-content-between mt-1">
<div class="font-weight-bold text-lowercase text-muted mr-1">Gender</div>
<div class="text-right">CONTENT</div>
</div>
<div class="justify-content-between mt-1">
<div class="font-weight-bold text-lowercase text-muted mr-1">Pronouns</div>
<div class="text-right">CONTENT</div>
</div>
<div class="justify-content-between mt-1">
<div class="font-weight-bold text-lowercase text-muted mr-1">Orientation</div>
<div class="text-right">CONTENT</div>
</div>
<div class="justify-content-between mt-1">
<div class="font-weight-bold text-lowercase text-muted mr-1">Species</div>
<div class="text-right">CONTENT</div>
</div>
<div class="justify-content-between mt-1">
<div class="font-weight-bold text-lowercase text-muted mr-1">Line</div>
<div class="text-right">CONTENT</div>
</div>
<div class="justify-content-between mt-1">
<div class="font-weight-bold text-lowercase text-muted mr-1">Age</div>
<div class="text-right">CONTENT</div>
</div>
<div class="justify-content-between mt-1">
<div class="font-weight-bold text-lowercase text-muted mr-1">Date of Birth</div>
<div class="text-right">CONTENT</div>
</div>
<div class="justify-content-between mt-1">
<div class="font-weight-bold text-lowercase text-muted mr-1">Residence</div>
<div class="text-right">CONTENT</div>
</div>
<div class="justify-content-between mt-1">
<div class="font-weight-bold text-lowercase text-muted mr-1">Occupation</div>
<div class="text-right">CONTENT</div>
</div>
</div>
<h2 class="mt-2">Summary</h2>
<p>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. 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. </p>
</div>
<!------ ABOUT -------------->
<div class="tab-pane fade" id="about">
<h1 class="display-3 mb-0 pt-4 pt-sm-0 mt-3 mt-sm-0" style="position: absolute; top: 0; z-index: 2;">About</h1>
<div class="row no-gutters">
<div class="col-sm-6 pr-2"><h2 class="mt-3 mt-sm-0">Personality</h2>
<p class="mb-2">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>
<div class="col-sm-6 pl-sm-2"><h2>Abilities</h2><ul class="fa-ul ml-4 mb-2">
<li><i class="fa-li fa-light fa-star"></i>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.</li>
<li><i class="fa-li fa-light fa-star"></i>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
</ul></div>
</div><div class="row no-gutters">
<div class="col-sm-6 pr-sm-2">
<div class="justify-content-between mt-1">
<div class="font-weight-bold text-lowercase text-muted mr-1">Goals</div>
<div class="text-right">CONTENT</div>
</div>
<div class="justify-content-between mt-1">
<div class="font-weight-bold text-lowercase text-muted mr-1">Fears</div>
<div class="text-right">CONTENT</div>
</div>
<div class="justify-content-between mt-1">
<div class="font-weight-bold text-lowercase text-muted mr-1">Likes</div>
<div class="text-right">CONTENT</div>
</div>
<div class="justify-content-between mt-1">
<div class="font-weight-bold text-lowercase text-muted mr-1">Dislikes</div>
<div class="text-right">CONTENT</div>
</div>
<div class="justify-content-between mt-1">
<div class="font-weight-bold text-lowercase text-muted mr-1">Other</div>
<div class="text-right">CONTENT</div>
</div>
</div>
<div class="col-sm-6 pl-sm-2">
<div class="justify-content-between mt-1">
<div class="font-weight-bold text-lowercase text-muted mr-1">Education</div>
<div class="text-right">CONTENT</div>
</div>
<div class="justify-content-between mt-1">
<div class="font-weight-bold text-lowercase text-muted mr-1">Skills</div>
<div class="text-right">CONTENT</div>
</div>
<div class="justify-content-between mt-1">
<div class="font-weight-bold text-lowercase text-muted mr-1">Hobbies</div>
<div class="text-right">CONTENT</div>
</div>
<div class="justify-content-between mt-1">
<div class="font-weight-bold text-lowercase text-muted mr-1">Neurotype</div>
<div class="text-right">CONTENT</div>
</div>
<div class="justify-content-between mt-1">
<div class="font-weight-bold text-lowercase text-muted mr-1">Disabilities</div>
<div class="text-right">CONTENT</div>
</div>
</div>
</div>
</div>
<!------ BACKGROUND --------------->
<div class="tab-pane fade" id="background">
<h1 class="display-3 mb-0 pt-4 pt-sm-0 mt-3 mt-sm-0" style="position: absolute; top: 0; z-index: 2;">Background</h1>
<h2 class="mt-3 mt-sm-0">Upbringing</h2>
<p class="mb-0">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 class="clearfix mb-2"></div><h2>Relationships</h2>
<!------ CHARACTER --------------->
<div class="clearfix mb-2"></div>
<div class="card border-0 float-left mr-2" style="overflow: hidden; max-width: 85px;"><a href="
CHARACTERLINK
"><img src="
IMAGELINK
"></a></div>
<p class="mb-0"><a class="text-uppercase font-weight-bold" href="
CHARACTERLINK
">NAME:</a> 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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>
<!------ CHARACTER --------------->
<div class="clearfix mb-2"></div>
<div class="card border-0 float-left mr-2" style="overflow: hidden; max-width: 85px;"><a href="
CHARACTERLINK
"><img src="
IMAGELINK
"></a></div>
<p class="mb-0"><a class="text-uppercase font-weight-bold" href="
CHARACTERLINK
">NAME:</a> 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="clearfix mb-2"></div><h2>Currently</h2>
<p class="mb-0">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>
</div>
</div></div>