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>