Advertisement
RageQxeen

Bubblegum Bitch

Oct 7th, 2022 (edited)
103
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.76 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=Alice|Gayathri|IM+Fell+Great+Primer+SC&display=swap');
  50.  
  51. html, body {
  52. background: #189496;
  53. background-image:url("");
  54. background-size:400px;
  55. background-repeat:no-repeat;
  56. background-position:center bottom;
  57. }
  58.  
  59. ::-webkit-scrollbar-button:vertical:{
  60. background-color: #transparent;}
  61.  
  62. ::-webkit-scrollbar-thumb:vertical {
  63. background-color:#transparent;
  64. height:150px;}
  65.  
  66. ::-webkit-scrollbar-thumb:horizontal {
  67. background-color:#transparent;
  68. height:60px;}
  69.  
  70.  
  71. ::-webkit-scrollbar {
  72. height:60px;
  73. width:5px;
  74. background-color:#transparent;}
  75.  
  76. #image {
  77. width: 30vw;
  78. margin: 0px;
  79. border: none;
  80. height: 35vw;
  81. background-color:transparent;
  82. position: absolute;
  83. left: 5vw;
  84. bottom: 0vw;
  85. background-image:url("http://i.picpar.com/euXd.jpg");
  86. background-repeat:no-repeat;
  87. background-position: bottom;
  88. background-size: 100%;
  89. -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 2s both;
  90. animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 2s both;
  91. }
  92.  
  93. @-webkit-keyframes fade-in {
  94. 0% {
  95. opacity: 0;
  96. }
  97. 100% {
  98. opacity: 1;
  99. }
  100. }
  101. @keyframes fade-in {
  102. 0% {
  103. opacity: 0;
  104. }
  105. 100% {
  106. opacity: 1;
  107. }
  108. }
  109.  
  110.  
  111. #container {
  112. background: linear-gradient(90deg, rgba(247,110,230,1) 0%, rgba(81,178,232,1) 100%);
  113. width: 80vw;
  114. height: 6vw;
  115. margin:auto;
  116. position: absolute;
  117. padding: 5px;
  118. right: 0vw;
  119. top: 11vw;
  120. z-index:1;
  121. border: 1px solid #000;
  122. border-radius: 15px 0px 0px 15px;
  123. -webkit-animation: slide-in-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  124. animation: slide-in-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  125. }
  126.  
  127. @-webkit-keyframes slide-in-right {
  128. 0% {
  129. -webkit-transform: translateX(1000px);
  130. transform: translateX(1000px);
  131. opacity: 0;
  132. }
  133. 100% {
  134. -webkit-transform: translateX(0);
  135. transform: translateX(0);
  136. opacity: 1;
  137. }
  138. }
  139. @keyframes slide-in-right {
  140. 0% {
  141. -webkit-transform: translateX(1000px);
  142. transform: translateX(1000px);
  143. opacity: 0;
  144. }
  145. 100% {
  146. -webkit-transform: translateX(0);
  147. transform: translateX(0);
  148. opacity: 1;
  149. }
  150. }
  151.  
  152. #content {
  153. background: linear-gradient(90deg, rgba(207,126,230,1) 24%, rgba(134,156,231,1) 68%);
  154. width: 40vw;
  155. height: 30vw;
  156. margin:auto;
  157. position: absolute;
  158. padding: 5px;
  159. font-family: 'Gayathri', cursive;
  160. font-size: 18px;
  161. color: #000;
  162. right: 15vw;
  163. top: 6.6vw;
  164. z-index:1;
  165. border-left: solid 1px #000;
  166. border-right: solid 1px #000;
  167. border-bottom: solid 1px #000;
  168. border-radius: 0px 0px 15px 15px;
  169. -webkit-animation: slide-in-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s both;
  170. animation: slide-in-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s both;
  171. }
  172.  
  173. #friendlist {
  174. background: linear-gradient(90deg, rgba(207,126,230,1) 24%, rgba(134,156,231,1) 68%);
  175. width: 40vw;
  176. height: 8vw;
  177. margin:auto;
  178. position: absolute;
  179. padding: 5px;
  180. font-family: 'Gayathri', cursive;
  181. font-size: 18px;
  182. color: #000;
  183. right: 15vw;
  184. top: -8.65vw;
  185. z-index:1;
  186. border-left: solid 1px #000;
  187. border-right: solid 1px #000;
  188. border-top: solid 1px #000;
  189. border-radius: 15px 15px 0px 0px;
  190. -webkit-animation: slide-in-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s both;
  191. animation: slide-in-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s both;
  192. }
  193.  
  194. @-webkit-keyframes slide-in-top {
  195. 0% {
  196. -webkit-transform: translateY(-1000px);
  197. transform: translateY(-1000px);
  198. opacity: 0;
  199. }
  200. 100% {
  201. -webkit-transform: translateY(0);
  202. transform: translateY(0);
  203. opacity: 1;
  204. }
  205. }
  206. @keyframes slide-in-top {
  207. 0% {
  208. -webkit-transform: translateY(-1000px);
  209. transform: translateY(-1000px);
  210. opacity: 0;
  211. }
  212. 100% {
  213. -webkit-transform: translateY(0);
  214. transform: translateY(0);
  215. opacity: 1;
  216. }
  217. }
  218.  
  219. #name {
  220. z-index:15;
  221. position: absolute;
  222. left: 2vw;
  223. bottom: 1vw;
  224. margin: auto;
  225. background: #transparent;
  226. width: 40vw;
  227. height: 4vw;
  228. font-family: 'Alice', cursive;
  229. font-size: 4.5vw;
  230. background: url(https://media1.tenor.com/images/5033f64d361679ddf6b9a141ae645a83/tenor.gif?itemid=5426625) 50px 50px repeat;
  231. -webkit-text-fill-color: transparent;
  232. -webkit-background-clip: text;
  233. background-position: bottom;
  234. display:block;
  235. text-align: center;
  236. letter-spacing: 1px;
  237. -webkit-transition:opacity 2s linear;
  238. line-height:3.6vw;
  239. }
  240.  
  241. #nameunder{
  242. z-index:15;
  243. position: absolute;
  244. left: 2vw;
  245. bottom: 1vw;
  246. margin: auto;
  247. background: #transparent;
  248. width: 40vw;
  249. height: 4vw;
  250. font-family: 'Alice', cursive;
  251. font-size: 4.5vw;
  252. -webkit-text-fill-color: #A9A9A9;
  253. text-transform: none;
  254. -webkit-background-clip: text;
  255. display:block;
  256. text-shadow: -1px 0 #999, 0 1px #000,1px 0 #000, 0 -1px #999;
  257. text-align: center;
  258. letter-spacing: 1px;
  259. -webkit-transition:opacity 2s linear;
  260. line-height:3.6vw;
  261. }
  262.  
  263. #nav {
  264. background-color: transparent;
  265. width: 15vw;
  266. height: .5vw;
  267. margin:auto;
  268. position: absolute;
  269. right: 0vw;
  270. bottom: 3.5vw;
  271. text-align: center;
  272. text-decoration: none;
  273. z-index:3;
  274. }
  275.  
  276. #nav a, #nav a:link, #nav a:visited {
  277. display:inline-block;
  278. text-decoration: none;
  279. text-align: center;
  280. background: #4ce3ff;
  281. color: transparent;
  282. box-shadow: 0px 0px 5px #000;
  283. padding: 4px;
  284. height: .7vw;
  285. width: 2.5vw;
  286. margin: 5px;
  287. border-radius: 2px;
  288. }
  289.  
  290. #nav a:active, #nav a:hover {
  291. display:inline-block;
  292. height: .7vw;
  293. width: 2.5vw;
  294. text-decoration:none;
  295. background: #000;
  296. box-shadow: 0px 0px 5px #4ce3ff;
  297. color: transparent;
  298. margin: 5px;
  299. }
  300.  
  301. i{color: #426ed9;}
  302. b{color: #000;}
  303. a{color: #333; text-decoration: none;}
  304. h1{border-bottom: 1px solid #000; text-align: center; font-size: 30px; font-family: 'IM Fell Great Primer SC', cursive; color: #000;}
  305. h2{border-bottom: 1px solid #000; text-align: left; font-size: 30px; font-family: 'IM Fell Great Primer SC', cursive; color: #000;}
  306. h3{border-bottom: 1px solid #000; text-align: right; font-size: 30px; font-family: 'IM Fell Great Primer SC', cursive; color: #000;}
  307. </style>
  308.  
  309. <div id="image"></div>
  310.  
  311. <div id="container">
  312. <div id="nameunder">Bubblegum Bitch</div><div id="name">Bubblegum Bitch</div>
  313.  
  314. <div id="nav">
  315. <a href="#one">Main</a>
  316. <a href="#two">Seco</a>
  317. <a href="#three">Thir</a>
  318. <a href="#four">Four</a>
  319. </div>
  320.  
  321. <div id="content">
  322. <div style="width: 40vw; height: 30vw; overflow-y: hidden;">
  323.  
  324. <a name="one"></a>
  325. <div style="width: 40vw; height: 30vw; overflow: auto;" align="center">
  326. <span style="float:left;"><b>Name</b></span><span style="float:right;"> </span><br>
  327. <span style="float:left;"><b>Alias(es)</b></span><span style="float:right;"><a title="TBA">hover</a></span><br>
  328. <span style="float:left;"><b>Hero Name</b></span><span style="float:right;"> </span><br>
  329. <span style="float:left;"><b>Gender</b></span><span style="float:right;"> </span><br>
  330. <span style="float:left;"><b>Age</b></span><span style="float:right;"> </span><br>
  331. <span style="float:left;"><b>Race</b></span><span style="float:right;"> </span><br>
  332. <span style="float:left;"><b>Class</b></span><span style="float:right;"> </span><br><br>
  333. <span style="float:left;"><b>Height</b></span><span style="float:right;"> </span><br>
  334. <span style="float:left;"><b>Weight</b></span><span style="float:right;"> </span><br>
  335. <span style="float:left;"><b>Eyes</b></span><span style="float:right;"> </span><br>
  336. <span style="float:left;"><b>Hair</b></span><span style="float:right;"> </span><br>
  337. <span style="float:left;"><b>Build</b></span><span style="float:right;"> </span><br><br>
  338. <span style="float:left;"><b>Orientation</b></span><span style="float:right;"> </span><br>
  339. <span style="float:left;"><b>Relationship</b></span><span style="float:right;"> </span><br>
  340. <span style="float:left;"><b>Affiliation</b></span><span style="float:right;"> </span><br><br>
  341. </div>
  342.  
  343. <a name="two"></a>
  344. <div style="width: 40vw; height: 30vw; overflow: auto;" align="left">
  345. <h1>combat</h1>
  346. <span style="float:left;"><b>Cooperation</b></span><span style="float:right;">●●○○○</span><br><br>
  347. <span style="float:left;"><b>Power</b></span><span style="float:right;">●●●●○</span><br><br>
  348. <span style="float:left;"><b>Speed</b></span><span style="float:right;">●●●●○</span><br><br>
  349. <span style="float:left;"><b>Intelligence</b></span><span style="float:right;">●●●○○</span><br><br>
  350. <span style="float:left;"><b>Technique</b></span><span style="float:right;">●●●●○</span><br><br>
  351.  
  352. <h2>Quirk</h2>
  353. <b>Quirk Name:</b> <br><br>
  354. <b>Quirk Type:</b> <br><br>
  355. <b>Quirk Description:</b>
  356. <br>
  357.  
  358. <h3>headcanons</h3>
  359.  
  360. <br><br>
  361. </div>
  362.  
  363.  
  364. <a name="three"></a>
  365. <div style="width: 40vw; height: 30vw; overflow: auto;" align="center">
  366. <h1>History</h1>
  367.  
  368. </div>
  369.  
  370. <a name="four"></a>
  371. <div style="width: 40vw; height: 30vw; overflow: auto;" align="center">
  372. <h1>Out of Character</h1>
  373. <b>00</b>. Code made by <a href="https://rageqxeen.neocities.org/vw_codes/rageqxeen.html" target="_blank">RageQxeen</a>, do not steal.<br><br>
  374. <b>01</b>. <br><br>
  375. <b>02</b>. <br><br>
  376. <b>03</b>. <br><br>
  377. <b>04</b>. <br><br>
  378. <b>05</b>. <br><br>
  379. <b>06</b>. <br><br>
  380. <b>07</b>. <br><br>
  381. <b>08</b>. <br><br>
  382. <b>09</b>. <br><br>
  383. <b>10</b>. <br><br>
  384. </div>
  385. </div>
  386. </div>
  387.  
  388.  
  389. <div id="friendlist">
  390. <div style="width: 40vw; height: 8vw; overflow: auto;" align="center">
  391. <marquee behavior="scroll" direction="down" onmouseover="this.stop();" onmouseout="this.start();">
  392. <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
  393. <center><b>- Name -</b><br> <i>foe/friend</i></center> small note.<br><br><br><br>
  394. <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
  395. <center><b>- Name -</b><br> <i>foe/friend</i></center> small note.<br><br><br><br>
  396. <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
  397. <center><b>- Name -</b><br> <i>foe/friend</i></center> small note.<br><br><br><br>
  398. <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
  399. <center><b>- Name -</b><br> <i>foe/friend</i></center> small note.<br><br><br><br>
  400. <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
  401. <center><b>- Name -</b><br> <i>foe/friend</i></center> small note.
  402. </marquee>
  403. </div>
  404. </div>
  405. </div>
  406. </body>
  407. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement