Video tutorial part 2 | Learn 2 Code DIY

Video Tutorial - Part 2

EN RO

CODING CUSTOM CHATURBATE BIO DESIGN (PART 2)

HTML MARKUP

Learn how to code and customize a Chaturbate bio design.

Part 2 of this material is showing how to create and code custom fully editable sections

In this video you can see how to add My Tip Menu and Top Tippers section

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>
<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 Tip Menu</li><li style="display:block;width:97%;height:auto;padding:10px 0 22px;box-sizing:border-box;list-style:none;float:none;clear:left;margin:0 auto;text-align:center;font-family:sans-serif;">Add tip request here200 tokensAdd tip request here200 tokensAdd tip request here200 tokensAdd tip request here200 tokensAdd tip request here200 tokensAdd tip request here200 tokensAdd tip request here200 tokensAdd tip request here200 tokensAdd tip request here200 tokens</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>
<li style="display:block;width:100%;height:auto;padding:0;box-sizing:border-box;list-style:none;float:none;clear:left;margin:20px auto 42px 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 Top Tippers</li><li style="display:block;width:97%;height:auto;padding:10px 0 22px;box-sizing:border-box;list-style:none;float:none;clear:left;margin:0 auto;text-align:center;font-family:sans-serif;">Premium UsernamePremium UsernamePremium UsernamePremium UsernamePremium UsernamePremium UsernamePremium UsernamePremium UsernamePremium UsernamePremium UsernamePremium UsernamePremium UsernamePremium UsernamePremium UsernamePremium UsernamePremium UsernamePremium UsernamePremium UsernamePremium UsernamePremium UsernamePremium UsernamePremium UsernamePremium UsernamePremium UsernamePremium UsernamePremium UsernamePremium UsernamePremium UsernamePremium UsernamePremium Username</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