CS3041Final/createZoo.html at master · nconill13/CS3041Final · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!doctype html>
<html>


<head>
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-webapp-status-bar-style" content="black">
	<meta name="viewport" content="width=device-width, user-scalable=no" >
	<title>Create Zoo</title>
	<link rel="stylesheet" href="createZooStyle.css">
	<script src="https://kit.fontawesome.com/a076d05399.js"></script>

</head>

<header>
	ZOOADVISOR

	<div class="topnav">
		<!--Menu Actions-->
		<div class="menu" onclick="menuToX(this), showMenu()">
			<div class="bar1"></div>
			<div class="bar2"></div>
			<div class="bar3"></div>
		</div>
	</div>

	<hr>

	<div class="links">
		<div id="myLinks">
		<ul class = "menuList">

			<img src="AnimalPictures/Menu/Tiger.png" alt="Tiger" width="80px" border = "3" style="vertical-align: middle">
			<li>ANIMALS</li>
			<a href="#animals">
				<i class="fas fa-arrow-alt-circle-right" style="vertical-align: middle; font-size: 50px"></i>
			</a>

			<br><br>

			<img src="AnimalPictures/Menu/ZooPhoto.png" alt="Zoo Locations" width="80px" border = "3" style="vertical-align: middle">
			<li>ZOOS</li>&emsp;&ensp;
			<a href="#animals">
				<i class="fas fa-arrow-alt-circle-right" style="vertical-align: middle; font-size: 50px"></i>
			</a>

			<br><br>

			<img src="AnimalPictures/Menu/QuestionMark.png" alt="Help" width="80px" border = "3" style="vertical-align: middle">
			<li>INFO</li>&emsp;&emsp;
			<a href="#animals">
				<i class="fas fa-arrow-alt-circle-right" style="vertical-align: middle; font-size: 50px"></i>
			</a>
			<hr>
		</ul>
		</div>
	</div>


	<script>
		function menuToX(x) {
			x.classList.toggle("change");
		}

		function showMenu() {
			var x = document.getElementById("myLinks");
			if (x.style.display == "block"){
				x.style.display = "none";
			} else {
				x.style.display = "block";
			}
		}
	</script>

</header>


<body>

	<!--Classifications-->
	<ul class = "classifications">

		<script src="https://kit.fontawesome.com/a076d05399.js"></script>
		<img class="amphibPic" src="AnimalPictures/Classifications/Amphibians.png" alt="frog" border = "3" style="vertical-align: middle">
		<li>AMPHIBIANS </li>&ensp;
		<a href="Amphibians/amphibians.html">
			<i class="fas fa-arrow-alt-circle-right" style="font-size: 40px; vertical-align: middle"></i>
		</a>

		<br><br><img class="birdPic" src="AnimalPictures/Classifications/Birds.png" alt="falcon" border = "3" style="vertical-align: middle">
		<li class = "birds">BIRDS </li>&ensp;
		<a href="Birds/birds.html">
			<i class="fas fa-arrow-alt-circle-right" style="font-size: 40px; vertical-align: middle"></i>
		</a>

		<br><br><img class="fishPic" src="AnimalPictures/Classifications/Fish.png" alt="fish" border = "3" style="vertical-align: middle">
		<li class = "fish">FISH </li>&ensp;
		<a href="Fish/fish.html">
			<i class="fas fa-arrow-alt-circle-right" style="font-size: 40px; vertical-align: middle"></i>
		</a>

		<br><br><img class="insectPic" src="AnimalPictures/Classifications/Insect.png" alt="insect" border = "3" style="vertical-align: middle">
		<li class = "insects">INSECTS </li>&ensp;
		<i class="fas fa-arrow-alt-circle-right" style="font-size: 40px; vertical-align: middle"></i>

		<br><br><img class="mammalPic" src="AnimalPictures/Classifications/Mammal.png" alt="bear" border = "3" style="vertical-align: middle">
		<li class = "mammals">MAMMALS </li>&ensp;
		<i class="fas fa-arrow-alt-circle-right" style="font-size: 40px; vertical-align: middle"></i>

		<br><br><img class="reptilePic" src="AnimalPictures/Classifications/Reptile.png" alt="reptile" border = "3" style="vertical-align: middle">
		<li class = "reptiles">REPTILES </li>&ensp;
		<i class="fas fa-arrow-alt-circle-right" style="font-size: 40px; vertical-align: middle"></i>

		<br><br><br><br><br><br>
	</ul>

	<!--DONE Footer-->
	<div class="footer">
		<button class="button" onClick="document.location = 'animalList.html';">DONE</button>
	</div>

</body>


</html>