NOTES:
- To change the subtitle font size, ctrl+f 3.0em and replace it with 1.6em or 1.0em or really any value lesser than 3.0.
- If you don't want greyscale background images, just remove -webkit-filter: grayscale(1);
- Image size should be at least 400px by 400px.
- Remember to add [br/] tags at the end of every linebreak (with proper punctuation like u kno).
- a name="LINK1" is the name of your "tab", a href="#LINK1" is how you link to the tab. Replace LINK1 with your desired name, and so on. Both pairs have to match, leave the # in front of the target.
- Ideally works for three tabs, but feel free to edit the hell out of this.

- - - - -

( live preview under the cut. )

- - - - -

CODE FOR "MIKE"
<table style="font-family: Helvetica, Optima, Arial, sans-serif; font-size: 10pt; text-transform: uppercase;"><tr><td colspan="5" style="text-align: center; padding: 10px; font-weight: 100;"><span style="font-size: 4em; letter-spacing: 8pt;"><a name="top"></a>SOME TITLE</span></td></tr> <tr><td colspan="4" style="text-align: center; padding: 20px 0 30px 0; font-weight: 100;"><span style="letter-spacing: 1pt;"><a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a><a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a></span></td></tr> <!-- THE RED HEADER TEXT --!> <tr><td colspan="4" style="padding: 20px 0 0 0; line-height: 1.8em;"><a name="faves"></a><span style="color: #ff0000; font-size: 4em; letter-spacing: -3pt; padding: -10pt;"><a href="#top" style="text-decoration: none; color: #ff0000;">↺</a>YOUR CATEGORY</span><hr style="border: 1px solid #ff0000;" /></td></tr> <!-- WHERE YOUR CHARACTERS GO --!> <tr><td style="text-align:center; padding:5px 0 15px 0; width:150px;"><img src="IMG URL" style="border-radius: 50%; padding: 10px 20px;"><br/>CHARACTERNAME<br/><small><b>CANON</b><br/>( <a href="http://USERNAME.dreamwidth.org/profile" style="text-decoration: none; color: #ff0000;"><b>JOURNAL</b></a> )</td> <td style="text-align:center; padding:5px 0 15px 0; width:150px;"><img src="IMG URL" style="border-radius: 50%; padding: 10px 20px;"><br/>CHARACTERNAME<br/><small><b>CANON</b><br/>( <a href="http://USERNAME.dreamwidth.org/profile" style="text-decoration: none; color: #ff0000;"><b>JOURNAL</b></a> )</td> <td style="text-align:center; padding:5px 0 15px 0; width:150px;"><img src="IMG URL" style="border-radius: 50%; padding: 10px 20px;"><br/>CHARACTERNAME<br/><small><b>CANON</b><br/>( <a href="http://USERNAME.dreamwidth.org/profile" style="text-decoration: none; color: #ff0000;"><b>JOURNAL</b></a> )</td> <td style="text-align:center; padding:5px 0 15px 0; width:150px;"><img src="IMG URL" style="border-radius: 50%; padding: 10px 20px;"><br/>CHARACTERNAME<br/><small><b>CANON</b><br/>( <a href="http://USERNAME.dreamwidth.org/profile" style="text-decoration: none; color: #ff0000;"><b>JOURNAL</b></a> )</td></tr></table>


- - - - - - -




- - - - -

( live preview under the cut. )

- - - - -

CODE FOR "JULIE"
<raw-code><table style="font-family: Calibri, Segoe, 'Segoe UI', Optima, Arial, sans-serif; text-transform: uppercase;"><tr><td colspan="4" style="text-align: center; padding: 10px; font-weight: 100;"><span style="font-size: 4em; letter-spacing: 8pt;">HEADER TITLE</span></td></tr> <!-- YOUR MENU LINKS --!> <tr><td colspan="4" style="text-align: center; padding: 20px 0 30px 0; font-weight: 100;"><span style="letter-spacing: 1pt;"><a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a></span></td></tr> <!-- YOUR CHARACTERS COME IN AFTER THIS LINE --!> <a name="LINK"></a> <tr><td style="text-align: center; padding:10px; width:100px;"><div style="width: 100px; height: 100px; align: float; position: relative; background: #ff00ff; background-position: center; background-repeat: no-repeat; border-radius: 50%;"> <div style="width: 100px; height: 100px; background: url(IMG URL); position: relative; border-radius: 50%; opacity: 0.6;"></div></div><br/>CHARACTERNAME<br/><small><a href="URL" style="text-decoration: none; color: #353535;"><b>JOURNAL</b></a></td><td style="text-align: center; padding:10px; height: 100px; width:100px;"><div style="width: 100px; height: 100px; align: float; position: relative; background: #ff00ff; background-position: center; background-repeat: no-repeat; border-radius: 50%;"> <div style="width: 100px; height: 100px; background: url(IMG URL); position: relative; border-radius: 50%; opacity: 0.6;"></div></div><br/>CHARACTERNAME<br/><small><a href="URL" style="text-decoration: none; color: #353535;"><b>JOURNAL</b></a></td><td style="text-align: center; padding:10px; width:100px;"><div style="width: 100px; height: 100px; align: float; position: relative; background: #ff00ff; background-position: center; background-repeat: no-repeat; border-radius: 50%;"> <div style="width: 100px; height: 100px; background: url(IMG URL); position: relative; border-radius: 50%; opacity: 0.6;"></div></div><br/>CHARACTERNAME<br/><small><a href="URL" style="text-decoration: none; color: #353535;"><b>JOURNAL</b></a></td><td style="text-align: center; padding:10px; width:100px;"><div style="width: 100px; height: 100px; align: float; position: relative; background: #ffb2ff; background-position: center; background-repeat: no-repeat; border-radius: 50%;"> <div style="width: 100px; height: 100px; background: url(IMG URL); position: relative; border-radius: 50%; opacity: 0.6;"></div></div><br/>CHARACTERNAME<br/><small><a href="URL" style="text-decoration: none; color: #353535;"><b>JOURNAL</b></a></td></TR></table></raw-code>

NOTES:
— ask if something messes up etc etc
— FOR MIKE: the refresh text icon thingie automatically links to the top of the table.
— FOR JULIE: if you want to replace the color overlay thing, ctrl+f #ff00ff and replace it with the hex code of your choice.
— [a name=""] tags are for linking within the same table/document; if you want to just link out to a different page for the top menu, just replace name with href.
— if you're linking within the table, make sure your target name and target link match! don't remove the # sign if you do. just replace the word.

( live preview under the cut. )

- - - - -
THE CODE
<center><br/><br/><raw-code><table style="color: #111; font-family: helvetica, arial, sans-serif; font-size: 9pt; letter-spacing: 1pt;"><tr><td style="background: url(BACKGROUND IMG URL); background-position: center center; height: 140px; width: 400px;"> <div style="width: 400px; height: 160px;"><div style="width: 140px; height: 140px; text-align: left; display: inline-block;"> <div style="border: 5px solid #fff; height: 100px; width: 100px; background: url(ICON URL); border-radius: 50%; margin: 20px;"></div></div> <div style="width: 150px; height: 100px; padding: 20px 10px 0px 10px; float: left; margin-top: -140px; margin-left: 126px;"> <div style="width: 240px; height: 160px; color: #fff; font-weight: bolder; font-size: 2.4em; padding: 5px; text-align: justify;">THIS IS YOUR HEADER.</div></div></div></td><td rowspan="4" style="padding: 0 16px; vertical-align: top; width: 200px;"><a href="URL" style="background: #000; color: #fff; font-size:1.8em;font-weight:bolder; padding: 2px; text-decoration: none;">LINKTEXT</a><br/> <a href="URL" style="background: #000; color: #fff; font-size:1.8em;font-weight:bolder; padding: 2px; text-decoration: none;">LINKTEXT</a><br/> <a href="URL" style="background: #000; color: #fff; font-size:1.8em;font-weight:bolder; padding: 2px; text-decoration: none;">LINKTEXT</a><br/> <a href="URL" style="background: #000; color: #fff; font-size:1.8em;font-weight:bolder; padding: 2px; text-decoration: none;">LINKTEXT</a><br/> <a href="URL" style="background: #000; color: #fff; font-size:1.8em;font-weight:bolder; padding: 2px; text-decoration: none;">LINKTEXT</a><br/> <p style="text-align:justify; font-size: 0.9em; padding: 10px 0;">SMALLTEXT BLURB GOES HERE</p></td></tr> <tr><td style="background: #fff; width: 400px; height: auto; padding: 20px 8px 0 8px; text-align:justify;"><span style="color: #000; font-size:2.0em;font-weight:bolder; padding: 2px;">HEADER TITLE HERE</span><br/><span style="color: #FF0000; font-size:1.6em;font-weight:bolder; padding: 2px;">HEADER SUBTITLE HERE</span></td></tr> <tr><td style="background: #fff; width: 400px; height: auto; padding: 20px 12px 20px 12px; text-align:justify;">MAIN TEXT GOES HERE.</td></tr> <tr><td width="400"></td></tr></table></raw-code><Br/><Br/></center>

NOTES:
— Yell in my direction if something messes up.
— This is in raw-code, which means DW's autoformatted returns (that's when you hit enter to linebreak) don't work. If you want linebreaks, just add [br/] at the end of the line (replace the brackets with the correct symbols). Do two of those for spacing.
— Edit to your heart's content, credit not required, just don't claim the code as your own.

	det. rustin cohle
	offbook true detective
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
	information application visuals

<raw-code><table style="background: #fff; color: #333; font-family: sans-serif; letter-spacing: 1pt; text-align: justify;"><tr><td style=" width: 160px; padding: 25px 20px 10px 20px; vertical-align: top; align: center;" rowspan="4"><img src="IMGURL" style="border: 1px solid #999; padding: 10px;" width="140"></td><td style="padding: 10px 5px 0 0; font-family: 'Georgia', 'Cambria', serif; font-style: italic; font-size: 20pt; text-shadow: 2px 1px 1px #c9c9c9; vertical-align: middle;" width="300" height="20">CHARACTERNAME</td></tr> <tr><td style="color: #999; padding: 5px 5px 5px 0; vertical-align: top;" width="300"><a href="JOURNALURL" style="color: #111; font-weight: bolder; text-decoration: none; text-transform: uppercase;">JOURNALNAME</a><br />CANON</td></tr> <tr><td style="padding: 5px 20px 5px 0; vertical-align: top;" width="300">BLURBTEXT</td></tr> <tr><td style="color: #111; padding: 10px 20px 20px 0; vertical-align: top;" width="300"><a href="LINKURL" style="background-color: #16acda; color: #fff; padding: 8px; text-decoration: none; text-transform: uppercase; border-radius: 6px;">LINKTEXT</a></td></tr></table></raw-code>

#16acda #333333 #c9c9c9

— inspired by polyvore's profile info bar
— no divs, because man screw divs
— the userpic auto-resizes to 140px by 140px
— tested on firefox and chrome