Modern solution for your business.

Space offers the leading all-in-one template solution for digital distribution—and we don't charge commissions.

Watch Video

Image Description
Image Description
Image Description

Get started

Or continue your application Signin

HTML:

          
            <!-- Hero Section -->
            <div class="bg-img-hero" style="background-image: url(../../assets/img/bg/bg1.png);">
              <div class="container space-2 space-3-top--lg">
                <div class="row justify-content-lg-between align-items-md-center">
                  <div class="col-md-6 col-lg-5 mb-9 mb-md-0">
                    <div class="mb-5">
                      <h1 class="display-4 font-size-48--md-down mb-3">Modern solution for your business.</h1>
                      <p class="lead mb-0">Space offers the leading all-in-one template solution for digital distribution—and we don't charge commissions.</p>
                    </div>

                    <!-- Fancybox -->
                    <a class="js-fancybox btn btn-outline-purple btn-wide" href="javascript:;"
                       data-src="//vimeo.com/167434033"
                       data-speed="700"
                       data-animate-in="zoomIn"
                       data-animate-out="zoomOut"
                       data-caption="Space - Responsive Website Template">
                      <span class="fa fa-play font-size-13 mr-1"></span>
                      Watch Video
                    </a>
                    <!-- End Fancybox -->

                    <!-- Divider -->
                    <div class="w-25">
                      <hr class="my-6">
                    </div>
                    <!-- End Divider -->

                    <!-- Clients -->
                    <div class="row">
                      <div class="col">
                        <img class="u-clients" src="../../assets/img/clients/google.png" alt="Image Description">
                      </div>
                      <div class="col">
                        <img class="u-clients" src="../../assets/img/clients/paypal.png" alt="Image Description">
                      </div>
                      <div class="col">
                        <img class="u-clients" src="../../assets/img/clients/slack.png" alt="Image Description">
                      </div>
                    </div>
                    <!-- End Clients -->
                  </div>

                  <div class="col-md-6 col-lg-5">
                    <!-- Signup Form -->
                    <form class="js-validate">
                      <!-- Signup -->
                      <div id="heroSignup" data-target-group="idHeroSignupForm">
                        <div class="card shadow-sm mb-4">
                          <div class="card-body p-5">
                            <h2 class="h6 text-muted font-weight-medium text-uppercase mb-3">Get started</h2>

                            <!-- Input -->
                            <div class="js-form-message mb-3">
                              <div class="js-focus-state input-group input-group form">
                                <div class="input-group-prepend form__prepend">
                                  <span class="input-group-text form__text">
                                    <span class="fa fa-envelope form__text-inner"></span>
                                  </span>
                                </div>
                                <input type="email" class="form-control form__input" name="signupEmail" required placeholder="Enter your email address" aria-label="Enter your email address">
                              </div>
                            </div>
                            <!-- End Input -->

                            <!-- Input -->
                            <div class="js-form-message mb-3">
                              <div class="js-focus-state input-group input-group form">
                                <div class="input-group-prepend form__prepend">
                                  <span class="input-group-text form__text">
                                    <span class="fa fa-lock form__text-inner"></span>
                                  </span>
                                </div>
                                <input type="password" class="form-control form__input" name="signupPassword" required placeholder="Create your password" aria-label="Create your password">
                              </div>
                            </div>
                            <!-- End Input -->

                            <!-- Input -->
                            <div class="js-form-message mb-3">
                              <div class="js-focus-state input-group input-group form">
                                <div class="input-group-prepend form__prepend">
                                  <span class="input-group-text form__text">
                                    <span class="fa fa-phone form__text-inner"></span>
                                  </span>
                                </div>
                                <input type="text" class="form-control form__input" name="signupPhoneNumber" required placeholder="Enter mobile number" aria-label="Enter mobile number">
                              </div>
                            </div>
                            <!-- End Input -->

                            <button type="submit" class="btn btn-block btn-primary">Sign Up</button>
                          </div>

                          <div class="card-footer p-5">
                            <h3 class="h6 text-muted font-weight-medium text-uppercase mb-3">Sign Up with</h3>

                            <div class="row mx-gutters-1">
                              <div class="col-6">
                                <button type="submit" class="btn btn-block btn-sm btn-google">
                                  <span class="fab fa-google mr-2"></span>
                                  Google
                                </button>
                              </div>
                              <div class="col-6">
                                <button type="submit" class="btn btn-block btn-sm btn-facebook">
                                  <span class="fab fa-facebook-f mr-2"></span>
                                  Facebook
                                </button>
                              </div>
                            </div>
                          </div>
                        </div>

                        <div class="card shadow-sm">
                          <div class="card-body p-5">
                            <p class="mb-0">
                              Or continue your application
                              <a class="js-animation-link" href="javascript:;"
                                 data-target="#heroSignin"
                                 data-link-group="idHeroSignupForm">Signin
                              </a>
                            </p>
                          </div>
                        </div>
                      </div>
                      <!-- End Signup -->

                      <!-- Signin -->
                      <div id="heroSignin" style="display: none; opacity: 0;" data-target-group="idHeroSignupForm">
                        <div class="card shadow-sm mb-4">
                          <div class="card-body p-5">
                            <h2 class="h6 text-muted font-weight-medium text-uppercase mb-3">Login</h2>

                            <!-- Input -->
                            <div class="js-form-message mb-3">
                              <div class="js-focus-state input-group input-group form">
                                <div class="input-group-prepend form__prepend">
                                  <span class="input-group-text form__text">
                                    <span class="fa fa-envelope form__text-inner"></span>
                                  </span>
                                </div>
                                <input type="email" class="form-control form__input" name="signinEmail" required placeholder="Enter your email address" aria-label="Enter your email address">
                              </div>
                            </div>
                            <!-- End Input -->

                            <!-- Input -->
                            <div class="js-form-message mb-1">
                              <div class="js-focus-state input-group input-group form">
                                <div class="input-group-prepend form__prepend">
                                  <span class="input-group-text form__text">
                                    <span class="fa fa-lock form__text-inner"></span>
                                  </span>
                                </div>
                                <input type="password" class="form-control form__input" name="signinPassword" required placeholder="Create your password" aria-label="Create your password">
                              </div>
                            </div>
                            <!-- End Input -->

                            <!-- Recover Link -->
                            <div class="d-flex justify-content-end mb-3">
                              <a class="js-animation-link" href="javascript:;"
                                 data-target="#heroRecoverAccount"
                                 data-link-group="idHeroSignupForm">Forgot password?
                              </a>
                            </div>
                            <!-- End Recover Link -->

                            <button type="submit" class="btn btn-block btn-primary">Sign In</button>
                          </div>

                          <div class="card-footer p-5">
                            <h3 class="h6 text-muted font-weight-medium text-uppercase mb-3">Sign In with</h3>

                            <div class="row mx-gutters-1">
                              <div class="col-6">
                                <button type="submit" class="btn btn-block btn-sm btn-google">
                                  <span class="fab fa-google mr-2"></span>
                                  Google
                                </button>
                              </div>
                              <div class="col-6">
                                <button type="submit" class="btn btn-block btn-sm btn-facebook">
                                  <span class="fab fa-facebook-f mr-2"></span>
                                  Facebook
                                </button>
                              </div>
                            </div>
                          </div>
                        </div>

                        <div class="card shadow-sm">
                          <div class="card-body p-5">
                            <p class="mb-0">
                              Or continue your application
                              <a class="js-animation-link" href="javascript:;"
                                 data-target="#heroSignup"
                                 data-link-group="idHeroSignupForm">Signup
                              </a>
                            </p>
                          </div>
                        </div>
                      </div>
                      <!-- End Signin -->

                      <!-- Recover Account -->
                      <div id="heroRecoverAccount" style="display: none; opacity: 0;" data-target-group="idHeroSignupForm">
                        <div class="card shadow-sm mb-4">
                          <div class="card-body p-5">
                            <h2 class="h6 text-muted font-weight-medium text-uppercase mb-3">Recover your account</h2>

                            <!-- Input -->
                            <div class="js-form-message mb-3">
                              <div class="js-focus-state input-group input-group form">
                                <div class="input-group-prepend form__prepend">
                                  <span class="input-group-text form__text">
                                    <span class="fa fa-envelope form__text-inner"></span>
                                  </span>
                                </div>
                                <input type="email" class="form-control form__input" name="recoverEmail" required placeholder="Enter your email address" aria-label="Enter your email address">
                              </div>
                            </div>
                            <!-- End Input -->

                            <button type="submit" class="btn btn-block btn-primary">Recover Account</button>
                          </div>
                        </div>

                        <div class="card shadow-sm">
                          <div class="card-body p-5">
                            <p class="mb-0">
                              Have an account?
                              <a class="js-animation-link" href="javascript:;"
                                 data-target="#heroSignin"
                                 data-link-group="idHeroSignupForm">Signin
                              </a>
                            </p>
                          </div>
                        </div>
                      </div>
                      <!-- End Recover Account -->
                    </form>
                    <!-- End Signup Form -->
                  </div>
                </div>
              </div>
            </div>
            <!-- End Hero Section -->
          
        

JS library and initialization:

        
          <!-- JS Space -->
          <script src="../../assets/js/components/hs.show-animation.js"></script>

          <!-- JS Plugins Init. -->
          <script>
            $(document).on('ready', function () {
              // initialization of show animations
              $.HSCore.components.HSShowAnimation.init('.js-animation-link');
            });
          </script>