Advertisement
RageQxeen

Drazzywazzy

Nov 2nd, 2022
51
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.68 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=Bangers|Staatliches);
  50.  
  51. html, body {
  52. background: #616161; /* fallback for old browsers */
  53. background: -webkit-linear-gradient(to right, #9bc5c3, #616161); /* Chrome 10-25, Safari 5.1-6 */
  54. background: linear-gradient(to right, #9bc5c3, #616161); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  55. }
  56.  
  57. ::-webkit-scrollbar-button:vertical:{
  58. background-color: #transparent;}
  59.  
  60. ::-webkit-scrollbar-thumb:vertical {
  61. background-color:#transparent;
  62. height:150px;}
  63.  
  64. ::-webkit-scrollbar-thumb:horizontal {
  65. background-color:#transparent;
  66. height:60px;}
  67.  
  68.  
  69. ::-webkit-scrollbar {
  70. height:60px;
  71. width:5px;
  72. background-color:#transparent;}
  73.  
  74. .cover {
  75. background:url('https://thumbs.gfycat.com/RingedSpicyKodiakbear-size_restricted.gif');
  76. opacity: 0.4;
  77. position: absolute;
  78. width: 100vw;
  79. height: 100vh;
  80. left: 0vw;
  81. top: 0vw;
  82. z-index: 1;
  83. overflow: hidden;
  84. }
  85.  
  86. #image {
  87. width: 32vw;
  88. margin: 0px;
  89. border: none;
  90. height: 50vw;
  91. background-color:transparent;
  92. position: absolute;
  93. left: 0vw;
  94. bottom: 0vw;
  95. background-image:url("https://i.imgur.com/0K6NzOw.png");
  96. background-repeat:no-repeat;
  97. background-position: bottom;
  98. background-size: 100%;
  99. z-index: 3;
  100. }
  101.  
  102. #container {
  103. width: 60vw;
  104. height: 33vw;
  105. background-color: #000;
  106. position: absolute;
  107. right: 20vw;
  108. bottom: 5vw;
  109. background-image: url('https://wallpaperaccess.com/full/4527925.jpg');
  110. background-size: cover;
  111. background-position: bottom;
  112. margin: auto;
  113. border: 1px solid #c0c0c0;
  114. z-index: 2;
  115. }
  116.  
  117. .name {position: absolute;
  118. font-family: 'Bangers';
  119. color: #fff;
  120. font-size: 6vw;
  121. top: -5vw;
  122. left: 13vw;
  123. width: 36vw;
  124. height: 6vw;
  125. border: 0px solid #000;
  126. text-align: justify;
  127. text-shadow: -1px 0 #c0c0c0, 0 1px #000,1px 0 #000, 0 -1px #c0c0c0;
  128. overflow: auto;
  129. padding:5px 5px 5px 5px;
  130. z-index: 5;}
  131.  
  132. .title { background: transparent;
  133. background:url('https://thumbs.gfycat.com/IlliterateLegitimateArabianoryx-max-1mb.gif') 50px 50px repeat;
  134. background-position: bottom;
  135. position: absolute;
  136. font-family: 'Bangers';
  137. font-size: 6vw;
  138. top: -5vw;
  139. left: 13vw;
  140. width: 36vw;
  141. height: 6vw;
  142. text-align: justify;
  143. padding:5px 5px 5px 5px;
  144. -webkit-text-fill-color: transparent;
  145. -webkit-background-clip: text;
  146. z-index: 6;}
  147.  
  148. #nav {
  149. background-color: transparent;
  150. width: 8vw;
  151. height: 27vw;
  152. margin:auto;
  153. position: absolute;
  154. right: -9vw;
  155. bottom: 6.5vw;
  156. text-align: center;
  157. z-index: 10;
  158. }
  159.  
  160. #nav a, #nav a:link, #nav a:visited {
  161. display:inline-block;
  162. background: #eee;
  163. color: #eee;
  164. margin-top: 0px;
  165. margin-bottom: 2vw;
  166. margin-left: 0vw;
  167. height: 100px;
  168. width: 150px;
  169. border-radius: 10px;
  170. box-shadow: 5px 5px 25px #eee;
  171. -webkit-transition: 0.5s linear;
  172. -moz-transition: 0.5s linear;
  173. -o-transition: 0.5s linear;
  174. transition: 0.5s linear;
  175. }
  176.  
  177. #nav a:active, #nav a:hover {
  178. display:inline-block;
  179. height: 100px;
  180. width: 150px;
  181. border-radius: 100%;
  182. text-decoration:none;
  183. background: rgb(0,0,0,0.4);
  184. color: rgb(0,0,0,0.4);
  185. margin-bottom: 2vw;
  186. box-shadow: 0px 0px 5px #eee;
  187. -webkit-transition: 0.5s linear;
  188. -moz-transition: 0.5s linear;
  189. -o-transition: 0.5s linear;
  190. transition: 0.5s linear;
  191. }
  192.  
  193. #icon {
  194. width: 150px;
  195. margin: 0px;
  196. border: none;
  197. height: 100px;
  198. background-color:transparent;
  199. position: absolute;
  200. background-image:url("https://i.ibb.co/sjPKRVy/anvil.jpg");
  201. background-repeat:no-repeat;
  202. background-position: center;
  203. background-size: cover;
  204. border-radius: 10px;
  205. border: 2px solid #000;
  206. filter: blur(4px) grayscale(100%);
  207. box-sizing: border-box;
  208. z-index: 11;
  209. transition: 0.5s;
  210. }
  211.  
  212. #icon:hover {
  213. filter: blur(0px) grayscale(0%);
  214. background-position: center;
  215. border: 0px;
  216. }
  217.  
  218. #icon2 {
  219. width: 150px;
  220. margin: 0px;
  221. border: none;
  222. height: 100px;
  223. background-color:transparent;
  224. position: absolute;
  225. background-image:url("https://i.ibb.co/sjPKRVy/anvil.jpg");
  226. background-repeat:no-repeat;
  227. background-position: center;
  228. background-size: cover;
  229. border-radius: 10px;
  230. border: 2px solid #000;
  231. z-index: 11;
  232. filter: blur(4px) grayscale(100%);
  233. box-sizing: border-box;
  234. transition: 0.5s;
  235. }
  236.  
  237. #icon2:hover {
  238. filter: blur(0px) grayscale(0%);
  239. background-position: center;
  240. border: 0px;
  241. }
  242.  
  243. #icon3 {
  244. width: 150px;
  245. margin: 0px;
  246. border: none;
  247. height: 100px;
  248. background-color:transparent;
  249. position: absolute;
  250. background-image:url("https://i.ibb.co/sjPKRVy/anvil.jpg");
  251. background-repeat:no-repeat;
  252. background-position: center;
  253. background-size: cover;
  254. border-radius: 10px;
  255. border: 2px solid #000;
  256. z-index: 11;
  257. filter: blur(4px) grayscale(100%);
  258. box-sizing: border-box;
  259. transition: 0.5s;
  260. }
  261.  
  262. #icon3:hover {
  263. filter: blur(0px) grayscale(0%);
  264. background-position: center;
  265. border: 0px;
  266. }
  267.  
  268. #icon4 {
  269. width: 150px;
  270. margin: 0px;
  271. border: none;
  272. height: 100px;
  273. background-color:transparent;
  274. position: absolute;
  275. background-image:url("https://i.ibb.co/sjPKRVy/anvil.jpg");
  276. background-repeat:no-repeat;
  277. background-position: center;
  278. background-size: cover;
  279. border-radius: 10px;
  280. border: 2px solid #000;
  281. z-index: 11;
  282. filter: blur(4px) grayscale(100%);
  283. box-sizing: border-box;
  284. transition: 0.5s;
  285. }
  286.  
  287. #icon4:hover {
  288. filter: blur(0px) grayscale(0%);
  289. background-position: center;
  290. border: 0px;
  291. }
  292.  
  293. #icon5 {
  294. width: 150px;
  295. margin: 0px;
  296. border: none;
  297. height: 100px;
  298. background-color:transparent;
  299. position: absolute;
  300. background-image:url("https://i.ibb.co/sjPKRVy/anvil.jpg");
  301. background-repeat:no-repeat;
  302. background-position: center;
  303. background-size: cover;
  304. border-radius: 10px;
  305. border: 2px solid #000;
  306. z-index: 11;
  307. filter: blur(4px) grayscale(100%);
  308. box-sizing: border-box;
  309. transition: 0.5s;
  310. }
  311.  
  312. #icon5:hover {
  313. filter: blur(0px) grayscale(0%);
  314. background-position: center;
  315. border: 0px;
  316. }
  317.  
  318. #content {
  319. background-color: rgb(0, 0, 0, 0.8);
  320. width: 25vw;
  321. height: 31vw;
  322. margin:auto;
  323. position: absolute;
  324. padding: 10px;
  325. font-family: 'Staatliches', cursive;
  326. font-size: 20px;
  327. color: #fff;
  328. left: 7vw;
  329. bottom: .25vw;
  330. z-index:1;
  331. }
  332.  
  333. #lore {
  334. background-color: rgb(0, 0, 0, 0.8);
  335. width: 25vw;
  336. height: 31vw;
  337. margin:auto;
  338. position: absolute;
  339. padding: 10px;
  340. font-family: 'Staatliches', cursive;
  341. font-size: 20px;
  342. color: #fff;
  343. right: .5vw;
  344. bottom: .25vw;
  345. z-index:1;
  346. }
  347.  
  348. a {text-decoration: none; color: #f20000;}
  349. b { color: #ff7373; }
  350. i { color: #e50000; }
  351. h1 {
  352. background: url(https://i.gifer.com/origin/8a/8a4b5e12f3abed35b73c528c02ad5dd0.gif);
  353. background-position: left;
  354. background-size:cover;
  355. line-height:1vw;
  356. letter-spacing: 0.2vw;
  357. font-size: 4vh;
  358. font-family: 'Cinzel Decorative';
  359. text-align: center;
  360. border: .2vh solid #15181F;
  361. border-radius: 10px;
  362. color: #F62817;
  363. filter: drop-shadow(0px 0px 10px #15181F);
  364. text-shadow: 3px 1px 2px #15181F, 0 0 25px #15181F;
  365. margin-top: 1vh;
  366. }
  367. </style>
  368. <div class="cover"></div>
  369.  
  370. <div id="image"></div>
  371.  
  372. <div id="container">
  373. <div class="name">The Craftsman</div>
  374. <div class="title">The Craftsman</div>
  375.  
  376. <div id="nav">
  377. <a href="#one"><div id="icon"></div></a>
  378. <a href="#two"><div id="icon2"></div></a>
  379. <a href="#three"><div id="icon3"></div></a>
  380. <a href="#four"><div id="icon4"></div></a>
  381. <a href="#five"><div id="icon5"></div></a>
  382. </div>
  383.  
  384. <div id="content">
  385. <div style="width: 25vw; height: 31vw; overflow-y: hidden;">
  386.  
  387. <a name="one"></a>
  388. <div style="width: 25vw; height: 31vw; overflow: auto;" align="center">
  389. <h1>The Basics</h1>
  390. <span style="float:left;"><b>Name</b></span><span style="float:right;">Drazzagos</span><br>
  391. <span style="float:left;"><b>Alias(es)</b></span><span style="float:right;">Nicknames?</span><br>
  392. <span style="float:left;"><b>Gender</b></span><span style="float:right;">Male</span><br>
  393. <span style="float:left;"><b>Age</b></span><span style="float:right;">How old?</span><br>
  394. <span style="float:left;"><b>Height</b></span><span style="float:right;">How tall?</span><br>
  395. <span style="float:left;"><b>Weight</b></span><span style="float:right;">How heavy?</span><br><br>
  396. <span style="float:left;"><b>Orientation</b></span><span style="float:right;">Sexuality?</span><br>
  397. <span style="float:left;"><b>Relationship</b></span><span style="float:right;">Dating anyone?</span><br>
  398. <span style="float:left;"><b>Race</b></span><span style="float:right;">What's their race?</span><br>
  399. <span style="float:left;"><b>Eyes</b></span><span style="float:right;">Color of the eyes?</span><br>
  400. <span style="float:left;"><b>Hair</b></span><span style="float:right;">How about hair?</span><br>
  401. <span style="float:left;"><b>Build</b></span><span style="float:right;">What's their body type?</span><br>
  402. </div>
  403.  
  404. <a name="two"></a>
  405. <div style="width: 25vw; height: 31vw; overflow: auto;" align="left">
  406. <h1>Abilities</h1>
  407.  
  408. </div>
  409.  
  410.  
  411. <a name="three"></a>
  412. <div style="width: 25vw; height: 31vw; overflow: auto;" align="left">
  413. <h1>History</h1>
  414.  
  415. </div>
  416. </div>
  417. </div>
  418.  
  419.  
  420. <div id="lore">
  421. <div style="width: 25vw; height: 31vw; overflow-y: hidden;">
  422.  
  423. <a name="four"></a>
  424. <div style="width: 25vw; height: 31vw; overflow: auto;" align="left">
  425. <h1>The Lore</h1>
  426.  
  427. </div>
  428.  
  429. <a name="five"></a>
  430. <div style="width: 25vw; height: 31vw; overflow: auto;" align="left">
  431. <h1>Out of Character</h1>
  432. <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>
  433. <b>01</b>. OOC<br>
  434. <b>02</b>. OOC<br>
  435. <b>03</b>. OOC<br>
  436. <b>04</b>. OOC<br>
  437. <b>05</b>. OOC<br>
  438. </div>
  439. </div>
  440. </div>
  441. </div>
  442. </body>
  443. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement