InsaneJournal

Tweak says, "Believe it!"

Ally -- are you already gone? (wastintime) wrote in rp_tutorials,
@ 2011-07-12 11:30:00

Entry tags:

coding: other

General Layout

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

This can be used as a fan fiction "table" or bio or game premise or whatever you like. Have fun with it!

I left the names/code for the "flavor table" in the code in case people want those specifically.

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

	embodimentof 2011-07-14 01:28 am UTC (link)
	THIS IS AMAZING! I LOVES IT! (Reply to this)