forked from cornell-info1300-2023fa/class-20-snippets
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
133 lines (112 loc) · 4.24 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Home - The Ithaca Zoo</title>
<link rel="stylesheet" type="text/css" href="styles/site.css">
</head>
<body>
<!-- Accessibility: Cookie banner should be the first thing that loads. -->
<div id="cookie-banner" class="banner">
<p>This website uses cookies to ensure you get the best experience on our website.</p>
<button id="accept-cookies-button" class="button">Accept</button>
</div>
<header>
<h1><a href="index.html">🦓 Ithaca Zoo</a></h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="popular.html">Popular Animals</a></li>
<li><a href="rules.html">Safety</a></li>
</ul>
</nav>
</header>
<main>
<section class="welcome highlight-fun">
<h2>Welcome!</h2>
<div class="content-container readable">
<picture class="logo">
<!-- Source: original work (Student's Name) -->
<img alt="" src="images/zoo-logo.png" width="200" height="214">
</picture>
<div>
<p>
We're so excited to share our love of animals with our neighbors, and we hope you come visit soon. Whether
you stop by once while you're passing through town or come multiple times a week, you'll find the Ithaca Zoo
is ready to welcome you with open arms.
</p>
<p>
<strong>Advisory: due to upcoming hot weather, we advise all guests to make sure they bring sunscreen for
protection from ultraviolet rays and a water bottle to help stay hydrated.</strong> We have water
fountains all over the zoo where you can fill up. Just look for the signs that say "Watering Hole."
</p>
</div>
</div>
</section>
<section class="events highlight-dark">
<h2>Events</h2>
<div class="content-container readable">
<div class="events-text">
<p>
Our next event is the Red Panda Meet and Greet, where you have a chance to meet our favorite little bundles
of joy,
<em>Red</em> and <em>Fluffy</em>. This will take place next Friday from 12:00-3:30 PM. <strong>There will be
a line</strong>, so come early.
</p>
<blockquote>
<p>
The Red Panda Meet and Greet was the most fun my kids had all summer! - John Smith Sr.
</p>
</blockquote>
<blockquote>
<p>
Meeting Apple and Fluffy was cool. - John Smith Jr.
</p>
</blockquote>
</div>
<div class="events-picture">
<picture class="theme-image">
<img src="images/red-panda.jpg" alt="" width="800" height="648">
</picture>
<cite class="picture-citation">
Source: <a href="https://www.flickr.com/photos/138191974@N03/23714231979">Biology Club</a>
</cite>
</div>
</div>
</section>
<section class="highlight">
<h2>Sections of the Zoo</h2>
<ul>
<li>Indoor Ocean</li>
<li>Tangled Swamp</li>
<li>Hidden Jungle</li>
<li>Alpine Mountains</li>
<li>Central Savanna</li>
<li>Arid Desert</li>
</ul>
</section>
<section>
<h2>Featured Animals</h2>
<dl>
<dt>Cryptopsaras Couesii</dt>
<dd>Commonly called the Triplewart Seadevil, this angler fish that uses a glowing lure on its head to attract
prey.
</dd>
<dt>Ailurus Fulgens</dt>
<dd>Commonly called the Red Panda, this fluffy creature is actually more closely related to raccoons than giant
pandas.</dd>
<dt>Giraffa Camelopardalis Reticulata</dt>
<dd>Although there are many kinds of giraffes in the wild, this is the kind most commonly found in zoos around
the
world.</dd>
<dt>Panthera uncia</dt>
<dd>Commonly known as the snow leopard, this animal has been categorized as a vulnerable
species since 1985.</dd>
</dl>
</section>
</main>
<script src="scripts/jquery-3.7.1.js"></script>
<script src="scripts/cookie-banner.JS"></script>
</body>
</html>