cawaii | 14th: following

A code based on Twitter profiles!

Dunya Musta'sim
Magi: The Labyrinth of Magic
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

usernamehere
username

dyspros
game

yanyan
player

♥

Following

Character Name @username
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis odio eu metus pretium et interdum mauris pellentesque. Nunc sed ante odio porta.

♥

TOP

<raw-code>
<div style="background: url(BACKGROUND URL HERE, IDEALLY 320PX BY 520PX); height: 320px; width: 520px; border-radius: 10px; box-shadow: 0px 1px 3px #333;">

<div style="height: 270px; width: 100%; background: linear-gradient(transparent 36%, rgba(0,0,0,0.40)); text-align: center;">
<div style="padding-top: 30px;"><img src="IMAGE URL HERE" style="height: 73px; width: 73px; border: 4px solid #fff; border-radius: 10px; box-shadow: 0px 1px 2px #000;">
<br/>
<span style="font-family: helvetica, arial, sans-serif; color: #fff; text-shadow: 0px 1px 2px #000;">
<span style="font-size: 24px; font-weight: bold;">Character</span>
<br/><span style="font-size: 18px;">Canon</span>
<br/><span style="font-size: 14px;">Description text here.</span>
</span>
</div>
</div>

<div style="background: #fff; height: 50px; width: 520px; text-align: left; border-radius: 0px 0px 10px 10px;">

<div style="float: left; height: 42px; padding: 8px 10px 0px 10px; border-right: 1px solid #e5e5e5;">
<a href="LINK HERE" style="text-decoration: none;"><span style="font-family: helvetica, arial, sans-serif; font-size: 12px; color: #3c3c3c; font-weight: bold;">USERNAME HERE</span></a>
<br/>
<span style="font-family: helvetica, arial, sans-serif; font-size: 10px; color: #aeaeae; text-transform: uppercase;">USERNAME</span>
</div>

<div style="float: left; height: 42px; padding: 8px 10px 0px 10px;">
<a href="LINK HERE" style="text-decoration: none;"><span style="font-family: helvetica, arial, sans-serif; font-size: 12px; color: #3c3c3c; font-weight: bold;">USERNAME HERE</span></a>
<br/>
<span style="font-family: helvetica, arial, sans-serif; font-size: 10px; color: #aeaeae; text-transform: uppercase;">PLAYER</span>
</div>

</div>

</div>
</raw-code>

BOTTOM

<raw-code>
<div style="background: #fff; width: 520px; border-radius: 10px; box-shadow: 0px 1px 3px #333; text-align: left;">

<div style="height: 40px; width: 510px; padding: 10px 0px 0px 10px; border-bottom: 1px solid #e5e5e5;">
<span style="font-family: helvetica, arial, sans-serif; font-size: 20px; color: #3c3c3c; font-weight: bold;">Following</span>
</div>

<div style="height: 64px; width: 510px; padding: 10px 0px 0px 10px; border-bottom: 1px solid #e5e5e5;">
<div style="float: left;"><img src="IMAGE URL HERE" style="height: 48px; width: 48px; border-radius: 10px;"></div>
<div style="float: left; width: 450px; margin-left: 10px;">
<span style="font-family: helvetica, arial, sans-serif; font-size: 12px; color: #3c3c3c;"><b style="font-size: 14px;">Character Name</b> <span style="font-size: 11px; color: #aeaeae;">@username</span>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis odio eu metus pretium et interdum mauris pellentesque. Nunc sed ante odio porta.</span>
</div>
</div>

</div>
</raw-code>

ADDITIONAL "FOLLOWERS"

1. Ideal background size is 320px by 520px. To make an image repeat, add the part in blue to the code:

background: url(IMAGE URL HERE) repeat;

There is no need to add a gradient to the image; the code does that for you.
2. For the Following portion of the code, keep the text at two lines or less.
3. You may change the ♥ (&hearts; in the code) to whatever symbol or image you want!
4. Use this code however you want. Let me know if something screws up!

14th: following

no subject