forked from cornell-info1300-2023fa/class-19-interactivity
-
Notifications
You must be signed in to change notification settings - Fork 0
/
popular.html
127 lines (104 loc) · 5.46 KB
/
popular.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Popular Animals - 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="highlight-fun">
<h2>Popular Animal: Jeff the Giraffe</h2>
<div class="readable">
<p>
Our most popular animal is our friendly pal Jeff the Giraffe! Jeff uses his long neck to chomp down on leaves from tall trees or snacks from zookeepers all the way up on the observation platform. Don't be scared of Jeff's long tongue; if he licks you, that means he likes you!
</p>
<div class="thumbnail-gallery">
<div id="gallery-thumbnails">
<!-- Image Source: https://pixabay.com/en/giraffe-zoo-mammal-animal-head-2481840/ -->
<!-- Image License: CC0 Creative Commons -->
<button id="gallery-thumb1"><img src="images/jeff-giraffe.jpg" alt="Giraffe, show image 1"></button>
<!-- Image Source: https://pixabay.com/photos/giraffe-laying-down-nature-uganda-4499694/ -->
<!-- Image License: Simplified Pixabay License -->
<button id="gallery-thumb2"><img src="images/jeff-sitting.jpg" alt="Giraffe, show image 2"></button>
<!-- Image Source: https://pixabay.com/photos/giraffe-nature-safari-africa-1029795/ -->
<!-- Image License: Simplified Pixabay License -->
<button id="gallery-thumb3"><img src="images/jeff-standing.jpg" alt="Giraffe, show image 3"></button>
</div>
<div id="gallery-figures">
<figure id="gallery-figure1">
<!-- Image Source: https://pixabay.com/en/giraffe-zoo-mammal-animal-head-2481840/ -->
<!-- Image License: CC0 Creative Commons -->
<img class="rounded-corners" src="images/jeff-giraffe.jpg" alt="Jeff the Giraffe" width="640" height="426">
<figcaption>
Our friend, Jeff.
<cite><a href="https://pixabay.com/en/giraffe-zoo-mammal-animal-head-2481840/">Source</a>
</cite>
</figcaption>
</figure>
<figure id="gallery-figure2">
<!-- Image Source: https://pixabay.com/photos/giraffe-laying-down-nature-uganda-4499694/ -->
<!-- Image License: Simplified Pixabay License -->
<img class="rounded-corners" src="images/jeff-sitting.jpg" alt="Jeff the Giraffe" width="640" height="426">
<figcaption>
Jeff sitting.
<cite><a href="https://pixabay.com/photos/giraffe-laying-down-nature-uganda-4499694/">Source</a>
</cite>
</figcaption>
</figure>
<figure id="gallery-figure3">
<!-- Image Source: https://pixabay.com/photos/giraffe-nature-safari-africa-1029795/ -->
<!-- Image License: Simplified Pixabay License -->
<img class="rounded-corners" src="images/jeff-standing.jpg" alt="Jeff the Giraffe" width="640" height="426">
<figcaption>
Jeff standing at 5.5 meters high!
<cite><a href="https://pixabay.com/photos/giraffe-nature-safari-africa-1029795/">Source</a>
</cite>
</figcaption>
</figure>
</div>
</div>
<p>
Jeff, like all giraffes, sleeps very little (< 30 minutes a night) in make sure he is alert & ready to avoid predators. No wonder he eats so much every day (> 50 pounds [or 23 kilograms] of leaves)!
</p>
</div>
</section>
<section class="highlight-dark">
<h2>Popular Animal: Sam the Snow Leopard</h2>
<div class="readable">
<p>
Sam is a recent addition to the Ithaca Zoo and we are thrilled to have her! She prefers her privacy and is most active in the mornings. She likes to eat sheep and goats, so be sure to leave your livestock at home. Sam is looking forward to winter in the Finger Lakes and hopes to see lots of snow.
</p>
<figure>
<!-- Image Source: https://pixabay.com/photos/snow-leopard-leopard-panthera-uncia-725384/ -->
<!-- Image License: Simplified Pixabay License -->
<img src="images/sam-snow-leopard.jpg" alt="Sam the Snow Leopard" width="640" height="427">
<figcaption>
Our Newest Friend Sam.
<cite>Source: <a href="https://pixabay.com/photos/snow-leopard-leopard-panthera-uncia-725384/">https://pixabay.com/photos/snow-leopard-leopard-panthera-uncia-725384/</a></cite>
</figcaption>
</figure>
<p>
Like many other big cats, Sam is an excellent acrobat. She can leap up to 30 feet (9 meters) in a single bound, so be sure to stay behind the protective glass lest you end up her lunch!
</p>
</div>
</section>
</main>
</body>
</html>