Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <body>
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <style type="text/css">
- @import url('https://fonts.googleapis.com/css?family=Comfortaa|Cinzel');
- html, body {
- background: rgb(0,0,0);
- background: -moz-radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(60,40,92,1) 50%, rgba(14,43,77,1) 100%);
- background: -webkit-radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(60,40,92,1) 50%, rgba(14,43,77,1) 100%);
- background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(60,40,92,1) 50%, rgba(14,43,77,1) 100%);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#0e2b4d",GradientType=1);
- }
- ::-webkit-scrollbar-button:vertical:{
- background-color: #transparent;}
- ::-webkit-scrollbar-thumb:vertical {
- background-color:#transparent;
- height:150px;}
- ::-webkit-scrollbar-thumb:horizontal {
- background-color:#transparent;
- height:60px;}
- ::-webkit-scrollbar {
- height:60px;
- width:5px;
- background-color:#transparent;}
- #image {
- width: 700px;
- margin: 0px;
- border: none;
- height: 750px;
- background-color:transparent;
- position: absolute;
- right: 30vw;
- bottom: 5vw;
- background-image:url("https://i.ibb.co/zXNL3ZD/13.png");
- background-repeat:no-repeat;
- background-position: center;
- background-size: 100%;
- z-index: 2;
- }
- body .fade {
- background-color: #000;
- background-image:url("https://wallpapercave.com/wp/qvpyfs0.gif");
- background-size: 400px;
- background-repeat: repeat;
- background-position: top;
- width: 2000px;
- height: 1000px;
- margin:auto;
- position: absolute;
- right: 0%;
- top: 0%;
- z-index:1;
- opacity: 1;
- animation-fill-mode: ease-in-out forwards;
- }
- body:hover .fade{
- animation: fader ease-in-out 10s;
- animation-iteration-count: 1;
- transform-origin: 50% 50%;
- animation-fill-mode:ease-in-out forwards; /*when the spec is finished*/
- -webkit-animation: fader ease-in-out 10s;
- -webkit-animation-iteration-count: 1;
- -webkit-transform-origin: 50% 50%;
- -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
- -moz-animation: fader ease-in-out 10s;
- -moz-animation-iteration-count: 1;
- -moz-transform-origin: 50% 50%;
- -moz-animation-fill-mode:forwards; /*FF 5+*/
- -o-animation: fader ease-in-out 10s;
- -o-animation-iteration-count: 1;
- -o-transform-origin: 50% 50%;
- -o-animation-fill-mode:forwards; /*Not implemented yet*/
- -ms-animation: fader ease-in-out 10s;
- -ms-animation-iteration-count: 1;
- -ms-transform-origin: 50% 50%;
- -ms-animation-fill-mode:forwards; /*IE 10+*/
- }
- @keyframes fader{
- 0% {
- opacity:1;
- transform: scaleX(1.00) scaleY(1.00) ;
- }
- 50% {
- opacity:0;
- transform: scaleX(NaN) scaleY(NaN) ;
- }
- 100% {
- z-index: -1;
- opacity: 0;
- }
- }
- @-moz-keyframes fader{
- 0% {
- opacity:1;
- -moz-transform: scaleX(1.00) scaleY(1.00) ;
- }
- 50% {
- opacity:0;
- -moz-transform: scaleX(NaN) scaleY(NaN) ;
- }
- 100% {
- z-index: -1;
- opacity: 0;
- }
- }
- @-webkit-keyframes fader {
- 0% {
- opacity:1;
- -webkit-transform: scaleX(1.00) scaleY(1.00) ;
- }
- 50% {
- opacity:0;
- -webkit-transform: scaleX(NaN) scaleY(NaN) ;
- }
- 100% {
- z-index: -1;
- opacity: 0;
- }
- }
- @-o-keyframes fader {
- 0% {
- opacity:1;
- -o-transform: scaleX(1.00) scaleY(1.00) ;
- }
- 50% {
- opacity:0;
- -o-transform: scaleX(NaN) scaleY(NaN) ;
- }
- 100% {
- z-index: -1;
- opacity: 0;
- }
- }
- @-ms-keyframes fader {
- 0% {
- opacity:1;
- -ms-transform: scaleX(1.00) scaleY(1.00) ;
- }
- 50% {
- opacity:0;
- -ms-transform: scaleX(NaN) scaleY(NaN) ;
- }
- 100% {
- z-index: -1;
- opacity: 0;
- }}
- #container {
- background-color: transparent;
- background-image: url('https://media.istockphoto.com/photos/clear-night-sky-with-milky-way-and-huge-amount-of-stars-picture-id1287456867?b=1&k=20&m=1287456867&s=170667a&w=0&h=k_ldypib_aEeLD71QVzSS5kBV9QI-INb5k684DVEZ94=');
- background-size: 100%;
- background-position: center;
- width: 25vw;
- height: 35vw;
- margin:auto;
- position: absolute;
- padding: 5px;
- right: 5vw;
- bottom: 5vw;
- z-index:3;
- border: 2px solid #000;
- box-shadow: 0px 5px 10px #000;
- z-index: 10;
- }
- #content {
- background-color: #4c4c4c;
- width: 24vw;
- height: 34vw;
- margin:auto;
- position: absolute;
- padding: 5px;
- font-family: 'Comfortaa', cursive;
- font-size: 15px;
- color: #000;
- right: 0.3vw;
- bottom: 0.3vw;
- z-index:4;
- border: 2px solid #000;
- }
- #container2 {
- background-color: transparent;
- background-image: url('https://media.istockphoto.com/photos/clear-night-sky-with-milky-way-and-huge-amount-of-stars-picture-id1287456867?b=1&k=20&m=1287456867&s=170667a&w=0&h=k_ldypib_aEeLD71QVzSS5kBV9QI-INb5k684DVEZ94=');
- background-size: 100%;
- background-position: center;
- width: 25vw;
- height: 35vw;
- margin:auto;
- position: absolute;
- padding: 5px;
- left: 5vw;
- bottom: 5vw;
- z-index:3;
- border: 2px solid #000;
- box-shadow: 0px 5px 10px #000;
- z-index: 10;
- }
- #content2 {
- background-color: #4c4c4c;
- width: 24vw;
- height: 34vw;
- margin:auto;
- position: absolute;
- padding: 5px;
- font-family: 'Comfortaa', cursive;
- font-size: 15px;
- color: #000;
- right: 0.3vw;
- bottom: 0.3vw;
- z-index:4;
- border: 2px solid #000;
- }
- h1{
- background: url('https://i.ibb.co/MZZ4V0M/4.jpg');
- background-size: cover;
- background-position: center;
- text-align: center;
- border: 2px solid #000;
- border-radius: 15px;
- font-size: 30px;
- font-family: 'Cinzel', cursive;
- color: #000;
- text-shadow: 1px 1px 0 #c0c0c0, -1px -1px 0 #c0c0c0, -1px 1px 0 #c0c0c0, 1px -1px 0 #c0c0c0;
- line-height: 2;
- }
- h2{
- background: url('https://i.ibb.co/5rw79rt/3.jpg');
- background-size: cover;
- background-position: center;
- text-align: center;
- border: 2px solid #000;
- border-radius: 15px;
- font-size: 30px;
- font-family: 'Cinzel', cursive;
- color: #000;
- text-shadow: 1px 1px 0 #c0c0c0, -1px -1px 0 #c0c0c0, -1px 1px 0 #c0c0c0, 1px -1px 0 #c0c0c0;
- line-height: 2;
- }
- h3{
- background: url('https://i.ibb.co/M6Qx35M/1.jpg');
- background-size: cover;
- background-position: center;
- text-align: center;
- border: 2px solid #000;
- border-radius: 15px;
- font-size: 30px;
- font-family: 'Cinzel', cursive;
- color: #000;
- text-shadow: 1px 1px 0 #c0c0c0, -1px -1px 0 #c0c0c0, -1px 1px 0 #c0c0c0, 1px -1px 0 #c0c0c0;
- line-height: 2;
- }
- h4{
- background: url('https://i.ibb.co/XbyZWmH/2.jpg');
- background-size: cover;
- background-position: center;
- text-align: center;
- border: 2px solid #000;
- border-radius: 15px;
- font-size: 30px;
- font-family: 'Cinzel', cursive;
- color: #000;
- text-shadow: 1px 1px 0 #c0c0c0, -1px -1px 0 #c0c0c0, -1px 1px 0 #c0c0c0, 1px -1px 0 #c0c0c0;
- line-height: 2;
- }
- a {text-decoration: none; color: #111;}
- i {color: #ac94b7; font-weight: bold;}
- b {color: #57738c;}
- .credit{
- position: fixed;
- bottom: 0px;
- left: 2px;
- height: 25px;
- width: 25px;
- line-height: 15px;
- font-size: 10px;
- color: #000;
- text-align: center;
- font-family: roboto;
- }
- #Layout {position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px;}
- </style>
- <div id="Layout" oncontextmenu="return false;">
- <div class="credit" title="Profile by RageQxeen">♛</div>
- <!--
- <div class="fade"></div>
- -->
- <div id="image"></div>
- <div id="container">
- <div id="content">
- <div style="width: 24vw; height: 34vw; overflow-y: hidden;">
- <a name="one"></a>
- <div style="width: 24vw; height: 34vw; overflow: auto;">
- <h4>Out of Character</h4>
- <center><b>00</b>. Want a code? Go <a href="https://rageqxeen.neocities.org/vw_codes/rageqxeen.html">here</a>. Refrain from stealing.</center><br><br>
- </div>
- </div>
- </div>
- </div>
- <div id="container2">
- <div id="content2">
- <div style="width: 24vw; height: 34vw; overflow-y: hidden;">
- <a name="one"></a>
- <div style="width: 24vw; height: 34vw; overflow: auto;">
- <h1>Dossier</h1>
- <font style=float:left><b>Name</b></font> <font style=float:right> </font><br>
- <font style=float:left><b>Moniker</b></font> <font style=float:right><a title=" ">hover</a></font><br>
- <font style=float:left><b>Gender</b></font> <font style=float:right> </font><br>
- <font style=float:left><b>Apparent Age</b></font> <font style=float:right> </font><br>
- <font style=float:left><b>Race</b></font> <font style=float:right> </font><br>
- <font style=float:left><b>Height</b></font> <font style=float:right> </font><br>
- <font style=float:left><b>Marital</b></font> <font style=float:right><a href="https://roleplay.chat/profile.php?user=" target="_blank">Disinterest</a></font><br>
- <font style=float:left><b>Orientation</b></font> <font style=float:right> </font><br><br>
- <h2>History</h2>
- <h3>Powers</h3>
- </div>
- </div>
- </div>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement