Free Chaturbate Bio - Empty Layout #3

Chaturbate Bio layout #3 

This is a layout and not a fully coded template design.
You can use this layout as a starting point to develop your awesome projects.
It holds the elements and graphics already positioned. Feel free to check out the online Demo

<ul style="display:block;width:100%;height:auto;list-style:none;box-sizing:border-box;padding:0;border:0px solid #ccc;background-color:#f1f1f1;color:#777;font-size:19px;font-weight:normal;text-align:center;margin:120px auto 30px 14px;z-index:9999;"> <li style="display:block;width:100%;height:auto;box-sizing:border-box;list-style:none;padding:15px;margin:0 auto;border:1px solid #ccc;text-align:center;position:relative;">menu</li> <li style="display:block;width:100%;height:auto;box-sizing:border-box;list-style:none;padding:15px;margin:0 auto;border:1px solid #ccc;text-align:center;position:relative;"><i style="display:block;width:100%;height:auto;margin:0 auto;padding:6px 0 7px;font-style:normal;">header (optional image or text)</i><img src="http://via.placeholder.com/1000x450" style="display:block;width:100%;height:auto;margin:0 auto;"/></li> <li style="display:block;width:33.33%;height:auto;box-sizing:border-box;list-style:none;padding:15px;margin:0 auto;border:1px solid #ccc;text-align:center;position:relative;float:left"><img src="http://via.placeholder.com/300?text=image+banner+33%" style="display:block;width:100%;height:auto;margin:0 auto;"/></li> <li style="display:block;width:66.66%;height:auto;min-height:405px;box-sizing:border-box;list-style:none;padding:15px;margin:0 auto;border:1px solid #ccc;text-align:center;position:relative;float:left">Section right Half 66.66%</li> <li style="display:block;width:33.33%;height:auto;box-sizing:border-box;list-style:none;padding:15px;margin:0 auto;border:1px solid #ccc;text-align:center;position:relative;float:left">Section left 1/3</li> <li style="display:block;width:33.33%;height:auto;box-sizing:border-box;list-style:none;padding:15px;margin:0 auto;border:1px solid #ccc;text-align:center;position:relative;float:left">Section center 1/3</li> <li style="display:block;width:33.33%;height:auto;box-sizing:border-box;list-style:none;padding:15px;margin:0 auto;border:1px solid #ccc;text-align:center;position:relative;float:left">Section right 1/3</li> <li style="display:block;width:33.33%;height:auto;box-sizing:border-box;list-style:none;padding:15px;margin:0 auto;border:1px solid #ccc;text-align:center;position:relative;float:left">Section left 1/3</li> <li style="display:block;width:33.33%;height:auto;box-sizing:border-box;list-style:none;padding:15px;margin:0 auto;border:1px solid #ccc;text-align:center;position:relative;float:left">Section center 1/3</li> <li style="display:block;width:33.33%;height:auto;box-sizing:border-box;list-style:none;padding:15px;margin:0 auto;border:1px solid #ccc;text-align:center;position:relative;float:left">Section right 1/3</li> <li style="display:block;width:33.33%;height:auto;box-sizing:border-box;list-style:none;padding:15px;margin:0 auto;border:1px solid #ccc;text-align:center;position:relative;float:left">Section left 1/3</li> <li style="display:block;width:33.33%;height:auto;box-sizing:border-box;list-style:none;padding:15px;margin:0 auto;border:1px solid #ccc;text-align:center;position:relative;float:left">Section center 1/3</li> <li style="display:block;width:33.33%;height:auto;box-sizing:border-box;list-style:none;padding:15px;margin:0 auto;border:1px solid #ccc;text-align:center;position:relative;float:left">Section right 1/3</li> <li style="display:block;width:100%;height:auto;box-sizing:border-box;list-style:none;padding:15px;margin:0 auto;border:1px solid #ccc;text-align:center;position:relative;clear:left;float:none;">Section 1 Full</li> <li style="display:block;width:100%;height:auto;box-sizing:border-box;list-style:none;padding:15px;margin:0 auto;border:1px solid #ccc;text-align:center;position:relative;clear:left;float:none;"><img src="http://via.placeholder.com/1000x150?text=full+banner+1000x150" style="display:block;width:100%;height:150px;margin:0 auto;"/></li> <li style="display:block;width:100%;height:auto;box-sizing:border-box;list-style:none;padding:15px;margin:0 auto;border:1px solid #ccc;text-align:center;position:relative;clear:left;float:none;">Section 2 Full</li> <li style="display:block;width:33.33%;height:auto;box-sizing:border-box;list-style:none;padding:15px;margin:0 auto;border:1px solid #ccc;text-align:center;position:relative;float:left">Section left 1/3</li> <li style="display:block;width:33.33%;height:auto;box-sizing:border-box;list-style:none;padding:15px;margin:0 auto;border:1px solid #ccc;text-align:center;position:relative;float:left">Section center 1/3</li> <li style="display:block;width:33.33%;height:auto;box-sizing:border-box;list-style:none;padding:15px;margin:0 auto;border:1px solid #ccc;text-align:center;position:relative;float:left">Section right 1/3</li> <li style="display:block;width:33.33%;height:auto;box-sizing:border-box;list-style:none;padding:15px;margin:0 auto;border:1px solid #ccc;text-align:center;position:relative;float:left">Section left 1/3</li> <li style="display:block;width:33.33%;height:auto;box-sizing:border-box;list-style:none;padding:15px;margin:0 auto;border:1px solid #ccc;text-align:center;position:relative;float:left">Section center 1/3</li> <li style="display:block;width:33.33%;height:auto;box-sizing:border-box;list-style:none;padding:15px;margin:0 auto;border:1px solid #ccc;text-align:center;position:relative;float:left">Section right 1/3</li> <li style="display:block;width:33.33%;height:auto;box-sizing:border-box;list-style:none;padding:15px;margin:0 auto;border:1px solid #ccc;text-align:center;position:relative;float:left">Section left 1/3</li> <li style="display:block;width:33.33%;height:auto;box-sizing:border-box;list-style:none;padding:15px;margin:0 auto;border:1px solid #ccc;text-align:center;position:relative;float:left">Section center 1/3</li> <li style="display:block;width:33.33%;height:auto;box-sizing:border-box;list-style:none;padding:15px;margin:0 auto;border:1px solid #ccc;text-align:center;position:relative;float:left">Section right 1/3</li> <li style="display:block;width:100%;height:auto;box-sizing:border-box;list-style:none;padding:15px;margin:0 auto;border:1px solid #ccc;text-align:center;position:relative;clear:left;float:none;"><img src="http://via.placeholder.com/1000x150?text=full+banner+1000x150" style="display:block;width:100%;height:150px;margin:0 auto;"/></li> <li style="display:block;width:50%;height:auto;box-sizing:border-box;list-style:none;padding:15px;margin:0 auto;border:1px solid #ccc;text-align:center;position:relative;float:left">Section left Half</li> <li style="display:block;width:50%;height:auto;box-sizing:border-box;list-style:none;padding:15px;margin:0 auto;border:1px solid #ccc;text-align:center;position:relative;float:left">Section right Half</li> <li style="display:block;width:100%;height:auto;box-sizing:border-box;list-style:none;padding:15px;margin:0 auto;border:1px solid #ccc;text-align:center;position:relative;clear:left;float:none;"><img src="http://via.placeholder.com/1000x150?text=full+banner+1000x150" style="display:block;width:100%;height:150px;margin:0 auto;"/></li> <li style="display:block;width:100%;height:auto;box-sizing:border-box;list-style:none;padding:15px;margin:0 auto;border:1px solid #ccc;text-align:center;position:relative;clear:left;float:none;">Section 4 Full</li> <li style="display:block;width:100%;height:auto;box-sizing:border-box;list-style:none;padding:15px;margin:0 auto;border:1px solid #ccc;text-align:center;position:relative;clear:left;float:none;">Section 5 Full</li> </ul>

Editing Tips

The above demo is using % values which makes the layout semi-responsive. Try to shrink the browser to see the result
When adding your graphics (images) use the inline CSS to style them up and you can use the same % value in order to make them responsive
<img src="http://via.placeholder.com/1000x450" style="display:block;width:100%;height:auto;margin:0 auto;"/>
After you are done with editing, in order to better position the layout use the margin CSS attribute (read more aboyt better bio positioning on this topic)

Customize the sections

To change the background color search for the #f1f1f1 in the source code
<ul style="display:block;width:100%;height:auto;list-style:none;box-sizing:border-box;padding:0;border:0px solid #ccc;background-color:#f1f1f1;color:#777;font-size:19px;font-weight:normal;text-align:center;margin:120px auto 30px 14px;z-index:9999;"/>
Images can be used to replace the background color
Remove the borders. Each element/section is using border attribute. You can remove or change this attribute by editing the sources code
border:1px solid #ccc;
To delete a section, simply remove the code.
Resize a section by changing the width attribute via source code
Remove or change the padding attribute editing the source code

For more templates and other resources feel free to visit the #1 bio editing online service provided by Camgirl Live Editor