Jupetta Code

<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Bilbo);
@import url(https://fonts.googleapis.com/css?family=Alex+Brush);

::-webkit-scrollbar { width: 2px; }
::-webkit-scrollbar-track { border-radius: 2px; background-color: transparent; }
::-webkit-scrollbar-thumb { border-radius: 2px; background-color: #transparent; }

body {
background-image: url("");
background-repeat: no-repeat;
background-color: #262630;
background-size: 10%;
background-position: bottom right;
margin: 0;
}

@font-face{
 font-family: 'Moonlight Shadow';
 src:url(https://dl.dropboxusercontent.com/s/678iubjo7pwupoq/Moonlight%20Shadow.ttf);
 }
@font-face{
font-family: Scissors;
src: url(https://fonts.gstatic.com/s/nosifer/v5/eF2_jPFOvazU2jusNUruvw.woff2);
 }
@font-face{
 font-family: 'Asylum';
 src:url(https://dl.dropboxusercontent.com/s/vpksvc99zj2n73o/BlackAsylumDEMO-KCFonts.ttf);
 }
@font-face{
 font-family: 'Murder';
 src:url(https://dl.dropboxusercontent.com/s/2c0jc49lbcn1nwm/youmurdererbb_reg.otf);
 }


#image{
 position: fixed;
 z-index: 6;
 bottom: 0vh;
 left: 15vw;
 width: 30vw;
 opacity:1;
-webkit-animation: bounce 7s 1s infinite;
-moz-animation: bounce 7s 1s infinite;
-ms-animation: bounce 2s 1s infinite;
-o-animation: bounce 7s 1s infinite;
animation: bounce 7s 1s infinite;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#image img{
 height: 95.5vh;
}
@keyframes bounce{
0%{top:5%}
50%{top:7%}
100%{top:5%}}

#name{
 position: fixed;
 z-index:2;
 left: 2vw;
 top: 1vh;
 color: #17BC04;
 text-shadow: 0 0 0.5vw #17BC04;
 font-family: Asylum;
 font-size: 4.5vw;
 letter-spacing: 0.5vw;
 opacity:0;
-webkit-animation: glowin 7s 1s infinite;
-moz-animation: glowin 7s 1s infinite;
-ms-animation: glowin 7s 1s infinite;
-o-animation: glowin 7s 1s infinite;
animation: glowin 7s 1s infinite;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@keyframes glowin{
0%{opacity:0;}
50%{opacity:1;}
100%{opacity:0;}
}

#name2{
 position: fixed;
 z-index:2;
 right: 2vw;
 bottom: 1vh;
 color: #17BC04;
 text-shadow: 0 0 0.5vw #17BC04;
 font-family: Asylum;
 font-size: 4.5vw;
 letter-spacing: 0.5vw;
 opacity:0;
-webkit-animation: glowin 7s 1s infinite;
-moz-animation: glowin 7s 1s infinite;
-ms-animation: glowin 7s 1s infinite;
-o-animation: glowin 7s 1s infinite;
animation: glowin 7s 1s infinite;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@keyframes glowin{
0%{opacity:0;}
50%{opacity:1;}
100%{opacity:0;}
}


.box {position: absolute;
z-index: 3;
right: 185px;
top:150px;
border-top: 5px groove #204E2A;
border-right: 5px groove #204e2a;
border-left: 5px groove #330A52;
border-bottom:5px groove #330A52;
box-shadow: 0 0 0.5vw #17BC04;
height:350px;
width:450px;
background-color:#;
background: url(http://i.imgur.com/EV03DZQ.jpg);
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
overflow-x:auto;
overflow-y:auto;
font-family: handlee;
font-size:14px;
overflow-x: auto;
overflow-y: auto;
color:#ccc;}

.content {
background-color: #292929;
background: url(http://i.imgur.com/Fge7Skl.png);
 background-size: 100% 100%;
 background-position: center;
 background-repeat: no-repeat;
border: none;
color: #ccc;
font-size: 14px;
font-family: Segoe Print;
line-height:17px;
height: 340px;
right: 190px;
opacity: 0;
overflow: auto;
padding: 5px;
position: fixed;
text-align: left;
top: 155px;
width: 441px;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;

}
.content:target {
background-color: #292929;
background: url(http://i.imgur.com/Fge7Skl.png);
 background-size: 100% 100%;
 background-position: center;
 background-repeat: no-repeat;
border: none;
height: 340px;
right: 190px;
opacity: 0.8;
overflow: auto;
padding: 5px;
position: fixed;
top: 155px;
width: 440px;
z-index: 40;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;

}

#tab1{position:fixed;right:550px;top:65px;z-index:99999;}
#tab2{position:fixed;right:390px;top:65px;z-index:99999;}
#tab3{position:fixed;right:210px;top:65px;z-index:99999;}
#tab4{position:fixed;right:660px;top:320px;z-index:99999;}
#tab5{position:fixed;right:100px;top:320px;z-index:99999;}
#tab6{position:fixed;right:390px;bottom:95px;z-index:99999;}



h1{
 color: #DBE27C;
 text-shadow: -0.2vw 0.2vw 0.2vw #;
 font-family: Moonlight Shadow;
 font-size: 3.9vh;
 letter-spacing: 0.1vw;
 font-weight: normal;
text-align: center;
margin-top:9px;
margin-bottom:-14px;
}

b, strong { color: #C9C461;font-family:bilbo;text-shadow: 0 0 0.1em #08D234;font-size:23;letter-spacing:1px;
}

a:active, a:link, a:visited {
color: #DBE27C;
text-decoration: none;
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}

a:hover {
color: #fff;
-moz-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-o-transition-duration:0.5s;
transition-duration:0.5s;
}

#credit{ position: fixed;
left: 1px;
bottom: 0px;
font-family: Arial;
font-variant: normal;
font-weight: normal;
font-size: 80%;
color: #ccc;
z-index:1;}


</style>
<div id="credit">
Layout © <a href="profile.php?user=Pachi" target="_blank">Pachi</a>
</div>
<div id="image">
<img src="http://i.imgur.com/4rkazoO.png">
</div>
<div id="name">
Voodoo
</div>
<div id="name2">
Hoodoo
</div>


<div class="box"></div>

<a href="#1"><div id="tab1"><img src="http://i.imgur.com/WmLRmtn.png" height="70px" width="70px"></a></div>
<a href="#2"><div id="tab2"><img src="http://i.imgur.com/qhdLhgn.png" height="70px" width="25px"></a></div>
<a href="#3"><div id="tab3"><img src="http://i.imgur.com/rlNZr3L.png" height="70px" width="70px"></a></div>
<a href="#4"><div id="tab4"><img src="http://i.imgur.com/doWhMKc.png" height="25px" width="70px"></a></div>
<a href="#5"><div id="tab5"><img src="http://i.imgur.com/MfilyDP.png" height="25px" width="70px"></a></div>
<a href="##"><div id="tab6"><img src="http://i.imgur.com/NRRjbTo.png" height="70px" width="25px"></a></div>


<div id="1" class="content">
<h1>Pokémon</h1>
<br><br>
Words here
</div>

<div id="2" class="content">
<h1>Gijinka</h1>
<br><br>
Words

</div>

<div id="3" class="content">
<h1>Bio</h1>
<br><br>
words
</div>

<div id="4" class="content">
<h1>Contacts</h1>
<br><br>
words here
</div>

<div id="5" class="content">
<h1>OOC</h1>
<br><br>
Words here
<b>bold</b> <i>italics</i> <a href="profile.php?user=" target="_blank">Link</a>.
</div>
</div></div>