Chaturbate Demo - Code Snippets

Markup codes showing the use of all Chaturbate's accepted HTML tags and use of inline-css

Markup Code Box

Default button, on click, removes the markup code from light-blue box

Render Box

That's how it looks rendered in browser. Optionally you can Save as PDF

Markup Codes

Image-based Chaturbate Bio design by Sebastian

This is a backbone CB image-based bio design
Full code below optimized for CB implementation due to margin attributes (already setup)

<ul id="main" style="display:block;width:100%;min-width:300px;padding:0;height:auto;box-sizing:border-box;list-style:none;line-height:normal;margin:120px auto 50px -146px;"><li style="display:block;width:100%;min-width:300px;padding:0;height:auto;box-sizing:border-box;list-style:none;line-height:normal;margin:0 auto;"><img src="https://via.placeholder.com/1000x450/66CCCC/F1F1F1/?text=1000x450" style="display:block;width:100%;height:auto;margin:0 auto;float:none;clear:left;"/></li><li style="display:block;width:100%;height:auto;padding:0;box-sizing:border-box;list-style:none;line-height:normal;margin:0 auto;"><ul style="display:block;width:100%;height:auto;padding:0;box-sizing:border-box;list-style:none;line-height:normal;margin:0 auto;float:none;clear:left;"><li style="display:block;width:50%;height:auto;padding:0;box-sizing:border-box;list-style:none;line-height:normal;margin:0 auto;float:left;"><img src="https://via.placeholder.com/600x350/CC99FF/F1F1F1/?text=600x350" style="display:block;width:100%;height:auto;padding:0;margin:0 auto;float:none;clear:left;"/></li><li style="display:block;width:50%;height:auto;box-sizing:border-box;list-style:none;line-height:normal;margin:0 auto;float:left;"><img src="https://via.placeholder.com/600x350/FFC4E1/777777/?text=600x350" style="display:block;width:100%;height:auto;margin:0 auto;float:none;clear:left;"/></li><li style="display:block;width:100%;height:0px;padding:0;box-sizing:border-box;list-style:none;line-height:normal;margin:0 auto;opacity:0;overflow:hidden;">divider for clearfix - sebastian cgc</li></ul></li><li style="display:block;width:100%;padding:0;height:auto;box-sizing:border-box;list-style:none;line-height:normal;margin:0 auto;"><img src="https://via.placeholder.com/1000x450/F7CE93/F1F1F1/?text=1000x450" style="display:block;width:100%;height:auto;margin:0 auto;float:none;clear:left;"/></li><li style="display:block;width:100%;height:auto;padding:0;box-sizing:border-box;list-style:none;line-height:normal;margin:0 auto;"><ul style="display:block;width:100%;height:auto;padding:0;box-sizing:border-box;list-style:none;line-height:normal;margin:0 auto;float:none;clear:left;"><li style="display:block;width:33.33%;height:auto;padding:0;box-sizing:border-box;list-style:none;line-height:normal;margin:0 auto;float:left;"><img src="https://via.placeholder.com/500x550/D6F3A9/777777/?text=500x550" style="display:block;width:100%;height:auto;padding:0;margin:0 auto;float:none;clear:left;"/></li><li style="display:block;width:33.33%;height:auto;padding:0;box-sizing:border-box;list-style:none;line-height:normal;margin:0 auto;float:left;"><img src="https://via.placeholder.com/500x550/CFE7E7/777777/?text=500x550" style="display:block;width:100%;height:auto;padding:0;margin:0 auto;float:none;clear:left;"/></li><li style="display:block;width:33.33%;height:auto;padding:0;box-sizing:border-box;list-style:none;line-height:normal;margin:0 auto;float:left;"><img src="https://via.placeholder.com/500x550/FFFFB3/777777/?text=500x550" style="display:block;width:100%;height:auto;padding:0;margin:0 auto;float:none;clear:left;"/></li><li style="display:block;width:100%;height:0px;padding:0;box-sizing:border-box;list-style:none;line-height:normal;margin:0 auto;opacity:0;overflow:hidden;">divider for clearfix - sebastian cgc</li></ul></li><li style="display:block;width:100%;min-width:300px;padding:0;height:auto;box-sizing:border-box;list-style:none;line-height:normal;margin:0 auto;"><img src="https://via.placeholder.com/1000x250/9933CC/F1F1F1/?text=1000x250" style="display:block;width:100%;height:auto;margin:0 auto;float:none;clear:left;"/></li>
</ul>

How to use this markup code?

Replace the default URL image path with your self-hosted images and you're ready to go

Image-based Chaturbate Bio design by CiciWeb

This is a backbone CB image-based bio design
Full code below optimized for CB implementation due to margin attributes (already setup)

<ul id="main" style="display:block;width:100%;min-width:300px;float:none;clear:left;box-sizing:border-box;list-style:none;line-height:normal;padding:0;background-color:#222;margin:120px auto 50px -146px;-webkit-box-shadow:0 0 12px #999;box-shadow:0 0 12px #999;"><li style="display:block;width:100%;min-width:300px;float:none;clear:left;box-sizing:border-box;list-style:none;line-height:normal;padding:0;background-color:#222;margin:0 auto;text-align:center;"><img src="https://ciciwebiasmin.files.wordpress.com/2019/01/cici_header.jpg" style="display:block;width:100%;height:auto;margin:0 auto;"/></li><li style="display:block;width:100%;min-width:300px;float:none;clear:left;box-sizing:border-box;list-style:none;line-height:normal;padding:0;background-color:#222;margin:0 auto;text-align:center;"><img src="https://ciciwebiasmin.files.wordpress.com/2019/01/cici_aboutme.jpg" style="display:block;width:100%;height:auto;margin:0 auto;"/></li><li style="display:block;width:100%;min-width:300px;float:none;clear:left;box-sizing:border-box;list-style:none;line-height:normal;padding:0;background-color:#222;margin:0 auto;text-align:center;"><img src="https://ciciwebiasmin.files.wordpress.com/2019/01/cici_rules.jpg" style="display:block;width:100%;height:auto;margin:0 auto;"/></li><li style="display:block;width:100%;min-width:300px;float:none;clear:left;box-sizing:border-box;list-style:none;line-height:normal;padding:0;background-color:#222;margin:0 auto;text-align:center;"><p style="display:block;width:100%;height:auto;margin:0 auto;padding:10px 0 10px;float:none;clear:left;box-sizing:border-box;background-color:#f1f1f1;border-bottom:5px solid #777;"><a href="#" style="display:block;width:33.33%;height:auto;margin:0 auto;padding:0;float:left;box-sizing:border-box;"><img src="https://ciciwebiasmin.files.wordpress.com/2019/01/cici_twtfol.png" style="display:block;width:100%;height:auto;margin:0 auto;float:none;clear:left;"/></a><a href="#" style="display:block;width:33.33%;height:auto;margin:0 auto;padding:0;float:left;box-sizing:border-box;"><img src="https://ciciwebiasmin.files.wordpress.com/2019/01/cici_amawl.png" style="display:block;width:100%;height:auto;margin:0 auto;float:none;clear:left;"/></a><a href="#" style="display:block;width:33.33%;height:auto;margin:0 auto;padding:0;float:left;box-sizing:border-box;"><img src="https://ciciwebiasmin.files.wordpress.com/2019/01/cici_cbwlist.png" style="display:block;width:100%;height:auto;margin:0 auto;float:none;clear:left;"/></a><i style="display:block;width:100%;height:1px;float:none;clear:left;overflow:hidden;opacity:0;margin:0 auto;">custom design by CiciWeb from Camgirl Cloud</i></p></li><li style="display:block;width:100%;min-width:300px;float:none;clear:left;box-sizing:border-box;list-style:none;line-height:normal;padding:0;background-color:#222;margin:0 auto;text-align:center;"><img src="https://ciciwebiasmin.files.wordpress.com/2019/01/cici_toptippers.jpg" style="display:block;width:100%;height:auto;margin:0 auto;"/></li><li style="display:block;width:100%;min-width:300px;float:none;clear:left;box-sizing:border-box;list-style:none;line-height:normal;padding:0;background-color:#222;margin:0 auto;text-align:center;"><img src="https://ciciwebiasmin.files.wordpress.com/2019/01/cici_dmca.jpg" style="display:block;width:100%;height:auto;margin:0 auto;"/></li><li style="display:block;width:40px;height:auto;position:fixed;top:166px;left:0px;text-align:center;list-style:none;box-sizing: border-box;text-align:center;padding:8px 0 10px;"><a href="#" style="display:block;width:35px;height:35px;border-bottom:1px solid #000;"><img src="https://d31rb55u3y3kjs.cloudfront.net/c/u/520476279851687b6dabcc7189410390/2018/12/09124357/twtc.png" style="width:35px;height:35px;background-color:#ed018c;"></a><a href="#" style="display:block;width:35px;height:35px;border-bottom:1px solid #000;"><img src="https://d31rb55u3y3kjs.cloudfront.net/c/u/520476279851687b6dabcc7189410390/2018/12/09124348/amac.png" style="width:35px;height:35px;background-color:#ed018c;"></a><a href="#" style="display:block;width:35px;height:35px;border-bottom:1px solid #000;"><img src="https://d31rb55u3y3kjs.cloudfront.net/c/u/520476279851687b6dabcc7189410390/2018/12/09124349/cbwl.png" style="width:35px;height:35px;background-color:#ed018c;"></a><a href="#" style="display:block;width:35px;height:300px;background-color:#000"><img src="https://raw.githubusercontent.com/cssmfc/cssmfc.github.io/master/demos/cb/cb_design02/images/clte_acre_blkanim.gif" style="width:35px;height:300px;"></a></li></ul>

How to use this markup code?

Replace the default URL image path with your self-hosted images and you're ready to go

Full page background image for Chaturbate Bio

Markup code

How to use this markup code?

Replace the default URL image path with your self-hosted images and you're ready to go

Navigation

Camgirl.Cloud

Social

a project by camgirl.cloud