Advertisement
RageQxeen

La Larona

May 29th, 2020
67
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.97 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=Patua+One|Cinzel|Cinzel+Decorative);
  50.  
  51. html, body {
  52. background-color: #4f666a;
  53. background-image: url("https://media.giphy.com/media/3ohhwutQL0CDTq3kKA/giphy.gif");
  54. }
  55.  
  56. ::-webkit-scrollbar-button:vertical:{
  57. background-color: #transparent;}
  58.  
  59. ::-webkit-scrollbar-thumb:vertical {
  60. background-color:#transparent;
  61. height:150px;}
  62.  
  63. ::-webkit-scrollbar-thumb:horizontal {
  64. background-color:#transparent;
  65. height:60px;}
  66.  
  67.  
  68. ::-webkit-scrollbar {
  69. height:60px;
  70. width:5px;
  71. background-color:#transparent;}
  72.  
  73. #image {
  74. width: 32vw;
  75. margin: 0px;
  76. border: none;
  77. height: 47vw;
  78. background-color:transparent;
  79. position: absolute;
  80. right: 24.5vw;
  81. bottom: -10vw;
  82. background-image:url("http://i.picpar.com/Ac4e.png");
  83. background-repeat:no-repeat;
  84. background-position: bottom;
  85. background-size: 100%;
  86. z-index: 2;
  87. -webkit-transition: 0.5s linear;
  88. -moz-transition: 0.5s linear;
  89. -o-transition: 0.5s linear;
  90. transition: 0.5s linear;
  91. }
  92.  
  93. #image:hover {
  94. background-image:url("http://i.picpar.com/Bc4e.png");
  95. background-repeat:no-repeat;
  96. background-position: bottom;
  97. background-size: 100%;
  98. -webkit-transition: 0.5s linear;
  99. -moz-transition: 0.5s linear;
  100. -o-transition: 0.5s linear;
  101. transition: 0.5s linear;
  102. }
  103.  
  104. #container {
  105. background-color: transparent;
  106. width: 80vw;
  107. height: 30vw;
  108. margin:auto;
  109. position: absolute;
  110. padding: 5px;
  111. right: 10vw;
  112. bottom: 10vw;
  113. z-index:1;
  114. border: solid 4px #c0c0c0;
  115. }
  116.  
  117. #content {
  118. background-color:#c0c0c0;
  119. width: 25vw;
  120. height: 28vw;
  121. margin:auto;
  122. position: absolute;
  123. padding: 5px;
  124. font-family: 'Patua One', cursive;
  125. font-size: 18px;
  126. color: #000;
  127. left: 1vw;
  128. bottom: 1vw;
  129. z-index:1;
  130. border: #000000 solid 2px;
  131. }
  132.  
  133. #content2 {
  134. background-color:#c0c0c0;
  135. width: 25vw;
  136. height: 28vw;
  137. margin:auto;
  138. position: absolute;
  139. padding: 5px;
  140. font-family: 'Patua One', cursive;
  141. font-size: 18px;
  142. color: #000;
  143. right: 1vw;
  144. bottom: 1vw;
  145. z-index:1;
  146. border: #000000 solid 2px;
  147. }
  148.  
  149. #nav {
  150. background-color: transparent;
  151. width: 14vw;
  152. height: .5vw;
  153. margin:auto;
  154. position: absolute;
  155. left: 1vw;
  156. top: -2.7vw;
  157. z-index:3;
  158. }
  159.  
  160. #nav a, #nav a:link, #nav a:visited {
  161. display:inline-block;
  162. height: 1vw;
  163. width: 1vw;
  164. text-align: center;
  165. font-family: 'Aref Ruqaa';
  166. font-size: 15px;
  167. text-decoration: none;
  168. color: #000;
  169. background: #68707c;
  170. margin: 5px;
  171. background-image: url("https://i.imgur.com/oJUsgm3.png");
  172. border: double #000 5px;
  173. border-radius: 50px;
  174. -webkit-transition: 0.5s linear;
  175. -moz-transition: 0.5s linear;
  176. -o-transition: 0.5s linear;
  177. transition: 0.5s linear;
  178. }
  179.  
  180. #nav a:active, #nav a:hover {
  181. display:inline-block;
  182. height: 1vw;
  183. width: 1vw;
  184. text-align: center;
  185. font-family: 'Aref Ruqaa';
  186. font-size: 15px;
  187. text-decoration: none;
  188. color: #c0c0c0;
  189. background: #9eaed6;
  190. margin: 5px;
  191. background-image: url("https://i.imgur.com/oJUsgm3.png");
  192. border: double #778899 5px;
  193. border-radius: 50px;
  194. -webkit-transition: 0.5s linear;
  195. -moz-transition: 0.5s linear;
  196. -o-transition: 0.5s linear;
  197. transition: 0.5s linear;
  198. }
  199.  
  200.  
  201. .name {position: absolute;
  202. font-family: 'Cinzel Decorative';
  203. color: #fff;
  204. font-size: 4vw;
  205. top: -4.5vw;
  206. right: 2.5vw;
  207. width: 22vw;
  208. height: 9vw;
  209. border: 0px solid #000;
  210. text-align: justify;
  211. text-shadow: -1px 0 #c0c0c0, 0 1px #000,1px 0 #000, 0 -1px #c0c0c0;
  212. overflow: auto;
  213. padding:5px 5px 5px 5px;
  214. z-index: 2;}
  215.  
  216. .title { background: transparent;
  217. background:url('https://31.media.tumblr.com/d5383c4345000c565d406d280614ed39/tumblr_n6i1p0QzVs1sgk0tao1_500.gif') repeat;
  218. background-position: center;
  219. position: absolute;
  220. font-family: 'Cinzel Decorative';
  221. font-size: 4vw;
  222. top: -4.5vw;
  223. right: 2.5vw;
  224. width: 22vw;
  225. height: 9vw;
  226. text-align: justify;
  227. padding:5px 5px 5px 5px;
  228. -webkit-text-fill-color: transparent;
  229. -webkit-background-clip: text;
  230. z-index: 3;}
  231.  
  232. .alias {position: absolute;
  233. font-family: 'Cinzel';
  234. color: #daa520;
  235. font-size: 2vw;
  236. bottom: -3vw;
  237. left: 19.5vw;
  238. width: 40vw;
  239. height: 2.8vw;
  240. border: 0px solid #000;
  241. text-align: center;
  242. text-shadow: -1px 0 #c0c0c0, 0 1px #000,1px 0 #000, 0 -1px #c0c0c0;
  243. overflow: auto;
  244. padding:5px 5px 5px 5px;
  245. z-index: 7;}
  246.  
  247. i{color: #013220;}
  248. b{color: #000;}
  249. a{color: #444; text-decoration: none;}
  250. h1{border-bottom: 1px solid #000; text-align: center; font-size: 40px; font-family: 'Cinzel', cursive; color: #000;}
  251. h2{border-bottom: 1px solid #000; text-align: left; font-size: 30px; font-family: 'Cinzel', cursive; color: #000;}
  252. h3{text-align: right; font-size: 25px; font-family: 'Cinzel', cursive; color: #000;}
  253. </style>
  254. <div id="container">
  255.  
  256. <div id="nav">
  257. <a href="#one"></a>
  258. <a href="#two"></a>
  259. <a href="#three"></a>
  260. <a href="#four"></a>
  261. </div>
  262.  
  263. <div class="name">La Larona</div>
  264. <div class="title">La Larona</div>
  265. <div class="alias">Villain of my own Story</div>
  266.  
  267. <div id="image"></div>
  268.  
  269. <div id="content">
  270. <div style="width: 25vw; height: 28vw; overflow-y: hidden;">
  271.  
  272. <a name="one"></a>
  273. <div style="width: 25vw; height: 28vw; overflow: auto;" align="center">
  274. <span style="float:left;"><b>Name</b></span><span style="float:right;"></span><br>
  275. <span style="float:left;"><b>Alias(es)</b></span><span style="float:right;"><a title="TBA">hover</a></span><br>
  276. <span style="float:left;"><b>Hero Name</b></span><span style="float:right;"></span><br>
  277. <span style="float:left;"><b>Gender</b></span><span style="float:right;">Female</span><br>
  278. <span style="float:left;"><b>Age</b></span><span style="float:right;"></span><br>
  279. <span style="float:left;"><b>Race</b></span><span style="float:right;">Human</span><br>
  280. <span style="float:left;"><b>Voice</b></span><span style="float:right;"><a href="" target="_blank">Click~</a></span><br>
  281. <span style="float:left;"><b>Occupation</b></span><span style="float:right;"></span><br><br>
  282. <span style="float:left;"><b>Height</b></span><span style="float:right;"></span><br>
  283. <span style="float:left;"><b>Weight</b></span><span style="float:right;"></span><br>
  284. <span style="float:left;"><b>Eyes</b></span><span style="float:right;"></span><br>
  285. <span style="float:left;"><b>Hair</b></span><span style="float:right;"></span><br>
  286. <span style="float:left;"><b>Build</b></span><span style="float:right;"></span><br><br>
  287. <span style="float:left;"><b>Orientation</b></span><span style="float:right;"></span><br>
  288. <span style="float:left;"><b>Relationship</b></span><span style="float:right;"></span><br>
  289. <span style="float:left;"><b>Affiliation</b></span><span style="float:right;"></span><br><br><br>
  290. <br><br>
  291. </div>
  292.  
  293. <a name="two"></a>
  294. <div style="width: 25vw; height: 28vw; overflow: auto;" align="left">
  295. <h1>Combat</h1>
  296. <span style="float:left;"><b>Cooperation</b></span><span style="float:right;">●●○○○</span><br><br>
  297. <span style="float:left;"><b>Power</b></span><span style="float:right;">●●●●○</span><br><br>
  298. <span style="float:left;"><b>Speed</b></span><span style="float:right;">●●●●○</span><br><br>
  299. <span style="float:left;"><b>Intelligence</b></span><span style="float:right;">●●●○○</span><br><br>
  300. <span style="float:left;"><b>Technique</b></span><span style="float:right;">●●●●○</span><br><br>
  301.  
  302. <h2>Quirk</h2>
  303. <b>Quirk Name:</b> <br><br>
  304. <b>Quirk Type:</b> <br><br>
  305. <b>Quirk Description:</b>
  306. <br>
  307. <br><br>
  308. <b>Strengths:</b>
  309. <br><br>
  310.  
  311. <b>Weaknesses:</b>
  312. <br><br>
  313.  
  314. <b>Drawbacks:</b>
  315. <br>
  316.  
  317. <h3>Equipment</h3>
  318.  
  319. </div>
  320.  
  321.  
  322. <a name="three"></a>
  323. <div style="width: 25vw; height: 28vw; overflow: auto;" align="center">
  324. <h1>History</h1>
  325.  
  326. </div>
  327.  
  328. <a name="four"></a>
  329. <div style="width: 25vw; height: 28vw; overflow: auto;" align="center">
  330. <h1>Contacts</h1>
  331. <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a><br>
  332. <center><b>- Name -</b><br> <i>foe/friend</i><br> small note.</center><br><br><br><br> <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a><br>
  333. <center><b>- Name -</b><br> <i>foe/friend</i><br> small note.</center><br><br><br><br> <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a><br>
  334. <center><b>- Name -</b><br> <i>foe/friend</i><br> small note.</center><br><br><br><br>
  335. </div>
  336. </div>
  337. </div>
  338.  
  339. <div id="content2">
  340. <div style="width: 25vw; height: 28vw; overflow-y: hidden;">
  341. <a name="five"></a>
  342. <div style="width: 25vw; height: 28vw; overflow: auto;" align="center">
  343. <h1>Out of Character</h1>
  344. <b>00</b>. Code made by <a href="/profile.php?user=RageQxeen" target="_blank">RageQxeen</a>, do not steal.<br><br>
  345. <b>01</b>. OOC.<br>
  346. <b>02</b>. OOC.<br>
  347. <b>03</b>. OOC.<br>
  348. <b>04</b>. OOC.<br>
  349. <b>05</b>. OOC.<br>
  350. </div>
  351. </div>
  352. </div>
  353. </div>
  354. </body>
  355. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement