Skip to main content
Welcome to Space Hotel

Enjoy your stay,
feels like at home

Enjoy the new experiences that we offer and we'll guarantee
you that this one would be an awesome occasion

HTML:

          
            <!-- Hero Section -->
            <div class="gradient-overlay-half-white-v2 bg-img-hero" style="background-image: url(../../assets/img/demo/hotel/jumbotron.jpg);">
              <div class="d-lg-flex align-items-lg-center flex-lg-column pb-sm-6">
                <div class="container space-2 space-3--sm space-4--lg">
                  <!-- Title -->
                  <div class="w-lg-50 mb-4 mb-sm-9 pb-1">
                    <h6 class="text-uppercase text-gray-700 font-weight-medium letter-spacing-0_06 mb-3">Welcome to Space Hotel</h6>
                    <h2 class="display-4 font-size-48--md-down mb-3">Enjoy your stay,<br class="d-none d-lg-inline-block"> feels like at <strong class="text-primary">home</strong></h2>
                    <p>Enjoy the new experiences that we offer and we'll guarantee<br class="d-none d-md-inline-block"> you that this one would be an awesome occasion</p>
                  </div>
                  <!-- End Title -->

                  <form class="bg-white rounded shadow-sm p-5" action="#">
                    <div class="row">
                      <div class="col-md-6 col-lg-3">
                        <div class="form-group mb-3">
                          <label class="text-uppercase font-weight-medium">Check-in</label>
                          <div id="datepickerWrapperFrom" class="u-datepicker input-group">
                            <div class="input-group-prepend">
                              <div id="calendarFromLabel" class="input-group-text">
                                <i class="svg-icon svg-icon-xs text-muted">
                                  <svg viewBox="0 0 24 24" width="24" height="24" class="stroke-gray-200" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
                                </i>
                              </div>
                            </div>

                            <input class="js-range-datepicker form-control bg-white text-muted" type="text" placeholder="mm/dd/yyyy" aria-label="From" aria-describedby="calendarFromLabel"
                                   data-rp-wrapper="#datepickerWrapperFrom"
                                   data-rp-date-format="D, M d">
                          </div>
                        </div>
                      </div>

                      <div class="col-md-6 col-lg-3">
                        <div class="form-group mb-3">
                          <label class="text-uppercase font-weight-medium">Check-out</label>
                          <div id="datepickerWrapperTo" class="u-datepicker input-group">
                            <div class="input-group-prepend">
                              <div id="calendarToLabel" class="input-group-text">
                                <i class="svg-icon svg-icon-xs text-muted">
                                  <svg viewBox="0 0 24 24" width="24" height="24" class="stroke-gray-200" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
                                </i>
                              </div>
                            </div>

                            <input class="js-range-datepicker form-control bg-white text-muted" type="text" placeholder="mm/dd/yyyy" aria-label="To" aria-describedby="calendarToLabel"
                                   data-rp-wrapper="#datepickerWrapperTo"
                                   data-rp-date-format="D, M d">
                          </div>
                        </div>
                      </div>

                      <div class="col-lg-6">
                        <div class="row align-items-end">
                          <div class="col-9">
                            <div class="form-group mb-3">
                              <label class="text-uppercase font-weight-medium">Guests</label>
                              <div class="dropdown">
                                <div class="u-guests input-group position-relative" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="group">
                                  <div class="input-group-prepend z-index-2">
                                    <div class="input-group-text">
                                      <i class="svg-icon svg-icon-2xs text-muted">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="18" viewBox="0 0 16 18">
                                          <path d="M14.286,18H1.715A1.7,1.7,0,0,1,0,16.313V14.85a4.768,4.768,0,0,1,4.8-4.725h.6a6.307,6.307,0,0,0,5.207,0h.6A4.769,4.769,0,0,1,16,14.85v1.462A1.7,1.7,0,0,1,14.286,18ZM8,9A4.541,4.541,0,0,1,3.429,4.5a4.572,4.572,0,0,1,9.142,0A4.541,4.541,0,0,1,8,9Z" fill="#000000" />
                                        </svg>
                                      </i>
                                    </div>
                                  </div>

                                  <input class="js-string-unifier u-guests__input form-control bg-white text-muted" type="text" value="1 Guest" readonly
                                         data-su-options='{
                                           "data": [
                                             {
                                               "title": "Guest",
                                               "titleMultiplier": "s",
                                               "target": ["#adultsQty", "#childrenQty"]
                                             },
                                             {
                                               "title": "Infant",
                                               "titleMultiplier": "s",
                                               "target": ["#infantsQty"]
                                             }
                                           ]
                                         }'>

                                  <svg class="u-guests__input-i" xmlns="http://www.w3.org/2000/svg" width="11.964" height="6.974" viewBox="0 0 11.964 6.974">
                                    <g data-name="chevron down" transform="translate(-0.018 -0.013)">
                                      <path d="M5.517,6.789.193,1.675a.614.614,0,0,1,0-.893l.621-.6a.677.677,0,0,1,.929,0l4.24,4.053L10.222.184a.677.677,0,0,1,.929,0l.621.6a.614.614,0,0,1,0,.893L6.447,6.789A.677.677,0,0,1,5.517,6.789Z" transform="translate(0.018 0.013)" />
                                    </g>
                                  </svg>
                                </div>

                                <div class="dropdown-menu dropdown-menu-right font-size-base u-guests-options p-4 shadow">
                                  <div class="d-flex justify-content-between mb-3">
                                    <div class="u-guests-options__label font-weight-medium">
                                      Adults
                                      <em class="small u-guests-options__label-info">Above 12</em>
                                    </div>

                                    <div class="js-quantity u-guests-options__data d-flex align-items-center"
                                         data-min-val="1">
                                      <span class="js-minus u-guests-options__ctrl u-guests-options__ctrl--minus">
                                        <i class="svg-icon svg-icon-xs text-primary">
                                          <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                              <rect fill="#000000" x="4" y="11" width="16" height="2" rx="1"></rect>
                                            </g>
                                          </svg>
                                        </i>
                                      </span>

                                      <span id="adultsQty" class="js-result u-guests-options__value">1</span>

                                      <span class="js-plus u-guests-options__ctrl u-guests-options__ctrl--plus">
                                        <i class="svg-icon svg-icon-xs text-primary">
                                          <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                              <rect fill="#000000" x="4" y="11" width="16" height="2" rx="1"></rect>
                                              <rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000) " x="4" y="11" width="16" height="2" rx="1"></rect>
                                            </g>
                                          </svg>
                                        </i>
                                      </span>
                                    </div>
                                  </div>

                                  <div class="d-flex justify-content-between mb-3">
                                    <div class="u-guests-options__label font-weight-medium">
                                      Children
                                      <em class="small u-guests-options__label-info">Ages 2–12</em>
                                    </div>

                                    <div class="js-quantity u-guests-options__data d-flex align-items-center">
                                      <span class="js-minus u-guests-options__ctrl u-guests-options__ctrl--minus">
                                        <i class="svg-icon svg-icon-xs text-primary">
                                          <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                              <rect fill="#000000" x="4" y="11" width="16" height="2" rx="1"></rect>
                                            </g>
                                          </svg>
                                        </i>
                                      </span>

                                      <span id="childrenQty" class="js-result u-guests-options__value">0</span>

                                      <span class="js-plus u-guests-options__ctrl u-guests-options__ctrl--plus">
                                        <i class="svg-icon svg-icon-xs text-primary">
                                          <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                              <rect fill="#000000" x="4" y="11" width="16" height="2" rx="1"></rect>
                                              <rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000) " x="4" y="11" width="16" height="2" rx="1"></rect>
                                            </g>
                                          </svg>
                                        </i>
                                      </span>
                                    </div>
                                  </div>

                                  <div class="d-flex justify-content-between mb-3">
                                    <div class="u-guests-options__label font-weight-medium">
                                      Infants
                                      <em class="small u-guests-options__label-info">Under 2</em>
                                    </div>

                                    <div class="js-quantity u-guests-options__data d-flex align-items-center">
                                      <span class="js-minus u-guests-options__ctrl u-guests-options__ctrl--minus">
                                        <i class="svg-icon svg-icon-xs text-primary">
                                          <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                              <rect fill="#000000" x="4" y="11" width="16" height="2" rx="1"></rect>
                                            </g>
                                          </svg>
                                        </i>
                                      </span>

                                      <span id="infantsQty" class="js-result u-guests-options__value">0</span>

                                      <span class="js-plus u-guests-options__ctrl u-guests-options__ctrl--plus">
                                        <i class="svg-icon svg-icon-xs text-primary">
                                          <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                              <rect fill="#000000" x="4" y="11" width="16" height="2" rx="1"></rect>
                                              <rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000) " x="4" y="11" width="16" height="2" rx="1"></rect>
                                            </g>
                                          </svg>
                                        </i>
                                      </span>
                                    </div>
                                  </div>

                                  <div class="text-right">
                                    <a class="u-guests-options__apply" href="javascript:;">Apply</a>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>

                          <div class="col-3 pl-0 pl-sm-3">
                            <button type="submit" class="btn btn-primary d-block w-100 mb-3 px-2 px-sm-3">
                              <i class="svg-icon svg-icon-2xs text-white">
                                <svg xmlns="http://www.w3.org/2000/svg" width="17.998" height="17.967" viewBox="0 0 17.998 17.967">
                                  <g transform="translate(0 0)">
                                    <path  d="M16.161,17.967a.839.839,0,0,1-.6-.248l-3.506-3.5a.838.838,0,0,1-.246-.6v-.572a7.3,7.3,0,1,1,1.265-1.264h.573a.842.842,0,0,1,.6.246l3.506,3.5a.848.848,0,0,1,0,1.193l-1,.993A.83.83,0,0,1,16.161,17.967ZM7.312,2.807a4.491,4.491,0,1,0,4.5,4.491A4.5,4.5,0,0,0,7.312,2.807Z" fill="#000000"/>
                                  </g>
                                </svg>
                              </i>
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
            <!-- End Hero Section -->
          
        

CSS library:

        
          <link rel="stylesheet" href="../../assets/vendor/flatpickr/dist/flatpickr.min.css">
        
      

JS library and initialization:

        
          <!-- JS Implementing Plugins -->
          <script src="../../assets/vendor/flatpickr/dist/flatpickr.min.js"></script>

          <!-- JS Space -->
          <script src="../../assets/js/components/hs.range-datepicker.js"></script>
          <script src="../../assets/js/components/hs.quantity-counter.js"></script>
          <script src="../../assets/js/components/hs.strings-unifier.js"></script>

          <!-- JS Plugins Init. -->
          <script>
            $(document).on('ready', function () {
              // initialization of quantity counter
              var counter = 0;

              $.HSCore.components.HSQantityCounter.init('.js-quantity', {
                stopIncrease: function() {
                  if (counter >= 19) return true;
                },
                afterIncrease: function() {
                  counter += 1;
                },
                afterDecrease: function() {
                  counter -= 1;
                },
                afterChange: function() {
                  if(counter < 20) {
                    // initialization of strings splitter
                    $.HSCore.components.HSStringsUnifier.init('.js-string-unifier');
                  }
                }
              });

              // Help function
              $('.dropdown-menu').on('click', function(e) {
                var element = $(e.target);

                if(!(
                  element[0].tagName.toLowerCase() === 'button' ||
                  element[0].tagName.toLowerCase() === 'a'
                )) {
                  return false;
                }
              });

              // initialization of range datepicker
              $.HSCore.components.HSRangeDatepicker.init('.js-range-datepicker');
            });
          </script>
        
      

Please sign in

Signin to manage your account.

Do not have an account? Signup

OR