<!--
Code by Hiilumaru!
colors:
borders/text: black
boxes: white
-->
<div class="card mx-auto" style="max-width:500px; font-family: ms gothic; font-size:8pt; color:black; border: 3px double black; border-radius:0; background-image:url(
BGHERE.COM/URL
)">
<!-- Top banner -you may need to adjust height by changing the padding (the 3 in pt-3) to a number from 0 to 5 -->
<div class="pt-3" style="height:0; width:100%; position: absolute: top:0; left:0; background-image:url(
BANNERHERE.COM/URL
);background-repeat: repeat-x;"></div>
<div class="row no-gutters px-3">
<!-- Left column -->
<div class="col-md-6 ml-md-3 pr-md-3 text-center">
<!-- name -->
<div style="font-size:14pt; text-shadow:1px 1px 0px white, -1px 1px 0px white, 1px -1px 0px white, -1px -1px 0px white">
<B>NAME HERE</B>
</div>
<!-- info -->
<div class="mb-2 p-1 text-left" style="background:white; border: 3px double; border-radius:0; max-height:150px; overflow:auto;">
write abt yourself here!! this box scrolls once it gets kinda long. go <a href="http://patorjk.com/text-color-fader/">here</a> for a rainbow gradient text generator to make the name pretty
</div>
<!-- Box 2 -->
<div class="my-2 p-2 text-left" style="background:white; border: 3px double; border-radius:0; min-height:100px;">
<div class="float-left card mr-2" style="height:75px; width:50%; max-width:100px; background-image: URL(
ICONHERE.COM/URL
); background-size:cover; border:1px solid; border-radius:0;"></div>
<span style="font-weight:bold;">TITLE</span><br>
<span>dni list, byf, or whatever but there's a little picture next to it this time :D yippee</span>
</div>
</div>
<!-- Right column -->
<div class="col-md-5 order-md-first">
<!-- Music player -->
<div class="my-2 p-0 text-center" style="background:white; border: 3px double; border-radius:0; max-height:200px; overflow:auto;">
<audio controls="" style="opacity:0.5; width:100%; height:25px;"><source src="MP3 LINK"></audio>
<span style="">SONG - ARTIST</span>
</div>
<div class="row no-gutters">
<!-- Trade status - copy paste these! ✘ ✔ -->
<div class="col my-2 mr-3 p-1 text-left" style="background:white; border: 3px double; border-radius:0; max-height:200px; overflow:auto;">
Comms <a href="COMM INFO LINK" style="color:black;">[x]</a> <br>
Trades ✘ <br>
Requests ✘ <br>
DMs ✔
</div>
<!-- Friends - use mini pixels if you have a lot of friends-->
<div class="col my-2 p-1 text-center" style="background:white; border: 3px double; border-radius:0; max-height:200px; overflow:auto;">
Friends <br>
<a href="FRIEND URL"><img src="FRIEND PIXEL"></a>
<a href="FRIEND URL"><img src="FRIEND PIXEL"></a>
<a href="FRIEND URL"><img src="FRIEND PIXEL"></a>
<a href="FRIEND URL"><img src="FRIEND PIXEL"></a>
</div>
</div>
<!-- Links -->
<div class="my-2 p-0 text-left" style="background:white; border: 3px double; border-radius:0;">
<div class="p-1" style="width:100; border-bottom:1px solid;"><a href="LINK 1"><img src="ICON"> LINK 1</a></div>
<div class="p-1" style="width:100; border-bottom:1px solid;"><a href="LINK 2"><img src="ICON"> LINK 2</a></div>
<div class="p-1" style="width:100; border-bottom:1px solid;"><a href="LINK 3"><img src="ICON"> LINK 13</a></div>
<div class="p-1" style="width:100;"><a href="LINK 4"><img src="ICON"> LINK 4</a></div>
</div>
</div>
</div>
<!-- Bottom banner - you may need to adjust height by changing the padding (the 4 in pb-4) to a number from 0 to 5 -->
<div class="pb-4 text-right" style="height:0; width:100%; position: absolute: bottom:0; left:0; background-image:url(
BANNERLINK.COM/URL
);background-repeat: repeat-x;">
</div>
<!-- pagedoll -->
<div class="col d-none d-md-block"><img src="
PAGEDOLLLINK.COM/URL
" style="max-width:200px; z-index:999;position:absolute; right:-125px; bottom:-50px;"></div>
</div>
<div class="mx-auto text-center"><a href="https://toyhou.se/Hiilumaru/characters/folder:2492566" style="font-size:7pt; color:black; text-shadow:1px 1px 0px white, -1px 1px 0px white, 1px -1px 0px white, -1px -1px 0px white"><i class="fa fa-code"></i></a></div>