yuff | Zesty Inventory Code

Skip to Main Content

Entry tags:

Zesty Inventory Code

Hi Everyone! Today I'm bringing you a nifty character sheet and inventory code, based on the menu interface of Tales of Zestiria!

Name

weapons

armor

accessories

items

food

BASICS.

NAME.	Name
NICKNAME.	Nickname
AGE.	XX
OCCUPATION.	Job
ORIENTATION.	Whatever
DATING STATUS.	Status
HEIGHT.	5'9"
BUILD.	Build
HAIR.	Brown and spiked
EYES.	Bright green
PLAYER.	Name
JOURNAL.	Journal
TIME ZONE.	Time Zone

PERSONALITY.
Enter Personality here!

sorey

weapons

WEAPONS.

Excalibur

Sword

"Fool! My legend dates back to the 12th Century you see. My legend is quite old. The 12th Century was a long time ago."

Link

armor

ARMOR.

Excalibur

Sword

"Fool! My legend dates back to the 12th Century you see. My legend is quite old. The 12th Century was a long time ago."

Link

accessory

ACCESSORIES.

Excalibur

Sword

"Fool! My legend dates back to the 12th Century you see. My legend is quite old. The 12th Century was a long time ago."

Link

misc

MISCELLANEOUS ITEMS.

Excalibur

Sword

"Fool! My legend dates back to the 12th Century you see. My legend is quite old. The 12th Century was a long time ago."

Link

food

FOOD.

Excalibur

Sword

"Fool! My legend dates back to the 12th Century you see. My legend is quite old. The 12th Century was a long time ago."

Link

Code by Yuff

CODE:

<cut><raw-code>
<div style="display: block; margin: auto; width: 650px; height: 465px;">
  

<div style="height: 75px; display: block; width: 650px;">
<div style="width: 350px; height: 70px; display: inline-block; background: url(http://i.imgur.com/LH5iMpz.png) no-repeat; color: #fffaeb; font-size: 300%; text-align: center; font-weight: bold; font-family: 'Book Antiqua', Palatino, serif; padding-top: 7px;"><a href="#main" style="color: #fffaeb; text-decoration: none;">Name</a></div>
    
<div style="display: inline-block; float: right; padding-top: 20px;">
<a href="#weapons"><img src="http://i.imgur.com/60s7msy.png" alt="weapons" style="border: 1px solid #201302; border-radius: 50px;"></a>
<a href="#armor"><img src="http://i.imgur.com/iv639zG.png" alt="armor" style="border: 1px solid #201302; border-radius: 50px;"></a>
<a href="#accessories"><img src="http://i.imgur.com/Nakfyt1.png" alt="accessories" style="border: 1px solid #201302; border-radius: 50px;"></a>
<a href="#misc"><img src="http://i.imgur.com/xzc6hkc.png" alt="items" style="border: 1px solid #201302; border-radius: 50px;"></a>
<a href="#food"><img src="http://i.imgur.com/3rKRbur.png" alt="food" style="margin-right: 10px; border: 1px solid #201302; border-radius: 50px;"></a></div></div>

<div style="display: flex; width: 640px; height: 390px; margin: auto; background: url(http://i.imgur.com/UnqGODx.png); justify-content: center; align-items: center; overflow: hidden;"><div style=" margin: auto; width: 560px; height: 320px; overflow: hidden;">
      

<div style="width: 560px; height: 320px; overflow: hidden;">
<a name="main"></a>

<div style="display: inline-block; width: 330px; height: 320px; overflow: auto; color: #ddd8c5; font-family: 'Book Antiqua', Palatino, serif; font-size: 105%; padding-right: 5px;"><span style="border-bottom: 1px solid #ddd8c5; font-size: 130%; font-weight: bold;">BASICS.</span>

<table style="margin: auto; text-align: left;">
<tr><td>NAME.</td><td>Name</td></tr>
<tr><td>NICKNAME.</td><td>Nickname</td></tr>
<tr><td>AGE.</td><td>XX</td></tr>
<tr><td>OCCUPATION.</td><td>Job</td></tr>
<tr><td>ORIENTATION.</td><td>Whatever</td></tr>
<tr><td>DATING STATUS.</td><td>Status</td></tr>
<tr><td>HEIGHT.</td><td>X'X"</td></tr>
<tr><td>BUILD.</td><td>Build</td></tr>
<tr><td>HAIR.</td><td>Hair</td></tr>
<tr><td>EYES.</td><td>Eyes</td></tr>
<tr><td>PLAYER.</td><td>Name</td></tr>
<tr><td>JOURNAL.</td><td>Journal</td></tr>
<tr><td>TIME ZONE.</td><td>Time Zone</td></tr>
</table>
<br/>

<span style="border-bottom: 1px solid #ddd8c5; font-size: 130%; font-weight: bold;">PERSONALITY.</span><br/>
Enter Personality here!
</div>

<div style="width: 225px; height: 320px; float: right; display: inline-block; overflow: hidden;"><img src="IMAGEURL" alt="name"></div>

</div>

      

<div style="width: 560px; height: 320px; overflow: hidden; overflow: hidden;">
<a name="weapons"></a>
<div style="height: 50px;"><img src="http://i.imgur.com/FDJySYQ.png" alt="weapons"> <span style="border-bottom: 1px solid #fffaeb; font-size: 200%; font-weight: bold; color: #fffaeb; font-family: 'Book Antiqua', Palatino, serif; padding-right: 5px;">WEAPONS.</span></div>

<div style="display: block; overflow: auto; height: 270px;">

<div style="display: block; margin-top: 10px; margin-bottom: 10px;">

<div style="display: block; color: #ddd8c5; font-family: 'Book Antiqua', Palatino, serif;"><div style="display: inline-block; width: 40%; padding: 5px; font-weight: bold; vertical-align: top; padding-top: 1.5%; font-size: 140%;">
Item Name
</div><div style="display: inline-block; padding-top: 3%; padding-right: 3%; font-size: 110%; float: right;">
Item Type
</div></div>

          

<div style="display: block; padding: 5px; padding-left: 10px; color: #ddd8c5; font-family: 'Book Antiqua', Palatino, serif; font-size: 105%;">
Enter Item Information here! There's no limit how long this could be. 
</div>

<div style="display: block; text-align: right; padding-right: 3%;"><a href="ITEM-URL" style="text-decoration: none; color: #ddd8c5; font-family: 'Book Antiqua', Palatino, serif;" target="_blank">Link</a></div></div>

</div></div>

<div style="width: 560px; height: 320px; overflow: hidden; overflow: hidden;">
<a name="armor"></a>
<div style="height: 50px;"><img src="http://i.imgur.com/yx8sKpA.png" alt="armor"> <span style="border-bottom: 1px solid #fffaeb; font-size: 200%; font-weight: bold; color: #fffaeb; font-family: 'Book Antiqua', Palatino, serif; padding-right: 5px;">ARMOR.</span></div>

<div style="display: block; overflow: auto; height: 270px;">

<div style="display: block; margin-top: 10px; margin-bottom: 10px;">

<div style="display: block; color: #ddd8c5; font-family: 'Book Antiqua', Palatino, serif;"><div style="display: inline-block; width: 40%; padding: 5px; font-weight: bold; vertical-align: top; padding-top: 1.5%; font-size: 140%;">
Item Name
</div><div style="display: inline-block; padding-top: 3%; padding-right: 3%; font-size: 110%; float: right;">
Item Type
</div></div>

          

<div style="display: block; padding: 5px; padding-left: 10px; color: #ddd8c5; font-family: 'Book Antiqua', Palatino, serif; font-size: 105%;">
Enter Item Information here! There's no limit how long this could be. 
</div>

<div style="display: block; text-align: right; padding-right: 3%;"><a href="ITEM-URL" style="text-decoration: none; color: #ddd8c5; font-family: 'Book Antiqua', Palatino, serif;" target="_blank">Link</a></div></div>

</div></div>

<div style="width: 560px; height: 320px; overflow: hidden; overflow: hidden;">
<a name="accessories"></a>
<div style="height: 50px;"><img src="http://i.imgur.com/UCZkABS.png" alt="accessory"> <span style="border-bottom: 1px solid #fffaeb; font-size: 200%; font-weight: bold; color: #fffaeb; font-family: 'Book Antiqua', Palatino, serif; padding-right: 5px;">ACCESSORIES.</span></div>
        
<div style="display: block; overflow: auto; height: 270px;">

<div style="display: block; margin-top: 10px; margin-bottom: 10px;">

<div style="display: block; color: #ddd8c5; font-family: 'Book Antiqua', Palatino, serif;"><div style="display: inline-block; width: 40%; padding: 5px; font-weight: bold; vertical-align: top; padding-top: 1.5%; font-size: 140%;">
Item Name
</div><div style="display: inline-block; padding-top: 3%; padding-right: 3%; font-size: 110%; float: right;">
Item Type
</div></div>

          

<div style="display: block; padding: 5px; padding-left: 10px; color: #ddd8c5; font-family: 'Book Antiqua', Palatino, serif; font-size: 105%;">
Enter Item Information here! There's no limit how long this could be. 
</div>

<div style="display: block; text-align: right; padding-right: 3%;"><a href="ITEM-URL" style="text-decoration: none; color: #ddd8c5; font-family: 'Book Antiqua', Palatino, serif;" target="_blank">Link</a></div></div>

</div></div>

<div style="width: 560px; height: 320px; overflow: hidden; overflow: hidden;">
<a name="misc"></a>
<div style="height: 50px;"><img src="http://i.imgur.com/gKRDY0f.png" alt="misc"> <span style="border-bottom: 1px solid #fffaeb; font-size: 200%; font-weight: bold; color: #fffaeb; font-family: 'Book Antiqua', Palatino, serif; padding-right: 5px;">MISCELLANEOUS ITEMS.</span></div>
        
<div style="display: block; overflow: auto; height: 270px;">

<div style="display: block; margin-top: 10px; margin-bottom: 10px;">

<div style="display: block; color: #ddd8c5; font-family: 'Book Antiqua', Palatino, serif;"><div style="display: inline-block; width: 40%; padding: 5px; font-weight: bold; vertical-align: top; padding-top: 1.5%; font-size: 140%;">
Item Name
</div><div style="display: inline-block; padding-top: 3%; padding-right: 3%; font-size: 110%; float: right;">
Item Type
</div></div>

          

<div style="display: block; padding: 5px; padding-left: 10px; color: #ddd8c5; font-family: 'Book Antiqua', Palatino, serif; font-size: 105%;">
Enter Item Information here! There's no limit how long this could be. 
</div>

<div style="display: block; text-align: right; padding-right: 3%;"><a href="ITEM-URL" style="text-decoration: none; color: #ddd8c5; font-family: 'Book Antiqua', Palatino, serif;" target="_blank">Link</a></div></div>

</div></div>

<div style="width: 560px; height: 320px; overflow: hidden; overflow: hidden;">
<a name="food"></a>
<div style="height: 50px;"><img src="http://i.imgur.com/HFumRQh.png" alt="food"> <span style="border-bottom: 1px solid #fffaeb; font-size: 200%; font-weight: bold; color: #fffaeb; font-family: 'Book Antiqua', Palatino, serif; padding-right: 5px;">FOOD.</span></div>
        
<div style="display: block; overflow: auto; height: 270px;">

<div style="display: block; margin-top: 10px; margin-bottom: 10px;">

<div style="display: block; color: #ddd8c5; font-family: 'Book Antiqua', Palatino, serif;"><div style="display: inline-block; width: 40%; padding: 5px; font-weight: bold; vertical-align: top; padding-top: 1.5%; font-size: 140%;">
Item Name
</div><div style="display: inline-block; padding-top: 3%; padding-right: 3%; font-size: 110%; float: right;">
Item Type
</div></div>

          

<div style="display: block; padding: 5px; padding-left: 10px; color: #ddd8c5; font-family: 'Book Antiqua', Palatino, serif; font-size: 105%;">
Enter Item Information here! There's no limit how long this could be. 
</div>

<div style="display: block; text-align: right; padding-right: 3%;"><a href="ITEM-URL" style="text-decoration: none; color: #ddd8c5; font-family: 'Book Antiqua', Palatino, serif;" target="_blank">Link</a></div></div>

</div></div>

</div></div>

</div>
<div style="display: block; clear: both; height: 10px; text-align: center; font-variant: small-caps; padding: 5px;">Code by <a href="http://yuff.dreamwidth.org">Yuff</a></div>
</raw-code>
</cut>

NOTES

This is based roughly off the menu interface of Tales of Zestiria. All artwork was made by Namco Bandai.

Clicking the icon buttons will get you to different inventory pages. If you want to get back to the main bio page, click on the character's name at the top.

For the bio image, dimensions are ideally a width of 225px and height of 320px, it can be rather finnicky about this as well, so be careful!

To add more items to your inventory, just C&P the "Time" code from START ITEM to END ITEM.

Modifications are totally fine. I'd love to see what you did with it though!

Comments are nice but not necessary. However, please leave the credit line on!

Flat | Top-Level Comments Only

I love this code so much and wanted to thank you for making it. I had a fun nightmare re-arranging and re-tooling bits of it but I am happy with how it turned out and wanted to share.

Oh wow, that looks absolutely fantastic!! I love it! I'm so glad you enjoyed the code, this made my day.

Flat | Top-Level Comments Only