API tools faq
paste
RageQxeen

The Big Boi

RageQxeen
Feb 6th, 2020
271
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.54 KB | None | 0 0
raw download clone embed print report
  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. <script>
  48. function openForm() {
  49. document.getElementById("myForm").style.display = "block";
  50. }
  51.  
  52. function closeForm() {
  53. document.getElementById("myForm").style.display = "none";
  54. }
  55. </script>
  56. <style type="text/css">
  57.  
  58. @import url(https://fonts.googleapis.com/css?family=Cinzel|Cinzel+Decorative|Aref+Ruqaa);
  59.  
  60. html, body {
  61. background: #fff0f3;
  62. background-image:url("https://t1.daumcdn.net/thumb/R760x0/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fencyclop%2Fm61%2FSaKirWqXArhgA2U76yhG6f4QGfnHqYeXk9iQPvA2%3Ft%3D1447392267000");
  63. background-size: 100%;
  64. background-repeat:no-repeat;
  65. background-position:center bottom;
  66. }
  67.  
  68. ::-webkit-scrollbar-button:vertical:{
  69. background-color: #transparent;}
  70.  
  71. ::-webkit-scrollbar-thumb:vertical {
  72. background-color:#transparent;
  73. height:150px;}
  74.  
  75. ::-webkit-scrollbar-thumb:horizontal {
  76. background-color:#transparent;
  77. height:60px;}
  78.  
  79.  
  80. ::-webkit-scrollbar {
  81. height:60px;
  82. width:5px;
  83. background-color:#transparent;}
  84.  
  85. #image {
  86. width: 100%;
  87. margin: 0px;
  88. border: none;
  89. height: 25vw;
  90. background-color:transparent;
  91. position: absolute;
  92. right: 0vw;
  93. bottom: 0vw;
  94. background-image:url("http://i.picpar.com/pfae.png");
  95. background-repeat: repeat;
  96. background-position: bottom;
  97. background-size: 100%;
  98. -webkit-animation: fade-in-bck 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 2s both;
  99. animation: fade-in-bck 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 2s both;
  100. }
  101.  
  102. #charaimg {
  103. width: 29vw;
  104. margin: 0px;
  105. border: none;
  106. height: 40vw;
  107. background-color:transparent;
  108. position: absolute;
  109. right: 0.5vw;
  110. bottom: .4vw;
  111. background-image:url("https://lh3.googleusercontent.com/proxy/MD7L9ZjD3l6JJtkwdUwpiIGG-LjGt4skMkYJhcv3vFeFrBQafl04uMkEQfmzmz0JSjcTHvsCttbxS0ETM-OYYqLKYjQ8GQ");
  112. background-repeat: repeat;
  113. background-position: bottom;
  114. border: 2px solid #000;
  115. background-size: 100%;
  116. }
  117.  
  118. #container {
  119. width: 70vw;
  120. height: 40vw;
  121. margin: 0px;
  122. background-color: #abaeaf;
  123. background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png");
  124. background-size:100%;
  125. background-repeat:no-repeat;
  126. background-position:center bottom;
  127. position: absolute;
  128. left: 16vw;
  129. bottom: 2vw;
  130. box-shadow: 0px 5px 10px #000;
  131. z-index: 7;
  132. }
  133.  
  134. #content {
  135. background-color:#B2C9F5;
  136. width: 38vw;
  137. height: 39vw;
  138. margin:auto;
  139. position: absolute;
  140. padding: 5px;
  141. font-family: 'Aref Ruqaa', cursive;
  142. font-size: 18px;
  143. color: #000;
  144. left: 1vw;
  145. bottom: .9vw;
  146. z-index:8;
  147. border: #000000 solid 2px;
  148. }
  149.  
  150. #info {
  151. background-color:#B2C9F5;
  152. width: 40vw;
  153. height: 18vw;
  154. margin:auto;
  155. position: absolute;
  156. padding: 5px;
  157. font-family: 'Aref Ruqaa', cursive;
  158. font-size: 18px;
  159. color: #000;
  160. left: 1vw;
  161. top: 1vw;
  162. z-index:1;
  163. border: #000000 solid 2px;
  164. }
  165.  
  166. #topic{
  167. background-color:#B2C9F5;
  168. width: 40vw;
  169. height: 18vw;
  170. margin:auto;
  171. position: absolute;
  172. padding: 5px;
  173. font-family: 'Aref Ruqaa', cursive;
  174. font-size: 18px;
  175. color: #000;
  176. left: 1vw;
  177. bottom: 1vw;
  178. z-index:1;
  179. border: #000000 solid 2px;
  180. }
  181.  
  182. #staff{
  183. background-color: transparent;
  184. width: 25vw;
  185. height: 10vw;
  186. margin:auto;
  187. position: absolute;
  188. padding: 5px;
  189. font-family: 'Aref Ruqaa', cursive;
  190. font-size: 18px;
  191. color: #000;
  192. text-align: center;
  193. right: 1vw;
  194. top: 1vw;
  195. z-index:1;
  196. }
  197.  
  198. #fights{
  199. background-color: #B2C9F5;
  200. width: 26vw;
  201. height: 11vw;
  202. margin:auto;
  203. position: absolute;
  204. padding: 5px;
  205. font-family: 'Aref Ruqaa', cursive;
  206. font-size: 18px;
  207. color: #000;
  208. text-align: center;
  209. right: 1vw;
  210. bottom: 1vw;
  211. border: 2px solid #000;
  212. z-index:1;
  213. }
  214.  
  215. .name {position: absolute;
  216. font-family: 'Cinzel Decorative';
  217. color: #fff;
  218. font-size: 6vw;
  219. top: -6vw;
  220. left: 3vw;
  221. width: 80vw;
  222. height: 9vw;
  223. border: 0px solid #000;
  224. text-align: justify;
  225. text-shadow: -1px 0 #c0c0c0, 0 1px #000,1px 0 #000, 0 -1px #c0c0c0;
  226. overflow: auto;
  227. padding:5px 5px 5px 5px;
  228. z-index: 9;}
  229.  
  230. .title { background: transparent;
  231. background:url('https://media1.giphy.com/media/ri2bxzIyxFfIk/source.gif') 50px 50px repeat;
  232. background-position: center;
  233. position: absolute;
  234. font-family: 'Cinzel Decorative';
  235. font-size: 6vw;
  236. top: -6vw;
  237. left: 3vw;
  238. width: 80vw;
  239. height: 9vw;
  240. text-align: justify;
  241. padding:5px 5px 5px 5px;
  242. -webkit-text-fill-color: transparent;
  243. -webkit-background-clip: text;
  244. z-index: 10;}
  245.  
  246. #nav {
  247. background-color: transparent;
  248. width: 12vw;
  249. height: 2vw;
  250. margin:auto;
  251. position: absolute;
  252. left: -3.5vw;
  253. top: 3.5vw;
  254. text-align:right;
  255. z-index:1;
  256. }
  257.  
  258. #nav a, #nav a:link, #nav a:visited {
  259. display:inline-block;
  260. height: 2vw;
  261. width: 10vw;
  262. text-decoration:none;
  263. background: #abaeaf;
  264. margin: 5px;
  265. border: solid #000 1px;
  266. -webkit-transition: 0.5s linear;
  267. -moz-transition: 0.5s linear;
  268. -o-transition: 0.5s linear;
  269. transition: 0.5s linear;
  270. z-index:5;
  271. }
  272.  
  273. #nav a:active, #nav a:hover {
  274. display:inline-block;
  275. height: 2vw;
  276. width: 10vw;
  277. text-decoration:none;
  278. background: #B2C9F5;
  279. margin: 5px;
  280. padding-right: 75px;
  281. border: solid #000 1px;
  282. -webkit-transition: 0.5s linear;
  283. -moz-transition: 0.5s linear;
  284. -o-transition: 0.5s linear;
  285. transition: 0.5s linear;
  286. z-index:5;
  287. }
  288.  
  289. #wrap {
  290. width:70vw;
  291. height: 40vw;
  292. position: absolute;
  293. bottom: 1vw;
  294. left: 0vw;
  295. padding: 15px;
  296. margin: 0px 0 0 0px;
  297. text-align:center;
  298. }
  299.  
  300.  
  301. #wrap a {
  302. font-family: 'VT323', sans-serif;
  303. font-size: 120px;
  304. width: 70vw;
  305. height: 40vw;
  306. color:#20C20E;
  307. text-transform:uppercase;
  308. text-decoration: none;
  309. background-color: #000;
  310. -webkit-transition: .25s ease;
  311. transition: .25s ease;
  312. }
  313.  
  314. /* Button used to open the contact form - fixed at the bottom of the page */
  315. .open-button {
  316. background-color: #abaeaf;
  317. color: #abaeaf;
  318. font-family: 'Cinzel';
  319. font-size: 30px;
  320. text-align: left;
  321. padding: 5px 10px;
  322. border: 1px solid #000;
  323. cursor: pointer;
  324. position: fixed;
  325. top: 15vw;
  326. left: 14vw;
  327. width: 280px;
  328. }
  329.  
  330. /* The popup form - hidden by default */
  331. .form-popup {
  332. display: none;
  333. position: fixed;
  334. bottom: 1vw;
  335. left: 16vw;
  336. width: 69.8vw;
  337. z-index: 7;
  338. -webkit-animation: fade-in-bck 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  339. animation: fade-in-bck 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  340. }
  341.  
  342. /* Add styles to the form container */
  343. .form-container {
  344. max-width: 69vw;
  345. max-height: 40vw;
  346. width: 69vw;
  347. height: 40vw;
  348. padding: 9.5px;
  349. margin: 0px 0px 0px 0px;
  350. background-color: #abaeaf;
  351. background-image: url("https://www.transparenttextures.com/patterns/dark-geometric.png");
  352. border: 2px solid #000;
  353. z-index: 9;
  354. -webkit-animation: fade-in-bck 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  355. animation: fade-in-bck 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  356. }
  357.  
  358.  
  359. /* Add some hover effects to buttons */
  360. .form-container .btn:hover, .open-button:hover {
  361. opacity: 1;
  362. left: 5vw;
  363. color: white;
  364. box-shadow: 0px 5px 10px #000;
  365. transition: 1s linear;
  366. }
  367.  
  368. #wrap a:hover, #popup a:hover {
  369. color:#000;
  370. border: 1px solid #000;
  371. }
  372.  
  373.  
  374. @-webkit-keyframes fade-in-bck {
  375. 0% {
  376. -webkit-transform: translateZ(80px);
  377. transform: translateZ(80px);
  378. opacity: 0;
  379. }
  380. 100% {
  381. -webkit-transform: translateZ(0);
  382. transform: translateZ(0);
  383. opacity: 1;
  384. }
  385. }
  386. @keyframes fade-in-bck {
  387. 0% {
  388. -webkit-transform: translateZ(80px);
  389. transform: translateZ(80px);
  390. opacity: 0;
  391. }
  392. 100% {
  393. -webkit-transform: translateZ(0);
  394. transform: translateZ(0);
  395. opacity: 1;
  396. }
  397. }
  398.  
  399. @-webkit-keyframes fade-in-bck {
  400. 0% {
  401. -webkit-transform: translateZ(80px);
  402. transform: translateZ(80px);
  403. opacity: 0;
  404. }
  405. 100% {
  406. -webkit-transform: translateZ(0);
  407. transform: translateZ(0);
  408. opacity: 1;
  409. }
  410. }
  411. @keyframes fade-in-bck {
  412. 0% {
  413. -webkit-transform: translateZ(80px);
  414. transform: translateZ(80px);
  415. opacity: 0;
  416. }
  417. 100% {
  418. -webkit-transform: translateZ(0);
  419. transform: translateZ(0);
  420. opacity: 1;
  421. }
  422. }
  423.  
  424. i{color: #443a59;}
  425. b{color: #000;}
  426. a{color: #444; text-decoration: none;}
  427. h1{border-bottom: 1px solid #000; text-align: center; font-size: 30px; font-family: 'Cinzel', cursive; color: #000;}
  428. h2{solid #000; text-align: left; font-size: 20px; font-family: 'Cinzel', cursive; color: #000;}
  429. h3{text-align: right; font-size: 20px; font-family: 'Cinzel', cursive; color: #000;}
  430. </style>
  431.  
  432. <div id="image"></div>
  433. <div id="container">
  434.  
  435. <div class="name">Grand Colosseum</div>
  436. <div class="title">Grand Colosseum</div>
  437.  
  438. <div id="info">
  439. <b>All Information regarding the room including rules may go here.</b>
  440. </div>
  441.  
  442. <div id="topic">
  443. <b>Things like pointing out who can help with what, who's always up for a fight, etc. etc. can go here.</b>
  444. </div>
  445.  
  446. <div id="staff">
  447. <a target="_blank" href="/profile.php?user=Alexander+Russo" title="The Ruler of the Colosseum"><img src="http://i.picpar.com/Frae.png" width="100" height="100"/></a><br>
  448. <a target="_blank" href="/profile.php?user=Malevolence" title="The Right Hand Man"><img src="http://i.picpar.com/Grae.png" width="100" height="100"/></a>
  449. <a target="_blank" href="/profile.php?user=Scarecrow" title="i'M mAgiC Go D"><img src="http://i.picpar.com/Hrae.png" width="100" height="100"/></a><br>
  450. <a target="_blank" href="/profile.php?user=Miss+Ichor" title="Bloody Queen~"><img src="http://i.picpar.com/Irae.png" width="100" height="100"/></a>
  451. <a target="_blank" href="/profile.php?user=Tori" title="Princess of Pain!"><img src="http://i.picpar.com/Jrae.png" width="100" height="100"/></a>
  452. <a target="_blank" href="/profile.php?user=Talia+Jatium" title="Sith Warrior"><img src="http://i.picpar.com/Krae.png" width="100" height="100"/></a><br>
  453. <a target="_blank" href="/profile.php?user=KatAku" title="Cursed Child"><img src="http://i.picpar.com/Nrae.png" width="100" height="100"/></a>
  454. <a target="_blank" href="/profile.php?user=Tenebra" title="The Raven"><img src="http://i.picpar.com/Orae.png" width="100" height="100"/></a>
  455. </div>
  456.  
  457. <div id="fights">
  458. <b>Link the Colosseum Library here!</b>
  459. </div>
  460. </div>
  461. <button class="open-button" onclick="openForm()">Secret?</button>
  462.  
  463. <div class="form-popup" id="myForm">
  464. <form action="/action_page.php" class="form-container">
  465.  
  466. <div class="name">Grand Colosseum</div>
  467. <div class="title">Grand Colosseum</div>
  468.  
  469. <div id="nav">
  470. <a href="#one"></a>
  471. <a href="#two"></a>
  472. <a href="#three"></a>
  473. <a href="#four"></a>
  474. </div>
  475.  
  476. <div id="content">
  477. <div style="width: 38vw; height: 39vw; overflow-y: hidden;">
  478.  
  479. <a name="one"></a>
  480. <div style="width: 38vw; height: 39vw; overflow: auto;" align="center">
  481. <span style="float:left;"><b>Name</b></span><span style="float:right;"></span><br>
  482. <span style="float:left;"><b>Alias(es)</b></span><span style="float:right;"><a title="">hover</a></span><br>
  483. <span style="float:left;"><b>Gender</b></span><span style="float:right;"></span><br>
  484. <span style="float:left;"><b>Age</b></span><span style="float:right;"></span><br>
  485. <span style="float:left;"><b>Race</b></span><span style="float:right;"></span><br>
  486. <span style="float:left;"><b>Voice</b></span><span style="float:right;"><a href="HERE" target="_blank">Click~</a></span><br><br>
  487. <span style="float:left;"><b>Height</b></span><span style="float:right;"></span><br>
  488. <span style="float:left;"><b>Weight</b></span><span style="float:right;"></span><br>
  489. <span style="float:left;"><b>Eyes</b></span><span style="float:right;"></span><br>
  490. <span style="float:left;"><b>Hair</b></span><span style="float:right;"></span><br>
  491. <span style="float:left;"><b>Build</b></span><span style="float:right;"></span><br><br>
  492. <span style="float:left;"><b>Orientation</b></span><span style="float:right;"></span><br>
  493. <span style="float:left;"><b>Relationship</b></span><span style="float:right;"></span><br>
  494. <span style="float:left;"><b>Affiliation</b></span><span style="float:right;"></span><br><br>
  495. </div>
  496.  
  497. <a name="two"></a>
  498. <div style="width: 38vw; height: 39vw; overflow: auto;" align="left">
  499. <h1>Powers</h1>
  500.  
  501. </div>
  502.  
  503. <a name="three"></a>
  504. <div style="width: 38vw; height: 39vw; overflow: auto;" align="left">
  505. <h1>Connections</h1>
  506. <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
  507. <center><b>- Name -</b><br> <i>foe/friend</i><br> small note.</center><br><br><br><br>
  508. <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
  509. <center><b>- Name -</b><br> <i>foe/friend</i><br> small note.</center><br><br><br><br>
  510. <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
  511. <center><b>- Name -</b><br> <i>foe/friend</i><br> small note.</center><br><br><br><br>
  512. <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
  513. <center><b>- Name -</b><br> <i>foe/friend</i><br> small note.</center>
  514. </div>
  515.  
  516. <a name="four"></a>
  517. <div style="width: 38vw; height: 39vw; overflow: auto;" align="left">
  518. <h1>Out of Character</h1>
  519. <b>00</b>. Code made by <a href="/profile.php?user=RageQxeen" target="_blank">RageQxeen</a>, do not steal.<br><br>
  520. <b>01</b>. OOC.<br><br>
  521. <b>02</b>. OOC.<br><br>
  522. <b>03</b>. OOC.<br><br>
  523. <b>04</b>. OOC.<br><br>
  524. <b>05</b>. OOC.<br><br>
  525. </div>
  526. </div>
  527. </div>
  528. <div id="charaimg"></div>
  529. </form>
  530. </div>
  531. </body>
  532. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!