((Java))

 $("#tab1").click(function(){
$("#page1") .delay(0) .animate({opacity: '1'}, 0, 'linear');
$("#page1") .delay(0) .animate({left: '36.05%'}, 0, 'linear');
$("#page2") .delay(0) .animate({opacity: '0'}, 0, 'linear');
$("#page2") .delay(0) .animate({left: '100%'}, 0, 'linear');
$("#page3") .delay(0) .animate({opacity: '0'}, 0, 'linear');
$("#page3") .delay(0) .animate({left: '100%'}, 0, 'linear');
$("#page4") .delay(0) .animate({opacity: '0'}, 0, 'linear');
$("#page4") .delay(0) .animate({left: '100%'}, 0, 'linear');
});

$("#tab2").click(function(){
$("#page2") .delay(0) .animate({opacity: '1'}, 0, 'linear');
$("#page2") .delay(0) .animate({left: '36.05%'}, 0, 'linear');
$("#page1") .delay(0) .animate({opacity: '0'}, 0, 'linear');
$("#page1") .delay(0) .animate({left: '100%'}, 0, 'linear');
$("#page3") .delay(0) .animate({opacity: '0'}, 0, 'linear');
$("#page3") .delay(0) .animate({left: '100%'}, 0, 'linear');
$("#page4") .delay(0) .animate({opacity: '0'}, 0, 'linear');
$("#page4") .delay(0) .animate({left: '100%'}, 0, 'linear');
});

$("#tab3").click(function(){
$("#page3") .delay(0) .animate({opacity: '1'}, 0, 'linear');
$("#page3") .delay(0) .animate({left: '36.05%'}, 0, 'linear');
$("#page1") .delay(0) .animate({opacity: '0'}, 0, 'linear');
$("#page1") .delay(0) .animate({left: '100%'}, 0, 'linear');
$("#page2") .delay(0) .animate({opacity: '0'}, 0, 'linear');
$("#page2") .delay(0) .animate({left: '100%'}, 0, 'linear');
$("#page4") .delay(0) .animate({opacity: '0'}, 0, 'linear');
$("#page4") .delay(0) .animate({left: '100%'}, 0, 'linear');
});

$("#tab4").click(function(){
$("#page4") .delay(0) .animate({opacity: '1'}, 0, 'linear');
$("#page4") .delay(0) .animate({left: '36.05%'}, 0, 'linear');
$("#page1") .delay(0) .animate({opacity: '0'}, 0, 'linear');
$("#page1") .delay(0) .animate({left: '100%'}, 0, 'linear');
$("#page2") .delay(0) .animate({opacity: '0'}, 0, 'linear');
$("#page2") .delay(0) .animate({left: '100%'}, 0, 'linear');
$("#page3") .delay(0) .animate({opacity: '0'}, 0, 'linear');
$("#page3") .delay(0) .animate({left: '100%'}, 0, 'linear');
});

$("body").mouseover(function(){
    var audio = document.getElementById("audio");
       audio.play();
  audio.volume = .15;
});


((CSS))

@import url('https://fonts.googleapis.com/css2?family=Righteous&family=Sniglet');
body {
background: radial-gradient(circle, rgba(254,217,146,1) 0%, rgba(254,217,146,1) 80%, rgba(63,45,61,1) 100%);
overflow: hidden;
}

#tab1 {
position: absolute;
margin: auto;
left: 32.3%;
bottom: 51.5%;
}

#tab2 {
position: absolute;
margin: auto;
left: 29.5%;
bottom: 39.5%;
}

#tab3 {
position: absolute;
margin: auto;
left: 69.6%;
bottom: 51.5%;
}

#tab4 {
position: absolute;
margin: auto;
left: 66.8%;
bottom: 39.5%;
}

.tab {
height: 8%;
width: .5%;
background-color: #FED992;
outline: .2vw solid #000;
border: .2vw solid #fff;
transform: skew(-25deg, -10deg);
cursor: pointer;
z-index: 10;
}

.tab:hover {
background-color: 241C28;
}

#pic1 {
left: 36.5%;
}

#pic1 div {
position: absolute;
margin: auto;
left: 0; right: 0;
bottom: 0; top: 0;
height: 95%;
width: 93%;
background-image:url(https://i.imgur.com/BLdEyRK.jpg);
background-size: 200% auto;
background-position: 100% 0%;
clip-path: polygon(26% 0%, 100% 0%, 74% 100%, 0% 100%);
}

#pic2 {
left: 40.5%;
}

#pic2 div {
position: absolute;
margin: auto;
left: 0; right: 0;
bottom: 0; top: 0;
height: 95%;
width: 93%;
background-image:url(https://i.imgur.com/WET5woq.jpg);
background-size: 200% auto;
background-position: 50% 20%;
clip-path: polygon(26% 0%, 100% 0%, 74% 100%, 0% 100%);
}

#pic3 {
left: 44.5%;
}

#pic3 div {
position: absolute;
margin: auto;
left: 0; right: 0;
bottom: 0; top: 0;
height: 95%;
width: 93%;
background-image:url(https://i.imgur.com/vkLmHfv.jpg);
background-size: 200% auto;
background-position: 80% 10%;
clip-path: polygon(26% 0%, 100% 0%, 74% 100%, 0% 100%);
}

#pic4 {
left: 48.5%;
}

#pic4 div {
position: absolute;
margin: auto;
left: 0; right: 0;
bottom: 0; top: 0;
height: 95%;
width: 93%;
background-image:url(https://i.imgur.com/dp6WNij.png);
background-size: 200% auto;
background-position: 60% 20%;
clip-path: polygon(26% 0%, 100% 0%, 74% 100%, 0% 100%);
}

.pic {
position: absolute;
margin: auto;
left: 46%;
bottom: 66.5%;
height: 8%;
width: 4%;
background-color: #000;
clip-path: polygon(26% 0%, 100% 0%, 74% 100%, 0% 100%);
z-index: 9;
}

#page1 {
position: absolute;
margin: auto;
left: 36.05%;
opacity: 1;
}

#page2 {
position: absolute;
margin: auto;
left: 100%;
opacity: 0;
}

#page3 {
position: absolute;
margin: auto;
left: 100%;
opacity: 0;
}

#page4 {
position: absolute;
margin: auto;
left: 100%;
opacity: 0;
}

.floof {
bottom: 35.5%;
height: 28.9%;
width: 27.6%;
background-color: #fff;
border-left: .2vw solid #000;
border-right: .2vw solid #000;
z-index: 8;
}

.floof div {
position: absolute;
margin: auto;
left: 0; right: 0;
bottom: 0; top: 0;
height: 90%;
width: 95%;
text-align: justify;
font-family: Righteous;
font-size: 1.20vw;
color: white;
font-weight: 900;
-webkit-text-stroke: .01vw #000;
padding: .5vw;
overflow: auto;
}

.tri {
position: absolute;
margin: auto;
height: 25.5%;
width: 5.8%;
z-index: 8;
}

#triL {
bottom: 38.3%;
left: 64.3%;
clip-path: polygon(0 100%, 0 0, 100% 0);
background-color: F26FAA;
}

#triR {
bottom: 36%;
left: 30%;
clip-path: polygon(0 100%, 100% 100%, 100% 0);
background-color: 9867A7;
}

.textb {
position: absolute;
margin: auto;
left: 0; right: 0;
transform: skew(-25deg);
}

#text2 {
bottom: 35.4%;
height: 29%;
width: 34.6%;
background-color: #fff;
z-index: 7;
}

#text1 {
bottom: 35%;
height: 30%;
width: 35%;
background-color: #000;
z-index: 6;
}

.title {
position: absolute;
margin: auto;
bottom: 68.5%;
left: 52.5%;
height: 10%;
width: 35%;
font-family: Sniglet;
font-size: 7vw;
color: white;
-webkit-text-stroke: .2vw #000;
z-index: 5;
}

.main {
position: absolute;
margin: auto;
bottom: 0;
right: 65%;
height: 80%;
width: 35%;
background-image:url(https://i.imgur.com/QUTpu5q.png);
background-size: auto 100%;
background-postion: center;
background-repeat: no-repeat;
z-index: 4;
}

.back {
position: absolute;
margin: auto;
bottom: 0; top: 0;
left: 0; right: 0;
height: 100%;
background-image:url();
background-size: auto 100%;
background-postion: center;
background-repeat: no-repeat;
transform: skew(-30deg);
}

#b1 {
width: 50%;
background-color: 9867A7;
z-index: 3;
}

#b2 {
width: 60%;
background-color: F26FAA;
z-index: 2;
}

#b3 {
width: 63%;
background-color: #fff;
z-index: 1;
}

#b4 {
width: 63.5%;
background-color: #000;
z-index: 0;
}

.trash {
position: absolute;
margin: auto;
top: 94%;
left: 96%;
background-image:url(https://i.imgur.com/gVPGFpz.png);
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
height: 5%;
width: 5%;
cursor: pointer;
z-index: 100;
}

::-webkit-scrollbar {
width: .5vw;
}
::-webkit-scrollbar-track {
background-color:transparent;
}
::-webkit-scrollbar-thumb {
background-color: transparent;
background-image:url(https://i.imgur.com/VdAWYla.png);
background-size: 100% auto;
background-position: center;
}

h1 {
margin-top: 1vw;
margin-bottom: 1vw;
margin-left: 1vw;
font-family: Sniglet;
font-size: 3vw;
color: white;
-webkit-text-stroke: .02vw #000;
}

ul.a {
margin: 0;
}

u {
color: #9867A7;
}

b {
font-weight: 900;
}

a:link {
color: #F26FAA;
 text-decoration: none;
font-variant: small-caps;
}

a:hover {
  color: #FED992;
}

big {
font-size: 2vw;
font-variant: small-caps;
}

small {
font-size: 1vw;
font-variant: small-caps;
}

#g {
position: relative;
margin: .5vw;
background-color: #000;
height: 36%;
width: 33%;
border: .2vw solid #000;
transition: all .5s ease-in-out;
}

#g:hover {
border: .2vw solid #FED992;
 transition: all .5s ease-in-out;
}

::selection {color: #FED992; background-color:none; }
::-moz-selection {color: #FED992; background-color:none; }

((HTML))

 <audio id="audio" src="https://od.lk/s/ODVfMTY3MDY3NTlf/Playlist.mp3" ></audio>
<div class="floof" id="page1"><div>

<h1> PAGE 1 </h1>

<center><center><div style=" width: 80%; overflow: visible; position: relative;">
Given name: <font style=float:right>Arima</font><br>
Gender: <font style=float:right>Female</font><br>
Age: <font style=float:right>21</font><br>
Height: <font style=float:right>175cm</font><br>
Race: <font style=float:right>Tailclops<br></font><br>
Orientation: <font style=float:right>Bisexual</font><br>
Marital Status: <font style=float:right><a target="_blank" href="LINK HERE">Single</a></font></div></center><br></center>

</div></div>

<div class="floof" id="page2"><div>

<h1> PAGE 2 </h1>

Arima is the opposite of Ansel. She is an extrovert and overall sexual deviant towards anything breathing. Her overall morals are close to none and have little weight in her soul (if she still has one.) However, her caring nature towards her little sister is about as nice as she'll get, Ansel is her verbal punching bag and anyone who upsets her sister will be the physical one. Despite this, a hot guy might get dragged into a dark room with him, or a cute one, both are very similar. Other than teasing her victims of sexual assault, she likes scary movies and being active, despite not having a job. Her overall hatred towards boring guys and commitment are displayed more frequently then her hatred towards lovey-dovey couples. Finally, she is easily told apart from Ansel due to her lower lip being pierced, along with both nipples and a heart tattoo near the base of her tail. Watch out, her libido hasn't been matched yet, but someone will come along, eventually.

</div></div>

<div class="floof" id="page3"><div>

<h1> PAGE 3 </h1>

<center><div style=" width: 80%; overflow: visible; position: relative;">
<a target="_blank" href="PROFILE LINKE"><div id="g" style="float: left; background-image:url(https://i.imgur.com/xBtWliN.png); background-size: 100% auto; background-position: center;"></div></a>

<a target="_blank" href=" PROFILE LINK"><div id="g" style="float: right; background-image:url(https://i.imgur.com/Wwlf8So.jpg); background-size: 100% auto; background-position: center;"></div></a>

<a target="_blank" href="PROFILE LINKE"><div id="g" style="float: left; background-image:url(https://i.imgur.com/A9Lxm7q.jpg); background-size: 100% auto; background-position: center;"></div></a>

<a target="_blank" href=" PROFILE LINK"><div id="g" style="float: right; background-image:url(https://i.imgur.com/EZkyMLb.jpg); background-size: 100% auto; background-position: center;"></div></a>

<a target="_blank" href="PROFILE LINKE"><div id="g" style="float: left; background-image:url(https://i.imgur.com/hRsqqnO.jpg); background-size: 100% auto; background-position: center;"></div></a>

<a target="_blank" href=" PROFILE LINK"><div id="g" style="float: right; background-image:url(https://i.imgur.com/8MYmdht.jpg); background-size: 100% auto; background-position: center;"></div></a>

</div></center>

</div></div>

<div class="floof" id="page4"><div>

<h1> PAGE 4 </h1>

<ul class="a">
<li>Pm friendly</li>
<li>Starting with a post will get you better results for a response
</li>
<li>I'm always IC
</li>
<li>Shit post to Novella
</li>
<li>Story, Smut, I don't care
</li>
<li><a target="_blank" href="https://www.f-list.net/c/sexysexsexlist/"><b>F-List</b></a></li>
<li><a target="_blank" href="https://imgur.com/a/Zf8iq"><b>Gallery</b></a></li>

<br></ul>

</div></div>
<div class="tab" id="tab1"></div>
<div class="tab" id="tab2"></div>
<div class="tab" id="tab3"></div>
<div class="tab" id="tab4"></div>
<a target="_blank" href="https://roleplay.chat/profile.php?user=Raccoon" target="_blank"><div class="trash" title="Trash Codes"></div></a>
<a target="_blank" href="https://i.imgur.com/BLdEyRK.jpg"><div class="pic" id="pic1"><div></div></div></a>
<a target="_blank" href="https://i.imgur.com/WET5woq.jpg"><div class="pic" id="pic2"><div></div></div></a>
<a target="_blank" href="https://i.imgur.com/vkLmHfv.jpg"><div class="pic" id="pic3"><div></div></div></a>
<a target="_blank" href="https://i.imgur.com/dp6WNij.png"><div class="pic" id="pic4"><div></div></div></a>
<div class="tri" id="triR"></div>
<div class="tri" id="triL"></div>
<div class="textb" id="text2"></div>
<div class="textb" id="text1"></div>
<div class="title">Arima</div>
<div class="main"></div>
<div class="back" id="b1"></div>
<div class="back" id="b2"></div>
<div class="back" id="b3"></div>
<div class="back" id="b4"></div>