Make difference

Design beautifully on any device

Space is a beautiful, flexible template for crafting any kind of website.

Get updates on Space progress. Never spam.

HTML:

          
            <!-- Hero Section -->
            <div class="bg-gray-100">
              <div class="d-md-flex align-items-md-center height-100vh--md">
                <div class="container space-2">
                  <div class="row justify-content-md-between align-items-md-center">
                    <div class="col-md-7 col-lg-6 order-md-2">
                      <!-- Title -->
                      <div class="mb-5">
                        <span class="d-block text-uppercase mb-2">Make difference</span>
                        <h1>Design beautifully on any device</h1>
                        <p class="lead">Space is a beautiful, flexible template for crafting any kind of website.</p>
                      </div>
                      <!-- End Title -->

                      <div class="mb-5">
                        <!-- Button -->
                        <button type="button" class="btn btn-xs btn-dark text-left mb-2 mb-md-0 mr-md-2">
                          <span class="media align-items-center">
                            <span class="fab fa-apple fa-3x mr-3"></span>
                            <span class="d-block">
                              <span class="d-block">Download on the</span>
                              <strong class="d-block font-size-14">App Store</strong>
                            </span>
                          </span>
                        </button>
                        <!-- End Button -->

                        <!-- Button -->
                        <button type="button" class="btn btn-xs btn-dark text-left mb-2 mb-md-0">
                          <span class="media align-items-center">
                            <span class="fab fa-google-play fa-3x mr-3"></span>
                            <span class="d-block">
                              <span class="d-block">Get it on</span>
                              <strong class="d-block font-size-14">Google Play</strong>
                            </span>
                          </span>
                        </button>
                        <!-- End Button -->
                      </div>

                      <!-- Input -->
                      <form class="js-validate js-form-message mb-2">
                        <div class="js-focus-state input-group form">
                          <input type="email" class="form-control form__input" name="email" required
                                 placeholder="Enter your email address"
                                 aria-label="Enter your email address">
                          <span class="input-group-append form__append">
                            <button type="submit" class="btn btn-sm btn-primary btn-wide">Subscribe</button>
                          </span>
                        </div>
                      </form>
                      <!-- End Input -->

                      <p class="small">Get updates on Space progress. Never spam.</p>
                    </div>

                    <div class="col-md-5 order-md-1 d-none d-md-inline-block">
                      <object type="image/svg+xml" data="../../assets/svg/mockups/phone-mockup-3.svg"></object>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- End Hero Section -->

JS library and initialization:

        
          <!-- JS Implementing Plugins -->
          <script src="../../assets/vendor/query-validation/dist/jquery.validate.min.js"></script>

          <!-- JS Space -->
          <script src="../../assets/js/components/hs.validation.js"></script>
          <script src="../../assets/js/helpers/hs.focus-state.js"></script>

          <!-- JS Plugins Init. -->
          <script>
            $(document).on('ready', function () {
              // initialization of form validation
              $.HSCore.components.HSValidation.init('.js-validate');

              // initialization of forms
              $.HSCore.helpers.HSFocusState.init();
            });
          </script>