and another one
created by:sunxrice
HTMLMixed ColorsBootstrapCharacterMiscellaneous
Copy
<!--
and another one!
by sunxrice
accents -
color : #d35e88
styles -
heading : font-weight:500; letter-spacing:2
icons -
wanted / preferred : fa-square-heart text-primary
yes / ok / allowed : fa-square-check text-success
allowed not pref : fa-square-minus text-warning
depends / ask : fa-square-question text-info
friends only : fa-square-user text-secondary
no / not allowed : fa-square-xmark text-danger
default / blank : fa-square text-body
links -
artfight profile : aflink
characters : charlink [ can be either af or th profile, up to you ]
image : imglink
hover info - insert anywhere that needs more explanation
<i class="fas fa-circle-info text-muted tooltipster" title="info"></i>
use find and replace!
-->
<div class="container">
<!-- section heading - wishlist -->
<div class="bg-faded p-3 mx-3 mb-2 text-center">
<!-- heading -->
<p class="mb-0 text-center" style="color:#d35e88; font-size:1.5em; font-weight:500; letter-spacing:2">
name's artfight info
</p>
<!-- /heading -->
<!-- blurb -->
<p class="mb-2 text-muted font-italic">
blurb. write something here.
</p>
<!-- /blurb -->
<div class="card p-2">
<p>
<span style="font-weight:500">i have:</span>
human, anthro, feral etc etc. what do you have
</p>
</div>
</div>
<!-- /section heading -->
<div class="row">
<!-- sidebar -->
<div class="col-sm-3 bg-faded p-3 mb-3">
<div class="sticky-top py-3">
<!-- basic info -->
<ul class="list-unstyled">
<!-- info - username -->
<li>
<span style="font-weight:500">artfight username:</span>
<a style="color:#d35e88" href="aflink">
username
</a>
</li>
<!-- /info -->
<!-- info - team -->
<li>
<span style="font-weight:500">team:</span>
team
</li>
<!-- /info -->
<!-- info - art -->
<li>
<span style="font-weight:500">i do:</span>
what art you do (2d, 3d, animation, etc.)
</li>
<!-- /info -->
</ul>
<!-- /basic info -->
<ul class="fa-ul ml-0">
<!-- friendly fire -->
<li><span class="far mr-2
fa-square text-body
"></span>friendly fire
</li>
<!-- revenge -->
<li><span class="far mr-2
fa-square text-body
"></span>revenge
</li>
<!-- chains -->
<li><span class="far mr-2
fa-square text-body
"></span>revenge chains
</li>
</ul>
<!-- past teams -->
<p class="text-center">
<span class="sr-only">
past teams:
</span>
<img src="https://i.imgur.com/JWN47KP.png" alt="team stardust 2024">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/102884241_sVQavpGR6QTLI0u.png" alt="team crystals 2025">
<!-- add more images above this line -->
</p>
<!-- /past teams -->
<!-- symbol key -->
<div class="card p-2 my-3">
<ul class="fa-ul ml-2 my-0">
<!-- wanted / preferred -->
<li><span class="mr-2 far
fa-square-heart text-primary
"></span>preferred
</li>
<!-- yes / ok / allowed -->
<li><span class="mr-2 far
fa-square-check text-success
"></span>allowed
</li>
<!-- allowed not preferred -->
<li><span class="mr-2 far
fa-square-minus text-warning
"></span>allowed, not preferred
</li>
<!-- depends / ask before drawing -->
<li><span class="mr-2 far
fa-square-question text-info
"></span>ask / depends
</li>
<!-- friends only -->
<li><span class="mr-2 far
fa-square-user text-secondary
"></span>friends only
</li>
<!-- no / not allowed -->
<li><span class="mr-2 far
fa-square-xmark text-danger
"></span>not allowed
</li>
</ul>
</div>
<div class="card p-2 my-3">
<p class="text-center text-muted font-italic">
hover over <i class="fas fa-circle-info text-muted tooltipster" title="hover info"></i> icons for info
</p>
</div>
<!-- /symbol key -->
<!-- credit -->
<p class="justify-content-center">
<a class="far fa-sun-haze fa-width-auto btn btn-outline-secondary text-primary border-0 p-2 tooltipster" style="color:#d35e88; text-decoration:none" title="code by sunxrice" href="https://toyhou.se/37240496.and-another-one"></a>
</p>
<!-- /credit -->
</div>
</div>
<!-- /sidebar -->
<!-- content -->
<div class="col-sm-9 px-4">
<!-- more basic info -->
<div class="row">
<!-- to attack -->
<div class="col-md-4 px-1 mb-2">
<div class="bg-faded p-3 h-100">
<!-- heading -->
<p class="mb-2 text-center" style="color:#d35e88; font-size:1.2em; font-weight:500; letter-spacing:2">
i attack...
</p>
<!-- /heading -->
<ul class="ml-n3 my-1">
<!-- list - to attack -->
<li>human</li>
<li>anthro</li>
<li>feral</li>
<li>monster</li>
<li>worm</li>
<li>mech</li>
<!-- /list - add more above this line-->
</ul>
</div>
</div>
<!-- /to attack -->
<!-- to try -->
<div class="col-md-4 px-1 mb-2">
<div class="bg-faded p-3 h-100">
<!-- heading -->
<p class="mb-2 text-center" style="color:#d35e88; font-size:1.2em; font-weight:500; letter-spacing:2">
i might try...
</p>
<!-- /heading -->
<ul class="ml-n3 my-1">
<!-- list - to try -->
<li>content</li>
<!-- /list - add more above this line-->
</ul>
</div>
</div>
<!-- /to try -->
<!-- to avoid -->
<div class="col-md-4 px-1 mb-2">
<div class="bg-faded p-3 h-100">
<!-- heading -->
<p class="mb-2 text-center" style="color:#d35e88; font-size:1.2em; font-weight:500; letter-spacing:2">
i avoid...
</p>
<!-- /heading -->
<ul class="ml-n3 my-1">
<!-- list - to avoid -->
<li>content</li>
<!-- /list - add more above this line-->
</ul>
</div>
</div>
<!-- /to avoid -->
</div>
<!-- /more basic info -->
<!-- section heading - wishlist -->
<div class="bg-faded p-3 mx-3 mb-2 text-center">
<!-- heading -->
<p class="mb-0 text-center" style="color:#d35e88; font-size:1.5em; font-weight:500; letter-spacing:2">
wishlist
</p>
<!-- /heading -->
<!-- blurb -->
<p class="text-muted font-italic">
not required, only for ideas (or something like that. idk. write a blurb here)
</p>
<!-- /blurb -->
</div>
<!-- /section heading -->
<!-- wishlist -->
<div class="row">
<!-- characters -->
<div class="col-lg-6 px-1 mb-2">
<div class="bg-faded p-3 h-100">
<!-- heading -->
<p class="mb-2 text-center" style="color:#d35e88; font-size:1.2em; font-weight:500; letter-spacing:2">
characters
</p>
<!-- /heading -->
<div class="row px-2 justify-content-center">
<!-- character -->
<div class="col-6 p-2">
<div class="card">
<!-- image -->
<img class="card-img-top" src="imglink" alt="">
<!-- content -->
<div class="card-body p-2 text-center">
<!-- character name -->
<p class="mb-1" style="font-size:1.2em; font-weight:500; letter-spacing:2">
character
</p>
<!-- buttons -->
<p>
<!-- toyhouse -->
<a class="btn btn-outline-secondary px-2 py-1 m-1" style="color:#d35e88; border-color:#d35e88"
href="charlink">toyhouse
</a>
<!-- artfight -->
<a class="btn btn-outline-secondary px-2 py-1 m-1" style="color:#d35e88; border-color:#d35e88"
href="charlink">artfight
</a>
</p>
<!-- /buttons -->
</div>
<!-- /content -->
</div>
</div>
<!-- /character -->
<!-- character -->
<div class="col-6 p-2">
<div class="card">
<!-- image -->
<img class="card-img-top" src="imglink" alt="">
<!-- content -->
<div class="card-body p-2 text-center">
<!-- character name -->
<p class="mb-1" style="font-size:1.2em; font-weight:500; letter-spacing:2">
character
</p>
<!-- buttons -->
<p>
<!-- toyhouse -->
<a class="btn btn-outline-secondary px-2 py-1 m-1" style="color:#d35e88; border-color:#d35e88"
href="charlink">toyhouse
</a>
<!-- artfight -->
<a class="btn btn-outline-secondary px-2 py-1 m-1" style="color:#d35e88; border-color:#d35e88"
href="charlink">artfight
</a>
</p>
<!-- /buttons -->
</div>
<!-- /content -->
</div>
</div>
<!-- /character -->
<!-- add more above this line -->
</div>
</div>
</div>
<!-- /characters -->
<!-- relationships -->
<div class="col-lg-6 px-1 mb-2">
<div class="bg-faded p-3 h-100">
<!-- heading -->
<p class="mb-2 text-center" style="color:#d35e88; font-size:1.2em; font-weight:500; letter-spacing:2">
relationships
</p>
<!-- /heading -->
<!-- relationship -->
<div class="card mb-2">
<div class="row no-gutters">
<!-- image -->
<div class="col-4" style="
background-image:url(imglink);
background-position:center; background-size:cover"></div>
<!-- content -->
<div class="col-8 px-3 py-2">
<!-- characters -->
<p class="mb-1" style="font-size:1.2em; font-weight:500; letter-spacing:2">
<a style="color:#d35e88" href="charlink">character</a> &
<a style="color:#d35e88" href="charlink">character</a>
</p>
<!-- /characters -->
<p>describe a little</p>
<!-- ship prefs -->
<ul class="list-inline fa-ul ml-0 my-1">
<!-- platonic -->
<li class="list-inline-item"><span class="far mr-2
fa-square text-body
"></span>platonic
</li>
<!-- romantic -->
<li class="list-inline-item"><span class="far mr-2
fa-square text-body
"></span>romantic
</li>
<!-- negative -->
<li class="list-inline-item"><span class="far mr-2
fa-square text-body
"></span>negative
</li>
</ul>
<!-- /ship prefs -->
</div>
</div>
</div>
<!-- /relationship -->
<!-- relationship -->
<div class="card mb-2">
<div class="row no-gutters">
<!-- image -->
<div class="col-4" style="
background-image:url(imglink);
background-position:center; background-size:cover"></div>
<!-- content -->
<div class="col-8 px-3 py-2">
<!-- characters -->
<p class="mb-1" style="font-size:1.2em; font-weight:500; letter-spacing:2">
<a style="color:#d35e88" href="charlink">character</a>,
<a style="color:#d35e88" href="charlink">character</a>,
<a style="color:#d35e88" href="charlink">character</a>,
<a style="color:#d35e88" href="charlink">character</a>
</p>
<!-- /characters -->
<p>put as many characters and relationships here as you want</p>
<!-- ship prefs -->
<ul class="list-inline fa-ul ml-0 my-1">
<!-- platonic -->
<li class="list-inline-item"><span class="far mr-2
fa-square text-body
"></span>platonic
</li>
<!-- romantic -->
<li class="list-inline-item"><span class="far mr-2
fa-square text-body
"></span>romantic
</li>
<!-- negative -->
<li class="list-inline-item"><span class="far mr-2
fa-square text-body
"></span>negative
</li>
</ul>
<!-- /ship prefs -->
</div>
</div>
</div>
<!-- /relationship -->
<!-- add more above this line -->
</div>
</div>
<!-- /relationships -->
<!-- scenes -->
<div class="col-md-6 px-1 mb-2">
<div class="bg-faded p-3 h-100">
<!-- heading -->
<p class="mb-2 text-center" style="color:#d35e88; font-size:1.2em; font-weight:500; letter-spacing:2">
scenes
</p>
<!-- /heading -->
<ul class="ml-n3 my-1">
<!-- list - scenes -->
<li>content</li>
<!-- /list - add more above this line-->
</ul>
</div>
</div>
<!-- /scenes -->
<!-- general -->
<div class="col-md-6 px-1 mb-2">
<div class="bg-faded p-3 h-100">
<!-- heading -->
<p class="mb-2 text-center" style="color:#d35e88; font-size:1.2em; font-weight:500; letter-spacing:2">
general
</p>
<!-- /heading -->
<ul class="ml-n3 my-1">
<!-- list - general -->
<li>content</li>
<!-- /list - add more above this line-->
</ul>
</div>
</div>
<!-- /general -->
</div>
<!-- /wishlist -->
<!-- section heading - permissions -->
<div class="bg-faded p-3 mx-3 mb-2 text-center">
<!-- heading -->
<p class="mb-0 text-center" style="color:#d35e88; font-size:1.5em; font-weight:500; letter-spacing:2">
permissions
</p>
<!-- /heading -->
<!-- blurb -->
<p class="text-muted font-italic">
applies to every character unless mentioned otherwise (or something like that. idk. write a blurb here)
</p>
<!-- /blurb -->
</div>
<!-- /section heading -->
<!-- permissions -->
<div class="row">
<!-- art types -->
<div class="col-md-6 px-1 mb-2">
<div class="bg-faded p-3 h-100">
<!-- heading -->
<p class="mb-2 text-center" style="color:#d35e88; font-size:1.2em; font-weight:500; letter-spacing:2">
art types
</p>
<!-- /heading -->
<ul class="fa-ul ml-2 my-1">
<!-- list - art types -->
<!-- illust trad -->
<li><span class="far mr-2
fa-square text-body
"></span>2D (traditional)
</li>
<!-- illust digi -->
<li><span class="far mr-2
fa-square text-body
"></span>2D (digital)
</li>
<!-- 3d -->
<li><span class="far mr-2
fa-square text-body
"></span>3D models
</li>
<!-- anim -->
<li><span class="far mr-2
fa-square text-body
"></span>animation
</li>
<!-- physical -->
<li><span class="far mr-2
fa-square text-body
"></span>physical items
</li>
<!-- cosplay -->
<li><span class="far mr-2
fa-square text-body
"></span>cosplay
</li>
<!-- etc -->
<li><span class="far mr-2
fa-square text-body
"></span>other not mentioned
</li>
<!-- /list - add more above this line-->
</ul>
</div>
</div>
<!-- /art types -->
<!-- themes & content -->
<div class="col-md-6 px-1 mb-2">
<div class="bg-faded p-3 h-100">
<!-- heading -->
<p class="mb-2 text-center" style="color:#d35e88; font-size:1.2em; font-weight:500; letter-spacing:2">
themes & content
</p>
<!-- /heading -->
<ul class="fa-ul ml-2 my-1">
<!-- list - themes & content -->
<!-- jokes -->
<li><span class="far mr-2
fa-square text-body
"></span>jokes / memes
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>blood
</li>
<!-- gore -->
<li><span class="far mr-2
fa-square text-body
"></span>gore
</li>
<!-- violence -->
<li><span class="far mr-2
fa-square text-body
"></span>violence
</li>
<!-- horror -->
<li><span class="far mr-2
fa-square text-body
"></span>horror
</li>
<!-- nudity -->
<li><span class="far mr-2
fa-square text-body
"></span>nudity
</li>
<!-- suggestive -->
<li><span class="far mr-2
fa-square text-body
"></span>suggestive
</li>
<!-- bright -->
<li><span class="far mr-2
fa-square text-body
"></span>bright colors
</li>
<!-- flash -->
<li><span class="far mr-2
fa-square text-body
"></span>flashing
</li>
<!-- etc -->
<li><span class="far mr-2
fa-square text-body
"></span>other not mentioned
</li>
<!-- /list - add more above this line-->
</ul>
</div>
</div>
<!-- /themes & content -->
<!-- character changes -->
<div class="col-md-6 px-1 mb-2">
<div class="bg-faded p-3 h-100">
<!-- heading -->
<p class="mb-2 text-center" style="color:#d35e88; font-size:1.2em; font-weight:500; letter-spacing:2">
character changes
</p>
<!-- /heading -->
<ul class="fa-ul ml-2 my-1">
<!-- list - character changes -->
<!-- clothing -->
<li><span class="far mr-2
fa-square text-body
"></span>clothing
</li>
<!-- hair -->
<li><span class="far mr-2
fa-square text-body
"></span>hairstyle
</li>
<!-- gender presentation -->
<li><span class="far mr-2
fa-square text-body
"></span>gender presentation
</li>
<!-- clothing colors -->
<li><span class="far mr-2
fa-square text-body
"></span>clothing colors
</li>
<!-- body colors -->
<li><span class="far mr-2
fa-square text-body
"></span>body colors
</li>
<!-- body type -->
<li><span class="far mr-2
fa-square text-body
"></span>body type
</li>
<!-- ethnicity -->
<li><span class="far mr-2
fa-square text-body
"></span>ethnicity / irl race
</li>
<!-- species -->
<li><span class="far mr-2
fa-square text-body
"></span>species / fantasy race
</li>
<!-- simplify -->
<li><span class="far mr-2
fa-square text-body
"></span>simplify / remove detail
</li>
<!-- complexify -->
<li><span class="far mr-2
fa-square text-body
"></span>complexify / add detail
</li>
<!-- ooc -->
<li><span class="far mr-2
fa-square text-body
"></span>out-of-character behavior
</li>
<!-- au -->
<li><span class="far mr-2
fa-square text-body
"></span>alternate universe
</li>
<!-- etc -->
<li><span class="far mr-2
fa-square text-body
"></span>other not mentioned
</li>
<!-- /list - add more above this line-->
</ul>
</div>
</div>
<!-- /character changes -->
<!-- other -->
<div class="col-md-6 px-1 mb-2">
<div class="bg-faded p-3 h-100">
<!-- heading -->
<p class="mb-2 text-center" style="color:#d35e88; font-size:1.2em; font-weight:500; letter-spacing:2">
other
</p>
<!-- /heading -->
<ul class="fa-ul ml-2 my-1">
<!-- list - other -->
<!-- crossover -->
<li><span class="far mr-2
fa-square text-body
"></span>crossover (my characters)
</li>
<!-- crossover w/ others -->
<li><span class="far mr-2
fa-square text-body
"></span>crossover (others' characters)
</li>
<!-- mass attacks -->
<li><span class="far mr-2
fa-square text-body
"></span>mass attacks
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>(etc, add whatever you need in these lists)
</li>
<!-- not mentioned -->
<li><span class="far mr-2
fa-square text-body
"></span>anything not mentioned
</li>
<!-- /list - add more above this line-->
</ul>
</div>
</div>
<!-- /other -->
</div>
<!-- /permissions -->
</div>
<!-- /content -->
</div>
</div>
<!-- end -->