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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta neque leo, eget consequat nulla consectetur a. In pellent esque urna non iaculis posuere.

Stat 1

Stat 2

Stat 3

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

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

<raw-code><center><table style="width:100%;max-width:540px;"><tr><td><div style="font-family:verdana;font-size:10px;line-height:15px;">
<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;margin-bottom:3%;">
CANON/OTHER
</div>

<div style="display: grid;  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;align-items: top;gap: 3%;margin:0 auto;padding:0 0 2% 5%;">

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

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

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

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

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

</div>

<div style="display: grid;  grid-template-columns: 1fr 1fr 1fr;align-items: top;gap: 3%;margin:0 auto;padding:1% 0 1% 5%;">

</div>

</raw-code></div><center><lj-cut text="Permissions"></center><raw-code>

<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 4% 0;">
<div style="border:1px dotted black;padding:3%;margin:-8% 0 1% 3%;display:inline-block;float:right;">
<img src="https://i.imgur.com/wqCvbFW.png" style="margin:0 0px -4px 0;">
</div>

<div style="font-size:14px;font-style:italics;text-align:right;text-transform:uppercase;line-height:10px;"><b>Header 2</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 style="display: grid;  grid-template-columns: 2fr 1fr;align-items: top;gap: 3%;margin:5% auto;padding:10px 0;"><div style="grid-area: 1 / 1 / 3 / 2;"><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:100%;font-size:10px;border:2px solid black;">
<div style="border:1px dotted black;padding: 4.5% 5.5% 11% 11%;  margin: 5% 5% -6% -6%;">
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. Vivamus porta neque leo, eget consequat nulla consectetur a. In pellent esque urna non iaculis posuere. 
</div></div>
</div>

<div style="border:1px dotted black;margin:10px 0 5% 0;padding:9%;">
</raw-code><b>Thing:</b> 0
<b>Thing:</b> Blah
<b>Thing:</b> Blah
<b>Thing:</b> Blah
<raw-code></div>

<div style="border:2px solid black;margin-bottom:3%;padding:9%;">
</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. 
<raw-code></div></div>

<div style="display: grid;  grid-template-columns: max-content auto;align-items: center;gap: 15px 3%;margin-bottom:15px;">

</div>

<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 style="display: grid;  grid-template-columns: 1fr 2fr;align-items: top;gap: 3%;padding:10px 0;">
<div style="border:2px solid black;padding:10%;">
</raw-code><b>Thing:</b> 0
<b>Thing:</b> Blah
<b>Thing:</b> Blah
<b>Thing:</b> Blah
<raw-code></div>

<div style="border:1px dotted black;padding:5%;">
</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 volutpat tincidunt eu a leo. Etiam semper enim ut lacus feugiat vulputate.
<raw-code></div></div>

<div style="display: grid;  grid-template-columns: 1fr 1fr 1fr;align-items: top;gap: 3%;padding:10px 0;">
<div style="border:1px dotted black;padding:10%;">
</raw-code><b>Thing:</b> 0
<b>Thing:</b> Blah
<b>Thing:</b> Blah
<b>Thing:</b> Blah
<raw-code></div>

<div style="border:2px solid black;padding:10%;">
</raw-code><b>Thing:</b> 0
<b>Thing:</b> Blah
<b>Thing:</b> Blah
<b>Thing:</b> Blah
<raw-code></div>

<div style="border:1px dotted black;padding:10%;">
</raw-code><b>Thing:</b> 0
<b>Thing:</b> Blah
<b>Thing:</b> Blah
<b>Thing:</b> Blah
<raw-code></div>

</div>

<div style="display: grid;  grid-template-columns: 2fr 1fr;align-items: top;gap: 3%;padding:10px 0;">

<div style="border:2px solid black;padding:10%;">
</raw-code><b>Thing:</b> 0
<b>Thing:</b> Blah
<b>Thing:</b> Blah
<b>Thing:</b> Blah
<raw-code></div></div>

</div></lj-cut></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 – delete whichever one you don't prefer, or delete both!
• I strongly encourage you delete and add sections as needed. Everything should be labelled in the code with a start and end point.
• Recoded as if 12 Dec 2025.

code

no subject

thank you so much!!