vuvuzela | code

Live previews

Marco Bodt	Marco Bodt	Marco Bodt longusername ▌▌▌▌
<raw-code><div style="width:120px;margin:0 auto"><div style="width:110px;border-left:5px solid #abc97a;border-radius:55px 55px 0 13px;padding-bottom:0px;"> <img src="IMAGEURL" style="border-radius:50px 50px 0 0;margin:0px;position:relative;z-index:-1;"> <div style="width:100%;height:8px;background-color:#abc97a;color:#333;font-family:courier new; font-size:10px;text-transform:uppercase;text-align:center;line-height:10px;margin-top:-12px;border-radius:0 10px 10px 0;"> CHARACTERNAME</div> <div style="padding:0 10px 0 3px;"><div style="height:4px; width:PERCENTAGE%;background-color:#333;border-radius:0 0 20px 20px;"></div></div></div></div></raw-code>	<raw-code><div style="width:120px;margin:0 auto"><div style="width:110px;border-left:5px solid #abc97a;border-radius:55px 55px 0 15px;padding-bottom:0px;"> <img src="IMAGEURL" style="border-radius:50px 50px 0 0px;margin:0px;position:relative;z-index:-1;"><div style="width:100%;height:9px;background-color:#333;color:white;font-family:courier new; font-size:10px;text-transform:uppercase;text-align:center;line-height:10px;margin-top:-8px;border-radius:0 10px 10px 20px;"> CHARACTERNAME</div> <div style="padding:0 10px 0 3px;"><div style="height:10px; width:PERCENTAGE%;background-color:#abc97a;border-radius:0 0 20px 20px;margin:-7px 0 0 -2px;position:relative;z-index:-1;"></div> </div> </div></div> </raw-code>	<raw-code><div style="width:120px;margin:0 auto"> <img src="IMAGEURL" style="border-radius:80px 17px 17px 17px;" /><div style="margin:-32px 0 32px 0;text-align:right;position:relative;z-index:100px;opacity:.8;"><div style="float:left;"><div style="min-width:120px;background-color:#abc97a;height:9px;color:black;font-family:century gothic;font-size:16px;line-height:6px;border-radius:0 10px 10px 0;padding:0px 5px;letter-spacing:-.8px;"> CHARACTERNAME</div><div style="float:left;"><div style="background-color:white;color:black;font-family:courier new;font-size:10px;line-height:10px;text-align:right;float:right;border-radius:0 0 5px 5px;padding:0px 3px;"> <a href="http://USERNAME.dreamwidth.org/" style="color:#474747;text-decoration:none;"> USERNAME</a></div><div style="background-color:white;height:6px;float:right;font-size:10px;color:#abc97a;line-height:0px;position:relative;z-index:100;border-bottom:1px solid white;overflow:hidden;" /> ▌▌▌▌</div></div></div></div></div></raw-code>

m a r c o - b o d t username	m a r c o - b o d t username Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris bibendum odio eu tempus iaculis. Quisque sit amet imperdiet urna.	u s e r n a m e Character name \| Other info Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris bibendum odio eu tempus iaculis. Quisque sit amet imperdiet urna.
<raw-code><div style="width:120px;margin:0 auto;"><div style="width:6px;background-color:#333;font-family:courier new;text-transform:uppercase;line-height:10px;border-radius:20px 0 0 20px;padding:10px 2px;float:left;"><a href="" style="text-decoration:none;color:white;"> CHARACTERNAME-WITHSPACES</a></div><div style="width:6px;height:130px;background-color:#333;border:2px solid #333;border-radius:0px 0px 10px 10px;float:left;"><div style="width:100%; height:PERCENTAGE%;background-color:#abc97a;border-radius: 0 0 20px 20px;"></div> </div> <img src="IMAGEURL" style="border-radius:0 50px 20px 0;"><div style="width:110px;text-align:justify;margin-left:12px;"><div style="width:100px;height:10px;background-color:#abc97a;color:#333;font-family:courier new;font-size:10px;text-transform:uppercase;text-align:;line-height:11px;border-bottom:2px solid #333;border-radius:0 20px 20px 0;margin:-10px 0 3px 8px;position:relative;z-index:100px;padding-left:5px;"> <a href="http://USERNAME.dreamwidth.org" style="color:#333;font-family:courier new"> USERNAME</div></div></div></raw-code>	<raw-code><div style="width:120px;margin:0 auto;"><div style="width:6px;background-color:#333;color:white;font-family:courier new!important;text-transform:uppercase;line-height:10px;border-radius:20px 0px 0 20px;padding:10px 2px;float:left;"> CHARACTERNAME-WITHSPACES</div><div style="width:6px;height:170px;background-color:#333;border:2px solid #333;border-radius:0px 0px 10px 10px;float:left;"><div style="width:100%; height:PERCENTAGE%;background-color:#abc97a;border-radius: 0 0 20px 20px;"></div></div> <img src="IMAGEURL" style="border-radius:0 50px 20px 0;"><div style="width:110px;text-align:justify;margin-left:12px;"><div style="width:100px;height:10px;background-color:#abc97a;color:#333;font-family:courier new;font-size:10px;text-transform:uppercase;line-height:11px;border-bottom:2px solid #333;border-radius:0 20px 20px 0;margin:-10px 0 3px 8px;position:relative;z-index:100px;padding-left:5px;"> <a href="http://USERNAME.dreamwidth.org" style="color:#333;font-family:courier new"> USERNAME</a></div><div style="font-family:century gothic;font-size:8px;padding-left:10px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris bibendum odio eu tempus iaculis. Quisque sit amet imperdiet urna. </div></div></div></raw-code>	<raw-code><div style="width:220px;margin:0 auto"><div style="width:6px;background-color:#333;font-family:courier new;text-transform:uppercase;line-height:10px;border-radius:20px 0 0 20px;padding:10px 2px;float:left;"> <a href="" style="text-decoration:none;color:white;"> USERNAME-WITHSPACES</a></div><div style="width:6px;height:130px;background-color:#333;border:2px solid #333;border-radius:0px 0px 10px 10px;float:left;"><div style="width:100%; height:PERCENTAGE%;background-color:#abc97a;border-radius: 0 0 20px 20px;"></div> </div> <img src="IMAGEURL"><img src="http://i.imgur.com/C3roEad.png" style="border-radius:0 50px 20px 0;"><div style="width:210px;text-align:justify;margin-left:12px;"><div style="width:200px;height:10px;background-color:#abc97a;color:#333;font-family:courier new;font-size:10px;text-transform:uppercase;text-align:;line-height:11px;border-bottom:2px solid #333;border-radius:0 20px 20px 0;margin:-10px 0 3px 8px;position:relative;z-index:100px;padding-left:5px;"> CHARACTERNAME \| INFORMATION</div><div style="font-family:century gothic;font-size:10px;padding-left:10px;width:90%"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris bibendum odio eu tempus iaculis. Quisque sit amet imperdiet urna. </div></div></div></raw-code>

Notes⇀ The little tiny bar at the bottom of the first two codes is a gauge and can be made longer or shorter, but if you're not into that it looks like a cute design on 50%
⇀ Similarly, the maximum of the gauges on the bottom sets of code can be made longer and shorter if your lorem ipsum text is longer than what I have. They're set to either 130px or 170px.
⇀ Make sure for the second set of codes that you put spaces between each letter, like "m a r c o - b o d t", on the vertical line or it won't do what it needs to do in the code.