Coding Chaturbate Bio design part 1

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.

by Dan N

HTML

<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;"><p style="display:block;width:90%;height:auto;margin:0 auto;padding:10px;text-align:center;line-height:normal;font-size:33px;color:#666;text-shadow:0 2px 5px #000;">About Me</p><p style="display:block;width:90%;height:auto;margin:0 auto;padding:10px;text-align:left;line-height:normal;font-size:19px;color:#999;text-shadow:0 1px 2px #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,...

CSS

/*** No need for CSS 
 This is here just to help better display in jsfiddle.net
  Only HTML box is the one you should focus on
***/
body { margin: 0 auto; width: 87%; }
#main { margin: 120px auto 50px -14px!important; }

Vue

[]