pixle_squared | Persona 2 - Themed Inspired CR Chart

PREVIEW

This CR Chart spans 850px in width and while Persona 2 had no CR Links, I'm using the ones from Persona 3&4)
INSTRUCTIONS
♠ Copy the code as much as needed
♠ MAKE SURE YOU EDIT IN HTML MODE AND CLICK DISABLE AUTO-FORMATTING!
♠ Get your Persona Card images from this album I made: RIGHT HERE.
♠ If you need them: EMPTY RANK BAR | FULL RANK BAR | BROKEN RANK BAR
♠ If you use the CR chart, I would like if you please keep the credit at the end. I coded it from scratch + got the cards for you to use so all I ask is credit. Thank you! ♥

TOP AREA (Copy just once for top)

<center>
<table style="width:850px;  border:4px solid #5c5a60; margin-top: 10px; margin-bottom: -4px; background-color: #000; height:25px; vertical-align:bottom;;"> <tr> <td><div style="font-family: Arial Black, Gadget, sans-serif; color: #d81010; font-size: 38pt; text-align: right; font-weight:bold; margin-bottom: -20px; letter-spacing: -4px; position:relative; text-shadow: 0 0 0.2em #7e0000;"><B>SOCIAL LINKS</B></div></td></tr></table>
<table style="width:850px;  border-right:4px solid #5c5a60;  border-left:4px solid #5c5a60; margin-bottom: -4px; background-color: #d81010; height:5px; vertical-align:bottom;;"> <tr> <td><div style="font-family: Arial Black, Gadget, sans-serif; color: #000; font-size: 10pt; text-align: right; font-weight:bold; margin-top: -6px; letter-spacing: 8px; position:relative; text-shadow: 0 0 0.2em #7e0000;"><B>YOU'LL ALWAYS BE REMEMBERED</B></div></td></tr></table>
<table style="width: 850px; border-right:4px solid #5c5a60;  border-left:4px solid #5c5a60; background-color: #0b8cf2; background-image: url(http://i.imgur.com/hKwiR.png); vertical-align: middle; margin-bottom: -8px;">

CENTRAL AREA (NORMAL LINK) (Recopy for each character you add)

<tr> <td valign="top" style="width:100px;"> <center> <img src="ICON_IMAGE_GOES_HERE" style="width:100px; height:100px; border: 5px solid #000; margin-top: 10px; margin-left: 10px; -moz-border-radius: 60px; -webkit-border-radius: 60px;"><BR><img src="ARCANA_IMAGE_GOES_HERE" width="63" height="90" style="border: 4px solid #000; -moz-border-radius: 10px; -webkit-border-radius: 10px; margin-top: 10px; margin-left: 10px;"></td>
    <td style="vertical-align:top; width:100%;">  <table style="width:94%; margin-top: 10px; background-color: #000; height:25px;  vertical-align:top; -moz-border-radius: 10px; -webkit-border-radius: 10px;  margin-left:3%; margin-right:3%;"> <tr> <td> <div style="font-family: Arial Black, Gadget, sans-serif; color: #fff; font-size: 30pt; text-align: left; font-weight:bold; margin-bottom: -18px; letter-spacing: -3px; position:relative; text-shadow: 0 0 0.2em #b20000;"><B>★ CHARACTERS_NAME_GOES_HERE</B></div>
    </td></tr></table>
    
     <table style="width:94%; min-height:400px; margin-top: 5px; background-color: #000; vertical-align:top; margin-left:3%; margin-right:3%;"> <tr> <td>  <p style="color: #fff; font-size: 14pt; font-family:Verdana, Geneva, sans-serif;  text-align: center; letter-spacing: -1px; "><b>ARCANA<br>
     
               <SMALL>RANK: </SMALL></b> <img src="http://i.imgur.com/C9KX7.png"> <img src="http://i.imgur.com/C9KX7.png"> <img src="http://i.imgur.com/C9KX7.png"> <img src="http://i.imgur.com/C9KX7.png"> <img src="http://i.imgur.com/C9KX7.png"> <img src="http://i.imgur.com/C9KX7.png"> <img src="http://i.imgur.com/C9KX7.png"> <img src="http://i.imgur.com/C9KX7.png"> <img src="http://i.imgur.com/C9KX7.png"> <img src="http://i.imgur.com/C9KX7.png"></p>
      
          <p style="color: #fff; font-size: 13px; text-align: justify; margin-left: 5px; margin-top: 10px; margin-right: 5px; font-family: Arial, Gadget, sans-serif; line-height: 15px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vehicula tempor dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque lorem neque, facilisis non posuere nec, porttitor vel nisl. Quisque neque massa, scelerisque eu pharetra quis, suscipit a lorem. Nam tincidunt, arcu molestie luctus condimentum, libero mi posuere mi, in scelerisque diam enim ac tellus. Vestibulum gravida cursus lacinia. Proin a est ut orci pharetra eleifend eu vel arcu. In mattis auctor imperdiet. Aliquam nec odio nunc. Praesent nec pulvinar est. Ut quis odio augue, vel cursus tortor. Morbi elementum dignissim interdum. Morbi at risus metus. In imperdiet ligula eu augue sodales accumsan. Morbi eget pharetra nisi. Morbi at ipsum a tortor rutrum tincidunt.</P></td></tr></table> </tr>

CENTRAL AREA (MAX LINK) (Recopy for each character you add)

<tr> <td valign="top" style="width:100px;"> <center> <img src="ICON_IMAGE_GOES_HERE" style="width:100px; height:100px; border: 3px solid #440000; margin-top: 10px; margin-left: 10px; -moz-border-radius: 60px; -webkit-border-radius: 60px; box-shadow: 0px 0px 6px 3px #dc0000;"><BR><img src="ARCANA_IMAGE_GOES_HERE" width="63" height="90" style="border: 3px solid #440000; -moz-border-radius: 10px; -webkit-border-radius: 10px; margin-top: 10px; margin-left: 10px; box-shadow: 0px 0px 6px 3px #dc0000;"></td>
    <td style="vertical-align:top; width:100%;">  <table style="width:94%; margin-top: 10px; background-color: #210000; height:25px;  vertical-align:top; -moz-border-radius: 10px; -webkit-border-radius: 10px;  margin-left:3%; margin-right:3%; box-shadow: 0px 0px 5px 2px #6d0000;"> <tr> <td> <div style="font-family: Arial Black, Gadget, sans-serif; color: #fff; font-size: 30pt; text-align: left; font-weight:bold; margin-bottom: -18px; letter-spacing: -3px; position:relative; text-shadow: 0 0 0.2em #b20000;"><B>♛ CHARACTERS_NAME_GOES_HERE</B></div></td></tr></table>
    
     <table style="width:94%; min-height:400px; margin-top: 5px; background-color: #210000; vertical-align:top; margin-left:3%; margin-right:3%; box-shadow: 0px 0px 5px 2px #6d0000;"> <tr> <td>  <p style="color: #fff; font-size: 14pt; font-family:Verdana, Geneva, sans-serif;  text-align: center; letter-spacing: -1px; "><b>ARCANA HERE<br>
       <SMALL>MAX RANK: <img src="http://i.imgur.com/DMMp5.png"><img src="http://i.imgur.com/DMMp5.png"><img src="http://i.imgur.com/DMMp5.png"><img src="http://i.imgur.com/DMMp5.png"><img src="http://i.imgur.com/DMMp5.png"><img src="http://i.imgur.com/DMMp5.png"><img src="http://i.imgur.com/DMMp5.png"><img src="http://i.imgur.com/DMMp5.png"><img src="http://i.imgur.com/DMMp5.png"><img src="http://i.imgur.com/DMMp5.png"></SMALL></b></p>
      
          <p style="color: #fff; font-size: 13px; text-align: justify; margin-left: 5px; margin-top: 10px; margin-right: 5px; font-family: Arial, Gadget, sans-serif; line-height: 15px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vehicula tempor dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque lorem neque, facilisis non posuere nec, porttitor vel nisl. Quisque neque massa, scelerisque eu pharetra quis, suscipit a lorem. Nam tincidunt, arcu molestie luctus condimentum, libero mi posuere mi, in scelerisque diam enim ac tellus. Vestibulum gravida cursus lacinia. Proin a est ut orci pharetra eleifend eu vel arcu. In mattis auctor imperdiet. Aliquam nec odio nunc. Praesent nec pulvinar est. Ut quis odio augue, vel cursus tortor. Morbi elementum dignissim interdum. Morbi at risus metus. In imperdiet ligula eu augue sodales accumsan. Morbi eget pharetra nisi. Morbi at ipsum a tortor rutrum tincidunt.</P></td></tr></table> </tr>

CENTRAL AREA (REVERSED LINK) (Recopy for each character you add)

<tr> <td valign="top" style="width:100px;"> <center> <img src="ICON_IMAGE_GOES_HERE" style="width:100px; height:100px; border: 6px solid #000; margin-top: 10px; margin-left: 10px; -moz-border-radius: 60px; -webkit-border-radius: 60px; box-shadow: 0px 0px 6px 3px #000;"><BR><img src="ARCANA_IMAGE_GOES_HERE" width="63" height="90" style="border: 6px solid #000; -moz-border-radius: 10px; -webkit-border-radius: 10px; margin-top: 10px; margin-left: 10px; box-shadow: 0px 0px 6px 3px #000000; -webkit-transform: rotate(-180deg) ; -moz-transform: rotate(-180deg);"></td>
    <td style="vertical-align:top; width:100%;">  <table style="width:94%; margin-top: 10px; background-color: #000; height:25px;  vertical-align:top; -moz-border-radius: 10px; -webkit-border-radius: 10px;  margin-left:3%; margin-right:3%;"> <tr> <td> <div style="font-family: Arial Black, Gadget, sans-serif; color: #fff; font-size: 30pt; text-align: left; font-weight:bold; margin-bottom: -18px; letter-spacing: -3px; position:relative; text-shadow: 0 0 0.2em #b20000;"><B>☠ CHARACTERS_NAME_GOES_HERE</B></div>
    </td></tr></table>
    
     <table style="width:94%; min-height:400px; margin-top: 5px; background-color: #000; vertical-align:top; margin-left:3%; margin-right:3%;"> <tr> <td>  <p style="color: #fff; font-size: 14pt; font-family:Verdana, Geneva, sans-serif;  text-align: center; letter-spacing: -1px; "><b>ARCANA HERE<br>
     <SMALL> RANK: <img src="http://i.imgur.com/PaXzk.png" alt=""><img src="http://i.imgur.com/PaXzk.png" alt=""><img src="http://i.imgur.com/PaXzk.png" alt=""><img src="http://i.imgur.com/PaXzk.png" alt=""><img src="http://i.imgur.com/PaXzk.png" alt=""><img src="http://i.imgur.com/PaXzk.png" alt=""><img src="http://i.imgur.com/PaXzk.png" alt=""><img src="http://i.imgur.com/PaXzk.png" alt=""><img src="http://i.imgur.com/PaXzk.png" alt=""><img src="http://i.imgur.com/PaXzk.png" alt=""></SMALL></b></p>
      
          <p style="color: #fff; font-size: 13px; text-align: justify; margin-left: 5px; margin-top: 10px; margin-right: 5px; font-family: Arial, Gadget, sans-serif; line-height: 15px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vehicula tempor dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque lorem neque, facilisis non posuere nec, porttitor vel nisl. Quisque neque massa, scelerisque eu pharetra quis, suscipit a lorem. Nam tincidunt, arcu molestie luctus condimentum, libero mi posuere mi, in scelerisque diam enim ac tellus. Vestibulum gravida cursus lacinia. Proin a est ut orci pharetra eleifend eu vel arcu. In mattis auctor imperdiet. Aliquam nec odio nunc. Praesent nec pulvinar est. Ut quis odio augue, vel cursus tortor. Morbi elementum dignissim interdum. Morbi at risus metus. In imperdiet ligula eu augue sodales accumsan. Morbi eget pharetra nisi. Morbi at ipsum a tortor rutrum tincidunt.</P></td></tr></table> </tr>

CENTRAL AREA (BROKEN/CHARACTER LEFT LINK) (Recopy for each character you add)

<tr> <td valign="top" style="width:100px;" > <center> <img src="ICON_IMAGE_GOES_HERE8" style="width:100px; height:100px; border: 5px solid #000; margin-top: 10px; margin-left: 10px; -moz-border-radius: 60px; -webkit-border-radius: 60px; filter:alpha(opacity=50) !important; opacity:.5; "><BR><img src="ARCANA_IMAGE_GOES_HERE" width="63" height="90" style="border: 4px solid #000; -moz-border-radius: 10px; -webkit-border-radius: 10px; margin-top: 10px; margin-left: 10px; filter:alpha(opacity=50) !important; opacity:.5; "></td>
    <td style="vertical-align:top; width:100%;">  <table style="width:94%; margin-top: 10px; background-color: #000; height:25px;  vertical-align:top; -moz-border-radius: 10px; -webkit-border-radius: 10px;  margin-left:3%; margin-right:3%; filter:alpha(opacity=50) !important; opacity:.5; "> <tr> <td> <div style="font-family: Arial Black, Gadget, sans-serif; color: #fff; font-size: 30pt; text-align: left; font-weight:bold; margin-bottom: -18px; letter-spacing: -3px; position:relative; text-shadow: 0 0 0.2em #b20000;"><B>✂ CHARACTERS_NAME_GOES_HERE</B></div>
    </td></tr></table>
    
     <table style="width:94%; min-height:400px; margin-top: 5px; background-color: #000; vertical-align:top; margin-left:3%; margin-right:3%; filter:alpha(opacity=50) !important; opacity:.5; "> <tr> <td>  <p style="color: #fff; font-size: 14pt; font-family:Verdana, Geneva, sans-serif;  text-align: center; letter-spacing: -1px; "><b>ARCANA HERE<br>
               <SMALL>RANK: </SMALL></b> <img src="http://i.imgur.com/DMMp5.png"> <img src="http://i.imgur.com/DMMp5.png"> <img src="http://i.imgur.com/DMMp5.png"> <img src="http://i.imgur.com/DMMp5.png"> <img src="http://i.imgur.com/DMMp5.png"> <img src="http://i.imgur.com/C9KX7.png"> <img src="http://i.imgur.com/C9KX7.png"> <img src="http://i.imgur.com/C9KX7.png"> <img src="http://i.imgur.com/C9KX7.png"> <img src="http://i.imgur.com/C9KX7.png"></p>
      
          <p style="color: #fff; font-size: 13px; text-align: justify; margin-left: 5px; margin-top: 10px; margin-right: 5px; font-family: Arial, Gadget, sans-serif; line-height: 15px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vehicula tempor dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque lorem neque, facilisis non posuere nec, porttitor vel nisl. Quisque neque massa, scelerisque eu pharetra quis, suscipit a lorem. Nam tincidunt, arcu molestie luctus condimentum, libero mi posuere mi, in scelerisque diam enim ac tellus. Vestibulum gravida cursus lacinia. Proin a est ut orci pharetra eleifend eu vel arcu. In mattis auctor imperdiet. Aliquam nec odio nunc. Praesent nec pulvinar est. Ut quis odio augue, vel cursus tortor. Morbi elementum dignissim interdum. Morbi at risus metus. In imperdiet ligula eu augue sodales accumsan. Morbi eget pharetra nisi. Morbi at ipsum a tortor rutrum tincidunt.</P></td></tr></table> </tr>

BOTTOM AREA (Copy just once when you are done with the characters)

RESULTS

SOCIAL LINKS

YOU'LL ALWAYS BE REMEMEBRED

★ Eikichi "Michel" Mishina

DEATH
RANK:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vehicula tempor dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque lorem neque, facilisis non posuere nec, porttitor vel nisl. Quisque neque massa, scelerisque eu pharetra quis, suscipit a lorem. Nam tincidunt, arcu molestie luctus condimentum, libero mi posuere mi, in scelerisque diam enim ac tellus. Vestibulum gravida cursus lacinia. Proin a est ut orci pharetra eleifend eu vel arcu. In mattis auctor imperdiet. Aliquam nec odio nunc. Praesent nec pulvinar est. Ut quis odio augue, vel cursus tortor. Morbi elementum dignissim interdum. Morbi at risus metus. In imperdiet ligula eu augue sodales accumsan. Morbi eget pharetra nisi. Morbi at ipsum a tortor rutrum tincidunt.

♛ Eikichi "Michel" Mishina

DEATH
MAX RANK:

☠ Eikichi "Michel" Mishina

DEATH
RANK:

✂ Eikichi "Michel" Mishina

DEATH
RANK:

Persona 2 inspired CR Codechart created by

pixle_squared

Persona 2 - Themed Inspired CR Chart | Fixed 850px

Post a comment in response: