Say Hello to all businesses
Achieve virtually any look and layout from within the one template. Covert more visitors, and win more business with Front template.
HTML:
<!-- Hero Section -->
<div class="bg-primary position-relative overflow-hidden">
<!-- Content -->
<div class="container position-relative u-space-4 z-index-2">
<!-- Title -->
<div class="text-center mb-7">
<div class="w-lg-80 mx-auto">
<h1 class="text-white display-4 font-size-48--md-down mb-3">Say <span class="font-weight-bold">Hello</span> to all businesses</h1>
</div>
<div class="w-md-80 w-lg-60 mx-auto">
<p class="lead u-text-light">Achieve virtually any look and layout from within the one template. Covert more visitors, and win more business with Front template.</p>
</div>
</div>
<!-- End Title -->
<!-- Input -->
<div class="w-md-50 w-lg-40 mx-auto">
<form class="js-validate js-form-message">
<div class="js-focus-state input-group input-group-lg u-form u-form--lg u-form--pill u-form--no-brd u-form--no-addon-brd">
<input type="email" class="form-control u-form__input" required
placeholder="Enter your email address"
aria-label="Enter your email address">
<span class="input-group-append u-form__append">
<button type="button" class="btn text-primary u-btn-white">
<span class="fas fa-paper-plane"></span>
</button>
</span>
</div>
</form>
</div>
<!-- End Input -->
</div>
<!-- End Content -->
<!-- SVG Top Left Shapes -->
<figure class="position-absolute-top-left-0 w-60">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1246 1078" style="enable-background:new 0 0 1246 1078;" xml:space="preserve">
<g>
<linearGradient id="heroV2ColorTopLeft1" gradientUnits="userSpaceOnUse" x1="2073.5078" y1="1.7251" x2="2273.4375" y2="1135.5818" gradientTransform="matrix(-1 0 0 1 2600 0)">
<stop class="u-stop-color-primary-lighter" offset="0.4976"/>
<stop class="u-stop-color-primary" offset="1"/>
</linearGradient>
<polygon fill="url(#heroV2ColorTopLeft1)" points="519.8,0.6 0,0.6 0,1078 863.4,1078"/>
<linearGradient id="heroV2ColorTopLeft2" gradientUnits="userSpaceOnUse" x1="1717.1648" y1="3.779560e-05" x2="1717.1648" y2="644.0417" gradientTransform="matrix(-1 0 0 1 2600 0)">
<stop class="u-stop-color-primary-lighter" offset="1.577052e-06"/>
<stop class="u-stop-color-primary" offset="1"/>
</linearGradient>
<polygon fill="url(#heroV2ColorTopLeft2)" points="519.7,0 1039.4,0.6 1246,639.1 725.2,644"/>
</g>
<g>
<linearGradient id="heroV2ColorTopLeft3" gradientUnits="userSpaceOnUse" x1="126.0495" y1="-9.3783" x2="149.8194" y2="181.4576">
<stop class="u-stop-color-primary-lighter" offset="1.181626e-06"/>
<stop class="u-stop-color-primary" offset="1"/>
</linearGradient>
<path fill="url(#heroV2ColorTopLeft3)" d="M50.8,0L30.1,57.4c0,0-30.7,76.1,44.1,118.2c0,0,57.4,30.1,107.5-18c0,0,6.7-6.7,12-15.4c5.3-8.7,4.7-8,8-15.4
s36.7-106.2,36.7-106.2s2.7-6.7,4.7-20.7H50.8z"/>
<linearGradient id="heroV2ColorTopLeft4" gradientUnits="userSpaceOnUse" x1="190.821" y1="18.3911" x2="-28.7839" y2="145.18">
<stop class="u-stop-color-primary-lighter" offset="1.953869e-07"/>
<stop class="u-stop-color-primary" offset="1"/>
</linearGradient>
<path fill="url(#heroV2ColorTopLeft4)" d="M0,0c0,0,0,194.9,0,195c0,0.8,4.6,3.2,5.2,3.6c4.7,2.9,9.7,5.4,14.9,7.4c16.6,6.4,34.8,7.9,52.1,4
c15.6-3.5,30.6-10.6,42.9-20.8c13.1-10.9,20.8-25.4,26.7-41.1c7-18.5,13.6-37.1,19.9-55.8c5.9-17.3,12.5-34.5,17.1-52.3
c1.6-6.5,2.9-13.1,3.3-19.8c0.1-1.9,0.5-20.2-2.4-20.2C179.7,0,0,0,0,0z"/>
</g>
</svg>
</figure>
<!-- End SVG Top Left Shapes -->
<!-- SVG Bottom Right Shapes -->
<figure class="position-absolute-bottom-right-0 w-15">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 268.1 298.3" style="enable-background:new 0 0 268.1 298.3;" xml:space="preserve">
<linearGradient id="heroV2ColorBottomRight1" gradientUnits="userSpaceOnUse" x1="20.7708" y1="63.0138" x2="294.8091" y2="261.3844">
<stop class="u-stop-color-primary-darker" offset="1.953869e-07"/>
<stop class="u-stop-color-primary-lighter" offset="1"/>
</linearGradient>
<path fill="url(#heroV2ColorBottomRight1)" d="M268.1,82.4l-41.5-45.3c0,0-90.6-87.6-190.6,6.5c0,0-65.6,64.9-19.8,154.5c0,0,11.8,22.2,38.8,48.9l47.7,51.4
h165.3V82.4z"/>
<linearGradient id="heroV2ColorBottomRight2" gradientUnits="userSpaceOnUse" x1="7.729" y1="250.3761" x2="268.9255" y2="155.3083">
<stop class="u-stop-color-primary-lighter" offset="0"/>
<stop class="u-stop-color-primary" offset="1"/>
</linearGradient>
<path fill="url(#heroV2ColorBottomRight2)" d="M268.1,153.1l-41.8-45.6c0,0-81.5-78.2-176.9-6.5c0,0-40,28.4-47.7,83.1S16.9,277.6,37,297.6h231.1V153.1z"/>
</svg>
</figure>
<!-- End SVG Bottom Right Shapes -->
<!-- SVG Bottom Shape -->
<figure class="position-absolute-bottom-0">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1920 140" style="margin-bottom: -9px; enable-background:new 0 0 1920 140;" xml:space="preserve">
<path class="u-fill-white" d="M960,92.9C811.4,93.3,662.8,89.4,515.3,79c-138.6-9.8-277.1-26.2-409-53.3C97.8,24,0,6.5,0,0c0,0,0,140,0,140
l960-1.2l960,1.2c0,0,0-140,0-140c0,2.7-42.1,11.3-45.8,12.2c-45.1,11-91.5,20.1-138.4,28.1c-176.2,30.1-359.9,43.8-542.9,48.9
C1115.4,91.4,1037.7,92.7,960,92.9z"/>
</svg>
</figure>
<!-- End SVG Bottom Shape -->
</div>
<!-- End Hero Section -->
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/helpers/hs.focus-state.js"></script>
<script src="assets/js/components/hs.validation.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of forms
$.HSCore.helpers.HSFocusState.init();
// initialization of form validation
$.HSCore.components.HSValidation.init('.js-validate', {
rules: {
confirmPassword: {
equalTo: '#password'
}
}
});
});
</script>