spetznas
469 lines
11 KiB
HTML
469 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
|
||
<head>
|
||
<title>Маркин Степан</title>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="color-scheme" content="light dark">
|
||
|
||
|
||
|
||
|
||
<meta name="author" content="Маркин Степан">
|
||
<meta name="description" content="С радостью приглашаем вас на свадьбу Стефана и Мариии! Присоединяйтесь к нам, чтобы отпраздновать этот особенный день, наполненный любовью, радостью и незабываемыми воспоминаниями.
|
||
С нетерпением ждем встречи с вами!">
|
||
<meta name="keywords" content="blog,desenvolvedor,pessoal">
|
||
|
||
|
||
|
||
<meta name="twitter:card" content="summary">
|
||
<meta name="twitter:title" content="Свадьба Стефана и Марии">
|
||
<meta name="twitter:description" content="С радостью приглашаем вас на свадьбу Стефана и Мариии! Присоединяйтесь к нам, чтобы отпраздновать этот особенный день, наполненный любовью, радостью и незабываемыми воспоминаниями.
|
||
С нетерпением ждем встречи с вами!">
|
||
|
||
<meta property="og:url" content="http://markinstefan.xyz/ru/marriage/">
|
||
<meta property="og:site_name" content="Маркин Степан">
|
||
<meta property="og:title" content="Свадьба Стефана и Марии">
|
||
<meta property="og:description" content="С радостью приглашаем вас на свадьбу Стефана и Мариии! Присоединяйтесь к нам, чтобы отпраздновать этот особенный день, наполненный любовью, радостью и незабываемыми воспоминаниями.
|
||
С нетерпением ждем встречи с вами!">
|
||
<meta property="og:locale" content="ru">
|
||
<meta property="og:type" content="article">
|
||
|
||
|
||
|
||
|
||
<link rel="canonical" href="http://markinstefan.xyz/ru/marriage/">
|
||
|
||
|
||
<link rel="preload" href="/fonts/fa-brands-400.woff2" as="font" type="font/woff2" crossorigin>
|
||
<link rel="preload" href="/fonts/fa-regular-400.woff2" as="font" type="font/woff2" crossorigin>
|
||
<link rel="preload" href="/fonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin>
|
||
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="/css/coder.min.f6b1b35a7b02521b25338f6cf58975f9980a6c12847763fe35a48307758cd1e7.css" integrity="sha256-9rGzWnsCUhslM49s9Yl1+ZgKbBKEd2P+NaSDB3WM0ec=" crossorigin="anonymous" media="screen" />
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="/css/coder-dark.min.ad48f476275974885bdc03d5251e3cdbe1678c54a63ff772376b0ed2adc468dd.css" integrity="sha256-rUj0didZdIhb3APVJR482+FnjFSmP/dyN2sO0q3EaN0=" crossorigin="anonymous" media="screen" />
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" sizes="any">
|
||
<link rel="icon" type="image/png" href="/images/favicon-32x32.png" sizes="32x32">
|
||
<link rel="icon" type="image/png" href="/images/favicon-16x16.png" sizes="16x16">
|
||
|
||
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png">
|
||
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
|
||
|
||
<link rel="manifest" href="/site.webmanifest">
|
||
<link rel="mask-icon" href="/images/safari-pinned-tab.svg" color="#5bbad5">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</head>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<body class="preload-transitions colorscheme-auto">
|
||
|
||
<div class="float-container">
|
||
<a id="dark-mode-toggle" class="colorscheme-toggle">
|
||
<i class="fa-solid fa-adjust fa-fw" aria-hidden="true"></i>
|
||
</a>
|
||
</div>
|
||
|
||
|
||
<main class="wrapper">
|
||
<nav class="navigation">
|
||
<section class="container">
|
||
|
||
<a class="navigation-title" href="http://markinstefan.xyz/ru/">
|
||
Маркин Степан
|
||
</a>
|
||
|
||
|
||
<input type="checkbox" id="menu-toggle" />
|
||
<label class="menu-button float-right" for="menu-toggle">
|
||
<i class="fa-solid fa-bars fa-fw" aria-hidden="true"></i>
|
||
</label>
|
||
<ul class="navigation-list">
|
||
|
||
|
||
<li class="navigation-item">
|
||
<a class="navigation-link " href="/ru/about/">Обо мне</a>
|
||
</li>
|
||
|
||
<li class="navigation-item">
|
||
<a class="navigation-link " href="/ru/projects/">Проекты</a>
|
||
</li>
|
||
|
||
<li class="navigation-item">
|
||
<a class="navigation-link " href="/ru/contact/">Контакты</a>
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="navigation-item menu-separator">
|
||
<span>|</span>
|
||
</li>
|
||
|
||
|
||
<li class="navigation-item">
|
||
<a href="/de/marriage/">🇩🇪</a>
|
||
</li>
|
||
|
||
|
||
|
||
|
||
<li class="navigation-item">
|
||
<a href="/marriage/">🇬🇧</a>
|
||
</li>
|
||
|
||
|
||
|
||
</ul>
|
||
|
||
</section>
|
||
</nav>
|
||
|
||
|
||
<div class="content">
|
||
|
||
|
||
<style>
|
||
.wedding-container {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
padding: 2rem;
|
||
font-family: system-ui, sans-serif;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.hero {
|
||
text-align: center;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.hero img {
|
||
width: 100%;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: 2.5rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.hero .date {
|
||
font-size: 1.2rem;
|
||
color: #666;
|
||
}
|
||
|
||
.section {
|
||
margin-bottom: 2.5rem;
|
||
}
|
||
|
||
.section h2 {
|
||
font-size: 1.5rem;
|
||
margin-bottom: 0.5rem;
|
||
border-bottom: 1px solid #eee;
|
||
padding-bottom: 0.3rem;
|
||
}
|
||
|
||
.map iframe {
|
||
width: 100%;
|
||
height: 400px;
|
||
border: 0;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.rsvp {
|
||
background: #f8f8f8;
|
||
padding: 1rem;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.countdown {
|
||
text-align: center;
|
||
margin-bottom: 2rem;
|
||
font-size: 5rem;
|
||
}
|
||
|
||
.footer {
|
||
text-align: center;
|
||
margin-top: 3rem;
|
||
color: #888;
|
||
font-size: 2rem;
|
||
padding-top: 1rem;
|
||
}
|
||
|
||
.footer a {
|
||
color: #0066cc;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.footer a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
</style>
|
||
|
||
<div class="wedding-container">
|
||
<style>
|
||
.music-fab {
|
||
position: fixed;
|
||
bottom: 20px;
|
||
left: 20px;
|
||
z-index: 9999;
|
||
}
|
||
|
||
.fab-button {
|
||
width: 52px;
|
||
height: 52px;
|
||
border-radius: 50%;
|
||
border: none;
|
||
background: white;
|
||
box-shadow: 0 6px 18px rgba(0,0,0,0.2);
|
||
font-size: 20px;
|
||
cursor: pointer;
|
||
transition: transform 0.15s ease;
|
||
}
|
||
|
||
.fab-button:active {
|
||
transform: scale(0.95);
|
||
}
|
||
</style>
|
||
|
||
<div class="music-fab">
|
||
<button id="music-btn" class="fab-button">▶️</button>
|
||
</div>
|
||
|
||
<audio id="bg-music" loop>
|
||
<source src="/audio/canon-in-d.mp3" type="audio/mpeg">
|
||
</audio>
|
||
<script>
|
||
const btn = document.getElementById("music-btn");
|
||
const audio = document.getElementById("bg-music");
|
||
|
||
audio.volume = 0.2;
|
||
|
||
let isPlaying = false;
|
||
|
||
btn.addEventListener("click", async () => {
|
||
if (!isPlaying) {
|
||
try {
|
||
await audio.play();
|
||
isPlaying = true;
|
||
btn.textContent = "⏸️";
|
||
} catch (e) {
|
||
console.log("Playback blocked:", e);
|
||
}
|
||
} else {
|
||
audio.pause();
|
||
isPlaying = false;
|
||
btn.textContent = "▶️";
|
||
}
|
||
});
|
||
</script>
|
||
|
||
|
||
|
||
<div class="countdown">
|
||
<h3>Обратный отсчет до нашей свадьбы</h3>
|
||
<p id="timer"></p>
|
||
</div>
|
||
|
||
|
||
<div class="hero">
|
||
<img src="/images/hochzeit-header.jpg" alt="Wedding Header Image">
|
||
<h1>Свадьба Стефана и Марии</h1>
|
||
<div class="date">
|
||
15 августа 2026 г.
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="section">
|
||
<p>С радостью приглашаем вас на свадьбу Стефана и Мариии! Присоединяйтесь к нам, чтобы отпраздновать этот особенный день, наполненный любовью, радостью и незабываемыми воспоминаниями.</p>
|
||
<p>С нетерпением ждем встречи с вами!</p>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<div class="section">
|
||
<h2>📅 Мероприятие</h2>
|
||
|
||
<p>
|
||
<strong>Церемония:</strong>
|
||
15 августа 2026 г., в 14:00
|
||
|
||
</p>
|
||
|
||
|
||
<p><strong>Прием:</strong> 17:00</p>
|
||
|
||
|
||
<p><strong>Место:</strong> Мюнхен, Германия</p>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<div class="section map">
|
||
<h2>📍 Место</h2>
|
||
<iframe src="https://maps.google.com/?q=Munich,+Germany&hl=ru&z=12&output=embed" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="section rsvp">
|
||
<h2>📝 RSVP</h2>
|
||
|
||
<p>Пожалуйста, ответьте до <strong>30 июня</strong>.</p>
|
||
|
||
|
||
|
||
<p><a href="https://example.com/rsvp-form" target="_blank">Форма RSVP</a></p>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
<div class="footer">
|
||
<p>Мы с нетерпением ждем встречи с вами ❤️</p>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
var labels = {
|
||
day: "Д.",
|
||
hour: "ч.",
|
||
minute: "м",
|
||
second: "c"
|
||
};
|
||
|
||
var countDownDate = new Date("2026-08-15 14:00").getTime();
|
||
|
||
var x = setInterval(function() {
|
||
var now = new Date().getTime();
|
||
var distance = countDownDate - now;
|
||
|
||
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
|
||
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
||
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
|
||
|
||
document.getElementById("timer").innerHTML =
|
||
days + " " + labels.day + " " +
|
||
hours + " " + labels.hour + " " +
|
||
minutes + " " + labels.minute + " " +
|
||
seconds + " " + labels.second;
|
||
|
||
if (distance < 0) {
|
||
clearInterval(x);
|
||
document.getElementById("timer").innerHTML = "Наступил великий день!";
|
||
}
|
||
}, 1000);
|
||
</script>
|
||
|
||
</div>
|
||
|
||
<footer class="footer">
|
||
<section class="container">
|
||
©
|
||
|
||
2026
|
||
Маркин Степан
|
||
·
|
||
|
||
Работает на <a href="https://gohugo.io/" target="_blank" rel="noopener">Hugo</a> & <a href="https://github.com/luizdepra/hugo-coder/" target="_blank" rel="noopener">Coder</a>.
|
||
|
||
</section>
|
||
</footer>
|
||
|
||
</main>
|
||
|
||
|
||
|
||
|
||
|
||
<script src="/js/coder.min.6ae284be93d2d19dad1f02b0039508d9aab3180a12a06dcc71b0b0ef7825a317.js" integrity="sha256-auKEvpPS0Z2tHwKwA5UI2aqzGAoSoG3McbCw73gloxc="></script>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</body>
|
||
|
||
</html>
|