Basic Blue (One Image, Five Tabs)

<style type="text/css">

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

.pfor {display:none;}
body{
background-color:#FFF;
}

#image {
 position:fixed;
 right:80;
 bottom:170;
 width:300;
 height:471;
}


#title{
vertical-align: center;
text-transform: none;
color:#8C9CDF;
font-size:70px;
font-family:Harrington;
text-align: center;
position: absolute;
left: 50px;
top: -8px;
margin: 1px;
z-index:1;
text-shadow: 1px 1px 60px #C5CBE5, 0px 1px 0px #C5CBE5, -1px 0px 0px #C5CBE5, 0px -1px 0px #C5CBE5,0px 0px 30px #C5CBE5;}


.effectscale {
  border: none;
  margin: 0 auto;
}
.effectscale:hover {
-webkit-transform: scale(3.2);
-moz-transform: scale(3.2);
-o-transform: scale(3.2);
transform: scale(3.2);
transition: all 0.3s;
-webkit-transition: all 0.3s;
}

#title2{
vertical-align: center;
text-transform: none;
color:#AD5C57;
font-size:12px;
font-family:Harrington;
text-align: center;
position: absolute;
right: 50px;
bottom: 8px;
margin: 1px;
z-index:1;}

.navbar1 a {
display: block;
width: 2.5%;
margin-top: 2px;
padding-top: 2px;
padding-bottom: 2px;
color: #cccccc;
text-decoration: none;
font-family: Rockwell;
Font-size: 10px;
transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;}

.abox {
background-color:#5969B2;
opacity: .9;
color: #132FA4;
font-size: 20px;
Text-Shadow: #C5CBE5 2px 1px 1px;
font-family: Poor Richard;
text-align: justify;
position: absolute;
width:620;
height:372;
left: 350;
top:160;
letter-spacing:0px;
line-height: 18px;
padding: 60px;
margin: 1px;
overflow:auto;
border-radius:360px;
box-shadow: 1px 1px 60px #5066BE, 0px 1px 0px #5066BE, -1px 0px 0px #5066BE, 0px -1px 0px #5066BE,0px 0px 50px #5066BE;}

.navbar {
Position: absolute;
Height: 50px;
Width: 99.4%;
Left: 0;
Top: 0;
padding: 4px;
z-index: 100;}

.link1 {
Position: absolute;
top:200;
Left: -10px;
background-color:#8C9CDF;
border-radius:50px;
box-shadow: 1px 1px 60px #A6B3E8, 0px 1px 0px #A6B3E8, -1px 0px 0px #A6B3E8, 0px -1px 0px #A6B3E8,0px 0px 20px #A6B3E8;
Border: outset 2px #F6CECE;
Height: 15px;
Width: 30px;
transition: 0.8s;
-moz-transition: 0.8s;
webkit-transition: 0.8s;
-o-transition: 0.8s;}

.link2 {
Position: absolute;
top:250;
Left: -10px;
background-color:#8C9CDF;
border-radius:50px;
box-shadow: 1px 1px 60px #A6B3E8, 0px 1px 0px #A6B3E8, -1px 0px 0px #A6B3E8, 0px -1px 0px #A6B3E8,0px 0px 20px #A6B3E8;
Border: outset 2px #F6CECE;
Height: 15px;
Width: 30px;
transition: 0.8s;
-moz-transition: 0.8s;
webkit-transition: 0.8s;
-o-transition: 0.8s;}

.link3 {
Position: absolute;
top:300;
left: -10px;
background-color:#8C9CDF;
border-radius:50px;
box-shadow: 1px 1px 60px #A6B3E8, 0px 1px 0px #A6B3E8, -1px 0px 0px #A6B3E8, 0px -1px 0px #A6B3E8,0px 0px 20px #A6B3E8;
Border: outset 2px #F6CECE;
Height: 15px;
Width: 30px;
transition: 0.8s;
-moz-transition: 0.8s;
webkit-transition: 0.8s;
-o-transition: 0.8s;}

.link4 {
Position: absolute;
top:350;
left: -10px;
background-color:#8C9CDF;
border-radius:50px;
box-shadow: 1px 1px 60px #A6B3E8, 0px 1px 0px #A6B3E8, -1px 0px 0px #A6B3E8, 0px -1px 0px #A6B3E8,0px 0px 20px #A6B3E8;
Border: outset 2px #F6CECE;
Height: 15px;
Width: 30px;
transition: 0.8s;
-moz-transition: 0.8s;
webkit-transition: 0.8s;
-o-transition: 0.8s;}

.link5 {
Position: absolute;
top:400;
left: -10px;
background-color:#8C9CDF;
border-radius:50px;
box-shadow: 1px 1px 60px #A6B3E8, 0px 1px 0px #A6B3E8, -1px 0px 0px #A6B3E8, 0px -1px 0px #A6B3E8,0px 0px 20px #A6B3E8;
Border: outset 2px #F6CECE;
Height: 15px;
Width: 30px;
transition: 0.8s;
-moz-transition: 0.8s;
webkit-transition: 0.8s;
-o-transition: 0.8s;}

.link6 {
Position: absolute;
top:450;
left: -10px;
background-color:#8C9CDF;
border-radius:50px;
box-shadow: 1px 1px 60px #A6B3E8, 0px 1px 0px #A6B3E8, -1px 0px 0px #A6B3E8, 0px -1px 0px #A6B3E8,0px 0px 20px #A6B3E8;
Border: outset 2px #F6CECE;
Height: 15px;
Width: 30px;
transition: 0.8s;
-moz-transition: 0.8s;
webkit-transition: 0.8s;
-o-transition: 0.8s;}


.link1:hover {
Background-color: #5066BE;
width: 50px;
transition: 0.8s;
-moz-transition: 0.8s;
webkit-transition: 0.8s;
-o-transition: 0.8s;}

.link2:hover {
Background-color: #5066BE;
width: 50px;
transition: 0.8s;
-moz-transition: 0.8s;
webkit-transition: 0.8s;
-o-transition: 0.8s;}

.link3:hover {
Background-color: #5066BE;
width: 50px;
transition: 0.8s;
-moz-transition: 0.8s;
webkit-transition: 0.8s;
-o-transition: 0.8s;}

.link4:hover {
Background-color: #5066BE;
width: 50px;
transition: 0.8s;
-moz-transition: 0.8s;
webkit-transition: 0.8s;
-o-transition: 0.8s;}

.link5:hover {
Background-color: #5066BE;
width: 50px;
transition: 0.8s;
-moz-transition: 0.8s;
webkit-transition: 0.8s;
-o-transition: 0.8s;}

.link6:hover {
Background-color: #5066BE;
width: 50px;
transition: 0.8s;
-moz-transition: 0.8s;
webkit-transition: 0.8s;
-o-transition: 0.8s;}




.slide {
Position: fixed;
Height: 555555;
Width: 555555;
Top: -20px;
Left: -350;
Z-index: -1;
Opacity: 0;
transition: 0.8s;
-moz-transition: 0.8s;
webkit-transition: 0.8s;
-o-transition: 0.8s;}

.slide:target {
left: -175px;
opacity: 1;
Z-index: 1;
transition: 0.8s;
-moz-transition: 0.8s;
webkit-transition: 0.8s;
-o-transition: 0.8s;}


#player{
position:fixed;
height: 55px;
width: 55px;
bottom:10;
left:23;
margin: auto;
z-index:99;}

#music1{
position:fixed;
padding:2px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;}

#music1:hover #music2{
opacity:0;
 margin-top:-25px;
z-index:-1;}

#music1:hover #music3{
opacity:0.7;
margin-top:-5px;
z-index:99;}

#music1:hover #musiclist{ opacity:1;}

#music2{
opacity:1;
background-color:#8C9CDF;
padding:6px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;}

#music3{
opacity:0;
position:fixed;
background-color:#5066BE;
background-image: url('http://assets.clickmotive.com/Designs/LEMidnight/playButton.png');
background-repeat: no-repeat;
background-size: 25px;
border:1px dotted #b3b3e5;
width:25px;
height:25px;
z-index:99 margin-left:0px;
overflow:hidden;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;}


*{cursor: url('http://media.tumblr.com/7c3edb626c8cf9435c5c0b2d6acceffd/tumblr_inline_mh67v6xNXM1rdqsqf.png'), default;
	}


h1 {
Color: #5969B2;
font-family: Harrington;
font-size:28px;
text-align: center;
Text-Shadow: #C5CBE5 2px 1px 1px;
Margin-top: 3px;}

 .circle{
border-radius:150px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
}

.circle:hover{
border-radius:0px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
}

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

::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.3);
 border-radius: 10px;
}

::-webkit-scrollbar-thumb {
 border-radius: 10px;
 -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.5);
}


</style>

<div id="title">
Name or something?
</div>

<div id="image"><img src="https://pre00.deviantart.net/dfae/th/pre/i/2017/137/d/c/anime_girl__render__by_skarletrose03-db9l18m.png" height="650" width="395"></div>



<div class="navbar">
<a class="link1" href="#1"></a>
<a class="link2" href="#2"></a>
<a class="link3" href="#3"></a>
<a class="link4" href="#4"></a>
<a class="link5" href="#5"></a>
<a class="link6" href="#6"></a>
</div>

<div id="1" class="slide">
<div class="abox">
<h1>Statistics?</h1><br>
<b>Name</b>. <font style= float:right>NAMW.</font><br>
<b>Race</b>. <font style=float:right>RACE</font><br>
<b>Age</b>. <font style=float:right>Age?</font><br>
<b>Gender</b>. <font style=float:right>?</font><br>
<b>Height</b>. <font style=float:right>?</font><br>
<b>Weight</b>. <font style=float:right>?</font><br>
<b>Hair Color</b>. <font style=float:right>?</font><br>
<b>Eye Color</b>. <font style=float:right>?</font><br>
<b>Residence</b>. <font style=float:right>?</font><br>
<b>Orientaion</b>. <font style=float:right>No judging</font><br>
<b>Mated Status</b>. <font style=float:right></font><br>


</div></div>

<div id="2" class="slide">
<div class="abox">
<h1>A Second Box?</h1><br>


</div></div>

<div id="3" class="slide">
<div class="abox">
<h1>Another Box?</h1><br>



</div></div>

<div id="4" class="slide">
<div class="abox">
<h1>Connections.</h1>
<center>


<a href="https://roleplay.chat/profile.php?user=USERNAME" target="_blank"><img src="https://www.telegraph.co.uk/content/dam/men/2016/05/24/Untitled-1_trans_NvBQzQNjv4BqqVzuuqpFlyLIwiB6NTmJwfSVWeZ_vEN7c6bHu2jJnT8.jpg?imwidth=450" class="circle" height="100" width="100" title="TITLE" border="3"></a><br>






</div></div>

<div id="5" class="slide">
<div class="abox">
<h1>Out of Character?</h1><p>

Do Not Remove Credit.

</div></div>

<div id="title2">
@Coded by <a href="https://pastebin.com/u/Toxicandii" target="_blank">Toxicandii</a>
</div>


<div id="player"><div id="music1"><div id="music2">

<img src="http://38.media.tumblr.com/tumblr_m7w2py1dEP1r6o8v2.gif" style="opacity: 0.8;"></div>

<div id="music3"><Div style="margin-top:4px;">

<audio controls style="opacity: 0;"><source src="MUSIC HERE"></audio>

</div></div></div></div>