fate/maximum hubris

[nockpoint]

A SMUG RED MAN ARCHER SERVANT ABILITIES NOTES OOC BASICS MASTER TRUE NAME SEX HEIGHT / WEIGHT ALIGNMENT CANON SOURCE it me i'm the boss i rolled the jerk EMIYA ( エミヤ ) Male 6'2" (187cm) / 171lb (78kg) True Neutral Fate/stay night PARAMETERS STR D AGI C LCK E MAG B END C N.P. ?? CLASS SKILLS INDEPENDENT ACTION B Have you ever tried herding cats? Well, it's just like that, but now the cat has super powers. magic resistance D the knight classes are supposed to be good at this, you fucking suck archer. anything with more than two lines of incantation can kill him.

EMIYA ARCHER SERVANT ABILITIES NOTES OOC SERVANT SKILLS EYE OF MIND (TRUE) B Insight cultivated through discipline and training. Combat theory that allows one to calmly analyze the situation and enemy capabilities in a dilemma, and derive a means of escape. If there is even a 1% chance to reverse the situation, the user can fight for the chance to put that plan into action. Superficially, it resembles the Instinct skill. CLAIRVOYANCE C I GUESS THE ARCHER CLASS REALLY IS MADE OF ARCHERS, ARCHER MAGECRAFT C- he can't even fix a goddamn window. UNLIMITED BLADE WORKS The “Innate Bound Field” wielded by EMIYA. It is his ability as a Heroic Spirit with no Noble Phantasms. The inside of the reality marble is a world like a steel mill, filled with weapons, flames, and giant gears. The uncountable swords plunge into the ground and were preserved thus. The majority of the weapons persevered in the reality marble are Noble Phantasms of Heroic Spirits copied through projection sorcery, each possessing deadly powers. Although the majority of the weapons are swords, the Noble Phantasm that provides absolute defence against projectiles, “Rho Aias”, is also said to be copied and stored in the reality marble. Also, the ability of the replicated Noble Phantasm suffers one rank down compared to the original. Not only can Emiya freely access the weapon stored inside Unlimited Blade Works, he can also modify the weapons to his wish like Caladabolg II. In addition, he is able to capitalise on his ability to repeatedly project: use Noble Phantasms as disposable arrows, and then unleash the magical energy stored within – the tactic called “Broken Phantasm”. BOX TITLE Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Fusce nec tellus sed augue semper porta. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas mattis. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Fusce ac turpis quis ligula lacinia aliquet. Vestibulum sapien. In scelerisque sem at dolor. Proin quam. PROJECTIONS CALADBOLG A it twisty RHO AIAS ?? Seven Rings of Heaven - The shield used by the hero of Trojan War, Ajax, and the only thing that proved capable of stopping the javelin of the great hero of Troy, Hector. Afterward, its fame spread, and its existence was eventually sublimed into a "conceptual armament" boasting absolute defensive power against thrown weapons. It is a Boundary Field Noble Phantasm that provides absolute defence against projectile weapons.

EMIYA ARCHER SERVANT ABILITIES NOTES OOC TITLE BIG DESCRIPTION Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Fusce nec tellus sed augue semper porta. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas mattis. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Fusce ac turpis quis ligula lacinia aliquet. Vestibulum sapien. In scelerisque sem at dolor. Proin quam. Etiam ultrices. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. NOTES Because his origin differs from that of other Heroic Spirits, Emiya cannot be called a proper Heroic Spirit. This Heroic Spirit is classified as a Guardian, a defense mechanism born from humanity’s collective unconscious will to “continue.” This defense is also referred to as the Counter Force of humanity. In other words, he is a faceless representative of justice, elected by the faceless masses.

</td>

SERVANT NAME class SERVANT ABILITIES NOTES OOC BOX TITLE player NAME TIMEZONE PLURK LINE ID NAME TIME PLURK ???? ◆ ◆ ◆ ◆ ◆

code by bihilism

notes

haha yikes, this is sloppy, i've cleaned it as much as possible but... it's still sloppy.

FIRST ACTUAL CODE I'VE EVER MADE. maybe a bit too ambitious. my shoulders hurt now.

based off of the servant status screens from fate/grand order (1, 2, 3, 4)

since i made it for personal use first and cleaned it up for sharing after, i'm afraid i can't help much if it gets broken during modification :( sorry!

made for chrome. not tested in ff or ie.

CODES

FULL CODE <cut><raw-code> <center> <div id="container" style=" width: 780px; margin: auto;"> <div id="box" style=" width: 770px; height: 444px; border: 4px solid #fff; box-shadow: 1px 1px 6px #999; margin-bottom: 4px; border-radius: 15px; background: linear-gradient(to bottom left, #197FC7 20%, #101F5A, #072072); font-family: tahoma; color: rgba(255,0,0,0); text-align: justify;"> <div id="side image" style=" float: left; height: 425px; width: 250px; margin: 10px 0px 10px 15px; background-image: url(https://fate-go.cirnopedia.org/icons/servant_card/2171.jpg); background-size: auto 425px; background-position: 50% 50%;"> </div> <div id="information" style=" height: 430px; width: 485px; overflow: hidden; margin: 5px; -moz-webkit-margin:5px; "> <!-- PAGE 1 --> <a name="1"></a> <table><tr><td> <div style=" font-size: 40px; text-align: right; line-height: 30px; border-bottom: 1px dotted #fff; margin: 10px 20px 10px 10px; padding-right: 3px; color: white; text-transform: uppercase; text-shadow: 0 0 2px #1A2A4E, 0 0 4px #FFF; letter-spacing: -2px;">SERVANT NAME <div style=" font-size: 15px; text-align: right; text-transform: uppercase; color: white; text-shadow: 0 0 2px #1A2A4E, 0 0 4px #FFF; letter-spacing: 2px;">CLASS </div> </div> <!-- navigation tabs --><table><tr> <!-- active tab --> <td align="center"> <div style=" width: 75px; padding: 10px; margin: 0px 4px; border: 2px solid #FFF; border-radius: 3px; box-shadow: 0px 0px 5px #fff; background: linear-gradient(to right, #ECB525, #B32323, #ECB525); font-size: 12px; text-align: center; text-transform: uppercase;"> <a href="#1" style="color: #FFF; text-decoration:none;"><b>SERVANT</B></a> </div> </td> <!-- end active --> <td align="center"> <div style=" width: 75px; padding: 10px; margin: 0px 4px; border: 2px solid #FFF; border-radius: 3px; box-shadow: 0px 0px 5px #fff; background: linear-gradient(to right, #10B3EC, #073E90, #10B3EC); font-size: 12px; text-align:center; text-transform: uppercase;"> <a href="#2" style="color: #FFF; text-decoration:none;"><b>ABILITIES</b></a> </div> </td> <td align="center"> <div style=" width: 75px; padding: 10px; margin: 0px 4px; border: 2px solid #FFF; border-radius: 3px; box-shadow: 0px 0px 5px #fff; background: linear-gradient(to right, #10B3EC, #073E90, #10B3EC); font-size: 12px; text-align:center; text-transform: uppercase;"> <a href="#3" style="color: #FFF; text-decoration:none;"><b>NOTES</b></a> </div> </td> <td align="center"> <div style=" width: 75px; padding: 10px; margin: 0px 4px; border: 2px solid #FFF; border-radius: 3px; box-shadow: 0px 0px 5px #fff; background: linear-gradient(to right, #10B3EC, #073E90, #10B3EC); font-size: 12px; text-align:center; text-transform: uppercase;"> <a href="#4" style="color: #FFF; text-decoration:none;"><b>OOC</b></a> </div> </td> </tr></table> <!-- end navigation tabs --> <!-- PAGE 1 CONTENTS START --> <div style=" height: 300px; width: 490px; margin: -5px 0px 0px 7px; overflow: auto; padding: 0px 0px 25px;"> <!-- BASICS START--> <div id="box container" style=" width: auto; background-color: #EAF4F5; margin: 10px 5px; padding-top: 3px; border-radius:10px; border:3px solid #EAF4F5;"> <div id="box title" style=" font-size: 12px; color: #000; padding: 0px 10px 3px;"> <b>BASICS</b> </div> <div id="box tab" style=" width: auto; height: 0; border-left: 15px solid transparent; border-bottom: 15px solid #282C2F; margin-left: 60px; margin-top: -15px; position: relative;z-index:100; border-radius: 0 7px 0 0;"></div> <div id="box content" style=" background:#282C2F; padding:0 15px; border-radius:0 0 7px 7px; color: #fff; font-size: 11px; height: 130px;"> <div id="left icon" style=" height: 100px; width: 100px; float: left; background-image: url(ICON URL); background-size: 100px 100px; border-radius: 3px; box-shadow: 0px 0px 2px #fff; margin: 15px 25px 15px 0;"></div> <div id="info table" style="padding-top:10px;"><Table><tr> <td valign="top" align="right"> <div style="color: #FECB1A; text-transform: uppercase; font-weight: bold;"> MASTER<br> TRUE NAME <br> SEX <br> HEIGHT / WEIGHT <br> ALIGNMENT <BR> CANON SOURCE </div> </td> <td valign="top"> NAME <br> HERE <br> HERE <Br> HERE <Br> HERE <Br> HERE </td> </tr></table> </div> </div></div> <!-- BASICS END --> <!-- PARAMETERS START --> <div id="box container" style=" width: auto; background-color: #EAF4F5; margin: 10px 5px; padding-top: 3px; border-radius:10px; border:3px solid #EAF4F5;"> <div id="box title" style=" font-size: 12px; color: #000; padding: 0px 10px 3px;"><b> PARAMETERS</b></div> <div id="box tab" style=" width: auto; height: 0; border-left: 15px solid transparent; border-bottom: 15px solid #282C2F; margin-left: 100px; margin-top: -15px; position: relative;z-index:100; border-radius: 0 7px 0 0;"></div> <div id="box content" style=" background:#282C2F; padding:0 15px; border-radius:0 0 7px 7px; color: #fff; font-size: 11px; height: 130px;"> <bR> <Center> <table cellspacing="10"> <tr height="90px"> <!-- LEFT COLUMN --> <td> <b>STR</B> <div style="text-align:right; margin:-15px -10px 0 0;">EX</div> <div style="height: 12px; width: 132px; background: #fff; position: relative; border: 1px solid #a8a8a8; border-radius: 16px; bottom: 5px; margin: -10px 5px 10px 30px;"> <!-- E --><div style="height: 10px; width: 20px; background: #C96937; border: 1px solid #924D24; border-radius: 15px 0px 0px 15px; float: left;"></div> <!-- D --><div style="height: 10px; width: 20px; background: #C96937; border: 1px solid #924D24; float: left;"></div> <!-- C --><div style="height: 10px; width: 20px; background: #C96937; border: 1px solid #924D24; float: left;"></div> <!-- B --><div style="height: 10px; width: 20px; background: #C96937; border: 1px solid #924D24; float: left;"></div> <!-- A --><div style="height: 10px; width: 20px; background: #C96937; border: 1px solid #924D24; float: left;"></div> <!-- EX --><div style="height: 10px; width: 20px; background: #C96937; border: 1px solid #924D24; border-radius: 0px 15px 15px 0px; float: left;"></div> </div> <b>AGI</B> <div style="text-align:right;margin:-15px -10px 0 0;">C</div> <div style="height: 12px; width: 132px; background: #fff; position: relative; border: 1px solid #a8a8a8; border-radius: 16px; bottom: 5px; margin: -10px 5px 10px 30px;"> <!-- E --><div style="height: 10px; width: 20px; background: #C96937; border: 1px solid #924D24; border-radius: 15px 0px 0px 15px; float: left;"></div> <!-- D --><div style="height: 10px; width: 20px; background: #C96937; border: 1px solid #924D24; float: left;"></div> <!-- C --><div style="height: 10px; width: 20px; background: #C96937; border: 1px solid #924D24; float: left;"></div> <!-- B --><div style="height: 10px; width: 20px; background: #c2c2c2; border: 1px solid #a8a8a8; float: left;"></div> <!-- A --><div style="height: 10px; width: 20px; background: #c2c2c2; border: 1px solid #a8a8a8; float: left;"></div> <!-- EX --><div style="height: 10px; width: 20px; background: #c2c2c2; border:1px solid #a8a8a8; border-radius: 0px 15px 15px 0px; float: left;"></div> </div> <b>LCK</B> <div style="text-align:right; margin:-15px -10px 0 0;">??</div> <div style="height: 12px; width: 132px; background: #fff; position: relative; border: 1px solid #a8a8a8; border-radius: 16px; bottom: 5px; margin: -10px 5px 15px 30px;"> <!-- E --><div style="height: 10px; width: 20px; background: #c2c2c2; border-radius: 15px 0px 0px 15px; border:1px solid #a8a8a8; float: left;"></div> <!-- D --><div style="height: 10px; width: 20px; background: #c2c2c2; border:1px solid #a8a8a8; float: left;"></div> <!-- C --><div style="height: 10px; width: 20px; background: #c2c2c2; border:1px solid #a8a8a8; float: left;"></div> <!-- B --><div style="height: 10px; width: 20px; background: #c2c2c2; border:1px solid #a8a8a8; float: left;"></div> <!-- A --><div style="height: 10px; width: 20px; background: #c2c2c2; border:1px solid #a8a8a8; float: left;"></div> <!-- EX --><div style="height: 10px; width: 20px; background: #c2c2c2; border:1px solid #a8a8a8; border-radius: 0px 15px 15px 0px; float: left;"></div> </div> </td> <td width="15"></td> <!-- RIGHT COLUMN--> <td> <b>MAG</B> <div style="text-align:right;margin:-15px -10px 0 0;">C</div> <div style="height: 12px; width: 132px; background: #fff; position: relative; border: 1px solid #a8a8a8; border-radius: 16px; bottom: 5px; margin: -10px 5px 10px 30px;"> <!-- E --><div style="height: 10px; width: 20px; background: #C96937; border: 1px solid #924D24; border-radius: 15px 0px 0px 15px; float: left;"></div> <!-- D --><div style="height: 10px; width: 20px; background: #C96937; border: 1px solid #924D24; float: left;"></div> <!-- C --><div style="height: 10px; width: 20px; background: #C96937; border: 1px solid #924D24; float: left;"></div> <!-- B --><div style="height: 10px; width: 20px; background: #c2c2c2; border: 1px solid #a8a8a8; float: left;"></div> <!-- A --><div style="height: 10px; width: 20px; background: #c2c2c2; border: 1px solid #a8a8a8; float: left;"></div> <!-- EX --><div style="height: 10px; width: 20px; background: #c2c2c2; border:1px solid #a8a8a8; border-radius: 0px 15px 15px 0px; float: left;"></div> </div> <b>END</B> <div style="text-align:right;margin:-15px -10px 0 0;">C</div> <div style="height: 12px; width: 132px; background: #fff; position: relative; border: 1px solid #a8a8a8; border-radius: 16px; bottom: 5px; margin: -10px 5px 10px 30px;"> <!-- E --><div style="height: 10px; width: 20px; background: #C96937; border: 1px solid #924D24; border-radius: 15px 0px 0px 15px; float: left;"></div> <!-- D --><div style="height: 10px; width: 20px; background: #C96937; border: 1px solid #924D24; float: left;"></div> <!-- C --><div style="height: 10px; width: 20px; background: #C96937; border: 1px solid #924D24; float: left;"></div> <!-- B --><div style="height: 10px; width: 20px; background: #c2c2c2; border: 1px solid #a8a8a8; float: left;"></div> <!-- A --><div style="height: 10px; width: 20px; background: #c2c2c2; border: 1px solid #a8a8a8; float: left;"></div> <!-- EX --><div style="height: 10px; width: 20px; background: #c2c2c2; border: 1px solid #a8a8a8; border-radius: 0px 15px 15px 0px; float: left;"></div> </div> <b>N.P.</B> <div style="text-align:right; margin:-15px -10px 0 0;">C</div> <div style="height: 12px; width: 132px; background: #fff; position: relative; border: 1px solid #a8a8a8; border-radius: 16px; bottom: 5px; margin: -10px 5px 15px 30px;"> <!-- E --><div style="height: 10px; width: 20px; background: #C96937; border: 1px solid #924D24; border-radius: 15px 0px 0px 15px; float: left;"></div> <!-- D --><div style="height: 10px; width: 20px; background: #C96937; border: 1px solid #924D24; float: left;"></div> <!-- C --><div style="height: 10px; width: 20px; background: #C96937; border: 1px solid #924D24; float: left;"></div> <!-- B --><div style="height: 10px; width: 20px; background: #c2c2c2; border: 1px solid #a8a8a8; float: left;"></div> <!-- A --><div style="height: 10px; width: 20px; background: #c2c2c2; border: 1px solid #a8a8a8; float: left;"></div> <!-- EX --><div style="height: 10px; width: 20px; background: #c2c2c2; border: 1px solid #a8a8a8; border-radius: 0px 15px 15px 0px; float: left;"></div> </div> </td> </tr> </table> </center> <div style="float: clear"></div> </div> </div> <!-- PARAMETERS END --> <!-- CLASS SKILLS START --> <div id="box container" style=" width: auto; background-color: #EAF4F5; margin: 10px 5px; padding-top: 3px; border-radius:10px; border:3px solid #EAF4F5;"> <div id="box title" style=" font-size: 12px; color: #000; padding: 0px 10px 3px;"><b>CLASS SKILLS</b></div> <div id="box tab" style=" width: auto; height: 0; border-left: 15px solid transparent; border-bottom: 15px solid #282C2F; margin-left: 115px; margin-top: -15px; position: relative;z-index:100; border-radius: 0 7px 0 0;"></div> <div id="box content" style=" background:#282C2F; padding:0 15px 15px; border-radius:0 0 7px 7px; color: #fff; font-size: 11px; min-height: 100px;"> <BR> <Table cellspacing="10"> <tr> <td valign="top" align="right" width="80"> <span style="color: #1AA9ED; text-transform: uppercase;">SKILL NAME</span><br> <b>RANK</b> </td> <td> <div id="skill icon" style=" height: 50px; width: 50px; float: left; background-image: url(ICON URL); background-size: 50px 50px; border-radius: 3px; box-shadow: 0px 0px 2px #fff; margin-right: 10px;"></div> SKILL DESCRIPTION </td> </tr> <tr><td height="5"></td></tr> <tr> <td valign="top" align="right"> <span style="color: #1AA9ED; text-transform: uppercase;">SKILL NAME</span><br> <b>RANK</b> </TD> <td valign="top"> <div id="skill icon" style=" height: 50px; width: 50px; float: left; background-image: url(ICON URL); background-size: 50px 50px; border-radius: 3px; box-shadow: 0px 0px 2px #fff; margin-right: 10px;"></div> SKILL DESCRIPTION </td> </tr></table> </div></div> <!-- CLASS SKILLS END--> <!-- PAGE 1 CONTENTS END --> </div> </td> </tr> </table> <!-- PAGE 2 START --> <a name="2"></a><table><tr><td> <div style=" font-size: 40px; text-align: right; line-height: 30px; border-bottom: 1px dotted #fff; margin: 10px 20px 10px 10px; padding-right: 3px; color: white; text-transform: uppercase; text-shadow: 0 0 2px #1A2A4E, 0 0 4px #FFF; letter-spacing: -2px;">SERVANT NAME <div style=" font-size: 15px; text-align: right; text-transform: uppercase; color: white; text-shadow: 0 0 2px #1A2A4E, 0 0 4px #FFF; letter-spacing: 2px;">CLASS </div> </div> <!-- navigation tabs --><table><tr> <td align="center"> <div style=" width: 75px; padding: 10px; margin: 0px 4px; border: 2px solid #FFF; border-radius: 3px; box-shadow: 0px 0px 5px #fff; background: linear-gradient(to right, #10B3EC, #073E90, #10B3EC); font-size: 12px; text-align:center; text-transform: uppercase;"> <a href="#1" style="color: #FFF; text-decoration:none;"><b>SERVANT</b></a> </div> </td> <!-- active tab --> <td align="center"> <div style=" width: 75px; padding: 10px; margin: 0px 4px; border: 2px solid #FFF; border-radius: 3px; box-shadow: 0px 0px 5px #fff; background: linear-gradient(to right, #ECB525, #B32323, #ECB525); font-size: 12px; text-align: center; text-transform: uppercase;"> <a href="#2" style="color: #FFF; text-decoration:none;"><b>ABILITIES</B></a> </div> </td> <!-- end active --> <td align="center"> <div style=" width: 75px; padding: 10px; margin: 0px 4px; border: 2px solid #FFF; border-radius: 3px; box-shadow: 0px 0px 5px #fff; background: linear-gradient(to right, #10B3EC, #073E90, #10B3EC); font-size: 12px; text-align:center; text-transform: uppercase;"> <a href="#3" style="color: #FFF; text-decoration:none;"><b>NOTES</b></a> </div> </td> <td align="center"> <div style=" width: 75px; padding: 10px; margin: 0px 4px; border: 2px solid #FFF; border-radius: 3px; box-shadow: 0px 0px 5px #fff; background: linear-gradient(to right, #10B3EC, #073E90, #10B3EC); font-size: 12px; text-align:center; text-transform: uppercase;"> <a href="#4" style="color: #FFF; text-decoration:none;"><b>OOC</b></a> </div> </td> </tr></table> <!-- end navigation tabs --> <!-- PAGE 2 CONTENT --> <div style=" height: 300px; width: 490px; margin: -5px 0px 0px 7px; overflow: auto; padding: 0px 0px 25px;"> <!-- SERVANT SKILLS START --> <div id="box container" style=" width: auto; background-color: #EAF4F5; margin: 10px 5px; padding-top: 3px; border-radius:10px; border:3px solid #EAF4F5;"> <div id="box title" style=" font-size: 12px; color: #000; padding: 0px 10px 3px;"><b>SERVANT SKILLS</b></div> <div id="box tab" style=" width: auto; height: 0; border-left: 15px solid transparent; border-bottom: 15px solid #282C2F; margin-left: 115px; margin-top: -15px; position: relative;z-index:100; border-radius: 0 7px 0 0;"></div> <div id="box content" style=" background:#282C2F; padding:0 15px 15px; border-radius:0 0 7px 7px; color: #fff; font-size: 11px; min-height: 100px;"> <BR> <Table cellspacing="10"> <tr> <td valign="top" align="right" width="80"> <span style="color: #1AA9ED; text-transform: uppercase;">SKILL NAME</span><br> <b>RANK</b> </td> <td> <div id="skill icon" style=" height: 50px; width: 50px; float: left; background-image: url(ICON URL); background-size: 50px 50px; border-radius: 3px; box-shadow: 0px 0px 2px #fff; margin-right: 10px;"></div> SKILL DESCRIPTION </td> </tr> <tr><td height="5"></td></tr> <tr> <td valign="top" align="right"> <span style="color: #1AA9ED; text-transform: uppercase;">SKILL NAME</span><br> <b>RANK</b> </TD> <td valign="top"> <div id="skill icon" style=" height: 50px; width: 50px; float: left; background-image: url(ICON URL); background-size: 50px 50px; border-radius: 3px; box-shadow: 0px 0px 2px #fff; margin-right: 10px;"></div> SKILL DESCRIPTION </td> <tr><td height="5"></td></tr> <tr> <td valign="top" align="right"> <span style="color: #1AA9ED; text-transform: uppercase;">SKILL NAME</span><br> <b>RANK</b> </TD> <td valign="top"> <div id="skill icon" style=" height: 50px; width: 50px; float: left; background-image: url(ICON URL); background-size: 50px 50px; border-radius: 3px; box-shadow: 0px 0px 2px #fff; margin-right: 10px;"></div> SKILL DESCRIPTION </td> </tr></table> </div></div> <!-- SERVANT SKILLS END--> <!-- IMAGE TEXT --> <div id="box container" style=" width: auto; background-color: #EAF4F5; margin: 10px 5px; padding-top: 3px; border-radius:10px; border:3px solid #EAF4F5;"> <div id="box title" style=" font-size: 12px; color: #000; padding: 0px 10px 3px;"><b>BOX TITLE</b></div> <div id="box tab" style=" width: auto; height: 0; border-left: 15px solid transparent; border-bottom: 15px solid #282C2F; margin-left: 100px; margin-top: -15px; position: relative;z-index:100; border-radius: 0 7px 0 0;"></div> <div id="box content" style=" background:#282C2F; padding:0 15px 15px; border-radius:0 0 7px 7px; color: #fff; font-size: 11px; min-height: 100px;"> <BR> <center> <div style=" width: auto; height: 150px; background-image: url(IMAGE URL); background-position: 50% 50%; border-radius: 3px; box-shadow: 0px 0px 2px #fff; margin: 5px 0px 10px;"> </div> </center> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. <br><Br> Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. <b>Fusce nec tellus sed augue semper porta</b>. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. <br><br> <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. <b>Maecenas mattis</b>. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. <b>Fusce ac turpis quis ligula lacinia aliquet</b>. Vestibulum sapien. <i>In scelerisque sem at dolor</i>. Proin quam. <br><br> </div></div> <!-- IMAGE TEXT END --> <!-- TEXT ONLY --> <div id="box container" style=" width: auto; background-color: #EAF4F5; margin: 10px 5px; padding-top: 3px; border-radius:10px; border:3px solid #EAF4F5;"> <div id="box title" style=" font-size: 12px; color: #000; padding: 0px 10px 3px;"><b>BOX TITLE</b></div> <div id="box tab" style=" width: auto; height: 0; border-left: 15px solid transparent; border-bottom: 15px solid #282C2F; margin-left: 100px; margin-top: -15px; position: relative;z-index:100; border-radius: 0 7px 0 0;"></div> <div id="box content" style=" background:#282C2F; padding:0 15px 15px; border-radius:0 0 7px 7px; color: #fff; font-size: 11px; min-height: 100px;"> <BR> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. <br><Br> Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. <b>Fusce nec tellus sed augue semper porta</b>. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. <br><br> <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. <b>Maecenas mattis</b>. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. <b>Fusce ac turpis quis ligula lacinia aliquet</b>. Vestibulum sapien. <i>In scelerisque sem at dolor</i>. Proin quam. <br><br> </div></div> <!-- TEXT ONLY END --> <!-- ICONLESS SKILL --> <div id="box container" style=" width: auto; background-color: #EAF4F5; margin: 10px 5px; padding-top: 3px; border-radius:10px; border:3px solid #EAF4F5;"> <div id="box title" style=" font-size: 12px; color: #000; padding: 0px 10px 3px;"><b>TITLE</b></div> <div id="box tab" style=" width: auto; height: 0; border-left: 15px solid transparent; border-bottom: 15px solid #282C2F; margin-left: 100px; margin-top: -15px; position: relative;z-index:100; border-radius: 0 7px 0 0;"></div> <div id="box content" style=" background:#282C2F; padding:0 15px 15px; border-radius:0 0 7px 7px; color: #fff; font-size: 11px; min-height: 100px;"> <BR> <Table cellspacing="10"> <tr> <td valign="top" align="right" width="80"> <span style="color: #1AA9ED; text-transform: uppercase;">SKILL NAME</span><br> <b>RANK</b> </td> <td valign="top"> SKILL DESCRIPTION </td> </tr> <tr><td height="5"></td></tr> <tr> <td valign="top" align="right"> <span style="color: #1AA9ED; text-transform: uppercase;">SKILL NAME</span><br> <b>RANK</b> </TD> <td valign="top"> SKILL DESCRIPTION </td> </tr></table> </div></div> <!--ICONLESS SKILL END--> <!-- PAGE 2/CONTENT END --> </div> </td> </tr> </table> <!-- PAGE 3 START --> <a name="3"></a> <table> <tr> <td> <div style=" font-size: 40px; text-align: right; line-height: 30px; border-bottom: 1px dotted #fff; margin: 10px 20px 10px 10px; padding-right: 3px; color: white; text-transform: uppercase; text-shadow: 0 0 2px #1A2A4E, 0 0 4px #FFF; letter-spacing: -2px;">SERVANT NAME <div style=" font-size: 15px; text-align: right; text-transform: uppercase; color: white; text-shadow: 0 0 2px #1A2A4E, 0 0 4px #FFF; letter-spacing: 2px;">CLASS </div> </div> <!-- navigation tabs --><table><tr> <td align="center"> <div style=" width: 75px; padding: 10px; margin: 0px 4px; border: 2px solid #FFF; border-radius: 3px; box-shadow: 0px 0px 5px #fff; background: linear-gradient(to right, #10B3EC, #073E90, #10B3EC); font-size: 12px; text-align:center; text-transform: uppercase;"> <a href="#1" style="color: #FFF; text-decoration:none;"><b>SERVANT</b></a> </div> </td> <td align="center"> <div style=" width: 75px; padding: 10px; margin: 0px 4px; border: 2px solid #FFF; border-radius: 3px; box-shadow: 0px 0px 5px #fff; background: linear-gradient(to right, #10B3EC, #073E90, #10B3EC); font-size: 12px; text-align:center; text-transform: uppercase;"> <a href="#2" style="color: #FFF; text-decoration:none;"><b>ABILITIES</b></a> </div> </td> <!-- active tab --> <td align="center"> <div style=" width: 75px; padding: 10px; margin: 0px 4px; border: 2px solid #FFF; border-radius: 3px; box-shadow: 0px 0px 5px #fff; background: linear-gradient(to right, #ECB525, #B32323, #ECB525); font-size: 12px; text-align: center; text-transform: uppercase;"> <a href="#3" style="color: #FFF; text-decoration:none;"><b>NOTES</B></a> </div> </td> <!-- end active --> <td align="center"> <div style=" width: 75px; padding: 10px; margin: 0px 4px; border: 2px solid #FFF; border-radius: 3px; box-shadow: 0px 0px 5px #fff; background: linear-gradient(to right, #10B3EC, #073E90, #10B3EC); font-size: 12px; text-align:center; text-transform: uppercase;"> <a href="#4" style="color: #FFF; text-decoration:none;"><b>OOC</b></a> </div> </td> </tr></table> <!-- end navigation tabs --> <!-- information --> <div style=" height: 300px; width: 490px; margin: -5px 0px 0px 7px; overflow: auto; padding: 0px 0px 25px;"> <!-- RIGHT ICONS TEXT --> <div id="box container" style=" width: auto; background-color: #EAF4F5; margin: 10px 5px; padding-top: 3px; border-radius:10px; border:3px solid #EAF4F5;"> <div id="box title" style=" font-size: 12px; color: #000; padding: 0px 10px 3px;"><b>TITLE</b></div> <div id="box tab" style=" width: auto; height: 0; border-left: 15px solid transparent; border-bottom: 15px solid #282C2F; margin-left: 100px; margin-top: -15px; position: relative;z-index:100; border-radius: 0 7px 0 0;"></div> <div id="box content" style=" background:#282C2F; padding:0 15px 15px; border-radius:0 0 7px 7px; color: #fff; font-size: 11px; min-height: 100px;"> <BR> <div id="right icons" style=" float:right; margin: -10px -10px -15px 0;"> <div style=" height: 100px; width: 100px; background-image: url(ICON URL); background-size: 100px 100px; border-radius: 3px; box-shadow: 0px 0px 2px #fff; margin: 10px;"></div> <div style=" height: 100px; width: 100px; background-image: url(ICON URL); background-size: 100px 100px; border-radius: 3px; box-shadow: 0px 0px 2px #fff; margin: 10px;"></div> <div style=" height: 100px; width: 100px; background-image: url(ICON URL); background-size: 100px 100px; border-radius: 3px; box-shadow: 0px 0px 2px #fff; margin: 10px;"></div> <div style=" height: 100px; width: 100px; background-image: url(ICON URL); background-size: 100px 100px; border-radius: 3px; box-shadow: 0px 0px 2px #fff; margin: 10px;"></div> </div> BIG DESCRIPTION Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. <br><Br> Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. <b>Fusce nec tellus sed augue semper porta</b>. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. <br><br> <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. <b>Maecenas mattis</b>. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. <b>Fusce ac turpis quis ligula lacinia aliquet</b>. Vestibulum sapien. <i>In scelerisque sem at dolor</i>. Proin quam. <br><br> Etiam ultrices. <b>Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh</b>. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. <b>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos</b>. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. <Br><Br> Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. <div style="clear:both;"></div> </div></div> <!-- RIGHT ICON TEXT END --> <!-- TEXT ONLY --> <div id="box container" style=" width: auto; background-color: #EAF4F5; margin: 10px 5px; padding-top: 3px; border-radius:10px; border:3px solid #EAF4F5;"> <div id="box title" style=" font-size: 12px; color: #000; padding: 0px 10px 3px;"><b>BOX TITLE</b></div> <div id="box tab" style=" width: auto; height: 0; border-left: 15px solid transparent; border-bottom: 15px solid #282C2F; margin-left: 100px; margin-top: -15px; position: relative;z-index:100; border-radius: 0 7px 0 0;"></div> <div id="box content" style=" background:#282C2F; padding:0 15px 15px; border-radius:0 0 7px 7px; color: #fff; font-size: 11px; min-height: 100px;"> <BR> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. <br><Br> Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. <b>Fusce nec tellus sed augue semper porta</b>. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. <br><br> <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. <b>Maecenas mattis</b>. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. <b>Fusce ac turpis quis ligula lacinia aliquet</b>. Vestibulum sapien. <i>In scelerisque sem at dolor</i>. Proin quam. <br><br> </div></div> <!-- TEXT ONLY END --> <!-- PAGE 3 END --> </div> </td> </tr> </table> <!-- PAGE 4 START --> <a name="4"></a> <table> <tr> <td> <div style=" font-size: 40px; text-align: right; line-height: 30px; border-bottom: 1px dotted #fff; margin: -11px 8px 10px 10px; padding-right: 6px; color: white; text-transform: uppercase; text-shadow: 0 0 2px #1A2A4E, 0 0 4px #FFF; letter-spacing: -2px;">SERVANT NAME <div style=" font-size: 15px; text-align: right; text-transform: uppercase; color: white; text-shadow: 0 0 2px #1A2A4E, 0 0 4px #FFF; letter-spacing: 2px;">class </div> </div> <!-- navigation tabs --><table><tr> <td align="center"> <div style=" width: 75px; padding: 10px; margin: 0px 4px; border: 2px solid #FFF; border-radius: 3px; box-shadow: 0px 0px 5px #fff; background: linear-gradient(to right, #10B3EC, #073E90, #10B3EC); font-size: 12px; text-align:center; text-transform: uppercase;"> <a href="#1" style="color: #FFF; text-decoration:none;"><b>SERVANT</b></a> </div> </td> <td align="center"> <div style=" width: 75px; padding: 10px; margin: 0px 4px; border: 2px solid #FFF; border-radius: 3px; box-shadow: 0px 0px 5px #fff; background: linear-gradient(to right, #10B3EC, #073E90, #10B3EC); font-size: 12px; text-align:center; text-transform: uppercase;"> <a href="#2" style="color: #FFF; text-decoration:none;"><b>ABILITIES</b></a> </div> </td> <td align="center"> <div style=" width: 75px; padding: 10px; margin: 0px 4px; border: 2px solid #FFF; border-radius: 3px; box-shadow: 0px 0px 5px #fff; background: linear-gradient(to right, #10B3EC, #073E90, #10B3EC); font-size: 12px; text-align:center; text-transform: uppercase;"> <a href="#3" style="color: #FFF; text-decoration:none;"><b>NOTES</b></a> </div> </td> <!-- active tab --> <td align="center"> <div style=" width: 75px; padding: 10px; margin: 0px 4px; border: 2px solid #FFF; border-radius: 3px; box-shadow: 0px 0px 5px #fff; background: linear-gradient(to right, #ECB525, #B32323, #ECB525); font-size: 12px; text-align: center; text-transform: uppercase;"> <a href="#4" style="color: #FFF; text-decoration:none;"><b>OOC</B></a> </div> </td> <!-- end active --> </tr></table> <!-- end navigation tabs --> <!-- information --> <div style=" height: 270px; width: 473px; margin: -5px 0px 10px 7px; overflow: hidden; padding: 0px 0px 25px;"> <!-- OOC INFORMATION --> <div id="box container" style=" width: auto; background-color: #EAF4F5; margin: 10px 5px; padding-top: 3px; border-radius:10px; border:3px solid #EAF4F5;"> <div id="box title" style=" font-size: 12px; color: #000; padding: 0px 10px 3px;"><b>BOX TITLE</b></div> <div id="box tab" style=" width: auto; height: 0; border-left: 15px solid transparent; border-bottom: 15px solid #282C2F; margin-left: 100px; margin-top: -15px; position: relative;z-index:100; border-radius: 0 7px 0 0;"></div> <div id="box content" style=" background:#282C2F; padding:0 15px 15px; border-radius:0 0 7px 7px; color: #fff; font-size: 11px; max-height:240px; overflow: hidden; text-align: justify;"> <div id="craft essence" style=" min-height: 100px; width: 100px; float: left; border-radius: 7px 7px 0 0; box-shadow: 0px 0px 2px #fff; margin: 5% 10% 0 15%; background: linear-gradient(to right, #D8AF33, #FFDF02, #D8AF33); padding: 2px; text-align: center; color: #000; text-transform: uppercase;"> <div style=" height: 100px; width:100px; background-image: url(ICON URL); background-size: 100px 100px; border-radius: 5px 5px 0 0;"></div> <A href="http://pieta.dreamwidth.org" style="color: #000; text-decoration:none"><b>player</b></A> </div> <div style=" border-bottom: 1px dotted #fff; padding: 20px 0px 0px; margin-bottom: 15px;"> <Table> <tr> <td valign="center" align="right"> <div style="color: #FECB1A; text-transform: uppercase; font-weight: bold;"><bR> NAME <br> TIMEZONE <br><Br> PLURK <br> LINE/AIM <br><BR><bR> </div> </td> <td valign="center"><bR> NAME <br> TIME <br><Br> <a href="http://plurk.com/USERNAME" style="color: #1AA9ED; text-decoration:none">PLURK</A> <Br> <i>LINE ID/AIM SCREEN NAME</i><Br><Br><bR> </td> </tr> </table> </div> <div style=" font-size: 30px; font-weight: bold; text-align: center; margin-top: -10px; text-shadow: 0px 0px 4px #FFFFF0, 0 0 20px #000000;"> <font color="blue">◆</font> <font color="green">◆</font> <font color="yellowgreen">◆</font> <font color="orange">◆</font> <font color="red">◆</font> </div> </div></div> <!-- CRAFT ESSENCE END--> <!-- PAGE 4 END --> </div> <br> </tr> </td> </table> <div style="clear:both;"></div> </div> </div> <span style="font-size: 14px; color: #197FC7; font-family: tahoma; letter-spacing: 2px; font-variant: small-caps;"><b>code by <A href="http://bihilism.dreamwidth.org" style="color: #197FC7; text-decoration: none">bihilism</a></b></span> </div> <!-- WE'RE DONE, BRO--> </center> </raw-code> SKILLS <!-- SKILLS START --> <div id="box container" style=" width: auto; background-color: #EAF4F5; margin: 10px 5px; padding-top: 3px; border-radius:10px; border:3px solid #EAF4F5;"> <div id="box title" style=" font-size: 12px; color: #000; padding: 0px 10px 3px;"><b>TITLE</b></div> <div id="box tab" style=" width: auto; height: 0; border-left: 15px solid transparent; border-bottom: 15px solid #282C2F; margin-left: 100px; margin-top: -15px; position: relative;z-index:100; border-radius: 0 7px 0 0;"></div> <div id="box content" style=" background:#282C2F; padding:0 15px 15px; border-radius:0 0 7px 7px; color: #fff; font-size: 11px; min-height: 100px;"> <BR> <Table cellspacing="10"> <tr> <td valign="top" align="right" width="80"> <span style="color: #1AA9ED; text-transform: uppercase;">SKILL NAME</span><br> <b>RANK</b> </td> <td> <div id="skill icon" style=" height: 50px; width: 50px; float: left; background-image: url(ICON URL); background-size: 50px 50px; border-radius: 3px; box-shadow: 0px 0px 2px #fff; margin-right: 10px;"></div> SKILL DESCRIPTION </td> </tr> <tr><td height="5"></td></tr> <tr> <td valign="top" align="right"> <span style="color: #1AA9ED; text-transform: uppercase;">SKILL NAME</span><br> <b>RANK</b> </TD> <td valign="top"> <div id="skill icon" style=" height: 50px; width: 50px; float: left; background-image: url(ICON URL); background-size: 50px 50px; border-radius: 3px; box-shadow: 0px 0px 2px #fff; margin-right: 10px;"></div> SKILL DESCRIPTION </td> </tr></table> </div></div> <!-- SKILLS END--> TEXT W/ ICONS <!-- RIGHT ICONS TEXT --> <div id="box container" style=" width: auto; background-color: #EAF4F5; margin: 10px 5px; padding-top: 3px; border-radius:10px; border:3px solid #EAF4F5;"> <div id="box title" style=" font-size: 12px; color: #000; padding: 0px 10px 3px;"><b>TITLE</b></div> <div id="box tab" style=" width: auto; height: 0; border-left: 15px solid transparent; border-bottom: 15px solid #282C2F; margin-left: 100px; margin-top: -15px; position: relative;z-index:100; border-radius: 0 7px 0 0;"></div> <div id="box content" style=" background:#282C2F; padding:0 15px 15px; border-radius:0 0 7px 7px; color: #fff; font-size: 11px; min-height: 100px;"> <BR> <div id="right icons" style=" float:right; margin: -10px -10px -15px 0;"> <div style=" height: 100px; width: 100px; background-image: url(ICON URL); background-size: 100px 100px; border-radius: 3px; box-shadow: 0px 0px 2px #fff; margin: 10px;"></div> <div style=" height: 100px; width: 100px; background-image: url(ICON URL); background-size: 100px 100px; border-radius: 3px; box-shadow: 0px 0px 2px #fff; margin: 10px;"></div> <div style=" height: 100px; width: 100px; background-image: url(ICON URL); background-size: 100px 100px; border-radius: 3px; box-shadow: 0px 0px 2px #fff; margin: 10px;"></div> <div style=" height: 100px; width: 100px; background-image: url(ICON URL); background-size: 100px 100px; border-radius: 3px; box-shadow: 0px 0px 2px #fff; margin: 10px;"></div> </div> TEXT <div style="clear:both;"></div> </div></div> <!-- RIGHT ICON TEXT END -->

TEXT W/ IMAGE <!-- IMAGE TEXT --> <div id="box container" style=" width: auto; background-color: #EAF4F5; margin: 10px 5px; padding-top: 3px; border-radius:10px; border:3px solid #EAF4F5;"> <div id="box title" style=" font-size: 12px; color: #000; padding: 0px 10px 3px;"><b>TITLE</b></div> <div id="box tab" style=" width: auto; height: 0; border-left: 15px solid transparent; border-bottom: 15px solid #282C2F; margin-left: 100px; margin-top: -15px; position: relative;z-index:100; border-radius: 0 7px 0 0;"></div> <div id="box content" style=" background:#282C2F; padding:0 15px 15px; border-radius:0 0 7px 7px; color: #fff; font-size: 11px; min-height: 100px;"> <BR> <center> <div style=" width: auto; height: 150px; background-image: url(IMAGE URL); background-position: 50% 50%; border-radius: 3px; box-shadow: 0px 0px 2px #fff; margin: 5px 0px 10px;"> </div> </center> TEXT </div></div> <!-- IMAGE TEXT END --> PLAIN TEXT <!-- TEXT ONLY --> <div id="box container" style=" width: auto; background-color: #EAF4F5; margin: 10px 5px; padding-top: 3px; border-radius:10px; border:3px solid #EAF4F5;"> <div id="box title" style=" font-size: 12px; color: #000; padding: 0px 10px 3px;"><b>TITLE</b></div> <div id="box tab" style=" width: auto; height: 0; border-left: 15px solid transparent; border-bottom: 15px solid #282C2F; margin-left: 100px; margin-top: -15px; position: relative;z-index:100; border-radius: 0 7px 0 0;"></div> <div id="box content" style=" background:#282C2F; padding:0 15px 15px; border-radius:0 0 7px 7px; color: #fff; font-size: 11px; min-height: 100px;"> <BR> TEXT </div></div> <!-- TEXT ONLY END --> SKILLS W/OUT ICONS <!-- ICONLESS SKILL --> <div id="box container" style=" width: auto; background-color: #EAF4F5; margin: 10px 5px; padding-top: 3px; border-radius:10px; border:3px solid #EAF4F5;"> <div id="box title" style=" font-size: 12px; color: #000; padding: 0px 10px 3px;"><b>TITLE</b></div> <div id="box tab" style=" width: auto; height: 0; border-left: 15px solid transparent; border-bottom: 15px solid #282C2F; margin-left: 100px; margin-top: -15px; position: relative;z-index:100; border-radius: 0 7px 0 0;"></div> <div id="box content" style=" background:#282C2F; padding:0 15px 15px; border-radius:0 0 7px 7px; color: #fff; font-size: 11px; min-height: 100px;"> <BR> <Table cellspacing="10"> <tr> <td valign="top" align="right" width="80"> <span style="color: #1AA9ED; text-transform: uppercase;">SKILL NAME</span><br> <b>RANK</b> </td> <td valign="top"> SKILL DESCRIPTION </td> </tr> <tr><td height="5"></td></tr> <tr> <td valign="top" align="right"> <span style="color: #1AA9ED; text-transform: uppercase;">SKILL NAME</span><br> <b>RANK</b> </TD> <td valign="top"> SKILL DESCRIPTION </td> </tr></table> </div></div> <!--ICONLESS SKILL END-->

INSTRUCTIONS

the side image should be at least 250 x 425px, use the "background-position" tag to move it if it is larger

the first percentage is the horizontal position, the second percentage is the vertical position. 50% 50% is centered.

to change the parameter values, change the background and border colors on each rank div:
orange: #C96937; #924D24;
gray: #c2c2c2; #a8a8a8;

if your box title goes over the edge or has too much space after it, adjust the left margin in the following div, with the "box tab" id.

the ooc page contents are not made to scroll/all overflow content will be hidden. changing this will mess up the alignment of the name/class title at the top of the screen! do so at your own risk.

other than that, go nuts adding in extra boxes for the first 3 pages.

put it behind a cut or it'll probably break in your layout, unfortunately :(

please leave the credit line!

RESOURCES
class/passive skills | servant/active skills | fate/grand order servants | f/go card generator