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

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>Undangan - Rodiah & Rifa'i</title>
  <meta name="description" content="">
  <meta name="keywords" content="">

  <meta property="og:site_name" content="Undangan">
  <meta property="og:title" content="Undangan - Rodiah & Rifa'i" />
  <meta property="og:description" content="Tanpa mengurangi rasa hormat, kami memberikan kabar bahagia ini dan memohon restu dari rekan sekalian untuk senantiasa mendoakan kelancaran acara pernikahan kami" />
  <meta property="og:image" itemprop="image" content="http://bits.co-id.id/rodiah-rifa'i/assets/img/galeri/01.jpeg">
  <meta property="og:type" content="website" />
  <meta property="og:updated_time" content="1440432930" />


  <!-- Favicons -->
  <link href="assets/img/favicon.ico" rel="icon">
  <link href="assets/img/favicon.ico" rel="apple-touch-icon">

  <!-- Fonts -->
  <link href="https://fonts.googleapis.com" rel="preconnect">
  <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  <link href="assets/vendor/aos/aos.css" rel="stylesheet">
  <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
  <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">

  <!-- Main CSS File -->
  <link href="assets/css/main.css" rel="stylesheet">
  <style>
    .coundown{
      color: #fff;
      padding: 4px 10px;
      border-radius: 20px;
      background-color: rgba(0, 0, 0, 0.5);
    }
    @font-face {
      font-family: 'Darling';
      src: url('assets/fonts/Darling.ttf');
    }
    @font-face {
      font-family: 'Marline';
      src: url('assets/fonts/Marline Personal Use Only.otf');
    }
    .sitename{
      text-transform: capitalize !important;
      font-size: 30px !important;
    }
    .open { 
      overflow: hidden; 
    } 
  </style>

  <!-- =======================================================
  * Template Name: Arsha
  * Template URL: https://bootstrapmade.com/arsha-free-bootstrap-html-template-corporate/
  * Updated: Feb 22 2025 with Bootstrap v5.3.3
  * Author: BootstrapMade.com
  * License: https://bootstrapmade.com/license/
  ======================================================== -->
</head>

<body class="index-page open">

  <header id="header" class="header d-flex align-items-center fixed-top" style="z-index: 100000 !important;">
    <div class="container-fluid container-xl position-relative d-flex align-items-center  justify-content-between">

      <a href="index.html" class="logo d-flex align-items-center me-auto">
        <!-- Uncomment the line below if you also wish to use an image logo -->
        <!-- <img src="assets/img/logo.webp" alt=""> -->
        <h1 class="sitename" style="font-family:'Marline';text-transform: uppercase;">Undangan</h1>
      </a>

      <nav id="navmenu" class="navmenu">
        <ul>
          <li><a href="#hero" class="active">Home</a></li>
          <li><a href="#mempelai">Mempelai</a></li>
          <li><a href="#acara">Acara</a></li>
          <li><a href="#denah">Denah Lokasi</a></li>
          <li><a href="#galeri">Galeri</a></li>
          <li><a href="#hadiah">Hadiah</a></li>
        </ul>
        <i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
      </nav>

      <a class="btn-getstarted" id="hbtn" href="javascript:void(0)" onclick="openUndangan()"><i class="bi bi-envelope-open-heart"></i> Buka Undangan</a>

    </div>
  </header>

  <main class="main">
    <!-- Hero Section -->
    <section id="hero" class="hero section" style="
      height: 700px !important;
      background-image: url('assets/img/WhatsApp\ Image\ 2025-12-24\ at\ 21.52.12.jpeg');
      background-color: #cccccc;
      background-repeat: no-repeat;
      background-position: center; 
      background-size: cover; 
    ">
      
      <div class="container">
        
        <div class="row gy-4">
          <div class="col-lg-6 order-2 order-lg-1 d-flex flex-column justify-content-center text-center" data-aos="zoom-out">
            <div style="margin-top: -320px;">
            <h1 style="font-size: 30px;text-shadow: -1px -1px 9px rgba(255,255,255,1);">RODIYAH <br>&<br>AHMAD RIFA'I, S.Pd</h1>
            <p style="text-shadow: -1px -1px 9px rgba(0,0,0,1);color: #fff;">
              <b>Rabu, 04 Februari 2026</b>
              <br>
              Kp. Pegadungan RT.004 RW.002 Ds. Tenjoayu Kec. Tanara Kab. Serang - Banten
            </p>
            <p id="demo" style="line-height: 80%;"></p>
            <div class="text-center">
              <a href="javascript:void(0)" id="hhbtn" onclick="openUndangan()" class="btn-get-started"><i class="bi bi-envelope-open-heart"></i> Buka Undangan</a>
              <!-- <a href="https://www.youtube.com/watch?v=Y7f98aduVJ8" class="glightbox btn-watch-video d-flex align-items-center"><i class="bi bi-play-circle"></i><span>Watch Video</span></a> -->
            </div>
            </div>
            
          </div>
          <div class="col-lg-6 order-1 order-lg-2 hero-img" data-aos="zoom-out" data-aos-delay="200">
            <!-- <img src="assets/img/hero-img.png" class="img-fluid animated" alt=""> -->
          </div>
        </div>
      </div>

    </section><!-- /Hero Section -->
    <img src="assets/img/driven.png" alt="" class="w-100" style="margin-top: -65px;position: absolute;z-index: 1000 !important">

    <!-- Clients Section -->
    <!-- <section id="clients" class="clients section light-background">

      <div class="container" data-aos="zoom-in">

        <div class="swiper init-swiper">
          <script type="application/json" class="swiper-config">
            {
              "loop": true,
              "speed": 600,
              "autoplay": {
                "delay": 5000
              },
              "slidesPerView": "auto",
              "pagination": {
                "el": ".swiper-pagination",
                "type": "bullets",
                "clickable": true
              },
              "breakpoints": {
                "320": {
                  "slidesPerView": 2,
                  "spaceBetween": 40
                },
                "480": {
                  "slidesPerView": 3,
                  "spaceBetween": 60
                },
                "640": {
                  "slidesPerView": 4,
                  "spaceBetween": 80
                },
                "992": {
                  "slidesPerView": 5,
                  "spaceBetween": 120
                },
                "1200": {
                  "slidesPerView": 6,
                  "spaceBetween": 120
                }
              }
            }
          </script>
          <div class="swiper-wrapper align-items-center">
            <div class="swiper-slide"><img src="assets/img/clients/clients-1.webp" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/clients-2.webp" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/clients-3.webp" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/clients-4.webp" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/clients-5.webp" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/clients-6.webp" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/clients-7.webp" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="assets/img/clients/clients-8.webp" class="img-fluid" alt=""></div>
          </div>
        </div>

      </div>

    </section> -->
    <!-- /Clients Section -->

    <!-- Team Section -->
    <section id="mempelai" class="team section"  style="
      background-image: url('assets/img/bg/bg-2.avif');
      background-color: #cccccc;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover; 
    ">

      <div class="container text-center" style="text-shadow: -1px -1px 9px rgba(255,255,255,1);">
        <h5>Assalamualaikum Warahmatullahi Wabarakatuh.</h5>
        Dengan memohon rahmat dan ridha Allah SWT, kami bermaksud menyelenggarakan pernikahan putra dan putri kami
      </div>
      <br>

      <div class="container">

        <div class="row gy-4">

          <div class="col-lg-4" data-aos="fade-up" data-aos-delay="100">
            <div class="team-member d-flex align-items-start" style="
              background-image: url('assets/img/bg/bg-3.jpg');
              background-color: #cccccc;
              background-repeat: no-repeat;
              background-position: center;
              background-size: cover; 
            ">
              <div class="pic"><img src="assets/img/mempelai/wanita.png" class="img-fluid" alt=""></div>
              <div class="member-info">
                <h2>RODIYAH</h2>
                <span>Putri Bpk. Roji & Ibu Samah (Almh)</span>
                <p>Kp. Pegadungan Rt.004 Ds. Tenjoayu Kec. Tanara Kab. Serang - Banten</p>
                <!-- <div class="social">
                  <a href=""><i class="bi bi-twitter-x"></i></a>
                  <a href=""><i class="bi bi-facebook"></i></a>
                  <a href=""><i class="bi bi-instagram"></i></a>
                  <a href=""> <i class="bi bi-linkedin"></i> </a>
                </div> -->
              </div>
            </div>
          </div><!-- End Team Member -->
          <div class="col-lg-2" data-aos="fade-up" data-aos-delay="100">
            <h2 class="text-center">Dengan</h2>
          </div>
          <div class="col-lg-4" data-aos="fade-up" data-aos-delay="200">
            <div class="team-member d-flex align-items-start" style="
              background-image: url('assets/img/bg/bg-3.jpg');
              background-color: #cccccc;
              background-repeat: no-repeat;
              background-position: center;
              background-size: cover; 
            ">
              <div class="pic"><img src="assets/img/mempelai/pria.png" class="img-fluid" alt=""></div>
              <div class="member-info">
                <h2>AHMAD RIFA'I, S.Pd</h2>
                <span>Bpk. Sarkawi & Ibu Alpulelah</span>
                <p>Kp. Talang Mas Rt.002 Ds. Cerukcuk Kec. Tanara Kab. Serang - Banten</p>
                <!-- <div class="social">
                  <a href=""><i class="bi bi-twitter-x"></i></a>
                  <a href=""><i class="bi bi-facebook"></i></a>
                  <a href=""><i class="bi bi-instagram"></i></a>
                  <a href=""> <i class="bi bi-linkedin"></i> </a>
                </div> -->
              </div>
            </div>
          </div><!-- End Team Member -->

        </div>

      </div>

    </section><!-- /Team Section -->
    <img src="assets/img/driven.png" alt="" class="w-100" style="margin-top: -65px;position: absolute;">
    
    <!-- Why Us Section -->
    <section id="acara" class="section work-process light-background" data-builder="section" style="
      background-image: url('assets/img/bg/bg-2.avif');
      background-color: #cccccc;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover; 
    ">
      <div class="container section-title" data-aos="fade-up">
        <h2>ACARA</h2>
      </div><!-- End Section Title -->

      <div class="container-fluid">
        <div class="row gy-4 ">

          <div class="col-12 content text-center " data-aos="fade-up" data-aos-delay="100">
            <div class="steps-item" style="
              background-image: url('assets/img/bg/bg-3.avif');
              background-color: #cccccc;
              background-repeat: no-repeat;
              background-position: center;
              background-size: cover; 
            ">
              <div class="steps-content">
                <h1 class="mt-2">Akad Nikah</h1>
                <p><b><h5>Rabu, 4 Februari 2026 M</h5> <br> 
                22 MUHARAM 1447 H<br>
                (PUKUL: 09.00 S/d Selesai)</b><br>
                Kp. Pegadungan Rt.004 Ds. Tenjoayu Kec. Tanara Kab. Serang - Banten
                </p>
              </div>
            </div><!-- End Steps Item -->
            
          </div>
          <div class="col-12 content text-center" data-aos="fade-up" data-aos-delay="100">
            <div class="steps-item"style="
              background-image: url('assets/img/bg/bg-3.avif');
              background-color: #cccccc;
              background-repeat: no-repeat;
              background-position: center;
              background-size: cover; ">
              <div class="steps-content">
                <h1 class="mt-2">Resepsi Nikah</h1>
                <p><b><h5>Rabu, 04 Februari 2026 M</h5> <br> 
                22 MUHARAM 1447 H<br>
                (PUKUL: 10.00 S/d Selesai)</b><br>
                Kp. Pegadungan Rt.004 Ds. Tenjoayu Kec. Tanara Kab. Serang - Banten
                </p>
              </div>
            </div><!-- End Steps Item -->
            
          </div>

        </div>
        

      </div>

    </section>
    <!-- /Why Us Section -->
    <img src="assets/img/driven.png" alt="" class="w-100" style="margin-top: -65px;position: absolute;z-index: 1000 !important">
    <!-- Call To Action Section -->
    <section id="call-to-action" class="call-to-action section dark-background">

      <img src="assets/img/cat/01.jpeg" alt="">

      <div class="container">

        <div class="row" data-aos="zoom-in" data-aos-delay="100">
          <div class="col-xl-9 text-center text-xl-start">
            <p>"Maka nikahilah wanita-wanita lain yang halal bagi kalian untuk dinikahi; (apakah) dua, tiga, atau empat. Namun, apabila kalian khawatir tidak bisa berlaku adil (di antara para istri bila sampai kalian memiliki iebih dari satu istri), nikahilah satu istri saja atau mencukupkan dengan budak perempuan yang kalian miliki. Hal itu lebih dekat kepada tidak berbuat aniaya."</p>
            <h3>QS. An-Nisaa': 3</h3>
          </div>
          <div class="col-xl-3 cta-btn-container text-center">
            <!-- <a class="cta-btn align-middle" href="#">Call To Action</a> -->
          </div>
        </div>

      </div>

    </section><!-- /Call To Action Section -->
    <img src="assets/img/driven.png" alt="" class="w-100" style="margin-top: -65px;position: absolute;z-index: 1000 !important">
<!-- Why Us Section -->
    <section id="denah" class="section work-process light-background" data-builder="section" style="
      background-image: url('assets/img/bg/bg-2.avif');
      background-color: #cccccc;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover; 
    ">
      <div class="container section-title" data-aos="fade-up">
        <h2>Denah Lokasi</h2>
      </div><!-- End Section Title -->

      <div class="container-fluid">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d296.7519165168853!2d106.3703948778467!3d-6.010340792417035!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e41fb1f5c42b315%3A0x73ac967a38121db2!2sMas%20bergo!5e1!3m2!1sid!2sid!4v1766656555293!5m2!1sid!2sid"  style="border:0;width: 100%;height: 500px;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
      </div>

    </section>
    <!-- /Why Us Section -->
     <img src="assets/img/driven.png" alt="" class="w-100" style="margin-top: -65px;position: absolute;z-index: 1000 !important">
    <!-- Portfolio Section -->
    <section id="galeri" class="portfolio section" style="
      background-image: url('assets/img/bg/bg-2.avif');
      background-color: #cccccc;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover; 
    ">

      <!-- Section Title -->
      <div class="container section-title" data-aos="fade-up">
        <h2>Galeri</h2>
        <!-- <p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p> -->
      </div><!-- End Section Title -->

      <div class="container">

        <div class="isotope-layout" data-default-filter="*" data-layout="masonry" data-sort="original-order">

          <!-- <ul class="portfolio-filters isotope-filters" data-aos="fade-up" data-aos-delay="100">
            <li data-filter="*" class="filter-active">All</li>
            <li data-filter=".filter-app">App</li>
            <li data-filter=".filter-product">Card</li>
            <li data-filter=".filter-branding">Web</li>
          </ul> -->
          <!-- End Portfolio Filters -->

          <div class="row gy-4 isotope-container" data-aos="fade-up" data-aos-delay="200">

            <div class="col-6 col-md-6 portfolio-item isotope-item filter-app">
              <img src="assets/img/galeri/01.jpeg" class="img-fluid" alt="">
            </div><!-- End Portfolio Item -->

            <div class="col-6 col-md-6 portfolio-item isotope-item filter-product">
              <img src="assets/img/galeri/02.jpeg" class="img-fluid" alt="">
            </div><!-- End Portfolio Item -->
            <div class="col-6 col-md-6 portfolio-item isotope-item filter-product">
              <img src="assets/img/galeri/03.jpeg" class="img-fluid" alt="">
            </div><!-- End Portfolio Item -->
            <div class="col-6 col-md-6 portfolio-item isotope-item filter-product">
              <img src="assets/img/galeri/04.jpeg" class="img-fluid" alt="">
            </div><!-- End Portfolio Item -->
            <div class="col-6 col-md-6 portfolio-item isotope-item filter-product">
              <img src="assets/img/galeri/05.jpeg" class="img-fluid" alt="">
            </div><!-- End Portfolio Item -->

          </div><!-- End Portfolio Container -->

        </div>

      </div>

    </section><!-- /Portfolio Section -->
    <img src="assets/img/driven.png" alt="" class="w-100" style="margin-top: -65px;position: absolute;">
    <section id="hadiah" class="section work-process light-background" data-builder="section" style="
      background-image: url('assets/img/bg/bg-2.avif');
      background-color: #cccccc;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover; 
    ">
      <div class="container section-title" data-aos="fade-up">
        <h2>Hadiah</h2>
      </div><!-- End Section Title -->

      <div class="container-fluid">
        <div class="row gy-4 ">

          <div class="col-12 content text-center " data-aos="fade-up" data-aos-delay="100">
            <div class="steps-item">
              <div class="steps-content">
                <div class="row">
                  <div class="col-3">
                    <img src="assets/img/dana.png" class="w-100">
                  </div>
                  <div class="col-9">
                    <h3>Nomor Dana</h3>
                    <h2>0857-7073-6797</h2>
                    <h3>A/N : RODIAH</h3>
                  </div>
                </div>
              </div>
            </div><!-- End Steps Item -->
            
          </div>
          <div class="col-12 content text-center" data-aos="fade-up" data-aos-delay="100">
            <div class="steps-item">
              <div class="steps-content">
                <div class="row">
                  <div class="col-3">
                    <img src="assets/img/bri.png" class="w-100">
                  </div>
                  <div class="col-9">
                    <h3>No.Rek</h3>
                    <h2>484901028057532</h2>
                    <h3>A/N : AHMAD RIFA'I</h3>
                  </div>
                </div>
              </div>
            </div><!-- End Steps Item -->
            
          </div>

        </div>
        

      </div>

    </section>

  </main>

  <footer id="footer" class="footer" style="margin-bottom: -100px;">

    <div class="container copyright text-center p-3" style="margin-bottom: -50px;">
      <p>© <span>Copyright</span> <strong class="px-1 sitename">BITS</strong> <span>All Rights Reserved</span></p>
      <!-- <div class="credits"> -->
        <!-- All the links in the footer should remain intact. -->
        <!-- You can delete the links only if you've purchased the pro version. -->
        <!-- Licensing information: https://bootstrapmade.com/license/ -->
        <!-- Purchase the pro version with working PHP/AJAX contact form: [buy-url] -->
        <!-- Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a> -->
      <!-- </div> -->
    </div>

  </footer>

  <!-- Scroll Top -->
  <a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>

  <!-- Preloader -->
  <div id="preloader"></div>

  <!-- Vendor JS Files -->
  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="assets/vendor/php-email-form/validate.js"></script>
  <script src="assets/vendor/aos/aos.js"></script>
  <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
  <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
  <script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
  <script src="assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
  <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>

  <!-- Main JS File -->
  <script src="assets/js/main.js"></script>
  <script>
    const currentDate = new Date();
    const year = currentDate.getFullYear();
    const month = currentDate.getMonth() + 1;
    const day = currentDate.getDate();
  // Set a valid end date
  var countDownDate = new Date("2026-02-04 08:00:00").getTime();

  // Update the count down every 1 second
  var x = setInterval(function() {

    // Get today's date and time
    var now = new Date().getTime();

    // Find the distance between now and the countdown date
    var distance = countDownDate - now;

    // Calculate Remaining Time
    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);

    // Display the result in the element with id="demo"
    if(days==0){
      document.getElementById("demo").innerHTML = "<span class='coundown'>"+hours + ":"
        + minutes + ":" + seconds + "</span>";
    }else{
      document.getElementById("demo").innerHTML = "<span class='coundown'>"+days + "Hari " + hours + ":"
        + minutes + ":" + seconds + "</span>";
    }
    

    // If the countdown is finished, write some text
    if (distance < 0) {
      if(year+"-"+month+"-"+day+" 08:00:00" == "2026-02-04 08:00:00"){
        clearInterval(x);
        document.getElementById("demo").innerHTML = "PERNIKAHAN SEDANG BERLANGSUNG";
      }else{
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
      }
      
    }
  }, 1000);
  const audio = new Audio('assets/music/Yovie & Nuno - Janji Suci.mp3');
  audio.volume = 0.5;
  function openUndangan(){
    document.body.classList.remove("open"); 
    // document.location.href ="#mempelai";
    const element = document.getElementById('mempelai');
    element.scrollIntoView();
    let hbtn = document.getElementById("hbtn");
    hbtn.classList.add("d-none");
    let hhbtn = document.getElementById("hhbtn");
    hhbtn.classList.add("d-none");

    // Create a new Audio object with the path to your sound file
    

    // Play the sound
    audio.play();

  }
  </script>

</body>

</html>