View file invits/our_story.html

File size: 21.47Kb
<!doctype html>
<html class="no-js" lang="zxx">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Wedding HTML-5 Template </title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="manifest" href="site.webmanifest">
		<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico">

		<!-- CSS here -->
            <link rel="stylesheet" href="assets/css/bootstrap.min.css">
            <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
            <link rel="stylesheet" href="assets/css/flaticon.css">
            <link rel="stylesheet" href="assets/css/slicknav.css">
            <link rel="stylesheet" href="assets/css/animate.min.css">
            <link rel="stylesheet" href="assets/css/magnific-popup.css">
            <link rel="stylesheet" href="assets/css/fontawesome-all.min.css">
            <link rel="stylesheet" href="assets/css/themify-icons.css">
            <link rel="stylesheet" href="assets/css/slick.css">
            <link rel="stylesheet" href="assets/css/nice-select.css">
            <link rel="stylesheet" href="assets/css/style.css">
            <link rel="stylesheet" href="assets/css/responsive.css">
   </head>

   <body>
       
    <!-- Preloader Start -->
    <div id="preloader-active">
        <div class="preloader d-flex align-items-center justify-content-center">
            <div class="preloader-inner position-relative">
                <div class="preloader-circle"></div>
                <div class="preloader-img pere-text">
                    <img src="assets/img/logo/logo.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <!-- Preloader Start -->

    <header>
        <!-- Header Start -->
       <div class="header-area">
            <div class="main-header header-sticky">
                <div class="container">
                    <div class="row align-items-center">
                        <!-- Logo -->
                        <div class="col-xl-2 col-lg-2 col-md-2">
                            <div class="logo">
                                <a href="index.html"><img src="assets/img/logo/logo.png" alt=""></a>
                            </div>
                        </div>
                        <div class="col-xl-10 col-lg-10 col-md-10">
                            <!-- Main-menu -->
                            <div class="main-menu f-right d-none d-lg-block">
                                <nav>                              
                                    <ul id="navigation">    
                                        <li><a href="our_story.html"> Our Story</a></li>
                                        <li><a href="location.html">Location</a></li>
                                        <li><a href="gallery.html">Gallery</a></li>
                                        <li><a href="booking.html">Guest Book</a></li>
                                        <li><a href="#">Pages</a>
                                            <ul class="submenu">
                                                <li><a href="blog.html">Blog</a></li>
                                                <li><a href="single-blog.html">Blog Details</a></li>
                                                <li><a href="elements.html">Element</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="contact.html">contact</a></li>
                                    </ul>
                                </nav>
                            </div>
                        </div> 
                        <!-- Mobile Menu -->
                        <div class="col-12">
                            <div class="mobile_menu d-block d-lg-none"></div>
                        </div>
                    </div>
                </div>
            </div>
       </div>
        <!-- Header End -->
    </header>

    <main>
        <!-- slider Area Start-->
        <div class="slider-area ">
            <!-- Mobile Menu -->
            <div class="single-slider slider-height2  hero-overly d-flex align-items-center" data-background="assets/img/hero/about_hero.jpg">
                <div class="container">
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="hero-cap text-center">
                                <h2>Our Story</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- slider Area End-->

        <!-- Our Story Start -->
        <div class="Our-story-area story-padding">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="story-img mb-100">
                             <img src="assets/img/our_story/story-img.jpg" class="story-imges" alt="">
                             <!-- shape flower -->
                             <div class="shape-flower-img">
                                <img src="assets/img/our_story/flower_top.png" class="flower-top" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="story-caption">
                            <img src="assets/img/our_story/flower_right.png" alt="">
                            <h3>Our Story</h3>
                            <p class="story1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                            <p class="story2">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudan.</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- shape -->
            <div class="shape-flower d-none d-xl-block">
                <img src="assets/img/our_story/shape_left.png" class="flower1" alt="">
                <img src="assets/img/our_story/shape_right.png" class="flower2 " alt="">
            </div>
        </div>
        <!-- Our Story Ende -->
        <!-- Gift Start -->
        <div class="gift-area gift-padding gift-overly" data-background="assets/img/memories/gft.jpg">
            <div class="container">
                <div class="row">
                    <div class=" offset-lg-1 col-12">
                        <div class="gift-caption">
                            <h2>The Best Gift</h2>
                            <p>Will be your bresentation</p>
                            <a href="#" class="btn">R.S.V.P</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Gift End -->
        <!-- our Memories start -->

        <div class="our-memories-area section-padding2">
            <div class="container">
                <!-- section tittle -->
                <div class="row ">
                    <div class="col-lg-12">
                        <div class="section-tittle text-center">
                            <img src="assets/img/memories/section_tittle_flowre.png" alt="">
                            <h2>OUR MEMORIES</h2>
                        </div>
                    </div>
                </div>
                <div class="row no-gutters">
                    <div class="col-lg-4 col-md-4">
                        <div class="memory">
                            <div class="memories-img">
                                <img src="assets/img/memories/memories1.jpg" alt="">
                                <div class="menorie-icon" href="assets/img/memories/memories1.jpg">
                                    <i class="ti-plus"></i>
                                </div>
                            </div>
                        </div>
                    </div> 
                    <div class="col-lg-4 col-md-4">
                        <div class="memory">
                            <div class="memories-img">
                                <img src="assets/img/memories/memories2.jpg" alt="">
                                <div class="menorie-icon" href="assets/img/memories/memories2.jpg">
                                    <i class="ti-plus"></i>
                                </div>
                            </div>
                        </div>
                    </div> 
                    <div class="col-lg-4 col-md-4">
                        <div class="memory">
                            <div class="memories-img">
                                <img src="assets/img/memories/memories3.jpg" alt="">
                                <div class="menorie-icon" href="assets/img/memories/memories3.jpg">
                                    <i class="ti-plus"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4">
                        <div class="memory">
                            <div class="memories-img">
                                <img src="assets/img/memories/memories4.jpg" alt="">
                                <div class="menorie-icon" href="assets/img/memories/memories4.jpg">
                                    <i class="ti-plus"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4">
                        <div class="memory">
                            <div class="memories-img">
                                <img src="assets/img/memories/memories5.jpg" alt="">
                                <div class="menorie-icon" href="assets/img/memories/memories5.jpg">
                                    <i class="ti-plus"></i>
                                </div>
                            </div>
                        </div>
                    </div>   
                    <div class="col-lg-4 col-md-4">
                        <div class="memory">
                            <div class="memories-img">
                                <img src="assets/img/memories/memories2.jpg" alt="">
                                <div class="menorie-icon" href="assets/img/memories/memories2.jpg">
                                    <i class="ti-plus"></i>
                                </div>
                            </div>
                        </div>
                    </div> 
                    
                </div>
            </div>
            <!-- Shape Img -->
            <div class="memories-shape d-none d-xl-block">
                <img src="assets/img/memories/left-img.png" class="memories-shape1" alt="">
                <img src="assets/img/memories/right-img.png" class="memories-shape2" alt="">
            </div>
        </div>
        <!-- our Memories End-->

        <!-- ================ Map ================= -->
        <section class="contact-sections">
            <div class="d-area">
                <div id="map" style="height: 500px; position: relative; overflow: hidden;"></div>
                <script>
                    function initMap() {
                        var uluru = {
                            lat: -25.363,
                            lng: 131.044
                        };
                        var grayStyles = [{
                                featureType: "all",
                                stylers: [{
                                        saturation: -90
                                    },
                                    {
                                        lightness: 50
                                    }
                                ]
                            },
                            {
                                elementType: 'labels.text.fill',
                                stylers: [{
                                    color: '#ccdee9'
                                }]
                            }
                        ];
                        var map = new google.maps.Map(document.getElementById('map'), {
                            center: {
                                lat: -31.197,
                                lng: 150.744
                            },
                            zoom: 9,
                            styles: grayStyles,
                            scrollwheel: false
                        });
                    }
                </script>
                <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDpfS1oRGreGSBU5HHjMmQ3o5NLw7VdJ6I&amp;callback=initMap">
                </script>
            </div>
        </section>
         <!-- ================ Map ================= -->

         <div class="brand-area section-padding2">
            <div class="container">
                 <!-- section tittle -->
                 <div class="row ">
                    <div class="col-lg-12">
                        <div class="section-tittle text-center">
                            <img src="assets/img/memories/section_tittle_flowre.png" alt="">
                            <h2>OUR LOVELY PARTNERS</h2>
                        </div>
                    </div>
                </div>
                <div class="brand-active brand-border">
                    <div class="single-brand">
                        <img src="assets/img/service/brand1.jpg" alt="">
                    </div>
                    <div class="single-brand">
                        <img src="assets/img/service/brand2.jpg" alt="">
                    </div>
                    <div class="single-brand">
                        <img src="assets/img/service/brand3.jpg" alt="">
                    </div>
                    <div class="single-brand">
                        <img src="assets/img/service/brand4.jpg" alt="">
                    </div>
                    <div class="single-brand">
                        <img src="assets/img/service/brand5.jpg" alt="">
                    </div>
                    <div class="single-brand">
                        <img src="assets/img/service/brand3.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>

    </main>
   <footer>

       <!-- Footer Start-->
      <div class="footer-main footer-bg">
        <div class="footer-area footer-padding">
            <div class="container">
                <div class="row d-flex justify-content-between">
                    <div class="col-xl-4 col-lg-4 col-md-5 col-sm-8">
                       <div class="single-footer-caption mb-50">
                         <div class="single-footer-caption mb-30">
                              <!-- logo -->
                             <div class="footer-logo">
                                 <a href="index.html"><img src="assets/img/logo/logo2_footer.png" alt=""></a>
                             </div>
                             <div class="footer-tittle">
                                 <div class="footer-pera">
                                     <p class="info1">Seddo eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

                                     <p class="info2">theaisle@elated-themes.com</p>
                                     <p class="info2">+(123) 456 - 7890 - 456 - 7890</p>
                                     <p class="info2"> 35 W 46nd Street New York</p>
                                        
                                </div>
                             </div>
                         </div>
                       </div>
                    </div>
                    <div class="col-xl-3 col-lg-4 col-md-5 col-sm-7">
                        <div class="single-footer-caption mb-50">
                            <div class="footer-tittle">
                                <h4>WEDDING PLANNER FAQS</h4>
                                <ul>
                                    <li><a href="#">Why Hire a Planner?</a></li>
                                    <li><a href="#">How Can I Make An</a></li>
                                    <li><a href="#">Appointment?</a></li>
                                    <li><a href="#">How to Choose a Venue</a></li>
                                    <li><a href="#">Event Catalogue</a></li>
                                    <li><a href="#"> Accept</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-3 col-md-5 col-sm-7">
                        <div class="single-footer-caption mb-50">
                            <div class="footer-tittle">
                                <h4>ABOUT US</h4>
                                <ul>
                                    <li><a href="#">Bridesmaids</a></li>
                                    <li><a href="#">November 22, 2020</a></li>
                                    <li><a href="#">Groomsmen</a></li>
                                    <li><a href="#">November 22, 2020</a></li>
                                    <li><a href="#">JEWELRY</a></li>
                                    <li><a href="#">November 22, 2020</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-3 col-md-5 col-sm-7">
                        <div class="single-footer-caption mb-50">
                            <div class="footer-tittle">
                                <h4>Instagram</h4>
                            </div>
                            <div class="instagram-gellay">
                                <ul class="insta-feed">
                                    <li><a href="#"><img src="assets/img/post/instra1.jpg" alt=""></a></li>
                                    <li><a href="#"><img src="assets/img/post/instra2.jpg" alt=""></a></li>
                                    <li><a href="#"><img src="assets/img/post/instra3.jpg" alt=""></a></li>
                                    <li><a href="#"><img src="assets/img/post/instra4.jpg" alt=""></a></li>
                                    <li><a href="#"><img src="assets/img/post/instra5.jpg" alt=""></a></li>
                                    <li><a href="#"><img src="assets/img/post/instra6.jpg" alt=""></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- footer-bottom aera -->
        <div class="footer-bottom-area footer-bg">
            <div class="container">
                <div class="footer-border">
                     <div class="row d-flex align-items-center">
                         <div class="col-xl-12 ">
                             <div class="footer-copy-right text-center">
                                 <p><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
  Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="ti-heart" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
  <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
                             </div>
                         </div>
                     </div>
                </div>
            </div>
        </div>
      </div>
       <!-- Footer End-->

   </footer>
   
	<!-- JS here -->
	
		<!-- All JS Custom Plugins Link Here here -->
        <script src="./assets/js/vendor/modernizr-3.5.0.min.js"></script>
		
		<!-- Jquery, Popper, Bootstrap -->
		<script src="./assets/js/vendor/jquery-1.12.4.min.js"></script>
        <script src="./assets/js/popper.min.js"></script>
        <script src="./assets/js/bootstrap.min.js"></script>
	    <!-- Jquery Mobile Menu -->
        <script src="./assets/js/jquery.slicknav.min.js"></script>

		<!-- Jquery Slick , Owl-Carousel Plugins -->
        <script src="./assets/js/owl.carousel.min.js"></script>
        <script src="./assets/js/slick.min.js"></script>
        <!-- Date Picker -->
        <script src="./assets/js/gijgo.min.js"></script>
		<!-- One Page, Animated-HeadLin -->
        <script src="./assets/js/wow.min.js"></script>
		<script src="./assets/js/animated.headline.js"></script>
        <script src="./assets/js/jquery.magnific-popup.js"></script>

		<!-- Scrollup, nice-select, sticky -->
        <script src="./assets/js/jquery.scrollUp.min.js"></script>
        <script src="./assets/js/jquery.nice-select.min.js"></script>
		<script src="./assets/js/jquery.sticky.js"></script>
        
        <!-- contact js -->
        <script src="./assets/js/contact.js"></script>
        <script src="./assets/js/jquery.form.js"></script>
        <script src="./assets/js/jquery.validate.min.js"></script>
        <script src="./assets/js/mail-script.js"></script>
        <script src="./assets/js/jquery.ajaxchimp.min.js"></script>
        
		<!-- Jquery Plugins, main Jquery -->	
        <script src="./assets/js/plugins.js"></script>
        <script src="./assets/js/main.js"></script>
        
    </body>
</html>