Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <style>
- @import url(https://fonts.googleapis.com/css?family=Nosifer);
- @import url(https://fonts.googleapis.com/css?family=Metal+Mania);
- @import url(https://fonts.googleapis.com/css?family=Comfortaa);
- ::-webkit-scrollbar { width: 2px; }
- ::-webkit-scrollbar-track { border-radius: 2px; background-color: transparent; }
- ::-webkit-scrollbar-thumb { border-radius: 2px; background-color: #transparent; }
- body{background-color:#000;}
- .intro{position:absolute;top:0%;left:0%;width:100%;height:100%;z-index:-1;opacity:0;background-color:black;
- -webkit-animation-name: title;
- -webkit-animation-duration: 5s;
- animation-name:title;
- animation-duration: 5s;
- }
- @-webkit-keyframes title {
- 0% {z-index:1;opacity:1;}
- 20% {z-index:1;opacity:1;}
- 40% {z-index:1;opacity:1;}
- 80% {z-index:1;opacity:1;}
- 100% {z-index:-1;opacity:0;}
- }
- .image{position:absolute;top:0%;left:0%;width:100%;height:100%;background:url(http://i.imgur.com/AuN6sBC.jpg);background-size:100% 100%;background-position:center;background-color:transparent;background-repeat:no-repeat;z-index:-2;opacity:0;
- -webkit-animation-name: title1;
- -webkit-animation-duration: 5s;
- animation-name:title1;
- animation-duration: 5s;
- }
- @-webkit-keyframes title1 {
- 0% {opacity:1;z-index:2;}
- 5% {opacity:1;z-index:2;}
- 10% {opacity:1;z-index:2;}
- 15% {opacity:1;z-index:2;}
- 20% {opacity:0.5;z-index:2;}
- 25% {opacity:1;z-index:2;}
- 30% {opacity:1;z-index:2;}
- 35% {opacity:1;z-index:2;}
- 40% {opacity:1;z-index:2;}
- 45% {opacity:0.5;z-index:2;}
- 50% {opacity:1;z-index:2;}
- 55% {opacity:1;z-index:2;}
- 60% {opacity:1;z-index:2;}
- 65% {opacity:1;z-index:2;}
- 70% {opacity:0.5;z-index:2;}
- 75% {opacity:1;z-index:2;}
- 80% {opacity:1;z-index:2;}
- 85% {opacity:1;z-index:2;}
- 90% {opacity:1;z-index:2;}
- 95% {opacity:0.5;z-index:2;}
- 100% {opacity:0;z-index:-2;}
- }
- #image{
- position: fixed;
- z-index: 6;
- bottom: 0vh;
- right: 5vw;
- width: 30vw;
- opacity:0;
- -webkit-animation:picturein 1.5s 1;
- animation:picturein s 1;
- animation-delay:5s;
- animation-fill-mode:forwards;
- -webkit-animation-delay:5s;
- -webkit-animation-fill-mode:forwards;
- }
- #image img{
- height: 100vh;
- }
- @keyframes picturein{
- from{opacity:0; bottom: -30vw;}
- to{opacity:1;}
- }
- h1{
- color: #B40404;
- text-shadow: -0.1vw 0.1vw 0.1vw #ccc;
- font-family: Metal Mania;
- font-size: 2.9vh;
- letter-spacing: 0.5vw;
- font-weight: normal;
- text-align: center;
- }
- b, strong {color: #2377B3; font-family: Julee; font-size: 2.4vh; font-style: normal; font-weight: bold; text-decoration: none; font-style: italic; font-weight: normal; text-shadow: -0.1vw 0.1vw 0.1vw #;}
- a {
- color: #B10707;
- text-decoration: none;
- }
- a:link, a:active, a:visited {
- font-size:15px;
- letter-spacing:0px;
- text-decoration: none;
- color: #B10707;
- -webkit-transition: all 0.5s linear;
- -moz-transition: all 0.5s linear;
- -o-transition: all 0.5s linear;
- }
- a:hover {
- font-size:15px;
- color:#A4480A;
- text-decoraction: line-through;
- -webkit-transition: all 0.5s linear;
- -moz-transition: all 0.5s linear;
- -o-transition: all 0.5s linear;
- }
- .derp{
- position:absolute;
- top:10%;
- left:10%;
- width:350px;
- }
- a.gluttony:link, a.gluttony:active, a.gluttony:visited{
- display: block;
- z-index: 10;
- float: left;
- width: 70px;
- height:30px;
- color: #860000;
- text-shadow: -0.2vw 0.2vw 0.2vw #fff;
- font-family: Nosifer;
- font-size: 5vw;
- letter-spacing: 0px;
- transition: all 0.7s ease-in-out;
- -moz-transition: all 0.7s ease-in-out;
- -webkit-transition: all 0.7s ease-in-out;
- }
- a.gluttony:hover{
- color: #fff;
- text-decoration: none;
- text-shadow: -0.3vw 0.3vw 0.3vw #860000;}
- .boxie {
- background-color: #;
- border: 1px solid #;
- color: #ccc;
- font-size: 15px;
- font-family: Comfortaa;
- height: 320px;
- right: 440px;
- opacity: 0;
- overflow: auto;
- padding: 5px;
- position: fixed;
- text-align: center;
- top: 305px;
- width: 461px;
- }
- .boxie:target {
- background-color: #;
- border: 1px solid #;
- height: 450px;
- left: 5%;
- opacity: 1;
- overflow: auto;
- padding: 5px;
- position: fixed;
- top: 28%;
- width: 520px;
- z-index: 40;
- }
- </style>
- <div class="derp">
- <a href="#01" class="gluttony">B</a>
- <a href="#02" class="gluttony">L</a>
- <a href="#03" class="gluttony">A</a>
- <a href="#04" class="gluttony">D</a>
- <a href="#05" class="gluttony">E</a>
- </div></div>
- <div id="01" class="boxie">
- <h1>Information</h1>
- words
- </div>
- <div id="02" class="boxie">
- <h1>About</h1>
- Words
- </div>
- <div id="03" class="boxie">
- <h1>Powers & Abilities</h1>
- words
- </div>
- <div id="04" class="boxie">
- <h1>OOC</h1>
- <br>Code made by: <a target="_blank" href="http://roleplay.chat/profile.php?user=Pachi"><i>Pachi</i></a>. Ask her permission to use the code.
- </div>
- </div>
- <div class="image"></div>
- <div class="intro"></div>
- <div id="image">
- <img src="http://i.imgur.com/m68tODy.png">
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement