Bloodmoon Shen

@import url('https://fonts.googleapis.com/css?family=Exo+2:200,400,900');

body{
background:#000;
overflow:hidden;
}

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

#overlay{
background-image:url(https://www.transparenttextures.com/patterns/noise-pattern-with-subtle-cross-lines.png);
width:100%;
height:100%;
position:absolute;
left:0px;
top:0px;
z-index:20;
}

#moon{
background-image:url(https://i.imgur.com/9aFLXrl.png);
background-size:100%;
width:250px;
height:250px;
position:absolute;
top:50%;
left:50%;
margin-left:-125px;
margin-top:-125px;
animation:moon 4s 2.5s;
animation-fill-mode:forwards;
}

@keyframes moon{
from{margin-top:-125px;}
to{margin-top:-300px;}

}

#cloud1{
background-image:url(http://www.freepngimg.com/download/cloud/1-white-clouds-png-image.png);
background-size:100%;
width:600px;
height:450px;
position:absolute;
top:50%;
left:50%;
margin-left:-125px;
margin-top:-150px;
background-repeat:no-repeat;
animation:cloud1 5s 1s;
animation-fill-mode:forwards;
}


@keyframes cloud1{
0%{opacity:1; margin-left:-125px;}
50%{opacity:1; margin-left:125px;}
100%{opacity:0; margin-left:125px;}
}

#cloud2{
background-image:url(http://pngimg.com/uploads/cloud/cloud_PNG30.png);
background-size:100%;
width:600px;
height:450px;
position:absolute;
top:50%;
left:50%;
margin-left:-450px;
margin-top:-150px;
background-repeat:no-repeat;
animation:cloud2 5s 1s;
animation-fill-mode:forwards;
}

@keyframes cloud2{
0%{opacity:1; margin-left:-450px;}
50%{opacity:1; margin-left:-675px;}
100%{opacity:0; margin-left:-675px;}
}

#shen{
background-image:url(https://i.imgur.com/zsyBdz6.png);
background-size:100%;
background-repeat:no-repeat;
width:800px;
height:600px;
position:absolute;
top:50%;
z-index:15;
left:50%;
margin-top:-150px;
margin-left:-300px;
opacity:0;
animation:shen 2s 5s;
animation-fill-mode:forwards;
filter:contrast(130%);
}

@keyframes shen{
from{opacity:0;}
to{opacity:1;}

}

#boxthing{
background-color:#350609;
background-image:url(http://bighdwalls.com/wp-content/uploads/japan-fuji-tree-Hd-Wall011.jpg);
background-position:0px 200px;
background-size:100%;
width:700px;
height:150px;
position:absolute;
z-index:25;
top:50%;
left:50%;
margin-top:175px;
margin-left:-350px;
opacity:0;
animation:shen 2s 5s;
animation-fill-mode:forwards;
filter:grayscale(50%) brightness(80%) contrast(110%);
box-shadow:0px 0px 10px 0px #000;
}

#box1{
border:solid 1px #a41d1c;
height:130px;
width:240px;
background-color:rgba(35, 39, 100, 0.85);
position:absolute;
margin-left:10px;
margin-top:5px;
box-shadow:0px 0px 10px 0px #000;
padding:5px;
overflow:auto;
}


#box2{
border:solid 1px #a41d1c;
height:130px;
width:190px;
background-color:rgba(35, 39, 100, 0.85);
position:absolute;
right:0px;
margin-right:10px;
margin-top:5px;
box-shadow:0px 0px 10px 0px #000;
padding:5px;
}


#box3{
border:solid 1px #a41d1c;
height:30px;
width:200px;
background-color:rgba(35, 39, 100, 0.85);
position:absolute;
right:0px;
margin-right:220px;
margin-top:5px;
box-shadow:0px 0px 10px 0px #000;
padding:5px;
}

a.tooltip:hover {text-decoration:none;}
a.tooltip span {
display:none;
padding:5px;
margin-left:-6px;
margin-top:40px;
width: 200px;
height: 65px;
line-height:14px;
z-index:10;

}

a.tooltip:hover span {
display:inline;
position:fixed;
color:#eee;
font-size:7px;
text-align:left;
line-height:11px;
background-color:rgba(35, 39, 100, 0.85);
z-index:99;

border:solid 1px #a41d1c;
}

h1{
font-family: 'Exo 2', sans-serif;
font-size:40pt;
color:#a41d1c;
margin-top:-60px;
position:absolute;
font-weight:900;

}

h4{
font-family: 'Exo 2', sans-serif;
font-size:7pt;
position:absolute;
color:#fff;
margin-top:150px;
font-weight:200;
}

<div id="moon"></div>
<div id="cloud1"></div>
<div id="cloud2"></div>
<div id="overlay"></div>
<div id="shen"></div>
<div id="boxthing">
<div id="box1">

</div>
<div id="box2">

</div>
<div id="box3">
 <a target="_blank" href="" class="tooltip">
<img style="filter:drop-shadow(0px 0px 4px #000); height:35px; position:absolute; left:5px; top:2.5px;" src="https://ddragon.leagueoflegends.com/cdn/8.9.1/img/passive/Shen_Passive.png">
<div class= "wrapper"><span><div class="arrowup"></div><h2>Ionian Fervor</h2><br><p style="margin-top: -15px;">
When Irelia strikes enemies with spells she gains a stacking bonus damage buff on her basic attacks. At maximum stacks she also gains Attack Speed and deals bonus damage to shields.
</p></span></div></a>

 <a target="_blank" href="" class="tooltip">
<img style="filter:drop-shadow(0px 0px 4px #000); height:35px; position:absolute; left:47.5px; top:2.5px;" src="https://ddragon.leagueoflegends.com/cdn/8.9.1/img/spell/ShenQ.png">
<div class= "wrapper"><span><div class="arrowup"></div><h2>Ionian Fervor</h2><br><p style="margin-top: -15px;">
When Irelia strikes enemies with spells she gains a stacking bonus damage buff on her basic attacks. At maximum stacks she also gains Attack Speed and deals bonus damage to shields.
</p></span></div></a>

 <a target="_blank" href="" class="tooltip">
<img style="filter:drop-shadow(0px 0px 4px #000); height:35px; position:absolute; left:87.5px; top:2.5px;" src="https://ddragon.leagueoflegends.com/cdn/8.9.1/img/spell/ShenW.png">
<div class= "wrapper"><span><div class="arrowup"></div><h2>Ionian Fervor</h2><br><p style="margin-top: -15px;">
When Irelia strikes enemies with spells she gains a stacking bonus damage buff on her basic attacks. At maximum stacks she also gains Attack Speed and deals bonus damage to shields.
</p></span></div></a>

 <a target="_blank" href="" class="tooltip">
<img style="filter:drop-shadow(0px 0px 4px #000); height:35px; position:absolute; left:127.5px; top:2.5px;" src="https://ddragon.leagueoflegends.com/cdn/8.9.1/img/spell/ShenE.png">
<div class= "wrapper"><span><div class="arrowup"></div><h2>Ionian Fervor</h2><br><p style="margin-top: -15px;">
When Irelia strikes enemies with spells she gains a stacking bonus damage buff on her basic attacks. At maximum stacks she also gains Attack Speed and deals bonus damage to shields.
</p></span></div></a>
 <a target="_blank" href="" class="tooltip">
<img style="filter:drop-shadow(0px 0px 4px #000); height:35px; position:absolute; left:170px; top:2.5px;" src="https://ddragon.leagueoflegends.com/cdn/8.9.1/img/spell/ShenR.png">
<div class= "wrapper"><span><div class="arrowup"></div><h2>Ionian Fervor</h2><br><p style="margin-top: -15px;">
When Irelia strikes enemies with spells she gains a stacking bonus damage buff on her basic attacks. At maximum stacks she also gains Attack Speed and deals bonus damage to shields.
</p></span></div></a>
</div>

<h1>Bloodmoon Shen </h1>
<h4>league of legends - golden rule - canon divergent/my take - story/smut welcome - experienced roleplay - snowball writer - my code, holla at me for one as well - discord available - Irelia is bae
</div>