index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Wedding - Ubaidillah &amp; Saidah Melinda</title>
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" type="image/png" href="images/favicon.png" />
    <link rel="icon" type="image/png" href="images/favicon.png" />
</head>

<body>
    <!-- Preloader-->
	<div id="preloader">
        <div id="status">
            <img src="images/wedding-loading.gif" alt="" />
        </div>
    </div> 
    <!-- Main Section -->
    <div class="wd_main_container">
        <section class="bubble-header">
            <div id="large-header" class="large-header">
                <canvas id="demo-canvas"></canvas>
            </div>
            <div class="wd_img_overlay text-center">
                <img src="images/Heart.svg" alt="" class="wd_svg_response" />
                <div class="wd_responsive">
                    <div class="container">
                        <div class="col-lg-6 col-md-6 col-lg-offset-3 col-md-offset-3">
                            <h2>Ubaidillah & Saidah Melinda</h2>
                            <h3>Getting Married</h3>
                            <br>
                            <h4><span class="fa fa-calendar"></span>04 April 2021</h4>
                            <div class="wd_scroll_wrapper onclick_show_site">
                                <p>Acara Selengkapnya</p>
                                <div class="wd_scroll">
                                    <a href="#">|</a>
                                </div>
                            </div>

                            <a href="#" class=""><i class="fa fa-long-arrow-down"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!-- Main Section end -->
    <!-- Site content start -->
    <div class="page">
        <span class="menu_toggle">
    <i class="menu_open fa fa-bars fa-lg"></i>
    <i class="menu_close fa fa-times fa-lg"></i>
  </span>
        <ul class="menu_items">
            <li><a class="page-scroll active" href='#1'><i class="icon fa fa-heart fa-2x"></i>Home</a></li>
            <li><a class="page-scroll" href='#4'><i class="icon fa fa-heart fa-2x"></i>Acara</a></li>
            <li><a class="page-scroll" href='#6'><i class="icon fa fa-heart fa-2x"></i>RSVP</a></li>
        </ul>
        <div class="content">
            <div class="content_inner">
                <div class="rev_slider_wrapper" id="1">
                    <div class="ws_counter">
                        
                    </div>
                    <!-- START REVOLUTION SLIDER 5.0 auto mode -->
                    <div id="rev_slider" class="rev_slider" data-version="5.0">
                        <ul>
                            <!-- SLIDE  -->
                            <li data-transition="fade">
							<img src="images/undangan.jpg"  alt=""></li>
							<!-- SLIDE  -->
							<li data-transition="fade">
								<img src="images/slider/01.jpg"  alt="">
							</li>
							<!-- SLIDE  -->
							<li data-transition="fade">
								<img src="images/slider/03.jpg"  alt="">
							</li>
							<!-- SLIDE  -->
							<li data-transition="fade">
								<img src="images/undangan.jpg"  alt="">
							</li>
                        </ul>

                    </div>
                    <!-- END REVOLUTION SLIDER -->
                </div>
                <!-- END REVOLUTION SLIDER WRAPPER -->
                
                
                <!-- EVENT SECTION START -->
                <div class="wd_story_section" id="4">
                    <div class="container">
                        <div class="wd_section_heading">
                            <h1 class="text-center">Detail Acara</h1>
                            <span class="wd_dot_heading"></span>
                            <div class="clock1"></div>
                        </div>
                        <div class="col-lg-10 col-md-10 col-lg-offset-1 col-md-offset-1 text-center bottom_padder40">
                            <p>Kami telah melaksanakan acara resepsi pernikahan kami, dan insyaallah kami akan melaksanakan tasyakuran pernikahan kami sekaligus Walimatul Haml.</p>
                            <br /> Silahkan Klik Foto Untuk Melihat Detail Acara Dan Tempat.
                        </div>
                      <div class="col-lg-4 col-md-4 col-sm-6 col-lg-offset-0 col-md-offset-0 col-sm-offset-0 col-xs-offset-2 col-xs-8 wd_card">
                            <div class="wd_event_section text-center">
                                <h2>Ceremony</h2>
                                <div class="wd_item wd_square effect9 bottom_to_top">
                                    <a href="#">
                                        <div class="img"><img src="images/obet-idah.jpg" alt=""/>
                                        </div>
                                        <div class="wd_event_info">
                                            <div class="wd_event_info_back">
                                                <h3>Susunan Acara</h3>
                                                <div class="info_box">
                                                    <span class="wd_label">Tanggal :</span>
                                                    <span class="wd_text">04 April 2021</span>
                                                </div>
                                                <div class="info_box">
                                                    <span class="wd_label">Pukul :</span>
                                                    <span class="wd_text">08.00 s/d Selesai</span>
                                                </div>
                                                <div class="info_box">
                                                    <span class="wd_label">Lokasi :</span>
                                                    <span class="wd_text">Kp. Kutruk Rt.001/02 Ds. Kutruk Kec. Jambe</span>
                                                </div>
                                                <div class="info_box">
                                                    <span class="wd_label">Kabupaten :</span>
                                                    <span class="wd_text">Tangerang</span>
                                                </div>
                                                <div class="info_box_last">
                                                    <div class="map_fancybox">
                                                        <div id="mapBox2">
                                                            <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d991.4486682698056!2d106.498099!3d-6.290696!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNsKwMTcnMjYuNSJTIDEwNsKwMjknNTMuMiJF!5e0!3m2!1sid!2sid!4v1617270567237!5m2!1sid!2sid" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe><br /><small><a href="https://www.google.com/maps/place/6%C2%B017'26.5%22S+106%C2%B029'53.2%22E/@-6.290696,106.498099,19z/data=!4m5!3m4!1s0x0:0x0!8m2!3d-6.2906944!4d106.4981111" target="_blank" >Ikuti Di Google Map</a></small>
                                                        </div>
                                                    </div>
                                                    <a class="inline" href="#mapBox2"><i class="fa fa-map-marker"></i><span class="">Lihat Di G-Maps</span></a>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- EVENT SECTION END -->
                
                
                <!-- RSVP SECTION START -->
                <div class="wd_story_section bottom_padder80" id="6">
                    <div class="wd_section_heading">
                        <h1 class="text-center">RSVP (Buku Tamu)</h1>
                        <span class="wd_dot_heading"></span>
                    </div>
                    <div class="container">
                        <div class="col-lg-10 col-md-10 col-lg-offset-1 col-md-offset-1 text-center">
                            <p>Silahkan Untuk Mengisi Buku Tamu Jika Berkenan, Terima Kasih.</p>
                        </div>
                        <div class="wd_rsvp_section">
                            <form id="theForm" class="simform" autocomplete="off" action="" method="post">
                                <input type="hidden" name="recipient" value="upasana.jain@himanshusofttech.com">
                                <input type="hidden" name="subject" value="Wedding Planner" />
                                <div class="simform-inner">
                                    <ol class="questions">
                                        <li>
                                            <span><label for="q1">Siapa Nama Mu?</label></span>
                                            <input id="q1" name="name" type="text" />
                                        </li>
                                        <li>
                                            <span><label for="q2">Email Mu?</label></span>
                                            <input id="q2" name="email" type="text" data-validate="email" />
                                        </li>
                                        <li>
                                            <span><label for="q5">Akan Menghadiri Acara?</label></span>
                                            <input id="q5" name="events" type="text" />
                                        </li>
                                    </ol>
                                    <!-- /questions -->
                                    <button class="submit" type="submit">Kirim Jawaban</button>
                                    <div class="controls">
                                        <button class="next fa fa-long-arrow-right"></button>
                                        <div class="progress"></div>
                                        <span class="number">
								<span class="number-current"></span>
                                        <span class="number-total"></span>
                                        </span>
                                        <span class="error-message"></span>
                                    </div>
                                    <!-- / controls -->
                                </div>
                                <!-- /simform-inner -->
                                <span class="final-message"></span>
                            </form>
                            <!-- /simform -->
                        </div>
                        <!--form -->
                    </div>
                </div>
                <!-- RSVP SECTION START -->
                <!-- FOOTER SECTION START -->
                <div class="wd_footer_section">
                    <div class="container text-center">
                        <ul class="wd_social_icons">
                            <li><a href="https://facebook.com/ubay.pangestu" target="_blank"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="https://twitter.com/ubay_pangestu" target="_blank"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="https://www.instagram.com/ubay.pangestu/" target="_blank"><i class="fa fa-instagram"></i></a></li>
                        </ul>
                        <p> &#169; 2021 The Wedding Ubaidillah & Saidah Melinda - Design by <a href="https://www.abrahamyusuf.my.id/" target="_blank">Abraham Yusuf</a><p>
                    </div>
                </div>
                <!-- FOOTER SECTION END -->
            </div>
        </div>
    </div>
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/animation-bubble.js"></script>
    <script type="text/javascript" src="js/plugins/flipclock/flipclock.js"></script>
    <script type="text/javascript" src="js/plugins/smoothscroll/smoothscroll.js"></script>
    <!-- REVOLUTION JS FILES -->
    <script type="text/javascript" src="js/plugins/revolution/js/jquery.themepunch.tools.min.js"></script>
    <script type="text/javascript" src="js/plugins/revolution/js/jquery.themepunch.revolution.min.js"></script>
    <script type="text/javascript" src="js/plugins/revolution/js/revolution.extension.actions.min.js"></script>
    <script type="text/javascript" src="js/plugins/revolution/js/revolution.extension.carousel.min.js"></script>
    <script type="text/javascript" src="js/plugins/revolution/js/revolution.extension.kenburn.min.js"></script>
    <script type="text/javascript" src="js/plugins/revolution/js/revolution.extension.layeranimation.min.js"></script>
    <script type="text/javascript" src="js/plugins/revolution/js/revolution.extension.migration.min.js"></script>
    <script type="text/javascript" src="js/plugins/revolution/js/revolution.extension.navigation.min.js"></script>
    <script type="text/javascript" src="js/plugins/revolution/js/revolution.extension.parallax.min.js"></script>
    <script type="text/javascript" src="js/plugins/revolution/js/revolution.extension.slideanims.min.js"></script>
    <script type="text/javascript" src="js/plugins/revolution/js/revolution.extension.video.min.js"></script>
    <script type="text/javascript" src="js/plugins/fancybox/jquery.fancybox.js"></script>
    <script type="text/javascript" src="js/plugins/countto/jquery.countTo.js"></script>
    <script src="js/plugins/smoothscroll/smoothscroll.js" type="text/javascript"></script>
    <script src="js/plugins/owl/owl.carousel.min.js" type="text/javascript"></script>
    <script src="js/plugins/rsvp/modernizr.custom.js"></script>
    <script src="js/plugins/rsvp/classie.js"></script>
    <script src="js/plugins/rsvp/step_form.js"></script>
    <script src="js/jquery.easing.min.js"></script>
    <script src="js/plugins/stellar/jquery.stellar.js"></script>
    <script src="js/plugins/rsvp/modernizr.hover.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>
</body>

</html>