arifselviawedding/index.html

609 lines
19 KiB
HTML
Raw Normal View History

2022-11-20 23:31:05 +07:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
2024-05-17 08:43:05 +07:00
<title>Wedding Invitation - Arif &amp; Selvi </title>
2022-11-20 23:31:05 +07:00
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:image" content="img/kita.png">
<meta property="og:image:width" content="300">
<meta property="og:image:height" content="300">
2024-05-17 08:43:05 +07:00
<meta property="og:title" content="Wedding Invitation - Arif &amp; Selvi ">
<meta property="og:description" content="You are invited to come Arif and Selvi Wedding Event">
2022-11-20 23:31:05 +07:00
<meta property="og:type" content="article">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:400,300,600,400italic,700" rel="stylesheet"
type="text/css">
<link href="https://fonts.googleapis.com/css?family=Sacramento" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Animate.css -->
<link rel="stylesheet" href="css/css-animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css/css-icomoon.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/css-bootstrap.css">
<!-- Magnific Popup -->
<link rel="stylesheet" href="css/css-magnific-popup.css">
<!-- Owl Carousel -->
<link rel="stylesheet" href="css/css-owl.carousel.min.css">
<link rel="stylesheet" href="css/css-owl.theme.default.min.css">
<!--lightbox-->
<link href="css/lightbox.css" rel="stylesheet">
<!-- Theme style -->
<link rel="stylesheet" href="css/css-style.css">
<!-- icon -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/material-components-web.css" rel="stylesheet">
<!-- Modernizr JS -->
<script src="js/js-modernizr-2.6.2.min.js"></script>
<!-- FOR IE9 below -->
<link rel="stylesheet" href="css/ket2.css">
<link rel="stylesheet" href="css/ket.css">
</head>
<body>
<div id="loader" class="fh5co-loader"></div>
<!-- SPLASHSCREEN -->
<div id="splashscreen">
<div class="splashscreen-bg"></div>
<div class="tengah">
<p>The Wedding Of</p>
2024-05-17 08:43:05 +07:00
<h1 style="font-size:80px;color:white;margin-top:-30px;">Arif &amp; Selvia </h1>
2022-11-20 23:31:05 +07:00
<a href="#" onclick="return OpenInvitation();">
<button class="btn-depan btn-4 btn-sep-depan icon-send popup1_open" data-popup-ordinal="0"
id="open_92089009">BUKA</button>
</a>
</div>
</div>
<!-- END SPLASHSCREEN -->
<!-- ============== MUSIK =============== -->
2024-05-17 08:43:05 +07:00
<audio autoplay loop="true" src="musik/musik.mp3" id="audio2"></audio>
2022-11-20 23:31:05 +07:00
<!-- ============== MUSIK =============== -->
<div style="display: none;" id="page"><a href="#"
class="js-fh5co-nav-toggle fh5co-nav-toggle fh5co-nav-white"><i></i></a>
<div id="fh5co-offcanvas"></div>
<header id="fh5co-header" class="fh5co-cover" role="banner" data-stellar-background-ratio="0.5"
style="background-position: -25px -25px;">
<div id="fh5co-header">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center">
<div class="display-t">
<div class="display-tc animate-box fadeIn animated-fast" data-animate-effect="fadeIn">
<div style="color:#fff;margin-top:250px;">
<p>The Wedding Of</p>
<h1 style="margin-top:-40px">
2024-05-17 08:43:05 +07:00
Arif &amp; Selvia </h1>
<p><span>2024 - 05 - 25</span></p>
2022-11-20 23:31:05 +07:00
<p>
<a href="#fh5co-couple" class="icon-scroll"></a>
</p>
</div>
<div style="clear:both">
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<div id="fh5co-couple">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center animate-box fadeInUp animated-fast">
<h1 style="color:#304058;font-size:50px">Hello!</h1>
<p><i style="white-space:pre-line;">Assalamu'alaikum warahmatullahi wabarakatuh
Izinkan kami mengundang sekaligus mengharapkan doa restu dari bapak/ibu dan
rekan-rekan dalam acara pernikahan kami</i>
</p>
</div>
</div>
<div class="couple-wrap animate-box fadeInUp animated-fast">
<div class="couple-half">
2024-05-17 08:43:05 +07:00
<div class="groom"> <img src="img/groom.png?nocache=1440" alt="groom" class="img-responsive">
2022-11-20 23:31:05 +07:00
</div>
<div class="desc-groom">
<h3 style="color:#304058;">
2024-05-17 08:43:05 +07:00
Arif Rahman Widiyatno</h3>
2022-11-20 23:31:05 +07:00
<!-- untuk deskripsi mempelai -->
2024-05-17 08:43:05 +07:00
<p style="text-align: center;">
<i style="font-size:12px;">Putra dari :</i>
2022-11-20 23:31:05 +07:00
<br>
2024-05-17 08:43:05 +07:00
Bapak Sudaryatno &amp; Ibu Enny Sudarwati
2022-11-20 23:31:05 +07:00
</p>
</div>
</div>
<p class="heart text-center"><i class="icon-heart2" style="color:#304058;"></i></p>
<div class="couple-half">
2024-05-17 08:43:05 +07:00
<div class="bride"> <img src="img/bride.png?nocache=1440" alt="groom" class="img-responsive">
2022-11-20 23:31:05 +07:00
</div>
<div class="desc-bride">
<h3 style="color:#304058;">
2024-05-17 08:43:05 +07:00
Selvia Imas Paramitha</h3>
2022-11-20 23:31:05 +07:00
<!-- untuk deskripsi mempelai -->
2024-05-17 08:43:05 +07:00
<p style="text-align: center;"><i style="font-size:12px;">Putri dari :</i>
2022-11-20 23:31:05 +07:00
<br>
2024-05-17 08:43:05 +07:00
Bapak Antonius Tatang Eko Asmoko &amp; Ibu RR. Arry Kusumastuti
2022-11-20 23:31:05 +07:00
</p>
</div>
</div>
</div>
<div class="col-md-12" style="text-align:center;font-size:12px;">
<br><i style="white-space:pre-line;">''
Dan di antara tanda-tanda kekuasaan-Nya ialah Dia menciptakan untukmu isteri-isteri dari
jenismu sendiri, supaya kamu cenderung dan merasa tenteram kepadanya, dan dijadikan-Nya
diantaramu rasa kasih dan sayang. Sesungguhnya pada yang demikian itu benar-benar
terdapat tanda-tanda bagi kaum yang berfikir.
''
QS Ar-Rum : 21</i>
</div>
</div>
</div>
<!-- ============== PHP GET DATA TANGGAL =============== -->
<!-- ============== PHP GET DATA TANGGAL =============== -->
<div id="fh5co-event" class="fh5co-bg paralax-acara" style="background-color:#304058; min-height:0px;">
<div class="overlay"></div>
<div class="container">
<!--
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center animate-box">
<h2 style="color:#fff;font-size:30px">Wedding Events</h2>
</div>
</div>-->
<div class="row">
<div class="display-t">
<div class="display-tc">
<div class="col-md-10 col-md-offset-1">
<div class="col-md-6 col-sm-6 text-center" style="margin-bottom:10px;">
<div class="event-wrap animate-box fadeInUp animated-fast">
<h3>Akad</h3>
<div class="event-col">
<i class="icon-clock"></i>
<span>
2024-05-17 08:43:05 +07:00
18.30 - 19.30 </span>
2022-11-20 23:31:05 +07:00
</div>
2024-05-17 08:43:05 +07:00
<div class="event-col"> <i class="icon-calendar"></i> <span>Sabtu, 25
Mei 2024</span> </div>
2022-11-20 23:31:05 +07:00
<p>
<label style="font-weight:normal; font-size:22px;">
2024-05-17 08:43:05 +07:00
Favehotel Sidoarjo </label>
2022-11-20 23:31:05 +07:00
<br>
2024-05-17 08:43:05 +07:00
Jl. Jenggolo No.15, Pucang, Kec. Sidoarjo, Kabupaten Sidoarjo, Jawa Timur 61219
2022-11-20 23:31:05 +07:00
</p>
</div>
</div>
<div class="col-md-6 col-sm-6 text-center" style="margin-bottom:10px;">
<div class="event-wrap animate-box fadeInUp animated-fast">
<h3>Resepsi</h3>
<div class="event-col">
<i class="icon-clock"></i> <span>
2024-05-17 08:43:05 +07:00
19.30 - 21.00 </span>
2022-11-20 23:31:05 +07:00
</div>
2024-05-17 08:43:05 +07:00
<div class="event-col"> <i class="icon-calendar"></i> <span>Sabtu, 25
Mei 2024</span> </div>
2022-11-20 23:31:05 +07:00
<p>
<label style="font-weight:normal; font-size:22px;">
2024-05-17 08:43:05 +07:00
Favehotel Sidoarjo </label>
2022-11-20 23:31:05 +07:00
<br>
2024-05-17 08:43:05 +07:00
Jl. Jenggolo No.15, Pucang, Kec. Sidoarjo, Kabupaten Sidoarjo, Jawa Timur 61219
2022-11-20 23:31:05 +07:00
</p>
</div>
</div>
2024-05-17 08:43:05 +07:00
<!-- <div class="col-md-8 col-md-offset-2 text-center animate-box fadeInUp animated-fast">
2022-11-20 23:31:05 +07:00
<a href="https://youtu.be/Ev-Rgy8HabA" target="_blank"
class="streaming mdc-button mdc-button--raised">
<i class="material-icons mdc-button__icon">play_arrow</i>
LIVE STREAMING
</a>
2024-05-17 08:43:05 +07:00
</div> -->
2022-11-20 23:31:05 +07:00
</div>
</div>
</div>
</div>
</div>
</div>
2024-05-17 08:43:05 +07:00
<!-- <div id="fh5co-couple-story">
2022-11-20 23:31:05 +07:00
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center fh5co-heading animate-box fadeInUp animated-fast">
<h1 style="color:#304058;">Cerita Kita</h1>
</div>
</div>
<div class="row">
<div class="col-md-12 col-md-offset-0">
<ul class="timeline animate-box fadeInUp animated-fast">
2024-05-17 08:43:05 +07:00
GET DATA
ELSE
2022-11-20 23:31:05 +07:00
<li class="timeline-inverted animate-box fadeInUp animated-fast">
<div class="timeline-badge"
style="background-color:#304058; background-image:url(img/couple-1.png);">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h3 class="timeline-title">Pertama bertemu</h3>
<img src="img/album1.png" alt="img" class="timeline-img">
<span class="date">14 Januari 2020</span>
</div>
<div class="timeline-body">
<p>
Waktu Pertama Kali
Kulihat Dirimu Hadir
Rasa hati ini inginkan dirimu </p>
</div>
</div>
</li>
2024-05-17 08:43:05 +07:00
TUTUP PHP
GET DATA
2022-11-20 23:31:05 +07:00
<li class="animate-box fadeInUp animated-fast">
<div class="timeline-badge"
style="background-color:#304058; background-image:url(img/couple-1.png);">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h3 class="timeline-title">Jatuh Cinta</h3>
<img src="img/album2.png" alt="img" class="timeline-img">
<span class="date">15 Maret 2020</span>
</div>
<div class="timeline-body">
<p>
Hati tenang mendengar
suara indah menyapa
Geloranya hati ini
Tak ku sangka.. </p>
</div>
</div>
</li>
2024-05-17 08:43:05 +07:00
ELSE
ELSE
2022-11-20 23:31:05 +07:00
<li class="timeline-inverted animate-box fadeInUp animated-fast">
<div class="timeline-badge"
style="background-color:#304058; background-image:url(img/couple-1.png);">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h3 class="timeline-title">Ta'aruf</h3>
<img src="img/album3.png" alt="img" class="timeline-img"><span class="date">1
Mei 2020</span>
</div>
<div class="timeline-body">
<p>
Rasa ini.. tak tertahan..
Hati ini..slalu untukmu.. </p>
</div>
</div>
</li>
2024-05-17 08:43:05 +07:00
TUTUP PHP
GET DATA
2022-11-20 23:31:05 +07:00
<li class="animate-box fadeInUp animated-fast">
<div class="timeline-badge"
style="background-color:#304058; background-image:url(img/couple-1.png);">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h3 class="timeline-title">Khitbah</h3>
<img src="img/album4.png" alt="img" class="timeline-img">
<span class="date">16 Mei 2020</span>
</div>
<div class="timeline-body">
<p>
Terimalah lagu ini dari orang biasa
Tapi cintaku padamu luar biasa
Aku tak punya bunga
Aku tak punya harta
Yang ku punya hanyalah
Hati yang setia.. Tulus.. Padamu.. :) </p>
</div>
</div>
</li>
2024-05-17 08:43:05 +07:00
ELSE
TUTUP PHP
2022-11-20 23:31:05 +07:00
</ul>
</div>
</div>
</div>
2024-05-17 08:43:05 +07:00
</div> -->
2022-11-20 23:31:05 +07:00
<div id="fh5co-gallery" class="fh5co-section-gray">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center fh5co-heading animate-box fadeInUp animated-fast">
<h1 style="color:#304058;">Gallery</h1>
</div>
</div>
<div class="row row-bottom-padded-md">
<div class="col-md-12">
<ul id="fh5co-gallery-list">
<!-- GET DATA -->
<!-- GET DATA -->
<li class="one-third animate-box fadeIn animated-fast" data-animate-effect="fadeIn"
style="background-image: url(img/album1.png);">
<a href="img/album1.png" data-lightbox="roadtrip">
<div class="case-studies-summary"> <span></span>
<h2></h2>
</div>
</a>
</li>
<!-- CLOSE DATA -->
<!-- GET DATA -->
<li class="one-third animate-box fadeIn animated-fast" data-animate-effect="fadeIn"
style="background-image: url(img/album2.png);">
<a href="img/album2.png" data-lightbox="roadtrip">
<div class="case-studies-summary"> <span></span>
<h2></h2>
</div>
</a>
</li>
<!-- CLOSE DATA -->
<!-- GET DATA -->
<li class="one-third animate-box fadeIn animated-fast" data-animate-effect="fadeIn"
style="background-image: url(img/album3.png);">
<a href="img/album3.png" data-lightbox="roadtrip">
<div class="case-studies-summary"> <span></span>
<h2></h2>
</div>
</a>
</li>
<!-- CLOSE DATA -->
<!-- GET DATA -->
<li class="one-third animate-box fadeIn animated-fast" data-animate-effect="fadeIn"
style="background-image: url(img/album4.png);">
<a href="img/album4.png" data-lightbox="roadtrip">
<div class="case-studies-summary"> <span></span>
<h2></h2>
</div>
</a>
</li>
<!-- CLOSE DATA -->
<!-- GET DATA -->
2024-05-17 08:43:05 +07:00
<!-- <li class="one-third animate-box fadeIn animated-fast" data-animate-effect="fadeIn"
2022-11-20 23:31:05 +07:00
style="background-image: url(img/album5.png);">
<a href="img/album5.png" data-lightbox="roadtrip">
<div class="case-studies-summary"> <span></span>
<h2></h2>
</div>
</a>
2024-05-17 08:43:05 +07:00
</li> -->
2022-11-20 23:31:05 +07:00
<!-- CLOSE DATA -->
<!-- GET DATA -->
2024-05-17 08:43:05 +07:00
<!-- <li class="one-third animate-box fadeIn animated-fast" data-animate-effect="fadeIn"
2022-11-20 23:31:05 +07:00
style="background-image: url(img/album6.png);">
<a href="img/album6.png" data-lightbox="roadtrip">
<div class="case-studies-summary"> <span></span>
<h2></h2>
</div>
</a>
2024-05-17 08:43:05 +07:00
</li> -->
2022-11-20 23:31:05 +07:00
<!-- CLOSE DATA -->
<!-- GET DATA YT -->
2024-05-17 08:43:05 +07:00
<!-- <div class="videoWrapper" style="width:100%;">
2022-11-20 23:31:05 +07:00
<center>
<object data="https://www.youtube.com/embed/hrVyGEvVu7k"> </object>
</center>
2024-05-17 08:43:05 +07:00
</div> -->
2022-11-20 23:31:05 +07:00
<!-- CLOSE DATA -->
</ul>
</div>
</div>
</div>
</div>
<div id="fh5co-maps" class="fh5co-bg scrolltomap" style="background-color:#304058;">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center animate-box fadeInUp animated-fast">
<h1 class="color-putih" style="margin-top:30px;">Find Us</h1>
<p style="color:#fff;">
2024-05-17 08:43:05 +07:00
Favehotel Sidoarjo<br>
Jl. Jenggolo No.15, Pucang, Kec. Sidoarjo, Kabupaten Sidoarjo, Jawa Timur 61219 </p>
2022-11-20 23:31:05 +07:00
</div>
</div>
<div class="row">
<div class="display-t">
<div class="display-tc">
<div class="col-md-10 col-md-offset-1">
<div style="text-align:center;">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<style>
@media (max-width: 575.98px) {
.maps iframe {
width: 100%;
height: 350px;
}
}
@media (min-width: 576px) {
.maps iframe {
width: 100%;
height: 350px;
}
}
@media (min-width: 768px) {
.maps iframe {
width: 100%;
height: 450px;
}
}
@media (min-width: 992px) {
.maps iframe {
width: 100%;
height: 500px;
}
}
</style>
<div style="margin-bottom:50px;" id="maps">
<iframe width="100%" height="450px" frameborder="0" style="border:0"
2024-05-17 08:43:05 +07:00
src="https://www.google.com/maps/embed/v1/place?q=-7.439519213567163,112.7208059883155&amp;key=AIzaSyBkXrQtu34bjG_8Apa0cvNENa_7frfCE2w">
2022-11-20 23:31:05 +07:00
</iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
2024-05-17 08:43:05 +07:00
<!-- <footer>
2022-11-20 23:31:05 +07:00
<p> &copy; Copyright 2022, <a href="">MSN PRODUCTION - PT. Mulia Sejati Nusantara.</a> All Rights Reserved
</p>
2024-05-17 08:43:05 +07:00
</footer> -->
2022-11-20 23:31:05 +07:00
<!-- MUTE BUTTON -->
<a id="mute" href="#/" onclick="mute()" class="floatmute">
<i color="#fff" class="fa fa-volume-up my-float"></i>
</a>
<!-- MUTE BUTTON -->
</div>
<div class="gototop js-top">
<a href="#fh5co-header" class="js-gotop"><i class="icon-arrow-up"></i></a>
</div>
<script>
const splashscreen = document.getElementById("splashscreen")
const page = document.getElementById("page")
function OpenInvitation() {
2024-05-17 08:43:05 +07:00
let audio = document.getElementById("audio2");
audio.play();
2022-11-20 23:31:05 +07:00
splashscreen.style.display = "none"
page.style.display = "block"
}
</script>
<script src="js/2.1.3-jquery.min.js"></script>
<script src="js/js-bootstrap.min.js"></script>
<!-- jQuery -->
<!-- <script src="js/jquery.min.js"></script> -->
<!-- jQuery Easing -->
<script src="js/js-jquery.easing.1.3.js"></script>
<!-- JS AREA -->
<script src="js/moment-with-locales.js"></script>
<script src="js/lightbox.js"></script>
<!-- <script src="//cdn.jsdelivr.net/npm/less@3.13"></script> -->
<!-- Waypoints -->
<script src="js/js-jquery.waypoints.min.js"></script>
<!-- Carousel -->
<script src="js/js-owl.carousel.min.js"></script>
<!-- countTo -->
<script src="js/js-jquery.countTo.js"></script>
<!-- Stellar -->
<script src="js/js-jquery.stellar.min.js"></script>
<!-- Magnific Popup -->
<script src="js/js-jquery.magnific-popup.min.js"></script>
<script src="js/js-simplyCountdown.js"></script>
<!-- Main -->
<script src="js/js-main.js"></script>
<script src="js/js-index.js"></script>
<!-- VALIDASI DONASI -->
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script src="js/jquery.popupoverlay.min.js"></script>
<!--script mute-->
<script>
document.addEventListener("DOMContentLoaded", function (event) {
2024-05-17 08:43:05 +07:00
let audio = document.getElementById("audio2");
2022-11-20 23:31:05 +07:00
let button = document.getElementById('mute');
if (+localStorage.getItem('mute')) {
audio.muted = true;
button.innerHTML = '<i color="#000" class="fa fa-volume-off my-float"></i>';
audio.pause()
} else {
2024-05-17 08:43:05 +07:00
audio.volume = 1;
2022-11-20 23:31:05 +07:00
audio.play()
}
})
function mute() {
2024-05-17 08:43:05 +07:00
let audio = document.getElementById('audio2');
2022-11-20 23:31:05 +07:00
let button = document.getElementById('mute');
let isMute = +localStorage.getItem('mute');
if (!isMute) {
audio.muted = true;
audio.pause()
button.innerHTML = '<i color="#000" class="fa fa-volume-off my-float"></i>';
localStorage.setItem('mute', 1);
} else {
audio.muted = false;
2024-05-17 08:43:05 +07:00
audio.volume = 1;
2022-11-20 23:31:05 +07:00
audio.play()
button.innerHTML = '<i color="#fff" class="fa fa-volume-up my-float"></i>';
localStorage.setItem('mute', 0);
}
}
</script>
<!--end script mute-->
</body>
2022-11-20 23:56:12 +07:00
</html>