-
Notifications
You must be signed in to change notification settings - Fork 0
/
desert.html
295 lines (288 loc) · 21.7 KB
/
desert.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="András Laczkó">
<meta name="copyright" content="For educational purposes only">
<meta name="description" content="Some information about the desert biome">
<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=Oswald:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Biomes</title>
<link rel="icon" type="image/x-icon" href="pictures/favicon.png">
</head>
<body id="desert">
<header>
<nav class="move" id="menu">
<ul class="navigation">
<li><a href="index.html">HOME</a></li>
<li><a href="forest.html">Forest</a></li>
<li><a href="waters.html">Waters</a></li>
<li class="active"><a href="#titleAnchorOffset">Desert</a></li>
<li><a href="form.html">SUBSCRIBE</a></li>
</ul>
</nav>
<h1>BIOMES</h1>
<div id="hamburger"></div>
</header>
<a href="#contentsAnchorOffset"><div id="backToTop"></div></a>
<div id="titleAnchorOffset"></div>
<section id="title">
<h2>DESERT</h2>
</section>
<div id="contentsAnchorOffset"></div>
<section id="contents">
<p>Deserts <span id="span1"></span><br> of the world's <br><span id="span2"></span></p>
<div>
<h2>Table of contents:</h2>
<ul>
<li><a href="#typeAnchorOffset">types of deserts</a></li>
<li><a href="#inhabitantAnchorOffset">inhabitants</a></li>
</ul>
</div>
</section>
<div class="border border1"></div>
<div id="typeAnchorOffset"></div>
<section id="wrapper">
<h2 id="title1">Types of deserts</h2>
<div id="button1"></div>
<div class="progressContainer">
<div class="progress progress1"></div>
<div class="progress"></div>
<div class="progress progress3"></div>
<div class="progress progress4"></div>
</div>
<div id="button2"></div>
<div id="types">
<article class="type1">
<h3>Hot and Dry</h3>
<div class="text">
<p>
A Hot and Dry Desert is, as you can tell from the name, hot and dry. Most Hot and Dry Deserts don’t have very many plants. They do have some low down plants though. The only animals they have that can survive have the ability to burrow under ground. This is because they would not be able to live in the hot sun and heat. They only come out in the night when it is a little cooler.
A cold desert is a desert that has snow in the winter instead of just dropping a few degrees in temperature like they would in a Hot and Dry Desert. It never gets warm enough for plants to grow. Just maybe a few grasses and mosses. The animals in Cold Deserts also have to burrow but in this case to keep warm, not cool. That is why you might find some of the same animals here as you would in the Hot and Dry Deserts.
Deserts cover about one fifth of the Earth’s land surface. Most Hot and Dry Deserts are near the Tropic of Cancer or the Tropic of Capricorn. Cold Deserts are near the Arctic part of the world.
Hot and Dry Deserts temperature ranges from 20 to 25° C. The extreme maximum temperature for Hot Desert ranges from 43.5 to 49° C. Cold Deserts temperature in winter ranges from -2 to 4° C and in the summer 21 to 26° C a year
The precipitation in Hot and Dry Deserts and the precipitation in Cold Deserts is different. Hot and Dry Deserts usually have very little rainfall and/or concentrated rainfall in short periods between long rainless periods. This averages out to under 15 cm a year. Cold Deserts usually have lots of snow. They also have rain around spring. This averages out to 15 – 26 cm a year.
</p>
<p>
Hot and Dry Deserts are warm throughout the fall and spring seasons and very hot during the summer. the winters usually have very little if any rainfall. Cold Deserts have quite a bit of snow during winter. The summer and the beginning of the spring are barely warm enough for a few lichens, grasses and mosses to grow.
Hot and Dry Deserts vegetation is very rare. Plants are almost all ground-hugging shrubs and short woody trees. All of the leaves are replete (packed with nutrients). Some examples of these kinds of plant are Turpentine Bush, Prickly Pears, and Brittle Bush. For all of these plants to survive they have to have adaptations. Some of the adaptations in this case are the ability to store water for long periods of time and the ability to stand the hot weather.
<br><br>
<a target="blank" href="https://rashidfaridi.com/2008/06/16/hot-and-dry-desert-biome/">(source: Rashid's Blog)</a>
</p>
</div>
<img class="alone" src="./pictures/desert/hot_and_dry.jpg" alt="hot and dry desert">
</article>
<div class="type2">
<article>
<h3>Semi-arid</h3>
<div class="text">
<p>
Major semiarid deserts include the sagebrush of Utah, Montana and Great Basin. They also include the Nearctic realm (North America, Newfoundland, Greenland, Russia, Europe and northern Asia). The summers in a Semiarid Desert are usually long and dry, and the winters normally have little rainfall. Summer temperatures are between 21-27°C on average, normally not going above 38° C. During the evenings, temperatures are cool, around 10° C. Cool nights help plants and animals by reducing moisture loss from transpiration, sweating and breathing. Just like a regular hot desert, rainfall in a Semiarid desert is very low, 2-4 cm yearly.
</p>
<p>
Plants in a semiarid desert all tend to be spiny. This provides a natural protection in the desert. The large numbers of spines shade the surface enough to significantly reduce transpiration. The same may be true of the hairs on the woolly desert plants. Many plants have silvery or glossy leaves, allowing them to reflect more radiant energy. These plants often have an unfavorable odor or taste. Semiarid plants include: Creosote bush, bur sage (Franseria dumosa or F. deltoidea), white thorn, cat claw, mesquite, brittle bushes (Encelia farinosa), lyciums, and jujube.
The semiarid desert has many animals, such as kangaroo rats, rabbits, skunks, grasshoppers, lizards, snakes, and burrowing owls. During the day, insects move around twigs to stay on the shady side. jack rabbits follow the moving shadow of a cactus or shrub. Naturally, many animals find protection in underground burrows where they are insulated from heat.
<br><br>
<a target="blank" href="https://ajgarci5desert.weebly.com/semiarid-desert.html">(source: Desert Biome)</a>
</p>
</div>
<img class="alone" src="./pictures/desert/semi_arid.jpg" alt="semi arid desert">
</article>
</div>
<div class="type3">
<article>
<h3>Coastal</h3>
<div class="text">
<p>
As the name implies, coastal deserts are deserts stretching along the sea coast. They are one of the four major types of deserts. Their nearness to the sea gives them unique properties not found in deserts elsewhere. Such deserts are usually found on the western edges of continents with cold ocean currents running parallel to the coast. As the cold currents cool the air above, the air is unable to hold moisture and most of it falls as rain on the sea before it reaches land. Thus, the land alongside the coast with cold ocean currents receives little or no precipitation and turns into a desert. Coastal deserts have moderately brief winter seasons whose temperatures are 5°C and below, with the lowest recorded temperature being -4°C. The summer temperatures range from 13°C to 24°C, with 35°C being the highest ever experienced in the coastal deserts. An average of 13cm of rainfall is known to occur annually. Despite being near water sources, these deserts remain notably dry because most precipitation occurs in the ocean with negligible amounts of moisture reaching land. These deserts have more porous soils characterized by a moderate texture and salt content. Another unique feature of coastal deserts is the formation of heavy fogs in winter. Upwelling cold currents lead to the formation of such fogs often blanketing the desert and blocking solar rays from reaching the sands.
</p>
<p>
The plants growing in coastal deserts have thick fleshy leaves and stems for storing nutrients and extensive root systems for tapping whatever moisture is available. These adaptations help the plants survive the harsh coastal desert climate. Black sage, salt bushes, and rice grass are some of the plants growing in coastal deserts. Coastal deserts support mammals like coyotes, gemsbok, Grant's golden mole, etc. Many species of reptiles and lizards are found including venomous snakes like Peringuey's adder. It also hosts birds like golden eagles, Karoo bustard, great horned owls, and others. Amphibians and invertebrate species also live in these deserts. The fauna of coastal deserts exhibit several adaptations to survive in the relatively harsher desert conditions. For example, several species of birds and reptiles living here lay eggs that remain dormant until conditions are more bearable.
<br><br>
<a target="blank" href="https://www.worldatlas.com/articles/what-and-where-are-coastal-deserts.html">(source: WorldAtlas)</a>
</p>
</div>
<img class="alone" src="./pictures/desert/coastal.jpg" alt="coastal desert">
</article>
</div>
<div class="type4">
<article>
<h3>Cold</h3>
<div class="text">
<p>
Cold deserts are characterized by cold winters with snowfall and high overall rainfall throughout the winter and occasionally over the summer. They occur in the Antarctic, Greenland and the Nearctic realm. Cold deserts have short, moist, and quite warm summers with fairly long, cold winters. The average winter is -2 to 4° C and the average summer is 21-26° C. In the winter, a cold desert receives quite a bit of snow. The average yearly precipitation ranges from 15-26 cm. Yearly precipitation has reached a maximum of 46 cm and a minimum of 9 cm. Spring rainfall usually falls heaviest in April or May. In some areas, rainfall can also be heavy in autumn.
</p>
<p>
Plant heights vary between 15 cm and 122 cm, depending on the area. Most plants shed their leaves and have spiny leaves. Ground cover, like lichens are found to either cover most of the ground, or be widely scattered. Plants found in a cold desert include grasses, shadscale and camel's thorn. Common cold desert animals are jack rabbits, kangaroo rats, kangaroo mice, pocket mice, grasshopper mice, and antelope ground squirrels. In some areas, population density of these animals can range from 14-41 individuals per hectare. Animals like the badger, kit fox, coyote, and all animals except jack rabbits are burrowers, as in they live in a small hole or tunnel that they dug in the winter. Having grown a thick fur coat, deer are found in cold deserts only in the winter. They migrate in the summer, as they have shed their fur coat. Gazelles, jack rabbits, wolves, viper snakes, and lizards are few examples of animals who are active in the early morning but seek shelter during the hottest part of the day, either in burrows or in the shade of plants.
<br><br>
<a target="blank" href="https://ajgarci5desert.weebly.com/cold-desert.html">(source: Desert Biome)</a>
</p>
</div>
<img class="alone" src="./pictures/desert/cold.jpg" alt="cold desert">
</article>
</div>
</div>
</section>
<div class="border border2"></div>
<div id="inhabitantAnchorOffset"></div>
<section id="inhabitants">
<h3>Typical inhabitants</h3>
<div id="formContainer">
<p>Forest type:</p>
<form class="filter">
<input type="checkbox" name="variant" id="allType" value="all" checked>
<label for="allType">All</label>
<input type="checkbox" name="variant" id="variant1" value="variant1">
<label for="variant1">Hot and Dry</label>
<input type="checkbox" name="variant" id="variant2" value="variant2">
<label for="variant2" id="variant2Label">Semi-arid</label>
<input type="checkbox" name="variant" id="variant3" value="variant3">
<label for="variant3">Coastal</label>
<input type="checkbox" name="variant" id="variant4" value="variant4">
<label for="variant4">Cold</label>
</form>
<p>Inhabitant:</p>
<form class="filter">
<input type="checkbox" id="allInhabitant" value="all" checked>
<label for="allInhabitant">All</label>
<input type="checkbox" id="animalInhabitant" value="animal">
<label for="animalInhabitant">Animal</label>
<input type="checkbox" id="plantInhabitant" value="plant">
<label for="plantInhabitant">Plant</label>
</form>
</div>
<div id="cardWrapper">
<div id="cardContainer">
<div class="variant1 animal card visible">
<figure>
<figcaption>Rattlesnake</figcaption>
<p>hot and dry</p>
<img src="./pictures/desert/rattlesnake.jpg" alt="rattlesnake">
<a target="blank" href="https://en.wikipedia.org/wiki/rattlesnake" class="more">Learn more</a>
</figure>
</div>
<div class="variant1 animal card visible">
<figure>
<figcaption>Camel</figcaption>
<p>hot and dry</p>
<img src="./pictures/desert/camel.jpg" alt="camel">
<a target="blank" href="https://en.wikipedia.org/wiki/camel" class="more">Learn more</a>
</figure>
</div>
<div class="variant1 plant card visible">
<figure>
<figcaption>Yucca</figcaption>
<p>hot and dry</p>
<img src="./pictures/desert/yucca.jpg" alt="yucca">
<a target="blank" href="https://en.wikipedia.org/wiki/yucca" class="more">Learn more</a>
</figure>
</div>
<div class="variant1 plant card visible">
<figure>
<figcaption>Ephedra</figcaption>
<p>hot and dry</p>
<img src="./pictures/desert/ephedra.jpg" alt="ephedra">
<a target="blank" href="https://en.wikipedia.org/wiki/Ephedra_(plant)" class="more">Learn more</a>
</figure>
</div>
<div class="variant2 animal card visible">
<figure>
<figcaption>Kangaroo rat</figcaption>
<p>semi-arid</p>
<img src="./pictures/desert/kangaroo_rat.jpg" alt="kangaroo rat">
<a target="blank" href="https://en.wikipedia.org/wiki/kangaroo_rat" class="more">Learn more</a>
</figure>
</div>
<div class="variant2 animal card visible">
<figure>
<figcaption>Burrowing owl</figcaption>
<p>semi-arid</p>
<img src="./pictures/desert/burrowing_owl.jpg" alt="burrowing owl">
<a target="blank" href="https://en.wikipedia.org/wiki/burrowing_owl" class="more">Learn more</a>
</figure>
</div>
<div class="variant2 plant card visible">
<figure>
<figcaption>Cactus</figcaption>
<p>semi-arid</p>
<img src="./pictures/desert/cactus.jpg" alt="cactus">
<a target="blank" href="https://en.wikipedia.org/wiki/cactus" class="more">Learn more</a>
</figure>
</div>
<div class="variant2 plant card visible">
<figure>
<figcaption>Baobab</figcaption>
<p>semi-arid</p>
<img src="./pictures/desert/baobab.jpg" alt="baobab">
<a target="blank" href="https://en.wikipedia.org/wiki/baobab" class="more">Learn more</a>
</figure>
</div>
<div class="variant3 animal card visible">
<figure>
<figcaption>Great horned owl</figcaption>
<p>coastal</p>
<img src="./pictures/desert/great_horned_owl.jpg" alt="great horned owl">
<a target="blank" href="https://en.wikipedia.org/wiki/great_horned_owl" class="more">Learn more</a>
</figure>
</div>
<div class="variant3 animal card visible">
<figure>
<figcaption>Bobcat</figcaption>
<p>coastal</p>
<img src="./pictures/desert/bobcat.jpg" alt="bobcat">
<a target="blank" href="https://en.wikipedia.org/wiki/bobcat.jpg" class="more">Learn more</a>
</figure>
</div>
<div class="variant3 plant card visible">
<figure>
<figcaption>Succulent</figcaption>
<p>coastal</p>
<img src="./pictures/desert/succulent.jpg" alt="succulent">
<a target="blank" href="https://en.wikipedia.org/wiki/succulent" class="more">Learn more</a>
</figure>
</div>
<div class="variant4 animal card visible">
<figure>
<figcaption>Llama</figcaption>
<p>cold</p>
<img src="./pictures/desert/llama.jpg" alt="llama">
<a target="blank" href="https://en.wikipedia.org/wiki/llama" class="more">Learn more</a>
</figure>
</div>
<div class="variant4 animal card visible">
<figure>
<figcaption>Bison</figcaption>
<p>cold</p>
<img src="./pictures/desert/bison.jpg" alt="bison">
<a target="blank" href="https://en.wikipedia.org/wiki/bison" class="more">Learn more</a>
</figure>
</div>
<div class="variant4 plant card visible">
<figure>
<figcaption>Shrubs and Bushes</figcaption>
<p>cold</p>
<img src="./pictures/desert/shrubs_and_bushes.jpg" alt="shrubs and bushes">
<a target="blank" href="https://en.wikipedia.org/wiki/shrub" class="more">Learn more</a>
</figure>
</div>
</div>
</div>
</section>
<footer>
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="forest.html">Forest</a></li>
<li><a href="waters.html">Waters</a></li>
<li><a href="#titleAnchorOffset">Desert</a></li>
<li><a href="form.html">SUBSCRIBE</a></li>
</ul>
<p>© 2021 András Laczkó</p>
<div id="attribution">Icons made by <a href="https://www.flaticon.com/authors/freepik" target="blank" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
</footer>
<script src="app.js" defer></script>
</body>
</html>