API tools faq
paste
Advertisement
Guest User

MY CODE

a guest
Feb 19th, 2016
147
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 38.80 KB | None | 0 0
raw download clone embed print report
  1. PLEASE DO NOT JUDGE MY VARIABLE NAMES OR MY TEXT.
  2. HTML AND JAVASCRIPT IN <SCRIPT></SCRIPT>: <!DOCTYPE html>
  3. <!--//*https://docs.google.com/spreadsheets/d/1b2I_-1Zm09_N_eL3pnM6u90vdzL2FHpVRo_gsEYyWgA/edit#gid=1541798586*//-->
  4. <!--//*https://docs.google.com/spreadsheets/d/1hNMJu_4Lhj-22uSip_DH5nIz4LxxkR50FDWZful9O1s/edit#gid=1714457749*//-->
  5. <!--make customize panel.//-->
  6. <html>
  7. <head>
  8. <link rel="stylesheet" type="text/css" href="stylesheet.css">
  9. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  10. <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  11. <link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
  12.  
  13.  
  14.  
  15.  
  16.  
  17.  
  18.  
  19.  
  20.  
  21.  
  22.  
  23.  
  24.  
  25.  
  26.  
  27.  
  28. <script>
  29. //photo 1 = http://www.jurassicworld.com/media/dinosaurs/tyrannosaurus-rex/tyrannosaurus-rex-info-graphic.png
  30. //photo 2 = http://www.howitworksdaily.com/wp-content/uploads/2015/06/xtriceratops3.jpg.pagespeed.ic.0JzA_O5k2H.jpg
  31. //photo 3 = http://www.jurassicworld.com/media/dinosaurs/velociraptor/velociraptor-info-graphic.png
  32. //photo 4 = http://i.livescience.com/images/i/000/032/443/iFF/shutterstock_17637520.jpg?1350941002
  33. //photo 5 = http://vignette1.wikia.nocookie.net/dino/images/a/aa/SpinosaurusInfobox.png/revision/latest?cb=20150720021036
  34. //photo 6 = http://cdn.dinosaur-world.com/feathered_dinosaurs/species/archaeopteryx_lithographica.gif?rewrite=true
  35. //photo 7 = http://ecx.images-amazon.com/images/I/61n9rF%2BQS2L._SX355_.jpg
  36. //photo 8 = http://i.livescience.com/images/i/000/033/435/original/shutterstock_27323797.jpg?1353016232
  37. //photo 9 = http://www.jurassicworld.com/media/dinosaurs/apatosaurus/apatosaurus-info-graphic.png
  38. //photo 10 = http://sites.psu.edu/kateyorko/wp-content/uploads/sites/31945/2015/10/Dilophosaurus.jpg
  39. $(document).ready(function() {
  40. var photo = 1;
  41. $('.one').css("background-color", "black");
  42. $('#span').click(function() {
  43. if (photo == 1) {
  44. $('.s').css("background-image", "url('http://sites.psu.edu/kateyorko/wp-content/uploads/sites/31945/2015/10/Dilophosaurus.jpg')");
  45. $('.s').css("background-position", "2.5em");
  46. $('.s a b').text("Dilophosaurus");
  47. $('.s a').attr("href", "file:///E:/html/html11.html");
  48. $('.ten').css("background-color", "black");
  49. $('.two').css("background-color", "white");
  50. $('.three').css("background-color", "white");
  51. $('.four').css("background-color", "white");
  52. $('.five').css("background-color", "white");
  53. $('.six').css("background-color", "white");
  54. $('.seven').css("background-color", "white");
  55. $('.one').css("background-color", "white");
  56. $('.nine').css("background-color", "white");
  57. $('.eight').css("background-color", "white");
  58. photo = 10;
  59. } else if (photo == 2) {
  60. $('.s').css("background-image", "url('http://www.jurassicworld.com/media/dinosaurs/tyrannosaurus-rex/tyrannosaurus-rex-info-graphic.png')");
  61. $('.s').css("background-position", "5em");
  62. $('.s a b').text("Tyrannosaurus Rex");
  63. $('.s a').attr("href", "file:///E:/html/html2.html");
  64. $('.one').css("background-color", "black");
  65. $('.two').css("background-color", "white");
  66. $('.three').css("background-color", "white");
  67. $('.four').css("background-color", "white");
  68. $('.five').css("background-color", "white");
  69. $('.six').css("background-color", "white");
  70. $('.seven').css("background-color", "white");
  71. $('.ten').css("background-color", "white");
  72. $('.nine').css("background-color", "white");
  73. $('.eight').css("background-color", "white");
  74. photo = 1;
  75. } else if (photo == 3) {
  76. $('.s').css("background-image", "url('http://www.howitworksdaily.com/wp-content/uploads/2015/06/xtriceratops3.jpg.pagespeed.ic.0JzA_O5k2H.jpg')");
  77. $('.s').css("background-position", "2.5em 0em");
  78. $('.s').css("background-size", "75%");
  79. $('.s a b').text("Stegosaurus");
  80. $('.s a').attr("href", "file:///E:/html/html3.html");
  81. $('.two').css("background-color", "black");
  82. $('.ten').css("background-color", "white");
  83. $('.three').css("background-color", "white");
  84. $('.four').css("background-color", "white");
  85. $('.five').css("background-color", "white");
  86. $('.six').css("background-color", "white");
  87. $('.seven').css("background-color", "white");
  88. $('.one').css("background-color", "white");
  89. $('.nine').css("background-color", "white");
  90. $('.eight').css("background-color", "white");
  91. photo = 2;
  92. } else if (photo == 4) {
  93. $('.s').css("background-image", "url('http://www.jurassicworld.com/media/dinosaurs/velociraptor/velociraptor-info-graphic.png')");
  94. $('.s').css("background-position", "4em 0.5em");
  95. $('.s').css("background-size", "120%");
  96. $('.s a b').text("Velociraptor");
  97. $('.s a').attr("href", "file:///E:/html/html4.html");
  98. $('.three').css("background-color", "black");
  99. $('.two').css("background-color", "white");
  100. $('.ten').css("background-color", "white");
  101. $('.four').css("background-color", "white");
  102. $('.five').css("background-color", "white");
  103. $('.six').css("background-color", "white");
  104. $('.seven').css("background-color", "white");
  105. $('.one').css("background-color", "white");
  106. $('.nine').css("background-color", "white");
  107. $('.eight').css("background-color", "white");
  108. photo = 3;
  109. } else if (photo == 5) {
  110. $('.s').css("background-image", "url('http://i.livescience.com/images/i/000/032/443/iFF/shutterstock_17637520.jpg?1350941002')");
  111. $('.s').css("background-position", "3.4em");
  112. $('.s a b').text("Stegosaurus");
  113. $('.s a').attr("href", "file:///E:/html/html5.html");
  114. $('.four').css("background-color", "black");
  115. $('.two').css("background-color", "white");
  116. $('.three').css("background-color", "white");
  117. $('.ten').css("background-color", "white");
  118. $('.five').css("background-color", "white");
  119. $('.six').css("background-color", "white");
  120. $('.seven').css("background-color", "white");
  121. $('.one').css("background-color", "white");
  122. $('.nine').css("background-color", "white");
  123. $('.eight').css("background-color", "white");
  124. photo = 4;
  125. } else if (photo == 6) {
  126. $('.s').css("background-image", "url('http://vignette1.wikia.nocookie.net/dino/images/a/aa/SpinosaurusInfobox.png/revision/latest?cb=20150720021036')");
  127. $('.s').css("background-position", "3.4em");
  128. $('.s a b').text("Spinosaurus");
  129. $('.s a').attr("href", "file:///E:/html/html6.html");
  130. $('.five').css("background-color", "black");
  131. $('.two').css("background-color", "white");
  132. $('.three').css("background-color", "white");
  133. $('.four').css("background-color", "white");
  134. $('.ten').css("background-color", "white");
  135. $('.six').css("background-color", "white");
  136. $('.seven').css("background-color", "white");
  137. $('.one').css("background-color", "white");
  138. $('.nine').css("background-color", "white");
  139. $('.eight').css("background-color", "white");
  140. photo = 5;
  141. } else if (photo == 7) {
  142. $('.s').css("background-image", "url('http://cdn.dinosaur-world.com/feathered_dinosaurs/species/archaeopteryx_lithographica.gif?rewrite=true')");
  143. $('.s').css("background-position", "3.4em 0em");
  144. $('.s a b').text("Archaeopteryx");
  145. $('.s a').attr("href", "file:///E:/html/html7.html");
  146. $('.six').css("background-color", "black");
  147. $('.two').css("background-color", "white");
  148. $('.three').css("background-color", "white");
  149. $('.four').css("background-color", "white");
  150. $('.five').css("background-color", "white");
  151. $('.ten').css("background-color", "white");
  152. $('.seven').css("background-color", "white");
  153. $('.one').css("background-color", "white");
  154. $('.nine').css("background-color", "white");
  155. $('.eight').css("background-color", "white");
  156. photo = 6;
  157. } else if (photo == 8) {
  158. $('.s').css("background-image", "url('http://ecx.images-amazon.com/images/I/61n9rF%2BQS2L._SX355_.jpg')");
  159. $('.s').css("background-position", "0em 0.5em");
  160. $('.s a b').text("Brachiosaurus");
  161. $('.s a').attr("href", "file:///E:/html/html8.html");
  162. $('.seven').css("background-color", "black");
  163. $('.two').css("background-color", "white");
  164. $('.three').css("background-color", "white");
  165. $('.four').css("background-color", "white");
  166. $('.five').css("background-color", "white");
  167. $('.six').css("background-color", "white");
  168. $('.ten').css("background-color", "white");
  169. $('.one').css("background-color", "white");
  170. $('.nine').css("background-color", "white");
  171. $('.eight').css("background-color", "white");
  172. photo = 7;
  173. } else if (photo == 9) {
  174. $('.s').css("background-image", "url('http://i.livescience.com/images/i/000/033/435/original/shutterstock_27323797.jpg?1353016232')");
  175. $('.s').css("background-position", "2.5em");
  176. $('.s a b').text("Allosaurus");
  177. $('.s a').attr("href", "file:///E:/html/html9.html");
  178. $('.eight').css("background-color", "black");
  179. $('.two').css("background-color", "white");
  180. $('.three').css("background-color", "white");
  181. $('.four').css("background-color", "white");
  182. $('.five').css("background-color", "white");
  183. $('.six').css("background-color", "white");
  184. $('.seven').css("background-color", "white");
  185. $('.one').css("background-color", "white");
  186. $('.nine').css("background-color", "white");
  187. $('.ten').css("background-color", "white");
  188. photo = 8;
  189. } else if (photo == 10) {
  190. $('.s').css("background-image", "url('http://www.jurassicworld.com/media/dinosaurs/apatosaurus/apatosaurus-info-graphic.png')");///////////////////////////
  191. $('.s').css("background-position", "3em");
  192. $('.s a b').text("Apatosaurus")
  193. $('.s a').attr("href", "file:///E:/html/html10.html")
  194. $('.nine').css("background-color", "black");
  195. $('.two').css("background-color", "white");
  196. $('.three').css("background-color", "white");
  197. $('.four').css("background-color", "white");
  198. $('.five').css("background-color", "white");
  199. $('.six').css("background-color", "white");
  200. $('.seven').css("background-color", "white");
  201. $('.one').css("background-color", "white");
  202. $('.two').css("background-color", "white");
  203. $('.ten').css("background-color", "white");
  204. photo = 9;
  205. };
  206. });
  207. //photo 1 = http://www.jurassicworld.com/media/dinosaurs/tyrannosaurus-rex/tyrannosaurus-rex-info-graphic.png
  208. //photo 2 = http://www.howitworksdaily.com/wp-content/uploads/2015/06/xtriceratops3.jpg.pagespeed.ic.0JzA_O5k2H.jpg
  209. //photo 3 = http://www.jurassicworld.com/media/dinosaurs/velociraptor/velociraptor-info-graphic.png
  210. //photo 4 = http://i.livescience.com/images/i/000/032/443/iFF/shutterstock_17637520.jpg?1350941002
  211. //photo 5 = http://vignette1.wikia.nocookie.net/dino/images/a/aa/SpinosaurusInfobox.png/revision/latest?cb=20150720021036
  212. //photo 6 = http://cdn.dinosaur-world.com/feathered_dinosaurs/species/archaeopteryx_lithographica.gif?rewrite=true
  213. //photo 7 = http://ecx.images-amazon.com/images/I/61n9rF%2BQS2L._SX355_.jpg
  214. //photo 8 = http://i.livescience.com/images/i/000/033/435/original/shutterstock_27323797.jpg?1353016232
  215. //photo 9 = http://www.jurassicworld.com/media/dinosaurs/apatosaurus/apatosaurus-info-graphic.png
  216. //photo 10 = http://sites.psu.edu/kateyorko/wp-content/uploads/sites/31945/2015/10/Dilophosaurus.jpg
  217. $('#spandex').click(function() {
  218. if (photo == 1) {
  219. $('.s').css("background-image", "url('http://www.howitworksdaily.com/wp-content/uploads/2015/06/xtriceratops3.jpg.pagespeed.ic.0JzA_O5k2H.jpg')");
  220. $('.s').css("background-position", "2.5em");
  221. $('.s a b').text("Triceratops")
  222. $('.s a').attr("href", "file:///E:/html/html3.html")
  223. $('.two').css("background-color", "black");
  224. $('.ten').css("background-color", "white");
  225. $('.three').css("background-color", "white");
  226. $('.four').css("background-color", "white");
  227. $('.five').css("background-color", "white");
  228. $('.six').css("background-color", "white");
  229. $('.seven').css("background-color", "white");
  230. $('.one').css("background-color", "white");
  231. $('.nine').css("background-color", "white");
  232. $('.eight').css("background-color", "white");
  233. photo = 2;
  234. } else if (photo == 2) {
  235. $('.s').css("background-image", "url('http://www.jurassicworld.com/media/dinosaurs/velociraptor/velociraptor-info-graphic.png')");
  236. $('.s').css("background-position", "6em");
  237. $('.s a b').text("Velociraptor")
  238. $('.s a').attr("href", "file:///E:/html/html4.html")
  239. $('.three').css("background-color", "black");
  240. $('.two').css("background-color", "white");
  241. $('.ten').css("background-color", "white");
  242. $('.four').css("background-color", "white");
  243. $('.five').css("background-color", "white");
  244. $('.six').css("background-color", "white");
  245. $('.seven').css("background-color", "white");
  246. $('.one').css("background-color", "white");
  247. $('.nine').css("background-color", "white");
  248. $('.eight').css("background-color", "white");
  249. photo = 3;
  250. } else if (photo == 3) {
  251. $('.s').css("background-image", "url('http://i.livescience.com/images/i/000/032/443/iFF/shutterstock_17637520.jpg?1350941002')");
  252. $('.s').css("background-position", "2.5em");
  253. $('.s a b').text("Stegosaurus")
  254. $('.s a').attr("href", "file:///E:/html/html5.html")
  255. $('.four').css("background-color", "black");
  256. $('.two').css("background-color", "white");
  257. $('.three').css("background-color", "white");
  258. $('.ten').css("background-color", "white");
  259. $('.five').css("background-color", "white");
  260. $('.six').css("background-color", "white");
  261. $('.seven').css("background-color", "white");
  262. $('.one').css("background-color", "white");
  263. $('.nine').css("background-color", "white");
  264. $('.eight').css("background-color", "white");
  265. photo = 4;
  266. } else if (photo == 4) {
  267. $('.s').css("background-image", "url('http://vignette1.wikia.nocookie.net/dino/images/a/aa/SpinosaurusInfobox.png/revision/latest?cb=20150720021036')");
  268. $('.s').css("background-position", "2.5em");
  269. $('.s a b').text("Spinosaurus")
  270. $('.s a').attr("href", "file:///E:/html/html6.html")
  271. $('.five').css("background-color", "black");
  272. $('.two').css("background-color", "white");
  273. $('.three').css("background-color", "white");
  274. $('.four').css("background-color", "white");
  275. $('.ten').css("background-color", "white");
  276. $('.six').css("background-color", "white");
  277. $('.seven').css("background-color", "white");
  278. $('.one').css("background-color", "white");
  279. $('.nine').css("background-color", "white");
  280. $('.eight').css("background-color", "white");
  281. photo = 5;
  282. } else if (photo == 5) {
  283. $('.s').css("background-image", "url('http://cdn.dinosaur-world.com/feathered_dinosaurs/species/archaeopteryx_lithographica.gif?rewrite=true')");
  284. $('.s').css("background-position", "4em 0em");
  285. $('.s a b').text("Archaeopteryx")
  286. $('.s a').attr("href", "file:///E:/html/html7.html")
  287. $('.six').css("background-color", "black");
  288. $('.two').css("background-color", "white");
  289. $('.three').css("background-color", "white");
  290. $('.four').css("background-color", "white");
  291. $('.five').css("background-color", "white");
  292. $('.ten').css("background-color", "white");
  293. $('.seven').css("background-color", "white");
  294. $('.one').css("background-color", "white");
  295. $('.nine').css("background-color", "white");
  296. $('.eight').css("background-color", "white");
  297. photo = 6;
  298. } else if (photo == 6) {
  299. $('.s').css("background-image", "url('http://ecx.images-amazon.com/images/I/61n9rF%2BQS2L._SX355_.jpg')");
  300. $('.s').css("background-position", "1em 0em");
  301. $('.s a b').text("Brachiosaurus")
  302. $('.s a').attr("href", "file:///E:/html/html8.html")
  303. $('.seven').css("background-color", "black");
  304. $('.two').css("background-color", "white");
  305. $('.three').css("background-color", "white");
  306. $('.four').css("background-color", "white");
  307. $('.five').css("background-color", "white");
  308. $('.six').css("background-color", "white");
  309. $('.eight').css("background-color", "white");
  310. $('.one').css("background-color", "white");
  311. $('.nine').css("background-color", "white");
  312. $('.ten').css("background-color", "white");
  313. photo = 7;
  314. } else if (photo == 7) {
  315. $('.s').css("background-image", "url('http://i.livescience.com/images/i/000/033/435/original/shutterstock_27323797.jpg?1353016232')");
  316. $('.s').css("background-position", "2.8em");
  317. $('.s a b').text("Allosaurus")
  318. $('.s a').attr("href", "file:///E:/html/html9.html")
  319. $('.eight').css("background-color", "black");
  320. $('.two').css("background-color", "white");
  321. $('.three').css("background-color", "white");
  322. $('.four').css("background-color", "white");
  323. $('.five').css("background-color", "white");
  324. $('.six').css("background-color", "white");
  325. $('.seven').css("background-color", "white");
  326. $('.one').css("background-color", "white");
  327. $('.nine').css("background-color", "white");
  328. $('.ten').css("background-color", "white");
  329. photo = 8;
  330. } else if (photo == 8) {
  331. $('.s').css("background-image", "url('http://www.jurassicworld.com/media/dinosaurs/apatosaurus/apatosaurus-info-graphic.png')");
  332. $('.s').css("background-position", "2.8em");
  333. $('.s a b').text("Apatosaurus")
  334. $('.s a').attr("href", "file:///E:/html/html10.html")
  335. $('.nine').css("background-color", "black");
  336. $('.two').css("background-color", "white");
  337. $('.three').css("background-color", "white");
  338. $('.four').css("background-color", "white");
  339. $('.five').css("background-color", "white");
  340. $('.six').css("background-color", "white");
  341. $('.seven').css("background-color", "white");
  342. $('.one').css("background-color", "white");
  343. $('.ten').css("background-color", "white");
  344. $('.eight').css("background-color", "white");
  345. photo = 9;
  346. } else if (photo == 9) {
  347. $('.s').css("background-image", "url('http://sites.psu.edu/kateyorko/wp-content/uploads/sites/31945/2015/10/Dilophosaurus.jpg')");
  348. $('.s').css("background-position", "2.8em");
  349. $('.s a b').text("Dilophosaurus")
  350. $('.s a').attr("href", "file:///E:/html/html11.html")
  351. $('.ten').css("background-color", "black");
  352. $('.two').css("background-color", "white");
  353. $('.three').css("background-color", "white");
  354. $('.four').css("background-color", "white");
  355. $('.five').css("background-color", "white");
  356. $('.six').css("background-color", "white");
  357. $('.seven').css("background-color", "white");
  358. $('.one').css("background-color", "white");
  359. $('.nine').css("background-color", "white");
  360. $('.eight').css("background-color", "white");
  361. photo = 10;
  362. } else if (photo == 10) {
  363. $('.s').css("background-image", "url('http://www.jurassicworld.com/media/dinosaurs/tyrannosaurus-rex/tyrannosaurus-rex-info-graphic.png')");
  364. $('.s').css("background-position", "5em");
  365. $('.one').css("background-color", "black");
  366. $('.two').css("background-color", "white");
  367. $('.three').css("background-color", "white");
  368. $('.four').css("background-color", "white");
  369. $('.five').css("background-color", "white");
  370. $('.six').css("background-color", "white");
  371. $('.seven').css("background-color", "white");
  372. $('.ten').css("background-color", "white");
  373. $('.nine').css("background-color", "white");
  374. $('.eight').css("background-color", "white");
  375. photo = 1;
  376. };
  377. });
  378. //photo 1 = http://www.jurassicworld.com/media/dinosaurs/tyrannosaurus-rex/tyrannosaurus-rex-info-graphic.png
  379. //photo 2 = http://www.howitworksdaily.com/wp-content/uploads/2015/06/xtriceratops3.jpg.pagespeed.ic.0JzA_O5k2H.jpg
  380. //photo 3 = http://www.jurassicworld.com/media/dinosaurs/velociraptor/velociraptor-info-graphic.png
  381. //photo 4 = http://i.livescience.com/images/i/000/032/443/iFF/shutterstock_17637520.jpg?1350941002
  382. //photo 5 = http://vignette1.wikia.nocookie.net/dino/images/a/aa/SpinosaurusInfobox.png/revision/latest?cb=20150720021036
  383. //photo 6 = http://cdn.dinosaur-world.com/feathered_dinosaurs/species/archaeopteryx_lithographica.gif?rewrite=true
  384. //photo 7 = http://ecx.images-amazon.com/images/I/61n9rF%2BQS2L._SX355_.jpg
  385. //photo 8 = http://i.livescience.com/images/i/000/033/435/original/shutterstock_27323797.jpg?1353016232
  386. //photo 9 = http://www.jurassicworld.com/media/dinosaurs/apatosaurus/apatosaurus-info-graphic.png
  387. //photo 10 = http://sites.psu.edu/kateyorko/wp-content/uploads/sites/31945/2015/10/Dilophosaurus.jpg
  388. $('.one').click(function() {
  389. $('.s').css("background-image", "url('http://www.jurassicworld.com/media/dinosaurs/tyrannosaurus-rex/tyrannosaurus-rex-info-graphic.png')");
  390. photo = 1;
  391. $('.s a b').text("Tyrannosaurus Rex");
  392. $('.s a').attr("href", "file:///E:/html/html2.html");
  393. $('.one').css("background-color", "black");
  394. $('.two').css("background-color", "white");
  395. $('.three').css("background-color", "white");
  396. $('.four').css("background-color", "white");
  397. $('.five').css("background-color", "white");
  398. $('.six').css("background-color", "white");
  399. $('.seven').css("background-color", "white");
  400. $('.eight').css("background-color", "white");
  401. $('.nine').css("background-color", "white");
  402. $('.ten').css("background-color", "white");
  403. });
  404. $('.two').click(function() {
  405. $('.s').css("background-image", "url('http://www.howitworksdaily.com/wp-content/uploads/2015/06/xtriceratops3.jpg.pagespeed.ic.0JzA_O5k2H.jpg')");
  406. photo = 2;
  407. $('.s a b').text("Stegosaurus");
  408. $('.s a').attr("href", "file:///E:/html/html3.html");
  409. $('.two').css("background-color", "black");
  410. $('.one').css("background-color", "white");
  411. $('.three').css("background-color", "white");
  412. $('.four').css("background-color", "white");
  413. $('.five').css("background-color", "white");
  414. $('.six').css("background-color", "white");
  415. $('.seven').css("background-color", "white");
  416. $('.eight').css("background-color", "white");
  417. $('.nine').css("background-color", "white");
  418. $('.ten').css("background-color", "white");
  419. });
  420. $('.three').click(function() {
  421. $('.s').css("background-image", "url('http://www.jurassicworld.com/media/dinosaurs/velociraptor/velociraptor-info-graphic.png')");
  422. $('.s').css("background-position", "0em 0.5em");
  423. photo = 3;
  424. $('.s a b').text("Velociraptor")
  425. $('.s a').attr("href", "file:///E:/html/html4.html")
  426. $('.three').css("background-color", "black");
  427. $('.two').css("background-color", "white");
  428. $('.one').css("background-color", "white");
  429. $('.four').css("background-color", "white");
  430. $('.five').css("background-color", "white");
  431. $('.six').css("background-color", "white");
  432. $('.seven').css("background-color", "white");
  433. $('.eight').css("background-color", "white");
  434. $('.nine').css("background-color", "white");
  435. $('.ten').css("background-color", "white");
  436. });
  437. $('.four').click(function() {
  438. $('.s').css("background-image", "url('http://i.livescience.com/images/i/000/032/443/iFF/shutterstock_17637520.jpg?1350941002')");
  439. photo = 4;
  440. $('.s a b').text("Stegosaurus")
  441. $('.s a').attr("href", "file:///E:/html/html5.html")
  442. $('.four').css("background-color", "black");
  443. $('.two').css("background-color", "white");
  444. $('.three').css("background-color", "white");
  445. $('.one').css("background-color", "white");
  446. $('.five').css("background-color", "white");
  447. $('.six').css("background-color", "white");
  448. $('.seven').css("background-color", "white");
  449. $('.eight').css("background-color", "white");
  450. $('.nine').css("background-color", "white");
  451. $('.ten').css("background-color", "white");
  452. });
  453. $('.five').click(function() {
  454. $('.s').css("background-image", "url('http://vignette1.wikia.nocookie.net/dino/images/a/aa/SpinosaurusInfobox.png/revision/latest?cb=20150720021036')");
  455. photo = 5;
  456. $('.s a b').text("Dilophosaurus")
  457. $('.s a').attr("href", "file:///E:/html/html6.html")
  458. $('.five').css("background-color", "black");
  459. $('.two').css("background-color", "white");
  460. $('.three').css("background-color", "white");
  461. $('.four').css("background-color", "white");
  462. $('.one').css("background-color", "white");
  463. $('.six').css("background-color", "white");
  464. $('.seven').css("background-color", "white");
  465. $('.eight').css("background-color", "white");
  466. $('.nine').css("background-color", "white");
  467. $('.ten').css("background-color", "white");
  468. });
  469. $('.six').click(function() {
  470. $('.s').css("background-image", "url('http://cdn.dinosaur-world.com/feathered_dinosaurs/species/archaeopteryx_lithographica.gif?rewrite=true')");
  471. photo = 6;
  472. $('.s a b').text("Spinosaurus")
  473. $('.s a').attr("href", "file:///E:/html/html7.html")
  474. $('.six').css("background-color", "black");
  475. $('.two').css("background-color", "white");
  476. $('.three').css("background-color", "white");
  477. $('.four').css("background-color", "white");
  478. $('.five').css("background-color", "white");
  479. $('.one').css("background-color", "white");
  480. $('.seven').css("background-color", "white");
  481. $('.eight').css("background-color", "white");
  482. $('.nine').css("background-color", "white");
  483. $('.ten').css("background-color", "white");
  484. });
  485. $('.seven').click(function() {
  486. $('.s').css("background-image", "url('http://ecx.images-amazon.com/images/I/61n9rF%2BQS2L._SX355_.jpg')");
  487. photo = 7;
  488. $('.s a b').text("Archaeopteryx")
  489. $('.s a').attr("href", "file:///E:/html/html8.html")
  490. $('.seven').css("background-color", "black");
  491. $('.two').css("background-color", "white");
  492. $('.three').css("background-color", "white");
  493. $('.four').css("background-color", "white");
  494. $('.five').css("background-color", "white");
  495. $('.six').css("background-color", "white");
  496. $('.one').css("background-color", "white");
  497. $('.eight').css("background-color", "white");
  498. $('.nine').css("background-color", "white");
  499. $('.ten').css("background-color", "white");
  500. });
  501. $('.eight').click(function() {
  502. $('.s').css("background-image", "url('http://i.livescience.com/images/i/000/033/435/original/shutterstock_27323797.jpg?1353016232')");
  503. photo = 8;
  504. $('.s a b').text("Brachiosaurus")
  505. $('.s a').attr("href", "file:///E:/html/html9.html")
  506. $('.eight').css("background-color", "black");
  507. $('.two').css("background-color", "white");
  508. $('.three').css("background-color", "white");
  509. $('.four').css("background-color", "white");
  510. $('.five').css("background-color", "white");
  511. $('.six').css("background-color", "white");
  512. $('.seven').css("background-color", "white");
  513. $('.one').css("background-color", "white");
  514. $('.nine').css("background-color", "white");
  515. $('.ten').css("background-color", "white");
  516. });
  517. $('.nine').click(function() {
  518. $('.s').css("background-image", "url('http://www.jurassicworld.com/media/dinosaurs/apatosaurus/apatosaurus-info-graphic.png')");
  519. photo = 9;
  520. $('.s a b').text("Allosaurus")
  521. $('.s a').attr("href", "file:///E:/html/html10.html")
  522. $('.nine').css("background-color", "black");
  523. $('.two').css("background-color", "white");
  524. $('.three').css("background-color", "white");
  525. $('.four').css("background-color", "white");
  526. $('.five').css("background-color", "white");
  527. $('.six').css("background-color", "white");
  528. $('.seven').css("background-color", "white");
  529. $('.one').css("background-color", "white");
  530. $('.eight').css("background-color", "white");
  531. $('.ten').css("background-color", "white");
  532. });
  533. $('.ten').click(function() {
  534. $('.s').css("background-image", "url('http://sites.psu.edu/kateyorko/wp-content/uploads/sites/31945/2015/10/Dilophosaurus.jpg')");
  535. photo = 10;
  536. $('.s a b').text("Brachiosaurus")
  537. $('.s a').attr("href", "file:///E:/html/html11.html")
  538. $('.ten').css("background-color", "black");
  539. $('.two').css("background-color", "white");
  540. $('.three').css("background-color", "white");
  541. $('.four').css("background-color", "white");
  542. $('.five').css("background-color", "white");
  543. $('.six').css("background-color", "white");
  544. $('.seven').css("background-color", "white");
  545. $('.one').css("background-color", "white");
  546. $('.nine').css("background-color", "white");
  547. $('.eight').css("background-color", "white");
  548. });
  549. var lol = 0;
  550. var zz = 1;
  551. $(".troll").click(function () {
  552. if (lol == 0) {
  553. $('.troll').animate({left:'0em'}, {queue: false, duration: 1000});
  554. lol = 1;
  555. } else if (lol == 1) {
  556. $('.troll').animate({left:'-48em'}, {queue: false, duration: 1000});
  557. lol = 0;
  558. };
  559. });
  560. $('.troll button').mouseenter(function () {
  561. lol = 3;
  562. });
  563. $('.troll button').mouseleave(function () {
  564. lol = 1;
  565. });
  566. $('.troll button').click(function() {
  567. if (zz == 1) {
  568. $('body').css('background-color', '#ff1a1a');
  569. zz = 2;
  570. } else if (zz == 2){
  571. $('body').css('background-color', '#ff8c1a');
  572. zz = 3;
  573. } else if (zz == 3){
  574. $('body').css('background-color', '#ffff1a');
  575. zz = 4;
  576. } else if (zz == 4){
  577. $('body').css('background-color', '#47d147');
  578. zz = 5
  579. } else if (zz == 5){
  580. $('body').css('background-color', '#1a1aff');
  581. zz = 6;
  582. } else if (zz = 6){
  583. $('body').css('background-color', '#4b0082');
  584. zz = 7;
  585. } else if (zz = 7){
  586. $('body').css('background-color', '#3964c3');
  587. zz = 8;
  588. } else if (zz = 8){
  589. $('body').css('background-color', 'black');
  590. zz = 1;
  591. };
  592. });
  593. });
  594. </script>
  595. <title>Dino Squad | By DINO Studios</title>
  596. </head>
  597. <body>
  598. <div class="head"><span><a href="E:\html\ToStartOpenThisFile.html">Dino Squad</a></span>
  599. <div class="buy"><div class="bt"><a href ="https://docs.google.com/a/students.olatheschools.com/forms/d/1e6K3licI8JBil_CezeEFiqt3oD4NHx2K7qNVpaM59tg/viewform"><b>Purchase</b></a></div></div>
  600. <div class="forums"><div class="ft"><a href ="https://docs.google.com/a/students.olatheschools.com/spreadsheets/d/1hNMJu_4Lhj-22uSip_DH5nIz4LxxkR50FDWZful9O1s/edit?usp=sharing"><b>Forums</b></div></div>
  601. <div class="tutorials"><a href ="https://www.youtube.com/user/DinoSquadTheGame/feed"><div class="tut"><b>Youtube</b></a></div></div>
  602. <div class="technical"><a href ="file:///E:/html/Technical.html"><div class="tet"><b>Technical Info</b></a></div></div>
  603. </div>
  604. <div class="dilo"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Dilophosaurus_wetherilli.jpg/220px-Dilophosaurus_wetherilli.jpg" /></div>
  605. <div class="Apato"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Apatosaurus33.jpg/220px-Apatosaurus33.jpg"/></div>
  606. <div class="Allo"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Allosaurus_in_Baltow_20060916_1500.jpg/220px-Allosaurus_in_Baltow_20060916_1500.jpg"/></div>
  607. <h2>What is Dino Squad?</h2>
  608. <p> Dino Squad is a game where you may be many dinosaurs, imagine your favorite dinosaur, we probably have it! As a start, you can be a Dilophosaurus, Apatosaurus, or Allosaurus. You can create clans and rise above the leaderboards! Don't malnourish, deprive of sleep, or dehydrate yourself or your speed and attack will suffer! Fight in the wild to gain experience, in the open world. One server for all, it is huge with biomes such as the jungle, the ice caps, and the ocean! But don't brave it alone! Invite your friends to your clan and use a flying dinosaur to make a nest, for all your dinosaur friends to warp to. As you level up you grow from child, teenager, to adult. The higher level you are the harder you will be to beat!</p>
  609. <h2>Meet the Dinosaurs!</h2>
  610. <ul>
  611. <div class = "s">
  612. <a href="E:\html\html2.html" style="text-decoration:none"><b>Tyrannosaurus Rex</b></a>
  613. <span id = "spandex"><button type="button"></button></span>
  614. <span id = "span"><button type="button"></button></span>
  615. </div>
  616. <div class = "one"></div>
  617. <div class = "two"></div>
  618. <div class = "three"></div>
  619. <div class = "four"></div>
  620. <div class = "five"></div>
  621. <div class = "six"></div>
  622. <div class = "seven"></div>
  623. <div class = "eight"></div>
  624. <div class = "nine"></div>
  625. <div class = "ten"></div>
  626. <!--<li><a href="E:\html\html2.html"><b>Tyrannosaurus Rex</b></a></li>
  627. <li><a href="E:\html\html3.html"><b>Triceratops</b></a></li>
  628. <li><a href="E:\html\html4.html"><b>Velociraptor<b></a></li>
  629. <li><a href="E:\html\html5.html"><b>Stegosaurus</b></a></li>
  630. <li><a href="E:\html\html6.html"><b>Spinosaurus</b></a></li>
  631. <li><a href="E:\html\html7.html"><b>Archaeopteryx</b></a></li>
  632. <li><a href="E:\html\html8.html"><b>Brachiosaurus</b></a></li>
  633. <li><a href="E:\html\html9.html"><b>Allosaurus</b></a></li>
  634. <li><a href="E:\html\html10.html"><b>Apatosaurus</b></a></li>
  635. <li><a href="E:\html\html11.html"><b>Dilophosaurus</b></a></li>-->
  636. </ul>
  637. <h3>Meet the Staff</h3>
  638. <ul>
  639. <li>Jaxson Myrick | Lead Programmer of Game and Website</li>
  640. <li>Trevor Myrick | Game Tester</li>
  641. <li>Donald Myrick | Financial Manager</li>
  642. <li>Karen Myrick | Website Tester</li>
  643. <li>Caleb Lim | Offical Dinosaur Advocate</li>
  644. </ul>
  645. <div class = "troll"><p>Customize</p>
  646. <h1>Background Color</p>
  647. <button>HELLO</button>
  648. </div>
  649. </body>
  650. </html>
  651. <div class="lol"><p>Thanks to: wikipedia.com, ourfauna.blogspot.com, telusworldofscienceedmonton.ca, vectorhq.com, www.francopolini.com.ar, www.portalsaofrancisco.com.br, www.kleinezebra.com, morenosteccastecca.forumfree.it, vk.com, and nitroserve.com for the pictures</p></div>
  652.  
  653. CSS code:
  654.  
  655. body {background-color:black;}
  656. .head{width: 100%;
  657. height: 7em;
  658. background-color: blue;
  659. text-align: center;
  660. vertical-align:middle;
  661. line-height: 6em;
  662. border-radius:6em;
  663. text-decoration: none;}
  664. span{font-size:3em;
  665. font-family:jokerman;
  666. color:red;
  667. vertical-align: middle}
  668. .head span a{text-decoration: none;}
  669. .buy{height:5em;
  670. width:15%;
  671. background-color:red;
  672. position:relative;
  673. top: -5.2em;
  674. border-radius: 6em;
  675. left: 1%;
  676. line-height: 5em;
  677. border: 0.3em solid black}
  678. .bt{font-size:200%;
  679. font-style: Verdana;
  680. text-align: center;
  681. vertical-align: middle;}
  682. .forums{height:5em;
  683. width:15%;
  684. background-color:red;
  685. position:relative;
  686. top: -10.7em;
  687. border-radius: 6em;
  688. left: 20em;
  689. line-height: 5em;
  690. border:0.3em solid black;}
  691. .ft{font-size:200%;
  692. font-style: Verdana;
  693. text-align: center;
  694. vertical-align: middle;}
  695. .tutorials{height:5em;
  696. width:15%;
  697. background-color:red;
  698. position:relative;
  699. border:0.3em solid black;
  700. top: -16.2em;
  701. border-radius: 6em;
  702. left: 52.5em;
  703. line-height: 5em;}
  704. .tut{font-size:200%;
  705. font-style: Verdana;
  706. text-align: center;
  707. vertical-align: middle;}
  708. .technical{height:5em;
  709. width:15%;
  710. background-color:red;
  711. position:relative;
  712. top: -21.799999999999999999999999999999999999999em;
  713. border:0.3em solid black;
  714. border-radius: 6em;
  715. left: 72.5em;
  716. line-height: 5em;}
  717. .tet{font-size:200%;
  718. font-style: Verdana;
  719. text-align: center;
  720. vertical-align: middle;}
  721. .contact{height:5em;
  722. width:20%;
  723. background-color:black;
  724. position:relative;
  725. top: 42.5em;
  726. border-radius: 6em;
  727. border:0.3em solid black;
  728. left: 50em;
  729. line-height: 5em;}
  730. .ct{font-size:200%;
  731. font-style: Verdana;
  732. text-align: center;
  733. vertical-align: middle;}
  734. .work{height:5em;
  735. width:20%;
  736. background-color:black;
  737. position:relative;
  738. top: 37em;
  739. border-radius: 6em;
  740. left: 66em;
  741. line-height: 5em;
  742. border:0.3em solid black;}
  743. .wt{font-size:200%;
  744. font-style: Verdana;
  745. text-align: center;
  746. vertical-align: middle;}
  747. h2{color:red;
  748. font-size: 3em;}
  749. p{color: White;
  750. font-size: 2em}
  751. .s a b{color:black;
  752. font-size: 4em;
  753. text-decoration:none;
  754. position: absolute;
  755. left: 5.7em;
  756. top: 51em;
  757. font-size: 1.05em;}
  758. img{border:0.1em solid black;
  759. border-radius: 1.5em;}
  760. .dilo{position: relative;
  761. top: 1em;}
  762. .Apato{position:relative;
  763. left: 15em;
  764. top: -9em;
  765. height:0.1em}
  766. .Allo{position:relative;
  767. left: 30em;
  768. top:-9.25em;
  769. height:0.1em}
  770. h3{color: red;}
  771. li{color:white;}
  772. .ct a{text-decoration: underline;
  773. color:blue;
  774. font-size:0.5em;}
  775. .wt a{text-decoration: underline;
  776. color:blue;
  777. font-size:0.5em;}
  778. span a{color: red;
  779. font-size: 1em;}
  780. div div a{color: black;
  781. font-size: 1em;
  782. text-decoration: none;}
  783. .lol p{color: white;}
  784. .s{width: 20%;
  785. height: 7em;
  786. text-align: center;
  787. vertical-align:middle;
  788. line-height: 6em;
  789. border-radius:6em;
  790. border-color: red;
  791. border-style: solid;
  792. background-image: url("http://www.jurassicworld.com/media/dinosaurs/tyrannosaurus-rex/tyrannosaurus-rex-info-graphic.png");
  793. background-size: 70%;
  794. background-repeat: no-repeat;
  795. background-position: 4.75em;
  796. background-color: white;
  797. }
  798. #spandex button{background-color: red;
  799. border-color: red;
  800. width: 18%;
  801. height: 100%;
  802. position: relative;
  803. left: 145px;
  804. border-top-right-radius: 8em;
  805. border-bottom-right-radius: 8em;
  806. outline: none;
  807. }
  808. #span button{background-color: red;
  809. border-color: red;
  810. width: 18%;
  811. height: 100%;
  812. position: relative;
  813. left: -144px;
  814. border-top-left-radius: 8em;
  815. border-bottom-left-radius: 8em;
  816. border-top-right-radius: 0em;
  817. border-bottom-right-radius: 0em;
  818. outline: none;
  819. }
  820. .one{width: 0.5em;
  821. height: 0.5em;
  822. border-color: black;
  823. border-style: solid;
  824. border-radius: 100000em;
  825. position: absolute;
  826. top: 57.25em;
  827. left: 6.75em;
  828. z-index: 100;
  829. background-color: white;
  830. }
  831. .two{width: 0.5em;
  832. height: 0.5em;
  833. border-color: black;
  834. border-style: solid;
  835. border-radius: 100000em;
  836. position: absolute;
  837. top: 57.25em;
  838. left: 7.75em;
  839. z-index: 100;
  840. background-color: white;
  841. }
  842. .three{width: 0.5em;
  843. height: 0.5em;
  844. border-color: black;
  845. border-style: solid;
  846. border-radius: 100000em;
  847. position: absolute;
  848. top: 57.25em;
  849. left: 8.75em;
  850. z-index: 100;
  851. background-color: white;
  852. }
  853. .four{width: 0.5em;
  854. height: 0.5em;
  855. border-color: black;
  856. border-style: solid;
  857. border-radius: 100000em;
  858. position: absolute;
  859. top: 57.25em;
  860. left: 9.75em;
  861. z-index: 100;
  862. background-color: white;
  863. }
  864. .five{width: 0.5em;
  865. height: 0.5em;
  866. border-color: black;
  867. border-style: solid;
  868. border-radius: 100000em;
  869. position: absolute;
  870. top: 57.25em;
  871. left: 10.75em;
  872. z-index: 100;
  873. background-color: white;
  874. }
  875. .six{width: 0.5em;
  876. height: 0.5em;
  877. border-color: black;
  878. border-style: solid;
  879. border-radius: 100000em;
  880. position: absolute;
  881. top: 57.25em;
  882. left: 11.75em;
  883. z-index: 100;
  884. background-color: white;
  885. }
  886. .seven{width: 0.5em;
  887. height: 0.5em;
  888. border-color: black;
  889. border-style: solid;
  890. border-radius: 100000em;
  891. position: absolute;
  892. top: 57.25em;
  893. left: 12.75em;
  894. z-index: 100;
  895. background-color: white;
  896. }
  897. .eight{width: 0.5em;
  898. height: 0.5em;
  899. border-color: black;
  900. border-style: solid;
  901. border-radius: 100000em;
  902. position: absolute;
  903. top: 57.25em;
  904. left: 13.75em;
  905. z-index: 100;
  906. background-color: white;
  907. }
  908. .nine{width: 0.5em;
  909. height: 0.5em;
  910. border-color: black;
  911. border-style: solid;
  912. border-radius: 100000em;
  913. position: absolute;
  914. top: 57.25em;
  915. left: 14.75em;
  916. z-index: 100;
  917. background-color: white;
  918. }
  919. .ten{width: 0.5em;
  920. height: 0.5em;
  921. border-color: black;
  922. border-style: solid;
  923. border-radius: 100000em;
  924. position: absolute;
  925. top: 57.25em;
  926. left: 15.75em;
  927. z-index: 100;
  928. background-color: white;
  929. }
  930. .troll{width: 50em;
  931. height: 7em;
  932. background-color: blue;
  933. z-index: 50050950950;
  934. border-color: blue;
  935. border-style: solid;
  936. position: fixed;
  937. top: 50%;
  938. left: -48em;
  939. border-top-right-radius: 5000em;
  940. border-bottom-right-radius: 10000em;
  941. opacity: 0.75;
  942. }
  943. .troll p{transform: rotate(-90deg);
  944. font-size: 1em;
  945. position: relative;
  946. top: -21.5em;
  947. left: 23.5em;
  948. }
  949. .troll h1{position: fixed;
  950. top: 11.5em;
  951. }
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!