Advertisement
Rahzgul

Sion

Apr 22nd, 2019
199
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.71 KB | None | 0 0
  1. <html>
  2. <head>
  3. <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
  4. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  5. <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  6. <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js"></script>
  7. <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
  8. <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>
  9. <script src="https://roleplay.chat/jquery.tooltipster.js?v=8"></script>
  10. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
  11. <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js"></script>
  12. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
  13. <link href="https://roleplay.chat/tooltipster.css" rel="stylesheet" type="text/css">
  14. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  15. <script defer>
  16. window.onload = function() {
  17. function tooltip() {
  18. var title = $(this).attr("title");
  19. $(this).removeAttr("title");
  20.  
  21. this.TooltipMessage = $("<div/>", {class: "tooltipMessage", style: "display: none;"});
  22. this.TooltipMessage.html("<span>" + title + "</span>");
  23. $("body").append(this.TooltipMessage);
  24.  
  25.  
  26. if ($(this).hasClass("tooltipLeft")) {
  27. this.TooltipMessage.addClass("left");
  28. }
  29.  
  30. $(this).hover(tooltipFadeIn, tooltipFadeOut);
  31. $(this).mousemove(tooltipMousemove);
  32. }
  33.  
  34. function tooltipFadeIn() {
  35. this.TooltipMessage.stop(true, false).fadeIn();
  36. }
  37.  
  38. function tooltipFadeOut() {
  39. this.TooltipMessage.stop(true, false).fadeOut();
  40. }
  41.  
  42. function tooltipMousemove(e) {
  43. var offset = {
  44. left: e.pageX,
  45. top: e.pageY + 31
  46. };
  47.  
  48. if (this.TooltipMessage.hasClass("left")) {
  49. offset.left -= this.TooltipMessage.width() + 5;
  50. } else {
  51. offset.left -= 100;
  52.  
  53. }
  54. this.TooltipMessage.offset(offset);
  55. }
  56.  
  57. $(function (e) {
  58. $(".tooltip").each(tooltip);
  59. });
  60. };
  61. </script>
  62. <style type="text/css">
  63. @import url(//fonts.googleapis.com/css?family=Black+Ops+One);
  64. @import url(//fonts.googleapis.com/css?family=Ultra);
  65. @import url(//fonts.googleapis.com/css?family=Mina);
  66. @import url(//fonts.googleapis.com/css?family=Poiret+One);
  67. @import url(//fonts.googleapis.com/css?family=Rajdhani);
  68. @import url(//fonts.googleapis.com/css?family=Handlee);
  69.  
  70. .pfor { display: none; }
  71. #profile { background-color: transparent; border: none; overflow: auto;}
  72. /*body*/
  73.  
  74. body {
  75. background-color: #000000;
  76. background-image: url("https://cdn.discordapp.com/attachments/431993878581608448/432645781288386570/Sion10.jpg");
  77. background-size: 100%;
  78. repeat: no-repeat;}
  79.  
  80. b, strong { font-family: Poiret One; font-size: 12px;line-height: 15px; font-weight: bold;
  81. color: #666666;
  82.  
  83. }
  84.  
  85. i, em {color:#ab9893; font-family: Rajdhani; font-size:12px;}
  86.  
  87.  
  88.  
  89. body, a {cursor: url(http://cur.cursors-4u.net/cursors/cur-9/cur823.cur), auto;}
  90.  
  91. /*beginning*/
  92. #noxus {
  93. position: fixed;
  94. height:100%;
  95. width:100%;
  96. top:0%;
  97. left:0%;
  98. background-color:#000000;
  99. background-image: url("http://i.picpar.com/kYzc.png");
  100. opacity:1;
  101. z-index:25;
  102. -webkit-animation:picturein 2s 1;
  103. animation:picturein 1s 1;
  104. animation-delay:1s;
  105. animation-fill-mode:forwards;
  106. -webkit-animation-delay:3s;
  107. -webkit-animation-fill-mode:forwards;
  108. }
  109.  
  110.  
  111. #noxus-2 {
  112. position: fixed;
  113. height:100%;
  114. width:100%;
  115. top:0;
  116. left:0;
  117. text-align: center;
  118. background-image: url("https://cdn.discordapp.com/attachments/431993878581608448/432641726277222430/Sion1.png");
  119. background-attachment:absolute;
  120. background-repeat:no-repeat;
  121. background-position: 50% 50%;
  122. background-size: 20%;
  123. opacity:1;
  124. z-index:26;
  125. -webkit-animation:pictureint 2s 1;
  126. animation:picturein 1s 1;
  127. animation-delay:1s;
  128. animation-fill-mode:forwards;
  129. -webkit-animation-delay:3s;
  130. -webkit-animation-fill-mode:forwards;
  131. }
  132.  
  133. /*keyframes2*/
  134. @keyframes pictureint{
  135. from{opacity:1;}
  136. to{opacity:0; right: 100vw; z-index:0;}
  137. }
  138. @-webkit-keyframes pictureint{
  139. from{opacity:1;}
  140. to{opacity:0; left: 100vw; z-index:0;}
  141. }
  142.  
  143. /*keyframes*/
  144. @keyframes picturein{
  145. from{opacity:1;}
  146. to{opacity:0; right: 100vw; z-index:0;}
  147. }
  148. @-webkit-keyframes picturein{
  149. from{opacity:1;}
  150. to{opacity:0; left: 100vw; z-index:0;}
  151. }
  152.  
  153. /*aesthetics*/
  154. #tag {
  155. position: fixed;
  156. left: 81%;
  157. top: 25%;
  158. margin: auto;
  159. width: 390px;
  160. height: 400px;
  161. font-family: Black Ops One;
  162. font-size: 100px;
  163. color: #3b0d09;
  164. opacity: 1;
  165. z-index: 6;
  166. text-shadow: 1px 0px 0px #000000,
  167. 0px 1px 0px #000000,
  168. -1px 0px 0px #000000,
  169. 0px -1px 0px #000000,
  170. 0px 0px 20px #000000;
  171.  
  172. }
  173.  
  174.  
  175.  
  176.  
  177. #axe img{
  178. position: fixed;
  179. max-width: 20vw;
  180. max-height: auto;
  181. top: -10%;
  182. left: 70%;
  183. opacity: 0.5;
  184. -ms-transform: rotate(-90deg); /* IE 9 */
  185. -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
  186. transform: rotate(-90deg);
  187. z-index: 5;
  188. }
  189.  
  190. #bil img{
  191. position: fixed;
  192. max-width: 600px;
  193. max-height: auto;
  194. top: 30%;
  195. left: 60%;
  196. opacity: 1;
  197. z-index: 24;
  198. }
  199.  
  200.  
  201. #bill img{
  202. position: fixed;
  203. max-width: 600px;
  204. max-height: auto;
  205. top: 42%;
  206. left: 60%;
  207. opacity: 1;
  208. z-index: 24;
  209. }
  210.  
  211.  
  212. #billl img{
  213. position: fixed;
  214. max-width: 600px;
  215. max-height: auto;
  216. top: 54%;
  217. left: 60%;
  218. opacity: 1;
  219. z-index: 24;
  220. }
  221.  
  222.  
  223. #billll img{
  224. position: fixed;
  225. max-width: 600px;
  226. max-height: auto;
  227. top: 66%;
  228. left:60%;
  229. opacity: 1;
  230. z-index: 24;
  231. }
  232.  
  233. #billlll img{
  234. position: fixed;
  235. max-width: 600px;
  236. max-height: auto;
  237. top: 79.3%;
  238. left: 60%;
  239. opacity: 1;
  240. z-index: 24;
  241. }
  242.  
  243.  
  244. /*navigation*/
  245. #navi {
  246. position: fixed;
  247. left:64%;
  248. top:85%;
  249. text-align:center;
  250. color: white;
  251. width: 100vw;
  252. height: 20px;
  253. padding:5px;
  254. line-height:7px;
  255. z-index: 24;
  256. display: inline-block;
  257. float: left;
  258.  
  259. }
  260.  
  261. #navi a:link, #navi a:visited {
  262. text-decoration:none;
  263. font-weight:normal !important;
  264. padding:5px;
  265. top: 10px;
  266. margin-left: 29.5px;
  267. width: 4vw;
  268. height: 2vh;
  269. font-family: Ultra;
  270. font-size: 11px;
  271. -webkit-transition: all 0.5s ease;
  272. -moz-transition: all 0.5s ease;
  273. -o-transition: all 0.5s ease;
  274. background-color: #5a1818;
  275. float: left;
  276. z-index: 24;
  277. }
  278.  
  279. #navi a:hover {
  280. background-color:#291010;
  281. text-decoration:none;
  282. float: left;
  283. z-index: 24;
  284. }
  285.  
  286. /*content*/
  287. .box {
  288. position: fixed;
  289. width: 32vw;
  290. height:41vh;
  291. top: 42%;
  292. left: 66%;
  293. padding: 5px;
  294. font-size: 12px;
  295. line-height: 13px;
  296. text-align: center;
  297. font-family: 'Mina';
  298. color: #942117;
  299. overflow: auto;
  300. opacity: 0;
  301. background-color: #transparent;
  302. transition: all 0.7s ease-in-out;
  303. -webkit-transition: all 0.7s ease-in-out;
  304. -moz-transition: all 0.7s ease-in-out;
  305. -o-transition: all 0.7s ease-in-out;
  306. -ms-transition: all 0.7s ease-in-out;
  307. z-index:2;
  308. }
  309.  
  310. .box:target {
  311. top: 42%;
  312. left: 66%;
  313. overflow: auto;
  314. background-color: #transparent;
  315. opacity: 1;
  316. transition: all 0.7s ease-in-out;
  317. -webkit-transition: all 0.7s ease-in-out;
  318. -moz-transition: all 0.7s ease-in-out;
  319. -o-transition: all 0.7s ease-in-out;
  320. -ms-transition: all 0.7s ease-in-out;
  321. z-index:4;
  322. }
  323.  
  324. /*tables*/
  325. td.one{
  326. width: 350px;
  327. font-family: Poiret One;
  328. font-size: 12px;
  329. text-align: left;
  330. word-spacing: 1px;
  331. letter-spacing: 0px;
  332. line-height: 9px;
  333. font-weight: bold;
  334. color: #666666;
  335.  
  336. }
  337.  
  338. td.two{
  339. width: 350px;
  340. font-family: Mina;
  341. font-size: 12px;
  342. text-align: right;
  343. word-spacing: 1px;
  344. letter-spacing: 0px;
  345. line-height: 9px;
  346. color: #942117;
  347. }
  348.  
  349.  
  350. /*link*/
  351. a:link,a:active,a:visited {
  352. color: #666666;
  353. font-family: Handlee;
  354. font-size: 12px;
  355. line-height: 10px;
  356. letter-spacing: 0px;
  357. display: ;
  358. font-weight: bold;
  359. margin-bottom: px;
  360. word-spacing: 0px;
  361. text-transform: none;
  362. text-align: center;
  363. text-decoration: none;
  364. transition: all .3s ease-in-out;
  365. -webkit-transition: all .3s ease-in-out;
  366. -moz-transition: all .3s ease-in-out;
  367. -o-transition: all .3s ease-in-out;
  368. -ms-transition: all .3s ease-in-out;
  369. z-index: 7;
  370. }
  371.  
  372. a:hover {
  373. color: #ca908b;
  374. font-family: Handlee;
  375. font-size: 12px;
  376. line-height: 10px;
  377. letter-spacing: 0px;
  378. display: ;
  379. font-weight: bold;
  380. margin-bottom: px;
  381. word-spacing: 0px;
  382. text-align: center;
  383. text-decoration: none;
  384. transition: all .3s ease-in-out;
  385. -webkit-transition: all .3s ease-in-out;
  386. -moz-transition: all .3s ease-in-out;
  387. -o-transition: all .3s ease-in-out;
  388. -ms-transition: all .3s ease-in-out;
  389. }
  390.  
  391. h1 {
  392. font-family: Poiret One;
  393. color: #666666;
  394. text-shadow: 1px 0px 0px #942117,
  395. 0px 1px 0px #942117,
  396. -1px 0px 0px #942117,
  397. 0px -1px 0px #942117,
  398. 0px 0px 20px #942117;
  399. font-size: 15px;
  400. line-height: 12px;
  401. text-align: center;
  402. letter-spacing: 1px;
  403. border-bottom: 1px solid #942117;
  404. }
  405.  
  406. ::-webkit-scrollbar {
  407. width: 5px;
  408. height: 0px;
  409. background:;
  410. }
  411.  
  412. ::-webkit-scrollbar-thumb {
  413. background-color: #5a1818;
  414. -webkit-border-radius: 10px;
  415. border-radius: 10px;
  416. }
  417.  
  418.  
  419. div.tooltipMessage {
  420. z-index: 600;
  421. position: absolute;
  422. width: 220px;
  423. font-family: verdana;
  424. font-size: x-small;
  425. text-align: justify;
  426. }
  427. div.tooltipMessage > span {width: 300px;
  428. display: inline-block;
  429. background: #000000;
  430. padding: 8px 8px;
  431. color: #942117;
  432. div.tooltipMessage.left > span {
  433. float: right;
  434. }
  435.  
  436. </style>
  437.  
  438. <div id="navi">
  439. <a href="#nung">These</a>
  440. <a href="#song">Wounds</a>
  441. <a href="#sam">Bring</a>
  442. <a href="#si">No</a>
  443. <a href="#ha">Pain</a>
  444. </div>
  445. <div id="tag"> SION</div>
  446. <div class="fire"></div>
  447. <div id="axe"><img src="http://i.picpar.com/VWJc.png"></div>
  448.  
  449.  
  450. <div id="nung" class="box">
  451. <h1>Losing... myself...</h1>
  452. <table>
  453. <tr><td class="one">
  454. Name
  455. </td><td class="two">
  456. Sion
  457. </td></tr><tr>
  458.  
  459. <tr><td class="one">
  460. Title
  461. </td><td class="two">
  462. The Undead Juggernaut
  463. </td></tr><tr>
  464.  
  465. <tr><td class="one">
  466. Allegiance
  467. </td><td class="two">
  468. Noxus
  469. </td></tr><tr>
  470.  
  471. <tr><td class="one">
  472. Former Rank
  473. </td><td class="two">
  474. General
  475. </td></tr><tr>
  476.  
  477. <tr><td class="one">
  478. Age
  479. </td><td class="two">
  480. Unknown
  481. </td></tr><tr>
  482.  
  483. <tr><td class="one">
  484. Gender
  485. </td><td class="two">
  486. Male
  487. </td></tr><tr>
  488.  
  489. <tr><td class="one">
  490. Height
  491. </td><td class="two">
  492. 11'4
  493. </td></tr><tr>
  494.  
  495.  
  496. <tr><td class="one">
  497. Weight
  498. </td><td class="two">
  499. 1500
  500. </td></tr><tr>
  501.  
  502.  
  503. <tr><td class="one">
  504. Orientation
  505. </td><td class="two">
  506. <b>Why do I feel... nothing?</b>
  507. </td></tr><tr>
  508.  
  509. </table>
  510. </div>
  511.  
  512. <div id="song" class="box">
  513. <h1>Your bones will pave my road to glory!</h1>
  514. To take a life is a simple enough thing, yet no-one perfected it quite like Sion. He led army after army through the jaws of death, charging through the massed ranks of Noxus' enemies time and time again until his burgeoning city-state stood above all nations. But even the mighty fall, and though Sion's death shocked the people of Noxus, it ultimately also brought them safety from Demacia's now leaderless forces.<br><br>
  515.  
  516. But Sion's story did not end with his death. Seeking to exploit the Noxians' hero worship, Noxus' Grand General took the drastic step of attempting to return their greatest champion from death. But if taking a life is a simple enough thing, restoring life is anything but. Sion rose again, but as something different. Without his intelligence and martial prowess, he was reduced to a simple killing machine, destroying anything - friend or foe - that stood in his way. Unable to control their weapon, the Noxians locked their former champion away. Centuries passed before another SwainSquare Grand General returned to Sion's tomb determined to fully resurrect the great champion once again.<br><br>
  517.  
  518. Death is no longer an obstacle for Sion - every time he falls, his commanders simply piece him back together and revive the once great man. But within his sundered body lies a soul desperately searching for the sense of self he once had, and when that sense is most awakened in times of war, then war shall be had.
  519. </div>
  520.  
  521. <div id="sam" class="box">
  522. <h1>Our drums will drown out their screams.</h1>
  523. <a href="link"><img src="https://i.imgur.com/fVPKLHz.png" width=50px></a>
  524. <a href="link"><img src="https://i.imgur.com/DypSGP4.png" width=50px></a>
  525. <a href="link"><img src="https://i.imgur.com/40fPT0n.png" width=50px></a>
  526. <a href="link"><img src="https://i.imgur.com/Y8eOItN.png" width=50px></a>
  527. <br><br>
  528. <h1>Give me an enemy</h1>
  529.  
  530. <a href="link"><img src="https://i.imgur.com/ydsYilv.png" width=50px></a>
  531. <a href="link"><img src="https://i.imgur.com/G1Jvjn5.png" width=50px></a>
  532. <a href="link"><img src="https://i.imgur.com/ZuW0YVH.png" width=50px></a>
  533. <a href="link"><img src="https://i.imgur.com/mgeTGZc.png" width=50px></a>
  534. </div>
  535.  
  536. <div id="si" class="box">
  537. <h1>So, uh, Urgot. We can't hang out any more. I'm cool now.</h1>
  538. regular<b>bold</b><i>italics</i><br><br>
  539.  
  540. First and foremost, I play Sion how <b>I</b> want to play him.<br>
  541. IC ≠ OOC, so don't get it twisted.<br>
  542. PM Friendly<br>
  543. You want smut with <b>this</b> guy? Negotiable.<br>
  544. Crossovers are fine<br>
  545. Lastly, obviously not my character or design. Belongs to League of Legends and Riot Games.<br><br>
  546.  
  547. <b>[</b>Coded by <a target="_blank" href="https://roleplay.chat/profile.php?user=Vaeldra">Vaeldra</a> for <b>Sion</b>, do not steal, or redistribute. <b>]</b>
  548. </div>
  549.  
  550.  
  551.  
  552. <div id="bil">
  553. <img src="https://i.imgur.com/Q4A3okg.png" class="tooltip" title="<b>INNATE:</b> Upon taking fatal damage, Sion briefly becomes untargetable and enters a frenzy, restoring himself to 100% maximum health but losing 2 - 19 (based on level) every 0.25 seconds, increasing by 70% per subsequent tick.
  554.  
  555. Sion can freely move and use basic attacks during this time, gaining 100% Life steal icon life steal, attacking at 1.75 attack speed, and dealing 10% of target's maximum health as bonus Attack damage physical damage, capped at 75 against minions and monsters.">
  556. </div>
  557.  
  558. <div id="bill"><img src="https://i.imgur.com/LkVUeUe.png" class="tooltip" title="<b>FIRST CAST:</b> Sion channels for up to 2 seconds in the direction of the mouse cursor, increasing Decimating Smash's damage by 0% - 200% (based on channel time).
  559.  
  560. <b>SECOND CAST:</b> Sion flails his axe, dealing physical damage to all enemies in the target area, and Slow icon slowing them by 50% for 0.25 seconds. Decimating Smash deals 80% damage against monsters, and 60% against minions.">/div>
  561.  
  562. <div id="billl"><img src="https://i.imgur.com/44IRIPe.png" class="tooltip" title="
  563. <b>PASSIVE:</b> Sion permanently gains 3 bonus health whenever he kills an enemy, increased to 10 bonus health against large enemies and enemy champion Damage rating takedowns.<br><br>
  564.  
  565. <i>Soul Furnace</i><br>
  566. <b>FIRST CAST:</b> Sion Locket of the Iron Solari item shields himself for up to 6 seconds. After 3 seconds, Soul Furnace can be reactivated to detonate the shield, detonating automatically if it persists for the full duration.<br><br>
  567.  
  568.  
  569. <b>SECOND CAST:</b> Soul Furnace's shield detonates to deal Ability power magic damage to enemies around Sion, capped at 400 against minions and monsters."></div>
  570.  
  571. <div id="billll"><img src="https://i.imgur.com/lBYZx81.png" class="tooltip" title="<b>ACTIVE:</b> Sion bellows in the target direction, dealing magic damage to the first enemy hit, Slow icon slowing them as well as having their armor reduced by 20% for 2.5 seconds.
  572.  
  573. If the target is a minion or non-epic monster, they are Airborne icon knocked back 775 units, dealing 30% increased damage to all enemies they pass through and Slow icon slowing them by the same amount for 2.5 seconds. Projectile enemies stop upon colliding with terrain or reaching the end of their trajectory."></div>
  574.  
  575. <div id="billlll"><img src="https://i.imgur.com/ngNdblH.png" class="tooltip" title="<b>ACTIVE:</b> Sion charges in the target direction for up to 8 seconds, during which he is immune to crowd controls and Silence iconDisarm icon pacified. Sion's trajectory updates itself toward the cursor over the duration, but his capacity to change directions is highly reduced.<br><br>
  576.  
  577. <i>Unstoppable Onslaught 2</i><br>
  578. Sion slams the ground around him upon colliding with an enemy champion, structure, terrain, charges for the full duration or re-activates Unstoppable Onslaught. Colliding with structures or terrain briefly Stun icon stuns Sion. If Sion stops directly in front of narrow terrain, he dashes over it.
  579.  
  580. The slam deals physical damage to nearby enemies and turrets, with the base damage increasing by 0% - 266.67% (based on charge time), the bonus AD ratio increasing by 0% - 100% (based on charge time), while also Slow icon slowing enemies for 3 seconds. Enemies directly hit by Sion are also Airborne icon pulled into him and Stun icon stunned for 0.75 - 1.75 (based on charge time) seconds."></div>
  581.  
  582. <div id="noxus"></div><div id="noxus-2"></div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement