SHARE
TWEET

Rogue Admiral Garen

bythestars Mar 28th, 2019 79 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2. <head>
  3. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  4. <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  5. <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js"></script>
  6. <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
  7. <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>
  8. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.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.  
  18. };
  19. </script>
  20.  
  21. <script type="text/javascript">
  22. $(document).ready(function() {
  23. // Tooltip only Text
  24. $('.masterTooltip').hover(function(){
  25.  // Hover over code
  26.  var title = $(this).attr('title');
  27.  $(this).data('tipText', title).removeAttr('title');
  28.  $('<p class="tooltip"></p>')
  29.  .text(title)
  30.  .appendTo('body')
  31.  .fadeIn('slow');
  32. }, function() {
  33.  // Hover out code
  34.  $(this).attr('title', $(this).data('tipText'));
  35.  $('.tooltip').remove();
  36. }).mousemove(function(e) {
  37.  var mousex = e.pageX + 20; //Get X coordinates
  38.  var mousey = e.pageY + 10; //Get Y coordinates
  39.  $('.tooltip')
  40.  .css({ top: mousey, left: mousex })
  41. });
  42. });
  43. </script>
  44.  
  45. <style>
  46. @import url('https://fonts.googleapis.com/css?family=Charmonman|Fredoka One|Kumar One Outline');
  47. @import url('https://fonts.googleapis.com/css?family=Niconne|Reenie+Beanie|Rock+Salt|Ranga|Mirza');
  48.  
  49. body {background-color: #234b5a;}
  50.  
  51. .mainbox {position: fixed; background-color: #eaf6fb; width: 800px; height: 400px; border: 0px solid; border-color: #47432f; margin: auto; left: -550px; right: 0px; top: 60px; bottom: 0px; background-size: 100%; box-shadow: 5px 5px 5px #000; z-index:; border-radius:15px }
  52.  
  53. .invisibox{position: fixed; background-color: #; width: 800px; height: 400px; border:0px solid; border-color: #47432f; margin: auto; left: -550px; right: 0px; top: 60px; bottom: 0px; background-size: 100%; }
  54.  
  55.  
  56. .bigpic{position: absolute; width: 1000px; height: 545px; top:-100px; left: 170; background: url(https://i.imgur.com/zlfzmfM.jpg); background-size: 100%; z-index:0; border: 0px solid; border-color: #fff;
  57.  
  58. box-shadow: 5px 15px 85px #eaf6fb; }
  59.  
  60.  
  61. .otherbox {position: fixed; background-color: #eaf6fb; width: 250px; height: 400px; border: 0px solid; border-color: #47432f; margin: auto; left: 550px; right: 0px; top: 60px; bottom: 0px; background-size: 100%; box-shadow: 5px 5px 5px #000; border-radius:15px }
  62.  
  63.  
  64.  
  65. .otherbox2 {position: fixed; background-color: #eaf6fb; width: 250px; height: 400px; border: 0px solid; border-color: #47432f; margin: auto; left: 1090px; right: 0px; top: 60px; bottom: 0px; background-size: 100%; box-shadow: 5px 5px 5px #000; border-radius:15px }
  66.  
  67. .mainimg {position: absolute; width: 500px; height: 500px; border: 0px solid black; top:-55px; left: 508; background: url(https://i.imgur.com/aiUOSg4.png); background-size: 100%; z-index:900; }
  68.  
  69. .mainimg2 {position: absolute; width: 500px; height: 500px; border: 0px solid black; top:-55px; left: 508; background: url(https://i.imgur.com/aiUOSg4.png); background-size: 100%; z-index:900; }
  70.  
  71. .titler { letter-spacing: 0; z-index: 10000; position: fixed; left: 15px; bottom: 390px; font-family: 'Charmonman', cursive; font-size: 70px; color: #000; -webkit-text-fill-color: transparent; background: -webkit-linear-gradient(transparent, transparent), url('https://thumbs.gfycat.com/AngelicAbsoluteEstuarinecrocodile-size_restricted.gif') repeat; background: -o-linear-gradient(transparent, transparent); -webkit-background-clip: text; background-position: center left; background-size: cover; position: absolute; width: 800px; }
  72.  
  73. .title { letter-spacing: 0; z-index: 10; position: fixed; left: 15px; bottom: 390px; font-family: 'Charmonman', cursive; font-size: 70px; color: #000; text-shadow: 1px 2px 5px #eaf6fb; position: absolute; width: 800px; }
  74.  
  75. .headcan { letter-spacing: 0; z-index: 10; position: fixed; left: 40px; bottom: 330px; font-family: 'Ranga', cursive; font-size: 40px; color: #000; text-shadow: 0px 0px 0px #2fc6ff; position: absolute; width: 800px; }
  76.  
  77. .ooc { letter-spacing: 0; z-index: 10; position: fixed; left: 100px; bottom: 330px; font-family: 'Ranga', cursive; font-size: 40px; color: #000; text-shadow: 0px 0px 0px #2fc6ff; position: absolute; width: 800px; }
  78.  
  79. .t1 {position: absolute;
  80.  
  81. background-color: #234b5a;
  82.  
  83. top: 345px;
  84. left: 90px;
  85. height: 10px;
  86. width: 10px;
  87. border: 10px solid; border-color: #234b5a;
  88. text-align: center;
  89.  
  90. z-index:100; border-radius:50%;}
  91.  
  92. .t2 {position: absolute;
  93.  
  94. background-color: #234b5a;
  95.  
  96. top: 345px;
  97. left: 140px;
  98. height: 10px;
  99. width: 10px;
  100. border: 10px solid; border-color: #234b5a;
  101. text-align: center;
  102.  
  103. z-index:100; border-radius:50%;}
  104.  
  105. .t3 {position: absolute;
  106.  
  107. background-color: #234b5a;
  108.  
  109. top: 345px;
  110. left: 190px;
  111. height: 10px;
  112. width: 10px;
  113. border: 10px solid; border-color: #234b5a;
  114. text-align: center;
  115.  
  116. z-index:100; border-radius:50%;}
  117.  
  118. .t4 {position: absolute;
  119.  
  120. background-color: #234b5a;
  121.  
  122. top: 345px;
  123. left: 240px;
  124. height: 10px;
  125. width: 10px;
  126. border: 10px solid; border-color: #234b5a;
  127. text-align: center;
  128.  
  129. z-index:100; border-radius:50%;}
  130.  
  131.  
  132.  
  133. .t1:hover, .t2:hover, .t3:hover, .t4:hover { box-shadow: 2px 2px 5px #000; transition: .5s;
  134. }
  135.  
  136. ::-webkit-scrollbar {
  137.  width: 4px;
  138. }
  139.  
  140. /* Track */
  141. ::-webkit-scrollbar-track {
  142.  background: #;
  143. }
  144.  
  145. /* Handle */
  146. ::-webkit-scrollbar-thumb {
  147.  background: #;
  148. }
  149.  
  150. /* Handle on hover */
  151. ::-webkit-scrollbar-thumb:hover {
  152.  background: #;
  153. }
  154.  
  155. .words {position: absolute; top: 90px; left: 50px; margin: auto;
  156. height: 260px;
  157. width: 160px;
  158. padding: 2px;
  159. text-align: center;
  160. font-size: 14px;
  161. overflow: auto;
  162. text-ident: 10px;
  163. color: #234b5a;
  164. font-family: Ranga;
  165.  
  166. z-index:0;overflow:auto transition: all 0.9s ease-in-out;
  167. -webkit-transition: all 0.2s ease-in-out;
  168. -moz-transition: all 0.2s ease-in-out;
  169. -o-transition: all 0.2s ease-in-out;
  170. -ms-transition: all 0.2s ease-in-out;}
  171.  
  172.  
  173.  
  174.  
  175.  
  176. .text {position: absolute; bottom: 50px; left: 120px; margin: auto;
  177. opacity:0;
  178. height: 250px;
  179. width: 370px;
  180. padding: 0px;
  181. text-align: left;
  182. font-size: 13px;
  183. overflow: auto;
  184. text-ident: 10px;
  185. color: #000;
  186. font-family: Ranga;
  187.  
  188. z-index:0;overflow:auto transition: all 0.9s ease-in-out;
  189. -webkit-transition: all 0.2s ease-in-out;
  190. -moz-transition: all 0.2s ease-in-out;
  191. -o-transition: all 0.2s ease-in-out;
  192. -ms-transition: all 0.2s ease-in-out;}
  193.  
  194.  
  195.  
  196.  
  197. .text:target{top: -1px; opacity:1;
  198. z-index:11;transition: all 0.2s ease-in-out;
  199. -webkit-transition: all 0.2s ease-in-out;
  200. -moz-transition: all 0.2s ease-in-out;
  201. -o-transition: all 0.2s ease-in-out;
  202. -ms-transition: all 0.2s ease-in-out;overflow:auto;}
  203.  
  204.  
  205. p{
  206.  font-family: 'Charmonman';
  207.  font-size: 16px;
  208.  letter-spacing: 0px;
  209.  word-spacing: 0px;
  210.  color: #000;
  211.  text-align: justify;
  212.  
  213.  line-height: 20px;
  214.  margin: 0px 0px 0px 1px;}
  215.  
  216. p.td {
  217. text-align: right;
  218. font-family: Charmonman;
  219. margin-left: 55px;
  220. font-size: 15px;
  221. line-height: 30px;
  222. color: #000; }
  223.  
  224. td {
  225. text-align: left;
  226. line-height: 30px; }
  227.  
  228. strong {
  229. font-family: Ranga;
  230. color: #000;
  231. font-size: 40px;
  232. text-transform: uppercase;
  233. font-weight: 100; }
  234.  
  235.  
  236. b {
  237. font-family: Ranga;
  238. color: #000;
  239. font-weight: bold;
  240. font-size: 18px;
  241. text-transform: uppercase;
  242. font-weight: 100;
  243. text-shadow: 0px 0px 0px #2fc6ff;}
  244.  
  245.  
  246. .fr1{ width: 60px; height: 60px; margin-bottom: 10px; margin-top: 10px; margin-right: 3px; margin-left: 2px; border: 1px solid #234b5a; border-radius: 10px }
  247.  
  248.  
  249.  
  250. #rev{
  251. position: absolute;
  252.  
  253. filter: brightness(10%);
  254.  
  255.  
  256.  -webkit-animation:reveal 1s 1;
  257.  animation:reveal 2s 1;
  258.  animation-delay:1s;
  259.  animation-fill-mode:forwards;
  260.  -webkit-animation-delay: 1s;
  261.  -webkit-animation-fill-mode:forwards;
  262.  
  263. }
  264.  
  265. #rem{
  266. position: absolute;
  267.  
  268.  
  269.  
  270.  
  271.  -webkit-animation:poof 3s 1;
  272.  animation:poof 3s 1;
  273.  animation-delay:3s;
  274.  animation-fill-mode:forwards;
  275.  -webkit-animation-delay: 3s;
  276.  -webkit-animation-fill-mode:forwards;
  277.  
  278. }
  279.  
  280.  
  281. #shoo{
  282. position: absolute;
  283.  
  284. opacity: 1;
  285.  
  286.  
  287.  -webkit-animation:poof 1.8s 1;
  288.  animation:poof 1.8s 1;
  289.  animation-delay:1.8s;
  290.  animation-fill-mode:forwards;
  291.  -webkit-animation-delay: 1.8s;
  292.  -webkit-animation-fill-mode:forwards;
  293.  
  294. }
  295.  
  296. #res{
  297. position: absolute;
  298.  
  299. opacity:0;
  300.  
  301.  -webkit-animation:pictureout 3s 1;
  302.  animation:pictureout 3s 1;
  303.  animation-delay:3s;
  304.  animation-fill-mode:forwards;
  305.  -webkit-animation-delay: 3s;
  306.  -webkit-animation-fill-mode:forwards;
  307.  
  308. }
  309.  
  310. #mov{
  311. position: absolute;
  312.  
  313.  filter: brightness(100%);
  314.  -webkit-animation:move 3s 1;
  315.  animation:move 3s 1;
  316.  animation-delay:3s;
  317.  animation-fill-mode:forwards;
  318.  -webkit-animation-delay: 3s;
  319.  -webkit-animation-fill-mode:forwards;
  320.  
  321. }
  322.  
  323. @keyframes reveal{
  324. from{filter: brightness(10%);
  325. }
  326. to{filter: brightness(100%);
  327. }
  328. }
  329. @-webkit-keyframes reveal{
  330. from{filter: brightness(10%);
  331. }
  332. to{filter: brightness(100%);
  333. }
  334. }
  335.  
  336. @keyframes poof{
  337. from{opacity:1;}
  338. to{opacity:0;}
  339. }
  340. @-webkit-keyframes poof{
  341. from{opacity:1;}
  342. to{opacity:0;}
  343. }
  344.  
  345.  
  346. @keyframes move{
  347. from{top: 0px; left:0px;}
  348. to{top:-45px; left:-150px;}
  349. }
  350. @-webkit-keyframes move{
  351. from{top: 0px; left:0px;}
  352. to{top:-45px; left: -150px;}
  353. }
  354.  
  355.  
  356.  
  357. @keyframes pictureout{
  358. from{opacity:0;}
  359. to{opacity:1;}
  360. }
  361. @-webkit-keyframes pictureout{
  362. from{opacity:0;}
  363. to{opacity:1;}
  364. }
  365.  
  366.  
  367.  
  368.  
  369.  
  370. </style>
  371. </head>
  372. <body>
  373.  
  374.  
  375.  
  376.  
  377. <div class="invisibox">
  378. <div id="shoo"><div class="bigpic"></div></div>
  379. <div id="rev"><div id="rem">
  380. <div class="mainimg"></div></div>
  381. </div>
  382. </div>
  383. <div id="res">
  384.  
  385. <div class="mainbox">
  386. <div class="titler">Garen Crownguard</div>
  387. <div class="title">Garen Crownguard</div>
  388.  
  389.  <div id="mov">
  390. <div class="mainimg"</div></div></div>
  391. <a href="#01"><div class="t1"></div></a>
  392. <a href="#02"><div class="t2"></div></a>
  393. <a href="#03"><div class="t3"></div></a>
  394. <a href="#09"><div class="t4"></div></a>
  395.  
  396.  
  397. <div id="01" class="text">
  398. <table border="0" cellspacing="0">
  399.  
  400.  
  401. <br>
  402. <tr>
  403. <td><b>Name</b></td>
  404. <td>
  405. <p class="td">Garen Crownguard</p>
  406. </td>
  407. </tr><br>
  408.  
  409.  
  410.  
  411. <tr>
  412. <td><b>Moniker</b></td>
  413. <td>
  414. <p class="td">-</p>
  415. </td>
  416. </tr>
  417.  
  418.  
  419. <tr>
  420. <td><b>Height</b></td>
  421. <td>
  422. <p class="td">-</p>
  423. </td>
  424. </tr>
  425.  
  426.  
  427. <tr>
  428. <td><b>Weight</b></td>
  429. <td>
  430. <p class="td">-</p>
  431. </td>
  432. </tr>
  433.  
  434.  
  435. <tr>
  436. <td><b>Gender</b></td>
  437. <td>
  438. <p class="td">-</p>
  439. </td>
  440. </tr>
  441.  
  442.  
  443. <tr>
  444. <td><b>Build</b></td>
  445. <td>
  446. <p class="td">Athletic</p>
  447. </td>
  448. </tr>
  449.  
  450.  
  451. <tr>
  452. <td><b>Occupation</b></td>
  453. <td>
  454. <p class="td">-</p>
  455. </td>
  456. </tr>
  457.  
  458. <tr>
  459. <td><b>Orientation</b></td>
  460. <td>
  461. <p class="td">-</p>
  462. </td>
  463. </tr>
  464.  
  465.  
  466. <tr>
  467. <td><b>Paramour</b></td>
  468. <td>
  469. <p class="td">-</p>
  470. </td>
  471. </tr>
  472.  
  473.  
  474. </table>
  475. </div>
  476.  
  477.  
  478.  
  479.  
  480.  
  481. <div id="02" class="text"><br><b>HISTORY</b><br><br><p> </p>
  482. </span>
  483.  
  484.  
  485.  
  486.  
  487. <p>
  488. To be Added.
  489. </p>
  490.  
  491.  
  492.  
  493.  
  494.  
  495.  
  496. </div>
  497.  
  498. <div id="03" class="text"><br><b>CONNECTIONS</b><br><br>
  499.  
  500.  
  501.  
  502.  
  503. <a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src=" https://i.imgur.com/LWhwkQ7.png" class="fr1" title="Something about them."></a>
  504.  
  505. <a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src=" https://i.imgur.com/LWhwkQ7.png" class="fr1" title="Something about them."></a>
  506.  
  507. <a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src=" https://i.imgur.com/LWhwkQ7.png" class="fr1" title="Something about them."></a>
  508.  
  509. <a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src=" https://i.imgur.com/LWhwkQ7.png" class="fr1" title="Something about them."></a><br><br>
  510.  
  511. <a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src=" https://i.imgur.com/LWhwkQ7.png" class="fr1" title="Something about them."></a>
  512.  
  513. <a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src=" https://i.imgur.com/LWhwkQ7.png" class="fr1" title="Something about them."></a>
  514.  
  515. <a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src=" https://i.imgur.com/LWhwkQ7.png" class="fr1" title="Something about them."></a>
  516.  
  517. <a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src=" https://i.imgur.com/LWhwkQ7.png" class="fr1" title="Something about them."></a>
  518.  
  519.  
  520.  
  521.  
  522. </span></a>
  523.  
  524.  
  525.  
  526.  
  527.  
  528.  
  529. </div>
  530. </div>
  531. </div>
  532.  
  533.  
  534. <div id="res">
  535. <div class="otherbox">
  536. <div class="headcan">Headcanons</div>
  537. <div class="words">
  538.  
  539.  
  540.  
  541.  
  542.  
  543. - HEADCANON 1
  544. <br><br>
  545.  
  546. - HEADCANON 2
  547. <br><br>
  548.  
  549. - HEADCANON 3
  550. <br><br>
  551.  
  552. - HEADCANON 4
  553. <br><br>
  554.  
  555. - HEADCANON 5
  556. <br><br>
  557.  
  558. - HEADCANON 6
  559. <br><br>
  560.  
  561. - HEADCANON 7
  562. <br><br>
  563.  
  564. - HEADCANON 8
  565. <br><br>
  566.  
  567.  
  568.  
  569.  
  570.  
  571.  
  572. </div>
  573.  
  574. </div>
  575.  
  576. <div class="otherbox2">
  577. <div class="ooc">OOC</div>
  578.  
  579. <div class="words">
  580.  
  581.  
  582.  
  583.  
  584.  
  585.  
  586. <b>01.</b> This profile was made by <b>KAL</b> or <b>The Prodigal Explorer</b>. If you want one, you can just ask him.
  587. <br><br>
  588.  
  589. <b>02.</b> These are <b>scrollable</b>! Go ahead! Try it!
  590. <br><br>
  591.  
  592. <b>03.</b> OOC 3
  593. <br><br>
  594.  
  595. <b>04.</b> OOC 4
  596. <br><br>
  597.  
  598. <b>05.</b> OOC 5
  599. <br><br>
  600.  
  601. <b>06.</b> OOC 6
  602. <br><br>
  603.  
  604. <b>07.</b> OOC 7
  605. <br><br>
  606.  
  607. <b>08.</b> OOC 8
  608. <br><br>
  609.  
  610.  
  611.  
  612. </div>
  613. </div>
  614. </div>
  615. </body>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top