-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
127 lines (126 loc) · 8.42 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Snowleopard. Apex predator, vulnerable species</title>
<link rel="icon" type="image/x-icon" href="img/favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous" />
<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=Merriweather:wght@400;700&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
</head>
<body>
<nav class="w-100 bg-primary fixed-top p-0 shadow-sm">
<h6 class="text-center text-white p-1 m-0">China Daily Graphics</h6>
</nav>
<header>
<video playsinline loop autoplay muted class="d-md-none w-100">
<source src="assets/snowleo-topvideo-m.mp4" type="video/mp4" />
<source src="assets/snowleo-topvideo-m.webm" type="video/webm" />
</video>
<video playsinline loop autoplay muted class="d-none d-md-block w-100">
<source src="assets/snowleo-topvideo-d.mp4" type="video/mp4" />
<source src="assets/snowleo-topvideo-d.webm" type="video/webm" />
</video>
</header>
<main>
<div class="row py-4">
<div class="col-11 col-sm-10 col-md-9 col-lg-8 col-xl-7 col-xxl-6 mx-auto">
<p class="lead">Nature reserves are helping the big cat flourish in its core distribution areas across China. Efforts to protect snow leopards have yielded notable successes, as evidenced by frequent documentation of the animal’s activities.</p>
</div>
</div>
<div class="info" align="center">
<span class="info_l">
By Jorge Cortes | Li Hongyang
<br>China Daily Graphics
<br>Updated: 2023-11-09<br>
<a title="facebook" style="cursor:pointer; " target="_blank" shape="rect" href="https://www.facebook.com/sharer.php?title=A skill that ignites the imagination&u=https://www.chinadaily.com.cn/pdf/2023/snowleopard"><img src="https://www.chinadaily.com.cn/image_e/2020/facebook.png" height="17px" /></a>
<a title="twitter" style="cursor:pointer;" target="_blank" shape="rect" href="https://twitter.com/share?text=A skill that ignites the imagination&url=https://www.chinadaily.com.cn/pdf/2023/snowleopard"><img src="https://www.chinadaily.com.cn/image_e/2020/twitter.png" /></a>
<a title="linkedin" style="cursor:pointer;" target="_blank" shape="rect" href="http://www.linkedin.com/shareArticle?mini=true&title=A skill that ignites the imagination&url=https://www.chinadaily.com.cn/pdf/2023/snowleopard"><img src="https://www.chinadaily.com.cn/image_e/2020/linkedin.png" /></a>
<a title="More" class="more" style="cursor:pointer; " shape="rect"><img src="https://www.chinadaily.com.cn/image_e/2017/more_art.gif" /></a>
</span>
</div>
</br>
</br>
</br>
<div class="col-11 col-sm-10 col-md-9 col-lg-8 mx-auto">
<article class="container">
<div class="row">
<div class="col-11 col-sm-10 col-md-9 col-lg-8 mx-auto">
<p>The International Union for Conservation of Nature classifies the snow leopard as a “vulnerable” species. China is home to about 4,500 snow leopards, accounting for more than half the global population.</p>
<object data="img/vulnerable.svg" type="image/svg+xml" class="w-100"></object>
<h3 class="text-center fs-5 my-5">ANATOMY</h3>
<p>The snow leopard has a relatively small head, with a short, broad nose.</p>
<object data="img/size-tiger.svg" type="image/svg+xml" class="w-100"></object>
</div>
</article>
<p>
<article class="container">
<div class="row">
<div class="col-11 col-sm-10 col-md-9 col-lg-8 mx-auto">
<p>The snow leopard has a long, thick tail, which is basically the same length as its body.</p>
</div>
</article>
<article class="container-fluid">
<object data="img/main-leopard-m.svg" type="image/svg+xml" class="d-md-none w-100"></object>
<object data="img/main-leopard-d.svg" type="image/svg+xml" class="d-none d-md-block w-100"></object>
</article>
<p>
<article class="container">
<div class="row">
<div class="col-11 col-sm-10 col-md-9 col-lg-8 mx-auto">
<h3 class="text-center fs-5 my-5">LONG JUMP</h3>
<p>Their legs are powerful, meaning the snow leopard can jump as far as 15 meters.</p>
</div>
</div>
</article>
<article class="container">
<div class="row">
<div class="col-11 col-sm-10 col-md-9 col-lg-8 mx-auto">
<h3 class="text-center fs-5 my-5">GEOGRAPHICAL SPREAD</h3>
<p>China is the animal’s key habitat, comprising about 1.1 million square kilometers. The natural habitat is mountain chains (2,000 m to 5,000 m high).</p>
</div>
</article>
<article class="container-fluid">
<object data="img/snl-map-m.svg" type="image/svg+xml" class="d-md-none w-100"></object>
<object data="img/snl-map-d.svg" type="image/svg+xml" class="d-none d-md-block w-100"></object>
</article>
<article class="container">
<div class="row">
<div class="col-11 col-sm-10 col-md-9 col-lg-8 mx-auto">
<h3 class="text-center fs-5 my-5">PREY POPULATION CONTROL</h3>
<p>As apex predators in their own habitat, snow leopards regulate the size of their prey population through hunting, ensuring that lower species in the food chain are maintained at appropriate levels. This helps maintain a relative balance among species within the ecosystem.</p>
<object data="img/preys.svg" type="image/svg+xml" class="w-100"></object>
<p></p>
<h3 class="text-center fs-5 my-5">NOCTURNAL ADAPTATION</h3>
<p>Snow leopards are able to function normally during the hours of darkness, in contrast to their prey, which are mainly active during daylight hours. The snow leopard’s peak periods of activity are dawn and dusk.</p>
<object data="img/nocturnal.svg" type="image/svg+xml" class="w-100"></object>
</div>
</article>
<article class="container-fluid">
<object data="img/mountain-m.svg" type="image/svg+xml" class="d-md-none w-100"></object>
<object data="img/mountain-d.svg" type="image/svg+xml" class="d-none d-md-block w-100"></object>
</article>
</main>
<footer class="container">
<div class="row">
<div class="col-9 col-sm-8 col-md-7 col-lg-6 mx-auto mt-5 mb-3 small text-muted text-center">
<p>Sources: National Forestry and Grassland Administration / Nature.com / Snowleopard.org
<br>ChinaDaily 2023</a></p>
</div>
<div class="row">
<div class="row">
<p><div class="col-10 col-sm-9 col-md-8 col-lg-7 mx-auto mt-6 mb-3 medium text-muted text-center"></br>
<span class="emoji">👇</span>Open and download to print<span class="emoji">👇</span></p>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-12 mx-auto">
<a href="img/snowleopard-print-d.jpg" target="_blank"><img src="img/snowleopard-print-thumb.jpg" alt="Snowleopard China Daily infographic" class="w-100">
<div class="row"></a>
</div>
</div>
</div>
</footer>
</body>
</html>