<!--- hello! i'm glad you're interested in my f2u codes!
----- if you want to support me, you can send points here:
----- https://www.deviantart.com/tiisanes
----- or DM me for my PayPal <3
----- anything is appreciated ^^
----->
<!-- MAIN CONTAINER -->
<div class="row no-gutters justify-content-between mx-auto p-3 bg-white" style="max-width: 700px; border-radius: 5px;">
<!-- NAME -->
<div class="col-lg-8 col-md-5 pr-md-0 mb-md-0 mb-2">
<div class="card p-1 mb-4" style="height: 40px; background-color: #94cbe3;">
<div class="text-center text-lowercase text-white" style="font-size: 20px; letter-spacing: 10px; font: calibri;">
CHARACTER NAME HERE</div>
</div>
<!-- NAVIGATION TABS -->
<ul class="nav nav-tabs justify-content-center nav-fill flex-xs-sm-row">
<li class="nav-item"><a class="flex-sm-fill text-sm-center btn btn-default border-0 nav-link active" data-toggle="tab" href="#about">about</a></li>
<li class="nav-item"><a class="flex-sm-fill text-sm-center btn btn-default border-0 nav-link" data-toggle="tab" href="#relationships">relationships</a></li>
<li class="nav-item"><a class="flex-sm-fill text-sm-center btn btn-default border-0 nav-link" data-toggle="tab" href="#moodboard">moodboard</a></li>
</ul>
<!-- ABOUT (TAB ONE)-->
<div class="tab-content">
<div class="tab-pane fade active show col-12 p-1" id="about">
<div class="card-block text-muted" style="height: 460px;
overflow: auto;
font-size: 16px;
font: calibri;">
<!-- section 1 -->
<span class="text-lowercase" style="font-size: 20px; letter-spacing: 2px; font: calibri; margin-bottom:-5px; color: #71b4d0;">SUBHEADING</span>
<p>CHARACTER STORY HERE
TEXT HERE TEXT HERE TEXT HERE
TEXT HERE TEXT HERE TEXT HERE</p>
<!-- section 2 -->
<span class="text-lowercase" style="font-size: 20px; letter-spacing: 2px; font: calibri; margin-bottom:-5px; color: #71b4d0;">SUBHEADING</span>
<p>CHARACTER STORY HERE
TEXT HERE TEXT HERE TEXT HERE
TEXT HERE TEXT HERE TEXT HERE</p>
<!-- section 3 -->
<span class="text-lowercase" style="font-size: 20px; letter-spacing: 2px; font: calibri; margin-bottom:-5px; color: #71b4d0;">SUBHEADING</span>
<p>CHARACTER STORY HERE
TEXT HERE TEXT HERE TEXT HERE
TEXT HERE TEXT HERE TEXT HERE</p>
</div>
</div>
<!-- RELATIONSHIPS (TAB TWO) -->
<div class="tab-pane fade mb-3" id="relationships">
<div class="card-block text-muted" style="height: 460px;
overflow: auto;
font-size: 16px;
font: calibri;">
<!-- first character -->
<a href="CHARACTER LINK HERE"><img src="IMG URL" style="border-radius: 5%;" class="float-left m-3" width="100" height="100"></a>
<p class="text-lowercase" style="font-size: 20px; letter-spacing: 2px; font: calibri; margin-bottom:-5px; color: #71b4d0;">
name</p>
<p class="text-muted">relationship
<br>
-- -- --</p>
<p class="text-wrap">CHARACTER RELATIONSHIP HERE
TEXT HERE TEXT HERE TEXT HERE
TEXT HERE TEXT HERE TEXT HERE</p>
<br>
<!-- 2nd character -->
<a href="CHARACTER LINK HERE"><img src="IMG URL" style="border-radius: 5%;" class="float-left m-3" width="100" height="100"></a>
<p class="text-lowercase" style="font-size: 20px; letter-spacing: 2px; font: calibri; margin-bottom:-5px; color: #71b4d0;">
name</p>
<p class="text-muted">relationship
<br>
-- -- --</p>
<p class="text-wrap">CHARACTER RELATIONSHIP HERE
TEXT HERE TEXT HERE TEXT HERE
TEXT HERE TEXT HERE TEXT HERE</p>
<br>
<!-- 3rd character -->
<a href="CHARACTER LINK HERE"><img src="IMG URL" style="border-radius: 5%;" class="float-left m-3" width="100" height="100"></a>
<p class="text-lowercase" style="font-size: 20px; letter-spacing: 2px; font: calibri; margin-bottom:-5px; color: #71b4d0;">
name</p>
<p class="text-muted">relationship
<br>
-- -- --</p>
<p class="text-wrap">CHARACTER RELATIONSHIP HERE
TEXT HERE TEXT HERE TEXT HERE
TEXT HERE TEXT HERE TEXT HERE</p>
<!-- 4th character -->
<a href="CHARACTER LINK HERE"><img src="IMG URL" style="border-radius: 5%;" class="float-left m-3" width="100" height="100"></a>
<p class="text-lowercase" style="font-size: 20px; letter-spacing: 2px; font: calibri; margin-bottom:-5px; color: #71b4d0;">
name</p>
<p class="text-muted">relationship
<br>
-- -- --</p>
<p class="text-wrap">CHARACTER RELATIONSHIP HERE
TEXT HERE TEXT HERE TEXT HERE
TEXT HERE TEXT HERE TEXT HERE</p>
</div>
</div>
<!-- MOODBOARD (TAB THREE) -->
<div class="card-block tab-pane fade col-12 no-gutters justify-content-center p-3" align="center" id="moodboard" style="height: 460px;
overflow: auto;
font-size: 16px;
font: calibri;">
<!-- 1st image -->
<a class="text-muted tooltipster" title="IMG CREDIT" data-placement="top"><img src="IMG URL HERE" style="border-radius: 5%;" class="m-1" width="100" height="100"></a>
<!-- 2nd image -->
<a class="text-muted tooltipster" title="IMG CREDIT" data-placement="top"><img src="IMG URL HERE" style="border-radius: 5%;" class="m-1" width="100" height="100"></a>
<!-- 3rd image -->
<a class="text-muted tooltipster" title="IMG CREDIT" data-placement="top"><img src="IMG URL HERE" style="border-radius: 5%;" class="m-1" width="100" height="100"></a>
<!-- 4th image -->
<a class="text-muted tooltipster" title="IMG CREDIT" data-placement="top"><img src="IMG URL HERE" style="border-radius: 5%;" class="m-1" width="100" height="100"></a>
<!-- 5th image -->
<a class="text-muted tooltipster" title="IMG CREDIT" data-placement="top"><img src="IMG URL HERE" style="border-radius: 5%;" class="m-1" width="100" height="100"></a>
<!-- 6th image -->
<a class="text-muted tooltipster" title="IMG CREDIT" data-placement="top"><img src="IMG URL HERE" style="border-radius: 5%;" class="m-1" width="100" height="100"></a>
<!-- 7th image -->
<a class="text-muted tooltipster" title="IMG CREDIT" data-placement="top"><img src="IMG URL HERE" style="border-radius: 5%;" class="m-1" width="100" height="100"></a>
<!-- 8th image -->
<a class="text-muted tooltipster" title="IMG CREDIT" data-placement="top"><img src="IMG URL HERE" style="border-radius: 5%;" class="m-1" width="100" height="100"></a>
<!-- 9th image -->
<a class="text-muted tooltipster" title="IMG CREDIT" data-placement="top"><img src="IMG URL HERE" style="border-radius: 5%;" class="m-1" width="100" height="100"></a>
</div>
</div>
</div>
<!-- CHARACTER AVATAR -->
<div class="col-lg-4 col-md-5 pr-md-0 mb-md-0 mb-2">
<a class="text-muted tooltipster" title="avatar art credit" data-placement="right" href="ARTIST LINK HERE" target="blank_"><img src="IMG URL HERE" style="border-radius: 50%;" class="fc-fil fr-dib" width="200" height="200"></a>
<br>
<!-- BASIC CHARACTER INFO -->
<div class="card px-1 flex-column" style="background-color: #94cbe3;">
<!-- age -->
<div class="pt-3 justify-content-between">
<p class="text-uppercase text-white"><i class="fas fa-calendar-alt mx-2" style="color: #fff;"></i>age</p>
<p class="text-right text-lowercase text-white">stuff here</p>
</div>
<!-- pronouns -->
<div class="p-0 justify-content-between">
<p class="text-uppercase text-white"><i class="fas fa-comment-dots mx-2" style="color: #fff;"></i>pronouns</p>
<p class="text-right text-lowercase text-white">stuff here</p>
</div>
<!-- species -->
<div class="p-0 justify-content-between">
<p class="text-uppercase text-white"><i class="fas fa-paw mx-2" style="color: #fff;"></i>species</p>
<p class="text-right text-lowercase text-white">stuff here</p>
</div>
<!-- designer -->
<div class="p-0 justify-content-between">
<p class="text-uppercase text-white"><i class="fas fa-paint-brush-alt mx-2" style="color: #fff;"></i>designer</p>
<p class="text-right text-lowercase"><a href="LINK TO DESIGNER" style="color: #fff;" target="_blank">stuff here</a></p>
</div>
<!-- worth -->
<div class="p-0 justify-content-between">
<p class="text-uppercase text-white"><i class="fas fa-dollar-sign mr-3 ml-2" style="color: #fff;"></i>worth</p>
<p class="text-right text-lowercase text-white">stuff here</p>
</div>
<!-- obtained via -->
<div class="p-0 justify-content-between">
<p class="text-uppercase text-white"><i class="fas fa-handshake mr-1 ml-2" style="color: #fff;"></i>obtained via</p>
<p class="text-right text-lowercase text-white">stuff here</p>
</div>
<!-- status -->
<div class="p-0 justify-content-between">
<p class="text-uppercase text-white"><i class="fas fa-lock mx-2" style="color: #fff;"></i>status</p>
<p class="text-right text-lowercase text-white">stuff here</p>
</div>
<!-- theme/song -->
<div class="p-0 justify-content-between">
<p class="text-uppercase text-white"><i class="fas fa-music mx-2" style="color: #fff;"></i>theme/song</p>
<p class="text-right text-lowercase"><a href="LINK TO SONG" style="color: #fff;" target="_blank">stuff here</a></p>
</div>
</div>
<!-- credit. DO NOT DELETE OR MOVE. you may change the *color*, but you may NOT move or delete this credit. if you remove credit, i will blacklist you -->
<a class="text-muted tooltipster" title="code" data-placement="right" href="https://toyhou.se/tiisanes" target="blank_"><i class="fas fa-code pull-right m-2" style="color: #94cbe3;"></i></a>
</div>
</div>
<!--- wassup? you made it to the end :D
----- i hope you read my TOS!
----- it's linked in the description of this code's TH profile
----- if you need any help regarding this code, feel free to DM me ^^
----- i'm always down to give advice <3
----->