Video tutorial part 1 | Learn 2 Code DIY

Video Tutorial - Part 1

CODING CUSTOM CHATURBATE BIO DESIGN (PART 1)

HTML MARKUP

Learn how to code and customize a Chaturbate bio design.

Part 1 of this material is showing how to create the web page (works offline), how to code the main ul element to hold your design.

Additionally, in this video you can see how to add a background image, add a custom header image, About Me and My Room Rules editable boxes.

Markup code used in this video material:

Markup:

<ul id="main" style="display:block;width:100%;min-width:300px;height:auto;padding:0;box-sizing:border-box;list-style:none;line-height:normal;font-weight:normal;background-color:#000;background-image:url(https://d31rb55u3y3kjs.cloudfront.net/c/u/520476279851687b6dabcc7189410390/2019/04/03055316/3e88c9581b67e9bd506ae792a6074247.png);background-repeat:no-repeat;background-size:cover;background-position:center center;background-attachment:fixed;margin:120px auto 50px -14px;">
<li style="display:block;width:100%;height:auto;padding:20px 0 22px;box-sizing:border-box;list-style:none;float:none;clear:left;margin:0 auto;text-align:center;"><img src="https://d31rb55u3y3kjs.cloudfront.net/c/u/520476279851687b6dabcc7189410390/2019/01/09110715/g1.jpg" style="display:block;width:70%;height:auto;margin:12px auto 22px auto;border:5px solid #fff;"/></li>
<li style="display:block;width:100%;height:auto;padding:0;box-sizing:border-box;list-style:none;float:none;clear:left;margin:0 auto;text-align:center;font-family:sans-serif;"><ul style="display:block;width:80%;height:auto;padding:20px 0 22px;box-sizing:border-box;list-style:none;float:none;clear:left;margin:0 auto;text-align:center;background-color:rgba(0,0,0,.70);-webkit-border-radius:20px;border-radius:20px;-webkit-box-shadow:0 0 30px #000;box-shadow:0 0 30px #000;border:1px solid #333;"><li style="display:block;width:90%;height:auto;padding:0;box-sizing:border-box;list-style:none;float:none;clear:left;margin:12px auto 14px auto;text-align:center;">About MeLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li></ul></li>
<li style="display:block;width:100%;height:auto;padding:0;box-sizing:border-box;list-style:none;float:none;clear:left;margin:20px auto 22px auto;text-align:center;font-family:sans-serif;color:#999;"><ul style="display:block;width:80%;height:auto;padding:20px 0 22px;box-sizing:border-box;list-style:none;float:none;clear:left;margin:0 auto;text-align:center;background-color:rgba(0,0,0,.70);-webkit-border-radius:20px;border-radius:20px;-webkit-box-shadow:0 0 30px #000;box-shadow:0 0 30px #000;border:1px solid #333;"><li style="display:block;width:90%;height:auto;padding:0;box-sizing:border-box;list-style:none;float:none;clear:left;margin:12px auto 14px auto;text-align:center;">My Room Rules</li><li style="display:block;width:40%;height:auto;padding:0;box-sizing:border-box;list-style:none;float:left;margin:0 auto;text-align:center;font-family:sans-serif;"><img src="https://d31rb55u3y3kjs.cloudfront.net/c/u/520476279851687b6dabcc7189410390/2019/02/09082941/model_aimage.png" style="display:block;width:100%;height:auto;float:none;clear:left;"/></li><li style="display:block;width:60%;height:auto;padding:0;box-sizing:border-box;list-style:none;float:left;margin:0 auto;text-align:center;font-family:sans-serif;">Add your custom Room Rules text here / one per line will look goodAdd your custom Room Rules text here / one per line will look goodAdd your custom Room Rules text here / one per line will look goodAdd your custom Room Rules text here / one per line will look goodAdd your custom Room Rules text here / one per line will look good</li><li style="display:block;width:100%;height:0px;float:none;clear:left;box-sizing:border-box;list-style:none;margin:0 auto;opacity:0;overflow:hidden;">cgc divider - clearfix</li></ul></li></ul>

test this markup code