Easy start,
Easy setup
Integrate and setup your business with Front. Covert more visitors, and win more business with Front template.
Join Front for free now!
HTML:
<!-- Hero Section -->
<div class="container u-space-5-top--md u-space-4-top u-space-3-bottom">
<div class="row justify-content-lg-between align-items-lg-center">
<div class="col-lg-5 mb-4">
<!-- Title -->
<div class="mb-3">
<h1 class="display-4 font-size-48--md-down mb-0">Easy start,</h1>
<h2 class="text-primary display-3 font-size-48--md-down font-weight-bold">Easy setup</h2>
</div>
<p>Integrate and setup your business with Front. Covert more visitors, and win more business with Front template.</p>
<!-- End Title -->
</div>
<div class="col-lg-6 mb-4">
<!-- SVG Icon -->
<figure class="d-none d-lg-block">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 189.2 103.8" style="enable-background:new 0 0 189.2 103.8;" xml:space="preserve">
<g id="XMLID_306_">
<rect id="XMLID_684_" x="129.8" y="66.9" class="u-fill-white" width="9.3" height="5.7"/>
<polyline id="XMLID_381_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" points="129.8,72.5 129.8,66.9 135.4,66.9 "/>
<path id="XMLID_682_" class="u-fill-white" d="M141.9,102.7h-14.7V71.5c0-0.8,0.6-1.4,1.4-1.4h11.9c0.8,0,1.4,0.6,1.4,1.4V102.7z"/>
<line id="XMLID_380_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="128.2" y1="70.1" x2="135.4" y2="70.1"/>
<line id="XMLID_686_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="134.6" y1="61.3" x2="134.6" y2="66.4"/>
<line id="XMLID_685_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="130.6" y1="73.9" x2="130.6" y2="100.8"/>
<line id="XMLID_687_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="134.5" y1="73.9" x2="134.5" y2="100.8"/>
<line id="XMLID_688_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="138.5" y1="73.9" x2="138.5" y2="100.8"/>
<g id="XMLID_315_">
<path id="XMLID_379_" class="u-fill-primary-lighter" opacity=".2" d="M156.9,67.4v32.9c0,1.1-0.9,1.9-1.9,1.9h-15.5c-1.1,0-1.9-0.9-1.9-1.9V67.4
c0-1.1,0.9-1.9,1.9-1.9H155C156,65.4,156.9,66.3,156.9,67.4z"/>
<path id="XMLID_357_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M156.9,87.8v-17v-3.3c0-1.2-0.9-2.1-2.1-2.1h-15.1c-1.2,0-2.1,0.9-2.1,2.1v19.8v9.8v2.9
c0,1.2,0.9,2.1,2.1,2.1h9.6"/>
<path id="XMLID_356_" class="u-fill-white" d="M153.6,83.9c-0.1,3.6-3,6.5-6.6,6.4c-3.6-0.1-6.5-3-6.4-6.6c0.1-3.6,3-6.4,6.6-6.4
C150.9,77.3,153.7,80.3,153.6,83.9z"/>
<path id="XMLID_350_" class="u-fill-white" d="M148.7,73.6c0,1-0.8,1.7-1.8,1.7c-1,0-1.7-0.8-1.7-1.8c0-1,0.8-1.7,1.8-1.7
C148,71.8,148.7,72.6,148.7,73.6z"/>
<path id="XMLID_349_" class="u-fill-white" d="M148.7,94.3c0,1-0.8,1.7-1.8,1.7c-1,0-1.7-0.8-1.7-1.8c0-1,0.8-1.7,1.8-1.7
C148,92.5,148.7,93.3,148.7,94.3z"/>
<g id="XMLID_329_">
<path id="XMLID_335_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M144.7,81.1v3.2c0,0.7,0.6,1.2,1.2,1.2l0,0c0.7,0,1.2-0.6,1.2-1.2V83c0-0.7,0.6-1.2,1.2-1.2
l0,0c0.7,0,1.2,0.6,1.2,1.2v3.3"/>
<line id="XMLID_332_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="142.6" y1="83.7" x2="151.6" y2="83.7"/>
</g>
<path id="XMLID_323_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M153.8,75.3V72c0-0.2-0.1-0.3-0.3-0.3c-1.7-0.1-3-1.5-3.2-3.2c0-0.2-0.1-0.3-0.3-0.3
c-1.1,0-4.7,0-5.7,0c-0.2,0-0.3,0.1-0.3,0.3c-0.1,1.7-1.5,3.1-3.2,3.2c-0.2,0-0.3,0.1-0.3,0.3v2.8"/>
<path id="XMLID_317_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M149.6,99.6c-1.1,0-5.3,0-6.4,0c-0.2,0-0.3-0.1-0.3-0.3c-0.1-1.7-1.5-3.1-3.2-3.2
c-0.2,0-0.3-0.1-0.3-0.3v-2.8"/>
</g>
<path id="XMLID_313_" class="u-fill-white" d="M150.9,103v-3.3c0-0.3,0.2-0.5,0.5-0.5h12.7c0.3,0,0.5,0.2,0.5,0.5v3.3H150.9z"/>
<path id="XMLID_312_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M150.9,103v-3.3c0-0.3,0.2-0.5,0.5-0.5h12.7c0.3,0,0.5,0.2,0.5,0.5v3.3"/>
<path id="XMLID_310_" class="u-fill-white" d="M165,98.7H152c-0.2,0-0.4-0.2-0.4-0.4v-3.6c0-0.2,0.2-0.4,0.4-0.4H165c0.2,0,0.4,0.2,0.4,0.4
v3.6C165.3,98.5,165.2,98.7,165,98.7z"/>
<path id="XMLID_309_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M165,98.7H152c-0.2,0-0.4-0.2-0.4-0.4v-3.6c0-0.2,0.2-0.4,0.4-0.4H165c0.2,0,0.4,0.2,0.4,0.4
v3.6C165.3,98.5,165.2,98.7,165,98.7z"/>
<path id="XMLID_308_" class="u-fill-white" d="M164.3,93.8h-12.9c-0.2,0-0.4-0.2-0.4-0.4v-3.6c0-0.2,0.2-0.4,0.4-0.4h12.9
c0.2,0,0.4,0.2,0.4,0.4v3.6C164.7,93.6,164.6,93.8,164.3,93.8z"/>
<path id="XMLID_307_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M164.3,93.8h-12.9c-0.2,0-0.4-0.2-0.4-0.4v-3.6c0-0.2,0.2-0.4,0.4-0.4h12.9
c0.2,0,0.4,0.2,0.4,0.4v3.6C164.7,93.6,164.6,93.8,164.3,93.8z"/>
</g>
<g id="XMLID_364_">
<line id="XMLID_366_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="96.4" y1="5.8" x2="100.7" y2="5.8"/>
<line id="XMLID_365_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="98.5" y1="7.9" x2="98.5" y2="3.6"/>
</g>
<g id="XMLID_438_">
<line id="XMLID_441_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="37.7" y1="22.6" x2="42" y2="22.6"/>
<line id="XMLID_439_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="39.8" y1="24.8" x2="39.8" y2="20.5"/>
</g>
<g id="XMLID_358_">
<line id="XMLID_360_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="185.4" y1="41.5" x2="188.4" y2="38.5"/>
<line id="XMLID_359_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="188.4" y1="41.5" x2="185.4" y2="38.5"/>
</g>
<g id="XMLID_446_">
<line id="XMLID_448_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="4.6" y1="62.8" x2="7.6" y2="59.8"/>
<line id="XMLID_447_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="7.6" y1="62.8" x2="4.6" y2="59.8"/>
</g>
<line id="XMLID_397_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="11.3" y1="48" x2="28.7" y2="48"/>
<line id="XMLID_398_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="69.7" y1="5.8" x2="50" y2="5.8"/>
<line id="XMLID_437_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="145.7" y1="40" x2="183.5" y2="40"/>
<line id="XMLID_396_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="33.8" y1="48" x2="30.2" y2="48"/>
<line id="XMLID_436_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="95.2" y1="11.8" x2="112.6" y2="11.8"/>
<line id="XMLID_267_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="117.6" y1="11.8" x2="114.1" y2="11.8"/>
<path id="XMLID_344_" class="u-fill-primary" d="M128.5,34.7c0,0.7-0.6,1.3-1.3,1.3c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3
C127.9,33.3,128.5,33.9,128.5,34.7z"/>
<path id="XMLID_445_" class="u-fill-primary" d="M59.5,55.5c0,0.7-0.6,1.3-1.3,1.3c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3
C58.9,54.2,59.5,54.8,59.5,55.5z"/>
<path id="XMLID_442_" class="u-fill-primary" d="M148.4,20.6c0,0.4-0.3,0.8-0.8,0.8c-0.4,0-0.8-0.3-0.8-0.8s0.3-0.8,0.8-0.8
C148.1,19.8,148.4,20.1,148.4,20.6z"/>
<path id="XMLID_444_" class="u-fill-primary" d="M56.7,1c0,0.6-0.5,1-1,1c-0.6,0-1-0.5-1-1c0-0.6,0.5-1,1-1C56.2,0,56.7,0.5,56.7,1z"/>
<g id="XMLID_2_">
<path id="XMLID_269_" class="u-fill-white" d="M121.7,103H47c-4.2,0-7.5-3.4-7.5-7.5v-0.3c0-4.2,3.4-7.5,7.5-7.5h74.7c4.2,0,7.5,3.4,7.5,7.5
v0.3C129.3,99.6,125.9,103,121.7,103z"/>
<ellipse id="XMLID_299_" transform="matrix(0.7341 -0.6791 0.6791 0.7341 -36.064 59.677)" class="u-fill-white" cx="58.2" cy="75.9" rx="11.7" ry="11.7"/>
<path id="XMLID_298_" class="u-fill-white" d="M50,77.7c0,2.6-2.1,4.6-4.6,4.6c-2.6,0-4.6-2.1-4.6-4.6c0-2.6,2.1-4.6,4.6-4.6
C47.9,73,50,75.1,50,77.7z"/>
<path id="XMLID_42_" class="u-fill-white" d="M47.7,83c0,3.8-3.1,6.9-6.9,6.9c-3.8,0-6.9-3.1-6.9-6.9c0-3.8,3.1-6.9,6.9-6.9
C44.7,76.1,47.7,79.2,47.7,83z"/>
<path id="XMLID_229_" class="u-fill-white" d="M48.7,93.8c0,5.1-4.1,9.3-9.3,9.3c-5.1,0-9.3-4.1-9.3-9.3c0-5.1,4.1-9.3,9.3-9.3
C44.6,84.5,48.7,88.6,48.7,93.8z"/>
<path id="XMLID_278_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M39.5,103c-5.1,0-9.3-4.1-9.3-9.3c0-3.1,1.6-5.9,3.9-7.6"/>
<path id="XMLID_297_" class="u-fill-white" d="M72.5,85.3c0,2.1-1.7,3.9-3.9,3.9c-2.1,0-3.9-1.7-3.9-3.9c0-2.1,1.7-3.9,3.9-3.9
C70.8,81.4,72.5,83.1,72.5,85.3z"/>
<ellipse id="XMLID_296_" transform="matrix(0.1597 -0.9872 0.9872 0.1597 17.3587 171.1808)" class="u-fill-white" cx="109.2" cy="75.4" rx="10.7" ry="10.7"/>
<path id="XMLID_435_" class="u-fill-white" d="M121.8,81.4c-0.3,3.8-3.1,6.8-6.8,6.8c-3.8,0-6.8-3.1-6.8-6.8s3.1-6.8,6.8-6.8
C118.7,74.5,122.1,77.6,121.8,81.4z"/>
<path id="XMLID_284_" class="u-fill-white" d="M114.9,86.1c-0.3,3.8-3.1,6.8-6.8,6.8s-6.8-3.1-6.8-6.8c0-3.8,3.1-6.8,6.8-6.8
S115.3,82.3,114.9,86.1z"/>
<path id="XMLID_285_" class="u-fill-white" d="M67.9,86.2C67.2,90,62,93,54.8,93c-7.2,0-13-3.1-13-6.8c0-3.8,5.8-6.8,13-6.8
C62,79.3,68.5,82.4,67.9,86.2z"/>
<path id="XMLID_261_" class="u-fill-white" d="M135.4,83c-0.5,5.5-4.5,10-10,10c-5.5,0-10-4.5-10-10c0-5.5,4.5-10,10-10
C131,73,135.9,77.5,135.4,83z"/>
<path id="XMLID_262_" class="u-fill-white" d="M132.7,93.4c-0.5,5.3-4.3,9.6-9.6,9.6c-5.3,0-9.6-4.3-9.6-9.6c0-5.3,4.3-9.6,9.6-9.6
C128.4,83.7,133.2,88.1,132.7,93.4z"/>
<path id="XMLID_292_" class="u-fill-white" d="M106.4,82.5c0,3.5-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3s2.8-6.3,6.3-6.3
C103.6,76.2,106.4,79,106.4,82.5z"/>
<path id="XMLID_290_" class="u-fill-white" d="M98.3,88c0,2-1.6,3.7-3.7,3.7c-2,0-3.7-1.6-3.7-3.7c0-2,1.6-3.7,3.7-3.7
C96.7,84.3,98.3,86,98.3,88z"/>
<path id="XMLID_289_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M90.7,88.3c0-2,1.6-3.7,3.7-3.7"/>
<path id="XMLID_288_" class="u-fill-white" d="M83.3,90.3c0,2.3-3.3,4.2-7.3,4.2c-4,0-7.3-1.9-7.3-4.2c0-2.3,3.3-4.2,7.3-4.2
C80,86.1,83.3,88,83.3,90.3z"/>
<path id="XMLID_434_" class="u-fill-white" d="M125.6,73.3c0,2.7-4.6,10-4.6,6.6c0-2.7-4.9-2.2-4.9-4.9s2.2-4.9,4.9-4.9
C123.7,70.1,125.6,70.6,125.6,73.3z"/>
<path id="XMLID_287_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M119.1,70.5c0.6-0.3,1.3-0.4,2-0.4c2,0,3.7,1.2,4.5,2.9"/>
<path id="XMLID_282_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M101.7,83c-1.9-1.9-3.1-4.6-3.1-7.6c0-3,1.2-5.6,3.1-7.6c1.9-1.9,4.6-3.1,7.6-3.1
c3,0,5.6,1.2,7.6,3.1c1.9,1.9,3.1,4.6,3.1,7.6"/>
<g id="XMLID_281_">
<rect id="XMLID_449_" x="76.7" y="45.6" class="u-fill-white" width="12.4" height="5.2"/>
<rect id="XMLID_710_" x="76.7" y="45.6" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" width="12.4" height="5.2"/>
<path id="XMLID_516_" class="u-fill-primary" opacity=".7" d="M63.8,45.6h11.8V20l-4.3,5.9c-1.3,1.7-2.7,3.2-4.2,4.7c-2,2-3.2,4.7-3.2,7.6V45.6z"/>
<polygon id="XMLID_714_" class="u-fill-primary" opacity=".5" points="71.8,25.1 71.8,45.6 75.6,45.6 75.6,20 "/>
<path id="XMLID_513_" class="u-fill-primary" opacity=".7" d="M101.5,46.1H89.7V20.5l4.3,5.9c1.3,1.7,2.7,3.2,4.2,4.7c2,2,3.2,4.7,3.2,7.6V46.1z"/>
<polygon id="XMLID_712_" class="u-fill-primary" opacity=".5" points="93.8,24.7 93.8,45.2 90,45.2 90,19.6 "/>
<path id="XMLID_549_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M63.8,45.6h11.8V20l-4.3,5.9c-1.3,1.7-2.7,3.2-4.2,4.7c-2,2-3.2,4.7-3.2,7.6V45.6z"/>
<path id="XMLID_548_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M101.5,45.6H89.7V20l4.3,5.9c1.3,1.7,2.7,3.2,4.2,4.7c2,2,3.2,4.7,3.2,7.6V45.6z"/>
<path id="XMLID_511_" class="u-fill-white" d="M90.8,48.2H74.6V14.6c0-3.9,1.8-7.6,4.9-10L81,3.5c1-0.8,2.5-0.8,3.5,0l1.6,1.2
c3,2.3,4.8,5.9,4.8,9.7V48.2z"/>
<path id="XMLID_509_" class="u-fill-primary" d="M78.6,5.6l1.9-1.5c1.4-1.1,3.3-1.1,4.6,0l2.1,1.6L78.6,5.6z"/>
<path id="XMLID_715_" class="u-fill-primary" opacity=".25" d="M83.1,4.6l1.4-1.1l0,0c-1-0.8-2.5-0.8-3.5,0l-1.4,1.1c-3.1,2.4-4.9,6.1-4.9,10v33.6h3.6V14.6
C78.2,10.7,80,7,83.1,4.6z"/>
<path id="XMLID_465_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M78.6,21.6c0-2.3,1.8-4.1,4.1-4.1c2.3,0,4.1,1.8,4.1,4.1"/>
<path id="XMLID_517_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M90.8,48.2H74.6V14.6c0-3.9,1.8-7.6,4.9-10L81,3.5c1-0.8,2.5-0.8,3.5,0l1.6,1.2
c3,2.3,4.8,5.9,4.8,9.7V48.2z"/>
</g>
<path id="XMLID_440_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M100.1,88.8c-3.5,0-6.3-2.8-6.3-6.3c0-2.9,2-5.4,4.7-6.1"/>
<path id="XMLID_279_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M46.4,75.9c0-6.5,5.3-11.7,11.7-11.7s11.7,5.3,11.7,11.7c0,4.4-2.4,8.2-5.9,10.2"/>
<path id="XMLID_383_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M43.2,73.6c0.7-0.3,1.4-0.5,2.2-0.5c0.5,0,0.9,0.1,1.4,0.2"/>
<path id="XMLID_277_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M68.7,81.4c2.1,0,3.9,1.7,3.9,3.9c0,2.1-1.7,3.9-3.9,3.9"/>
<path id="XMLID_276_" class="u-fill-white" d="M98.3,94.3H70.6l8-9V51.9h8.6l-0.4,30.4c0,1.8,0.8,3.6,2.2,4.7L98.3,94.3z"/>
<path id="XMLID_514_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M87,51.9v31.7c0,1.8,1.5,3.3,3.3,3.4h0.9"/>
<path id="XMLID_512_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M72.5,86.2h3c1.7,0,3-1.4,3-3V51.9"/>
<path id="XMLID_275_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M74.8,100.6c0-0.6,0.1-1.3,0.3-1.9c0.2-0.6,0.6-1.1,1-1.6c0.4-0.5,1-0.9,1.6-1.1
c0.6-0.3,1.3-0.4,1.9-0.4c0.6,0,1.3,0.1,1.9,0.3c0.6,0.2,1.1,0.6,1.6,1"/>
<path id="XMLID_274_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M50,88.6c0-0.6,0.1-1.3,0.3-1.9c0.2-0.6,0.6-1.1,1-1.6c0.4-0.5,1-0.9,1.6-1.1
c0.6-0.3,1.3-0.4,1.9-0.4c0.6,0,1.3,0.1,1.9,0.3c0.6,0.2,1.1,0.6,1.6,1"/>
<path id="XMLID_273_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M106.4,79.4c0.6-0.3,1.2-0.4,1.9-0.4c0.6,0,1.3,0.1,1.9,0.3c0.6,0.2,1.2,0.6,1.7,1
c0.5,0.5,0.9,1,1.1,1.6c0.3,0.6,0.4,1.2,0.4,1.9c0,0.6-0.1,1.3-0.3,1.9"/>
<path id="XMLID_272_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M80.5,95.7c0.1-0.6,0.3-1.3,0.7-1.9c0.4-0.6,0.8-1.1,1.3-1.5c0.5-0.4,1.1-0.7,1.7-0.8
c0.6-0.2,1.3-0.2,1.9-0.1"/>
<path id="XMLID_286_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M113.4,96.8c0.1-0.6,0.3-1.3,0.7-1.9c0.4-0.6,0.8-1.1,1.3-1.5c0.5-0.4,1.1-0.7,1.7-0.8
c0.6-0.2,1.3-0.2,1.9-0.1"/>
<path id="XMLID_271_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M97.3,102.3c-0.6-0.2-1.2-0.5-1.7-1c-0.5-0.5-0.9-1-1.2-1.6c-0.3-0.6-0.4-1.2-0.5-1.8
c0-0.6,0-1.3,0.2-1.9"/>
<path id="XMLID_230_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M36,87.8c-1.2-1.2-2-3-2-4.8c0-3.8,3.1-6.9,6.9-6.9c1.7,0,3.2,0.6,4.3,1.6"/>
<path id="XMLID_263_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M123.1,73.3c0.8-0.2,1.5-0.3,2.4-0.3c5.5,0,10.5,4.5,10,10c-0.4,4-2.5,7.4-5.8,9"/>
<path id="XMLID_268_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M132.4,90.3c0.3,1,0.4,2,0.3,3.1c-0.5,5.3-4.3,9.6-9.6,9.6"/>
</g>
<g id="XMLID_382_">
<path id="XMLID_432_" class="u-fill-primary" opacity=".7" d="M43.1,80.7H16.2c-0.8,0-1.4,0.6-1.4,1.4V103h26.9c1.6,0,2.9-1.3,2.9-2.9V82.2
C44.6,81.4,43.9,80.7,43.1,80.7z"/>
<path id="XMLID_431_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M33.5,80.7H16c-0.6,0-1.2,0.5-1.2,1.2V103h27.4c1.3,0,2.3-1,2.3-2.3V81.9
c0-0.7-0.5-1.2-1.2-1.2h-1.8"/>
<g id="XMLID_422_">
<path id="XMLID_430_" class="u-fill-white" d="M33.9,72.4l5.9,5.9V99c0,0.9-0.8,1.7-1.7,1.7H20.4c-0.9,0-1.7-0.8-1.7-1.7V74.1
c0-0.9,0.8-1.7,1.7-1.7H33.9z"/>
<polygon id="XMLID_426_" class="u-fill-primary" opacity=".7" points="33.9,78.3 33.9,72.4 39.8,78.3 "/>
<path id="XMLID_425_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M39.8,78.3h-5.3c-0.3,0-0.6-0.3-0.6-0.6v-5.3"/>
<path id="XMLID_423_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M18.8,82v-8c0-0.9,0.8-1.7,1.7-1.7h13.5l5.9,5.9V99c0,0.9-0.8,1.7-1.7,1.7H20.4"/>
</g>
<g id="XMLID_405_">
<path id="XMLID_421_" class="u-fill-primary-lighter" opacity=".2" d="M37.4,70.6l5.9,5.9v20.7c0,0.9-0.8,1.7-1.7,1.7H23.9c-0.9,0-1.7-0.8-1.7-1.7V72.3
c0-0.9,0.8-1.7,1.7-1.7H37.4z"/>
<polygon id="XMLID_420_" class="u-fill-primary" opacity=".7" points="37.4,76.6 37.4,70.6 43.3,76.6 "/>
<path id="XMLID_419_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M43.3,76.6h-5.3c-0.3,0-0.6-0.3-0.6-0.6v-5.3"/>
<line id="XMLID_418_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="40.4" y1="79.5" x2="25.4" y2="79.5"/>
<line id="XMLID_417_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="40.4" y1="82.8" x2="25.4" y2="82.8"/>
<line id="XMLID_416_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="40.4" y1="86.2" x2="25.4" y2="86.2"/>
<line id="XMLID_415_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="40.4" y1="89.5" x2="25.4" y2="89.5"/>
<path id="XMLID_407_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M22.2,84.3v-12c0-0.9,0.8-1.7,1.7-1.7h13.5l5.9,5.9v20.7c0,0.9-0.8,1.7-1.7,1.7h-0.8"/>
</g>
<g id="XMLID_386_">
<path id="XMLID_401_" class="u-fill-white" d="M40.8,73.2l5.9,5.9v20.7c0,0.9-0.8,1.7-1.7,1.7H27.3c-0.9,0-1.7-0.8-1.7-1.7V74.9
c0-0.9,0.8-1.7,1.7-1.7H40.8z"/>
<polygon id="XMLID_400_" class="u-fill-primary" opacity=".7" points="40.8,79.2 40.8,73.2 46.7,79.2 "/>
<path id="XMLID_393_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M46.7,79.2h-5.3c-0.3,0-0.6-0.3-0.6-0.6v-5.3"/>
<line id="XMLID_392_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="43.9" y1="82" x2="28.8" y2="82"/>
<line id="XMLID_390_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="43.9" y1="85.4" x2="28.8" y2="85.4"/>
<line id="XMLID_389_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="43.9" y1="88.8" x2="28.8" y2="88.8"/>
<line id="XMLID_388_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="43.9" y1="92.1" x2="28.8" y2="92.1"/>
<path id="XMLID_387_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M25.7,84.3v-9.4c0-0.9,0.8-1.7,1.7-1.7h13.5l5.9,5.9v20.7c0,0.9-0.8,1.7-1.7,1.7h-3"/>
</g>
<path id="XMLID_385_" class="u-fill-white" d="M42.2,103H13.8c-0.7,0-1.2-0.6-1.2-1.2V84.2c0-0.6,0.5-1,1-1h4.8c0.4,0,0.7,0.2,0.9,0.5l1.3,2
h18c0.7,0,1.2,0.5,1.2,1.2v13.8C39.8,101.8,40.6,103,42.2,103z"/>
<path id="XMLID_384_" class="u-fill-primary-lighter" opacity=".4" d="M39.8,100.6v-2H12.6v3.2c0,0.7,0.6,1.2,1.2,1.2h28.4C40.6,103,39.8,101.8,39.8,100.6z"/>
<path id="XMLID_433_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" d="M12.6,102.9V84.2c0-0.6,0.5-1,1-1h4.8c0.4,0,0.7,0.2,0.9,0.5l1.3,2h18c0.7,0,1.2,0.5,1.2,1.2
v13.8c0,1.1,0.8,2.4,2.4,2.4"/>
</g>
<g id="XMLID_318_">
<line id="XMLID_322_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="4.6" y1="103" x2="168.4" y2="103"/>
<line id="XMLID_321_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="0" y1="103" x2="2.7" y2="103"/>
<line id="XMLID_320_" class="u-fill-none u-stroke-primary" stroke-width="1.5" stroke-miterlimit="10" x1="169.9" y1="103" x2="176" y2="103"/>
</g>
</svg>
</figure>
<!-- End SVG Icon -->
</div>
</div>
<div class="row">
<div class="col-lg-8">
<h3 class="h6">Join Front for free now!</h3>
<!-- Form -->
<form class="js-validate">
<div class="row mx-gutters-2 mb-3">
<div class="col-6 col-sm-4 mb-2 mb-md-0">
<!-- Input -->
<div class="js-form-message">
<div class="js-focus-state input-group u-form">
<input type="text" class="form-control u-form__input" name="username" required
placeholder="Your name"
aria-label="Your name"
data-msg="Name must contain only letters.">
</div>
</div>
<!-- End Input -->
</div>
<div class="col-6 col-sm-4 mb-2 mb-md-0">
<!-- Input -->
<div class="js-form-message">
<div class="js-focus-state input-group u-form">
<input type="email" class="form-control u-form__input" name="username" required
placeholder="Your email"
aria-label="Your email"
data-msg="Please enter a valid email address.">
</div>
</div>
<!-- End Input -->
</div>
<div class="col-sm-3 mb-2 mb-md-0">
<!-- Input -->
<button type="submit" class="btn btn-primary u-btn-primary u-btn-wide transition-3d-hover">Get Started</button>
<!-- End Input -->
</div>
</div>
<!-- Checkbox -->
<div class="custom-control custom-checkbox d-flex align-items-center small text-muted">
<input type="checkbox" class="custom-control-input" id="termsCheckbox">
<label class="custom-control-label" for="termsCheckbox">
I agree to the
<a class="u-link-muted" href="../../html/pages/terms.html">Terms and Conditions</a>
</label>
</div>
<!-- End Checkbox -->
</form>
<!-- End Form -->
</div>
</div>
</div>
<!-- End Hero Section -->
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/hs-bg-video/vendor/player.min.js"></script>
<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>