51st: cawaii alter

[yanyan]

Someone asked "but what if I have CR with 10 arturias" so here's your answer, Skii. I'll be making a version with bars instead of gems soon, if anyone is interested in that. The icons used in this code are by awkward, iconography, kapows, rivain and me.

Feel free to add me on FGO! My ID is 163,007,535.

◆◆◆◆◆ ◆◆◆◆◆

🢒🢒 saber Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ex elit, dictum sit amet nisl in, condimentum cursus sem. Sed malesuada et nulla in malesuada. Nullam suscipit nulla nec nibh imperdiet, vulputate egestas lorem fermentum. Phasellus consequat leo ac mollis rutrum. Suspendisse consequat nibh justo, ac aliquet orci sodales a.

◆◆◆◆◆ ◆◆◆◆◆

🢒🢒 saber alter Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ex elit, dictum sit amet nisl in, condimentum cursus sem. Sed malesuada et nulla in malesuada. Nullam suscipit nulla nec nibh imperdiet, vulputate egestas lorem fermentum. Phasellus consequat leo ac mollis rutrum. Suspendisse consequat nibh justo, ac aliquet orci sodales a.

◆◆◆◆◆ ◆◆◆◆◆

🢒🢒 saber lily Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ex elit, dictum sit amet nisl in, condimentum cursus sem. Sed malesuada et nulla in malesuada. Nullam suscipit nulla nec nibh imperdiet, vulputate egestas lorem fermentum. Phasellus consequat leo ac mollis rutrum. Suspendisse consequat nibh justo, ac aliquet orci sodales a.

◆◆◆◆◆ ◆◆◆◆◆

🢒🢒 saber (extra) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ex elit, dictum sit amet nisl in, condimentum cursus sem. Sed malesuada et nulla in malesuada. Nullam suscipit nulla nec nibh imperdiet, vulputate egestas lorem fermentum. Phasellus consequat leo ac mollis rutrum. Suspendisse consequat nibh justo, ac aliquet orci sodales a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ex elit, dictum sit amet nisl in, condimentum cursus sem. Sed malesuada et nulla in malesuada. Nullam suscipit nulla nec nibh imperdiet, vulputate egestas lorem fermentum. Phasellus consequat leo ac mollis rutrum. Suspendisse consequat nibh justo, ac aliquet orci sodales a.

◆◆◆◆◆ ◆◆◆◆◆

🢒🢒 saber (apocrypha) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ex elit, dictum sit amet nisl in, condimentum cursus sem. Sed malesuada et nulla in malesuada. Nullam suscipit nulla nec nibh imperdiet, vulputate egestas lorem fermentum. Phasellus consequat leo ac mollis rutrum. Suspendisse consequat nibh justo, ac aliquet orci sodales a.

◆◆◆◆◆ ◆◆◆◆◆

🢒🢒 sakura saber Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ex elit, dictum sit amet nisl in, condimentum cursus sem. Sed malesuada et nulla in malesuada. Nullam suscipit nulla nec nibh imperdiet, vulputate egestas lorem fermentum. Phasellus consequat leo ac mollis rutrum. Suspendisse consequat nibh justo, ac aliquet orci sodales a.

◆◆◆◆◆ ◆◆◆◆◆

🢒🢒 arturia (lancer) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ex elit, dictum sit amet nisl in, condimentum cursus sem. Sed malesuada et nulla in malesuada. Nullam suscipit nulla nec nibh imperdiet, vulputate egestas lorem fermentum. Phasellus consequat leo ac mollis rutrum. Suspendisse consequat nibh justo, ac aliquet orci sodales a.

◆◆◆◆◆ ◆◆◆◆◆

🢒🢒 arturia (lancer alter) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ex elit, dictum sit amet nisl in, condimentum cursus sem. Sed malesuada et nulla in malesuada. Nullam suscipit nulla nec nibh imperdiet, vulputate egestas lorem fermentum. Phasellus consequat leo ac mollis rutrum. Suspendisse consequat nibh justo, ac aliquet orci sodales a.

◆◆◆◆◆ ◆◆◆◆◆

🢒🢒 mysterious heroine x Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ex elit, dictum sit amet nisl in, condimentum cursus sem. Sed malesuada et nulla in malesuada. Nullam suscipit nulla nec nibh imperdiet, vulputate egestas lorem fermentum. Phasellus consequat leo ac mollis rutrum. Suspendisse consequat nibh justo, ac aliquet orci sodales a.

◆◆◆◆◆ ◆◆◆◆◆

🢒🢒 mysterious heroine x alter Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ex elit, dictum sit amet nisl in, condimentum cursus sem. Sed malesuada et nulla in malesuada. Nullam suscipit nulla nec nibh imperdiet, vulputate egestas lorem fermentum. Phasellus consequat leo ac mollis rutrum. Suspendisse consequat nibh justo, ac aliquet orci sodales a.

◆◆◆◆◆ ◆◆◆◆◆

🢒🢒 jeanne d'arc Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ex elit, dictum sit amet nisl in, condimentum cursus sem. Sed malesuada et nulla in malesuada. Nullam suscipit nulla nec nibh imperdiet, vulputate egestas lorem fermentum. Phasellus consequat leo ac mollis rutrum. Suspendisse consequat nibh justo, ac aliquet orci sodales a.

◆◆◆◆◆ ◆◆◆◆◆

🢒🢒 jeanne d'arc alter Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ex elit, dictum sit amet nisl in, condimentum cursus sem. Sed malesuada et nulla in malesuada. Nullam suscipit nulla nec nibh imperdiet, vulputate egestas lorem fermentum. Phasellus consequat leo ac mollis rutrum. Suspendisse consequat nibh justo, ac aliquet orci sodales a.

◆◆◆◆◆ ◆◆◆◆◆

🢒🢒 jeanne d'arc alter santa lily Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ex elit, dictum sit amet nisl in, condimentum cursus sem. Sed malesuada et nulla in malesuada. Nullam suscipit nulla nec nibh imperdiet, vulputate egestas lorem fermentum. Phasellus consequat leo ac mollis rutrum. Suspendisse consequat nibh justo, ac aliquet orci sodales a.

◆◆◆◆◆ ◆◆◆◆◆

🢒🢒 saber (prototype) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ex elit, dictum sit amet nisl in, condimentum cursus sem. Sed malesuada et nulla in malesuada. Nullam suscipit nulla nec nibh imperdiet, vulputate egestas lorem fermentum. Phasellus consequat leo ac mollis rutrum. Suspendisse consequat nibh justo, ac aliquet orci sodales a.

code by cawaii

CODE The code below contains two tables. Copy and paste the code between the TABLE START and TABLE END comments for more. Replace ICONURLHERE with your icon of choice. Text that doesn't fit in the black box will scroll automatically.

<raw-code> <center> <div style="width: 664px; text-align: left;"> <!------TABLE 1 START------> <table style="width: 320px; margin-right: 10px; margin-bottom: 10px; display: inline-block;"><tr> <!--CARD START--> <td valign="top"> <!--ICON START--> <div style="width: 90px; height: 96px; border: 1px solid #F9B300; border-bottom: 5px solid #F9B300; border-radius: 10px 10px 0px 0px; box-shadow: 0px 1px 2px #A9760B; background: url(ICONURLHERE)"> </div> <!--ICON END--> <div align="center" style="width: inherit; font-size: 14pt; text-shadow: 0px 1px 1px #999; letter-spacing: -1px;"> <!--BOND START--> <div style="margin-top: -1px;"><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span></div> <div style="margin-top: -11px"><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span></div> <!--BOND END--> </div> </td> <!--CARD END--> <!--TEXT START--> <td valign="top" style="width: 200px; font: 10px verdana; text-align: left;"><div style="width: inherit; height: 150px; background: #111; color: #ddd; border-radius: 7px; padding: 5px 10px; marign-top: 10px; overflow-y: auto;"><span style="font-size: 11px; color: #F9B300"><B>🢒🢒 NAME HERE</B></span> <br/><br/> TEXT HERE.</div></td> <!--TEXT END--> </tr></table> <!------TABLE 1 END------> <!------TABLE 2 START------> <table style="width: 320px; margin-right: 10px; margin-bottom: 10px; display: inline-block;"><tr> <!--CARD START--> <td valign="top"> <!--ICON START--> <div style="width: 90px; height: 96px; border: 1px solid #F9B300; border-bottom: 5px solid #F9B300; border-radius: 10px 10px 0px 0px; box-shadow: 0px 1px 2px #A9760B; background: url(ICONURLHERE)"> </div> <!--ICON END--> <div align="center" style="width: inherit; font-size: 14pt; text-shadow: 0px 1px 1px #999; letter-spacing: -1px;"> <!--BOND START--> <div style="margin-top: -1px;"><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span></div> <div style="margin-top: -11px"><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span></div> <!--BOND END--> </div> </td> <!--CARD END--> <!--TEXT START--> <td valign="top" style="width: 200px; font: 10px verdana; text-align: left;"><div style="width: inherit; height: 150px; background: #111; color: #ddd; border-radius: 7px; padding: 5px 10px; marign-top: 10px; overflow-y: auto;"><span style="font-size: 11px; color: #F9B300"><B>🢒🢒 NAME HERE</B></span> <br/><br/> TEXT HERE.</div></td> <!--TEXT END--> </tr></table> <!------TABLE 2 END------> </div> <span style="font-size: 9px; color: rgba(0,0,0,0.8);">code by <a style="color: rgba(90,90,255,0.8);" href="http://cawaii.dreamwidth.org/">cawaii</a></span> </center> </raw-code>

COLORS #111 - background #DDD - text #F9B300 - icon border, name #A9760B - icon shadow #6E6E6E - empty gem #999 - gem shadow

BOND LEVELS The gems represent bond levels! The code above contains tables for bond level 0, indicated by all grey gems. If you want to keep the Fate/Grand Order look, please refer to the table of codes. Copy and paste this code in between <!--BOND START--> and <!--BOND END-->.

Lv.1	<div style="margin-top: -1px;"><span style="color: #0016A6;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span></div> <div style="margin-top: -11px"><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span></div>	Lv.6	<div style="margin-top: -1px;"><span style="color: #0016A6;">◆</span><span style="color: #005900;">◆</span><span style="color: #62F600;">◆</span><span style="color: #FFFF00;">◆</span><span style="color: #FA5424;">◆</span></div> <div style="margin-top: -11px"><span style="color: #DC52F7;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span></div>
Lv.2	<div style="margin-top: -1px;"><span style="color: #0016A6;">◆</span><span style="color: #005900;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span></div> <div style="margin-top: -11px"><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span></div>	Lv.7	<div style="margin-top: -1px;"><span style="color: #0016A6;">◆</span><span style="color: #005900;">◆</span><span style="color: #62F600;">◆</span><span style="color: #FFFF00;">◆</span><span style="color: #FA5424;">◆</span></div> <div style="margin-top: -11px"><span style="color: #DC52F7;">◆</span><span style="color: #1BF3FF;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span></div>
Lv.3	<div style="margin-top: -1px;"><span style="color: #0016A6;">◆</span><span style="color: #005900;">◆</span><span style="color: #62F600;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span></div> <div style="margin-top: -11px"><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span></div>	Lv.8	<div style="margin-top: -1px;"><span style="color: #0016A6;">◆</span><span style="color: #005900;">◆</span><span style="color: #62F600;">◆</span><span style="color: #FFFF00;">◆</span><span style="color: #FA5424;">◆</span></div> <div style="margin-top: -11px"><span style="color: #DC52F7;">◆</span><span style="color: #1BF3FF;">◆</span><span style="color: #ECEC00;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span></div>
Lv.4	<div style="margin-top: -1px;"><span style="color: #0016A6;">◆</span><span style="color: #005900;">◆</span><span style="color: #62F600;">◆</span><span style="color: #FFFF00;">◆</span><span style="color: #6E6E6E;">◆</span></div> <div style="margin-top: -11px"><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span></div>	Lv.9	<div style="margin-top: -1px;"><span style="color: #0016A6;">◆</span><span style="color: #005900;">◆</span><span style="color: #62F600;">◆</span><span style="color: #FFFF00;">◆</span><span style="color: #FA5424;">◆</span></div> <div style="margin-top: -11px"><span style="color: #DC52F7;">◆</span><span style="color: #1BF3FF;">◆</span><span style="color: #ECEC00;">◆</span><span style="color: #FFAE06;">◆</span><span style="color: #6E6E6E;">◆</span></div>
Lv.5	<div style="margin-top: -1px;"><span style="color: #0016A6;">◆</span><span style="color: #005900;">◆</span><span style="color: #62F600;">◆</span><span style="color: #FFFF00;">◆</span><span style="color: #FA5424;">◆</span></div> <div style="margin-top: -11px"><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span><span style="color: #6E6E6E;">◆</span></div>	Lv.10	<div style="margin-top: -1px;"><span style="color: #0016A6;">◆</span><span style="color: #005900;">◆</span><span style="color: #62F600;">◆</span><span style="color: #FFFF00;">◆</span><span style="color: #FA5424;">◆</span></div> <div style="margin-top: -11px"><span style="color: #DC52F7;">◆</span><span style="color: #1BF3FF;">◆</span><span style="color: #ECEC00;">◆</span><span style="color: #FFAE06;">◆</span><span style="color: #E6FBF8;">◆</span></div>

Comments

[misheard]

I really like this chart! It's just so nice stylistically, the color scheme is great and works with the gems and it doesn't take up huge amounts of space even with lots of cr.

I'm not playing any Fate/s in games right now but I think I'll be stealing it for someone anyway. Thank you for making it!

[viscontree]

i'm going to steal this cr chart even though im not rping fgo

ty yana

[caliburnus]

Snagging this for (gasp) Artoria. Clearly I need to find nine others and get CR with them. Thank you!