Profile
GENERAL VERSION:
<!---
ART FIGHT / by cati/dogboy
NOTES
main bg color: #78797D
accent color: #5AC9E9
(use ctrl+f + replace for accent replacement)
mobile friendly + custom colors! ✔✔✔
RULES & DISCLAIMERS
- fav/comment if using pls!
- not wysiwyg friendly so please turn that off!
- feel free to edit/frakenstein/etc if you feel, just pls dont remove my credit!!
- i am in no way officially affiliated with artfight; this is just a user profile that is meant to resemble the artfight card!
- have a nice day!!
--->
<div class="container-fluid shadow-sm" style="background:url(https://64.media.tumblr.com/b9a5b762edb81670ce011be6a58e480a/tumblr_inline_mvmuledGjd1qid2nw.png) repeat fixed;padding:20px;border-radius:10px;max-width:850px;margin:30px auto 5px;">
<div class="row no-gutters">
<div class="col-md-3 p-2">
<!--- avatar --->
<img class="mx-auto d-block img-thumbnail m-2 fr-rounded" style="border:3px solid #78797D;" src="https://via.placeholder.com/200">
<!--- team badges, all of the badges are identified UNDER their name --->
<div class="row no-gutters" style="height:44px;overflow:auto;">
<!--- team steampunk --->
<img class="mx-auto d-block" src="https://rainy.s-ul.eu/am5jWPgm.png" style="height:30px;">
<!--- team cyberpunk --->
<img class="mx-auto d-block" src="https://rainy.s-ul.eu/eLnpLqp3.png" style="height:30px;">
<!--- team sugar --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/ddzsfs6-65e39101-320b-4258-85a5-49c8336fa094.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kZHpzZnM2LTY1ZTM5MTAxLTMyMGItNDI1OC04NWE1LTQ5YzgzMzZmYTA5NC5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.cgFheH-whbYMrd6CKmqJJJ64TRI7Wr-tVl_2Fwzu4Ws" style="height:30px;">
<!--- team spice --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/ddzsfwh-cdb7b681-a69b-4964-b286-a5714ef64445.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kZHpzZndoLWNkYjdiNjgxLWE2OWItNDk2NC1iMjg2LWE1NzE0ZWY2NDQ0NS5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.50ra2L0iYTRSlc8TbTR54bQbburFDE0MWAUo9_mccBY" style="height:30px;">
<!--- team nightmare --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/dd9yjjf-87b5af2e-0bee-4634-b14b-379c0bb944e9.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kZDl5ampmLTg3YjVhZjJlLTBiZWUtNDYzNC1iMTRiLTM3OWMwYmI5NDRlOS5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.0S_ga0nWTJXh1FLu2_TEvwSedLap-sjQAVarL0DZ0tc" style="height:30px;">
<!--- team dream --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/dd9yje8-c52cd540-ee24-40d0-aaf2-d954c9e75a9f.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kZDl5amU4LWM1MmNkNTQwLWVlMjQtNDBkMC1hYWYyLWQ5NTRjOWU3NWE5Zi5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.vPVSTxRefOuDu2hCYTT2LBOIyrDmX-SyB0PzhlEXPHY" style="height:30px;">
<!--- team coffee --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/dcfz6np-153e2e81-7689-4855-a8c4-870d44f4642f.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kY2Z6Nm5wLTE1M2UyZTgxLTc2ODktNDg1NS1hOGM0LTg3MGQ0NGY0NjQyZi5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.pOsNIqQLOUPnoDvtmftKN6QratxNDjnwnFpdldj0_DY" style="height:30px;">
<!--- team tea --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/dcfz58i-f4a3ae24-034b-49dd-b2e5-a6eb6310fdfb.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kY2Z6NThpLWY0YTNhZTI0LTAzNGItNDlkZC1iMmU1LWE2ZWI2MzEwZmRmYi5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.y7Lgiqpc-82lJWD9Myn0bEP9vjWUyjlvNKnHxJZSYzM" style="height:30px;">
<!--- team sun --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/dcctvwo-a2fef405-e2d5-4e70-bd3d-812650ed8444.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kY2N0dndvLWEyZmVmNDA1LWUyZDUtNGU3MC1iZDNkLTgxMjY1MGVkODQ0NC5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.Q4MC1gBbS4KXRvqw5a7Fi1io4TkI1eYPzSFOY98HfAg" style="height:30px;">
<!--- team moon --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/dcctvzs-ba787352-7a82-46bc-a738-4467c4cabbfd.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kY2N0dnpzLWJhNzg3MzUyLTdhODItNDZiYy1hNzM4LTQ0NjdjNGNhYmJmZC5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.XqkVTr3H3ZhYiHSfbmsn8D3DRSbwQB-tCW9KtJocFUU" style="height:30px;">
<!--- team tech --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/dcctvp1-ccd5eb84-ba4c-4634-bcd2-3a9233315e9a.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kY2N0dnAxLWNjZDVlYjg0LWJhNGMtNDYzNC1iY2QyLTNhOTIzMzMxNWU5YS5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.VLo-iNj2s_aDZnfH0hL3Iip1vPsSew_4muAPqBwjwyI" style="height:30px;">
<!--- team magic --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/dcctvcm-52bc10a2-0461-4d4c-b7e4-ec231cd00de9.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kY2N0dmNtLTUyYmMxMGEyLTA0NjEtNGQ0Yy1iN2U0LWVjMjMxY2QwMGRlOS5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.zN8zhB8nNroEU1fdiSAqph-AdPuoTWA_N2EO8r1att8" style="height:30px;">
<!--- team color --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/dccu12s-5f812329-20c4-4a6f-a037-f2adeef67fb3.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kY2N1MTJzLTVmODEyMzI5LTIwYzQtNGE2Zi1hMDM3LWYyYWRlZWY2N2ZiMy5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.iTYZ5vWn8x-8dXCBiZ6u217P6y0RmKT3zSLVBoyWx08" style="height:30px;">
<!--- team mono --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/dccu189-c617aea1-15d8-4939-b8f0-26c0bf58cbe5.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kY2N1MTg5LWM2MTdhZWExLTE1ZDgtNDkzOS1iOGYwLTI2YzBiZjU4Y2JlNS5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.gmW-KWQliuaCHdmA-HAMUSoYc1ZI2AfxlA_-jseIV2s" style="height:30px;">
<!--- team hunters --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/ddysdob-3147bbc0-7a8a-4a98-9bf0-3dcaf8c5e9ba.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kZHlzZG9iLTMxNDdiYmMwLTdhOGEtNGE5OC05YmYwLTNkY2FmOGM1ZTliYS5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.vSpR79St7IHuygoT3nGmGk9I3B70Lywi2Z2iMOK5wao" style="height:30px;">
<!--- team zombies --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/ddysdul-9668b58b-b25b-4aa9-9dde-86f9083dcfe9.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kZHlzZHVsLTk2NjhiNThiLWIyNWItNGFhOS05ZGRlLTg2ZjkwODNkY2ZlOS5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.pc4_Gwzefq9g7v2IJ_1fdrV5jOrG02nsxLBEKeRnSLM" style="height:30px;">
</div>
</div>
<div class="col-md-7 p-2">
<div class="justify-content-center">
<!--- team name --->
<h3 class="text-uppercase font-weight-bold mb-4" style="color:#5AC9E9;font-size:46px;letter-spacing:1px;" align="center">team</h3>
<h3 class="text-uppercase font-weight-bold mb-4" style="color:#78797D;font-size:46px;letter-spacing:5px;" align="center">[name]</h3>
</div>
<div class="card" style="background:#78797D;border:0px;border-radius:2px;">
<!--- user and username --->
<div class="row no-gutters">
<div style="border-radius:2px;background-color:#5AC9E9;"><p class="m-2 font-weight-bold" style="color:#FFFFFF;font-size:18px;letter-spacing:1px;">User:</p></div>
<p class="m-2 font-italic" style="color:#FFFFFF;font-size:18px;letter-spacing:2px;">Username here</p>
</div>
</div>
<div class="card mt-2" style="background:#78797D;border:0px;border-radius:2px;height:115px;">
<!--- attack box --->
<div class="row no-gutters">
<div style="border-radius:2px;background-color:#5AC9E9;"><p class="m-2 font-weight-bold" style="color:#FFFFFF;font-size:18px;letter-spacing:1px;">I attack...</p></div>
<p class="m-2 font-italic" style="color:#FFFFFF;font-size:18px;letter-spacing:2px;">put who you attack here, the box won't scroll so keep it short</p>
</div>
</div>
</div>
<div class="col-md-2 p-2">
<!--- team logo + link to art fight --->
<a href="AFLINKHERE"><span data-toggle="tooltip" title="FIGHT!"><img class="mx-auto d-block" src="https://orig07.deviantart.net/67fc/f/2017/159/c/4/logohugealtered4_by_inuf_dbbkwd8_by_inuf-dbc0xj8.png" style="height:120px;"></span></a>
<!--- do/dont for friendly fire and revenge, change "fas fa-check" to "fas fa-times" for an X, and vice versa for a check --->
<h3 class="text-uppercase font-weight-bold" style="color:#5AC9E9;font-size:25px;">I do:</h3>
<div class="card" style="background:#5AC9E9;border:0px;border-radius:2px;">
<div class="justify-content-between"></div>
<p class="m-2 text-uppercase font-weight-bold" style="color:#FFFFFF;font-size:15px;letter-spacing:1px;">FF <i class="fas fa-check" style="color:#FFFFFF;"></i></p>
</div>
<div class="card mt-2" style="background:#5AC9E9;border:0px;border-radius:2px;">
<p class="m-2 text-uppercase font-weight-bold" style="color:#FFFFFF;font-size:15px;">revenge <i class="fas fa-times" style="color:#FFFFFF;"></i></p>
</div>
</div>
<div class="col-lg-12">
<div class="card mt-2" style="background:#78797D;border:0px;border-radius:2px;">
<hr class="m-3" style="background-color:#5AC9E9;">
<h3 class="text-uppercase font-weight-bold pl-3" style="color:#5AC9E9;font-size:30px;letter-spacing:1px;">Featured Characters</h3>
<!--- featured characters --->
<div class="row no-gutters justify-content-between px-4 pb-3">
<div class="mt-2 rounded" style="background-image:url('https://via.placeholder.com/120');background-size:cover;background-position:center;width:120px;height:120px;">
<a class="btn h-100 btn-block btn-outline-primary btn-sm" href="URLHERE" style="border:3px solid #5AC9E9;"></a>
</div>
<div class="mt-2 rounded" style="background-image:url('https://via.placeholder.com/120');background-size:cover;background-position:center;width:120px;height:120px;">
<a class="btn h-100 btn-block btn-outline-primary btn-sm" href="URLHERE" style="border:3px solid #5AC9E9;"></a>
</div>
<div class="mt-2 rounded" style="background-image:url('https://via.placeholder.com/120');background-size:cover;background-position:center;width:120px;height:120px;">
<a class="btn h-100 btn-block btn-outline-primary btn-sm" href="URLHERE" style="border:3px solid #5AC9E9;"></a>
</div>
<div class="mt-2 rounded" style="background-image:url('https://via.placeholder.com/120');background-size:cover;background-position:center;width:120px;height:120px;">
<a class="btn h-100 btn-block btn-outline-primary btn-sm" href="URLHERE" style="border:3px solid #5AC9E9;"></a>
</div>
<div class="mt-2 rounded" style="background-image:url('https://via.placeholder.com/120');background-size:cover;background-position:center;width:120px;height:120px;">
<a class="btn h-100 btn-block btn-outline-primary btn-sm" href="URLHERE" style="border:3px solid #5AC9E9;"></a>
</div>
<div class="mt-2 rounded" style="background-image:url('https://via.placeholder.com/120');background-size:cover;background-position:center;width:120px;height:120px;">
<a class="btn h-100 btn-block btn-outline-primary btn-sm" href="URLHERE" style="border:3px solid #5AC9E9;"></a>
</div>
</div>
<div class="col-lg-11 mx-auto mb-3">
<div class="card mt-2" style="background:#5AC9E9;border:0px;border-radius:10px;">
<!--- types of characters you have, you can remove the ones you dont by highlighting the line and deleting said line --->
<h3 class="text-uppercase font-weight-bold m-2" style="color:#78797D;font-size:20px;">Characters I Have:</h3>
<div class="row no-gutters justify-content-center">
<div class="m-2" style="border-radius:7px;background-color:#78797D;"><h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:25px;letter-spacing:2px;" align="center">human</h3></div>
<div class="m-2" style="border-radius:7px;background-color:#78797D;"><h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:25px;letter-spacing:2px;" align="center">feral</h3></div>
<div class="m-2" style="border-radius:7px;background-color:#78797D;"><h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:25px;letter-spacing:2px;" align="center">anthro</h3></div>
<div class="m-2" style="border-radius:7px;background-color:#78797D;"><h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:25px;letter-spacing:2px;" align="center">monster</h3></div>
<div class="m-2" style="border-radius:7px;background-color:#78797D;"><h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:25px;letter-spacing:2px;" align="center">mech</h3></div>
</div>
<div class="row no-gutters">
<!--- other --->
<div class="ml-5 mb-3" style="border-radius:7px;background-color:#78797D;"><p class="m-1 font-weight-bold" style="color:#FFFFFF;font-size:18px;letter-spacing:1px;">other:</p></div>
<p class="m-1 font-italic" style="color:#FFFFFF;font-size:17px;letter-spacing:1px;">Other types of characters here</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--- credit, dont remove pls! --->
<a class="d-block text-muted text-center" href="https://toyhou.se/11650003.art-fight-2021-f2u-html" style="font-size:0.6em;">code by cati <i class="fad fa-rainbow"></i></a>
STEAMPUNK VERSION:
<!---
ART FIGHT (STEAMPUNK) / by cati/dogboy
NOTES
main bg color: #E98A3C
accent color: #973B18
(use ctrl+f + replace for accent replacement)
mobile friendly + custom colors! ✔✔✔
RULES & DISCLAIMERS
- fav/comment if using pls!
- not wysiwyg friendly so please turn that off!
- feel free to edit/frakenstein/etc if you feel, just pls dont remove my credit!!
- i am in no way officially affiliated with artfight; this is just a user profile that is meant to resemble the artfight card!
- have a nice day!!
--->
<div class="container-fluid shadow-sm" style="background:url(https://64.media.tumblr.com/2c8fac4b7cd0707556472f2c1b53a446/tumblr_inline_mvmulemQAV1qid2nw.png) repeat fixed;padding:20px;border-radius:10px;max-width:850px;margin:30px auto 5px;">
<div class="row no-gutters">
<div class="col-md-3 p-2">
<!--- avatar --->
<img class="mx-auto d-block img-thumbnail m-2 fr-rounded" style="border:3px solid #E98A3C;" src="https://via.placeholder.com/200">
<!--- team badges, all of the badges are identified UNDER their name --->
<div class="row no-gutters" style="height:44px;overflow:auto;">
<!--- team steampunk --->
<img class="mx-auto d-block" src="https://rainy.s-ul.eu/am5jWPgm.png" style="height:30px;">
<!--- team cyberpunk --->
<img class="mx-auto d-block" src="https://rainy.s-ul.eu/eLnpLqp3.png" style="height:30px;">
<!--- team sugar --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/ddzsfs6-65e39101-320b-4258-85a5-49c8336fa094.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kZHpzZnM2LTY1ZTM5MTAxLTMyMGItNDI1OC04NWE1LTQ5YzgzMzZmYTA5NC5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.cgFheH-whbYMrd6CKmqJJJ64TRI7Wr-tVl_2Fwzu4Ws" style="height:30px;">
<!--- team spice --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/ddzsfwh-cdb7b681-a69b-4964-b286-a5714ef64445.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kZHpzZndoLWNkYjdiNjgxLWE2OWItNDk2NC1iMjg2LWE1NzE0ZWY2NDQ0NS5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.50ra2L0iYTRSlc8TbTR54bQbburFDE0MWAUo9_mccBY" style="height:30px;">
<!--- team nightmare --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/dd9yjjf-87b5af2e-0bee-4634-b14b-379c0bb944e9.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kZDl5ampmLTg3YjVhZjJlLTBiZWUtNDYzNC1iMTRiLTM3OWMwYmI5NDRlOS5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.0S_ga0nWTJXh1FLu2_TEvwSedLap-sjQAVarL0DZ0tc" style="height:30px;">
<!--- team dream --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/dd9yje8-c52cd540-ee24-40d0-aaf2-d954c9e75a9f.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kZDl5amU4LWM1MmNkNTQwLWVlMjQtNDBkMC1hYWYyLWQ5NTRjOWU3NWE5Zi5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.vPVSTxRefOuDu2hCYTT2LBOIyrDmX-SyB0PzhlEXPHY" style="height:30px;">
<!--- team coffee --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/dcfz6np-153e2e81-7689-4855-a8c4-870d44f4642f.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kY2Z6Nm5wLTE1M2UyZTgxLTc2ODktNDg1NS1hOGM0LTg3MGQ0NGY0NjQyZi5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.pOsNIqQLOUPnoDvtmftKN6QratxNDjnwnFpdldj0_DY" style="height:30px;">
<!--- team tea --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/dcfz58i-f4a3ae24-034b-49dd-b2e5-a6eb6310fdfb.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kY2Z6NThpLWY0YTNhZTI0LTAzNGItNDlkZC1iMmU1LWE2ZWI2MzEwZmRmYi5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.y7Lgiqpc-82lJWD9Myn0bEP9vjWUyjlvNKnHxJZSYzM" style="height:30px;">
<!--- team sun --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/dcctvwo-a2fef405-e2d5-4e70-bd3d-812650ed8444.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kY2N0dndvLWEyZmVmNDA1LWUyZDUtNGU3MC1iZDNkLTgxMjY1MGVkODQ0NC5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.Q4MC1gBbS4KXRvqw5a7Fi1io4TkI1eYPzSFOY98HfAg" style="height:30px;">
<!--- team moon --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/dcctvzs-ba787352-7a82-46bc-a738-4467c4cabbfd.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kY2N0dnpzLWJhNzg3MzUyLTdhODItNDZiYy1hNzM4LTQ0NjdjNGNhYmJmZC5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.XqkVTr3H3ZhYiHSfbmsn8D3DRSbwQB-tCW9KtJocFUU" style="height:30px;">
<!--- team tech --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/dcctvp1-ccd5eb84-ba4c-4634-bcd2-3a9233315e9a.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kY2N0dnAxLWNjZDVlYjg0LWJhNGMtNDYzNC1iY2QyLTNhOTIzMzMxNWU5YS5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.VLo-iNj2s_aDZnfH0hL3Iip1vPsSew_4muAPqBwjwyI" style="height:30px;">
<!--- team magic --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/dcctvcm-52bc10a2-0461-4d4c-b7e4-ec231cd00de9.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kY2N0dmNtLTUyYmMxMGEyLTA0NjEtNGQ0Yy1iN2U0LWVjMjMxY2QwMGRlOS5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.zN8zhB8nNroEU1fdiSAqph-AdPuoTWA_N2EO8r1att8" style="height:30px;">
<!--- team color --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/dccu12s-5f812329-20c4-4a6f-a037-f2adeef67fb3.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kY2N1MTJzLTVmODEyMzI5LTIwYzQtNGE2Zi1hMDM3LWYyYWRlZWY2N2ZiMy5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.iTYZ5vWn8x-8dXCBiZ6u217P6y0RmKT3zSLVBoyWx08" style="height:30px;">
<!--- team mono --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/dccu189-c617aea1-15d8-4939-b8f0-26c0bf58cbe5.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kY2N1MTg5LWM2MTdhZWExLTE1ZDgtNDkzOS1iOGYwLTI2YzBiZjU4Y2JlNS5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.gmW-KWQliuaCHdmA-HAMUSoYc1ZI2AfxlA_-jseIV2s" style="height:30px;">
<!--- team hunters --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/ddysdob-3147bbc0-7a8a-4a98-9bf0-3dcaf8c5e9ba.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kZHlzZG9iLTMxNDdiYmMwLTdhOGEtNGE5OC05YmYwLTNkY2FmOGM1ZTliYS5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.vSpR79St7IHuygoT3nGmGk9I3B70Lywi2Z2iMOK5wao" style="height:30px;">
<!--- team zombies --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/ddysdul-9668b58b-b25b-4aa9-9dde-86f9083dcfe9.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kZHlzZHVsLTk2NjhiNThiLWIyNWItNGFhOS05ZGRlLTg2ZjkwODNkY2ZlOS5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.pc4_Gwzefq9g7v2IJ_1fdrV5jOrG02nsxLBEKeRnSLM" style="height:30px;">
</div>
</div>
<div class="col-md-7 p-2">
<div class="justify-content-center">
<!--- team name --->
<h3 class="text-uppercase font-weight-bold mb-4" style="color:#973B18;font-size:46px;letter-spacing:1px;" align="center">team</h3>
<h3 class="text-uppercase font-weight-bold mb-4" style="color:#E98A3C;font-size:46px;letter-spacing:5px;" align="center">STEAMPUNK</h3>
</div>
<div class="card" style="background:#E98A3C;border:0px;border-radius:2px;">
<!--- user and username --->
<div class="row no-gutters">
<div style="border-radius:2px;background-color:#973B18;"><p class="m-2 font-weight-bold" style="color:#FFFFFF;font-size:18px;letter-spacing:1px;">User:</p></div>
<p class="m-2 font-italic" style="color:#FFFFFF;font-size:18px;letter-spacing:2px;">Username here</p>
</div>
</div>
<div class="card mt-2" style="background:#E98A3C;border:0px;border-radius:2px;height:115px;">
<!--- attack box --->
<div class="row no-gutters">
<div style="border-radius:2px;background-color:#973B18;"><p class="m-2 font-weight-bold" style="color:#FFFFFF;font-size:18px;letter-spacing:1px;">I attack...</p></div>
<p class="m-2 font-italic" style="color:#FFFFFF;font-size:18px;letter-spacing:2px;">put who you attack here, the box won't scroll so keep it short</p>
</div>
</div>
</div>
<div class="col-md-2 p-2">
<!--- team logo + link to art fight --->
<a href="AFLINKHERE"><span data-toggle="tooltip" title="FIGHT!"><img class="mx-auto d-block" src="https://orig07.deviantart.net/67fc/f/2017/159/c/4/logohugealtered4_by_inuf_dbbkwd8_by_inuf-dbc0xj8.png" style="height:120px;"></span></a>
<!--- do/dont for friendly fire and revenge, change "fas fa-check" to "fas fa-times" for an X, and vice versa for a check --->
<h3 class="text-uppercase font-weight-bold" style="color:#973B18;font-size:25px;">I do:</h3>
<div class="card" style="background:#973B18;border:0px;border-radius:2px;">
<div class="justify-content-between"></div>
<p class="m-2 text-uppercase font-weight-bold" style="color:#FFFFFF;font-size:15px;letter-spacing:1px;">FF <i class="fas fa-check" style="color:#FFFFFF;"></i></p>
</div>
<div class="card mt-2" style="background:#973B18;border:0px;border-radius:2px;">
<p class="m-2 text-uppercase font-weight-bold" style="color:#FFFFFF;font-size:15px;">revenge <i class="fas fa-times" style="color:#FFFFFF;"></i></p>
</div>
</div>
<div class="col-lg-12">
<div class="card mt-2" style="background:#E98A3C;border:0px;border-radius:2px;">
<hr class="m-3" style="background-color:#973B18;">
<h3 class="text-uppercase font-weight-bold pl-3" style="color:#973B18;font-size:30px;letter-spacing:1px;">Featured Characters</h3>
<!--- featured characters --->
<div class="row no-gutters justify-content-between px-4 pb-3">
<div class="mt-2 rounded" style="background-image:url('https://via.placeholder.com/120');background-size:cover;background-position:center;width:120px;height:120px;">
<a class="btn h-100 btn-block btn-outline-primary btn-sm" href="URLHERE" style="border:3px solid #973B18;"></a>
</div>
<div class="mt-2 rounded" style="background-image:url('https://via.placeholder.com/120');background-size:cover;background-position:center;width:120px;height:120px;">
<a class="btn h-100 btn-block btn-outline-primary btn-sm" href="URLHERE" style="border:3px solid #973B18;"></a>
</div>
<div class="mt-2 rounded" style="background-image:url('https://via.placeholder.com/120');background-size:cover;background-position:center;width:120px;height:120px;">
<a class="btn h-100 btn-block btn-outline-primary btn-sm" href="URLHERE" style="border:3px solid #973B18;"></a>
</div>
<div class="mt-2 rounded" style="background-image:url('https://via.placeholder.com/120');background-size:cover;background-position:center;width:120px;height:120px;">
<a class="btn h-100 btn-block btn-outline-primary btn-sm" href="URLHERE" style="border:3px solid #973B18;"></a>
</div>
<div class="mt-2 rounded" style="background-image:url('https://via.placeholder.com/120');background-size:cover;background-position:center;width:120px;height:120px;">
<a class="btn h-100 btn-block btn-outline-primary btn-sm" href="URLHERE" style="border:3px solid #973B18;"></a>
</div>
<div class="mt-2 rounded" style="background-image:url('https://via.placeholder.com/120');background-size:cover;background-position:center;width:120px;height:120px;">
<a class="btn h-100 btn-block btn-outline-primary btn-sm" href="URLHERE" style="border:3px solid #973B18;"></a>
</div>
</div>
<div class="col-lg-11 mx-auto mb-3">
<div class="card mt-2" style="background:#973B18;border:0px;border-radius:10px;">
<!--- types of characters you have, you can remove the ones you dont by highlighting the line and deleting said line --->
<h3 class="text-uppercase font-weight-bold m-2" style="color:#E98A3C;font-size:20px;">Characters I Have:</h3>
<div class="row no-gutters justify-content-center">
<div class="m-2" style="border-radius:7px;background-color:#E98A3C;"><h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:25px;letter-spacing:2px;" align="center">human</h3></div>
<div class="m-2" style="border-radius:7px;background-color:#E98A3C;"><h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:25px;letter-spacing:2px;" align="center">feral</h3></div>
<div class="m-2" style="border-radius:7px;background-color:#E98A3C;"><h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:25px;letter-spacing:2px;" align="center">anthro</h3></div>
<div class="m-2" style="border-radius:7px;background-color:#E98A3C;"><h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:25px;letter-spacing:2px;" align="center">monster</h3></div>
<div class="m-2" style="border-radius:7px;background-color:#E98A3C;"><h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:25px;letter-spacing:2px;" align="center">mech</h3></div>
</div>
<div class="row no-gutters">
<!--- other --->
<div class="ml-5 mb-3" style="border-radius:7px;background-color:#E98A3C;"><p class="m-1 font-weight-bold" style="color:#FFFFFF;font-size:18px;letter-spacing:1px;">other:</p></div>
<p class="m-1 font-italic" style="color:#FFFFFF;font-size:17px;letter-spacing:1px;">Other types of characters here</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--- credit, dont remove pls! --->
<a class="d-block text-muted text-center" href="https://toyhou.se/11650003.art-fight-2021-f2u-html" style="font-size:0.6em;">code by cati <i class="fad fa-rainbow"></i></a>
CYBERPUNK VERSION:
<!---
ART FIGHT (CYBERPUNK) / by cati/dogboy
NOTES
main bg color: #B482F8
accent color: #202226
(use ctrl+f + replace for accent replacement)
mobile friendly + custom colors! ✔✔✔
RULES & DISCLAIMERS
- fav/comment if using pls!
- not wysiwyg friendly so please turn that off!
- feel free to edit/frakenstein/etc if you feel, just pls dont remove my credit!!
- i am in no way officially affiliated with artfight; this is just a user profile that is meant to resemble the artfight card!
- have a nice day!!
--->
<div class="container-fluid shadow-sm" style="background:url(https://64.media.tumblr.com/1b1a1eb0703469a0350f87b5ec2f7d61/tumblr_inline_mvmulfaXU51qid2nw.png) repeat fixed;padding:20px;border-radius:10px;max-width:850px;margin:30px auto 5px;">
<div class="row no-gutters">
<div class="col-md-2 p-2">
<!--- team logo + link to art fight --->
<a href="AFLINKHERE"><span data-toggle="tooltip" title="FIGHT!"><img class="mx-auto d-block" src="https://orig07.deviantart.net/67fc/f/2017/159/c/4/logohugealtered4_by_inuf_dbbkwd8_by_inuf-dbc0xj8.png" style="height:120px;"></span></a>
<!--- do/dont for friendly fire and revenge, change "fas fa-check" to "fas fa-times" for an X, and vice versa for a check --->
<h3 class="text-uppercase font-weight-bold" style="color:#202226;font-size:25px;">I do:</h3>
<div class="card" style="background:#202226;border:0px;border-radius:2px;">
<div class="justify-content-between"></div>
<p class="m-2 text-uppercase font-weight-bold" style="color:#FFFFFF;font-size:15px;letter-spacing:1px;">FF <i class="fas fa-check" style="color:#FFFFFF;"></i></p>
</div>
<div class="card mt-2" style="background:#202226;border:0px;border-radius:2px;">
<p class="m-2 text-uppercase font-weight-bold" style="color:#FFFFFF;font-size:15px;">revenge <i class="fas fa-times" style="color:#FFFFFF;"></i></p>
</div>
</div>
<div class="col-md-7 p-2">
<div class="justify-content-center">
<!--- team name --->
<h3 class="text-uppercase font-weight-bold mb-4" style="color:#202226;font-size:46px;letter-spacing:1px;" align="center">team</h3>
<h3 class="text-uppercase font-weight-bold mb-4" style="color:#B482F8;font-size:46px;letter-spacing:5px;" align="center">cyberpunk</h3>
</div>
<div class="card" style="background:#B482F8;border:0px;border-radius:2px;">
<!--- user and username --->
<div class="row no-gutters">
<div style="border-radius:2px;background-color:#202226;"><p class="m-2 font-weight-bold" style="color:#FFFFFF;font-size:18px;letter-spacing:1px;">User:</p></div>
<p class="m-2 font-italic" style="color:#FFFFFF;font-size:18px;letter-spacing:2px;">Username here</p>
</div>
</div>
<div class="card mt-2" style="background:#B482F8;border:0px;border-radius:2px;height:115px;">
<!--- attack box --->
<div class="row no-gutters">
<div style="border-radius:2px;background-color:#202226;"><p class="m-2 font-weight-bold" style="color:#FFFFFF;font-size:18px;letter-spacing:1px;">I attack...</p></div>
<p class="m-2 font-italic" style="color:#FFFFFF;font-size:18px;letter-spacing:2px;">put who you attack here, the box won't scroll so keep it short</p>
</div>
</div>
</div>
<div class="col-md-3 p-2">
<!--- avatar --->
<img class="mx-auto d-block img-thumbnail m-2 fr-rounded" style="border:3px solid #B482F8;" src="https://via.placeholder.com/200">
<!--- team badges, all of the badges are identified UNDER their name --->
<div class="row no-gutters" style="height:44px;overflow:auto;">
<!--- team steampunk --->
<img class="mx-auto d-block" src="https://rainy.s-ul.eu/am5jWPgm.png" style="height:30px;">
<!--- team cyberpunk --->
<img class="mx-auto d-block" src="https://rainy.s-ul.eu/eLnpLqp3.png" style="height:30px;">
<!--- team sugar --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/ddzsfs6-65e39101-320b-4258-85a5-49c8336fa094.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kZHpzZnM2LTY1ZTM5MTAxLTMyMGItNDI1OC04NWE1LTQ5YzgzMzZmYTA5NC5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.cgFheH-whbYMrd6CKmqJJJ64TRI7Wr-tVl_2Fwzu4Ws" style="height:30px;">
<!--- team spice --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/ddzsfwh-cdb7b681-a69b-4964-b286-a5714ef64445.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kZHpzZndoLWNkYjdiNjgxLWE2OWItNDk2NC1iMjg2LWE1NzE0ZWY2NDQ0NS5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.50ra2L0iYTRSlc8TbTR54bQbburFDE0MWAUo9_mccBY" style="height:30px;">
<!--- team nightmare --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/dd9yjjf-87b5af2e-0bee-4634-b14b-379c0bb944e9.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kZDl5ampmLTg3YjVhZjJlLTBiZWUtNDYzNC1iMTRiLTM3OWMwYmI5NDRlOS5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.0S_ga0nWTJXh1FLu2_TEvwSedLap-sjQAVarL0DZ0tc" style="height:30px;">
<!--- team dream --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/dd9yje8-c52cd540-ee24-40d0-aaf2-d954c9e75a9f.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kZDl5amU4LWM1MmNkNTQwLWVlMjQtNDBkMC1hYWYyLWQ5NTRjOWU3NWE5Zi5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.vPVSTxRefOuDu2hCYTT2LBOIyrDmX-SyB0PzhlEXPHY" style="height:30px;">
<!--- team coffee --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/dcfz6np-153e2e81-7689-4855-a8c4-870d44f4642f.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kY2Z6Nm5wLTE1M2UyZTgxLTc2ODktNDg1NS1hOGM0LTg3MGQ0NGY0NjQyZi5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.pOsNIqQLOUPnoDvtmftKN6QratxNDjnwnFpdldj0_DY" style="height:30px;">
<!--- team tea --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/dcfz58i-f4a3ae24-034b-49dd-b2e5-a6eb6310fdfb.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kY2Z6NThpLWY0YTNhZTI0LTAzNGItNDlkZC1iMmU1LWE2ZWI2MzEwZmRmYi5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.y7Lgiqpc-82lJWD9Myn0bEP9vjWUyjlvNKnHxJZSYzM" style="height:30px;">
<!--- team sun --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/dcctvwo-a2fef405-e2d5-4e70-bd3d-812650ed8444.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kY2N0dndvLWEyZmVmNDA1LWUyZDUtNGU3MC1iZDNkLTgxMjY1MGVkODQ0NC5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.Q4MC1gBbS4KXRvqw5a7Fi1io4TkI1eYPzSFOY98HfAg" style="height:30px;">
<!--- team moon --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/dcctvzs-ba787352-7a82-46bc-a738-4467c4cabbfd.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kY2N0dnpzLWJhNzg3MzUyLTdhODItNDZiYy1hNzM4LTQ0NjdjNGNhYmJmZC5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.XqkVTr3H3ZhYiHSfbmsn8D3DRSbwQB-tCW9KtJocFUU" style="height:30px;">
<!--- team tech --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/dcctvp1-ccd5eb84-ba4c-4634-bcd2-3a9233315e9a.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kY2N0dnAxLWNjZDVlYjg0LWJhNGMtNDYzNC1iY2QyLTNhOTIzMzMxNWU5YS5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.VLo-iNj2s_aDZnfH0hL3Iip1vPsSew_4muAPqBwjwyI" style="height:30px;">
<!--- team magic --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/dcctvcm-52bc10a2-0461-4d4c-b7e4-ec231cd00de9.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kY2N0dmNtLTUyYmMxMGEyLTA0NjEtNGQ0Yy1iN2U0LWVjMjMxY2QwMGRlOS5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.zN8zhB8nNroEU1fdiSAqph-AdPuoTWA_N2EO8r1att8" style="height:30px;">
<!--- team color --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/dccu12s-5f812329-20c4-4a6f-a037-f2adeef67fb3.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kY2N1MTJzLTVmODEyMzI5LTIwYzQtNGE2Zi1hMDM3LWYyYWRlZWY2N2ZiMy5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.iTYZ5vWn8x-8dXCBiZ6u217P6y0RmKT3zSLVBoyWx08" style="height:30px;">
<!--- team mono --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/dccu189-c617aea1-15d8-4939-b8f0-26c0bf58cbe5.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kY2N1MTg5LWM2MTdhZWExLTE1ZDgtNDkzOS1iOGYwLTI2YzBiZjU4Y2JlNS5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.gmW-KWQliuaCHdmA-HAMUSoYc1ZI2AfxlA_-jseIV2s" style="height:30px;">
<!--- team hunters --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/ddysdob-3147bbc0-7a8a-4a98-9bf0-3dcaf8c5e9ba.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kZHlzZG9iLTMxNDdiYmMwLTdhOGEtNGE5OC05YmYwLTNkY2FmOGM1ZTliYS5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.vSpR79St7IHuygoT3nGmGk9I3B70Lywi2Z2iMOK5wao" style="height:30px;">
<!--- team zombies --->
<img class="mx-auto d-block" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d867561-99af-4778-a3d2-81302ef18579/ddysdul-9668b58b-b25b-4aa9-9dde-86f9083dcfe9.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWQ4Njc1NjEtOTlhZi00Nzc4LWEzZDItODEzMDJlZjE4NTc5XC9kZHlzZHVsLTk2NjhiNThiLWIyNWItNGFhOS05ZGRlLTg2ZjkwODNkY2ZlOS5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.pc4_Gwzefq9g7v2IJ_1fdrV5jOrG02nsxLBEKeRnSLM" style="height:30px;">
</div>
</div>
<div class="col-lg-12">
<div class="card mt-2" style="background:#B482F8;border:0px;border-radius:2px;">
<hr class="m-3" style="background-color:#202226;">
<h3 class="text-uppercase font-weight-bold pl-3" style="color:#202226;font-size:30px;letter-spacing:1px;">Featured Characters</h3>
<!--- featured characters --->
<div class="row no-gutters justify-content-between px-4 pb-3">
<div class="mt-2 rounded" style="background-image:url('https://via.placeholder.com/120');background-size:cover;background-position:center;width:120px;height:120px;">
<a class="btn h-100 btn-block btn-outline-primary btn-sm" href="URLHERE" style="border:3px solid #202226;"></a>
</div>
<div class="mt-2 rounded" style="background-image:url('https://via.placeholder.com/120');background-size:cover;background-position:center;width:120px;height:120px;">
<a class="btn h-100 btn-block btn-outline-primary btn-sm" href="URLHERE" style="border:3px solid #202226;"></a>
</div>
<div class="mt-2 rounded" style="background-image:url('https://via.placeholder.com/120');background-size:cover;background-position:center;width:120px;height:120px;">
<a class="btn h-100 btn-block btn-outline-primary btn-sm" href="URLHERE" style="border:3px solid #202226;"></a>
</div>
<div class="mt-2 rounded" style="background-image:url('https://via.placeholder.com/120');background-size:cover;background-position:center;width:120px;height:120px;">
<a class="btn h-100 btn-block btn-outline-primary btn-sm" href="URLHERE" style="border:3px solid #202226;"></a>
</div>
<div class="mt-2 rounded" style="background-image:url('https://via.placeholder.com/120');background-size:cover;background-position:center;width:120px;height:120px;">
<a class="btn h-100 btn-block btn-outline-primary btn-sm" href="URLHERE" style="border:3px solid #202226;"></a>
</div>
<div class="mt-2 rounded" style="background-image:url('https://via.placeholder.com/120');background-size:cover;background-position:center;width:120px;height:120px;">
<a class="btn h-100 btn-block btn-outline-primary btn-sm" href="URLHERE" style="border:3px solid #202226;"></a>
</div>
</div>
<div class="col-lg-11 mx-auto mb-3">
<div class="card mt-2" style="background:#202226;border:0px;border-radius:10px;">
<!--- types of characters you have, you can remove the ones you dont by highlighting the line and deleting said line --->
<h3 class="text-uppercase font-weight-bold m-2" style="color:#B482F8;font-size:20px;">Characters I Have:</h3>
<div class="row no-gutters justify-content-center">
<div class="m-2" style="border-radius:7px;background-color:#B482F8;"><h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:25px;letter-spacing:2px;" align="center">human</h3></div>
<div class="m-2" style="border-radius:7px;background-color:#B482F8;"><h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:25px;letter-spacing:2px;" align="center">feral</h3></div>
<div class="m-2" style="border-radius:7px;background-color:#B482F8;"><h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:25px;letter-spacing:2px;" align="center">anthro</h3></div>
<div class="m-2" style="border-radius:7px;background-color:#B482F8;"><h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:25px;letter-spacing:2px;" align="center">monster</h3></div>
<div class="m-2" style="border-radius:7px;background-color:#B482F8;"><h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:25px;letter-spacing:2px;" align="center">mech</h3></div>
</div>
<div class="row no-gutters">
<!--- other --->
<div class="ml-5 mb-3" style="border-radius:7px;background-color:#B482F8;"><p class="m-1 font-weight-bold" style="color:#FFFFFF;font-size:18px;letter-spacing:1px;">other:</p></div>
<p class="m-1 font-italic" style="color:#FFFFFF;font-size:17px;letter-spacing:1px;">Other types of characters here</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--- credit, dont remove pls! --->
<a class="d-block text-muted text-center" href="https://toyhou.se/11650003.art-fight-2021-f2u-html" style="font-size:0.6em;">code by cati <i class="fad fa-rainbow"></i></a>
