vuvuzela | code

Live Previews

Rei Ryugazaki

<raw-code><div style="display:inline-block;width:200px;height:120px;margin:10px;vertical-align:top!important"><div style="width:10px;height:100px;margin:0px -4px 0 0;display:inline-block;margin:0;"><div style="background-color:#e0e4cc;width:100%;height:26px;margin:75px 0 0 0;"></div></div><div style="width:50px;height:100px;margin:0px -4px 0 0;display:inline-block;"><div style="background-color:#69d2e7;

width:GUAGEWIDTH1%;height:25px;margin:0px 0 0 0;float:right;"></div><div style="background-color:#a7dbd8;

width:GUAGEWIDTH2%;height:25px;margin:0px 0 0 0;float:right;"></div><div style="background-color:#f38630;

width:GUAGEWIDTH3%;height:25px;margin:0px 0 0 0;float:right;"></div><div style="background-color:#fa6900;

width:GUAGEWIDTH4;height:25px;margin:0px 0 0 0;float:right;"></div></div>

CharacterName</div></div></div></raw-code>

username

<raw-code><div style="display:inline-block;width:100px;height:150px;margin:10px;vertical-align:top!important">

<a href="http://USERNAME.dreamwidth.org/" style="color:darkgray;text-decoration:none;">USERNAME</a></div>
</div></div></raw-code>

Free!

aiichiro nitori

Friends

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor

<raw-code><div style="display:inline-block;width:120px;margin:10px;vertical-align:top!important"><div style="color:gray;font:8px courier;letter-spacing:.5px;text-align:center;margin-bottom:21px;text-transform:lowercase;">

Character Name</div><div style="width:120px;background-color:#e0e4cc;">

<a href="http://USERNAME.dreamwidth.org/" style="display:block;text-decoration:none;"><img src="http://i.imgur.com/d6SSeXn.png" style="margin:45px 5px 0px 5px;"></a></div> <div style="background-color:#a7dbd8;width:24px;height:80%;display:inline-block;margin:-2px;vertical-align:top!important"></div> <div style="background-color:#e0e4cc;width:24px;height:80%;display:inline-block;margin:-2px;vertical-align:top!important"></div> <div style="background-color:#f38630;width:24px;height:80%;display:inline-block;margin:-2px;vertical-align:top!important"></div> <div style="background-color:#fa6900;width:24px;height:80%;display:inline-block;margin:-2px;vertical-align:top!important"></div> </div>
<div style="width:120px;color:gray;font:8px courier;letter-spacing:.5px;margin-top:-15px;position:relative;z-index:-2;display:inline-block;vertical-align:top!important;">
<div style="text-align:right;font-size:12px;">STATUS</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor

</div></div></raw-code>

Rin

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.

<raw-code><div style="display:inline-block;width:230px;margin:10px;vertical-align:top!important"> <div style="width:100%;color:#e0e4cc;font:italic 72px/50px 'Impact';text-align:right;text-transform:uppercase;margin:0 0 0 0;">

Name</div><div style="display:inline-block;width:100px;margin:-15px -2px -2px -2px;vertical-align:top!important">

Free!

Momotarou Mikoshiba
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.Praesent et diam eget libero egestas mattis sit amet vitae augue.

<raw-code><div style="display:inline-block;min-width:100px;max-width:310px;margin:10px;vertical-align:top!important"><div style="width:100px;float:left;">

<img src="ICONURL"><div style="background-color:#e0e4cc;width:100px;margin-top:-4px;padding:3px 0;"><a href="#" style="display:block;text-decoration:none;"><img src="http://i.imgur.com/d6SSeXn.png" style="float:right;margin:-2.5px 0;"></a><div style="width:85%;height:10px;background-color:#f38630;"><div style="

width:GUAGEWIDTH1%;height:100%;background-color:#fa6900"></div></div><div style="clear:both;height:2px;"></div><div style="width:100%;height:10px;background-color:#a7dbd8;"><div style="

width:GUAGEWIDTH2%;height:100%;background-color:#69d2e7"></div></div></div></div>

<div style="width:200px;float:right;color:gray;font:8px courier;letter-spacing:.5px;padding:5px;">
<b>CharacterName</b> <br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.Praesent et diam eget libero egestas mattis sit amet vitae augue. 
</div></!-- end delete area -->
</div></raw-code>

Notes ⇀ Huge text naturally supports primarily short names
⇀ Makoto's is VERY fickle and you can't add any unnecessary enters or breaks. However, it is fun in that you can create a "rounding" gauge around the icon. To do so, delete ONLY the color in background-color:#[color] If you do it right, it should progress like this
⇀ Aiichiro and Momotarou don't need their lorem ipsum to work, and they can be removed.