Ahri Code

@import url('https://fonts.googleapis.com/css?family=Amatic+SC|Arimo');

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

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




#imagebackground{
background-image:url(https://i.imgur.com/Vlt9So8.png);
background-size:100%;
width:700px;
height:500px;
position:absolute;
top:50%;
left:50%;
margin-left:-350px;
margin-top:-250px;
z-index:10;
}

#backgroundbackground{
width:700px;
height:500px;
position:absolute;
top:50%;
left:50%;
margin-left:-350px;
margin-top:-250px;
z-index:9;
overflow:hidden;
}

#square1{
background-color:#b72369;
width:700px;
height:500px;
position:absolute;
transform:rotate(45deg);
margin-top:750px;
margin-left:750px;
}

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

@keyframes square1{
from{
margin-top:750px;
margin-left:750px;
}
to{
margin-top:310px;
margin-left:310px;
}
}

#square2{
background-color:#b72369;
width:700px;
height:500px;
position:absolute;
transform:rotate(45deg);
margin-top:-710px;
margin-left:-710px;
}

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

@keyframes square2{
from{
margin-top:-750px;
margin-left:-750px;
}
to{
margin-top:-200px;
margin-left:-200px;
}
}


#click{
width:250px;
height:250px;
position:absolute;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-100px;
z-index:25;
opacity:1;

}

  #click a{
display:block;
background-image:url(https://i.imgur.com/hpJEJp7.png);
background-size:100%;
width:200px;
height:200px;
filter:drop-shadow(0px 0px 10px rgba(255, 255, 255,1));
}

#click a:hover{
 animation:pulse 1s infinite ;
}

#blanket:target #click{
opacity:0;
transition:1s;
z-index:0;
}


@keyframes pulse{

 to {filter:drop-shadow(0px 0px 50px rgba(255, 255, 255, 0.5));}

 }

#boxes{
width:780px;
height:600px;
background-image:url(http://i.picpar.com/IPOc.png);
background-repeat:no-repeat;
background-size:100%;
position:absolute;
margin-top:-250px;
margin-left:-430px;
top:50%;
left:50%;
z-index:15;
opacity:0;
transition:2s;
transition-delay:7s;
font-family: 'Arimo', sans-serif;
}

#blanket:target #boxes{
opacity:1;
}

#box1{
width:180px;
height:230px;
background-color:rgba(247, 41, 112, 0.5);
position:absolute;
margin-top:50px;
margin-left:350px;
color:#FFF2DF;
font-family: 'Arimo', sans-serif;
font-size: 10px;
padding: 10px;
overflow-y:auto;
overflow-x: hidden;
}

#box2{
width:180px;
height:180px;
background-color:rgba(247, 41, 112, 0.5);
position:absolute;
margin-top:50px;
margin-left:560px;
font-family: 'Arimo', sans-serif;
font-size: 10px;
padding: 10px;
overflow:auto;
color:#FFF2DF;
}

#box3{
width:200px;
height:40px;
background-color:rgba(247, 41, 112, 0.5);
position:absolute;
margin-top:260px;
margin-left:560px;
}

#box4{

width:180px;
height:135px;
background-color:rgba(247, 41, 112, 0.5);
position:absolute;
margin-top:330px;
margin-left:560px;
font-size: 10px;
padding: 10px;
overflow:auto;
color:#FFF2DF;
}

#box5{
width:200px;
height:70px;
background-color:rgba(247, 41, 112, 0.5);
position:absolute;
margin-top:330px;
margin-left:350px;
overflow:auto;
}

#box5 a{
width: 190px;
height:40px;
margin-top:5px;
margin-left:5px;
overflow:hidden;
display:block;
background-color:#fff;
transition:1s;
}

#box5 a:hover{
filter:drop-shadow(5px 0px 5px #000);
}

#box6{
width:200px;
height:75px;
background-color:rgba(247, 41, 112, 0.5);
position:absolute;
margin-top:410px;
margin-left:350px;
overflow:auto;
}

#box6 a{
width: 190px;
height:40px;
margin-top:5px;
margin-left:5px;
overflow:hidden;
display:block;
background-color:#fff;
transition:1s;
}

#box6 a:hover{
filter:drop-shadow(5px 0px 5px #000) contrast(150%) brightness(120%);
}


#textbackground{
  background-image:url(https://cdn.discordapp.com/attachments/454138683839217674/459119382782541834/Stroke_2.png);
background-size:100%;
width:200px;
height:40px;
  margin-top:0px;
margin-left:-10px;
margin-bottom:5px;
}

#textbackground2{
  background-image:url(https://cdn.discordapp.com/attachments/454138683839217674/459119382782541834/Stroke_2.png);
background-size:100%;
width:200px;
height:40px;
  margin-top:-10px;
}

h1{

 color:#fff;
  margin-top:0px;
  margin-left: -8px;
  font-family: 'Amatic SC', cursive;
  text-align: left;
 font-size:20pt;
position:absolute;
margin-top:5px;
margin-left:10px;
text-shadow: .5px .5px 5px #000;
}

h2{

 color:#fff;
  font-family: 'Amatic SC', cursive;
  text-align:center;
 font-size:15pt;
position:absolute;
  margin-top:15px;
  margin-left: 75px;
text-shadow: .5px .5px 5px #000;
}

#box3 a{
text-decoration:none;
}

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

a.tooltip:hover span {
display:inline;
position:absolute;
color:#eee;
font-size:7px;
text-align:left;
line-height:11px;
background-color:rgba(247, 41, 112, 0.8);
box-shadow:0px 0px 10px 2px rgba(226, 105, 140, 0.90);
z-index:99;
color:#FFF2DF;
font-family: 'Arimo', sans-serif;
font-size: 10px;
}

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

a:hover{
color:gold;
}

<div id="blanket"><div id="blanket2"><div id="blanket3"><div id="blanket4"><div id="blanket5"><div id="blanket6">



<div id="imagebackground"></div>
<div id="boxes">
<div id="box1">
<div id="textbackground">
<h1> IONIAN TEMPTRESS</h1>
</div>
<font style="float:left;">Thing</font><font style="float:right;">Thing</font></br>
<font style="float:left;">Thing</font><font style="float:right;">Thing</font></br>
<font style="float:left;">Thing</font><font style="float:right;">Thing</font></br>
<font style="float:left;">Thing</font><font style="float:right;">Thing</font></br>
<font style="float:left;">Thing</font><font style="float:right;">Thing</font></br>
<font style="float:left;">Thing</font><font style="float:right;">Thing</font></br>
<font style="float:left;">Thing</font><font style="float:right;">Thing</font></br>
<font style="float:left;">Thing</font><font style="float:right;">Thing</font></br>
<font style="float:left;">Thing</font><font style="float:right;">Thing</font></br>
<font style="float:left;">Thing</font><font style="float:right;">Thing</font></br>
<font style="float:left;">Thing</font><font style="float:right;">Thing</font></br>
<div id="textbackground">
<h1>You can copy this</h1>
</div>
And follow up with more text!<br>
SO MUCH TEXT YOU CAN <b>
EVEN<BR>
SCROLL<BR>
DOWN
</div>

<div id="box2">
<div id="textbackground">
<h1> Headcanon </h1>
</div>
Write what you want here!
</div>


<div id="box3">

 <a href="" class="tooltip" >
<img style="filter:drop-shadow(0px 0px 4px #000); height:30px; margin-left:5px; margin-top:5px" src="https://ddragon.leagueoflegends.com/cdn/8.11.1/img/passive/Ahri_SoulEater2.png">
</img><span><div id="textbackground2">
<h2> Vastayan Grace </h2>
</div>Whenever Ahri's spells hit a champion 2 times within a short period, she briefly gains movement speed.
</span></a>
 <a href="" class="tooltip" >
<img style="filter:drop-shadow(0px 0px 4px #000); height:30px; margin-left:5px; margin-top:5px" src="https://ddragon.leagueoflegends.com/cdn/8.11.1/img/spell/AhriOrbofDeception.png">
</img><span><div id="textbackground2">
<h2> Orb Of Deception </h2>
</div>Ahri sends an orb of arcane energy in the target direction, dealing Ability power magic damage to all enemies it passes through, then pulls it back, dealing Hybrid penetration true damage to all enemies it passes through on the way to her current location.
</span></a>
 <a href="" class="tooltip" >
<img style="filter:drop-shadow(0px 0px 4px #000); height:30px; margin-left:5px; margin-top:5px" src="https://ddragon.leagueoflegends.com/cdn/8.11.1/img/spell/AhriFoxFire.png">
</img><span><div id="textbackground2">
<h2> Fox Fire </h2>
</div>Ahri summons three spectral flames which orbit her for up to 5 seconds.
</span></a>
 <a href="" class="tooltip" >
<img style="filter:drop-shadow(0px 0px 4px #000); height:30px; margin-left:5px; margin-top:5px" src="https://ddragon.leagueoflegends.com/cdn/8.11.1/img/spell/AhriSeduce.png">
</img><span><div id="textbackground2">
<h2> Charm </h2>
</div>Ahri blows a kiss in a line, dealing Ability power magic damage to the first enemy hit, Charm icon charming them and Slow icon slowing them by 65%.
</span></a>
 <a href="" class="tooltip" >
<img style="filter:drop-shadow(0px 0px 4px #000); height:30px; margin-left:5px; margin-top:5px" src="https://ddragon.leagueoflegends.com/cdn/8.11.1/img/spell/AhriTumble.png">
</img><span><div id="textbackground2">
<h2> Spirit Rush </h2>
</div>Ahri dashes in the direction of the cursor after which she fires up to three energy bolts that each pursue one of her nearest visible enemies, dealing Ability power magic damage. Each enemy can only be hit by one bolt at a time.
</span></a>

</div>
<div id="box4">
<div id="textbackground">
<h1> Out of Character</h1>
</div>
 <font size="2pt" color="#fbd1be">00</font> Code credit @ <a href="https://roleplay.chat/profile.php?user=Hound+of+Tindalos"> Hound of Tindalos </a>.<br>
 <font size="2pt" color="#fbd1be">01</font> Bullet.<br>
 <font size="2pt" color="#fbd1be">01</font> Bullet.<br>
 <font size="2pt" color="#fbd1be">01</font> Bullet.<br>
 <font size="2pt" color="#fbd1be">01</font> Bullet.<br>
 <font size="2pt" color="#fbd1be">01</font> Bullet.<br>
</div>
<div id="box5">
<a href="https://roleplay.chat//profile.php?user=" title="Write thing about fren here"><img style="background-size:100%; width190px; height:40px;" src="https://cdn.discordapp.com/attachments/454138683839217674/459230580127825930/Sem_Titulo-2.png"></a>
<a href="https://roleplay.chat//profile.php?user=" title="Write thing about fren here"><img style="background-size:100%; width190px; height:40px;" src="https://cdn.discordapp.com/attachments/454138683839217674/459230580127825930/Sem_Titulo-2.png"></a>
<a href="https://roleplay.chat//profile.php?user=" title="Write thing about fren here"><img style="background-size:100%; width190px; height:40px;" src="https://cdn.discordapp.com/attachments/454138683839217674/459230580127825930/Sem_Titulo-2.png"></a>
<a href="https://roleplay.chat//profile.php?user=" title="Write thing about fren here"><img style="background-size:100%; width190px; height:40px;" src="https://cdn.discordapp.com/attachments/454138683839217674/459230580127825930/Sem_Titulo-2.png"></a>
<a href="https://roleplay.chat//profile.php?user=" title="Write thing about fren here"><img style="background-size:100%; width190px; height:40px;" src="https://cdn.discordapp.com/attachments/454138683839217674/459230580127825930/Sem_Titulo-2.png"></a>
</div>

<div id="box6">
<a href="https://78.media.tumblr.com/d472d05343d2bdefb1381df23454b963/tumblr_p4wxga1ZVr1vjktc3o1_1280.jpg" title=""><img style="background-size:100%; width190px; height:40px;" src="https://i.imgur.com/k6iQdbr.png"></a>
<a href="https://78.media.tumblr.com/99db3bb191433a7529598ea9d3f3e32e/tumblr_p62joqtpca1qjtxoeo1_1280.jpg" title=""><img style="background-size:100%; width190px; height:40px;" src="https://i.imgur.com/cvLdvpG.png"></a>
<a href="https://78.media.tumblr.com/00bd0882a31c072dda83a4a8cd47be9d/tumblr_p51ee7xtxw1wt7ek9o1_1280.jpg" title=""><img style="background-size:100%; width190px; height:40px;" src="https://i.imgur.com/nYjPTKU.png"></a>
<a href="image link here" title=""><img style="background-size:100%; width190px; height:40px;" src="https://cdn.discordapp.com/attachments/454138683839217674/459230580127825930/Sem_Titulo-2.png"></a>
</div>
</div>
<div id="backgroundbackground">
<div id="square1"></div>
<div id="square2"></div>

</div>

<div id="click">
<a href="#blanket"></a>
</div>