-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdiscover.html
More file actions
322 lines (297 loc) · 19.4 KB
/
discover.html
File metadata and controls
322 lines (297 loc) · 19.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="resources/Icons/NatGeoFavicon.ico">
<link rel="stylesheet" href="Normalize.css">
<link rel="stylesheet" href="discover.css">
<title>National Geographic Discoveries</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Average+Sans&family=Inria+Serif:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Irish+Grover&family=Julius+Sans+One&family=Kumbh+Sans:wght@100..900&family=Lexend+Mega:wght@100..900&family=Lisu+Bosa:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Luckiest+Guy&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<!-- header is made with a video background, with a title and a navigation bar that is responsive to the current page -->
<!-- same search bar is used from the first page with a click effect -->
<header class="animals_header">
<div class="logo_header">
<a href="index.html"><img src="resources/Icons/Natgeologo.png" alt="National Geographic logo" id="natgeologo"></a>
</div>
<div class="backlink">
<a href="index.html">
<img src="resources/Iconify/arrow_left.svg" alt="back arrow">
<p>Back</p>
</a>
</div>
<div class="right_align_search">
<div class="search_bar hide_bar_bg">
<div class="search_container hide_container">
<img src="resources/Iconify/Cancel.svg" alt="" class="navbar_icon" id="cancel_icon">
<input type="text" placeholder="Search..." id="search_input">
</div>
<img src="resources/Iconify/Search.svg" id="search_icon" class="navbar_icon" alt="search icon">
</div>
</div>
<section class="animals_page">
<div class="videobg_overlay"></div>
<video autoplay muted loop id="videobg">
<source src="https://razorbird360.github.io/FED_S10267339B_RanenSim_Assg01/resources/Animals_Page/Bg_animals.mp4">
</video>
<span id="title_underline"></span>
<nav class="navbar">
<a href="" id="current_nav">Animals</a>
<div class="navbar_tag"><a href="">Environment</a></div>
<div class="navbar_tag"><a href="">History & Culture</a></div>
<div class="navbar_tag"><a href="">Science</a></div>
<div class="navbar_tag"><a href="">Travel</a></div>
</nav>
<div class="page_title">
<h1>Animals</h1>
</div>
</section>
</header>
<!-- news articles section is the main content of the page, with a main article and a list of recent articles -->
<section class="news_articles">
<article class="head_article">
<div class="ha_sidetext">
<h2>This penguin swam 2,000 miles to Australia—and we don't know why</h2>
<h5>As climate change bears down on Antarctica, understanding why some penguins end up meandering so far from their natural habitats may help aid future conservation efforts.</h5>
<a href="https://www.nationalgeographic.com/animals/article/emperor-penguin-found-australia">
<div class="read_more">
<p>Read More</p>
</div>
</a>
<div class="ha_timestamp">
<img src="resources/Iconify/clock.svg" alt="clock icon">
<p>8h ago</p>
</div>
</div>
<div class="ha_image">
<img src="resources/Animals_Page/Animals_Penguin.png" alt="">
</div>
</article>
<article class="recent_articles">
<div class="recent_articles_title">
<h3>Discover Recent Articles</h3>
</div>
<div class="article_container ac_1">
<div class="article_item">
<a href="https://www.nationalgeographic.com/animals/article/florida-manatees-warmer-water-archaeology"><img src="resources/Animals_Page/Recent_articles/Animals_Manatees.png" alt=""></a>
<h4>There have never been more manatees in Florida than there are now</h4>
<p>Manatees have moved to sunshine state, attracted by the warm weather and human development. But the same changes that brought them there could lead to their demise.</p>
<div class="b_container">
<button class="save_button"
data-id="1"
data-title="There have never been more manatees in Florida than there are now"
data-desc="Manatees have moved to sunshine state, attracted by the warm weather and human development. But the same changes that brought them there could lead to their demise."
data-image="resources/Animals_Page/Recent_articles/Animals_Manatees.png">Save Article</button>
</div>
</div>
<div class="article_item">
<a href="https://www.nationalgeographic.com/animals/article/orcas-hunting-ship-traffic-noise"><img src="resources/Animals_Page/Recent_articles/Animals_Orcas.png" alt=""></a>
<h4>Noisy boat traffic may hide fish from hungry orcas</h4>
<p>As climate change bears down on Antarctica, understanding why some penguins end up meandering so far from their natural habitats may help aid future conservation efforts.</p>
<div class="b_container">
<button class="save_button"
data-id="2"
data-title="Noisy boat traffic may hide fish from hungry orcas"
data-desc="As climate change bears down on Antarctica, understanding why some penguins end up meandering so far from their natural habitats may help aid future conservation efforts."
data-image="resources/Animals_Page/Recent_articles/Animals_Orcas.png">Save Article</button>
</div>
</div>
<div class="article_item">
<a href="https://www.nationalgeographic.com/animals/article/wasps-alcohol-yeast-health"><img src="resources/Animals_Page/Recent_articles/Animals_Wasps.png" alt=""></a>
<h4>These wasps tolerate high amounts of alcohol—without getting a hangover</h4>
<p>Oriental wasps may have evolved a genetic mutation to handle their liquor, thanks to a beneficial relationship with yeast.</p>
<div class="b_container">
<button class="save_button"
data-id="3"
data-title="These wasps tolerate high amounts of alcohol—without getting a hangover"
data-desc="Oriental wasps may have evolved a genetic mutation to handle their liquor, thanks to a beneficial relationship with yeast."
data-image="resources/Animals_Page/Recent_articles/Animals_Wasps.png">Save Article</button>
</div>
</div>
<div class="article_item">
<a href="https://www.nationalgeographic.com/animals/article/plastic-whales-echolocation-deep-sea"><img src="resources/Animals_Page/Recent_articles/Animals_Whales.png" alt=""></a>
<h4>Why are whales eating plastic bags? They may 'sound' like dinner.</h4>
<p>Deep-diving toothed whales wash up dead with stomachs full of plastic and prey alike. Their built-in sonar likely can't tell the difference.</p>
<div class="b_container">
<button class="save_button"
data-id="4"
data-title="Why are whales eating plastic bags? They may 'sound' like dinner."
data-desc="Deep-diving toothed whales wash up dead with stomachs full of plastic and prey alike. Their built-in sonar likely can't tell the difference."
data-image="resources/Animals_Page/Recent_articles/Animals_Whales.png">Save Article</button>
</div>
</div>
</div>
<div class="article_container ac_2">
<div class="article_item">
<a href="https://www.nationalgeographic.com/animals/article/rattlesnakes-venom-conservation"><img src="resources/Animals_Page/Recent_articles/Animals_Rattlesnake.png" alt=""></a>
<h4>Rattlesnakes have a terrible reputation—but have they earned it?</h4>
<p>These antiheroes of the American West are actually not so bad. New research reveals they're good parents and neighbors, and their venom may help save lives.</p>
<div class="b_container">
<button class="save_button"
data-id="5"
data-title="Rattlesnakes have a terrible reputation—but have they earned it?"
data-desc="These antiheroes of the American West are actually not so bad. New research reveals they're good parents and neighbors, and their venom may help save lives."
data-image="resources/Animals_Page/Recent_articles/Animals_Rattlesnake.png">Save Article</button>
</div>
</div>
<div class="article_item">
<a href="https://www.nationalgeographic.com/animals/article/famous-grizzly-399-yellowstone-bear-killed-wyoming-vehicle"><img src="resources/Animals_Page/Recent_articles/Animals_bear.png" alt=""></a>
<h4>America's most beloved bear is dead. Here's why Grizzly 399 mattered.</h4>
<p>The oldest known grizzly mother in history, the 28-year-old bear was often photographed with her cubs in Grand Teton National Park before she was killed by a car in October.</p>
<div class="b_container">
<button class="save_button"
data-id="6"
data-title="America's most beloved bear is dead. Here's why Grizzly 399 mattered."
data-desc="The oldest known grizzly mother in history, the 28-year-old bear was often photographed with her cubs in Grand Teton National Park before she was killed by a car in October."
data-image="resources/Animals_Page/Recent_articles/Animals_bear.png">Save Article</button>
</div>
</div>
<div class="article_item">
<a href="https://www.nationalgeographic.com/animals/article/martial-eagles-lion-cubs-prey-eat-hunt"><img src="resources/Animals_Page/Recent_articles/Animals_Eagles.png" alt=""></a>
<h4>In Kenya, martial eagles hunt lion cubs for lunch</h4>
<p>Martial eagles, with wingspans that can exceed six feet, can take out young impalas or gazelles. Recently, researchers have seen them targeting another species young.</p>
<div class="b_container">
<button class="save_button"
data-id="7"
data-title="In Kenya, martial eagles hunt lion cubs for lunch"
data-desc="Martial eagles, with wingspans that can exceed six feet, can take out young impalas or gazelles. Recently, researchers have seen them targeting another species young."
data-image="resources/Animals_Page/Recent_articles/Animals_Eagles.png">Save Article</button>
</div>
</div>
<div class="article_item">
<a href="https://www.nationalgeographic.com/animals/article/invasive-joro-spiders-spreading-boston-philadelphia"><img src="resources/Animals_Page/Recent_articles/Animals_Spiders.png" alt=""></a>
<h4>Giant, invasive joro spiders spotted in the Northeast—but they didn't fly there</h4>
<p>Sightings in Massachusetts and Pennsylvania have arachnophobes buzzing—but experts say these colorful critters likely hitched a ride.</p>
<div class="b_container">
<button class="save_button"
data-id="8"
data-title="Giant, invasive joro spiders spotted in the Northeast—but they didn't fly there"
data-desc="Sightings in Massachusetts and Pennsylvania have arachnophobes buzzing—but experts say these colorful critters likely hitched a ride."
data-image="resources/Animals_Page/Recent_articles/Animals_Spiders.png">Save Article</button>
</div>
</div>
</div>
<!-- this part is hidden in desktop view, only available on mobile -->
<div class="load_more_container">
<div class="load_more_button" onclick="change_article_height()">
<p id="load_text">Load More</p>
<img src="resources/Iconify/arrow_down.svg" alt="" id="load_arrow">
</div>
</div>
</article>
</section>
<!-- trivia page for quizzes and tests -->
<section class="trivia">
<div class="trivia_title_container">
<div class="trivia_title">
<h1>Wild Adventures: Trivia</h1>
</div>
</div>
<div class="trivia_container">
<div class="activity_container">
<div class="image_container">
<img src="resources/Animals_Page/personality_test.jpg" alt="personality test image">
</div>
<div class="content_container">
<h5>DISCOVER YOUR ANIMAL PERSONALITY</h5>
<p>Join 22,398,103 million users who've taken our 10 question FREE quiz, and find out which one of the 50 animals you are!</p>
<a href="https://www.nationalgeographic.com/family/article/outdoor-personality-quiz">
<div class="activities_button">
<p>Start Test</p>
</div>
</a>
</div>
</div>
</div>
<div class="trivia_container">
<div class="activity_container trivia_activity_2">
<div class="image_container">
<img src="resources/Animals_Page/Animals_babypenguin.jpg" alt="personality test image">
</div>
<div class="content_container trivia_content_2">
<h5>How much do you really know about baby animals?</h5>
<p>When can you start training a puppy? Why is the internet obsessed with Pesto the penguin? Time to test your baby animal knowledge.</p>
<a href="https://www.nationalgeographic.com/animals/article/baby-animal-facts-quiz">
<div class="activities_button">
<p>Take Quiz</p>
</div>
</a>
</div>
</div>
</div>
</section>
<!-- footer bar is also made to fit the theme of the website (dark theme), with responsive buttons and text inputs -->
<footer>
<div class="connected_follow">
<div class="stay_connected">
<div class="connected_only">
<h1>Stay Connected</h1>
<p>Join over 500,000 people who receive weekly newsletters.</p>
<div class="your_email">
<input type="text" placeholder="Your Email">
<img src="resources/Iconify/email_arrow.svg" alt="arrow email">
</div>
</div>
</div>
<div class="follow_us">
<p>Follow Us</p>
<div class="follow_image_container">
<a href="https://www.tiktok.com/@natgeo?lang=en"><img src="resources/Iconify/tiktok.svg" alt=""></a>
<a href="https://www.instagram.com/natgeo/"><img src="resources/Iconify/instagram.svg" alt=""></a>
<a href="https://www.youtube.com/@NatGeo"><img src="resources/Iconify/youtube.svg" alt=""></a>
<a href="https://www.linkedin.com/company/national-geographic/"><img src="resources/Iconify/linkedin.svg" alt=""></a>
<a href="https://x.com/natgeo/"><img src="resources/Iconify/twitter.svg" alt=""></a>
<a href="https://www.reddit.com/r/nationalgeographic/"><img src="resources/Iconify/reddit.svg" alt=""></a>
</div>
</div>
</div>
<div class="our_sites">
<div class="site_information">
<h1>Our Sites</h1>
<div class="site_links">
<a href="https://www.nationalgeographic.com/">Nat Geo Home</a>
<a href="https://www.nationalgeographic.org/society/projects/ng-live/">Attend a Live Event</a>
<a href="https://www.nationalgeographic.com/expeditions/">Book a Trip</a>
<a href="https://kids.nationalgeographic.com/">Inspire Your Kids</a>
<a href="https://www.disneystore.com/franchises/national-geographic/">Shop Nat Geo</a>
<a href="https://www.nationalgeographic.org/society/events-and-experiences/">Visit the D.C Museum</a>
<a href="https://www.nationalgeographic.com/tv/">Watch TV</a>
<a href="https://www.nationalgeographic.com/impact">Learn About Our Impact</a>
<a href="https://www.nationalgeographic.org/society/become-a-member/">Support Our Mission</a>
<a href="https://www.disneyadvertising.com/our-brands/national-geographic/">Advertise With Us</a>
</div>
</div>
</div>
<div class="contact_us">
<h1>Contact Us</h1>
<div class="contact_details">
<div class="footer_detail">
<img src="resources/Iconify/Home.svg" alt="">
<p>Washington, DC 20036, United States</p>
</div>
<div class="footer_detail">
<img src="resources/Iconify/Email.svg" alt="">
<p>natgeomagazine@cdsfulfillment.com</p>
</div>
<div class="footer_detail">
<img src="resources/Iconify/Call.svg" alt="">
<p>+1-515-237-3674</p>
</div>
<div class="footer_detail">
<img src="resources/Iconify/Chatbot.svg" alt="">
<p>FAQ & Chatbot</p>
</div>
</div>
</div>
<div class="copyright">
<a href="index.html"><img src="resources/Icons/Natgeologo.png" alt="" id="copyright_logo"></a>
<p>Copyright © 1996-2015 National Geographic Society | Copyright © 2015-2024 National Geographic Partners, LLC. All rights reserved</p>
</div>
</footer>
<script src="discover.js"></script>
</body>
</html>