Gianluca

<style>

@import url(http://fonts.googleapis.com/css?family=Permanent+Marker);

.pfor {display: none;}
#profile {border: 0px; background: transparent;}

/* The Supreme @ RPC */

body, a {cursor: url(http://i.picpar.com/1eq.png), progress !important;}
body{background: #715415 url(http://i.imgur.com/s6lSJp4.png);}
#whole{position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px;}

::selection {background: none; color: transparent; text-shadow: #ffffff 0px 0px 2px, #ffffff 0px 0px 2px;}
::-moz-selection {background: none; color: transparent; text-shadow: #ffffff 0px 0px 2px, #ffffff 0px 0px 2px;}


strong{font-family: verdana; letter-spacing: 1px; color: #D0FEFC;}

.underline{font-family: verdana; letter-spacing: 1px; color: #63B6FF;}

em{font-variant: small-caps; font-size: 12px; letter-spacing: 1px; color: #4194FA;}

.strike{font-variant: small-caps; font-family: times new roman; font-size: 14px; letter-spacing: 1px; color: #D0FEFC; text-shadow: #4194FA 0px 0px 1px,#4194FA 0px 0px 1px,#4194FA 0px 0px 1px,#4194FA 0px 0px 1px;}

.page{
position: absolute;
margin-left: 0px; margin-top: 25px;
width: 280px; height: 400px;
padding: 10px;
border: 1px #ffffff solid;
background: rgba(52,44,25, 0.9);
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
overflow: auto;
text-align: justify;
font-family: tahoma;
font-size: 10px;
color: #ffffff;

}

.page:target{margin-left: -322px;}



#frame{
position: fixed; margin: auto;
right: 0px; top: 0px; left: 0px; bottom: 0px;
width: 302px; height: 472px;
text-align: left;
}

.header{
position: absolute;
width: 282px; height: 25px;
padding-right: 20px;
font-size: 12px;
text-shadow: #000000 2px 2px 0px;
font-weight: bold;
line-height: 25px;
text-align: right;
}

.header strong{
font-family: Permanent Marker;
font-size: 18px;
color: #ffffff;
font-weight: normal;
text-shadow: #000000 -2px 2px 1px, #000000 -2px 2px 1px, #000000 -2px 2px 1px, #8F7A46 -3px 3px 1px, #8F7A46 -3px 3px 1px, #8F7A46 -3px 3px 1px, #8F7A46 -3px 3px 1px;
}

.footer{
position: absolute;
margin-top: 449px;
width: 302px; height: 25px;
}

.frame{
position: absolute;
margin-top: 25px;
width: 300px; height: 420px;
border: #ffffff 1px solid;
}

.bottom{
position: absolute;
width: 300px; height: 420px;
}

.top{
position: absolute;
width: 300px; height: 420px;
background: rgba(12, 4, 5, 1);
}

.info{
position: absolute;
margin-left: 5px; margin-top: 5px;
width: 290px; height: 410px;
color: #ffffff;
font-family: tahoma;
font-size: 10px;
line-height: 10px;
opacity: 0;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}

#frame:hover .info{
opacity: 1;
}

.box_top{
float: left; margin-left: 10px; margin-top: 10px;
width: 260px; height: 120px;
padding: 5px;
background: rgba(52,44,25, 0.9);
}

.box_mid{
float: left; margin-left: 10px; margin-top: 5px;
width: 270px; height: 120px;
}

.links{
float: left;
width: 70px; height: 120px;
}

.title{
float: left;
width: 70px; height: 20px;
text-align: center;
line-height: 20px;
font-family: Permanent Marker;
color: #000000;
font-size: 16px;
letter-spacing: 2px;
font-weight: bold;
text-shadow: #ffffff -1px -1px 0px, #ffffff 1px 1px 0px, #ffffff -1px 1px 0px, #ffffff 1px -1px 0px;
}

.link{
float: left;
width: 70px; height: 100px;
background: rgba(52,44,25, 0.9);
text-align: center;
}

.link a{
display: block;
margin-left: 5px; margin-top: 4px;
width: 60px; height: 15px;
text-decoration: none;
color: #FFFFFF;
font-variant: small-caps;
line-height: 15px;
font-family: tahoma;
font-size: 12px;
}

.link a:hover{
letter-spacing: 1px;
background: rgba(24,20,11, 0.9);
}

.mid_img{
float: left;
margin-left: 5px; margin-right: 5px;
width: 110px; height: 110px;
padding: 5px;}

.box_mid img{
float: left;
width: 50px; height: 50px;
border: 1px solid #4194FA;
background: #D0FEFC;
}

.box_bot{
float: left; margin-left: 10px; margin-top: 5px;
width: 260px; height: 120px;
padding: 5px;
background: rgba(52,44,25, 0.9);
}

</style>

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

<div id="frame">

<div class="page" id="first">
First box.
</div>


<div class="page" id="second">
Second box.
</div>


<div class="page" id="third">
Third box.
</div>


<div class="page" id="fourth">
Fourth box.
</div>


<div class="header"><strong>Gianluca Giovanni</strong></div>


<div class="frame"><img class="top" src="https://s3-us-west-2.amazonaws.com/classic105/wp-content/uploads/2016/08/70ecb25573a3d81e32ab8e4d3a2be0ca.jpg">


<div class="info">

<div class="box_top"></div>


<div class="box_mid">

<div class="links">
<div class="link">
<a href="#first">one</a>
<a href="#second">two</a>
<a href="#third">three</a>
<a href="#fourth">four</a>
<a href="#">close</a>
</div>

<div class="title">Navi</div>
</div>

<div class="mid_img">

</div>

<div class="links">
<div class="title">Misc</div>
<div class="link" id="right_links">
<a href="x" target="_blank">image</a>
<a href="x" target="_blank">image</a>
<a href="x" target="_blank">image</a>
<a href="x" target="_blank">image</a>
<a href="x" target="_blank">image</a>
</div>
</div>
</div>



<div class="box_bot"></div>
</div>
</div>

<div class="footer">&nbsp;</div>
</div>
</div>