Archer of Red

<style>

@import url('https://www.themonster.xyz/styles/fancy-fonts.css');
::-webkit-scrollbar{width:0.5vh;height:0.1vh;}
 ::-webkit-scrollbar-track{border-radius:0;background:transparent;}
 ::-webkit-scrollbar-thumb{border-radius:0;background:transparent;}


body{
 background: linear-gradient(-35deg, #678460, #A2B59F, #678460);
}

 #image{
 position: fixed;
 bottom: 5vh;
 left: 10vw;
 box-shadow: 0 0 2vh #000;
 }

 #image img{
 height: 90vh;
 }


 @keyframes box1{
 from{right:-70vw;}
 to{right: 12vw;}
 }

 @keyframes title{
 from{right:-70vw;}
 to{right: -9vw;}
 }

 @keyframes nav{
 from{right:-70vw;}
 to{right: 45vw;}
 }

@keyframes credit{
 from{right: -70vw;}
 to{right: 1vh;}
}


 #nav1{
 z-index: 6;
 position: fixed;
 background: url(https://i.imgur.com/LpHHCOp.gif);
 background-size: cover;
 height: 12vh;
 width: 12vw;
 top: 24.5vh;
 animation: nav 1s 1;
 animation-fill-mode: both;
 animation-delay: 1s;
 transition: 0.5s;
 box-shadow: 0vh 0vh 2vh #1f231b;
 }

 #nav1:hover{
 box-shadow: 0vh 0vh 2vh #fff;
 transition: 0.5s;
 }

 #nav2{
 z-index: 6;
 position: fixed;
 background: url(https://66.media.tumblr.com/c85540af9c3da683d120869df13e98d0/tumblr_ovgp3m4D021uzwbyjo1_500.gif);
 background-size: cover;
 height: 12vh;
 width: 12vw;
 top: 40.5vh;
 animation: nav 1s 1;
 animation-fill-mode: both;
 animation-delay: 1.25s;
 transition: 0.5s;
 box-shadow: 0vh 0vh 2vh #1f231b;
 }

 #nav2:hover{
 box-shadow: 0vh 0vh 2vh #fff;
 transition: 0.5s;
 }


 #nav3{
 z-index: 6;
 position: fixed;
 background: url(https://i.imgur.com/wyqZuqE.gif);
 background-size: cover;
 height: 12vh;
 width: 12vw;
 top: 56.5vh;
 animation: nav 1s 1;
 animation-fill-mode: both;
 animation-delay: 1.5s;
 transition: 0.5s;
 box-shadow: 0vh 0vh 2vh #1f231b;
 }


 #nav3:hover{
 box-shadow: 0vh 0vh 2vh #fff;
 transition: 0.5s;
 }

 #box{
 position: fixed;
 z-index: 10;
 padding: 1%;
 box-shadow: 0vh 0vh 2vh #1f231b;
 background: linear-gradient(40deg, #143d2e, #143d1d, #293d14);
 height: 50vh;
 width: 30vw;
 top: 20vh;
 right: 6vw;
 font-family: 'Odachi';
 font-size: 2.8vh;
 color: #fff;
 text-shadow: .2vh .2vh .2vh #000;
 animation: box1 1s 1;
 animation-fill-mode: both;
 animation-delay: .25s;
 }

 #title{
 position: fixed;
 z-index: 11;
 padding: 1%;
 height: 27vh;
 width: 50vw;
 top: 5vh;
 border: 0px #fff solid;
 animation: title 1s 1;
 animation-fill-mode: both;
 animation-delay: .5s;
 }



 t{
 font-family:'Signature';
 font-size: 20vh;
 background: url(https://vignette.wikia.nocookie.net/typemoon/images/2/20/PhoebusFAAOE.gif/revision/latest?cb=20171213222519);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 filter: drop-shadow(0.25vh 0.25vh .5vh #d3e8ce);
 }


 h1{
 font-family: 'Skytree';
 font-size: 5vh;
 }


 a{
 text-decoration: none;
 transition: 0.4s;
 color: #bcf442;
}

a:hover{
transition: 0.4s;
color:#3d4727;
}

#credit {
z-index:1;
position:fixed;
height:20vh;
bottom:0%;
animation: credit 1s 1;
animation-fill-mode: both;
animation-delay: 2s;
}

</style>

<a href="#one"><div id="nav1"></div></a>
<a href="#two"><div id="nav2"></div></a>
<a href="#three"><div id="nav3"></div></a>


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

<div id="title"><t>Atalanta</t></div>

<div id="box">
<div style="height: 100%; overflow-y: hidden;">
<a name="one"></a>
<div style="width:100%; height: 100%; overflow: auto; " align="left">
 <h1>Header 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu turpis egestas pretium aenean pharetra magna. Volutpat sed cras ornare arcu dui vivamus arcu felis. Nisi porta lorem mollis aliquam ut porttitor. Elementum pulvinar etiam non quam lacus suspendisse. Nibh cras pulvinar mattis nunc sed. Et magnis dis parturient montes nascetur. Amet consectetur adipiscing elit ut aliquam purus sit amet. Id diam vel quam elementum pulvinar. Augue mauris augue neque gravida in fermentum. Convallis aenean et tortor at risus. Ullamcorper malesuada proin libero nunc consequat interdum. Ut tellus elementum sagittis vitae et leo duis ut diam.</p>

<p>Dignissim diam quis enim lobortis scelerisque. Sed euismod nisi porta lorem mollis aliquam ut porttitor. Pretium quam vulputate dignissim suspendisse in est ante. Eget arcu dictum varius duis at. In mollis nunc sed id semper risus in hendrerit. Justo donec enim diam vulputate ut pharetra sit amet. Risus ultricies tristique nulla aliquet. Dolor sit amet consectetur adipiscing elit ut aliquam purus. Tempor nec feugiat nisl pretium fusce id velit ut tortor. Purus non enim praesent elementum facilisis leo vel fringilla est. At imperdiet dui accumsan sit amet nulla. Aliquet eget sit amet tellus cras adipiscing enim.</p>

<p>Ullamcorper sit amet risus nullam eget. Cum sociis natoque penatibus et magnis dis. Dolor magna eget est lorem ipsum. Faucibus scelerisque eleifend donec pretium vulputate. Pellentesque habitant morbi tristique senectus. Mauris pharetra et ultrices neque ornare aenean. Faucibus turpis in eu mi bibendum neque. Est ultricies integer quis auctor. Pellentesque diam volutpat commodo sed egestas egestas fringilla. Placerat in egestas erat imperdiet sed euismod. Quis risus sed vulputate odio ut enim blandit. Tellus in hac habitasse platea dictumst vestibulum.</p>

 </div>


 <a name="two"></a>
 <div style="width:100%; height: 100%; overflow: auto; " align="left">
 <h1>Stats</h1>
 Name: Stat<br>
 Also Known As: Stat<br>
 Race: Stat<br>
 Gender: Stat<br>
 Age: Stat<br>
 <br>
 Height: Stat<br>
 Weight: Stat<br>
 Preference: Stat<br>
 Status: Stat

 </div>

 <a name="three"></a>
 <div style="width:100%; height: 100%; overflow: auto; " align="left">
 <h1>Out of Character</h1>
 <ol>
 <li>OOC</li>
 <li>OOC</li>
 <li>OOC</li>
 <li>OOC</li>
 <li>OOC</li>
 </ol>
 </div>




</div>
</div>

<a href="https://roleplay.chat/profile.php?user=From+Shadows+Codes" target="_blank" title="Thanks so much for using my layout. Please unform me of any potential issues.">
<img src="https://i.imgur.com/A9wLMgS.png" id="credit"/>
</a>