API tools faq
paste
Advertisement
Falkstids

Arcanine END

Falkstids
Jun 11th, 2017
80
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.86 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2. @import url('https://fonts.googleapis.com/css?family=Play');
  3.  
  4. body{
  5. background-color:transparent;
  6. overflow:hidden;
  7. }
  8.  
  9. ::-webkit-scrollbar
  10. {
  11. width: 0px;
  12. background-color: transparent;
  13. }
  14.  
  15.  
  16. #gradient{
  17. background: linear-gradient(red, yellow); /* Standard syntax */
  18. background-size:100%;
  19. width:100%;
  20. height:100%;
  21. position:fixed;
  22. top:0px;
  23. left:0px;
  24. opacity:0.6;
  25. animation:flame 5s linear infinite;
  26.  
  27. }
  28.  
  29.  
  30. @keyframes flame {
  31. 0% { -webkit-filter: brightness(100%);
  32. }
  33. 20% {-webkit-filter: brightness(150%);
  34. }
  35. 25% {-webkit-filter: brightness(200%);
  36. }
  37. 35% {-webkit-filter: brightness(150%);
  38. }
  39. 40% {-webkit-filter: brightness(100%);
  40. }
  41. 45% {-webkit-filter: brightness(130%);
  42. }
  43. 55% {-webkit-filter: brightness(100%);
  44. }
  45. 60% {-webkit-filter: brightness(150%);
  46. }
  47. 65% {-webkit-filter: brightness(200%);
  48. }
  49. 75% {-webkit-filter: brightness(80%);
  50. }
  51. 85% {-webkit-filter: brightness(160%);
  52. }
  53. 90% {-webkit-filter: brightness(150%);
  54. }
  55. 100% {-webkit-filter: brightness(100%);
  56. }
  57. }
  58.  
  59.  
  60. #background-body{
  61. background-image:url(http://forum.gc.historygames.net/uploads/monthly_2016_09/background1-011.png.14b46c1e826acd884a125ad82e183b16.png);
  62. background-size:10%;
  63. background-position:left;
  64. width:100%;
  65. height:100%;
  66. position:fixed;
  67. top:0px;
  68. left:0px;
  69. opacity:0.7;
  70. z-index:2;
  71. }
  72.  
  73. #whosthat{
  74. background-image:url(http://i.imgur.com/HddtBOT.png);
  75. background-size:100%;
  76. background-repeat:no-repeat;
  77. width:800px;
  78. height:350px;
  79. position:absolute;
  80. top:50%;
  81. left:50%;
  82. margin-top:-185px;
  83. margin-left:-394px;
  84. border-radius: 65px 15px 65px 15px;
  85. background-position:0px -80px;
  86. z-index:50;
  87. opacity:1;
  88. border:solid 6px #000;
  89. }
  90.  
  91. @keyframes turn-off{
  92. 0%{
  93. transform:scale(1,1.3) translate3d(0,0,0);
  94. -webkit-filter:brightness(1);
  95. filter:brightness(1);
  96. opacity:1;
  97. }
  98. 60%{
  99. transform:scale(1.3,0.001) translate3d(0,0,0);
  100. -webkit-filter:brightness(10);
  101. filter:brightness(10);
  102. }
  103. 100%{
  104. transform:scale(0.000,0.0001) translate3d(0,0,0);
  105. -webkit-filter:brightness(50);
  106. filter:brightness(50);
  107. }
  108. }
  109.  
  110. #arcanine{
  111. width:400px;
  112. height:400px;
  113. position:absolute;
  114. top:50%;
  115. left:50%;
  116. margin-top:-150px;
  117. margin-left:-300px;
  118. animation: float 6s ease-in-out infinite;
  119. z-index:1;
  120. }
  121.  
  122. #arcanine a{
  123. background-image:url(http://i.imgur.com/HDhAKmy.png);
  124. background-size:100%;
  125. width:300px;
  126. height:300px;
  127. display:inline-block;
  128. z-index:0;
  129. }
  130.  
  131. @keyframes float {
  132. 0% {
  133.  
  134. transform: translatey(0px);
  135. }
  136. 50% {
  137.  
  138. transform: translatey(-10px);
  139. }
  140. 100% {
  141.  
  142. transform: translatey(0px);
  143. }
  144. }
  145.  
  146. #menu {
  147. border:solid 6px #000;
  148. background-image:url(http://i.imgur.com/7na1fIN.png);
  149. backround-color:transparent;
  150. background-size:100%;
  151. width:800px;
  152. height:350px;
  153. border-radius: 70px 20px 70px 20px;
  154. top:50%;
  155. left:50%;
  156. position:absolute;
  157. margin-top:-190px;
  158. margin-left:-400px;
  159. z-index:5;
  160. opacity:0;
  161. }
  162.  
  163. #container{
  164. width:800px;
  165. height:200px;
  166. top:50%;
  167. left:50%;
  168. position:absolute;
  169. margin-top:-100px;
  170. margin-left:-400px;
  171. background-color:#999999;
  172. opacity:.5;
  173. }
  174.  
  175. #pokeball{
  176. background-image:url(http://thecraftchop.com/files/others/Pokeball.svg);
  177. background-size:100%;
  178. width:200px;
  179. height:200px;
  180. position:absolute;
  181. top:50%;
  182. left:50%;
  183. margin-top:-100px;
  184. margin-left:-105px;
  185. opacity:.6;
  186. }
  187.  
  188. #ball1{
  189.  
  190. background-image:url(https://68.media.tumblr.com/84c06021db3bfcffb6e2400e632da1bf/tumblr_odm3weRRwA1qfjr5zo2_540.gif);
  191. background-size:190%;
  192. background-position:-50px;
  193. width:100px;
  194. height:100px;
  195. top:50%;
  196. left:50%;
  197. margin-top:-230px;
  198. margin-left:400px;
  199. position:absolute;
  200. opacity:1;
  201. border:solid 6px #000;
  202. border-radius:100%;
  203. z-index:10;
  204. opacity:0;
  205. transition:1s;
  206. transition-delay:1s;
  207. }
  208.  
  209. #ball2{
  210.  
  211. background-image:url(https://68.media.tumblr.com/1e762cfbd78fd456546b8601daa08f0d/tumblr_oqxusuHpcY1vpbs3jo1_500.gif);
  212. background-size:190%;
  213. background-position:-50px;
  214. width:100px;
  215. height:100px;
  216. top:50%;
  217. left:50%;
  218. margin-top:-230px;
  219. margin-left:-515px;
  220. position:absolute;
  221. opacity:1;
  222. border:solid 6px #000;
  223. border-radius:100%;
  224. z-index:10;
  225. opacity:0;
  226. transition:1s;
  227. transition-delay:1s;
  228. }
  229.  
  230. #ball3{
  231.  
  232. background-image:url(https://68.media.tumblr.com/4a17b6459b95791c96a8a8e50e479e08/tumblr_omfw0pqGdC1tx6wtwo3_500.gif);
  233. background-size:190%;
  234. background-position:-50px;
  235. width:100px;
  236. height:100px;
  237. top:50%;
  238. left:50%;
  239. margin-top:110px;
  240. margin-left:400px;
  241. position:absolute;
  242. opacity:1;
  243. border:solid 6px #000;
  244. border-radius:100%;
  245. z-index:10;
  246. opacity:0;
  247. transition:1s;
  248. transition-delay:1s;
  249. }
  250.  
  251. #ball4{
  252.  
  253. background-image:url(https://68.media.tumblr.com/2b640258ebb34e1290e10d5f57151232/tumblr_o3mk15wgcF1tqptlzo1_500.gif);
  254. background-size:190%;
  255. background-position:-50px 0px;
  256. width:100px;
  257. height:100px;
  258. top:50%;
  259. left:50%;
  260. margin-top:110px;
  261. margin-left:-515px;
  262. position:absolute;
  263. opacity:0;
  264. border:solid 6px #000;
  265. border-radius:100%;
  266. z-index:10;
  267. opacity:0;
  268. transition:1s;
  269. transition-delay:1s;
  270. }
  271.  
  272. #image{
  273. background-image:url(http://i.imgur.com/jBzZh8a.png);
  274. background-size:40%;
  275. width:570px;
  276. height:500px;
  277. background-repeat:no-repeat;
  278. top:50%;
  279. left:50%;
  280. position:absolute;
  281. margin-top:-175px;
  282. margin-left:-950px;
  283. transform: scaleX(-1);
  284. filter: FlipH;
  285. opacity:0;
  286. z-index:10;
  287. transition:1s;
  288. transition-delay:1.5s;
  289. filter: drop-shadow(1px 1px 5px #000);
  290. }
  291.  
  292. #image2{
  293. background-image:url(http://i.imgur.com/2N1swat.png);
  294. background-size:40%;
  295. width:630px;
  296. height:500px;
  297. background-repeat:no-repeat;
  298. top:50%;
  299. left:50%;
  300. position:absolute;
  301. margin-top:-175px;
  302. margin-left:380px;
  303. opacity:0;
  304. z-index:10;
  305. transition:1s;
  306. transition-delay:1.5s;
  307. filter: drop-shadow(-1px -1px 5px #000);
  308. }
  309.  
  310. #navi{
  311. width:200px;
  312. height:50px;
  313. background-color:transparent;
  314. position:absolute;
  315. top:50%;
  316. left:50%;
  317. opacity:0;
  318. margin-left:-55px;
  319. margin-top:-180px;
  320. }
  321.  
  322. #navi a{
  323. width:25px;
  324. height:25px;
  325. background-image:url(https://smashboards.com/data/avatars/l/336/336977.jpg?1445907979);
  326. background-size:100%;
  327. display:inline-block;
  328. }
  329.  
  330. #sprite{
  331. background-image:url(http://rs980.pbsrc.com/albums/ae290/CorrineAri/arcanine.gif~c200);
  332. width:130px;
  333. height:130px;
  334. position:absolute;
  335. top:50%;
  336. left:50%;
  337. background-size:100%;
  338. margin-top:-120px;
  339. margin-left:-225px;
  340. }
  341.  
  342. #navi a:hover{
  343. animation:flame 2s linear infinite;
  344. }
  345.  
  346. h1{
  347. font-family: 'Play', sans-serif;
  348. font-size:14pt;
  349. color:#dadada;
  350. text-align:center;
  351. border-bottom:solid .1px #dadada;
  352. line-height:0px;
  353. }
  354.  
  355. a{
  356. color:#999999;
  357. text-decoration:none;
  358. transition:1s;
  359. }
  360.  
  361. a:hover{
  362. color:#dadada;
  363.  
  364. }
  365. #OOC{
  366. opacity:0;
  367. background-image:url(http://i.imgur.com/7na1fIN.png);
  368. backround-color:transparent;
  369. background-size:200%;
  370. border-radius: 20px 20px 20px 20px;
  371. border:solid 4px #000;
  372. width:330px;
  373. height:180px;
  374. top:50%;
  375. left:50%;
  376. position:absolute;
  377. margin-top:200px;
  378. margin-left:-400px;
  379. z-index:5;
  380. padding:10px;
  381. overflow:auto;
  382. font-family: 'Play', sans-serif;
  383. font-size:10pt;
  384. color:#dadada;
  385. text-align:left;
  386. text-shadow: 2px 2px 3px #000;
  387. }
  388.  
  389. #Gijinka{
  390. opacity:0;
  391. background-image:url(http://i.imgur.com/7na1fIN.png);
  392. backround-color:transparent;
  393. background-size:200%;
  394. border-radius: 20px 20px 20px 20px;
  395. border:solid 4px #000;
  396. width:330px;
  397. height:180px;
  398. top:50%;
  399. left:50%;
  400. position:absolute;
  401. margin-top:200px;
  402. margin-left:40px;
  403. z-index:5;
  404. padding:10px;
  405. overflow:auto;
  406. font-family: 'Play', sans-serif;
  407. font-size:10pt;
  408. color:#dadada;
  409. text-align:left;
  410. text-shadow: 2px 2px 3px #000;
  411. }
  412.  
  413. #blanket:target #whosthat {
  414. opacity:0;
  415. z-index:2;
  416. animation: turn-off 0.55s linear ;
  417. }
  418. #blanket:target #menu{
  419. opacity:1;
  420. transition:1s;
  421. transition-delay:.1s;
  422. }
  423. #blanket:target #Gijinka{
  424. opacity:1;
  425. transition:1s;
  426. transition-delay:.5s;
  427. }
  428. #blanket:target #OOC{
  429. opacity:1;
  430. transition:1s;
  431. transition-delay:.5s;
  432. }
  433. #blanket:target #ball1{
  434. opacity:1;
  435. margin-left:350px;
  436. }
  437. #blanket:target #ball2{
  438. opacity:1;
  439. margin-left:-465px;
  440. }
  441. #blanket:target #ball3{
  442. opacity:1;
  443. margin-left:350px;
  444. }
  445. #blanket:target #ball4{
  446. opacity:1;
  447. margin-left:-465px;
  448. }
  449. #blanket:target #image{
  450. opacity:1;
  451. margin-left:-800px;
  452. }
  453. #blanket:target #image2{
  454. opacity:1;
  455. margin-left:200px;
  456. }
  457. #blanket:target #navi{
  458. opacity:1;
  459. transition:1s;
  460. z-index:15;
  461. }
  462.  
  463. #infobox1{
  464. width:480px;
  465. height:285px;
  466. position:absolute;
  467. top:50%;
  468. left:50%;
  469. background-image:url(http://i.imgur.com/lGdHMNW.png);
  470. background-repeat:no-repeat;
  471. background-size:100%;
  472. margin-top:-150px;
  473. margin-left:-235px;
  474. z-index:0;
  475. opacity:0;
  476. box-shadow: -12px 10px 64px -15px rgba(0,0,0,0.75);
  477. border:solid 3px #000;
  478. }
  479.  
  480. #blanket2:target #infobox1{
  481. opacity:1;
  482. transition:1s;
  483. z-index:15;
  484. }
  485. #blanket2:target #Gijinka{
  486. opacity:1;
  487. transition:1s;
  488. transition-delay:.5s;
  489. }
  490. #blanket2:target #OOC{
  491. opacity:1;
  492. transition:1s;
  493. transition-delay:.5s;
  494. }
  495. #blanket2:target #whosthat {
  496. opacity:0;
  497. z-index:2;
  498. animation: turn-off 0.55s linear ;
  499. }
  500. #blanket2:target #menu{
  501. opacity:1;
  502. transition:1s;
  503. transition-delay:.1s;
  504. }
  505. #blanket2:target #ball1{
  506. opacity:1;
  507. margin-left:350px;
  508. }
  509. #blanket2:target #ball2{
  510. opacity:1;
  511. margin-left:-465px;
  512. }
  513. #blanket2:target #ball3{
  514. opacity:1;
  515. margin-left:350px;
  516. }
  517. #blanket2:target #ball4{
  518. opacity:1;
  519. margin-left:-465px;
  520. }
  521. #blanket2:target #image{
  522. opacity:1;
  523. margin-left:-800px;
  524. }
  525. #blanket2:target #image2{
  526. opacity:1;
  527. margin-left:200px;
  528. }
  529. #blanket2:target #navi{
  530. opacity:1;
  531. transition:1s;
  532. z-index:15;
  533. }
  534.  
  535. #infobox2{
  536. width:480px;
  537. height:285px;
  538. position:absolute;
  539. top:50%;
  540. left:50%;
  541. background-image:url(http://i.imgur.com/dEhAgks.png);
  542. background-repeat:no-repeat;
  543. background-size:100%;
  544. margin-top:-150px;
  545. margin-left:-235px;
  546. z-index:0;
  547. opacity:0;
  548. box-shadow: -12px 10px 64px -15px rgba(0,0,0,0.75);
  549. border:solid 3px #000;
  550. }
  551.  
  552. #blanket3:target #infobox2{
  553. opacity:1;
  554. transition:1s;
  555. z-index:15;
  556. }
  557. #blanket3:target #whosthat {
  558. opacity:0;
  559. z-index:2;
  560. animation: turn-off 0.55s linear ;
  561. }
  562. #blanket3:target #menu{
  563. opacity:1;
  564. transition:1s;
  565. transition-delay:.1s;
  566. }
  567.  
  568. #blanket3:target #Gijinka{
  569. opacity:1;
  570. transition:1s;
  571. transition-delay:.5s;
  572. }
  573. #blanket3:target #OOC{
  574. opacity:1;
  575. transition:1s;
  576. transition-delay:.5s;
  577. }
  578. #blanket3:target #ball1{
  579. opacity:1;
  580. margin-left:350px;
  581. }
  582. #blanket3:target #ball2{
  583. opacity:1;
  584. margin-left:-465px;
  585. }
  586. #blanket3:target #ball3{
  587. opacity:1;
  588. margin-left:350px;
  589. }
  590. #blanket3:target #ball4{
  591. opacity:1;
  592. margin-left:-465px;
  593. }
  594. #blanket3:target #image{
  595. opacity:1;
  596. margin-left:-800px;
  597. }
  598. #blanket3:target #image2{
  599. opacity:1;
  600. margin-left:200px;
  601. }
  602. #blanket3:target #navi{
  603. opacity:1;
  604. transition:1s;
  605. z-index:15;
  606. }
  607.  
  608. #infobox3{
  609. width:480px;
  610. height:285px;
  611. position:absolute;
  612. top:50%;
  613. left:50%;
  614. background-image:url(http://i.imgur.com/mLeW8Lo.png);
  615. background-repeat:no-repeat;
  616. background-size:100%;
  617. margin-top:-150px;
  618. margin-left:-235px;
  619. z-index:0;
  620. opacity:0;
  621. box-shadow: -12px 10px 64px -15px rgba(0,0,0,0.75);
  622. border:solid 3px #000;
  623. }
  624. #flamethrower {
  625. width:300px;
  626. height:30px;
  627. background-color:transparent;
  628. position:absolute;
  629. top:50%;
  630. left:50%;
  631. margin-left:-70px;
  632. margin-top:-110px;
  633. }
  634. #morningsun {
  635. width:300px;
  636. height:30px;
  637. background-color:transparent;
  638. position:absolute;
  639. top:50%;
  640. left:50%;
  641. margin-left:-70px;
  642. margin-top:-75px;
  643. }
  644. #solarbeam {
  645. width:300px;
  646. height:30px;
  647. background-color:transparent;
  648. position:absolute;
  649. top:50%;
  650. left:50%;
  651. margin-left:-70px;
  652. margin-top:-45px;
  653. }
  654. #sunnyday {
  655. width:300px;
  656. height:30px;
  657. background-color:transparent;
  658. position:absolute;
  659. top:50%;
  660. left:50%;
  661. margin-left:-70px;
  662. margin-top:-15px;
  663. }
  664. #flamethrower:hover #description{
  665. width:300px;
  666. height:80px;
  667. position:absolute;
  668. top:50%;
  669. left:0%;
  670. margin-top:165px;
  671. background-image:url(https://image.prntscr.com/image/1kYfWhXASNia_xMeWHgk-g.png);
  672. background-size:100%;
  673. background-repeat:no-repeat;
  674. }
  675. #morningsun:hover #description{
  676. width:300px;
  677. height:80px;
  678. position:absolute;
  679. top:50%;
  680. left:0%;
  681. margin-top:130px;
  682. background-image:url(https://image.prntscr.com/image/xAdrfQQbQt6moPZ1KfnGJA.png);
  683. background-size:100%;
  684. background-repeat:no-repeat;
  685. }
  686. #solarbeam:hover #description{
  687. width:300px;
  688. height:80px;
  689. position:absolute;
  690. top:50%;
  691. left:0%;
  692. margin-top:100px;
  693. background-image:url(https://image.prntscr.com/image/_itTlhGvQq6l5s2UK_8wng.png);
  694. background-size:100%;
  695. background-repeat:no-repeat;
  696. }
  697. #sunnyday:hover #description{
  698. width:300px;
  699. height:80px;
  700. position:absolute;
  701. top:50%;
  702. left:0%;
  703. margin-top:70px;
  704. background-image:url(https://image.prntscr.com/image/A30KU2u_QtirYntSAz5OBQ.png);
  705. background-size:100%;
  706. background-repeat:no-repeat;
  707. }
  708.  
  709.  
  710.  
  711.  
  712. #blanket4:target #infobox3{
  713. opacity:1;
  714. transition:1s;
  715. z-index:15;
  716. }
  717. #blanket4:target #whosthat {
  718. opacity:0;
  719. z-index:2;
  720. animation: turn-off 0.55s linear ;
  721. }
  722. #blanket4:target #menu{
  723. opacity:1;
  724. transition:1s;
  725. transition-delay:.1s;
  726. }
  727. #blanket4:target #Gijinka{
  728. opacity:1;
  729. transition:1s;
  730. transition-delay:.5s;
  731. }
  732. #blanket4:target #OOC{
  733. opacity:1;
  734. transition:1s;
  735. transition-delay:.5s;
  736. }
  737. #blanket4:target #ball1{
  738. opacity:1;
  739. margin-left:350px;
  740. }
  741. #blanket4:target #ball2{
  742. opacity:1;
  743. margin-left:-465px;
  744. }
  745. #blanket4:target #ball3{
  746. opacity:1;
  747. margin-left:350px;
  748. }
  749. #blanket4:target #ball4{
  750. opacity:1;
  751. margin-left:-465px;
  752. }
  753. #blanket4:target #image{
  754. opacity:1;
  755. margin-left:-800px;
  756. }
  757. #blanket4:target #image2{
  758. opacity:1;
  759. margin-left:200px;
  760. }
  761. #blanket4:target #navi{
  762. opacity:1;
  763. transition:1s;
  764. z-index:15;
  765. }
  766. </style>
  767.  
  768. <div id="gradient"></div>
  769. <div id="background-body"></div>
  770. <div id="blanket"> <div id="blanket2"><div id="blanket3">
  771. <div id="blanket4">
  772. <div id="OOC"> <h1>OOC</h1><br>
  773. <b>00</b> This is a code by the <a target="_blank" href="https://roleplay.chat/profile.php?user=Hound+of+Tindalos">Hound of Tindalos</a>, reach out to him if you want comissions or code help. <br></div>
  774. <div id="Gijinka"><h1>Gijinka Stats</h1><br>
  775. <span style="float: left; ">Status</span> <span style="float: right;">Status</span><br>
  776. <span style="float: left; ">Status</span> <span style="float: right;">Status</span><br>
  777. <span style="float: left; ">Status</span> <span style="float: right;">Status</span><br>
  778. <span style="float: left; ">Status</span> <span style="float: right;">Status</span><br>
  779. <span style="float: left; ">Status</span> <span style="float: right;">Status</span><br>
  780. <span style="float: left; ">Status</span> <span style="float: right;">Status</span><br>
  781. <span style="float: left; ">Status</span> <span style="float: right;">Status</span><br>
  782. <span style="float: left; ">Status</span> <span style="float: right;">Status</span><br>
  783. <span style="float: left; ">Status</span> <span style="float: right;">Status</span><br>
  784. <span style="float: left; ">Status</span> <span style="float: right;">Status</span><br>
  785.  
  786. </div>
  787. <div id="menu"><div id="container"><div id="pokeball"></div></div></div>
  788. <div id="ball1"></div>
  789. <div id="ball2"></div>
  790. <div id="ball3"></div>
  791. <div id="ball4"></div>
  792. <div id="image"></div>
  793. <div id="image2"></div>
  794. <div id="infobox1"><div id="sprite"></div></div>
  795. <div id="infobox2"><div id="sprite"></div></div>
  796. <div id="infobox3">
  797. <div id="sprite"></div>
  798. <div id="flamethrower"><div id="description"></div></div>
  799. <div id="morningsun"><div id="description"></div></div>
  800. <div id="solarbeam"><div id="description"></div></div>
  801. <div id="sunnyday"><div id="description"></div></div>
  802. </div>
  803.  
  804. <div id="navi">
  805. <a href="#blanket2"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  806. <a href="#blanket3"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  807. <a href="#blanket4"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  808. </div>
  809.  
  810. <div id="whosthat"><div id="arcanine"><a href="#blanket"></a></div> </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!