yuff | Tokyo Xanadu CR Code (Small)

Awhile ago I made a Tokyo Xanadu CR Chart, and since I played the game recently- i decided to make another one that's more compact!

Live Preview

CODE:

<raw-code>

<center><div style="display: inline-block; width: 325px; background-image: url('https://i.imgur.com/MhG9JWG.png'); margin: 10px; border-radius: 7px; border: 1px solid rgba(48, 77, 107, 0.7); font-family: 'Trebuchet MS'; font-size: 11px; color: #fafafa;">
<div style="display: block; height: 15px; width: 325px; font-family: 'Trebuchet MS'; line-height: 15px; font-size: 14px; color: #a0ffff;">KEY</div>
🤍 - Neutral | 🖤 - Dislike | 💛 - Like<br/>
💖 - Love | 💔 - Complicated
</div></center>

<div style="display:block; width: 80%; margin: auto;"><center>

<div style="display: inline-block; height: 150px; width: 325px; background-image: url('https://i.imgur.com/MhG9JWG.png'); margin: 10px; border-radius: 7px; border: 1px solid rgba(48, 77, 107, 0.7);">

<div style="display: inline-block; height: 150px; width: 120px; float: left;">
<div style="display: block;"><img src="USERPIC-URL" style="border-radius: 50px; border: 1px solid #000; margin-left: 3px; margin-top: 7px;"></div>

<div style="display: block; padding-top: 7px;">EMOJIS HERE</div>

</div>

<div style="display: inline-block; height: 150px; width: 200px; float: right;">

<div style="height: 25px; width: 180px; display: block; margin: auto; margin-top: 5px; margin-right: 12px; 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: 16px; line-height: 25px; text-align: center; color: #fafafa; font-weight: bold;">Name Here</div>

<div style="display: inline-block; height: 100px; width: 200px; 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; margin-top: 5px; margin-right: 3px;">
<div style="display: block; height: 100px; width: 190px; padding: 2px 5px 2px 5px; font-family: 'Trebuchet MS'; text-align: left; font-size: 11px; color: #fafafa; overflow: auto; ">
Details here!
</div></div>

</div></div>

</center></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 Edition

NOTES

To make a new entry, C&P starting from "START ENTRY" to "END ENTRY".

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 >< ).

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!