612 lines
26 KiB
HTML
612 lines
26 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="@@languageDirection.lang" dir="@@if(languageDirection.isRTL){rtl}">
|
||
<head>
|
||
<!-- Required Meta Tags Always Come First -->
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
|
||
<!-- Title -->
|
||
<title>Advertisement | Front - Multipurpose Responsive Template</title>
|
||
|
||
<!-- Favicon -->
|
||
<link rel="shortcut icon" href="@@autopath/favicon.ico">
|
||
|
||
<!-- Font -->
|
||
<link href="@@vars.themeFont" rel="stylesheet">
|
||
|
||
<!-- CSS Implementing Plugins -->
|
||
<!-- bundlecss:vendor [@@autopath] -->
|
||
<link rel="stylesheet" href="@@autopath/node_modules/bootstrap-icons/font/bootstrap-icons.css">
|
||
<link rel="stylesheet" href="@@autopath/assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css">
|
||
<link rel="stylesheet" href="@@autopath/node_modules/nouislider/dist/nouislider.min.css">
|
||
<link rel="stylesheet" href="@@autopath/node_modules/aos/dist/aos.css">
|
||
|
||
<!-- CSS Front Template -->
|
||
<!-- bundlecss:theme [@@autopath] @@vars.version -->
|
||
<link rel="stylesheet" href="@@autopath/assets/css/theme.css">
|
||
</head>
|
||
|
||
<body>
|
||
<!-- ========== HEADER ========== -->
|
||
@@include("@@autopath/partials/navbar/main-with-topbar-absolute-top-slide.html", {
|
||
"topbarcategory": "demos",
|
||
"topbarlink": "main",
|
||
"category": "landings",
|
||
"subcategory": "",
|
||
"link": "landing-classic-advertisement.html"
|
||
})
|
||
<!-- ========== END HEADER ========== -->
|
||
|
||
<!-- ========== MAIN CONTENT ========== -->
|
||
<main id="content" role="main" class="overflow-hidden">
|
||
<!-- Hero -->
|
||
<div class="position-relative bg-img-start" style="background-image: url(@@autopath/assets/svg/components/card-11.svg);">
|
||
<div class="container content-space-t-4 content-space-b-1 content-space-b-lg-3">
|
||
<div class="row justify-content-lg-between align-items-lg-center pt-lg-5">
|
||
<div class="col-md-8 col-lg-5">
|
||
<!-- Heading -->
|
||
<div class="mb-5">
|
||
<h1 class="display-4 mb-3">The ad that manages itself</h1>
|
||
<p class="lead">Automate all your ad management strategies for Facebook, Google and Snapchat Ads in a single interface.</p>
|
||
</div>
|
||
<!-- End Title & Description -->
|
||
|
||
<!-- Form -->
|
||
<form class="mb-7">
|
||
<!-- Input Group -->
|
||
<div class="row gx-2">
|
||
<div class="col-sm-6 col-md mb-2 mb-sm-0">
|
||
<input type="text" class="form-control form-control-lg" placeholder="Enter your email" aria-label="Enter your email" aria-describedby="emailAddOn">
|
||
</div>
|
||
<div class="col-sm-auto">
|
||
<div class="d-grid">
|
||
<button class="btn btn-primary btn-lg" type="button" id="emailAddOn">Request demo</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Input Group -->
|
||
</form>
|
||
<!-- End Form -->
|
||
|
||
<span class="text-cap">Front partners:</span>
|
||
|
||
<div class="row">
|
||
<div class="col py-3">
|
||
<img class="avatar avatar-lg avatar-4x3" src="@@autopath/assets/svg/brands/layar-dark.svg" alt="Logo">
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col py-3">
|
||
<img class="avatar avatar-lg avatar-4x3" src="@@autopath/assets/svg/brands/fitbit-dark.svg" alt="Logo">
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col py-3">
|
||
<img class="avatar avatar-lg avatar-4x3" src="@@autopath/assets/svg/brands/capsule-dark.svg" alt="Logo">
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
|
||
<!-- Gallery -->
|
||
<div class="col-lg-6 d-none d-lg-block position-lg-absolute bottom-0 end-0 transform-rotate-n22deg me-lg-n10">
|
||
<div class="row gx-3 align-items-end">
|
||
<div class="col">
|
||
<div class="d-grid gap-3">
|
||
<div data-aos="fade-up" data-aos-offset="-50">
|
||
<img class="img-fluid shadow-lg rounded-2" src="@@autopath/assets/img/407x472/img2.jpg" alt="Image Description">
|
||
</div>
|
||
<div data-aos="fade-up" data-aos-delay="100" data-aos-offset="-50">
|
||
<img class="img-fluid shadow-lg rounded-2" src="@@autopath/assets/img/407x472/img3.jpg" alt="Image Description">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col">
|
||
<div class="d-grid gap-3">
|
||
<div data-aos="fade-up" data-aos-delay="200" data-aos-offset="-50">
|
||
<img class="img-fluid shadow-lg rounded-2" src="@@autopath/assets/img/407x520/img1.jpg" alt="Image Description">
|
||
</div>
|
||
<div data-aos="fade-up" data-aos-delay="300" data-aos-offset="-50">
|
||
<img class="img-fluid shadow-lg rounded-2" src="@@autopath/assets/img/407x407/img1.jpg" alt="Image Description">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col">
|
||
<div class="d-grid gap-3">
|
||
<div data-aos="fade-up" data-aos-delay="400" data-aos-offset="-50">
|
||
<img class="img-fluid shadow-lg rounded-2" src="@@autopath/assets/img/407x472/img6.jpg" alt="Image Description">
|
||
</div>
|
||
<div data-aos="fade-up" data-aos-delay="500" data-aos-offset="-50">
|
||
<img class="img-fluid shadow-lg rounded-2" src="@@autopath/assets/img/407x115/img1.jpg" alt="Image Description">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Gallery -->
|
||
</div>
|
||
<!-- End Hero -->
|
||
|
||
<!-- Icon Blocks -->
|
||
<div class="container content-space-2 content-space-t-lg-4 content-space-b-lg-3">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
||
<span class="text-cap">Benefits</span>
|
||
<h2 class="h1">What our 37,500+ clients love about Front</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row">
|
||
<div class="col-md-4 mb-5 mb-md-0">
|
||
<!-- Icon Blocks -->
|
||
<div class="text-center px-lg-3">
|
||
<div class="svg-icon text-primary mb-4">
|
||
@@include("@@autopath/assets/vendor/duotone-icons/abs/abs028.svg")
|
||
</div>
|
||
<h3>Less routine<br>– more creativity</h3>
|
||
<p>Automate best strategies and focus more on generating hq creatives.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-4 mb-5 mb-md-0">
|
||
<!-- Icon Blocks -->
|
||
<div class="text-center px-lg-3">
|
||
<div class="svg-icon text-primary mb-4">
|
||
@@include("@@autopath/assets/vendor/duotone-icons/fin/fin010.svg")
|
||
</div>
|
||
<h3>Hundreds<br>of thousands saved</h3>
|
||
<p>Stop inefficient budget spend or pour more into a winning ad when needed.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-4">
|
||
<!-- Icon Blocks -->
|
||
<div class="text-center px-lg-3">
|
||
<div class="svg-icon text-primary mb-4">
|
||
@@include("@@autopath/assets/vendor/duotone-icons/gra/gra001.svg")
|
||
</div>
|
||
<h3>Scale<br>budgets efficiently</h3>
|
||
<p>Scale your budgets fast and increase ROI at the same time.</p>
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Icon Blocks -->
|
||
|
||
<!-- Testimonials -->
|
||
<div class="overflow-hidden content-space-b-2">
|
||
<div class="position-relative bg-dark rounded-2 mx-3 mx-md-10">
|
||
<div class="container content-space-1 content-space-md-2 content-space-lg-3 position-relative zi-2">
|
||
<!-- Blockquote -->
|
||
<figure class="w-md-75 text-center mx-md-auto">
|
||
<div class="mb-3">
|
||
<span class="text-cap text-white-70">Case study</span>
|
||
<img class="avatar avatar-xl avatar-4x3 mb-5" src="@@autopath/assets/svg/brands/mailchimp-white.svg" alt="Logo">
|
||
</div>
|
||
|
||
<blockquote class="blockquote blockquote-light mb-5">"I am absolutely floored by the level of care and attention to detail the team at Htmlstream have put into this theme and for one can guarantee that I will be a return customer. I've had my eye on this for quite some time but I've only recently be able to get hands on, with it."</blockquote>
|
||
|
||
<img class="avatar avatar-circle" src="@@autopath/assets/img/160x160/img10.jpg" alt="Image Description">
|
||
|
||
<figcaption class="blockquote-footer blockquote-light">
|
||
Luisa
|
||
<span class="blockquote-footer-source">Head of IT department</span>
|
||
</figcaption>
|
||
</figure>
|
||
<!-- End Blockquote -->
|
||
|
||
<!-- SVG Quote -->
|
||
<figure class="position-absolute top-50 start-50 translate-middle zi-n1 mb-10">
|
||
<svg width="400" height="400" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M13.5001 5.84998C9.0001 7.64998 5.4001 12.15 5.4001 16.2C5.4001 17.1 5.4001 18 5.8501 18.45C6.7501 17.55 8.1001 17.1 9.9001 17.1C13.5001 17.1 16.6501 19.8 16.6501 23.85C16.6501 27.9 13.5001 30.6 9.9001 30.6C6.3001 31.05 4.5001 29.7 3.1501 27.45C1.8001 25.2 1.3501 22.05 1.3501 20.25C1.3501 13.05 4.9501 7.19998 12.6001 3.59998L13.5001 5.84998ZM31.9501 5.84998C27.4501 7.64998 23.8501 12.15 23.8501 16.2C23.8501 17.1 23.8501 18 24.3001 18.45C25.2001 17.55 26.5501 17.1 28.3501 17.1C31.9501 17.1 35.1001 19.8 35.1001 23.85C35.1001 27.9 31.9501 30.6 28.3501 30.6C25.2001 30.6 23.4001 29.25 22.0501 27C19.8001 25.2 19.8001 22.05 19.8001 20.25C19.8001 13.05 23.4001 7.19998 31.0501 3.59998L31.9501 5.84998Z" fill="white" opacity=".025"/>
|
||
</svg>
|
||
</figure>
|
||
<!-- End SVG Quote -->
|
||
|
||
<!-- SVG Shape -->
|
||
<figure class="position-absolute top-0 start-0 mt-10 ms-10">
|
||
<svg width="70" height="70" opacity=".5" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M60.6655 74.9992C80.4557 74.9992 96.4988 58.9561 96.4988 39.1659C96.4988 19.3757 80.4557 3.33252 60.6655 3.33252C40.8753 3.33252 24.8322 19.3757 24.8322 39.1659C24.8322 58.9561 40.8753 74.9992 60.6655 74.9992Z" stroke="white" stroke-width="5" stroke-miterlimit="10"/>
|
||
<path d="M158.5 197.5C168.165 197.5 176 189.665 176 180C176 170.335 168.165 162.5 158.5 162.5C148.835 162.5 141 170.335 141 180C141 189.665 148.835 197.5 158.5 197.5Z" stroke="white" stroke-width="5" stroke-miterlimit="10"/>
|
||
</svg>
|
||
</figure>
|
||
<!-- End SVG Shape -->
|
||
|
||
<!-- SVG Shape -->
|
||
<figure class="position-absolute bottom-0 end-0 mb-n7 me-n7" style="width: 10rem;">
|
||
<img class="img-fluid" src="@@autopath/assets/svg/components/dots.svg" alt="Image Description">
|
||
</figure>
|
||
<!-- End SVG Shape -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Testimonials -->
|
||
|
||
<!-- Card Grid -->
|
||
<div class="container content-space-2">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
||
<span class="text-cap">Platforms</span>
|
||
<h2 class="h1">Three platforms – handled by one tool</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row">
|
||
<div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
|
||
<!-- Card -->
|
||
<a class="card card-lg card-transition h-100 text-center" href="#">
|
||
<div class="card-body">
|
||
<div class="mb-4">
|
||
<img class="avatar" src="@@autopath/assets/svg/brands/facebook-icon.svg" alt="Logo">
|
||
</div>
|
||
<h3 class="card-title">Facebook Ads</h3>
|
||
<p class="card-text text-body">Automated rules, Auto Post Boosting, Bulk Creation and reports in Slack.</p>
|
||
</div>
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
|
||
<!-- Card -->
|
||
<a class="card card-lg card-transition h-100 text-center" href="#">
|
||
<div class="card-body">
|
||
<div class="mb-4">
|
||
<img class="avatar" src="@@autopath/assets/svg/brands/google-adz-icon.svg" alt="Logo">
|
||
</div>
|
||
<h3 class="card-title">Google Ads</h3>
|
||
<p class="card-text text-body">The best scripts alternative and quick reports for the whole team.</p>
|
||
</div>
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-6 col-lg-4">
|
||
<!-- Card -->
|
||
<a class="card card-lg card-transition h-100 text-center" href="#">
|
||
<div class="card-body">
|
||
<div class="mb-4">
|
||
<img class="avatar" src="@@autopath/assets/svg/brands/snapchat-icon.svg" alt="Logo">
|
||
</div>
|
||
<h3 class="card-title">Snapchat Ads</h3>
|
||
<p class="card-text text-body">Scale profitable snaps and optimize your cost per swipe by using automated rules.</p>
|
||
</div>
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Card Grid -->
|
||
|
||
<!-- Stats -->
|
||
<div class="container content-space-b-2 content-space-b-lg-3">
|
||
<div class="w-lg-75 mx-lg-auto">
|
||
<div class="row">
|
||
<div class="col-sm-4 mb-3 mb-sm-0">
|
||
<div class="text-center">
|
||
<h5 class="h1">2M+</h5>
|
||
<p>Actions automated monthly</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-4 mb-3 mb-sm-0">
|
||
<div class="text-center">
|
||
<h5 class="h1">$55M+</h5>
|
||
<p>Ad budgets managed monthly</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-4">
|
||
<div class="text-center">
|
||
<h5 class="h1">37K+</h5>
|
||
<p>Clients around the world</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
<!-- End Stats -->
|
||
|
||
<!-- Pricing -->
|
||
<div class="bg-light overflow-hidden">
|
||
<div class="container content-space-2 content-space-lg-3">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
||
<span class="text-cap">Pricing</span>
|
||
<h2 class="h1">Pick the best plan based on your ad spend</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="position-relative">
|
||
<div class="row gx-0 align-items-md-center">
|
||
<div class="col-md-6 mb-3 mb-md-0">
|
||
<!-- Card -->
|
||
<div class="card card-lg zi-2" data-aos="fade-up">
|
||
<div class="card-body">
|
||
<form>
|
||
<!-- Radio Button Group -->
|
||
<div class="text-center mb-5">
|
||
<div class="btn-group btn-group-segment btn-group-pills" role="group" aria-label="Pricing radio button group">
|
||
<input type="radio" class="js-switch-text btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked
|
||
data-hs-switch-text-options='{
|
||
"target": [{
|
||
"selector": "#rangeSliderResult",
|
||
"text": 500
|
||
}, {
|
||
"selector": "#rangeSliderSecondaryResult",
|
||
"text": 50000
|
||
}],
|
||
"startUpdateOnChange": true
|
||
}'>
|
||
<label class="js-toggle-switch btn btn-sm" for="btnradio1">
|
||
Monthly
|
||
</label>
|
||
|
||
<input type="radio" class="js-switch-text btn-check" name="btnradio" id="btnradio2" autocomplete="off"
|
||
data-hs-switch-text-options='{
|
||
"target": [{
|
||
"selector": "#rangeSliderResult",
|
||
"text": 475
|
||
}, {
|
||
"selector": "#rangeSliderSecondaryResult",
|
||
"text": 25000
|
||
}],
|
||
"startUpdateOnChange": true
|
||
}'>
|
||
<label class="js-toggle-switch btn btn-sm" for="btnradio2">
|
||
<span class="form-switch-promotion">
|
||
Annually
|
||
|
||
<!-- Form Switch Promotion -->
|
||
<span class="form-switch-promotion-container">
|
||
<span class="form-switch-promotion-body">
|
||
<svg class="form-switch-promotion-arrow" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 99.3 57" width="48">
|
||
<path fill="none" stroke="#bdc5d1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M2,39.5l7.7,14.8c0.4,0.7,1.3,0.9,2,0.4L27.9,42"></path>
|
||
<path fill="none" stroke="#bdc5d1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M11,54.3c0,0,10.3-65.2,86.3-50"></path>
|
||
</svg>
|
||
<span class="form-switch-promotion-text">
|
||
<span class="badge bg-primary rounded-pill ms-1">Save up to 10%</span>
|
||
</span>
|
||
</span>
|
||
</span>
|
||
<!-- End Form Switch Promotion -->
|
||
</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<!-- End Radio Button Group -->
|
||
|
||
<!-- Range Slider -->
|
||
<div class="display-4 text-dark text-center">
|
||
$<span id="rangeSliderResult"></span>/mo
|
||
</div>
|
||
<div class="d-flex justify-content-center mb-5">
|
||
Maximum ad spend:
|
||
<span class="text-primary ms-1">$<span id="rangeSliderSecondaryResult">50000</span>/mo</span>
|
||
</div>
|
||
<!-- End Range Slider -->
|
||
</form>
|
||
|
||
<div class="text-center mb-5">
|
||
<div class="range-slider">
|
||
<div class="js-nouislider"
|
||
data-hs-nouislider-options='{
|
||
"range": {
|
||
"min": 250,
|
||
"max": 720
|
||
},
|
||
"connect": [true, false],
|
||
"start": 500,
|
||
"result_min_target_el": "#rangeSliderResult"
|
||
}'>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-sm-6">
|
||
<!-- List Checked -->
|
||
<ul class="list-checked list-checked-primary mb-0">
|
||
<li class="list-checked-item">All features</li>
|
||
<li class="list-checked-item">Email support</li>
|
||
<li class="list-checked-item">Google ads</li>
|
||
</ul>
|
||
<!-- End List Checked -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6">
|
||
<!-- List Checked -->
|
||
<ul class="list-checked list-checked-primary mb-0">
|
||
<li class="list-checked-item">SSO via Google</li>
|
||
<li class="list-checked-item">API access</li>
|
||
<li class="list-checked-item">Facebook ads</li>
|
||
</ul>
|
||
<!-- End List Checked -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
|
||
<a class="card-footer card-link bg-light text-center" href="#">Start free 14-day trial <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-6">
|
||
<!-- Card -->
|
||
<div class="card card-lg bg-dark text-center ms-md-n2" data-aos="fade-up" data-aos-delay="200">
|
||
<div class="card-body">
|
||
<span class="svg-icon text-white mb-3">
|
||
@@include("@@autopath/assets/vendor/duotone-icons/com/com012.svg")
|
||
</span>
|
||
|
||
<h2 class="card-title text-white">Customized</h2>
|
||
<p class="card-text text-white">Design a custom package for your business.</p>
|
||
<p class="card-text text-white-70">Available for businesses with large payments volume or unique business models.</p>
|
||
</div>
|
||
|
||
<a class="card-footer card-link text-white" href="#">Contact sales <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
|
||
<!-- SVG Shape -->
|
||
<div class="position-absolute bottom-0 start-0 d-none d-lg-block" style="width: 10rem; margin-left: -10rem;">
|
||
<img class="img-fluid" src="@@autopath/assets/svg/illustrations/oc-peeking.svg" alt="SVG">
|
||
</div>
|
||
<!-- End SVG Shape -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Pricing -->
|
||
</main>
|
||
<!-- ========== END MAIN CONTENT ========== -->
|
||
|
||
<!-- ========== FOOTER ========== -->
|
||
@@include("@@autopath/partials/footer/main.html")
|
||
<!-- ========== END FOOTER ========== -->
|
||
|
||
<!-- ========== SECONDARY CONTENTS ========== -->
|
||
<!-- Sign Up -->
|
||
@@include("@@autopath/partials/modal/signup.html")
|
||
|
||
<!-- Go To -->
|
||
@@include("@@autopath/partials/layouts-components/go-to.html")
|
||
<!-- ========== END SECONDARY CONTENTS ========== -->
|
||
|
||
<!-- JS Global Compulsory @@deleteLine:build -->
|
||
<script src="@@autopath/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||
|
||
<!-- JS Implementing Plugins -->
|
||
<!-- bundlejs:vendor [@@autopath] -->
|
||
<script src="@@autopath/assets/vendor/hs-header/dist/hs-header.min.js"></script>
|
||
<script src="@@autopath/assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>
|
||
<script src="@@autopath/assets/vendor/hs-show-animation/dist/hs-show-animation.min.js"></script>
|
||
<script src="@@autopath/assets/vendor/hs-go-to/dist/hs-go-to.min.js"></script>
|
||
<script src="@@autopath/node_modules/aos/dist/aos.js"></script>
|
||
<script src="@@autopath/assets/vendor/hs-switch/dist/hs-switch-text.min.js"></script>
|
||
<script src="@@autopath/node_modules/nouislider/dist/nouislider.min.js"></script>
|
||
|
||
<!-- JS Front -->
|
||
<!-- bundlejs:theme [@@autopath] -->
|
||
<script src="@@autopath/assets/js/hs.core.js"></script>
|
||
<script src="@@autopath/assets/js/hs.bs-dropdown.js"></script>
|
||
<script src="@@autopath/assets/js/hs.bs-validation.js"></script>
|
||
<script src="@@autopath/assets/js/hs.nouislider.js"></script>
|
||
|
||
<!-- JS Plugins Init. -->
|
||
<script>
|
||
(function() {
|
||
// INITIALIZATION OF HEADER
|
||
// =======================================================
|
||
new HSHeader('#header').init()
|
||
|
||
|
||
// INITIALIZATION OF MEGA MENU
|
||
// =======================================================
|
||
new HSMegaMenu('.js-mega-menu', {
|
||
desktop: {
|
||
position: 'left'
|
||
}
|
||
})
|
||
|
||
|
||
// INITIALIZATION OF SHOW ANIMATIONS
|
||
// =======================================================
|
||
new HSShowAnimation('.js-animation-link')
|
||
|
||
|
||
// INITIALIZATION OF BOOTSTRAP VALIDATION
|
||
// =======================================================
|
||
HSBsValidation.init('.js-validate', {
|
||
onSubmit: data => {
|
||
data.event.preventDefault()
|
||
alert('Submited')
|
||
}
|
||
})
|
||
|
||
|
||
// INITIALIZATION OF BOOTSTRAP DROPDOWN
|
||
// =======================================================
|
||
HSBsDropdown.init()
|
||
|
||
|
||
// INITIALIZATION OF GO TO
|
||
// =======================================================
|
||
new HSGoTo('.js-go-to')
|
||
|
||
|
||
// INITIALIZATION OF AOS
|
||
// =======================================================
|
||
AOS.init({
|
||
duration: 650,
|
||
once: true
|
||
});
|
||
|
||
|
||
// INITIALIZATION OF SWITCH TEXT
|
||
// =======================================================
|
||
new HSSwitchText('.js-switch-text', {
|
||
afterChange() {
|
||
document.querySelector('.js-nouislider').noUiSlider.set([this.target[0].text])
|
||
}
|
||
})
|
||
|
||
|
||
// INITIALIZATION OF NOUISLIDER
|
||
// =======================================================
|
||
HSCore.components.HSNoUISlider.init(document.querySelector('.js-nouislider'))
|
||
const slider = HSCore.components.HSNoUISlider.getItem(0)
|
||
|
||
slider.on('change', function (val) {
|
||
const input = document.querySelector('.js-switch-text:checked'),
|
||
defData = JSON.parse(input.getAttribute('data-hs-switch-text-options'))
|
||
|
||
defData.target[0].text = val[0]
|
||
input.setAttribute('data-hs-switch-text-options', JSON.stringify(defData))
|
||
})
|
||
})()
|
||
</script>
|
||
</body>
|
||
</html>
|