<!---
RUBY / by cati/dogboy
NOTES
main bg color: #78797D
accent color: #7C0909
(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/abb78eeb0b984750542807f062bf5a25/tumblr_inline_ml2h7p5naW1rfdbtm.gif) 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 --->
<div class="card my-2" style="background: url(https://media1.tenor.com/images/d713bc7be65e33e69ea6f6533f6f71d9/tenor.gif?itemid=14970083); background-size:cover;background-position:center;height:315px;border:0px;"></div>
</div>
<div class="col-md-9 p-2">
<div class="justify-content-center">
<!--- name --->
<h3 class="text-uppercase font-weight-bold mb-4" style="color:#7C0909;font-size:46px;letter-spacing:1px;" align="center">name</h3>
</div>
<div class="card" style="background:#78797D;border:0px;border-radius:2px;">
<div class="row no-gutters">
<div class="col-lg-6 p-2">
<!--- column info --->
<div class="justify-content-between my-2">
<div><div style="border-radius:2px;background-color:#7C0909;"><h3 class="text-uppercase m-1 font-italic" style="color:#FFFFFF;font-size:15px;letter-spacing:2px;" align="center">nickname</h3></div></div>
<div><span class="font-italic" style="font-size:15px;letter-spacing:2px;color:#7C0909;">content</span></div>
</div>
<div class="justify-content-between my-2">
<div><div style="border-radius:2px;background-color:#7C0909;"><h3 class="text-uppercase m-1 font-italic" style="color:#FFFFFF;font-size:15px;letter-spacing:2px;" align="center">gender</h3></div></div>
<div><span class="font-italic" style="font-size:15px;letter-spacing:2px;color:#7C0909;">content</span></div>
</div>
<div class="justify-content-between my-2">
<div><div style="border-radius:2px;background-color:#7C0909;"><h3 class="text-uppercase m-1 font-italic" style="color:#FFFFFF;font-size:15px;letter-spacing:2px;" align="center">age</h3></div></div>
<div><span class="font-italic" style="font-size:15px;letter-spacing:2px;color:#7C0909;">content</span></div>
</div>
<div class="justify-content-between my-2">
<div><div style="border-radius:2px;background-color:#7C0909;"><h3 class="text-uppercase m-1 font-italic" style="color:#FFFFFF;font-size:15px;letter-spacing:2px;" align="center">specie</h3></div></div>
<div><span class="font-italic" style="font-size:15px;letter-spacing:2px;color:#7C0909;">content</span></div>
</div>
<div class="justify-content-between my-2">
<div><div style="border-radius:2px;background-color:#7C0909;"><h3 class="text-uppercase m-1 font-italic" style="color:#FFFFFF;font-size:15px;letter-spacing:2px;" align="center">status</h3></div></div>
<div><span class="font-italic" style="font-size:15px;letter-spacing:2px;color:#7C0909;">content</span></div>
</div>
<div class="justify-content-between my-2">
<div><div style="border-radius:2px;background-color:#7C0909;"><h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:15px;letter-spacing:2px;" align="center">sexuality</h3></div></div>
<div><span class="font-italic" style="font-size:15px;letter-spacing:2px;color:#7C0909;">content</span></div>
</div>
<div class="justify-content-between my-2">
<div><div style="border-radius:2px;background-color:#7C0909;"><h3 class="text-uppercase m-1 font-italic" style="color:#FFFFFF;font-size:15px;letter-spacing:2px;" align="center">occupation</h3></div></div>
<div><span class="font-italic" style="font-size:15px;letter-spacing:2px;color:#7C0909;">content</span></div>
</div>
</div>
<div class="col-lg-6 p-2">
<div class="justify-content-between my-2">
<div><div style="border-radius:2px;background-color:#7C0909;"><h3 class="text-uppercase m-1 font-italic" style="color:#FFFFFF;font-size:15px;letter-spacing:2px;" align="center">height</h3></div></div>
<div><span class="font-italic" style="font-size:15px;letter-spacing:2px;color:#7C0909;">content</span></div>
</div>
<div class="justify-content-between my-2">
<div><div style="border-radius:2px;background-color:#7C0909;"><h3 class="text-uppercase m-1 font-italic" style="color:#FFFFFF;font-size:15px;letter-spacing:2px;" align="center">weight</h3></div></div>
<div><span class="font-italic" style="font-size:15px;letter-spacing:2px;color:#7C0909;">content</span></div>
</div>
<div class="justify-content-between my-2">
<div><div style="border-radius:2px;background-color:#7C0909;"><h3 class="text-uppercase m-1 font-italic" style="color:#FFFFFF;font-size:15px;letter-spacing:2px;" align="center">hair color</h3></div></div>
<div><span class="font-italic" style="font-size:15px;letter-spacing:2px;color:#7C0909;">content</span></div>
</div>
<div class="justify-content-between my-2">
<div><div style="border-radius:2px;background-color:#7C0909;"><h3 class="text-uppercase m-1 font-italic" style="color:#FFFFFF;font-size:15px;letter-spacing:2px;" align="center">hair length</h3></div></div>
<div><span class="font-italic" style="font-size:15px;letter-spacing:2px;color:#7C0909;">content</span></div>
</div>
<div class="justify-content-between my-2">
<div><div style="border-radius:2px;background-color:#7C0909;"><h3 class="text-uppercase m-1 font-italic" style="color:#FFFFFF;font-size:15px;letter-spacing:2px;" align="center">eye color</h3></div></div>
<div><span class="font-italic" style="font-size:15px;letter-spacing:2px;color:#7C0909;">content</span></div>
</div>
<div class="justify-content-between my-2">
<div><div style="border-radius:2px;background-color:#7C0909;"><h3 class="text-uppercase m-1 font-italic" style="color:#FFFFFF;font-size:15px;letter-spacing:2px;" align="center">complexion</h3></div></div>
<div><span class="font-italic" style="font-size:15px;letter-spacing:2px;color:#7C0909;">content</span></div>
</div>
<div class="justify-content-between my-2">
<div><div style="border-radius:2px;background-color:#7C0909;"><h3 class="text-uppercase m-1 font-italic" style="color:#FFFFFF;font-size:15px;letter-spacing:2px;" align="center">affiliation</h3></div></div>
<div><span class="font-italic" style="font-size:15px;letter-spacing:2px;color:#7C0909;">content</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-8 p-2">
<div class="card p-3" style="background:#78797D;border:0px;border-radius:2px;">
<!--- weapon info --->
<h3 class="text-uppercase font-weight-bold" style="color:#7C0909;font-size:25px;letter-spacing:1px;">WEAPON NAME:
content</h3>
<h3 class="text-uppercase" style="color:#7C0909;font-size:20px;letter-spacing:1px;">WEAPON TYPE:
content</h3>
<hr style="width:70%;background-color:#7C0909;">
<span class="font-italic text-center p-2" style="font-size:15px;color:#7C0909;height:100px;overflow:auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet justo.</span>
</div>
</div>
<div class="col-lg-4 p-2">
<div class="card p-3 mt-2" style="background:#78797D;border:0px;border-radius:2px;">
<!--- stats --->
<div class="justify-content-between">
<div><div style="border-radius:2px;background-color:#7C0909;"><h3 class="text-uppercase m-1 font-italic" style="color:#FFFFFF;font-size:20px;letter-spacing:2px;" align="center">str</h3></div></div>
<div><div style="border-radius:2px;background-color:#7C0909;"><h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:20px;letter-spacing:2px;" align="center">XX</h3></div></div>
</div>
<div class="justify-content-between">
<div><div style="border-radius:2px;background-color:#7C0909;"><h3 class="text-uppercase m-1 font-italic" style="color:#FFFFFF;font-size:20px;letter-spacing:2px;" align="center">dex</h3></div></div>
<div><div style="border-radius:2px;background-color:#7C0909;"><h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:20px;letter-spacing:2px;" align="center">XX</h3></div></div>
</div>
<div class="justify-content-between">
<div><div style="border-radius:2px;background-color:#7C0909;"><h3 class="text-uppercase m-1 font-italic" style="color:#FFFFFF;font-size:20px;letter-spacing:2px;" align="center">cons</h3></div></div>
<div><div style="border-radius:2px;background-color:#7C0909;"><h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:20px;letter-spacing:2px;" align="center">XX</h3></div></div>
</div>
<div class="justify-content-between">
<div><div style="border-radius:2px;background-color:#7C0909;"><h3 class="text-uppercase m-1 font-italic" style="color:#FFFFFF;font-size:20px;letter-spacing:2px;" align="center">int</h3></div></div>
<div><div style="border-radius:2px;background-color:#7C0909;"><h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:20px;letter-spacing:2px;" align="center">XX</h3></div></div>
</div>
<div class="justify-content-between">
<div><div style="border-radius:2px;background-color:#7C0909;"><h3 class="text-uppercase m-1 font-italic" style="color:#FFFFFF;font-size:20px;letter-spacing:2px;" align="center">wis</h3></div></div>
<div><div style="border-radius:2px;background-color:#7C0909;"><h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:20px;letter-spacing:2px;" align="center">XX</h3></div></div>
</div>
<div class="justify-content-between">
<div><div style="border-radius:2px;background-color:#7C0909;"><h3 class="text-uppercase m-1 font-italic" style="color:#FFFFFF;font-size:20px;letter-spacing:2px;" align="center">char</h3></div></div>
<div><div style="border-radius:2px;background-color:#7C0909;"><h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:20px;letter-spacing:2px;" align="center">XX</h3></div></div>
</div>
</div>
</div>
<div class="col-lg-4 p-2">
<div class="card p-3 mt-2" style="background:#78797D;border:0px;border-radius:2px;">
<!--- clothing/accessories --->
<h3 class="text-uppercase font-weight-bold" style="color:#7C0909;font-size:18px;">clothing/accessories</h3>
<ul class="fa-ul" style="color:#7C0909;font-size:20px;margin-left:3px;height:105px;overflow:auto;">
<li><span><i class="fas fa-ribbon mr-1"></i></span>content</li>
<li><span><i class="fas fa-ribbon mr-1"></i></span>content</li>
<li><span><i class="fas fa-ribbon mr-1"></i></span>content</li>
<li><span><i class="fas fa-ribbon mr-1"></i></span>content</li>
<li><span><i class="fas fa-ribbon mr-1"></i></span>content</li>
<li><span><i class="fas fa-ribbon mr-1"></i></span>content</li>
<li><span><i class="fas fa-ribbon mr-1"></i></span>content</li>
</ul>
</div>
</div>
<div class="col-lg-8 p-2">
<!--- semblance info --->
<div class="card p-3" style="background:#78797D;border:0px;border-radius:2px;">
<h3 class="text-uppercase font-weight-bold" style="color:#7C0909;font-size:25px;letter-spacing:1px;">SEMBLANCE NAME:
content</h3>
<h3 class="text-uppercase" style="color:#7C0909;font-size:20px;letter-spacing:1px;">SEMBLANCE EFFECTS:</h3>
<span class="font-italic text-center p-2" style="font-size:15px;color:#7C0909;height:100px;overflow:auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet justo.</span>
</div>
</div>
<div class="col-lg-12 p-2">
<!--- biography --->
<div class="card p-3" style="background:#78797D;border:0px;border-radius:2px;">
<h3 class="text-uppercase font-weight-bold" style="color:#7C0909;font-size:25px;letter-spacing:1px;">BIOGRAPHY</h3>
<span class="font-italic text-center p-2" style="font-size:15px;color:#7C0909;height:150px;overflow:auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet justo.</span>
<hr style="width:90%;background-color:#7C0909;">
<div class="row no-gutters mt-2">
<!--- relationships, to add more highlight <div class="col-md-3" and highlight until the </div> of the next col-md-3 --->
<div class="col-md-3">
<img class="fr-rounded mx-auto d-flex" style="width:120px;" src="https://64.media.tumblr.com/00a4f144da47d1d39f2a8d2ba6f6df17/tumblr_p49zmgc8Nz1vy2tgqo1_250.jpg">
<h3 class="text-uppercase text-center mt-1"><a href="URLHERE" style="color:#7C0909;font-size:20px;letter-spacing:1px;">Name</a></h3>
<h3 class="text-uppercase text-center font-italic" style="color:#7C0909;font-size:13px;">relationship</h3>
</div>
<div class="col-md-3">
<img class="fr-rounded mx-auto d-flex" style="width:120px;" src="https://64.media.tumblr.com/00a4f144da47d1d39f2a8d2ba6f6df17/tumblr_p49zmgc8Nz1vy2tgqo1_250.jpg">
<h3 class="text-uppercase text-center mt-1"><a href="URLHERE" style="color:#7C0909;font-size:20px;letter-spacing:1px;">Name</a></h3>
<h3 class="text-uppercase text-center font-italic" style="color:#7C0909;font-size:13px;">relationship</h3>
</div>
<div class="col-md-3">
<img class="fr-rounded mx-auto d-flex" style="width:120px;" src="https://64.media.tumblr.com/00a4f144da47d1d39f2a8d2ba6f6df17/tumblr_p49zmgc8Nz1vy2tgqo1_250.jpg">
<h3 class="text-uppercase text-center mt-1"><a href="URLHERE" style="color:#7C0909;font-size:20px;letter-spacing:1px;">Name</a></h3>
<h3 class="text-uppercase text-center font-italic" style="color:#7C0909;font-size:13px;">relationship</h3>
</div>
<div class="col-md-3">
<img class="fr-rounded mx-auto d-flex" style="width:120px;" src="https://64.media.tumblr.com/00a4f144da47d1d39f2a8d2ba6f6df17/tumblr_p49zmgc8Nz1vy2tgqo1_250.jpg">
<h3 class="text-uppercase text-center mt-1"><a href="URLHERE" style="color:#7C0909;font-size:20px;letter-spacing:1px;">Name</a></h3>
<h3 class="text-uppercase text-center font-italic" style="color:#7C0909;font-size:13px;">relationship</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<!--- credit, dont remove pls! --->
<a class="d-block text-muted text-center" href="https://toyhou.se/8744773.ruby-f2u-html" style="font-size:0.6em;">code by cati <i class="fad fa-rainbow"></i></a>
