Untitled


<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>
<script src="https://roleplay.chat/jquery.tooltipster.js?v=8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link href="https://roleplay.chat/tooltipster.css" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script defer>
window.onload = function() {

};
</script>
<style>

</style>
</head>
<body>
<style>
@import url('https://fonts.googleapis.com/css?family=Slabo+27px|Fascinate+Inline|Dancing+Script|Kumar+One+Outline');

/ Speech: #FF7BB9 /

.pfor {display: none;}
#profile { background-color: transparent; border: 0px;}

body {
background-color: #000000;
background-repeat: repeat;
background-position: bottom right;
}

#sickbeats {
 position: relative;
 top: -250px;
 left: 10px;
 width: 30px;
 overflow:hidden;}

#title {
 position:fixed;
 color:#E8FFDB;
 font-family: 'Fascinate Inline', cursive;
 font-size:50px;
 text-align:left;
 text-transform:none;
 width:1600;
 top: 10%;
 left: 30%;}

#title2 {
 position:fixed;
 color:#E8FFDB;
 font-family: 'Dancing Script', cursive;
 font-size:100px;
 text-align:left;
 text-transform:none;
 width:1600;
 top: 14%;
 left: 35%;}


::-webkit-scrollbar
{
 width:0px;
 background-color: transparent;}

.perspective {
 -webkit-perspective: 76em;
 perspective: 6000em;
 -webkit-perspective-origin: 50% 50px;
 perspective-origin: 50% 50px;
 width: 494px;
 margin: 0 auto;
 font-family: 'Roboto', sans-serif;
 font-weight: 100;
 color: #fff;
 text-align: center;}

input {
 display: none;}

.tab {
 position: absolute;
 width: 80px;
 height: 65px;
 background: #DECBFD;
 right: 0;
 line-height: 70px;
 font-weight: 300;}

.tab:nth-child(1) {
 top: 199px;
 background: #DECBFD;}

.tab:nth-child(2) {
 top: 267px;
 background: #b1c4ea;}

.tab:nth-child(3) {
 top: 336px;
 background: #f7cbfd;}

.cube {
 position: relative;
 margin: 60px auto 0;
 top: 200px;
 width: 300px;
 height: 200px;
 -webkit-transform-origin: 0 100px;
 transform-origin: 0 100px;
 -webkit-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-transition: -webkit-transform 0.5s ease-in;
 transition: -webkit-transform 0.5s ease-in;
 transition: transform 0.5s ease-in;
 transition: transform 0.5s ease-in, -webkit-transform 0.5s ease-in;}

.tab-content {
 width: 300px;
 height: 200px;
 position: absolute;}

.tab-content h1 {
 font-size: 25px;
 margin: 75px 0 10px;
 font-weight: 300;}

.tab-content p {
 font-size: 12px;}

.tab-content:nth-child(2) {
 -webkit-transform: translateZ(100px);
 transform: translateZ(100px);
 background: #b1c4ea;}

.tab-content:nth-child(1) {
 -webkit-transform: rotateX(-270deg) translateY(-100px);
 transform: rotateX(-270deg) translateY(-100px);
 -webkit-transform-origin: top left;
 transform-origin: top left;
 background: #DECBFD;}

.tab-content:nth-child(3) {
 -webkit-transform: rotateX(-90deg) translateY(100px);
 transform: rotateX(-90deg) translateY(100px);
 -webkit-transform-origin: bottom center;
 transform-origin: bottom center;
 background: #f7cbfd;}

#tab-top:checked ~ .cube {
 -webkit-transform: rotateX(-90deg);
 transform: rotateX(-90deg);}

#tab-front:checked ~ .cube {
 -webkit-transform: rotateX(0deg);
 transform: rotateX(0deg);}

#tab-bottom:checked ~ .cube {
 -webkit-transform: rotateX(90deg);
 transform: rotateX(90deg);}

#pic {
position:absolute;
top: 40px;
left: 60px;}
</style>
</head>
<body>
<body link="#FFFFFF" vlink="#FFFFFF" alink="#FF6600">
<div id="pic"><img src="https://i.imgur.com/HwI5tnK.png" width="">
</div>

<div id="title">
Fuck yeah
<br>
</div>
<div id="title2">
WIP!
</div>

<div class="perspective">
 <label class="tab" for="tab-top">◘</label>
 <label class="tab" for="tab-front">◘./label>
 <label class="tab" for="tab-bottom">◘./label>
 <input type="radio" name="tabs" id="tab-top">
 <input type="radio" name="tabs" id="tab-front">
 <input type="radio" name="tabs" id="tab-bottom">

 <div class="cube">
 <div class="tab-content">
<br><strong><br>
<a target="_blank" href="https://roleplay.chat/profile.php?user=Saul" title="Her guardian angel" target="_blank">Saul</a>
</strong>
 </div>
 <div class="tab-content">
<strong><br>JAQ<BR><br>
Unknown | M | 6'4" | 220lbs | <a target="_blank" href="">SINGLE</a> <BR><br>
STRAIGHT<br><br>
ALIEN | SPY |<br><br>
</strong>


 </div>
 <div class="tab-content">
<strong><br>PM Friendly, please do not start with a post.<br>
Not interested in romance/smut.<br>
Plot heavy.<br>
Act like an asshole and I'll treat you like one.

<br>Code by <a target="_blank" href="https://roleplay.chat/profile.php?user=Percy">Percy</a><br>Used with permission </strong>
 </div>
 </div>
</div>


</body>
</html>