-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathoutdoors_ua.html
492 lines (451 loc) · 28.8 KB
/
outdoors_ua.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
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
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
<!DOCTYPE html>
<html lang="uk">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/b37b8c0ad2.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link href="styles.css" rel="stylesheet">
<title>Гори</title>
</head>
<body>
<div class="lang-menu outdoors blurable">
<div><i class="fas fa-globe outdoors" id="lang-button"></i></div>
<div class="lang-drop-down outdoors">
<a id="lang" href="outdoors.html">English</a>
</div>
</div>
<header class="blurable" style="background-image: url(img/outdoors/background.jpg);">
<div class="container-fluid" style="color: #0c0e0c;">
<div class="row justify-content-center"><h1>МАНДРІВКИ ПРИРОДОЮ</h1></div>
<div class="row justify-content-center"><h3>Гори і таке інше</h3></div>
<div class="row justify-content-end">
<div class="col-6 col-sm-4"><p style="text-align: right; font-size: 1.15em; letter-spacing: 2px;"><cite>Краще гір можуть бути лиш гори, у яких ти іще не бував!</cite><br />Володимир Висоцький</p>
</div>
</div>
</div>
</header>
<main class="outdoors-svg">
<div class="sticky" id="nav-bar">
<div class="menu-btn outdoors">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="nav-drop-down" class="menu-down menu-up">
<a href="index_ua.html"><i class="fab fa-raspberry-pi outdoors"></i><span class="outdoors">Вступ</span></a>
<a href="hometown_ua.html"><i class="fas fa-home outdoors"></i><span class="outdoors">Дім</span></a>
<a href="outdoors_ua.html" id="current"><i class="fas fa-hiking outdoors"></i><span class="outdoors">Гори</span></a>
<a href="cities_ua.html"><i class="fas fa-city outdoors"></i><span class="outdoors">Міста</span></a>
</div>
</div>
<div class="container-fluid blurable" style="margin-top: -2.5rem;">
<div class="row align-items-center presentation">
<div class="col-lg-4" style="margin-top: 4.3rem;">
<div class="article-holder outdoors">
<div class="heading outdoors"><h2>Гори</h2></div>
<div class="col article outdoors">
<article>
<p>До першого походу у гори я малим було любив море. Але то було до... За шкільні/студентські роки ми з друзями кілька разів облазили Чорногори у Карпатах, двічі відкрили для себе Кримські гори і перлою мого альпінізму є підкорення Ельбрусу у Кавказьких горах (хоча це ще хто кого підкорив).</p>
<p>Карпати пронизані стародавніми гуцульськими штучками як то життєдайна барвистість, бородаті легенди та часом насуплена (а то і узагалі рокова) атмосфера. На згадку приходить одна історія пов'язана із високогірним озером Несамовите. За легендою, воно творить погоду у Чорногорах і вимагає до себе пошани. Якщо осквернити спокій озера, жбурлянувши камінюку або стрибнувши бомбочкою, - прийде повний капець у вигляді грози. Співпадіння чи ні, але саме це сталось на наших очах. Ми з повагою до спокою озера переводили подих на його березі, як набігла інша група туристів та голосно і з реготом скупались у озері. Згодом ми знов вийшли на хребет і побачили чорнезну хмарищу, яка поволі повзла в іншу від нас сторону, саме туди і прямували купальники. Я бував у Карпатах улітку, восени та взимку. Кожна пора року радикально переодягала гори: влітку вони теплі, зелені та квітнуть, осінні барви горять вогнем під вогкими хмарами, а зима хурделезна і безкомпромісна - справжній тест на витримку.</p>
<p>Кримські гори, навідміну, відчувались менш усамітненими, нас звідусіль оточували нагадування про цивілізацію. Інша їх знакова відмінність - це яйли. У крамському ландшафті зрідка можна побачити класичний гірський пік, радше плато. Близькість до моря придає горам надзвичайного південного шарму і здатна прикрасити будь-який похід: кожного разу після виснажливий кількох днів у горах ми спускались на кілька днів лінивого кемпінгу до води.</p>
<p>Кавказ для мене був просто нереальним. Важко було повірити, що таке місце існує, поки не відчув його на смак. Фото з того походу - то лиш мляві нагадування про істинну велич та безкрайню міць. Я був у складі експедиції і нашою метою була західна вершина Ельбрусу (5642м). Ми кілька днів підходили до підніжжя щоби мати час адаптуватись до перепаду висоти. На нашому шляху були кілометри каміння і снігу, та найстрашнішою видалась переправа через льодовик. Самий підйом на гору був крутим тестом на витривалість. Хоча Говерла у січні була технічно складною через вітер та мороз, Ельбрус видався дещо іншою перевіркою цілеспрямованості. Підйом на вершину зайняв дев'ять годин та іще чотири пішло на дорогу назад і кожна з них була того варта!</p>
</article>
</div>
</div>
</div>
<div class="col-lg-8 map-gal">
<div class="row tabs justify-content-end">
<button class="col-auto tablink1 outdoors default1" onclick="open1Tab(event, 'map-1')">Мапа</button>
<button class="col-auto tablink1 outdoors" onclick="open1Tab(event, 'gallery-1')">Галерея</button>
</div>
<div class="map-1 tab1content outdoors">
<iframe src="https://www.google.com/maps/d/embed?mid=1f8Ord4GkeY8zTA9sM05sEnn2fLDwE2oo&hl=en" width="100%" height="100%" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
</div>
<div class="gallery-1 tab1content outdoors">
<div id="carousel-1" class="carousel slide" data-ride="carousel" data-interval="10000">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/outdoors/cp-fromhoverla.jpg" alt="View from Hoverla">
<div class="carousel-caption d-none d-md-block">
<h5>Вид із Говерли</h5>
<p>Чорногори</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/outdoors/cp-view.jpg" alt="View on Chornohory">
<div class="carousel-caption d-none d-md-block">
<h5>Вид на Чорногори</h5>
<p>Невимоне відчуття безкінечних гір</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/outdoors/cp-view1.jpg" alt="View from Mount Turkul">
<div class="carousel-caption d-none d-md-block">
<h5>Вид з гори Туркул</h5>
<p>Внизу лежить легендарне Несамовите</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/outdoors/cp-brebeneskul.jpg" alt="Brebeneskul Lake">
<div class="carousel-caption d-none d-md-block">
<h5>Озеро Бребенескул</h5>
<p>Іще одне дивовижне високогірне дзеркало Карпат</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/outdoors/cp-camp.jpg" alt="Campside">
<div class="carousel-caption d-none d-md-block">
<h5>Табір</h5>
<p>На шляху до Говерли</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/outdoors/cp-wdima-hoverla.jpg" alt="View on Hoverla">
<div class="carousel-caption d-none d-md-block">
<h5>Ми з Дімою</h5>
<p>Перед підйомом на Говерлу (позаду)</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/outdoors/cp-jump.jpg" alt="Me and Dima jumping">
<div class="carousel-caption d-none d-md-block">
<h5>Танок гірських кіз</h5>
<p>Спускаємося з гір</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/outdoors/cp-ppl.jpg" alt="Group of hikers">
<div class="carousel-caption d-none d-md-block">
<h5>Наша команда</h5>
<p>Ніде так не відчуєш людину як пліч-о-пліч у поході</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/outdoors/cp-hoverla-winter.jpg" alt="Mountain covered in snow">
<div class="carousel-caption d-none d-md-block">
<h5>Говерла зимова</h5>
<p>Мабуть найскладніше сходження</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/outdoors/cr3.jpg" alt="Crimean Mountains">
<div class="carousel-caption d-none d-md-block">
<h5>Кримські гори</h5>
<p>Яйли</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/outdoors/cr2.jpg" alt="Mountain-side">
<div class="carousel-caption d-none d-md-block">
<h5>Біля Чорного моря</h5>
<p>Гори різко спадають до води</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/outdoors/cr-camp.jpg" alt="Campsite at the sea">
<div class="carousel-caption d-none d-md-block">
<h5>Морський табір</h5>
<p>Ліпшого відпочинку після виснажливого походу годі і шукати</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/outdoors/cr-night-camp.jpg" alt="Night fire">
<div class="carousel-caption d-none d-md-block">
<h5>Вечеря</h5>
<p>Найсмачніший супчик на підході під шепіт моря</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/outdoors/cc-view1.jpg" alt="Mountain view">
<div class="carousel-caption d-none d-md-block">
<h5>Кавказькі гори</h5>
<p>Вид на Головний Кавказький хребет</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/outdoors/cc-view3.jpg" alt="Mountain view">
<div class="carousel-caption d-none d-md-block">
<h5>Кавказ</h5>
<p>Головний Кавказький хребет</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/outdoors/cc-view.jpg" alt="Mountain view">
<div class="carousel-caption d-none d-md-block">
<h5>Кавказ</h5>
<p>Головний Кавказький хребет</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/outdoors/cc-view2.jpg" alt="Mountain view">
<div class="carousel-caption d-none d-md-block">
<h5>Головний Кавказький хребет</h5>
<p>Готуємось до переходу через льодовик</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/outdoors/cc-elbrus.jpg" alt="Elbrus">
<div class="carousel-caption d-none d-md-block">
<h5>Ельбрус</h5>
<p>Перед нами льодовик - пастка для недосвідченого альпініста</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/outdoors/cc-river.jpg" alt="Crossing a mountain river">
<div class="carousel-caption d-none d-md-block">
<h5>Перехід через гірську річку</h5>
<p>Не раджу робити цього вдома</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/outdoors/cc-flowers.jpg" alt="Mountain flowers">
<div class="carousel-caption d-none d-md-block">
<h5>Гірські ромашки</h5>
<p>Каміння, лід і проблиски надії</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-1" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid blurable" style="margin: 2rem 0 0 0; padding-bottom: 2rem;">
<div class="row align-items-center presentation">
<div class="col-lg-4" style="margin-top: 4.3rem;">
<div class="article-holder outdoors">
<div class="heading outdoors"><h2>Штати</h2></div>
<div class="col article outdoors">
<article>
<p>За кілька років, що я провів у Сполучених Штатах, природа продовжувала витягати мене на побачення. Для мене вибратись у ліс чи на річку - то найліпший спосіб віднайти внутрішній спокій та трохи відпочити від машин, бетону та галасу міста. Мої улюбленні місця навколо Піттсбурга - то тропа Лорел Хайлендз, річка Аллегені, Національний Ліс Аллегені та озеро Вулф Ран в окрузі Нобл, Огайо.</p>
<p>Ця частина Штатів багата на дивовижні краєвиди та різноманіття природи, небаченого в Україні. Тут є купа річок, потічків, пагорбів та лісів. Фауна вразила мене величезною кількістю орлів, що поважно виписують кола над річками-полями, та мільйони світлячків у Пеннсильванії - їхній батьківщині. Саме про них варто розказати окремо. Я ніколи раніше не бачив світлячків на власні очі, тому вони мене украй вразили іще в Піттсбурзі. Коли ідеш передвечірнім парком посеред них - то огортає відчуття, ніби ти у казці, і зара мають вийти гноми і принцеси з принцами. Але це був тільки початок... Ми з Абішейком якось пішли в ліс на південь від Піттсбурга по тропі Лорел Хайлендз. Вночі, коли відірвались від багаття, зрозуміли що нас оточують не десятки, навіть не тисячі - мільйони світлячків. Їх було море морезне і вони світились по всіх пагорбах лісу, ніби у документалці від ВВС чи щось накшталт. Це було справжнє диво, яке словами не передати, ми заворожені так і просиділи у лісі світлячків до ранку, огорнуті їх танком. Незабутньо!</p>
</article>
</div>
</div>
</div>
<div class="col-lg-8 map-gal order-last order-lg-first">
<div class="row tabs justify-content-end">
<button class="col-auto tablink2 outdoors default2" onclick="open2Tab(event, 'map-2')">Мапа</button>
<button class="col-auto tablink2 outdoors" onclick="open2Tab(event, 'gallery-2')">Галерея</button>
</div>
<div class="map-2 tab2content outdoors">
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1ohOiVpCH2JGkH9Gk9-GpuR9IZ5MzfdSh" width="100%" height="100%" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
</div>
<div class="gallery-2 tab2content outdoors">
<div id="carousel-2" class="carousel slide" data-ride="carousel" data-interval="10000">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/outdoors/pa-natalfor-view.jpg" alt="Allegheny National Forest at fall">
<div class="carousel-caption d-none d-md-block">
<h5>Національний Ліс Аллегені восени</h5>
<p>Вид з мосту Кінзуа</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/outdoors/pa-allegheny.jpg" alt="Allegheny River">
<div class="carousel-caption d-none d-md-block">
<h5>Річка Аллегені</h5>
<p>Спокійний заплив на каное на північ від Піттсбурга</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/outdoors/oh-wr.jpg" alt="Wolf Run Lake">
<div class="carousel-caption d-none d-md-block">
<h5>Озеро Вулф Ран</h5>
<p>Округ Нобл, Огайо</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/outdoors/oh-wr-fire.jpg" alt="Campfire at the lake">
<div class="carousel-caption d-none d-md-block">
<h5>Озеро Вулф Ран</h5>
<p>Багаття завше зігріває душу</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/outdoors/pa-sandy.jpg" alt="Sandy Creek">
<div class="carousel-caption d-none d-md-block">
<h5>Сенді Крік</h5>
<p>Ви часом не бачили піратів?</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/outdoors/pa-sandy-paddle.jpg" alt="Paddle board">
<div class="carousel-caption d-none d-md-block">
<h5>Сенді Крік</h5>
<p>Одного знайшов :)</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/outdoors/pa-natalfor-waterfall.jpg" alt="Waterfall">
<div class="carousel-caption d-none d-md-block">
<h5>Водоспад Бент Ран</h5>
<p>Національний Ліс Аллегені</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/outdoors/pa-natalfor-view1.jpg" alt="Forest at fall">
<div class="carousel-caption d-none d-md-block">
<h5>Національний Ліс Аллегені</h5>
<p>Листопад у листопаді</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/outdoors/pa-natalfor-stalker.jpg" alt="Forest at fall">
<div class="carousel-caption d-none d-md-block">
<h5>Національний Ліс Аллегені</h5>
<p>Ніби сцена із Сталкера Тарковського</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/outdoors/pa-natalfor-rocks.jpg" alt="Boulders">
<div class="carousel-caption d-none d-md-block">
<h5>Національний Ліс Аллегені</h5>
<p>Могутні камінюки по всьому лісу</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/outdoors/pa-natalfor-camp.jpg" alt="Campsite">
<div class="carousel-caption d-none d-md-block">
<h5>Національний Ліс Аллегені</h5>
<p>Табір під час соло походу</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/outdoors/pa-natalfor-bridge.jpg" alt="Bridge">
<div class="carousel-caption d-none d-md-block">
<h5>Національний Ліс Аллегені</h5>
<p>Свіже повітря, яскраві барви та звуки лісу...</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/outdoors/pa-lhht-shelter.jpg" alt="Shelter">
<div class="carousel-caption d-none d-md-block">
<h5>Тропа Лорел Хайлендз</h5>
<p>Найліпший спосіб заночувати в лісі!</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/outdoors/pa-lhht-cliff.jpg" alt="Cliff">
<div class="carousel-caption d-none d-md-block">
<h5>Тропа Лорел Хайлендз</h5>
<p>Насолоджуємось краєвидами з Абішейком</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel-2" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="blurable outdoors">
<div class="row justify-content-center" style="margin: 0;">
<div class="col-auto">Усі права захищено ©2019. Створено у Стамбулі<br />Підживлено Bootstrap.CSS</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
document.querySelector(".menu-btn > div").addEventListener("click", function(e) {
e.stopPropagation();
e.preventDefault();
});
document.querySelector(".menu-btn").addEventListener("click", menuBtnTransform);
document.querySelector(".menu-btn").addEventListener("click", dropDownMenu);
document.querySelector(".menu-btn").addEventListener("click", blur);
document.getElementById("lang-button").addEventListener("click", langMenu);
function langMenu () {
document.querySelector(".lang-drop-down").classList.toggle("down");
}
function menuBtnTransform() {
var x = document.getElementsByClassName("menu-btn");
for (var a = 0; a < x.length; a++) {
var b = x[a];
b.classList.toggle("change");
}
}
function dropDownMenu() {
document.getElementById("nav-drop-down").classList.toggle("menu-up");
}
window.onclick = function(event) {
if (!event.target.matches('.menu-btn')) {
var dropdown = document.getElementById("nav-drop-down");
if (!dropdown.classList.contains('menu-up')) {
dropdown.classList.add('menu-up');
}
document.querySelector(".menu-btn").classList.remove('change');
var deblur = document.getElementsByClassName("blurable");
for (var a = 0; a < deblur.length; a++) {
deblur[a].classList.remove("blur");
}
document.querySelector("main").classList.remove("blur-background");
}
if (!event.target.matches('#lang-button')) {
document.querySelector(".lang-drop-down").classList.remove("down");
}
}
function blur() {
var a = document.getElementsByClassName("blurable");
for (var b = 0; b < a.length; b++) {
a[b].classList.toggle("blur");
}
document.querySelector("main").classList.toggle("blur-background");
}
document.querySelector(".default1").click();
document.querySelector(".default2").click();
function open1Tab(evt, tabName) {
var i, tabcontent, tablink;
tabcontent = document.getElementsByClassName("tab1content");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablink = document.getElementsByClassName("tablink1");
for (i = 0; i < tablink.length; i++) {
tablink[i].className = tablink[i].className.replace(" active", "");
}
var k = document.getElementsByClassName(tabName);
for (var a = 0; a < k.length; a++) {
var b = k[a];
b.style.display = "block";
}
evt.currentTarget.className += " active";
}
function open2Tab(evt, tabName) {
var i, tabcontent, tablink;
tabcontent = document.getElementsByClassName("tab2content");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablink = document.getElementsByClassName("tablink2");
for (i = 0; i < tablink.length; i++) {
tablink[i].className = tablink[i].className.replace(" active", "");
}
var k = document.getElementsByClassName(tabName);
for (var a = 0; a < k.length; a++) {
var b = k[a];
b.style.display = "block";
}
evt.currentTarget.className += " active";
}
</script>
</body>
</html>