Advertisement
RageQxeen

Goat Monk

Aug 16th, 2022
31
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.60 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=Aboreto|Arima|My+Soul);
  50.  
  51. html, body {
  52. background: #757F9A; /* fallback for old browsers */
  53. background: -webkit-linear-gradient(to right, #D7DDE8, #757F9A); /* Chrome 10-25, Safari 5.1-6 */
  54. background: linear-gradient(to right, #D7DDE8, #757F9A); /* 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.3;
  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: 25vw;
  88. margin: 0px;
  89. border: none;
  90. height: 40vw;
  91. background-color:transparent;
  92. position: absolute;
  93. right: 10vw;
  94. bottom: 0vw;
  95. background-image:url("https://i.ibb.co/tK0MGJH/3.png");
  96. background-repeat:no-repeat;
  97. background-position: bottom;
  98. background-size: 100%;
  99. z-index: 4;
  100. }
  101.  
  102. #bar {
  103. width: 59vw;
  104. height: 7vw;
  105. background-color: #000;
  106. position: absolute;
  107. right: 30vw;
  108. bottom: 3.5vw;
  109. margin: auto;
  110. border-radius: 0px 0px 20px 20px;
  111. background-image: url('https://w0.peakpx.com/wallpaper/763/357/HD-wallpaper-forest-night-waterfall-forest-fantasy-tree-luminos-green-waterfall-paperbule-net-blue.jpg');
  112. background-position: bottom;
  113. background-size: cover;
  114. z-index: 3;
  115. }
  116.  
  117. #friendbar {
  118. width: 65vw;
  119. height: 8vw;
  120. background-color: #000;
  121. position: absolute;
  122. right: 27vw;
  123. bottom: 10.5vw;
  124. margin: auto;
  125. border-radius: 20px;
  126. background-image: url('https://w0.peakpx.com/wallpaper/763/357/HD-wallpaper-forest-night-waterfall-forest-fantasy-tree-luminos-green-waterfall-paperbule-net-blue.jpg');
  127. background-position: bottom;
  128. background-size: cover;
  129. z-index: 2;
  130. }
  131.  
  132. #container {
  133. width: 59vw;
  134. height: 25vw;
  135. background-color: #000;
  136. position: absolute;
  137. right: 30vw;
  138. bottom: 18.5vw;
  139. margin: auto;
  140. border-radius: 20px 20px 0px 0px;
  141. background-image: url('https://w0.peakpx.com/wallpaper/763/357/HD-wallpaper-forest-night-waterfall-forest-fantasy-tree-luminos-green-waterfall-paperbule-net-blue.jpg');
  142. background-position: center;
  143. background-size: cover;
  144. z-index: 2;
  145. }
  146.  
  147. #friends {
  148. background-color: rgb(0, 0, 0, 0.5);
  149. width: 63vw;
  150. height: 6vw;
  151. margin:auto;
  152. position: absolute;
  153. padding: 5px;
  154. font-family: 'Arima', cursive;
  155. font-size: 18px;
  156. color: #000;
  157. right: 0.5vw;
  158. top: 0.5vw;
  159. z-index:2;
  160. border: 5px double #000;
  161. border-radius: 20px;
  162. }
  163.  
  164. #content {
  165. background-color: rgb(0, 0, 0, 0.5);
  166. width: 57vw;
  167. height: 19vw;
  168. margin:auto;
  169. position: absolute;
  170. padding: 5px;
  171. font-family: 'Arima', cursive;
  172. font-size: 18px;
  173. color: #fff;
  174. left: 0.5vw;
  175. top: 0.5vw;
  176. z-index:2;
  177. border: 5px double #000;
  178. border-radius: 20px;
  179. }
  180.  
  181. #nav {
  182. background-color: transparent;
  183. width: 48vw;
  184. height: 5px;
  185. margin:auto;
  186. position: absolute;
  187. left: 3vw;
  188. top: 0.8vw;
  189. text-align: center;
  190. z-index: 10;
  191. }
  192.  
  193. #nav a, #nav a:link, #nav a:visited {
  194. display:inline-block;
  195. background: #332628;
  196. color: #332628;
  197. margin-top: 0px;
  198. margin-bottom: 0px;
  199. margin-left: 4vw;
  200. height: 100px;
  201. width: 150px;
  202. border-radius: 10px;
  203. box-shadow: 5px 5px 25px #d4dbee;
  204. -webkit-transition: 0.5s linear;
  205. -moz-transition: 0.5s linear;
  206. -o-transition: 0.5s linear;
  207. transition: 0.5s linear;
  208. }
  209.  
  210. #nav a:active, #nav a:hover {
  211. display:inline-block;
  212. height: 100px;
  213. width: 150px;
  214. border-radius: 100%;
  215. text-decoration:none;
  216. background: rgb(0,0,0,0.4);
  217. color: rgb(0,0,0,0.4);
  218. margin-left: 4vw;
  219. box-shadow: 0px 0px 5px #d4dbee;
  220. -webkit-transition: 0.5s linear;
  221. -moz-transition: 0.5s linear;
  222. -o-transition: 0.5s linear;
  223. transition: 0.5s linear;
  224. }
  225.  
  226. #icon {
  227. width: 150px;
  228. margin: 0px;
  229. border: none;
  230. height: 100px;
  231. background-color:transparent;
  232. position: absolute;
  233. background-image:url("https://i.ibb.co/cxJ9hsb/2.jpg");
  234. background-repeat:no-repeat;
  235. background-position: center;
  236. background-size: cover;
  237. border-radius: 10px;
  238. border: 2px solid #000;
  239. filter: blur(4px) grayscale(100%);
  240. box-sizing: border-box;
  241. z-index: 11;
  242. transition: 0.5s;
  243. }
  244.  
  245. #icon:hover {
  246. filter: blur(0px) grayscale(0%);
  247. background-position: 40% 10%;
  248. }
  249.  
  250. #icon2 {
  251. width: 150px;
  252. margin: 0px;
  253. border: none;
  254. height: 100px;
  255. background-color:transparent;
  256. position: absolute;
  257. background-image:url("https://i.ibb.co/M6D0W1K/3.jpg");
  258. background-repeat:no-repeat;
  259. background-position: center;
  260. background-size: cover;
  261. border-radius: 10px;
  262. border: 2px solid #000;
  263. z-index: 11;
  264. filter: blur(4px) grayscale(100%);
  265. box-sizing: border-box;
  266. transition: 0.5s;
  267. }
  268.  
  269. #icon2:hover {
  270. filter: blur(0px) grayscale(0%);
  271. background-position: 40% 10%;
  272. }
  273.  
  274. #icon3 {
  275. width: 150px;
  276. margin: 0px;
  277. border: none;
  278. height: 100px;
  279. background-color:transparent;
  280. position: absolute;
  281. background-image:url("https://i.ibb.co/85tLSbK/10.jpg");
  282. background-repeat:no-repeat;
  283. background-position: center;
  284. background-size: cover;
  285. border-radius: 10px;
  286. border: 2px solid #000;
  287. z-index: 11;
  288. filter: blur(4px) grayscale(100%);
  289. box-sizing: border-box;
  290. transition: 0.5s;
  291. }
  292.  
  293. #icon3:hover {
  294. filter: blur(0px) grayscale(0%);
  295. background-position: 40% 10%;
  296. }
  297.  
  298. #icon4 {
  299. width: 150px;
  300. margin: 0px;
  301. border: none;
  302. height: 100px;
  303. background-color:transparent;
  304. position: absolute;
  305. background-image:url("https://i.ibb.co/J38LWW5/8.jpg");
  306. background-repeat:no-repeat;
  307. background-position: center;
  308. background-size: cover;
  309. border-radius: 10px;
  310. border: 2px solid #000;
  311. z-index: 11;
  312. filter: blur(4px) grayscale(100%);
  313. box-sizing: border-box;
  314. transition: 0.5s;
  315. }
  316.  
  317. #icon4:hover {
  318. filter: blur(0px) grayscale(0%);
  319. background-position: 40% 10%;
  320. }
  321.  
  322. .name {position: absolute;
  323. font-family: 'My Soul';
  324. color: #fff;
  325. font-size: 5vw;
  326. bottom: -1.1vw;
  327. left: 13vw;
  328. width: 36vw;
  329. height: 6.1vw;
  330. border: 0px solid #000;
  331. text-align: justify;
  332. text-shadow: -1px 0 #c0c0c0, 0 1px #000,1px 0 #000, 0 -1px #c0c0c0;
  333. overflow: auto;
  334. padding:5px 5px 5px 5px;
  335. z-index: 5;}
  336.  
  337. .title { background: transparent;
  338. background:url('https://i.pinimg.com/originals/89/4c/a8/894ca8c7727226354ca2a637a7cfab1b.gif') 50px 50px repeat;
  339. background-position: bottom;
  340. position: absolute;
  341. font-family: 'My Soul';
  342. font-size: 5vw;
  343. bottom: -1.1vw;
  344. left: 13vw;
  345. width: 36vw;
  346. height: 6.1vw;
  347. text-align: justify;
  348. padding:5px 5px 5px 5px;
  349. -webkit-text-fill-color: transparent;
  350. -webkit-background-clip: text;
  351. z-index: 6;}
  352.  
  353. h1{
  354. background: url('https://thumbs.gfycat.com/DazzlingWebbedChinesecrocodilelizard-size_restricted.gif');
  355. background-size: cover;
  356. background-position: center;
  357. text-align: center;
  358. border: 2px solid #000;
  359. border-radius: 15px;
  360. font-size: 30px;
  361. font-family: 'Aboreto', cursive;
  362. color: #000;
  363. text-shadow: 1px 1px 0 #c0c0c0, -1px -1px 0 #c0c0c0, -1px 1px 0 #c0c0c0, 1px -1px 0 #c0c0c0;
  364. line-height: 2;
  365. }
  366. h2{
  367. background: url('https://data.whicdn.com/images/58914184/original.gif');
  368. background-size: cover;
  369. background-position: center;
  370. text-align: center;
  371. border: 2px solid #000;
  372. border-radius: 15px;
  373. font-size: 30px;
  374. font-family: 'Aboreto', cursive;
  375. color: #000;
  376. text-shadow: 1px 1px 0 #c0c0c0, -1px -1px 0 #c0c0c0, -1px 1px 0 #c0c0c0, 1px -1px 0 #c0c0c0;
  377. line-height: 2;
  378. }
  379. h3{
  380. background: url('https://64.media.tumblr.com/cf09c3433bd9ae18fb28473c966f62e6/tumblr_n5hityUk251r922azo1_500.gif');
  381. background-size: cover;
  382. background-position: center;
  383. text-align: center;
  384. border: 2px solid #000;
  385. border-radius: 15px;
  386. font-size: 30px;
  387. font-family: 'Aboreto', cursive;
  388. color: #000;
  389. text-shadow: 1px 1px 0 #c0c0c0, -1px -1px 0 #c0c0c0, -1px 1px 0 #c0c0c0, 1px -1px 0 #c0c0c0;
  390. line-height: 2;
  391. }
  392. h4{
  393. background: url('https://i.pinimg.com/originals/bb/fc/3e/bbfc3e12b6068cb3a110b5c18448abeb.gif');
  394. background-size: cover;
  395. background-position: bottom;
  396. text-align: center;
  397. border: 2px solid #000;
  398. border-radius: 15px;
  399. font-size: 30px;
  400. font-family: 'Aboreto', cursive;
  401. color: #000;
  402. text-shadow: 1px 1px 0 #c0c0c0, -1px -1px 0 #c0c0c0, -1px 1px 0 #c0c0c0, 1px -1px 0 #c0c0c0;
  403. line-height: 2;
  404. }
  405. h6{border-bottom: 1px solid #ecc95d; text-align: center; font-size: 35px; font-family: 'Aboreto', cursive; color: #ecc95d;}
  406. i{color: #ecc95d;}
  407. b{color: #cce0da;}
  408. a{color: #f7faf9; text-decoration: none;}
  409. </style>
  410. <div class="cover"></div>
  411.  
  412. <div id="image"></div>
  413.  
  414. <div id="bar">
  415. <div id="nav">
  416. <a href="#one"><div id="icon"></div></a>
  417. <a href="#two"><div id="icon2"></div></a>
  418. <a href="#three"><div id="icon3"></div></a>
  419. <a href="#four"><div id="icon4"></div></a>
  420. </div>
  421. </div>
  422.  
  423. <div id="friendbar">
  424. <div id="friends">
  425. <div style="width: 63vw; height: 6vw; overflow-y: hidden;">
  426.  
  427. <a name="five"></a>
  428. <div style="width: 63vw; height: 6vw; overflow: auto;">
  429.  
  430. <marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">
  431. <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>
  432. </marquee>
  433. </div>
  434. </div>
  435. </div>
  436. </div>
  437.  
  438. <div id="container">
  439.  
  440. <div class="name">The Goat Monk</div>
  441. <div class="title">The Goat Monk</div>
  442.  
  443. <div id="content">
  444. <div style="width: 57vw; height: 19vw; overflow-y: hidden;">
  445.  
  446. <a name="one"></a>
  447. <div style="width: 57vw; height: 19vw; overflow: auto;" align="center">
  448. <h1>The Basics</h1>
  449. <span style="float:left;"><b>Name</b></span><span style="float:right;">Melenthe</span><br>
  450. <span style="float:left;"><b>Alias(es)</b></span><span style="float:right;">Goat Monk, etc.</span><br>
  451. <span style="float:left;"><b>Gender</b></span><span style="float:right;">Female</span><br>
  452. <span style="float:left;"><b>Age</b></span><span style="float:right;">How old?</span><br>
  453. <span style="float:left;"><b>Height</b></span><span style="float:right;">How tall?</span><br>
  454. <span style="float:left;"><b>Weight</b></span><span style="float:right;">How heavy?</span><br><br>
  455. <span style="float:left;"><b>Orientation</b></span><span style="float:right;">Sexuality?</span><br>
  456. <span style="float:left;"><b>Relationship</b></span><span style="float:right;">Dating anyone?</span><br>
  457. <span style="float:left;"><b>Race</b></span><span style="float:right;">What's their race?</span><br>
  458. <span style="float:left;"><b>Eyes</b></span><span style="float:right;">Color of the eyes?</span><br>
  459. <span style="float:left;"><b>Hair</b></span><span style="float:right;">How about hair?</span><br>
  460. <span style="float:left;"><b>Build</b></span><span style="float:right;">What's their body type?</span><br>
  461. </div>
  462.  
  463. <a name="two"></a>
  464. <div style="width: 57vw; height: 19vw; overflow: auto;" align="left">
  465. <h3>Abilities</h3>
  466.  
  467. <span style="float:left;"><b>Strength</b></span><span style="float:right;">14</span><br>
  468. <span style="float:left;"><b>Dexterity</b></span><span style="float:right;">18</span><br>
  469. <span style="float:left;"><b>Constitution</b></span><span style="float:right;">12</span><br>
  470. <span style="float:left;"><b>Wisdom</b></span><span style="float:right;">18</span><br>
  471. <span style="float:left;"><b>Intelligence</b></span><span style="float:right;">11</span><br>
  472. <span style="float:left;"><b>Charisma</b></span><span style="float:right;">11</span><br><br>
  473.  
  474. <h6>Unlocked Features</h6>
  475.  
  476. List the features unlocked by this character here! I recommend using <b>bold</b> to highlight the name of the feature before explaining it, and make sure to use <br> to space the features out!
  477. </div>
  478.  
  479.  
  480. <a name="three"></a>
  481. <div style="width: 57vw; height: 19vw; overflow: auto;" align="center">
  482. <h2>History</h2>
  483. Write down what history she has here, every character- even a DnD character- has a past!~
  484. </div>
  485.  
  486. <a name="four"></a>
  487. <div style="width: 57vw; height: 19vw; overflow: auto;" align="left">
  488. <h4>Out of Character</h4>
  489. <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>
  490. <b>01</b>. OOC<br>
  491. <b>02</b>. OOC<br>
  492. <b>03</b>. OOC<br>
  493. <b>04</b>. OOC<br>
  494. <b>05</b>. OOC<br>
  495. </div>
  496. </div>
  497. </div>
  498. </div>
  499. </body>
  500. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement