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.

Comments

[struck_out]

I like this minimalist code! It's to the point and not very complicated to work with. Hope you don't mind if I use it for this guy here, and thanks very much.

[yanyan]

No problem! Thanks for the kind words. ;u; Enjoy!

[kelphead]

Hey! So I'm using this here and my percentage bars are refusing to show up. I have no idea why. o-o;

[girlmemo]

shh this is still me and I found the problem! Just change 3b7959 to #3b7959 and you should be set.

[kelphead]

Aha. I never would have caught that. Thank you!

[raavashing]

I'm attempting to create a cheat sheet for myself here with four colors and I can't figure out what I'm doing wrong here on the percentages bars:

Here

In the first example, I only changed "Hexcode" to #003300 and the percentage to 85%. None of the other code was changed. Can you figure this out for me?

[redsea]

Forgive the RP account. It's still me! It seems you have to put & nbsp ; (without the spaces) in between the div tags you changed. It should work after adding that!

[raavashing]

and to get a space between the bars? or will that happen when I post it in the main entry?

[redsea]

You'll have to post it in the main entry to get the space between the bars! The code doesn't work that way in comments.

[raavashing]

Thank you!

[redsea]

You're welcome!