API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Oct 26th, 2016
63
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.42 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2. @import url(https://fonts.googleapis.com/css?family=Play);
  3. body{background-color:black;cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1030.cur),progress !important;}
  4. body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1030.cur), progress !important;}
  5. ::-webkit-scrollbar-thumb:vertical{
  6. width: 1px;
  7. background-color: #c8998e;
  8. }
  9.  
  10. ::-webkit-scrollbar {
  11. width: 1px;
  12. background-color: transparent;
  13. }
  14.  
  15. ::selection {
  16. background: transparent;
  17. color: #fff;
  18. }
  19.  
  20. ::-moz-selection {
  21. background: transparent;
  22. color: #fff;
  23. }
  24.  
  25. #load {
  26. position:absolute;
  27. width:600px;
  28. height:56px;
  29. left:50%;
  30. top:80%;
  31. margin-left:-300px;
  32. overflow:visible;
  33. -webkit-user-select:none;
  34. -moz-user-select:none;
  35. -ms-user-select:none;
  36. user-select:none;
  37. cursor:default;
  38. }
  39. .button {
  40. font-size: 10px;
  41. color: #FFFFFF;
  42. letter-spacing: 2px;
  43. text-align: center;
  44. line-height: 40px;
  45. min-height: 40px;
  46. opacity: 1;
  47. -webkit-transform: skewX(-8deg);
  48. transform: skewX(-8deg);
  49. display: inline-block;
  50. margin: 0 auto;
  51. padding: 0 15px;
  52. border: 3px solid #FFFFFF;
  53. text-decoration: none;
  54. position: relative;
  55. width: 120px;
  56. }
  57. .button .b-title {
  58. -webkit-transform: skewX(8deg);
  59. transform: skewX(8deg);
  60. display: block;
  61. position: relative;
  62. z-index: 2;
  63. color:#96063f;
  64. text-shadow:3px 2px white;
  65. font-size:19px;
  66. letter-spacing:5px;
  67. font-weight:900;
  68. font-family:Play;
  69. -webkit-transition: color 0.3s linear;
  70. transition: color 0.3s linear;
  71. -webkit-transition-delay: 0.25s;
  72. transition-delay: 0.25s;
  73. }
  74. .button .shadow {
  75. display: block;
  76. position: absolute;
  77. left: 0;
  78. width: 100%;
  79. height: 100%;
  80. box-shadow: 0px 0px 40px #FFFFFF;
  81. opacity: 0;
  82. -webkit-transition: opacity 0.3s linear;
  83. transition: opacity 0.3s linear;
  84. }
  85. .button .wrapper {
  86. position: absolute;
  87. width: 100%;
  88. height: 100%;
  89. top: 0;
  90. left: 0;
  91. white-space: nowrap;
  92. overflow: hidden;
  93. }
  94. .button .bg {
  95. width: 75%;
  96. height: 100%;
  97. background-color: #FFFFFF;
  98. position: absolute;
  99. left: -20%;
  100. top: 0;
  101. -webkit-transform: skewX(-32deg) translateY(-100%);
  102. transform: skewX(-32deg) translateY(-100%);
  103. -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.19, 1, 0.22, 1);
  104. transition: -webkit-transform 0.25s cubic-bezier(0.19, 1, 0.22, 1);
  105. transition: transform 0.25s cubic-bezier(0.19, 1, 0.22, 1);
  106. transition: transform 0.25s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 0.25s cubic-bezier(0.19, 1, 0.22, 1);
  107. }
  108. .button .bg:last-child {
  109. left: auto;
  110. right: -20%;
  111. -webkit-transform: skewX(-32deg) translateY(100%);
  112. transform: skewX(-32deg) translateY(100%);
  113. }
  114. .button:hover .bg {
  115. -webkit-transform: translateY(0%);
  116. transform: translateY(0%);
  117. }
  118. .button:hover .b-title {
  119. color: #000;
  120. -webkit-transition-delay: none;
  121. transition-delay: none;
  122. }
  123. .button:hover .shadow {
  124. opacity: 1;
  125. }
  126. .button.is-gold {
  127. color: #FFDF00;
  128. border-color: black;
  129. }
  130. .button.is-gold .shadow {
  131. box-shadow: 0px 0px 40px #FFDF00;
  132. }
  133. .button.is-gold .bg {
  134. background-color: #96063f;
  135. }
  136.  
  137. @-webkit-keyframes spin {
  138. 0% {
  139. -webkit-transform: rotate(0deg);
  140. /* Chrome, Opera 15+, Safari 3.1+ */
  141. -ms-transform: rotate(0deg);
  142. /* IE 9 */
  143. transform: rotate(0deg);
  144. /* Firefox 16+, IE 10+, Opera */
  145. }
  146. 100% {
  147. -webkit-transform: rotate(360deg);
  148. /* Chrome, Opera 15+, Safari 3.1+ */
  149. -ms-transform: rotate(360deg);
  150. /* IE 9 */
  151. transform: rotate(360deg);
  152. /* Firefox 16+, IE 10+, Opera */
  153. }
  154. }
  155. @keyframes spin {
  156. 0% {
  157. -webkit-transform: rotate(0deg);
  158. /* Chrome, Opera 15+, Safari 3.1+ */
  159. -ms-transform: rotate(0deg);
  160. /* IE 9 */
  161. transform: rotate(0deg);
  162. /* Firefox 16+, IE 10+, Opera */
  163. }
  164. 100% {
  165. -webkit-transform: rotate(360deg);
  166. /* Chrome, Opera 15+, Safari 3.1+ */
  167. -ms-transform: rotate(360deg);
  168. /* IE 9 */
  169. transform: rotate(360deg);
  170. /* Firefox 16+, IE 10+, Opera */
  171. }
  172. }
  173. #loader {
  174. display: block;
  175. position: relative;
  176. left: 35%;
  177. top: 30%;
  178. width: 400px;
  179. height: 400px;
  180. margin: -75px 0 0 -75px;
  181. border: 3px solid #0EDA27;
  182. }
  183. #loader-wrapper {
  184. position: fixed;
  185. top: 0;
  186. left: 0;
  187. width: 100%;
  188. height: 100%;
  189. z-index: -1;
  190. }
  191. #loader:before {
  192. content: "";
  193. position: absolute;
  194. top: 5px;
  195. left: 5px;
  196. right: 5px;
  197. bottom: 5px;
  198. border: 3px solid #e74c3c;
  199. }
  200. #loader:after {
  201. content: "";
  202. position: absolute;
  203. top: 15px;
  204. left: 15px;
  205. right: 15px;
  206. bottom: 15px;
  207. border: 3px solid #f9c922;
  208. }
  209.  
  210. /* change border to transparent and set only border-top to a solid color */
  211. #loader {
  212. border: 3px solid transparent;
  213. border-top-color: #0B82E4;
  214. border-radius: 50%;
  215. -webkit-animation: spin 2s linear infinite;
  216. animation: spin 3s linear infinite;
  217. }
  218. #loader:before {
  219. border: 3px solid transparent;
  220. border-top-color: #e74c3c;
  221. border-radius: 50%;
  222. -webkit-animation: spin 4s linear infinite;
  223. animation: spin 4s linear infinite;
  224. }
  225. #loader:after {
  226. border: 3px solid transparent;
  227. border-top-color: #f9c922;
  228. border-radius: 50%;
  229. -webkit-animation: spin 6s linear infinite;
  230. animation: spin 6s linear infinite;
  231. }
  232. #load div {
  233. position:absolute;
  234. width:20px;
  235. height:36px;
  236. opacity:0;
  237. font-family:Helvetica, Arial, sans-serif;
  238. font-size:40px;
  239. animation:move 2s linear infinite;
  240. -o-animation:move 2s linear infinite;
  241. -moz-animation:move 2s linear infinite;
  242. -webkit-animation:move 2s linear infinite;
  243. transform:rotate(180deg);
  244. -o-transform:rotate(180deg);
  245. -moz-transform:rotate(180deg);
  246. -webkit-transform:rotate(180deg);
  247. color:maroon;
  248. text-shadow:5px 3px white;
  249. }
  250.  
  251. #load div:nth-child(2) {
  252. animation-delay:0.2s;
  253. -o-animation-delay:0.2s;
  254. -moz-animation-delay:0.2s;
  255. -webkit-animation-delay:0.2s;
  256. }
  257. #load div:nth-child(3) {
  258. animation-delay:0.4s;
  259. -o-animation-delay:0.4s;
  260. -webkit-animation-delay:0.4s;
  261. -webkit-animation-delay:0.4s;
  262. }
  263. #load div:nth-child(4) {
  264. animation-delay:0.6s;
  265. -o-animation-delay:0.6s;
  266. -moz-animation-delay:0.6s;
  267. -webkit-animation-delay:0.6s;
  268. }
  269. #load div:nth-child(5) {
  270. animation-delay:0.8s;
  271. -o-animation-delay:0.8s;
  272. -moz-animation-delay:0.8s;
  273. -webkit-animation-delay:0.8s;
  274. }
  275. #load div:nth-child(6) {
  276. animation-delay:1s;
  277. -o-animation-delay:1s;
  278. -moz-animation-delay:1s;
  279. -webkit-animation-delay:1s;
  280. }
  281. #load div:nth-child(7) {
  282. animation-delay:1.2s;
  283. -o-animation-delay:1.2s;
  284. -moz-animation-delay:1.2s;
  285. -webkit-animation-delay:1.2s;
  286. }
  287.  
  288. @keyframes move {
  289. 0% {
  290. left:0;
  291. opacity:0;
  292. }
  293. 35% {
  294. left: 41%;
  295. -moz-transform:rotate(0deg);
  296. -webkit-transform:rotate(0deg);
  297. -o-transform:rotate(0deg);
  298. transform:rotate(0deg);
  299. opacity:1;
  300. }
  301. 65% {
  302. left:59%;
  303. -moz-transform:rotate(0deg);
  304. -webkit-transform:rotate(0deg);
  305. -o-transform:rotate(0deg);
  306. transform:rotate(0deg);
  307. opacity:1;
  308. }
  309. 100% {
  310. left:100%;
  311. -moz-transform:rotate(-180deg);
  312. -webkit-transform:rotate(-180deg);
  313. -o-transform:rotate(-180deg);
  314. transform:rotate(-180deg);
  315. opacity:0;
  316. }
  317. }
  318.  
  319. @-moz-keyframes move {
  320. 0% {
  321. left:0;
  322. opacity:0;
  323. }
  324. 35% {
  325. left:41%;
  326. -moz-transform:rotate(0deg);
  327. transform:rotate(0deg);
  328. opacity:1;
  329. }
  330. 65% {
  331. left:59%;
  332. -moz-transform:rotate(0deg);
  333. transform:rotate(0deg);
  334. opacity:1;
  335. }
  336. 100% {
  337. left:100%;
  338. -moz-transform:rotate(-180deg);
  339. transform:rotate(-180deg);
  340. opacity:0;
  341. }
  342. }
  343.  
  344. @-webkit-keyframes move {
  345. 0% {
  346. left:0;
  347. opacity:0;
  348. }
  349. 35% {
  350. left:41%;
  351. -webkit-transform:rotate(0deg);
  352. transform:rotate(0deg);
  353. opacity:1;
  354. }
  355. 65% {
  356. left:59%;
  357. -webkit-transform:rotate(0deg);
  358. transform:rotate(0deg);
  359. opacity:1;
  360. }
  361. 100% {
  362. left:100%;
  363. -webkit-transform:rotate(-180deg);
  364. transform:rotate(-180deg);
  365. opacity:0;
  366. }
  367. }
  368.  
  369. @-o-keyframes move {
  370. 0% {
  371. left:0;
  372. opacity:0;
  373. }
  374. 35% {
  375. left:41%;
  376. -o-transform:rotate(0deg);
  377. transform:rotate(0deg);
  378. opacity:1;
  379. }
  380. 65% {
  381. left:59%;
  382. -o-transform:rotate(0deg);
  383. transform:rotate(0deg);
  384. opacity:1;
  385. }
  386. 100% {
  387. left:100%;
  388. -o-transform:rotate(-180deg);
  389. transform:rotate(-180deg);
  390. opacity:0;
  391. }
  392. }
  393. .introscreen{position:absolute;top:0;left:0;right:0;margin:auto;bottom:0;width:1350px;height:650px;opacity:0;
  394. -webkit-animation-name: title;
  395. -webkit-animation-duration: 8s;
  396. animation-name:title;
  397. animation-duration: 8s;
  398. }
  399.  
  400. @-webkit-keyframes title {
  401. 0%{opacity:1;}
  402. 50%{opacity:1;}
  403. 100%{opacity:0;}
  404. }
  405.  
  406. @keyframes title {
  407. 0%{opacity:1;}
  408. 50%{opacity:1;}
  409. 100%{opacity:0;}
  410. }
  411.  
  412. .mainscreen{position:absolute;top:0;left:0;right:0;margin:auto;bottom:0;width:100%;background:url(http://i.picpar.com/bwbc.jpg)no-repeat center;background-size:100% 100%;background-color:white;height:100%;opacity:1;z-index:1;
  413. -webkit-animation-name: title2;
  414. -webkit-animation-duration: 8s;
  415. animation-name:title2;
  416. animation-duration: 8s;
  417. }
  418.  
  419. @-webkit-keyframes title2 {
  420. 0%{opacity:0;}
  421. 50%{opacity:0;}
  422. 100%{opacity:1;}
  423. }
  424.  
  425. @keyframes title2 {
  426. 0%{opacity:0;}
  427. 50%{opacity:0;}
  428. 100%{opacity:1;}}
  429.  
  430. .keon{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;width:350px;height:350px;background:url(http://www.fightersgeneration.com/nz4/char/undernight/sprites/hyde-uniel-stance-animation.gif)no-repeat center;background-size:100% 100%;}
  431. #titlename{position:absolute;top:410px;left:100px;height:100px;width:550px;background-color:transparent;color:#96063f;font-size:80px;letter-spacing:10px;text-shadow:3px 2px White; -ms-transform: rotate(13deg); /* IE 9 */
  432. -webkit-transform: rotate(13deg); /* Chrome, Safari, Opera */
  433. transform: rotate(13deg);font-family:Play;}
  434. .menuitems{position:absolute;top:500px;left:20px;height:50px;width:700px;color:#96063f; -ms-transform: rotate(13deg); /* IE 9 */
  435. -webkit-transform: rotate(13deg); /* Chrome, Safari, Opera */
  436. transform: rotate(13deg);}
  437.  
  438. .items{opacity:0;position:absolute;top:-500px;transition: 1s linear;
  439. -webkit-transition: 1s linear;
  440. -moz-transition: 1s linear;
  441. -o-transition: 1s linear;
  442. -ms-transition: 1s linear;}
  443. .items:target{opacity:1;position:absolute;top:0px;transition: 1s linear;
  444. -webkit-transition: 1s linear;
  445. -moz-transition: 1s linear;
  446. -o-transition: 1s linear;
  447. -ms-transition: 1s linear;}
  448. #picbox1{position:absolute;top:70px;left:120px;height:200px;width:200px;border:4px solid maroon;border-radius:50%;background:url(http://i.imgur.com/0TbYbDv.jpg)no-repeat center;background-size:100% 100%;}
  449. #statbox{position:absolute;top:80px;left:260px;height:180px;width:300px;border:4px solid maroon;background-color:black;color:white;padding-left:65px;overflow:auto;padding-right:10px;font-weight:600;font-size:18px;color:white;text-shadow:3px 2px #96063f;font-family:Play;}
  450. #statbox3{position:absolute;top:100px;left:230px;height:250px;width:300px;border:4px solid maroon;background-color:black;color:white;padding-left:5px;overflow:auto;padding-right:5px;text-align:center;font-weight:600;font-size:18px;color:white;text-shadow:3px 2px #96063f;font-family:Play;}
  451. #picbox2{position:absolute;top:70px;left:420px;height:200px;width:200px;border:4px solid maroon;border-radius:50%;background:url(http://i.imgur.com/S0vhg4n.jpg)no-repeat center;background-size:100% 100%;}
  452. #statbox2{position:absolute;top:80px;left:120px;height:180px;width:300px;border:4px solid maroon;background-color:black;color:white;padding-right:65px;overflow:auto;text-align:center;font-weight:600;font-size:18px;color:white;text-shadow:3px 2px #96063f;font-family:Play;}
  453. #line1{position:absolute;top:-20;left:400px;height:130px;width:30px;background-color:#96063f;z-index:-1;}
  454. #line2{position:absolute;top:-20;left:400px;height:130px;width:30px;background-color:#96063f;z-index:-1;}
  455. #line3{position:absolute;top:-20;left:400px;height:130px;width:30px;background-color:#96063f;z-index:-1;}
  456. #h1{position:absolute;top:10px;left:450px;height:50px;width:100px;color:white;font-size:40px;background-color:transparent;color:#96063f;font-family:play;letter-spacing:2px;text-shadow:3px 2px White;}
  457. #h2{position:absolute;top:10px;left:120px;height:50px;width:100px;color:white;font-size:40px;background-color:transparent;color:#96063f;font-family:play;letter-spacing:2px;text-shadow:3px 2px White;}
  458. #h3{position:absolute;top:30px;left:250px;height:50px;width:100px;color:white;font-size:40px;background-color:transparent;color:#96063f;font-family:play;letter-spacing:2px;text-shadow:3px 2px White;}
  459. </style>
  460. <div class="introscreen">
  461. <div id="loader-wrapper">
  462. <div id="loader"></div>
  463. </div>
  464. <div id="load">
  465. <div>G</div>
  466. <div>N</div>
  467. <div>I</div>
  468. <div>D</div>
  469. <div>A</div>
  470. <div>O</div>
  471. <div>L</div>
  472. </div>
  473. <div class="keon"></div>
  474. </div>
  475. <div class="mainscreen">
  476. <div id="titlename">KEON KIDO</div>
  477. <div class="menuitems"><br>
  478. <a href="#1" class="button is-gold is-vertical">
  479. <span class="shadow"></span>
  480. <span class="wrapper">
  481. <span class="bg"></span>
  482. <span class="b-title">STATS</span>
  483. <span class="bg"></span>
  484. </span>
  485. </a>
  486.  
  487. <a href="#2" class="button is-gold is-vertical">
  488. <span class="shadow"></span>
  489. <span class="wrapper">
  490. <span class="bg"></span>
  491. <span class="b-title">BIO</span>
  492. <span class="bg"></span>
  493. </span>
  494. </a>
  495.  
  496. <a href="#3" class="button is-gold is-vertical">
  497. <span class="shadow"></span>
  498. <span class="wrapper">
  499. <span class="bg"></span>
  500. <span class="b-title">OOC</span>
  501. <span class="bg"></span>
  502. </span>
  503. </a>
  504.  
  505. <a href="#4" class="button is-gold is-vertical">
  506. <span class="shadow"></span>
  507. <span class="wrapper">
  508. <span class="bg"></span>
  509. <span class="b-title">RESET</span>
  510. <span class="bg"></span>
  511. </span>
  512. </a>
  513. </div>
  514.  
  515. <div id="1" class="items">
  516. <div id="line1"></div>
  517. <h1 id="h1">statistics</h1>
  518. <div id="statbox">
  519. Name <font style=float:right>Keon Kido</font><br><br>
  520. Age <font style=float:right>20</font><br><br>
  521. Birth Date <font style=float:right>March 21st</font><br><br>
  522. Alignment <font style=float:right>Chaotic Netural</font><br><br>
  523. Alias <font style=float:right>Vicious</font><br><br>
  524. Gender<font style=float:right>Male</font><br><br>
  525. Height <font style=float:right>5'7"ft</font><br><br>
  526. Weight <font style=float:right>146lbs</font><br><br>
  527. Hair Color <font style=float:right>Blonde/Black</font><br><br>
  528. Eye Color <font style=float:right>Scarlet</font><br><br>
  529. Occupation <font style=float:right>??? </font><br><br>
  530. Affiliation <font style=float:right>None</font><br><br>
  531. Orientation <font style=float:right>Heterosexual (Mostly)</font><br><br>
  532. Quirks <font style=float:right>Angry</font><br><br>
  533. Marital Status <font style=float:right> Harlot(Yui)</font><br><br>
  534.  
  535.  
  536.  
  537. </div>
  538. <div id="picbox1"></div>
  539. </div>
  540. <div id="2" class="items">
  541. <div id="line2"></div>
  542. <h1 id="h2">biography</h1>
  543. <div id="statbox2">
  544. Put Bio Here
  545.  
  546.  
  547.  
  548. </div>
  549. <div id="picbox2"></div>
  550. </div>
  551. <div id="3" class="items">
  552. <div id="line3"></div>
  553. <h1 id="h3">ooc</h1>
  554. <div id="statbox3">
  555. - OoC is not Ic<Br><br>
  556. - Keon is a dick. Don't be salty OoC<Br><br>
  557. - I am a bit of a dick, go figure.<Br><br>
  558. - I mirror from one lines to novella<Br><br>
  559. - I got one <strike>lot a</strike>waifu.<Br><br>
  560. - The current FC is from Under Night in birth [Hyde Kido]<Br><br>
  561. - T1/Freeform Combat only.<br><br>
  562. - I don't care smut, story, casual I am just gonna write.
  563.  
  564. </div>
  565. </div>
  566. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!