Updated wedding invitation content and added translations
This commit is contained in:
Executable
+400
@@ -0,0 +1,400 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head><script src="/livereload.js?mindelay=10&v=2&port=1313&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>
|
||||
Reference in New Issue
Block a user