Profile
[F2U CUSTOM] FOXTOPI PROFILE
the old version of the code! i don't recommend using it anymore, as it's quiet awkward and clunky (especially for foxtopi with detailed lore). i'm just keeping it here for archival purposes. the character in the preview is my boy takako!
<!--
[F2U CUSTOM] FOXTOPI PROFILE - artbymaxm
TOU: (see full here: https://toyhou.se/~bulletins/514671.terms-of-use)
> TURN WYSIWIG OFF IN SETTINGS AND TURN ON CODE EDITOR BEFORE USING THIS THEME!
> DO NOT REMOVE OR MOVE THE CREDIT AND DO NOT REDISTRIBUTE
> use playhouse (https://cheeriko.github.io/playhouse/character.html) or circlejourney (https://th.circlejourney.net/) to see the changes you make in real time
> i've done my best to make this easy to understand and edit, but if you have any questions (that google isn't answering), feel free to message me!
DONATE: https://ko-fi.com/artbymaxm
-->
<!-- OVERALL CONTAINER -->
<div class="container mx-auto p-5" style="background-color: #000;">
<!-- START LAYOUT -->
<!-- ROW 2 -->
<div class="row">
<!-- COLUMN 1 - BASIC INFO -->
<!-- NAME AND IMAGE -->
<div class="col-sm mr-1 my-auto" style="background-image: linear-gradient(
45deg, #260000 0%, #000000 100%);
background-position: 0% 0%;
background-repeat: repeat;
background-size: cover;
border-style: solid;
border-color: #9c0000;
border-width: 1px;
border-radius: 1rem;
height: fit-content">
<h1 class="text-center m-2" style="text-transform: uppercase; font-weight: bolder; letter-spacing: 2px; font-size: 2.5em; color: #ff0000;">name</h1>
<div class="tab-content">
<div class="tab-pane fade in active show"
data-toggle="tab" id="img-one">
<img class="mt-3" src="URL">
</div>
<div class="tab-pane fade p-2 flex-sm-column" data-toggle="tab" id="img-two">
<img class="mt-3" src="URL">
</div>
</div>
<!-- NAV -->
<ul class="nav justify-content-center mt-3">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" title="standing form" href="#img-one" style="color: #ff0000;">
<i class="fas fa-user mx-2"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" title="feral form" href="#img-two" style="color: #ff0000;">
<i class="fas fa-paw mx-2"></i></a>
</li>
</ul>
<!-- INFO TABLE -->
<table class="table border-0" style="background: transparent;">
<tbody>
<tr>
<td style="color: #ff0000;">
<i class="far fa-birthday-cake mr-2"></i>
AGE
</td>
<td class="text-right" style="color: #fff;">
xx
</td>
</tr>
<tr>
<td style="color: #ff0000;">
<i class="far fa-transgender-alt mr-2"></i>
PRONOUNS
</td>
<td class="text-right" style="color: #fff;">
pro/nouns
</td>
</tr>
<tr>
<td style="color: #ff0000;">
<i class="far fa-dna mr-2"></i>
TYPE
</td>
<td class="text-right" style="color: #fff;">
xx
</td>
</tr>
<tr>
<td style="color: #ff0000;">
<i class="far fa-sparkles mr-2"></i>
RARITY
</td>
<td class="text-right" style="color: #fff;">
xx
</td>
</tr>
<tr>
<td style="color: #ff0000;">
<i class="far fa-address-book mr-2"></i>
MASTERLIST
</td>
<td class="text-right" style="color: #fff;">
<a href="URL" style="color: #9c0000;">000</a>
</td>
</tr>
<tr>
<td style="color: #ff0000;">
<i class="far fa-palette mr-2"></i>
DESIGNER
</td>
<td class="text-right" style="color: #fff;">
xx
</td>
</tr>
<tr>
<td style="color: #ff0000;">
<i class="far fa-money-bill mr-2"></i>
WORTH
</td>
<td class="text-right" style="color: #fff;">
xx
</td>
</tr>
</tbody>
</table>
<!-- END INFO TABLE -->
</div>
<!-- END COLUMN 1 -->
<!-- COLUMN 2 - EXTRA INFO -->
<div class="col-sm ml-3 p-3" style="background-image: linear-gradient(
45deg, #260000 0%, #000000 100%);
background-position: 0% 0%;
background-repeat: repeat;
background-size: cover;
border-style: solid;
border-color: #9c0000;
border-width: 1px;
border-radius: 1rem;
color: #fff;">
<!-- STORY -->
<h2 class="mb-3" style="letter-spacing: 1px; color: #ff0000;font-size: 2em;">
<i class="fas fa-book"></i> STORY
</h2>
<h3 style="letter-spacing: 1px; color: #9c0000;font-size: 1.5em;">
<i class="far fa-theater-masks mr-2"></i>
PERSONALITY
</h3>
<p style="color: #fff;">
info here
</p>
<h3 style="letter-spacing: 1px; color: #9c0000;font-size: 1.5em;">
<i class="far fa-bookmark mr-2"></i>
HISTORY
</h3>
<p style="color: #fff;">
info here
</p>
<!-- END STORY -->
<!-- RELATIONSHIPS -->
<h2 class="my-3" style="letter-spacing: 1px; color: #ff0000;font-size: 2em;">
<i class="fas fa-user-friends"></i> RELATIONSHIPS
</h2>
<!-- images should be 200px square. i just use the icons from toyhouse! you can change the fontawesome icons to fit their relationship -->
<img src="URL" class="mb-3" style="border-radius: 10px; margin: auto; display: block; height: 200px;">
<h3 style="color: #9c0000; font-weight: bold; font-size: 1.5em; text-align: center;">
<a href="URL" style="color: #9c0000; letter-spacing: 2px;">
<i class="fas fa-heart"></i> NAME
</a>
</h3>
<p style="color: #fff;">
info
</p>
<img src="URL" class="mb-3" style="border-radius: 10px; margin: auto; display: block; height: 200px;">
<h3 style="color: #9c0000; font-weight: bold; font-size: 1.5em; text-align: center;">
<a href="URL" style="color: #9c0000; letter-spacing: 2px;">
<i class="fas fa-heart-broken"></i> NAME
</a>
</h3>
<p style="color: #fff;">
info
</p>
<img src="URL" class="mb-3" style="border-radius: 10px; margin: auto; display: block; height: 200px;">
<h3 style="color: #9c0000; font-weight: bold; font-size: 1.5em; text-align: center;">
<a href="URL" style="color: #9c0000; letter-spacing: 2px;">
<i class="fas fa-question"></i> NAME
</a>
</h3>
<p style="color: #fff;">
info
</p>
<!-- END RELATIONSHIPS -->
</div>
<!-- END COLUMN 2 -->
</div>
<!-- END ROW 2 -->
<!-- CREDIT - DO NOT REMOVE! -->
<div class="col justify-content-end mt-2">
<a href="https://toyhou.se/artbymaxm"
data-toggle="tooltip" title="coded by artbymaxm"><i class="fas fa-code" style="color: #ff0000;"></i></a>
</div>
</div>
<!-- END CONTAINER -->
<!-- END ALL -->