[16] art fighter
created by:skysong
HTMLCustom ColorsCharacter
Copy
<!-----------------------------------------------------------------------------------------
A R T F I G H T E R
> default version
f2u code by skysong
c o l o r p a l e t t e
main #3862e1
accent 1 #7b9af4 (icons)
accent 2 #1d2c6e (top borders)
(ctrl + f to change)
r e s o u r c e s
icons https://fontawesome.com/
editing (TH) https://th.circlejourney.net/#
editing (AF) https://af.circlejourney.net/#
img hosting https://freeimage.host/
code link https://toyhou.se/39425504.16-art-fighter
things to edit (that aren't text)- if you're not customizing more- should be marked in brackets with instructions on what to change
-----------------------------------------------------------------------[ ART FIGHT NOTES ]--
- Art fight will automatically delete code that doesn't display properly onsite- this includes comments so I HIGHLY RECCOMEND using a live editor and/or saving the file with comments!
- Circlejourney has made an AF editor (linked above!) but at the moment its features are limited compared to the TH one (namely, color preview), so since the base code displays the same on both sites I personally would suggest just using the TH editor
- This code is still mobile friendly on art fight!
------------------------------------------------------------------------------------------->
<div class="mx-auto my-4" style="max-width:800px">
<!--------------------------------------------------------------- [ SECTION 1 | BASICS ] -->
<div class="row m-0">
<!--TITLE COL START-->
<div class="col-sm-5 p-0">
<div class="h-100 d-flex flex-column">
<!--TITLE-->
<div style="font-family:monospace; font-style:italic; font-weight:bold; font-size:30px; color:#3862e1">TEMPLATE</div>
<!--QUOTE-->
<div class="ml-4 mb-sm-0 mb-4"><p>
<!--ICON-->
<span style="color:#7b9af4"><i class="fa fa-sharp fa-quote-left"></i></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
<!--[ fa-quote-left | replace with your icon ]-->
</p></div>
<div class="flex-fill"></div>
<!--LINKS-->
<div class="mb-sm-0 mb-4">
<!--LINK 1-->
<a href="https://toyhou.se/" title="toyhouse" style="color:#3862e1; text-decoration:none">
<!--[ href="EDITHERE" | replace with your link ]-->
<i class="fa fa-sharp fa-house"></i>
<!--[ fa-house | replace with your icon ]-->
</a>
<!--LINK 2-->
<a href="https://open.spotify.com/" title="playlist" class="ml-1" style="color:#3862e1; text-decoration:none">
<i class="fa fa-sharp fa-music"></i>
<!--[ fa-music | replace with your icon ]-->
</a>
<!--LINK 3-->
<!--[ do not edit! ]-->
<a href="https://toyhou.se/39425504.16-art-fighter" title="code by sky" class="ml-1" style="color:#3862e1; text-decoration:none">
<i class="fa-light fa-sharp fa-clouds-sun"></i>
</a>
</div>
</div></div> <!--title col end-->
<!--BASICS COL START-->
<div class="col-sm ml-sm-2 p-0" style="border-radius:3px; border:1px solid #3862e1; margin:3px 0;">
<div class="p-3 card" style="border-radius:3px; border:1px solid #1d2c6e; margin: -5px 5px 5px -5px; min-height:200px;">
<!--FULL NAME-->
<div class="d-flex">
<!--ICON-->
<span style="color:#7b9af4">
<i class="fal fa-id-card fa-fw"></i>
</span>
<!--LABEL-->
<div class="ml-2" style="font-weight:bold; font-family:monospace">
<span style="background:#3862e1;">FULL NAME</span></div>
<!--TEXT-->
<div class="flex-fill"></div>
<div class="w-50 text-right">Blank Template</div>
</div>
<!--NICKNAMES-->
<div class="d-flex">
<!--ICON-->
<span style="color:#7b9af4">
<i class="fal fa-signature fa-fw"></i>
</span>
<!--LABEL-->
<div class="ml-2" style="font-weight:bold; font-family:monospace">
<span style="background:#3862e1;">NICKNAME(S)</span></div>
<!--TEXT-->
<div class="flex-fill"></div>
<div class="w-50 text-right">"Tem" (by Nobody)</div>
</div>
<!--AGE-->
<div class="d-flex">
<!--ICON-->
<span style="color:#7b9af4">
<i class="fal fa-cake-candles fa-fw"></i>
</span>
<!--LABEL-->
<div class="ml-2" style="font-weight:bold; font-family:monospace">
<span style="background:#3862e1;">AGE</span></div>
<!--TEXT-->
<div class="flex-fill"></div>
<div class="w-50 text-right">0 years</div>
</div>
<!--SPECIES-->
<div class="d-flex">
<!--ICON-->
<span style="color:#7b9af4">
<i class="fal fa-user fa-fw"></i>
</span>
<!--LABEL-->
<div class="ml-2" style="font-weight:bold; font-family:monospace">
<span style="background:#3862e1;">SPECIES</span></div>
<!--TEXT-->
<div class="flex-fill"></div>
<div class="w-50 text-right">Creature</div>
</div>
<!--PRONOUNS-->
<div class="d-flex">
<!--ICON-->
<span style="color:#7b9af4">
<i class="fal fa-comments fa-fw"></i>
</span>
<!--LABEL-->
<div class="ml-2" style="font-weight:bold; font-family:monospace">
<span style="background:#3862e1;">PRONOUNS</span></div>
<!--TEXT-->
<div class="flex-fill"></div>
<div class="w-50 text-right">Any/all</div>
</div>
<!--GENDER-->
<div class="d-flex">
<!--ICON-->
<span style="color:#7b9af4">
<i class="fal fa-venus-mars fa-fw"></i>
</span>
<!--LABEL-->
<div class="ml-2" style="font-weight:bold; font-family:monospace">
<span style="background:#3862e1;">GENDER</span></div>
<!--TEXT-->
<div class="flex-fill"></div>
<div class="w-50 text-right">Nah</div>
</div>
<!--ORIENTATION-->
<div class="d-flex">
<!--ICON-->
<span style="color:#7b9af4">
<i class="fal fa-heart fa-fw"></i>
</span>
<!--LABEL-->
<div class="ml-2" style="font-weight:bold; font-family:monospace">
<span style="background:#3862e1;">ORIENTATION</span></div>
<!--TEXT-->
<div class="flex-fill"></div>
<div class="w-50 text-right">Ramen</div>
</div>
</div></div> <!--basics col end-->
</div> <!--end basics-->
<!---------------------------------------------------------------- [ SECTION 2 | ABOUT ] -->
<div class="mt-sm-2 mt-4">
<!--TRAITS-->
<span style="font-family:monospace; font-weight:bold; background:#3862e1">TRAITS:</span>
A quick list of traits here, lorem ipsum, dolor sit amet, consectetur
<!--ABOUT-->
<div class="mt-3" style="border-radius:3px; border:1px solid #3862e1; margin:3px 0;">
<div class="p-3 card" style="border-radius:3px; border:1px solid #1d2c6e; margin: -5px 5px 5px -5px;">
<p>Quick summary of their history or character. 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> <!--end about-->
<!--------------------------------------------------------------- [ SECTION 3 | DESIGN ] -->
<div class="row mx-0 mt-4">
<!--NOTES-->
<div class="col-sm p-0" style="border-radius:3px; border:1px solid #3862e1; margin:3px;">
<div class="p-3 card" style="border-radius:3px; border:1px solid #1d2c6e; margin: -5px 5px 5px -5px; min-height:200px;">
<!--KEY-->
<div class="text-center" style="font-family:monospace">
<!--MANDATORY-->
<span style="color:#7b9af4">
<i class="fa-sharp fa-square fa-fw"></i>
</span>mand.
<!--MANDATORY-->
<span class="ml-3" style="color:#7b9af4">
<i class="fa-sharp-duotone fa-square fa-fw"></i>
</span>opt.
<!--MANDATORY-->
<span class="ml-3" style="color:#7b9af4">
<i class="fa-sharp fa-light fa-square fa-fw"></i>
</span>other
</div>
<div class="mt-3">
<!--MAND NOTE-->
<span style="color:#7b9af4">
<i class="fa-sharp fa-square fa-fw"></i>
</span>A design note here.
<br>
<!--MAND NOTE-->
<span style="color:#7b9af4">
<i class="fa-sharp fa-square fa-fw"></i>
</span>A design note here. It can also be a bit longer!
<br>
<!--MAND NOTE-->
<span style="color:#7b9af4">
<i class="fa-sharp fa-square fa-fw"></i>
</span>A design note here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br>
<!--OPT NOTE-->
<span style="color:#7b9af4">
<i class="fa-sharp-duotone fa-square fa-fw"></i>
</span>A design note here.
<br>
<!--OPT NOTE-->
<span style="color:#7b9af4">
<i class="fa-sharp-duotone fa-square fa-fw"></i>
</span>A design note here.
<br>
<!--MISC NOTE-->
<span style="color:#7b9af4">
<i class="fa-sharp fa-light fa-square fa-fw"></i>
</span>A design note here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br>
<!--MISC NOTE-->
<span style="color:#7b9af4">
<i class="fa-sharp fa-light fa-square fa-fw"></i>
</span>A design note here.
<br>
<!--MISC NOTE-->
<span style="color:#7b9af4">
<i class="fa-sharp fa-light fa-square fa-fw"></i>
</span>A design note here.
<br>
</div></div></div>
<!--COLOR PALETTE-->
<div class="col-sm-auto p-0 ml-sm-1">
<div class="d-flex flex-sm-column">
<!--COLOR-->
<span style="color:#1d2c6e">
<i class="fa-sharp fa-square fa-fw ml-sm-0 ml-2"></i>
</span>
<!--COLOR-->
<span style="color:#3862e1">
<i class="fa-sharp fa-square fa-fw ml-sm-0 ml-2"></i>
</span>
<!--COLOR-->
<span style="color:#7b9af4">
<i class="fa-sharp fa-square fa-fw ml-sm-0 ml-2"></i>
</span>
<!--COLOR-->
<a href="https://artfight.net/" title="art by user" style="color:#3862e1; text-decoration:none">
<!--[ href="EDITHERE" | replace with artist url ]-->
<!--[ title="EDITHERE" | replace with artist credit ]-->
<i class="fa-sharp fa-light fa-image fa-fw ml-sm-0 ml-2"></i>
</a>
</div></div>
<!--PAGEDOLL COL-->
<div class="col-sm-4 p-0 d-flex align-items-end justify-content-end">
<!--PAGEDOLL-->
<img src="https://placehold.co/500?text=pagedoll\nplaceholder" class="w-75 fa-bounce">
<!--[ src="EDITHERE" | replace with your image url ]-->
</div>
</div> <!--end design-->
<!----------------------------------------------------------------------------------------->
</div> <!--end code-->