API tools faq
paste
Advertisement
kay_kodes

blue moon ice cream code help

kay_kodes
Jul 21st, 2022
26
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.85 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Character Biosheet for Character Planning</title>
  5. <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
  6. <style>
  7.  
  8. /* THIS CODE IS FRAGILE. AND NOT VERSATILE. IT WILL LIKELY BREAK. CONTACT ME IF YOU EVER NEED ANY HELP.
  9.  
  10.  
  11. DESIGNS
  12.  
  13. COLOR PALETTE
  14. Grey: #959595
  15. Cream: #e2e0d4
  16. Off Pink: #cebeb9
  17. Pure Pink: #e7cac2
  18. Soft Grey: #e8e8e8
  19. Another Grey: #f5f5f5
  20. Blue: #8dc8e3
  21. Yellow: #f8de7e
  22.  
  23.  
  24. FONTS
  25. Poppins and Adinda Melia (known as 'font')
  26.  
  27.  
  28. SIZE
  29. 500px x 550px
  30.  
  31. */
  32.  
  33. body {
  34. height: 800px;
  35. }
  36.  
  37. @font-face {
  38. src: url(https://dl.dropbox.com/s/mk91lawsdnx6csj/Adinda%20Melia.otf);
  39. font-family: font;
  40. }
  41.  
  42. .header {
  43. text-align: center;
  44. color: #959595;
  45. font-family: font;
  46. font-size: 50px;
  47. position: absolute;
  48. width: 45%;
  49. height: 100%;
  50. z-index: 1;
  51. line-height:40px;
  52. box-sizing: border-box;
  53. padding: 25px 10px 0 10px;
  54. text-shadow: 1px 1px 2px #000;
  55. letter-spacing: -3px;
  56. }
  57.  
  58. .diagonalone {
  59. background-image: -webkit-linear-gradient(115deg, #e7cac2 30%, rgba(0,0,0,0) 30%);
  60. height: 526px;
  61. position: absolute;
  62. width: 100%;
  63. height: 100%;
  64. }
  65.  
  66. .diagonaltwo {
  67. background-image: -webkit-linear-gradient(60deg, rgba(0,0,0,0) 50%, #e2e0d4 50%);
  68. height: 524px;
  69. position: absolute;
  70. width: 100%;
  71. height: 100%;
  72. }
  73.  
  74. .imagecontainer {
  75. height: 190px;
  76. width: 190px;
  77. padding: 10px;
  78. background: #8dc8e3;
  79. background-size: cover;
  80. position: absolute;
  81. z-index: 1;
  82. box-sizing: border-box;
  83. margin-top: 10px;
  84. transform: rotate(-3deg);
  85. }
  86.  
  87. .image {
  88. height: 190px;
  89. width: 190px;
  90. background: url(https://wallpapercave.com/wp/wp5414482.jpg)center; /* MAIN PROFILE PICTURE */
  91. box-shadow: 2px 2px 7px #000;
  92. background-size: cover;
  93. position: absolute;
  94. z-index: 1;
  95. }
  96.  
  97. .paper {
  98. width: 220px;
  99. height: 200px;
  100. position: absolute;
  101. top: 330px;
  102. left: 25px;
  103. transform: rotate(-7deg);
  104. font-family: poppins;
  105. font-size: 15px;
  106. }
  107.  
  108. .papertwo {
  109. width: 200px;
  110. height: 200px;
  111. position: absolute;
  112. top: 40px;
  113. left: 250px;
  114. transform: rotate(4.5deg);
  115. font-family: poppins;
  116. font-size: 15px;
  117. line-height: 29px;
  118. }
  119.  
  120. .imagetwocontainer {
  121. height: 240px;
  122. width: 200px;
  123. padding: 15px;
  124. background: #fff;
  125. background-size: cover;
  126. position: absolute;
  127. top: 240px;
  128. left: 260px;
  129. z-index: 1;
  130. box-sizing: border-box;
  131. margin-top: 10px;
  132. transform: rotate(-2deg);
  133. box-shadow: 1px 1px 6px #000;
  134. }
  135.  
  136. .imagetwo {
  137. height: 170px;
  138. width: 170px;
  139. position: absolute;
  140. z-index: 1;
  141. }
  142.  
  143. .imagethreecontainer {
  144. height: 240px;
  145. width: 200px;
  146. padding: 15px;
  147. background: #fff;
  148. background-size: cover;
  149. position: absolute;
  150. top: 240px;
  151. left: 260px;
  152. z-index: 0;
  153. box-sizing: border-box;
  154. margin-top: 10px;
  155. transform: rotate(5deg);
  156. box-shadow: 1px 1px 6px #000;
  157. }
  158.  
  159. .imagefourcontainer {
  160. height: 240px;
  161. width: 200px;
  162. padding: 15px;
  163. background: #fff;
  164. background-size: cover;
  165. position: absolute;
  166. top: 240px;
  167. left: 260px;
  168. z-index: 0;
  169. box-sizing: border-box;
  170. margin-top: 10px;
  171. transform: rotate(-18deg);
  172. box-shadow: 1px 1px 6px #000;
  173. }
  174.  
  175. .imagethreecontainer:hover {
  176. z-index: 2;
  177. }
  178.  
  179. .imagefourcontainer:hover {
  180. z-index: 2;
  181. }
  182.  
  183. .headerone {
  184. text-align: center;
  185. color: #959595;
  186. font-family: font;
  187. font-size: 45px;
  188. position: absolute;
  189. width: 50%;
  190. height: 100%;
  191. z-index: 1;
  192. line-height:40px;
  193. box-sizing: border-box;
  194. padding: 25px 10px 0 10px;
  195. text-shadow: 1px 1px 2px #000;
  196. letter-spacing: -3px;
  197. }
  198.  
  199. .headertwo {
  200. text-align: center;
  201. color: #959595;
  202. font-family: font;
  203. font-size: 50px;
  204. position: absolute;
  205. top: 420px;
  206. left: 15px;
  207. width: 50%;
  208. height: 100%;
  209. z-index: 1;
  210. line-height:40px;
  211. box-sizing: border-box;
  212. padding: 25px 10px 0 10px;
  213. text-shadow: 1px 1px 2px #000;
  214. letter-spacing: -3px;
  215. }
  216.  
  217. .headerthree {
  218. text-align: center;
  219. color: #959595;
  220. font-family: font;
  221. font-size: 45px;
  222. position: absolute;
  223. width: 50%;
  224. height: 100%;
  225. z-index: 1;
  226. line-height:40px;
  227. box-sizing: border-box;
  228. padding: 25px 10px 0 10px;
  229. text-shadow: 1px 1px 2px #000;
  230. letter-spacing: -3px;
  231. margin-bottom: -20px;
  232. }
  233.  
  234. .headerfour {
  235. text-align: center;
  236. color: #959595;
  237. font-family: font;
  238. font-size: 45px;
  239. position: absolute;
  240. width: 100%;
  241. height: 100%;
  242. z-index: 1;
  243. line-height: 40px;
  244. box-sizing: border-box;
  245. padding: 25px 10px 0 10px;
  246. text-shadow: 1px 1px 2px #000;
  247. letter-spacing: -3px;
  248. margin-bottom: -20px;
  249. }
  250.  
  251. .columnone {
  252. width: 50%;
  253. height: 40%;
  254. background: rgba(141,200,227,0.2);
  255. position: absolute;
  256. top: 0;
  257. }
  258.  
  259. .columntwo {
  260. width: 50%;
  261. height: 100%;
  262. position: absolute;
  263. top: 0;
  264. left: 50%;
  265. padding: 0 15x;
  266. }
  267.  
  268. .columnthree {
  269. width: 50%;
  270. height: 60%;
  271. background: rgba(248,222,126,0.2);
  272. position: absolute;
  273. top: 40%;
  274. left: 0;
  275. overflow:auto
  276. }
  277.  
  278. .text {
  279. font-size: 15px;
  280. font-family: poppins;
  281. margin-top: 70px;
  282. padding: 10px;
  283. box-sizing: border-box;
  284. width: 100%;
  285. height: 440px;
  286. }
  287.  
  288. .relations {
  289. height: 135px;
  290. width: 100px;
  291. padding: 7px;
  292. background: #fff;
  293. background-size: cover;
  294. position: relative;
  295. z-index: 2;
  296. box-sizing: border-box;
  297. margin-top: 10px;
  298. box-shadow: 1px 1px 6px #000;
  299. font-family: poppins;
  300. font-size: 12px;
  301. transition: 2s ease-out;
  302. }
  303.  
  304. .relationstwo {
  305. height: 135px;
  306. width: 100px;
  307. padding: 7px;
  308. background: #fff;
  309. background-size: cover;
  310. z-index: 1;
  311. box-sizing: border-box;
  312. margin-top: 10px;
  313. box-shadow: 1px 1px 6px #000;
  314. font-family: poppins;
  315. font-size: 12px;
  316. transition: 2s ease-out;
  317. }
  318.  
  319. .relationsthree {
  320. height: 135px;
  321. width: 100px;
  322. padding: 7px;
  323. background: #fff;
  324. background-size: cover;
  325. z-index: 0;
  326. box-sizing: border-box;
  327. margin-top: 10px;
  328. box-shadow: 1px 1px 6px #000;
  329. font-family: poppins;
  330. font-size: 12px;
  331. transition: 2s ease-out;
  332. }
  333.  
  334. .relationsimage {
  335. height: 86px;
  336. width: 86px;
  337. position: absolute;
  338. z-index: 1;
  339. }
  340.  
  341. .relationstext {
  342. position: absolute;
  343. top: 86px;
  344. width: 86px;
  345. padding: 7px 0;
  346. z-index: 1;
  347. text-align: center;
  348. line-height: 12px;
  349. }
  350.  
  351. i {
  352. font-size: 10px;
  353. }
  354.  
  355. .relationstwo:hover {
  356. z-index: 3;
  357. }
  358.  
  359. .relationsthree:hover {
  360. z-index: 3;
  361. }
  362.  
  363. .textone {
  364. color: black;
  365. width: 310px;
  366. height: 390px;
  367. font-family: poppins;
  368. font-size: 14px;
  369. background: #fff;
  370. width: 350px;
  371. height: 410px;
  372. position: absolute;
  373. z-index: 1;
  374. top: 100px;
  375. left: 50px;
  376. transform: rotate(-1deg);
  377. padding: 20px;
  378. box-shadow: 1px 1px 6px #000;
  379. box-sizing: border-box;
  380. overflow: hidden;
  381. }
  382.  
  383. #one {
  384. z-index: 4;
  385. color: black;
  386. width: 310px;
  387. height: 390px;
  388. font-family: poppins;
  389. font-size: 14px;
  390. background: #fff;
  391. width: 350px;
  392. height: 410px;
  393. position: absolute;
  394. top: 100px;
  395. left: 50px;
  396. transform: rotate(-1deg);
  397. padding: 20px;
  398. box-shadow: 1px 1px 6px #000;
  399. box-sizing: border-box;
  400. overflow: hidden;
  401. }
  402.  
  403. #two {
  404. position: absolute;
  405. top: 100px;
  406. left: 50px;
  407. transform: rotate(2deg);
  408. z-index: 3;
  409. color: black;
  410. width: 310px;
  411. height: 390px;
  412. font-family: poppins;
  413. font-size: 14px;
  414. background: #fff;
  415. width: 350px;
  416. height: 410px;
  417. padding: 20px;
  418. box-shadow: 1px 1px 6px #000;
  419. box-sizing: border-box;
  420. overflow: hidden;
  421. }
  422.  
  423. #three {
  424. position: absolute;
  425. top: 100px;
  426. left: 50px;
  427. transform: rotate(-2deg);
  428. z-index: 2;
  429. color: black;
  430. width: 310px;
  431. height: 390px;
  432. font-family: poppins;
  433. font-size: 14px;
  434. background: #fff;
  435. width: 350px;
  436. height: 410px;
  437. padding: 20px;
  438. box-shadow: 1px 1px 6px #000;
  439. box-sizing: border-box;
  440. overflow: hidden;
  441. }
  442.  
  443. #four {
  444. position: absolute;
  445. top: 100px;
  446. left: 50px;
  447. transform: rotate(2deg);
  448. z-index: 1;
  449. color: black;
  450. width: 310px;
  451. height: 390px;
  452. font-family: poppins;
  453. font-size: 14px;
  454. background: #fff;
  455. width: 350px;
  456. height: 410px;
  457. padding: 20px;
  458. box-shadow: 1px 1px 6px #000;
  459. box-sizing: border-box;
  460. overflow: hidden;
  461. }
  462.  
  463. .credits {
  464. z-index: 20000;
  465. font-family: montserrat;
  466. font-size: 10px;
  467. }
  468.  
  469. .credits a {
  470. color: #000;
  471. font-weight: bold;
  472. transition: .2s ease-in;
  473. }
  474.  
  475. .credits a:hover {
  476. color: #8dc8e3;
  477. }
  478. </style>
  479. </head>
  480. <body>
  481.  
  482.  
  483. <div id="1" style="width:500px;height:550px;margin:10px 0 0 -250px;padding:10px;background:#f5f5f5;box-sizing:border-box;position:absolute;left:50%;z-index:1;transform:rotate(1deg);box-shadow:1px 1px 5px;">
  484.  
  485. <div style="border:2px solid #959595;">
  486. <div style="width:476px;height:526px;background:#f5f5f5;box-sizing:border-box;border:3px solid #e8e8e8;position:relative;">
  487. <div class="diagonalone"></div>
  488. <div class="diagonaltwo"></div>
  489. <div class="header">Bernadette<br>Smith
  490. <div class="imagecontainer">
  491. <div class="image"></div>
  492. </div>
  493. </div>
  494. <img src="https://i.imgur.com/2QVQZUx.png" style="width:250px;position:absolute;top:310px;left:-30px;">
  495. <div class="paper">
  496. <b>Aliases:</b> Berna, Burny, Bernabear, Burnabear<br>
  497. <b>Cluster:</b> Might<br>
  498. <b>Godly Parent:</b> Nemesis<br>
  499. <b>Occupation:</b> Monster Questing Team
  500. </div>
  501.  
  502. <img src="https://i.imgur.com/QyUVfMI.png" style="position:absolute;width:270px;left:220px;top:-20px;">
  503. <div class="papertwo">
  504. <b>Nationality:</b> American<br>
  505. <b>Place of Birth:</b> Dallas, Texas<br>
  506. <b>Residence:</b> CHB<br>
  507. <b>Likes:</b> Baseball, eating<br>
  508. <b>Dislikes:</b> Passivity, liars<br>
  509. <b>Habits:</b> Tries to talk to birds
  510. </div>
  511.  
  512. <div class="imagetwocontainer"><div class="imagetwo" style="background:url(https://pbs.twimg.com/media/ClUL9LYUkAAyZfc.jpg)center;background-size:cover;"></div></div> <!-- FIRST PHOTO IN THE FIRST PAGE -->
  513.  
  514. <div class="imagethreecontainer"><div class="imagetwo" style="background:url(https://66.media.tumblr.com/a36a6092edabf567762590549ecdb082/5c5c4f2a8831b41e-9c/s640x960/086e1730670a47871d2b038a03fac0611d8e6951.png)center;background-size:cover;"></div></div> <!-- SECOND (HIDDEN) PHOTO IN THE FIRST PAGE -->
  515.  
  516. <div class="imagefourcontainer"><div class="imagetwo" style="background:url(https://i.pinimg.com/originals/3a/49/2d/3a492d07d34ee15cb3301f5e583070af.jpg)center;background-size:cover;"></div></div> <!-- THIRD (HIDDEN) PHOTO IN THE FIRST PAGE -->
  517.  
  518. <img src="https://i.ya-webdesign.com/images/cat-clip-art-transparent-background-5.png" style="position:absolute;width:60px;top:430px;left:180px;"> <!-- cat :P -->
  519.  
  520. <button onclick="myFunction()" style="position:absolute;top:488px;left:378px;z-index:1;background:#8dc8e3;border:0;padding:5px;font-family:poppins;box-shadow:1px 1px 2px #000;cursor:pointer;">Next Page &rarr;</button>
  521. </div>
  522. </div>
  523. </div>
  524.  
  525.  
  526.  
  527. <div id="2" style="width:500px;height:550px;margin:10px 0 0 -250px;padding:10px;background:#f5f5f5;box-sizing:border-box;left:50%;top:0;position:absolute;z-index:-10;transform:rotate(-1deg);box-shadow:1px 1px 5px;">
  528.  
  529. <div style="border:2px solid #959595;">
  530. <div style="width:476px;height:526px;background:#f5f5f5;box-sizing:border-box;border:3px solid #e8e8e8;position:relative;">
  531. <div class="diagonalone"></div>
  532. <div class="diagonaltwo"></div>
  533.  
  534. <div class="columnone"> <!-- APPEARANCE -->
  535. <div class="headerone">Appearance</div>
  536. <div class="text">
  537. <b>Hair Color: </b>Brunette<br>
  538. <b>Eye Color: </b>Hazel<br>
  539. <b>Height: </b>177cm<br>
  540. <b>Weight: </b>40kg<br>
  541. <b>Ethnicity: </b>White<br>
  542. </div>
  543. <img src="https://www.pngkey.com/png/full/395-3951949_pin-by-nazkedi-tapnar-on-cat-art-cat.png" style="position:absolute;width:60px;top:130px;left:160px;"> <!-- cat :P -->
  544. </div>
  545.  
  546.  
  547. <div class="columntwo"> <!-- RELATIONS! -->
  548. <div class="relations" style="transform:rotate(-1deg);">
  549. <div class="relationsimage" style="background:url(https://worldofolympians.com/user/profile/skye-hall/profile-picture)center;background-size:cover"></div>
  550. <div class="relationstext">
  551. <i>godparent</i><br><b>Skye Hall</b>
  552. </div>
  553. </div>
  554.  
  555. <div class="relations" style="transform:rotate(1deg);">
  556. <div class="relationsimage" style="background:url(https://worldofolympians.com/user/profile/edmund-dickens/profile-picture)center;background-size:cover;"></div>
  557. <div class="relationstext">
  558. <i>enemy</i><br><b>Edmund Dickens</b>
  559. </div>
  560. </div>
  561.  
  562. <div class="relations" style="transform:rotate(-0.5deg);">
  563. <div class="relationsimage" style="background:url(https://worldofolympians.com/user/profile/ophelia-fernsby/profile-picture)center;background-size:cover;"></div>
  564. <div class="relationstext">
  565. <i>best friend</i><br><b>Ophelia Fernsby</b>
  566. </div>
  567. </div>
  568.  
  569. <div class="relationstwo" style="position:absolute;top:0;left:60px;transform:rotate(0.5deg);">
  570. <div class="relationsimage" style="background:url(https://worldofolympians.com/user/profile/kelli-davenport/profile-picture)center;background-size:cover;"></div>
  571. <div class="relationstext">
  572. <i>best friend</i><br><b style="color:#4c7197">Kelli Davenport</b>
  573. </div>
  574. </div>
  575.  
  576. <div class="relationstwo" style="position:absolute;top:145px;left:60px;transform:rotate(-0.5deg)">
  577. <div class="relationsimage" style="background:url(https://worldofolympians.com/user/profile/kohaku-blaze/profile-picture)center;background-size:cover;"></div>
  578. <div class="relationstext">
  579. <i>best friend</i><br><b style="color:#6caf37">Kohaku Blaze</b>
  580. </div>
  581. </div>
  582.  
  583. <div class="relationstwo" style="position:absolute;top:290px;left:60px;transform:rotate(1deg)">
  584. <div class="relationsimage" style="background:url(https://worldofolympians.com/user/profile/daniel-atlas/profile-picture)center;background-size:cover;"></div>
  585. <div class="relationstext">
  586. <i>half-sibling</i><br><b style="color:#E01AC8">Daniel Atlas</b>
  587. </div>
  588. </div>
  589.  
  590. <div class="relationsthree" style="position:absolute;top:0;left:120px;">
  591. <div class="relationsimage" style="background:url(https://worldofolympians.com/user/profile/romulus-heroux/profile-picture)center;background-size:cover;"></div>
  592. <div class="relationstext">
  593. <i>half-sibling</i><br><b>Romulus Heroux</b>
  594. </div>
  595. </div>
  596.  
  597. <div class="relationsthree" style="position:absolute;top:145px;left:120px;transform:rotate(1deg)">
  598. <div class="relationsimage" style="background:url(https://worldofolympians.com/user/profile/felicity-rosier/profile-picture)center;background-size:cover;"></div>
  599. <div class="relationstext">
  600. <i>half-sibling</i><br><b>Felicity Rosier</b>
  601. </div>
  602. </div>
  603.  
  604. <div class="relationsthree" style="position:absolute;top:290px;left:120px;transform:rotate(-0.5deg)">
  605. <div class="relationsimage" style="background:url(https://worldofolympians.com/user/profile/delmira-strange/profile-picture)center;background-size:cover;"></div>
  606. <div class="relationstext">
  607. <i>big boss</i><br><b style="color:#b5a900">Delmira Strange</b>
  608. </div>
  609. </div>
  610.  
  611. <div class="headertwo">Relations</div>
  612. </div>
  613.  
  614.  
  615. <div class="columnthree"> <!-- PERSONALITY -->
  616. <div class="headerthree">Personality</div>
  617. <div class="text">
  618. <b>Good Traits: </b>Determined, optimistic, outgoing<br>
  619. <b>Bad Traits: </b>Ignorant, stubborn<br>
  620. <b>Personality: </b>Holds certain grudges, but doesn't really give a second look at small things. Very determined once she has something that she wants to do.
  621. </div>
  622. </div>
  623.  
  624.  
  625. </div>
  626.  
  627.  
  628. <button onclick="myFunctionTwo()" style="position:absolute;top:504px;left:392px;z-index:1;background:#8dc8e3;border:0;padding:5px;font-family:poppins;box-shadow:1px 1px 2px #000;cursor:pointer;">Next Page &rarr;</button>
  629. </div>
  630. </div>
  631.  
  632.  
  633.  
  634. <!-- THIS PAGE IS SOLELY FOR BACKSTORY -->
  635. <div id="3" style="width:500px;height:550px;margin:10px 0 0 -250px;padding:10px;background:#f5f5f5;box-sizing:border-box;left:50%;top:0;position:absolute;z-index:-20;box-shadow:1px 1px 5px;">
  636.  
  637. <div style="border:2px solid #959595;">
  638. <div style="width:476px;height:526px;background:#f5f5f5;box-sizing:border-box;border:3px solid #e8e8e8;position:relative;">
  639. <div class="diagonalone"></div>
  640. <div class="diagonaltwo"></div>
  641. <div class="headerfour">Backstory
  642. </div>
  643.  
  644. <!-- FIRST PAGE -->
  645.  
  646. <div id="one">Why dad decided to throw me away, I don't know. I don't know why I was so unwanted that he left me out on adoption. I don't even know his name. I don't even want to.<br><br>
  647. But then, I think I was happier with my foster parents. Although my foster siblings didn't treat me so well. Me, as the youngest foster child, frequently teased by my brothers and sisters. I don't know why. The question is, the crucial one, why me? Why do they have to pick up on me when there was someone more pathetic?<br><br>
  648.  
  649. Come to think of it, I am a pathetic girl. Typical nosy and annoying girl. I don't remember much why I became this way - I don't even remember anything until I was 5. </div>
  650.  
  651.  
  652. <!-- SECOND PAGE -->
  653.  
  654. <div id="two">Seriously, my memory sucks. I can only remember my foster parents brought us all to the zoo. That much. And the next thing I remembered was the big sign of McDonald's when we went to get fast food for, I dunno, the first time? My memory started to clear up during my seventh year of life, during elementary schools.<br><br>
  655.  
  656. Some I remembered in detail, like how smelly was my friend's drawer, how the classroom door creaked so much that I hit it real hard. Nothing to gain from that, honestly speaking. I would've laughed at my past self.<br><br>
  657.  
  658.  
  659. </div>
  660.  
  661. <!-- THIRD PAGE -->
  662.  
  663. <div id="three">
  664. And here we are, being at camp. I remembered how my foster siblings turned out to be empousai. How I didn't end up battling them and ran like a crazy chicken I was. How I ran like coward.<br><br>
  665.  
  666. Yet, I was sure I did the right choice. I am sure. I met a demigod along the way - who was actually another empousa in disguise. Yeah, you can pretty much conclude how empousai disgust me.<br><br>
  667.  
  668. And so, with <strike>no help</strike> help by looking at a book called The Complete History of Pavement, I managed to come to CHB. Rings a bell? You can search that up if you wanted, by the way. <br><br>
  669. </div>
  670.  
  671. <!-- FOURTH PAGE -->
  672.  
  673. <div id="four">
  674. The book was dropped on the pavement, as if inviting me to look at it. And of course! With troubles reading, I apparently managed to know more about CHB and tried to go there by taxi.<br><br>
  675.  
  676. Now now, of course, since I knew more about CHB and gods and half-bloods and whatsoever, I got attacked more frequently, I realized.<br><br>
  677. </div>
  678.  
  679. <button onclick="pageChanger()" style="width:80px;position:absolute;top:0;left:0;z-index:1;border:0;padding:5px;font-family:poppins;box-shadow:1px 1px 2px #000;cursor:pointer;">Page 1</button>
  680. <button onclick="pageChangerTwo()" style="width:80px;position:absolute;top:35px;left:0;z-index:1;border:0;padding:5px;font-family:poppins;box-shadow:1px 1px 2px #000;cursor:pointer;">Page 2</button>
  681. <button onclick="pageChangerThree()" style="width:80px;position:absolute;top:0;left:389px;z-index:1;border:0;padding:5px;font-family:poppins;box-shadow:1px 1px 2px #000;cursor:pointer;">Page 3</button>
  682. <button onclick="pageChangerFour()" style="width:80px;position:absolute;top:35px;left:389px;z-index:1;border:0;padding:5px;font-family:poppins;box-shadow:1px 1px 2px #000;cursor:pointer;">Page 4</button>
  683.  
  684.  
  685. <button onclick="myFunctionThree()" style="position:absolute;top:488px;left:404px;z-index:1;background:#8dc8e3;border:0;padding:5px;font-family:poppins;box-shadow:1px 1px 2px #000;cursor:pointer;">Home &rarr;</button>
  686. </div>
  687. </div>
  688. </div>
  689.  
  690.  
  691. <!-- DON'T TOUCH ANYTHING BELOW LOL -->
  692.  
  693.  
  694. <div class="credits">code by<br><a href="blue-moon-ice-cream.tumblr.com">blue<br>moon<br>ice<br>cream</a></div>
  695.  
  696.  
  697. <script>
  698. function myFunction() {
  699. document.getElementById("2").style.zIndex = "10";
  700. }
  701.  
  702. function myFunctionTwo() {
  703. document.getElementById("3").style.zIndex = "20";
  704. }
  705.  
  706. function myFunctionThree() {
  707. document.getElementById("2").style.zIndex = "-10";
  708. document.getElementById("3").style.zIndex = "-20";
  709. }
  710.  
  711. function pageChanger() {
  712. document.getElementById("one").style.zIndex = "4";
  713. document.getElementById("two").style.zIndex = "3";
  714. document.getElementById("three").style.zIndex = "2";
  715. document.getElementById("four").style.zIndex = "1";
  716. }
  717.  
  718. function pageChangerTwo() {
  719. document.getElementById("one").style.zIndex = "1";
  720. document.getElementById("two").style.zIndex = "4";
  721. document.getElementById("three").style.zIndex = "3";
  722. document.getElementById("four").style.zIndex = "2";
  723. }
  724.  
  725. function pageChangerThree() {
  726. document.getElementById("one").style.zIndex = "2";
  727. document.getElementById("two").style.zIndex = "1";
  728. document.getElementById("three").style.zIndex = "4";
  729. document.getElementById("four").style.zIndex = "3";
  730. }
  731.  
  732. function pageChangerFour() {
  733. document.getElementById("one").style.zIndex = "3";
  734. document.getElementById("two").style.zIndex = "2";
  735. document.getElementById("three").style.zIndex = "1";
  736. document.getElementById("four").style.zIndex = "4";
  737. }
  738. </script>
  739.  
  740. </body>
  741. </html>
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!