Exiled Dragon Code

@import url('https://fonts.googleapis.com/css?family=Julius+Sans+One');

body{
background-color:#dadada;
overflow:hidden;
}

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


#menubackground{
 background-image:url(https://cdn.discordapp.com/attachments/397932318934827028/404098005185200148/unknown.png);
 background-size:150%;
 background-position:center;
 width:550px;
 height:300px;
 position:fixed;
 top:50%;
 left:50%;
 margin-top:-150px;
 margin-left:-350px;
 z-index:99;
 border:solid 2px #000;
box-shadow:0px 0px 10px 0px #000;
font-family: 'Julius Sans One', sans-serif;
font-size:15pt;

}

#overlay{
background-image:url(https://www.transparenttextures.com/patterns/light-paper-fibers.png);
background-size:30%;
position:absolute;
width:100%;
height:100%;
}

#arrow1 a {
 background-image:url(https://i.imgur.com/X7ynbVy.png);
 background-size:100%;
 background-repeat:no-repeat;
 width:250px;
 height:50px;
 position:absolute;
 top:50%;
left:50%;
 margin-top:-100px;
 margin-left:-1500px;
display:block;
animation:arrow .1s 1s;
animation-fill-mode: forwards;

}




	@keyframes arrow{
	0%{
	margin-left:-1500px;
	}
	100%{
	margin-left:-500px;
	}}



#arrow2 a{
 background-image:url(https://i.imgur.com/X7ynbVy.png);
 background-size:100%;
 background-repeat:no-repeat;
 width:250px;
 height:50px;
 display:block;
 position:absolute;
 top:50%;
left:50%;
 margin-top:-40px;
 margin-left:-1500px;
animation:arrow .1s 1.4s;
animation-fill-mode: forwards;
}



#arrow3 a{
 background-image:url(https://i.imgur.com/X7ynbVy.png);
 background-size:100%;
 background-repeat:no-repeat;
 width:250px;
 height:50px;
 display:block;
 position:absolute;
 top:50%;
left:50%;
 margin-top:20px;
 margin-left:0px;
 margin-left:-1500px;
animation:arrow .1s 1.8s;
animation-fill-mode: forwards;
}




#arrow4 a{
 background-image:url(https://i.imgur.com/X7ynbVy.png);
 background-size:100%;
 background-repeat:no-repeat;
 width:250px;
 height:50px;
 display:block;
 position:absolute;
 top:50%;
left:50%;
 margin-top:80px;
margin-left:-1500px;
animation:arrow .1s 2.2s;
animation-fill-mode: forwards;
}

#Image{
background-image:url(https://i.imgur.com/dlE2Csr.png);
background-size:100%;
height:100%;
width:250px;
background-repeat:no-repeat;
top:50%;
left:50%;
position:absolute;
z-index:100;
margin-top:-300px;
margin-left:0px;
opacity:0;
animation:hanzo 2s 2.4s;
animation-fill-mode: forwards;
}

@keyframes hanzo{
from{
margin-top:-300px;
margin-left:0px;
opacity:0;
}
to{
margin-top:-250px;
margin-left:50px;
opacity:1;
}
}

h1{
font-size:50pt;
position:absolute;
font-weight:bold;
color: white;
 background: url('https://78.media.tumblr.com/bee0c4b7ec3a0a70eb3e1df9c50e8921/tumblr_okrzpgLxR61rkkro4o1_1280.gif') no-repeat;
background-size:100%;
background-position:center;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
z-index:99;
top:50%;
left:50%;
margin-top:-210px;
margin-left:-500px;
opacity:0;
animation:text 3s 2.4s;
animation-fill-mode: forwards;
}

h2{
font-size:50pt;
position:absolute;
font-weight:bold;
z-index:1;
text-shadow:0px 0px 10px #000;
top:50%;
left:50%;
margin-top:-210px;
margin-left:-500px;
opacity:0;
animation:text 3s 2.4s;
animation-fill-mode: forwards;
}



@keyframes text{
from{
margin-left:-500px;
opacity:0;
}
to{
margin-left:-300px;
opacity:1;
}
}

h3{
font-size:20pt;
text-align:center;
margin-top:5px;
margin-bottom:5px;
font-weight:500;

}

h4{
font-size:8pt;
}

#one, #two, #three, #four{
width:340px;
height:240px;
background-color:#FFFDE3;
position:absolute;
top:25px;
left:25px;
opacity:0;
z-index:1;
transition:1s;
padding:5px;
overflow:auto;
font-size:11pt;
color:#111;
background-image:url(https://www.transparenttextures.com/patterns/noise-pattern-with-subtle-cross-lines.png);
border:solid .5px #000;
box-shadow:0px 0px 5px 0px #000;
}

#one:target, #two:target, #three:target, #four:target{
opacity:1;
z-index:99;
}

<div id="menubackground">
<div id="overlay"></div>
<div id="one">
<h3>道場に入る</h3>
<span style="float: left; ">Name</span> <span style="float: right;">Hanzo Shimada</span><br>
<span style="float: left; ">Nickname</span> <span style="float: right;">Young Master</span><br>
<span style="float: left; ">Age</span> <span style="float: right;">38</span><br>
<span style="float: left; ">Occupation</span> <span style="float: right;">Freelance Mercenary/Assassin</span><br>
<span style="float: left; ">Height</span> <span style="float: right;">5'8"</span><br>
<span style="float: left; ">Weight</span> <span style="float: right;">170lbs</span><br>
<span style="float: left; ">Gender</span> <span style="float: right;">Male</span><br>
<span style="float: left; ">Orientation</span> <span style="float: right;"><h4>a kite flies where the wind takes it</h4></span><br><br>
<span style="float: left; ">Paramour</span> <span style="float: right;">A Dragon walks alone</span><br>
<span style="float: left; ">Family</span> <span style="float: right;">Once thought dead</span><br>
</div>
<div id="two"><h3>償還を超えて</h3>
<h4><p>The Shimada family was established centuries ago, a clan of assassins whose power grew over the years, enabling them to build a vast criminal empire out of Hanamura that profited from lucrative trade in arms and illegal substances. As the eldest son of Sojiro Shimada, the family's head, Hanzo was bound by duty to succeed his father and rule the Shimada empire. From a young age, he was trained for that responsibility, displaying a natural aptitude for leadership and possessing an innate understanding of strategy and tactics. He also excelled in more practical areas: he was a prodigy in martial arts, swordplay, and bowmanship.</p>
<p>Upon the death of his father, the clan elders instructed Hanzo to straighten out his wayward younger brother, Genji, so that he, too, might help rule the Shimada empire. When his brother refused, Hanzo was forced to kill him. Unbeknownst to Hanzo, however, Genji narrowly survived the attempt with the help of Overwatch. This act broke Hanzo's heart and drove him to reject his father's legacy, ultimately leading him to abandon the clan and all that he had worked so hard to attain. Furthermore, he swore to never again wield a sword, and would forevermore rely on his skills with the bow. Seeing his abandonment as betrayal, the clan declared Hanzo an enemy and assassins were sent time and again to kill him.</p>
<p>That was ten years ago. Now, Hanzo travels the world, perfecting his skills as a warrior, attempting to restore his honor and put the ghosts of his past to rest, honing his murderous skills all the while. At some point he visited Numbani, but did not find the city to be to his liking.</p> </h4>
</div>
<div id="three"><h3>家の思い出</h3>

</div>
<div id="four"><h3>竜が我が敵を喰らう</h3>

</div>
</div>

<div id="image"></div>
<h2>島田 半蔵</h2>
<h1>島田 半蔵 </h1>
<div id="arrow1"><a href="#one"></a></div>
<div id="arrow2"><a href="#two"></a></div>
<div id="arrow3"><a href="#three"></a></div>
<div id="arrow4"><a href="#four"></a></div>