mirror of
https://github.com/pvlnes/homelab.git
synced 2026-06-03 19:33:50 +00:00
495 lines
26 KiB
HTML
495 lines
26 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Александр и Юлия — 22 августа 2026</title>
|
||
<link rel="stylesheet" href="style.css" />
|
||
<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=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Nunito:wght@400;600;700&display=swap" rel="stylesheet" />
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ========== НАВИГАЦИЯ ========== -->
|
||
<nav id="navbar">
|
||
<div class="nav-inner">
|
||
<a href="#hero" class="nav-logo">А & Ю</a>
|
||
<button class="burger" id="burger" aria-label="Меню">☰</button>
|
||
<ul class="nav-links" id="nav-links">
|
||
<li><a href="#video">Видео</a></li>
|
||
<li><a href="#gallery">Галерея</a></li>
|
||
<li><a href="#stats">История</a></li>
|
||
<li><a href="#venue">Место</a></li>
|
||
<li><a href="#rsvp">Анкета</a></li>
|
||
<li><a href="#faq">FAQ</a></li>
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- ========== ГЕРОЙ ========== -->
|
||
<section id="hero">
|
||
<div class="confetti-wrap" aria-hidden="true" id="confetti"></div>
|
||
<div class="hero-content">
|
||
<p class="hero-pre">Приглашаем вас на свадьбу</p>
|
||
<h1 class="hero-names">Александр<span class="amp">&</span>Юлия</h1>
|
||
<p class="hero-date">22 августа 2026 16:00</p>
|
||
<div class="countdown" id="countdown">
|
||
<div class="countdown-block">
|
||
<span class="cd-num" id="cd-days">--</span>
|
||
<span class="cd-label">дней</span>
|
||
</div>
|
||
<div class="countdown-block">
|
||
<span class="cd-num" id="cd-hours">--</span>
|
||
<span class="cd-label">часов</span>
|
||
</div>
|
||
<div class="countdown-block">
|
||
<span class="cd-num" id="cd-minutes">--</span>
|
||
<span class="cd-label">минут</span>
|
||
</div>
|
||
<div class="countdown-block">
|
||
<span class="cd-num" id="cd-seconds">--</span>
|
||
<span class="cd-label">секунд</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="hero-deco hero-deco--left" aria-hidden="true">🌸</div>
|
||
<div class="hero-deco hero-deco--right" aria-hidden="true">🌼</div>
|
||
</section>
|
||
|
||
<!-- ========== ВИДЕОПРИГЛАШЕНИЕ ========== -->
|
||
<section id="video" class="section section--alt">
|
||
<div class="container">
|
||
<h2 class="section-title">Видеоприглашение</h2>
|
||
<p class="section-sub">Александр и Юлия приглашают вас лично</p>
|
||
<div class="video-wrap">
|
||
<video
|
||
class="invite-video"
|
||
poster="poster.jpg"
|
||
controls
|
||
preload="none"
|
||
playsinline
|
||
>
|
||
<source src="invitation.mov" type="video/mp4" />
|
||
<source src="invitation.mov" type="video/quicktime" />
|
||
<p>Ваш браузер не поддерживает воспроизведение видео. <a href="invitation.mov">Скачать видео</a>.</p>
|
||
</video>
|
||
</div>
|
||
<div class="video-btn-wrap">
|
||
<a href="#rsvp" class="btn btn-primary">Заполнить анкету</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ========== ГАЛЕРЕЯ ========== -->
|
||
<section id="gallery" class="section section--alt">
|
||
<div class="container">
|
||
<h2 class="section-title">Галерея</h2>
|
||
<p class="section-sub">Вдруг вы забыли, как мы выглядим</p>
|
||
<div class="gallery-grid">
|
||
<button class="gallery-item" type="button" data-index="0" aria-label="Открыть фото 1">
|
||
<img src="photos/photo1.jpg" alt="Александр и Юлия" loading="lazy">
|
||
</button>
|
||
<button class="gallery-item" type="button" data-index="1" aria-label="Открыть фото 2">
|
||
<img src="photos/photo2.jpg" alt="Александр и Юлия с соком" loading="lazy">
|
||
</button>
|
||
<button class="gallery-item" type="button" data-index="2" aria-label="Открыть фото 3">
|
||
<img src="photos/photo3.jpg" alt="Александр и Юлия в машине" loading="lazy">
|
||
</button>
|
||
<button class="gallery-item" type="button" data-index="3" aria-label="Открыть фото 4">
|
||
<img src="photos/photo4.jpg" alt="Александр и Юлия в салоне" loading="lazy">
|
||
</button>
|
||
<button class="gallery-item" type="button" data-index="4" aria-label="Открыть фото 5">
|
||
<img src="photos/photo5.jpg" alt="Александр и Юлия на турнике" loading="lazy">
|
||
</button>
|
||
<button class="gallery-item" type="button" data-index="5" aria-label="Открыть фото 6">
|
||
<img src="photos/photo6.jpg" alt="Александр и Юлия у машины" loading="lazy">
|
||
</button>
|
||
<button class="gallery-item" type="button" data-index="6" aria-label="Открыть фото 7">
|
||
<img src="photos/photo7.jpg" alt="Александр и Юлия на качелях" loading="lazy">
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ========== ИСТОРИЯ В ЦИФРАХ ========== -->
|
||
<section id="stats" class="section">
|
||
<div class="container">
|
||
<h2 class="section-title">8 лет отношений</h2>
|
||
<p class="section-sub">Но вам мы покажем преимущественно последние 4 года переписки</p>
|
||
|
||
<!-- Ключевые цифры -->
|
||
<div class="stats-grid">
|
||
<div class="stat-card">
|
||
<span class="stat-value">46 572</span>
|
||
<span class="stat-label">сообщений за 7 лет</span>
|
||
</div>
|
||
<div class="stat-card">
|
||
<span class="stat-value">38×</span>
|
||
<span class="stat-label">рост переписки в 2022</span>
|
||
</div>
|
||
<div class="stat-card">
|
||
<span class="stat-value">618</span>
|
||
<span class="stat-label">сердечных эмодзи</span>
|
||
</div>
|
||
<div class="stat-card">
|
||
<span class="stat-value">42</span>
|
||
<span class="stat-label">раза написали «люблю»</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Кто пишет больше -->
|
||
<div class="stats-who">
|
||
<div class="stats-who-labels">
|
||
<span class="stats-who-name who-alex">Александр — 51.8%</span>
|
||
<span class="stats-who-name who-yulia">Юля — 48.2%</span>
|
||
</div>
|
||
<div class="stats-usage-bar">
|
||
<div class="usage-seg usage-alex" style="width:51.8%"></div>
|
||
<div class="usage-seg usage-yulia" style="width:48.2%"></div>
|
||
</div>
|
||
<p class="stats-note">Разрыв — 1 688 сообщений за 7 лет. Почти идеальный баланс.</p>
|
||
</div>
|
||
|
||
<!-- График по годам -->
|
||
<h3 class="stats-chart-title">Сообщений по годам</h3>
|
||
<div class="stats-chart-wrap">
|
||
<svg class="stats-chart" viewBox="0 0 760 240" preserveAspectRatio="xMidYMid meet" aria-label="Активность по годам">
|
||
<!-- Горизонтальные линии сетки -->
|
||
<line x1="48" y1="20" x2="748" y2="20" stroke="currentColor" stroke-opacity=".1" stroke-width="1"/>
|
||
<line x1="48" y1="70" x2="748" y2="70" stroke="currentColor" stroke-opacity=".1" stroke-width="1"/>
|
||
<line x1="48" y1="120" x2="748" y2="120" stroke="currentColor" stroke-opacity=".1" stroke-width="1"/>
|
||
<line x1="48" y1="170" x2="748" y2="170" stroke="currentColor" stroke-opacity=".1" stroke-width="1"/>
|
||
<line x1="48" y1="210" x2="748" y2="210" stroke="currentColor" stroke-opacity=".15" stroke-width="1"/>
|
||
<!-- Подписи оси Y -->
|
||
<text x="42" y="24" text-anchor="end" class="chart-label">12К</text>
|
||
<text x="42" y="74" text-anchor="end" class="chart-label">9К</text>
|
||
<text x="42" y="124" text-anchor="end" class="chart-label">6К</text>
|
||
<text x="42" y="174" text-anchor="end" class="chart-label">3К</text>
|
||
<text x="42" y="214" text-anchor="end" class="chart-label">0</text>
|
||
|
||
<!-- Данные: 2019(307), 2020(215), 2021(205), 2022(7902), 2023(10774), 2024(9542), 2025(11639), 2026*(6093) -->
|
||
<!-- Масштаб: 12000 → 190px (y базовая = 210) -->
|
||
<!-- Ширина группы: (748-48)/8 = 87.5, bar width = 34, gap между alex/yulia = 2 -->
|
||
|
||
<!-- 2019: alex=159(2.5px), yulia=148(2.3px) -->
|
||
<rect x="62" y="207.5" width="34" height="2.5" fill="var(--blue-bar)" rx="2"/>
|
||
<rect x="62" y="210" width="34" height="0" fill="var(--purple-bar)" rx="0"/>
|
||
<g>
|
||
<rect x="62" y="207.5" width="34" height="2.5" fill="var(--blue-bar)" rx="2" class="bar-alex"/>
|
||
<rect x="62" y="205.1" width="34" height="2.3" fill="var(--purple-bar)" rx="2" class="bar-yulia"/>
|
||
</g>
|
||
<text x="79" y="228" text-anchor="middle" class="chart-label">2019</text>
|
||
|
||
<!-- 2020: 215 → 3.4px -->
|
||
<g>
|
||
<rect x="149" y="208.2" width="34" height="1.8" fill="var(--blue-bar)" rx="2" class="bar-alex"/>
|
||
<rect x="149" y="206.5" width="34" height="1.6" fill="var(--purple-bar)" rx="2" class="bar-yulia"/>
|
||
</g>
|
||
<text x="166" y="228" text-anchor="middle" class="chart-label">2020</text>
|
||
|
||
<!-- 2021: 205 → 3.2px -->
|
||
<g>
|
||
<rect x="236" y="208.3" width="34" height="1.7" fill="var(--blue-bar)" rx="2" class="bar-alex"/>
|
||
<rect x="236" y="206.7" width="34" height="1.6" fill="var(--purple-bar)" rx="2" class="bar-yulia"/>
|
||
</g>
|
||
<text x="253" y="228" text-anchor="middle" class="chart-label">2021</text>
|
||
|
||
<!-- 2022: 7902 → 125.2px. alex=4093(64.8), yulia=3809(60.3) -->
|
||
<g>
|
||
<rect x="323" y="145.2" width="34" height="64.8" fill="var(--blue-bar)" rx="2" class="bar-alex"/>
|
||
<rect x="323" y="84.9" width="34" height="60.3" fill="var(--purple-bar)" rx="2" class="bar-yulia"/>
|
||
</g>
|
||
<text x="340" y="228" text-anchor="middle" class="chart-label">2022</text>
|
||
|
||
<!-- 2023: 10774 → 170.6px. alex=5581(88.4), yulia=5193(82.2) -->
|
||
<g>
|
||
<rect x="410" y="121.6" width="34" height="88.4" fill="var(--blue-bar)" rx="2" class="bar-alex"/>
|
||
<rect x="410" y="39.4" width="34" height="82.2" fill="var(--purple-bar)" rx="2" class="bar-yulia"/>
|
||
</g>
|
||
<text x="427" y="228" text-anchor="middle" class="chart-label">2023</text>
|
||
|
||
<!-- 2024: 9542 → 151.1px. alex=4943(78.3), yulia=4599(72.8) -->
|
||
<g>
|
||
<rect x="497" y="131.7" width="34" height="78.3" fill="var(--blue-bar)" rx="2" class="bar-alex"/>
|
||
<rect x="497" y="58.9" width="34" height="72.8" fill="var(--purple-bar)" rx="2" class="bar-yulia"/>
|
||
</g>
|
||
<text x="514" y="228" text-anchor="middle" class="chart-label">2024</text>
|
||
|
||
<!-- 2025: 11639 → 184.3px. alex=6029(95.5), yulia=5610(88.8) -->
|
||
<g>
|
||
<rect x="584" y="114.5" width="34" height="95.5" fill="var(--blue-bar)" rx="2" class="bar-alex"/>
|
||
<rect x="584" y="25.7" width="34" height="88.8" fill="var(--purple-bar)" rx="2" class="bar-yulia"/>
|
||
</g>
|
||
<text x="601" y="228" text-anchor="middle" class="chart-label">2025</text>
|
||
|
||
<!-- 2026*: 6093 → 96.5px. alex=3156(50.0), yulia=2937(46.5) -->
|
||
<g>
|
||
<rect x="671" y="160.0" width="34" height="50.0" fill="var(--blue-bar)" rx="2" class="bar-alex"/>
|
||
<rect x="671" y="113.5" width="34" height="46.5" fill="var(--purple-bar)" rx="2" class="bar-yulia"/>
|
||
</g>
|
||
<text x="688" y="228" text-anchor="middle" class="chart-label">2026*</text>
|
||
</svg>
|
||
|
||
<!-- Легенда -->
|
||
<div class="chart-legend">
|
||
<span class="legend-dot legend-alex"></span><span>Александр</span>
|
||
<span class="legend-dot legend-yulia"></span><span>Юля</span>
|
||
</div>
|
||
<p class="stats-note">* 2026 — данные за январь–май. В 2022 переписка выросла в 38 раз.</p>
|
||
</div>
|
||
|
||
<!-- Два столбца: медиа + слова -->
|
||
<div class="stats-two-col">
|
||
<div class="stats-col">
|
||
<h3 class="stats-col-title">Что отправляли</h3>
|
||
<div class="stats-bars">
|
||
<div class="stats-bar-row">
|
||
<span class="stats-bar-label">Фотографии</span>
|
||
<div class="stats-bar-track"><div class="stats-bar-fill" style="width:100%">2 267</div></div>
|
||
</div>
|
||
<div class="stats-bar-row">
|
||
<span class="stats-bar-label">Стикеры</span>
|
||
<div class="stats-bar-track"><div class="stats-bar-fill" style="width:52.3%">1 185</div></div>
|
||
</div>
|
||
<div class="stats-bar-row">
|
||
<span class="stats-bar-label">Видео</span>
|
||
<div class="stats-bar-track"><div class="stats-bar-fill" style="width:9.9%">225</div></div>
|
||
</div>
|
||
<div class="stats-bar-row">
|
||
<span class="stats-bar-label">Голосовые</span>
|
||
<div class="stats-bar-track"><div class="stats-bar-fill" style="width:3.1%">70</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stats-col">
|
||
<h3 class="stats-col-title">Популярные слова</h3>
|
||
<div class="stats-bars">
|
||
<div class="stats-bar-row">
|
||
<span class="stats-bar-label">Ок / Хорошо</span>
|
||
<div class="stats-bar-track"><div class="stats-bar-fill stats-bar-fill--alt" style="width:100%">2 076</div></div>
|
||
</div>
|
||
<div class="stats-bar-row">
|
||
<span class="stats-bar-label">Смех (ахаха…)</span>
|
||
<div class="stats-bar-track"><div class="stats-bar-fill stats-bar-fill--alt" style="width:92.9%">1 928</div></div>
|
||
</div>
|
||
<div class="stats-bar-row">
|
||
<span class="stats-bar-label">Доброй ночи…</span>
|
||
<div class="stats-bar-track"><div class="stats-bar-fill stats-bar-fill--alt" style="width:19.0%">394</div></div>
|
||
</div>
|
||
<div class="stats-bar-row">
|
||
<span class="stats-bar-label">«Люблю»</span>
|
||
<div class="stats-bar-track"><div class="stats-bar-fill stats-bar-fill--alt" style="width:2.0%">42</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Нецензурная лексика -->
|
||
<div class="swear-block">
|
||
<h3 class="stats-chart-title" style="margin-bottom:1rem">🤬 Нецензурная лексика</h3>
|
||
<div class="swear-total-row">
|
||
<div class="swear-total-card">
|
||
<span class="swear-total-num">1 797</span>
|
||
<span class="swear-total-label">сообщений с матом за 7 лет</span>
|
||
</div>
|
||
<div class="swear-winner">
|
||
<span class="swear-winner-crown">👑</span>
|
||
<span class="swear-winner-name">Александр</span>
|
||
<span class="swear-winner-sub">матерится в 3.8× чаще</span>
|
||
</div>
|
||
</div>
|
||
<div class="stats-who" style="margin-top:1rem">
|
||
<div class="stats-who-labels">
|
||
<span class="stats-who-name who-alex">Александр — 79.2% (1 424 сообщ.)</span>
|
||
<span class="stats-who-name who-yulia">Юля — 20.8% (373 сообщ.)</span>
|
||
</div>
|
||
<div class="stats-usage-bar">
|
||
<div class="usage-seg usage-alex" style="width:79.2%"></div>
|
||
<div class="usage-seg usage-yulia" style="width:20.8%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ========== МЕСТО ========== -->
|
||
<section id="venue" class="section">
|
||
<div class="container">
|
||
<h2 class="section-title">Место проведения</h2>
|
||
<div class="venue-wrap">
|
||
<div class="venue-info">
|
||
<div class="venue-icon">📍</div>
|
||
<h3 class="venue-name">Загородный клуб «ЗаВидное»</h3>
|
||
<p class="venue-desc">Московская область, Ленинский район, пос. Измайлово д. 24 — 1 км от МКАД. Мы будем рады видеть вас!</p>
|
||
<div class="venue-btns">
|
||
<a href="https://zavidnoe-club.com/contacts" target="_blank" rel="noopener" class="btn btn-primary">
|
||
Сайт клуба
|
||
</a>
|
||
<a href="https://yandex.ru/maps/-/CPDRABzn" target="_blank" rel="noopener" class="btn btn-outline">
|
||
Яндекс.Карты
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="venue-map">
|
||
<iframe
|
||
src="https://yandex.ru/map-widget/v1/?um=constructor%3A88709e287fd710196ff3105f292a89bdf59222c1d431ddebdead0ebfe5fc06bb&source=constructor"
|
||
id="ymap-frame"
|
||
title="Карта места проведения"
|
||
allowfullscreen
|
||
loading="lazy"
|
||
></iframe>
|
||
<div class="map-fallback" id="map-fallback">
|
||
<p>Нажмите, чтобы открыть карту</p>
|
||
<a href="https://yandex.ru/maps/-/CPDRABzn" target="_blank" rel="noopener" class="btn btn-primary">
|
||
Открыть карту
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ========== АНКЕТА ГОСТЯ ========== -->
|
||
<section id="rsvp" class="section">
|
||
<div class="container">
|
||
<h2 class="section-title">Анкета гостя</h2>
|
||
<p class="section-sub">Пожалуйста, ответьте до <strong>1 августа 2026</strong></p>
|
||
<!--
|
||
ИНСТРУКЦИЯ: Создайте форму на forms.google.com
|
||
Нажмите «Отправить» → значок «<>» (встроить) → скопируйте ссылку из атрибута src
|
||
и вставьте её вместо YOUR_GOOGLE_FORM_EMBED_URL ниже.
|
||
Пример URL: https://docs.google.com/forms/d/e/XXXXXXXXXX/viewform?embedded=true
|
||
-->
|
||
<div class="gform-wrap">
|
||
<iframe
|
||
id="gform-frame"
|
||
src="https://forms.gle/xoyDUDQZ2ZcM5wth7"
|
||
title="Анкета гостя"
|
||
frameborder="0"
|
||
marginheight="0"
|
||
marginwidth="0"
|
||
loading="lazy"
|
||
>Загрузка…</iframe>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ========== FAQ ========== -->
|
||
<section id="faq" class="section section--alt">
|
||
<div class="container">
|
||
<h2 class="section-title">Часто задаваемые вопросы</h2>
|
||
<div class="faq-list">
|
||
<div class="faq-item">
|
||
<button class="faq-question" aria-expanded="false">
|
||
Когда начинается мероприятие?
|
||
<span class="faq-arrow">▾</span>
|
||
</button>
|
||
<div class="faq-answer">
|
||
<p>Велком секция (фуршет) начинается в <strong>16:00</strong>.</p>
|
||
<p>Основная секция (банкет) начинается в <strong>17:00</strong>.</p>
|
||
</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-question" aria-expanded="false">
|
||
Какой дресс-код мероприятия?
|
||
<span class="faq-arrow">▾</span>
|
||
</button>
|
||
<div class="faq-answer">
|
||
<p>Для нас важно, чтобы гости выглядели нарядно.</p>
|
||
<p><strong>Мужчинам</strong> — классический костюм. Брюки, рубашка и туфли — вполне достаточно.</p>
|
||
<p><strong>Женщинам</strong> — платье или элегантный наряд.</p>
|
||
<p>По цвету — мы не ограничиваем вас в выборе цвета наряда на свадьбу. Если вам тяжело выбрать цвет, ниже представлены примеры цветов, которые будет максимально уместно надеть.</p>
|
||
<div class="dresscode-colors">
|
||
<span class="dresscode-chip"><span class="dresscode-dot" style="background:#1c2d5e"></span>Тёмно-синий</span>
|
||
<span class="dresscode-chip"><span class="dresscode-dot" style="background:#4a4a4a"></span>Графит</span>
|
||
<span class="dresscode-chip"><span class="dresscode-dot" style="background:#b8bfc9"></span>Светло-серый</span>
|
||
<span class="dresscode-chip"><span class="dresscode-dot" style="background:#708090"></span>Серо-стальной</span>
|
||
<span class="dresscode-chip"><span class="dresscode-dot" style="background:#6b4226"></span>Коричневый</span>
|
||
<span class="dresscode-chip"><span class="dresscode-dot" style="background:#7d1128"></span>Бордовый</span>
|
||
<span class="dresscode-chip"><span class="dresscode-dot" style="background:#2d7a5a"></span>Изумрудный</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-question" aria-expanded="false">
|
||
Есть ли парковка на месте?
|
||
<span class="faq-arrow">▾</span>
|
||
</button>
|
||
<div class="faq-answer">
|
||
<p>Да, рядом с местом проведения есть бесплатная парковка. Подробности — на карте.</p>
|
||
</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-question" aria-expanded="false">
|
||
До какого числа нужно подтвердить участие?
|
||
<span class="faq-arrow">▾</span>
|
||
</button>
|
||
<div class="faq-answer">
|
||
<p>Пожалуйста, заполните анкету гостя до <strong>20 июля 2026</strong>. Это поможет нам правильно рассадить гостей и подготовить меню.</p>
|
||
</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-question" aria-expanded="false">
|
||
Дарить деньги - это OK?
|
||
<span class="faq-arrow">▾</span>
|
||
</button>
|
||
<div class="faq-answer">
|
||
<p>Да, конечно. Мы будем рады любому подарку. Ведь единственный пункт в нашем вишлисте - это отлично проведенный праздник</p>
|
||
</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-question" aria-expanded="false">
|
||
Уместно ли дарить цветы?
|
||
<span class="faq-arrow">▾</span>
|
||
</button>
|
||
<div class="faq-answer">
|
||
<p>Мы бы попросили вас воздержаться от дарения цветов.</p>
|
||
<p>Потому что живем мы в небольшой квартире, и складывать такое потенциальное количество цветов нам банально будет некуда.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ========== КООРДИНАТОР ========== -->
|
||
<section id="coordinator" class="section">
|
||
<div class="container">
|
||
<div class="coordinator-card">
|
||
<div class="coordinator-avatar">
|
||
<img src="photos/photo8.jpg" alt="Анастасия — координатор свадьбы">
|
||
</div>
|
||
<div class="coordinator-info">
|
||
<h2 class="coordinator-title">Остались вопросы?</h2>
|
||
<p class="coordinator-text">Любые вопросы по мероприятию, на которые мы не ответили, вы можете направить Анастасии — нашему координатору свадьбы.</p>
|
||
<p class="coordinator-phone">
|
||
Телефон: <a href="tel:+79586356872">8-958-635-68-72</a>
|
||
</p>
|
||
<a href="https://t.me/napartyev" target="_blank" rel="noopener" class="btn btn-primary coordinator-btn">
|
||
<span class="tg-icon">✈</span> Написать в Telegram
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ========== ФУТЕР ========== -->
|
||
<footer class="footer">
|
||
<div class="footer-hearts" aria-hidden="true">💛💚💜💙❤️</div>
|
||
<p>С любовью, <strong>Александр и Юлия</strong> · 22 августа 2026</p>
|
||
<p class="footer-small">Сделано с ❤️ для нашего особенного дня</p>
|
||
</footer>
|
||
|
||
<div class="lightbox" id="lightbox" hidden aria-hidden="true">
|
||
<button class="lightbox-close" type="button" aria-label="Закрыть">×</button>
|
||
<button class="lightbox-prev" type="button" aria-label="Предыдущее фото">‹</button>
|
||
<img class="lightbox-img" src="" alt="">
|
||
<button class="lightbox-next" type="button" aria-label="Следующее фото">›</button>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|