artfight banner
created by:sunxrice
HTMLMixed ColorsMiscellaneous
Copy
<!--
artfight banner [ blank / spectator ]
by sunxrice
accents -
team color : #7d6a69
icon : fa-square
use find and replace!
-->
<div class="collapse show" id="artfight-banner">
<div class="container bg-faded text-center my-3" style="border-radius:20px; border:6px double #7d6a69">
<!-- collapse button -->
<p style="position:absolute; right:0.5em; top:0.5em; z-index:1">
<a class="fas fa-xmark-large btn btn-outline-secondary border-0 p-2 tooltipster" style="color:#7d6a69" title="close"
data-toggle="collapse" href="#artfight-banner" role="button" aria-expanded="true" aria-controls="artfight-banner"></a>
</p>
<!-- /collapse -->
<div class="row p-2">
<!-- image -->
<div class="d-none d-md-flex col-md-3 align-items-center" style="min-height:120px; border-radius:12px; border:4px solid #7d6a69;
background-image:url(imglink);
background-size:cover; background-position:center">
<!-- decoration - this is intended to be used if the image is a generic background, remove this if you want the image to be visible! -->
<i class="fad fa-square text-white m-auto" style="font-size:4em"></i>
</div>
<!-- /image -->
<!-- text -->
<div class="col-md-9 py-2 px-4 my-auto">
<!-- title - year and team name goes here -->
<p class="m-0" style="font-size:1.5em; font-weight:500; text-transform:uppercase">
<i class="fas fa-square mx-3 d-inline d-sm-none" style="color:#7d6a69"></i>
Art Fight Year
<i class="fas fa-square mx-3" style="color:#7d6a69"></i>
<br class="d-block d-sm-none">
Team Whatever
</p>
<!-- /title -->
<!-- description -->
<p>
put whatever you want here. the whole thing will expand if it's too long, so keep it short. or don't, i don't care.
</p>
<!-- /description -->
<!-- buttons - add / remove as needed -->
<p class="mt-2">
<!-- button -->
<a class="btn btn-outline-secondary border-0 text-white m-1" style="background-color:#7d6a69"
href="https://artfight.net/">
<i class="fas fa-paintbrush-pencil"></i>
profile
</a>
<!-- button -->
<a class="btn btn-outline-secondary border-0 text-white m-1" style="background-color:#7d6a69"
href="btnlink">
<i class="fas fa-pen-to-square"></i>
hitlist
</a>
<!-- button -->
<a class="btn btn-outline-secondary border-0 text-white m-1" style="background-color:#7d6a69"
href="btnlink">
<i class="fas fa-rotate"></i>
random character
</a>
<!-- add more buttons above this line -->
</p>
<!-- /buttons -->
</div>
<!-- /text -->
</div>
<!-- credits -->
<p style="position:absolute; right:0.25em; bottom:0.25em">
<a class="fas fa-image btn btn-outline-secondary border-0 p-2 tooltipster" style="color:#7d6a69" title="image from site / by user" href="imglink"></a>
<a class="fas fa-sun-haze btn btn-outline-secondary border-0 p-2 tooltipster" style="color:#7d6a69" title="code by sunxrice" href="https://toyhou.se/33519600.artfight-banner"></a>
</p>
<!-- /credits -->
</div>
</div>
<!-- end -->Copy
<!--
artfight banner [ fossils ]
by sunxrice
accents -
team color : #ba8c25
icon : fa-fish-bones
use find and replace!
-->
<div class="collapse show" id="artfight-banner">
<div class="container bg-faded text-center my-3" style="border-radius:20px; border:6px double #ba8c25">
<!-- collapse button -->
<p style="position:absolute; right:0.5em; top:0.5em; z-index:1">
<a class="fas fa-xmark-large btn btn-outline-secondary border-0 p-2 tooltipster" style="color:#ba8c25" title="close"
data-toggle="collapse" href="#artfight-banner" role="button" aria-expanded="true" aria-controls="artfight-banner"></a>
</p>
<!-- /collapse -->
<div class="row p-2">
<!-- image -->
<div class="d-none d-md-flex col-md-3 align-items-center" style="min-height:120px; border-radius:12px; border:4px solid #ba8c25;
background-image:url(https://images.unsplash.com/photo-1582760231262-b8d290f7fd46?w=830);
background-size:cover; background-position:center">
<!-- decoration - this is intended to be used if the image is a generic background, remove this if you want the image to be visible! -->
<i class="fad fa-fish-bones text-white m-auto" style="font-size:4em"></i>
</div>
<!-- /image -->
<!-- text -->
<div class="col-md-9 py-2 px-4 my-auto">
<!-- title - year and team name goes here -->
<p class="m-0" style="font-size:1.5em; font-weight:500; text-transform:uppercase">
<i class="fas fa-fish-bones mx-3 d-inline d-sm-none" style="color:#ba8c25"></i>
Art Fight 2025
<i class="fas fa-fish-bones mx-3" style="color:#ba8c25"></i>
<br class="d-block d-sm-none">
Team Fossils
</p>
<!-- /title -->
<!-- description -->
<p>
put whatever you want here. the whole thing will expand if it's too long, so keep it short. or don't, i don't care.
</p>
<!-- /description -->
<!-- buttons - add / remove as needed -->
<p class="mt-2">
<!-- button -->
<a class="btn btn-outline-secondary border-0 text-white m-1" style="background-color:#ba8c25"
href="https://artfight.net/">
<i class="fas fa-paintbrush-pencil"></i>
profile
</a>
<!-- button -->
<a class="btn btn-outline-secondary border-0 text-white m-1" style="background-color:#ba8c25"
href="btnlink">
<i class="fas fa-pen-to-square"></i>
hitlist
</a>
<!-- button -->
<a class="btn btn-outline-secondary border-0 text-white m-1" style="background-color:#ba8c25"
href="btnlink">
<i class="fas fa-rotate"></i>
random character
</a>
<!-- add more buttons above this line -->
</p>
<!-- /buttons -->
</div>
<!-- /text -->
</div>
<!-- credits -->
<p style="position:absolute; right:0.25em; bottom:0.25em">
<a class="fas fa-image btn btn-outline-secondary border-0 p-2 tooltipster" style="color:#ba8c25" title="image from unsplash" href="https://unsplash.com/photos/brown-rock-in-close-up-photography-c8MDb7JmBjY"></a>
<a class="fas fa-sun-haze btn btn-outline-secondary border-0 p-2 tooltipster" style="color:#ba8c25" title="code by sunxrice" href="https://toyhou.se/33519600.artfight-banner"></a>
</p>
<!-- /credits -->
</div>
</div>
<!-- end -->Copy
<!--
artfight banner [ crystals ]
by sunxrice
accents -
team color : #d35e88
icon : fa-gem
use find and replace!
-->
<div class="collapse show" id="artfight-banner">
<div class="container bg-faded text-center my-3" style="border-radius:20px; border:6px double #d35e88">
<!-- collapse button -->
<p style="position:absolute; right:0.5em; top:0.5em; z-index:1">
<a class="fas fa-xmark-large btn btn-outline-secondary border-0 p-2 tooltipster" style="color:#d35e88" title="close"
data-toggle="collapse" href="#artfight-banner" role="button" aria-expanded="true" aria-controls="artfight-banner"></a>
</p>
<!-- /collapse -->
<div class="row p-2">
<!-- image -->
<div class="d-none d-md-flex col-md-3 align-items-center" style="min-height:120px; border-radius:12px; border:4px solid #d35e88;
background-image:url(https://images.unsplash.com/photo-1728234553997-f71b87a44e13?w=839);
background-size:cover; background-position:center">
<!-- decoration - this is intended to be used if the image is a generic background, remove this if you want the image to be visible! -->
<i class="fad fa-gem text-white m-auto" style="font-size:4em"></i>
</div>
<!-- /image -->
<!-- text -->
<div class="col-md-9 py-2 px-4 my-auto">
<!-- title - year and team name goes here -->
<p class="m-0" style="font-size:1.5em; font-weight:500; text-transform:uppercase">
<i class="fas fa-gem mx-3 d-inline d-sm-none" style="color:#d35e88"></i>
Art Fight 2025
<i class="fas fa-gem mx-3" style="color:#d35e88"></i>
<br class="d-block d-sm-none">
Team Crystals
</p>
<!-- /title -->
<!-- description -->
<p>
put whatever you want here. the whole thing will expand if it's too long, so keep it short. or don't, i don't care.
</p>
<!-- /description -->
<!-- buttons - add / remove as needed -->
<p class="mt-2">
<!-- button -->
<a class="btn btn-outline-secondary border-0 text-white m-1" style="background-color:#d35e88"
href="https://artfight.net/">
<i class="fas fa-paintbrush-pencil"></i>
profile
</a>
<!-- button -->
<a class="btn btn-outline-secondary border-0 text-white m-1" style="background-color:#d35e88"
href="btnlink">
<i class="fas fa-pen-to-square"></i>
hitlist
</a>
<!-- button -->
<a class="btn btn-outline-secondary border-0 text-white m-1" style="background-color:#d35e88"
href="btnlink">
<i class="fas fa-rotate"></i>
random character
</a>
<!-- add more buttons above this line -->
</p>
<!-- /buttons -->
</div>
<!-- /text -->
</div>
<!-- credits -->
<p style="position:absolute; right:0.25em; bottom:0.25em">
<a class="fas fa-image btn btn-outline-secondary border-0 p-2 tooltipster" style="color:#d35e88" title="image from unsplash" href="https://unsplash.com/photos/a-pile-of-pink-crystals-sitting-on-top-of-a-table-noEHHmWGXIU"></a>
<a class="fas fa-sun-haze btn btn-outline-secondary border-0 p-2 tooltipster" style="color:#d35e88" title="code by sunxrice" href="https://toyhou.se/33519600.artfight-banner"></a>
</p>
<!-- /credits -->
</div>
</div>
<!-- end -->