index.html
unknown
html
2 years ago
10 kB
17
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 = "#undangan" class="btn btn-lg mt-4">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>
<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>
</body>
</html>Editor is loading...
Leave a Comment