Aatrox

@import url('https://fonts.googleapis.com/css?family=Encode+Sans+Condensed');
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:700');

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

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


#sword a{
background-image:url(https://cdn.discordapp.com/attachments/431497796152066101/459247722268983298/stabbything.gif);
width:500px;
height:400px;
background-size:100%;
background-repeat:no-repeat;
display:block;
transform:rotate(90deg);
 transform-origin: 20% 20%;
position:absolute;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-200px;
z-index:99;
filter:drop-shadow(0px 0px 5px #000);
}

#blanket:target #sword a{
animation:sword 5s;
animation-fill-mode:forwards;
}

@keyframes sword{
0%{
margin-left:-100px;
margin-top:-200px;
transform:rotate(90deg);
z-index:99;
}

30%{
margin-left:-750px;
margin-top:-100px;
transform:rotate(360deg);
z-index:99;
}

90%{
margin-left:-790px;
margin-top:-100px;
transform:rotate(360deg);
z-index:0;
}

100%{
margin-left:-450px;
margin-top:-100px;
transform:rotate(360deg);
z-index:0;
}
}

#backgroundimage{
background-image:url(http://us.media2.battle.net/cms/gallery/CBT2UMRBPDXB1309289036608.jpg);
background-size:130%;
width:800px;
height:500px;
opacity:0;
position:absolute;
z-index:0;
filter:contrast(200%) brightness(50%);
}

#blanket:target #backgroundimage{
animation: backgroundimage 1s 5s;
animation-fill-mode:forwards;
}

@keyframes backgroundimage{
from{
opacity:0;
}

to{
opacity:1;
}
}

#box{
width:800px;
height:500px;
background-color:#060606;
position:absolute;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-200px;
z-index:10;
box-shadow:0px 0px 00px 0px #000;
}

#blanket:target #box{
animation:shadow 3s 3s;
animation-fill-mode:forwards;
}

@keyframes shadow{
0%{
box-shadow:0px 0px 0px 0px #000;
z-index:0;
}

100%{
box-shadow:0px 0px 30px 0px #000;
z-index:10;
}
}

#lava1{
height:250px;
width:800px;
position:absolute;
top:0px;
left:0px;
z-index:1;
background-image:url(https://78.media.tumblr.com/2950d74ad29f400933e4bbb5eedcced0/tumblr_otq9ulm1Il1twd8ddo1_500.gif);
background-size:100%;
clip-path: polygon(0 100%, .5% 100%, .5% 100%, 0% 100%);
}

#blanket:target #lava1{
animation:lava1 .5s 4.5s;
animation-fill-mode:forwards;
}

@keyframes lava1{
0%{
clip-path: polygon(0 100%, .5% 100%, .5% 100%, 0% 100%);
}

100%{
clip-path: polygon(0 0, .5% 0, .5% 100%, 0% 100%);
}
}

#lava2{
height:250px;
width:800px;
position:absolute;
top:0px;
left:0px;
z-index:1;
background-image:url(https://78.media.tumblr.com/2950d74ad29f400933e4bbb5eedcced0/tumblr_otq9ulm1Il1twd8ddo1_500.gif);
background-size:100%;
clip-path: polygon(0 0, 0% 0, 0% 2%, 0 2%);
}

#blanket:target #lava2{
animation:lava2 .5s 5s;
animation-fill-mode:forwards;
}

@keyframes lava2{
0%{
clip-path: polygon(0 0, 0% 0, 0% 2%, 0 2%);
}

100%{
clip-path: polygon(0 0, 100% 0, 100% 2%, 0 2%);
}
}

#lava3{
height:250px;
width:800px;
position:absolute;
top:0px;
left:0px;
z-index:1;
background-image:url(https://78.media.tumblr.com/2950d74ad29f400933e4bbb5eedcced0/tumblr_otq9ulm1Il1twd8ddo1_500.gif);
background-size:100%;
clip-path: polygon(99.5% 0, 100% 0, 100% 0%, 99.5% 0%);

}

#blanket:target #lava3{
animation:lava3 .5s 5.5s;
animation-fill-mode:forwards;
}

@keyframes lava3{
0%{
clip-path: polygon(99.5% 0, 100% 0, 100% 0%, 99.5% 0%);
}

100%{
clip-path: polygon(99.5% 0, 100% 0, 100% 100%, 99.5% 100%);
}
}

#lava4{
height:250px;
width:800px;
position:absolute;
bottom:0px;
left:0px;
z-index:1;
background-image:url(https://78.media.tumblr.com/2950d74ad29f400933e4bbb5eedcced0/tumblr_otq9ulm1Il1twd8ddo1_500.gif);
background-size:100%;
background-position:0px 550px;
clip-path: polygon(0 0, .5% 0, .5% 0, 0 0);

}

#blanket:target #lava4{
animation:lava4 .5s 4.5s;
animation-fill-mode:forwards;
}

@keyframes lava4{
0%{
clip-path: polygon(0 0, .5% 0, .5% 0, 0 0);
}

100%{
clip-path: polygon(0 0, .5% 0, .5% 100%, 0 100%);
}
}

#lava5{
height:250px;
width:800px;
position:absolute;
bottom:0px;
left:0px;
z-index:1;
background-image:url(https://78.media.tumblr.com/2950d74ad29f400933e4bbb5eedcced0/tumblr_otq9ulm1Il1twd8ddo1_500.gif);
background-size:100%;
background-position:0px 550px;
clip-path: polygon(0 98%, 0% 98%, 0% 100%, 0 100%);
}

#blanket:target #lava5{
animation:lava5 .5s 5s;
animation-fill-mode:forwards;
}

@keyframes lava5{
0%{
clip-path: polygon(0 98%, 0% 98%, 0% 100%, 0 100%);
}

100%{
clip-path: polygon(0 98%, 100% 98%, 100% 100%, 0 100%);
}
}

#lava6{
height:250px;
width:800px;
position:absolute;
bottom:0px;
left:0px;
z-index:1;
background-image:url(https://78.media.tumblr.com/2950d74ad29f400933e4bbb5eedcced0/tumblr_otq9ulm1Il1twd8ddo1_500.gif);
background-size:100%;
background-position:0px 550px;
clip-path: polygon(99.5% 100%, 100% 100%, 100% 100%, 99.5% 100%);
}

#blanket:target #lava6{
animation:lava6 .5s 5.5s;
animation-fill-mode:forwards;
}

@keyframes lava6{
0%{
clip-path: polygon(99.5% 100%, 100% 100%, 100% 100%, 99.5% 100%);
}

100%{
clip-path: polygon(99.5% 0, 100% 0, 100% 100%, 99.5% 100%);
}
}

#accent1{
background-image:url(https://i.imgur.com/RVGAdrm.png);
background-size:100%;
width:800px;
height:200px;
background-repeat:no-repeat;
position:absolute;
z-index:10;
margin-top:-150px;
}

#blanket:target #accent1{
animation:accent1 1s 3s;
animation-fill-mode:forwards;
}

@keyframes accent1{
from{
background-image:url(https://i.imgur.com/RVGAdrm.png);
}
to{
background-image:url(https://i.imgur.com/WbHgzq2.png);
}
}

#accent2{
background-image:url(https://i.imgur.com/hiJIO1m.png);
background-size:100%;
width:800px;
height:200px;
background-repeat:no-repeat;
position:absolute;
z-index:6;
margin-top:380px;
}

#blanket:target #accent2{
animation:accent2 1s 3s;
animation-fill-mode:forwards;
}

@keyframes accent2{
from{
background-image:url(https://i.imgur.com/hiJIO1m.png);
}
to{
background-image:url(https://i.imgur.com/zsE0Zmf.png);
}
}

#image{
background-image:url(https://cdn.discordapp.com/attachments/431497796152066101/459913421371080715/Aatrox..png);
background-size:100%;
background-repeat:no-repeat;
width:380px;
height:450px;
position:absolute;
top:0px;
right:0px;
margin-right:25px;
margin-top:25px;
z-index:0;
opacity:0;
filter:drop-shadow(0px 0px 10px #000) contrast(120%) brightness(70%);
}

#blanket:target #image{
animation:aatrox 1s 5.5s;
animation-fill-mode:forwards;
}

#blanket:target #info1{
animation:aatrox 1s 6s;
animation-fill-mode:forwards;
}
#blanket:target #info2{
animation:aatrox 1s 6s;
animation-fill-mode:forwards;
}
#blanket:target #info3{
animation:aatrox 1s 6s;
animation-fill-mode:forwards;
}

@keyframes aatrox {
from{
opacity:0;
}

to{
opacity:1;
}
}

#info1{
width:300px;
height:190px;
background-color:#111;
position:absolute;
left:0px;
top:0px;
margin-left:15px;
margin-top:25px;
box-shadow:0px 0px 10px 0px #000;
z-index:7;
font-family: 'Roboto Mono', monospace;
font-size:9.1pt;
color:#d70909;
padding:15px;
font-weight:600;
text-transform: uppercase;
text-align:justify;
opacity:0;
}

#info1 a{
text-decoration:none;
background-image:url(https://78.media.tumblr.com/2950d74ad29f400933e4bbb5eedcced0/tumblr_otq9ulm1Il1twd8ddo1_500.gif);
color:#767676;
transition:1s;
box-shadow:0px 0px 5px 0px #000;
}

#info1 a:hover{
color:#d70909;
}



#info2{
width:300px;
height:140px;
background-color:#111;
position:absolute;
left:0px;
bottom:0px;
margin-left:15px;
margin-bottom:75px;
box-shadow:0px 0px 10px 0px #000;
z-index:6;
font-family: 'Roboto Mono', monospace;
font-size: 9pt;
color:#d70909;
padding:15px;
overflow:auto;
opacity:0;

}

#info2 a{
text-decoration:none;
color:#d70909;
transition:1s;
}

#info2 a:hover{
color:gold;
}

#info2 b{
color:#fff;
font-size:10pt;
}


#info3{
width:80px;
height:350px;
background-color:#111;
position:absolute;
left:0px;
top:0px;
margin-left:350px;
margin-top:75px;
box-shadow:0px 0px 10px 0px #000;
z-index:8;
opacity:0;
}

#info3 a{
text-decoration:none;
}

h1{
font-family: 'Roboto Mono', monospace;
font-size: 15pt;
margin-top:5px;
margin-bottom:15px;
}




a.tooltip:hover {text-decoration:none;}
a.tooltip span {
display:none;
padding:5px;
top:0px;
left:0px;
margin-left:100px;
margin-top:250px;
width: 300px;
line-height:14px;
z-index:10;

}

a.tooltip:hover span {
display:inline;
position:absolute;
color:#eee;
font-size:7px;
text-align:left;
background-color:#111;
box-shadow:0px 0px 10px 2px #630404;
z-index:99;
color:#d70909;
font-family: 'Roboto Mono', monospace;
font-size: 15px;
text-decoration:none;
}



a.tooltip2:hover {text-decoration:none;}
a.tooltip2 span {
display:none;
padding:15px;
top:0px;
left:0px;
margin-left:0px;
margin-top:230px;
width:300px;
height:190px;
line-height:14px;
z-index:10;
}

a.tooltip2:hover span {
display:inline;
position:absolute;
font-size:7px;
text-align:left;
line-height:18px;
background-color:#111;
box-shadow:0px 0px 10px 2px #630404;
z-index:99;
color:#d70909;
font-family: 'Roboto Mono', monospace;
font-size: 15px;
text-decoration:none;
transition:1s;
overflow:auto;
}

<div id="blanket">
<div id="box">
<div id="backgroundimage"></div>
<div id="info1">
Once honored defenders of Shurima against the Void, <a href="" class="tooltip2">Aatrox<span>
<font style="float:left"><b>Thing</b></font> <font style="float:right">Thing</font><br>
<font style="float:left"><b>Thing</b></font> <font style="float:right">Thing</font><br>
<font style="float:left"><b>Thing</b></font> <font style="float:right">Thing</font><br>
<font style="float:left"><b>Thing</b></font> <font style="float:right">Thing</font><br>
<font style="float:left"><b>Thing</b></font> <font style="float:right">Thing</font><br>
<font style="float:left"><b>Thing</b></font> <font style="float:right">Thing</font><br>
<font style="float:left"><b>Thing</b></font> <font style="float:right">Thing</font><br>
<font style="float:left"><b>Thing</b></font> <font style="float:right">Thing</font><br>
<font style="float:left"><b>Thing</b></font> <font style="float:right">Thing</font><br>
<font style="float:left"><b>Thing</b></font> <font style="float:right">Thing</font><br>

</span></a> and his brethren would eventually become an even greater threat to <a href="" class="tooltip2">Runeterra<span>Write whatever you want here
</span></a>, and were defeated only by cunning mortal sorcery. But after centuries of imprisonment, Aatrox was the first to find freedom once more, corrupting and transforming those foolish enough to try and wield the magical weapon that contained his essence. Now, with stolen flesh, he walks Runeterra in a brutal approximation of his previous form, seeking an apocalyptic and long overdue vengeance.
</div>

<div id="info2">
<b>00</b> Code credit @ <a href="">Hound of Tindalos </a><br>
<b>01</b><br>
<b>01</b><br>
<b>01</b><br>
<b>01</b><br>
</div>

<div id="info3">
 <a href="" class="tooltip" >
<img style="filter:drop-shadow(0px 0px 4px #000) contrast(150%); height:60px; margin-left:10px; margin-top:8px" src="https://ddragon.leagueoflegends.com/cdn/8.13.1/img/passive/Aatrox_Passive.AatroxUpdate.png">
</img><span><div id="textbackground2">
<h1> Deathbringer Stance </h1>
</div>Aatrox deals bonus damage on his next attack and reduces heals and shields on the target.
</span></a>

<a href="" class="tooltip" >
<img style="filter:drop-shadow(0px 0px 4px #000) contrast(150%); height:60px; margin-left:10px; margin-top:8px" src="https://ddragon.leagueoflegends.com/cdn/8.13.1/img/spell/AatroxQ.png">
</img><span><div id="textbackground2">
<h1> The Darkin Blade </h1>
</div>Aatrox slams his greatsword down, dealing physical damage. He can swing three times, each with a different area of effect.
</span></a>

<a href="" class="tooltip" >
<img style="filter:drop-shadow(0px 0px 4px #000) contrast(150%); height:60px; margin-left:10px; margin-top:8px" src="https://ddragon.leagueoflegends.com/cdn/8.13.1/img/spell/AatroxW.png">
</img><span><div id="textbackground2">
<h1> Infernal Chains </h1>
</div>Aatrox smashes the ground, dealing damage to the first enemy hit. Champions and large monsters have to leave the impact area quickly or they will be dragged to the center and take the damage again.
</span></a>

<a href="" class="tooltip" >
<img style="filter:drop-shadow(0px 0px 4px #000) contrast(150%); height:60px; margin-left:10px; margin-top:8px" src="https://ddragon.leagueoflegends.com/cdn/8.13.1/img/spell/AatroxE.png">
</img><span><div id="textbackground2">
<h1> Umbral Dash </h1>
</div>Aatrox lunges, gaining attack damage.
</span></a>

<a href="" class="tooltip" >
<img style="filter:drop-shadow(0px 0px 4px #000) contrast(150%); height:60px; margin-left:10px; margin-top:8px" src="https://ddragon.leagueoflegends.com/cdn/8.13.1/img/spell/AatroxR.png">
</img><span><div id="textbackground2">
<h1> World Ender </h1>
</div>Aatrox unleashes his demonic form, gaining attack damage and movement speed. Upon taking lethal damage, Aatrox will revive instead of dying, healing for a percentage of his maximum health.
</span></a>



</div>
<div id="accent1"></div>
<div id="accent2"></div>
<div id="lava1"></div>
<div id="lava2"></div>
<div id="lava3"></div>

<div id="lava4"></div>

<div id="lava5"></div>

<div id="lava6"></div>
<div id="image"></div>
</div>
<div id="sword">
<a href="#blanket"></a>
</a>
</div>