Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
- <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
- <script src="https://roleplay.chat/jquery.tooltipster.js?v=8"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js"></script>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
- <link href="https://roleplay.chat/tooltipster.css" rel="stylesheet" type="text/css">
- <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
- <script defer>
- window.onload = function() {
- };
- </script>
- <script type="text/javascript">
- $(document).ready(function() {
- // Tooltip only Text
- $('.masterTooltip').hover(function(){
- // Hover over code
- var title = $(this).attr('title');
- $(this).data('tipText', title).removeAttr('title');
- $('<p class="tooltip"></p>')
- .text(title)
- .appendTo('body')
- .fadeIn('slow');
- }, function() {
- // Hover out code
- $(this).attr('title', $(this).data('tipText'));
- $('.tooltip').remove();
- }).mousemove(function(e) {
- var mousex = e.pageX + 20; //Get X coordinates
- var mousey = e.pageY + 10; //Get Y coordinates
- $('.tooltip')
- .css({ top: mousey, left: mousex })
- });
- });
- </script>
- <style>
- @import url('https://fonts.googleapis.com/css?family=Charmonman|Fredoka One|Kumar One Outline');
- @import url('https://fonts.googleapis.com/css?family=Niconne|Reenie+Beanie|Rock+Salt|Ranga|Mirza');
- body {background-color: #234b5a;}
- .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 }
- .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%; }
- .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;
- box-shadow: 5px 15px 85px #eaf6fb; }
- .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 }
- .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 }
- .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; }
- .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; }
- .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; }
- .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; }
- .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; }
- .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; }
- .t1 {position: absolute;
- background-color: #234b5a;
- top: 345px;
- left: 90px;
- height: 10px;
- width: 10px;
- border: 10px solid; border-color: #234b5a;
- text-align: center;
- z-index:100; border-radius:50%;}
- .t2 {position: absolute;
- background-color: #234b5a;
- top: 345px;
- left: 140px;
- height: 10px;
- width: 10px;
- border: 10px solid; border-color: #234b5a;
- text-align: center;
- z-index:100; border-radius:50%;}
- .t3 {position: absolute;
- background-color: #234b5a;
- top: 345px;
- left: 190px;
- height: 10px;
- width: 10px;
- border: 10px solid; border-color: #234b5a;
- text-align: center;
- z-index:100; border-radius:50%;}
- .t4 {position: absolute;
- background-color: #234b5a;
- top: 345px;
- left: 240px;
- height: 10px;
- width: 10px;
- border: 10px solid; border-color: #234b5a;
- text-align: center;
- z-index:100; border-radius:50%;}
- .t1:hover, .t2:hover, .t3:hover, .t4:hover { box-shadow: 2px 2px 5px #000; transition: .5s;
- }
- ::-webkit-scrollbar {
- width: 4px;
- }
- /* Track */
- ::-webkit-scrollbar-track {
- background: #;
- }
- /* Handle */
- ::-webkit-scrollbar-thumb {
- background: #;
- }
- /* Handle on hover */
- ::-webkit-scrollbar-thumb:hover {
- background: #;
- }
- .words {position: absolute; top: 90px; left: 50px; margin: auto;
- height: 260px;
- width: 160px;
- padding: 2px;
- text-align: center;
- font-size: 14px;
- overflow: auto;
- text-ident: 10px;
- color: #234b5a;
- font-family: Ranga;
- z-index:0;overflow:auto transition: all 0.9s ease-in-out;
- -webkit-transition: all 0.2s ease-in-out;
- -moz-transition: all 0.2s ease-in-out;
- -o-transition: all 0.2s ease-in-out;
- -ms-transition: all 0.2s ease-in-out;}
- .text {position: absolute; bottom: 50px; left: 120px; margin: auto;
- opacity:0;
- height: 250px;
- width: 370px;
- padding: 0px;
- text-align: left;
- font-size: 13px;
- overflow: auto;
- text-ident: 10px;
- color: #000;
- font-family: Ranga;
- z-index:0;overflow:auto transition: all 0.9s ease-in-out;
- -webkit-transition: all 0.2s ease-in-out;
- -moz-transition: all 0.2s ease-in-out;
- -o-transition: all 0.2s ease-in-out;
- -ms-transition: all 0.2s ease-in-out;}
- .text:target{top: -1px; opacity:1;
- z-index:11;transition: all 0.2s ease-in-out;
- -webkit-transition: all 0.2s ease-in-out;
- -moz-transition: all 0.2s ease-in-out;
- -o-transition: all 0.2s ease-in-out;
- -ms-transition: all 0.2s ease-in-out;overflow:auto;}
- p{
- font-family: 'Charmonman';
- font-size: 16px;
- letter-spacing: 0px;
- word-spacing: 0px;
- color: #000;
- text-align: justify;
- line-height: 20px;
- margin: 0px 0px 0px 1px;}
- p.td {
- text-align: right;
- font-family: Charmonman;
- margin-left: 55px;
- font-size: 15px;
- line-height: 30px;
- color: #000; }
- td {
- text-align: left;
- line-height: 30px; }
- strong {
- font-family: Ranga;
- color: #000;
- font-size: 40px;
- text-transform: uppercase;
- font-weight: 100; }
- b {
- font-family: Ranga;
- color: #000;
- font-weight: bold;
- font-size: 18px;
- text-transform: uppercase;
- font-weight: 100;
- text-shadow: 0px 0px 0px #2fc6ff;}
- .fr1{ width: 60px; height: 60px; margin-bottom: 10px; margin-top: 10px; margin-right: 3px; margin-left: 2px; border: 1px solid #234b5a; border-radius: 10px }
- #rev{
- position: absolute;
- filter: brightness(10%);
- -webkit-animation:reveal 1s 1;
- animation:reveal 2s 1;
- animation-delay:1s;
- animation-fill-mode:forwards;
- -webkit-animation-delay: 1s;
- -webkit-animation-fill-mode:forwards;
- }
- #rem{
- position: absolute;
- -webkit-animation:poof 3s 1;
- animation:poof 3s 1;
- animation-delay:3s;
- animation-fill-mode:forwards;
- -webkit-animation-delay: 3s;
- -webkit-animation-fill-mode:forwards;
- }
- #shoo{
- position: absolute;
- opacity: 1;
- -webkit-animation:poof 1.8s 1;
- animation:poof 1.8s 1;
- animation-delay:1.8s;
- animation-fill-mode:forwards;
- -webkit-animation-delay: 1.8s;
- -webkit-animation-fill-mode:forwards;
- }
- #res{
- position: absolute;
- opacity:0;
- -webkit-animation:pictureout 3s 1;
- animation:pictureout 3s 1;
- animation-delay:3s;
- animation-fill-mode:forwards;
- -webkit-animation-delay: 3s;
- -webkit-animation-fill-mode:forwards;
- }
- #mov{
- position: absolute;
- filter: brightness(100%);
- -webkit-animation:move 3s 1;
- animation:move 3s 1;
- animation-delay:3s;
- animation-fill-mode:forwards;
- -webkit-animation-delay: 3s;
- -webkit-animation-fill-mode:forwards;
- }
- @keyframes reveal{
- from{filter: brightness(10%);
- }
- to{filter: brightness(100%);
- }
- }
- @-webkit-keyframes reveal{
- from{filter: brightness(10%);
- }
- to{filter: brightness(100%);
- }
- }
- @keyframes poof{
- from{opacity:1;}
- to{opacity:0;}
- }
- @-webkit-keyframes poof{
- from{opacity:1;}
- to{opacity:0;}
- }
- @keyframes move{
- from{top: 0px; left:0px;}
- to{top:-45px; left:-150px;}
- }
- @-webkit-keyframes move{
- from{top: 0px; left:0px;}
- to{top:-45px; left: -150px;}
- }
- @keyframes pictureout{
- from{opacity:0;}
- to{opacity:1;}
- }
- @-webkit-keyframes pictureout{
- from{opacity:0;}
- to{opacity:1;}
- }
- </style>
- </head>
- <body>
- <div class="invisibox">
- <div id="shoo"><div class="bigpic"></div></div>
- <div id="rev"><div id="rem">
- <div class="mainimg"></div></div>
- </div>
- </div>
- <div id="res">
- <div class="mainbox">
- <div class="titler">Garen Crownguard</div>
- <div class="title">Garen Crownguard</div>
- <div id="mov">
- <div class="mainimg"</div></div></div>
- <a href="#01"><div class="t1"></div></a>
- <a href="#02"><div class="t2"></div></a>
- <a href="#03"><div class="t3"></div></a>
- <a href="#09"><div class="t4"></div></a>
- <div id="01" class="text">
- <table border="0" cellspacing="0">
- <br>
- <tr>
- <td><b>Name</b></td>
- <td>
- <p class="td">Garen Crownguard</p>
- </td>
- </tr><br>
- <tr>
- <td><b>Moniker</b></td>
- <td>
- <p class="td">-</p>
- </td>
- </tr>
- <tr>
- <td><b>Height</b></td>
- <td>
- <p class="td">-</p>
- </td>
- </tr>
- <tr>
- <td><b>Weight</b></td>
- <td>
- <p class="td">-</p>
- </td>
- </tr>
- <tr>
- <td><b>Gender</b></td>
- <td>
- <p class="td">-</p>
- </td>
- </tr>
- <tr>
- <td><b>Build</b></td>
- <td>
- <p class="td">Athletic</p>
- </td>
- </tr>
- <tr>
- <td><b>Occupation</b></td>
- <td>
- <p class="td">-</p>
- </td>
- </tr>
- <tr>
- <td><b>Orientation</b></td>
- <td>
- <p class="td">-</p>
- </td>
- </tr>
- <tr>
- <td><b>Paramour</b></td>
- <td>
- <p class="td">-</p>
- </td>
- </tr>
- </table>
- </div>
- <div id="02" class="text"><br><b>HISTORY</b><br><br><p> </p>
- </span>
- <p>
- To be Added.
- </p>
- </div>
- <div id="03" class="text"><br><b>CONNECTIONS</b><br><br>
- <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>
- <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>
- <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>
- <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>
- <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>
- <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>
- <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>
- <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>
- </span></a>
- </div>
- </div>
- </div>
- <div id="res">
- <div class="otherbox">
- <div class="headcan">Headcanons</div>
- <div class="words">
- - HEADCANON 1
- <br><br>
- - HEADCANON 2
- <br><br>
- - HEADCANON 3
- <br><br>
- - HEADCANON 4
- <br><br>
- - HEADCANON 5
- <br><br>
- - HEADCANON 6
- <br><br>
- - HEADCANON 7
- <br><br>
- - HEADCANON 8
- <br><br>
- </div>
- </div>
- <div class="otherbox2">
- <div class="ooc">OOC</div>
- <div class="words">
- <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.
- <br><br>
- <b>02.</b> These are <b>scrollable</b>! Go ahead! Try it!
- <br><br>
- <b>03.</b> OOC 3
- <br><br>
- <b>04.</b> OOC 4
- <br><br>
- <b>05.</b> OOC 5
- <br><br>
- <b>06.</b> OOC 6
- <br><br>
- <b>07.</b> OOC 7
- <br><br>
- <b>08.</b> OOC 8
- <br><br>
- </div>
- </div>
- </div>
- </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement