CR Charts

[angermanaging]

( static preview )



( live preview )

Castmates

PEPPER POTTS (notsubtle)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac hendrerit purus. Etiam consectetur vitae nulla vitae iaculis. Phasellus sed nulla magna. Phasellus sit amet turpis sem. Aliquam quam augue, scelerisque nec congue et, euismod eu turpis. Donec venenatis neque id nisl gravida fermentum. Integer volutpat, tortor nec molestie pellentesque, urna eros porta nibh, ut sollicitudin ipsum turpis non lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam eleifend urna quam, porttitor interdum dui lacinia lobortis.

NATASHA ROMANOFF (misbelieve)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac hendrerit purus. Etiam consectetur vitae nulla vitae iaculis. Phasellus sed nulla magna. Phasellus sit amet turpis sem. Aliquam quam augue, scelerisque nec congue et, euismod eu turpis. Donec venenatis neque id nisl gravida fermentum. Integer volutpat, tortor nec molestie pellentesque, urna eros porta nibh, ut sollicitudin ipsum turpis non lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam eleifend urna quam, porttitor interdum dui lacinia lobortis.

 

 

PEPPER POTTS
IRON MAN

notsubtle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac hendrerit purus. Etiam consectetur vitae nulla vitae iaculis. Phasellus sed nulla magna. Phasellus sit amet turpis sem. Aliquam quam augue, scelerisque nec congue et, euismod eu turpis. Donec venenatis neque id nisl gravida fermentum. Integer volutpat, tortor nec molestie pellentesque, urna eros porta nibh, ut sollicitudin ipsum turpis non lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam eleifend urna quam, porttitor interdum dui lacinia lobortis. Nullam nec erat non dolor hendrerit fermentum sed id ante. Sed neque justo, pretium at feugiat non, porta ut sapien. Morbi placerat, arcu at commodo dictum, massa sapien bibendum sapien, et lobortis metus mauris sed ante. Pellentesque facilisis augue vel nibh varius, in tincidunt nisi imperdiet. Praesent tristique mauris a iaculis hendrerit. Duis ut tellus sapien. Quisque vel eros purus.

NATASHA ROMANOFF
AVENGERS

misbelieve

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac hendrerit purus. Etiam consectetur vitae nulla vitae iaculis. Phasellus sed nulla magna. Phasellus sit amet turpis sem. Aliquam quam augue, scelerisque nec congue et, euismod eu turpis. Donec venenatis neque id nisl gravida fermentum. Integer volutpat, tortor nec molestie pellentesque, urna eros porta nibh, ut sollicitudin ipsum turpis non lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam eleifend urna quam, porttitor interdum dui lacinia lobortis.

( instructions )

3 icons: <raw-code> <center> <!--CHARACTER START--> <div style="width:520px;font-family:Lucida Sans Unicode;font-size:13px;overflow:auto;"> <div style="float:left;width:80px;text-align:left;"> <img src="http://www.dreamwidth.org/userpic/6750523/2070727" style="border-radius:10px;width:75px;"> <img src="http://www.dreamwidth.org/userpic/6750528/2070727" style="border-radius:10px;width:75px;"> <img src="http://www.dreamwidth.org/userpic/6750536/2070727" style="border-radius:10px;width:75px;"> </div> <div style="float:right;width:410px;padding-left:15px;text-align:justify;border-left: 1px #000 dotted;padding-bottom:20px;"><B>PEPPER POTTS</B> (<small><user name="notsubtle"></small>) <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac hendrerit purus. Etiam consectetur vitae nulla vitae iaculis. Phasellus sed nulla magna. Phasellus sit amet turpis sem. Aliquam quam augue, scelerisque nec congue et, euismod eu turpis. Donec venenatis neque id nisl gravida fermentum. Integer volutpat, tortor nec molestie pellentesque, urna eros porta nibh, ut sollicitudin ipsum turpis non lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam eleifend urna quam, porttitor interdum dui lacinia lobortis. </div> </div> <!--CHARACTER START--> <div style="width:520px;font-family:Lucida Sans Unicode;font-size:13px;overflow:auto;"> <div style="float:left;width:80px;text-align:left;"> <img src="http://www.dreamwidth.org/userpic/6845107/2086605" style="border-radius:10px;width:75px;"> <img src="http://www.dreamwidth.org/userpic/6845111/2086605" style="border-radius:10px;width:75px;"> <img src="http://www.dreamwidth.org/userpic/6845116/2086605" style="border-radius:10px;width:75px;"> </div> <div style="float:right;width:410px;padding-left:15px;text-align:justify;border-left: 1px #000 dotted;padding-bottom:20px;"><B>NATASHA ROMANOFF</B> (<small><user name="finessed"></small>) <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac hendrerit purus. Etiam consectetur vitae nulla vitae iaculis. Phasellus sed nulla magna. Phasellus sit amet turpis sem. Aliquam quam augue, scelerisque nec congue et, euismod eu turpis. Donec venenatis neque id nisl gravida fermentum. Integer volutpat, tortor nec molestie pellentesque, urna eros porta nibh, ut sollicitudin ipsum turpis non lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam eleifend urna quam, porttitor interdum dui lacinia lobortis. </div> </div> </center> </raw-code> <div style="width:100%;text-align:right;"><small>Code by <user name="bannertech">.</small></div>	1 icon: <center> <raw-code> <!--CHARACTER START--> <div style="width:530px;font-family:Lucida Sans Unicode;font-size:13px;overflow:auto;"> <div style="float:left;width:110px;text-align:left;"> <img src="http://www.dreamwidth.org/userpic/7148088/2070727" style="border-radius:30px;"> <small><B>PEPPER POTTS <br><small>IRON MAN</B> <p><user name="notsubtle"></small> <div style="margin-right:5px;margin-top:10px;float:right;display:inline;width:100px;height:10px;border-radius:10px;border: #e0e0e0 3px solid;"><div style="width: 60%; height: 100%; background: red;position:relative;border-radius:10px;"></div></div> </div> <div style="float:right;width:400px;padding-left:15px;text-align:justify;border-left: 1px #000 dotted;padding-bottom:40px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac hendrerit purus. Etiam consectetur vitae nulla vitae iaculis. Phasellus sed nulla magna. Phasellus sit amet turpis sem. Aliquam quam augue, scelerisque nec congue et, euismod eu turpis. Donec venenatis neque id nisl gravida fermentum. Integer volutpat, tortor nec molestie pellentesque, urna eros porta nibh, ut sollicitudin ipsum turpis non lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam eleifend urna quam, porttitor interdum dui lacinia lobortis. Nullam nec erat non dolor hendrerit fermentum sed id ante. Sed neque justo, pretium at feugiat non, porta ut sapien. Morbi placerat, arcu at commodo dictum, massa sapien bibendum sapien, et lobortis metus mauris sed ante. Pellentesque facilisis augue vel nibh varius, in tincidunt nisi imperdiet. Praesent tristique mauris a iaculis hendrerit. Duis ut tellus sapien. Quisque vel eros purus. </div> </div> <!--CHARACTER START--> <div style="width:530px;font-family:Lucida Sans Unicode;font-size:13px;overflow:auto;"> <div style="float:left;width:110px;text-align:left;"> <img src="http://www.dreamwidth.org/userpic/6845110/2086605" style="border-radius:30px;"> <small><B>NATASHA ROMANOFF <br><small>AVENGERS</B> <p><user name="finessed"></small> <div style="margin-right:5px;margin-top:10px;float:right;display:inline;width:100px;height:10px;border-radius:10px;border: #e0e0e0 3px solid;"><div style="width: 60%; height: 100%; background: red;position:relative;border-radius:10px;"></div></div> </div> <div style="float:right;width:400px;padding-left:15px;text-align:justify;border-left: 1px #000 dotted;padding-bottom:40px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac hendrerit purus. Etiam consectetur vitae nulla vitae iaculis. Phasellus sed nulla magna. Phasellus sit amet turpis sem. Aliquam quam augue, scelerisque nec congue et, euismod eu turpis. Donec venenatis neque id nisl gravida fermentum. Integer volutpat, tortor nec molestie pellentesque, urna eros porta nibh, ut sollicitudin ipsum turpis non lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam eleifend urna quam, porttitor interdum dui lacinia lobortis. </div> </div> </raw-code> </center> <div style="width:100%;text-align:right;"><small>Code by <user name="bannertech">.</small></div>	Header text: <div style="width:520px;font-family:Lucida Sans Unicode;font-size:25px;letter-spacing:5px;text-transform:uppercase;margin-bottom:40px;">Castmates</div>
If you'd like to use the header text, put it before <!--CHARACTER START--> If you have short text, you can push the next entry below it down by increasing the padding-bottom value on the div that contains the text. This piece of code is what changes the progress bar: <div style="width: 60%; height: 100%; background: red;position:relative;border-radius:10px;">

Comments

[barb_notbabs]

Nice chart

[waruvial]

I hope that you don't mind me modifying the code some! I used coding from 3 icons and 1 icon and added links and a frame.

I'm not sure if you want me to offer the code publicly on my muse list or add a textarea with the code here. Or neither. Whichever works for you!

[angermanaging]

Oh no, I don't mind at all! You can do whatever you like with it, including where/if you post the modified code anywhere. :)

[waruvial]

Alright, thanks!

And thanks for the nice code. <3

[succored]

Thank you for sharing this! I love how easy to tweak and concise all of this is.