Calder code

<style>

@import url('https://fonts.googleapis.com/css?family=Cutive+Mono|Italianno');

body{
 overflow: hidden;
 background-color:#000;
 background-size:cover;
}



::-webkit-scrollbar
{
	width: 10px;
	background-color: transparent;
}


#transitiondivline {
position: absolute;
width: 2px;
height: 0px;
background-color:#9c7e82;
bottom:0px;
left:50%;
transition:all 2s ease-in;
transition-delay:999999s;
 }

body:hover >#transitiondivline{
width: 2px;
height:100%;
background-color:#9c7e82;
bottom:0px;
left:50%;
transition-delay:100ms;
 }


#background{
overflow: hidden;
 background-color:transparent;
width:920px;
height:602px;
background-image:url('http://i.imgur.com/aOBSQi4.png');
background-repeat:no-repeat;
position:absolute;
top:50%;
left:50%;
margin-top:-301px;
margin-left:-460px;
opacity:0;
transition:all 1s ease-in;
transition-delay:999999s;
z-index:1;
}

body:hover > #background
{
opacity:1;
transition-delay:2s;
}

#navi {
 opacity:0;
 position:absolute;
 display:inline;
 height:436px;
 width:76px;
 left:50%;
 top:50%;
 font-family:tall;
 color:#000;
 float:center;
 z-index:1;
 margin-top:-160px;
 margin-left:-38px;
transition:all 1s ease-in;
transition-delay:999999s;
 }

#navi a {
 opacity:1;
 display:inline-block;
 width:65px;
 height:70px;
 background-color:transparent;
}

#background:hover #navi
{
opacity:1;
transition-delay:1s;
}

@-webkit-keyframes hvr-bob {
 0% {
 -webkit-transform: translateY(-8px);
 transform: translateY(-8px);
 }
 50% {
 -webkit-transform: translateY(-4px);
 transform: translateY(-4px);
 }
 100% {
 -webkit-transform: translateY(-8px);
 transform: translateY(-8px);
 }
}
@keyframes hvr-bob {
 0% {
 -webkit-transform: translateY(-8px);
 transform: translateY(-8px);
 }
 50% {
 -webkit-transform: translateY(-4px);
 transform: translateY(-4px);
 }
 100% {
 -webkit-transform: translateY(-8px);
 transform: translateY(-8px);
 }
}
@-webkit-keyframes hvr-bob-float {
 100% {
 -webkit-transform: translateY(-8px);
 transform: translateY(-8px);
 }
}
@keyframes hvr-bob-float {
 100% {
 -webkit-transform: translateY(-8px);
 transform: translateY(-8px);
 }
}
.hvr-bob {
 display: inline-block;
 vertical-align: middle;
 -webkit-transform: perspective(1px) translateZ(0);
 transform: perspective(1px) translateZ(0);
 box-shadow: 0 0 1px transparent;
}
.hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active {
 -webkit-animation-name: hvr-bob-float, hvr-bob;
 animation-name: hvr-bob-float, hvr-bob;
 -webkit-animation-duration: .3s, 1.5s;
 animation-duration: .3s, 1.5s;
 -webkit-animation-delay: 0s, .3s;
 animation-delay: 0s, .3s;
 -webkit-animation-timing-function: ease-out, ease-in-out;
 animation-timing-function: ease-out, ease-in-out;
 -webkit-animation-iteration-count: 1, infinite;
 animation-iteration-count: 1, infinite;
 -webkit-animation-fill-mode: forwards;
 animation-fill-mode: forwards;
 -webkit-animation-direction: normal, alternate;
 animation-direction: normal, alternate;
}


#zero{
overflow-y:auto;
opacity:1;
background-color:;
width:400px;
height:450px;
position:absolute;
right:2%;
top:20%;
z-index:1;
font-family: "Times New Roman", Times, serif;
font-size:12pt;
color:dadada;
text-align:center;
transition:1s;
transition-delay:999999s;
}

#background:hover #zero
{
opacity:0;
transition-delay:10s;
}


#one,#two,#three,#four{
background-color:#0d0b21;
overflow-y:auto;
opacity:0;
width:400px;
height:450px;
position:absolute;
right:2%;
top:20%;
z-index:1;
font-family: 'Cutive Mono', monospace;
font-size:12pt;
color:#dadada;
text-align:center;
transition:800ms;
}

#one:target,#two:target,#three:target,#four:target{
background-color:#0d0b21;
opacity:1;
z-index:3;
}

h1{
font-family: 'Cutive Mono', monospace;
font-size:18pt;
text-decoration: underline;
}

h2{
margin-top:100px;
font-family: 'Italianno', cursive;
font-weight:400;
font-size:20pt;
}

i {
 color:#b9b9b9;
 font-size:12pt;
 text-shadow:1px 1px 0 #000;
font-family: 'Cutive Mono', monospace;
}

b {
 color:#daddad;
 font-size:14px;
 letter-spacing:1px;
 font-style:italic;
 text-shadow:#fff -1px 0px,#fff 0 1px,#fff 1px 0px,#fff -1px;}

a {
 text-decoration:none;
 font-style:normal;
 color:#bababa;
 letter-spacing:0px;
 text-shadow:1px 1px 0 #000;
 transition:all 1s ease-in;
 }

a:hover {
 text-decoration:none;
 color:gold;
}


span {
 color:#bababa;
 text-shadow:1px 1px 1px #000;
 transition:all 1s ease-in; }

span:hover {
 color:gold;
 }

p {
word-spacing: .5px;
text-align:justify
}
</style>


<div id="background">
<div align="top">
<div id="navi">
<a class="nav hvr-bob" href="#one"> <img src="http://i.imgur.com/aimHVk4.png" width="65" height="70"></a> <br><br><br>
<a class="nav hvr-bob" href="#two"> <img src="http://i.imgur.com/umMf3Xl.png" width="65" height="70"></a> <br><br><br>
<a class="nav hvr-bob" href="#three"> <img src="http://i.imgur.com/fcbQjv4.png" width="65" height="70"></a> <br><br><br>
<a class="nav hvr-bob" href="#four"> <img src="http://i.imgur.com/GJhwSPW.png" width="65" height="70"></a> <br><br><br>
</div>
</div>
<div id="zero">
<i><center><h2>"Beyond life there are'—his face grew ashen with terror—'things that I cannot distinguish. They move slowly through angles. They have no bodies, and they move slowly through outrageous angles...God, they are breaking through! They are breaking through! Smoke is pouring in from the corners of the wall. Their tongues—ahhh—"<br><br> -Frank Belknap Long, The Hounds Of Tindalos</h2></center></i>
</div>
<div id="one">
<center><h1>Basic</h1></center>
<i>Name</i> ᚾ Calder <br><br>
<i>Alias</i> ᚾ The Hound, Hound of Tindalos <br> <br>
<i>Age</i> ᚾ Timeless <br><br>
<i>Gender</i> ᚾ Appears male <br><br>
<i>Race</i> ᚾ <span title="Beings created somewhere beyond this dimension known as the outer realms.">Outer God</span> <br><br>
<i>Duty</i> ᚾ To learn about this dimension.<br><br>
<i>Origin</i> ᚾ The <span title="A place that exists in between the outer realms and this dimension">angles</span> of time.<br><br>
<i>Interest</i> ᚾ Open-minded.<br><br>
<i>Paramour</i> ᚾ In love with a <a href="https://roleplay.chat/profile.php?user=Estella"> guiding light. </a> <a href="http://www.thiscrush.com/~houndoftindalos" title="houndoftindalos's CrushTag">Why?</a><br><br>

</div>
<div id="two">
<center><h1>Story</h1></center>
<p> Calder, or the Hound of Tindalos as he was previously called, is an elder god hailing from the outer realms, a place beyond human comprehension and beyond this dimension, where the kin live. The kin are cosmic beings of immense power that were created by a malignant creator being acting in an unconscious and corrupted parody of the "Divine Will". The Hound of Tindalos is a deity that exists only to hunt for those who have gathered knowledge about the kin, he hunts for the humans who know to much and dabble too deep into the unknown without losing their sanity. </p>
<p> The Hound exists in the edges of time, the closest part between this dimension and the dimension of the Kin, there round shapes do not exist, everything is jagged and geometrical.</p>
</div>
<div id="three">
<center><h1>Diary</h1></center>
</div>
<div id="four">
<center><h1>OOC</h1></center>
<b>00</b> Code is mine, art by abz-j-harding, I do not own the image on the profile. Do not steal the code. Ask me for commissions or coding issues.<br><br>
<b>01</b> PM friendly to an extent. <br><br>
<b>02</b> Long Term roleplay is always preferred.<br><br>
<b>03</b> Smut is unlikely. <br><br>
<b>04</b> If you have an issue with how I play the character, keep it to yourself. <br><br>
<b>05</b> Para+ mirror poster.<br><br>
<b>06</b> Third Person.<br><br>
<b>07</b> Character based off of Frank Belknap Long's "The Hounds of Tindalos". <br><br>
<b>08</b> No he is not ACTUALLY a dog.
</div>
</div>

<div id="transitiondivline">
</div>