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