Advertisement
RageQxeen

Demon Momma Bear

Dec 1st, 2022
71
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.17 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.  
  48. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  49. <script>
  50. $(document).ready(function(){
  51. $("#image").click(function(){
  52. $("#image2").animate({opacity: "1", left: "5vw"}, 'slow');
  53. });
  54. });
  55. $(document).ready(function(){
  56. $("#image").click(function(){
  57. $("#container").animate({opacity: "1"}, 'slow');
  58. });
  59. });
  60. $(document).ready(function(){
  61. $("#image").click(function(){
  62. $("#image").animate({opacity: "0"}, 'slow');
  63. });
  64. });
  65. $(document).ready(function(){
  66. $("#image").click(function(){
  67. $(".name").animate({opacity: "0"}, 'slow');
  68. });
  69. });
  70. $(document).ready(function(){
  71. $("#image").click(function(){
  72. $(".title").animate({opacity: "0"}, 'slow');
  73. });
  74. });
  75. $(document).ready(function(){
  76. $("#image").click(function(){
  77. $(".indicator").animate({opacity: "0",}, 'slow');
  78. });
  79. });
  80. </script>
  81.  
  82. <style type="text/css">
  83.  
  84. @import url(https://fonts.googleapis.com/css?family=Merienda|Yeseva+One|Kaushan+Script);
  85.  
  86. html, body {
  87. background: #348F50; /* fallback for old browsers */
  88. background: -webkit-linear-gradient(to right, #56B4D3, #348F50); /* Chrome 10-25, Safari 5.1-6 */
  89. background: linear-gradient(to right, #56B4D3, #348F50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  90. }
  91.  
  92. ::-webkit-scrollbar-button:vertical:{
  93. background-color: #transparent;}
  94.  
  95. ::-webkit-scrollbar-thumb:vertical {
  96. background-color:#transparent;
  97. height:150px;}
  98.  
  99. ::-webkit-scrollbar-thumb:horizontal {
  100. background-color:#transparent;
  101. height:60px;}
  102.  
  103.  
  104. ::-webkit-scrollbar {
  105. height:60px;
  106. width:5px;
  107. background-color:#transparent;}
  108.  
  109. .cover {
  110. background:url('https://thumbs.gfycat.com/RingedSpicyKodiakbear-size_restricted.gif');
  111. opacity: 0.4;
  112. position: absolute;
  113. width: 100vw;
  114. height: 100vh;
  115. left: 0vw;
  116. top: 0vw;
  117. z-index: 1;
  118. overflow: hidden;
  119. }
  120.  
  121. #image {
  122. width: 30vw;
  123. margin: 0px;
  124. border: none;
  125. height: 45vw;
  126. background-color:transparent;
  127. position: absolute;
  128. right: 1vw;
  129. bottom: 0vw;
  130. background-image:url("https://i.ibb.co/XJxQVLm/1.png");
  131. background-repeat:no-repeat;
  132. background-position: bottom;
  133. background-size: 100%;
  134. z-index: 3;
  135. }
  136.  
  137. #image2 {
  138. width: 20vw;
  139. margin: 0px;
  140. border: none;
  141. height: 50vw;
  142. background-color:transparent;
  143. position: absolute;
  144. left: 1vw;
  145. bottom: 2vw;
  146. background-image:url("https://i.ibb.co/SNyrcQG/2.png");
  147. background-repeat:no-repeat;
  148. background-position: bottom;
  149. background-size: 100%;
  150. opacity: 0;
  151. z-index: 3;
  152. }
  153.  
  154. .alias {position: absolute;
  155. font-family: 'Merienda';
  156. background-color: transparent;
  157. background: -webkit-linear-gradient(right, #12D8FA, #71B280);
  158. -webkit-background-clip: text;
  159. -webkit-text-fill-color: transparent;
  160. font-size: 4vw;
  161. top: -5vw;
  162. right: 2vw;
  163. width: 50vw;
  164. height: 6vw;
  165. text-align: center;
  166. line-height: 1.5;
  167. overflow: auto;
  168. padding:5px 5px 5px 5px;
  169. z-index: 3;}
  170.  
  171. #container {
  172. background-color: transparent;
  173. background-image:url("https://www.teahub.io/photos/full/275-2754051_anime-traditional-japanese-house.jpg");
  174. background-repeat:no-repeat;
  175. background-position: bottom;
  176. background-size: cover;
  177. width: 55vw;
  178. height: 30vw;
  179. margin:auto;
  180. position: absolute;
  181. padding: 5px;
  182. left: 15vw;
  183. bottom: 3vw;
  184. opacity: 0;
  185. z-index:2;
  186. box-shadow: 0px 10px 15px #000;
  187. border-right: solid 4px #fff;
  188. border-bottom: solid 4px #fff;
  189. border-top: solid 4px #fff;
  190. }
  191.  
  192. #friendlist {
  193. background-color: rgba(0,0,0,0.8);
  194. width: 54vw;
  195. height: 6vw;
  196. margin:auto;
  197. position: absolute;
  198. padding: 5px;
  199. color: #000;
  200. right: .5vw;
  201. top: .5vw;
  202. z-index:1;
  203. border: #000000 solid 2px;
  204. }
  205.  
  206. #content {
  207. background-color: rgb(0, 0, 0, 0.8);
  208. width: 51vw;
  209. height: 17vw;
  210. margin:auto;
  211. position: absolute;
  212. padding: 10px;
  213. font-family: 'Yeseva One', cursive;
  214. font-size: 18px;
  215. color: #fff;
  216. right: 0.5vw;
  217. bottom: .5vw;
  218. z-index:1;
  219. }
  220.  
  221. #nav {
  222. background-color: transparent;
  223. width: 40vw;
  224. height: 5px;
  225. margin:auto;
  226. position: absolute;
  227. right: 8.5vw;
  228. top:7.5vw;
  229. text-align: center;
  230. z-index: 10;
  231. }
  232.  
  233. #nav a, #nav a:link, #nav a:visited {
  234. display:inline-block;
  235. background: #332628;
  236. color: #332628;
  237. margin-top: 0px;
  238. margin-bottom: 0px;
  239. margin-left: 1vw;
  240. height: 80px;
  241. width: 130px;
  242. border-radius: 10px;
  243. box-shadow: 5px 5px 25px #d4dbee;
  244. -webkit-transition: 0.5s linear;
  245. -moz-transition: 0.5s linear;
  246. -o-transition: 0.5s linear;
  247. transition: 0.5s linear;
  248. }
  249.  
  250. #nav a:active, #nav a:hover {
  251. display:inline-block;
  252. height: 80px;
  253. width: 130px;
  254. border-radius: 100%;
  255. text-decoration:none;
  256. background: rgb(0,0,0,0.4);
  257. color: rgb(0,0,0,0.4);
  258. margin-left: 1vw;
  259. box-shadow: 0px 0px 5px #d4dbee;
  260. -webkit-transition: 0.5s linear;
  261. -moz-transition: 0.5s linear;
  262. -o-transition: 0.5s linear;
  263. transition: 0.5s linear;
  264. }
  265.  
  266. #icon {
  267. width: 130px;
  268. margin: 0px;
  269. border: none;
  270. height: 80px;
  271. background-color:transparent;
  272. position: absolute;
  273. background-image:url("https://i.ibb.co/s9758yG/97.jpg");
  274. background-repeat:no-repeat;
  275. background-position: center;
  276. background-size: cover;
  277. border-radius: 10px;
  278. border: 2px solid #000;
  279. filter: blur(4px) grayscale(100%);
  280. box-sizing: border-box;
  281. z-index: 11;
  282. transition: 0.5s;
  283. }
  284.  
  285. #icon:hover {
  286. filter: blur(0px) grayscale(0%);
  287. background-position: 40% 10%;
  288. }
  289.  
  290. #icon2 {
  291. width: 130px;
  292. margin: 0px;
  293. border: none;
  294. height: 80px;
  295. background-color:transparent;
  296. position: absolute;
  297. background-image:url("https://i.ibb.co/dWG3ZBV/90.jpg");
  298. background-repeat:no-repeat;
  299. background-position: center;
  300. background-size: cover;
  301. border-radius: 10px;
  302. border: 2px solid #000;
  303. z-index: 11;
  304. filter: blur(4px) grayscale(100%);
  305. box-sizing: border-box;
  306. transition: 0.5s;
  307. }
  308.  
  309. #icon2:hover {
  310. filter: blur(0px) grayscale(0%);
  311. background-position: 40% 10%;
  312. }
  313.  
  314. #icon3 {
  315. width: 130px;
  316. margin: 0px;
  317. border: none;
  318. height: 80px;
  319. background-color:transparent;
  320. position: absolute;
  321. background-image:url("https://i.ibb.co/FmpyWjG/82.jpg");
  322. background-repeat:no-repeat;
  323. background-position: center;
  324. background-size: cover;
  325. border-radius: 10px;
  326. border: 2px solid #000;
  327. z-index: 11;
  328. filter: blur(4px) grayscale(100%);
  329. box-sizing: border-box;
  330. transition: 0.5s;
  331. }
  332.  
  333. #icon3:hover {
  334. filter: blur(0px) grayscale(0%);
  335. background-position: 40% 10%;
  336. }
  337.  
  338. #icon4 {
  339. width: 130px;
  340. margin: 0px;
  341. border: none;
  342. height: 80px;
  343. background-color:transparent;
  344. position: absolute;
  345. background-image:url("https://i.ibb.co/phCr9t9/78.jpg");
  346. background-repeat:no-repeat;
  347. background-position: center;
  348. background-size: cover;
  349. border-radius: 10px;
  350. border: 2px solid #000;
  351. z-index: 11;
  352. filter: blur(4px) grayscale(100%);
  353. box-sizing: border-box;
  354. transition: 0.5s;
  355. }
  356.  
  357. #icon4:hover {
  358. filter: blur(0px) grayscale(0%);
  359. background-position: 40% 10%;
  360. }
  361.  
  362. .indicator {
  363. position: absolute;
  364. font-family: 'Merienda';
  365. font-size: 1.3vw;
  366. color: #000;
  367. top: 1vw;
  368. left: 38vw;
  369. width: 25vw;
  370. height: 2vw;
  371. text-align: center;
  372. overflow: auto;
  373. opacity: 1;
  374. z-index: 11;
  375. }
  376.  
  377. a {text-decoration: none; color: #b6b7b9;}
  378. h1 {
  379. background: url(https://i.pinimg.com/originals/27/0e/04/270e04a909901f4867592e4db2174a47.gif);
  380. background-position: 55% 70%;
  381. background-size:cover;
  382. line-height:1vw;
  383. letter-spacing: 0.2vw;
  384. font-size: 4vh;
  385. font-family: 'Kaushan Script';
  386. text-align: center;
  387. border: .2vh solid #15181F;
  388. border-radius: 10px;
  389. color: #fff;
  390. filter: drop-shadow(0px 0px 10px #15181F);
  391. text-shadow: 3px 1px 2px #15181F, 0 0 25px #15181F;
  392. margin-top: 1vh;
  393. }
  394. </style>
  395. <div class="cover"></div>
  396.  
  397. <div class="indicator">Click her.~</div>
  398.  
  399. <div id="image"></div>
  400.  
  401.  
  402. <div id="image2"></div>
  403. <div id="container">
  404. <div class="alias">The Demon Mother Bear</div>
  405.  
  406. <div id="nav">
  407. <a href="#one"><div id="icon"></div></a>
  408. <a href="#two"><div id="icon2"></div></a>
  409. <a href="#three"><div id="icon3"></div></a>
  410. <a href="#four"><div id="icon4"></div></a>
  411. </div>
  412.  
  413. <div id="friendlist">
  414. <div style="width: 54vw; height: 6vw; overflow: auto;" align="center">
  415. <marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">
  416. <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>
  417. </marquee>
  418. </div>
  419. </div>
  420.  
  421. <div id="content">
  422. <div style="width: 51vw; height: 17vw; overflow-y: hidden;">
  423.  
  424. <a name="one"></a>
  425. <div style="width: 51vw; height: 17vw; overflow: auto;" align="center">
  426. <h1>The Basics</h1>
  427. <span style="float:left;"><b>True Name</b></span><span style="float:right;">HERE</span><br>
  428. <span style="float:left;"><b>Alias(es)</b></span><span style="float:right;"><a title="HERE">hover</a></span><br>
  429. <span style="float:left;"><b>Gender</b></span><span style="float:right;">HERE</span><br>
  430. <span style="float:left;"><b>Apparent Age</b></span><span style="float:right;">HERE</span><br><br>
  431. <span style="float:left;"><b>Ethnicity</b></span><span style="float:right;">HERE</span><br>
  432. <span style="float:left;"><b>Orientation</b></span><span style="float:right;">HERE</span><br>
  433. <span style="float:left;"><b>Marital Status</b></span><span style="float:right;">HERE</span><br>
  434. <span style="float:left;"><b>Affiliation</b></span><span style="float:right;">HERE</span><br>
  435. <span style="float:left;"><b>Alignment</b></span><span style="float:right;">HERE</span><br>
  436. <span style="float:left;"><b>Handicaps</b></span><span style="float:right;">HERE</span><br>
  437. <span style="float:left;"><b>Allergies</b></span><span style="float:right;">HERE</span><br><br>
  438. <span style="float:left;"><b>Height</b></span><span style="float:right;">HERE</span><br>
  439. <span style="float:left;"><b>Weight</b></span><span style="float:right;">HERE</span><br>
  440. <span style="float:left;"><b>Body Type</b></span><span style="float:right;">HERE</span><br>
  441. <span style="float:left;"><b>Iris Color</b></span><span style="float:right;">HERE</span><br>
  442. <span style="float:left;"><b>Hair Color</b></span><span style="float:right;">HERE</span><br>
  443. <span style="float:left;"><b>Skin Tone</b></span><span style="float:right;">HERE</span><br>
  444. <span style="float:left;"><b>Dominant Hand</b></span><span style="float:right;">HERE</span><br><br>
  445. <span style="float:left;"><b>Album</b></span><span style="float:right;"><a href="https://ibb.co/album/pBmXQR" target="_blank">Click</a>.</span>
  446. </div>
  447.  
  448. <a name="two"></a>
  449. <div style="width: 51vw; height: 17vw; overflow: auto;" align="left">
  450. <h1>Personality</h1>
  451.  
  452. </div>
  453.  
  454.  
  455. <a name="three"></a>
  456. <div style="width: 51vw; height: 17vw; overflow: auto;" align="left">
  457. <h1>History</h1>
  458.  
  459. </div>
  460.  
  461. <a name="four"></a>
  462. <div style="width: 51vw; height: 17vw; overflow: auto;" align="left">
  463. <h1>Out of Character</h1>
  464. <center><b>00</b>. Code made by <a target="_blank" href="https://rageqxeen.neocities.org/vw_codes/rageqxeen.html">RageQxeen</a>, do not steal.</center><br>
  465. <b>01</b>. OOC<br>
  466. <b>02</b>. OOC<br>
  467. <b>03</b>. OOC<br>
  468. <b>04</b>. OOC<br>
  469. <b>05</b>. OOC<br>
  470. </div>
  471. </div>
  472. </div>
  473. </div>
  474. </body>
  475. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement