index.html
p8
unknown
html
a year ago
18 kB
53
Indexable
<!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/AKfycbxIPDU9Q0oEFP4bS8GJaVWjuiTgU69KFbRBWKicYTRuszVzImDKuVywZTddaGYvwBeYzg/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>
<section id="gifts" class="gifts">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8 col-10 text-center">
<span>Ungkapan tanda kasih</span>
<h2>Kirim Hadiah</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 justify-content-center text-center">
<div class="col-md-6">
<ul class="list-group">
<li class="list-group-item">
<div class="fw-bold">BCA</div>
123456789 - BUDI SANTOSO
</li>
<li class="list-group-item">
<div class="fw-bold">MANDIRI</div>
987654321 - BUDI SANTOSO
</li>
</ul>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col text-center">
<small class="block">© 2023 Budi Wedding. All Rights Reserved.</small>
<small class="block">Design by Rendy Rian Chrisna Putra</small>
<ul class="mt-3">
<li><a href="#"><i class="bi bi-instagram"></i></a></li>
<li><a href="#"><i class="bi bi-youtube"></i></a></li>
<li><a href="#"><i class="bi bi-twitter"></i></a></li>
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
<li><a href="#"><i class="bi bi-tiktok"></i></a></li>
</ul>
</div>
</div>
</div>
</footer>
<div id="audio-container">
<audio id="song" autoplay loop>
<source src="audio/KennyG.mp3" type="audio/mp3">
</audio>
<div class="audio-icon-wrapper" style="display: none;">
<i class="bi bi-disc"></i>
</div>
</div>
<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");
const audioIconWrapper = document.querySelector('.audio-icon-wrapper');
const audioIcon = document.querySelector('.audio-icon-wrapper i');
const song = document.querySelector('#song');
let isPlaying = false;
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');
playAudio();
}
}
function playAudio() {
audioIconWrapper.style.display = 'flex';
song.play();
isPlaying = true;
}
audioIconWrapper.onclick = function () {
if(isPlaying) {
song.pause();
audioIcon.classList.remove('bi-disc');
audioIcon.classList.add('bi-pause-circle');
}else{
song.play();
audioIcon.classList.add('bi-disc');
audioIcon.classList.remove('bi-pause-circle');
}
isPlaying = !isPlaying;
}
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>Editor is loading...
Leave a Comment