Profile Layout: “Star of Destiny”

[terra]

LVL 55

Hugo

400/400

ATK 298

PWR: 118

PDEF: ---

1. ◼︎◼︎◼︎◼︎◼︎◼︎◼︎

DEF 191

SKL: 168

MDEF: 118

2. ◼︎◼︎◼︎◼◼︎

REP 58

MGC: 118

SPD: 172

3. ◼︎◼︎︎

MOV 30

REP: 152

LUK: 152

4. ◼︎︎︎︎

Rank

Skill

Next

B+

Continual Attack

---

A

Heavy Damage

---

B+

Counter

---

B+

Parry

---

S

Repel

---

A

Swing

---

A

Fire Magic

---

B+

Wind Magic

---

Inventory

Head

Right

True Fire Rune

Left

Wind Rune

TRUE FIRE RUNE

Blazing Wall 400 Fire Damage / line of effect.

Explosion 700 DMG / area of effect.

Final Flame 1200 DMG / one enemy.

Hellfire 1500 DMG / 1 enemy + allies and enemies in area.

WIND RUNE

Wind of Sleep Inflicts Sleep (60%) / area of enemies.

Healing Wind Heals 300 HP + Cures all negative status / 1 ally.

The Shredding 250 Wind Damage / all enemies.

Funeral Wind 300 DMG + Inflicts Instant Death / 1 enemy.

Luft

Other

Lvl. 16   Atk. 180

Wizard hat

Premier Leather

Fire Magic Ring
Lion God Ring
Sandals

This is a super-extra profile code meant to resemble statistics layouts in Suikoden III. You can see other examples here and here. Stats obtained from suikosource and my own playthrough.

Because this is a complicated code I've decided to break it up into smaller sections so that it's easier to modify. If you copy + paste all the sections in order you should be good to go.

Wrapper

<raw-code> <div style="width: 100%; max-width: 640px; font: 1em/1.9 Open Sans, sans-serif; padding: 1em; margin: 1em auto; background: #fff;">

Stat Block

<!-- Begin Stat Block--><div style="display: table; width: 100%; max-width: 640px; box-sizing: border-box; margin: 1em auto; padding: 1em; border: 1px solid #eee; font: 1.1em Open Sans, sans-serif;"> <div style="display: table-row;"> <div style="display:table-cell; padding: .5em; background: #ad7963; color: #603a25;border-bottom: 1px solid #fff;"> <strong style="font-size: 1.1em; font-weight: 900; font-style: italic">LVL</strong> <!-- CHAR LEVEL--> 55 </div> <div style="display:table-cell;border-bottom: 1px solid #eee; padding: .5em; font-weight: bold;"> <!-- CHAR NAME-->Hugo </div> <div style="display:table-cell;border-bottom: 1px solid #eee; padding: .5em;"> </div> <div style="display:table-cell; border-bottom: 1px solid #eee;padding: .5em; text-align: right; "> <!-- HP-->400/400 </div> </div> <div style="display: table-row;"> <div style="display:table-cell; padding: .5em; background: #eee; border-bottom: 1px solid #fff;"> <strong style="font-size: 1.1em; font-weight: 900; font-style: italic">ATK</strong> <!-- ATK STAT-->298 </div> <div style="display:table-cell;border-bottom: 1px solid #eee; padding: .5em;"> <strong style="font: .9em Playfair Display, serif; text-transform: uppercase; letter-spacing: .05em;"><!-- PWR STAT-->PWR: 118</strong> </div> <div style="display:table-cell;border-bottom: 1px solid #eee;border-left: 1px solid #eee; padding: .5em;"> <strong style="font: .9em Playfair Display, serif; text-transform: uppercase; letter-spacing: .05em;">PDEF: </strong>--- </div> <div style="display:table-cell; border-left: 1px solid #eee;padding: .5em;"> <strong>1.</strong> <span style="color: #8cc3ac;"><!-- LVL 1 RUNE SLOT -->◼︎◼︎◼︎◼︎◼︎◼︎◼︎</span> </div> </div> <div style="display: table-row;"> <div style="display:table-cell; padding: .5em; background: #eee; border-bottom: 1px solid #fff;"> <strong style="font-size: 1.1em; font-weight: 900; font-style: italic">DEF</strong> <!-- DEF STAT-->191 </div> <div style="display:table-cell; border-bottom: 1px solid #eee; padding: .5em;"> <strong style="font: .9em Playfair Display, serif; text-transform: uppercase; letter-spacing: .05em;">SKL: <!-- SKL STAT-->168</strong> </div> <div style="display:table-cell;border-bottom: 1px solid #eee; border-left: 1px solid #eee;padding: .5em;"> <strong style="font: .9em Playfair Display, serif; text-transform: uppercase; letter-spacing: .05em; ">MDEF: <!-- MDEF STAT-->118</strong> </div> <div style="display:table-cell; border-left: 1px solid #eee; padding: .5em;"> <strong>2.</strong> <span style="color: #8cc3ac;"><!-- LVL 2 SPELL SLOT-->◼︎◼︎◼︎◼◼︎</span> </div> </div> <div style="display: table-row;"> <div style="display:table-cell; padding: .5em; background: #eee; border-bottom: 1px solid #fff;"> <strong style="font-size: 1.1em; font-weight: 900; font-style: italic">REP</strong> <!-- REP STAT-->58 </div> <div style="display:table-cell;border-bottom: 1px solid #eee; padding: .5em;"> <strong style="font: .9em Playfair Display, serif; text-transform: uppercase; letter-spacing: .05em;">MGC: 118</strong> </div> <div style="display:table-cell;border-bottom: 1px solid #eee;border-left: 1px solid #eee; padding: .5em;"> <strong style="font: .9em Playfair Display, serif; text-transform: uppercase; letter-spacing: .05em;">SPD: 172</strong> </div> <div style="display:table-cell; border-left: 1px solid #eee;padding: .5em;"> <strong>3.</strong> <span style="color: #8cc3ac;"><!-- LVL 3 SPELL SLOT-->◼︎◼︎︎</span> </div> </div> <div style="display: table-row;"> <div style="display:table-cell; padding: .5em; background: #eee; border-bottom: 1px solid #fff;"> <strong style="font-size: 1.1em; font-weight: 900; font-style: italic">MOV</strong> <!-- MOV STAT-->30 </div> <div style="display:table-cell; padding: .5em;"> <strong style="font: .9em Playfair Display, serif; text-transform: uppercase; letter-spacing: .05em;">REP: <!-- REPEL STAT-->152</strong> </div> <div style="display:table-cell; border-left: 1px solid #eee;padding: .5em;"> <strong style="font: .9em Playfair Display, serif; text-transform: uppercase; letter-spacing: .05em; ">LUK:<!-- LUCK STAT--> 152</strong> </div> <div style="display:table-cell; border-left: 1px solid #eee; padding: .5em;"> <strong>4.</strong> <span style="color: #8cc3ac;"><!-- LVL 4 SPELL SLOTS--> ◼︎︎</span>︎︎ </div> </div> </div>

Skills Block

<div style="display: table; width: 100%; box-sizing: border-box; max-width: 640px; margin: 1em auto; padding: 1em; border: 1px solid #eee; font: 1em Open Sans, sans-serif;"> <div style="display: table-row;"> <div style="display: table-cell;"></div> <div style="display: table-cell; text-align: center; font: .9em Playfair Display, serif; text-transform: uppercase; letter-spacing: .05em; padding: .5em;">Rank</div> <div style="display: table-cell;text-align: center; font: .9em Playfair Display, serif; text-transform: uppercase; letter-spacing: .05em;padding: .5em;">Skill</div> <div style="display: table-cell;text-align: center; font: .9em Playfair Display, serif; text-transform: uppercase; letter-spacing: .05em;padding: .5em;">Next</div> </div> <!-- Begin Fixed Skill Row --> <div style="display: table-row;"> <div style="display: table-cell; border-bottom: 1px solid #eee; width: 50px;"></div> <div style="display: table-cell; background: #eee; padding: .25em; font: bold 2em Playfair Display, serif; color: #508128; border-bottom: 1px solid #fff; border-left: 3px solid #fff; border-right: 3px solid #fff; text-align: center;"><!--- Skill Rank--> B+</div> <div style="display: table-cell;border-bottom: 1px solid #eee; padding: .5em; vertical-align: middle; font-size: 1.1em;"><!--- Skill Name-->Continual Attack</div> <div style="display: table-cell; padding: .5em; background: #eee; vertical-align: middle; border-left: 3px solid #fff; border-right: 3px solid #fff; border-bottom: 1px solid #fff;text-align: center;">---</div> </div> <!-- Begin Fixed Skill Row --> <div style="display: table-row;"> <div style="display: table-cell; border-bottom: 1px solid #eee; width: 50px;"></div> <div style="display: table-cell; background: #eee; padding: .25em; font: bold 2em Playfair Display, serif; color: #48791e; border-left: 3px solid #fff; border-right: 3px solid #fff; text-align: center; border-bottom: 1px solid #fff;"><!--- Skill Rank-->A</div> <div style="display: table-cell;border-bottom: 1px solid #eee; padding: .5em; font-size: 1.1em; vertical-align: middle;"><!--- Skill Name-->Heavy Damage</div> <div style="display: table-cell; padding: .5em; background: #eee; vertical-align: middle; border-left: 3px solid #fff; border-right: 3px solid #fff; border-bottom: 1px solid #fff;text-align: center;">---</div> </div> <!-- Begin Fixed Skill Row --> <div style="display: table-row;"> <div style="display: table-cell; border-bottom: 1px solid #eee; width: 50px;"></div> <div style="display: table-cell; background: #eee; padding: .25em; font: bold 2em Playfair Display, serif; color: #508128; border-bottom: 1px solid #fff; border-left: 3px solid #fff; border-right: 3px solid #fff; text-align: center;"><!--- Skill Rank--> B+</div> <div style="display: table-cell;border-bottom: 1px solid #eee; padding: .5em; vertical-align: middle; font-size: 1.1em;"><!--- Skill Name-->Counter</div> <div style="display: table-cell; padding: .5em; background: #eee; vertical-align: middle; border-left: 3px solid #fff; border-right: 3px solid #fff; border-bottom: 1px solid #fff;text-align: center;">---</div> </div> <!-- Begin Fixed Skill Row --> <div style="display: table-row;"> <div style="display: table-cell; border-bottom: 1px solid #eee; width: 50px;"></div> <div style="display: table-cell; background: #eee; padding: .25em; font: bold 2em Playfair Display, serif; color: #508128; border-bottom: 1px solid #fff; border-left: 3px solid #fff; border-right: 3px solid #fff; text-align: center;"><!--- Skill Rank--> B+</div> <div style="display: table-cell;border-bottom: 1px solid #eee; padding: .5em; vertical-align: middle; font-size: 1.1em;"><!--- Skill Name-->Parry</div> <div style="display: table-cell; padding: .5em; background: #eee; vertical-align: middle; border-left: 3px solid #fff; border-right: 3px solid #fff; border-bottom: 1px solid #fff;text-align: center;">---</div> </div> <!-- Begin Unfixed Skill Row --><div style="display: table-row;"> <div style="display: table-cell; border-bottom: 1px solid #fff; background:url(https://valiantknife.org/dwidth/latkje/diagonal.png); width: 50px;"></div> <div style="display: table-cell; background: #eee; padding: .25em; font: bold 2em Playfair Display, serif; color: #be650b; border-left: 3px solid #fff; border-right: 3px solid #fff; text-align: center; border-bottom: 1px solid #fff;"><!--- Skill Rank-->S</div> <div style="display: table-cell;border-bottom: 1px solid #eee; padding: .5em; vertical-align: middle;font-size: 1.1em;"><!--- Skill Name-->Repel</div> <div style="display: table-cell; padding: .5em; background: #eee; vertical-align: middle; border-left: 3px solid #fff; border-right: 3px solid #fff; border-bottom: 1px solid #fff;text-align: center;">---</div> </div> <!-- Begin Unfixed Skill Row --> <div style="display: table-row;"> <div style="display: table-cell; border-bottom: 1px solid #fff; background:url(https://valiantknife.org/dwidth/latkje/diagonal.png); width: 50px;"></div> <div style="display: table-cell; background: #eee; padding: .25em; font: bold 2em Playfair Display, serif; color: #48791e; border-left: 3px solid #fff; border-right: 3px solid #fff; text-align: center; border-bottom: 1px solid #fff;">A</div> <div style="display: table-cell;border-bottom: 1px solid #eee; padding: .5em; font-size: 1.1em; vertical-align: middle;">Swing</div> <div style="display: table-cell; padding: .5em; background: #eee; vertical-align: middle; border-left: 3px solid #fff; border-right: 3px solid #fff; border-bottom: 1px solid #fff;text-align: center;">---</div> </div> <!-- Begin Unfixed Skill Row --><div style="display: table-row;"> <div style="display: table-cell; border-bottom: 1px solid #fff; background:url(https://valiantknife.org/dwidth/latkje/diagonal.png); width: 50px;"></div> <div style="display: table-cell; background: #eee; padding: .25em; font: bold 2em Playfair Display, serif; color: #48791e; border-left: 3px solid #fff; border-right: 3px solid #fff; text-align: center; border-bottom: 1px solid #fff;"><!--- Skill Rank-->A</div> <div style="display: table-cell;border-bottom: 1px solid #eee; padding: .5em; font-size: 1.1em;vertical-align: middle;"><!--- Skill Name-->Fire Magic</div> <div style="display: table-cell; padding: .5em; background: #eee; vertical-align: middle; border-left: 3px solid #fff; border-right: 3px solid #fff; border-bottom: 1px solid #fff;text-align: center;">---</div> </div> <!-- Begin Unfixed Skill Row --><div style="display: table-row;"> <div style="display: table-cell; border-bottom: 1px solid #fff; background:url(https://valiantknife.org/dwidth/latkje/diagonal.png); width: 50px;"></div> <div style="display: table-cell; background: #eee; padding: .25em; font: bold 2em Playfair Display, serif; color: #508128; border-left: 3px solid #fff; border-right: 3px solid #fff; text-align: center; border-bottom: 1px solid #fff;"><!--- Skill Rank-->B+</div> <div style="display: table-cell;border-bottom: 1px solid #eee; padding: .5em; vertical-align: middle; font-size: 1.1em;"><!--- Skill Name-->Wind Magic</div> <div style="display: table-cell; padding: .5em; background: #eee; vertical-align: middle; border-left: 3px solid #fff; border-right: 3px solid #fff; border-bottom: 1px solid #fff;text-align: center;">---</div> </div> </div>

Inventory Block

<span style="display: block; font-family: Playfair Display, Times New Roman, serif; letter-spacing: .05em; padding-bottom: .5em; text-transform: uppercase; font-size: 1.6em; border-bottom: 1px solid #eee; margin: 1em 0 ; font-style">Inventory</span> <div style="display: flex; flex-flow: row wrap;"> <div style="max-width: 315px; box-sizing: border-box; margin-bottom: 1em; margin-right:8px;"> <div style="display:table; width: 100%; box-sizing: border-box; border: 1px double #eee; padding: 1em; font: 1em Open Sans, sans-serif;"> <div style="display: table-row"> <div style="display: table-cell; padding: .25em;"><img src="https://valiantknife.org/dwidth/latkje/rune.png"/></div> <div style="display:table-cell; font: italic 1.2em Playfair Display, Times New Roman, serif; letter-spacing: .05em; padding: .25em;">Head</div> <div style="display: table-cell; padding: .25em; border-bottom: 1px solid #eee;"></div> </div> <div style="display: table-row"> <div style="display: table-cell"></div> <div style="display:table-cell; font: italic 1.2em Playfair Display, Times New Roman, serif; letter-spacing: .05em; padding: .25em;">Right</div> <div style="display: table-cell; padding: .25em; border-bottom: 1px solid #eee;"> <!-- Right Rune Slot --> True Fire Rune</div> </div> <div style="display: table-row"> <div style="display: table-cell"></div> <div style="display:table-cell; font: italic 1.2em Playfair Display, Times New Roman, serif; letter-spacing: .05em; padding: .25em;">Left</div> <div style="display: table-cell; padding: .25em; border-bottom: 1px solid #eee;"> <!-- Left Rune Slot -->Wind Rune</div> </div> </div> <!-- Begin Rune Block --><div style="border:1px solid #eee; padding: 0 1em 1em 1em; margin: 1em 0;"><span style="font: bold 1.1em Open Sans, sans-serif; letter-spacing: .05em; display: block; margin: 1em 0;"><!-- Rune Image --><img src="http://valiantknife.org/dwidth/latkje/sfire.gif" style="float: left; margin-right: .5em;" /> <!-- Rune Name -->TRUE FIRE RUNE</span> <p style="border-bottom: 1px solid #eee;"><em style="font: italic 1em Playfair Display, serif; letter-spacing: .05em; display: block; margin: .5em 0;">Blazing Wall</em> 400 Fire Damage / line of effect.</p> <p style="border-bottom: 1px solid #eee;"><em style="font: italic 1em Playfair Display, serif; letter-spacing: .05em; display: block; margin: .5em 0;">Explosion</em> 700 DMG / area of effect.</p> <p style="border-bottom: 1px solid #eee;"><em style="font: italic 1em Playfair Display, serif; letter-spacing: .05em; display: block; margin: .5em 0;">Final Flame</em> 1200 DMG / one enemy.</p> <p><em style="font: italic 1em Playfair Display, serif; letter-spacing: .05em; display: block; margin: .5em 0;">Hellfire</em> 1500 DMG / 1 enemy + allies and enemies in area.</p> </div><!-- End Rune Block --> <!-- Begin Rune Block --><div style="border:1px solid #eee; padding: 0 1em 1em 1em;"><span style="font: bold 1.1em Open Sans, sans-serif; letter-spacing: .05em; display: block; margin: 1em 0;"><!-- Rune Image --><img src="https://valiantknife.org/dwidth/latkje/swind.gif" style="float: left; margin-right: .5em;" /> <!-- Rune name -->WIND RUNE</span> <p style="border-bottom: 1px solid #eee;"><em style="font: italic 1em Playfair Display, serif; letter-spacing: .05em; display: block; margin: .5em 0;">Wind of Sleep</em> Inflicts Sleep (60%) / area of enemies.</p> <p style="border-bottom: 1px solid #eee;"><em style="font: italic 1em Playfair Display, serif; letter-spacing: .05em; display: block; margin: .5em 0;">Healing Wind</em> Heals 300 HP + Cures all negative status / 1 ally.</p> <p style="border-bottom: 1px solid #eee;"><em style="font: italic 1em Playfair Display, serif; letter-spacing: .05em; display: block; margin: .5em 0;">The Shredding</em> 250 Wind Damage / all enemies.</p> <p><em style="font: italic 1em Playfair Display, serif; letter-spacing: .05em; display: block; margin: .5em 0;">Funeral Wind</em> 300 DMG + Inflicts Instant Death / 1 enemy.</p> </div><!-- End Rune Block --> </div> <div style="max-width: 315px; box-sizing: border-box; width: 50%;"> <!-- Begin Weapon Block --> <div style="border: 1px double #eee; margin-bottom: 1em;"> <div style="display:table; margin-bottom: 1em; width: 100%; box-sizing: border-box; padding: 1em; font: 1em Open Sans, sans-serif;"> <div style="display: table-row"> <div style="display: table-cell; padding: .25em;"><img src="https://valiantknife.org/dwidth/latkje/weapon.png"/></div> <div style="display:table-cell; background: #eee; font: italic 1.2em Playfair Display, Times New Roman, serif; letter-spacing: .05em; vertical-align: middle; Weapon: .25em;"><!-- Weapon name -->Luft</div> </div> <div style="display: table-row"> <div style="display: table-cell"><!-- Weapon Type -->Other </div> <div style="display:table-cell; padding: .25em;"><em style="font: .9em Playfair Display, serif; text-transform: uppercase; letter-spacing: .05em;">Lvl.</em> <!-- Weapon Level -->16   <em style="font: .9em Playfair Display, serif; text-transform: uppercase; letter-spacing: .05em;">Atk.</em> <!-- Weapon Attack -->180</div> </div> </div> </div> <!-- End Weapon Block --> <div style="display:table; width: 100%; box-sizing: border-box; border: 1px double #eee; padding: 1em; font: 1em Open Sans, sans-serif;"> <div style="display: table-row"> <div style="display: table-cell; padding: .25em;"> <img src="https://valiantknife.org/dwidth/latkje/helm.png"/></div> <div style="display:table-cell; border-bottom: 1px solid #eee; padding: .25em; vertical-align: middle;"> <img src="https://valiantknife.org/dwidth/latkje/helmet.png" alt="" /> <!-- Helmet Name -->Wizard hat </div> </div> <div style="display: table-row"> <div style="display: table-cell; padding: .25em;"> <img src="https://valiantknife.org/dwidth/latkje/armor.png"/></div> <div style="display:table-cell; border-bottom: 1px solid #eee; padding: .25em; vertical-align: middle;"> <img src="https://valiantknife.org/dwidth/latkje/chainmail.png" alt="" /> <!-- Armor Name -->Premier Leather</div> </div> <div style="display: table-row"> <div style="display: table-cell; padding: .25em; "><img src="http://valiantknife.org/dwidth/latkje/shield.png"/></div> <div style="display:table-cell; border-bottom: 1px solid #eee; padding: .25em; vertical-align: middle;"></div> </div> <div style="display: table-row"> <div style="display: table-cell; padding: .25em;"><img src="http://valiantknife.org/dwidth/latkje/items.png"/></div> <div style="display:table-cell; border-bottom: 1px solid #eee; padding: .25em; vertical-align: middle;"> <!-- Accessory --><img src="https://valiantknife.org/dwidth/latkje/ring.png" /> Fire Magic Ring<br/> <!-- Accessory --><img src="https://valiantknife.org/dwidth/latkje/ring.png" /> Lion God Ring<br/> <!-- Accessory --><img src="https://valiantknife.org/dwidth/latkje/boots.png" /> Sandals</div> </div> </div> </div> </div>

End Wrapper

</div> </raw-code>

Comments

[halfcactus]

Hi, just dropping by to say that I'm glad you're still active and creating stuff! I adore both your LJ/DW icons and your domain. Everything you do always looks so clean and cool!