RageQxeen

PunkBoi

Aug 11th, 2022
29
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.88 KB | None | 0 0
  1. <html>
  2. <body>
  3. <script defer>
  4. window.onload = function() {
  5. var isCtrl = false;
  6. document.onkeyup=function(e)
  7. {
  8. if(e.which == 17)
  9. isCtrl=false;
  10. }
  11. document.onkeydown=function(e)
  12. {
  13. if(e.which == 17)
  14. isCtrl=true;
  15. if((e.which == 85) || (e.which == 67) && (isCtrl == true))
  16. {
  17. return false;
  18. }
  19. }
  20. var isNS = (navigator.appName == "Netscape") ? 1 : 0;
  21. if(navigator.appName == "Netscape") document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP);
  22. function mischandler(){
  23. return false;
  24. }
  25. function mousehandler(e){
  26. var myevent = (isNS) ? e : event;
  27. var eventbutton = (isNS) ? myevent.which : myevent.button;
  28. if((eventbutton==2)||(eventbutton==3)) return false;
  29. }
  30. document.oncontextmenu = mischandler;
  31. document.onmousedown = mousehandler;
  32. document.onmouseup = mousehandler;
  33.  
  34. if (document.addEventListener) { // IE >= 9; other browsers
  35. document.addEventListener('contextmenu', function(e) {
  36. alert(" Try asking RageQxeen for her codes instead."); //here you draw your own menu
  37. e.preventDefault();
  38. }, false);
  39. } else { // IE < 9
  40. document.attachEvent('oncontextmenu', function() {
  41. alert("O sun, abide to death.");
  42. window.event.returnValue = false;
  43. });
  44. }
  45. };
  46. </script>
  47. <style type="text/css">
  48.  
  49. @import url(https://fonts.googleapis.com/css?family=Rubik+Dirt|Albereto|Bebas+Neue|);
  50.  
  51. html, body {
  52. background-color: #663538;
  53. background-image: url("https://www.transparenttextures.com/patterns/diagmonds.png");
  54. }
  55.  
  56. ::-webkit-scrollbar-button:vertical:{
  57. background-color: #transparent;}
  58.  
  59. ::-webkit-scrollbar-thumb:vertical {
  60. background-color:#transparent;
  61. height:150px;}
  62.  
  63. ::-webkit-scrollbar-thumb:horizontal {
  64. background-color:#transparent;
  65. height:60px;}
  66.  
  67.  
  68. ::-webkit-scrollbar {
  69. height:60px;
  70. width:5px;
  71. background-color:#transparent;}
  72.  
  73. #image {
  74. width: 20vw;
  75. margin: 0px;
  76. border: none;
  77. height: 38vw;
  78. background-color:transparent;
  79. position: absolute;
  80. right: 39vw;
  81. bottom: -18vw;
  82. background-image:url("https://i.ibb.co/f0Lgfjr/80.webp");
  83. background-repeat:no-repeat;
  84. background-position: center;
  85. background-size: 100%;
  86. z-index: 5;
  87. }
  88.  
  89. #icon {
  90. width: 150px;
  91. margin: 0px;
  92. border: none;
  93. height: 150px;
  94. background-color:transparent;
  95. position: absolute;
  96. background-image:url("https://i.ibb.co/H7fstzr/81.webp");
  97. background-repeat:no-repeat;
  98. background-position: center;
  99. background-size: cover;
  100. border-radius: 100%;
  101. z-index: 11;
  102. -webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 8s both;
  103. animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 8s both;
  104. }
  105.  
  106. #icon2 {
  107. width: 150px;
  108. margin: 0px;
  109. border: none;
  110. height: 150px;
  111. background-color:transparent;
  112. position: absolute;
  113. background-image:url("https://i.ibb.co/kXTT8mS/82.jpg");
  114. background-repeat:no-repeat;
  115. background-position: center;
  116. background-size: cover;
  117. border-radius: 100%;
  118. z-index: 11;
  119. -webkit-animation: slide-in-top 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) 8s both;
  120. animation: slide-in-top 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) 8s both;
  121. }
  122.  
  123. #icon3 {
  124. width: 150px;
  125. margin: 0px;
  126. border: none;
  127. height: 150px;
  128. background-color:transparent;
  129. position: absolute;
  130. background-image:url("https://i.ibb.co/tJZqmjX/83.jpg");
  131. background-repeat:no-repeat;
  132. background-position: center;
  133. background-size: cover;
  134. border-radius: 100%;
  135. z-index: 11;
  136. -webkit-animation: slide-in-top 1.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 8s both;
  137. animation: slide-in-top 1.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 8s both;
  138. }
  139.  
  140. #icon4 {
  141. width: 150px;
  142. margin: 0px;
  143. border: none;
  144. height: 150px;
  145. background-color:transparent;
  146. position: absolute;
  147. background-image:url("https://cdn.donmai.us/original/41/8c/418caff2fe8f54f2606ecbcbf21d5c69.jpg");
  148. background-repeat:no-repeat;
  149. background-position: center;
  150. background-size: cover;
  151. border-radius: 100%;
  152. z-index: 11;
  153. -webkit-animation: slide-in-top 1.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) 8s both;
  154. animation: slide-in-top 1.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) 8s both;
  155. }
  156.  
  157. #bar {
  158. background-color:#69626d;
  159. width: 99.5vw;
  160. height: 10vw;
  161. margin:auto;
  162. position: absolute;
  163. padding: 5px;
  164. left: 0vw;
  165. bottom: 20vw;
  166. z-index:1;
  167. box-shadow: 0px 5px 10px #000;
  168. background-image: url("https://wallpaperaccess.com/full/5909827.jpg");
  169. background-size: fill;
  170. background-position: center;
  171. z-index: 1;
  172. }
  173.  
  174. #nav {
  175. background-color: transparent;
  176. width: 90vw;
  177. height: 5px;
  178. margin:auto;
  179. position: absolute;
  180. left: 0vw;
  181. top: -10vw;
  182. text-align: center;
  183. z-index: 10;
  184. }
  185.  
  186. #nav a, #nav a:link, #nav a:visited {
  187. display:inline-block;
  188. background: #332628;
  189. color: #332628;
  190. margin-top: 0px;
  191. margin-bottom: 0px;
  192. margin-left: 10vw;
  193. height: 150px;
  194. width: 150px;
  195. border-radius: 100%;
  196. box-shadow: 5px 5px 25px #FF3131;
  197. -webkit-transition: 0.5s linear;
  198. -moz-transition: 0.5s linear;
  199. -o-transition: 0.5s linear;
  200. transition: 0.5s linear;
  201. }
  202.  
  203. #nav a:active, #nav a:hover {
  204. display:inline-block;
  205. height: 150px;
  206. width: 150px;
  207. border-radius: 100%;
  208. text-decoration:none;
  209. background: rgb(0,0,0,0.4);
  210. color: rgb(0,0,0,0.4);
  211. margin-left: 10vw;
  212. box-shadow: 0px 0px 5px #660000;
  213. -webkit-transition: 0.5s linear;
  214. -moz-transition: 0.5s linear;
  215. -o-transition: 0.5s linear;
  216. transition: 0.5s linear;
  217. }
  218.  
  219. #box {
  220. background-color: rgb(0,0,0,0.8);
  221. width: 23vw;
  222. height: 27vw;
  223. margin:auto;
  224. position: absolute;
  225. padding: 10px;
  226. font-family: 'Rubik Dirt', cursive;
  227. font-size: 20px;
  228. color:#fff;
  229. opacity: 0.98;
  230. left: 15vw;
  231. bottom: 3vw;
  232. z-index: 5;
  233. border: #fff solid 2px;
  234. -webkit-animation: slit-in-horizontal 0.2s ease-in-out 10s both;
  235. animation: slit-in-horizontal 0.2s ease-in-out 10s both;
  236. }
  237.  
  238. #box2 {
  239. background-color: rgb(0,0,0,0.8);
  240. width: 23vw;
  241. height: 27vw;
  242. margin:auto;
  243. position: absolute;
  244. padding: 10px;
  245. font-family: 'Rubik Dirt', cursive;
  246. font-size: 20px;
  247. color:#fff;
  248. opacity: 0.98;
  249. right: 13vw;
  250. bottom: 3vw;
  251. z-index: 5;
  252. border: #fff solid 2px;
  253. -webkit-animation: slit-in-horizontal 0.2s ease-in-out 10s both;
  254. animation: slit-in-horizontal 0.2s ease-in-out 10s both;
  255. }
  256.  
  257. #editthis{
  258. position:fixed;
  259. height: 27px;
  260. width: 30px;
  261. bottom: 20vw;
  262. left: 1vw;
  263. margin: auto;
  264. border-radius: 50%;
  265. z-index:99;
  266. }
  267.  
  268. #music1{
  269. position:fixed;
  270. padding:2px;
  271. -webkit-transition: all 0.5s ease-in-out;
  272. -moz-transition: all 0.5s ease-in-out;
  273. -o-transition: all 0.5s ease-in-out;
  274. }
  275.  
  276. #music1:hover #music2{
  277. opacity: 0;
  278. margin-top:-20px;
  279. z-index:-1;
  280. }
  281.  
  282. #music1:hover #music3{
  283. opacity: .5;
  284. margin-top:-5px;
  285. z-index:99;
  286. }
  287.  
  288. #music1:hover #musiclist{
  289. opacity: .5;
  290. }
  291.  
  292. #music2{
  293. opacity: .5;
  294. background-color:#000000;
  295. padding:6px;
  296. border-radius: 50%;
  297. -webkit-transition: all 0.5s ease-in-out;
  298. -moz-transition: all 0.5s ease-in-out;
  299. -o-transition: all 0.5s ease-in-out;
  300. }
  301.  
  302. #music3{
  303. opacity: 0;
  304. position:fixed;
  305. background-color:#000000;
  306. background-image: url('https://www.freepnglogos.com/uploads/play-button-png/index-media-cover-art-play-button-overlay-5.png');
  307. background-repeat: no-repeat;
  308. background-size: 25px;
  309. border:1px dotted #b3b3e5;
  310. border-radius: 50%;
  311. width:25px;
  312. height:25px;
  313. z-index:99
  314. margin-left:0px;
  315. overflow:hidden;
  316. -webkit-transition: all 0.5s ease-in-out;
  317. -moz-transition: all 0.5s ease-in-out;
  318. -o-transition: all 0.5s ease-in-out;
  319. }
  320.  
  321. @-webkit-keyframes slit-in-horizontal {
  322. 0% {
  323. -webkit-transform: translateZ(-800px) rotateX(90deg);
  324. transform: translateZ(-800px) rotateX(90deg);
  325. opacity: 0;
  326. }
  327. 54% {
  328. -webkit-transform: translateZ(-160px) rotateX(87deg);
  329. transform: translateZ(-160px) rotateX(87deg);
  330. opacity: 1;
  331. }
  332. 100% {
  333. -webkit-transform: translateZ(0) rotateX(0);
  334. transform: translateZ(0) rotateX(0);
  335. }
  336. }
  337. @keyframes slit-in-horizontal {
  338. 0% {
  339. -webkit-transform: translateZ(-800px) rotateX(90deg);
  340. transform: translateZ(-800px) rotateX(90deg);
  341. opacity: 0;
  342. }
  343. 54% {
  344. -webkit-transform: translateZ(-160px) rotateX(87deg);
  345. transform: translateZ(-160px) rotateX(87deg);
  346. opacity: 1;
  347. }
  348. 100% {
  349. -webkit-transform: translateZ(0) rotateX(0);
  350. transform: translateZ(0) rotateX(0);
  351. }
  352. }
  353.  
  354. @-webkit-keyframes slide-in-top {
  355. 0% {
  356. -webkit-transform: translateY(-1000px);
  357. transform: translateY(-1000px);
  358. opacity: 0;
  359. }
  360. 100% {
  361. -webkit-transform: translateY(0);
  362. transform: translateY(0);
  363. opacity: 1;
  364. }
  365. }
  366. @keyframes slide-in-top {
  367. 0% {
  368. -webkit-transform: translateY(-1000px);
  369. transform: translateY(-1000px);
  370. opacity: 0;
  371. }
  372. 100% {
  373. -webkit-transform: translateY(0);
  374. transform: translateY(0);
  375. opacity: 1;
  376. }
  377. }
  378.  
  379. i{color: #FFFFF0;}
  380. b{color: #f3f3f3;}
  381. a{color: #FAF9F6; text-decoration: none;}
  382. h1{border-bottom: 1px solid #c4c4c4; text-align: left; font-size: 35px; font-family: 'Bebas Neue', cursive; color: #fff;}
  383. h2{border-bottom: 1px solid #c4c4c4; text-align: right; font-size: 35px; font-family: 'Bebas Neue', cursive; color: #fff;}
  384. </style>
  385. <div id="bar">
  386.  
  387. <div id="editthis"><div id="music1"><div id="music2">
  388. <img src="http://38.media.tumblr.com/tumblr_m7w2py1dEP1r6o8v2.gif" style="opacity: 0.8;"></div>
  389. <div id="music3"><Div style="margin-top:4px;">
  390. <audio controls style="opacity: 0;"><source src="KIWILINKHERE/MP4LINKHERE"></audio>
  391. </div></div></div></div>
  392.  
  393. <div id="image"></div>
  394.  
  395. <div id="nav">
  396. <a href="#two"><div id="icon"></div></a>
  397. <a href="#one"><div id="icon2"></div></a>
  398. <a href="#four"><div id="icon3"></div></a>
  399. <a href="#three"><div id="icon4"></div></a>
  400. </div>
  401.  
  402. </div>
  403. <div id="box">
  404.  
  405.  
  406. <div style="width: 23vw; height: 27vw; overflow-y: hidden;">
  407.  
  408. <a name="one"></a>
  409. <div style="width: 23vw; height: 27vw; overflow: auto;" align="left">
  410. <h1>Character Card</h1>
  411. <span style="float:left;"><b>Name</b></span><span style="float:right;">NAME</span><br>
  412. <span style="float:left;"><b>Alias(es)</b></span><span style="float:right;"><a title="TITLES">hover</a></span><br>
  413. <span style="float:left;"><b>Gender</b></span><span style="float:right;">Male</span><br>
  414. <span style="float:left;"><b>Age</b></span><span style="float:right;">AGE</span><br>
  415. <span style="float:left;"><b>Race</b></span><span style="float:right;">RACE</span><br>
  416. <span style="float:left;"><b>Height</b></span><span style="float:right;">HEIGHT</span><br>
  417. <span style="float:left;"><b>Weight</b></span><span style="float:right;">WEIGHT</span><br>
  418. <span style="float:left;"><b>Eyes</b></span><span style="float:right;">HAIR</span><br>
  419. <span style="float:left;"><b>Hair</b></span><span style="float:right;">EYES</span><br>
  420. <span style="float:left;"><b>Build</b></span><span style="float:right;">BUILD</span><br><br>
  421. <span style="float:left;"><b>Orientation</b></span><span style="float:right;">SEXUALITY</span><br>
  422. <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>
  423. </div>
  424.  
  425. <div style="width: 23vw; height: 27vw; overflow-y: hidden;">
  426.  
  427. <a name="two"></a>
  428. <div style="width: 23vw; height: 27vw; overflow: auto;" align="left">
  429. <h2>Personality</h2>
  430.  
  431. <h1>Contact List</h1>
  432.  
  433. <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
  434. <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>
  435. <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>
  436. <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>
  437. <center><b>- Name -</b><br> <i>foe/friend/neutral</i> <br>small note.</center><br><br><br><br>
  438. </div>
  439. </div>
  440. </div>
  441. </div>
  442.  
  443. <div id="box2">
  444.  
  445.  
  446. <div style="width: 23vw; height: 27vw; overflow-y: hidden;">
  447.  
  448. <a name="three"></a>
  449. <div style="width: 23vw; height: 27vw; overflow: auto;" align="left">
  450. <h2>Abilities</h2>
  451.  
  452. <h1>Weapons</h1>
  453. </div>
  454.  
  455. <div style="width: 23vw; height: 27vw; overflow-y: hidden;">
  456.  
  457. <a name="four"></a>
  458. <div style="width: 23vw; height: 27vw; overflow: auto;" align="left">
  459. <h1>Out of Character</h1>
  460. <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>
  461. <b>01</b>. OOC<br>
  462. <b>02</b>. OOC<br>
  463. <b>03</b>. OOC<br>
  464. <b>04</b>. OOC<br>
  465. <b>05</b>. OOC<br>
  466. </div>
  467. </div>
  468. </div>
  469. </body>
  470. </html>
Add Comment
Please, Sign In to add comment