fight of the art
created by:sunxrice
Mixed ColorsHTMLMiscellaneous
Copy
<!--
fight of the art
by sunxrice
accents -
color : #877feb
icon : fad fa-stars
styles -
heading : font-weight:500; letter-spacing:2
icons -
wanted / preferred : fa-square-heart text-primary
yes / ok / allowed : fa-square-check text-success
friends only : fa-square-user text-secondary
maybe / depends : fa-square-minus text-warning
ask before drawing : fa-square-question text-info
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!
-->
<!-- key -->
<div class="bg-faded p-3 m-5">
<p class="text-center mb-0" style="font-size:1.2em; font-weight:500; letter-spacing:2">symbol key</p>
<p class="mb-2 text-center text-muted">hover over <i class="fas fa-circle-info"></i> icons for info</p>
<ul class="fa-ul card rounded-0 px-3 py-2 m-0 flex-column flex-md-row justify-content-between">
<!-- list - symbol key -->
<!-- wanted / preferred -->
<li><span class="far mr-2
fa-square-heart text-primary
"></span> most wanted
</li>
<!-- ok / allowed -->
<li><span class="far mr-2
fa-square-check text-success
"></span> yes / allowed
</li>
<!-- friends only -->
<li><span class="far mr-2
fa-square-user text-secondary
"></span> friends only
</li>
<!-- maybe / depends -->
<li><span class="far mr-2
fa-square-minus text-warning
"></span> depends
</li>
<!-- ask before drawing -->
<li><span class="far mr-2
fa-square-question text-info
"></span> ask
</li>
<!-- not allowed -->
<li><span class="far mr-2
fa-square-xmark text-danger
"></span> no / not allowed
</li>
<!-- default / blank -->
<li><span class="far mr-2
fa-square text-body
"></span> blank
</li>
<!-- /list -->
</ul>
</div>
<!-- /key -->
<!-- card -->
<div class="container bg-faded p-3 my-5" style="max-width:700px">
<!-- info -->
<div class="row">
<!-- column L -->
<div class="col-sm-4 text-center">
<!-- icon -->
<img class="w-75 my-2" style="border:5px double #877feb" src="imglink" alt="">
<!-- current / most recent team -->
<p style="font-size:1.2em; font-weight:500; letter-spacing:2">
<i class="fad fa-stars" style="color:#877feb"></i>
TEAM
<span style="color:#877feb">
TEAMNAME<i>!</i>
</span>
</p>
<hr class="d-sm-none">
</div>
<!-- /column -->
<!-- column M -->
<div class="col-sm-4">
<!-- username -->
<p class="my-0 text-center" style="font-size:1.2em; font-weight:500; letter-spacing:2">
<a style="color:#877feb"
href="aflink">
username
</a>
<i class="fad fa-stars" style="color:#877feb"></i>
</p>
<!-- about -->
<p class="text-center text-muted">short description.</p>
<hr>
<!-- i attack -->
<p class="my-1">
<span style="color:#877feb; font-weight:500; letter-spacing:2">i attack...</span>
people / characters you attack
</p>
<!-- might try / depends -->
<p class="my-1">
<span style="color:#877feb; font-weight:500; letter-spacing:2">i might try...</span>
characters you might try
</p>
<!-- won't do -->
<p class="my-1">
<span style="color:#877feb; font-weight:500; letter-spacing:2">i won't attack...</span>
characters you won't attack
</p>
<hr class="d-sm-none">
</div>
<!-- /column -->
<!-- column R -->
<div class="col-sm-4">
<p class="my-1" style="color:#877feb; font-weight:500; letter-spacing:2">i do...</p>
<ul class="fa-ul ml-2 my-1">
<!-- list - i do... -->
<!-- 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>
<!-- revenge chains -->
<li><span class="far mr-2
fa-square text-body
"></span>revenge chains
</li>
<!-- 2d art / illust -->
<li><span class="far mr-2
fa-square text-body
"></span>2D art
</li>
<!-- 3d models -->
<li><span class="far mr-2
fa-square text-body
"></span>3D models
</li>
<!-- animations -->
<li><span class="far mr-2
fa-square text-body
"></span>animation
</li>
<!-- crafts -->
<li><span class="far mr-2
fa-square text-body
"></span>crafts
</li>
<!-- /list - add more above this line -->
</ul>
<hr>
<!-- teams - https://toyhou.se/27847531.art-fight-stamps
copy and paste the <img>! remember to replace src and alt
-->
<p class="text-center">
<img src="https://file.garden/ZT2StWKGxCOellbN/artfight/stardust.png" alt="team stardust 2024">
</p>
<!-- /teams -->
</div>
<!-- /column -->
</div>
<!-- /info -->
<hr>
<!-- featured / fave characters -->
<div>
<p class="my-1 text-center" style="color:#877feb; font-size:1.2em; font-weight:500; letter-spacing:2">
featured characters
</p>
<div class="row justify-content-center my-1">
<!-- characters -->
<!-- character -->
<div class="col-auto m-1 p-0" style="height:125px; width:125px;
background-image:url(imglink);
background-size:cover; background-position:center">
<a class="btn border-0 rounded-0 h-100 w-100 text-light"
href="charlink"></a>
</div>
<!-- /character -->
<!-- character -->
<div class="col-auto m-1 p-0" style="height:125px; width:125px;
background-image:url(imglink);
background-size:cover; background-position:center">
<a class="btn border-0 rounded-0 h-100 w-100 text-light"
href="charlink"></a>
</div>
<!-- /character -->
<!-- character -->
<div class="col-auto m-1 p-0" style="height:125px; width:125px;
background-image:url(imglink);
background-size:cover; background-position:center">
<a class="btn border-0 rounded-0 h-100 w-100 text-light"
href="charlink"></a>
</div>
<!-- /character -->
<!-- character -->
<div class="col-auto m-1 p-0" style="height:125px; width:125px;
background-image:url(imglink);
background-size:cover; background-position:center">
<a class="btn border-0 rounded-0 h-100 w-100 text-light"
href="charlink"></a>
</div>
<!-- /character -->
<!-- /characters -->
</div>
</div>
<!-- /featured -->
<!-- types of characters - this list uses the character types on the official artfight id cards. feel free to add/remove/adjust as needed! -->
<div>
<ul class="fa-ul card rounded-0 px-3 py-2 mx-0 my-3 flex-column flex-md-row justify-content-between">
<li style="color:#877feb; font-weight:500; letter-spacing:2">i have...</li>
<!-- list - types of characters -->
<!-- human -->
<li><span class="far mr-2
fa-square text-body
"></span> human
</li>
<!-- feral -->
<li><span class="far mr-2
fa-square text-body
"></span> feral
</li>
<!-- anthro -->
<li><span class="far mr-2
fa-square text-body
"></span> anthro
</li>
<!-- monster -->
<li><span class="far mr-2
fa-square text-body
"></span> monster
</li>
<!-- worm -->
<li><span class="far mr-2
fa-square text-body
"></span> worm
</li>
<!-- mech -->
<li><span class="far mr-2
fa-square text-body
"></span> mech
</li>
<!-- /list - add more above this line -->
</ul>
</div>
<!-- /types -->
<!-- credit -->
<p class="text-center"><a class="far fa-sun-haze btn btn-outline-secondary border-0 p-2 m-2 tooltipster" style="color:#877feb" title="code by sunxrice" href="https://toyhou.se/31237379.fight-of-the-art"></a></p>
</div>
<!-- /card -->
<!-- wishlist -->
<div class="container bg-faded p-3 my-5" style="max-width:800px">
<p class="mt-1 mb-0 text-center" style="font-size:1.2em; font-weight:500; letter-spacing:2">
<span style="color:#877feb">name</span>'s
artfight wishlist!
<i class="fad fa-stars" style="color:#877feb"></i>
</p>
<p class="mb-0 text-center text-muted">short description.</p>
<hr>
<div class="row">
<!-- wishlist -->
<div class="col-sm-4">
<!-- general -->
<p class="my-1 text-center" style="color:#877feb; font-size:1.2em; font-weight:500; letter-spacing:2">
general
</p>
<ul class="my-1">
<!-- list - general wishlist -->
<li>list the general things you want here.</li>
<li>oh btw Nothing in this code scrolls. absolutely nothing.</li>
<li>content</li>
<!-- /list - add more above this line -->
</ul>
<!-- /general -->
<!-- if you only want one list, remove everything from this comment until the one that says '/scenes' (with the slash), keep the <hr class="d-sm-none">. -->
<hr>
<!-- scenes -->
<p class="my-1 text-center" style="color:#877feb; font-size:1.2em; font-weight:500; letter-spacing:2">
scenes
</p>
<ul class="my-1">
<!-- list - specific scenes -->
<li>list specific scenes you want art of. "attack ideas" if you will.</li>
<li>honestly do whatever you want i don't know what this should be. feel free to remove this part, there are instructions for that in the code.</li>
<li>content</li>
<!-- /list - add more above this line -->
</ul>
<!-- /scenes -->
<hr class="d-sm-none">
</div>
<!-- /wishlist -->
<!-- ships -->
<div class="col-sm-8">
<p class="my-1 text-center" style="color:#877feb; font-size:1.2em; font-weight:500; letter-spacing:2">
relationships
</p>
<div class="card rounded-0 p-2 m-0 text-center">
<p>
<!-- type of interaction - key
"type of interaction" as in positive, negative, romantic, platonic... the ones in the template are just suggestions, feel free to write your own.
for this one, you need to replace both badge-color and fa-icon!
default : badge-default | fa-circle
preferred : badge-primary | fa-star
allowed : badge-success | fa-check
not allowed : badge-danger | fa-xmark
-->
<span class="badge badge-pill badge-primary">
preferred
<i class="far fa-star"></i>
</span>
<span class="badge badge-pill badge-success">
allowed
<i class="far fa-check"></i>
</span>
<span class="badge badge-pill badge-danger">
not allowed
<i class="far fa-xmark"></i>
</span>
<span class="badge badge-pill badge-default">
default
<i class="far fa-circle"></i>
</span>
<!-- /type -->
</p>
</div>
<!-- ships -->
<div class="row no-gutters justify-content-center text-center">
<!-- ship -->
<div class="col-sm-6 p-2">
<!-- image -->
<div class="card rounded-0" style="height:125px;
background-image:url(imglink);
background-size:cover; background-position:center"></div>
<!-- characters - copy and paste the <a>! -->
<p class="mt-1 mb-0">
<a class="btn px-2 py-1 my-1" style="color:#877feb; border:2px solid #877feb" href="charlink">name</a>
<a class="btn px-2 py-1 my-1" style="color:#877feb; border:2px solid #877feb" href="charlink">name</a>
</p>
<!-- /characters -->
<!-- type of interaction -->
<p class="mt-0 mb-1">
<!-- type -->
<span class="badge badge-pill badge-default">
romantic
<i class="far fa-circle"></i>
</span>
<!-- type -->
<span class="badge badge-pill badge-default">
platonic
<i class="far fa-circle"></i>
</span>
<!-- type -->
<span class="badge badge-pill badge-default">
negative
<i class="far fa-circle"></i>
</span>
</p>
<!-- /type -->
<p>as always placeholder text is a suggestion. feel free to change things</p>
</div>
<!-- /ship -->
<!-- ship -->
<div class="col-sm-6 p-2">
<!-- image -->
<div class="card rounded-0" style="height:125px;
background-image:url(imglink);
background-size:cover; background-position:center"></div>
<!-- characters - copy and paste the <a>! -->
<p class="mt-1 mb-0">
<a class="btn px-2 py-1 my-1" style="color:#877feb; border:2px solid #877feb" href="charlink">name</a>
<a class="btn px-2 py-1 my-1" style="color:#877feb; border:2px solid #877feb" href="charlink">name</a>
</p>
<!-- /characters -->
<!-- type of interaction -->
<p class="mt-0 mb-1">
<!-- type -->
<span class="badge badge-pill badge-default">
romantic
<i class="far fa-circle"></i>
</span>
<!-- type -->
<span class="badge badge-pill badge-default">
platonic
<i class="far fa-circle"></i>
</span>
<!-- type -->
<span class="badge badge-pill badge-default">
negative
<i class="far fa-circle"></i>
</span>
</p>
<!-- /type -->
<p>i recommend keeping this short but you can make it long if you want. note that because nothing scrolls, it's going to look very very long. just thought that's something i should mention</p>
</div>
<!-- /ship -->
<!-- ship -->
<div class="col-sm-6 p-2">
<!-- image -->
<div class="card rounded-0" style="height:125px;
background-image:url(imglink);
background-size:cover; background-position:center"></div>
<!-- characters - copy and paste the <a>! -->
<p class="mt-1 mb-0">
<a class="btn px-2 py-1 my-1" style="color:#877feb; border:2px solid #877feb" href="charlink">name</a>
<a class="btn px-2 py-1 my-1" style="color:#877feb; border:2px solid #877feb" href="charlink">name</a>
</p>
<!-- /characters -->
<!-- type of interaction -->
<p class="mt-0 mb-1">
<!-- type -->
<span class="badge badge-pill badge-default">
romantic
<i class="far fa-circle"></i>
</span>
<!-- type -->
<span class="badge badge-pill badge-default">
platonic
<i class="far fa-circle"></i>
</span>
<!-- type -->
<span class="badge badge-pill badge-default">
negative
<i class="far fa-circle"></i>
</span>
</p>
<!-- /type -->
<p>also this automatically centers on desktop if there's an odd number of them</p>
</div>
<!-- /ship -->
<!-- add more above this line -->
</div>
<!-- /ships -->
</div>
<!-- /ships -->
</div>
<!-- credit -->
<p class="text-center"><a class="far fa-sun-haze btn btn-outline-secondary border-0 p-2 m-2 tooltipster" style="color:#877feb" title="code by sunxrice" href="https://toyhou.se/31237379.fight-of-the-art"></a></p>
</div>
<!-- /wishlist -->
<!-- permissions -->
<div class="container bg-faded p-3 my-5" style="max-width:800px">
<p class="mt-1 mb-0 text-center" style="font-size:1.2em; font-weight:500; letter-spacing:2">
<span style="color:#877feb">name</span>'s
artfight permissions!
<i class="fad fa-stars" style="color:#877feb"></i>
</p>
<p class="mb-0 text-center text-muted">short description. (this template assumes that 100% lore accuracy is most wanted, which is why it's not included)</p>
<hr>
<div class="row">
<!-- column L - general -->
<div class="col-sm-4">
<!-- types of art -->
<p class="my-1 text-center" style="color:#877feb; font-size:1.2em; font-weight:500; letter-spacing:2">
art types
</p>
<ul class="fa-ul ml-2 my-1">
<!-- list - art types -->
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>illustration / 2D art
<i class="fas fa-circle-info text-muted tooltipster" title="info"></i>
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>3D models
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>animation
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>physical items
</li>
<!-- /list - add more above this line -->
</ul>
<!-- /types -->
<hr>
<!-- attacks -->
<p class="my-1 text-center" style="color:#877feb; font-size:1.2em; font-weight:500; letter-spacing:2">
my art of your characters
</p>
<ul class="fa-ul ml-2 my-1">
<!-- list - attacks -->
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>i post on my social media
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>you can repost on toyhouse / ref sheet sites
<i class="fas fa-circle-info text-muted tooltipster" title="specify how you want to be credited"></i>
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>you can repost on social media
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>you can use as icon / banner / decor
</li>
<!-- /list - add more above this line -->
</ul>
<!-- /attacks -->
<hr>
<!-- defenses - some people don't want their characters posted outside of artfight, if you're one of those people this list is for you -->
<p class="my-1 text-center" style="color:#877feb; font-size:1.2em; font-weight:500; letter-spacing:2">
your art of my characters
</p>
<ul class="fa-ul ml-2 my-1">
<!-- list - defenses -->
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>you can post on your social media
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>i repost on toyhouse / ref sheet site
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>i repost on social media
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>i use as icon / banner / decor
</li>
<!-- /list - add more above this line -->
</ul>
<!-- /defenses -->
<hr class="d-sm-none">
</div>
<!-- /column L -->
<!-- column M - content -->
<div class="col-sm-4">
<!-- themes -->
<p class="my-1 text-center" style="color:#877feb; font-size:1.2em; font-weight:500; letter-spacing:2">
themes
</p>
<ul class="fa-ul ml-2 my-1">
<!-- list - themes -->
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>moderate gore
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>extreme gore
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>body horror
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>moderate nudity
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>extreme nudity
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>suggestive themes
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>eyestrain
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>sensitive content
</li>
<!-- item -->
<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>deviation from canon
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>alternate universe
</li>
<!-- /list - add more above this line -->
</ul>
<!-- /themes -->
<hr>
<!-- interactions -->
<p class="my-1 text-center" style="color:#877feb; font-size:1.2em; font-weight:500; letter-spacing:2">
non-canon interactions
</p>
<ul class="fa-ul ml-2 my-1">
<!-- list - interactions -->
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>same story (platonic)
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>same story (romantic)
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>different stories (platonic)
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>different stories (romantic)
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>with others' characters (platonic)
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>with others' characters (romantic)
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>mass attack
</li>
<!-- /list - add more above this line -->
</ul>
<!-- /interactions -->
<hr class="d-sm-none">
</div>
<!-- /column M -->
<!-- column R - changes -->
<div class="col-sm-4">
<!-- changes -->
<p class="my-1 text-center" style="color:#877feb; font-size:1.2em; font-weight:500; letter-spacing:2">
changes
</p>
<ul class="fa-ul ml-2 my-1">
<!-- list - changes -->
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>clothing
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>hairstyle
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>gender presentation
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>clothing colors
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>body colors
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>body type
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>race / ethnicity
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>species
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>simplify / remove detail
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>complexify / add detail
</li>
<!-- /list - add more above this line -->
</ul>
<!-- /changes -->
<hr>
<!-- other -->
<p class="my-1 text-center" style="color:#877feb; font-size:1.2em; font-weight:500; letter-spacing:2">
other
</p>
<ul class="fa-ul ml-2 my-1">
<!-- list - other -->
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>add other permissions that don't fit the lists above here
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>item
</li>
<!-- item -->
<li><span class="far mr-2
fa-square text-body
"></span>item
</li>
<!-- /list - add more above this line -->
</ul>
<!-- /other -->
</div>
<!-- /column R -->
</div>
<!-- credit -->
<p class="text-center"><a class="far fa-sun-haze btn btn-outline-secondary border-0 p-2 m-2 tooltipster" style="color:#877feb" title="code by sunxrice" href="https://toyhou.se/31237379.fight-of-the-art"></a></p>
</div>
<!-- /permissions -->
<!-- end -->