yuff | Tokyo Xanadu CR Chart

Hey all! I was commissioned to do a Tokyo Xanadu-inspired CR chart, made to look like the character menu. The commissioner gave me the OK to share the code with the world at large, so here we are!

Live Preview

CODE:

<raw-code>
<div style="height: 475px; width: 800px; margin: auto; background-color: black; overflow: hidden;">

<div style="display: inline-block; float: left; width: 200px; height: 475px; background-image: linear-gradient(to right, #505050 , #676767); overflow: hidden;"><div style="display: block; width: 200px; height: 20px; background-image: linear-gradient(to right, #535353 , #202020);"></div>
<div style="display: block; width: 195px; height: 35px; background-image: linear-gradient(to right, #9b999a , #b1b1b1); font-family: 'Trebuchet MS'; text-align: right; line-height: 35px; font-size: 20px; color: #51555e; padding-right: 5px; letter-spacing: -1px;">Relationships</div>

<div style="display: block; margin-bottom: 3px; width: 200px; height: 35px; background-color: #161616; font-family: 'Trebuchet MS'; text-align: center; line-height: 35px; font-size: 20px;">
<a href="#LINK-NAME1" style="text-decoration: none; color: #fafafa;">Name</a></div>

				

<div style="display: block; margin-bottom: 3px; width: 200px; height: 35px; background-color: #161616; font-family: 'Trebuchet MS'; text-align: center; line-height: 35px; font-size: 20px;">
<a href="#LINK-NAME2" style="text-decoration: none; color: #fafafa;">Name</a></div>

				
</div></div>

<div><div style="display: inline-block; float: right; width: 595px; height: 475px; background-image: url('https://i.imgur.com/MhG9JWG.png'); overflow: hidden;">

<div style="width: 595px; height: 475px;">
<a name="LINK-NAME1"></a>
<div style="display: block; height: 20px; width: 595px;"></div>

<div style="height: 45px; width: 500px; display: block; margin: auto; background-image: linear-gradient(to right, rgba(0, 17, 33, 0.7), rgba(53, 64, 60, 0.7));  border: 1px solid rgba(48, 77, 107, 0.7); border-radius: 10px; font-family: 'Trebuchet MS'; font-size: 24px; line-height: 45px; text-align: center; color: #fafafa;">Character Name</div>

<div style="display: block; width: 500px; margin: auto; margin-top: 40px; height: 330px;">
<div style="display: inline-block; width: 210px; height: 330px;">
<div style="display: inline-block; width: 191px; height: 301px">
<img src="IMAGE-URL" style="border-radius: 10px; box-shadow: 1px 1px #001222; height: 300px; width: 190px;"></div>
<div style="display: inline-block; width: 101px; height: 101px; position: relative;  top: -80px; left: 120px;">
<img src="ICON-URL" style="border-radius: 50px; border: solid 1px #001222;"></div></div>

<div style="display: inline-block; height: 306px; width: 266px; float: right; border-radius: 10px; background-image: linear-gradient(to right, rgba(0, 17, 33, 0.7), rgba(53, 64, 60, 0.7)); border: 2px solid rgba(53, 215, 218, 0.8); overflow: hidden;">
<div style="display: block; height: 35px; width: 261px; font-family: 'Trebuchet MS'; text-align: left; line-height: 35px; font-size: 20px; padding-left: 5px; color: #a0ffff;">
<a href="https://USERNAME.dreamwidth.org" style="text-decoration: none; color: #a0ffff">Title</a></div>

<div style="display: block; height: 267px; width: 256px; padding: 2px 5px 2px 5px; font-family: 'Trebuchet MS'; text-align: left; font-size: 12px; color: #fafafa; overflow: auto;">
Description goes here! 
</div></div>

</div></div>

<div style="width: 595px; height: 475px;">
<a name="LINK-NAME2"></a>
<div style="display: block; height: 20px; width: 595px;"></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>

HTML Editor Friendly Version

NOTES

The big image should have a height of 300px and a width of 190px (190px x 300px)! The code will resize it automatically too.

The smaller image is fitted for icons.

To make a new entry, you want to C&P a new Name entry on the Nav bar, as well as C&P a new character entry page in the info area. Then you just make sure the link names match and are unique!

In the description box, you can make new paragraphs either by surrounding paragraphs with [p][/p] brackets, or using [br/] at the end of each paragraph to make a new line (Replace all the []'s with >< ).

The navigation bar will fit about 10 names before the scroll bar appears.

Here is the url to the background image used: https://i.imgur.com/MhG9JWG.png - I recommend saving it somewhere safe just in case this hosting stops working.

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

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