Jump to content
  • Bang Bang Bang

       (0 reviews)

    This is probably my most intensive code - it seeks to emulate the app V-Live! Please review ❤️


    Actual Template Not Responsive



    Name Here

    Follower Count

    Title Here
    Name Here
    Posted (Date)
    Transcript of their video goes here! YOu can do this any way you want to tbh! It can be super long, super short, highlights, whatever you want! It scrolls, sooooo... This is italics! This is bold! This is bold italics!
    breaking does this, while

    paragraph breaks do this!

    Title Here
    Name Here
    Posted (Date)
    Transcript of their video goes here! YOu can do this any way you want to tbh! It can be super long, super short, highlights, whatever you want! It scrolls, sooooo... This is italics! This is bold! This is bold italics!
    breaking does this, while

    paragraph breaks do this!

    Title Here
    Name Here
    Posted (Date)
    Transcript of their video goes here! YOu can do this any way you want to tbh! It can be super long, super short, highlights, whatever you want! It scrolls, sooooo... This is italics! This is bold! This is bold italics!
    breaking does this, while

    paragraph breaks do this!

    Template code

    <link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
    <style>.phone {width: 500px; height: 740px; position: relative; background-image: url(https://images.rpginitiative.com/uploads/monthly_2018_07/large_bbb1.png.4793901664cdbdaf8ca93b84e6d04340.png); background-size: 100%;} .screen {background: white; height: 513px; width: 296px; position: absolute; top: 102px; left: 102px; overflow: auto;} .phoneline {position: absolute; width: 292px; top: 83px; left: 105px; z-index: 2} .header {position: absolute; width: 292px; height: 120px; background: white;} .menubuttonv {position: absolute; height: 15px; width: 15px; top: 5px; left: 5px; z-index: 3;} .sharebutton {position: absolute; height: 14px; top: 4px; left: 255px; z-index: 3;} .homebutton {position: absolute; height: 17px; top: 2px; left: 230px; z-index: 3;} .otherbutton {position: absolute; height: 15px; top: 5px; left: 205px; z-index: 3;} .avatarbox {z-index: 2; height: 85px; width: 85px; border-radius: 100%; position: absolute; background: linear-gradient(to bottom, white 0%,white 50%, #fff 50%, #8005C7 50%, #8005C7 100%); background: -moz-linear-gradient(to bottom, white 0%,white 50%, #fff 50%, #8005C7 50%, #8005C7 100%); background: -o-linear-gradient(to bottom, white 0%,white 50%, #fff 50%, #8005C7 50%, #8005C7 100%); background: -webkit-linear-gradient(to bottom, white 0%,white 50%, #fff 50%, #8005C7 50%,#8005C7 100%); top: 70px; left: 103px; border: 0px;} .avatar {position: absolute; height: 79px; width: 79px; border-radius: 100%; top: 3px; left: 3px; border: 0px;} .homebase {background: #1ECFFF; width: 292px; height: 125px; position: absolute; top: 120px; font-family: 'Roboto', sans-serif; color: white; font-size: 10px; line-height: 1; overflow: auto;} .homebase h1 {font-size: 14px; font-weight: normal;} .bar {position: absolute; top: 245px; width: 289px; height: 25px; left: 1px;} .vlives {width: 290px; border-left: 1px solid gray; border-right: 1px solid gray; height: 210px; background: black; position: relative; margin-top: 12px;} .bigpic {width: 290px; height: 175px; position: absolute;} .title {background: white; padding: 5px; width: 280px; height: 25px; position: absolute; top: 175px; border-bottom: 1px solid #dfdfdf;font-family: 'Roboto', sans-serif; text-align: left; font-size: 14px;} .smallavatar {position: absolute; border-radius: 100%; border: 2px solid white; height: 50px; width: 50px; top: 2px; left: 2px;} .name {position: absolute; font-family: 'Roboto', sans-serif; font-size: 12px; color: white; text-align: left; top: 20px; left: 60px;} .name i {font-size: 10px;} .transcript {width: 270px; height: 155px; background: rgba(200,200,200,.9); position: absolute; padding: 10px; text-align: justify; font-family: serif; font-size: 11px; opacity: 0; transition: .7s ease-in-out; -webkit-transition: .7s ease-in-out; -moz-transition: .7s ease-in-out;-o-transition: .7s ease-in-out; overflow: auto} .transcript:hover {opacity: 1; transition: .7s ease-in-out; -webkit-transition: .7s ease-in-out; -moz-transition: .7s ease-in-out;-o-transition: .7s ease-in-out;}</style><center><div class="phone"><div class="phoneline"><img src="https://images.rpginitiative.com/uploads/monthly_2018_07/large_bbb2.png.16874e6056e682513f35ab5b168b515e.png" style="width: 100%;"></div><div class="screen"><a href="https://rpginitiative.com/profile/2592-penny/"><div class="sharebutton"><img src="https://images.rpginitiative.com/uploads/monthly_2018_07/large_bb3.png.d3556c0b8922743b32727379b7f2eb43.png" style="height: 100%;"></div><div class="homebutton"><img src="https://images.rpginitiative.com/uploads/monthly_2018_07/large_bbb4.png.100f5fda255c70509fe41a1472c4735e.png" style="height: 100%;"></div><div class="otherbutton"><img src="https://images.rpginitiative.com/uploads/monthly_2018_07/large_bbb5.png.276cff59d9fc780a60e883d9870bb027.png" style="height: 100%;"></div><div class="menubuttonv"><img src="https://images.rpginitiative.com/uploads/monthly_2018_07/large_bbb6.png.c33942ab35d9742c9e84fd68a1110abc.png" style="width: 100%;"></div></a><div class="bar"><img src="https://images.rpginitiative.com/uploads/monthly_2018_07/large_bbb7.png.cff4eae1bf4f60204e5e405d590997a1.png" style="width: 100%; height: 100%;"></div>
    
    <div class="header"><img src="https://placehold.it/292x120" style="height: 100%; width: 100%;"></div>
    <div class="avatarbox"><div class="avatar"><img src="https://placehold.it/79" style="width: 100%; height: 100%; border-radius: 100%;"></div></div>
    
    <div class="homebase"><h1><br><br>Name Here</h1>
    <img src="https://images.rpginitiative.com/uploads/monthly_2018_07/large_bbb8.png.8a926e6275e1b4b81092f491b39515c0.png" style="height: 10px;">Follower Count<br><br><img src="https://images.rpginitiative.com/uploads/monthly_2018_07/large_bbb9.png.a74c2d0b3725e1878c0cf4e58ccbb579.png" style="height: 25px;"> <img src="https://images.rpginitiative.com/uploads/monthly_2018_07/large.bbb10.png.8489585516629daa86ed47e1b16678a6.png" style="height: 25px;"> <img src="https://images.rpginitiative.com/uploads/monthly_2018_07/large_bbb5.png.276cff59d9fc780a60e883d9870bb027.png" style="height: 25px"></div>
    
    <div class="vlives" style="margin-top: 271px;"><div class="bigpic"><img src="https://placehold.it/290x175"></div>
    
     <div class="title">Title Here</div>
     <div class="smallavatar"><img src="https://placehold.it/50" style="height: 100%; border-radius: 100%"></div>
     <div class="name">Name Here<br><i>Posted (Date)</i></div>
     <div class="transcript">Transcript of their video goes here! YOu can do this any way you want to tbh! It can be super long, super short, highlights, whatever you want! It scrolls, sooooo... <i>This is italics!</i> <b>This is bold!</b> <b><i>This is bold italics!</i></b><br>breaking does this, while<p>paragraph breaks do this!</div></div>
    <div class="vlives"><div class="bigpic"><img src="https://placehold.it/290x175"></div>
     <div class="title">Title Here</div>
     <div class="smallavatar"><img src="https://placehold.it/50" style="height: 100%; border-radius: 100%"></div>
     <div class="name">Name Here<br><i>Posted (Date)</i></div>
     <div class="transcript">Transcript of their video goes here! YOu can do this any way you want to tbh! It can be super long, super short, highlights, whatever you want! It scrolls, sooooo... <i>This is italics!</i> <b>This is bold!</b> <b><i>This is bold italics!</i></b><br>breaking does this, while<p>paragraph breaks do this!</div></div>
    <div class="vlives"><div class="bigpic"><img src="https://placehold.it/290x175"></div>
     <div class="title">Title Here</div>
     <div class="smallavatar"><img src="https://placehold.it/50" style="height: 100%; border-radius: 100%"></div>
     <div class="name">Name Here<br><i>Posted (Date)</i></div>
     <div class="transcript">Transcript of their video goes here! YOu can do this any way you want to tbh! It can be super long, super short, highlights, whatever you want! It scrolls, sooooo... <i>This is italics!</i> <b>This is bold!</b> <b><i>This is bold italics!</i></b><br>breaking does this, while<p>paragraph breaks do this!</div></div>
    </div></center>



    User Feedback

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.

    Guest

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.