forked from TommyLiang1/WebDevelopmentAssignment1
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathwei.html
More file actions
348 lines (329 loc) · 22.2 KB
/
wei.html
File metadata and controls
348 lines (329 loc) · 22.2 KB
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Bootstrap App Landing Template">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
<meta name="author" content="Themefisher">
<meta name="generator" content="Themefisher Small Apps Template v1.0">
<!-- CUSTOM CSS -->
<link rel="stylesheet" href="css/navbar.css">
<link rel="stylesheet" href="css/slidein_img.css">
<link rel="stylesheet" href="css/socialmedia-buttons.css">
<link rel="stylesheet" href="css/wei.css">
<!-- CUSTOM JS -->
<!-- Defer is needed or else carousel buttons will not work -->
<script src="js/carousel.js" defer></script>
<!-- PLUGINS -->
<!-- BootStrap --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- BootStrap CDN --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css" integrity="sha384-X8QTME3FCg1DLb58++lPvsjbQoCT9bp3MsUU3grbIny/3ZwUJkRNO8NPW6zqzuW9" crossorigin="anonymous">
<!-- Font Awesome - Wei's Kit --><script src="https://kit.fontawesome.com/18bfcf6dd8.js" crossorigin="anonymous"></script>
<style>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,700,900');
</style>
<title>Hunter Zoo</title>
<!-- add icon link -->
<link rel="icon" href="img/CUNY_ZOOS_Logo.png" type = "image/x-icon">
</head>
<body>
<header>
<!-- Slide-In Image -->
<marquee behavior="alternate" direction="right">
<img src="img/Slide_In GIFs/Slide-In Dolphin GIF.gif" width="125" height="80" alt="swimming pixel dolphin gif">
<img src="img/Slide_In GIFs/Slide_In Man on Dolphin GIF.gif" width="125" height="80" alt="man on dolphin gif">
</marquee>
<!-- Navigation Bar -->
<nav class="navbar main-nav navbar-expand-lg">
<div class="container">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="center nav-item dropdown @@logo">
<a class="navbar-brand nav-link dropdown-toggle" href="index.html"><img src="img/CUNY_ZOOS_Logo.png" alt="logo"></a>
<!-- Dropdown list -->
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="https://www.cuny.edu/about/">About Us</a></li>
<li><a class="dropdown-item" href="https://www.cuny.edu/contact-us/">Contact</a></li>
</ul>
</li>
<!-- Wei's Hunter College -->
<li class="center nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="wei.html" data-toggle="dropdown">Hunter College
<span><i class="ti-angle-down"></i></span>
</a>
<!-- Dropdown list -->
<ul class="dropdown-menu">
<li><a class="dropdown-item @@animal1" href="src/wei-zoo-animals/wei_bluewhale.html"><img src="img/Wei's Animals/Blue Whale Favicon/favicon.ico">Blue Whale</a></li>
<li><a class="dropdown-item @animal2" href="src/wei-zoo-animals/wei_goldeneagle.html"><img src="img/Wei's Animals/Golden Eagle Favicon/favicon.ico">Golden Eagle</a></li>
<li><a class="dropdown-item @@animal3" href="src/wei-zoo-animals/wei_karnerbluebutterfly.html"><img src="img/Wei's Animals/Karner Blue Butterfly Favicon/favicon.ico">Karner Blue Butterfly</a></li>
<li><a class="dropdown-item @@animal4" href="src/wei-zoo-animals/wei_shortearedowl.html"><img src="img/Wei's Animals/Short Eared Owl Favicon/favicon.ico">Short-eared Owl</a></li>
</ul>
</li>
<!-- Tommy's Baruch College -->
<li class="center nav-item dropdown @@baruch">
<a class="nav-link dropdown-toggle" href="tommy.html" data-toggle="dropdown">Baruch College
<span><i class="ti-angle-down"></i></span>
</a>
<!-- Dropdown list -->
<ul class="dropdown-menu">
<li><a class="dropdown-item @@animal1" href="src/tommy-zoo-animals/white-tiger.html"><img src="img/Tommy's Animals/White Tiger Favicon/favicon.ico">White Tiger</a></li>
<li><a class="dropdown-item @animal2" href="src/tommy-zoo-animals/gorilla.html"><img src="img/Tommy's Animals/Gorilla Favicon/favicon.ico">Gorilla</a></li>
<li><a class="dropdown-item @@animal3" href="src/tommy-zoo-animals/bottlenose-dolphin.html"><img src="img/Tommy's Animals/Bottlenose Dolphin Favicon/favicon.ico">Bottlenose Dolphin</a></li>
<li><a class="dropdown-item @@animal4" href="src/tommy-zoo-animals/bald-eagle.html"><img src="img/Wei's Animals/Golden Eagle Favicon/favicon.ico">Bald Eagle</a></li>
</ul>
</li>
<!-- Kevin's CCNY -->
<li class="center nav-item dropdown @@ccny">
<a class="nav-link dropdown-toggle" href="kevin.html" data-toggle="dropdown">City College of New York
<span><i class="ti-angle-down"></i></span>
</a>
<!-- Dropdown list -->
<ul class="dropdown-menu">
<li><a class="dropdown-item @@animal1" href="src/kevin-zoo-animals/kevin_sealion.html"><img src="img/Kevin's Animals/Sea Lion Favicon/favicon.ico">Sea Lion</a></li>
<li><a class="dropdown-item @animal2" href="src/kevin-zoo-animals/kevin_fennecfox.html"><img src="img/Kevin's Animals/Fennec Fox Favicon/favicon.ico">Fennec Fox</a></li>
<li><a class="dropdown-item @@animal3" href="src/kevin-zoo-animals/kevin_poisondartfrog.html"><img src="img/Kevin's Animals/Poison Dart Frog Favicon/favicon.ico">Poison Dart Frog</a></li>
<li><a class="dropdown-item @@animal4" href="src/kevin-zoo-animals/kevin_snowyowl.html"><img src="img/Wei's Animals/Short Eared Owl Favicon/favicon.ico">Snowy Owl</a></li>
</ul>
</li>
<!-- Stephanie's Brooklyn College -->
<li class="center nav-item dropdown @@brooklyn">
<a class="nav-link dropdown-toggle" href="stephanie.html" data-toggle="dropdown">Brooklyn College
<span><i class="ti-angle-down"></i></span>
</a>
<!-- Dropdown list -->
<ul class="dropdown-menu">
<li><a class="dropdown-item @@animal1" href="src/steph-zoo-animals/kangaroo.html"><img src="img/Stephanie's Animals/Kangeroo Favicon/favicon.ico">Kangaroo</a></li>
<li><a class="dropdown-item @animal2" href="src/steph-zoo-animals/koala.html"><img src="img/Stephanie's Animals/Koala Favicon/favicon.ico">Koala</a></li>
<li><a class="dropdown-item @@animal3" href="src/steph-zoo-animals/platypus.html"><img src="img/Stephanie's Animals/Platypus Favicon/favicon.ico">Platypus</a></li>
<li><a class="dropdown-item @@animal4" href="src/steph-zoo-animals/wombat.html"><img src="img/Stephanie's Animals/Wombat Favicon/favicon.ico">Wombat</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- Animal Avatars -->
<div class="container">
<div class="row">
<div class="col-lg-3">
<img class="rounded-circle" src="img/Wei's Animals/blue whale.jpg" alt="blue whale image" width="140" height="140">
<p><b>Blue Whale<br></b>The blue whale is a marine mammal and a baleen whale. Reaching a maximum confirmed length of 29.9 meters and weighing up to 199 tonnes, it is the largest animal known to have ever existed. The blue whale's long and slender body can be of various shades of greyish-blue dorsally and somewhat lighter underneath.</p>
<a class="btn btn-secondary" href="#bluewhale" role="button">View fact »</a>
<a class="btn btn-secondary" href="src/wei-zoo-animals/wei_bluewhale.html" role="button">View details »</a>
</div>
<div class="col-lg-3">
<img class="rounded-circle" src="img/Wei's Animals/golden eagle.jpg" alt="golden eagle image" width="140" height="140">
<p><b>Golden Eagle<br></b>The golden eagle is a bird of prey living in the Northern Hemisphere. It is the most widely distributed species of eagle. Like all eagles, it belongs to the family Accipitridae. They are one of the best-known birds of prey in the Northern Hemisphere.</p>
<a class="btn btn-secondary" href="#goldeneagle" role="button">View fact »</a>
<a class="btn btn-secondary" href="src/wei-zoo-animals/wei_goldeneagle.html" role="button">View details »</a>
</div>
<div class="col-lg-3">
<img class="rounded-circle" src="img/Wei's Animals/karner blue butterfly.jpg" alt="karner blue butterfly image" width="140" height="140">
<p><b>Karner Blue Butterfly<br></b>The Karner blue is an endangered subspecies of small blue butterfly found in some Great Lakes states, small areas of New Jersey, the Capital District region of New York, and southern New Hampshire, where it is the official state butterfly.</p>
<a class="btn btn-secondary" href="#karnerbluebutterflies" role="button">View fact »</a>
<a class="btn btn-secondary" href="src/wei-zoo-animals/wei_karnerbluebutterfly.html" role="button">View details »</a>
</div>
<div class="col-lg-3">
<img class="rounded-circle" src="img/Wei's Animals/short eared owl.jfif" alt="short eared owl image" width="140" height="140">
<p><b>Short-Eared Owl<br></b>The short-eared owl is a widespread grassland species in the family Strigidae. Owls belonging to genus Asio are known as the eared owls, as they have tufts of feathers resembling mammalian ears. These "ear" tufts may or may not be visible.</p>
<a class="btn btn-secondary" href="#shortearedowl" role="button">View fact »</a>
<a class="btn btn-secondary" href="src/wei-zoo-animals/wei_shortearedowl.html" role="button">View details »</a>
</div>
</div>
<!-- Line Divider -->
<hr class="line-divider">
<!-- Fun Fact Section -->
<!-- Blue Whale -->
<div class="row featurette image" id="bluewhale">
<div class="col-md-7">
<h4 class="fun-fact">Fun Fact about Blue Whales: <br><span class="text-muted">The tongue of the blue whale is as big as an elephant.</span></h4>
<a class="btn btn-secondary" href="src/wei-zoo-animals/wei_bluewhale.html" role="button">View details »</a>
</div>
<div class="col-md-5">
<img class="img" src="img/Wei's Animals/bluewhale_gif.gif" alt="blue whale gif" width="500px" height="500px">
</div>
</div>
<!-- Line Divider -->
<hr class="line-divider">
<!-- Golden Eagle -->
<div class="row featurette" id="goldeneagle">
<div class="col-md-7">
<h4 class="fun-fact">Fun Fact about Golden Eagles: <br><span class="text-muted">Golden eagle nests are on average 5-6 feet wide and 2 feet high, weighing hundreds of pounds.</span></h4>
<a class="btn btn-secondary" href="src/wei-zoo-animals/wei_goldeneagle.html" role="button">View details »</a>
</div>
<div class="col-md-5">
<a class="c-preview">
<div class="c-preview__img"></div>
</a>
</div>
</div>
<!-- Line Divider -->
<hr class="line-divider">
<!-- Karner Blue Butterfly -->
<div class="row featurette image" id="karnerbluebutterflies">
<div class="col-md-7">
<h4 class="fun-fact">Fun Fact about Karner Blue Butterflies: <br><span class="text-muted">Adult karner blue butterflies have a very short lifespan, usually only five days or so.</span></h4>
<a class="btn btn-secondary" href="src/wei-zoo-animals/wei_karnerbluebutterfly.html" role="button">View details »</a>
</div>
<div class="col-md-5">
<div class="one-background-multiple-divs">
<div class="block">
<div class="side -main"></div>
<div class="side -left"></div>
</div>
<div class="block">
<div class="side -main"></div>
<div class="side -left"></div>
</div>
<div class="block">
<div class="side -main"></div>
<div class="side -left"></div>
</div>
</div>
</div>
</div>
<!-- Line Divider -->
<hr class="line-divider">
<!-- Short Eared Owl -->
<div class="row featurette image" id="shortearedowl">
<div class="col-md-7">
<h4 class="fun-fact">Fun Fact about Short-Eared Owls: <br><span class="text-muted">Short-eared Owls are one of the few owls that nest on the ground.</span></h4>
<a class="btn btn-secondary" href="src/wei-zoo-animals/wei_shortearedowl.html" role="button">View details »</a>
</div>
<div class="col-md-5">
<div class='reflection-container'>
<a class='reflection-grid-cell reflection-grid-cell-1' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-2' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-3' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-4' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-5' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-6' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-7' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-8' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-9' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-10' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-11' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-12' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-13' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-14' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-15' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-16' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-17' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-18' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-19' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-20' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-21' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-22' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-23' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-24' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-25' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-26' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-27' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-28' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-29' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-30' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-31' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-32' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-33' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-34' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-35' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-36' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-37' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-38' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-39' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-40' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-41' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-42' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-43' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-44' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-45' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-46' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-47' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-48' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-49' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-50' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-51' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-52' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-53' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-54' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-55' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-56' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-57' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-58' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-59' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-60' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-61' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-62' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-63' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-64' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-65' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-66' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-67' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-68' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-69' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-70' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-71' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-72' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-73' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-74' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-75' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-76' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-77' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-78' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-79' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-80' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-81' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-82' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-83' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-84' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-85' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-86' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-87' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-88' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-89' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-90' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-91' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-92' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-93' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-94' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-95' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-96' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-97' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-98' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-99' href='#'></a>
<a class='reflection-grid-cell reflection-grid-cell-100' href='#'></a>
<div class='reflection-content'></div>
</div>
</div>
</div>
</div>
<!-- Social Media Button -->
<footer class="wrapper">
<div class="button">
<div class="icon">
<a href="https://github.com/chenweida6220"><i class="fa-brands fa-facebook-f"></i></a>
</div>
<span>Facebook</span>
</div>
<div class="button">
<div class="icon">
<a href="https://github.com/TommyLiang1"><i class="fa-brands fa-twitter"></i></a>
</div>
<span>Twitter</span>
</div>
<div class="button">
<div class="icon">
<a href="https://github.com/kevinville"><i class="fa-brands fa-instagram"></i></a>
</div>
<span>Instagram</span>
</div>
<div class="button">
<div class="icon">
<a href="https://github.com/steph-kimm"><i class="fa-brands fa-youtube"></i></a>
</div>
<span>YouTube</span>
</div>
</footer>
</body>
</html>