"layout"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/NoxNyx/pen/pboKap?depth=everything&order=popularity&page=27&q=skype&show_forks=false" /> <style class="cp-pen-styles">undefined</style></head><body> <head> <link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'> <style type="text/css"> .logo_div, .fpix_header, .topad, .fpix_asl_table, .profile_text, .nc_profile, #left_container, #profilephoto, #flash_close_butt, #start_chat_but, .uppermenu, #buyers_ad, #flashcontent, .yellow_but, .bottombar, .byline, .top-links { visibility: hidden; display: none;} body{background-color: #F5f5f5;} ::-webkit-scrollbar { width: 11px; } ::-webkit-scrollbar-track-piece { background-color: #CCC; } ::-webkit-scrollbar-thumb:vertical { width: 1px; border: 5px solid #DDD; background-color: #FFF; } ::-webkit-scrollbar:horizontal { height: 11px; } ::-webkit-scrollbar-thumb:horizontal { width: 1px; border: 5px solid #DDD; background-color: #FFF; } b{color: #AAA;} i{color: #BBB;} u{text-decoration: none; border-bottom: 1px solid #CCC;} strike{color: #DDD;} li{margin-left: 25px;} h1, h2{ font-family: 'Poiret One', cursive; letter-spacing: 2px; margin: 0; padding: 0; } h1{font-size: 12px;} h2{font-size: 9px;} #tupp, #leftSide, #rightSide, #avatarbox{ position: absolute; border: 1px solid #DDD; -webkit-filter: grayscale(100%); } #tupp{ position: fixed; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 900px; height: 500px; border: none; } #leftSide, #rightSide{ height: 400px; width: 432px; bottom: 10px; } #leftSide, #rightSide{background-color: #FFF;} #leftSide{left: 10px;} #rightSide{right: 10px;} #avatarbox{ right: 10px; top: 10px; width: 150px; height: 150px; background-color: #FFF; overflow: hidden; } #avatarbox img{ margin: 10px 0 0 10px;/* T ? ? L */ height: 130px; border: 0; background-color: #CCC; } #title{ position: absolute; left: 0; right: 0; top: 0; margin: 10px 0; text-align: center; font-size: 50px; font-family: 'Poiret One', cursive; color: #CCC; text-transform: uppercase; letter-spacing: 1px; } #smallBio{ position: absolute; right: 10px; bottom: 10px; border: 1px solid #DDD; height: 215px; width: 150px; overflow: hidden; } #bigBio{ position: absolute; left: 10px; top: 10px; width: 245px; height: 378px; border: 1px solid #DDD; overflow: auto; } .text{ margin: 10px; text-align: right; text-transform: uppercase; font-family: Calibri; font-size: 10px; text-align: justify; color: #BBB; } #smallBio{ text-align: right; text-transform: uppercase; font-family: Calibri; font-size: 10px; text-align: justify; color: #BBB; } #smallBio .text b{ text-transform: uppercase; display: inline-block; width: 40px; padding-right: 10px; text-align: right; width: 100%; } #friendFooter{ position: absolute; left: 10px; bottom: 10px; border: 1px solid #DDD; width: 400px; padding-right: 10px; height: 100px; white-space: nowrap; overflow-y: hidden; } #friendFooter{overflow-y:hidden;overflow-x:scroll;} .friendBox{ width: 186px; height: 66px; border: 1px solid #CCC; margin: 10px 0 0 10px; display: inline-block; vertical-align: top; font-size: 10px; font-family: Calibri; } .friendIcon{ width: 56px; position: relative; margin-top: 5px; margin-left: 5px; padding-right: 5px; border-right: 1px solid #CCC; filter: grayscale(100%); -webkit-filter: grayscale(100%); } .friendIcon img{width: 100%;} .friendName{ margin-left: 75px; margin-top: -55px; text-transform: uppercase; letter-spacing: 1px; padding-bottom: 5px; color: #AAA; } .friendBio{ margin-left: 70px; margin-top: 2px; font-size: 10px; text-align: center; font-family: calibri; color: #CCC; } #header{ position: absolute; left: 10px; top: 10px; width: 410px; height: 100px; border: 1px solid #DDD; overflow: hidden; } #header img{ position: absolute; margin-left: 10px; margin-top: 10px; width: 390px; -webkit-filter: grayscale(100%); } #mainTextbox{ margin-top: 125px; margin-left: 10px; width: 410px; height: 150px; border: 1px solid #DDD; overflow: auto; } .tag{ width: 125px; height: 26px; margin-top: 10px; margin-bottom: 14px; line-height: 25px; padding-right: 10px; text-align: right; border: 1px solid #CCC; } .tag b{ display: inline-block; text-align: left; position: relative; left: 0; float: left; margin-left: 10px; } /* please don't change/edit or remove the following c: */ #credit{ position: fixed; right: 10px; bottom: 10px; width: 50px; height: 20px; line-height: 20px; overflow: hidden; font-size: 10px; border: 1px solid #EEE; text-align: center; letter-spacing: 2px; font-family: 'Poiret One', cursive; color: #DDD; font-weight: bold; text-transform: uppercase; } #credit:hover{ color: #000; letter-spacing: 3px; background-color: #FFF; border-color: #AAA; } #credit, #creditOne, #creditTwo{ transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; } #credit:hover #creditOne{margin-top: -20px;} #credit:hover{cursor: hand;} </style> </head> <body> <div id="tupp"> <div id="title">Yoko • ERP/Cyber</div> <div id="leftSide"> <div id="header"> <img src="https://i.gyazo.com/2c3fabd9bc566ae37c6cb66b443d47d0.png"> </div> <div id="friendFooter"> <!-- / / / / / F R I E N D / / / / / --> <div class="friendBox"> <div class="friendIcon"> <img src="https://i.gyazo.com/8a0136fd6958c792eb4bf880971f3dd5.png"> <!-- Avatar --> </div> <div class="friendName">Username</div> <!-- Name/Username --> <div class="friendBio"> <!-- Add smaller than 2 lines --> Special slot. Added <br>when I know you. </div> </div> <!-- / / / / / F R I E N D / / / / / --> <div class="friendBox"> <div class="friendIcon"> <img src="https://i.gyazo.com/8a0136fd6958c792eb4bf880971f3dd5.png"> <!-- Avatar --> </div> <div class="friendName">Username</div> <!-- Name/Username --> <div class="friendBio"> <!-- Add smaller than 2 lines --> Special slot. Added <br>when I know you. </div> </div> <!-- / / / / / F R I E N D / / / / / --> <div class="friendBox"> <div class="friendIcon"> <img src="https://i.gyazo.com/8a0136fd6958c792eb4bf880971f3dd5.png"> <!-- Avatar --> </div> <div class="friendName">Username</div> <!-- Name/Username --> <div class="friendBio"> <!-- Add smaller than 2 lines --> Special slot. Added <br>when I know you. <br> </div> </div> <!-- To add more friends, copy the friend segment multiple times, the only limit to the amount is until you hit too much text --> </div> <div id="mainTextbox"> <div class="text"> <h1>OOC Information</h1> <h2>Kinks & Writing Rules</h2> <p> <li>Kinks: <a href="https://www.f-list.net/c/experiment%20667">[LINK]</a> - Not complete. Ask questions if not specified.. <li>Semi-para to para. <li>Keep me interested and I'll keep you happy. ❤ <li>There is no starter post or theme. We can do anything you like. </li> <li>I can play futanari or female. Please request one or the other. <br><br> <h2>About Me</h2> With that out of the way... <li>No, I won't give skype right off the bat.</li> <li>No, you won't see me IRL (unless we're close). </li> <li>I am PM/Chat friendly. Come talk to me!</li> <p>Hi, I'm Ana and I'm 21. Yes, my name is short for Anastasia. I'm your average white girl with a <i>hint</i> of japanese in me. I really like metal, R&B and vaporwave/emotional/aesthetic music. I really want to get into rap but I don't know many artists. Maybe you could become my <b>best</b> friend and share some music with me? <br><br> I am going to school to become a teacher. I plan on teaching the smol kids in elementary because I do enjoy kids. I would like some of my <i>own</i> in the future b-but that's for another time.. <b>>//></b> <br><br> I am not a huge gamer (mainly due to not knowing many games) so I just roleplay and cyber to fill up my hopeless romantic heart. If you have a game you want me to play, just make sure I can get it and I'll try it with ya'. I can't gaurantee I'll be any good.. However, if you have a roleplay group then <b>please</b> link me! </div> </div> </div> <div id="rightSide"> <div id="avatarbox"> <img src="https://i.gyazo.com/d3b7ecb7e1729dee54a0ddf45fe55558.png"> </div> <div id="smallBio"> <center> <div class="tag"><b>Name</b> Yoko</div> <div class="tag"><b>age</b> 18 </div> <div class="tag"><b>Sexuality</b> Bisexual</div> <div class="tag"><b>R/S</b> Single; Not looking</div> <div class="tag"><b>Occupation</b> None</div> </center> </div> <div id="bigBio"> <div class="text"> <h1>Experiment 667</h1> <br> The professor jotted down into his notepad frivolously, taking notes on the girl. She was the first product released since the "perfect" slave, Experiment 666. <br><br> "That is quite the name to live up to, 667. I hope you can." <br><br> He chuckled, teasing the concept that she'd actually be able to answer. Inside of a test tube, the green haired girl had floated. Her bare body was exposed and though the room was filled with many alike, hers was quite the sight. Her plump, perky breasts were just big enough to get a nice handful with a bit of excess portruding through your fingers. They perfectly supported her soft, gentle face. For most perverts, she'd make quite the schoolgirl when they sold her at the auction. <br><br> Though if her tits wouldn't seal the deal, it'd be her round ass. She had a big, round ass. There was no beating the bush (pun intended) around it. In reality she was the ideal girl for any sexual desire and that's how the company made their money. They mass produced ideal slaves and auctioned them to the lonely, desperate rich cunts who attended every month. If you were lucky, you'd get a master who treated you as a bit more than just their cum dump. <br><br> On the other hand, with every girl they created, they gave them each their unique differences or else rarity wouldn't be a thing. Experiment 666 shared every enjoyable quality described already except she had been modified to be more of a neko. 667 on the other hand was given a tail, but she was modified to be more andro in every sense of the term. Aside from the extra pair of receptors on either side of her head, she had markings embedded all along her body. Along with the extra aesthetic, she was also given a quality that none of the other experiments had: The option of being futanari. <br><br> Futanari? Experiment 667 was a transgender? No. She was still fully female but upon her master's request, she could acquire an appendage. This was catered to those who had the desire to receive instead of the constant giving. She would be the perfect switch sex slave. Or at least, that's what the scientists intended on. <br><br> "And the newest from our collection, Experiment 667!" <br><br> The speakers blared across the building and with the cue, the professor put down his notepad. He opened the girl's casing at the push of a button and with that, she was instructed to get out. </div> </div> </div> </div> <!-- Credit to Aly - Please don't change/edit or remove c: --> <a href="https://aly.chatango.com/" target="_blank"> <div id="credit"> <div id="creditOne">thm</div> <div id="creditTwo">Aly</div> </div> </a> </body> </body></html>

Related: See More


Questions / Comments: