Boat Holidays Made Easy

Rent a boat from the #1 yacht charter platform

                                
                                    <!-- Hero Section -->
                                       <div class="bg-img-hero-bottom gradient-overlay-half-sapphire-gradient text-center" style="background-image: url(../../assets/img/1920x960/img1.jpg);">
                                            <div class="container space-2 space-top-xl-10">
                                                <!-- Info -->
                                                <div class="py-wd-10 pb-5">
                                                  <h1 class="font-size-60 font-size-xs-30 text-white font-weight-bold">Boat Holidays Made Easy</h1>
                                                  <p class="font-size-20 font-weight-normal text-white">Rent a boat from the #1 yacht charter platform</p>
                                                </div>
                                                <!-- End Info -->
                                                <div class="space-top-lg-2 space-top-xl-3">
                                                    <!-- Search Jobs Form -->
                                                    <div class="card border-0">
                                                        <div class="card-body">
                                                            <form class="js-validate">
                                                              <div class="row d-block nav-select d-lg-flex mb-lg-3 px-lg-3 px-2">
                                                                <div class="col-sm-12 col-lg-3dot7 mb-4 mb-lg-0 ">
                                                                    <!-- Input -->
                                                                    <span class="d-block text-gray-1  font-weight-normal mb-0 text-left">Destination or Hotel Name</span>
                                                                    <select class="js-select selectpicker dropdown-select tab-dropdown col-12 pl-0 flaticon-pin-1 d-flex align-items-center text-primary font-weight-semi-bold" title="Where are you going?"
                                                                        data-style=""
                                                                        data-live-search="true"
                                                                        data-searchbox-classes="input-group-sm">
                                                                        <option class="border-bottom border-color-1" value="project1" data-content='
                                                                            <span class="d-flex align-items-center">
                                                                                <span class="font-size-16">London, United Kingdom</span>
                                                                            </span>'>
                                                                            London, United Kingdom
                                                                        </option>
                                                                        <option class="border-bottom border-color-1" value="project2" data-content='
                                                                            <span class="d-flex align-items-center">
                                                                                <span class="font-size-16">New York, United States</span>
                                                                            </span>'>
                                                                            New York, United States
                                                                        </option>
                                                                        <option  class="border-bottom border-color-1" value="project3" data-content='
                                                                            <span class="d-flex align-items-center">
                                                                                <span class="font-size-16">New South Wales, Australia</span>
                                                                            </span>'>
                                                                            New South Wales, Australia
                                                                        </option>
                                                                        <option class="border-bottom border-color-1" value="project4" data-content='
                                                                            <span class="d-flex align-items-center">
                                                                                <span class="font-size-16">Istanbul, Turkey</span>
                                                                            </span>'>
                                                                            Istanbul, Turkey
                                                                        </option>
                                                                        <option class="" value="project4" data-content='
                                                                            <span class="d-flex align-items-center">
                                                                                <span class="font-size-16">Reykjavík, Iceland</span>
                                                                            </span>'>
                                                                            Reykjavík, Iceland
                                                                        </option>
                                                                    </select>
                                                                    <!-- End Input -->
                                                                </div>

                                                                <div class="col-sm-12 col-lg-3dot6 mb-4 mb-lg-0 ">
                                                                    <!-- Input -->
                                                                    <span class="d-block text-gray-1 font-weight-normal mb-0 text-left">Check In - Out</span>
                                                                    <div class="js-focus-state">
                                                                        <div class="border-bottom border-width-2 border-color-1">
                                                                            <div id="datepickerWrapperFrom" class="u-datepicker input-group">
                                                                                <div class="input-group-prepend">
                                                                                    <span class="d-flex align-items-center mr-2">
                                                                                      <i class="flaticon-calendar text-primary font-weight-semi-bold"></i>
                                                                                    </span>
                                                                                </div>
                                                                                <input class="js-range-datepicker font-size-lg-16 shadow-none font-weight-bold form-control hero-form bg-transparent  border-0" type="date"
                                                                                     data-rp-wrapper="#datepickerWrapperFrom"
                                                                                     data-rp-type="range"
                                                                                     data-rp-date-format="M d / Y"
                                                                                     data-rp-default-date='["Jul 7 / 2019", "Aug 25 / 2019"]'>
                                                                            </div>
                                                                            <!-- End Datepicker -->
                                                                        </div>
                                                                    </div>
                                                                    <!-- End Input -->
                                                                </div>

                                                                <div class="col-sm-12 col-lg-2dot8 mb-4 mb-lg-0">
                                                                    <!-- Input -->
                                                                    <span class="d-block text-gray-1 font-weight-normal mb-0 text-left">Boat Type</span>
                                                                    <div class="js-focus-state">
                                                                        <div class="d-flex border-bottom border-width-2 border-color-1">
                                                                            <i class="flaticon-backpack d-flex align-items-center mr-2 text-primary font-weight-semi-bold"></i>
                                                                            <select class="js-select selectpicker dropdown-select">
                                                                                <option value="2 Rooms - 3 Guests" selected>sailboat</option>
                                                                                <option value="2 Rooms - 3 Guests">2 Rooms - 4 Guests</option>
                                                                                <option value="2 Rooms - 3 Guests">3 Rooms - 6 Guests</option>
                                                                                <option value="2 Rooms - 3 Guests">1 Rooms - 2 Guests</option>
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                    <!-- End Input -->
                                                                </div>

                                                                <div class="col-sm-12 col-lg-1dot8 align-self-lg-end text-md-right">
                                                                    <button type="submit" class="btn btn-primary text-white font-weight-semi-bold btn-md mb-xl-0 mb-lg-1 transition-3d-hover"><i class="flaticon-magnifying-glass mr-2"></i>Search</button>
                                                                </div>
                                                              </div>
                                                              <!-- End Checkbox -->
                                                            </form>
                                                        </div>
                                                    </div>
                                                    <!-- End Search Jobs Form -->
                                                </div>
                                            </div>
                                        </div>
                                    <!-- End Hero Section -->
                                
                            
                            
                                <!-- JS Implementing Plugins -->
                                <script src="../../assets/vendor/flatpickr/dist/flatpickr.min.js"></script>
                                <script src="../../assets/vendor/bootstrap-select/dist/js/bootstrap-select.min.js"></script>

                                <!-- JS MyTravel -->
                                <script src="../../assets/js/hs.core.js"></script>
                                <script src="../../assets/js/components/hs.range-datepicker.js"></script>
                                <script src="../../assets/js/components/hs.selectpicker.js"></script>
                                    <script src="../../assets/js/components/hs.quantity-counter.js"></script>


                                <!-- JS Plugins Init. -->
                                <script>
                                $(window).on('load', function () {
                                    // initialization of HSMegaMenu component
                                    $('.js-mega-menu').HSMegaMenu({
                                        event: 'hover',
                                        pageContainer: $('.container'),
                                        breakpoint: 1199.98,
                                        hideTimeOut: 0
                                    });
                                });

                                $(document).on('ready', function () {
                                    // initialization of datepicker
                                    $.HSCore.components.HSRangeDatepicker.init('.js-range-datepicker');

                                    // initialization of select
                                    $.HSCore.components.HSSelectPicker.init('.js-select');

                                    // initialization of quantity counter
                                    $.HSCore.components.HSQantityCounter.init('.js-quantity');
                                });
                                </script>