cawaii | 19th: cocoon

<raw-code>

<div style="display: inline-block; margin-right: 4px; width: 120px; height: 320px; background: url(120px BY 320px IMAGE HERE); border-radius: 10px; box-shadow: 2px 2px 4px #333; overflow: hidden;">

<div align="right" style="position: relative; top: 4px; right: -3px; width: 114px;"><span style="font: 11px 'gill sans mt',  calibri, tahoma, sans-serif; color: #fff; text-shadow: #333 1px 1px 0px; text-transform: uppercase;">Canon Here</span></div>

<div style="position: relative; bottom: -216px;">
<div align="left" style="position: relative; left: 4px;"><span style="font: bold 11px 'gill sans mt',  calibri, tahoma, sans-serif; color: #fff; text-shadow: #333 1px 1px 0px; text-transform: uppercase;">Username</span></div>

<div align="right" style="position: relative; top: -5px; right: -3px; width: 114px;">
<a href="LINK" style="text-decoration: none;"><span style="font: 11px 'gill sans mt',  calibri, tahoma, sans-serif; color: #fff; text-shadow: #333 1px 1px 0px; text-transform: uppercase;">USERNAME HERE</span></a>
</div>

</div>

</raw-code>

NOTES
1. Ideal image size is 120px by 320px.
2. Longer names and canons will knock the username and game portions, so you may have to increase this part of the code: bottom: -216px;
3. The code only comes with one bar. You need to copy and paste the code in between the comment tags (START CODE and END CODE) to make it look like the code above.
4. To get an "inactive" effect, add opacity: x; right after overflow: hidden;, where x is any value between 0 (completely transparent) to 1 (opaque).
5. Use this code however you want. Let me know if something screws up!