Updated wedding invitation content and added translations

This commit is contained in:
spetznas
2026-05-04 13:12:37 +02:00
parent 85128647a3
commit 8346dd5754
83 changed files with 14781 additions and 428 deletions
+400
View File
@@ -0,0 +1,400 @@
<!DOCTYPE html>
<html lang="en">
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<title>Markin Stefan</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="Markin Stefan">
<meta name="description" content="We are happy to invite you to the wedding of Stefan and Mariia! Join us in celebrating this special day with love, joy, and wonderful memories.
We look forward to seeing you there!">
<meta name="keywords" content="blog,developer,personal">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Marriage of Stefan and Mariia">
<meta name="twitter:description" content="We are happy to invite you to the wedding of Stefan and Mariia! Join us in celebrating this special day with love, joy, and wonderful memories.
We look forward to seeing you there!">
<meta property="og:url" content="http://localhost:1313/marriage/">
<meta property="og:site_name" content="Markin Stefan">
<meta property="og:title" content="Marriage of Stefan and Mariia">
<meta property="og:description" content="We are happy to invite you to the wedding of Stefan and Mariia! Join us in celebrating this special day with love, joy, and wonderful memories.
We look forward to seeing you there!">
<meta property="og:locale" content="en">
<meta property="og:type" content="article">
<link rel="canonical" href="http://localhost:1313/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.css" media="screen">
<link rel="stylesheet" href="/css/coder-dark.css" 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://localhost:1313/">
Markin Stefan
</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="/about/">About</a>
</li>
<li class="navigation-item">
<a class="navigation-link " href="/projects/">Projects</a>
</li>
<li class="navigation-item">
<a class="navigation-link " href="/contact/">Contact me</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="/ru/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: 1.2rem;
}
.footer {
text-align: center;
margin-top: 3rem;
color: #888;
font-size: 1rem;
padding-top: 1rem;
}
.footer a {
color: #0066cc;
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
</style>
<div class="wedding-container">
<div class="countdown">
<h3>Countdown to our Wedding</h3>
<p id="timer"></p>
</div>
<div class="hero">
<img src="/images/header-image.jpg" alt="Wedding Header Image">
<h1>Marriage of Stefan and Mariia</h1>
<div class="date">
en
</div>
</div>
<div class="section">
<p>We are happy to invite you to the wedding of Stefan and Mariia! Join us in celebrating this special day with love, joy, and wonderful memories.</p>
<p>We look forward to seeing you there!</p>
</div>
<div class="section">
<h2>📅 Event</h2>
<p><strong>Ceremony:</strong> 14:00</p>
<p><strong>Reception:</strong> 17:00</p>
<p><strong>Location:</strong> Helsinki, Finland</p>
</div>
<div class="section map">
<h2>📍 Location</h2>
<iframe src="https://maps.google.com/?q=Helsinki,+Finland&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>Please respond by <strong>June 30</strong>.</p>
<p>Email: <a href="mailto:test@example.com">test@example.com</a></p>
<p><a href="https://example.com/rsvp-form" target="_blank">RSVP Form</a></p>
</div>
<div class="footer">
<p>We look forward to celebrating with you ❤️</p>
</div>
</div>
<script>
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 + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "The big day is here!";
}
}, 1000);
</script>
</div>
<footer class="footer">
<section class="container">
©
2026
Markin Stefan
·
Powered by <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.js"></script>
</body>
</html>