Steele

<style>

@import url(https://fonts.googleapis.com/css?family=Slabo+27px);
body {
 background: #010100;
 overflow: hidden;
}

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

#centerhost {
 position: absolute;
top: 0px;
left: 0px;
 right: 0px;
 bottom: -120px;
 margin: auto;
 height: 500px;
 width: 900px;
}

#centerhostback {
 position: absolute;
top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 background-image: url(https://i.imgur.com/xoKltrU.png);
 background-size: auto 100%;
 background-repeat: no-repeat;
 background-position: center;
 -webkit-filter: grayscale(30%) contrast(120%) ;
filter: grayscale(30%) contrast(120%) sepia(50%);
 opacity: 1;
}

#topblur {
 position: absolute;
 top: -10px;
 left: 0px;
 right: 0px;
 height: 30px;
 background: #020201;
 -webkit-filter: blur(8px);
}

#rightblur {
 position: absolute;
 top: 0px;
 bottom: 0px;
 right: 10px;
 width: 30px;
 background: #020201;
 -webkit-filter: blur(8px);
}

#exaelimage {
 position: absolute;
 left: -180px;
 top: -150px;
 height: 800px;
 width: 400px;
 background-image: url();
 background-repeat: no-repeast;
 background-position: center;
 background-size: auto 100%;
 -webkit-filter: sepia(70%);
 filter: sepia(70%);
 -webkit-transition: all 3s;
 transition: all 3s;
}

#exaelimage2{
position: absolute;
top: 0px;
left: -50px;
right: 0px;
bottom: 0px;
background-image:url();
background-size: auto 100%;
background-position: bottom left;
background-repeat: no-repeat;
opacity: .9;
-webkit-filter:saturate(200%);
filter:saturate(200%);
}

#exaelimage3{
position: absolute;
 top: 33px;
 left: -116px;
 right: 0px;
 bottom: -62px;
 background-image: url();
 background-size: auto 110%;
background-position: bottom left;
background-repeat: no-repeat;
opacity: .9;
-webkit-filter:saturate(200%);
filter:saturate(200%);
}


#image{
position: fixed;
z-index: 5;
top: 0vh;
left: 0vw;
}

#image img{
height: 100vh;
}


#exaeltitle {
 position: absolute;
 top: -60px;
 left: 100px;
 height: 50px;
 width: 400px;
 border: 0px solid white;
 text-align: center;
 font-size: 30pt;
 font-style: italic;
 color: black;
 font-family: 'Slabo 27px';
 font-weight: 400;
}

#titlefill {
 position: absolute;
 top: 12px;
 left: 30px;
 right: 400px;
 bottom: 0px;
 background: gold;
 opacity: .6;
 z-index: -1;
 -webkit-filter: blur(30px);
 -webkit-transition: all 3s;
 transition: all 3s;
}

#whole:hover #titlefill {
 -webkit-transition: all 3s;
 transition: all 3s;
 right: 30px;
}

#whole:hover #exaelimage {
 -webkit-transition: all 3s;
 transition: all 3s;
 -webkit-filter: sepia(40%);
}

#menusection {
 position: absolute;
 bottom: -50px;
 left: 200px;
 right: 100px;
 height: 50px;
 border: 0px solid white;
}

#menusection a {
 position: relative;
 margin-left: 70px;
 display: inline;
 text-align: center;
 color: gold;
 border-bottom: 1px solid transparent;
 font-size: 19pt;
 font-family: 'Slabo 27px', Times;
 text-shadow: 0px 0px 6px gold;
 opacity: .3;
 -webkit-transition: all 1s;
 transition: all 1s;
 font-weight: 400;
 text-decoration: none;
opacity: 0;
-webkit-transition: all 1s;
transition: all 1s;
}

#menusection a:hover {
 border-bottom: 1px solid gold;
 -webkit-transition: all 1s;
 transition: all 1s;
}

#turningpages, #turningpages2 {
 position: fixed;
 left: 0px;
 right: 0px;
 top: 0px;
 bottom: 0px;
 margin: auto;
 height: 200px;
 width: 200px;
 border: 0px solid white;
 background-image: url(https://i.imgur.com/IMbG39K.gif);
 background-size: auto 100%;
 background-repeat: no-repeat;
 background-position: center;
 opacity: 0;
 -webkit-filter: grayscale(70%) sepia(30%);
 filter: grayscale(70%) sepia(30%);
}

#contentarea {
 position: absolute;
 top: 0px;
 left: 100px;
 right: 0px;
 bottom: 0px;
 margin: auto;
 height: 300px;
 width: 500px;
 border: 0px solid white;
}

#contentfill, #contentfill2 {
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 -webkit-filter: blur(10px);
 background: black;
 opacity: 0;
 -webkit-transition: all 1s;
 transition: all 1s;
}

.infoarea {
 position: absolute;
 top: 20px;
 left: 10px;
 right: 10px;
 bottom: 10px;
 box-sizing: border-box;
 padding-right: 10px;
padding-bottom: 10px;
 border: 0px solid white;
 color: gray;
 overflow: auto;
 text-align: left;
 z-index: 0;
 opacity: 0;
 -webkit-transition: all 1s;
 transition: all 1s;
 font-style: italic;
 font-size: 14pt;
}

::-webkit-scrollbar {
 width: 4px;
 background-color: black;
}

::-webkit-scrollbar-thumb {
 border-radius: 0px;
 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
 background-color: #4C4000;
}

#selection1:target #contentfill,
#selection2:target #contentfill2{
 -webkit-transition: all 1s 2.5s;
 transition: all 1s 2.5s;
 opacity: .9;
}

#selection1:target #turningpages,
#selection2:target #turningpages2{
 -webkit-animation: turninganimation 3s .25s;
 animation: turninganimation 3s .25s;
}

#selection1:target #charinfo,
#selection2:target #OOCinfo{
 -webkit-transition: all 1s 3.0s;
 transition: all 1s 3.0s;
 opacity: 1;
 z-index: 1;
}

#selection1:target #menusection a:nth-child(1),
#selection2:target #menusection a:nth-child(2){
border-bottom: 1px solid gold;}

@-webkit-keyframes turninganimation{
 0%{opacity: 0;}
 10%{opacity: 0;}
 40%{opacity: .7;}
 70%{opacity: .7;}
 90%{opacity: 0;}
 100%{opacity: 0;}
}

@keyframes turninganimation{
 0%{opacity: 0;}
 10%{opacity: 0;}
 40%{opacity: .7;}
 70%{opacity: .7;}
 90%{opacity: 0;}
 100%{opacity: 0;}
}

#whole:hover #menusection a:nth-child(1){
-webkit-transition: all 1s 0s, opacity 1s 1.5s;
transition: all 1s 0s, opacity 1s 1.5s;
opacity: .3;}

#whole:hover #menusection a:nth-child(2){
-webkit-transition: all 1s 0s, opacity 1s 2.2s;
transition: all 1s 0s, opacity 1s 2.2s;
opacity: .3;}

#whole:hover #menusection a:nth-child(3){
-webkit-transition: all 1s 0s, opacity 1s 2.9s;
transition: all 1s 0s, opacity 1s 2.9s;
opacity: .3;}


#musicsection{
position: absolute;
right: 0px;
bottom: 0px;
top: 0px;
margin: auto;
height: 30px;
width: 100px;
border: 0px solid white;
}

#musicfirst{
position: absolute;
left: 0px;
top: 0px;
height: 30px;
width: 60px;
font-size: 30px;
font-family: 'Slabo 27px';
font-style: italic;
border: 0px solid red;
color: gold;
opacity: .4;
-webkit-transition: all 1s .5s;
transition: all 1s .5s;
text-shadow: 0px 0px 6px gold;}

#musicsecond{
position: absolute;
right: -100px;
top: 0px;
height: 30px;
width: 120px;
border: 0px solid green;
-webkit-transition: all 1s;
transition: all 1s;}

#musicsecondA{
position: absolute;
background-image:url(http://25.media.tumblr.com/63f2cf3f1c33fa917f0c75b24be8fa47/tumblr_mrsjqh9YZ91sqb6imo1_500.gif);
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center;
top: 0px;
height: 30px;
width: 45px;
border: 0px solid gray;
-webkit-transition: all 1s;
transition: all 1s;
overflow: hidden;
text-align: right;
height: 30px;
width: 40px;
left: 240px;
}

#musicsecondB{
position: absolute;
left: 0px;
top: 0px;
font-size: 18pt;
font-family: 'Slabo 27px';
border: 0px solid blue;
font-style: italic;
color: gold;
opacity: .4;
text-align: right;
width: 230px;
 text-shadow: 0px 0px 6px gold;}

#musicsecondA audio{
opacity: 0;
-webkit-transition: all 1s;
transition: all 1s;}

#musicsection:hover #musicfirst{
-webkit-transition: all 1s;
transition: all 1s;
opacity: 0;}

#musicsection:hover #musicsecond{
-webkit-transition: all 1s .5s;
transition: all 1s .5s;
right: 190px;}

#musicsecondA:hover audio{
opacity: 1;}

.infoarea b{
color: 	#DAA520;}

.infoarea a, .infoarea a:hover, .infoarea a:visited{
font-weight: bold;
color: #D4AF37;
text-decoration: none;}

.infoarea a:hover{
text-decoration: underline;}

</style>

<div id="whole">

<div id="selection1">
 <div id="selection2">

<div id="image">
<img src="https://i.imgur.com/MiXcKYZ.png"></div>
 </div>

 <div id="centerhost">
 <div id="centerhostback">
 <div id="topblur">
 </div>
 <div id="rightblur">
 </div>
 <div id="exaeltitle">
 <i>Jacqueline Steele</i>
 <div id="titlefill">
 </div>
 </div>

 <div id="menusection">
 <a href="#selection1">Character Info
 </a>
 <a href="#selection2">OOC
 </a>
 <a href="#none">Reset</a>
 </div>

 <div id="contentarea">
 <div id="contentfill">
 </div>
 <div id="contentfill2">
 </div>
 <div class="infoarea" id="charinfo">
<br>
<center style="font-size:11pt; letter-spacing: -1px;">
<b>//Will have Something here. </b></center><br>
• <b>Age</b> ≈ Appears 28
 <br> • <b>Gender</b> ≈ Female
 <br> • <b>Race</b> ≈ Pure Human
 <br> • <b>Height</b> ≈ 5'4"
 <br> • <b>Weight</b> ≈ 143 lbs
 <br> • <b>Orientation</b> ≈ Picky
 <br> • <b>Enhancements</b> ≈ Enhanced Senses, Minor Cybernetics
 <br> • <b>Location</b> ≈ Drifting about on the Sidewinder
 <br> • <b>Nicknames</b> ≈ Jackie, Steele, Captain.
 <br> • <b>Demeanor</b> ≈ A bit on the mischievous side.
 <br>• <b>Occupation</b> ≈ Heir to Steele Tech Solutions / Tech Specialist and Captain of the Sidewinder
 <br>• <b>Interests</b> ≈ Talk with me, and you may learn them.
 <br>• <b>Relationship</b> ≈ Single
 <br> • <b>Armament</b> ≈ [1] Hand Cannon, [1] Armored Steele Tech Suit, [1]Set of Custom Shock Gear, [1] Reaper Armaments Mark II Shield. [1] Siegewulfe Combat Drone.
 <br> • <b>More Art</b> ≈ <a target="_blank" href="xxx" target="_blank"> Gallery</a> ||<br><br>
Just be patient with me<b>"okay?"</b><br><br>
 </div>

 <div class="infoarea" id="OOCinfo">
Character art used in this profile is owned and copyrighted.<br>
Music is <a target="_blank" href="xxx" target=_blank>xxx</a>.<br>
The coding of this profile is <a target="_blank" href="http://roleplay.chat/profile.php?user=Digital" target=_blank>Digital</a>.<br><br>
Feel free to PM anytime.
 </div>

 <div class="infoarea">
 </div>

 <div id="turningpages">
 </div>
 <div id="turningpages2">
 </div>

 </div>
 </div>


 </div>
</div>

<div id="musicsection">
<div id="musicfirst">
Music</div>
<div id="musicsecond">
<div id="musicsecondB">
<a title="just a mix">Lo-Fi Mix</a>
</div>
<div id="musicsecondA">
<audio controls src="https://www.dropbox.com/s/bdch5etdzvhy9nv/Im%20Not%20My%20Past%20%20Lofi%20HipHop%20Mix%20.mp3?dl=1" loop=3 id="mus">
</audio>
</div>
</div>
</div>

</div>