-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
345 lines (327 loc) · 20.7 KB
/
Copy pathindex.html
File metadata and controls
345 lines (327 loc) · 20.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
<!DOCTYPE html>
<html lang="en">
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fathul & Ririn Wedding Invitation</title>
<link rel="icon" href="assets/img/favicon.ico">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/uikit@latest/dist/css/uikit.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link rel="stylesheet" type="text/css" href="assets/css/color.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" type="text/javascript"></script>
</head>
<body uk-scrollspy="target: cls: uk-animation-fade; delay: 150" oncontextmenu="return false" onload="setInterval(step,100)">
<section class="uk-section uk-section-secondary banner" id="home">
<div class="uk-container">
<hr class="uk-divider-vertical" style="border: 0px; height: 50px;">
<div style="background:rgba(255, 255,255, 0.5) ; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); opacity:1;">
<div class="banner-trans">
<div>
<hr class="uk-divider-vertical" style="border: 0px; height: 20px;">
<p class="uk-text-center wedding-text">THE WEDDING OF</p>
</div>
<div style="margin-top:70px;" >
<h2 class="couple-text" style=" color:#333; " > Fathul </h2>
<h2 class="couple-text" style=" color:#333; "> & </h2>
<h2 class="couple-text" style=" color:#333; "> Ririn </h2>
<p class="uk-text-center" style="font-size:14px; color:#333; margin-top:35px">
<span class="padding-date">NOV</span>
<span class="margin-date">21</span>
<span class="padding-date">2021</span>
</p>
<p class="uk-text-center" style="font-size:14px; color:#333;">
Kediaman Mempelai Wanita
<br>Jl. Raya Bromo RT 07 RW 06 Desa Triwung Kidul
<br>Kec. Kademangan Kota Probolinggo
</p>
<hr class="uk-divider-vertical divider-banner-bot" >
</div>
</div>
</div>
<hr class="uk-divider-vertical" style="border: 0px;">
</div>
</section>
<section id="mempelai" class="uk-section uk-section-default bg-couple">
<div class="uk-container uk-container-small uk-margin-top">
<img class="uk-align-center" src="assets/img/bismillah.png" style=" opacity: 0.7; width: 212px;">
<P class="uk-text-center uk-margin-small-bottom uk-margin-small-top">Assalamualaikum warahmatullahi wabarakatuh </p>
<P class="uk-text-justify uk-margin-large-bottom uk-margin-small-top">Dengan memohon rahmat dan ridho-Mu Ya Allah, kami bermaksud menyelenggarakan resepsi pernikahan putra dan putri kami.</p>
<div>
<div class="uk-child-width-1-1 uk-child-width-1-3@m uk-text-center" uk-grid>
<div class="thumb-fitur">
<h3 class="uk-margin-remove-bottom uk-margin-top " style="font-size:28px;">Achmad Fathullah, S.Kom
</h3>
<p class="uk-text-small" style="margin-top:5px;">Putra kedua dari Bapak H. Abdul Fatah dan Ibu Hj. Siti Juwariyah</p>
</div>
<div class="thumb-fitur">
<h3 class="remove-top-bottom" style="font-size:40px;">&</h3>
</div>
<div class="thumb-fitur">
<h3 class="uk-margin-remove-bottom margin-top-name" style="font-size:28px;">Ririn Dwi Cahyani, S.Si
</h3>
<p class="uk-text-small" style="">Putri kedua dari Bapak H. Samukri (Alm) dan Ibu Hj. Musrifa</p>
</div>
</div>
</div>
</div>
</section>
<section id="acara" class="uk-section uk-section-secondary acara">
<div class="uk-container uk-container-small">
<h2 class="uk-text-center uk-margin-bottom midnight " style="padding-top:20px;color:#333;">Save the Date</h2>
<div class="uk-width-1-1 uk-text-center" style="color:#fff">
<div class="uk-grid-small uk-child-width-expand" uk-grid>
<div>
<p class="uk-card-title yn-color2" style="margin:8px 0 8px 0; font-weight:500; color:#333;" uk-slideshow-parallax="y: 50,0,0; opacity: 1,1,0">Akad</p>
<p style="margin:0px; font-weight:500; color:#333;">21 November 2021</p>
<p style="margin:4px 0px 4px 0px; font-size:13px; color:#333;">(09.00 WIB)</p>
</div>
<div>
<p class="uk-card-title 2" style="margin:8px 0 8px 0;color:#333; font-weight:500;" uk-slideshow-parallax="y: 50,0,0; opacity: 1,1,0">Resepsi</p>
<p style="margin:0px; font-weight:500;color:#333;">21 November 2021</p>
<p style="margin:4px 0px 16px 0px; font-size:13px;color:#333;">(13.00 - 16.00 WIB)</p>
</div>
</div>
<div class="uk-grid-small uk-flex-center uk-child-width-auto uk-margin-top" uk-grid uk-countdown="date: 2020-09-11T09:00:00+07:00" style="font-weight:500">
<div>
<div class="uk-countdown-number" id="days" style="color:#333;"></div>
<div class="uk-countdown-label uk-text-center " style="color:#333;">Tahun</div>
</div>
<div class="uk-countdown-separator"></div>
<div>
<div class="uk-countdown-number" id="hours" style="color:#333;"></div>
<div class="uk-countdown-label uk-text-center " style="color:#333;">Bulan</div>
</div>
<div class="uk-countdown-separator"></div>
<div>
<div class="uk-countdown-number" id="minutes" style="color:#333;"></div>
<div class="uk-countdown-label uk-text-center " style="color:#333;">Hari</div>
</div>
</div>
<hr class="style-2w">
<p style="font-size:14px; margin: 0px 0 16px 0;color:#333;">
Suatu kehormatan dan kebahagiaan bagi kami apabila Bapak/Ibu/Saudara/i berkenan hadir untuk memberikan do'a restu kepada putra-putri kami.
</p>
<div class="mapouter">
<div class="gmap_canvas">
<iframe width="600" height="500" id="gmap_canvas" src="https://maps.google.com/maps?q=alfamart%20triwung%20kidul&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>
</div>
<p style="font-size:14px; text-align:center; margin: 8px 0 0px 0; color:#333;">
Kediaman Mempelai Wanita
<br>Jl. Raya Bromo RT 07 RW 06 Desa Triwung Kidul
<br>Kec. Kademangan Kota Probolinggo
</p>
<a href="https://goo.gl/maps/zoDzYkFeMHkMakZY6" class="uk-button uk-button-default uk-button-small btn-white" style="margin-top:16px; padding: 4px 16px; border-radius: 20px;" target="_blank">Petunjuk Arah
<span uk-icon="icon: arrow-right"></span></a>
</div>
</div>
</section>
<section id="lovestory" class="uk-section uk-section-default love-story">
<div class="uk-container uk-container-small">
<h2 class="uk-text-center uk-margin-bottom midnight"> Our Love Story </h2>
<h3 style="font-size:28px;text-align: center;">Tahun 2019
</h3>
<p style="font-size:18px; color:#333;text-align: justify">
Bismillahirahmanirrahim , dengan menyebut nama Allah , dzat yang penuh dengan rahmat dan rahimnya
yang begitu luas, izinkan kami menceritakan awal pertemuan kami hingga kami ditakdirkan untuk bersama.
Tidak seperti sepasang kekasih pada umumnya yang biasanya mengawali hubungan dengan pacaran yang cukup lama
atau paling tidak pernah bertemu disuatu tempat , menjadi teman saat masih menempuh jalur pendidikan ataupun
jalur pertemuan yang lain pada umumnya. Kami mengawali hubungan ini dengan berawal dari percakapan komen
dari story instagram. Tidak banyak yang kami bicarakan hanya saja kebetulan , kami memiliki ustad yang sama ,
yaitu ustad Nazili al-hafidz. Untuk saya beliau adalah ustad saya selama menjadi santriwati Rumah Tahfidz
Mahasiswi Daarul Qur'an Malang sementara dari mas , beliau adalah ustad mengaji saat usia anak-anak. Dari situ
kami mengenal satu sama lain namun tidak banyak yang kami bicarakan.
</p>
<img class="center-img-love-story" src="https://img.icons8.com/dotty/50/000000/month-in-love.png"/>
<h3 style="font-size:28px;text-align: center;">Tahun 2020
</h3>
<p style="font-size:18px; color:#333;text-align: justify">
Pada tahun ini kami hampir sudah tidak pernah berhubungan sama sekali karena kebetulan kami masing-masing
sedang disibukkan dengan urusan lain. Saya sedang fokus menyelesaikan tugas akhir saya sementara mas sedang
fokus dengan karir yang ia miliki. Namun dari mas sendiri bilang kalau dia masih sering stalking melihat story saya.
</p>
<img class="center-img-love-story" src="https://img.icons8.com/dotty/50/000000/month-in-love.png"/>
<h3 style="font-size:28px;text-align: center;">Januari 2021
</h3>
<p style="font-size:18px; color:#333;text-align: justify">
Setelah beberapa lama kami tidak berkomunikasi , mas mulai intens menghubungi saya via dm , lebih seringnya
ia komen akan suatu hal yang saya posting ataupun membahas hal-hal lain dan mulai nyambung satu sama lain
hingga kami bisa dibilang akrab dalam berkomunikasi kala itu. Mas sendiri sudah mulai ada rasa pada saat itu
karena dirasa saya sudah memenuhi beberapa kriteria calon pasangan yang sedang mas cari.
</p>
<img class="center-img-love-story" src="https://img.icons8.com/dotty/50/000000/month-in-love.png"/>
<h3 style="font-size:28px;text-align: center;">Juli 2021
</h3>
<p style="font-size:18px; color:#333;text-align: justify">
Pada bulan ini kisah kami mulai beranjak ke hubungan yang lebih serius. Di saat momen saya akan boyong
dan akan wisuda, yang mana hal tersebut saya share sebagai ig story. Mas Fathul memulai percakapan dengan
meminta nomor whatsApp saya dan ingin mengenal melalui via WhatsApp. Setelah beberapa hari kami
mengobrol via WhatsApp dan menceritakan ke mas bahwa akan boyong pada hari lusa. Mas berinisiatif memberikan
sebuah gift dengan maksud ingin memberi penghargaan akan diwisudanya saya pada tahun ini. Tanpa disangka berawal
dari gift tersebut , mas mengungkapkan perasaannya bahwa ia ingin menjadikan saya sebagai pendamping hidupnya seumur hidup.
Bingung gundah dan perasaan lainnya tidak bisa terbayang kala itu , karena memang dari saya sendiri masih belum pernah ketemu
dengan mas dan hanya via chat sosmed saja. Namun dari mas menyarankan agar menjawab ajakan keseriusan beliau dengan meminta
istikhoroh ke ustad atau guru masing masing dari kami. Untuk saya sendiri saya meminta bantuan istikhoroh ke ustad Nazili
selaku ustad saya selama mondok di RTMI Daqu sementara mas ke romo KH. Baidlowi Muslich. Selama kurang lebih
2 minggu , dari mas sudah ada jawaban dari romo kyai dengan jawaban Asih / Bagus yang artinya bisa dibilang cocok
untuk dilanjutkan ke jenjang serius. Sementara dari saya masih belum meminta bantuan ke ustad karena memang rasa kebingungan
yang begitu tinggi waktu itu. Namun karena usaha mas yang menurut saya sudah sangat serius, saya pun memberanikan diri meminta
tolong istikhoroh ke ustad Nazili dan Alhamdulillah hasilnya dinyatakan bagus. Dengan hati yang mantap saya
pun memutuskan untuk menjawab ajakan keseriusan mas karena usaha beliau yang begitu serius
dan tulus. Setelah memberikan jawaban mas berencana akan segera menemui orang tua saya
di Probolinggo secepat mungkin yaitu h+3 idul adha 2021.
</p>
<img class="center-img-love-story" src="https://img.icons8.com/dotty/50/000000/month-in-love.png"/>
<h3 style="font-size:28px;text-align: center;">21 Agustus 2021
</h3>
<p style="font-size:18px; color:#333;text-align: justify">
Qadarullah , Allah maha pemberi rencana yang maha baik dan adil. Mas Fathul tertunda ke Probolinggo dikarenakan
beliau sedang terpapar virus Corona yang cukup lama dan butuh penanganan yang intens selama 2 minggu lamanya.
Setelah 2 Minggu dan test swab antigen menyatakan bahwa mas sudah negatif corona virus, mas pun melanjutkan niatnya untuk
mendatangi orang tua saya pada tanggal 21 Agustus 2021. Pada tanggal inilah kami bertemu untuk pertama kalinya dan saling bertatap muka.
Alhamdulillah pada hari itu juga orang tua saya memberi restu hubungan kami dan memperkenankan mas untuk membawa orang tua beliau untuk melangsungkan
proses selanjutnya yaitu Khitbah
</p>
<img class="center-img-love-story" src="https://img.icons8.com/dotty/50/000000/month-in-love.png"/>
<h3 style="font-size:28px;text-align: center;">25 September 2021
</h3>
<p style="font-size:18px; color:#333;text-align: justify">
Kami melangsungkan proses khitbah (tunangan) dengan hikmat dan disambut penuh suka cita dari keluarga besar saya probolinggo
</p>
<a href="https://intip.in/arinalovestory"><img class="center-img-love-story" src="https://img.icons8.com/dotty/50/000000/month-in-love.png"/></a>
<h3 style="font-size:28px;text-align: center;">17 Oktober 2021
</h3>
<p style="font-size:18px; color:#333;text-align: justify">
Kami melangsungkan proses balik omongan dengan hikmat dan disambut penuh suka cita dari keluarga besar mas di Malang.
Dan dipada saat ini dari keluarga mas sudah menentukan tanggal baik untuk hari H kami melaksanakan akad.
</p>
<a href="https://intip.in/balikOmongan"><img class="center-img-love-story" src="https://img.icons8.com/dotty/50/000000/month-in-love.png"/></a>
<h3 style="font-size:28px;text-align: center;">Akad Nikah
</h3>
<p style="font-size:18px; color:#333;text-align: justify">
Dari keluarga probolinggo perlu berdiskusi akan tanggal baik tersebut dan ketemulah tanggal akad kami
yang akan berlangsung pada tanggal 21 November 2021
Alhamdulillahi rabbil alamin 😊
</p>
<a href="https://intip.in/preweddingarina"><img class="center-img-love-story" src="https://img.icons8.com/dotty/50/000000/month-in-love.png"/></a>
<br>
</div>
</section>
<section id="bukutamu" class="uk-section uk-section-default">
<div class="uk-container uk-container-small">
<h2 class="uk-text-center uk-margin-bottom midnight"> Kata Mutiara </h2>
<h3 class="uk-text-center">Pernikahan yang hebat bukanlah ketika pasangan sempurna berkumpul bersama. Melainkan ketika pasangan yang tidak sempurna belajar untuk menikmati perbedaan mereka.</h3>
<!-- <button class="uk-button uk-button-success uk-align-center" type="button" style="margin-bottom:0px;" href="#buku-tamu" uk-toggle id="list-tamu">ISI BUKU TAMU</button>-->
<br>
</div>
</section>
<div id="navbar" class="uk-section uk-section-xsmall uk-section-muted uk-position-bottom uk-position-fixed bg-menu" style="z-index:121; bottom:0;">
<div class="uk-container uk-container-small">
<div class="uk-text-small menu">
<nav class="" uk-navbar>
<div class="uk-navbar-center">
<ul class="uk-navbar-nav" uk-scrollspy-nav="closest: li; scroll: true">
<li class="icon-menu"><a href="#home" uk-scroll><img src="assets/icon/home.svg"></a></li>
<li class="icon-menu"><a href="#mempelai" uk-scroll><img src="assets/icon/couple.svg"></a></li>
<li class="icon-menu"><a href="#acara" uk-scroll><img src="assets/icon/calendar.svg"></a></li>
<li class="icon-menu"><a href="#lovestory" uk-scroll><img src="https://img.icons8.com/dotty/50/000000/month-in-love.png"></a></li>
<li class="icon-menu"><a href="#bukutamu" uk-scroll><img src="assets/icon/rsvp.svg"></a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<div class="music-box">
<button class="music-box-toggle-btn">
<audio id='song' autoplay loop>
<source src="assets/sound/music.m4a">
</audio>
<button class="music" id="unmute-sound">
<span class="uk-icon uk-icon-image" style="background-image: url(assets/img/unmute2.png);"></span>
</button>
<button class="music" id="mute-sound">
<span class="uk-icon uk-icon-image" style="background-image: url(assets/img/mute2.png);"></span>
</button>
</button>
</div>
<div id="modal" uk-modal bg-close="false">
<div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical uk-text-center " style="background: transparent; background-image: url('assets/img/invitation-card.png'); padding:20px 15px 60px 15px; background-position: center;
background-repeat: unset;
background-size: cover; border-radius:16px; height: 400px;
width: 342px;
">
<p class="uk-text-medium uk-margin-remove-bottom txt-simple" style="margin-top:70px;">Hai</p>
<p class="uk-text-medium uk-margin-remove-bottom txt-simple" style="margin-top:10px; text-transform: uppercase;">
<b> Temanku yang kami sayangi </b>
</p>
<p class="uk-text-medium txt-simple" style="margin-top: 10px;">Anda kami undang ke pernikahan kami</p>
<h2 class="uk-text-center uk-margin-remove" style="line-height:1; margin-bottom:9px !important; font-size:28px;">
Fathul & Ririn </h2>
<p class="uk-text-center">
<button id="play-sound" class="uk-button uk-button-primary uk-modal-close" type="button" style="
border-radius: .5rem;
background-color: #fff;
color: #333;
margin-top: 86px;
line-height: 34px;
padding-top: 4px;
font-weight: 400;">OPEN INVITATION</button>
</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/uikit@latest/dist/js/uikit.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@latest/dist/js/uikit-icons.min.js" type="text/javascript"></script>
<script type="text/javascript">
var prevScrollpos = window.pageYOffset;
window.onscroll = function () {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.bottom = "0";
} else {
document.getElementById("navbar").style.bottom = "-78px";
}
prevScrollpos = currentScrollPos;
}
$(function () {
var modal = UIkit.modal("#modal");
modal.show();
});
document.getElementById('play-sound').addEventListener('click', function (event) {
document.getElementById('song').play();
});
$("#status").change(function() {
if ($(this).val() == "hadir") {
$('#person').show();
} else {
$('#person').hide();
}
});
$("#seeAnotherField").trigger("change");
</script>
<script>
document.onkeydown = function(e) {
if(e.keyCode == 123) {
return false;
}
if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)){
return false;
}
if(e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)){
return false;
}
if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)){
return false;
}
if(e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0)){
return false;
}
}
</script>
<script type="text/javascript" src="assets/js/main.js"></script>
<script src="https://ajax.cloudflare.com/cdn-cgi/scripts/7089c43e/cloudflare-static/rocket-loader.min.js" data-cf-settings="1dafe858be15d8421fab611c-|49" defer=""></script></body>
</html>