Katarina

@import url('https://fonts.googleapis.com/css?family=Cinzel|Raleway');

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

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


#blade{
 background-image:url(https://i.imgur.com/xs5AVY4.png);
 background-size:100%;
 background-repeat:no-repeat;
 width:800px;
 height:400px;
 transform: rotate(-1130deg);
 opacity:1;
 filter:drop-shadow(0px 0px 10px #590a0a);
 position:absolute;
 top:50%;
 left:50%;
 margin-top:-200px;
 margin-left:1700px;
animation:blade1 .4s 1.5s;
animation-fill-mode:forwards;
}

@keyframes blade1{
from{
 transform: rotate(0deg);
 margin-top:-200px;
 margin-left:1700px;
}

to{
 transform: rotate(-1120deg);
 margin-top:-200px;
 margin-left:-100px;
}
}

#blade2{
 background-image:url(https://i.imgur.com/xs5AVY4.png);
 background-size:100%;
 background-repeat:no-repeat;
 width:800px;
 height:400px;
 opacity:1;
 filter:drop-shadow(0px 0px 10px #590a0a);
 position:absolute;
 top:50%;
 left:50%;
 margin-top:-200px;
 margin-left:-2000px;
   transform: scaleX(-1) rotate(-40deg);
animation:blade2 .4s 1.5s;
 animation-fill-mode:forwards;
}

@keyframes blade2{
from{
 transform: scaleX(-1) rotate(0deg);
 margin-top:-200px;
 margin-left:-2000px;
}

to{
 transform: scaleX(-1) rotate(-1120deg);
 margin-top:-200px;
 margin-left:-750px;
}
}


#boxbackground{
width:800px;
height:550px;
background-color:#222;
position:absolute;
top:50%;
left:50%;
margin-top:-300px;
margin-left:-425px;
z-index:20;
box-shadow:0px 0px 30px 10px #000;
border: solid #272524 5px ;
background-image:url(https://cdn.discordapp.com/attachments/437720547774955531/449740430859567106/memelords.png);
background-size:130%;
background-position:-200px 0px;
filter:contrast(100%);
}

#thing1{
background-size:100%;
background-image:url(https://i.imgur.com/2WNIOCm.png);
background-repeat:no-repeat;
width:250px;
height:250px;
position:absolute;
margin-top:-85px;
margin-left:650px;
filter:drop-shadow(0px 5px 10px #000) ;
z-index:10;
opacity:0;
animation:thing1 .5s 2s;
 animation-fill-mode:forwards;
}

@keyframes thing1{
from{
 width:250px;
height:250px;
margin-top:-85px;
margin-left:650px;
opacity:0;
}

to{
width:200px;
height:200px;
margin-top:-35px;
margin-left:650px;
opacity:1;
}
}

#thing2{
background-size:100%;
background-image:url(https://i.imgur.com/2WNIOCm.png);
background-repeat:no-repeat;
 width:250px;
height:250px;
position:absolute;
margin-top:-85px;
margin-left:-100px;
filter:drop-shadow(0px 5px 10px #000);
 transform: scaleX(-1);
z-index:10;
animation:thing2 .5s 2s;
 animation-fill-mode:forwards;
opacity:0;
}

@keyframes thing2{
from{
 width:250px;
height:250px;
margin-top:-85px;
margin-left:-100px;
opacity:0;
}

to{
width:200px;
height:200px;
margin-top:-35px;
margin-left:-50px;
opacity:1;
}
}

#thing3{
background-size:100%;
background-image:url(https://i.imgur.com/DhxLHx8.png);
background-repeat:no-repeat;
width:250px;
height:250px;
position:absolute;
margin-top:390px;
margin-left:650px;
filter:drop-shadow(0px -5px 10px #000) ;
z-index:10;
animation:thing3 .5s 2s;
 animation-fill-mode:forwards;
opacity:0;
}

@keyframes thing3{
from{
 width:250px;
height:250px;
margin-top:390px;
margin-left:650px;
opacity:0;
}

to{
width:200px;
height:200px;
margin-top:375px;
margin-left:650px;
opacity:1;
}
}

#thing4{
background-size:100%;
background-image:url(https://i.imgur.com/DhxLHx8.png);
background-repeat:no-repeat;
width:250px;
height:250px;
position:absolute;
margin-top:390px;
margin-left:-100px;
filter:drop-shadow(0px -5px 5px #000);
 transform: scaleX(-1);
z-index:10;
animation:thing4 .5s 2s;
 animation-fill-mode:forwards;
opacity:0;
}

@keyframes thing4{
from{
 width:250px;
height:250px;
margin-top:390px;
margin-left:-100px;
opacity:0;
}

to{
width:200px;
height:200px;
margin-top:375px;
margin-left:-50px;
opacity:1;
}
}

#overlay{
width:100%;
height:100%;
background-image:url(https://www.transparenttextures.com/patterns/iron-grip.png);
position:absolute;
left:0px;
top:0px;
z-index:5;
}


#kat{
background-image:url(https://i.imgur.com/eP7hNOE.png);
background-size:100%;
background-repeat:no-repeat;
height:500px;
width:360px;
position:absolute;
bottom:0px;
right:0px;
margin-bottom:-22px;
z-index:6;
filter: drop-shadow(15px 15px 15px #000);
opacity:0;
animation:kat 1s 2s;
animation-fill-mode:forwards;
}

@keyframes kat{
from{
opacity:0;
}

to{
opacity:.9;
}
}

#box1{
width:450px;
height:200px;
background-color:rgba(39, 37, 36, 0.9);
position:absolute;
z-index:15;
box-shadow:0px 0px 30px 0px #000;
margin-top:45px;
margin-left:35px;
opacity:0;
animation:appear 1s 2s;
animation-fill-mode:forwards;
}

#box2{
width:380px;
height:200px;
background-color:rgba(39, 37, 36, 0.9);
position:absolute;
z-index:15;
box-shadow:0px 0px 20px 0px #000;
bottom:0px;
margin-bottom:55px;
margin-left:35px;
opacity:0;
animation:appear 1s 2s;
animation-fill-mode:forwards;
}

@keyframes appear{
from{
opacity:0;
}

to{
opacity:1;
}
}

h1{
font-family: 'Cinzel', serif;
font-size:10pt;
margin-top:5px;
margin-bottom:5px;
text-align:center;
}


#info1{
width:190px;
height:180px;
background-color:transparent;
border:solid 1px #fff;
position:absolute;
left:5px;
top:5px;
overflow:auto;
color:#fff;
font-family: 'Raleway', sans-serif;
font-size:7pt;
padding:5px;
}

#info2{
width:220px;
height:120px;
background-color:transparent;
border:solid 1px #fff;
position:absolute;
right:5px;
top:5px;
overflow:auto;
color:#fff;
font-family: 'Raleway', sans-serif;
font-size:7pt;
padding:5px;
}

#info3{
width:230px;
height:50px;
background-color:transparent;
border:solid 1px #fff;
position:absolute;
right:5px;
bottom:5px;

}

#info4{
width:170px;
height:180px;
border:solid 1px #fff;
position:absolute;
left:5px;
top:5px;
overflow:auto;
color:#fff;
font-family: 'Raleway', sans-serif;
font-size:7pt;
padding:5px;
}

#info5{
width:170px;
height:50px;
border:solid 1px #fff;
position:absolute;
right:5px;
bottom:5px;
padding:5px;
overflow:auto;
}



#crest{
width:180px;
height:120px;
border:solid 1px #fff;
position:absolute;
right:5px;
top:5px;
transition:1s;
overflow:hidden;
}

#crestimage{
background-image:url(https://i.imgur.com/MQPX4IN.png);
background-size:100%;
background-repeat:no-repeat;
height:100px;
width:80px;
position:absolute;
left:50px;
top:10px;
transition:.5s;
filter:drop-shadow(0px 0px 5px #000);
}

#crest:hover #crestimage{
height:110px;
width:90;
left:45px;
top:-5px;
}

#crest a{
width:170px;
border-top:solid 1px #fff;
height:15px;
position:absolute;
bottom:-45px;
left:0px;
display:block;
transition:.5s;
color:#fff;
font-family: 'Raleway', sans-serif;
font-size:8pt;
padding:5px;
text-align:center;
}


#crest:hover a{
bottom:0px;
}

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

a:hover{
color:gold;
}

^^ Style vv html

<div id="blade"></div>
<div id="blade2"></div>
<div id="boxbackground">
<div id="kat"></div>
<div id="thing1"></div>
<div id="thing2"></div>
<div id="thing3"></div>
<div id="thing4"></div>
<div id="overlay"></div>
<div id="box1">
<div id="info1">
<h1>Headcanon</h1>
Write shit here
</div>

<div id="info2">
<h1>Stats</h1>
<span style="float: left; ">Thing</span> <span style="float: right;">Thing</span><br>
  <span style="float: left; ">Thing</span> <span style="float: right;">Thing</span><br>
  <span style="float: left; ">Thing</span> <span style="float: right;">Thing</span><br>
  <span style="float: left; ">Thing</span> <span style="float: right;">Thing</span><br>
  <span style="float: left; ">Thing</span> <span style="float: right;">Thing</span><br>
  <span style="float: left; ">Thing</span> <span style="float: right;">Thing</span><br>
  <span style="float: left; ">Thing</span> <span style="float: right;">Thing</span><br>
  <span style="float: left; ">Thing</span> <span style="float: right;">Thing</span><br>
  <span style="float: left; ">Thing</span> <span style="float: right;">Thing</span><br>
  <span style="float: left; ">Thing</span> <span style="float: right;">Thing</span><br>
  <span style="float: left; ">Thing</span> <span style="float: right;">Thing</span><br>
</div>

<div id="info3">
   <a target="_blank" href="https://br.leagueoflegends.com/pt/game-info/champions/Katarina/#SpellP" >
<img style="filter:drop-shadow(0px 0px 4px #000); height:40px; margin-left:2px; margin-top:5px " src="https://ddragon.leagueoflegends.com/cdn/8.10.1/img/passive/Katarina_Passive.png">
</img></a>
   <a target="_blank" href="https://br.leagueoflegends.com/pt/game-info/champions/Katarina/#SpellQ" >
<img style="filter:drop-shadow(0px 0px 4px #000); height:40px; margin-left:2px; margin-top:2px " src="https://ddragon.leagueoflegends.com/cdn/8.10.1/img/spell/KatarinaQ.png">
</img></a>
   <a target="_blank" href="https://br.leagueoflegends.com/pt/game-info/champions/Katarina/#SpellW" >
<img style="filter:drop-shadow(0px 0px 4px #000); height:40px; margin-left:2px; margin-top:2px " src="https://ddragon.leagueoflegends.com/cdn/8.10.1/img/spell/KatarinaW.png">
</img></a>
   <a target="_blank" href="https://br.leagueoflegends.com/pt/game-info/champions/Katarina/#SpellE" >
<img style="filter:drop-shadow(0px 0px 4px #000); height:40px; margin-left:2px; margin-top:2px " src="https://ddragon.leagueoflegends.com/cdn/8.10.1/img/spell/KatarinaEWrapper.png">
</img></a>
   <a target="_blank" href="https://br.leagueoflegends.com/pt/game-info/champions/Katarina/#SpellR" >
<img style="filter:drop-shadow(0px 0px 4px #000); height:40px; margin-left:2px; margin-top:2px " src="https://ddragon.leagueoflegends.com/cdn/8.10.1/img/spell/KatarinaR.png">
</img></a>

</div>


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

<div id="info4">
<h1>Out of Character</h1>
<b>00</b> This profile was made by <a href="https://roleplay.chat/profile.php?user=Hound%20of%20Tindalos" title="My Latino Lover">Hound of Tindalos</a> DM or send him an rpc mail for inquiries on commissions.
</div>

<div id="info5">
<a href="https://roleplay.chat//profile.php?user=" title="Write thing about fren here"><img style="filter:drop-shadow(0px 0px 4px #000); height:45px; margin-left:5px; " src="https://i2.wp.com/czechpoints.com/wp-content/uploads/2017/10/facebook-anonymous-app.jpg"></a>
  <a href="https://roleplay.chat//profile.php?user=" title="Write thing about fren here"><img style="filter:drop-shadow(0px 0px 4px #000); height:45px; margin-left:5px; " src="https://i2.wp.com/czechpoints.com/wp-content/uploads/2017/10/facebook-anonymous-app.jpg"></a>
  <a href="https://roleplay.chat//profile.php?user=" title="Write thing about fren here"><img style="filter:drop-shadow(0px 0px 4px #000); height:45px; margin-left:5px; " src="https://i2.wp.com/czechpoints.com/wp-content/uploads/2017/10/facebook-anonymous-app.jpg"></a>

 <a href="https://roleplay.chat//profile.php?user=" title="Write thing about fren here"><img style="filter:drop-shadow(0px 0px 4px #000); height:45px; margin-left:5px; " src="https://i2.wp.com/czechpoints.com/wp-content/uploads/2017/10/facebook-anonymous-app.jpg"></a>
   <a href="https://roleplay.chat//profile.php?user=" title="Write thing about fren here"><img style="filter:drop-shadow(0px 0px 4px #000); height:45px; margin-left:5px; " src="https://i2.wp.com/czechpoints.com/wp-content/uploads/2017/10/facebook-anonymous-app.jpg"></a>
   <a href="https://roleplay.chat//profile.php?user=" title="Write thing about fren here"><img style="filter:drop-shadow(0px 0px 4px #000); height:45px; margin-left:5px; " src="https://i2.wp.com/czechpoints.com/wp-content/uploads/2017/10/facebook-anonymous-app.jpg"></a>

</div>

<div id="crest">
<div id="crestimage">
</div>
<a href=""> Region: Noxus (NA/PST)</a>
</div>

</div>

</div>