Coding Chaturbate Bio design part 1

Learn how to code and customize a Chaturbate bio design. Part 3 of this material is showing how to create and code custom fully editable sections In this video you can see how to add Gift Cards section and floating icons for Twitter, Amazon Wishlist and Chaturbate Wishlist

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...

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

[]