InsaneJournal

Tweak says, "Frank is NOT insane!"

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)

(Post a new comment)

	darkhuntress 2014-04-11 02:18 am UTC (link)
	My Name is Commander Shepard and this is the best bio sheet on the Citadel! (Reply to this) (Thread)

	wearestardust 2014-04-11 02:28 am UTC (link)
	HAHAHAHA let me love you (Reply to this) (Parent) (Thread)

	darkhuntress 2014-04-12 05:29 am UTC (link)
	:D A friend and I will be using this for sure! (Reply to this) (Parent) (Thread)

	wearestardust 2014-04-12 05:30 am UTC (link)
	hell yes! (Reply to this) (Parent)

	ex_unknown590 2014-04-11 09:37 pm UTC (link)
	(Reply to this) (Thread)

	wearestardust 2014-04-11 09:53 pm UTC (link)
	(Reply to this) (Parent) (Thread)

	riot 2014-04-11 10:00 pm UTC (link)
	(Reply to this) (Parent) (Thread)

	wearestardust 2014-04-11 10:24 pm UTC (link)
	sorry garrus, it can't (Reply to this) (Parent) (Thread)

	aaand now i wanna rp garrus what riot 2014-04-11 10:27 pm UTC (link)
	w/e stop embarrassing yourself alenko (Reply to this) (Parent) (Thread)

	~do it~ wearestardust 2014-04-11 10:34 pm UTC (link)
	kaidan dances like somebody's drunk, awkward uncle and is in no way ashamed of this. idk whether to be proud or disturbed. (Reply to this) (Parent)

	ex_aveline919 2014-04-12 07:05 pm UTC (link)
	THIS IS GLORIOUS. (Reply to this)

allthethings
2014-05-04 01:18 am UTC (link)

I hope you're okay with this and maybe I should have asked before I did this!

But I took this and edited into a SHIELD Mainframe code. Left your credit in of course!

It's up on my own journal with a text area in case someone else wants to use the edit... I've got some places I intend to use it (still with your credit on there!) coming up, and my husband wants to use it for his biosheets for his avengers characters.

Here it is: http://allthethings.insanejournal.com/4550.html

Let me know if you're not comfy with it and I'll take it down, but I hope you'll be okay!

(Reply to this) (Thread)

	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)

	pesadilla 2015-09-11 01:41 pm UTC (link)
	is it okay if i approximate this to fit the borderlands aesthetic? i'll make sure to link it, if i manage it! (Reply to this) (Thread)

	wearestardust 2015-09-15 08:39 am UTC (link)
	A little late to the party, but yes! Please do, if you haven't already! (Reply to this) (Parent)

	camalyng 2016-02-03 10:05 am UTC (link)
	I'm so glad I finally have an excuse to use this - I tweaked it a bit to change pictures. (Reply to this)

	heroic 2016-09-27 09:58 am UTC (link)
	I absolutely ADORE this layout. So thrilled that you made it. I'm using it here for my default Shepard application. (Reply to this)

	crackingcode 2019-02-07 07:49 am UTC (link)
	Love this one; think I'll be using it for a space PSL <3 (Reply to this)