Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <style type="text/css">
- @import url(https://fonts.googleapis.com/css?family=Cinzel);
- @import url(https://fonts.googleapis.com/css?family=Averia+Libre);
- @import url(https://fonts.googleapis.com/css?family=Nosifer);
- @import url(https://fonts.googleapis.com/css?family=Shojumaru);
- ::-webkit-scrollbar { width: 0.4vw; height: 0.4vw;}
- ::-webkit-scrollbar-track { border-radius: 0px; background-color: #563B3B;}
- ::-webkit-scrollbar-thumb { border: 0.1vh solid #B59090; border-radius:50px; background-color: #B14C4C;}
- body{
- background-color: #000;
- background-image:url('');
- }
- #image {
- position:fixed;
- right:0;
- bottom:0;
- opacity:1.0;
- -webkit-animation: fade 2s 1s;
- animation: fade 2s 1s;
- -webkit-animation-fill-mode: forwards;
- animation-fill-mode: forwards;
- }
- @-webkit-keyframes fade{
- from{
- opacity:1.0;
- }
- to{
- opacity:.0;
- }}
- #image img{
- height: 100%;
- }
- #image2{
- position: fixed;
- z-index: 1;
- bottom: 0vh;
- right: 45vw;
- width: 30vw;
- opacity:0;
- -webkit-animation:picturein 2.5s 1;
- animation:picturein s 1;
- animation-delay:3s;
- animation-fill-mode:forwards;
- -webkit-animation-delay:3s;
- -webkit-animation-fill-mode:forwards;
- }
- #image2 img{
- height: 98.5vh;
- }
- @keyframes picturein{
- from{opacity:0;}
- to{opacity:1;}
- }
- #infobackground{
- position: fixed;
- z-index: 3;
- top: 30vh;
- left: 8vw;
- height: 45.5vh;
- width: 20vw;
- background: #2C2B2B;
- border-top: 0.2vw solid #fff;
- border-bottom: 0.2vw solid #fff;
- border-left: 0.2vw solid #fff;
- border-right: 0.2vw solid #fff;
- box-shadow: -0.4vw 0.5vw 0.5vw #610101;
- overflow: hidden;
- color: #cccccc;
- font-family: Segoe Print;
- font-size: 10vh;
- opacity:0;
- -webkit-animation:infobackin 2.5s 1;
- animation:infobackin 2.5s 1;
- animation-delay:4.5s;
- animation-fill-mode:forwards;
- -webkit-animation-delay:4.5s;
- -webkit-animation-fill-mode:forwards;
- }
- @keyframes infobackin{
- from{opacity:0;}
- to{opacity:1;}
- }
- #infobox{
- position: static;
- z-index: 4;
- top: 30vh;
- left: 8vw;
- height: 45.5vh;
- width: 20vw;
- overflow: hidden;
- color: #cccccc;
- font-family: Segoe Print;
- font-size: 1.5vh;
- opacity:0;
- -webkit-animation:infobackin 2.5s 1;
- animation:infobackin 2.5s 1;
- animation-delay:4.5s;
- animation-fill-mode:forwards;
- -webkit-animation-delay:4.5s;
- -webkit-animation-fill-mode:forwards;
- }
- @keyframes infoboxin{
- from{opacity:0;}
- to{opacity:1;}
- }
- @-webkit-keyframes infoboxin{
- from{opacity:0;}
- to{opacity:1;}
- }
- #infobackground2{
- position: fixed;
- z-index: 3;
- top: 30vh;
- right: 8vw;
- height: 45.5vh;
- width: 20vw;
- background: #2C2B2B;
- border-top: 0.2vw solid #fff;
- border-bottom: 0.2vw solid #fff;
- border-left: 0.2vw solid #fff;
- border-right: 0.2vw solid #fff;
- box-shadow: 0.4vw 0.5vw 0.5vw #610101;
- overflow: hidden;
- color: #cccccc;
- font-family: Segoe Print;
- font-size: 10vh;
- opacity:0;
- -webkit-animation:infobackin 2.5s ;
- animation:infobackin 2.5s ;
- animation-delay:4.5s;
- animation-fill-mode:forwards;
- -webkit-animation-delay:4.5s;
- -webkit-animation-fill-mode:forwards;
- }
- @keyframes infobackin{
- from{opacity:0;}
- to{opacity:1;}
- }
- #infobox2{
- position: static;
- z-index: 4;
- top: 30vh;
- right: 8vw;
- height: 45.5vh;
- width: 20vw;
- overflow: hidden;
- color: #cccccc;
- font-family: Segoe Print;
- font-size: 1.5vh;
- opacity:0;
- -webkit-animation:infobackin 2.5s ;
- animation:infobackin 2.5s ;
- animation-delay:4.5s;
- animation-fill-mode:forwards;
- -webkit-animation-delay:4.5s;
- -webkit-animation-fill-mode:forwards;
- }
- @keyframes infoboxin{
- from{opacity:0;}
- to{opacity:1;}
- }
- @-webkit-keyframes infoboxin{
- from{opacity:0;}
- to{opacity:1;}
- }
- #name{
- position: fixed;
- z-index:2;
- left: 26vw;
- top: -0.2vh;
- color: #FFFFFF;
- text-shadow: -0.3vw 0.3vw 0.3vw #610101;
- font-family: Nosifer;
- font-size: 4vw;
- letter-spacing: 0.5vw;
- opacity:0;
- -webkit-animation:namefade 1.5s 1;
- animation:namefade 1.5s 1;
- animation-delay:4s;
- animation-fill-mode:forwards;
- -webkit-animation-delay:4s;
- -webkit-animation-fill-mode:forwards;
- }
- @keyframes namefade{
- from{opacity:0;}
- to{opacity:1;}
- }
- @-webkit-keyframes namefade{
- from{opacity:0;}
- to{opacity:1;}
- }
- h1{
- color: #E6A8A8;
- text-shadow: -0.2vw 0.2vw 0.2vw #610101;
- font-family: Shojumaru;
- font-size: 2.5vh;
- letter-spacing: 0.5vw;
- font-weight: normal;
- }
- hr{
- border: 0.2vh solid #FFFFFF;
- outline: 0.2vw solid #610101;
- box-shadow: -0.2vw 0.2vw 0.2vw #610101;
- width: 90%;
- }
- b, strong {color: #477F8E; font-family: Averia Libre; font-size: 1.8vh; font-style: normal; font-weight: bold; text-decoration: none; font-style: italic; font-weight: normal;}
- a {
- color: #13AD53;
- text-decoration: none;
- }
- a:link, a:active, a:visited {
- font-size:1.5vh;
- letter-spacing:0px;
- text-decoration: none;
- color: #D88A8A;
- -webkit-transition: all 0.5s linear;
- -moz-transition: all 0.5s linear;
- -o-transition: all 0.5s linear;
- }
- a:hover {
- font-size:1.5vh;
- color:#52AFAC;
- text-decoraction: line-through;
- -webkit-transition: all 0.5s linear;
- -moz-transition: all 0.5s linear;
- -o-transition: all 0.5s linear;
- }
- #buttons {
- z-index:3;
- list-style-type: none;
- margin: 0;
- padding: 0;
- width: 6.4vw;
- background-color: transparent;
- position: fixed;
- top: 31vh;
- left: 1.5vw;
- overflow: auto;
- font-family: Shojumaru;
- opacity:0;
- -webkit-animation:buttonfade 2.5s 1;
- animation:buttonfade 2.5s 1;
- animation-delay:4.5s;
- animation-fill-mode:forwards;
- -webkit-animation-delay:4.5s;
- -webkit-animation-fill-mode:forwards;
- }
- @keyframes buttonfade{
- from{opacity:0;}
- to{opacity:1;}
- }
- @-webkit-keyframes buttonfade{
- from{opacity:0;}
- to{opacity:1;}
- }
- #buttons a {
- display: block;
- color: #FFFFFF;
- text-shadow: -0.2vw 0.2vw 0.2vw #610101;
- font-size: 2vh;
- padding: 0vh 0vh 0vh 0vh;
- text-decoration: none;
- }
- #buttons a:hover{
- color:#C16E6E;
- text-shadow: -0.2vw 0.2vw 0.2vw #610101;
- font-size: 2vh;
- }
- #buttons2 {
- z-index:3;
- list-style-type: none;
- margin: 0;
- padding: 0;
- width: 6.4vw;
- background-color: transparent;
- position: fixed;
- top: 31vh;
- right: 1.5vw;
- overflow: auto;
- font-family: Shojumaru;
- opacity:0;
- -webkit-animation:buttonfade 2.5s 1;
- animation:buttonfade 2.5s 1;
- animation-delay:4.5s;
- animation-fill-mode:forwards;
- -webkit-animation-delay:4.5s;
- -webkit-animation-fill-mode:forwards;
- }
- @keyframes buttonfade{
- from{opacity:0;}
- to{opacity:1;}
- }
- @-webkit-keyframes buttonfade{
- from{opacity:0;}
- to{opacity:1;}
- }
- #buttons2 a {
- display: block;
- color: #FFFFFF;
- text-shadow: -0.2vw 0.2vw 0.2vw #610101;
- font-size: 2vh;
- padding: 0vh 0vh 0vh 0vh;
- text-decoration: none;
- }
- #buttons2 a:hover{
- color:#C16E6E;
- text-shadow: -0.2vw 0.2vw 0.2vw #610101;
- font-size: 2vh;
- }
- .circle{
- border-radius:0px;
- -webkit-transition: all 0.8s ease-out;
- -moz-transition: all 0.8s ease-out;
- -o-transition: all 0.8s ease-out;
- }
- .circle:hover{
- border-radius:0px;
- -webkit-transition: all 0.8s ease-out;
- -moz-transition: all 0.8s ease-out;
- -o-transition: all 0.8s ease-out;
- -webkit-transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- -o-transform: rotate(-360deg);}
- </style>
- <div id="image">
- <img src="http://i.imgur.com/5MNxMm8.png">
- </div>
- <div id="image2">
- <img src="http://i.imgur.com/zbxe3SQ.png">
- </div>
- <div id="name">
- Rena Ryuuguu
- </div>
- <div id="buttons">
- <center>
- <a href="#stats">Stats</a>
- <a href="#bio">Bio</a>
- </center>
- </div>
- <div id="buttons2">
- <center>
- <a href="#friends">Friends</a>
- <a href="#ooc">OOC</a>
- </center>
- </div>
- <div id="infobackground">
- <div id="infobox">
- <center>
- <div style="height: 100%; overflow-y: hidden;">
- <a name="stats"></a>
- <div style="width:100%; height: 100%; top: 100px; overflow: auto;" align="center">
- <h1>Stats</h1>
- <b>Words</b> here
- </div>
- <a name="bio"></a>
- <div style="width:100%; height: 100%; top: 100px; overflow: auto;" align="center">
- <h1>Story</h1>
- Words
- </div>
- </div>
- </div>
- </div>
- <div id="infobackground2">
- <div id="infobox2">
- <a name="friends"></a>
- <div style="width:100%; height: 100%; top: 100px; overflow: auto;" align="center">
- <h1>Friends</h1>
- </div>
- <a name="ooc"></a>
- <div style="width:100%; height: 100%; top: 100px; overflow: auto;" align="center">
- <h1>OOC</h1>
- Words
- </div>
- </div>
Add Comment
Please, Sign In to add comment