API tools faq
paste
Advertisement
RageQxeen

Harmony

RageQxeen
Mar 18th, 2023
59
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.51 KB | None | 0 0
raw download clone embed print report
  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. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  48. <script>
  49. $(document).ready(function(){
  50. $("#image").click(function(){
  51. $("#container").animate({opacity: "1",
  52. left: "28vw",}, 'slow');
  53. });
  54. });
  55. $(document).ready(function(){
  56. $("#image").click(function(){
  57. $(".alias").animate({opacity: "1",
  58. left: "50vw",}, 'slow');
  59. });
  60. });
  61. </script>
  62. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  63. <script>
  64. $(document).ready(function(){
  65. $(".button").click(function(){
  66. $("#page").fadeOut("slow", 0);
  67. $("#introimage").fadeOut("slow", 0);
  68. $(this).remove();
  69. });
  70. });
  71. </script>
  72. <style type="text/css">
  73.  
  74. @import url(https://fonts.googleapis.com/css?family=Oswald|Bebas+Neue|Cinzel+Decorative);
  75.  
  76. html, body {
  77. background: rgb(41,55,128);
  78. background: -moz-linear-gradient(187deg, rgba(41,55,128,1) 0%, rgba(170,127,147,1) 50%, rgba(47,53,85,1) 100%);
  79. background: -webkit-linear-gradient(187deg, rgba(41,55,128,1) 0%, rgba(170,127,147,1) 50%, rgba(47,53,85,1) 100%);
  80. background: linear-gradient(187deg, rgba(41,55,128,1) 0%, rgba(170,127,147,1) 50%, rgba(47,53,85,1) 100%);
  81. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#293780",endColorstr="#2f3555",GradientType=1);
  82. }
  83.  
  84. ::-webkit-scrollbar-button:vertical:{
  85. background-color: #transparent;}
  86.  
  87. ::-webkit-scrollbar-thumb:vertical {
  88. background-color:#transparent;
  89. height:150px;}
  90.  
  91. ::-webkit-scrollbar-thumb:horizontal {
  92. background-color:#transparent;
  93. height:60px;}
  94.  
  95.  
  96. ::-webkit-scrollbar {
  97. height:60px;
  98. width:5px;
  99. background-color:#transparent;}
  100.  
  101. .cover {
  102. background:url('https://thumbs.gfycat.com/RingedSpicyKodiakbear-size_restricted.gif');
  103. opacity: 0.2;
  104. position: absolute;
  105. width: 100vw;
  106. height: 100vh;
  107. left: 0vw;
  108. top: 0vw;
  109. z-index: 1;
  110. overflow: hidden;
  111. }
  112.  
  113. #page {
  114. background-color: #222;
  115. background-image: url("https://wallpaperaccess.com/full/2705419.jpg");
  116. background-size: fill;
  117. background-repeat: no-repeat;
  118. background-position: bottom;
  119. width: 100vw;
  120. height: 99vw;
  121. margin:auto;
  122. position: absolute;
  123. right: 0vw;
  124. bottom: 0vw;
  125. z-index:11;
  126. }
  127.  
  128. #introimage {
  129. width: 35vw;
  130. margin: 0px;
  131. border: none;
  132. height: 50vw;
  133. background-color:transparent;
  134. position: absolute;
  135. left: 0vw;
  136. bottom: 0vw;
  137. background-image:url("https://i.ibb.co/8s3PtvL/5.png");
  138. background-repeat:no-repeat;
  139. background-position: bottom;
  140. background-size: 100%;
  141. z-index:12;
  142. }
  143.  
  144. #introcontainer {
  145. background-color:#f2b195;
  146. width: 37vw;
  147. height: 25vw;
  148. margin:auto;
  149. position: absolute;
  150. padding: 5px;
  151. right: 30vw;
  152. bottom: 7vw;
  153. padding: 10px;
  154. z-index:2;
  155. box-shadow: 0px 5px 10px #000;
  156. border: 2px solid #000;
  157. -moz-border-radius: 20px;
  158. -webkit-border-radius: 20px;
  159. border-radius: 20px;
  160. }
  161.  
  162. #introcontent {
  163. background-color: transparent;
  164. width: 36vw;
  165. height:20vw;
  166. margin:auto;
  167. position: absolute;
  168. padding: 10px;
  169. font-size: 15px;
  170. font-family: 'Oswald', cursive;
  171. color:#000;
  172. opacity: 0.98;
  173. right: 0vw;
  174. top: 1vw;
  175. z-index:1;
  176. }
  177.  
  178. .button {
  179. background-color: #000;
  180. color: #f2b195;
  181. font-family: 'Cinzel Decorative', cursive;
  182. font-size: 33px;
  183. width: 38.5vw;
  184. text-align: center;
  185. right: 30vw;
  186. bottom: 8vw;
  187. border: solid #000 1px;
  188. position: absolute;
  189. z-index:3;
  190. }
  191.  
  192. #icon5 {
  193. width: 250px;
  194. margin: 0px;
  195. border: none;
  196. height: 150px;
  197. background-color:transparent;
  198. position: absolute;
  199. right: 10vw;
  200. bottom: 30vw;
  201. background-image:url("https://i.ibb.co/0CHR3Qn/59.jpg");
  202. background-repeat:no-repeat;
  203. background-position: center;
  204. background-size: cover;
  205. border-radius: 10px;
  206. border: 2px solid #000;
  207. filter: blur(4px) grayscale(50%);
  208. box-sizing: border-box;
  209. z-index: 11;
  210. transition: 0.5s;
  211. }
  212.  
  213. #icon5:hover {
  214. filter: blur(0px) grayscale(0%);
  215. background-position: 40% 10%;
  216. }
  217.  
  218. #icon6 {
  219. width: 250px;
  220. margin: 0px;
  221. border: none;
  222. height: 150px;
  223. background-color:transparent;
  224. position: absolute;
  225. right: 10vw;
  226. bottom: 21vw;
  227. background-image:url("https://i.ibb.co/pRC4fpZ/56.jpg");
  228. background-repeat:no-repeat;
  229. background-position: center;
  230. background-size: cover;
  231. border-radius: 10px;
  232. border: 2px solid #000;
  233. z-index: 11;
  234. filter: blur(4px) grayscale(50%);
  235. box-sizing: border-box;
  236. transition: 0.5s;
  237. }
  238.  
  239. #icon6:hover {
  240. filter: blur(0px) grayscale(0%);
  241. background-position: 40% 10%;
  242. }
  243.  
  244. #icon7 {
  245. width: 250px;
  246. margin: 0px;
  247. border: none;
  248. height: 150px;
  249. background-color:transparent;
  250. position: absolute;
  251. right: 10vw;
  252. bottom: 12vw;
  253. background-image:url("https://i.ibb.co/HG4HNzz/43.jpg");
  254. background-repeat:no-repeat;
  255. background-position: center;
  256. background-size: cover;
  257. border-radius: 10px;
  258. border: 2px solid #000;
  259. z-index: 11;
  260. filter: blur(4px) grayscale(50%);
  261. box-sizing: border-box;
  262. transition: 0.5s;
  263. }
  264.  
  265. #icon7:hover {
  266. filter: blur(0px) grayscale(0%);
  267. background-position: 40% 10%;
  268. }
  269.  
  270. #icon8 {
  271. width: 250px;
  272. margin: 0px;
  273. border: none;
  274. height: 140px;
  275. background-color:transparent;
  276. position: absolute;
  277. right: 10vw;
  278. bottom: 3vw;
  279. background-image:url("https://i.ibb.co/9wtBSWH/28.png");
  280. background-repeat:no-repeat;
  281. background-position: center;
  282. background-size: cover;
  283. border-radius: 10px;
  284. border: 2px solid #000;
  285. z-index: 11;
  286. filter: blur(4px) grayscale(100%);
  287. box-sizing: border-box;
  288. transition: 0.5s;
  289. }
  290.  
  291. #icon8:hover {
  292. filter: blur(0px) grayscale(0%);
  293. background-position: 40% 10%;
  294. }
  295.  
  296. #image {
  297. width: 30vw;
  298. margin: 0px;
  299. border: none;
  300. height: 50vw;
  301. background-color:transparent;
  302. position: absolute;
  303. left: 10vw;
  304. bottom: 0vw;
  305. background-image:url("https://i.ibb.co/C2JhN0Q/3.png");
  306. background-repeat:no-repeat;
  307. background-position: bottom;
  308. background-size: 100%;
  309. transform: scaleX(-1);
  310. z-index:3;
  311. }
  312.  
  313. #container {
  314. background-color: transparent;
  315. background-image:url("https://i.pinimg.com/originals/de/4b/6f/de4b6f4aa384b43ec447bb8f311631b3.jpg");
  316. background-repeat:no-repeat;
  317. background-position: bottom;
  318. background-size: cover;
  319. width: 50vw;
  320. height: 30vw;
  321. margin:auto;
  322. position: absolute;
  323. padding: 5px;
  324. left: 25vw;
  325. bottom: 5vw;
  326. opacity: 0;
  327. z-index:2;
  328. box-shadow: 10px 10px 15px #000;
  329. border-right: solid 4px #fff;
  330. border-bottom: solid 4px #fff;
  331. border-top: solid 4px #fff;
  332. }
  333.  
  334. #content {
  335. background-color: rgb(0, 0, 0, 0.8);
  336. width: 43vw;
  337. height: 29vw;
  338. margin:auto;
  339. position: absolute;
  340. padding: 10px;
  341. font-family: 'Oswald', cursive;
  342. font-size: 18px;
  343. color: #fff;
  344. right: 0.5vw;
  345. bottom: .25vw;
  346. z-index:1;
  347. }
  348.  
  349. #nav {
  350. background-color: transparent;
  351. width: 5vw;
  352. height: 50px;
  353. margin:auto;
  354. position: absolute;
  355. right: -2vw;
  356. bottom: 26vw;
  357. text-align: center;
  358. z-index: 10;
  359. }
  360.  
  361. #nav a, #nav a:link, #nav a:visited {
  362. display:inline-block;
  363. background: #eee;
  364. color: #eee;
  365. margin-top: 0px;
  366. margin-bottom: 2vw;
  367. margin-left: 4vw;
  368. height: 100px;
  369. width: 150px;
  370. border-radius: 10px;
  371. box-shadow: 5px 5px 25px #eee;
  372. -webkit-transition: 0.5s linear;
  373. -moz-transition: 0.5s linear;
  374. -o-transition: 0.5s linear;
  375. transition: 0.5s linear;
  376. }
  377.  
  378. #nav a:active, #nav a:hover {
  379. display:inline-block;
  380. height: 100px;
  381. width: 150px;
  382. border-radius: 100%;
  383. text-decoration:none;
  384. background: rgb(0,0,0,0.4);
  385. color: rgb(0,0,0,0.4);
  386. margin-bottom: 2vw;
  387. box-shadow: 0px 0px 5px #eee;
  388. -webkit-transition: 0.5s linear;
  389. -moz-transition: 0.5s linear;
  390. -o-transition: 0.5s linear;
  391. transition: 0.5s linear;
  392. }
  393.  
  394. #icon {
  395. width: 150px;
  396. margin: 0px;
  397. border: none;
  398. height: 100px;
  399. background-color:transparent;
  400. position: absolute;
  401. background-image:url("https://i.ibb.co/2gLVbSB/54.jpg");
  402. background-repeat:no-repeat;
  403. background-position: center;
  404. background-size: cover;
  405. border-radius: 10px;
  406. border: 2px solid #000;
  407. filter: blur(4px) grayscale(100%);
  408. box-sizing: border-box;
  409. z-index: 11;
  410. transition: 0.5s;
  411. }
  412.  
  413. #icon:hover {
  414. filter: blur(0px) grayscale(0%);
  415. background-position: 40% 10%;
  416. }
  417.  
  418. #icon2 {
  419. width: 150px;
  420. margin: 0px;
  421. border: none;
  422. height: 100px;
  423. background-color:transparent;
  424. position: absolute;
  425. background-image:url("https://i.ibb.co/ZBdSYpS/12.jpg");
  426. background-repeat:no-repeat;
  427. background-position: center;
  428. background-size: cover;
  429. border-radius: 10px;
  430. border: 2px solid #000;
  431. z-index: 11;
  432. filter: blur(4px) grayscale(100%);
  433. box-sizing: border-box;
  434. transition: 0.5s;
  435. }
  436.  
  437. #icon2:hover {
  438. filter: blur(0px) grayscale(0%);
  439. background-position: 40% 10%;
  440. }
  441.  
  442. #icon3 {
  443. width: 150px;
  444. margin: 0px;
  445. border: none;
  446. height: 100px;
  447. background-color:transparent;
  448. position: absolute;
  449. background-image:url("https://i.ibb.co/1RdDRNM/11.jpg");
  450. background-repeat:no-repeat;
  451. background-position: center;
  452. background-size: cover;
  453. border-radius: 10px;
  454. border: 2px solid #000;
  455. z-index: 11;
  456. filter: blur(4px) grayscale(100%);
  457. box-sizing: border-box;
  458. transition: 0.5s;
  459. }
  460.  
  461. #icon3:hover {
  462. filter: blur(0px) grayscale(0%);
  463. background-position: 40% 10%;
  464. }
  465.  
  466. #icon4 {
  467. width: 150px;
  468. margin: 0px;
  469. border: none;
  470. height: 100px;
  471. background-color:transparent;
  472. position: absolute;
  473. background-image:url("https://i.ibb.co/BfQY4rR/60.jpg");
  474. background-repeat:no-repeat;
  475. background-position: center;
  476. background-size: cover;
  477. border-radius: 10px;
  478. border: 2px solid #000;
  479. z-index: 11;
  480. filter: blur(4px) grayscale(100%);
  481. box-sizing: border-box;
  482. transition: 0.5s;
  483. }
  484.  
  485. #icon4:hover {
  486. filter: blur(0px) grayscale(0%);
  487. background-position: 40% 10%;
  488. }
  489.  
  490. .alias {position: absolute;
  491. font-family: 'Bebas Neue';
  492. color: #fff;
  493. font-size: 5vw;
  494. top: 8vw;
  495. left: 46vw;
  496. width: 29vw;
  497. height: 5vw;
  498. text-align: center;
  499. overflow: auto;
  500. padding:5px 5px 5px 5px;
  501. text-shadow: 6px 5px 8px #000000;
  502. opacity: 0;
  503. z-index: 1;}
  504.  
  505. a {text-decoration: none; color: #fff;}
  506. p {text-indent: 50px; color: #fff; font-size: 30px; text-decoration: bold; line-height: 0;}
  507. h1{border-bottom: 1px solid #fff; text-align: left; font-size: 40px; font-family: 'Bebas Neue', cursive; color: #fff;}
  508. h2{border-bottom: 1px solid #fff; text-align: center; font-size: 40px; font-family: 'Bebas Neue', cursive; color: #fff;}
  509. h3{border-bottom: 1px solid #fff; text-align: right; font-size: 40px; font-family: 'Bebas Neue', cursive; color: #fff;}
  510. </style>
  511. <div id="introimage"></div>
  512. <div id="page">
  513.  
  514. <div id="icon5"></div>
  515. <div id="icon6"></div>
  516. <div id="icon7"></div>
  517. <div id="icon8"></div>
  518.  
  519.  
  520. <div id="introcontainer">
  521. <div id="introcontent">
  522.  
  523.  
  524. <div style="width: 36vw; height: 20vw; overflow-y: hidden;">
  525.  
  526. <a name="one"></a>
  527. <div style="width: 36vw; height: 20vw; overflow: auto;" align="left">
  528. <center><b>00</b>. Code made by <a target="_blank" href="https://rageqxeen.neocities.org/vw_codes/rageqxeen.html" target="_blank">RageQxeen</a>, do not steal.</center><br>
  529. <b>01</b>. OOC<br>
  530. </div>
  531. </div>
  532. </div>
  533. </div>
  534.  
  535.  
  536. <button class="button">The Flower of the Cosmos</button>
  537.  
  538. </div>
  539.  
  540. <div class="cover"></div>
  541.  
  542. <div class="alias"> </div>
  543. <div id="image"></div>
  544. <div id="container">
  545.  
  546. <div id="nav">
  547. <a href="#one"><div id="icon"></div></a>
  548. <a href="#two"><div id="icon2"></div></a>
  549. <a href="#three"><div id="icon3"></div></a>
  550. <a href="#four"><div id="icon4"></div></a>
  551. </div>
  552.  
  553.  
  554. <div id="content">
  555. <div style="width: 43vw; height: 29vw; overflow-y: hidden;">
  556.  
  557. <a name="one"></a>
  558. <div style="width: 43vw; height: 29vw; overflow: auto;" align="center">
  559. <h1>The Basics</h1>
  560. <span style="float:left;"><b>Name</b></span><span style="float:right;"> </span><br>
  561. <span style="float:left;"><b>Alias(es)</b></span><span style="float:right;"> </span><br>
  562. <span style="float:left;"><b>Gender</b></span><span style="float:right;"> </span><br>
  563. <span style="float:left;"><b>Age</b></span><span style="float:right;"> </span><br>
  564. <span style="float:left;"><b>Place of Birth</b></span><span style="float:right;"> </span><br><br>
  565. <span style="float:left;"><b>Ethnicity</b></span><span style="float:right;"> </span><br>
  566. <span style="float:left;"><b>Orientation</b></span><span style="float:right;"> </span><br>
  567. <span style="float:left;"><b>Marital Status</b></span><span style="float:right;"> </span><br>
  568. <span style="float:left;"><b>Alignment</b></span><span style="float:right;"> </span><br><br>
  569. <span style="float:left;"><b>Height</b></span><span style="float:right;"> </span><br>
  570. <span style="float:left;"><b>Weight</b></span><span style="float:right;"> </span><br>
  571. <span style="float:left;"><b>Body Type</b></span><span style="float:right;"> </span><br>
  572. <span style="float:left;"><b>Hair Color</b></span><span style="float:right;"> </span><br>
  573. <span style="float:left;"><b>Eye Color</b></span><span style="float:right;"> </span><br>
  574. <span style="float:left;"><b>Blood Type</b></span><span style="float:right;"> </span><br>
  575. <span style="float:left;"><b>Dominant Hand</b></span><span style="float:right;"> </span><br>
  576. </div>
  577.  
  578. <a name="two"></a>
  579. <div style="width: 43vw; height: 29vw; overflow: auto;" align="left">
  580. <h3>Abilities</h3>
  581.  
  582. </div>
  583.  
  584.  
  585. <a name="three"></a>
  586. <div style="width: 43vw; height: 29vw; overflow: auto;" align="center">
  587. <h1>History</h1>
  588.  
  589. </div>
  590.  
  591. <a name="four"></a>
  592. <div style="width: 43vw; height: 29vw; overflow: auto;" align="left">
  593. <h2>Friends</h2>
  594. <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>
  595. </div>
  596. </div>
  597. </div>
  598. </div>
  599. </div>
  600. </body>
  601. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!