index.html

p6
mail@pastecode.io avatar
unknown
html
7 months ago
15 kB
15
Indexable
Never
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Budi & Sinta Wedding</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Sacramento&family=Work+Sans:wght@100;400;600;700&display=swap" rel="stylesheet">
    <!-- simplyCountdown -->
    <link rel="stylesheet" href="countdown/simplyCountdown.theme.default.css"/>
    <script src="countdown/simplyCountdown.min.js"></script>
    <!-- Bootstrap icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <section id="hero" class="hero w-100 h-100 p-3 mx-auto text-center d-flex justify-content-center align-items-center text-white">
      <main> 
        <h4>Kepada Bapak/Ibu/Saudara/i, </h4>
        <h1>Budi & Sinta</h1>
        <p>Akan melangsungkan resepsi pernikahan dalam:</p>
        <div class="simply-countdown"></div>
        <a href = "#home" class="btn btn-lg mt-4" onClick="enableScroll()">Lihat Undangan</a>
      </main>
    </section>
    <nav class="navbar navbar-expand-md bg-transparent sticky-top mynavbar">
  <div class="container">
    <a class="navbar-brand" href="#">Wedding</a>
    <button class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Wedding</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <div class="navbar-nav ms-auto">
        <a class="nav-link" href="#home">Home</a>
        <a class="nav-link" href="#info">Info</a>
        <a class="nav-link" href="#story">Story</a>
        <a class="nav-link" href="#gallery">Gallery</a>
        <a class="nav-link" href="#rsvp">RSVP</a>
        <a class="nav-link" href="#gifts">Gifts</a>
      </div>
      </div>
    </div>
  </div>
</nav>

<section id="home" class="home">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8 text-center">
        <h2>Acara Pernikahan</h2>
        <h3>Diselenggarakan pada 10 Januari 2024 di Pangkalpinang.</h3>
        <p>Oleh karena itu, dengan segala hormat, kami bermaksud untuk mengundang Bapak/Ibu, Saudara/i, untuk hadir pada acara pernikahan kami.
        </p>
      </div>
    </div>

    <div class="row couple">
      <div class="col-lg-6">
        <div class="row">
          <div class="col-8 text-end">
            <h3>Budi Santoso</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <p>Putra dari Bpk. Lorem <br> dan <br> Ibu Ipsum</p>
          </div>
          <div class="col-4">
            <img src="img/budi1.jpeg" alt="Budi Santoso" class="img-responsive rounded-circle">
          </div>
        </div>  
      </div>  
      <span class="heart"><i class="bi bi-heart-fill"></i></span>
      <div class="col-lg-6">
        <div class="row">
          <div class="col-4">
            <img src="img/siska1.jpeg" alt="Siska Amelia" class="img-responsive rounded-circle">
          </div>
          <div class="col-8">
            <h3>Siska Amelia</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <p>Putra dari Bpk. Ipsum <br> dan <br> Ibu Lorem</p>
          </div>
        </div>  
      </div> 
    </div>
  </div>
</section>

<section class="info" id="info">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8 col-10 text-center">
        <h2>Informasi Acara</h2>
        <p class="alamat">Alamat: Novotel Hotel <br> Jl. Soekarno Hatta No.Km 5, Kep, Dul, Kec. Pangkalan Baru, Kabupaten Bangka Tengah, Kepulauan Bangka Belitung 33137</p>
        <a href="https://maps.app.goo.gl/ywRAN5ocLEiBeQWZ6" target="_blank" class="btn btn-light btn-sm my-3">Klik untuk membuka peta</a>
        <p class="description">Diharapkan untuk tidak salah alamat dan tanggal. Manakala tiba di tujuan namun tidak ada tanda-tanda sedang dilangsungkan pernikahan, boleh jadi Anda salah jadwal, atau salah tempat.</p>
    </div>

    <div class="row justify-content-center mt-4">
      <div class="col-md-5 col-10">
        <div class="card text-center text-bg-light mb-5">
          <div class="card-header">Akad Nikah</div>
          <div class="card-body">
            <div class="row justify-content-center">
              <div class="col-md-6">
                <i class="bi bi-clock d-block"></i>
                <span>08.00 - 10.00</span>
              </div>
              <div class="col-md-6">
                <i class="bi bi-calendar3 d-block"></i>
                <span>Minggu, 10 Januari 2024</span>
              </div>
            </div>
          </div>
          <div class="card-footer">
            Saat acara akad diharapkan untuk kondusif menjaga kekhidmatan dan kekhusyuan seluruh prosesi.
          </div>
        </div>
      </div>

      <div class="col-md-5 col-10">
        <div class="card text-center text-bg-light">
          <div class="card-header">Resepsi</div>
          <div class="card-body">
            <div class="row justify-content-center">
              <div class="col-md-6">
                <i class="bi bi-clock d-block"></i>
                <span>11.00 - selesai</span>
              </div>
              <div class="col-md-6">
                <i class="bi bi-calendar3 d-block"></i>
                <span>Minggu, 10 Januari 2024</span>
              </div>
            </div>
          </div>
          <div class="card-footer">
            Saat acara akad diharapkan untuk kondusif menjaga kekhidmatan dan kekhusyuan seluruh prosesi.
          </div>
        </div>
      </div>
    </div>
</section>

<section id="story" class="story">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8 col-10 text-center">
        <span>Bagaimana Cinta Kami Bersemi</span>
        <h2>Cerita Kami</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <ul class="timeline">
          <li>
            <div class="timeline-image" style="background-image: url(img/dono.jpg);"></div>
            <div class="timeline-panel">
              <div class="timeline-heading">
                <h3>Pertama Bertemu</h3>
                <span>1 Juni 2020</span>
              </div> 
              <div class="timeline-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
          </li>
          <li class="timeline-inverted">
            <div class="timeline-image" style="background-image: url(https://picsum.photos/300/300);"></div>
            <div class="timeline-panel">
              <div class="timeline-heading">
                <h3>Mulai serius</h3>
                <span>1 Desember 2020</span>
              </div> 
              <div class="timeline-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
          </li>
          <li>
            <div class="timeline-image" style="background-image: url(https://picsum.photos/301/301);"></div>
            <div class="timeline-panel">
              <div class="timeline-heading">
                <h3>Tunangan</h3>
                <span>1 Desember 2021</span>
              </div> 
              <div class="timeline-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
          </li>
        </ul>
      </div>
    </div>  
  </div>  
</section>

<section id="gallery" class="gallery"> 
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8 col-10 text-center">
        <span>Memori Kisah Kami</span>
        <h2>Gallery Foto</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
    <div class="row row-cols-lg-4 row-cols-md-3 row-cols-sm-2 row-cols-1 justify-content-center">
      <div class="col mt-3">
        <a href="https://picsum.photos/id/400/1400/790" data-toggle="lightbox" data-caption="Lorem Ipsum 1" data-gallery="mygallery">
          <img src="https://picsum.photos/id/400/300/400" alt="1" class="img-fluid w-100 rounded">
        </a>
      </div>
      <div class="col mt-3">
        <a href="https://picsum.photos/id/401/1400/790" data-toggle="lightbox" data-caption="Lorem Ipsum 2" data-gallery="mygallery">
          <img src="https://picsum.photos/id/401/300/400" alt="2" class="img-fluid w-100 rounded">
        </a>
      </div>
      <div class="col mt-3">
        <a href="https://picsum.photos/id/402/1400/790" data-toggle="lightbox" data-caption="Lorem Ipsum 3" data-gallery="mygallery">
          <img src="https://picsum.photos/id/402/300/400" alt="3" class="img-fluid w-100 rounded">
        </a>
      </div>
      <div class="col mt-3">
        <a href="https://picsum.photos/id/403/1400/790" data-toggle="lightbox" data-caption="Lorem Ipsum 4" data-gallery="mygallery">
          <img src="https://picsum.photos/id/403/300/400" alt="4" class="img-fluid w-100 rounded">
        </a>
      </div>
      <div class="col mt-3">
        <a href="https://picsum.photos/id/404/1400/790" data-toggle="lightbox" data-caption="Lorem Ipsum 5" data-gallery="mygallery">
          <img src="https://picsum.photos/id/404/300/400" alt="5" class="img-fluid w-100 rounded">
        </a>
      </div>
      <div class="col mt-3">
        <a href="https://picsum.photos/id/405/1400/790" data-toggle="lightbox" data-caption="Lorem Ipsum 6" data-gallery="mygallery">
          <img src="https://picsum.photos/id/405/300/400" alt="6" class="img-fluid w-100 rounded">
        </a>
      </div>
    </div>
  </div>  
</section>

<section id="rsvp" class="rsvp">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8 col-10 text-center">
        <h2>Konfirmasi Kehadiran</h2>
        <p>Isi form dibawah ini untuk melakukan konfirmasi kehadiran.</p>
      </div>
    </div>

    <form class="row row-cols-md-auto g-3 align-items-center justify-content-center" method="post" action="https://script.google.com/macros/s/AKfycbxLhHskFLhDMPuh-RQFj7btR9mn2DwDpKFotMkYhnjKcnChuDqDsjhHi5k-UeSLdhSY/exec" id="my-form">
      <div class="col-12">
        <div class="mb-3">
          <label for="nama" class="form-label">Nama</label>
          <input type="text" class="form-control" id="nama" name="nama">
        </div>
      </div>
      <div class="col-12">
        <div class="mb-3">
          <label for="jumlah" class="form-label">Jumlah</label>
          <input type="number" class="form-control" id="jumlah" name="jumlah" min="1" max="5" length="1" value="1">
        </div>
      </div>
      <div class="col-12">
        <div class="mb-3">
          <label for="status" class="form-label">Konfirmasi</label>
          <select name="status" id="status" class="form-select">
            <option selected>Pilih salah satu</option>
            <option value="Hadir">Hadir</option>
            <option value="Tidak Hadir">Tidak Hadir</option>
          </select>
        </div>
      </div>
      <div class="col-12" style="margin-top: 35px;">
        <button class="btn btn-primary">Kirim</button>
    </form>
</section>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

    <script>
      simplyCountdown('.simply-countdown', {
        year: 2024, // required
        month: 1, // required
        day: 10, // required
        hours: 17, // Default is 0 [0-23] integer
        minutes: 0, // Default is 0 [0-59] integer
        seconds: 0, // Default is 0 [0-59] integer
        words: { //words displayed into the countdown
            days: { singular: 'hari', plural: 'hari' },
            hours: { singular: 'jam', plural: 'jam' },
            minutes: { singular: 'menit', plural: 'menit' },
            seconds: { singular: 'detik', plural: 'detik' }
        },
      });
    </script>

    <script>
      const stickyTop = document.querySelector('.sticky-top');
      const offcanvas = document.querySelector('.offcanvas');

      offcanvas.addEventListener('show.bs.offcanvas', function(){
        stickyTop.style.overflow = 'visible';
      });

      offcanvas.addEventListener('hidden.bs.offcanvas', function(){
        stickyTop.style.overflow = 'hidden';
      });
    </script>

    <script src="https://cdn.jsdelivr.net/npm/bs5-lightbox@1.8.3/dist/index.bundle.min.js"></script>

    <script>
      const rootElement = document.querySelector(":root");

      function disableScroll() {
        scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;

        window.onscroll = function() {
          window.scrollTo(scrollTop, scrollLeft);
        } 

        rootElement.style.scrollBehavior = 'auto'; 
      }

      function enableScroll() {
        window.onscroll = function() {
          rootElement.style.scrollBehavior = 'smooth';
          localStorage.setItem('opened', 'true');
        }
      }

      if(!localStorage.getItem('opened')){
        disableScroll();  
      }
      
    </script>

    <script>
      window.addEventListener("load", function() {
        const form = document.getElementById('my-form');
        form.addEventListener("submit", function(e) {
          e.preventDefault();
          const data = new FormData(form);
          const action = e.target.action;
          fetch(action, {
            method: 'POST',
            body: data,
          })
          .then(() => {
            alert("Konfirmasi kehadiran berhasil terkirim!");
          })
        });
      });

    </script>
  </body>
</html>
Leave a Comment