API tools faq
paste
RageQxeen

Two Page Code

RageQxeen
Aug 7th, 2020
57
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.79 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <body>
  3. <script>
  4. $ = function(id) {
  5. return document.getElementById(id);
  6. }
  7.  
  8. var show = function(id) {
  9. $(id).style.display ='block';
  10. }
  11. var hide = function(id) {
  12. $(id).style.display ='none';
  13. }
  14. </script>
  15. <script defer>
  16. window.onload = function() {
  17. var isCtrl = false;
  18. document.onkeyup=function(e)
  19. {
  20. if(e.which == 17)
  21. isCtrl=false;
  22. }
  23. document.onkeydown=function(e)
  24. {
  25. if(e.which == 17)
  26. isCtrl=true;
  27. if((e.which == 85) || (e.which == 67) && (isCtrl == true))
  28. {
  29. return false;
  30. }
  31. }
  32. var isNS = (navigator.appName == "Netscape") ? 1 : 0;
  33. if(navigator.appName == "Netscape") document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP);
  34. function mischandler(){
  35. return false;
  36. }
  37. function mousehandler(e){
  38. var myevent = (isNS) ? e : event;
  39. var eventbutton = (isNS) ? myevent.which : myevent.button;
  40. if((eventbutton==2)||(eventbutton==3)) return false;
  41. }
  42. document.oncontextmenu = mischandler;
  43. document.onmousedown = mousehandler;
  44. document.onmouseup = mousehandler;
  45.  
  46. if (document.addEventListener) { // IE >= 9; other browsers
  47. document.addEventListener('contextmenu', function(e) {
  48. alert(" Try asking RageQxeen for her codes instead."); //here you draw your own menu
  49. e.preventDefault();
  50. }, false);
  51. } else { // IE < 9
  52. document.attachEvent('oncontextmenu', function() {
  53. alert("O sun, abide to death.");
  54. window.event.returnValue = false;
  55. });
  56. }
  57. };
  58. </script>
  59. <style type="text/css">
  60.  
  61. @import url('https://fonts.googleapis.com/css?family=VT323|Cinzel+Decorative|Lora');
  62.  
  63. html, body {
  64. background-color: #000000;
  65. background-image: url("http://i.picpar.com/Gnle.gif");
  66. background-size: 600px;
  67. background-repeat: no-repeat;
  68. background-position:center top;
  69. }
  70.  
  71. ::-webkit-scrollbar-button:vertical:{
  72. background-color: #transparent;}
  73.  
  74. ::-webkit-scrollbar-thumb:vertical {
  75. background-color:#transparent;
  76. height:150px;}
  77.  
  78. ::-webkit-scrollbar-thumb:horizontal {
  79. background-color:#transparent;
  80. height:60px;}
  81.  
  82.  
  83. ::-webkit-scrollbar {
  84. height:60px;
  85. width:5px;
  86. background-color:#transparent;}
  87.  
  88. #image {
  89. width: 25vw;
  90. margin: 0px;
  91. border: none;
  92. height: 30vw;
  93. background-color:transparent;
  94. position: absolute;
  95. right: 40vw;
  96. bottom: 0vw;
  97. background-image:url("http://i.picpar.com/sNJe.jpg");
  98. background-repeat:no-repeat;
  99. background-position: bottom;
  100. background-size: 100%;
  101. }
  102.  
  103. #image:hover {
  104. background-image:url("http://i.picpar.com/tNJe.jpg");
  105. background-repeat:no-repeat;
  106. background-position: bottom;
  107. background-size: 100%;
  108. -webkit-transition: 0.5s linear;
  109. -moz-transition: 0.5s linear;
  110. -o-transition: 0.5s linear;
  111. transition: 0.5s linear;
  112. }
  113.  
  114. #image2 {
  115. width: 20vw;
  116. margin: 0px;
  117. border: none;
  118. height: 40vw;
  119. background-color:transparent;
  120. position: absolute;
  121. left: 20vw;
  122. bottom: 0vw;
  123. background-image:url("http://i.picpar.com/X7Le.png");
  124. background-repeat:no-repeat;
  125. background-position: bottom;
  126. background-size: 100%;
  127. z-index: 101;
  128. }
  129.  
  130. .line1 {
  131. position: absolute;
  132. bottom: 22vw;
  133. left: 38vw;
  134. width: 117px;
  135. height: 2px;
  136. background-color: #fff;
  137. transform: rotate(45deg);
  138. z-index: 2;
  139. }
  140.  
  141. .line2 {
  142. position: absolute;
  143. bottom: 22vw;
  144. right: 43vw;
  145. width: 120px;
  146. height: 2px;
  147. background-color: #fff;
  148. transform: rotate(-45deg);
  149. z-index: 2;
  150. }
  151.  
  152. .line3 {
  153. position: absolute;
  154. bottom: 15vw;
  155. right: 37.5vw;
  156. width: 120px;
  157. height: 2px;
  158. background-color: #fff;
  159. z-index: 2;
  160. }
  161.  
  162. .line4 {
  163. position: absolute;
  164. bottom: 15vw;
  165. left: 32.5vw;
  166. width: 120px;
  167. height: 2px;
  168. background-color: #fff;
  169. z-index: 2;
  170. }
  171.  
  172. #dossier {
  173. background-color: #000;
  174. background-image: url("https://www.transparenttextures.com/patterns/noise-lines.png");
  175. width: 13vw;
  176. height: 15vw;
  177. margin:auto;
  178. position: absolute;
  179. padding: 10px;
  180. font-family: 'VT323', cursive;
  181. font-size: 20px;
  182. color:#fff;
  183. opacity: 0.98;
  184. left: 24.8vw;
  185. bottom: 24.1vw;
  186. z-index:1;
  187. border: #fff solid 2px;
  188. -webkit-animation: slit-in-horizontal 0.45s ease-out 2s both;
  189. animation: slit-in-horizontal 0.45s ease-out 2s both;
  190. }
  191.  
  192. #additional {
  193. background-color: #000;
  194. background-image: url("https://www.transparenttextures.com/patterns/noise-lines.png");
  195. width: 13vw;
  196. height: 15vw;
  197. margin:auto;
  198. position: absolute;
  199. padding: 10px;
  200. font-family: 'VT323', cursive;
  201. font-size: 20px;
  202. color:#fff;
  203. opacity: 0.98;
  204. right: 29.8vw;
  205. bottom: 24.1vw;
  206. z-index:1;
  207. border: #fff solid 2px;
  208. -webkit-animation: slit-in-horizontal 0.45s ease-out 2.5s both;
  209. animation: slit-in-horizontal 0.45s ease-out 2.5s both;
  210. }
  211.  
  212. #friends {
  213. background-color: #000;
  214. background-image: url("https://www.transparenttextures.com/patterns/noise-lines.png");
  215. width: 21vw;
  216. height: 13vw;
  217. margin:auto;
  218. position: absolute;
  219. padding: 10px;
  220. font-family: 'VT323', cursive;
  221. font-size: 20px;
  222. color:#fff;
  223. opacity: 0.98;
  224. left: 10.3vw;
  225. bottom: 7vw;
  226. z-index:1;
  227. border: #fff solid 2px;
  228. -webkit-animation: slit-in-horizontal 0.45s ease-out 3s both;
  229. animation: slit-in-horizontal 0.45s ease-out 3s both;
  230. }
  231.  
  232. #ooc {
  233. background-color: #000;
  234. background-image: url("https://www.transparenttextures.com/patterns/noise-lines.png");
  235. width: 21vw;
  236. height: 13vw;
  237. margin:auto;
  238. position: absolute;
  239. padding: 10px;
  240. font-family: 'VT323', cursive;
  241. font-size: 20px;
  242. color:#fff;
  243. opacity: 0.98;
  244. right: 15.2vw;
  245. bottom: 7vw;
  246. z-index:1;
  247. border: #fff solid 2px;
  248. -webkit-animation: slit-in-horizontal 0.45s ease-out 3.5s both;
  249. animation: slit-in-horizontal 0.45s ease-out 3.5s both;
  250. }
  251.  
  252. @-webkit-keyframes slit-in-horizontal {
  253. 0% {
  254. -webkit-transform: translateZ(-800px) rotateX(90deg);
  255. transform: translateZ(-800px) rotateX(90deg);
  256. opacity: 0;
  257. }
  258. 54% {
  259. -webkit-transform: translateZ(-160px) rotateX(87deg);
  260. transform: translateZ(-160px) rotateX(87deg);
  261. opacity: 1;
  262. }
  263. 100% {
  264. -webkit-transform: translateZ(0) rotateX(0);
  265. transform: translateZ(0) rotateX(0);
  266. }
  267. }
  268. @keyframes slit-in-horizontal {
  269. 0% {
  270. -webkit-transform: translateZ(-800px) rotateX(90deg);
  271. transform: translateZ(-800px) rotateX(90deg);
  272. opacity: 0;
  273. }
  274. 54% {
  275. -webkit-transform: translateZ(-160px) rotateX(87deg);
  276. transform: translateZ(-160px) rotateX(87deg);
  277. opacity: 1;
  278. }
  279. 100% {
  280. -webkit-transform: translateZ(0) rotateX(0);
  281. transform: translateZ(0) rotateX(0);
  282. }
  283. }
  284.  
  285. .beats { position: absolute;
  286. z-index:99;
  287. left: 15vw;
  288. top: 15vw;
  289. width: 50px; height: 50px;
  290. background-color: transparent;
  291. opacity: 1;
  292. z-index: 999;
  293. }
  294.  
  295. .beats img { position: absolute;
  296. right: 0; top: 0;
  297. left: 0; bottom: 0;
  298. margin: auto;
  299. width: 50px; height: 50px;
  300. }
  301.  
  302. .audio {
  303. width: 50px; height: 50px;
  304. margin-left: -8px;
  305. margin-top: -5px;
  306. overflow: hidden;
  307. opacity: 0;
  308. }
  309.  
  310. .name {position: absolute;
  311. font-family: 'VT323';
  312. color: #fff;
  313. font-size: 3vw;
  314. bottom: 1vw;
  315. right: 23.5vw;
  316. width: 43vw;
  317. height: 5vw;
  318. border: 0px solid #000;
  319. text-align: justify;
  320. overflow: auto;
  321. padding:5px 5px 5px 5px;
  322. filter: drop-shadow(30px 10px 4px #000);
  323. z-index: 2;
  324. }
  325.  
  326. .title { background: transparent;
  327. background:url('https://media3.giphy.com/media/l378vMZ1IbLcmj3H2/giphy.gif') 50px 50px repeat;
  328. background-position: center;
  329. position: absolute;
  330. font-family: 'VT323';
  331. font-size: 3vw;
  332. bottom: 1vw;
  333. right: 23.5vw;
  334. width: 43vw;
  335. height: 5vw;
  336. text-align: justify;
  337. padding:5px 5px 5px 5px;
  338. -webkit-text-fill-color: transparent;
  339. -webkit-background-clip: text;
  340. z-index: 3;
  341. }
  342.  
  343. .name2 {position: absolute;
  344. font-family: 'Cinzel Decorative';
  345. color: #fff;
  346. font-size: 3vw;
  347. top: -5vw;
  348. right: 0vw;
  349. width: 24vw;
  350. height: 5vw;
  351. border: 0px solid #000;
  352. text-align: justify;
  353. overflow: auto;
  354. padding:5px 5px 5px 5px;
  355. filter: drop-shadow(30px 10px 4px #000);
  356. z-index: 2;
  357. }
  358.  
  359. .title2 { background: transparent;
  360. background:url('https://i.pinimg.com/originals/2f/99/bf/2f99bfc0ac6d02db55e307d676168af2.gif') 50px 50px repeat;
  361. background-position: center;
  362. position: absolute;
  363. font-family: 'Cinzel Decorative';
  364. font-size: 3vw;
  365. top: -5vw;
  366. right: 0vw;
  367. width: 24vw;
  368. height: 5vw;
  369. text-align: justify;
  370. padding:5px 5px 5px 5px;
  371. -webkit-text-fill-color: transparent;
  372. -webkit-background-clip: text;
  373. z-index: 3;
  374. }
  375.  
  376. #navi1 {position: absolute;
  377. bottom: 0vw;
  378. right: 0vw;}
  379.  
  380. #navi1 a {background-color: transparent;
  381. background:url('http://i.picpar.com/fuLe.png')
  382. center center no-repeat;;
  383. background-size: 100%;
  384. display: inline-block;
  385. height: 60px;
  386. width: 60px;
  387. transform: translateY(4px);
  388. }
  389.  
  390. #navi2 {position: absolute;
  391. bottom: 0vw;
  392. right: 0vw;}
  393.  
  394. #navi2 a {background-color: transparent;
  395. background:url('http://i.picpar.com/fuLe.png')
  396. center center no-repeat;;
  397. background-size: 100%;
  398. display: inline-block;
  399. height: 60px;
  400. width: 60px;
  401. transform: translateY(4px);
  402. }
  403.  
  404. .popup {
  405. display: none;
  406. position: absolute;
  407. width: 100%;
  408. left: 0px;
  409. height: 100%;
  410. top: 0px;
  411. background: rgb(24,15,42);
  412. background: -moz-linear-gradient(243deg, rgba(24,15,42,1) 18%, rgba(140,140,140,1) 32%, rgba(34,62,101,1) 37%, rgba(109,101,122,1) 46%, rgba(25,12,38,1) 80%);
  413. background: -webkit-linear-gradient(243deg, rgba(24,15,42,1) 18%, rgba(140,140,140,1) 32%, rgba(34,62,101,1) 37%, rgba(109,101,122,1) 46%, rgba(25,12,38,1) 80%);
  414. background: linear-gradient(243deg, rgba(24,15,42,1) 18%, rgba(140,140,140,1) 32%, rgba(34,62,101,1) 37%, rgba(109,101,122,1) 46%, rgba(25,12,38,1) 80%);
  415. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#180f2a",endColorstr="#190c26",GradientType=1);
  416. z-index: 100;
  417. }
  418.  
  419. #popup1 {
  420. -webkit-animation: slit-in-horizontal 0.5s ease-out both;
  421. animation: slit-in-horizontal 0.5s ease-out both;
  422. }
  423.  
  424. .button {
  425. display: inline-block;
  426. padding: 0px;
  427. background-color: transparent;
  428. margin: 0px;
  429. border: none;
  430. border-radius: 150px;
  431. z-index: 101;
  432. }
  433.  
  434. .button:hover {background-color: transparent}
  435.  
  436. .button:active {
  437. background-color: transparent;
  438. box-shadow: 2px 9px 10px transparent;
  439. }
  440.  
  441.  
  442.  
  443. .cover {
  444. background:url('');
  445. opacity: .4;
  446. position: absolute;
  447. width: 100vw;
  448. height: 100vw;
  449. right: 0vw;
  450. bottom: 0vw;
  451. z-index: 100;
  452. }
  453.  
  454.  
  455. #image3 {
  456. width: 100vw;
  457. margin: 0px;
  458. border: none;
  459. height: 100vw;
  460. background-color:transparent;
  461. position: absolute;
  462. right: 0vw;
  463. bottom: 0vw;
  464. opacity: .4;
  465. background-image:url("http://i.picpar.com/u6yd.gif");
  466. background-repeat: repeat;
  467. background-position: center;
  468. background-size: fill;
  469. z-index: 0;
  470. }
  471.  
  472.  
  473. #content {
  474. background-color: #8d8eb2;
  475. width: 25vw;
  476. height: 35vw;
  477. margin:auto;
  478. position: absolute;
  479. padding: 10px;
  480. opacity: 0.98;
  481. font-family: 'Lora', cursive;
  482. font-size: 15px;
  483. color: #000;
  484. right: 25vw;
  485. bottom: 1vw;
  486. z-index:1;
  487. border: #384f5d solid 15px;
  488. }
  489.  
  490.  
  491. @-webkit-keyframes slit-in-horizontal {
  492. 0% {
  493. -webkit-transform: translateZ(-800px) rotateX(90deg);
  494. transform: translateZ(-800px) rotateX(90deg);
  495. opacity: 0;
  496. }
  497. 54% {
  498. -webkit-transform: translateZ(-160px) rotateX(87deg);
  499. transform: translateZ(-160px) rotateX(87deg);
  500. opacity: 1;
  501. }
  502. 100% {
  503. -webkit-transform: translateZ(0) rotateX(0);
  504. transform: translateZ(0) rotateX(0);
  505. }
  506. }
  507. @keyframes slit-in-horizontal {
  508. 0% {
  509. -webkit-transform: translateZ(-800px) rotateX(90deg);
  510. transform: translateZ(-800px) rotateX(90deg);
  511. opacity: 0;
  512. }
  513. 54% {
  514. -webkit-transform: translateZ(-160px) rotateX(87deg);
  515. transform: translateZ(-160px) rotateX(87deg);
  516. opacity: 1;
  517. }
  518. 100% {
  519. -webkit-transform: translateZ(0) rotateX(0);
  520. transform: translateZ(0) rotateX(0);
  521. }
  522. }
  523.  
  524. i{color: #fff;}
  525. b{color: #fff;}
  526. a{color: #fff; text-decoration: none;}
  527. h1{border-bottom: 1px solid #fff; text-align: center; font-size: 30px; font-family: 'Cinzel Decorative', cursive; color: #fff;}
  528. h2{border-bottom: 1px solid #fff; text-align: right; font-size: 20px; font-family: 'Cinzel Decorative', cursive; color: #fff;}
  529. h3{border-bottom: 1px solid #fff; text-align: left; font-size: 30px; font-family: 'Cinzel Decorative', cursive; color: #fff;}
  530. </style>
  531. </style>
  532. <div id="navi2"><button class="button"><a href="#" onclick="show('popup1')"></a></button></div>
  533.  
  534. <div class="beats"> <img src="https://www.clipartsfree.net/vector/large/50552-grey-music-note-clipart.png">
  535. <div class="audio">
  536. <audio controls="" loop="no">
  537. <source src="https://docs.google.com/uc?id=1zBn0bQpk7K9jRtfv86eCvNPuyFsr31So&export=download">
  538. </audio>
  539. </div> </div>
  540.  
  541. <div class="name">Did you forget about me?</div>
  542. <div class="title">Did you forget about me?</div>
  543.  
  544. <div id="image"></div>
  545.  
  546. <div class="line1"></div>
  547. <div class="line2"></div>
  548. <div class="line3"></div>
  549. <div class="line4"></div>
  550.  
  551. <div id="dossier">
  552.  
  553.  
  554. <div style="width: 13vw; height: 15vw; overflow-y: hidden;">
  555.  
  556. <a name="one"></a>
  557. <div style="width: 13vw; height: 15vw; overflow: auto;" align="left">
  558. <span style="float:left;"><b>Name</b></span><span style="float:right;"></span><br>
  559. <span style="float:left;"><b>Alias(es)</b></span><span style="float:right;"><a title="">hover</a></span><br>
  560. <span style="float:left;"><b>Gender</b></span><span style="float:right;"></span><br>
  561. <span style="float:left;"><b>Age</b></span><span style="float:right;"></span><br>
  562. <span style="float:left;"><b>Race</b></span><span style="float:right;"></span><br>
  563. <span style="float:left;"><b>Voice</b></span><span style="float:right;"><a href="" target="_blank"></a></span><br><br>
  564. <span style="float:left;"><b>Height</b></span><span style="float:right;"></span><br>
  565. <span style="float:left;"><b>Weight</b></span><span style="float:right;"></span><br>
  566. <span style="float:left;"><b>Eyes</b></span><span style="float:right;"></span><br>
  567. <span style="float:left;"><b>Hair</b></span><span style="float:right;"></span><br>
  568. <span style="float:left;"><b>Build</b></span><span style="float:right;"></span><br><br>
  569. <span style="float:left;"><b>Orientation</b></span><span style="float:right;"></span><br>
  570. <span style="float:left;"><b>Relationship</b></span><span style="float:right;"></span><br>
  571. <span style="float:left;"><b>Affiliation</b></span><span style="float:right;"></span><br><br>
  572. </div>
  573. </div>
  574. </div>
  575.  
  576. <div id="additional">
  577.  
  578.  
  579. <div style="width: 13vw; height: 15vw; overflow-y: hidden;">
  580.  
  581. <a name="one"></a>
  582. <div style="width: 13vw; height: 15vw; overflow: auto;" align="left">
  583. <h1>history</h1>
  584.  
  585. </div>
  586. </div>
  587. </div>
  588.  
  589. <div id="friends">
  590.  
  591.  
  592. <div style="width: 21vw; height: 13vw; overflow-y: hidden;">
  593.  
  594. <a name="one"></a>
  595. <div style="width: 21vw; height: 13vw; overflow: auto;" align="left">
  596. <h1>friends</h1>
  597. <a target="_blank" href="PROFILE LINK HERE"><img src="https://cdn2.iconfinder.com/data/icons/gaming-and-beyond-part-2-1/80/User_gray-512.png" height="100" width="100" align="left" border="5" title="WORDS"></a>
  598.  
  599. </div>
  600. </div>
  601. </div>
  602.  
  603. <div id="ooc">
  604.  
  605.  
  606. <div style="width: 21vw; height: 13vw; overflow-y: hidden;">
  607.  
  608. <a name="one"></a>
  609. <div style="width: 21vw; height: 13vw; overflow: auto;" align="left">
  610. <h1>Out of Character</h1>
  611. <b>00</b>. Want a code? Go <a href="/profile.php?user=RageQxeen">here</a>. Refrain from stealing.<br><br>
  612. <b>01</b>. OOC.<br>
  613. <b>02</b>. OOC.<br>
  614. <b>03</b>. OOC.<br>
  615. <b>04</b>. OOC.<br>
  616. <b>05</b>. OOC.<br>
  617. </div>
  618. </div>
  619. </div>
  620.  
  621. <div class="popup" id="popup1">
  622. <div id="image3"></div>
  623. <div id="navi1"><button class="button"><a href="#" onclick="hide('popup1')"></a></button></div>
  624.  
  625. <div id="image2"></div>
  626.  
  627. <div id="content">
  628.  
  629. <div style="width: 25vw; height: 35vw; overflow-y: hidden;">
  630.  
  631. <a name="one"></a>
  632. <div style="width: 25vw; height: 35vw; overflow: auto;" align="left">
  633.  
  634. <div class="name2">Sienne Doyle</div>
  635. <div class="title2">Sienne Doyle</div>
  636.  
  637.  
  638. </div>
  639. </div>
  640. </div>
  641. </div>
  642. </body>
  643. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!