API tools faq
paste
Guest User

WEBSITE - XNA

a guest
Dec 8th, 2016
39
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.32 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>I love vegetables!</head>
  3. <style>
  4. @import url(https://fonts.googleapis.com/css?family=Raleway);
  5. @import url(https://fonts.googleapis.com/css?family=Jura);
  6. @import url(https://fonts.googleapis.com/css?family=Dhurjati);
  7. @import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);
  8. @import url(https://fonts.googleapis.com/css?family=Russo+One);
  9.  
  10. body {background: #000000 url('http://i.imgur.com/gbC665C.jpg'); color: FFFFFF; font-family: sans-serif; font-size: 10px; cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1054.cur), progress !important;}
  11. a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1049.cur), progress !important;}
  12.  
  13. ::selection { background: none;}
  14. ::-moz-selection { background: none;}
  15. ::-webkit-scrollbar {width: 0px;}
  16.  
  17. h1{
  18. z-index: 5;
  19. opacity:1;
  20. color: FFFFFF;
  21. font-weight: normal;
  22. font: 42px dhurjati;
  23. letter-spacing: 0px;
  24. line-height: 0px;
  25. position: absolute;
  26. top: 30px;
  27. left: 220px;
  28. transition: 0.8s ease-in-out;
  29. -moz-transition: 0.8s ease-in-out;
  30. -webkit-transition: 0.8s ease-in-out;
  31. -o-transition: 0.8s ease-in-out;
  32. text-shadow: #0099cc -1px -1px 0px, #0099cc 1px -1px 0px, #0099cc -1px 1px 0px, #0099cc 1px 1px 0px, #fff -2px -2px 0px, #fff 2px -2px 0px, #fff -2px 2px 0px, #fff 2px 2px 0px, 3px 3px 2px #333;
  33. }
  34.  
  35. h2{
  36. z-index: 5;
  37. opacity:1;
  38. color: FFFFFF;
  39. font-family: russo one;
  40. text-transform: ;
  41. font-weight: normal;
  42. font-size:18px;
  43. letter-spacing: 0px;
  44. line-height: 0px;
  45. position: absolute;
  46. top: 70px;
  47. left: 220px;
  48. transition: 0.8s ease-in-out;
  49. -moz-transition: 0.8s ease-in-out;
  50. -webkit-transition: 0.8s ease-in-out;
  51. -o-transition: 0.8s ease-in-out;
  52. text-shadow: #999 -1px -1px 0px, #999 1px -1px 0px, #999 -1px 1px 0px, #999 1px 1px 0px, #fff -2px -2px 0px, #fff 2px -2px 0px, #fff -2px 2px 0px, #fff 2px 2px 0px, 3px 3px 2px #333;
  53. }
  54.  
  55. h3{
  56. color: FFFFFF;
  57. font-weight: normal;
  58. font: 22px russo one;
  59. letter-spacing: 4px;
  60. text-transform: uppercase;
  61. position: absolute;
  62. text-shadow: #cc0000 -1px -1px 0px, #cc0000 1px -1px 0px, #cc0000 -1px 1px 0px, #cc0000 1px 1px 0px;
  63. }
  64.  
  65. #load{
  66. text-align: center; height: 200px; width: 100%; top: 50%; visibility: visible;
  67. color: rgba(0, 0, 0, .5);
  68. font: 10em russo one;
  69. letter-spacing: 2px;
  70. text-transform: uppercase;
  71. position: absolute;
  72. opacity: 1;
  73. animation: shove 1s forwards;
  74. animation-delay: 8.5s;
  75. text-shadow: #e2000d -2px -2px 0px,#e2000d 2px -2px 0px, #e2000d -2px 2px 0px, #e2000d 2px 2px 0px,
  76. #0099cc -3px -3px 0px, #0099cc 3px -3px 0px, #0099cc -3px 3px 0px, #0099cc 3px 3px 0px,
  77. #FFF -6px -6px 0px, #FFF 6px -6px 0px, #FFF -6px 6px 0px, #FFF 6px 6px 0px;
  78. }
  79.  
  80. #load:before {
  81. content: attr(title);
  82. position: absolute;
  83. overflow: hidden;
  84. max-width: 10em;
  85. white-space: nowrap;
  86. color: #fff; text-shadow:none;
  87. animation: loading 7.7s linear, color 0.8s forwards;
  88. animation-delay: 0s, 6.7s;
  89. }
  90.  
  91. #welc{
  92. color: transparent;
  93. font: 7em Jura;
  94. letter-spacing: 4px;
  95. text-transform: uppercase;
  96. position: absolute;
  97. top: 80%;
  98. width: 100%; text-align: center;
  99. visibility: visible; opacity: 1;
  100. animation: show 1s forwards, shove 1s forwards;
  101. animation-delay: 6.7s, 8.5s;
  102. }
  103.  
  104. @keyframes loading {0% {max-width: 0;} 35% {max-width: 10%;} 65% {max-width: 25%;} }
  105. @keyframes show {100% {color: #fff;} }
  106. @keyframes shove {100% {opacity: 0; visibility: hidden;} }
  107. @keyframes color {100% {color: #cc0000;
  108. text-shadow: #0099cc -2px -2px 0px, #0099cc 2px -2px 0px, #0099cc -2px 2px 0px, #0099cc 2px 2px 0px,
  109. #FFF -4px -4px 0px, #FFF 4px -4px 0px, #FFF -4px 4px 0px, #FFF 4px 4px 0px,
  110. #0099cc -6px -6px 0px, #0099cc 6px -6px 0px, #0099cc -6px 6px 0px, #0099cc 6px 6px 0px;} }
  111.  
  112. #maindiv:hover #popup1{opacity: 1;}
  113.  
  114. #popup1{
  115. z-index: 6;
  116. opacity: 0;
  117. top: 200px;
  118. left: 450px;
  119. position: absolute;
  120. padding: 50 0 0 0;
  121. background-color: rgba(255,255,255,0.5);
  122. width: 500px;
  123. height: 100px;
  124. overflow: hidden;
  125. transition: 1s ease-in-out;
  126. -moz-transition: 1s ease-in-out;
  127. -webkit-transition: 1s ease-in-out;
  128. -o-transition: 1s ease-in-out;
  129. border: 2px solid #fff;
  130. border-radius: 5px;
  131. box-shadow: 1px 1px 2px #333;
  132. }
  133.  
  134. #info{
  135. color: FFFFFF;
  136. text-align: center;
  137. font-family: russo one;
  138. font-weight: normal;
  139. font-size:22px;
  140. letter-spacing: 4px;
  141. text-transform: uppercase;
  142. display: block;
  143. text-shadow: #cc0000 -1px -1px 0px, #cc0000 1px -1px 0px, #cc0000 -1px 1px 0px, #cc0000 1px 1px 0px;
  144. }
  145.  
  146. #maindiv{
  147. z-index: 0;
  148. opacity: 1;
  149. top: 10%;
  150. left: 10%;
  151. position: absolute;
  152. background-color: rgba(0,0,0,0.1);
  153. width: 80%;
  154. height: 80%;
  155. border: 2px solid #fff;
  156. border-radius: 5px;
  157. box-shadow: 1px 1px 2px #333;
  158. }
  159.  
  160. #mainstats{
  161. z-index: 5;
  162. opacity: 1;
  163. top: 20%;
  164. left: 30%;
  165. padding: 0px 20px 20px 20px;
  166. position: absolute;
  167. font-size: 11px;
  168. font-family: Arial, sans-serif;
  169. font-weight: bold;
  170. color: #ffffff;
  171. text-align: center;
  172. background-color: rgba(255,255,255,0.5);
  173. width: 40%;
  174. height: 50%;
  175. overflow: hidden;
  176. transition: 1s ease-in-out;
  177. -moz-transition: 1s ease-in-out;
  178. -webkit-transition: 1s ease-in-out;
  179. -o-transition: 1s ease-in-out;
  180. border: 2px solid #fff;
  181. border-radius: 5px;
  182. box-shadow: 1px 1px 2px #333;
  183. text-shadow: #000 -1px -1px 0px, #000 1px -1px 0px, #000 -1px 1px 0px, #000 1px 1px 0px, #fff -2px -2px 0px, #fff 2px -2px 0px, #fff -2px 2px 0px, #fff 2px 2px 0px;
  184. }
  185.  
  186. a:link, a:active, a:visited {
  187. color: #0099cc;
  188. text-decoration: none;
  189. transition: 0.8s ease-in-out;
  190. -moz-transition: 0.8s ease-in-out;
  191. -webkit-transition: 0.8s ease-in-out;
  192. -o-transition: 0.8s ease-in-out;
  193. text-shadow: #ffffff -1px -1px 0px, #ffffff 1px -1px 0px, #ffffff -1px 1px 0px, #ffffff 1px 1px 0px, #0099cc -2px -2px 0px, #0099cc 2px -2px 0px, #0099cc -2px 2px 0px, #0099cc 2px 2px 0px;
  194. }
  195.  
  196. a:hover{
  197. color: #cc9900; text-decoration: none;
  198. transition: 0.8s ease-in-out;
  199. -moz-transition: 0.8s ease-in-out;
  200. -webkit-transition: 0.8s ease-in-out;
  201. -o-transition: 0.8s ease-in-out;
  202. }
  203.  
  204. b{text-shadow:#e2000d -1px -1px 0px, #e2000d 1px -1px 0px, #e2000d -1px 1px 0px, #e2000d 1px 1px 0px, #fff -2px -2px 0px, #fff 2px -2px 0px, #fff -2px 2px 0px, #fff 2px 2px 0px;}
  205.  
  206. u{text-shadow:#33cc66 -1px -1px 0px, #33cc66 1px -1px 0px, #33cc66 -1px 1px 0px, #33cc66 1px 1px 0px, #fff -2px -2px 0px, #fff 2px -2px 0px, #fff -2px 2px 0px, #fff 2px 2px 0px; text-decoration: none; border-bottom: 1px solid #cc9900;}
  207.  
  208. #extra {position: fixed;top: 0px; left: 0px;bottom: 0px; right: 0px;}
  209.  
  210. #avatar{
  211. position: absolute;
  212. top: 70; left: 50;
  213. width: 150px;
  214. height: 300px;
  215. border: 2px solid #fff; border-radius: 5px;
  216. box-shadow: 1px 1px 2px #333;
  217. background-image: url('http://i.imgur.com/GzAbcqQ.jpg');
  218. }
  219.  
  220. #exit{
  221. position: absolute;
  222. background-color: rgba(187, 46, 51, 0.5);
  223. top: 10;
  224. right: 10;
  225. height: 25;
  226. width: 25;
  227. text-align: center;
  228. border: 2px solid #e2000d;
  229. border-radius: 5px;
  230. font-family: "Russo One", sans-serif;
  231. font-weight: 700;
  232. font-size: 22px;
  233. color: #e2000d;
  234. box-shadow: 1px 1px 2px #333;
  235. text-shadow: #fff -1px -1px 0px, #fff 1px -1px 0px, #fff -1px 1px 0px, #fff 1px 1px 0px;
  236. }
  237.  
  238. #exit:hover{color:#cc0000; cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1049.cur), progress !important;}
  239.  
  240. #exit:active {color:#cc0000; cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1049.cur), progress !important;
  241. box-shadow: none;}
  242.  
  243. #hpwrap {
  244. font-family: Russo One, sans-serif;
  245. color: #fff;
  246. position: absolute;
  247. top: 100px; left: 200px;
  248. font-size: 12px; padding: 10px;
  249. }
  250.  
  251. #bar {
  252. height: 20px;
  253. width: 290px;
  254. overflow: hidden;
  255. display: block;
  256. vertical-align: middle;
  257. margin: 5px;
  258. text-align: left;
  259. background-color: rgba(0,0,0,0.7);
  260. border: 2px solid #fff; border-radius: 5px;
  261. box-shadow: 1px 1px 2px #333;
  262. }
  263.  
  264. #hp{
  265. padding-left: 10px;
  266. background: #e2000d url('http://i.imgur.com/pFpZmqZ.jpg');
  267. display:inline-block;
  268. height: 100%;
  269. vertical-align: middle;
  270. line-height: 20px;
  271. border-right: 1px solid #fff;
  272. box-shadow: 1px 1px 2px #333;
  273. text-align:left;
  274. width:85%;
  275. }
  276.  
  277. #mp{
  278. padding-left: 10px;
  279. background: #0099cc url('http://i.imgur.com/jdWhC6k.jpg');
  280. display:inline-block;
  281. height: 100%;
  282. vertical-align: middle;
  283. line-height: 20px;
  284. border-right: 1px solid #fff;
  285. box-shadow: 1px 1px 2px #333;
  286. text-align:left;
  287. width: 60%;
  288. }
  289.  
  290. #xp{
  291. padding-left: 10px;
  292. background: #33cc66 url('http://i.imgur.com/M7bXm0P.jpg');
  293. display:inline-block;
  294. height: 100%;
  295. vertical-align: middle;
  296. line-height: 20px;
  297. border-right: 1px solid #fff;
  298. box-shadow: 1px 1px 2px #333;
  299. text-align:left;
  300. width: 25%;
  301. }
  302.  
  303. #skillbox{
  304. background-color: rgba(255,255,255,0.5);
  305. border: 2px solid #fff; border-radius: 5px;
  306. box-shadow: 1px 1px 2px #333;
  307. position: absolute;
  308. padding: 5px 0px 5px 0px;
  309. text-align: center; top: 5px;
  310. width: 30; height: 20;
  311. }
  312.  
  313. #skillbox:hover{
  314. cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1049.cur), progress !important;
  315. background-color: rgba(1,1,1,0.1);}
  316.  
  317. #skillbox:active{
  318. cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1049.cur), progress !important;
  319. background-color: rgba(1,1,1,0.1); box-shadow: none;}
  320.  
  321. #hotkeys{
  322. background-color: rgba(255,255,255,0.5);
  323. border: 2px solid #fff;
  324. border-radius: 5px;
  325. box-shadow: 1px 1px 2px #333;
  326. top: 50px;
  327. left: 550px;
  328. position: absolute;
  329. width: 415px;
  330. height: 45px;
  331. }
  332.  
  333. .tooltip{position: relative;}
  334.  
  335. .tooltip:hover:after{
  336. background-color: rgba(255,255,255,0.5);
  337. border: 2px solid #fff;
  338. border-radius: 5px;
  339. box-shadow: 1px 1px 2px #333;
  340. bottom: 26px;
  341. color: #000;
  342. font: 18px dhurjati;
  343. line-height: 15px;
  344. content: attr(href);
  345. left: 20%;
  346. padding: 5px 15px;
  347. position: absolute;
  348. z-index: 98;
  349. width: 220px;
  350. }
  351.  
  352. #overlay1{
  353. background: #000 url('http://i.imgur.com/FErGYCN.jpg'); background-position: 100% 50%;
  354. z-index: 80;top:0px;
  355. width: 100%;height: 50%;
  356. position: absolute;
  357. animation: opening 1.5s forwards;
  358. -webkit-animation-delay: 10s;
  359. animation-delay: 10s;
  360. }
  361.  
  362. #overlay2{
  363. background: #000 url('http://i.imgur.com/FErGYCN.jpg'); background-position: 100% 100%;
  364. text-align: center;
  365. z-index: 80;
  366. bottom:0px;
  367. width: 100%; height: 50%;
  368. position: absolute;
  369. animation: opening 1.5s forwards;
  370. -webkit-animation-delay: 10s;
  371. animation-delay: 10s;
  372. }
  373.  
  374. @keyframes opening {
  375. 100% {height: 0%;}
  376. }
  377.  
  378. #login {
  379. color: FFF;
  380. font:42px dhurjati;
  381. line-height: 32px;
  382. letter-spacing: 0px;
  383. padding: 0px 0px 8px 0px;
  384. height: 100%;
  385. width: 100%;
  386. border: 2px solid #fff;
  387. border-radius: 5px;
  388. box-shadow: 1px 1px 2px #333;
  389. background-color: rgba(255,255,255,0.7);
  390. text-align: center;
  391. text-shadow: #cc0000 -1px -1px 0px, #cc0000 1px -1px 0px, #cc0000 -1px 1px 0px, #cc0000 1px 1px 0px,
  392. #0099cc -2px -2px 0px, #0099cc 2px -2px 0px, #0099cc -2px 2px 0px, #0099cc 2px 2px 0px,
  393. #FFF -3px -3px 0px, #FFF 3px -3px 0px, #FFF -3px 3px 0px, #FFF 3px 3px 0px;
  394. transition: 0.5s ease-in-out;
  395. -moz-transition: 0.5s ease-in-out;
  396. -webkit-transition: 0.5s ease-in-out;
  397. -o-transition: 0.5s ease-in-out;
  398. }
  399.  
  400. #login:hover {background-color: rgba(255,255,255,0.5);
  401. color: #cc0000;
  402. text-shadow: #0099cc -1px -1px 0px, #0099cc 1px -1px 0px, #0099cc -1px 1px 0px, #0099cc 1px 1px 0px,
  403. #FFF -2px -2px 0px, #FFF 2px -2px 0px, #FFF -2px 2px 0px, #FFF 2px 2px 0px,
  404. #0099cc -3px -3px 0px, #0099cc 3px -3px 0px, #0099cc -3px 3px 0px, #0099cc 3px 3px 0px;
  405. transition: 0.5s ease-in-out;
  406. -moz-transition: 0.5s ease-in-out;
  407. -webkit-transition: 0.5s ease-in-out;
  408. -o-transition: 0.5s ease-in-out;
  409. }
  410.  
  411. #user, #pass {
  412. color: 000;
  413. font: 28px Jura;
  414. letter-spacing: 0px;
  415. margin: 15px;
  416. height: 15%;
  417. width: 90%;
  418. border: 2px solid #fff;
  419. border-radius: 5px;
  420. box-shadow: 1px 1px 2px #333;
  421. background-color: rgba(255,255,255,0.7);
  422. text-align: center;
  423. text-shadow: #FFF -1px -1px 0px, #FFF 1px -1px 0px, #FFF -1px 1px 0px, #FFF 1px 1px 0px;
  424. }
  425.  
  426. #user:hover, #pass:hover{background-color: rgba(255,255,255,0.5); cursor:url(http://cur.cursors-4u.net/cursors/cur-11/cur1047.cur), progress !important; }
  427.  
  428. .loginoverlay {
  429. z-index: 60; position: fixed;
  430. width: 100%; height: 100%;
  431. top: 0; left: 0;
  432. background-color: #000;
  433. background-image: url(http://i.imgur.com/U9jIPkc.png), url(http://i.imgur.com/UQgUrQ4.png);
  434. background-repeat: no-repeat, repeat;
  435. background-size: auto 100%, auto;
  436. transition: all 0.6s ease-in-out;
  437. visibility: visible; opacity: 1;
  438. }
  439.  
  440. .loginoverlay:target {visibility: hidden; z-index: 0; opacity: 0;}
  441.  
  442.  
  443. .window {
  444. top: 30%; left: 55%;
  445. padding: 20px;
  446. border: 2px solid #fff;
  447. border-radius: 5px;
  448. box-shadow: 1px 1px 2px #333;
  449. background-image:url('http://i.imgur.com/9LrqQ6m.jpg');
  450. width: 30%;
  451. height: 30%;
  452. position: relative;
  453. transition: all 5s ease-in-out;
  454. max-height: 30%;
  455. overflow: auto;
  456. }
  457.  
  458. .window .close {position: absolute; width: 80%; top: 70%; left: 10%;}
  459. @media screen and (max-width: 700px){.window{width: 70%;}
  460.  
  461. </style>
  462. <body>
  463.  
  464. <div id="extra" oncontextmenu="return false;">
  465.  
  466. <div id="overlay1"><div id="load" title="LOADING">LOADING</div><div id="welc">welcome to the game</div></div>
  467. <div id="overlay2"></div>
  468. <div id="mainlogin" class="loginoverlay">
  469. <div class="window">
  470. <input type="text" id="user" value="">
  471. <div id="pass">• • • • • • • • • • •<img src="http://i.imgur.com/GevFlsU.gif" height="15px" /></div>
  472. <a class="close" href="#mainlogin" onclick="myFunction()"><div id="login">LOGIN</div></a>
  473. </div></div>
  474.  
  475. <div id="maindiv">
  476.  
  477. <div id="hotkeys">
  478. <span><div id="skillbox" style="left: 10px;" href="Cheese is bad for you!" class="tooltip">
  479. <img src="http://i.imgur.com/Qw7G9ea.png"/></div></span>
  480. <span><div id="skillbox" style="left: 50px;" href="Stop spamming memes in the guild chat!" class="tooltip">
  481. <img src="http://i.imgur.com/EKhgVhL.png"/></div></span>
  482. <span><div id="skillbox" style="left: 90px;" href="That's my job." class="tooltip">
  483. <img src="http://i.imgur.com/3ndiec0.png"/></div></span>
  484. <span><div id="skillbox" style="left: 130px;" href="Hope you got RES." class="tooltip">
  485. <img src="http://i.imgur.com/2Qgic2u.png"/></div></span>
  486. <span><div id="skillbox" style="left: 170px;" href="Run before they get too close." class="tooltip"><img src="http://i.imgur.com/lZuqNZN.png"/></div></span>
  487. <span><div id="skillbox" style="left: 210px;" href="Swish swoosh your weapon's a goose." class="tooltip"><img src="http://i.imgur.com/2P0xape.png"/></div></span>
  488. <span><div id="skillbox" style="left: 250px;" href="Don't use lag as an excuse." class="tooltip"><img src="http://i.imgur.com/uzLmyWF.png"/></div></span>
  489. <span><div id="skillbox" style="left: 290px;" href="Can never be too safe." class="tooltip"><img src="http://i.imgur.com/9I8OTVS.png"/></div></span>
  490. <span><div id="skillbox" style="left: 330px;" href="Wow potions are expensive you know." class="tooltip"><img src="http://i.imgur.com/DGnka3r.png"/></div></span>
  491. <span><div id="skillbox" style="left: 370px;" href="You're a waste of mana." class="tooltip">
  492. <img src="http://i.imgur.com/3Ux0JPW.png"/></div></span>
  493. </div>
  494.  
  495. <div id="hpwrap">
  496. <div id="bar"><div id="hp">H P</div></div>
  497. <div id="bar"><div id="mp">M P</div></div>
  498. <div id="bar"><div id="xp">X P</div></div>
  499. </div>
  500.  
  501. <div id="avatar"></div>
  502. <h1 id="try"> </h1>
  503. <h2>L V . 1 • P L A Y E R &nbsp; 1</h2>
  504.  
  505. <div id="mainstats"><div id="exit">X</div>
  506. <br>
  507. <--- INSERT GAME HERE OR SOMETHING --->
  508.  
  509. <a href="Test">Link</a> <b>Bold</b> <i>Italic</i> <u>Underline</u>
  510. </div>
  511.  
  512. </div>
  513. </div>
  514.  
  515. <script>
  516. function myFunction() {
  517. var x = document.getElementById("user").value;
  518. document.getElementById("try").innerHTML = x;
  519. }
  520. </script>
  521.  
  522. </body>
  523. </html>
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!