15th: fondness

[yanyan]

Another one of these things with gauges/bars. Can be used for CR charts! UPDATE (10/4): Fixed. Code doesn't mess up text and comments below it anymore.

Shinobu Oshino (Monogatari Series) → servant

Saber (Fate/Zero) → servant

CODE
<raw-code> <!--ITEM START--> <div style="height: 104px; width: 514px; margin-bottom: 20px;"> <div style="height: 48px; width: 500px; background: #fff; border-radius: 60px; text-align: left;"> <!--BAR STARTS HERE--> <div style="height: 16px; width: 400px; background: #fff; position: relative; top: 6px; left: 20px; border: 2px solid #HEXCODE1; border-radius: 16px;"> <div style="height: 100%; width: NUMBER%; background: #HEXCODE2; border-radius: 16px 0px 0px 16px;"></div> </div> <!--BAR ENDS HERE; TEXT STARTS HERE--> <div style="width: 380px; position: relative; top: 6px; left: 24px;"> <span style="font-family: 'segoe ui', verdana, sans-serif; font-size: 12px; color: #HEXCODE3; text-transform: lowercase; letter-spacing: 0.1em;">Text here → <b style="color: #HEXCODE4;">Text</b></span> </div> <!--TEXT ENDS HERE, IMAGE STARTS HERE--> <img src="IMAGE URL HERE" style="display: inline-block; position: relative; bottom: 72px; left: 430px; border: 6px solid #fff; border-radius: 50%;"> </div> </div> <!--ITEM END--> </raw-code>

NOTE
1. HEXCODE1 is the border color of the bar, HEXCODE2 is the color of what's inside the bar, HEXCODE3 is the color of the text below, HEXCODE4 is the color of the bold text. Replace these with any colors of your choosing.
2. To adjust how much the bar has filled up, replace NUMBER with any number from 0 to 100. If the value is above 98, replace border-radius: 16px 0px 0px 16px; with just border-radius: 16px;
3. If you want to make more rows, copy and paste the code between ITEM START and ITEM END.
4. Use this code however you want and let me know if something comes up!