Irelia 2.0

<style>
@import url('https://fonts.googleapis.com/css?family=Quintessential');
@import url('https://fonts.googleapis.com/css?family=Aladin');
@import url('https://fonts.googleapis.com/css?family=Forum');

@font-face {
 font-family: 'Brush';
 src: url('https://dl.dropbox.com/s/gdi53rthi0ccjgh/Eastern%20Brush.ttf');}

  @font-face {
 font-family: 'Quick';
 src: url('https://dl.dropbox.com/s/yvhokjgkhz2bsjo/GeosansLight.ttf?dl=0');}

  body {
   background: linear-gradient(#86aebe, #e16b8d);
   overflow:hidden;
}

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


#bottom{
 background-image:url(https://i.imgur.com/Mdbk4oN.png);
 margin:auto;
 top:50%;
 left:50%;
 background-size:100%;
 width:900px;
 height:200px;
 background-repeat:no-repeat;
  margin-top:-35px;
 margin-left:-450px;
 position:absolute;
  z-index:50;
  animation:bottom 2s 2s;
  animation-fill-mode:forwards;
  filter:contrast(120%);

}

@keyframes bottom{
  from{margin-top:-35px;}
  to{margin-top:106px; filter:drop-shadow(0px -5px 5px #a7376b);}
}



#top{
 background-image:url(https://i.imgur.com/3WzMBDE.png);
 margin:auto;
 top:50%;
 left:50%;
 background-size:100%;
 width:900px;
 height:200px;
 background-repeat:no-repeat;
 margin-top:-200px;
 margin-left:-450px;
  position:absolute;
  z-index:50;
    animation:top 2s 2s;
  animation-fill-mode:forwards;
  filter:contrast(120%);

}

@keyframes top{
  from{margin-top:-200px;}
  to{margin-top:-350px;filter:drop-shadow(0px 5px 10px #a7376b);}
}


#sygil{
 background-image:url(https://i.imgur.com/0xCNv6C.png);
 margin:auto;
 top:50%;
 left:50%;
 background-size:100%;
 width:220px;
 height:220px;
 background-repeat:no-repeat;
 margin-top:-145px;
 margin-left:-110px;
  position:absolute;
  z-index:99;
      animation:sygil 4s 2s;
  animation-fill-mode:forwards;
}

@keyframes sygil{
  0%{margin-top:-145px; opacity:1;  z-index:99;}
 50%{margin-top:-295px; opacity:1;  z-index:99;}
 100%{margin-top:-295px;opacity:0; z-index:0;}
}

#image{
  background-image:url(https://i.imgur.com/XcjByAj.png);
  background-size:100%;
  background-repeat:no-repeat;
  width:1000px;
  height:570px;
  position:absolute;
  z-index:80;
  top:50%;
  left:50%;
  margin-top:-289px;
  margin-left:-500px;
  opacity:0;
  animation:image 2s 4s;
    animation-fill-mode:forwards;
 filter:drop-shadow(10px 0px 10px #e16b8d) contrast(120%);
}

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




#container{
height:550px;
width:900px;
position:absolute;
top:50%;
left:50%;
margin-top:-300px;
margin-left:-450px;
overflow:hidden;
opacity:0;
 animation:appear 1.5s 4s;
    animation-fill-mode:forwards;
    background-color:#f9d0d2;
    background-image:url();
    background-size:1%;
    z-index:1;
}



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

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

#box1{
 height:500px;
 width:200px;
 border-radius:150px;
 background-color:#fff;
 position:absolute;
 z-index:99;
 top:50%;
 left:50%;
 margin-top:-290px;
 margin-left:-100px;
 box-shadow:0px 0px 10px 1px #82b7cd;
 opacity:0;
  animation:appear 1s 6s;
      animation-fill-mode:forwards;
}

#thing1{
 height:125px;
 width:200px;
 border-radius:100px 100px 0px 0px;
  background-color:rgba(226, 105, 140, 0.90);
  position:absolute;
  border-bottom:solid 2px #7badc2;
  z-index:99;
  background-image:url(https://www.transparenttextures.com/patterns/arabesque.png);
  background-size:30%;
  filter:saturate(70%);
}

#thing2{
 height:115px;
 width:190px;
 border-radius:0px 0px 100px 100px;
  background-color:rgba(226, 105, 140, 0.90);
  position:absolute;
  border-top:solid 2px #7badc2;
  bottom:0px;
  background-image:url(https://www.transparenttextures.com/patterns/arabesque.png);
  background-size:30%;
  z-index:99;
  filter:saturate(70%);
  color:black;
  padding:5px;
  font-size:9pt;
  font-family: 'Aladin', cursive;
  font-weight:500;
  text-align:center;
}

#thing3{
  height:230px;
 width:180px;
  background-color:rgba(34, 34, 34, 0.86);
  position:absolute;
  top:125px;
   background-image:url(https://www.transparenttextures.com/patterns/always-grey.png);
  background-size:10%;
  filter:saturate(70%);
  overflow:auto;
  font-family:'Quick';
  font-size:10pt;
  color:#7badc2;
  padding:10px;
}

h1{
  font-family:'Brush';
  font-size:15pt;
  text-align:center;
  color:#7badc2;
  margin-top:5px;
}

h2{
  font-family:'Quick';
  font-size:15pt;
  text-align:center;
  color:#7badc2;
  margin-top:5px;
}


#box2{
 height:250px;
 width:300px;

 background-color:#fff;
 position:absolute;
 z-index:99;
 top:50%;
 left:50%;
 margin-top:-165px;
 margin-left:-425px;

  box-shadow:0px 0px 10px 1px #82b7cd;
  opacity:0;
  animation:appear 1s 6s;
      animation-fill-mode:forwards;
}

#thing4{
 width:280px;
 height:140px;
  background-color:rgba(34, 34, 34, 0.86);
 position:absolute;
 filter:saturate(70%);
  background-image:url(https://www.transparenttextures.com/patterns/always-grey.png);
  background-size:5%;
  text-align:justify;
  overflow:auto;
   font-family:'Quick';
  font-size:10pt;
  color:#7badc2;
  padding:10px;
}
#thing5{
 width:280px;
 height:70px;
 position:absolute;
 background-color:rgba(226, 105, 140, 0.90);
 bottom:0px;
 filter:saturate(70%);
  background-image:url(https://www.transparenttextures.com/patterns/arabesque.png);
  background-size:20%;
  border-top:solid 2px #7badc2;
  float:left;
  z-index:99;
  padding:10px;
  overflow:auto;
}



a.tooltip:hover {text-decoration:none;}
a.tooltip span {
display:none;
padding:14px;
margin-left:25px;
margin-top:150px;
width: 120px;
height: 155px;
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(34, 34, 34, 0.90);
box-shadow:0px 0px 10px 2px rgba(226, 105, 140, 0.90);
z-index:99;
font-family:'Quick';
  font-size:8pt;
}

.petal {
  margin: 1px;
  animation:
    fall1 6s linear infinite;
  position: absolute;
  top: 0;
    left: 0;

  background: #FE85C0;
  width: 10px;
  height: 10px;
  border-radius: 15px 5px 15px 0px;
    backface-visibility: hidden;
   transform-style: preserve-3d;
}

.petal::after {
   content: '';
    right: 0px;
    bottom: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    background: #DB0637;
  border-radius: 15px 5px 15px 0px;
    transform: rotateY( 180deg );
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.petal:nth-child(2) {
  animation-name: fall2;
  animation-delay: 1.25s;
  top: 40%;
}
.petal:nth-child(3) {
  animation-name: fall3;
  animation-delay: 4.65s;
  top: 25%;
}
.petal:nth-child(4) {
  animation-name: fall4;
  animation-delay: 1.15s;
  top: 30%;
}
.petal:nth-child(5) {
  animation-name: fall5;
  animation-delay: 1.35s;
  top: 50%;
}
.petal:nth-child(6) {
  animation-name: fall6;
  animation-delay: 3.25s;
  top: 65%;
}

.petal:nth-child(7) {
  animation-name: fall2;
  animation-delay: 2.25s;
  top: 35%;
}
.petal:nth-child(8) {
  animation-name: fall3;
  animation-delay: 3.65s;
  top: 25%;
}
.petal:nth-child(9) {
  animation-name: fall4;
  animation-delay: 0.15s;
  top: 30%;
}
.petal:nth-child(10) {
  animation-name: fall5;
  animation-delay: 1.25s;
  top: 50%;
}
.petal:nth-child(11) {
  animation-name: fall6;
  animation-delay: 0.25s;
  top: 45%;
}

.petal:nth-child(12) {
  animation-name: fall6;
  animation-delay: 1.75s;
  top: 25%;
}

@keyframes fall1{
  to {
    transform:
      translateY(200px)
      translateX(2560px)
      translateZ(200px)
      rotate3d(1, .25, 0, 320deg);
  }
}

@keyframes fall2{
  to {
    transform:
      translateY(150px)
      translateX(2560px)
      translateZ(500px)
      rotate3d(1, .25, .25, 220deg);
  }
}

@keyframes fall3{
  to {
    transform:
      translateY(150px)
      translateX(2560px)
      translateZ(300px)
      rotate3d(.25, 1, 1, 420deg);
  }
}

@keyframes fall4{
  to {
    transform:
      translateY(-160px)
      translateX(2560px)
      translateZ(-500px)
      rotate3d(1, 1, .25, 720deg);
  }
}

@keyframes fall5{
  to {
    transform:
      translateY(-200px)
      translateX(2560px)
      translateZ(400px)
      rotate3d(.25, 1, .25, 820deg);
  }
}

@keyframes fall6{
  to {
    transform:
      translateY(-300px)
      translateX(2560px)
      translateZ(-100px)
      rotate3d(1, 1, 1, 720deg);
  }
}

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

a:hover{
color:gold;
}



</style>
<div id="box1">
  <div id="thing1">
    <a target="_blank" href="" class="tooltip">
<img style="filter:drop-shadow(0px 0px 4px #000); height:40px; position:absolute; left:50px; top:20px;" src="https://ddragon.leagueoflegends.com/cdn/8.7.1/img/passive/Irelia_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:40px; position:absolute; left:110px; top:20px;" src="https://ddragon.leagueoflegends.com/cdn/8.8.1/img/spell/IreliaQ.png">
<div class= "wrapper"><span><div class="arrowup"></div><h2>Bladesurge</h2><br><p style="margin-top: -15px;">
Irelia dashes forward to strike her target, healing herself. If the target is Marked or dies to Bladesurge, its cooldown refreshes.
</p></span></div></a>

<a target="_blank" href="" class="tooltip">
<img style="filter:drop-shadow(0px 0px 4px #000); height:40px; position:absolute; left:20px; top:70px;" src="https://ddragon.leagueoflegends.com/cdn/8.8.1/img/spell/IreliaW.png">
<div class= "wrapper"><span><div class="arrowup"></div><h2>Defying Dance</h2><br><p style="margin-top: -15px;">
Irelia charges a strike that deals more damage as she charges. She takes reduced damage during the charge.
</p></span></div></a>

<a target="_blank" href="" class="tooltip">
<img style="filter:drop-shadow(0px 0px 4px #000); height:40px; position:absolute; left:80px; top:70px;" src="https://ddragon.leagueoflegends.com/cdn/8.8.1/img/spell/IreliaE.png">
<div class= "wrapper"><span><div class="arrowup"></div><h2>Flawless Dust</h2><br><p style="margin-top: -15px;">
Irelia sends out two blades which converge on each other. Enemies caught in between are damaged, stunned and Marked.
</p></span></div></a>

<a target="_blank" href="" class="tooltip">
<img style="filter:drop-shadow(0px 0px 4px #000); height:40px; position:absolute; left:140px; top:70px;" src="https://ddragon.leagueoflegends.com/cdn/8.8.1/img/spell/IreliaR.png">
<div class= "wrapper"><span><div class="arrowup"></div><h2>Vanguard's edge'</h2><br><p style="margin-top: -15px;">
Irelia fires a massive number of blades that explode outward upon hitting an enemy champion. Enemies hit by the blades are damaged and Marked. Afterwards the blades form a wall that will damage, slow and disarm enemies that walk through it.
</p></span></div></a>

  </div>
  <div id="thing2">Code © <a href="https://roleplay.chat/profile.php?user=Hound%20of%20Tindalos" title="Favorite Latino Lover">Hound of Tindalos</a> © <a href="https://codepen.io/mmolad/pen/eJWmQe?limit=all&page=1&q=cherry+blossoms">Codepen</a> © <a href="https://senfolina.deviantart.com">BG</a><br>Lol Universe Pref - Crossovers Possible  <br>
  Semi to Multi capabilities, Quality > Quantity <br>
   Potential for Pairing - pm friendly <br>
   Smut (Preferably with Story)<br>
    Long term / Short term doable<br>
    No drama - Discord available
  </div>

  <div id="thing3">
    <h1>IRELIA</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>
<div id="box2">
  <div id="thing4"><h1>HEADCANON</h1>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec finibus et mauris id fermentum. Ut accumsan pellentesque gravida. Duis sagittis est ac justo aliquet, ut tristique eros ornare. In scelerisque laoreet leo, eu fermentum purus consectetur ut. Integer eu ante fringilla, convallis mi a, rhoncus purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu ipsum vestibulum, tempor nibh in, imperdiet velit. Etiam tristique, ex eget congue auctor, lectus lacus ultricies urna, non imperdiet justo ante sed mauris. Phasellus porttitor magna ac sodales vulputate. Suspendisse volutpat varius laoreet. Quisque sagittis, lorem id sollicitudin interdum, orci odio placerat turpis, a porta urna turpis ullamcorper leo.<br>

Donec at lacinia leo, semper pulvinar arcu. Suspendisse eleifend, augue pellentesque finibus efficitur, urna lectus fringilla ante, non placerat ex urna vel est. Nunc vel vehicula purus. Sed vel volutpat elit. In egestas diam pharetra orci dapibus tincidunt. Fusce dolor leo, efficitur id tortor a, laoreet posuere neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas venenatis tortor, mattis imperdiet libero ullamcorper ut.<br>

Praesent viverra varius vehicula. Vestibulum sit amet erat eu velit bibendum rhoncus ac vel odio. Integer malesuada commodo enim at varius. Integer hendrerit, ligula eget ullamcorper condimentum, ex metus molestie neque, et consequat sapien metus sed quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec fringilla iaculis bibendum. Maecenas elementum et massa vel porta. Etiam volutpat, nisi sit amet interdum gravida, purus elit facilisis ante, sed iaculis mauris lacus non erat. <br>



  </div>
   <div id="thing5">
    <a href="https://roleplay.chat//profile.php?user=" title="Write thing about fren here"><img style="filter:drop-shadow(0px 0px 4px #000); height:40px; margin-left:10px; " 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:40px; margin-left:10px; " 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:40px; margin-left:10px; " 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:40px; margin-left:10px; " 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:40px; margin-left:10px; " 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:40px; margin-left:10px; " 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:40px; margin-left:10px; " 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:40px; margin-left:10px; " 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:40px; margin-left:10px; " 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:40px; margin-left:10px; " src="https://i2.wp.com/czechpoints.com/wp-content/uploads/2017/10/facebook-anonymous-app.jpg"></a>
   </div>
</div>
<div id="image"></div>
<div id="sygil"></div>
<div id="bottom"></div>
<div id="top"></div>
<div id="container">
  <div class="petal"></div>
  <div class="petal"></div>
  <div class="petal"></div>
  <div class="petal"></div>
  <div class="petal"></div>
  <div class="petal"></div>
  <div class="petal"></div>
  <div class="petal"></div>
  <div class="petal"></div>
  <div class="petal"></div>
  <div class="petal"></div>
  <div class="petal"></div>
</div>