writin' down all these verbs and i don't know why

[Code] Customizable and Clickable Chocolate Frog Card HTML Template

Wed, 31 Aug 2011 03:08:55 GMT

Live Example

Wizard Rocker

12 May 1958

Taking keen interest in the guitar at an early age, Jonas was born a musician. His first band For the Love of Zeus was a huge success and paved a path for a quick turn around on a solo career. He chooses to keep his born and raised Muggle religion close at hand, even when amongst other Wizards. This does not go unnoticed and at times, disinclines others to his music, which often strays from Wizard standbys into Muggle Rock.

Jonas Ackerly

313

• •

(hint: click the round buttons at the bottom of the card to flip between the bio and image)

The Code

<lj-raw>
<div style="width:398px;height:400px;margin:30px 0 -30px 0;">

<a name="bio" href="#pic" style="width:150px;height:275px;display:block;text-decoration:none;background:url('BACKGROUND_URL') no-repeat;overflow:hidden;"><div style="font-family:'Palatino Linotype', Palatino, serif;font-size:9px;line-height:10px;letter-spacing:0px;color:#fffdaa;text-shadow:#222 1px 1px 1px;padding:36px 20px 20px 20px;text-align:justify;"><div style="text-align:center;">OCCUPATION
<br /><br />
BIRTH DATE
<br /></div>

</div></lj-raw>

Instructions

- Replace IMAGE_URL with an image of your choice that is 150px by 275px
- Replace BACKGROUND_URL with the bio background of your choice (see below)
- Replace OCCUPATION, BIRTH DATE, and BIO HERE with your character's information
- Replace CARD_URL with card of your choice (see below)
- Replace BANNER_URL with the background for name banner (see below)
- Replace ### with the card's number
- Optional: Replace #fffdaa with another color code to change the bio text color

[Code] Flavor "Table"

Tue, 12 Jul 2011 15:58:19 GMT

Live Example

Happy Angry Sad Concerned Scared Crying Giddy

Crush The Ball Innocent Betrayed Baby Friend

Working Traumatized Wary Drunk Flustered

Bitchy Love First Year Graduating

Sorting Muggle Final Battle

Brand Kirke

01/25

twenty-five flavors

.: Happy :.

Character(s):
Summary:
Rating:
Publication Date:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vestibulum eros sed lorem pellentesque pretium. Phasellus at enim diam. Donec urna ligula, semper non rutrum et, congue nec nisl. Fusce commodo turpis eget erat eleifend elementum. Mauris nec urna lectus. Aenean nec ligula id ipsum vulputate semper ut sed ligula. Praesent nulla nibh, dignissim in sagittis sit amet, cursus sed nisl. Nunc sit amet tristique nulla. Nam pharetra dolor congue orci laoreet in laoreet arcu auctor. Fusce nibh elit, ultricies quis tristique in, accumsan ut dolor. Nunc lectus ligula, mollis a rutrum eu, semper eget lectus. Pellentesque vestibulum consequat tortor et venenatis. Maecenas id erat vel massa tristique placerat. Nam quis massa non nisi egestas dapibus nec a turpis. Donec et massa et nibh fermentum consequat sit amet vitae nulla. Donec eget pharetra mauris. Nulla mattis pellentesque malesuada. Nulla varius, turpis vitae lobortis pellentesque, diam quam eleifend dolor, ut tristique sapien ipsum eget lorem. Nunc aliquam eros ut sem ultrices rutrum.

Sed et augue non diam adipiscing ullamcorper. Nunc feugiat faucibus turpis, in viverra quam scelerisque eget. Nullam eget nibh sapien, sit amet hendrerit nisi. Sed ac leo eu purus mollis scelerisque quis vel leo. Fusce tempor arcu eu lorem lobortis ac eleifend eros lacinia. Duis hendrerit neque ac diam interdum accumsan. Phasellus sed felis risus, ut imperdiet arcu. Quisque nulla erat, pellentesque eget feugiat quis, porttitor vel est. Cras ut sagittis lacus. Nunc faucibus, ligula non aliquet pellentesque, lectus neque feugiat lacus, ut lobortis purus purus in eros. Cras faucibus congue lacus vel egestas. Vivamus vel justo eu lacus consectetur luctus. Proin non nisi ligula, vel imperdiet tortor. Etiam imperdiet luctus purus at porttitor. Donec a massa lacus, a faucibus eros. Cras porttitor gravida ligula, sit amet placerat lectus bibendum ut. Nullam et tortor ac libero consequat dignissim.

Ut nec sagittis urna. Ut hendrerit, libero eget imperdiet aliquet, nisl velit mollis quam, viverra pharetra risus est tempor augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque sit amet sem non orci vehicula congue quis vel justo. Donec sem nisi, semper vel sollicitudin eget, dapibus eu ligula. Proin bibendum dictum felis, at mollis sem ultrices quis. Vestibulum eget sem ac massa consequat tincidunt vel consectetur elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean quis auctor purus. Sed convallis metus sapien, eget viverra justo. Duis consectetur nibh ac lectus aliquet id iaculis eros lacinia. Pellentesque eu erat neque.

Morbi a imperdiet lacus. Donec ipsum mauris, posuere pharetra luctus a, mollis ut tellus. Nulla lobortis enim eget est eleifend ornare. Ut nec sem purus, sit amet mollis lacus. Mauris dolor risus, pulvinar nec egestas quis, pretium a lorem. Mauris non mollis ante. Mauris hendrerit suscipit euismod. Morbi rutrum orci a risus porttitor vitae egestas enim blandit. Proin ac odio et libero ultrices consectetur eu in nunc. Sed ut sapien turpis. Mauris in elit elit. Morbi ac nibh libero. Etiam sagittis cursus semper. Integer lacinia lacus non diam ultricies lacinia. Suspendisse lobortis, metus vehicula scelerisque cursus, sapien orci mattis ipsum, sed suscipit leo lorem ac risus.

Vestibulum ante lorem, euismod sit amet aliquet vel, sagittis in enim. Sed augue lacus, volutpat eget eleifend sed, eleifend ac urna. Donec elementum mattis ligula, ac laoreet neque venenatis et. Aliquam quis ante sit amet odio molestie euismod sed a orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices arcu vitae lectus iaculis fringilla. Duis vel mi eu augue pretium viverra. Quisque aliquam justo at augue porta pellentesque. Suspendisse ac sapien in leo condimentum ultrices. Fusce mi nisl, tincidunt scelerisque facilisis non, viverra id ligula. Maecenas dictum aliquet dignissim. Proin sit amet augue nisl, eu convallis lacus. Vivamus id arcu augue, quis mattis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris sit amet mi non quam fringilla dapibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque tellus nulla, eleifend quis tempor ac, semper sit amet neque. In hac habitasse platea dictumst. return to top .: Prompt :.

Character(s):
Summary:
Rating:
Publication Date:

return to top

The Code

<lj-raw>
<center>
<a name="selection">&nbsp;</a>
<div style="width:608px;font-family:'Bookman Old Style', serif;line-height:16px;">
<div style="min-height:224px;">
<div style="text-align:right;margin:0 0 0 -156px;float:right;">
<img src="IMG_URL" style="width:100px;height:100px;border:2px solid #d66;margin:0 0 6px 0;"><br />
<img src="IMG_URL" style="width:100px;height:100px;border:2px solid #d66;margin:0 0 6px 0;"><img src="IMG_URL" style="width:100px;height:100px;border:2px solid #d66;margin:0 0 6px 6px;">
</div>

<a href="#happy" style="text-decoration:none;color:#FFF;">Happy</a> <a href="#angry" style="text-decoration:none;color:#FFF;margin:0 0 0 20px;">Angry</a> <a href="#sad" style="text-decoration:none;color:#FFF;margin:0 0 0 20px;">Sad</a> <a href="#concerned" style="text-decoration:none;color:#FFF;margin:0 0 0 20px;">Concerned</a> <a href="#scared" style="text-decoration:none;color:#FFF;margin:0 0 0 20px;">Scared</a> <a href="#crying" style="text-decoration:none;color:#FFF;margin:0 0 0 20px;">Crying</a> <a href="#giddy" style="text-decoration:none;color:#FFF;margin:0 0 0 20px;">Giddy</a><br /><br />

<a href="#crush" style="text-decoration:none;color:#FFF;">Crush</a> <a href="#theball" style="text-decoration:none;color:#FFF;margin:0 0 0 20px;">The Ball</a> <a href="#innocent" style="text-decoration:none;color:#FFF;margin:0 0 0 20px;">Innocent</a> <a href="#betrayed" style="text-decoration:none;color:#FFF;margin:0 0 0 20px;">Betrayed</a> <a href="#baby" style="text-decoration:none;color:#FFF;margin:0 0 0 20px;">Baby</a> <a href="#friend" style="text-decoration:none;color:#FFF;margin:0 0 0 20px;">Friend</a><br /><br />

<a href="#working" style="text-decoration:none;color:#FFF;">Working</a> <a href="#traumatized" style="text-decoration:none;color:#FFF;margin:0 0 0 20px;">Traumatized</a> <a href="#wary" style="text-decoration:none;color:#FFF;margin:0 0 0 20px;">Wary</a> <a href="#drunk" style="text-decoration:none;color:#FFF;margin:0 0 0 20px;">Drunk</a> <a href="#flustered" style="text-decoration:none;color:#FFF;margin:0 0 0 20px;">Flustered</a><br /><br />

<a href="#bitchy" style="text-decoration:none;color:#FFF;">Bitchy</a> <a href="#love" style="text-decoration:none;color:#FFF;margin:0 0 0 20px;">Love</a> <a href="#firstyear" style="text-decoration:none;color:#FFF;margin:0 0 0 20px;">First Year</a> <a href="#graduating" style="text-decoration:none;color:#FFF;margin:0 0 0 20px;">Graduating</a><br /><br />

<a href="#sorting" style="text-decoration:none;color:#FFF;">Sorting</a> <a href="#muggle" style="text-decoration:none;color:#FFF;margin:0 0 0 20px;">Muggle</a> <a href="#finalbattle" style="text-decoration:none;color:#FFF;margin:0 0 0 20px;">Final Battle</a>

</span>
</div>

<div style="width:388px;letter-spacing:2px;font-size:18px;line-height:20px;text-transform:uppercase">
<div style="color:#d66;text-align:left;margin:18px 0 0 0;">Name Name <div style="float:right;">00/25</div></div>
<div style="color:#FFF;background-color:#d66;text-align:right;margin:10px 0 0 0;padding:8px;">twenty-five flavors</div>
</div>
</div>

</div>

<a name="prompt" style="font-size:18px;color:#d66;font-weight:bold;text-align:center;text-transform:uppercase;letter-spacing:2px;text-decoration:none;margin:12px 0;border-top:2px solid #d66;padding-top:12px;display:block;">.: Prompt :.</a>

<div style="background-color:#d66;margin:0 0 12px 0;padding:12px;color:#FFF;">
<b>Character(s):</b> <br />
<b>Summary:</b> <br />
<b>Rating:</b> <br />
<b>Publication Date:</b> 
</div>

</lj-raw>(drabble)<lj-raw>

<a href="#selection" style="text-decoration:none;text-transform:uppercase;text-align:center;display:block;color:#d66;font-weight:bold;margin-top:12px;">return to top</a>

<div style="background-color:#d66;margin:0 0 12px 0;padding:12px;color:#FFF;">
<b>Character(s):</b> <br />
<b>Summary:</b> <br />
<b>Rating:</b> <br />
<b>Publication Date:</b> 
</div>

</lj-raw>(drabble)<lj-raw>

<a href="#selection" style="text-decoration:none;text-transform:uppercase;text-align:center;display:block;color:#d66;font-weight:bold;margin-top:12px;">return to top</a>
</div>
</div>
</center>
</lj-raw>

Color: #d66

Questions/Feedback?
Leave a comment to this post. Thanks!

[Code] iTunes Multi-Playlist Example - Kris Allen

Sat, 09 Jul 2011 23:32:55 GMT

Playlists

Sirk and the Dirty Minds

Kris Allen: The Album

Brand New Shoes

Selected Item

✓

Name

Time

Artist

Album

Genre

Rating

Plays

1	Can't Stay Away	3:58	Kris Allen	Sirk and the Dirty Minds	Blues	10	►
2	Written All Over My Face	3:35	Kris Allen	Sirk and the Dirty Minds	Blues	6	►
3	Is It Over	5:10	Kris Allen	Sirk and the Dirty Minds	Blues	10	►
4	Red Guitar	4:41	Kris Allen	Sirk and the Dirty Minds	Blues	4	►
5	Everybody Wants to Rule the World...	5:43	Kris Allen	Sirk and the Dirty Minds	Blues	8	►
6	Send Me All Your Angels	3:24	Kris Allen	Sirk and the Dirty Minds	Blues	6	►
7	Shut That Door (And Keep That Devil...	4:14	Kris Allen	Sirk and the Dirty Minds	Blues	12	►
8	Happy Birthday	0:46	Kris Allen	Sirk and the Dirty Minds	Blues	4	►
9	Stuck In a Moment	4:50	Kris Allen	Sirk and the Dirty Minds	Blues	8	►
10	Leave You Alone	5:36	Kris Allen	Sirk and the Dirty Minds	Blues	10	►
11	Alright With Me	3:24	Kris Allen	Sirk and the Dirty Minds	Blues	6	►
12	Live Like We're Dying	5:07	Kris Allen	Sirk and the Dirty Minds	Blues	7	►
13	Come Together	4:10	Kris Allen	Sirk and the Dirty Minds	Blues	8	►

Playlists

Sirk and the Dirty Minds

Kris Allen: The Album

Brand New Shoes

Selected Item

✓

Name

Time

Artist

Album

Genre

Rating

Plays

1	Live Like We're Dying	Time	Kris Allen	Kris Allen	Pop/Rock	Plays	►
2	Before We Come Undone	Time	Kris Allen	Kris Allen	Pop/Rock	Plays	►
3	Can't Stay Away	Time	Kris Allen	Kris Allen	Pop/Rock	Plays	►
4	The Truth	Time	Kris Allen	Kris Allen	Pop/Rock	Plays	►
5	Written All Over My Face	Time	Kris Allen	Kris Allen	Pop/Rock	Plays	►
6	Bring It Back	Time	Kris Allen	Kris Allen	Pop/Rock	Plays	►
7	Red Guitar	Time	Kris Allen	Kris Allen	Pop/Rock	Plays	►
8	Is It Over	Time	Kris Allen	Kris Allen	Pop/Rock	Plays	►
9	Let It Rain	Time	Kris Allen	Kris Allen	Pop/Rock	Plays	►
10	Alright With Me	Time	Kris Allen	Kris Allen	Pop/Rock	Plays	►
11	Lifetime	Time	Kris Allen	Kris Allen	Pop/Rock	Plays	►
12	I Need to Know	Time	Kris Allen	Kris Allen	Pop/Rock	Plays	►
13	Heartless	Time	Kris Allen	Kris Allen	Pop/Rock	Plays	►
14	Send Me All Your Angels	Time	Kris Allen	Kris Allen	Pop/Rock	Plays	►
15	From the Ashes	Time	Kris Allen	Kris Allen	Pop/Rock	Plays	►
16	No Boundaries	Time	Kris Allen	Kris Allen	Pop/Rock	Plays	►

Playlists

Sirk and the Dirty Minds

Kris Allen: The Album

Brand New Shoes

Selected Item

✓

Name

Time

Artist

Album

Genre

Rating

Plays

1	Brand New Shoes	Time	Kris Allen	Brand New Shoes	Pop/Rock	Plays	►
2	Beautiful Moon	Time	Kris Allen	Brand New Shoes	Pop/Rock	Plays	►
3	I Was Played	Time	Kris Allen	Brand New Shoes	Pop/Rock	Plays	►
4	Be My Lady	Time	Kris Allen	Brand New Shoes	Pop/Rock	Plays	►
5	Running	Time	Kris Allen	Brand New Shoes	Pop/Rock	Plays	►
6	Wipe It Away	Time	Kris Allen	Brand New Shoes	Pop/Rock	Plays	►
7	Lovely	Time	Kris Allen	Brand New Shoes	Pop/Rock	Plays	►
8	Wastin' Time	Time	Kris Allen	Brand New Shoes	Pop/Rock	Plays	►
9	On Our Way	Time	Kris Allen	Brand New Shoes	Pop/Rock	Plays	►
10	Real World	Time	Kris Allen	Brand New Shoes	Pop/Rock	Plays	►
11	Land of Smiles	Time	Kris Allen	Brand New Shoes	Pop/Rock	Plays	►

[Code] iTunes Multi-Playlist

Sat, 09 Jul 2011 07:11:07 GMT

Live Example

The Code

<lj-raw>
<img src="http://i.imgur.com/sZuLQ.png" style="width:1024px;height:70px;border:1px solid #4e5966;">

<table cellpadding="0" cellspacing="0" style="margin:0 0 403px -10px;border-collapse:collapse;font-family:Arial, sans-serif;">
<tr>
<td style="vertical-align:top;width:10px;"><a name="onea"> </a></td>
<td style="vertical-align:top;width:200px;height:403px;border-left:1px solid #4d5057;border-right:1px solid #bbb;background-color:#d9dee5;">
<div style="padding:4px 8px;height:176px;overflow:auto;">
<div style="text-transform:uppercase;text-shadow:0 1px 0 #FFF;color:#4e5966;margin-bottom:2px;font-size:11px;font-weight:bold;">Playlists</div>
<div style="padding-left:8px;">
<div style="background:url('http://i.imgur.com/nEzsc.png') repeat-x;padding:3px 8px 3px 16px;margin:0 -8px 0 -16px;"><a href="#onea" style="text-decoration:none;color:#fff;font-weight:bold;font-size:12px;text-shadow: 1px 0 0 #22568c;"><img src="http://i.imgur.com/D7lWr.png" style="width:15px;height:14px;border:0;float:left;"> <span style="margin:-4px 0 0 4px;">One</span></a></div>
<div style="margin:4px 0 0 0;"><a href="#twoa" style="text-decoration:none;color:#191919;font-size:12px;"><img src="http://i.imgur.com/61nCA.png" style="width:15px;height:15px;border:0;float:left;"> <span style="margin:-4px 0 0 4px;">Two</span></a></div>
<div style="margin:4px 0 0 0;"><a href="#threea" style="text-decoration:none;color:#191919;font-size:12px;"><img src="http://i.imgur.com/61nCA.png" style="width:15px;height:15px;border:0;float:left;"> <span style="margin:-4px 0 0 4px;">Three</span></a></div>
</div>
</div>
<div style="background:url('http://i.imgur.com/bU11C.png') repeat-x;border-top:1px solid #adadad;border-bottom:1px solid #adadad;padding-top:2px;text-align:center;color:#2a2a2a;font-size:11px;font-weight:bold;">Selected Item</div>
<img src="http://i471.photobucket.com/.png" style="width:100px;height:100px;"><img src="http://i471.photobucket.com/.png" style="width:100px;height:100px;"><img src="http://i471.photobucket.com/.png" style="width:100px;height:100px;"><img src="http://i471.photobucket.com/.png" style="width:100px;height:100px;">
</td>
<td style="vertical-align:top;width:823px;height:403px;border-right:1px solid #4e5966;">
<table cellpadding="0" cellspacing="0" style="width:823px;height:21px;background:url('http://i.imgur.com/ooIC6.png') repeat-x;border-bottom:1px solid #bbb;font-family:Arial, sans-serif;font-size:11px;color:#2a2a2a;font-weight:bold;">
<tr>
<td style="text-align:center;vertical-align:middle;width:32px;"> </td>
<td style="text-align:center;vertical-align:middle;width:1px;"><img src="http://i.imgur.com/fmgFA.png" style="width:1px;height:21px;"></td>
<td style="text-align:center;vertical-align:middle;width:14px;">✓</td>
<td style="text-align:center;vertical-align:middle;width:1px;"><img src="http://i.imgur.com/fmgFA.png" style="width:1px;height:21px;"></td>
<td style="text-align:left;vertical-align:middle;width:190px;padding-left:4px;">Name</td>
<td style="text-align:center;vertical-align:middle;width:1px;"><img src="http://i.imgur.com/fmgFA.png" style="width:1px;height:21px;"></td>
<td style="text-align:right;vertical-align:middle;width:56px;padding-right:4px;">Time</td>
<td style="text-align:center;vertical-align:middle;width:1px;"><img src="http://i.imgur.com/fmgFA.png" style="width:1px;height:21px;"></td>
<td style="text-align:left;vertical-align:middle;width:118px;padding-left:4px;">Artist</td>
<td style="text-align:center;vertical-align:middle;width:1px;"><img src="http://i.imgur.com/fmgFA.png" style="width:1px;height:21px;"></td>
<td style="text-align:left;vertical-align:middle;width:118px;padding-left:4px;">Album</td>
<td style="text-align:center;vertical-align:middle;width:1px;"><img src="http://i.imgur.com/fmgFA.png" style="width:1px;height:21px;"></td>
<td style="text-align:left;vertical-align:middle;width:75px;padding-left:4px;">Genre</td>
<td style="text-align:center;vertical-align:middle;width:1px;"><img src="http://i.imgur.com/fmgFA.png" style="width:1px;height:21px;"></td>
<td style="text-align:left;vertical-align:middle;width:75px;padding-left:4px;">Rating</td>
<td style="text-align:center;vertical-align:middle;width:1px;"><img src="http://i.imgur.com/fmgFA.png" style="width:1px;height:21px;"></td>
<td style="text-align:right;vertical-align:middle;width:75px;padding-right:4px;">Plays</td>
<td style="text-align:center;vertical-align:middle;width:1px;"><img src="http://i.imgur.com/fmgFA.png" style="width:1px;height:21px;"></td>
<td style="text-align:left;vertical-align:middle;padding-left:4px;"> </td>
</tr>
</table>
<div style="width:823px;height:382px;overflow:auto;">
<table cellpadding="0" cellspacing="0" style="width:823px;background-color:#FFF;font-family:Arial, sans-serif;font-size:11px;color:#000;">
<tr style="height:19px;background-color:#f2f5f9;">
<td style="text-align:right;vertical-align:middle;width:21px;padding-right:12px;">1</td>
<td style="text-align:center;vertical-align:middle;width:15px;"><img src="http://i.imgur.com/KQoQb.png" style="width:10px;height:10px;"></td>
<td style="text-align:left;vertical-align:middle;width:191px;padding-left:4px;">Name</td>
<td style="text-align:right;vertical-align:middle;width:57px;padding-right:4px;">Time</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Artist</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Album</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Genre</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Rating</td>
<td style="text-align:right;vertical-align:middle;width:76px;padding-right:4px;">Plays</td>
<td style="text-align:right;vertical-align:middle;padding-right:8px;"><a href="" target="_blank" style="text-decoration:none;color:#000;">►</a></td>
</tr>
<tr style="height:19px;">
<td style="text-align:right;vertical-align:middle;width:21px;padding-right:12px;">2</td>
<td style="text-align:center;vertical-align:middle;width:15px;"><img src="http://i.imgur.com/KQoQb.png" style="width:10px;height:10px;"></td>
<td style="text-align:left;vertical-align:middle;width:191px;padding-left:4px;">Name</td>
<td style="text-align:right;vertical-align:middle;width:57px;padding-right:4px;">Time</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Artist</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Album</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Genre</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Rating</td>
<td style="text-align:right;vertical-align:middle;width:76px;padding-right:4px;">Plays</td>
<td style="text-align:right;vertical-align:middle;padding-right:8px;"><a href="" target="_blank" style="text-decoration:none;color:#000;">►</a></td>
</tr>
<tr style="height:19px;background-color:#f2f5f9;">
<td style="text-align:right;vertical-align:middle;width:21px;padding-right:12px;">3</td>
<td style="text-align:center;vertical-align:middle;width:15px;"><img src="http://i.imgur.com/KQoQb.png" style="width:10px;height:10px;"></td>
<td style="text-align:left;vertical-align:middle;width:191px;padding-left:4px;">Name</td>
<td style="text-align:right;vertical-align:middle;width:57px;padding-right:4px;">Time</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Artist</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Album</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Genre</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Rating</td>
<td style="text-align:right;vertical-align:middle;width:76px;padding-right:4px;">Plays</td>
<td style="text-align:right;vertical-align:middle;padding-right:8px;"><a href="" target="_blank" style="text-decoration:none;color:#000;">►</a></td>
</tr>
<tr style="height:19px;">
<td style="text-align:right;vertical-align:middle;width:21px;padding-right:12px;">4</td>
<td style="text-align:center;vertical-align:middle;width:15px;"><img src="http://i.imgur.com/KQoQb.png" style="width:10px;height:10px;"></td>
<td style="text-align:left;vertical-align:middle;width:191px;padding-left:4px;">Name</td>
<td style="text-align:right;vertical-align:middle;width:57px;padding-right:4px;">Time</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Artist</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Album</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Genre</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Rating</td>
<td style="text-align:right;vertical-align:middle;width:76px;padding-right:4px;">Plays</td>
<td style="text-align:right;vertical-align:middle;padding-right:8px;"><a href="" target="_blank" style="text-decoration:none;color:#000;">►</a></td>
</tr>
<tr style="height:19px;background-color:#f2f5f9;">
<td style="text-align:right;vertical-align:middle;width:21px;padding-right:12px;">5</td>
<td style="text-align:center;vertical-align:middle;width:15px;"><img src="http://i.imgur.com/KQoQb.png" style="width:10px;height:10px;"></td>
<td style="text-align:left;vertical-align:middle;width:191px;padding-left:4px;">Name</td>
<td style="text-align:right;vertical-align:middle;width:57px;padding-right:4px;">Time</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Artist</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Album</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Genre</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Rating</td>
<td style="text-align:right;vertical-align:middle;width:76px;padding-right:4px;">Plays</td>
<td style="text-align:right;vertical-align:middle;padding-right:8px;"><a href="" target="_blank" style="text-decoration:none;color:#000;">►</a></td>
</tr>
<tr style="height:19px;">
<td style="text-align:right;vertical-align:middle;width:21px;padding-right:12px;">6</td>
<td style="text-align:center;vertical-align:middle;width:15px;"><img src="http://i.imgur.com/KQoQb.png" style="width:10px;height:10px;"></td>
<td style="text-align:left;vertical-align:middle;width:191px;padding-left:4px;">Name</td>
<td style="text-align:right;vertical-align:middle;width:57px;padding-right:4px;">Time</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Artist</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Album</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Genre</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Rating</td>
<td style="text-align:right;vertical-align:middle;width:76px;padding-right:4px;">Plays</td>
<td style="text-align:right;vertical-align:middle;padding-right:8px;"><a href="" target="_blank" style="text-decoration:none;color:#000;">►</a></td>
</tr>
<tr style="height:19px;background-color:#f2f5f9;">
<td style="text-align:right;vertical-align:middle;width:21px;padding-right:12px;">7</td>
<td style="text-align:center;vertical-align:middle;width:15px;"><img src="http://i.imgur.com/KQoQb.png" style="width:10px;height:10px;"></td>
<td style="text-align:left;vertical-align:middle;width:191px;padding-left:4px;">Name</td>
<td style="text-align:right;vertical-align:middle;width:57px;padding-right:4px;">Time</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Artist</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Album</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Genre</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Rating</td>
<td style="text-align:right;vertical-align:middle;width:76px;padding-right:4px;">Plays</td>
<td style="text-align:right;vertical-align:middle;padding-right:8px;"><a href="" target="_blank" style="text-decoration:none;color:#000;">►</a></td>
</tr>
<tr style="height:19px;">
<td style="text-align:right;vertical-align:middle;width:21px;padding-right:12px;">8</td>
<td style="text-align:center;vertical-align:middle;width:15px;"><img src="http://i.imgur.com/KQoQb.png" style="width:10px;height:10px;"></td>
<td style="text-align:left;vertical-align:middle;width:191px;padding-left:4px;">Name</td>
<td style="text-align:right;vertical-align:middle;width:57px;padding-right:4px;">Time</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Artist</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Album</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Genre</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Rating</td>
<td style="text-align:right;vertical-align:middle;width:76px;padding-right:4px;">Plays</td>
<td style="text-align:right;vertical-align:middle;padding-right:8px;"><a href="" target="_blank" style="text-decoration:none;color:#000;">►</a></td>
</tr>
<tr style="height:19px;background-color:#f2f5f9;">
<td style="text-align:right;vertical-align:middle;width:21px;padding-right:12px;">9</td>
<td style="text-align:center;vertical-align:middle;width:15px;"><img src="http://i.imgur.com/KQoQb.png" style="width:10px;height:10px;"></td>
<td style="text-align:left;vertical-align:middle;width:191px;padding-left:4px;">Name</td>
<td style="text-align:right;vertical-align:middle;width:57px;padding-right:4px;">Time</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Artist</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Album</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Genre</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Rating</td>
<td style="text-align:right;vertical-align:middle;width:76px;padding-right:4px;">Plays</td>
<td style="text-align:right;vertical-align:middle;padding-right:8px;"><a href="" target="_blank" style="text-decoration:none;color:#000;">►</a></td>
</tr>
<tr style="height:19px;">
<td style="text-align:right;vertical-align:middle;width:21px;padding-right:12px;">10</td>
<td style="text-align:center;vertical-align:middle;width:15px;"><img src="http://i.imgur.com/KQoQb.png" style="width:10px;height:10px;"></td>
<td style="text-align:left;vertical-align:middle;width:191px;padding-left:4px;">Name</td>
<td style="text-align:right;vertical-align:middle;width:57px;padding-right:4px;">Time</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Artist</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Album</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Genre</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Rating</td>
<td style="text-align:right;vertical-align:middle;width:76px;padding-right:4px;">Plays</td>
<td style="text-align:right;vertical-align:middle;padding-right:8px;"><a href="" target="_blank" style="text-decoration:none;color:#000;">►</a></td>
</tr>
<tr style="height:19px;background-color:#f2f5f9;">
<td style="text-align:right;vertical-align:middle;width:21px;padding-right:12px;">11</td>
<td style="text-align:center;vertical-align:middle;width:15px;"><img src="http://i.imgur.com/KQoQb.png" style="width:10px;height:10px;"></td>
<td style="text-align:left;vertical-align:middle;width:191px;padding-left:4px;">Name</td>
<td style="text-align:right;vertical-align:middle;width:57px;padding-right:4px;">Time</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Artist</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Album</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Genre</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Rating</td>
<td style="text-align:right;vertical-align:middle;width:76px;padding-right:4px;">Plays</td>
<td style="text-align:right;vertical-align:middle;padding-right:8px;"><a href="" target="_blank" style="text-decoration:none;color:#000;">►</a></td>
</tr>
<tr style="height:19px;">
<td style="text-align:right;vertical-align:middle;width:21px;padding-right:12px;">12</td>
<td style="text-align:center;vertical-align:middle;width:15px;"><img src="http://i.imgur.com/KQoQb.png" style="width:10px;height:10px;"></td>
<td style="text-align:left;vertical-align:middle;width:191px;padding-left:4px;">Name</td>
<td style="text-align:right;vertical-align:middle;width:57px;padding-right:4px;">Time</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Artist</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Album</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Genre</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Rating</td>
<td style="text-align:right;vertical-align:middle;width:76px;padding-right:4px;">Plays</td>
<td style="text-align:right;vertical-align:middle;padding-right:8px;"><a href="" target="_blank" style="text-decoration:none;color:#000;">►</a></td>
</tr>
<tr style="height:19px;background-color:#f2f5f9;">
<td style="text-align:right;vertical-align:middle;width:21px;padding-right:12px;">13</td>
<td style="text-align:center;vertical-align:middle;width:15px;"><img src="http://i.imgur.com/KQoQb.png" style="width:10px;height:10px;"></td>
<td style="text-align:left;vertical-align:middle;width:191px;padding-left:4px;">Name</td>
<td style="text-align:right;vertical-align:middle;width:57px;padding-right:4px;">Time</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Artist</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Album</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Genre</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Rating</td>
<td style="text-align:right;vertical-align:middle;width:76px;padding-right:4px;">Plays</td>
<td style="text-align:right;vertical-align:middle;padding-right:8px;"><a href="" target="_blank" style="text-decoration:none;color:#000;">►</a></td>
</tr>
<tr style="height:19px;">
<td style="text-align:right;vertical-align:middle;width:21px;padding-right:12px;">14</td>
<td style="text-align:center;vertical-align:middle;width:15px;"><img src="http://i.imgur.com/KQoQb.png" style="width:10px;height:10px;"></td>
<td style="text-align:left;vertical-align:middle;width:191px;padding-left:4px;">Name</td>
<td style="text-align:right;vertical-align:middle;width:57px;padding-right:4px;">Time</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Artist</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Album</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Genre</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Rating</td>
<td style="text-align:right;vertical-align:middle;width:76px;padding-right:4px;">Plays</td>
<td style="text-align:right;vertical-align:middle;padding-right:8px;"><a href="" target="_blank" style="text-decoration:none;color:#000;">►</a></td>
</tr>
<tr style="height:19px;background-color:#f2f5f9;">
<td style="text-align:right;vertical-align:middle;width:21px;padding-right:12px;">15</td>
<td style="text-align:center;vertical-align:middle;width:15px;"><img src="http://i.imgur.com/KQoQb.png" style="width:10px;height:10px;"></td>
<td style="text-align:left;vertical-align:middle;width:191px;padding-left:4px;">Name</td>
<td style="text-align:right;vertical-align:middle;width:57px;padding-right:4px;">Time</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Artist</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Album</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Genre</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Rating</td>
<td style="text-align:right;vertical-align:middle;width:76px;padding-right:4px;">Plays</td>
<td style="text-align:right;vertical-align:middle;padding-right:8px;"><a href="" target="_blank" style="text-decoration:none;color:#000;">►</a></td>
</tr>
<tr style="height:19px;">
<td style="text-align:right;vertical-align:middle;width:21px;padding-right:12px;">16</td>
<td style="text-align:center;vertical-align:middle;width:15px;"><img src="http://i.imgur.com/KQoQb.png" style="width:10px;height:10px;"></td>
<td style="text-align:left;vertical-align:middle;width:191px;padding-left:4px;">Name</td>
<td style="text-align:right;vertical-align:middle;width:57px;padding-right:4px;">Time</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Artist</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Album</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Genre</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Rating</td>
<td style="text-align:right;vertical-align:middle;width:76px;padding-right:4px;">Plays</td>
<td style="text-align:right;vertical-align:middle;padding-right:8px;"><a href="" target="_blank" style="text-decoration:none;color:#000;">►</a></td>
</tr>
<tr style="height:19px;background-color:#f2f5f9;">
<td style="text-align:right;vertical-align:middle;width:21px;padding-right:12px;">17</td>
<td style="text-align:center;vertical-align:middle;width:15px;"><img src="http://i.imgur.com/KQoQb.png" style="width:10px;height:10px;"></td>
<td style="text-align:left;vertical-align:middle;width:191px;padding-left:4px;">Name</td>
<td style="text-align:right;vertical-align:middle;width:57px;padding-right:4px;">Time</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Artist</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Album</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Genre</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Rating</td>
<td style="text-align:right;vertical-align:middle;width:76px;padding-right:4px;">Plays</td>
<td style="text-align:right;vertical-align:middle;padding-right:8px;"><a href="" target="_blank" style="text-decoration:none;color:#000;">►</a></td>
</tr>
<tr style="height:19px;">
<td style="text-align:right;vertical-align:middle;width:21px;padding-right:12px;">18</td>
<td style="text-align:center;vertical-align:middle;width:15px;"><img src="http://i.imgur.com/KQoQb.png" style="width:10px;height:10px;"></td>
<td style="text-align:left;vertical-align:middle;width:191px;padding-left:4px;">Name</td>
<td style="text-align:right;vertical-align:middle;width:57px;padding-right:4px;">Time</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Artist</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Album</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Genre</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Rating</td>
<td style="text-align:right;vertical-align:middle;width:76px;padding-right:4px;">Plays</td>
<td style="text-align:right;vertical-align:middle;padding-right:8px;"><a href="" target="_blank" style="text-decoration:none;color:#000;">►</a></td>
</tr>
<tr style="height:19px;background-color:#f2f5f9;">
<td style="text-align:right;vertical-align:middle;width:21px;padding-right:12px;">19</td>
<td style="text-align:center;vertical-align:middle;width:15px;"><img src="http://i.imgur.com/KQoQb.png" style="width:10px;height:10px;"></td>
<td style="text-align:left;vertical-align:middle;width:191px;padding-left:4px;">Name</td>
<td style="text-align:right;vertical-align:middle;width:57px;padding-right:4px;">Time</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Artist</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Album</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Genre</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Rating</td>
<td style="text-align:right;vertical-align:middle;width:76px;padding-right:4px;">Plays</td>
<td style="text-align:right;vertical-align:middle;padding-right:8px;"><a href="" target="_blank" style="text-decoration:none;color:#000;">►</a></td>
</tr>
<tr style="height:19px;">
<td style="text-align:right;vertical-align:middle;width:21px;padding-right:12px;">20</td>
<td style="text-align:center;vertical-align:middle;width:15px;"><img src="http://i.imgur.com/KQoQb.png" style="width:10px;height:10px;"></td>
<td style="text-align:left;vertical-align:middle;width:191px;padding-left:4px;">Name</td>
<td style="text-align:right;vertical-align:middle;width:57px;padding-right:4px;">Time</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Artist</td>
<td style="text-align:left;vertical-align:middle;width:119px;padding-left:4px;">Album</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Genre</td>
<td style="text-align:left;vertical-align:middle;width:76px;padding-left:4px;">Rating</td>
<td style="text-align:right;vertical-align:middle;width:76px;padding-right:4px;">Plays</td>
<td style="text-align:right;vertical-align:middle;padding-right:8px;"><a href="" target="_blank" style="text-decoration:none;color:#000;">►</a></td>
</tr>
</table>
</div>
</td>
</tr>
</table>

<table cellpadding="0" cellspacing="0" style="margin:0 0 403px -10px;border-collapse:collapse;font-family:Arial, sans-serif;">
<tr>
<td style="vertical-align:top;width:10px;"><a name="twoa"> </a></td>
<td style="vertical-align:top;width:200px;height:403px;border-left:1px solid #4d5057;border-right:1px solid #bbb;background-color:#d9dee5;">
<div style="padding:4px 8px;height:176px;overflow:auto;">
<div style="text-transform:uppercase;text-shadow:0 1px 0 #FFF;color:#4e5966;margin-bottom:2px;font-size:11px;font-weight:bold;">Playlists</div>
<div style="padding-left:8px;">
<div style="margin:4px 0 0 0;"><a href="#onea" style="text-decoration:none;color:#191919;font-size:12px;"><img src="http://i.imgur.com/61nCA.png" style="width:15px;height:15px;border:0;float:left;"> <span style="margin:-4px 0 0 4px;">One</span></a></div>
<div style="background:url('http://i.imgur.com/nEzsc.png') repeat-x;padding:3px 8px 3px 16px;margin:2px -8px 0 -16px;"><a href="#twoa" style="text-decoration:none;color:#fff;font-weight:bold;font-size:12px;text-shadow: 1px 0 0 #22568c;"><img src="http://i.imgur.com/D7lWr.png" style="width:15px;height:14px;border:0;float:left;"> <span style="margin:-4px 0 0 4px;">Two</span></a></div>
<div style="margin:4px 0 0 0;"><a href="#threea" style="text-decoration:none;color:#191919;font-size:12px;"><img src="http://i.imgur.com/61nCA.png" style="width:15px;height:15px;border:0;float:left;"> <span style="margin:-4px 0 0 4px;">Three</span></a></div>
</div>
</div>
<div style="background:url('http://i.imgur.com/bU11C.png') repeat-x;border-top:1px solid #adadad;border-bottom:1px solid #adadad;padding-top:2px;text-align:center;color:#2a2a2a;font-size:11px;font-weight:bold;">Selected Item</div>
<img src="http://i471.photobucket.com/.png" style="width:100px;height:100px;"><img src="http://i471.photobucket.com/.png" style="width:100px;height:100px;"><img src="http://i471.photobucket.com/.png" style="width:100px;height:100px;"><img src="http://i471.photobucket.com/.png" style="width:100px;height:100px;">
</td>
<td style="vertical-align:top;width:823px;height:403px;border-right:1px solid #4e5966;">
<table cellpadding="0" cellspacing="0" style="width:823px;height:21px;background:url('http://i.imgur.com/ooIC6.png') repeat-x;border-bottom:1px solid #bbb;font-family:Arial, sans-serif;font-size:11px;color:#2a2a2a;font-weight:bold;">
<tr>
<td style="text-align:center;vertical-align:middle;width:32px;"> </td>
<td style="text-align:center;vertical-align:middle;width:1px;"><img src="http://i.imgur.com/fmgFA.png" style="width:1px;height:21px;"></td>
<td style="text-align:center;vertical-align:middle;width:14px;">✓</td>
<td style="text-align:center;vertical-align:middle;width:1px;"><img src="http://i.imgur.com/fmgFA.png" style="width:1px;height:21px;"></td>
<td style="text-align:left;vertical-align:middle;width:190px;padding-left:4px;">Name</td>
<td style="text-align:center;vertical-align:middle;width:1px;"><img src="http://i.imgur.com/fmgFA.png" style="width:1px;height:21px;"></td>
<td style="text-align:right;vertical-align:middle;width:56px;padding-right:4px;">Time</td>
<td style="text-align:center;vertical-align:middle;width:1px;"><img src="http://i.imgur.com/fmgFA.png" style="width:1px;height:21px;"></td>
<td style="text-align:left;vertical-align:middle;width:118px;padding-left:4px;">Artist</td>
<td style="text-align:center;vertical-align:middle;width:1px;"><img src="http://i.imgur.com/fmgFA.png" style="width:1px;height:21px;"></td>
<td style="text-align:left;vertical-align:middle;width:118px;padding-left:4px;">Album</td>
<td style="text-align:center;vertical-align:middle;width:1px;"><img src="http://i.imgur.com/fmgFA.png" style="width:1px;height:21px;"></td>
<td style="text-align:left;vertical-align:middle;width:75px;padding-left:4px;">Genre</td>
<td style="text-align:center;vertical-align:middle;width:1px;"><img src="http://i.imgur.com/fmgFA.png" style="width:1px;height:21px;"></td>
<td style="text-align:left;vertical-align:middle;width:75px;padding-left:4px;">Rating</td>
<td style="text-align:center;vertical-align:middle;width:1px;"><img src="http://i.imgur.com/fmgFA.png" style="width:1px;height:21px;"></td>
<td style="text-align:right;vertical-align:middle;width:75px;padding-right:4px;">Plays</td>
<td style="text-align:center;vertical-align:middle;width:1px;"><img src="http://i.imgur.com/fmgFA.png" style="width:1px;height:21px;"></td>
<td style="text-align:left;vertical-align:middle;padding-left:4px;"> </td>
</tr>
</table>
<div style="width:823px;height:382px;overflow:auto;">
<table cellpadding="0" cellspacing="0" style="width:823px;background-color:#FFF;font-family:Arial, sans-serif;font-size:11px;color:#000;">
<tr style="height:19px;background-color:#f2f5f9;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;background-color:#f2f5f9;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;background-color:#f2f5f9;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;background-color:#f2f5f9;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;background-color:#f2f5f9;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;background-color:#f2f5f9;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;background-color:#f2f5f9;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;background-color:#f2f5f9;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;background-color:#f2f5f9;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;background-color:#f2f5f9;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;">
<td colspan="10"> </td>
</tr>
</table>
</div>
</td>
</tr>
</table>

<table cellpadding="0" cellspacing="0" style="margin:0 0 403px -10px;border-collapse:collapse;font-family:Arial, sans-serif;">
<tr>
<td style="vertical-align:top;width:10px;"><a name="threea"> </a></td>
<td style="vertical-align:top;width:200px;height:403px;border-left:1px solid #4d5057;border-right:1px solid #bbb;background-color:#d9dee5;">
<div style="padding:4px 8px;height:176px;overflow:auto;">
<div style="text-transform:uppercase;text-shadow:0 1px 0 #FFF;color:#4e5966;margin-bottom:2px;font-size:11px;font-weight:bold;">Playlists</div>
<div style="padding-left:8px;">
<div style="margin:4px 0 0 0;"><a href="#onea" style="text-decoration:none;color:#191919;font-size:12px;"><img src="http://i.imgur.com/61nCA.png" style="width:15px;height:15px;border:0;float:left;"> <span style="margin:-4px 0 0 4px;">One</span></a></div>
<div style="margin:4px 0 0 0;"><a href="#twoa" style="text-decoration:none;color:#191919;font-size:12px;"><img src="http://i.imgur.com/61nCA.png" style="width:15px;height:15px;border:0;float:left;"> <span style="margin:-4px 0 0 4px;">Two</span></a></div>
<div style="background:url('http://i.imgur.com/nEzsc.png') repeat-x;padding:3px 8px 3px 16px;margin:2px -8px 0 -16px;"><a href="#threea" style="text-decoration:none;color:#fff;font-weight:bold;font-size:12px;text-shadow: 1px 0 0 #22568c;"><img src="http://i.imgur.com/D7lWr.png" style="width:15px;height:14px;border:0;float:left;"> <span style="margin:-4px 0 0 4px;">Three</span></a></div>
</div>
</div>
<div style="background:url('http://i.imgur.com/bU11C.png') repeat-x;border-top:1px solid #adadad;border-bottom:1px solid #adadad;padding-top:2px;text-align:center;color:#2a2a2a;font-size:11px;font-weight:bold;">Selected Item</div>
<img src="http://i471.photobucket.com/.png" style="width:100px;height:100px;"><img src="http://i471.photobucket.com/.png" style="width:100px;height:100px;"><img src="http://i471.photobucket.com/.png" style="width:100px;height:100px;"><img src="http://i471.photobucket.com/.png" style="width:100px;height:100px;">
</td>
<td style="vertical-align:top;width:823px;height:403px;border-right:1px solid #4e5966;">
<table cellpadding="0" cellspacing="0" style="width:823px;height:21px;background:url('http://i.imgur.com/ooIC6.png') repeat-x;border-bottom:1px solid #bbb;font-family:Arial, sans-serif;font-size:11px;color:#2a2a2a;font-weight:bold;">
<tr>
<td style="text-align:center;vertical-align:middle;width:32px;"> </td>
<td style="text-align:center;vertical-align:middle;width:1px;"><img src="http://i.imgur.com/fmgFA.png" style="width:1px;height:21px;"></td>
<td style="text-align:center;vertical-align:middle;width:14px;">✓</td>
<td style="text-align:center;vertical-align:middle;width:1px;"><img src="http://i.imgur.com/fmgFA.png" style="width:1px;height:21px;"></td>
<td style="text-align:left;vertical-align:middle;width:190px;padding-left:4px;">Name</td>
<td style="text-align:center;vertical-align:middle;width:1px;"><img src="http://i.imgur.com/fmgFA.png" style="width:1px;height:21px;"></td>
<td style="text-align:right;vertical-align:middle;width:56px;padding-right:4px;">Time</td>
<td style="text-align:center;vertical-align:middle;width:1px;"><img src="http://i.imgur.com/fmgFA.png" style="width:1px;height:21px;"></td>
<td style="text-align:left;vertical-align:middle;width:118px;padding-left:4px;">Artist</td>
<td style="text-align:center;vertical-align:middle;width:1px;"><img src="http://i.imgur.com/fmgFA.png" style="width:1px;height:21px;"></td>
<td style="text-align:left;vertical-align:middle;width:118px;padding-left:4px;">Album</td>
<td style="text-align:center;vertical-align:middle;width:1px;"><img src="http://i.imgur.com/fmgFA.png" style="width:1px;height:21px;"></td>
<td style="text-align:left;vertical-align:middle;width:75px;padding-left:4px;">Genre</td>
<td style="text-align:center;vertical-align:middle;width:1px;"><img src="http://i.imgur.com/fmgFA.png" style="width:1px;height:21px;"></td>
<td style="text-align:left;vertical-align:middle;width:75px;padding-left:4px;">Rating</td>
<td style="text-align:center;vertical-align:middle;width:1px;"><img src="http://i.imgur.com/fmgFA.png" style="width:1px;height:21px;"></td>
<td style="text-align:right;vertical-align:middle;width:75px;padding-right:4px;">Plays</td>
<td style="text-align:center;vertical-align:middle;width:1px;"><img src="http://i.imgur.com/fmgFA.png" style="width:1px;height:21px;"></td>
<td style="text-align:left;vertical-align:middle;padding-left:4px;"> </td>
</tr>
</table>
<div style="width:823px;height:382px;overflow:auto;">
<table cellpadding="0" cellspacing="0" style="width:823px;background-color:#FFF;font-family:Arial, sans-serif;font-size:11px;color:#000;">
<tr style="height:19px;background-color:#f2f5f9;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;background-color:#f2f5f9;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;background-color:#f2f5f9;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;background-color:#f2f5f9;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;background-color:#f2f5f9;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;background-color:#f2f5f9;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;background-color:#f2f5f9;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;background-color:#f2f5f9;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;background-color:#f2f5f9;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;background-color:#f2f5f9;">
<td colspan="10"> </td>
</tr>
<tr style="height:19px;">
<td colspan="10"> </td>
</tr>
</table>
</div>
</td>
</tr>
</table>

</div>

Other Images
Rating Star:

Questions/Feedback?
Leave a comment to this post. Thanks!

[Code] iTunes Multi-Playlist Live Example

Sat, 09 Jul 2011 01:01:53 GMT

Playlists

One

Two

Three

Selected Item

✓

Name

Time

Artist

Album

Genre

Rating

Plays

1	Name	Time	Artist	Album	Genre	Rating	Plays	►
2	Name	Time	Artist	Album	Genre	Rating	Plays	►
3	Name	Time	Artist	Album	Genre	Rating	Plays	►
4	Name	Time	Artist	Album	Genre	Rating	Plays	►
5	Name	Time	Artist	Album	Genre	Rating	Plays	►
6	Name	Time	Artist	Album	Genre	Rating	Plays	►
7	Name	Time	Artist	Album	Genre	Rating	Plays	►
8	Name	Time	Artist	Album	Genre	Rating	Plays	►
9	Name	Time	Artist	Album	Genre	Rating	Plays	►
10	Name	Time	Artist	Album	Genre	Rating	Plays	►
11	Name	Time	Artist	Album	Genre	Rating	Plays	►
12	Name	Time	Artist	Album	Genre	Rating	Plays	►
13	Name	Time	Artist	Album	Genre	Rating	Plays	►
14	Name	Time	Artist	Album	Genre	Rating	Plays	►
15	Name	Time	Artist	Album	Genre	Rating	Plays	►
16	Name	Time	Artist	Album	Genre	Rating	Plays	►
17	Name	Time	Artist	Album	Genre	Rating	Plays	►
18	Name	Time	Artist	Album	Genre	Rating	Plays	►
19	Name	Time	Artist	Album	Genre	Rating	Plays	►
20	Name	Time	Artist	Album	Genre	Rating	Plays	►

Playlists

One

Two

Three

Selected Item

✓

Name

Time

Artist

Album

Genre

Rating

Plays

Playlists

One

Two

Three

Selected Item

✓

Name

Time

Artist

Album

Genre

Rating

Plays

[Code] Table-Free IMDB Mock-Up

Fri, 01 Jul 2011 00:25:54 GMT

Partial Live Example

Jensen Ackles

Actor | Director | Producer

Jensen Ackles was born in Dallas, Texas, to Roger Alan Ackles and Donna Joan Ackles (née Shaffer). After modeling as a young child, he began to concentrate on a acting career in 1996 upon his graduation from Lloyd V. Berkner High School in Richardson, Texas. In 1997, he received a role on the NBC soap opera Days of Our Lives as Eric Brady... See full bio »

Born: Jensen Ross Ackles
March 1, 1978 in Dallas, Texas, USA

More at IMDbPro »

Contact Info: View agent, manager and publicist

Represent Jensen Ackles? Add or change photos

308 photos | 33 videos | 1195 news articles »

1 win & 4 nominations See more awards »

Known For

Supernatural (2005)

My Bloody Valentine (2009)

Batman: Under the Red Hood (2010)

Smallville (2001)

Full Live Example

The Code (complete page for Jensen)

<lj-raw>
<center>
<div style="background-color:#FFF;width:737px;font-family:Verdana, sans-serif;font-size:11px;color:#000;text-align:left;">

<div style="min-height:350px;margin:0 20px 6px 20px;-moz-border-radius:0 12px 12px 12px;-webkit-border-radius:0 12px 12px 12px;-o-border-radius:0 12px 12px 12px;-khtml-border-radius:0 12px 12px 12px;border-radius:0 12px 12px 12px;border:1px solid #E8E8E8;padding:10px 12px;">

<div style="padding:5px 0 12px 0;margin:0 0 12px 0;border-bottom:1px dotted #CCC;">
<div style="font-size:21px;margin-bottom:3px;font-weight:bold;">Jensen Ackles</div>
<span style="text-decoration:underline;color:#136CB2;">Actor</span> <span style="color:#CCC;">|</span> <span style="text-decoration:underline;color:#136CB2;">Director</span> <span style="color:#CCC;">|</span> <span style="text-decoration:underline;color:#136CB2;">Producer</span>
</div>

<div style="font-size:12px;margin:0 0 12px 0;">Jensen Ackles was born in Dallas, Texas, to Roger Alan Ackles and Donna Joan Ackles (née Shaffer). After modeling as a young child, he began to concentrate on a acting career in 1996 upon his graduation from Lloyd V. Berkner High School in Richardson, Texas. In 1997, he received a role on the NBC soap opera <span style="text-decoration:underline;color:#136CB2;">Days of Our Lives</span> as Eric Brady... <span style="text-decoration:underline;color:#136CB2;">See full bio</span> »</div>

<div style="font-size:12px;margin:0 0 12px 0;"><span style="font-weight:bold;color:#666;">Born:</span> Jensen Ross Ackles<br />
<span style="text-decoration:underline;color:#136CB2;">March 1</span>, <span style="text-decoration:underline;color:#136CB2;">1978</span> in <span style="text-decoration:underline;color:#136CB2;">Dallas, Texas, USA</span></div>

<div style="color:#666;line-height:16px;">
<div style="float:left;margin-right:3px;"><span style="text-decoration:underline;color:#136CB2;">More at IMDbPro</span> »</div><div style="width:75%;height:9px;border-bottom:1px dotted #CCC;margin-bottom:7px;float:left;"><br /></div>
<div style="margin:2px 0 0 0;"><img src="http://i.imgur.com/qi4q0.png" style="width:13px;height:13px;margin-top:2px;float:left;" /><span style="font-weight:bold;margin:-8px 2px 0 3px;"> Contact Info:</span> <span style="text-decoration:underline;color:#136CB2;">View agent, manager and publicist</span></div>
<div style="margin:2px 0 0 0;"><img src="http://i.imgur.com/g6Tl6.png" style="width:13px;height:13px;margin-top:2px;float:left;" /><span style="font-weight:bold;margin:-8px 2px 0 3px;"> Represent Jensen Ackles?</span> <span style="text-decoration:underline;color:#136CB2;">Add or change photos</span></div>
</div>

</div>

<div style="font-size:12px;">
<img src="http://i.imgur.com/05m5m.png" style="width:15px;height:15px;float:left;"> 
<span style="margin-left:3px;"><span style="text-decoration:underline;color:#136CB2;">308 photos</span> <span style="color:#CCC;">|</span> <span style="text-decoration:underline;color:#136CB2;">33 videos</span> <span style="color:#CCC;">|</span> <span style="text-decoration:underline;color:#136CB2;">1195 news articles</span> »</span>
</div>

</div>

<div style="margin:0 20px;">
<div style="background:#EFE3A4;-moz-border-radius:12px;-webkit-border-radius:12px;-o-border-radius:12px;-khtml-border-radius:12px;border-radius:12px;border:6px double white;margin:-3px -3px 2px -3px;padding:8px 12px;font-size:12px;">1 win & 4 nominations <span style="text-decoration:underline;color:#136CB2;">See more awards</span> »</div>
</div>

<div style="min-height:260px;margin:0 20px 6px 20px;-moz-border-radius:12px;-webkit-border-radius:12px;-o-border-radius:12px;-khtml-border-radius:12px;border-radius:12px;border:1px solid #E8E8E8;padding:10px 12px;font-size:12px;">

<div style="font-size:17.5px;margin-bottom:3px;font-weight:bold;color:#a58500;">Known For</div>

<div style="width:148px;margin:0 24px 5px 0;float:left;"><img src="http://i.imgur.com/2ntNt.jpg" style="width:148px;height:200px;border:1px solid #CCC;" />
<span style="text-decoration:underline;color:#136CB2;">Supernatural (2005)</span></div>

<div style="width:148px;margin:0 24px 5px 0;float:left;"><img src="http://i.imgur.com/7HfGP.jpg" style="width:148px;height:200px;border:1px solid #CCC;" />
<span style="text-decoration:underline;color:#136CB2;">My Bloody Valentine (2009)</span></div>

<div style="width:148px;margin:0 24px 5px 0;float:left;"><img src="http://i.imgur.com/KvBw4.jpg" style="width:148px;height:200px;border:1px solid #CCC;" />
<span style="text-decoration:underline;color:#136CB2;">Batman: Under the Red Hood (2010)</span></div>

<div style="width:148px;margin:0 0 5px 0;float:left;"><img src="http://i.imgur.com/RuaJL.jpg" style="width:148px;height:200px;border:1px solid #CCC;" />
<span style="text-decoration:underline;color:#136CB2;">Smallville (2001)</span></div>

</div>

<div style="margin:0 20px 6px 20px;-moz-border-radius:12px;-webkit-border-radius:12px;-o-border-radius:12px;-khtml-border-radius:12px;border-radius:12px;border:1px solid #E8E8E8;padding:10px 12px;font-size:12px;">

<div style="min-height:32px;margin-bottom:3px;">
<span style="font-size:17.5px;font-weight:bold;color:#a58500;">Filmography</span>
<img src="http://i.imgur.com/B7wkK.png" style="width:305px;height:32px;margin-top:-10px;float:right;" />
</div>

<div style="font-size:12px;margin:0 0 12px 0;">Jump to: <span style="text-decoration:underline;color:#136CB2;">Actor</span> <span style="color:#CCC;">|</span> <span style="text-decoration:underline;color:#136CB2;">Director</span> <span style="color:#CCC;">|</span> <span style="text-decoration:underline;color:#136CB2;">Producer</span> <span style="color:#CCC;">|</span> <span style="text-decoration:underline;color:#136CB2;">Second Unit Director or Assistant Director</span> <span style="color:#CCC;">|</span> <span style="text-decoration:underline;color:#136CB2;">Self</span></div>

<div style="background:url('http://i.imgur.com/DaZ00.png') repeat-x;height:31px;padding:6px 10px;">
<img src="http://i.imgur.com/Vf6ac.png" style="width:46px;height:16px;float:right;" />
<span style="font-size:15px;color:#a58500;"><b>Actor</b> (19 titles)</span>
</div>

<div style="background-color:#f6f6f6;padding:10px;">
<div style="font-size:12px;line-height:16px;">
<div style="float:right;">2005-2011</div>
<span style="text-decoration:underline;color:#136CB2;font-weight:bold;">Supernatural</span> (TV Series)<br />
Dean Winchester
</div>
<div style="font-size:10.5px;line-height:16px;">
– <span style="text-decoration:underline;color:#136CB2;">Let It Bleed</span> (2011) … <span style="text-decoration:underline;color:#136CB2;">Dean Winchester</span><br />
– <span style="text-decoration:underline;color:#136CB2;">The Man Who Knew Too Much</span> (2011) … <span style="text-decoration:underline;color:#136CB2;">Dean Winchester</span> (also archive footage)<br />
– <span style="text-decoration:underline;color:#136CB2;">The Man Who Would Be King</span> (2011) … <span style="text-decoration:underline;color:#136CB2;">Dean Winchester</span> (also archive footage)<br />
– <span style="text-decoration:underline;color:#136CB2;">Mommy Dearest</span> (2011) … <span style="text-decoration:underline;color:#136CB2;">Dean Winchester</span><br />
– <span style="text-decoration:underline;color:#136CB2;">Frontierland</span> (2011) … <span style="text-decoration:underline;color:#136CB2;">Dean Winchester</span><br />
<span style="text-decoration:underline;color:#136CB2;">See all 126 episodes</span> » 
</div>
</div>

<div style="padding:10px;">
<div style="font-size:12px;line-height:16px;">
<div style="float:right;">2011</div>
<span style="text-decoration:underline;color:#136CB2;font-weight:bold;">Supernatural: The Animation</span> (TV Series)<br />
Dean Winchester
</div>
<div style="font-size:10.5px;line-height:16px;">
– <span style="text-decoration:underline;color:#136CB2;">All Hell Breaks Loose: Part 1</span> (2011) … <span style="text-decoration:underline;color:#136CB2;">Dean Winchester</span><br />
– <span style="text-decoration:underline;color:#136CB2;">All Hell Breaks Loose: Part 2</span> (2011) … <span style="text-decoration:underline;color:#136CB2;">Dean Winchester</span> 
</div>
</div>

<div style="background-color:#f6f6f6;padding:10px;">
<div style="font-size:12px;line-height:16px;">
<div style="float:right;">2010</div>
<span style="text-decoration:underline;color:#136CB2;font-weight:bold;">The 3rd Birthday</span> (Video Game)<br />
Kyle Madigan (voice: English version)
</div>
</div>

<div style="padding:10px;">
<div style="font-size:12px;line-height:16px;">
<div style="float:right;">2010</div>
<span style="text-decoration:underline;color:#136CB2;font-weight:bold;">Tron: Evolution</span> (Video Game)<br />
Gibson (voice)
</div>
</div>

<div style="background-color:#f6f6f6;padding:10px;">
<div style="font-size:12px;line-height:16px;">
<div style="float:right;">2010</div>
<span style="text-decoration:underline;color:#136CB2;font-weight:bold;">Batman: Under the Red Hood</span> (video)<br />
<span style="text-decoration:underline;color:#136CB2;">Red Hood</span> (voice)
</div>
</div>

<div style="padding:10px;">
<div style="font-size:12px;line-height:16px;">
<div style="float:right;">2009</div>
<span style="text-decoration:underline;color:#136CB2;font-weight:bold;">My Bloody Valentine</span><br />
<span style="text-decoration:underline;color:#136CB2;">Tom Hanniger</span>
</div>
</div>

<div style="background-color:#f6f6f6;padding:10px;">
<div style="font-size:12px;line-height:16px;">
<div style="float:right;">2007</div>
<span style="text-decoration:underline;color:#136CB2;font-weight:bold;">Ten Inch Hero</span><br />
<span style="text-decoration:underline;color:#136CB2;">Priestly</span>
</div>
</div>

<div style="padding:10px;">
<div style="font-size:12px;line-height:16px;">
<div style="float:right;">2009</div>
<span style="text-decoration:underline;color:#136CB2;font-weight:bold;">Devour</span> (video)<br />
<span style="text-decoration:underline;color:#136CB2;">Jake Gray</span>
</div>
</div>

<div style="background-color:#f6f6f6;padding:10px;">
<div style="font-size:12px;line-height:16px;">
<div style="float:right;">2004-2005</div>
<span style="text-decoration:underline;color:#136CB2;font-weight:bold;">Smallville</span> (TV Series)<br />
Jason Teague
</div>
<div style="font-size:10.5px;line-height:16px;">
– <span style="text-decoration:underline;color:#136CB2;">Commencement</span> (2005) … <span style="text-decoration:underline;color:#136CB2;">Jason Teague</span><br />
– <span style="text-decoration:underline;color:#136CB2;">Forever</span> (2005) … <span style="text-decoration:underline;color:#136CB2;">Jason Teague</span><br />
– <span style="text-decoration:underline;color:#136CB2;">Ageless</span> (2005) … <span style="text-decoration:underline;color:#136CB2;">Jason Teague</span> (credit only)<br />
– <span style="text-decoration:underline;color:#136CB2;">Blank</span> (2005) … <span style="text-decoration:underline;color:#136CB2;">Jason Teague</span><br />
– <span style="text-decoration:underline;color:#136CB2;">Spirit</span> (2005) … <span style="text-decoration:underline;color:#136CB2;">Jason Teague</span><br />
<span style="text-decoration:underline;color:#136CB2;">See all 22 episodes</span> » 
</div>
</div>

<div style="padding:10px;">
<div style="font-size:12px;line-height:16px;">
<div style="float:right;">2004</div>
<span style="text-decoration:underline;color:#136CB2;font-weight:bold;">The Plight of Clownana</span> (short)<br />
Jensen
</div>
</div>

<div style="background-color:#f6f6f6;padding:10px;">
<div style="font-size:12px;line-height:16px;">
<div style="float:right;">2003-2004</div>
<span style="text-decoration:underline;color:#136CB2;font-weight:bold;">Still Life</span> (TV Series)<br />
Max Morgan
</div>
<div style="font-size:10.5px;line-height:16px;">
– <span style="text-decoration:underline;color:#136CB2;">Not Fade Away</span> (2004) … <span style="text-decoration:underline;color:#136CB2;">Max Morgan</span><br />
– <span style="text-decoration:underline;color:#136CB2;">Gravity</span> (2004) … <span style="text-decoration:underline;color:#136CB2;">Max Morgan</span><br />
– <span style="text-decoration:underline;color:#136CB2;">Pilot</span> (2003) … <span style="text-decoration:underline;color:#136CB2;">Max Morgan</span><br />
– <span style="text-decoration:underline;color:#136CB2;">Caught</span> … <span style="text-decoration:underline;color:#136CB2;">Max Morgan</span><br />
– <span style="text-decoration:underline;color:#136CB2;">Dissappearances</span> … <span style="text-decoration:underline;color:#136CB2;">Max Morgan</span><br />
<span style="text-decoration:underline;color:#136CB2;">See all 6 episodes</span> »  
</div>
</div>

<div style="padding:10px;">
<div style="font-size:12px;line-height:16px;">
<div style="float:right;">2002-2003</div>
<span style="text-decoration:underline;color:#136CB2;font-weight:bold;">Dawson's Creek</span> (TV Series)<br />
C.J.
</div>
<div style="font-size:10.5px;line-height:16px;">
– <span style="text-decoration:underline;color:#136CB2;">Goodbye, Yellow Brick Road</span> (2003) … <span style="text-decoration:underline;color:#136CB2;">C.J.</span><br />
– <span style="text-decoration:underline;color:#136CB2;">Lovelines</span> (2003) … <span style="text-decoration:underline;color:#136CB2;">C.J.</span><br />
– <span style="text-decoration:underline;color:#136CB2;">Love Bites</span> (2003) … <span style="text-decoration:underline;color:#136CB2;">C.J.</span><br />
– <span style="text-decoration:underline;color:#136CB2;">Sex and Violence</span> (2003) … <span style="text-decoration:underline;color:#136CB2;">C.J.</span><br />
– <span style="text-decoration:underline;color:#136CB2;">Clean and Sober</span> (2003) … <span style="text-decoration:underline;color:#136CB2;">C.J.</span><br />
<span style="text-decoration:underline;color:#136CB2;">See all 12 episodes</span> » 
</div>
</div>

<div style="background-color:#f6f6f6;padding:10px;">
<div style="font-size:12px;line-height:16px;">
<div style="float:right;">2001-2002</div>
<span style="text-decoration:underline;color:#136CB2;font-weight:bold;">Dark Angel</span> (TV Series)<br />
Alec / X5-494 / Ben / … 
</div>
<div style="font-size:10.5px;line-height:16px;">
– <span style="text-decoration:underline;color:#136CB2;">Freak Nation</span> (2002) … <span style="text-decoration:underline;color:#136CB2;">Alec</span> / <span style="text-decoration:underline;color:#136CB2;">X5-494</span><br />
– <span style="text-decoration:underline;color:#136CB2;">Love Among the Runes</span> (2002) … <span style="text-decoration:underline;color:#136CB2;">Alec</span> / <span style="text-decoration:underline;color:#136CB2;">X5-494</span><br />
– <span style="text-decoration:underline;color:#136CB2;">She Ain't Heavy</span> (2002) … <span style="text-decoration:underline;color:#136CB2;">Alec</span> / <span style="text-decoration:underline;color:#136CB2;">X5-494</span><br />
– <span style="text-decoration:underline;color:#136CB2;">Dawg Day Afternoon</span> (2002) … <span style="text-decoration:underline;color:#136CB2;">Alec</span> / <span style="text-decoration:underline;color:#136CB2;">X5-494</span><br />
– <span style="text-decoration:underline;color:#136CB2;">Hello, Goodbye (2002)</span> … <span style="text-decoration:underline;color:#136CB2;">Alec</span> / <span style="text-decoration:underline;color:#136CB2;">X5-494</span><br />
<span style="text-decoration:underline;color:#136CB2;">See all 22 episodes</span> »
</div>
</div>

<div style="padding:10px;">
<div style="font-size:12px;line-height:16px;">
<div style="float:right;">2001</div>
<span style="text-decoration:underline;color:#136CB2;font-weight:bold;">Blonde</span> (TV mini-series)<br />
<span style="text-decoration:underline;color:#136CB2;">Eddie G</span>
</div>
</div>

<div style="background-color:#f6f6f6;padding:10px;">
<div style="font-size:12px;line-height:16px;">
<div style="float:right;">1997-2000</div>
<span style="text-decoration:underline;color:#136CB2;font-weight:bold;">Days of Our Lives</span> (TV Series)<br />
Eric Brady / Eric Roman Brady
</div>
<div style="font-size:10.5px;line-height:16px;">
– <span style="text-decoration:underline;color:#136CB2;">Episode #1.8854</span> (2000) … Eric Brady<br />
– <span style="text-decoration:underline;color:#136CB2;">Episode #1.8821</span> (2000) … Eric Brady<br />
– <span style="text-decoration:underline;color:#136CB2;">Episode #1.8733</span> (2000) … Eric Brady<br />
– <span style="text-decoration:underline;color:#136CB2;">Episode #1.8620</span> (1999) … Eric Brady<br />
– <span style="text-decoration:underline;color:#136CB2;">Episode #1.8618</span> (1999) … Eric Brady<br />
<span style="text-decoration:underline;color:#136CB2;">See all 16 episodes</span> »
</div>
</div>

<div style="padding:10px;">
<div style="font-size:12px;line-height:16px;">
<div style="float:right;">1997</div>
<span style="text-decoration:underline;color:#136CB2;font-weight:bold;">Cybil</span> (TV Series)<br />
David
</div>
<div style="font-size:10.5px;line-height:16px;">
– <span style="text-decoration:underline;color:#136CB2;">The Wedding</span> (1997) … David
</div>
</div>

<div style="background-color:#f6f6f6;padding:10px;">
<div style="font-size:12px;line-height:16px;">
<div style="float:right;">1996-1997</div>
<span style="text-decoration:underline;color:#136CB2;font-weight:bold;">Mr. Rhodes</span> (TV Series)<br />
Malcolm
</div>
<div style="font-size:10.5px;line-height:16px;">
– <span style="text-decoration:underline;color:#136CB2;">The Valentine Show</span> (1997) … <span style="text-decoration:underline;color:#136CB2;">Malcolm</span><br />
– <span style="text-decoration:underline;color:#136CB2;">Tom's Not Headmaster Show</span> (1997) … <span style="text-decoration:underline;color:#136CB2;">Malcolm</span><br />
– <span style="text-decoration:underline;color:#136CB2;">The Welcome Back Show</span> (1997) … <span style="text-decoration:underline;color:#136CB2;">Malcolm</span><br />
– <span style="text-decoration:underline;color:#136CB2;">The Italian Show</span> (1997) … <span style="text-decoration:underline;color:#136CB2;">Malcolm</span><br />
– <span style="text-decoration:underline;color:#136CB2;">The Courtroom Show</span> (1997) … <span style="text-decoration:underline;color:#136CB2;">Malcolm</span><br />
<span style="text-decoration:underline;color:#136CB2;">See all 7 episodes</span> »
</div>
</div>

<div style="padding:10px;">
<div style="font-size:12px;line-height:16px;">
<div style="float:right;">1996</div>
<span style="text-decoration:underline;color:#136CB2;font-weight:bold;">Sweet Valley High</span> (TV Series)<br />
Brad
</div>
<div style="font-size:10.5px;line-height:16px;">
– <span style="text-decoration:underline;color:#136CB2;">All Along the Water Tower</span> (1996) … Brad
</div>
</div>

<div style="background-color:#f6f6f6;padding:10px;">
<div style="font-size:12px;line-height:16px;">
<div style="float:right;">1996</div>
<span style="text-decoration:underline;color:#136CB2;font-weight:bold;">Wishbone</span> (TV Series)<br />
Michael Duss
</div>
<div style="font-size:10.5px;line-height:16px;">
– <span style="text-decoration:underline;color:#136CB2;">Viva Wishbone!</span> (1996) … Michael Duss
</div>
</div>

</div>

<div style="background:url('http://i.imgur.com/DaZ00.png') repeat-x;height:31px;padding:6px 10px;">
<img src="http://i.imgur.com/Vf6ac.png" style="width:46px;height:16px;float:right;" />
<span style="font-size:15px;color:#a58500;"><b>Director</b> (1 title)</span>
</div>

<div style="background-color:#f6f6f6;padding:10px;">
<div style="font-size:12px;line-height:16px;">
<div style="float:right;">2010</div>
<span style="text-decoration:underline;color:#136CB2;font-weight:bold;">Supernatural</span> (TV Series)
</div>
<div style="font-size:10.5px;line-height:16px;">
– <span style="text-decoration:underline;color:#136CB2;">Weekend at Bobby's</span> (2010)
</div>
</div>

</div>

<div style="background:url('http://i.imgur.com/DaZ00.png') repeat-x;height:31px;padding:6px 10px;">
<img src="http://i.imgur.com/Vf6ac.png" style="width:46px;height:16px;float:right;" />
<span style="font-size:15px;color:#a58500;"><b>Producer</b> (1 title)</span>
</div>

<div style="background-color:#f6f6f6;padding:10px;">
<div style="font-size:12px;line-height:16px;">
<div style="float:right;">2004</div>
<span style="text-decoration:underline;color:#136CB2;font-weight:bold;">The Plight of Clownana</span> (short) (executive producer)
</div>
</div>

</div>

<div style="background:url('http://i.imgur.com/DaZ00.png') repeat-x;height:31px;padding:6px 10px;">
<img src="http://i.imgur.com/Vf6ac.png" style="width:46px;height:16px;float:right;" />
<span style="font-size:15px;color:#a58500;"><b>Second Unit Director or Assistant Director</b> (1 title)</span>
</div>

</div>

<div style="background:url('http://i.imgur.com/DaZ00.png') repeat-x;height:31px;padding:6px 10px;">
<img src="http://i.imgur.com/t6BN0.png" style="width:46px;height:16px;float:right;" />
<span style="font-size:15px;color:#a58500;"><b>Self</b> (18 titles)</span>
</div>
<div style="margin:-10px 0 1px 0;height:0;"> </div>

</div>

<div style="margin:0 20px 6px 20px;-moz-border-radius:12px;-webkit-border-radius:12px;-o-border-radius:12px;-khtml-border-radius:12px;border-radius:12px;border:1px solid #E8E8E8;padding:10px 12px;font-size:12px;">

<div style="font-size:17.5px;margin-bottom:3px;font-weight:bold;color:#a58500;">Related Videos</div>

</div>

<div style="margin:0 20px 6px 20px;-moz-border-radius:12px;-webkit-border-radius:12px;-o-border-radius:12px;-khtml-border-radius:12px;border-radius:12px;border:1px solid #E8E8E8;padding:10px 12px;font-size:12px;">

<div style="margin-top:-10px;border-left:1px dotted #CCC;padding:10px 0 0 6px;float:right;"><span style="text-decoration:underline;color:#136CB2;font-size:10.5px;">Edit</span></div>
<div style="font-size:17.5px;margin-bottom:3px;font-weight:bold;color:#a58500;">Personal Details</div>

<div style="padding:10px 0;border-bottom:1px dotted #CCC;">
<span style="font-weight:bold;color:#666;margin-right:4px;">Other Works:</span> Sings back-up vocals on good friend 'Steve Carlson's' (VI) albums - "Spot in the Corner" and "Rollin' On" <span style="text-decoration:underline;color:#136CB2;">See more</span> »
</div>

<div style="padding:6px 0 10px 0;border-bottom:1px dotted #CCC;">
<span style="font-weight:bold;color:#666;margin-right:4px;">Publicity Listings:</span> 6 Articles <span style="color:#CCC;">|</span> 2 Magazine Cover Photos <span style="color:#CCC;">|</span> <span style="text-decoration:underline;color:#136CB2;">See more</span> »
</div>

<div style="padding:10px 0;border-bottom:1px dotted #CCC;">
<span style="font-weight:bold;color:#666;margin-right:4px;">Official Sites:</span> <span style="text-decoration:underline;color:#136CB2;">The Official Jensen Ackles Newsletter</span> <span style="color:#CCC;">|</span> <span style="text-decoration:underline;color:#136CB2;">See more</span> »
</div>

<div style="padding:10px 0 0 0;">
<span style="font-weight:bold;color:#666;margin-right:4px;">Height:</span> 6' 1" (1.85 m)
</div>

</div>
</div>

<div style="margin:0 20px 6px 20px;-moz-border-radius:12px;-webkit-border-radius:12px;-o-border-radius:12px;-khtml-border-radius:12px;border-radius:12px;border:1px solid #E8E8E8;padding:10px 12px;font-size:12px;">

<div style="padding:10px 0;border-bottom:1px dotted #CCC;">
<span style="font-weight:bold;color:#666;margin-right:3px;">Personal Quote:</span> On working with Jared: Jared and I are lucky to get along so well without having any effort to make. One day, the producers came to see us and told us they had never worked with actors who got along so well. It gives us the opportunity to make the relationship between Sam and Dean have credibility. I think the audience feels how much Jared and I like being together. <span style="text-decoration:underline;color:#136CB2;">See more</span> »
</div>

<div style="padding:10px 0;border-bottom:1px dotted #CCC;">
<span style="font-weight:bold;color:#666;margin-right:4px;">Trivia:</span> He is a keen photographer and is always taking photos on the set of <span style="text-decoration:underline;color:#136CB2;">Supernatural</span>. <span style="text-decoration:underline;color:#136CB2;">See more</span> »
</div>

<div style="padding:10px 0;border-bottom:1px dotted #CCC;">
<span style="font-weight:bold;color:#666;margin-right:4px;">Trademark:</span> Deep Husky Voice <span style="text-decoration:underline;color:#136CB2;">See more</span> »
</div>

<div style="padding:10px 0;border-bottom:1px dotted #CCC;">
<span style="font-weight:bold;color:#666;margin-right:4px;">Nickname:</span> Jackles <span style="text-decoration:underline;color:#136CB2;">See more</span> »
</div>

<div style="padding:10px 0 0 0;">
<span style="font-weight:bold;color:#666;margin-right:4px;">Star Sign:</span> <span style="text-decoration:underline;color:#136CB2;">Pisces</span>
</div>

</div>
</div>

<div style="margin:0 20px 6px 20px;-moz-border-radius:12px;-webkit-border-radius:12px;-o-border-radius:12px;-khtml-border-radius:12px;border-radius:12px;border:1px solid #E8E8E8;padding:10px 12px;font-size:12px;">

<div style="font-size:17.5px;margin-bottom:3px;font-weight:bold;color:#a58500;">Message Boards</div>

<div style="font-size:12.5px;line-height:19px;">
<div style="padding-top:7px;border-bottom:1px dotted #CCC;margin-bottom:10px;">
Recent Posts (updated daily)
<div style="text-decoration:underline;color:#136CB2;margin-top:3px;">

<div style="background-color:#f6f6f6;padding:6px;min-height:24px;">
<div style="width:462px;margin-right:5px;float:left;">Will he blow up after Supernatural or fade away?</div>
<div style="float:left;">liftedyukon99</div>
</div>

<div style="padding:6px;min-height:24px;">
<div style="width:462px;margin-right:5px;float:left;">The CW renews Supernatural</div>
<div style="float:left;">fifimom</div>
</div>

<div style="background-color:#f6f6f6;padding:6px;min-height:24px;">
<div style="width:462px;margin-right:5px;float:left;">my SPN blog</div>
<div style="float:left;">Beowulfxox</div>
</div>

<div style="padding:6px;min-height:24px;">
<div style="width:462px;margin-right:5px;float:left;">My New Article on Jensen Ackles directing Supernatural</div>
<div style="float:left;">gollysunshine</div>
</div>

<div style="background-color:#f6f6f6;padding:6px;min-height:24px;">
<div style="width:462px;margin-right:5px;float:left;">Does Jensen smoke?</div>
<div style="float:left;">hr_gw</div>
</div>

<div style="padding:6px;min-height:24px;">
<div style="width:462px;margin-right:5px;float:left;">I liked the idea of...</div>
<div style="float:left;">deanwinchester3111</div>
</div>

</div>
</div>

<span style="text-decoration:underline;color:#136CB2;">Discuss Jensen Ackles</span> on the IMDb message boards »

</div>

</div>

<div style="margin:0 20px 6px 20px;-moz-border-radius:12px;-webkit-border-radius:12px;-o-border-radius:12px;-khtml-border-radius:12px;border-radius:12px;border:1px solid #E8E8E8;padding:10px 12px;font-size:12px;">

<div style="margin-top:-10px;border-left:1px dotted #CCC;padding:10px 0 0 6px;float:right;"><span style="text-decoration:underline;color:#136CB2;font-size:10.5px;">Getting Started</span> <span styl="color:#CCC;">|</span> <span style="text-decoration:underline;color:#136CB2;font-size:10.5px;">Contributor Zone</span> »</div>
<div style="font-size:17.5px;margin-bottom:3px;font-weight:bold;color:#a58500;">Contribute to This Page</div>

</div>

<div style="margin:0 20px 6px 20px;-moz-border-radius:12px;-webkit-border-radius:12px;-o-border-radius:12px;-khtml-border-radius:12px;border-radius:12px;border:1px solid #E8E8E8;padding:10px 12px;font-size:12px;background-color:#FDFCF4;">

<div style="font-size:17.5px;margin-bottom:3px;font-weight:bold;color:#a58500;">Explore More About Jensen Ackles</div>

<div style="float:left;margin-right:48px;">
<span style="font-size:12px;color:#666;font-weight:bold;">Filmography</span><br />
Sorted by:<br />
<span style="text-decoration:underline;color:#136CB2;">job type<br />
year<br />
ratings<br />
votes<br />
tv series<br />
genre<br />
keyword</span><br /><br />

<span style="font-size:12px;color:#666;font-weight:bold;">Did You Know?</span><br />
<span style="text-decoration:underline;color:#136CB2;">personal quotes<br />
trivia<br />
trademark</span><br />
</div>

<div style="float:left;margin-right:48px;">
<span style="font-size:12px;color:#666;font-weight:bold;">Personal Details</span><br />
<span style="text-decoration:underline;color:#136CB2;">biography<br />
other works<br />
publicity listings<br />
official sites<br />
contact info</span><br /><br />

<span style="font-size:12px;color:#666;font-weight:bold;">Buzz</span><br />
<span style="text-decoration:underline;color:#136CB2;">NewsDesk</span><br />
<span style="color:#CCC;">blog<br />
twitter</span><br /><br />

<span style="font-size:12px;color:#666;font-weight:bold;">Photos & Video</span><br />
<span style="text-decoration:underline;color:#136CB2;">photo gallery<br />
trailers and videos</span><br />
</div>

<div style="float:left;margin-right:48px;">
<span style="font-size:12px;color:#666;font-weight:bold;">Opinion</span><br />
<span style="text-decoration:underline;color:#136CB2;">awards<br />
message board</span><br /><br />

<span style="font-size:12px;color:#666;font-weight:bold;">External Links</span><br />
<span style="text-decoration:underline;color:#136CB2;">miscellaneous<br />
photographs<br />
sound clips<br />
video clips<br />
Related Items<br />
credited with<br />
tv schedule<br />
titles for sale</span><br />
</div>

<div style="float:left;">
<span style="font-size:12px;color:#666;font-weight:bold;">Feedback on the redesign?</span><br />
<span style="text-decoration:underline;color:#136CB2;">Tell us what you think.<br />
Read the FAQ</span><br /><br />

<span style="font-size:12px;color:#666;font-weight:bold;">Professional Services</span><br />
<span style="text-decoration:underline;color:#136CB2;">get more at IMDbPro<br />
promote yourself with a resume<br />
add or change photos</span><br />
</div>

</div>
</div>

<div style="margin:0 20px 6px 20px;-moz-border-radius:12px;-webkit-border-radius:12px;-o-border-radius:12px;-khtml-border-radius:12px;border-radius:12px;border:1px solid #E8E8E8;padding:10px 12px;font-size:12px;">
<br />
</div>

</div>
</center>
</lj-raw>

NOTES
Main image is 214px by 314px
Mini images are 100px by 100px
Known For work images are 148px by 200px
Videos are 200px by 150px

All images are hosted for free through Imgur.
(This means you don't have to re-upload unless you really want to.)

Questions/Feedback?
Leave a comment to this post. Thanks!

[Code] IMDB Mock-Up Example

Thu, 30 Jun 2011 12:36:37 GMT

Jensen Ackles

Actor | Director | Producer

Born: Jensen Ross Ackles
March 1, 1978 in Dallas, Texas, USA

More at IMDbPro »

Contact Info: View agent, manager and publicist

Represent Jensen Ackles? Add or change photos

308 photos | 33 videos | 1195 news articles »

1 win & 4 nominations See more awards »

Known For

Supernatural (2005)

My Bloody Valentine (2009)

Batman: Under the Red Hood (2010)

Smallville (2001)

Filmography

Jump to: Actor | Director | Producer | Second Unit Director or Assistant Director | Self

Actor (19 titles)

2005-2011

Supernatural (TV Series)
Dean Winchester

– Let It Bleed (2011) … Dean Winchester
– The Man Who Knew Too Much (2011) … Dean Winchester (also archive footage)
– The Man Who Would Be King (2011) … Dean Winchester (also archive footage)
– Mommy Dearest (2011) … Dean Winchester
– Frontierland (2011) … Dean Winchester
See all 126 episodes »

2011

Supernatural: The Animation (TV Series)
Dean Winchester

– All Hell Breaks Loose: Part 1 (2011) … Dean Winchester
– All Hell Breaks Loose: Part 2 (2011) … Dean Winchester

2010

The 3rd Birthday (Video Game)
Kyle Madigan (voice: English version)

2010

Tron: Evolution (Video Game)
Gibson (voice)

2010

Batman: Under the Red Hood (video)
Red Hood (voice)

2009

My Bloody Valentine
Tom Hanniger

2007

Ten Inch Hero
Priestly

2009

Devour (video)
Jake Gray

2004-2005

Smallville (TV Series)
Jason Teague

– Commencement (2005) … Jason Teague
– Forever (2005) … Jason Teague
– Ageless (2005) … Jason Teague (credit only)
– Blank (2005) … Jason Teague
– Spirit (2005) … Jason Teague
See all 22 episodes »

2004

The Plight of Clownana (short)
Jensen

2003-2004

Still Life (TV Series)
Max Morgan

– Not Fade Away (2004) … Max Morgan
– Gravity (2004) … Max Morgan
– Pilot (2003) … Max Morgan
– Caught … Max Morgan
– Dissappearances … Max Morgan
See all 6 episodes »

2002-2003

Dawson's Creek (TV Series)
C.J.

– Goodbye, Yellow Brick Road (2003) … C.J.
– Lovelines (2003) … C.J.
– Love Bites (2003) … C.J.
– Sex and Violence (2003) … C.J.
– Clean and Sober (2003) … C.J.
See all 12 episodes »

2001-2002

Dark Angel (TV Series)
Alec / X5-494 / Ben / …

– Freak Nation (2002) … Alec / X5-494
– Love Among the Runes (2002) … Alec / X5-494
– She Ain't Heavy (2002) … Alec / X5-494
– Dawg Day Afternoon (2002) … Alec / X5-494
– Hello, Goodbye (2002) … Alec / X5-494
See all 22 episodes »

2001

Blonde (TV mini-series)
Eddie G

1997-2000

Days of Our Lives (TV Series)
Eric Brady / Eric Roman Brady

– Episode #1.8854 (2000) … Eric Brady
– Episode #1.8821 (2000) … Eric Brady
– Episode #1.8733 (2000) … Eric Brady
– Episode #1.8620 (1999) … Eric Brady
– Episode #1.8618 (1999) … Eric Brady
See all 16 episodes »

1997

Cybil (TV Series)
David

– The Wedding (1997) … David

1996-1997

Mr. Rhodes (TV Series)
Malcolm

– The Valentine Show (1997) … Malcolm
– Tom's Not Headmaster Show (1997) … Malcolm
– The Welcome Back Show (1997) … Malcolm
– The Italian Show (1997) … Malcolm
– The Courtroom Show (1997) … Malcolm
See all 7 episodes »

1996

Sweet Valley High (TV Series)
Brad

– All Along the Water Tower (1996) … Brad

1996

Wishbone (TV Series)
Michael Duss

– Viva Wishbone! (1996) … Michael Duss

Director (1 title)

2010

Supernatural (TV Series)

– Weekend at Bobby's (2010)

Producer (1 title)

2004

The Plight of Clownana (short) (executive producer)

Second Unit Director or Assistant Director (1 title)

2004

The Plight of Clownana (short) (first assistant director)

Self (18 titles)

[Code] Customizable Droid 2 HTML Template

Wed, 29 Jun 2011 15:49:53 GMT

Live Examples

10:41 AM

Them: Message
Sent: Jun 28

Me: Message
Sent: Jun 28

Them: Message
Sent: Jun 28

Me: Message
Sent: Jun 28

Them: Message
Sent: Jun 28

Me: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et metus sit amet augue ultricies fermentum nec quis ante.
Sent: Jun 28

Them: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et metus sit amet augue ultricies fermentum nec quis ante.
Sent: Jun 28

Their Name (555-555-5555)

10:41 AM

The Code

Instructions

- Replace YOUR_WALLPAPER_URL with URL of 198px x 347px image
- Replace YOUR:TIME AM/PM with current phone time

<lj-raw>
<div style="background:url('http://i.imgur.com/lvcj9.png') no-repeat;width:486px;height:381px;">

<div style="min-height:44px;padding:1px 5px;background-color:#eefaff;"><img src="http://i.imgur.com/iVMfd.png" style="width:38px;height:42px;margin:0 3px 1px 0;float:left;" /><img src="http://i.imgur.com/qErQc.png" style="width:32px;height:32px;margin:3px 7px 3px -38px;float:left;" /><div style="padding:3px 0;"><b>THEM:</b> THEIR MESSAGE
<br /><span style="font-size:9px;color:#444;">Sent: DATE</span></div></div>

<div style="min-height:44px;padding:1px 5px;"><img src="http://i.imgur.com/R0Z2a.png" style="width:38px;height:38px;margin:0 3px 1px 0;float:left;" /><img src="YOUR_ICON_URL" style="width:32px;height:32px;margin:3px 7px 3px -38px;float:left;" /><div style="padding:3px 0;"><b>Me:</b> YOUR MESSAGE
<br /><span style="font-size:9px;color:#444;">Sent: DATE</span></div></div>

<div style="min-height:44px;padding:1px 5px;background-color:#eefaff;"><img src="http://i.imgur.com/iVMfd.png" style="width:38px;height:42px;margin:0 3px 1px 0;float:left;" /><img src="THEIR_ICON_URL" style="width:32px;height:32px;margin:3px 7px 3px -38px;float:left;" /><div style="padding:3px 0;"><b>THEM:</b> THEIR MESSAGE
<br /><span style="font-size:9px;color:#444;">Sent: DATE</span></div></div>

</div>

<div style="color:#FFF;font-family:Arial, sans-serif;font-size:10px;margin:-181px 0 0 67px;float:left;text-shadow:2px 2px 2px #444;"><span style="font-size:12px;font-weight:bold;">THEIR NAME</span> (555-555-5555)</div>

</div>
</lj-raw>

Instructions

- Replace YOUR:TIME AM/PM with current phone time
- Replace THEIR NAME with the name of the sender
- Replace 555-555-5555 with sender's phone number/email address
- Replace THEIR_ICON_URL with a URL of a square icon representing the sender
- Replace THEIR MESSAGE with the sender's message
- Replace YOUR_ICON_URL with a URL of a square icon representing the recipient
- Replace YOUR MESSAGE with recipient's message
- Replace DATE with date and/or time of that each message was sent

Note: You can have as many messages of any length as you want, just copy the appropriate sender or recipient DIV blocks.

The Images

The Base http://i.imgur.com/lvcj9.png	The Signal Bar http://i.imgur.com/wfqBv.png	The Dock http://i.imgur.com/KAnhx.png
The Top Messaging Bar http://i.imgur.com/2QGO9.png	The Lower Messaging Bar http://i.imgur.com/jFIIO.png	Sender Icon Border http://i.imgur.com/iVMfd.png	Recipient Icon Border http://i.imgur.com/R0Z2a.png

Image Source

Questions/Feedback?
Leave a comment to this post. Thanks!

[Code] HTML Family Trees

Tue, 28 Jun 2011 17:34:58 GMT

Live Example

Paternal Grandpa

Paternal Grandma

Maternal Grandpa

Maternal Grandma

	Father

	Mother


Kid #1


Kid #2


Kid #3


Kid #4


Kid #5

The Code

<table align="center" style="width:1000px;font-size:11px;" cellpadding="0" cellspacing="0">

<tr>
<td colspan="3" style="width:104px;text-align:center;padding:2px;background-color:#CCC;">Paternal Grandpa</td>
<td colspan="3" style="width:10px;"><br  /></td>
<td colspan="3" style="width:104px;text-align:center;padding:2px;background-color:#CCC;">Paternal Grandma</td>

<td colspan="3" style="width:104px;text-align:center;padding:2px;background-color:#CCC;">Maternal Grandpa</td>
<td colspan="3" style="width:10px;"> </td>
<td colspan="3" style="width:104px;text-align:center;padding:2px;background-color:#CCC;">Maternal Grandma</td>
</tr>

<tr>
<td colspan="9" style="width:218px;"><table style="width:100%;font-size:11px;" cellpadding="0" cellspacing="0">
<tr>
<td style="width:57px;"><br /></td>
<td colspan="3" style="width:104px;padding:2px;text-align:center;background-color:#CCC;">Father</td>
<td style="width:57px;"><br /></td>
</tr>

<td colspan="9" style="width:218px;"><table style="width:100%;font-size:11px;" cellpadding="0" cellspacing="0">
<tr>
<td style="width:57px;"><br /></td>
<td colspan="3" style="width:104px;padding:2px;text-align:center;background-color:#CCC;">Mother</td>
<td style="width:57px;"><br /></td>
</tr>

<tr>
<td colspan="19" style="width:100%;"><table align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="width:104px;"><table style="width:100%;font-size:11px;" cellpadding="0" cellspacing="0">
<tr>
<td style="width:51px;"><br /></td>
<td style="width:2px;height:25px;background-color:#CCC;"><br /></td>
<td style="width:51px;"><br /></td>
</tr>
<tr>
<td colspan="3" style="width:104px;padding:2px;background-color:#CCC;text-align:center;">Kid #1</td>
</tr>
</table></td>

Live Example

Cameron Kirke

pureblood

Gwendolynn Priddy

muggleborn

Papa Jones

muggleborn

Mama Jones

muggleborn

	Brand curse breaker

	Julia housewife


Leah Beth 1979


James Theodore 1981


Andrew Zachery 1982


Lily Isobel 1984


Samuel Reid 1984

STORY OF THE FAMILY
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacinia faucibus ultricies. Vivamus porttitor lobortis diam, et facilisis felis vehicula eget. Vestibulum imperdiet lorem a metus aliquet id consequat diam porttitor. Donec porta risus gravida arcu pulvinar gravida. Sed vitae justo nisl, non eleifend nisi. Pellentesque id metus ligula, vel aliquam nisl. Sed pretium nisl eu metus vulputate in consequat magna volutpat. Sed quam mi, egestas eget luctus eget, aliquet vel ipsum. In hac habitasse platea dictumst.

Ut tincidunt dui ac mauris luctus faucibus dignissim magna fermentum. Etiam eu nulla mi. Aliquam ipsum justo, posuere id sagittis sit amet, mattis at dolor. Ut et tortor augue, eu tincidunt enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu ultricies odio. Aliquam erat volutpat. Phasellus sagittis auctor commodo. Sed ultrices commodo commodo. Phasellus ultrices aliquam orci in venenatis. Vivamus mauris risus, blandit non dapibus sed, pellentesque ac arcu. Sed ultrices commodo commodo. Phasellus ultrices aliquam orci in venenatis.

The Code

<table align="center" style="width:1024px;background:url('http://i82.photobucket.com/albums/j251/VanyaElda/Valesco/Family%20Trees/kirkeback.png');border:4px solid #2b2616;padding:8px;font-size:11px;font-family:Trebuchet MS, sans-serif;color:#d9b43b;" cellpadding="0" cellspacing="0">

<tr>
<td colspan="3" style="width:104px;text-align:center;padding:2px;background-color:#4f0606;">Cameron Kirke
<img src="http://i.imgur.com/wdQEn.png" style="width:100px;height:100px;margin:2px 0;" />
<small>pureblood</small></td>
<td colspan="3" style="width:10px;"><br  /></td>
<td colspan="3" style="width:104px;text-align:center;padding:2px;background-color:#4f0606;">Gwendolynn Priddy
<img src="http://i.imgur.com/lxyY0.png" style="width:100px;height:100px;margin:2px 0;" />
<small>muggleborn</small></td>

<td colspan="3" style="width:104px;text-align:center;padding:2px;background-color:#4f0606;">Papa Jones
<img src="http://i.imgur.com/CF7KJ.png" style="width:100px;height:100px;margin:2px 0;" />
<small>muggleborn</small></td>
<td colspan="3" style="width:10px;"> </td>
<td colspan="3" style="width:104px;text-align:center;padding:2px;background-color:#4f0606;">Mama Jones
<img src="http://i.imgur.com/3xTo9.png" style="width:100px;height:100px;margin:2px 0;" />
<small>muggleborn</small></td>
</tr>

<tr>
<td colspan="9" style="width:218px;"><table style="width:100%;font-size:11px;font-family:Trebuchet MS, sans-serif;color:#d9b43b;" cellpadding="0" cellspacing="0">
<tr>
<td style="width:57px;"><br /></td>
<td colspan="3" style="width:104px;padding:2px;text-align:center;background-color:#4f0606;">Brand
<img src="http://i471.photobucket.com/albums/rr74/Graclessally/Role%20Play/Valesco/Family%20Trees/kirke_brand.png" style="width:100px;height:100px;padding:2px;" />
<small>curse breaker</small></td>
<td style="width:57px;"><br /></td>
</tr>

<td colspan="9" style="width:218px;"><table style="width:100%;font-size:11px;font-family:Trebuchet MS, sans-serif;color:#d9b43b;" cellpadding="0" cellspacing="0">
<tr>
<td style="width:57px;"><br /></td>
<td colspan="3" style="width:104px;padding:2px;text-align:center;background-color:#4f0606;">Julia
<img src="http://i471.photobucket.com/albums/rr74/Graclessally/Role%20Play/Valesco/Family%20Trees/kirke_julia.png" style="width:100px;height:100px;padding:2px;" />
<small>housewife</small></td>
<td style="width:57px;"><br /></td>
</tr>

<tr>
<td colspan="19" style="width:100%;"><table align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="width:104px;"><table style="width:100%;font-size:11px;font-family:Trebuchet MS, sans-serif;color:#d9b43b;" cellpadding="0" cellspacing="0">
<tr>
<td style="width:51px;"><br /></td>
<td style="width:2px;height:25px;background-color:#4f0606;"><br /></td>
<td style="width:51px;"><br /></td>
</tr>
<tr>
<td colspan="3" style="width:104px;padding:2px;background-color:#4f0606;text-align:center;">Leah <i>Beth</i>
<img src="http://i471.photobucket.com/albums/rr74/Graclessally/Role%20Play/Valesco/Family%20Trees/kirke_leah.png" style="width:100px;height:100px;padding:2px;" />
<small>1979</small></td>
</tr>
</table></td>

<td style="width:104px;"><table style="width:100%;font-size:11px;font-family:Trebuchet MS, sans-serif;color:#d9b43b;" cellpadding="0" cellspacing="0">
<tr>
<td style="width:51px;"><br /></td>
<td style="width:2px;height:25px;background-color:#4f0606;"><br /></td>
<td style="width:51px;"><br /></td>
</tr>
<tr>
<td colspan="3" style="width:104px;padding:2px;background-color:#4f0606;text-align:center;">Samuel <i>Reid</i>
<img src="http://i471.photobucket.com/albums/rr74/Graclessally/Role%20Play/Valesco/Family%20Trees/kirke_sam.png" style="width:100px;height:100px;padding:2px;" />
<small>1984</small></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>

</table>
<div style="margin-top:-542px;width:1024px;min-height:542px;text-align:center;font-family:Trebuchet MS, sans-serif;color#2b2616;font-size:11px;"><center><div style="margin-top:-10px;height:300px;width:516px;overflow:auto;background-color:#f1d782;border:4px solid #2b2616;padding:8px;text-align:justify;"><center><font size=+1 color="#ad0f0f"><b>STORY OF THE FAMILY</b></font></center>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacinia faucibus ultricies. Vivamus porttitor lobortis diam, et facilisis felis vehicula eget. Vestibulum imperdiet lorem a metus aliquet id consequat diam porttitor. Donec porta risus gravida arcu pulvinar gravida. Sed vitae justo nisl, non eleifend nisi. Pellentesque id metus ligula, vel aliquam nisl. Sed pretium nisl eu metus vulputate in consequat magna volutpat. Sed quam mi, egestas eget luctus eget, aliquet vel ipsum. In hac habitasse platea dictumst.

Ut tincidunt dui ac mauris luctus faucibus dignissim magna fermentum. Etiam eu nulla mi. Aliquam ipsum justo, posuere id sagittis sit amet, mattis at dolor. Ut et tortor augue, eu tincidunt enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu ultricies odio. Aliquam erat volutpat. Phasellus sagittis auctor commodo. Sed ultrices commodo commodo. Phasellus ultrices aliquam orci in venenatis. Vivamus mauris risus, blandit non dapibus sed, pellentesque ac arcu. Sed ultrices commodo commodo. Phasellus ultrices aliquam orci in venenatis.</div></center></div>

Note: The background pattern is from ColourLovers.

Questions/Feedback?
Leave a comment to this post. Thanks!

[Code] Customizable iPhone 4 HTML Template

Sat, 04 Jun 2011 19:11:55 GMT

Live Examples

4:54
Saturday, June 4

AT&T 3G

4:54
Saturday, June 4

AT&T 3G

sender
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed.

The Code

just the background

Instructions

- Replace YOUR_WALLPAPER_URL with URL of 230px x 160px image
- Replace YOUR:TIME with current phone time
- Replace YOUR DAY with current phone date
- Replace YOUR PROVIDER with provider name

full message

<lj-raw>
<div style="background:url('http://i.imgur.com/97DA5.jpg') no-repeat;height:427px;width:193px;">
<img src="YOUR_WALLPAPER_URL" style="width:160px;height:230px;margin:71px 0 0 16px;float:left;">
<img src="http://i.imgur.com/feei8.jpg" style="width:161px;height:242px;margin:-240px 0 0 15px;float:left;" />
<div style="color:#FFF;font-family:Franklin Gothic, Arial, sans-serif;font-size:28px;line-height:18px;text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -1px;margin:-220px 0 0 60px;float:left;text-align:center;">YOUR:TIME<br />
<span style="font-size:8px;text-shadow:none;">YOUR DAY</span></div>
<div style="color:#FFF;font-family:Franklin Gothic, Arial, sans-serif;font-weight:bold;font-size:8px;margin:-242px 0 0 35px;float:left;text-align:center;">YOUR PROVIDER</div>
<img src="http://i.imgur.com/ySotT.jpg" style="width:143px;height:69px;margin:-160px 0 0 25px;float:left;" />
<div style="color:#FFF;font-family:Franklin Gothic, Arial, sans-serif;font-size:10px;line-height:10px;text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -1px;height:32px;width:130px;margin:-156px 0 0 32px;float:left;text-align:center;overflow:auto;"><b>SENDER</b><br />
<span style="text-shadow:none;">MESSAGE</span></div>
<img src="http://i.imgur.com/PHHe3.jpg" style="width67:px;height:138px;margin:-243px 0 0 111px;float:left;" />
</div>
</lj-raw>

Instructions

- Replace YOUR_WALLPAPER_URL with URL of 230px x 160px image
- Replace YOUR:TIME with current phone time
- Replace YOUR DAY with current phone date
- Replace YOUR PROVIDER with provider name
- Replace SENDER with sender's name
- Replace MESSAGE with message (length doesn't matter)
*Note: To see long message, you must highlight and scroll.

The Images

The Base

http://i.imgur.com/97DA5.jpg

The Top Overlay

http://i.imgur.com/PHHe3.jpg

The Slide Bar & Overlay

http://i.imgur.com/feei8.jpg

The Message Box

http://i.imgur.com/ySotT.jpg

Image Source

Questions/Feedback?
Leave a comment to this post. Thanks!

[Code] Customizable Droid HTML Template

Sat, 04 Jun 2011 00:28:46 GMT

Live Examples

10:41 AM

Kris Allen

Yesterday, 5:36 PM

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec libero velit, id viverra metus. Nullam pretium quam at nisl porta rhoncus. Praesent et cursus dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec libero velit, id viverra metus. Nullam pretium quam at nisl porta rhoncus. Praesent et cursus dui.

The Code

just the background

Instructions

- Replace YOUR_WALLPAPER_URL with URL of 228px x 160px image
- Replace YOUR:TIME AM/PM with current phone time

full message

<lj-raw>
<div style="background:url('http://i.imgur.com/ltZxo.png') no-repeat;height:406px;width:209px;">
<img src="YOUR_WALLPAPER_URL" style="width:160px;height:228px;margin:70px 0 0 20px;float:left;" />
<img src="http://i.imgur.com/zurMb.png" style="width:149px;height:166px;margin:-224px 0 0 25px;float:left;">
<img src="http://i.imgur.com/UKg1H.png" style="width:161px;height:27px;margin:-20px 0 0 20px;float:left;" />
<div style="color:#FFF;font-family:Franklin Gothic, Arial, sans-serif;font-weight:bold;font-size:7px;margin:-246px 0 0 142px;float:left;">YOUR:TIME AM/PM</div>
<div style="color:#000;font-family:Franklin Gothic, Arial, sans-serif;font-weight:bold;font-size:10px;margin:-204px 0 0 34px;float:left;">SENDER'S NAME</div>
<div style="color:#000;font-family:Franklin Gothic, Arial, sans-serif;font-size:7px;margin:-194px 0 0 34px;float:left;">MESSAGE DAY, MESSAGE:TIME AM/PM</div>
<img src="http://i.imgur.com/lJsAA.png" style="width:31px;height:31px;margin:-208px 0 0 136px;float:left;">
<img src="MESSAGE_ICON_URL" style="width:25px;height:25px;margin:-205px 0 0 139px;float:left;">
<div style="color:#000;font-family:Franklin Gothic, Arial, sans-serif;font-size:8px;margin:-172px 0 0 33px;float:left;height:50px;width:135px;text-align:justify;overflow:auto;">YOUR MESSAGE</div>
<img src="http://i.imgur.com/bTgXV.png" style="width:104px;height:286px;margin:-276px 0 0 10px;float:left;" />
</div>
</lj-raw>

Instructions

- Replace YOUR_WALLPAPER_URL with URL of 228px x 160px image
- Replace YOUR:TIME AM/PM with current phone time
- Replace SENDER'S NAME with name of sender
- Replace MESSAGE DAY, MESSAGE:TIME AM/PM with day and time of message
- Replace MESSAGE_ICON_URL with URL of a square image
- Replace MESSAGE with message (length doesn't matter)

The Images

The Base

http://i.imgur.com/ltZxo.png

The Overlay

http://i.imgur.com/bTgXV.png

The Bottom Bar

http://i.imgur.com/UKg1H.png

The Message Back

http://i.imgur.com/zurMb.png

The Icon Border

http://i.imgur.com/lJsAA.png

Image Source

Questions/Feedback?
Leave a comment to this post. Thanks!

[Code] Working Tabbed Profile

Tue, 31 May 2011 19:39:59 GMT

Live Example

vitals

history

Full Name:
Nickname(s):

Birth Date:
Birthplace:

Current Location:
Residence:
Occupation:

Alignment:
Affiliation:

vitals

history

Race:
Blood Line:

Wand:
Wand Core:
Wand Hand:

Patronus Guardian:
Patronus Form:
Boggart:
Animagus:

vitals

history

School:
Year:
House:
Achievements:
Extracurriculars:

Best Subject:
Worst Subject:

OWL Subjects:

Astronomy:
Charms:
CoMC:
DADA:
Divination:
Herbology:
History:
Muggle Studies:
Potions:
Transfiguration:

NEWT Subjects:

Astronomy:
Charms:
CoMC:
Herbology:
Muggle Studies:

Certifications:

vitals

history

Gender:
Nationality:

Height:
Weight:
Build:
Eyes:
Hair:
Skin:

Distinguishing Marks:
Wardrobe:

vitals

history

First Impression:

(personality)

Likes:
Dislikes:
Fears:
Quirks:

vitals

history

Orientation:
Status:
Significant Other:
Children:
Past Love(s):

Parents:
Sibling(s):
Relatives:

Best Friend(s):
Friends:

Enemies:

Pets:

vitals

history

(history)

vitals

history

Zodiac Sign:
Zodiac Symbol:
Zodiac Element:
Zodiac Quality:
Ruling Planet:
Keywords:

(astrology)

vitals

history

Played-By:
Mun:
Layout Lyrics:
Disclaimer:

Profile Layout Credit: RP Tutorials

The Code

<lj-raw>
<center>
<div style="height:400px;overflow:hidden;">

<div style="height:400px;margin-bottom:40px;overflow:auto;">
<table cellpadding="0" cellspacing="0" style="height:400px;width:800px;font-size:10px;font-family:Palatino Linotype, Georgia, serif;color:#000;">
<tr>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td>
<a style="display:block;width:75px;height:25px;text-align:center;vertical-align:middle;background:white;border-width:1px 1px 0px 1px;border-style:solid;border-color:#AAA;color:#222;text-decoration:none;" name="vitals" href="#vitals">vitals</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#magicinfo">magic info</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#education">education</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#appearance">appearance</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#personality">personality</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#relationships">relationships</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#history">history</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#astrology">astrology</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#oocinfo">ooc info</a>
</td>
<td style="width:35px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
</tr>
<tr>
<td colspan="19" style="border-width:0px 1px 1px 1px;border-style:solid;border-color:#AAA;padding:10px;text-align:justify;vertical-align:top;width:100%;height:100%;">
<img src="" style="height:100px;width:100px;padding:2px;border:1px solid #AAA;float:right;">
<b>Full Name:</b> <br />
<b>Nickname(s):</b> <br/><br/>

<b>Birth Date:</b> <br />
<b>Birthplace:</b> <br /><br />

<b>Current Location:</b> <br />
<b>Residence:</b> <br />
<b>Occupation:</b> <br /><br />

<b>Alignment:</b> <br />
<b>Affiliation:</b> 
</td>
</tr>
</table>
</div>

<div style="height:400px;margin-bottom:40px;overflow:auto;">
<table cellpadding="0" cellspacing="0" style="height:400px;width:800px;font-size:10px;font-family:Palatino Linotype, Georgia, serif;color:#000;">
<tr>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#vitals">vitals</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td>
<a style="display:block;width:75px;height:25px;text-align:center;vertical-align:middle;background:white;border-width:1px 1px 0px 1px;border-style:solid;border-color:#AAA;color:#222;text-decoration:none;" name="magicinfo" href="#magicinfo">magic info</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#education">education</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#appearance">appearance</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#personality">personality</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#relationships">relationships</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#history">history</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#astrology">astrology</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#oocinfo">ooc info</a>
</td>
<td style="width:35px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
</tr>
<tr>
<td colspan="19" style="border-width:0px 1px 1px 1px;border-style:solid;border-color:#AAA;padding:10px;text-align:justify;vertical-align:top;width:100%;height:100%;">
<b>Race:</b> <br />
<b>Blood Line:</b> <br /><br />

<b>Patronus Guardian:</b> <br />
<b>Patronus Form:</b> <br />
<b>Boggart:</b> <br />
<b>Animagus:</b> 
</td>
</tr>
</table>
</div>

<div style="height:400px;margin-bottom:40px;overflow:auto;">
<table cellpadding="0" cellspacing="0" style="height:400px;width:800px;font-size:10px;font-family:Palatino Linotype, Georgia, serif;color:#000;">
<tr>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#vitals">vitals</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#magicinfo">magic info</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td>
<a style="display:block;width:75px;height:25px;text-align:center;vertical-align:middle;background:white;border-width:1px 1px 0px 1px;border-style:solid;border-color:#AAA;color:#222;text-decoration:none;" name="education" href="#education">education</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#appearance">appearance</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#personality">personality</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#relationships">relationships</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#history">history</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#astrology">astrology</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#oocinfo">ooc info</a>
</td>
<td style="width:35px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
</tr>
<tr>
<td colspan="19" style="border-width:0px 1px 1px 1px;border-style:solid;border-color:#AAA;padding:10px;text-align:justify;vertical-align:top;width:100%;height:100%;">
<b>School:</b> <br />
<b>Year:</b> <br />
<b>House:</b> <br />
<b>Achievements:</b> <br />
<b>Extracurriculars:</b> <br /><br />

<b>Best Subject:</b> <br />
<b>Worst Subject:</b> <br /><br />

<table cellpadding="0" cellspacing="4px" style="font-size:10px;font-family:Palatino Linotype, Georgia, serif;color:#000;">
<tr>
<td style="text-align:left;vertical-align:top;">
<b>OWL Subjects:</b>
</td>
<td style="text-align:right; vertical-align:top;">
Astronomy:<br />
Charms:<br />
CoMC:<br />
DADA:<br />
Divination:<br />
Herbology:<br />
History:<br />
Muggle Studies:<br />
Potions:<br />
Transfiguration:
</td>
<td style="width:10px;">
&nbsp;
</td>
<td style="text-align:left;vertical-align:top;">
<b>NEWT Subjects:</b> 
</td>
<td style="text-align:right; vertical-align:top;">
Astronomy:<br />
Charms:<br />
CoMC:<br />
Herbology:<br />
Muggle Studies:
</td>
</tr>
</table>

<b>Certifications:</b> 
</td>
</tr>
</table>
</div>

<div style="height:400px;margin-bottom:40px;overflow:auto;">
<table cellpadding="0" cellspacing="0" style="height:400px;width:800px;font-size:10px;font-family:Palatino Linotype, Georgia, serif;color:#000;">
<tr>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#vitals">vitals</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#magicinfo">magic info</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#education">education</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td>
<a style="display:block;width:75px;height:25px;text-align:center;vertical-align:middle;background:white;border-width:1px 1px 0px 1px;border-style:solid;border-color:#AAA;color:#222;text-decoration:none;" name="appearance" href="#appearance">appearance</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#personality">personality</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#relationships">relationships</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#history">history</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#astrology">astrology</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#oocinfo">ooc info</a>
</td>
<td style="width:35px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
</tr>
<tr>
<td colspan="19" style="border-width:0px 1px 1px 1px;border-style:solid;border-color:#AAA;padding:10px;text-align:justify;vertical-align:top;width:100%;height:100%;">
<b>Gender:</b> <br />
<b>Nationality:</b> <br /><br />

<b>Height:</b> <br />
<b>Weight:</b> <br />
<b>Build:</b> <br />
<b>Eyes:</b> <br />
<b>Hair:</b> <br />
<b>Skin:</b> <br /><br />

<b>Distinguishing Marks:</b> <br />
<b>Wardrobe:</b> 
</td>
</tr>
</table>
</div>

<div style="height:400px;margin-bottom:40px;overflow:auto;">
<table cellpadding="0" cellspacing="0" style="height:400px;width:800px;font-size:10px;font-family:Palatino Linotype, Georgia, serif;color:#000;">
<tr>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#vitals">vitals</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#magicinfo">magic info</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#education">education</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#appearance">appearance</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td>
<a style="display:block;width:75px;height:25px;text-align:center;vertical-align:middle;background:white;border-width:1px 1px 0px 1px;border-style:solid;border-color:#AAA;color:#222;text-decoration:none;" name="personality" href="#personality">personality</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#relationships">relationships</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#history">history</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#astrology">astrology</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#oocinfo">ooc info</a>
</td>
<td style="width:35px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
</tr>
<tr>
<td colspan="19" style="border-width:0px 1px 1px 1px;border-style:solid;border-color:#AAA;padding:10px;text-align:justify;vertical-align:top;width:100%;height:100%;">
<b>First Impression:</b> <br /><br />

(personality)<br /><br />

<b>Likes:</b> <br />
<b>Dislikes:</b> <br />
<b>Fears:</b> <br />
<b>Quirks:</b> 
</td>
</tr>
</table>
</div>

<div style="height:400px;margin-bottom:40px;overflow:auto;">
<table cellpadding="0" cellspacing="0" style="height:400px;width:800px;font-size:10px;font-family:Palatino Linotype, Georgia, serif;color:#000;">
<tr>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#vitals">vitals</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#magicinfo">magic info</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#education">education</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#appearance">appearance</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#personality">personality</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td>
<a style="display:block;width:75px;height:25px;text-align:center;vertical-align:middle;background:white;border-width:1px 1px 0px 1px;border-style:solid;border-color:#AAA;color:#222;text-decoration:none;" name="relationships" href="#relationships">relationships</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#history">history</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#astrology">astrology</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#oocinfo">ooc info</a>
</td>
<td style="width:35px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
</tr>
<tr>
<td colspan="19" style="border-width:0px 1px 1px 1px;border-style:solid;border-color:#AAA;padding:10px;text-align:justify;vertical-align:top;width:100%;height:100%;">
<b>Orientation:</b> <br />
<b>Status:</b> <br />
<b>Significant Other:</b> <br />
<b>Children:</b> <br />
<b>Past Love(s):</b> <br /><br />

<b>Parents:</b> <br />
<b>Sibling(s):</b> <br />
<b>Relatives:</b> <br /><br />

<b>Best Friend(s):</b> <br />
<b>Friends:</b> <br /><br />

<b>Enemies:</b> <br /><br />

<div style="height:400px;margin-bottom:40px;overflow:auto;">
<table cellpadding="0" cellspacing="0" style="height:400px;width:800px;font-size:10px;font-family:Palatino Linotype, Georgia, serif;color:#000;">
<tr>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#vitals">vitals</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#magicinfo">magic info</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#education">education</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#appearance">appearance</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#personality">personality</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#relationships">relationships</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td>
<a style="display:block;width:75px;height:25px;text-align:center;vertical-align:middle;background:white;border-width:1px 1px 0px 1px;border-style:solid;border-color:#AAA;color:#222;text-decoration:none;" name="history" href="#history">history</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#astrology">astrology</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#oocinfo">ooc info</a>
</td>
<td style="width:35px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
</tr>
<tr>
<td colspan="19" style="border-width:0px 1px 1px 1px;border-style:solid;border-color:#AAA;padding:10px;text-align:justify;vertical-align:top;width:100%;height:100%;">
(history)
</td>
</tr>
</table>
</div>

<div style="height:400px;margin-bottom:40px;overflow:auto;">
<table cellpadding="0" cellspacing="0" style="height:400px;width:800px;font-size:10px;font-family:Palatino Linotype, Georgia, serif;color:#000;">
<tr>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#vitals">vitals</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#magicinfo">magic info</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#education">education</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#appearance">appearance</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#personality">personality</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#relationships">relationships</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#history">history</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td>
<a style="display:block;width:75px;height:25px;text-align:center;vertical-align:middle;background:white;border-width:1px 1px 0px 1px;border-style:solid;border-color:#AAA;color:#222;text-decoration:none;" name="astrology" href="#astrology">astrology</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#oocinfo">ooc info</a>
</td>
<td style="width:35px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
</tr>
<tr>
<td colspan="19" style="border-width:0px 1px 1px 1px;border-style:solid;border-color:#AAA;padding:10px;text-align:justify;vertical-align:top;width:100%;height:100%;">
<b>Zodiac Sign:</b> <br />
<b>Zodiac Symbol:</b> <br />
<b>Zodiac Element:</b> <br />
<b>Zodiac Quality:</b> <br />
<b>Ruling Planet:</b> <br />
<b>Keywords:</b> <br /><br />

(astrology)
</td>
</tr>
</table>
</div>

<div style="height:400px;margin-bottom:40px;overflow:auto;">
<table cellpadding="0" cellspacing="0" style="height:400px;width:800px;font-size:10px;font-family:Palatino Linotype, Georgia, serif;color:#000;">
<tr>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#vitals">vitals</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#magicinfo">magic info</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#education">education</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#appearance">appearance</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#personality">personality</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#relationships">relationships</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#history">history</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td style="width:75px;height:25px;text-align:center;background:#AAA;">
<a style="color:#222;text-decoration:none;" href="#astrology">astrology</a>
</td>
<td style="width:10px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
<td>
<a style="display:block;width:75px;height:25px;text-align:center;vertical-align:middle;background:white;border-width:1px 1px 0px 1px;border-style:solid;border-color:#AAA;color:#222;text-decoration:none;" name="oocinfo" href="#oocinfo">ooc info</a>
</td>
<td style="width:35px;border-bottom:1px solid #AAA;">
&nbsp;
</td>
</tr>
<tr>
<td colspan="19" style="border-width:0px 1px 1px 1px;border-style:solid;border-color:#AAA;padding:10px;text-align:justify;vertical-align:top;width:100%;height:100%;">
<b>Played-By:</b> <br />
<b>Mun:</b> <br />
<b>Layout Lyrics:</b> <br />
<b>Disclaimer:</b> <br /><br />

<b>Profile Layout Credit:</b> <a href="http://rp-tutorials.insanejournal.com/" target="_blank">RP Tutorials</a>
</td>
</tr>
</table>
</div>
</div>
</center>
</lj-raw>

Questions/Feedback?
Leave a comment to this post. Thanks. Enjoy!

[Code] Quick and dirty Tumblr post mock-up

Sat, 26 Feb 2011 01:45:56 GMT

Live Example

username reblogged username:	2 notesreplyreblog
Subject username: username: blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
Source: username#tag#tag#tag

The Code

<lj-raw><table style="background-color:#2c4762;padding:20px;" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><div style="background:url('http://img718.imageshack.us/img718/1740/9a8r116i.png') no-repeat center center;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;width:65px;height:65px;margin-right:10px;border-bottom:solid 1px #a3a3a3;"> </div></td>
<td valign="top"><img src="http://img829.imageshack.us/img829/4025/arrowd.png"></td>
<td valign="top" style="background-color:white;width:540px;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;padding:15px;border-bottom:solid 2px #a3a3a3;text-align:left;"><table width=100% style="font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#bbb;" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" align="left"><b><u>username</u> reblogged <u>username:</u></b></td>
<td valign="top" align="right"><b><span style="margin-right:10px;">2 notes</span><span style="margin-right:10px;">reply</span><span style="margin-right:10px;">reblog</span></b><img src="http://img811.imageshack.us/img811/7236/heartvs.png"></td>
</tr>
<tr>
<td colspan=2 style="padding:10px;color:#444;"><span style="font-weight:bold;font-size:18px;">Subject</span><br /><br />
<u>username:</u><br /><br />
<div style="border-left:4px solid #bbb;padding-left:10px;"><u>username:</u><br /><br />
<div style="border-left:4px solid #bbb;padding-left:10px;">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</div><br />
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</div><br />
<img src="http://media.tumblr.com/tumblr_l8crnlo1k01qadv74.gif"></td>
</tr>
<tr>
<td colspan=2 valign="top" style="font-size:12px;"><span style="margin-right:10px">Source: username</span><span style="margin-right:10px">#tag</span><span style="margin-right:10px">#tag</span><span style="margin-right:10px">#tag</span></td>
</tr>
</table></td>
</tr>
</table></lj-raw>

Note: The userpic size is 65px x 65px. You will have to shrink any icon you want to use to this size because there is no way to get the rounded corners otherwise.

Questions? Feedback?
Leave a comment here. Thanks!

Tournament Brackets

Sun, 16 Jan 2011 02:30:16 GMT

Live Example - 32 Teams

Team Name (R)

Team Name (R)

Team Name (R)

The Code

Live Example - 16 Teams

Team Name (R)

Team Name (R)

Team Name (R)

The Code

Live Example - 8 Teams

Team Name (R)

Team Name (R)

Team Name (R)

The Code

Live Example - 4 Teams

Team Name (R)

Team Name (R)

The Code

Questions/Feedback?
Leave a comment to this post. Thanks!

[Code] Icon Crediting Example

Wed, 12 Jan 2011 23:46:15 GMT

Live Example

Keywords:	kris: unf
Comment:	© <lj user="textless">
Default Delete

The Code

Questions/Feedback?
Leave a comment to this post. Thanks!

iChat Video Mock-up

Wed, 12 Jan 2011 01:51:17 GMT

Live Example

Video Chat with Kristopher

Effects

The Code

<lj-raw>
<table style="background:url(http://img199.imageshack.us/img199/3347/brushedmetal.jpg) #bbbbbb;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;font-family:sans-serif;font-size:12px;color:#333333;width:500px;height:450px;padding:4px;">
<tr>
<td colspan=3 align="center" valign="top"><div style="background:url(http://img156.imageshack.us/img156/5485/upperbuttons.png) no-repeat 0 0;float:left;"><div style="text-align:center;width:490px;text-shadow:0 1px 0 #c5c5c5;">Video Chat with NAME</div></div></td>
</tr>
<tr>
<td colspan=3 align="center"><div style="background:url(LARGE IMAGE URL);width:490px;height:400px;"><div style="background:url(SMALL IMAGE URL) no-repeat 0 0;border:2px #ffffff solid;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;width:160px;height:130px;margin-top:255px;margin-right:12px;float:right;"></div></div></td>
</tr>
<tr>
<td align="left"><div style="background:#b6b6b6 -moz-linear-gradient(top,  #e2e2e2,  #b6b6b6);background:-webkit-gradient(linear, left top, left bottom, from(#e5e5e5), to(#b6b6b6));-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px #555555 solid;color:#000000;padding:3px 10px;float:left;">Effects</div></td>
<td align="center"><div style="background:#b6b6b6 -moz-linear-gradient(top,  #e2e2e2,  #b6b6b6);background:-webkit-gradient(linear, left top, left bottom, from(#e5e5e5), to(#b6b6b6));-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px #555555 solid;color:#000000;padding:4px;float:left;margin-right:5px;"><img src="http://img97.imageshack.us/img97/8981/plussign.png"></div> <div style="background:#b6b6b6 -moz-linear-gradient(top,  #e2e2e2,  #b6b6b6);background:-webkit-gradient(linear, left top, left bottom, from(#e5e5e5), to(#b6b6b6));-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px #555555 solid;color:#000000;padding:3px;float:left;margin-right:5px;"><img src="http://img255.imageshack.us/img255/8476/micsign.png"></div> <div style="background:#b6b6b6 -moz-linear-gradient(top,  #e2e2e2,  #b6b6b6);background:-webkit-gradient(linear, left top, left bottom, from(#e5e5e5), to(#b6b6b6));-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px #555555 solid;color:#000000;padding:3px;float:left;margin-right:5px;"><img src="http://img526.imageshack.us/img526/3735/arrowssign.png"></div></td>
<td align="right" valign="bottom"><img src="http://img508.imageshack.us/img508/171/arrowcorner.png" style="margin:-6px;"></td>
</tr>
</table></lj-raw>

Images

Background Image

Chat Images
Large Image Dimensions: 490px x 400px
Small Image Dimensions: 160px x 130px

Questions/Feedback?
Leave a comment to this post. Thanks!

[Code] Working House Hourglasses

Fri, 07 Jan 2011 21:56:57 GMT

Live Examples

The Code

Images

Altering the height of the sand...
You are going to be changing the number for the YPOS on the background.

Bigger numbers = less sand. Smaller numbers = more sand.

Maximum sand height: 30px
Minimum sand height: 230px

Questions/Feedback?
Leave a comment to this post. Thanks!

[Code] Single Image Quote Bubble

Fri, 07 Jan 2011 00:59:14 GMT

Live Example

HOLDS

Played-By Date

The Code

<lj-raw>
<div style="width:300px;background:#42aec2;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;margin-left:10px;padding:10px 10px 10px 0;display:inline-block;">
<div style="background:url('http://img151.imageshack.us/img151/6255/leftarrowblue.png') no-repeat 0 0;margin-left:-10px;">
<div style="padding-left:20px;text-align:justify;color:white;text-shadow:0 1px 1px #222222;"><b>HOLDS</b><br><br>

<div style="padding-bottom:2px;border-bottom:1px dotted white;margin-bottom:4px;">Played-By <span style="float:right;"><i>Date</i></span></div>
<div style="padding-bottom:2px;border-bottom:1px dotted white;margin-bottom:4px;">Played-By <span style="float:right;"><i>Date</i></span></div>
<div style="padding-bottom:2px;border-bottom:1px dotted white;margin-bottom:4px;">Played-By <span style="float:right;"><i>Date</i></span></div>
<div style="padding-bottom:2px;border-bottom:1px dotted white;margin-bottom:4px;">Played-By <span style="float:right;"><i>Date</i></span></div>
<div style="padding-bottom:2px;border-bottom:1px dotted white;margin-bottom:4px;">Played-By <span style="float:right;"><i>Date</i></span></div>
</div>
</div>
</div>
</lj-raw>

Live Example

HOLDS

Played-By Date

The Code

<lj-raw>
<div style="width:310px;background:url('http://img602.imageshack.us/img602/2102/rightarrowblue.png') no-repeat 300px 10px;display:inline-block;">
<div style="background:#42aec2;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;margin-right:10px;padding:10px 0 10px 0;">
<div style="padding:0 10px 10px 10px;text-align:justify;color:white;text-shadow:0 1px 1px #222222;"><b>HOLDS</b><br><br>

Images
Left Arrow
Right Arrow

Feel free to alter the color of the arrows in an image program of your choice. This color is #42aec2.

Questions/Feedback?
Leave a comment to this post. Thanks!

*NOTE: Looks a little wonky in IE*

[Code] Rounded Images

Wed, 05 Jan 2011 04:38:54 GMT

The Code

The Code

Questions/Feedback?
Leave a comment to this post. Thanks!

*NOTE: DOES NOT WORK IN IE*

[Code] HTML Button

Wed, 05 Jan 2011 03:44:33 GMT

Button

Code

Button

Code

<lj-raw><a href="" style="text-decoration:none;"><div style="padding:4px;margin:2px;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0e0e0', endColorstr='#a0a0a0');background:#a0a0a0 -moz-linear-gradient(top,  #e0e0e0,  #a0a0a0);-webkit-gradient(linear, left top, left bottom, from(#e0e0e0), to(#a0a0a0));border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;display:inline-block;outline:none;color:white;text-shadow: 0 1px 1px #888888;">Button</div></a>
<a href="" style="text-decoration:none;"><div style="padding:4px;margin:2px;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0e0e0', endColorstr='#a0a0a0');background:#a0a0a0 -moz-linear-gradient(top,  #e0e0e0,  #a0a0a0);-webkit-gradient(linear, left top, left bottom, from(#e0e0e0), to(#a0a0a0));border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;display:inline-block;outline:none;color:white;text-shadow: 0 1px 1px #888888;">Button</div></a>
<a href="" style="text-decoration:none;"><div style="padding:4px;margin:2px;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0e0e0', endColorstr='#a0a0a0');background:#a0a0a0 -moz-linear-gradient(top,  #e0e0e0,  #a0a0a0);-webkit-gradient(linear, left top, left bottom, from(#e0e0e0), to(#a0a0a0));border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;display:inline-block;outline:none;color:white;text-shadow: 0 1px 1px #888888;">Button</div></a></lj-raw>

Button

Code

<lj-raw><a href="" style="text-decoration:none;"><div style="padding:4px;margin:2px;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0e0e0', endColorstr='#a0a0a0');background:#a0a0a0 -moz-linear-gradient(top,  #e0e0e0,  #a0a0a0);-webkit-gradient(linear, left top, left bottom, from(#e0e0e0), to(#a0a0a0));border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;box-shadow:2px 2px 2px #808080;-moz-box-shadow:2px 2px 2px #808080;-webkit-box-shadow:2px 2px 2px #808080;display:inline-block;outline:none;color:white;text-shadow: 0 1px 1px #888888;">Button</div></a>
<a href="" style="text-decoration:none;"><div style="padding:4px;margin:2px;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0e0e0', endColorstr='#a0a0a0');background:#a0a0a0 -moz-linear-gradient(top,  #e0e0e0,  #a0a0a0);-webkit-gradient(linear, left top, left bottom, from(#e0e0e0), to(#a0a0a0));border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;box-shadow:2px 2px 2px #808080;-moz-box-shadow:2px 2px 2px #808080;-webkit-box-shadow:2px 2px 2px #808080;display:inline-block;outline:none;color:white;text-shadow: 0 1px 1px #888888;">Button</div></a>
<a href="" style="text-decoration:none;"><div style="padding:4px;margin:2px;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0e0e0', endColorstr='#a0a0a0');background:#a0a0a0 -moz-linear-gradient(top,  #e0e0e0,  #a0a0a0);-webkit-gradient(linear, left top, left bottom, from(#e0e0e0), to(#a0a0a0));border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;box-shadow:2px 2px 2px #808080;-moz-box-shadow:2px 2px 2px #808080;-webkit-box-shadow:2px 2px 2px #808080;display:inline-block;outline:none;color:white;text-shadow: 0 1px 1px #888888;">Button</div></a></lj-raw>

Questions/Feedback?
Leave a comment to this post. Thanks!

[Code] AIM conversation window mock-up

Tue, 04 Jan 2011 15:49:19 GMT

Live Examples

IM - gracefulally

gracefulally x

Ally Mo

gracefulally: hey!
rewriteourstory: yo
rewriteourstory: what are you up to?
gracefulally: nothing much
gracefulally: sleeping mostly
gracefulally: lol you?
rewriteourstory: work
rewriteourstory: it's been a loooooooong day over here. it's made me kinda cranky
gracefulally: awww
gracefulally: poor thing
gracefulally: i'm just cold
rewriteourstory: yeah

TXT

this weather sucks|

Send

Blank Example (with a shadow for the window~ effect)

IM - Name (screen name)

Name x

screen name

screen name: text
screen name: text
screen name: text with emoticon

TXT

text|

Send

Code for 2nd example

<lj-raw><table width="520px" height="395px" style="background-color:#3a4a69;-moz-border-radius:3px;-webkit-border-radius:3px;font-family:Arial;font-size:11px;-moz-box-shadow:5px 5px 5px #222222;-webkit-box-shadow:5px 5px 5px #222222;" cellspacing="0" cellpadding="0">
<tr>
<td colspan=2 valign="top" width="100%" style="padding:5px;"><div style="float:left;"><img src="http://img839.imageshack.us/img839/3751/aimicon.png"></div> <div style="float:left;color:white;"><b>IM - Name (screen name)</b></div> <div style="text-align:right;"><img src="http://img831.imageshack.us/img831/5940/menuiconu.png"></div></td>
</tr>
<tr>
<td colspan=2 valign="top" style="padding:5px;"><div style="float:left;padding:3px 5px 2px 5px;color:white;background-color:#788398;font-size:14px;margin-right:5px;height:15px;-moz-border-radius:3px;-webkit-border-radius:3px;"><b>+</b></div> <div style="float:left;padding:3px 5px 2px 5px;color:black;background-color:white;margin-right:5px;height:15px;-moz-border-radius:3px;-webkit-border-radius:3px;">    <b>Name   <span valign="center" style="color:#757575;">x</span></b></div> <div style="float:left;padding:3px 5px 2px 5px;color:white;background-color:#788398;;margin-right:5px;height:15px;-moz-border-radius:3px;-webkit-border-radius:3px;" valign="center">    screen name</div> <div style="float:left;padding:3px 5px 2px 5px;color:white;background-color:#788398;;margin-right:5px;height:15px;-moz-border-radius:3px;-webkit-border-radius:3px;" valign="center"><img src="http://img211.imageshack.us/img211/7271/awayicon.png" style="margin-top:2px;float:left;">  screen name</div></td>
</tr>
<tr>
<td><table height="325px" valign="top" style="background:-moz-linear-gradient(top,  #ffffff,  #adb4c1);-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#adb4c1));padding:5px 5px 10px 5px;margin:0px 0px 15px 1px;"><tr><td valign="top"><img src="http://img412.imageshack.us/img412/3962/blankicon.png" style="border:1px #c2c2c2 solid;"><br>
<div style="background-color:#e3e3e3;padding:2px;"><img src="http://img291.imageshack.us/img291/4220/undericons.png"></div></td></tr>
<tr>
<td valign="bottom"><img src="http://img412.imageshack.us/img412/3962/blankicon.png" style="border:1px #c2c2c2 solid;"></td></tr></table></td>
<td><table valign="top" style="background:-moz-linear-gradient(top,  #ffffff,  #adb4c1);-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#adb4c1));margin:0px 15px 15px 0px;padding:5px 5px 10px 0px;height:325px;-moz-border-radius:0 3px 3px 0;-webkit-border-radius:0 3px 3px 0;"><tr><td valign="top"><div style="border:1px #c2c2c2 solid;background-color:white;overflow:auto;height:230px;width:380px;padding:5px;font-size:12px;line-height:20px;-moz-border-radius:3px;-webkit-border-radius:3px;"><font color="#FF0000;"><b>screen name</b>:</font> text<br>
<font color="#0000FF"><b>screen name</b>:</font> text<br>
<font color="#FF0000"><b>screen name</b>:</font> text with emoticon <img src="http://www.hidden-smileys.com/aim-smileys/aim-smileys-and-emoticons-1.gif" style="display:inline;"><br></div></td>
</tr>
<tr>
<td valign="bottom"><div style="background:-moz-linear-gradient(top,  #ffffff,  #eaecef);-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eaecef));-moz-border-radius:3px;-webkit-border-radius:3px;padding:5px 10px;margin-right:2px;float:left;height:40px;" align="center"><img src="http://img35.imageshack.us/img35/104/phoneicon.png"><br><font style="color:#999999;font-size:6px;"><b>TXT</b></font></div> <div style="background-color:white;-moz-box-shadow:inset 0 0 10px #92bad3;-webkit-box-shadow:inset 0 0 10px #92bad3;height:42px;width:315px;padding:4px;margin-right:2px;float:left;"><font style="font-size:16px;color:black;">text<blink>|</blink></font> <div align="right" style="background:-moz-linear-gradient(top,  #e3f0fa,  #bec9cf);-webkit-gradient(linear, left top, left bottom, from(#e3f0fa), to(#bec9cf));color:white;padding:12px 5px;margin-right:10px;float:right;-moz-border-radius:3px;-webkit-border-radius:3px;">Send</div></div> <div style="background:-moz-linear-gradient(top,  #ffffff,  #eaecef);-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eaecef));-moz-border-radius:3px;-webkit-border-radius:3px;padding:5px 5px;float:left;height:40px;" align="center"><img src="http://img262.imageshack.us/img262/44/righticon.png"></div></td></tr></table></td>
</tr>
</table></lj-raw>

Images

Emoticons

Questions/Feedback?
Leave a comment to this post. Thanks!

[Code] Caution: This may BLOW. YOUR. MIND.

Tue, 05 May 2009 06:15:27 GMT

HTML-fu inspired by this cast list (which also happens to be hotlinking my icons BUT THAT IS A DIFFERENT MATTER)
game table and character profile codes from rp_tutorials

GAMETITLE
Character Name Played By Name	Character Name Played By Name	Character Name Played By Name	Character Name Played By Name
@ gameurl

PROFILE FOR CHARACTER #1 (OF GAME #1)

HEADLINE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit vulputate nisl. Sed fringilla risus vestibulum purus. Nunc at lacus. Donec arcu tellus, interdum in, venenatis vitae, aliquet ac, metus. Sed fringilla ipsum vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
LINK LINK LINK LINK
FOOTER TEXT \| BACK TO GAME #1

PROFILE FOR CHARACTER #2 (OF GAME #1)

HEADLINE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit vulputate nisl. Sed fringilla risus vestibulum purus. Nunc at lacus. Donec arcu tellus, interdum in, venenatis vitae, aliquet ac, metus. Sed fringilla ipsum vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
LINK LINK LINK LINK
FOOTER TEXT \| BACK TO GAME #1

PROFILE FOR CHARACTER #3 (OF GAME #1)

HEADLINE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit vulputate nisl. Sed fringilla risus vestibulum purus. Nunc at lacus. Donec arcu tellus, interdum in, venenatis vitae, aliquet ac, metus. Sed fringilla ipsum vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
LINK LINK LINK LINK
FOOTER TEXT \| BACK TO GAME #1

PROFILE FOR CHARACTER #4 (OF GAME #1)

HEADLINE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit vulputate nisl. Sed fringilla risus vestibulum purus. Nunc at lacus. Donec arcu tellus, interdum in, venenatis vitae, aliquet ac, metus. Sed fringilla ipsum vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
LINK LINK LINK LINK
FOOTER TEXT \| BACK TO GAME #1

GAMETITLE
Character Name Played By Name	Character Name Played By Name	Character Name Played By Name	Character Name Played By Name
@ gameurl

PROFILE FOR CHARACTER #1 (OF GAME #2)

HEADLINE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit vulputate nisl. Sed fringilla risus vestibulum purus. Nunc at lacus. Donec arcu tellus, interdum in, venenatis vitae, aliquet ac, metus. Sed fringilla ipsum vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
LINK LINK LINK LINK
FOOTER TEXT \| BACK TO GAME #2

PROFILE FOR CHARACTER #2 (OF GAME #2)

HEADLINE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit vulputate nisl. Sed fringilla risus vestibulum purus. Nunc at lacus. Donec arcu tellus, interdum in, venenatis vitae, aliquet ac, metus. Sed fringilla ipsum vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
LINK LINK LINK LINK
FOOTER TEXT \| BACK TO GAME #2

PROFILE FOR CHARACTER #3 (OF GAME #2)

HEADLINE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit vulputate nisl. Sed fringilla risus vestibulum purus. Nunc at lacus. Donec arcu tellus, interdum in, venenatis vitae, aliquet ac, metus. Sed fringilla ipsum vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
LINK LINK LINK LINK
FOOTER TEXT \| BACK TO GAME #2

PROFILE FOR CHARACTER #4 (OF GAME #2)

HEADLINE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit vulputate nisl. Sed fringilla risus vestibulum purus. Nunc at lacus. Donec arcu tellus, interdum in, venenatis vitae, aliquet ac, metus. Sed fringilla ipsum vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
LINK LINK LINK LINK
FOOTER TEXT \| BACK TO GAME #2

CLICKY THE CHARACTER NAME LINKS. I DARE YOU.

<div style="height: 300px; overflow: hidden;"><a name="game1">&nbsp;</a><table align="center" cellpadding="10" cellspacing="15" style="margin-bottom: 300px">

<tr><td colspan="4" bgcolor="#999999" align="left"><font color="#000000" size="5">GAMETITLE</font></td></tr>

<tr>
     <td width="125" bgcolor="#CCCCCC" align="center"> <a href="URL"><img src="IMG" width="100" height="100" border="0"></a> <font size="2"><br/><b><a href="#game1char1">Character Name</a></b> <br/><small>Played By Name</small></font></td>
     <td width="125" bgcolor="#CCCCCC" align="center"> <a href="URL"><img src="IMG" width="100" height="100" border="0"></a> <font size="2"><br/><b><a href="#game1char2">Character Name</a></b> <br/><small>Played By Name</small></font></td>
     <td width="125" bgcolor="#CCCCCC" align="center"> <a href="URL"><img src="IMG" width="100" height="100" border="0"></a> <font size="2"><br/><b><a href="#game1char3">Character Name</a></b> <br/><small>Played By Name</small></font></td>
     <td width="125" bgcolor="#CCCCCC" align="center"> <a href="URL"><img src="IMG" width="100" height="100" border="0"></a> <font size="2"><br/><b><a href="#game1char4">Character Name</a></b> <br/><small>Played By Name</small></font></td>
</tr>

<tr><td colspan="4" bgcolor="#BBBBBB" align="right"><font size="2"> <b>@ <lj user="GAMEURL"></b> </font></td></tr>

</table>

<a name="game1char1">&nbsp;</a><table align="center" width="600" style="margin-bottom: 300px;">

<tr><td align="right"><font color="#000000" size="5" face="arial"><i>HEADLINE</i></font><br></td></tr>

<tr><td align="center"><img src="icon.jpg" width=100px height=100px> <img src="icon.jpg" width=100px height=100px> <img src="icon.jpg" width=100px height=100px> <img src="icon.jpg" width=100px height=100px> <img src="icon.jpg" width=100px height=100px></td></tr>

<tr>
     
	<td width="600" align="justify" valign="top"><font size="2" face="arial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit vulputate nisl. Sed fringilla risus vestibulum purus. Nunc at lacus. Donec arcu tellus, interdum in, venenatis vitae, aliquet ac, metus. Sed fringilla ipsum vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</font></td>
     
</tr>

<tr><td align=center colspan="3" bgcolor="#CCCCDD"><font size="2" face="arial"> <a href="http://"><font color="#AA4433">LINK</font></a>   <a href="http://"><font color="#AA4433">LINK</font></a>   <a href="http://"><font color="#AA4433">LINK</font></a>   <a href="http://"><font color="#AA4433">LINK</font></a> </font></td></tr>

<tr><td align=center colspan="3"><font size="1"> FOOTER TEXT | <a href="#game1">BACK TO GAME #1</a></font></td></tr>

</table>

<a name="game1char2">&nbsp;</a><table align="center" width="600" style="margin-bottom: 300px;">

<tr><td align=center colspan="3"><font size="1"> FOOTER TEXT | <a href="#game1">BACK TO GAME #1</a></font></td></tr>

</table>

<a name="game1char3">&nbsp;</a><table align="center" width="600" style="margin-bottom: 300px;">

<tr><td align=center colspan="3"><font size="1"> FOOTER TEXT | <a href="#game1">BACK TO GAME #1</a></font></td></tr>

</table>

<a name="game1char4">&nbsp;</a><table align="center" width="600" style="margin-bottom: 300px;">

<tr><td align=center colspan="3"><font size="1"> FOOTER TEXT | <a href="#game1">BACK TO GAME #1</a></font></td></tr>
</table>

</div>

Will be posting this at rp_tutorials once I have a completed tutorial to explain the code.

click me!

[Code] _____ Pucey Bio & Graphics

Wed, 12 Mar 2008 07:52:06 GMT

----_____ Pucey----------------------

The Basics

full name: ____ ____ ____ Pucey.
nickname(s):

age: Twenty-one.
birth date:
birthplace:

current location:
residence:
occupation: Company rep. Potent Pucey Potions.

affiliation: None.

Magical Information

blood status: Pureblood.
classification: Witch.

wand:
wand core:
wand hand:

patronus: None.
boggart:

Education

school: Hogwarts.
house: Ravenclaw (1976).
extracurriculars: Head Girl(?).

best subject: Potions.
worst subject: Care of Magical Creatures.

OWL subjects:
NEWT subjects:

Appearance

gender: Female.
nationality:

height: 5'6".
weight: 122 lbs.
build: Slender.
eyes: Blue with light green flecks.
hair: Dark brown. Long and wavy.
skin: Tan.

distinguishing marks: Several tattoos. (Will be added later).
dress:
mannerisms: Glares. A lot.

Personality

first impression: What a bitch.
elaboration:

likes:
dislikes:
fears:

Intimate Relationships

orientation: Straight.
status: Single.
children: None.
past lovers:

sexuality:

Platonic Relationships

parents:
sibling(s):
relatives:

best friend(s):
friends:
acquaintances:

ambiguous:
disliked:
enemies:

Astrology

sign:
traits:

History

ooc Information

played by: Megan Fox.
mun: Ally. (kickawesome)
disclaimer: I am not ___ Pucey, Megan Fox, or JK Rowling. The HP 'verse and the character of Adrian Pucey are sole property of JK Rowling. The character ___ Pucey is of my own creation. Please, do not steal her. Thanks!

header

or

or

profile image

Can't decide whether to name her Leighton or Gaia. :/