API tools faq
paste
ZukoHiyama

pokekid

ZukoHiyama
Aug 7th, 2022
60
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.62 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2. @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
  3. ::-webkit-scrollbar {
  4. width: .1px;
  5. }
  6. ::-webkit-scrollbar-track {
  7. box-shadow: inset 0 0 5px grey;
  8. border-radius: 10px;
  9. }
  10. ::-webkit-scrollbar-thumb {
  11. background: #b95595;
  12. border-radius: 10px;
  13. }
  14. ::-webkit-scrollbar-thumb:hover {
  15. background: #b95591;
  16. }
  17. body {
  18. background-color: #F0E9E1;
  19. background-image: url("");
  20. background-position: fixed;
  21. background-repeat:repeat;
  22. background-position: right bottom;}
  23.  
  24. #title{position: fixed;
  25. bottom: 32vw;
  26. left: 30vw;
  27. z-index: 3;
  28. opacity: 1;
  29. transition: .8s;
  30. font-family: 'Press Start 2P', cursive;
  31. font-size: 3vw;
  32. }
  33.  
  34. #kid{
  35. position: fixed;
  36. bottom: 0vw;
  37. left: 0vw;
  38. z-index: 2;
  39. opacity: 1;
  40. transition: .8s;
  41. height: 45vw;
  42. width: 30vw;
  43. }
  44.  
  45. #kid img{position: fixed;
  46. display: inline-block;
  47. opacity: 1;
  48. height: 45vw;
  49. }
  50.  
  51. #navi1 {position: fixed;
  52. bottom: 10vw;
  53. left: 30vw;
  54. z-index: 2;
  55. opacity: 1;
  56. height: 3vw;
  57. width: 3vw;
  58. transition: .8s;
  59. }
  60.  
  61. #navi1 a {
  62. display: inline-block;
  63. }
  64.  
  65.  
  66. #navi1:hover {
  67. display: inline-block;
  68. animation: shake .7s infinite;
  69. animation-timing-function:linear;
  70. animation-delay: 0s;
  71. }
  72.  
  73. #navi1 img{position: fixed;
  74. display: inline-block;
  75. opacity: 1;
  76. height: 3vw;
  77. width: 3vw;
  78. transition: .8s;
  79. }
  80.  
  81. #navi2 {position: fixed;
  82. bottom: 10vw;
  83. left: 33.5vw;
  84. z-index: 2;
  85. opacity: 1;
  86. height: 3vw;
  87. width: 3vw;
  88. transition: .8s;
  89. }
  90.  
  91. #navi2 a {
  92. display: inline-block;
  93. }
  94.  
  95.  
  96. #navi2:hover {
  97. display: inline-block;
  98. animation: shake .7s infinite;
  99. animation-timing-function:linear;
  100. animation-delay: 0s;
  101. }
  102.  
  103. #navi2 img{position: fixed;
  104. display: inline-block;
  105. opacity: 1;
  106. height: 3vw;
  107. width: 3vw;
  108. transition: .8s;
  109. }
  110.  
  111. #navi3 {position: fixed;
  112. bottom: 6.5vw;
  113. left: 30vw;
  114. z-index: 2;
  115. opacity: 1;
  116. height: 3vw;
  117. width: 3vw;
  118. transition: .8s;
  119. }
  120.  
  121. #navi3 a {
  122. display: inline-block;
  123. }
  124.  
  125.  
  126. #navi3:hover {
  127. display: inline-block;
  128. animation: shake .7s infinite;
  129. animation-timing-function:linear;
  130. animation-delay: 0s;
  131. }
  132.  
  133. #navi3 img{position: fixed;
  134. display: inline-block;
  135. opacity: 1;
  136. height: 3vw;
  137. width: 3vw;
  138. transition: .8s;
  139. }
  140.  
  141. #navi4 {position: fixed;
  142. bottom: 6.5vw;
  143. left: 33.5vw;
  144. z-index: 2;
  145. opacity: 1;
  146. height: 3vw;
  147. width: 3vw;
  148. transition: .8s;
  149. }
  150.  
  151. #navi4 a {
  152. display: inline-block;
  153. }
  154.  
  155.  
  156. #navi4:hover {
  157. display: inline-block;
  158. animation: shake .7s infinite;
  159. animation-timing-function:linear;
  160. animation-delay: 0s;
  161. }
  162.  
  163. #navi4 img{position: fixed;
  164. display: inline-block;
  165. opacity: 1;
  166. height: 3vw;
  167. width: 3vw;
  168. transition: .8s;
  169. }
  170.  
  171.  
  172. #navi5 {position: fixed;
  173. bottom: 3vw;
  174. left: 30vw;
  175. z-index: 2;
  176. opacity: 1;
  177. height: 3vw;
  178. width: 3vw;
  179. transition: .8s;
  180. }
  181.  
  182. #navi5 a {
  183. display: inline-block;
  184. }
  185.  
  186.  
  187. #navi5:hover {
  188. display: inline-block;
  189. animation: shake .7s infinite;
  190. animation-timing-function:linear;
  191. animation-delay: 0s;
  192. }
  193.  
  194. #navi5 img{position: fixed;
  195. display: inline-block;
  196. opacity: 1;
  197. height: 3vw;
  198. width: 3vw;
  199. transition: .8s;
  200. }
  201.  
  202. #navi6 {position: fixed;
  203. bottom: 3vw;
  204. left: 33.5vw;
  205. z-index: 2;
  206. opacity: 1;
  207. height: 3vw;
  208. width: 3vw;
  209. transition: .8s;
  210. }
  211.  
  212. #navi6 a {
  213. display: inline-block;
  214. }
  215.  
  216.  
  217. #navi6:hover {
  218. display: inline-block;
  219. animation: shake .7s infinite;
  220. animation-timing-function:linear;
  221. animation-delay: 0s;
  222. }
  223.  
  224. #navi6 img{position: fixed;
  225. display: inline-block;
  226. opacity: 1;
  227. height: 3vw;
  228. width: 3vw;
  229. transition: .8s;
  230. }
  231.  
  232. .content{
  233. position: fixed;
  234. bottom: 14vw;
  235. left: 38vw;
  236. z-index: 1;
  237. opacity: 0;
  238. transition: 0s;
  239. }
  240.  
  241. .content:target{
  242. bottom: 14vw;
  243. left: 38vw;
  244. z-index: 2;
  245. opacity: 1;
  246. }
  247.  
  248. .contentbox{
  249. background-color: #F0E9E1;
  250. padding: 0px;
  251. font-family: 'Press Start 2P', cursive;
  252. font-size: 1vw;
  253. color: #000;
  254. letter-spacing: 0px;
  255. height: 15.5vw;
  256. width: 30vw;
  257. text-align: left;
  258. overflow-y: scroll;
  259. position: fixed;
  260. opacity: 1;
  261. }
  262.  
  263. .rel {
  264. width: 3vw;
  265. height: 3vw;
  266. margin:20px;
  267. margin-top:1px;
  268. margin-bottom:10px;
  269. float:right;
  270. margin-left:1px;
  271. background:#1f1413;}
  272.  
  273. .rel img {
  274. position:absolute;
  275. width:12vw;
  276. height:12vw;
  277. left:0vw;}
  278.  
  279. .wrds {
  280. position:absolute;
  281. padding:5;
  282. margin-left:10px;
  283. margin-top:8px;
  284. width:15vw;
  285. height:10vw;
  286. text-transform:uppercase;
  287. color:#000;
  288. background-color:#d4d0cf;
  289. font-size:.6vw;
  290. left:12.5vw;
  291. overflow-y: scroll;
  292. font-family: 'Press Start 2P', cursive;}
  293.  
  294.  
  295.  
  296.  
  297. .contentboxmain{
  298. bottom: 15vw;
  299. left: 30vw;
  300. background-color: #F0E9E1;
  301. padding: 0px;
  302. font-family: 'Press Start 2P', cursive;
  303. font-size: 1vw;
  304. color: #000;
  305. letter-spacing: 0px;
  306. height: 15.5vw;
  307. width: 56vw;
  308. z-index: 4;
  309. text-align: left;
  310. overflow-y: scroll;
  311. position: fixed;
  312. opacity: 1;
  313. }
  314.  
  315. @keyframes shake{
  316. 0% { transform: rotate(0deg); }
  317. 20% { transform: rotate(5deg); }
  318. 40% { transform: rotate(-5deg); }
  319. 60% { transform: rotate(5deg); }
  320. 80% { transform: rotate(-5deg); }
  321. 100% { transform: rotate(0deg); }
  322.  
  323. }
  324. </style>
  325. <body>
  326.  
  327. <div id="kid">
  328. <img src="https://i.imgur.com/iP8CSFy.png">
  329. </div>
  330.  
  331. <div id="Title">
  332. PokeKid
  333. </div>
  334.  
  335. <div id="navi1"><a href="#one"><img src="https://i.ibb.co/XYCnrBp/pokeballbutton.png"></a></div></div>
  336. <div id="navi2"><a href="#two"><img src="https://i.ibb.co/XYCnrBp/pokeballbutton.png"></a></div></div>
  337. <div id="navi3"><a href="#three"><img src="https://i.ibb.co/XYCnrBp/pokeballbutton.png"></a></div></div>
  338. <div id="navi4"><a href="#four"><img src="https://i.ibb.co/XYCnrBp/pokeballbutton.png"></a></div></div>
  339. <div id="navi5"><a href="#five"><img src="https://i.ibb.co/XYCnrBp/pokeballbutton.png"></a></div></div>
  340. <div id="navi6"><a href="#six"><img src="https://i.ibb.co/XYCnrBp/pokeballbutton.png"></a></div></div>
  341.  
  342. <div class="contentboxmain">
  343. This scrolls<br>
  344. This is the text box<br>
  345. This is the text box<br>
  346. This is the text box<br>
  347. This is the text box<br>
  348. This is the text box<br>
  349. This is the text box<br>
  350. This is the text box<br>
  351. This is the text box<br>
  352. This is the text box<br>
  353. This is the text box<br>
  354. This is the text box<br>
  355.  
  356. </div>
  357. </div>
  358. <div id="one" class="content"><div class="contentbox">
  359. <div class="rel">
  360. <img src="https://i.gifer.com/4KSb.gif">
  361. <div class="wrds">
  362. <div class="t">
  363. <span style="float:left;"><b>Name</b></span><span style="float:right;">Sun</span><br>
  364. <span style="float:left;"><b>Species</b></span><span style="float:right;">Jolteon</span><br>
  365. <span style="float:left;"><b>Gender</b></span><span style="float:right;">Male</span><br>
  366. <span style="float:left;"><b>Height</b></span><span style="float:right;">2'07"</span><br>
  367. <span style="float:left;"><b>Weight</b></span><span style="float:right;">54 lbs</span><br><br>
  368. <span style="float:left;"><b>Abilities</b></span><span style="float:right;">Volt Absorb/Quick Feet</span><br>
  369. <span style="float:left;"><b>Moveset</b></span><br><br>
  370. <span style="float:right;">Thunder</span><br>
  371. <span style="float:right;">Discharge</span><br>
  372. <span style="float:right;">Thunder Fang</span><br>
  373. <span style="float:right;">Agility</span><br>
  374. <span style="float:right;">Wild Charge</span><br>
  375. </div>
  376. </div>
  377. </div>
  378. </div>
  379. </div>
  380.  
  381. <div id="two" class="content"><div class="contentbox">
  382. <div class="rel">
  383. <img src="https://i.ibb.co/F8jFtGJ/ezgif-com-gif-maker-49.gif">
  384. <div class="wrds">
  385. <div class="t">
  386. <span style="float:left;"><b>Name</b></span><span style="float:right;">Gab</span><br>
  387. <span style="float:left;"><b>Name</b></span><span style="float:right;">Garchomp</span><br>
  388. <span style="float:left;"><b>Gender</b></span><span style="float:right;">Female</span><br>
  389. <span style="float:left;"><b>Height</b></span><span style="float:right;">6'03"</span><br>
  390. <span style="float:left;"><b>Weight</b></span><span style="float:right;">209.4 lbs</span><br><br>
  391. <span style="float:left;"><b>Abilities</b></span><span style="float:right;">Sand Veil/Rough Skin</span><br>
  392. <span style="float:left;"><b>Moveset</b></span><br><br>
  393. <span style="float:right;">Dragon Rush</span><br>
  394. <span style="float:right;">Dragon Claw</span><br>
  395. <span style="float:right;">Dragon Tail</span><br>
  396. <span style="float:right;">Sword Dance</span><br>
  397. <span style="float:right;">Outrage</span><br>
  398. </div>
  399. </div>
  400. </div>
  401.  
  402. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  403. <div class="rel">
  404. <img src="https://pa1.narvii.com/6560/08986f34684ab0db02c6c1c5b325cd44fc27ec1c_hq.gif">
  405. <div class="wrds">
  406. <div class="t">
  407. <span style="float:left;"><b>Name</b></span><span style="float:right;">Kamu</span><br>
  408. <span style="float:left;"><b>Name</b></span><span style="float:right;">Sharpedo</span><br>
  409. <span style="float:left;"><b>Gender</b></span><span style="float:right;">Male</span><br>
  410. <span style="float:left;"><b>Height</b></span><span style="float:right;">5'11"</span><br>
  411. <span style="float:left;"><b>Weight</b></span><span style="float:right;">195 lbs</span><br><br>
  412. <span style="float:left;"><b>Abilities</b></span><span style="float:right;">Speed Boost/Rough Skin</span><br>
  413. <span style="float:left;"><b>Moveset</b></span><br><br>
  414. <span style="float:right;">Crunch</span><br>
  415. <span style="float:right;">Liqudiation</span><br>
  416. <span style="float:right;">Scald</span><br>
  417. <span style="float:right;">Surf</span><br>
  418. <span style="float:right;">Aqua Jet</span><br>
  419. </div>
  420. </div>
  421. </div>
  422. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  423. <div class="rel">
  424. <img src="https://cdn.discordapp.com/attachments/649485777893326869/881426152827273216/ezgif.com-gif-maker_53.gif">
  425. <div class="wrds">
  426. <div class="t">
  427. <span style="float:left;"><b>Name</b></span><span style="float:right;">Suna</span><br>
  428. <span style="float:left;"><b>Name</b></span><span style="float:right;">Sandslash</span><br>
  429. <span style="float:left;"><b>Gender</b></span><span style="float:right;">Male</span><br>
  430. <span style="float:left;"><b>Height</b></span><span style="float:right;">3'03"</span><br>
  431. <span style="float:left;"><b>Weight</b></span><span style="float:right;">65 lbs</span><br><br>
  432. <span style="float:left;"><b>Abilities</b></span><span style="float:right;">Sand Veil/Sand Rush</span><br>
  433. <span style="float:left;"><b>Moveset</b></span><br><br>
  434. <span style="float:right;">Dig</span><br>
  435. <span style="float:right;">Slash</span><br>
  436. <span style="float:right;">Earthquake</span><br>
  437. <span style="float:right;">Sword Dance</span><br>
  438. <span style="float:right;">Drill Rush</span><br>
  439. </div>
  440. </div>
  441. </div>
  442. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  443. <div class="rel">
  444. <img src="https://i.ibb.co/vc2wGsK/ezgif-com-gif-maker-54.gif">
  445. <div class="wrds">
  446. <div class="t">
  447. <span style="float:left;"><b>Name</b></span><span style="float:right;">Hōkō</span><br>
  448. <span style="float:left;"><b>Name</b></span><span style="float:right;">Tyrunt</span><br>
  449. <span style="float:left;"><b>Gender</b></span><span style="float:right;">Male</span><br>
  450. <span style="float:left;"><b>Height</b></span><span style="float:right;">2'07"</span><br>
  451. <span style="float:left;"><b>Weight</b></span><span style="float:right;">57 lbs</span><br><br>
  452. <span style="float:left;"><b>Abilities</b></span><span style="float:right;">Strong Jaw/Sturdy</span><br>
  453. <span style="float:left;"><b>Moveset</b></span><br><br>
  454. <span style="float:right;">Bite</span><br>
  455. <span style="float:right;">Dragon Tail</span><br>
  456. <span style="float:right;">Rock Slide</span><br>
  457. <span style="float:right;">---</span><br>
  458. <span style="float:right;">---</span><br>
  459. </div>
  460. </div>
  461. </div>
  462. </div>
  463. </div>
  464.  
  465. <div id="three" class="content"><div class="contentbox">
  466. <div class="rel">
  467. <img src="https://pa1.narvii.com/6560/08986f34684ab0db02c6c1c5b325cd44fc27ec1c_hq.gif">
  468. <div class="wrds">
  469. <div class="t">
  470. <span style="float:left;"><b>Name</b></span><span style="float:right;">Kamu</span><br>
  471. <span style="float:left;"><b>Name</b></span><span style="float:right;">Sharpedo</span><br>
  472. <span style="float:left;"><b>Gender</b></span><span style="float:right;">Male</span><br>
  473. <span style="float:left;"><b>Height</b></span><span style="float:right;">5'11"</span><br>
  474. <span style="float:left;"><b>Weight</b></span><span style="float:right;">195 lbs</span><br><br>
  475. <span style="float:left;"><b>Abilities</b></span><span style="float:right;">Speed Boost/Rough Skin</span><br>
  476. <span style="float:left;"><b>Moveset</b></span><br><br>
  477. <span style="float:right;">Crunch</span><br>
  478. <span style="float:right;">Liqudiation</span><br>
  479. <span style="float:right;">Scald</span><br>
  480. <span style="float:right;">Surf</span><br>
  481. <span style="float:right;">Aqua Jet</span><br>
  482. </div>
  483. </div>
  484. </div>
  485. </div>
  486. </div>
  487.  
  488. <div id="four" class="content"><div class="contentbox">
  489. <div class="rel">
  490. <img src="https://pa1.narvii.com/6560/08986f34684ab0db02c6c1c5b325cd44fc27ec1c_hq.gif">
  491. <div class="wrds">
  492. <div class="t">
  493. <span style="float:left;"><b>Name</b></span><span style="float:right;">Kamu</span><br>
  494. <span style="float:left;"><b>Name</b></span><span style="float:right;">Sharpedo</span><br>
  495. <span style="float:left;"><b>Gender</b></span><span style="float:right;">Male</span><br>
  496. <span style="float:left;"><b>Height</b></span><span style="float:right;">5'11"</span><br>
  497. <span style="float:left;"><b>Weight</b></span><span style="float:right;">195 lbs</span><br><br>
  498. <span style="float:left;"><b>Abilities</b></span><span style="float:right;">Speed Boost/Rough Skin</span><br>
  499. <span style="float:left;"><b>Moveset</b></span><br><br>
  500. <span style="float:right;">Crunch</span><br>
  501. <span style="float:right;">Liqudiation</span><br>
  502. <span style="float:right;">Scald</span><br>
  503. <span style="float:right;">Surf</span><br>
  504. <span style="float:right;">Aqua Jet</span><br>
  505. </div>
  506. </div>
  507. </div>
  508. </div>
  509. </div>
  510.  
  511. <div id="five" class="content"><div class="contentbox">
  512. <div class="rel">
  513. <img src="https://cdn.discordapp.com/attachments/649485777893326869/881426152827273216/ezgif.com-gif-maker_53.gif">
  514. <div class="wrds">
  515. <div class="t">
  516. <span style="float:left;"><b>Name</b></span><span style="float:right;">Suna</span><br>
  517. <span style="float:left;"><b>Name</b></span><span style="float:right;">Sandslash</span><br>
  518. <span style="float:left;"><b>Gender</b></span><span style="float:right;">Male</span><br>
  519. <span style="float:left;"><b>Height</b></span><span style="float:right;">3'03"</span><br>
  520. <span style="float:left;"><b>Weight</b></span><span style="float:right;">65 lbs</span><br><br>
  521. <span style="float:left;"><b>Abilities</b></span><span style="float:right;">Sand Veil/Sand Rush</span><br>
  522. <span style="float:left;"><b>Moveset</b></span><br><br>
  523. <span style="float:right;">Dig</span><br>
  524. <span style="float:right;">Slash</span><br>
  525. <span style="float:right;">Earthquake</span><br>
  526. <span style="float:right;">Sword Dance</span><br>
  527. <span style="float:right;">Drill Rush</span><br>
  528. </div>
  529. </div>
  530. </div>
  531. </div>
  532. </div>
  533.  
  534.  
  535. <div id="six" class="content"><div class="contentbox">
  536. <div class="rel">
  537. <img src="https://i.ibb.co/vc2wGsK/ezgif-com-gif-maker-54.gif">
  538. <div class="wrds">
  539. <div class="t">
  540. <span style="float:left;"><b>Name</b></span><span style="float:right;">Hōkō</span><br>
  541. <span style="float:left;"><b>Name</b></span><span style="float:right;">Tyrunt</span><br>
  542. <span style="float:left;"><b>Gender</b></span><span style="float:right;">Male</span><br>
  543. <span style="float:left;"><b>Height</b></span><span style="float:right;">2'07"</span><br>
  544. <span style="float:left;"><b>Weight</b></span><span style="float:right;">57 lbs</span><br><br>
  545. <span style="float:left;"><b>Abilities</b></span><span style="float:right;">Strong Jaw/Sturdy</span><br>
  546. <span style="float:left;"><b>Moveset</b></span><br><br>
  547. <span style="float:right;">Bite</span><br>
  548. <span style="float:right;">Dragon Tail</span><br>
  549. <span style="float:right;">Rock Slide</span><br>
  550. <span style="float:right;">---</span><br>
  551. <span style="float:right;">---</span><br>
  552. </div></div>
  553.  
  554. </body>
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!