Bobby Drake

<style type="text/css">

@import url(https://fonts.googleapis.com/css?family=Handlee);
@import url(https://fonts.googleapis.com/css?family=Tangerine);
@import url(https://fonts.googleapis.com/css?family=Pinyon+Script);
@import url(https://fonts.googleapis.com/css?family=Kaushan+Script);
@import url(https://fonts.googleapis.com/css?family=Damion);





::-webkit-scrollbar-thumb:vertical
{
background-color:transparent;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}

::-webkit-scrollbar
{
width:6px;
height:20px;
background-color:transparent;
}

.pfor
{
display:none;
}

#profile
{
border:none;
background-color:transparent;
}


body {
background-color: #000;
background-image:url(http://i.imgur.com/gHjzNRF.jpg);
background-attachment: fixed;
background-position: center;
background-size: 100% 100%;
background-repeat: no-repeat;}

td {
font-family: Handlee;
font-size:15px;
line-height:25px;
color:fff;
font-style: bold;
text-align:center;
text-shadow:1px 1px 1px #;
}

a {
 color: #fff;
 font-family:Segoe Script ;
 font-size: 12px;
 text-decoration: none;
 transition: all 0.8s ease-in-out;
 -moz-transition: all 0.8s ease-in-out;
 -webkit-transition: all 0.8s ease-in-out;}
a:hover {
 color: #000000;
 font-family: Segoe Script;
 font-size: 14px;
 text-decoration: none;
 transition: all 0.6s ease-in-out;
 -moz-transition: all 0.6s ease-in-out;
 -webkit-transition: all 0.6s ease-in-out;}

#nav a, #nav a:link, #nav a:visited {
display:block;
background: #;
background-size: 100% 100%;
background-color:#;
background-image:url(http://i.imgur.com/qnqTvzh.gif);
background-position: center;
background-repeat:no-repeat;
color: #000;
height: 30px;
width:30px;
margin-left:5px;
margin-top:5px;
padding:5px;
-webkit-transition-duration: 1.5s;
-moz-transition-duration: 1.5s;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}

#nav a:active, #nav a:hover {
display:block;
height: 30px;
width:30px;
padding:5px;
text-decoration:none;
background: #;
background-size: 100% 100%;
background-color:#;
background-image:url(http://i.imgur.com/M7rFi4i.gif);
background-position: center;
background-repeat:no-repeat;
color: #fff;
margin-left:5px;
margin-top:5px;
-webkit-transition-duration: 1.5s;
-moz-transition-duration: 1.5s;
}

.button{
position:absolute;
top:0px;
right:0px;
width:50px;
background:;
height:50px;
overflow:hidden;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

#icon {
position:fixed;
left: 0%;
top: 1%;
width: 200px;
height: 200px;
background-image: url('http://i.imgur.com/gmphGDK.gif');
background-size:100% 100%;
background-repeat:no-repeat;
background-position:center;
background-attachment:absolute;
background-color:black;
border: 5px solid #67D1EE;
border-radius:200px;
-webkit-transition: all 1.5s ease-in-out;
-moz-transition: all 1.5s ease-in-out;
-o-transition: all 1.5s ease-in-out;
-ms-transition: all 1.5s ease-in-out;
transition: all 1.5s ease-in-out;
}

#icon:hover {
background-image: url('http://i.imgur.com/T2ZWpzn.jpg');
background-size:100% 100%;
background-repeat:no-repeat;
background-position:center;
background-attachment:absolute;
background-color:transparent;
transform:rotate(3720deg);
-moz-transform:rotate(3720deg); /* Firefox 4 */
-webkit-transform:rotate(720deg); /* Safari and Chrome */
-o-transform:rotate(720deg); /* Opera */
-webkit-transition: all 1.5s ease-in-out;
-moz-transition: all 1.5s ease-in-out;
-o-transition: all 1.5s ease-in-out;
-ms-transition: all 1.5s ease-in-out;
transition: all 1.5s ease-in-out;}

#icon2 {
position:fixed;
left: 0%;
top: 28%;
width: 150px;
height: 150px;
background-image: url('http://i.imgur.com/IcCnF6S.jpg');
background-size:100% 100%;
background-repeat:no-repeat;
background-position:center;
background-attachment:absolute;
background-color:black;
border: 5px solid #67D1EE;
border-radius:200px;
-webkit-transition: all 1.5s ease-in-out;
-moz-transition: all 1.5s ease-in-out;
-o-transition: all 1.5s ease-in-out;
-ms-transition: all 1.5s ease-in-out;
transition: all 1.5s ease-in-out;
}

#icon2:hover {
background-image: url('http://i.imgur.com/dk56NiO.jpg');
background-size:100% 100%;
background-repeat:no-repeat;
background-position:center;
background-attachment:absolute;
background-color:transparent;
transform:rotate(3720deg);
-moz-transform:rotate(3720deg); /* Firefox 4 */
-webkit-transform:rotate(720deg); /* Safari and Chrome */
-o-transform:rotate(720deg); /* Opera */
-webkit-transition: all 1.5s ease-in-out;
-moz-transition: all 1.5s ease-in-out;
-o-transition: all 1.5s ease-in-out;
-ms-transition: all 1.5s ease-in-out;
transition: all 1.5s ease-in-out;}

#icon3 {
position:fixed;
left: 13%;
top: 1%;
width: 150px;
height: 150px;
background-image: url('http://i.imgur.com/F9e2YAf.jpg');
background-size:100% 100%;
background-repeat:no-repeat;
background-position:center;
background-attachment:absolute;
background-color:black;
border: 5px solid #67D1EE;
border-radius:200px;
-webkit-transition: all 1.5s ease-in-out;
-moz-transition: all 1.5s ease-in-out;
-o-transition: all 1.5s ease-in-out;
-ms-transition: all 1.5s ease-in-out;
transition: all 1.5s ease-in-out;
}

#icon3:hover {
background-image: url('http://i.imgur.com/A93c5Vw.jpg');
background-size:100% 100%;
background-repeat:no-repeat;
background-position:center;
background-attachment:absolute;
background-color:transparent;
transform:rotate(3720deg);
-moz-transform:rotate(3720deg); /* Firefox 4 */
-webkit-transform:rotate(720deg); /* Safari and Chrome */
-o-transform:rotate(720deg); /* Opera */
-webkit-transition: all 1.5s ease-in-out;
-moz-transition: all 1.5s ease-in-out;
-o-transition: all 1.5s ease-in-out;
-ms-transition: all 1.5s ease-in-out;
transition: all 1.5s ease-in-out;}


.contentbox
{
position:fixed;
padding:10px;
opacity:0;
overflow:auto;
top:100px;
left:700px;
width:0px;
height:0px;
padding:10px;
font-family: Segoe Print;
font-size:13px;
line-height: 25px;
color: #0686A9;
text-align:left;
text-shadow: 0 0 0.5em #fff;
border:2px solid #317C90;
border-radius:1%;
background-color:#9AE0F4;
-webkit-transition:all 0.4s ease-in;
-moz-transition:all 0.5s ease-in;
-ms-transition:all 0.5s ease-in;
-o-transition:all 0.5s ease-in;
transition:all 0.5s ease-in;
}

.contentbox:target
{
position:fixed;
opacity:1;
padding:10px;
overflow:auto;
top:22%;
left:30%;
width:390px;
height:390px;
}



b{font-family: Damion; Color: #0F5568; Text-shadow: 0px 0px 1px #fff; Font-size: 17px;

}

h3 {
font-family: Tangerine;
color: #317C90;
font-size:30px;
letter-spacing:2px;
margin-bottom:1px;
margin-top:3px;
text-align: center;
width: 100%;}

#noclick{position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px;}

</style>

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

<img src="http://i.imgur.com/x6KBKqU.png" height="100%" style="position:fixed; bottom:0%; right: 1%;">

<div id="bottom">
</div>
<div id="icon">
</div>
<div id="icon2">
</div>
<div id="icon3">
</div>

<div id="nav">
<div class="button" style="top:52%; left:10%;"> <a href="#1"></a> </div>
<div class="button" style="top:59%; left:10%;"> <a href="#2"></a> </div>
<div class="button" style="top:66%; left:10%;"> <a href="#3"></a> </div>
<div class="button" style="top:74%; left:10%;"> <a href="#4"></a> </div>
</div>

<div id="1" class="contentbox">
words here
</div>

<div id="2" class="contentbox">
words here
</div>

<div id="3" class="contentbox">
words here
</div>