8th: stage 2

[yanyan]

A friend requested a CR chart based on Devil Survivor 2's Fate System! UPDATE (10/4): Cleaned up the code and fixed the issues with the bottom half of the code. It should be more user-friendly now.


live preview

top portion <raw-code><center> <!--CHARACTER SCREEN START--> <table style="width: 640px; border-radius: 8px; -moz-border-radius: 8px;"> <tr> <!--LEFT COLUMN START--> <td style="width: 360px; background: #000; vertical-align: middle;"> <!--Start of header.--> <div style="width: 360px; font-weight: bold;"> <span style="font: 24px 'segoe ui', calibri, sans-serif; color: #f00080; text-transform: uppercase;">lorem</span> <span style="font: 36px 'segoe ui', calibri, sans-serif; color: #0078e0; text-transform: uppercase;">ipsum</span> </div> <!--End of header.--> <div style="width: 360px; background: #000; border: 1px solid #707070; border-radius: 8px; -moz-border-radius: 8px;"> <!--Name of the character here.--> <div style="width: 100%; background: #003058; border-radius: 8px 8px 0px 0px;"> <span style="font: 18px 'segoe ui', calibri, sans-serif; color: #fff; position: relative; left: 10px;">Lorem Ipsum</span></div> <!--Paragraph about the character here.--> <div style="padding: 8px; text-align: justify;"><span style="font: 12px 'segoe ui', calibri, sans-serif; color: #fff;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></div> </div> </td> <!--LEFT COLUMN END--> <!--RIGHT COLUMN START--> <td style="background:url(http://i.imgur.com/e1M2LoP.png);"> <!--Image here.--> <img src="IMAGE URL HERE" height="400"> </td> <!--RIGHT COLUMN END--> </tr> </table> <!--CHARACTER SCREEN END--> </center></raw-code>

bottom portion <raw-code><center> <!--RELATIONSHIPS SCREEN START--> <div style="width: 640px; background: #000; border: 1px solid #707070; padding: 8px 16px; border-radius: 8px;"> <!--CHARACTER START--> <div style="display: inline-block; width: 150px;"> <a href="LINK"><img src="ICON URL HERE" align="left" title="Text text text." style="margin-right: 5px; float: left;"></a> <div style="width: 40px; float: left;"> <div style="background: #00e0f0; height: 16px; border-bottom: 5px solid #000;"></div> <div style="background: #00a0e0; height: 16px; border-bottom: 5px solid #000;"></div> <div style="background: #00a0e0; height: 16px; border-bottom: 5px solid #000;"></div> <div style="background: #0078e0; height: 16px; border-bottom: 5px solid #000;"></div> <div style="background: #0078e0; height: 16px;"></div> </div> </div> <!--CHARACTER END--> </div> </center></raw-code>

additional characters <!--CHARACTER START--> <div style="display: inline-block; width: 150px;"> <a href="LINK"><img src="ICON URL HERE" align="left" title="Text text text." style="margin-right: 5px; float: left;"></a> <div style="width: 40px; float: left;"> <div style="background: #00e0f0; height: 16px; border-bottom: 5px solid #000;"></div> <div style="background: #00a0e0; height: 16px; border-bottom: 5px solid #000;"></div> <div style="background: #00a0e0; height: 16px; border-bottom: 5px solid #000;"></div> <div style="background: #0078e0; height: 16px; border-bottom: 5px solid #000;"></div> <div style="background: #0078e0; height: 16px;"></div> </div> </div> <!--CHARACTER END-->

NOTE
1. For the Fate System stages that haven't been maxed out (i.e. the rows of blue bars next to the icons), use #383838 for the cell's background color.
2. The black box for the bottom portion of the code does not automatically adjust, so you'll have to fix it manually! The code provides enough space for three rows. (height: 320px) Fixed this! Just copy and paste the code for additional characters and don't worry about a thing.
3. This code does not work in comments. Only in posts!
4. The image for the main character used in the preview is transparent! This is the background image:

Comments

[strongestoftheturks]

This is a very good CR chart! Thank you and I hope you don't mind if I use it. I'll definitely credit.