214 lines
11 KiB
PHP
214 lines
11 KiB
PHP
<body>
|
||
|
||
<div class="site-bubbles" aria-hidden="true">
|
||
<i style="--x:87%;--s:3px;--dur:30.3s;--delay:-14.4s;--drift:23px;--blur:0px;--op:0.35;--grow:1.28"></i>
|
||
<i style="--x:38%;--s:12px;--dur:19.5s;--delay:-22.2s;--drift:-9px;--blur:0.3px;--op:0.33;--grow:1.11"></i>
|
||
<i style="--x:14%;--s:8px;--dur:32.3s;--delay:-29.3s;--drift:37px;--blur:0px;--op:0.52;--grow:1.26"></i>
|
||
<i style="--x:15%;--s:11px;--dur:24.7s;--delay:-4.0s;--drift:-33px;--blur:0px;--op:0.36;--grow:1.07"></i>
|
||
<i style="--x:94%;--s:9px;--dur:29.8s;--delay:-18.1s;--drift:42px;--blur:0px;--op:0.41;--grow:1.17"></i>
|
||
<i style="--x:21%;--s:13px;--dur:33.2s;--delay:-23.0s;--drift:27px;--blur:0.5px;--op:0.47;--grow:1.23"></i>
|
||
<i style="--x:50%;--s:6px;--dur:19.4s;--delay:-11.2s;--drift:-29px;--blur:0.5px;--op:0.46;--grow:1.05"></i>
|
||
<i style="--x:59%;--s:10px;--dur:27.1s;--delay:-14.4s;--drift:22px;--blur:0.3px;--op:0.35;--grow:1.26"></i>
|
||
<i style="--x:24%;--s:3px;--dur:21.2s;--delay:-29.2s;--drift:6px;--blur:0.3px;--op:0.26;--grow:1.21"></i>
|
||
<i style="--x:34%;--s:5px;--dur:25.1s;--delay:-16.5s;--drift:-5px;--blur:0.8px;--op:0.28;--grow:1.15"></i>
|
||
<i style="--x:40%;--s:13px;--dur:30.0s;--delay:-27.7s;--drift:-3px;--blur:0.8px;--op:0.55;--grow:1.15"></i>
|
||
<i style="--x:60%;--s:4px;--dur:25.0s;--delay:-16.5s;--drift:-40px;--blur:0px;--op:0.37;--grow:1.11"></i>
|
||
<i style="--x:11%;--s:5px;--dur:19.9s;--delay:-21.4s;--drift:17px;--blur:0px;--op:0.29;--grow:1.16"></i>
|
||
<i style="--x:88%;--s:4px;--dur:24.3s;--delay:-1.6s;--drift:-23px;--blur:0px;--op:0.52;--grow:1.19"></i>
|
||
<i style="--x:38%;--s:13px;--dur:32.8s;--delay:-12.9s;--drift:33px;--blur:0px;--op:0.55;--grow:1.1"></i>
|
||
<i style="--x:66%;--s:8px;--dur:18.0s;--delay:-6.8s;--drift:41px;--blur:0px;--op:0.24;--grow:1.12"></i>
|
||
<i style="--x:60%;--s:11px;--dur:19.3s;--delay:-20.3s;--drift:23px;--blur:0px;--op:0.41;--grow:1.21"></i>
|
||
<i style="--x:95%;--s:7px;--dur:27.9s;--delay:-9.6s;--drift:-6px;--blur:0.8px;--op:0.39;--grow:1.15"></i>
|
||
<i style="--x:62%;--s:3px;--dur:31.8s;--delay:-23.3s;--drift:-37px;--blur:0.3px;--op:0.51;--grow:1.08"></i>
|
||
<i style="--x:76%;--s:4px;--dur:21.4s;--delay:-16.0s;--drift:6px;--blur:0.8px;--op:0.33;--grow:1.13"></i>
|
||
<i style="--x:57%;--s:8px;--dur:33.5s;--delay:-27.2s;--drift:42px;--blur:0.5px;--op:0.37;--grow:1.19"></i>
|
||
<i style="--x:47%;--s:4px;--dur:22.4s;--delay:-19.0s;--drift:33px;--blur:0.8px;--op:0.34;--grow:1.12"></i>
|
||
<i style="--x:36%;--s:4px;--dur:33.6s;--delay:-18.2s;--drift:-21px;--blur:0px;--op:0.38;--grow:1.21"></i>
|
||
<i style="--x:14%;--s:14px;--dur:27.1s;--delay:-27.3s;--drift:-38px;--blur:0.5px;--op:0.37;--grow:1.21"></i>
|
||
<i style="--x:18%;--s:12px;--dur:22.5s;--delay:-13.7s;--drift:27px;--blur:0px;--op:0.31;--grow:1.08"></i>
|
||
<i style="--x:38%;--s:4px;--dur:27.0s;--delay:-16.7s;--drift:-33px;--blur:0.8px;--op:0.37;--grow:1.18"></i>
|
||
<i style="--x:75%;--s:6px;--dur:23.0s;--delay:-6.4s;--drift:-12px;--blur:0px;--op:0.27;--grow:1.16"></i>
|
||
<i style="--x:72%;--s:6px;--dur:26.4s;--delay:-3.3s;--drift:-35px;--blur:0.5px;--op:0.51;--grow:1.15"></i>
|
||
<i style="--x:25%;--s:12px;--dur:18.1s;--delay:-26.2s;--drift:24px;--blur:0px;--op:0.39;--grow:1.27"></i>
|
||
<i style="--x:58%;--s:3px;--dur:25.9s;--delay:-29.2s;--drift:-14px;--blur:0.8px;--op:0.33;--grow:1.11"></i>
|
||
</div>
|
||
|
||
<header class="baikal-header" id="top">
|
||
|
||
|
||
|
||
<div class="baikal-nav-wrap">
|
||
<a aria-label="Иркутск" class="baikal-brand" href="#top">
|
||
<svg aria-hidden="true" class="brand-window" viewbox="0 0 42 42">
|
||
<path d="M9 35V15h24v20M13 35V19h16v16M21 19v16M13 27h16M7 15l14-10 14 10M11 13l4-5 3 3 3-6 3 6 3-3 4 5"></path>
|
||
</svg>
|
||
<span><b>ИРКУТСК</b><small>ГОРОД БОЛЬШИХ ИСТОРИЙ</small></span>
|
||
</a>
|
||
<nav aria-label="Навигация" class="baikal-nav">
|
||
<a href="#architecture">О городе</a>
|
||
<a href="#route">Маршруты</a>
|
||
<a href="#architecture">Достопримечательности</a>
|
||
<a href="#museums">Музеи</a>
|
||
<a href="#food">Рестораны</a>
|
||
<a href="#regional-food">Кухня Приангарья</a>
|
||
<a href="#contacts">Полезное</a>
|
||
</nav>
|
||
<div class="baikal-nav-actions">
|
||
<a aria-label="Карта" class="nav-circle" href="#route">⌖</a>
|
||
<a class="nav-save" href="#food">♡ <span>Сохранить</span></a>
|
||
</div>
|
||
</div>
|
||
<!-- Крупный резной наличник слева -->
|
||
|
||
<!-- Резные углы справа -->
|
||
|
||
<div class="hero-copy">
|
||
|
||
<h1>ИРКУТСК</h1>
|
||
<h2>ЧТО МЫ МОЖЕМ РАССКАЗАТЬ<br/>О ГОРОДЕ</h2>
|
||
<p>Памятка для гостей города: маршруты, архитектура, музеи, кухня и места, которые помогают почувствовать характер Иркутска.</p>
|
||
<div class="hero-actions">
|
||
<a class="hero-primary" href="#architecture">Погрузиться <b>↓</b></a>
|
||
</div>
|
||
</div>
|
||
<!-- Байкальские горы и лед -->
|
||
|
||
<!-- Полноширинная водная анимация. Контейнер равен ширине hero и не связан с наличником -->
|
||
|
||
|
||
<!-- Волны Байкала -->
|
||
|
||
|
||
<div class="water-animation-layer" aria-hidden="true">
|
||
|
||
<div class="hero-bubbles hero-bubbles-back">
|
||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||
</div>
|
||
|
||
|
||
<div class="free-fish fish-1 far">
|
||
<div class="free-fish-inner">
|
||
<div class="tail-bubbles"><i></i><i></i><i></i><i></i></div>
|
||
<svg viewBox="0 0 230 94" aria-hidden="true">
|
||
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<path class="fish-outline" d="M31 47C56 18 99 10 146 19c29 6 48 17 65 28-17 12-36 23-65 29-47 9-90 0-115-29Z"/>
|
||
<path class="fish-tail" d="M31 47 7 24l8 23-8 23 24-23Z"/>
|
||
<path class="fish-fin fish-fin-top" d="M92 22 111 4l12 20"/>
|
||
<path class="fish-fin fish-fin-bottom" d="m104 72 18 17 11-20"/>
|
||
<path d="M65 35c24 10 58 15 109 12M65 59c27-9 61-13 109-12"/>
|
||
<circle cx="177" cy="40" r="3.1"/>
|
||
<path d="M192 49c7 0 13-2 18-6"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="free-fish fish-2 mid">
|
||
<div class="free-fish-inner">
|
||
<div class="tail-bubbles"><i></i><i></i><i></i><i></i></div>
|
||
<svg viewBox="0 0 230 94" aria-hidden="true">
|
||
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<path class="fish-outline" d="M28 47c30-23 69-31 111-25 33 5 55 14 73 25-18 13-41 23-73 27-42 6-82-3-111-27Z"/>
|
||
<path class="fish-tail" d="M29 47 5 29l10 18L5 66l24-19Z"/>
|
||
<path class="fish-fin fish-fin-top" d="m103 25 15-19 15 21"/>
|
||
<path class="fish-fin fish-fin-bottom" d="m113 70 12 18 16-20"/>
|
||
<path d="M62 37c31 8 65 11 111 9M62 57c29-7 66-10 111-9"/>
|
||
<circle cx="181" cy="41" r="3.1"/>
|
||
<path d="M195 50c6 0 11-2 16-5"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="free-fish fish-3 near">
|
||
<div class="free-fish-inner">
|
||
<div class="tail-bubbles"><i></i><i></i><i></i><i></i></div>
|
||
<svg viewBox="0 0 230 94" aria-hidden="true">
|
||
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<path class="fish-outline" d="M30 47c22-30 62-40 112-28 30 7 51 17 69 28-17 12-40 23-69 28-48 9-88-1-112-28Z"/>
|
||
<path class="fish-tail" d="M31 47 9 20l5 27-5 27 22-27Z"/>
|
||
<path class="fish-fin fish-fin-top" d="m80 25 17-17 11 19"/>
|
||
<path class="fish-fin fish-fin-bottom" d="m92 69 14 18 12-21"/>
|
||
<path d="M58 32c30 12 67 17 117 14M58 61c30-10 66-14 117-14"/>
|
||
<circle cx="180" cy="39" r="3.1"/>
|
||
<path d="M194 48c7 1 12-1 18-5"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="free-fish fish-4 far">
|
||
<div class="free-fish-inner">
|
||
<div class="tail-bubbles"><i></i><i></i><i></i><i></i></div>
|
||
<svg viewBox="0 0 230 94" aria-hidden="true">
|
||
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<path class="fish-outline" d="M31 47C56 18 99 10 146 19c29 6 48 17 65 28-17 12-36 23-65 29-47 9-90 0-115-29Z"/>
|
||
<path class="fish-tail" d="M31 47 7 24l8 23-8 23 24-23Z"/>
|
||
<path class="fish-fin fish-fin-top" d="M92 22 111 4l12 20"/>
|
||
<path class="fish-fin fish-fin-bottom" d="m104 72 18 17 11-20"/>
|
||
<path d="M65 35c24 10 58 15 109 12M65 59c27-9 61-13 109-12"/>
|
||
<circle cx="177" cy="40" r="3.1"/>
|
||
<path d="M192 49c7 0 13-2 18-6"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="free-fish fish-5 mid">
|
||
<div class="free-fish-inner">
|
||
<div class="tail-bubbles"><i></i><i></i><i></i><i></i></div>
|
||
<svg viewBox="0 0 230 94" aria-hidden="true">
|
||
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<path class="fish-outline" d="M28 47c30-23 69-31 111-25 33 5 55 14 73 25-18 13-41 23-73 27-42 6-82-3-111-27Z"/>
|
||
<path class="fish-tail" d="M29 47 5 29l10 18L5 66l24-19Z"/>
|
||
<path class="fish-fin fish-fin-top" d="m103 25 15-19 15 21"/>
|
||
<path class="fish-fin fish-fin-bottom" d="m113 70 12 18 16-20"/>
|
||
<path d="M62 37c31 8 65 11 111 9M62 57c29-7 66-10 111-9"/>
|
||
<circle cx="181" cy="41" r="3.1"/>
|
||
<path d="M195 50c6 0 11-2 16-5"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="free-fish fish-6 near">
|
||
<div class="free-fish-inner">
|
||
<div class="tail-bubbles"><i></i><i></i><i></i><i></i></div>
|
||
<svg viewBox="0 0 230 94" aria-hidden="true">
|
||
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<path class="fish-outline" d="M31 47C56 18 99 10 146 19c29 6 48 17 65 28-17 12-36 23-65 29-47 9-90 0-115-29Z"/>
|
||
<path class="fish-tail" d="M31 47 7 24l8 23-8 23 24-23Z"/>
|
||
<path class="fish-fin fish-fin-top" d="M92 22 111 4l12 20"/>
|
||
<path class="fish-fin fish-fin-bottom" d="m104 72 18 17 11-20"/>
|
||
<path d="M65 35c24 10 58 15 109 12M65 59c27-9 61-13 109-12"/>
|
||
<circle cx="177" cy="40" r="3.1"/>
|
||
<path d="M192 49c7 0 13-2 18-6"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="hero-bubbles hero-bubbles-front">
|
||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="hero-transition-waves" aria-hidden="true">
|
||
<svg viewBox="0 0 1600 240" preserveAspectRatio="none">
|
||
<path class="wave-back" d="M0 66C180 22 310 116 474 82c184-38 270-76 452-24 184 52 331 64 674 0v182H0z"/>
|
||
<path class="wave-mid" d="M0 104C190 48 346 154 526 105c172-47 318-40 471 10 171 55 346 61 603-9v134H0z"/>
|
||
<path class="wave-front" d="M0 137C201 84 363 178 543 132c169-43 311-29 458 14 168 49 351 51 599-11v105H0z"/>
|
||
<path class="wave-blue" d="M0 85C183 39 316 131 481 92c179-43 279-68 452-18 182 53 329 63 667 1"/>
|
||
<path class="wave-gold" d="M0 113C198 59 346 160 525 110c170-47 313-38 466 10 169 53 346 60 609-8"/>
|
||
<path class="wave-gold" d="M0 145C208 96 365 183 545 138c166-42 308-27 454 14 170 48 349 49 601-12" opacity=".62"/>
|
||
<path class="wave-light" d="M0 188C192 151 352 221 541 190c173-28 313-15 467 15 178 35 354 29 592-16v51H0z"/>
|
||
</svg>
|
||
</div>
|
||
</header>
|
||
|