Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <body>
- <script defer>
- window.onload = function() {
- var isCtrl = false;
- document.onkeyup=function(e)
- {
- if(e.which == 17)
- isCtrl=false;
- }
- document.onkeydown=function(e)
- {
- if(e.which == 17)
- isCtrl=true;
- if((e.which == 85) || (e.which == 67) && (isCtrl == true))
- {
- return false;
- }
- }
- var isNS = (navigator.appName == "Netscape") ? 1 : 0;
- if(navigator.appName == "Netscape") document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP);
- function mischandler(){
- return false;
- }
- function mousehandler(e){
- var myevent = (isNS) ? e : event;
- var eventbutton = (isNS) ? myevent.which : myevent.button;
- if((eventbutton==2)||(eventbutton==3)) return false;
- }
- document.oncontextmenu = mischandler;
- document.onmousedown = mousehandler;
- document.onmouseup = mousehandler;
- if (document.addEventListener) { // IE >= 9; other browsers
- document.addEventListener('contextmenu', function(e) {
- alert(" Try asking RageQxeen for her codes instead."); //here you draw your own menu
- e.preventDefault();
- }, false);
- } else { // IE < 9
- document.attachEvent('oncontextmenu', function() {
- alert("O sun, abide to death.");
- window.event.returnValue = false;
- });
- }
- };
- </script>
- <style type="text/css">
- @import url(https://fonts.googleapis.com/css?family=Rubik+Dirt|Albereto|Bebas+Neue|);
- html, body {
- background-color: #663538;
- background-image: url("https://www.transparenttextures.com/patterns/diagmonds.png");
- }
- ::-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: 20vw;
- margin: 0px;
- border: none;
- height: 38vw;
- background-color:transparent;
- position: absolute;
- right: 39vw;
- bottom: -18vw;
- background-image:url("https://i.ibb.co/f0Lgfjr/80.webp");
- background-repeat:no-repeat;
- background-position: center;
- background-size: 100%;
- z-index: 5;
- }
- #icon {
- width: 150px;
- margin: 0px;
- border: none;
- height: 150px;
- background-color:transparent;
- position: absolute;
- background-image:url("https://i.ibb.co/H7fstzr/81.webp");
- background-repeat:no-repeat;
- background-position: center;
- background-size: cover;
- border-radius: 100%;
- z-index: 11;
- -webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 8s both;
- animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 8s both;
- }
- #icon2 {
- width: 150px;
- margin: 0px;
- border: none;
- height: 150px;
- background-color:transparent;
- position: absolute;
- background-image:url("https://i.ibb.co/kXTT8mS/82.jpg");
- background-repeat:no-repeat;
- background-position: center;
- background-size: cover;
- border-radius: 100%;
- z-index: 11;
- -webkit-animation: slide-in-top 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) 8s both;
- animation: slide-in-top 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) 8s both;
- }
- #icon3 {
- width: 150px;
- margin: 0px;
- border: none;
- height: 150px;
- background-color:transparent;
- position: absolute;
- background-image:url("https://i.ibb.co/tJZqmjX/83.jpg");
- background-repeat:no-repeat;
- background-position: center;
- background-size: cover;
- border-radius: 100%;
- z-index: 11;
- -webkit-animation: slide-in-top 1.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 8s both;
- animation: slide-in-top 1.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 8s both;
- }
- #icon4 {
- width: 150px;
- margin: 0px;
- border: none;
- height: 150px;
- background-color:transparent;
- position: absolute;
- background-image:url("https://cdn.donmai.us/original/41/8c/418caff2fe8f54f2606ecbcbf21d5c69.jpg");
- background-repeat:no-repeat;
- background-position: center;
- background-size: cover;
- border-radius: 100%;
- z-index: 11;
- -webkit-animation: slide-in-top 1.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) 8s both;
- animation: slide-in-top 1.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) 8s both;
- }
- #bar {
- background-color:#69626d;
- width: 99.5vw;
- height: 10vw;
- margin:auto;
- position: absolute;
- padding: 5px;
- left: 0vw;
- bottom: 20vw;
- z-index:1;
- box-shadow: 0px 5px 10px #000;
- background-image: url("https://wallpaperaccess.com/full/5909827.jpg");
- background-size: fill;
- background-position: center;
- z-index: 1;
- }
- #nav {
- background-color: transparent;
- width: 90vw;
- height: 5px;
- margin:auto;
- position: absolute;
- left: 0vw;
- top: -10vw;
- text-align: center;
- z-index: 10;
- }
- #nav a, #nav a:link, #nav a:visited {
- display:inline-block;
- background: #332628;
- color: #332628;
- margin-top: 0px;
- margin-bottom: 0px;
- margin-left: 10vw;
- height: 150px;
- width: 150px;
- border-radius: 100%;
- box-shadow: 5px 5px 25px #FF3131;
- -webkit-transition: 0.5s linear;
- -moz-transition: 0.5s linear;
- -o-transition: 0.5s linear;
- transition: 0.5s linear;
- }
- #nav a:active, #nav a:hover {
- display:inline-block;
- height: 150px;
- width: 150px;
- border-radius: 100%;
- text-decoration:none;
- background: rgb(0,0,0,0.4);
- color: rgb(0,0,0,0.4);
- margin-left: 10vw;
- box-shadow: 0px 0px 5px #660000;
- -webkit-transition: 0.5s linear;
- -moz-transition: 0.5s linear;
- -o-transition: 0.5s linear;
- transition: 0.5s linear;
- }
- #box {
- background-color: rgb(0,0,0,0.8);
- width: 23vw;
- height: 27vw;
- margin:auto;
- position: absolute;
- padding: 10px;
- font-family: 'Rubik Dirt', cursive;
- font-size: 20px;
- color:#fff;
- opacity: 0.98;
- left: 15vw;
- bottom: 3vw;
- z-index: 5;
- border: #fff solid 2px;
- -webkit-animation: slit-in-horizontal 0.2s ease-in-out 10s both;
- animation: slit-in-horizontal 0.2s ease-in-out 10s both;
- }
- #box2 {
- background-color: rgb(0,0,0,0.8);
- width: 23vw;
- height: 27vw;
- margin:auto;
- position: absolute;
- padding: 10px;
- font-family: 'Rubik Dirt', cursive;
- font-size: 20px;
- color:#fff;
- opacity: 0.98;
- right: 13vw;
- bottom: 3vw;
- z-index: 5;
- border: #fff solid 2px;
- -webkit-animation: slit-in-horizontal 0.2s ease-in-out 10s both;
- animation: slit-in-horizontal 0.2s ease-in-out 10s both;
- }
- #editthis{
- position:fixed;
- height: 27px;
- width: 30px;
- bottom: 20vw;
- left: 1vw;
- margin: auto;
- border-radius: 50%;
- z-index:99;
- }
- #music1{
- position:fixed;
- padding:2px;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- }
- #music1:hover #music2{
- opacity: 0;
- margin-top:-20px;
- z-index:-1;
- }
- #music1:hover #music3{
- opacity: .5;
- margin-top:-5px;
- z-index:99;
- }
- #music1:hover #musiclist{
- opacity: .5;
- }
- #music2{
- opacity: .5;
- background-color:#000000;
- padding:6px;
- border-radius: 50%;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- }
- #music3{
- opacity: 0;
- position:fixed;
- background-color:#000000;
- background-image: url('https://www.freepnglogos.com/uploads/play-button-png/index-media-cover-art-play-button-overlay-5.png');
- background-repeat: no-repeat;
- background-size: 25px;
- border:1px dotted #b3b3e5;
- border-radius: 50%;
- width:25px;
- height:25px;
- z-index:99
- margin-left:0px;
- 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;
- }
- @-webkit-keyframes slit-in-horizontal {
- 0% {
- -webkit-transform: translateZ(-800px) rotateX(90deg);
- transform: translateZ(-800px) rotateX(90deg);
- opacity: 0;
- }
- 54% {
- -webkit-transform: translateZ(-160px) rotateX(87deg);
- transform: translateZ(-160px) rotateX(87deg);
- opacity: 1;
- }
- 100% {
- -webkit-transform: translateZ(0) rotateX(0);
- transform: translateZ(0) rotateX(0);
- }
- }
- @keyframes slit-in-horizontal {
- 0% {
- -webkit-transform: translateZ(-800px) rotateX(90deg);
- transform: translateZ(-800px) rotateX(90deg);
- opacity: 0;
- }
- 54% {
- -webkit-transform: translateZ(-160px) rotateX(87deg);
- transform: translateZ(-160px) rotateX(87deg);
- opacity: 1;
- }
- 100% {
- -webkit-transform: translateZ(0) rotateX(0);
- transform: translateZ(0) rotateX(0);
- }
- }
- @-webkit-keyframes slide-in-top {
- 0% {
- -webkit-transform: translateY(-1000px);
- transform: translateY(-1000px);
- opacity: 0;
- }
- 100% {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- opacity: 1;
- }
- }
- @keyframes slide-in-top {
- 0% {
- -webkit-transform: translateY(-1000px);
- transform: translateY(-1000px);
- opacity: 0;
- }
- 100% {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- opacity: 1;
- }
- }
- i{color: #FFFFF0;}
- b{color: #f3f3f3;}
- a{color: #FAF9F6; text-decoration: none;}
- h1{border-bottom: 1px solid #c4c4c4; text-align: left; font-size: 35px; font-family: 'Bebas Neue', cursive; color: #fff;}
- h2{border-bottom: 1px solid #c4c4c4; text-align: right; font-size: 35px; font-family: 'Bebas Neue', cursive; color: #fff;}
- </style>
- <div id="bar">
- <div id="editthis"><div id="music1"><div id="music2">
- <img src="http://38.media.tumblr.com/tumblr_m7w2py1dEP1r6o8v2.gif" style="opacity: 0.8;"></div>
- <div id="music3"><Div style="margin-top:4px;">
- <audio controls style="opacity: 0;"><source src="KIWILINKHERE/MP4LINKHERE"></audio>
- </div></div></div></div>
- <div id="image"></div>
- <div id="nav">
- <a href="#two"><div id="icon"></div></a>
- <a href="#one"><div id="icon2"></div></a>
- <a href="#four"><div id="icon3"></div></a>
- <a href="#three"><div id="icon4"></div></a>
- </div>
- </div>
- <div id="box">
- <div style="width: 23vw; height: 27vw; overflow-y: hidden;">
- <a name="one"></a>
- <div style="width: 23vw; height: 27vw; overflow: auto;" align="left">
- <h1>Character Card</h1>
- <span style="float:left;"><b>Name</b></span><span style="float:right;">NAME</span><br>
- <span style="float:left;"><b>Alias(es)</b></span><span style="float:right;"><a title="TITLES">hover</a></span><br>
- <span style="float:left;"><b>Gender</b></span><span style="float:right;">Male</span><br>
- <span style="float:left;"><b>Age</b></span><span style="float:right;">AGE</span><br>
- <span style="float:left;"><b>Race</b></span><span style="float:right;">RACE</span><br>
- <span style="float:left;"><b>Height</b></span><span style="float:right;">HEIGHT</span><br>
- <span style="float:left;"><b>Weight</b></span><span style="float:right;">WEIGHT</span><br>
- <span style="float:left;"><b>Eyes</b></span><span style="float:right;">HAIR</span><br>
- <span style="float:left;"><b>Hair</b></span><span style="float:right;">EYES</span><br>
- <span style="float:left;"><b>Build</b></span><span style="float:right;">BUILD</span><br><br>
- <span style="float:left;"><b>Orientation</b></span><span style="float:right;">SEXUALITY</span><br>
- <span style="float:left;"><b>Relationship</b></span><span style="float:right;"><a href="LINK TO PROFILE" target="_blank">NAME OF CHARACTER</a></span><br>
- </div>
- <div style="width: 23vw; height: 27vw; overflow-y: hidden;">
- <a name="two"></a>
- <div style="width: 23vw; height: 27vw; overflow: auto;" align="left">
- <h2>Personality</h2>
- <h1>Contact List</h1>
- <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
- <center><b>- Name -</b><br> <i>foe/friend/neutral</i> <br>small note.</center><br><br><br><br><a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
- <center><b>- Name -</b><br> <i>foe/friend/neutral</i> <br>small note.</center><br><br><br><br><a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
- <center><b>- Name -</b><br> <i>foe/friend/neutral</i> <br>small note.</center><br><br><br><br><a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
- <center><b>- Name -</b><br> <i>foe/friend/neutral</i> <br>small note.</center><br><br><br><br>
- </div>
- </div>
- </div>
- </div>
- <div id="box2">
- <div style="width: 23vw; height: 27vw; overflow-y: hidden;">
- <a name="three"></a>
- <div style="width: 23vw; height: 27vw; overflow: auto;" align="left">
- <h2>Abilities</h2>
- <h1>Weapons</h1>
- </div>
- <div style="width: 23vw; height: 27vw; overflow-y: hidden;">
- <a name="four"></a>
- <div style="width: 23vw; height: 27vw; overflow: auto;" align="left">
- <h1>Out of Character</h1>
- <center><b>00</b>. Code made by <a href="https://rageqxeen.neocities.org/vw_codes/rageqxeen.html" target="_blank">RageQxeen</a>, do not steal.<br></center>
- <b>01</b>. OOC<br>
- <b>02</b>. OOC<br>
- <b>03</b>. OOC<br>
- <b>04</b>. OOC<br>
- <b>05</b>. OOC<br>
- </div>
- </div>
- </div>
- </body>
- </html>
Add Comment
Please, Sign In to add comment