undangan pernikahan

<!DOCTYPE html>
<html lang="id">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Undangan Pernikahan">
<meta name="keywords" content="Pernikahan, Undangan Pernikahan">
<meta name="robots" content="index, follow">
<title>Undangan Pernikahan</title>
<link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow&display=swap" rel="stylesheet">
<style>
    body {
      font-family: 'PT Sans Narrow', sans-serif;
      background-color: #f1f1f1;
      margin: 0;
      padding: 0;
      color: #333;
    }

    header {
      background: url('your-custom-image-url.jpg') no-repeat center center/cover;
      height: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #fff;
    }

    header h1 {
      font-size: 48px;
      font-family: 'Oswald', sans-serif;
    }

    .countdown {
      font-size: 36px;
      margin-top: 20px;
      text-align: center;
    }

    .content {
      text-align: center;
      margin: 20px auto;
      padding: 20px;
    }

    .content h2 {
      font-size: 32px;
      margin-bottom: 10px;
    }

    .content p {
      font-size: 18px;
      margin-bottom: 20px;
    }

    .content a {
      background-color: #101010;
      color: white;
      padding: 10px 20px;
      text-decoration: none;
      font-size: 18px;
      border-radius: 5px;
    }

    .content a:hover {
      background-color: #333;
    }

    .music {
      text-align: center;
      margin-top: 30px;
    }

    footer {
      background-color: #101010;
      color: #fff;
      text-align: center;
      padding: 10px;
      margin-top: 40px;
    }
</style>
</head>

<body>


<header>
    <h1>Undangan Pernikahan</h1>
</header>


<div class="countdown">
    <p>Waktu menuju acara:</p>
    <div id="countdown"></div>
</div>


<div class="content">
    <h2>John & Jane</h2>
    <p>Kami dengan senang hati mengundang Anda ke acara pernikahan kami yang akan diadakan pada:</p>
    <p><strong>15 Desember 2024</strong> di <strong>Jakarta</strong></p>
    <p>Harap klik link di bawah ini untuk melihat lokasi acara:</p>
    
    <a href="https://maps.google.com/?q=-6.200000,106.816666" target="_blank">Lihat Lokasi</a>
</div>


<div class="music">
    <h3>Putar Musik:</h3>
    <audio controls>
      <source src="your-custom-music-url.mp3" type="audio/mpeg">
      Browser Anda tidak mendukung pemutar audio.
    </audio>
</div>


<footer>
    <p>© 2024 John & Jane Wedding | All Rights Reserved</p>
</footer>


<script>
    // Tanggal acara
    var countDownDate = new Date("Dec 15, 2024 10:00:00").getTime();

    // Update setiap detik
    var x = setInterval(function() {
      // Dapatkan tanggal saat ini
      var now = new Date().getTime();

      // Hitung selisih antara sekarang dengan tanggal acara
      var distance = countDownDate - now;

      // Perhitungan waktu untuk hari, jam, menit, dan detik
      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);

      // Tampilkan hasil di elemen dengan id "countdown"
      document.getElementById("countdown").innerHTML = days + " Hari " + hours + " Jam "
        + minutes + " Menit " + seconds + " Detik ";

      // Jika hitungan mundur selesai, tampilkan teks
      if (distance < 0) {
        clearInterval(x);
        document.getElementById("countdown").innerHTML = "Acara sedang berlangsung!";
      }
    }, 1000);
</script>

</body>

</html>

Koleksi Produk Lainnya :

Post a Comment