vuvuzela | code

CHARACTER NAME

QUOTE/OTHER

CANON/OTHER

Header 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta neque leo, eget consequat nulla consectetur a. In pellentesque urna non iaculis posuere. Cras eu ex et massa volutpat tincidunt eu a leo. Etiam semper enim ut lacus feugiat vulputate. Fusce dapibus ligula ac condimentum iaculis. Vestibulum sodales eget eros sed pretium. Vestibulum euismod eget metus et dapibus. Nullam sodales vehicula nulla, ut molestie magna lacinia nec. Phasellus placerat vestibulum enim sed facilisis. Etiam id odio condimentum, sollicitudin diam non, fermentum felis.

Header 2

Header 3

Thing: 0
Thing: Blah
Thing: Blah
Thing: Blah

Stat 1

Stat 2

Stat 3

	Title	Title	Title
Title	1	2	3
Title	2	2	3
Title	3	2	3

Thing: 1
Thing: Blah
Thing: Blah
Thing: Blah

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta neque leo, eget consequat nulla consectetur a. In pellentesque urna non iaculis posuere. Cras eu ex et massa tincidunt eu a leo.

Thing: 2
Thing: Blah
Thing: Blah
Thing: Blah

Thing: 3
Thing: Blah
Thing: Blah
Thing: Blah

Thing: 4
Thing: Blah
Thing: Blah
Thing: Blah

Thing: 5
Thing: Blah
Thing: Blah
Thing: Blah

Thing: 6
Thing: Blah
Thing: Blah
Thing: Blah

Code

<raw-code><center><table style="width:100%;max-width:540px;font-family:verdana;font-size:10px;line-height:15px;"><tr><td>
<img src="https://78.media.tumblr.com/de98d517179b5d1f44366698cddd57a3/tumblr_inline_p4o2mreAzE1tlh0tu_540.gif" style="width:100%;">
<div style="width:49%;margin:-15% 5% 4% 8%;float:left;position:relative;z-index:10">
<div style="font-size:14px;font-style:italics;text-align:right;text-transform:uppercase;line-height:10px;">CHARACTER <b>NAME</b></div>
<div style="font-size:10px;border:2px solid black;padding:5%;">
<div style="border:1px dotted black;padding:5% 0 13% 13%;margin:0 0 -13% -13%">
<center>
<i>QUOTE/OTHER</i></center></div></div></div><div style="font-size:10px;text-align:center;text-transform:uppercase;">
CANON/OTHER
</div>

<div style="clear:both;">
<a href=""><div style="width:10.5%; color:black;border:1px dotted black;padding:2%;margin:3% 2% 0 0;float:left;text-align:center;"><img src="https://i.imgur.com/0IXlHDr.png" style="height:16px;margin:-16px;margin:2%;"><br />
PLAYER</div></a>

<a href=""><div style="width:10.5%;color:black;border:1px dotted black;padding:2%;margin:3% 2% 0 0;float:left;text-align:center;"><img src="https://i.imgur.com/QfwwEbK.png" alt="player" style="height:16px;margin:-16px;margin:2%;"><br />
IC INBOX</div></a>

<a href=""><div style="width:10.5%;color:black;border:1px dotted black;padding:2%;margin:3% 2% 0 0;float:left;text-align:center;"><img src="https://i.imgur.com/1KMhnXt.png" alt="player" style="height:16px;margin:-16px;margin:2%;"><br />
CR CHART</div></a>

<a href=""><div style="width:10.5%;color:black;border:1px dotted black;padding:2%;margin:3% 0 0 0;float:left;text-align:center;"><img src="https://i.imgur.com/BUI84FI.png" alt="player" style="height:16px;margin:-16px;margin:2%;"><br />
THREADS</div></a>

<a href=""><div style="width:10.5%;color:black;border:1px dotted black;padding:2%;margin:3% 0 0 0;float:right;text-align:center;"><img src="https://i.imgur.com/vSlaKIU.png" alt="player" style="height:16px;margin:-16px;margin:2%;"><br />
VISUALS</div></a>
</div>

<div style="clear:both;">
<a href=""><div style="width:27.5%; color:black;border:1px dotted black;padding:2%;margin:3% 2% 0 0;float:left;text-align:center;"><img src="https://i.imgur.com/0IXlHDr.png" style="height:16px;margin:-16px;margin:2%;"><br />
PLAYER</div></a>

<div style="clear:both;"><hr style="border:0;"><div style="font-size:14px;font-style:italics;text-align:left;text-transform:uppercase;line-height:10px;margin-top:3%;"><b>Header 1</b></b></div>
<div style="font-size:10px;border:2px solid black;padding:3%;margin:0 0 3% 0;">
<div style="width:100px;border:1px dotted black;padding:3%;margin:-8% 0 1% 3%;display:inline-block;float:right;">
<img src="ICONURL" style="margin:0 0px -4px 0;">
</div>

<div style="clear:both;"><div style="font-size:14px;font-style:italics;text-align:right;text-transform:uppercase;line-height:10px;"><b>Header 2</b></b></div>
<div style="font-size:10px;border:2px solid black;padding:3%;margin-bottom:6%;">
<div style="border:1px dotted black;padding:3% 3% 7.5% 7.5%;margin:0 0 -7.5% -7.5%">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta neque leo, eget consequat nulla consectetur a. In pellentesque urna non iaculis posuere. Cras eu ex et massa volutpat tincidunt eu a leo. Etiam semper enim ut lacus feugiat vulputate. Fusce dapibus ligula ac condimentum iaculis. Vestibulum sodales eget eros sed pretium. Vestibulum euismod eget metus et dapibus. Nullam sodales vehicula nulla, ut molestie magna lacinia nec. Phasellus placerat vestibulum enim sed facilisis. Etiam id odio condimentum, sollicitudin diam non, fermentum felis.

</div></div></div>

<div style="clear:both;"><div style="font-size:14px;font-style:italics;text-align:left;text-transform:uppercase;line-height:10px;"><b>Header 3</b></b></div>
<div style="width:54%;font-size:10px;border:2px solid black;padding:3.5%;margin-bottom:7%;float:left;">
<div style="border:1px dotted black;padding:3.5% 3.5% 14% 14%;margin:0 0 -14% -14%">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta neque leo, eget consequat nulla consectetur a. In pellentesque urna non iaculis posuere. Cras eu ex et massa volutpat tincidunt eu a leo. Etiam semper enim ut lacus feugiat vulputate. Fusce dapibus ligula ac condimentum iaculis. Vestibulum sodales eget eros sed pretium. Vestibulum euismod eget metus et dapibus. Nullam sodales vehicula nulla, ut molestie magna lacinia nec. Phasellus placerat vestibulum enim sed facilisis. Etiam id odio condimentum, sollicitudin diam non, fermentum felis.
</div></div>

<div style="width:30%;border:1px dotted black;margin-bottom:3%;padding:2%;float:right;">
</raw-code><b>Thing:</b> 0
<b>Thing:</b> Blah
<b>Thing:</b> Blah
<b>Thing:</b> Blah
<raw-code></div>

<div style="width:30%;border:2px solid black;margin-bottom:3%;padding:2%;float:right;">
</raw-code>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta neque leo, eget consequat nulla consectetur a. In pellent esque urna non iaculis posuere. Cras eu ex et massa volutpat titiam semper ut.  
<raw-code></div></div>

<div style="clear:both;">
<div style="margin-bottom:3%; ">
<div style="width:10%;;float:left;">Stat 1</div> <div style="width:89%;float:right;border:1px dotted black;"><div style="width:50%;height:14px;background:black;margin:-1px"></div></div><hr style="clear:both;border:0;">

<div style="clear:both;"><table style="width:100%;margin-bottom:3%;" cellspacing="10"><tr style="border-bottom:1px dotted black;">
<td></td><td>Title</td> <td>Title</td> <td>Title</td>
</tr><tr style="border-bottom:1px dotted black!important;">
<td>Title</td><td>1</td> <td>2</td> <td>3</td> 
</tr><tr style="border-bottom:1px dotted black;">
<td>Title</td><td>2</td> <td>2</td> <td>3</td> 
</tr><tr style="border-bottom:1px dotted black;">
<td>Title</td><td>3</td> <td>2</td> <td>3</td>
</tr></table></div>

<div style="clear:both;">
<div style="width:26%;border:2px solid black;margin-bottom:3%;padding:2%;float:left;">
</raw-code><b>Thing:</b> 1
<b>Thing:</b> Blah
<b>Thing:</b> Blah
<b>Thing:</b> Blah
<raw-code></div>

<div style="width:61%;border:1px dotted black;margin-bottom:3%;padding:2%;float:right;">
</raw-code>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta neque leo, eget consequat nulla consectetur a. In pellentesque urna non iaculis posuere. Cras eu ex et massa  tincidunt eu a leo. 
<raw-code></div></div>

<div style="clear:both;"><div style="width:26%;border:1px dotted black;margin:0 4.5% 3% 0;padding:2%;float:left;">
</raw-code><b>Thing:</b> 2
<b>Thing:</b> Blah
<b>Thing:</b> Blah
<b>Thing:</b> Blah
<raw-code></div>

<div style="width:26%;border:2px solid black;margin-bottom:3%;padding:2%;float:left;">
</raw-code><b>Thing:</b> 3
<b>Thing:</b> Blah
<b>Thing:</b> Blah
<b>Thing:</b> Blah
<raw-code></div>

<div style="width:26%;border:1px dotted black;margin-bottom:3%;padding:2%;float:right;">
</raw-code><b>Thing:</b> 4
<b>Thing:</b> Blah
<b>Thing:</b> Blah
<b>Thing:</b> Blah
<raw-code></div></div>

<div style="clear:both;"><div style="width:43%;border:1px dotted black;margin:0 0 3% 0;padding:2%;float:left;">
</raw-code><b>Thing:</b> 5
<b>Thing:</b> Blah
<b>Thing:</b> Blah
<b>Thing:</b> Blah
<raw-code></div>

<div style="width:43%;border:2px solid black;margin-bottom:3%;padding:2%;float:right;">
</raw-code><b>Thing:</b> 6
<b>Thing:</b> Blah
<b>Thing:</b> Blah
<b>Thing:</b> Blah
<raw-code></div></div>

</lj-cut></div></td></tr></table></raw-code>

Information
• Resizeable!!! Change the top "max-width:540px;" value to whatever size you prefer. If you go smaller, you may need to fix a few simple values.
• If you want line breaks, use <br /> once or twice.
• The live preview shows both the 3 link and 2 link navigations at once–obviously, delete whichever one you don't prefer, or delete both if you rather! If you want a different number of links, don't delete the last block when adjusting the code–it has slightly different properties.
• I strongly encourage you delete and add sections as needed. Everything should be labelled in the code with a start and end point.

code

no subject

thank you so much!!