Mayaserana

<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Clicker+Script);
@import url(https://fonts.googleapis.com/css?family=Satisfy);
@import url(https://fonts.googleapis.com/css?family=Handlee);
@import url(https://fonts.googleapis.com/css?family=Allura);

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

body {
background-image: url("http://i.imgur.com/gcXB4jm.png");
background-repeat: repeat;
background-color: #1E2D2A;
background-size: ;
background-position: bottom right;
margin: 0;
font-family: Cormorant Unicase;
overflow: hidden;
}

#ImageBox {
background-image:url(http://orig07.deviantart.net/10a9/f/2013/303/7/7/necromancer_by_serenity2200-d6sg8ob.jpg);
background-position: center;
background-size:100% 100%;
background-repeat:no-repeat;
position: fixed;
left: 65%;
top: 13%;
border-radius: 0%;
border: 4px solid #50676D;
width: 24%;
height: 75%;
box-shadow:
0 0 0 0px hsl(200, 30%, 20%),
0px 0px 20px black;}

.name{
 position: absolute;
 z-index:2;
 left: 10%;
 top: 10%;
 color: #2B7667;
 text-shadow: 0.2vw 0.2vw 0.2vw #000;
 font-family: allura;
 font-size: 6vw;
 letter-spacing: 0.5vw;
 opacity:1;
}

#bar {position: absolute; top: 21.5%; left:10%; background: #3C8E86; width: 32.5%; height: 1%;border-radius: 50px 50px 50px 50px;
}

.nav {
position: absolute;
width: 40%;
left: 7%;
top: 25%;
}

.nav a {
text-align: center;
display: inline-block;
background-color: #063E33;
text-transform: none;
text-decoration: none;
font-family: Satisfy;
color: #FFF991;
height: 100%;
width: 15%;
border: 1px solid #000;
-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;
}

.nav a:hover {
color: #000;
background-color: #09CEA6;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}

.text {
position: absolute;
left: 5.5%;
top: 20%;
opacity: 0;
z-index: -1;
background-color: #2B7667;
width: 39%;
border: 5px solid #0E322B;
padding: 0.5%;
height: 34.5%;
color: #fff;
font-family:Handlee;
overflow: auto;
-webkit-transition: all 0.6s ease-in;
-moz-transition: all 0.6s ease-in;
-ms-transition: all 0.6s ease-in;
-o-transition: all 0.6s ease-in;
transition: all 0.6s ease-in;
}

.text:target {
position: absolute;
opacity: 1;
top:30%;
z-index: 1;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}

a:active, a:link, a:visited {
color: #DDD;
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: #00FFCD;
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;
}


h1 {width: 100%; height: auto; font-size: 20px;font-family:Satisfy; margin-bottom: 5px; text-align: center; border-bottom: 3px solid #989A9A; color: #000;}

b, strong { color: #000; text-shadow: 0px 4px 7px #FFF;}


</style>

<div id="ImageBox">
</div>
<div class="name">
Mayaserana
</div>
<div id="bar"></div>

<div class="nav">
<a href="#1">Tab1</a>
<a href="#2">Tab2</a>
<a href="#3">Tab3</a>
<a href="#4">Tab4</a>
<a href="#5">Tab5</a>
<a href="#" style="width: 15%;">Reset</a></div>
</div>


<div id="1" class="text">
<h1>Title</h1>
Words <b>Bold</b> <i>Italic</b> <a href="link.com" target="_blank">Link</a>

</div>

<div id="2" class="text">
<h1>Title</h1>
words
</div>

<div id="3" class="text">
<h1>Title</h1>
words
</div>

<div id="4" class="text">
<h1>Title</h1>
words
</div>

<div id="5" class="text">
<h1>Title</h1>

words
</div>