Edit file File name : booking.html Content :<!DOCTYPE html> <html lang="en-US"> <!-- Mirrored from preview.locotheme.com/grandium-html/booking.html by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 02 May 2019 05:54:51 GMT --> <head> <!-- Basic Page Head --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Grandium - Responsive Hotel Template</title> <meta name="description" content="Responsive Hotel Template"> <meta name="author" content="Loco Theme - locotheme.com"> <meta name="keywords" content="hotel, hostel, motel, guesthouse, booking, accommodation, inn, spa, resort, travel, holiday, tourism, vacation, bootstrap, responsive"> <!-- Mobile Meta --> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!-- Favicons --> <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png"> <link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="120x120" href="assets/img/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="152x152" href="assets/img/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="167x167" href="assets/img/apple-touch-icon-167x167.png"> <link rel="apple-touch-icon" sizes="180x180" href="assets/img/apple-touch-icon-180x180.png"> <!-- Css --> <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="assets/css/font.awesome.min.css"> <link rel="stylesheet" type="text/css" href="assets/css/magnific.popup.css"> <link rel="stylesheet" type="text/css" href="assets/css/owl.carousel.css"> <link rel="stylesheet" type="text/css" href="assets/css/owl.theme.default.css"> <link rel="stylesheet" type="text/css" href="assets/css/jquery-ui.css"> <link rel="stylesheet" type="text/css" href="assets/css/style.css"> <link rel="stylesheet" type="text/css" href="assets/css/responsive.css"> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,700italic,900,900italic&subset=latin,latin-ext" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&subset=latin,latin-ext" rel="stylesheet" type="text/css"> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','../../www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-66631247-10', 'auto'); ga('send', 'pageview'); </script> </head> <body> <!-- Site Loading --> <div class="site-loading"> <img src="assets/img/loading.gif" alt="Loading"> </div> <!-- Site Loading End --> <!-- Site Back Top --> <div class="site-backtop" title="Back to top"> <i class="fa fa-angle-up"></i> </div> <!-- Site Back Top End --> <!-- Site Header --> <div class="site-header"> <!-- Header Top --> <div class="header-top"> <div class="wrapper"> <div class="header-contact"> <ul> <li>+1-800-123-45-67</li> <li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-google-plus"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li> </ul> </div> <div class="header-lang"> <ul> <li class="active"><a href="#">EN</a></li> <li><a href="#">FR</a></li> <li><a href="#">DE</a></li> </ul> </div> </div> </div> <!-- Header Top End --> <!-- Header Bottom --> <div class="header-bottom"> <div class="wrapper"> <div class="header-logo"> <a href="index.html"><img src="assets/img/logo.png" alt="The Grandium Hotel"></a> </div> <div class="header-nav"> <ul class="nav-left"> <li><a href="index.html">HOME</a></li> <li><a href="aboutus.html">ABOUT US</a></li> <li class="sub"><a href="rooms.html">ROOMS</a> <ul> <li><a href="rooms.html">ROOMS LISTING</a></li> <li><a href="rooms-detail.html">ROOMS DETAIL</a></li> </ul> </li> <li><a href="services.html">SERVICES</a></li> </ul> <ul class="nav-right"> <li><a href="gallery.html">GALLERY</a></li> <li><a href="booking.html">BOOKING</a></li> <li class="sub"><a href="blog.html">BLOG</a> <ul> <li><a href="blog.html">BLOG LISTING</a></li> <li><a href="blog-single.html">BLOG SINGLE PHOTO</a></li> <li><a href="blog-single-gallery.html">BLOG SINGLE GALLERY</a></li> <li><a href="blog-single-vimeo.html">BLOG SINGLE VIMEO</a></li> <li><a href="blog-single-youtube.html">BLOG SINGLE YOUTUBE</a></li> </ul> </li> <li><a href="contactus.html">CONTACT</a></li> </ul> </div> <div class="header-toggle"> <i class="fa fa-bars"></i> </div> </div> </div> <!-- Header Bottom End --> </div> <!-- Site Header End --> <!-- Site Main --> <div class="site-main"> <!-- Section Page Title --> <div class="section"> <div class="widget-page-title"> <div class="widget-background" data-background="assets/img/photo-title.jpg"></div> <div class="wrapper-inner"> <!-- Title --> <h5>STAY THE GRANDIUM</h5> <h1>Booking Page</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget commodo orci. Integer varius nibh eu mattis porta. Pellentesque dictum sem eget cursus semper. Nullam quis blandit lorem. Morbi blandit orci urna, eu congue magna faucibus at. In bibendum in mauris nec ultrices. Nunc et magna velit.</p> <!-- Title Emd --> <!-- Breadcrumb --> <div class="widget-breadcrumb"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">PAGES</a></li> <li>BOOKING PAGE</li> </ul> </div> <!-- Breadcrumb End --> </div> </div> </div> <!-- Section Page Title End --> <!-- Section Booking --> <div class="section"> <div class="widget-booking-form"> <div class="wrapper-inner"> <div class="widget-inner"> <div class="row"> <div class="col-lg-8 col-md-7"> <!-- Booking Complete --> <div class="booking-complete"> <h5>BOOKING</h5> <h2>Your Reservation Completed</h2> <div class="complete-message"> <i class="fa fa-check"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget commodo orci. Integer varius nibh eu mattis porta. Pellentesque dictum sem eget cursus semper. </div> </div> <!-- Booking Complete End --> <!-- Booking Form --> <div class="booking-form"> <h5>BOOKING FORM</h5> <h2>Personal Info</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget commodo orci. Integer varius nibh eu mattis porta. Pellentesque dictum sem eget cursus semper.</p> <div class="data-form"> <form action="https://preview.locotheme.com/grandium-html/booking.php" id="booking-form" method="post"> <input type="hidden" name="form-room" value="Royal Single Room"> <div class="row"> <div class="col-md-6"> <i class="fa fa-calendar-plus-o"></i> <input type="text" name="form-checkin" id="form-checkin" value="04/20/2016" placeholder="CHECK IN" class="datepicker"> </div> <div class="col-md-6"> <i class="fa fa-calendar-plus-o"></i> <input type="text" name="form-checkout" id="form-checkout" value="05/22/2016" placeholder="CHECK OUT" class="datepicker"> </div> <div class="col-md-6"> <i class="fa fa-caret-down"></i> <select name="form-adults" id="form-adults"> <option value="">ADULTS</option> <option value="1">1 ADULT</option> <option value="2" selected>2 ADULT</option> <option value="3">3 ADULT</option> </select> </div> <div class="col-md-6"> <i class="fa fa-caret-down"></i> <select name="form-childrens" id="form-childrens"> <option value="">CHILDRENS</option> <option value="1" selected>1 CHILDREN</option> <option value="2">2 CHILDREN</option> <option value="3">3 CHILDREN</option> </select> </div> <div class="col-md-6"> <input type="text" name="form-name" id="form-name" placeholder="YOUR NAME"> </div> <div class="col-md-6"> <input type="text" name="form-surname" id="form-surname" placeholder="YOUR SURNAME"> </div> <div class="col-md-6"> <input type="text" name="form-email" id="form-email" placeholder="YOUR EMAIL ADDRESS"> </div> <div class="col-md-6"> <input type="text" name="form-phone" id="form-phone" placeholder="YOUR PHONE"> </div> <div class="col-md-6"> <input type="text" name="form-address1" id="form-address1" placeholder="ADDRESS LINE 1"> </div> <div class="col-md-6"> <input type="text" name="form-address2" id="form-address2" placeholder="ADDRESS LINE 2"> </div> <div class="col-md-6"> <input type="text" name="form-city" id="form-city" placeholder="CITY"> </div> <div class="col-md-6"> <input type="text" name="form-country" id="form-country" placeholder="COUNTRY"> </div> <div class="col-md-12"> <textarea cols="6" rows="8" name="form-requirements" id="form-requirements" placeholder="SPECIAL REQUIREMENTS"></textarea> </div> <div class="col-md-6"> <input type="submit" value="BOOK NOW BY EMAIL" class="btn"> </div> </div> </form> </div> </div> <!-- Booking Form End --> </div> <div class="col-lg-4 col-md-5"> <!-- Booking Detail --> <div class="booking-detail"> <h5>BOOKING DETAILS</h5> <h2>Selected Room</h2> <div class="detail-room"> <div class="room-photo"> <a href="rooms-detail.html" data-background="assets/img/photo-room-5.jpg"></a> </div> <div class="room-desc"> <h3><a href="rooms-detail.html">Single Room</a></h3> <h4>$ 230 <small>PER NIGHT</small></h4> </div> </div> <div class="detail-info"> <ul> <li> <label>CHECK IN</label> <p>04/20/2016</p> </li> <li> <label>CHECK OUT</label> <p>04/22/2016</p> </li> <li> <label>ADULTS</label> <p>2 PERSON</p> </li> <li> <label>CHILDRENS</label> <p>1 CHILDREN</p> </li> <li> <label>NIGHT</label> <p>2 NIGHT</p> </li> <li> <label>TAX (10%)</label> <p>$ 50</p> </li> <li class="total"> <label>TOTAL PRICE</label> <p>$ 510</p> </li> </ul> </div> </div> <!-- Booking Detail End --> <!-- Booking Help --> <div class="booking-help"> <h5>HELP</h5> <h2>Need Booking Help?</h2> <p>If you need help with booking, Our advisor team are 24/7 at your service to help you.</p> <p><a href="mailto:help@thegrandiumhotel.com">help@thegrandiumhotel.com</a></p> <h3><i class="fa fa-phone-square"></i>1-800-123-45-67</h3> </div> <!-- Booking Help End --> </div> </div> </div> </div> </div> </div> <!-- Section Booking End --> </div> <!-- Site Main End --> <!-- Site Footer --> <div class="site-footer"> <!-- Footer Top --> <div class="footer-top"> <div class="wrapper"> <div class="row"> <div class="col-lg-6"> <h5>SOCIAL MEDIA</h5> <h6>FOLLOW THE GRADIUM</h6> <div class="widget-social-icons"> <ul> <li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-google-plus"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li> </ul> </div> </div> <div class="col-lg-6"> <h5>NEWSLETTER</h5> <h6>WE LOVE TO SHARE NEW OFFERS AND EXLUSIVE PROMOTIONS</h6> <div class="widget-newsletter"> <form> <input type="text" placeholder="ENTER YOUR E-MAIL ADDRESS" required> <button type="submit"><i class="fa fa-paper-plane"></i></button> </form> </div> </div> </div> </div> </div> <!-- Footer Top End --> <!-- Footer Bottom --> <div class="footer-bottom"> <div class="wrapper"> <div class="footer-logo"> <img src="assets/img/logo.png" alt="The Grandium Hotel"> </div> <div class="footer-copyright"> <p>COPYRIGHT © THE GRANDIUM HOTEL</p> </div> <div class="footer-contact"> <ul> <li><i class="fa fa-map-marker"></i> LONGRIDGE ROAD, EARLS COURT, LONDON</li> <li><i class="fa fa-phone"></i> +1-800-123-45-67</li> <li><a href="mailto:info@thegrandiumhotel.com"><i class="fa fa-paper-plane"></i> INFO@THEGRANDIUMHOTEL.COM</a></li> </ul> </div> <div class="footer-nav"> <ul> <li><a href="#">SITEMAP</a></li> <li><a href="#">PRIVACY POLICY</a></li> <li><a href="#">TERMS OF USE</a></li> </ul> </div> </div> </div> <!-- Footer Bottom End --> </div> <!-- Site Footer End --> <!-- Scripts --> <script src="assets/js/jquery.min.js"></script> <script src="assets/js/jquery-ui.min.js"></script> <script src="assets/js/jquery.fitvids.js"></script> <script src="assets/js/bootstrap.min.js"></script> <script src="assets/js/magnific.popup.min.js"></script> <script src="assets/js/imagesloaded.pkgd.js"></script> <script src="assets/js/isotope.pkgd.min.js"></script> <script src="assets/js/owl.carousel.min.js"></script> <script src="assets/js/booking.form.js"></script> <script src="assets/js/contact.form.js"></script> <!-- Map Scripts --> <script src="https://maps.google.com/maps/api/js?sensor=false&language=en"></script> <script src="assets/js/gmap3.min.js"></script> <!-- Custom Scripts --> <script src="assets/js/custom.js"></script> </body> <!-- Mirrored from preview.locotheme.com/grandium-html/booking.html by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 02 May 2019 05:54:51 GMT --> </html>Save