Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <body>
- <style>@import url('https://fonts.googleapis.com/css?family=Spectral+SC|Julius+Sans+One');
- body{
- background-color:#000;
- }
- ::-webkit-scrollbar {
- width: 3px;
- height: 0px;
- background:transparent;
- }
- ::-webkit-scrollbar-thumb {
- background-color:rgba(255,255,255,.18);
- -webkit-border-radius: 5px;
- border-radius: 5px;
- }
- ::selection {
- color: #777;
- background: #333;
- }
- .flat{
- height:300px;
- width:500px;
- position:fixed;
- left:689px;
- bottom:164px;
- overflow:hidden;
- opacity:1;
- background-image:url(https://78.media.tumblr.com/9951ca2e7e884a48ca5b5269f5514cd6/tumblr_orh7h7ephj1ve5gdao1_500.gif);
- background-size: 105%;
- background-repeat: no-repeat;
- filter:hue-rotate(190deg);
- background-position:center;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- -ms-transition: all 0.5s ease-in-out;
- transition: all 0.5s ease-in-out;
- }
- body:hover .flat{
- border: 1px solid #111;
- outline: 1px solid #1a1a1a;
- outline-offset: 3px;
- }
- .noct{
- opacity:0;
- height:300px;
- width:500px;
- position:fixed;
- left:691px;
- bottom:165px;
- overflow:hidden;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- -ms-transition: all 0.5s ease-in-out;
- transition: all 0.5s ease-in-out;
- }
- body:hover .noct{
- opacity:.3;
- filter:brightness(100%);
- background-image:url(https://i.imgur.com/T0SlRpX.jpg);
- background-repeat:no-repeat;
- background-size:110%;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- -ms-transition: all 0.5s ease-in-out;
- transition: all 0.5s ease-in-out;
- }
- .center{
- width: 480px;
- height: 280px;
- background-color:rgba(255,255,255,.05);
- position: fixed;
- left: 690px;
- bottom: 165px;
- padding:10px;
- color:#fff;
- font-family: 'Spectral SC', serif;
- text-align:center;
- font-size:10px;
- text-shadow:0px 0px 2px #000;
- opacity:0;
- z-index:99;
- overflow:auto;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- -ms-transition: all 0.5s ease-in-out;
- transition: all 1.7s ease-in-out;
- }
- body:hover .center{
- opacity:1;
- transition-delay:.8s;
- }
- .triage{
- position:fixed;
- margin:auto;
- left:910px;
- bottom:122px;
- width:48px;
- height:48px;
- opacity:1;
- transform:rotate(45deg);
- border:10px solid #006699;
- z-index:999;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- -ms-transition: all 0.5s ease-in-out;
- transition: all 0.5s ease-in-out;
- }
- body:hover .triage{
- transform:rotate(135deg);
- filter: brightness(30%);
- opacity:1;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- -ms-transition: all 0.5s ease-in-out;
- transition: all 0.5s ease-in-out;
- }
- .square{
- position:fixed;
- margin:auto;
- left:925px;
- bottom:137px;
- width:38px;
- height:38px;
- opacity:1;
- transform:rotate(45deg);
- background-color:#222;
- z-index:999;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- -ms-transition: all 0.5s ease-in-out;
- transition: all 0.5s ease-in-out;
- }
- body:hover .square{
- transform:rotate(135deg);
- filter: brightness(100%);
- opacity:1;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- -ms-transition: all 0.5s ease-in-out;
- transition: all .8s ease-in-out;
- }
- .text1{
- color:#fefefe; font-family: 'Julius Sans One', sans-serif; font-size:47px; position:fixed; left:682px; bottom:125px; z-index:1001;
- text-shadow:-1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- -ms-transition: all 0.5s ease-in-out;
- transition: all 1.8s ease-in-out;
- }
- body:hover .text1{
- color:#ccc;
- text-shadow:-1px 0 #4d8ff9, 0 1px #4d8ff9, 1px 0 #4d8ff9, 0 -1px #4d8ff9;
- bottom:465px;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- -ms-transition: all 0.5s ease-in-out;
- transition: all 1.4s ease-in-out;
- }
- </style><div style="position:fixed; bottom:px; left:-150px;"><img src="https://i.cubeupload.com/1TBvaD.png" height="1100" width="900"></div>
- <div class="text1">The Exiled Genius</div>
- <div class="center">
- Grandmaster of House Lorelei. Summoner of the Red Knights/Clairvoyant. Smartest man in the room. <br></Br>
- [Current Events]<br><br>
- WIP
- [OOC]<br>
- PM Friendly. One-liner to multi-para. Snowballs mostly. For the Eidolon Room<br><br>
- </div>
- <div class="flat"></div>
- <div class="noct"></div>
- <div class="triage"></div><div class="square"></div>
- <div class="center" style="position:fixed; bottom:15px; height:80px; border: 1px solid #111; outline: 1px solid #1a1a1a;outline-offset: 3px; padding-top:40px">[ friends / party list ]<br><br>
- [Current Party]<br><br>
- [Allies/Enemies]</span><br>
- </div>
- </body>
Add Comment
Please, Sign In to add comment