Some Psycho Coding


<html>
<head>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.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"></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 href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" rel="stylesheet">
<link href="https://roleplay.chat/tooltipster.css" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.5/css/fork-awesome.min.css" rel="stylesheet">
<style>
.grecaptcha-badge {
	display: none;
}
</style>
<script defer>
window.onload = function() {

};
</script>
<style>

</style>
</head>
<body>
<style>
.pfor {
display: none;}

#profile {
background-color:transparent;
border: 0px;}

body {
background-image:url("BACKGROUND HERE");
background-size: 100% 100%;
background-attachment:fixed;}

#aura {
position: fixed;
bottom: 0px;
right: 0px;
}

#placementimage {
position: fixed;
bottom: 0px;
right: 0px;
}

#bgbox {
position: fixed;
top: 100px;
left: 40px;
width: 560px;
height: 350px;

}

#circle{
position: absolute;
top: -20px;
left: -20px;
height: 250px;
width: 240px;
border: 2px solid black;
border-radius: 100%;
overflow: hidden;
box-shadow:
0 0 20px red,
0 0 0 2px black,
0 0 0 4px red;
}

#header {
position: absolute;
font-family: impact;
left: 160px;
color: red;
font-size: 40;
letter-spacing: 10px;
background-image:url("Background Image here");
background-size: 100% 100%;
width: 400px;
text-align: center;
border-radius: 0px 60px 60px 0px;
box-shadow:
0 0 0 4px black,
0 0 0 5px grey;
text-shadow:
1px 0 0 black,
0 1px 0 black,
-1px 0 0 black,
-2px 0 0 silver,
0 -1px 0 black;
}

#nav {
position:absolute;
top: 190px;
left: 20px;
height: 200px;
width: 40px;
border: 1px solid red;
border-radius: 0px 0px 30px 30px;
background-color: darkred;
}

#buttons{
position: absolute;
left: -10px;
top: 50px;
z-index: 2;
}

#buttons a {display: block;
margin-bottom: 5px;
width: 40px;
height: 13px;
padding-left: 10px;
margin-bottom: 8px;
background-color: darkred;
border-top : 2px solid #333333;
border-bottom : 2px solid #333333;
border-left: 10px solid #333333;
border-right: 10px solid #333333;
border-radius: 0px 0px 0px 0px;
box-shadow:
0 0 0 1px black,
0 0 0 2px darkred;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}

#buttons a:hover {background-color:red;
width: 100px;
border-left: 5px solid #333333;
border-right: 5px solid #333333;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}

.Mainbox {position: absolute;
top: 55px;
left: 230px;
height: 0px;
width: 270px;
padding: 10px;
background-image:url("Background Image here");
background-size: 400px 400px;
border-top: 2px solid grey;
border-left: 4px solid red;
border-right: 4px solid red;
border-bottom: 4px solid red;
border-radius: 0px 0px 10% 10%;
font-family: tahoma;
font-size: 13px;
text-align: center;
color: grey;
text-shadow: 1px 1px 2px black;
overflow: auto;
opacity: 0;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}

.MainBox:target {
top: 55px;
left: 230px;
height: 250px;
opacity: 1;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}


a:link {
text-decoration:
none;
text-shadow: 1px 1px 5px red;
}

a:visited {
text-decoration:
none;
text-shadow: 1px 1px 3px darkred;
}

a:hover {
text-decoration: bold;
text-shadow:
1px 0 0 red,
-1px 0 0 red,
0 -1px 0 red,
0 1px red;
}

a:active {
text-decoration:
bold;
text-shadow: 1px 1px 3px skyblue;}

a:link { color: red;
}
a:visited {color: red;
}
a:hover {color: black;
}
a:active {color: white;
}

</style>

<div id="aura">
<img src="Behind image here" width="700">
</div>


<div id="placementimage">
<img src="Big Image Here" width="600">
</div>

<div id="bgbox">

<div id=header>Header</div>


<div id=nav>
<div id="buttons">
<a href="#1"></a>
<a href="#2"></a>
<a href="#3"></a>
<a href="#4"></a>
<a href="#"></a>
</div>
</div>

<div id="circle">
<img src="Put GIF or Image here">
</div>

<div id="1" class="MainBox">
<font style=float:left><b>StatTitle1</b></font>
<font style=float:right>"StatHere"</font>
<br>
<font style=float:left><b>StatTitle2</b></font>
<font style=float:right>"StatHere"</font>
<br>
<u><b>Description</b></u><br><br>
Little description here
</div>

<div id="2" class="MainBox">
<u><b>Second Box</b></u><br><br><p>
Put info here.
</div>


<div id="3" class="MainBox">
<u><b>Third Box</b></u><br><br><p>
Put info here.
</div>


<div id="4" class="MainBox">
<u><b>OOC</b></u><br><br><p>
Butts
</div>

</div>
</body>
</html>