Daw 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(http://fonts.googleapis.com/css?family=Lobster+Two|Just+Me+Again+Down+Here);

.pfor {display: none;}
body {background: #ffffff url(http://wallpapercave.com/wp/x5ff5B9.jpg); background-size: 100vw 100vh; overflow: hidden;}
#profile {border: 0px; background: transparent;}
/* The Supreme @ RPC */
body, a
#whole{position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px;}

::-webkit-scrollbar {background: transparent; width: 6px;}
::-webkit-scrollbar-thumb {box-shadow: inset #75C8E5 0px 0px 4px 0px; border-top: 8px transparent solid; border-right: 2px solid transparent; border-bottom: 8px transparent solid;}

::selection {background: #fe5900;}

strong{font-weight: bold; font-size: 13px; color: #75C8E5;}
i{color: #ffffff; font-weight: bold; font-style: normal; font-size: 13px; text-shadow: #75C8E5 -1px -1px 0px, #75C8E5 1px -1px 0px, #75C8E5 -1px 1px 0px, #75C8E5 1px 1px 0px;}


.horizontal_bar{
position: fixed; margin: auto;
top: 0px; right: 0px; bottom: 0px; left: 0px;
height: 20px;
background: #A8DCE5;
border-top: #75C8E5 2px solid; border-bottom: #75C8E5 2px solid;
outline: #75C8E5 1px dashed;
outline-offset: 10px;
}

#main{
position: fixed; margin: auto;
left: 0px; top: 0px; right: 0px; bottom: 0px;
width: 1025px; height: 470px;
text-align: left;
}


.info{
position: absolute;
width: 200px; height: 400px;
margin-top: 35px;
background: #ffffff url(http://wallpapercave.com/wp/DH5Z28x.png);
background-size: 600px;
outline: #75C8E5 3px double; outline-offset: 3px;
box-shadow: #75C8E5 0px 0px 0px 2px;
overflow: hidden;
text-align: left;

}

#two{margin-left: 275px;}
#thr{margin-left: 550px;}
#for{margin-left: 825px;}

.text{
position: absolute;
width: 185px; height: 400px;
padding-left: 10px; padding-right: 5px;
overflow: auto;
text-align: center;
font-family: tahoma;
font-size: 12px;
color: 000000;
line-height: 11px;
}

.info .text img {
 position: relative;
 height: 57px;
 width: 57px;
 margin-left: 0px;
}
.info:target .text img{
 margin-left: 0px;
}

.info img{
position: absolute;
width: 200px; height: 400px;
-webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s;
}

.info:target img{
margin-left: -200px;
}

#buttons{
position: absolute;
width: 1025px; height: 25px;
margin-top: 445px;
text-align: left;
}

#buttons a{
position: absolute;
width: 150px; height: 7px;
margin-top: 6px;
background: #A8DCE5;
box-shadow: #75C8E5 0px 0px 0px 1px;
}

</style>

<center>
<audio controls><source src="http://k003.kiwi6.com/hotlink/h07bdmrg0c/Dino_Dork.mp3"></audio>
</center>

<div id="whole" oncontextmenu="return false;">
<div class="horizontal_bar"></div>

<div id="main">

<div class="info" id="one">
<div class="text"><br>
<i>BASIC INFO</i> <br><br><br><br>

<strong>Name</strong><br>Alphys<br><br>
<strong>Age</strong><br>Young Adult<br><br>
<strong>Race</strong><br>Dino Monster<br><br>
<strong>Sex</strong><br>Female<br><br>
<strong>Occupation</strong><br>Royal Scientist (Formerly)<br><br>
<strong>Status</strong><br>Taken<br><br>
<strong>Orientation</strong><br>Chordatasexual<br><br>


<br>

<i>ＰＥＲＳＯＮＡＬＩＴＹ</i> <br><br>

<strong>Mᴜsɪᴄ</strong><br>Pop<br>Show Tunes<br>Boy Bands<br><br>
<strong>Fᴏᴏᴅ</strong><br>Ramen<br>Pizza<br>Sugary Cereal<br>Soda<br><br>
<strong>Hᴀʙɪᴛs</strong><br>Paces Often<br>Stammers when Excited or Agitated<br>Fiddles with Glasses when Upset<br>Compulsive Liar<br><br>
<strong>Hᴏʙʙɪᴇs</strong><br>Anime<br>Tinkering<br>Sleeping<br>Writing Fanfiction<br>Terrible Movies<br><br>
<strong>Tʀᴀɪᴛs</strong><br>Pessimistic<br>Neurotic<br>Easily Excited<br>Clumsy<br>Mechanically Gifted<br>Talkative<br><br>

<br>

</div>

<img src="https://i.gyazo.com/93fd19a29736a4e998f05a149c1e4a5a.png">
</div>

<div class="info" id="two">
<div class="text"><br>

<i>GALLERY</i> <br><br><br>

To Come! ...Eventually!

</div>

<img src="https://i.gyazo.com/7c12e7c0b19e08037c4fa213c9d331eb.png">
</div>

<div class="info" id="thr">
<div class="text"><br>

<i>FRIENDS</i> <br><br><br>
Undyne<br>
Mettaton<br>
Asgore<br>
Catty & Bratty<br>
Frisk<br>
Papyrus & Sans
</div>

<img src="https://i.gyazo.com/048d013f4e53346b09973be5ebf1840b.png">
</div>

<div class="info" id="for">
<div class="text"><br>
<i>OOC</i> <br><br><br><br>

<strong>Always IC</strong><br><br>* * *<br><br>
<strong>Unless in Brackets</strong><br><br>* * *<br><br>
<strong>PM Friendly</strong><br><br>* * *<br><br>
<strong>Don't Start With a Post</strong><br><br>* * *<br><br>
<strong>Golden Rule</strong><br><br>* * *<br><br>

</div>

<img src="https://i.gyazo.com/d79601e0522543c5f547cd8c8cfcaf42.png">
</div>

<div id="buttons">
<a href="#one" style="margin-left: 25px;"></a>
<a href="#two" style="margin-left: 300px;"></a>
<a href="#thr" style="margin-left: 575px;"></a>
<a href="#for" style="margin-left: 850px;"></a>
</div>
</div>


</div>
</div>

</body>
</html>