Abby code

<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=Caveat|Crimson+Text:600|Forum");
::-webkit-scrollbar {
 width: 0.3vw;
 height: 0.3vw;
}
::-webkit-scrollbar-track {
 border-radius: 0px;
 background-color: transparent;
}
::-webkit-scrollbar-thumb {
 border-radius: 0px;
 background-color: transparent;
}
body{background: #000;
background-image: url('https://img.freepik.com/free-vector/stars-background-illustration_53876-82142.jpg?size=338&ext=jpg');
background-size: 30%;
 background-repeat: ;}


.doors {
 box-sizing: border-box;
 position: relative;
 width: 100%;
 height: 100%;
 overflow: hidden;
 }

.doors .key {
 position: absolute;
 top: 0%;
 width: 100%;
 color: yellow;
 z-index: 10;
 text-align: center;
 font-size: 48px;
 font-family: "Trebuchet MS";
 text-transform: uppercase;
 text-shadow: 5px 0 2px #000;
 transition: transform 2s ease-in-out;
}

.doors:hover .key {
 transform: scale(0);
}

.doors .left {
 display: inline-block;
 position: absolute;
 top: 0;
 left: 0;
 width: 50%;
 height: 100%;
 box-shadow: 3px 0 4px #111;
 background-image: url("https://cdn.discordapp.com/attachments/618224942819049472/774446814292213770/Abby2.png");
 background-size:100%;
 background-repeat: no-repeat;
 transition: width 2s ease-in-out;
}
.doors .right {
 display: inline-block;
 position: absolute;
 top: 0;
 right: 0;
 width: 50%;
 height: 100%;
 box-shadow: 3px 0 4px #111;
 background-image: url("https://cdn.discordapp.com/attachments/618224942819049472/774442964771405824/Abby1.png");
 background-size: 100%;
 background-repeat: no-repeat;
 transform: scaleX(-1);
 transition: width 2s ease-in-out;
}

.doors:hover .left, .doors:hover .right {
 width: 5%;
}

.inner {
 width: 100%;
 height: 100%;
}

.image {
 border-radius: 50%;
 -webkit-transition: -webkit-transform .8s ease-in-out;
 transition: transform .8s ease-in-out;
}
.image:hover {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
}


#content {
 position: fixed;
 width: 100%;
 height: 70%;
 background: transparent;
 top: 15%;
 left: 0%;
 transition-duration: 1s;
}


@keyframes whoosh {
 0% {
 opacity: 1;
 }
 100% {
 opacity: 0;
 }
}

@-webkit-keyframes whoosh {
 0% {
 opacity: 1;
 }
 100% {
 opacity: 0;
 }
}


#pluto {
 position: fixed;
 height: 96%;
 width: 25%;
 background: transparent;
 left: 36.7%;
 transition-duration: 1s;
}

#content:hover #garnet {
 opacity: 1;
 left: 6%;
 transition-duration: 1.5s;
}

#content:hover #guarding {
 opacity: 1;
 right: 6%;
 transition-duration: 1.5s;
}

#garnet {
 position: absolute;
 overflow: auto;
 height: 92.5%;
 width: 25%;
 background:  #000000;
 border-radius: 10px;
 border: 3px solid;
 border-color: #60bc;
 left: 35%;
 padding: 15px;
 opacity: 0;
 transition-duration: 1s;
 font-family: "Forum";
 font-size: 2.3vh;
 color: #ff99ff;

}

#guarding {
 position: absolute;
 overflow: auto;
 height: 92.5%;
 width: 25%;
 background: #161616;
 border-radius: 10px;
 border: 3px solid;
 border-color:#ff66b3;
 right: 35%;
 padding: 15px;
 opacity: 0;
 transition-duration: 1s;
 font-family: "Forum";
 font-size: 2.3vh;
 color: #ff99ff;
}

#gate,
#time {
 width: 100%;
 height: 100%;
 position: relative;
 overflow: hidden;

}

#leftbox,
#right {
 width: 100%;
 height: 100%;
 overflow: auto;

}
}

#leftbox:target,
#rightbox:target {
 animation: appear 1.5s 1;
 -webkit-animation: appear 1.5s 1;
}

@keyframes appear {
 from {
 opacity: 0;
 }
 to {
 opacity: 1;
 }
}

@-webkit-keyframes appear {
 from {
 opacity: 0;
 }
 to {
 opacity: 1;
 }
}

h1 {
 font-family: "Caveat", cursive;
 color: #ffb3d9;
 text-decoration: none;
}

a {
 font-family: "Caveat", cursive;
 color: #ffe6f2;
 text-decoration: none;
}

a:hover {
 color: #eee;
}

.hue {
 float: right;
}


</style>
<div class="doors">

 <div class="left"></div>
 <div class="inner">
<div id="sheet"></div>
<div id="content">
 <div id="pluto">

 </div>

 <div id="garnet">
 <div id="gate">
 <div id="leftbox">
<center><h1>Stats</h1></center>
 <a>Name</a> <div class="hue"><font size="-1px">Abbadon (Abby)</font></div><br>
 <a>Age</a> <div class="hue"><font size="-1px">7</font></div><br>
 <a>Height + Weight</a> <div class="hue"><font size="-1px">4'3" // Yes</font></div><br>
<a>Species</a><div class="hue"><font size="-1px">Half moth demon </font></div><br>
<a>Hair</a> <div class="hue"><font size="-1px">blonde with a pink streak </font></div><br>
<a>Eyes</a> <div class="hue"><font size="-1px">Red sclera with yellow irises</font></div><br>
<a>Sexual Orientation</a> <div class="hue"><font size="-1px">No (pan when older, WAY older)</font></div><br>
<a>Relatons</a> <div class="hue"><font size="-1px">My moms, why?</font></div><br>

<Center><h1>Personality</h1></center>
<font size="-1px"><p>Happy go-lucky! Kind of a trouble maker from time to time which is normal for both a child and a demon. Is mostly sugery sweet.</p></font>


 </div>
 </div>
</div>


 <div id="guarding">
 <div id="time">
 <div id="rightbox">
 <center><h1>Tidbits</h1></center>
<font size="-1px"><p>The daughter of Charlie and Vaggie, Abaddon (Abby) is really growing into her own and has discovered a couple of abilities. One of them being fire and the other summoning weapons (bladed kinds really). She has an umbrella that spills out candy and is useful for floating when the usage of wings isn't an option. (She's still a child, she's learning okay?)</p></font>


<center><h1>Rules/OOC</h1></center>
<font size="-1px">
✧ IC=/= OOC. <br>
✦ PM friendly! <br>
✧ This is Abby from Hazbin, or rather a concept!<br>
✦ Pease don't approach for smut, she's a child ffs! <br>
✧ I'll play her to the best of my abilities.<br>
✦ None of the art is mine. And I shall remove them upon request.<br>
✧ Code belongs to A FRIEND! DO NOT TOUCH! I was given permission to use/edit it.<Br>
✦ Real life takes priority. <Br>
✧ You can start a post, just if it's lewd? Get burned alive.<br>
✦ Very open to Crossovers.<br>
✧ No, I will not plan future ships, that's weird.<Br>
✦ Posting size varies<br>
✧ No, you can't have my Discord, please don't ask.<br>
</font>
 </div>

 </div>
 </div>
</div>
<img src="https://cdn.discordapp.com/attachments/612395316406255741/774485943172202496/abs_2.png" Width="250px" style="float:right; margin-right: 550px; margin-top: 50px">

 <div class="right"></div>
</div>


</body>
</html>