Modern solution for your business.
Space offers the leading all-in-one template solution for digital distribution—and we don't charge commissions.
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>