InsaneJournal

Tweak says, "Look what I can do!"

fuck 'em in the heart {kait} (wearestardust) wrote in supersuits,
@ 2014-04-10 21:02:00

Entry tags:

!!!templates, !!bios/profiles, #wearestardust

Bio Sheet: Codex (Mass Effect)

.... C. NAME, RANK/CLASS

Insert defining quote here.

NAME	Character Name
RANK	Rank, Organization
COMBAT CLASS	Class
HOMEWORLD	Planet (City, Country)
DATE OF BIRTH	Month 00, 0000
AGE	00
ORIENTATION	Orientation
DATING STATUS	Dating Status
HEIGHT	0'0"
BUILD	Build
HAIR	Hair
EYES	Eyes

MEDICAL CONCERNS/OTHER STUFF
Description of medical concerns, accomplishments, ranks, etc, just to fill the space down here

CHARACTER NAME
tagline

.... C. NAME, PERSONALITY

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum lectus feugiat massa imperdiet, vel vehicula felis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at arcu eget lectus suscipit ornare malesuada at orci. Vestibulum eros purus, aliquam id tempus ac, mattis at tortor. Ut id nibh mollis, auctor ligula et, feugiat orci. Fusce iaculis, libero eu aliquam blandit, neque augue tincidunt dolor, aliquam semper urna libero quis eros. Aenean magna est, auctor vitae tristique id, cursus at neque. Nullam in lectus consequat, tempus sapien ut, scelerisque leo. Fusce ante felis, viverra ut elementum eu, blandit ac nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam placerat, mauris euismod imperdiet placerat, dolor tellus interdum lectus, blandit viverra est ante non nunc. Phasellus ullamcorper euismod dui eget dapibus. Vestibulum eu ante nulla. Praesent vitae ipsum fermentum, dignissim dui eget, tempus nunc. Donec auctor tortor nec eros vehicula, non sollicitudin nulla tristique. Morbi vestibulum, lectus vel facilisis vestibulum, sem elit ultrices eros, eu hendrerit tellus nunc nec massa.

Sed quis imperdiet neque. Vestibulum dictum felis lacus, ac consectetur elit porttitor et. Donec luctus lorem at mauris ullamcorper, eget elementum neque ornare. Nunc laoreet, justo eget placerat aliquam, libero lacus dictum mauris, nec tincidunt tellus est sed elit. Integer aliquam nulla vitae quam malesuada rhoncus. Curabitur ornare erat quis nisl lacinia aliquam. Fusce sed metus venenatis dolor volutpat luctus sit amet non neque. In at eros dictum, volutpat massa vitae, ornare elit.

Sed quis imperdiet neque. Vestibulum dictum felis lacus, ac consectetur elit porttitor et. Donec luctus lorem at mauris ullamcorper, eget elementum neque ornare. Curabitur eu nunc vitae orci tempus eleifend vel at est. Donec malesuada porta velit, at faucibus enim feugiat in. Phasellus cursus turpis nec imperdiet iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc laoreet, justo eget placerat aliquam, libero lacus dictum mauris, nec tincidunt tellus est sed elit. Integer aliquam nulla vitae quam malesuada rhoncus. Curabitur ornare erat quis nisl lacinia aliquam. Fusce sed metus venenatis dolor volutpat luctus sit amet non neque. In at eros dictum, volutpat massa vitae, ornare elit.

CHARACTER NAME
tagline

.... C. NAME, ABILITIES + SKILLS

Donec dictum lectus feugiat massa imperdiet, vel vehicula felis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at arcu eget lectus suscipit ornare malesuada at orci. Vestibulum eros purus, aliquam id tempus ac, mattis at tortor. Ut id nibh mollis, auctor ligula et, feugiat orci. Fusce iaculis, libero eu aliquam blandit, neque augue tincidunt dolor, aliquam semper urna libero quis eros. Aenean magna est, auctor vitae tristique id, cursus at neque. Nullam in lectus consequat, tempus sapien ut, scelerisque leo. Fusce ante felis, viverra ut elementum eu, blandit ac nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam placerat, mauris euismod imperdiet placerat, dolor tellus interdum lectus, blandit viverra est ante non nunc.

Phasellus ullamcorper euismod dui eget dapibus. Vestibulum eu ante nulla. Praesent vitae ipsum fermentum, dignissim dui eget, tempus nunc. Donec auctor tortor nec eros vehicula, non sollicitudin nulla tristique. Morbi vestibulum, lectus vel facilisis vestibulum, sem elit ultrices eros, eu hendrerit tellus nunc nec massa.

Ut id nibh mollis, auctor ligula et, feugiat orci. Fusce iaculis, libero eu aliquam blandit, neque augue tincidunt dolor, aliquam semper urna libero quis eros. Aenean magna est, auctor vitae tristique id, cursus at neque. Nullam in lectus consequat, tempus sapien ut, scelerisque leo. Fusce ante felis, viverra ut elementum eu, blandit ac nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam placerat, mauris euismod imperdiet placerat, dolor tellus interdum lectus, blandit viverra est ante non nunc.

CHARACTER NAME
tagline

.... C. NAME, HISTORY

Phasellus at arcu eget lectus suscipit ornare malesuada at orci. Vestibulum eros purus, aliquam id tempus ac, mattis at tortor. Ut id nibh mollis, auctor ligula et, feugiat orci. Fusce iaculis, libero eu aliquam blandit, neque augue tincidunt dolor, aliquam semper urna libero quis eros. Aenean magna est, auctor vitae tristique id, cursus at neque. Nullam in lectus consequat, tempus sapien ut, scelerisque leo. Fusce ante felis, viverra ut elementum eu, blandit ac nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam placerat, mauris euismod imperdiet placerat, dolor tellus interdum lectus, blandit viverra est ante non nunc. Phasellus ullamcorper euismod dui eget dapibus. Vestibulum eu ante nulla. Praesent vitae ipsum fermentum, dignissim dui eget, tempus nunc. Donec auctor tortor nec eros vehicula, non sollicitudin nulla tristique. Morbi vestibulum, lectus vel facilisis vestibulum, sem elit ultrices eros, eu hendrerit tellus nunc nec massa.

Sed quis imperdiet neque. Vestibulum dictum felis lacus, ac consectetur elit porttitor et. Donec luctus lorem at mauris ullamcorper, eget elementum neque ornare. Curabitur eu nunc vitae orci tempus eleifend vel at est. Donec malesuada porta velit, at faucibus enim feugiat in. Phasellus cursus turpis nec imperdiet iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc laoreet, justo eget placerat aliquam, libero lacus dictum mauris, nec tincidunt tellus est sed elit.

Integer aliquam nulla vitae quam malesuada rhoncus. Curabitur ornare erat quis nisl lacinia aliquam. Fusce sed metus venenatis dolor volutpat luctus sit amet non neque. In at eros dictum, volutpat massa vitae, ornare elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum lectus feugiat massa imperdiet, vel vehicula felis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at arcu eget lectus suscipit ornare malesuada at orci. Vestibulum eros purus, aliquam id tempus ac, mattis at tortor. Ut id nibh mollis, auctor ligula et, feugiat orci. Fusce iaculis, libero eu aliquam blandit, neque augue tincidunt dolor, aliquam semper urna libero quis eros. Aenean magna est, auctor vitae tristique id, cursus at neque. Nullam in lectus consequat, tempus sapien ut, scelerisque leo. Fusce ante felis, viverra ut elementum eu, blandit ac nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam placerat, mauris euismod imperdiet placerat, dolor tellus interdum lectus, blandit viverra est ante non nunc. Phasellus ullamcorper euismod dui eget dapibus. Vestibulum eu ante nulla. Praesent vitae ipsum fermentum, dignissim dui eget, tempus nunc. Donec auctor tortor nec eros vehicula, non sollicitudin nulla tristique. Morbi vestibulum, lectus vel facilisis vestibulum, sem elit ultrices eros, eu hendrerit tellus nunc nec massa.

Sed quis imperdiet neque. Vestibulum dictum felis lacus, ac consectetur elit porttitor et. Donec luctus lorem at mauris ullamcorper, eget elementum neque ornare. Curabitur eu nunc vitae orci tempus eleifend vel at est. Donec malesuada porta velit, at faucibus enim feugiat in. Phasellus cursus turpis nec imperdiet iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc laoreet, justo eget placerat aliquam, libero lacus dictum mauris, nec tincidunt tellus est sed elit. Integer aliquam nulla vitae quam malesuada rhoncus. Curabitur ornare erat quis nisl lacinia aliquam. Fusce sed metus venenatis dolor volutpat luctus sit amet non neque. In at eros dictum, volutpat massa vitae, ornare elit.

CHARACTER NAME
tagline

CHARACTER NAME
tagline

OOC: Playername • email@email.com • aimname (aim) • cdjname(cdj) • PB Name (pb)

code by wearestardust @ supersuits

bio sheet → codex

This was specifically designed for my Mass Effect characters, largely to see if I could theme a layout based on Mass Effect 3's menu colors and design. Learned some new things with coding it (like doing diagonal lines!) and played around more with CSS gradients. VERY pleased with the results, but I don't actually expect it to really get used XD

If you'd like to change the colors, find/replace the following:

#FFF #000 #050A1D #090C20 #2a3b5a #172A51 #173874 #4FA6D7 #842320 #B80600

TEMPLATE →

<lj-raw><center><table style="width: 880; font-family:arial; font-size: 11px; color: #FFF;"><tr><td><div style="border-bottom: 50px solid #2a3b5a; border-left: 50px solid #FFF; border-right: 50px solid #FFF; line-height: 3; height: 0; width: 700;"></div>
<div style="display:inline-block; background-color: #2a3b5a; width:800px;height:408px;">

<a name="0" style="color: #FFF">
<div style="height: 400px; width:700px; padding: 4px;background-color: #050a1d;">
<div style="float:right; background-color: #090c20; background:linear-gradient(to bottom, #172a51, #050a1d);background: -webkit-linear-gradient(top, #172a51, #050a1d);background: -moz-linear-gradient(top, #172a51, #050a1d); height: 400px; width: 496; margin-left: -20px; overflow:auto">
<div style=" font-size: 60px; font-weight: bold; padding: 5px; margin-top: -10px;line-height: 10px; letter-spacing: -5px;text-align:right;color: #FFF; position:relative; z-index: 1;">.... <span style="font-size: 9px; letter-spacing:3px; font-weight:normal">C. NAME, RANK/CLASS</span></div>
<div style="opacity: .6; height: 9px; margin-top: -15px; background:linear-gradient(to left, #4fa6d7, #172a51);background: -webkit-linear-gradient(right, #4fa6d7, #172a51);background: -moz-linear-gradient(right, #4fa6d7, #172a51); margin-left: 10px; margin-right: 5px"></div>
<div style="padding: 20px; text-align:justify; font-family:arial; font-size: 11px;">

<div style="float:right; width: 202px;"><img src="YOURGIF" style="width: 200px; border: 1px solid;opacity: .8; box-shadow: 1px 1px 20px #000;">
<div style="background-color: #2a3b5a; padding: 10px; margin-top: 10px; font-size: 9px; opacity: .9">Insert defining quote here.</div>
</div>

<tr><td valign="top" style="width: 90px;opacity: .5">NAME</td><td>Character Name</td></tr>
<tr><td valign="top" style="width: 90px;opacity: .5">RANK</td><td>Rank, Organization</td></tr>
<tr><td valign="top" style="width: 90px;opacity: .5">COMBAT CLASS</td><td>Class</td></tr>
<tr><td valign="top" style="width: 90px;opacity: .5">HOMEWORLD</td><td>Planet (City, Country)</td></tr>
<tr><td valign="top" style="width: 90px;opacity: .5">DATE OF BIRTH</td><td>Month 00, 0000</td></tr>
<tr><td valign="top" style="width: 90px;opacity: .5">AGE</td><td>00</td></tr>
<tr><td valign="top" style="width: 90px;opacity: .5">ORIENTATION</td><td>Orientation</td></tr>
<tr><td valign="top" style="width: 90px;opacity: .5">DATING STATUS</td><td>Dating Status</td></tr>
<tr><td valign="top" style="width: 90px;opacity: .5">HEIGHT</td><td>0'0"</td></tr>
<tr><td valign="top" style="width: 90px;opacity: .5">BUILD</td><td>Build</td></tr>
<tr><td valign="top" style="width: 90px;opacity: .5">HAIR</td><td>Hair</td></tr>
<tr><td valign="top" style="width: 90px;opacity: .5">EYES</td><td>Eyes</td></tr>
</table>

<span style="opacity: .5;">MEDICAL CONCERNS/OTHER STUFF</span><br>
Description of medical concerns, accomplishments, ranks, etc, just to fill the space down here

</div>
</div>

<div style="box-shadow: 1px 1px 30px #a0e0fe; opacity: .95; background:linear-gradient(to bottom, #4fa6d7, #050a1d);background: -webkit-linear-gradient(top, #4fa6d7, #050a1d);background: -moz-linear-gradient(top, #4fa6d7, #050a1d); font-size: 10px; letter-spacing: 3px; color: #FFF; padding: 10px; margin-top: 130px"><a href="#0" style="text-decoration:none; color: #FFF;">CHARACTER NAME<br>
<i>tagline</i></a></div>

</div>

<div style="opacity: .8; clear:left;float:left;width: 200px; height: 40px; background:linear-gradient(to bottom, #4fa6d7, #173874);background: -webkit-linear-gradient(top, #4fa6d7, #173874);background: -moz-linear-gradient(top, #4fa6d7, #173874); margin-bottom: 4px; text-align:center"><a href="#1" style="font-family:verdana; font-size: 10px; letter-spacing: 2px; color: #FFF; line-height: 35px; text-decoration:none">PERSONALITY</a></div>

<div style="opacity: .8; clear:left;float:left;width: 200px; height: 40px; background:linear-gradient(to bottom, #4fa6d7, #173874);background: -webkit-linear-gradient(top, #4fa6d7, #173874);background: -moz-linear-gradient(top, #4fa6d7, #173874); margin-bottom: 4px; text-align:center"><a href="#2" style="font-family:verdana; font-size: 10px; letter-spacing: 2px; color: #FFF; line-height: 35px; text-decoration:none">ABILITIES+SKILLS</a></div>

<div style="opacity: .8; clear:left;float:left;width: 200px; height: 40px; background:linear-gradient(to bottom, #4fa6d7, #173874);background: -webkit-linear-gradient(top, #4fa6d7, #173874);background: -moz-linear-gradient(top, #4fa6d7, #173874); margin-bottom: 4px; text-align:center"><a href="#3" style="font-family:verdana; font-size: 10px; letter-spacing: 2px; color: #FFF; line-height: 35px; text-decoration:none">HISTORY</a></div>

<div style="opacity: .8; clear:left;float:left;width: 200px; height: 40px; background:linear-gradient(to bottom, #4fa6d7, #173874);background: -webkit-linear-gradient(top, #4fa6d7, #173874);background: -moz-linear-gradient(top, #4fa6d7, #173874); margin-bottom: 4px; text-align:center"><a href="#4" style="font-family:verdana; font-size: 10px; letter-spacing: 2px; color: #FFF; line-height: 35px; text-decoration:none">NOTES</a></div>

</div></a>

<a name="1" style="color: #FFF">
<div style="height: 400px; width:700px; padding: 4px;background-color: #050a1d; color: #FFF">
<div style="float:right; background-color: #090c20; background:linear-gradient(to bottom, #172a51, #050a1d);background: -webkit-linear-gradient(top, #172a51, #050a1d);background: -moz-linear-gradient(top, #172a51, #050a1d); height: 400px; width: 496; margin-left: -20px; overflow:auto">
<div style=" font-size: 60px; font-weight: bold; padding: 5px; margin-top: -10px;line-height: 10px; letter-spacing: -5px;text-align:right;color: #FFF; position:relative; z-index: 1;">.... <span style="font-size: 9px; letter-spacing:3px; font-weight:normal">C. NAME, PERSONALITY</span></div>
<div style="opacity: .6; height: 9px; margin-top: -15px; background:linear-gradient(to left, #4fa6d7, #172a51);background: -webkit-linear-gradient(right, #4fa6d7, #172a51);background: -moz-linear-gradient(right, #4fa6d7, #172a51); margin-left: 10px; margin-right: 5px"></div>
<div style="padding: 20px; text-align:justify; font-family:arial; font-size: 11px;">

PERSONALITY GOES HERE

</div>
</div>

<div style="opacity: .85; background:linear-gradient(to bottom, #4fa6d7, #050a1d);background: -webkit-linear-gradient(top, #4fa6d7, #050a1d);background: -moz-linear-gradient(top, #4fa6d7, #050a1d)font-family: verdana; font-size: 10px; letter-spacing: 3px; color: #FFF; padding: 10px; margin-top: 130px"><a href="#0" style="text-decoration:none; color: #FFF;">CHARACTER NAME<br>
<i>tagline</i></a></div>

</div>

<div style="clear:left; float:left; box-shadow: 1px 1px 10px #4fa6d7; width: 200px; height: 40px; background:linear-gradient(to left, #842320, #B80600);background: -webkit-linear-gradient(left, #842320, #B80600);background: -moz-linear-gradient(left, #842320, #B80600);margin-bottom: 4px;"><a href="#1" style="font-family:verdana; font-size: 10px; letter-spacing: 3px; color: #FFF; line-height: 37px; text-decoration:none">PERSONALITY</a></div><div style="float:left; border-left: 20px solid #B80600; border-top: 20px solid transparent; border-bottom: 20px solid transparent; margin-right: 4px;"></div>

<div style="opacity: .8; clear:left;float:left;width: 200px; height: 40px; background:linear-gradient(to bottom, #4fa6d7, #173874);background: -webkit-linear-gradient(top, #4fa6d7, #173874);background: -moz-linear-gradient(top, #4fa6d7, #173874); margin-bottom: 4px; text-align:center"><a href="#2" style="font-family:verdana; font-size: 10px; letter-spacing: 2px; color: #FFF; line-height: 35px; text-decoration:none">ABILITIES+SKILLS</a></div>

<div style="opacity: .8; clear:left;float:left;width: 200px; height: 40px; background:linear-gradient(to bottom, #4fa6d7, #173874);background: -webkit-linear-gradient(top, #4fa6d7, #173874);background: -moz-linear-gradient(top, #4fa6d7, #173874); margin-bottom: 4px; text-align:center"><a href="#3" style="font-family:verdana; font-size: 10px; letter-spacing: 2px; color: #FFF; line-height: 35px; text-decoration:none">HISTORY</a></div>

<div style="opacity: .8; clear:left;float:left;width: 200px; height: 40px; background:linear-gradient(to bottom, #4fa6d7, #173874);background: -webkit-linear-gradient(top, #4fa6d7, #173874);background: -moz-linear-gradient(top, #4fa6d7, #173874); margin-bottom: 4px; text-align:center"><a href="#4" style="font-family:verdana; font-size: 10px; letter-spacing: 2px; color: #FFF; line-height: 35px; text-decoration:none">NOTES</a></div>

</div></a>

<a name="2" style="color: #FFF">
<div style="height: 400px; width:700px; padding: 4px;background-color: #050a1d; color: #FFF">
<div style="float:right; background-color: #090c20; background:linear-gradient(to bottom, #172a51, #050a1d);background: -webkit-linear-gradient(top, #172a51, #050a1d);background: -moz-linear-gradient(top, #172a51, #050a1d); height: 400px; width: 496; margin-left: -20px; overflow:auto">
<div style=" font-size: 60px; font-weight: bold; padding: 5px; margin-top: -10px;line-height: 10px; letter-spacing: -5px;text-align:right;color: #FFF; position:relative; z-index: 1;">.... <span style="font-size: 9px; letter-spacing:3px; font-weight:normal">C. NAME, ABILITIES + SKILLS</span></div>
<div style="opacity: .6; height: 9px; margin-top: -15px; background:linear-gradient(to left, #4fa6d7, #172a51);background: -webkit-linear-gradient(right, #4fa6d7, #172a51);background: -moz-linear-gradient(right, #4fa6d7, #172a51); margin-left: 10px; margin-right: 5px"></div>
<div style="padding: 20px; text-align:justify; font-family:arial; font-size: 11px;">

ABILITIES+SKILLS

</div>
</div>

</div>

<div style="box-shadow: 1px 1px 10px #4fa6d7; clear:left;float:left;width: 200px; height: 40px; background:linear-gradient(to left, #842320, #B80600);background: -webkit-linear-gradient(left, #842320, #B80600);background: -moz-linear-gradient(left, #842320, #B80600);margin-bottom: 4px;"><a href="#2" style="font-family:verdana; font-size: 10px; letter-spacing: 3px; color: #FFF; line-height: 37px; text-decoration:none">ABILITIES+SKILLS</a></div><div style="float:left; border-left: 20px solid #B80600; border-top: 20px solid transparent; border-bottom: 20px solid transparent; margin-right: 4px;"></div>

<div style="opacity: .8; clear:left;float:left;width: 200px; height: 40px; background:linear-gradient(to bottom, #4fa6d7, #173874);background: -webkit-linear-gradient(top, #4fa6d7, #173874);background: -moz-linear-gradient(top, #4fa6d7, #173874); margin-bottom: 4px; text-align:center"><a href="#3" style="font-family:verdana; font-size: 10px; letter-spacing: 2px; color: #FFF; line-height: 35px; text-decoration:none">HISTORY</a></div>

<div style="opacity: .8; clear:left;float:left;width: 200px; height: 40px; background:linear-gradient(to bottom, #4fa6d7, #173874);background: -webkit-linear-gradient(top, #4fa6d7, #173874);background: -moz-linear-gradient(top, #4fa6d7, #173874); margin-bottom: 4px; text-align:center"><a href="#4" style="font-family:verdana; font-size: 10px; letter-spacing: 2px; color: #FFF; line-height: 35px; text-decoration:none">NOTES</a></div>

</div></a>

<a name="3" style="color: #FFF">
<div style="height: 400px; width:700px; padding: 4px;background-color: #050a1d; color: #FFF">
<div style="float:right; background-color: #090c20; background:linear-gradient(to bottom, #172a51, #050a1d);background: -webkit-linear-gradient(top, #172a51, #050a1d);background: -moz-linear-gradient(top, #172a51, #050a1d); height: 400px; width: 496; margin-left: -20px; overflow:auto">
<div style=" font-size: 60px; font-weight: bold; padding: 5px; margin-top: -10px;line-height: 10px; letter-spacing: -5px;text-align:right;color: #FFF; position:relative; z-index: 1;">.... <span style="font-size: 9px; letter-spacing:3px; font-weight:normal">C. NAME, HISTORY</span></div>
<div style="opacity: .6; height: 9px; margin-top: -15px; background:linear-gradient(to left, #4fa6d7, #172a51);background: -webkit-linear-gradient(right, #4fa6d7, #172a51);background: -moz-linear-gradient(right, #4fa6d7, #172a51); margin-left: 10px; margin-right: 5px"></div>
<div style="padding: 20px; text-align:justify; font-family:arial; font-size: 11px;">

HISTORY GOES HERE

</div>
</div>

</div>

<div style="opacity: .8; clear:left;float:left;width: 200px; height: 40px; background:linear-gradient(to bottom, #4fa6d7, #173874);background: -webkit-linear-gradient(top, #4fa6d7, #173874);background: -moz-linear-gradient(top, #4fa6d7, #173874); margin-bottom: 4px; text-align:center"><a href="#2" style="font-family:verdana; font-size: 10px; letter-spacing: 2px; color: #FFF; line-height: 35px; text-decoration:none">ABILITIES+SKILLS</a></div>

<div style="box-shadow: 1px 1px 10px #4fa6d7; clear:left;float:left;width: 200px; height: 40px; background:linear-gradient(to left, #842320, #B80600);background: -webkit-linear-gradient(left, #842320, #B80600);background: -moz-linear-gradient(left, #842320, #B80600);margin-bottom: 4px;"><a href="#3" style="font-family:verdana; font-size: 10px; letter-spacing: 3px; color: #FFF; line-height: 37px; text-decoration:none">HISTORY</a></div><div style="float:left; border-left: 20px solid #B80600; border-top: 20px solid transparent; border-bottom: 20px solid transparent; margin-right: 4px;"></div>

<div style="opacity: .8; clear:left;float:left;width: 200px; height: 40px; background:linear-gradient(to bottom, #4fa6d7, #173874);background: -webkit-linear-gradient(top, #4fa6d7, #173874);background: -moz-linear-gradient(top, #4fa6d7, #173874); margin-bottom: 4px; text-align:center"><a href="#4" style="font-family:verdana; font-size: 10px; letter-spacing: 2px; color: #FFF; line-height: 35px; text-decoration:none">NOTES</a></div>

</div></a>

<a name="4" style="color: #FFF">
<div style="height: 400px; width:700px; padding: 4px;background-color: #050a1d; color: #FFF">
<div style="float:right; background-color: #090c20; background:linear-gradient(to bottom, #172a51, #050a1d);background: -webkit-linear-gradient(top, #172a51, #050a1d);background: -moz-linear-gradient(top, #172a51, #050a1d); height: 400px; width: 496; margin-left: -20px; overflow:auto">
<div style=" font-size: 60px; font-weight: bold; padding: 5px; margin-top: -10px;line-height: 10px; letter-spacing: -5px;text-align:right;color: #FFF; position:relative; z-index: 1;">.... <span style="font-size: 9px; letter-spacing:3px; font-weight:normal">C. NAME, NOTES</span></div>
<div style="opacity: .6; height: 9px; margin-top: -15px; background:linear-gradient(to left, #4fa6d7, #172a51);background: -webkit-linear-gradient(right, #4fa6d7, #172a51);background: -moz-linear-gradient(right, #4fa6d7, #172a51); margin-left: 10px; margin-right: 5px"></div>
<div style="padding: 20px; text-align:justify; font-family:arial; font-size: 11px;">

NOTES GO HERE

</div>
</div>

</div>

<div style="opacity: .8; clear:left;float:left;width: 200px; height: 40px; background:linear-gradient(to bottom, #4fa6d7, #173874);background: -webkit-linear-gradient(top, #4fa6d7, #173874);background: -moz-linear-gradient(top, #4fa6d7, #173874); margin-bottom: 4px; text-align:center"><a href="#2" style="font-family:verdana; font-size: 10px; letter-spacing: 2px; color: #FFF; line-height: 35px; text-decoration:none">ABILITIES+SKILLS</a></div>

<div style="opacity: .8; clear:left;float:left;width: 200px; height: 40px; background:linear-gradient(to bottom, #4fa6d7, #173874);background: -webkit-linear-gradient(top, #4fa6d7, #173874);background: -moz-linear-gradient(top, #4fa6d7, #173874); margin-bottom: 4px; text-align:center"><a href="#3" style="font-family:verdana; font-size: 10px; letter-spacing: 2px; color: #FFF; line-height: 35px; text-decoration:none">HISTORY</a></div>

<div style="box-shadow: 1px 1px 10px #4fa6d7; clear:left;float:left;width: 200px; height: 40px; background:linear-gradient(to left, #842320, #B80600);background: -webkit-linear-gradient(left, #842320, #B80600);background: -moz-linear-gradient(left, #842320, #B80600);margin-bottom: 4px;"><a href="#4" style="font-family:verdana; font-size: 10px; letter-spacing: 3px; color: #FFF; line-height: 37px; text-decoration:none">NOTES</a></div><div style="float:left; border-left: 20px solid #B80600; border-top: 20px solid transparent; border-bottom: 20px solid transparent; margin-right: 4px;"></div>

</div></a>

</div>
</div>

<div style="font-family:verdana; font-size: 9px; letter-spacing:1px; text-align:center; color: #FFF; margin-top:-30px;border-top: 2px solid #FFF; line-height: 12px;">OOC: Playername • email@email.com • aimname (aim) • cdjname(cdj) • PB Name (pb)

</div></div>

<div style="text-align:center; font-family:arial;font-size:9px; color: #2a3b5a; letter-spacing: 3px; margin-top:5px; text-transform:uppercase;">code by wearestardust @ <a href="http://supersuits.insanejournal.com" style="color: #B80600; text-decoration:none">supersuits</div>

</td></tr></table></center></lj-raw>

instructions→
1. Copy/paste the code into your entry.
2. Replace BACKGROUNDGIF with a gif or other image of your choice. You may have to fiddle with background-position to get it positioned the way you want; this section of code appears 5 times, so using find/replace in Notepad is good.
3. Replace YOURGIF a gif of your choice.
4. Fill it in! This is in lj-raw format, so you need to BR your line breaks.
5. Enjoy :)

Please keep the credit code at the bottom of the template so that people can find their way back to

supersuits if they want to use it. Thank you!

♥ kait

P.S.: See profiles in use for Kaidan Alenko and Mordin Solus. (And maybe come join them and Commander Shepard at

theriverman with more Mass Effect characters! :D)

(Read comments) - (Post a new comment)

	wearestardust 2014-05-04 01:20 am UTC (link)
	AHHHHH THIS IS RAD AS HELL I LOVE IT (Reply to this) (Parent) (Thread)

	allthethings 2014-05-04 01:23 am UTC (link)
	OMG YAY I'm so glad you're not angry! XD; (Reply to this) (Parent) (Thread)

	wearestardust 2014-05-04 01:23 am UTC (link)
	No no no this is awesome! (Reply to this) (Parent) (Thread)

	allthethings 2014-05-04 01:26 am UTC (link)
	You're brilliant btw. I still don't know how you did those diagonal lines on there, and I stared at your code for like three hours today. XD (Reply to this) (Parent) (Thread)

	wearestardust 2014-05-04 01:31 am UTC (link)
	Thank you! :) Oh! It's cheating. Basically, it's making use of a really wide border, taking advantage of the border's bevel at the corners and making three sides white/transparent and one side colored -- there's a really good tutorial on how to do it here. (Reply to this) (Parent) (Thread)

	allthethings 2014-05-04 01:34 am UTC (link)
	Oh ho ho! Thanks for the link! I'll have to check that out! (also, BOOYAH CAPTAIN MARVEL) (Reply to this) (Parent) (Thread)

	wearestardust 2014-05-04 01:37 am UTC (link)
	It's the neatest trick, I love it. :D (BOOYAH CAPTAIN MARVEL IS THE BEST) (Reply to this) (Parent) (Thread)

	captainmarvel 2014-05-04 07:14 am UTC (link)
	Said husband, if you wanted to see the edited code in action XD Complete with Captain Marvel :D Nat Carol (Reply to this) (Parent) (Thread)

	wearestardust 2014-05-04 07:18 am UTC (link)
	Can I give an A++ to a bisexual Carol Danvers who's dating Jess, please, yes (Reply to this) (Parent) (Thread)

	captainmarvel 2014-05-04 07:19 am UTC (link)
	A++++! (Reply to this) (Parent)

(Read comments) -