Alerion

<style>
  @import url('https://fonts.googleapis.com/css?family=Amatic+SC|Cedarville+Cursive|Cookie|Great+Vibes|Rochester|Sacramento');
 ::-webkit-scrollbar {width: 0.3vw; height: 0.3vw;}
 ::-webkit-scrollbar-track { border-radius: 0px; background-color: transparent;}
 ::-webkit-scrollbar-thumb { border-radius: 0px; background-color: transparent;}



 body {
   overflow: hidden;
   background-color: #000000;
   background-image: url('https://i.ytimg.com/vi/VkZBXOqNtnU/maxresdefault.jpg');
background-attachment: fixed;
background-position: center center;
background-repeat: repeat;
background-size: auto;
 }

  img {
 user-drag: none;
 user-select: none;
 -moz-user-select: none;
 -webkit-user-select: none;
 -webkit-user-drag: none;
 -ms-user-select: none;
 }

 a {
   text-decoration: none;
   color: #FFFFFF;
 }

 h1 {
   font-family: Cedarville Cursive;
   font-size: 5vh;
 }

 .s {
   float: right;
 }

 #elle {
   position: fixed;
   background: transparent;
   height: 100%;
   width: 35%;
   top: 0;
   right: 0;
 }

 .belle {
   position: absolute;
   right: 0%;
   bottom: 0%;
 }

 #name {
   position: fixed;
   background: transparent;
   height: 15%;
   width: 100%;
   bottom: 6%;
   left: 0%;
   z-index: 1;
 }

 .lilith {
   position: absolute;
   font-family: Great Vibes;
   color: #8c1e3b;
   font-size: 15vh;
   left: 3%;
   bottom: 0%;
 }

 #name:hover .navi{
   opacity: 1;
   transition-duration: 1s;
   z-index: 1;
 }

 .navi {
   position: absolute;
   background: transparent;
   border: 5px dotted;
   border-radius: 10px;
   border-color: #FFFFFF;
   color: #000000;
   height: 30%;
   width: 23%;
   font-size: 4vh;
   font-family: cookie;
   right: 33%;
   bottom: 40%;
   opacity: 0;
   transition-duration: 1s;
   z-index: 1;
 }

#quote {
   z-index: -2;
   position: fixed;
   height: 60%;
   width: 60%;
   font-family: Sacramento;
   font-size: 6.5vh;
   color: #fff;
   text-shadow: 0vh 0vw 2vh #690000;
   background: transparent;
   left: 5%;
   top: 40%;
   opacity: 1;
   animation: pulse 2s 1;
   -webkit-animation: pulse 2s 1;
   animation-fill-mode: forwards;
   -webkit-animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-direction: alternate;
}

@keyframes pulse{
  from{opacity: 1;}
  to{opacity: 0.5;}
}

@-webkit-keyframes pulse{
  from{opacity: 1;}
  to{opacity: 0.5;}
}


 #one {
   position: fixed;
   overflow: auto;
   height: 60%;
   width: 61.5%;
   background: #130e15;
   border: 5px dotted;
   border-color: #FFFFFF;
   border-radius: 10px;
   left: 5%;
   top: 10%;
   opacity: 0;
   transition-duration: 0s;
   font-family: Amatic SC;
   font-size: 4vh;
   color: #FFFFFF;
 }

 #two {
   position: fixed;
   overflow: auto;
   height: 60%;
   width: 61.5%;
   background: #130e15;
   border: 5px dotted;
   border-color: #FFFFFF;
   border-radius: 10px;
   left: 5%;
   top: 10%;
   opacity: 0;
   transition-duration: 0s;
   font-family: Amatic SC;
   font-size: 4vh;
   color: #FFFFFF;
 }

 #three {
   position: fixed;
   overflow: auto;
   height: 60%;
   width: 61.5%;
   background: #130e15;
   border: 5px dotted;
   border-color: #FFFFFF;
   border-radius: 10px;
   left: 5%;
   top: 10%;
   opacity: 0;
   transition-duration: 0s;
   font-family: Amatic SC;
   font-size: 4vh;
   color: #FFFFFF;
 }

  #four {
   position: fixed;
   overflow: auto;
   height: 60%;
   width: 61.5%;
   background: #130e15;
   border: 5px dotted;
   border-color: #FFFFFF;
   border-radius: 10px;
   left: 5%;
   top: 10%;
   opacity: 0;
   transition-duration: 1s;
   font-family: Amatic SC;
   font-size: 4vh;
   color: #FFFFFF;
 }

  #five {
   position: fixed;
   overflow: auto;
   height: 60%;
   width: 61.5%;
   background: transparent;
   border-radius: 10px;
   left: 5%;
   top: 10%;
   opacity: 0;
   transition-duration: 1s;
   font-family: Amatic SC;
   color: #FFFFFF;
 }

#one:target {
  opacity: 1;
  transition-duration: 1s;
  z-index: 4;
}

#two:target {
  opacity: 1;
  transition-duration: 0s;
  z-index: 4;
}

#three:target {
  opacity: 1;
  transition-duration: 0s;
  z-index: 4;
}

#four:target {
  opacity: 1;
  transition-duration: 0s;
  z-index: 4;
}

#five:target {
  opacity: 1;
  transition-duration: 1s;
}

.clouds {
position:fixed;
left:0;
bottom:-5%;
width:100%;
height:50%;
display:block;
overflow: visible;
pointer-events: none;
opacity: 0.5;
background:transparent url('http://i.imgur.com/nptVSPv.png') repeat top center;
z-index: 1;
-moz-animation:move-scrolling-front 150s linear infinite;
-ms-animation:move-scrolling-front 150s linear infinite;
-o-animation:move-scrolling-front 150s linear infinite;
-webkit-animation:move-scrolling-front 150s linear infinite;
animation:move-scrolling-front 150s linear infinite;
}

@keyframes move-scrolling-front{
from{background-position:0% 0%}
to{background-position:300% 0%}
}
@-webkit-keyframes move-scrolling-front{
from{background-position:0% 0%}
to{background-position:300% 0%}
}
@-moz-keyframes move-scrolling-front{
from{background-position:0% 0%}
to{background-position:300% 0%}
}
@-ms-keyframes move-scrolling-front{
from{background-position:0% 0%}
to{background-position:200% 0%}
}

</style>
<div id="elle">
<div class="belle">
  <img src="http://i.imgur.com/eaeL0wb.gif" style="height:90%" draggable="false">
</div></div>
<div id="name">
  <div class="lilith"><Font color=#967877>Alerion<br> BloodLust</white></div>
  <div class="navi">
    <center>
      <a href="#one">Stats</a> .
      <a href="#two">Family</a> .
      <a href="#three">Friends</a> .
      <a href="#four">OOC</a> .
      <a href="#five">⟲</a>
    </center>
  </div>
</div>
<div id="block"></div>
<div id="quote"><center>Live a legacy die a legend.</center></div>
<div id="one">
<center><h1><b>Stats</b></h1></center>
 Name <div class="s">Alerion BloodLust</div><br>
 Moniker <div class="s">Ale and AB</div><br>
 Title/s <div class="s">Her King</div><br>
 Height <div class="s">6'3</div><br>
 Complexion <div class="s">Pale</div><br>
 Hair <div class="s">Blonde/White</div><br>
 Eyes <div class="s">Red</div><br>
 Persona <div class="s">Cold But Respectful.</div><br>
 Married to: <div class="s"><a href="https://roleplay.chat/profile.php?user=Snow%20BloodLust"><b>Snow BloodLust</b></a><br><br></div>
</div>
<div id="two">
<center><h1><b>Family/Gallery</b></h1>
  <img src="http://4.bp.blogspot.com/-IkJEM7W6JXw/TkjyMEslOfI/AAAAAAAAAJ4/wF459mxLKLs/s1600/%5Banimepaper.net%5Dpicture-standard-anime-katekyo-hitman-reborn-belphegor-191868-edwardedicavenger-preview-1f0d303f.jpg" title="Her King" style="width:100px;height:140px;border:1px solid #4d4d4d;border-radius:10px;float: center;"></a>
 <img src="https://s-media-cache-ak0.pinimg.com/236x/79/a0/29/79a02947b6a9d38d4f538bf1e9f2b3ac.jpg" title="His Queen" style="width:100px;height:140px;border:1px solid #4d4d4d;border-radius:10px;float: center;"></a>
<br>
 <img src="http://i.imgur.com/mZwt9vA.jpg" title="We will Take your Life" style="width:100px;height:140px;border:1px solid #4d4d4d;border-radius:10px;float: center;"></a>
 <img src="http://i.imgur.com/DlFPnaR.jpg" title="Our Love Transends Earth" style="width:100px;height:140px;border:1px solid #4d4d4d;border-radius:10px;float: center;"></a>
 <img src="http://i.imgur.com/xTFaz4F.jpg" title="Loving her forever" style="width:100px;height:140px;border:1px solid #4d4d4d;border-radius:10px;float: center;"></a>


 </font>
 </center>
</div>
<div id="three">
 <center><h1><b>My Friends</b></h1></center>
 names here
 <center><h1><b>My Enemies</b></h1></center>
 more names here
</div>
<div id="four">
 <center><h1><b>Rules</b></h1></center>
 <font size="5vh">
 <font color="#8E9179">⚔</font> In-room approach is always best.<br>
 <font color="#8E9179">⚔</font> Smut is reserved for partner.<br>
 <font color="#8E9179">⚔</font> What I do IC does not reflect me OOC.<br>
 <font color="#8E9179">⚔</font> Your rudeness to me will reflect back to you<br>
 <font color="#8E9179">⚔</font> I take no shit from anyone so be prepared to be Punched right back.<br>
 <font color="#8E9179">⚔</font> Semi-PM Friendly<br><br>
 <center>v scroll for more v</center>
 </font>
 <center><h1><b>Typist Info</b></h1></center>
 <font color="#8E9179">⚔</font> 20 y.o.<br>
 <font color="#8E9179">⚔</font> Male<br>
 <font color="#8E9179">⚔</font>Designed By: LilKinky <br>
 <font color="#8E9179">⚔</font> Get the code <a href="http://pastebin.com/wF5QzGvP"><b>Coded by moi.</b></a><br>
<br><br>
</div>
<div id"five"></div>
<div class="clouds"></div>