[13] An Actual CR Chart This Time x2

[lina_trinch]

---

The Big One:

Click here for live preview

Code:
<center> <!-----LEFT VERSION-----> <div style="width: 700px; height: 200px;overflow:hidden"> <div style="width: 87px; background: linear-gradient(180deg, COLOR,rgba(0,0,0,0));float: left;height: 200px;border-radius: 50px 50px 0 0"> <img src="ICON_URL" style="width: 75px;margin: 2px;border-radius: 50px; border: 4px solid BORDER_COLOR ;float:left;"> <br /> <font style="font-size: x-large;color: BORDER_COLOR"> KEY </font></div> <div style="width: 610px;text-align:justify;float:right;line-height:10px;margin-top: 20px;"> <font style="font-family: helvetica; font-weight: bold; font-style: italic; font-variant: small-caps; font-size: 30px;"> Character Name <font style="font-size: 20px;font-weight:normal;"> Canon Name <br /><br /> <font style="font-style:normal;font-variant:normal;font-size: small;"> Lorem ipsum </font></font></font> </div></div> <!-----LEFT VERSION END-----> <!-----RIGHT VERSION-----> <div style="width: 700px; height: 200;overflow:hidden"> <div style="width: 87px; background: linear-gradient(180deg, COLOR,rgba(0,0,0,0));float: right;height: 200px; border-radius: 50px 50px 0 0"> <img src="ICON_URL" style="width: 75px;margin: 2px;border-radius: 50px; border: 4px solid BORDER_COLOR ;float:left;"> <br /> <font style="font-size: x-large;color: BORDER_COLOR"> KEY </font></div> <div style="width: 610px;text-align:justify;float:left;line-height:15px;margin-top: 20px;"> <div style="text-align:right;margin-right:2px;"> <font style="font-family: helvetica; font-weight: bold; font-style: italic; font-variant: small-caps; font-size: 30px;"> Character Name <font style="font-size: 20px;font-weight:normal;"> Canon Name <br /><br /></div> <font style="font-style:normal;font-variant:normal;font-size: small;"> Lorem ipsum </font></font></font> </div></div> <!-----RIGHT VERSION END-----> <!-----CREDIT-----> <!-----ADD MORE ABOVE THIS CODE-----> <div style="font-size: 10px;">by <a href="https://killthecake.dreamwidth.org">killthecake</a></div>

---

The Little One:

Click here for live preview

Code:
<center> <!-----LEFT VERSION-----> <div style="width: 500px; overflow:hidden"> <div style="background: linear-gradient(90deg, COLOR,rgba(0,0,0,0));float: left;border-radius: 50px 0 0 50px"> <img src="https://i.imgur.com/QukNoXN.png" style="width: 50px;margin: 2px;border-radius: 50px; border: 4px solid BORDER_COLOR ;float:left;"> <div style="width: 410px;text-align: left;float:right;line-height:20px;margin-top: 10px;"> <font style="font-family: helvetica; font-weight: bold; font-style: italic; font-variant: small-caps; font-size: x-large;color: BORDER_COLOR;"> Character Name <font style="font-size: medium;font-weight:normal;"> Canon Name <br /><font style="font-style:normal;font-variant:normal;font-size: large;"> KEY <font style="font-size: small;"> Lorem Ipsum </font></font></font></font> </div></div></div> <!-----END LEFT VERSION-----> <!-----RIGHT VERSION-----> <div style="width: 500px; overflow:hidden"> <div style="background: linear-gradient(90deg, rgba(0,0,0,0),COLOR);float: right;border-radius: 0 50px 50px 0"> <img src="https://i.imgur.com/5qYrPR7.png" style="width: 50px;margin: 2px;border-radius: 50px; border: 4px solid BORDER_COLOR ;float: right;"> <div style="border: 0px solid blue; width: 410px;text-align: right;float: left;line-height:20px;margin-top: 10px;"> <font style="font-family: helvetica; font-weight: bold; font-style: italic; font-variant: small-caps; font-size: x-large;color: BORDER_COLOR;"> Character Name <font style="font-size: medium;font-weight:normal;"> Canon Name <br /><font style="font-style:normal;font-variant:normal;font-size: large;"> <font style="font-size: small;"> Lorem Ipsum <font style="font-size: large;"> KEY </font></font></font></font></font> </div></div></div> <!-----END RIGHT VERSION-----> <!-----CREDIT-----> <!-----ADD MORE ABOVE THIS CODE-----> <div style="font-size: 10px;">by <a href="https://killthecake.dreamwidth.org">killthecake</a></div>

---

The Legend:

Click here for live preview

Code:
<center> <table style="border: 10px double black;"><tbody style="font-variant:small-caps;font-size: medium;"><tr> <td style="width: 50px;"><center> 🏶 </td> <td style="width: 50px;"><center> ✪ </td> <td style="width: 50px;"><center> ❖ </td> <td style="width: 50px;"><center> 🙪 </td> <td style="width: 50px;"><center> 🕱 </td></tr> <tr><td><center> love </td> <td><center> like </td> <td><center> neutral </td> <td><center> dislike </td> <td><center> hate </td> </td></tbody></table> <br /><br /><br />

❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post. ❖ Feel free to change whatever you like about the legend. ❖ The blurbs in "The Big One" aren't infinite. Eventually, the code will cut you off but adding too much won't break it. Your text will just disappear after a certain point. ❖ Adding too much in "The Little One," however, can break the code. Keep it short in that one if you add some text. Or you can change the dimensions of the icon to make it bigger. ❖ I didn't add any links in the code. You can put them wherever you want, but it will add the underline and change the font color. So, if you want to put one in, here's a fancy link url to help you out. (It might look neat if you make the little key icons links, just a thought.) <a href="URL" style="text-decoration:none;color: FONT_COLOR">Text</a> ❖ No, I don't hate Vision. Who could hate Vision?? Ctrl+F & Replace: ❖ COLOR - Color of the background gradient. ❖ BORDER_COLOR - Color of the icon border and key icon. Also the color of the text in the small version. This one shows up twice in your code. ❖ ICON_URL - Image URL. ❖ KEY - Tiny key icon from the legend. Optional. ❖ Character Name - Name of the character. ❖ Canon Name - Name of the character's canon. ❖ Lorem Ipsum - Blurb text. ❖ FONT_COLOR - From the optional link code. The color of your link's text. ❖ Text - From the optional link code. The text of your link. rgba(0,0,0,0) The end of the gradient that the color blends into. Don't change if you want the color to fade away like it does in the examples.