Gora

$("#mainone").click(function(){
$("#mainone").delay(0) .animate({opacity: '0'}, 500, 'linear');
$("#mainone").delay(500) .animate({left: '100%'}, 0, 'linear');
$("#maintwo").delay(0) .animate({opacity: '1'}, 500, 'linear');

$("#left").delay(0) .animate({left: '0%'}, 1000, 'linear');
$("#right").delay(0) .animate({right: '0%'}, 1000, 'linear');

$("#textL").delay(0) .animate({left: '6%'}, 1000, 'linear');
$("#textR").delay(0) .animate({right: '6%'}, 1000, 'linear');

$("#tfel").delay(0) .animate({left: '6.2%'}, 1000, 'linear');
$("#thgir").delay(0) .animate({right: '6.2%'}, 1000, 'linear');

$("#oneleft").delay(0) .animate({left: '2%'}, 1000, 'linear');
$("#oneleft").delay(1) .animate({opacity: '1'}, 1000, 'linear');

$("#oneright").delay(0) .animate({right: '2%'}, 1000, 'linear');
$("#oneright").delay(1) .animate({opacity: '1'}, 1000, 'linear');

$("#butl1").delay(0) .animate({left: '11%'}, 1000, 'linear');
$("#butl2").delay(0) .animate({left: '20%'}, 1000, 'linear');

$("#butr1").delay(0) .animate({right: '20%'}, 1000, 'linear');
$("#butr2").delay(0) .animate({right: '11%'}, 1000, 'linear');

  $(this).addClass('clicked');
    var audio = document.getElementById("audio");
       audio.play();
  audio.volume = .4;

});

$("#butl1").click(function(){
$("#tfel").delay(0) .animate({left: '6.2%'}, 0, 'linear');
$("#tfel").delay(1) .animate({opacity: '1'}, 0, 'linear');

$("#oneleft").delay(0) .animate({left: '2%'}, 0, 'linear');
$("#oneleft").delay(1) .animate({opacity: '1'}, 0, 'linear');

$("#twoleft").delay(0) .animate({opacity: '0'}, 0, 'linear');
$("#twoleft").delay(0) .animate({left: '100%'}, 0, 'linear');

$("#tfel2").delay(0) .animate({opacity: '0'}, 0, 'linear');
$("#tfel2").delay(0) .animate({left: '100%'}, 0, 'linear');
});

$("#butl2").click(function(){
$("#tfel2").delay(0) .animate({left: '6.2%'}, 0, 'linear');
$("#tfel2").delay(1) .animate({opacity: '1'}, 0, 'linear');

$("#twoleft").delay(0) .animate({left: '2%'}, 0, 'linear');
$("#twoleft").delay(1) .animate({opacity: '1'}, 0, 'linear');

$("#oneleft").delay(0) .animate({opacity: '0'}, 0, 'linear');
$("#oneleft").delay(0) .animate({left: '100%'}, 0, 'linear');

$("#tfel").delay(0) .animate({opacity: '0'}, 0, 'linear');
$("#tfel").delay(0) .animate({left: '100%'}, 0, 'linear');
});

$("#butr1").click(function(){
$("#thgir").delay(0) .animate({right: '6.2%'}, 0, 'linear');
$("#thgir").delay(1) .animate({opacity: '1'}, 0, 'linear');

$("#oneright").delay(0) .animate({right: '2%'}, 0, 'linear');
$("#oneright").delay(1) .animate({opacity: '1'}, 0, 'linear');

$("#tworight").delay(0) .animate({opacity: '0'}, 0, 'linear');
$("#tworight").delay(0) .animate({right: '100%'}, 0, 'linear');

$("#thgir2").delay(0) .animate({opacity: '0'}, 0, 'linear');
$("#thgir2").delay(0) .animate({right: '100%'}, 0, 'linear');
});

$("#butr2").click(function(){
$("#thgir2").delay(0) .animate({right: '6.2%'}, 0, 'linear');
$("#thgir2").delay(1) .animate({opacity: '1'}, 0, 'linear');

$("#tworight").delay(0) .animate({right: '2%'}, 0, 'linear');
$("#tworight").delay(1) .animate({opacity: '1'}, 0, 'linear');

$("#oneright").delay(0) .animate({opacity: '0'}, 0, 'linear');
$("#oneright").delay(0) .animate({right: '100%'}, 0, 'linear');

$("#thgir").delay(0) .animate({opacity: '0'}, 0, 'linear');
$("#thgir").delay(0) .animate({right: '100%'}, 0, 'linear');
});

^//JAVA//^

 @import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200&family=Pacifico&display=swap');
body {
background-image:url(https://i.imgur.com/WvofeGe.jpg);
background-size: 100% 100%;
overflow: hidden;
}

::-webkit-scrollbar {
width: .2vw;
}
::-webkit-scrollbar-track {
background-color:transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 50%;
background-color: #CF6085;
}

#mainone {
position: absolute;
margin: auto;
top: 0; bottom: 0;
left: 0; right: 0;
height: 30%;
width:  25%;
background-image:url(https://i.imgur.com/62K2Xvt.png);
background-position: center;
background-size: auto 100%;
background-repeat: no-repeat;
cursor: pointer;
opacity: 1;
z-index: 2;
}
#maintwo {
position: absolute;
margin: auto;
top: 0; bottom: 0;
left: 0; right: 0;
height: 100%;
width:  35%;
background-image:url(https://i.imgur.com/MzIkF6n.png);
background-position: center;
background-size: auto 100%;
background-repeat: no-repeat;
opacity: 0;
z-index: 1;
}

.back {
position: absolute;
margin: auto;
top: 0; bottom: 0;
height: 100%;
width:  50%;
background-image:url();
background-color: #fff;
background-position: center;
background-size: auto 100%;
background-repeat: no-repeat;
opacity: 1;
z-index: 0;
}

#left {
left: -50%;
clip-path: polygon(0% 0%, 60% 0%, 100% 50%, 60% 100%, 0% 100%);
}
#left div {
position: absolute;
margin: auto;
top: 0; bottom: 0;
left: 0;
height: 100%;
width: 98%;
background-image:url(https://i.imgur.com/WvofeGe.jpg);
background-attachment: fixed;
background-size: 100% 100%;
background-position: top left;
clip-path: polygon(0% 0%, 60% 0%, 100% 50%, 60% 100%, 0% 100%);
opacity: .7;
}
#right {
right: -50%;
clip-path: polygon(30% 0, 100% 0%, 100% 100%, 30% 100%, 0% 50%);
}
#right div {
position: absolute;
margin: auto;
top: 0; bottom: 0;
right: 0;
height: 100%;
width: 98%;
background-image:url(https://i.imgur.com/WvofeGe.jpg);
background-attachment: fixed;
background-size: 100% 100%;
background-position: top right;
clip-path: polygon(30% 0, 100% 0%, 100% 100%, 30% 100%, 0% 50%);
opacity: .7;
}

.titler {
position: absolute;
margin: auto;
height: 10%;
width: 20%;
background-color: transparent;
color: #333876;
font-family: Pacifico;
font-size: 3vw;
text-align: center;
z-index: 4;
}
.titlel {
position: absolute;
margin: auto;
height: 10%;
width: 20%;
color: #333876;
font-family: Pacifico;
font-size: 3vw;
text-align: center;
z-index: 4;
}
#oneleft {
top: 26%;
left: -40%;
transform: rotate(-28deg);
}
#twoleft {
top: 26%;
left: -40%;
transform: rotate(-28deg);
}
#oneright {
top: 26%;
right: -40%;
transform: rotate(28deg);
}
#tworight {
top: 26%;
right: -40%;
transform: rotate(28deg);
}

.floof {
position: absolute;
margin: auto;
top: 25%;
height: 53%;
width: 25%;
background-color: #bbc4ed;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
z-index: 3;
}
.floof div {
position: absolute;
margin: auto;
top: 0; bottom: 0;
left: 0; right: 0;
height: 88%;
width: 98%;
background-image:url(https://i.imgur.com/nWdNsxX.gif);
background-size: 100% auto;
background-position: top;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
#textL {
left: -40%;
}
#textR {
right: -40%;
}

.text {
position: absolute;
margin: auto;
top: 38.5%;
height: 22%;
width: 22.6%;
background-color: #bbc4ed;
font-family: Dosis;
color: #333876;
text-align: justify;
padding: 1vw;
z-index: 5;
overflow: auto;
}
#thgir {
right: -40%;
}
#tfel {
left: -40%;
}
#thgir2 {
right: -40%;
}
#tfel2 {
left: -40%;
}

.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: 99;
}

.but {
position: absolute;
margin: auto;
top: 73.5%;
height: 11%;
width: 6%;
background-image:url(https://i.imgur.com/XNrDGQ2.gif);
background-repeat: no-repeat;
background-position: center;
background-size: auto 100%;
cursor: pointer;
z-index: 10;
}
#butl2 {
left: -25%;
}
#butl1 {
left: -40%;
}
#butr1 {
right: -25%;
}
#butr2 {
right: -40%;
}

h1 {
border-bottom: .1vw dotted #333876;
font-size: 2vw;
font-family: Pacifico;
font-weight: 100;
text-align: center;
}

ul.a {
margin: 0;
list-style-type: circle;
}

u {
color: #D6C8AD;
}

a:link {
color: #D6C8AD;
 text-decoration: none;
font-size: 1vw;
font-variant: small-caps;
}

a:visited {
  color: D6C8AD;
}

a:hover {
  color: A90806;
}

a:active {
  color: A90806;
}

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

small {
font-variant: small-caps;
}

::selection {color: grey; background-color:none; }
::-moz-selection {color: grey; background-color:none; }

^//CSS//^

 <div id="mainone"></div>
<div id="maintwo"></div>
<div class="back" id="left"><div></div></div>
<div class="back" id="right"><div></div></div>
<div class="titlel" id="oneleft">Stats</div>
<div class="titlel" id="twoleft">Info</div>
<div class="titler" id="oneright">Abilities</div>
<div class="titler" id="tworight">Ooc</div>
<div class="floof" id="textL"><div></div></div>
<div class="floof" id="textR"><div></div></div>
<div class="but" id="butl1"></div>
<div class="but" id="butl2"></div>
<div class="but" id="butr1"></div>
<div class="but" id="butr2"></div>


<div class="text" id="tfel"><div>

<h1> Dossier </h1>

<center><div style="text-align: left; width: 80%;">
Given name: <font style=float:right>Gora</font><br>
Gender: <font style=float:right>Female</font><br>
Age: <font style=float:right>23</font><br>
Height: <font style=float:right>274cm</font><br>
LvL: <font style=float:right>1</font><br>
Race: <font style=float:right>Orc of Eberron<br></font><br>
Orientation: <font style=float:right>Bisexual</font><br>
Marital Status: <font style=float:right><a target="_blank" href="https://imgur.com/a/YMaj38r"> Gets around</a></font></div></center>
</div><br>



</div></div>

<div class="text" id="tfel2"><div>

<h1> Info</h1>

<h3>Str: 19(Mod+4)</h2> <h3>Dex: 15(Mod+2)</h2> <h3>Con: 17(Mod+3)</h2> <h3>Int: 11</h2> <h3>Wis: 13(Mod+1)</h2> <h3>Char: 11</h2>

</div></div>

<div class="text" id="thgir"><div>

<h1> Abilities</h1>

<b>Rage: in battle, you fight with primal ferocity.</b>


</div></div>

<div class="text" id="thgir2"><div>

<h1> Out of Character</h1>

<ul class="a">
<li>IC Approaches are okay!</li>
<li>Open to ideas!</li>
<li>DMs Are always open</li>
<li>Don't be afraid to ask questions!</li>
<li>I'm friendly OOCly</li>
<li>IC approachs are always answered</li>
<li>This is a DnD Character I rolled up</li>


</ul>

</div></div>
<a target="_blank" href="https://roleplay.chat/profile.php?user=Raccoon" target="_blank"><div class="trash" title="Trash Codes"></div></a><audio id="audio" src="" ></audio>

^//HTML//^