CODE: D&D-style Character Info Sheet

[chanterie]

click for full-size!
live preview here and here

someone on rpanons wanted a d&d character sheet code, and i wanted to exercise my meager coding skills so! this happened. there's two versions, one with an image and one without.

in the codes everything you have to input yourself is formatted !! LIKE THIS!! so you can find it easily. if you want to change the sans-serif font, just search for 'Playfair Display'. and if you don't want to use the spells section, you can delete it entirely without messing things up!

ALSO I JUST REALIZED that in the screenshots my emoji chrome extension messes up the checked boxes. they won't look like that if you don't have an extension!!

with image:
<cut><raw-code><div style="margin: auto; width: 90%;"> <span style="display: block; font: italic 2.3em 'Playfair Display', georgia, serif; background: #000; color: #fff; text-align: right; margin-bottom: .5em; padding: .25em; border-radius: 5px 15px;">CHARACTER NAME</span> <div style="display: table; width: 100%;"> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;">Druid 10, Barbarian 3</div> <div style="display: table-cell;">???</div> <div style="display: table-cell;"><a href="contact link here">Liam Oberon</a></div> </div> <div style="display: table-row; text-align: center; font: italic 11px 'Playfair Display', georgia;"> <div style="display: table-cell;">!! CLASS AND LEVEL !!</div> <div style="display: table-cell;">!! BACKGROUND !!</div> <div style="display: table-cell;"><a href="!! CONTACT LINK !!">!! PLAYER NAME !!</a></div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-top: 1em;"></div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;">!! RACE !!</div> <div style="display: table-cell;">!! ALIGNMENT !!</div> <div style="display: table-cell;">!! XP !!</div> </div> <div style="display: table-row; text-align: center; font: italic 11px 'Playfair Display', georgia;"> <div style="display: table-cell;">RACE</div> <div style="display: table-cell;">ALIGNMENT</div> <div style="display: table-cell;">EXPERIENCE POINTS</div> </div> </div> <div style="display: block; background: #000; height: 10px; margin: 1em 0em;border-radius: 5px 15px;"></div> <!-- begin column one --> <div style="width: 25%; display: inline-block; vertical-align: top;"> <img src="http://i.imgur.com/PYu3JHk.jpg" style="max-width: 100%;"> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">STATS</span> <div style="display: table; width: 100%;"> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;"><span style="font: italic 11px 'Playfair Display', georgia, serif;">STRENGTH</span></div> <div style="display: table-cell;">!! STRENGTH SCORE ( +MODIFIER )!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;"><span style="font: italic 11px 'Playfair Display', georgia, serif;">DEXTERITY</span></div> <div style="display: table-cell;">!!DEXTERITY SCORE ( +MODIFIER )!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;"><span style="font: italic 11px 'Playfair Display', georgia, serif;">CONSTITUTION</span></div> <div style="display: table-cell;">!!CONSTITUTION SCORE ( +MODIFIER )!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;"><span style="font: italic 11px 'Playfair Display', georgia, serif;">INTELLIGENCE</span></div> <div style="display: table-cell;">!!INTELLIGENCE SCORE ( +MODIFIER )!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;"><span style="font: italic 11px 'Playfair Display', georgia, serif;">WISDOM</span></div> <div style="display: table-cell;">!!WISDOM SCORE ( +MODIFIER )!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;"><span style="font: italic 11px 'Playfair Display', georgia, serif;">CHARISMA</span></div> <div style="display: table-cell;">!!CHARISMA SCORE ( +MODIFIER )!!</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-bottom: .5em;"></div> </div> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">bonuses/saving throws</span> <div style="display: table; width: 100%;"> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">PROFICIENCY</div> <div style="display: table-cell;">!! PROFICIENCY BONUS !!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">STRENGTH</div> <div style="display: table-cell;">!! STRENGTH SAVE + PROFICIENCY ☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">DEXTERITY</div> <div style="display: table-cell;">!! DEXTERITY SAVE + PROFICIENCY ☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">CONSTITUTION</div> <div style="display: table-cell;">!! CONSTITUTION SAVE + PROFICIENCY ☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">INTELLIGENCE</div> <div style="display: table-cell;">!! INTELLIGENCE SAVE + PROFICIENCY ☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">WISDOM</div> <div style="display: table-cell;">!!WISDOM SAVE + PROFICIENCY ☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">CHARISMA</div> <div style="display: table-cell;">!! CHARISMA SAVE + PROFICIENCY ☐/☑!!</div> </div> </div> <!-- end column one --> </div> <!-- begin column two --> <div style="width: 30%; display: inline-block; vertical-align: top; padding: 0em 1em;"> <div style="display: table; width: 100%;"> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;">!! AC !!</div> <div style="display: table-cell;">!! INITIATIVE !!</div> </div> <div style="display: table-row; text-align: center; font: italic 11px 'Playfair Display', georgia;"> <div style="display: table-cell;">ARMOR CLASS</div> <div style="display: table-cell;">INITIATIVE</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-top: 1em;"></div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;">!!MAX HP!!</div> <div style="display: table-cell;">!!HIT DICE!!</div> </div> <div style="display: table-row; text-align: center; font: italic 11px 'Playfair Display', georgia;"> <div style="display: table-cell;">MAX HIT POINTS</div> <div style="display: table-cell;">HIT DICE</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-bottom: .5em;"></div> </div> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">skills</span> <div style="display: table; width: 100%;"> <div style="display: table-row; text-align: center;"> <div style="display: table-cell; width:75%;"></div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell; font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">acrobatics</div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">animal handling</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">arcana</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">athletics</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">deception</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">history</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">insight</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">intimidation</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">investigation</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">medicine</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">nature</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">perception</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">performance</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">persuasion</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">religion</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">sleight of hand</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">stealth</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">survival</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">passive wisdom</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-bottom: .5em;"></div> </div> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">other proficiencies & languages</span> <div style="width: 100%; padding: 0em 1em;"> — !!LANGUAGE!! <br /> — !!OTHER PROFICIENCY!!<br /> — !!SEPARATE WITH BREAK TAGS!! <br /> </div> </div> <!-- begin column three --> <div style="width: 39%; display: inline-block; vertical-align: top;"> <div style="display: table; width: 100%"> <div style="display: table-row; text-align: center; font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;"> <div style="display: table-cell;">weapon</div> <div style="display: table-cell;">atk bonus</div> <div style="display: table-cell;">damage/type</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;">!! WEAPON TYPE !!</div> <div style="display: table-cell;">!! ATTACK BONUS !!</div> <div style="display: table-cell;">!! DAMAGE/TYPE !!</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-bottom: .5em;"></div> </div> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">features & traits</span> <div style="width: 100%; padding: 0em 1em;"> <p>— !! RAMBLINGS ABOUT FEATURES/TRAITS !!</p> <p>— !! MORE RAMBLINGS !!</p> <p>— !! EVEN MORE TEXT !!</p> <p>— !! IF YOU NEED MORE THAN FOUR BULLETS STICK THEM IN A P TAG !!</p> </div> </div> <div style="clear: both;"> </div> </div> <!-- begin spells --> <div style="margin: auto; width: 90%;"> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">SpellS</span><div style="display: table; width: 100%;"> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;">!! SPELL CASTING ABILITY !!</div> <div style="display: table-cell;">!! SPELL SAVE DC !!</div> <div style="display: table-cell;">!! SPELL ATTACK BONUS !!</div> </div> <div style="display: table-row; text-align: center; font: italic 11px 'Playfair Display', georgia; text-transform: uppercase;"> <div style="display: table-cell;">spell casting ability</div> <div style="display: table-cell;">spell save dc</div> <div style="display: table-cell;">spell attack bonus</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-bottom: .5em;"></div> </div> </div> <!-- begin column one --> <div style="width: 33.3%; display: inline-block; vertical-align: top;"> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">cantrips</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level one</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level two</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> </div> <!-- end column one --> <!-- begin column two --> <div style="width: 33.3%; display: inline-block; vertical-align: top;"> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level three</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level four</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level five</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> </div> <!-- end column two --> <!-- begin column three --> <div style="width: 31%; display: inline-block; vertical-align: top;"> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level six</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level seven</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level eight</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level nine</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> </div> <!-- end column three --> </div>

without image
<cut><raw-code><div style="margin: auto; width: 90%;"> <span style="display: block; font: italic 2.3em 'Playfair Display', georgia, serif; background: #000; color: #fff; text-align: right; margin-bottom: .5em; padding: .25em; border-radius: 5px 15px;"> !! CHARACTER NAME !!</span> <div style="display: table; width: 100%;"> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;">!! CLASS AND LEVEL !!</div> <div style="display: table-cell;">!! BACKGROUND !!</div> <div style="display: table-cell;"><a href="!! CONTACT LINK !!">!! PLAYER NAME !!</a></div> </div> <div style="display: table-row; text-align: center; font: italic 11px 'Playfair Display', georgia;"> <div style="display: table-cell;">CLASS & LEVEL</div> <div style="display: table-cell;">BACKGROUND</div> <div style="display: table-cell;">PLAYER</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-top: 1em;"></div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;">!! RACE !!</div> <div style="display: table-cell;">!! ALIGNMENT !!</div> <div style="display: table-cell;">!! XP !!</div> </div> <div style="display: table-row; text-align: center; font: italic 11px 'Playfair Display', georgia;"> <div style="display: table-cell;">RACE</div> <div style="display: table-cell;">ALIGNMENT</div> <div style="display: table-cell;">EXPERIENCE POINTS</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-bottom: 2em;"></div> </div> </div> <!-- begin column one --> <div style="width: 25%; display: inline-block; vertical-align: top;"> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">STATS</span> <div style="display: table; width: 100%;"> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;"><span style="font: italic 11px 'Playfair Display', georgia, serif;">STRENGTH</span></div> <div style="display: table-cell;">!! STRENGTH SCORE ( +MODIFIER )!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;"><span style="font: italic 11px 'Playfair Display', georgia, serif;">DEXTERITY</span></div> <div style="display: table-cell;">!!DEXTERITY SCORE ( +MODIFIER )!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;"><span style="font: italic 11px 'Playfair Display', georgia, serif;">CONSTITUTION</span></div> <div style="display: table-cell;">!!CONSTITUTION SCORE ( +MODIFIER )!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;"><span style="font: italic 11px 'Playfair Display', georgia, serif;">INTELLIGENCE</span></div> <div style="display: table-cell;">!!INTELLIGENCE SCORE ( +MODIFIER )!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;"><span style="font: italic 11px 'Playfair Display', georgia, serif;">WISDOM</span></div> <div style="display: table-cell;">!!WISDOM SCORE ( +MODIFIER )!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;"><span style="font: italic 11px 'Playfair Display', georgia, serif;">CHARISMA</span></div> <div style="display: table-cell;">!!CHARISMA SCORE ( +MODIFIER )!!</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-bottom: .5em;"></div> </div> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">bonuses/saving throws</span> <div style="display: table; width: 100%;"> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">PROFICIENCY</div> <div style="display: table-cell;">!! PROFICIENCY BONUS !!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">STRENGTH</div> <div style="display: table-cell;">!! STRENGTH SAVE + PROFICIENCY ☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">DEXTERITY</div> <div style="display: table-cell;">!! DEXTERITY SAVE + PROFICIENCY ☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">CONSTITUTION</div> <div style="display: table-cell;">!! CONSTITUTION SAVE + PROFICIENCY ☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">INTELLIGENCE</div> <div style="display: table-cell;">!! INTELLIGENCE SAVE + PROFICIENCY ☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">WISDOM</div> <div style="display: table-cell;">!!WISDOM SAVE + PROFICIENCY ☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">CHARISMA</div> <div style="display: table-cell;">!! CHARISMA SAVE + PROFICIENCY ☐/☑!!</div> <div style="display: table-row;"> <div style="display: table-cell; padding-bottom: .5em;"></div> </div> </div> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">vitality</span> <div style="display: table; width: 100%;"> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;">!! AC !!</div> <div style="display: table-cell;">!! INITIATIVE !!</div> </div> <div style="display: table-row; text-align: center; font: italic 11px 'Playfair Display', georgia;"> <div style="display: table-cell;">ARMOR CLASS</div> <div style="display: table-cell;">INITIATIVE</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-top: 1em;"></div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;">!!MAX HP!!</div> <div style="display: table-cell;">!!HIT DICE!!</div> </div> <div style="display: table-row; text-align: center; font: italic 11px 'Playfair Display', georgia;"> <div style="display: table-cell;">MAX HIT POINTS</div> <div style="display: table-cell;">HIT DICE</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-bottom: .5em;"></div> </div> </div> </div> <!-- end column one --> <!-- begin column two --> <div style="width: 30%; display: inline-block; vertical-align: top; padding: 0em 1em;"> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">skills</span> <div style="display: table; width: 100%;"> <div style="display: table-row; text-align: center;"> <div style="display: table-cell; width:75%;"></div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell; font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">acrobatics</div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">animal handling</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">arcana</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">athletics</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">deception</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">history</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">insight</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">intimidation</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">investigation</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">medicine</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">nature</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">perception</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">performance</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">persuasion</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">religion</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">sleight of hand</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">stealth</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">survival</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;">passive wisdom</span></div> <div style="display: table-cell;">!!MODIFIER + PROFICIENCY☐/☑!!</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-bottom: .5em;"></div> </div> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">other proficiencies & languages</span> <div style="width: 100%; padding: 0em 1em;"> — !!LANGUAGE!! <br /> — !!OTHER PROFICIENCY!!<br /> — !!SEPARATE WITH BREAK TAGS!! <br /> </div> </div> <!-- begin column three --> <div style="width: 39%; display: inline-block; vertical-align: top;"> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">weapons</span> <div style="display: table; width: 100%"> <div style="display: table-row; text-align: center; font: italic 11px 'Playfair Display', georgia, serif; text-transform: uppercase;"> <div style="display: table-cell;">weapon</div> <div style="display: table-cell;">atk bonus</div> <div style="display: table-cell;">damage/type</div> </div> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;">!! WEAPON TYPE !!</div> <div style="display: table-cell;">!! ATTACK BONUS !!</div> <div style="display: table-cell;">!! DAMAGE/TYPE !!</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-bottom: .5em;"></div> </div> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">features & traits</span> <div style="width: 100%; padding: 0em 1em;"> <p>— !! RAMBLINGS ABOUT FEATURES/TRAITS !!</p> <p>— !! MORE RAMBLINGS !!</p> <p>— !! EVEN MORE TEXT !!</p> <p>— !! IF YOU NEED MORE THAN FOUR BULLETS STICK THEM IN A P TAG !!</p> </div> </div> </div> <!-- begin spells --> <div style="margin: auto; width: 90%;"> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">SpellS</span><div style="display: table; width: 100%;"> <div style="display: table-row; text-align: center;"> <div style="display: table-cell;">!! SPELL CASTING ABILITY !!</div> <div style="display: table-cell;">!! SPELL SAVE DC !!</div> <div style="display: table-cell;">!! SPELL ATTACK BONUS !!</div> </div> <div style="display: table-row; text-align: center; font: italic 11px 'Playfair Display', georgia; text-transform: uppercase;"> <div style="display: table-cell;">spell casting ability</div> <div style="display: table-cell;">spell save dc</div> <div style="display: table-cell;">spell attack bonus</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-bottom: .5em;"></div> </div> </div> <!-- begin column one --> <div style="width: 33.3%; display: inline-block; vertical-align: top;"> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">cantrips</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level one</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level two</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> </div> <!-- end column one --> <!-- begin column two --> <div style="width: 33.3%; display: inline-block; vertical-align: top;"> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level three</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level four</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level five</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> </div> <!-- end column two --> <!-- begin column three --> <div style="width: 31%; display: inline-block; vertical-align: top;"> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level six</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level seven</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level eight</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> <span style="display: block; font: italic .9em 'Playfair Display', georgia, serif; text-align: center; text-transform: uppercase; margin: .5em 0em; padding: .3em; color: #fff; background: #000; border-radius: 5px 15px;">level nine</span> <div style="width: 100%; padding: 1em;"> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! SPELL NAME !!</a> <BR /> — <a href="!! LINK TO SPELL INFO!!">!! END EACH SPELL WITH A BREAK TAG !!</a> <BR /> </div> </div> <!-- end column three --> </div>

Comments

[shillelagh]

here a million years late myself-- you're very welcome! honestly I love how this code has evolved over the years. zero regrets on being the anon who asked for it in the first place, lol

also speaking of your tweaks- i love the space background on the name header? and the addition of the prepared spells section?? those are ingenious!

[hedoniste]

oh ty!!! i frankensteined the header bg from another code and i really appreciated overall how easy chanterie’s sheet was to tinker with — i only broke it a couple times lol.