Dianthe code

<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat');

#no {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;}

::-webkit-scrollbar {
width: 1px;}

::-webkit-scrollbar-thumb {
background: transparent;}

body {
background-color: #2c2126;
cursor: url('https://78.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_540.png'), default;}

p {
margin-left: 10px;
margin-right: 10px;}

a {
color: #20181c;
text-decoration: none;}

h2 {
height: 15px;
text-align: center;
font-family: 'Montserrat';
color: #bababa;
font-size: 10px;
line-height: 16px;
letter-spacing: 5px;
text-transform: uppercase;
margin-top: 0px;
margin-bottom: 15px;
border-top: 3px solid #20181c;
border-bottom: 3px solid #20181c;}

.pic {
position: absolute;
height: 250px;
width: 131px;
background-image: url('http://i.picpar.com/rted.png');
background-attachment: absolute;
background-size: 100% 100%;
bottom: 30px;
left: 30px;
border: 10px solid #2c2126;
border-radius: 250px;
filter: drop-shadow( 10px 0px 0px #20181c);}

.con {
position: absolute;
height: 300px;
width: 580px;
background-color: #20181c;
padding: 10px;
overflow: auto;
bottom: 50%;
left: 50%;
margin-left: -320px;
margin-bottom: -150px;
border-radius: 10px 150px 10px 10px;}

.stats {
position: absolute;
height: 85px;
width: 250px;
background-color: #2c2126;
padding: 10px;
overflow: auto;
top: 50px;
left: 160px;}

.statsin {
position: absolute;
height: 85px;
width: 220px;
font-family: calibri;
color: #bababa;
font-size: 11px;
letter-spacing: 0px;
word-spacing: 3px;
text-transform: lowercase;
background-color: transparent;
padding: 10px;
line-height: 10px;
text-align: justify;
overflow: auto;
bottom: 0px;
right: 0px;}

.statsin span {
font-family: 'Montserrat';
color: #bababa;
font-size: 10px;
letter-spacing: 1px;
word-spacing: -2px;
text-transform: uppercase;
font-weight: bold;}

.ooc {
position: absolute;
height: 85px;
width: 250px;
background-color: #2c2126;
padding: 10px;
overflow: auto;
bottom: 50px;
left: 160px;}

.oocin {
position: absolute;
height: 85px;
width: 220px;
font-family: calibri;
color: #bababa;
font-size: 11px;
letter-spacing: 0px;
word-spacing: 3px;
text-transform: lowercase;
background-color: transparent;
padding: 10px;
line-height: 10px;
text-align: justify;
overflow: auto;
bottom: 0px;
right: 0px;}

.oocin span {
font-family: 'Montserrat';
color: #bababa;
font-size: 10px;
letter-spacing: 1px;
word-spacing: -2px;
text-transform: uppercase;
font-weight: bold;}

.nave {
position: absolute;
height: 200px;
width: 86px;
background-color: #2c2126;
padding: 10px;
overflow: auto;
bottom: 50px;
right: 56px;
border-radius: 0px 100px 0px 0px;}

.navi {
position: absolute;
bottom: 50%;
left: 50%;
margin-left: 130px;
margin-bottom: -85px;}

a.nav:link, a.nav:active, a.nav:visited{
display: inline-block;
width: 70px;
height: 10px;
background-color: #20181c;
letter-spacing: 1px;
text-transform: lowercase;
font-family: 'Montserrat';
color: #bababa;
font-size: 9px;
letter-spacing: 3px;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
text-align: center;
line-height: 10px;
padding: 3px;
margin-top: 20px;}
</style>

<div id="no" oncontextmenu="return false;">

<div class="con">

<div class="stats">
<div class="statsin">
<h2>statistics</h2><p>
<font style=float:left><span>stat:</span></font> <font style=float:right>stat</font><br>
</div>
</div>

<div class="ooc">
<div class="oocin">
<h2>out of chara</h2><p>

<span>01.</span>
</div>
</div>

<div class="nave"></div>
<div class="pic"></div>
</div>

<div class="navi">
<a class="nav" href="#one">one.</a><br>
<a class="nav" href="#two">two.</a><br>
<a class="nav" href="#three">three.</a><br>
<a class="nav" href="#four">four.</a>
</div>