13th: level up

[yanyan]

This one's inspired by video games again... It's a minimalist CR/muselist chart.

UPDATE (9/28): This code does not make use of tables anymore. Simply copy and paste the code between ITEM START and ITEM END to add more.

Nadeko Sengoku

Friend

Nadeko Sengoku

Friend

Nadeko Sengoku

Friend

Nadeko Sengoku

Friend

Kougyoku Ren Acquaintance

Aladdin Friend

Alibaba Saluja Friend

Hakuryuu Ren Friend

MAIN CODE <raw-code><center> <div style="background: #ffffff; width: 656px; border-radius: 18px; padding: 14px 2px 6px 2px; text-align: left;"> <!--ITEM START--> <div style="width: 160px; margin-bottom: 20px; display: inline-block;"> <!--ICON START--> <div style="width: 100%; text-align: center;"> <span style="font-family: futura, 'century gothic', sans-serif; font-size: 14px; color: #000;">NAME</span> <br/> <img src="ICON URL HERE" style="height: 80px; width: 80px; border: 6px solid #ffffff; border-radius: 12px; box-shadow: 1px 1px 3px #777; margin: 3px 0px;"> </div> <!--ICON END--> <!--BARS START--> <center> <div style="height: 10px; width: 100px; background: #fff; text-align: left; border: 3px solid #000; border-radius: 12px; margin-bottom: 3px;"> <div style="height: 100%; width: NUMBER%; background: HEXCODE; border-radius: 10px 0px 0px 10px;"></div> </div> <div style="height: 10px; width: 100px; background: #000; text-align: center; border: 3px solid #000; border-radius: 10px;"> <span style="font-family: futura, 'century gothic', sans-serif; color: #fff; font-size: 12px; text-transform: uppercase; position: relative; top: -4px;">TEXT</span> </div> </center> <!--BARS END--> </div> <!--ITEM END--> </div> <br/> <small>code by <user name=cawaii></small> </center></raw-code>
BABY PINK <!--ITEM START--> <div style="width: 160px; margin-bottom: 20px; display: inline-block;"> <!--ICON START--> <div style="width: 100%; text-align: center;"> <span style="font-family: futura, 'century gothic', sans-serif; font-size: 14px; color: #d96b6a;">NAME HERE</span> <br/> <img src="IMAGE URL HERE" style="height: 80px; width: 80px; border: 6px solid #ffffff; border-radius: 12px; box-shadow: 1px 1px 3px #d96b6a; margin: 3px 0px;"> </div> <!--BARS START--> <center> <div style="height: 10px; width: 100px; background: #fff; text-align: left; border: 3px solid #f8bdaf; border-radius: 12px; margin-bottom: 3px;"> <div style="height: 100%; width: NUMBER%; background: #fdd7ce; border-radius: 10px 0px 0px 10px;"></div> </div> <div style="height: 10px; width: 100px; background: #fdd7ce; text-align: center; border: 3px solid #fdd7ce; border-radius: 10px;"> <span style="font-family: futura, 'century gothic', sans-serif; font-size: 12px; color: #d96b6a; text-transform: uppercase; position: relative; top: -4px;">TEXT HERE</span> </div> </center> </div> <!--ITEM END-->	SKY BLUE <!--ITEM START--> <div style="width: 160px; margin-bottom: 20px; display: inline-block;"> <!--ICON START--> <div style="width: 100%; text-align: center;"> <span style="font-family: futura, 'century gothic', sans-serif; font-size: 14px; color: #6aaab4;">NAME HERE</span> <br/> <img src="IMAGE URL HERE" style="height: 80px; width: 80px; border: 6px solid #ffffff; border-radius: 12px; box-shadow: 1px 1px 3px #6aaab4; margin: 3px 0px;"> </div> <center> <div style="height: 10px; width: 100px; background: #fff; text-align: left; border: 3px solid #a3d2d9; border-radius: 12px; margin-bottom: 3px;"> <div style="height: 100%; width: NUMBER%; background: #cfe8ec; border-radius: 10px 0px 0px 10px;"></div> </div> <div style="height: 10px; width: 100px; background: #cfe8ec; text-align: center; border: 3px solid #cfe8ec; border-radius: 10px;"> <span style="font-family: futura, 'century gothic', sans-serif; font-size: 12px; color: #6aaab4; text-transform: uppercase; position: relative; top: -4px;">TEXT HERE</span> </div> </center> </div> <!--ITEM END-->
RED <!--ITEM START--> <div style="width: 160px; margin-bottom: 20px; display: inline-block;"> <!--ICON START--> <div style="width: 100%; text-align: center;"> <span style="font-family: futura, 'century gothic', sans-serif; font-size: 14px; color: #cb2110;">NAME HERE</span> <br/> <img src="IMAGE URL HERE" style="height: 80px; width: 80px; border: 6px solid #ffffff; border-radius: 12px; box-shadow: 1px 1px 3px #cb2110; margin: 3px 0px;"> </div> <center> <div style="height: 10px; width: 100px; background: #fff; text-align: left; border: 3px solid #cb2110; border-radius: 12px; margin-bottom: 3px;"> <div style="height: 100%; width: NUMBER%; background: #f4280d; border-radius: 10px 0px 0px 10px;"></div> </div> <div style="height: 10px; width: 100px; background: #f4280d; text-align: center; border: 3px solid #f4280d; border-radius: 10px;"> <span style="font-family: futura, 'century gothic', sans-serif; font-size: 12px; text-transform: uppercase; position: relative; top: -4px; color: #f9c4b2;">TEXT HERE</span> </div> </center> </div> <!--ITEM END-->	BLUE <!--ITEM START--> <div style="width: 160px; margin-bottom: 20px; display: inline-block;"> <!--ICON START--> <div style="width: 100%; text-align: center;"> <span style="font-family: futura, 'century gothic', sans-serif; font-size: 14px; color: #012677;">NAME HERE</span> <br/> <img src="IMAGE URL HERE" style="height: 80px; width: 80px; border: 6px solid #ffffff; border-radius: 12px; box-shadow: 1px 1px 3px #012677; margin: 3px 0px;"> </div> <center> <div style="height: 10px; width: 100px; background: #fff; text-align: left; border: 3px solid #012677; border-radius: 12px; margin-bottom: 3px;"> <div style="height: 100%; width: NUMBER%; background: #4a659f; border-radius: 10px 0px 0px 10px;"></div> </div> <div style="height: 10px; width: 100px; background: #4a659f; text-align: center; border: 3px solid #4a659f; border-radius: 10px;"> <span style="font-family: futura, 'century gothic', sans-serif; font-size: 12px; text-transform: uppercase; position: relative; top: -4px; color: #cdd7ec;">TEXT HERE</span> </div> </center> </div> <!--ITEM END-->

NOTE
1. For the main code, replace HEXCODE with the hex code of your choice. Here are some examples!

#97be1c	#0085de	#fb526d	#ffcd00
#d191bb	#ff8e00	#f52612	#38d09a

2. To adjust how much the bar has filled up, replace NUMBER with any number from 0 to 100. If the value is above 95, replace border-radius: 10px 0px 0px 10px; with just border-radius: 10px;
3. The codes for the alternate colors do not come with the main code. They are just codes for an individual item. You will have to replace the items in the main code with these.