314 lines
15 KiB
HTML
314 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<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>Hero: Landing Onepage SaaS - Snippets | 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">
|
|
|
|
<!-- CSS Front Template -->
|
|
<!-- bundlecss:theme [@@autopath] @@vars.version -->
|
|
<link rel="stylesheet" href="@@autopath/assets/css/theme.css">
|
|
<link rel="stylesheet" href="@@autopath/assets/css/snippets.css">
|
|
</head>
|
|
|
|
<body>
|
|
<!-- ========== HEADER ========== -->
|
|
@@include("@@autopath/partials/navbar/main-with-topbar-absolute-top.html", {
|
|
"category": "",
|
|
"link": ""
|
|
})
|
|
<!-- ========== END HEADER ========== -->
|
|
|
|
<!-- ========== MAIN CONTENT ========== -->
|
|
<main id="content" role="main">
|
|
<!-- 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-3 content-space-t-lg-5 content-space-b-2 content-space-b-lg-3 position-relative zi-2">
|
|
<div class="row justify-content-lg-between align-items-md-center">
|
|
<div class="col-md-6 col-lg-5 mb-10 mb-md-0">
|
|
<div class="mb-5">
|
|
<h1 class="display-4">Empowering teams with the freedom</h1>
|
|
<p class="lead">Own the unlimited power of the web development.</p>
|
|
</div>
|
|
|
|
<div class="d-flex align-items-center gap-2 mb-8">
|
|
<a class="btn btn-primary btn-transition me-2" href="@@autopath/page-login-simple.html">
|
|
Get Started <i class="bi-chevron-right small ms-1"></i>
|
|
</a>
|
|
|
|
<!-- Fancybox -->
|
|
<a class="video-player btn btn-outline-primary btn-transition" href="https://www.youtube.com/watch?v=d4eDWc8g0e0" role="button" data-fslightbox="youtube-video">
|
|
<i class="bi-play-circle-fill me-1"></i> Play video
|
|
</a>
|
|
<!-- End Fancybox -->
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-6">
|
|
<div class="row justify-content-end">
|
|
<div class="col-3 mb-4">
|
|
<!-- Logo -->
|
|
<div class="d-block avatar avatar-lg rounded-circle shadow-sm p-3 mt-n3 ms-5" data-aos="fade-up">
|
|
<img class="avatar-img" src="@@autopath/assets/svg/brands/google-icon.svg" alt="Image Description">
|
|
</div>
|
|
<!-- End Logo -->
|
|
</div>
|
|
<div class="col-4 mb-4">
|
|
<!-- Logo -->
|
|
<div class="d-block avatar avatar-xl rounded-circle shadow-sm p-4 mx-auto mt-5" data-aos="fade-up" data-aos-delay="50">
|
|
<img class="avatar-img" src="@@autopath/assets/svg/brands/atlassian-icon.svg" alt="Image Description">
|
|
</div>
|
|
<!-- End Logo -->
|
|
</div>
|
|
<div class="col-4 mb-4">
|
|
<!-- Logo -->
|
|
<div class="d-block avatar avatar-xl rounded-circle shadow-sm p-4 ms-auto" data-aos="fade-up" data-aos-delay="150">
|
|
<img class="avatar-img" src="@@autopath/assets/svg/brands/asana-icon.svg" alt="Image Description">
|
|
</div>
|
|
<!-- End Logo -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-3 offset-1 my-4">
|
|
<!-- Logo -->
|
|
<div class="d-block avatar avatar-xl rounded-circle shadow-sm p-4 ms-auto" data-aos="fade-up" data-aos-delay="200">
|
|
<img class="avatar-img" src="@@autopath/assets/svg/brands/paypal-icon.svg" alt="Image Description">
|
|
</div>
|
|
<!-- End Logo -->
|
|
</div>
|
|
<div class="col-3 offset-2 my-4">
|
|
<!-- Logo -->
|
|
<div class="d-block avatar avatar-xl rounded-circle shadow-sm p-4 ms-auto" data-aos="fade-up" data-aos-delay="250">
|
|
<img class="avatar-img" src="@@autopath/assets/svg/brands/dribbble-icon.svg" alt="Image Description">
|
|
</div>
|
|
<!-- End Logo -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row d-none d-md-flex">
|
|
<div class="col-6">
|
|
<!-- Logo -->
|
|
<div class="d-block avatar avatar-lg rounded-circle shadow-sm p-3 ms-auto" data-aos="fade-up" data-aos-delay="300">
|
|
<img class="avatar-img" src="@@autopath/assets/svg/brands/google-adz-icon.svg" alt="Image Description">
|
|
</div>
|
|
<!-- End Logo -->
|
|
</div>
|
|
<div class="col-6 mt-6">
|
|
<!-- Logo -->
|
|
<div class="d-block avatar avatar-xl rounded-circle shadow-sm p-4 ms-auto" data-aos="fade-up" data-aos-delay="350">
|
|
<img class="avatar-img" src="@@autopath/assets/svg/brands/behance-icon.svg" alt="Image Description">
|
|
</div>
|
|
<!-- End Logo -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
|
|
<!-- Shape -->
|
|
<div class="shape shape-bottom zi-1">
|
|
<svg width="3000" height="500" viewBox="0 0 3000 500" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M0 500H3000V0L0 500Z" fill="#fff"/>
|
|
</svg>
|
|
</div>
|
|
<!-- End Shape -->
|
|
</div>
|
|
<!-- End Hero -->
|
|
|
|
<div class="container content-space-2">
|
|
<!-- Card -->
|
|
<div class="card card-nav-tab-content-height">
|
|
<!-- Header -->
|
|
<div class="card-header">
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment" id="navTab1" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="nav-htmlTab1" href="#nav-html1" data-bs-toggle="pill" data-bs-target="#nav-html1" role="tab" aria-controls="nav-html1" aria-selected="false">HTML</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-jsTab1" href="#nav-js1" data-bs-toggle="pill" data-bs-target="#nav-js1" role="tab" aria-controls="nav-js1" aria-selected="false">JS</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="navTabContent1">
|
|
<div class="tab-pane fade show active" id="nav-html1" role="tabpanel" aria-labelledby="nav-htmlTab1">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- 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-3 content-space-t-lg-5 content-space-b-2 content-space-b-lg-3 position-relative zi-2">
|
|
<div class="row justify-content-lg-between align-items-md-center">
|
|
<div class="col-md-6 col-lg-5 mb-10 mb-md-0">
|
|
<div class="mb-5">
|
|
<h1 class="display-4">Empowering teams with the freedom</h1>
|
|
<p class="lead">Own the unlimited power of the web development.</p>
|
|
</div>
|
|
|
|
<div class="d-flex align-items-center gap-2 mb-8">
|
|
<a class="btn btn-primary btn-transition me-2" href="@@autopath/page-login-simple.html">
|
|
Get Started <i class="bi-chevron-right small ms-1"></i>
|
|
</a>
|
|
|
|
<!-- Fancybox -->
|
|
<a class="video-player btn btn-outline-primary btn-transition" href="https://www.youtube.com/watch?v=d4eDWc8g0e0" role="button" data-fslightbox="youtube-video">
|
|
<i class="bi-play-circle-fill me-1"></i> Play video
|
|
</a>
|
|
<!-- End Fancybox -->
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-6">
|
|
<div class="row justify-content-end">
|
|
<div class="col-3 mb-4">
|
|
<!-- Logo -->
|
|
<div class="d-block avatar avatar-lg rounded-circle shadow-sm p-3 mt-n3 ms-5" data-aos="fade-up">
|
|
<img class="avatar-img" src="@@autopath/assets/svg/brands/google-icon.svg" alt="Image Description">
|
|
</div>
|
|
<!-- End Logo -->
|
|
</div>
|
|
<div class="col-4 mb-4">
|
|
<!-- Logo -->
|
|
<div class="d-block avatar avatar-xl rounded-circle shadow-sm p-4 mx-auto mt-5" data-aos="fade-up" data-aos-delay="50">
|
|
<img class="avatar-img" src="@@autopath/assets/svg/brands/atlassian-icon.svg" alt="Image Description">
|
|
</div>
|
|
<!-- End Logo -->
|
|
</div>
|
|
<div class="col-4 mb-4">
|
|
<!-- Logo -->
|
|
<div class="d-block avatar avatar-xl rounded-circle shadow-sm p-4 ms-auto" data-aos="fade-up" data-aos-delay="150">
|
|
<img class="avatar-img" src="@@autopath/assets/svg/brands/asana-icon.svg" alt="Image Description">
|
|
</div>
|
|
<!-- End Logo -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-3 offset-1 my-4">
|
|
<!-- Logo -->
|
|
<div class="d-block avatar avatar-xl rounded-circle shadow-sm p-4 ms-auto" data-aos="fade-up" data-aos-delay="200">
|
|
<img class="avatar-img" src="@@autopath/assets/svg/brands/paypal-icon.svg" alt="Image Description">
|
|
</div>
|
|
<!-- End Logo -->
|
|
</div>
|
|
<div class="col-3 offset-2 my-4">
|
|
<!-- Logo -->
|
|
<div class="d-block avatar avatar-xl rounded-circle shadow-sm p-4 ms-auto" data-aos="fade-up" data-aos-delay="250">
|
|
<img class="avatar-img" src="@@autopath/assets/svg/brands/dribbble-icon.svg" alt="Image Description">
|
|
</div>
|
|
<!-- End Logo -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row d-none d-md-flex">
|
|
<div class="col-6">
|
|
<!-- Logo -->
|
|
<div class="d-block avatar avatar-lg rounded-circle shadow-sm p-3 ms-auto" data-aos="fade-up" data-aos-delay="300">
|
|
<img class="avatar-img" src="@@autopath/assets/svg/brands/google-adz-icon.svg" alt="Image Description">
|
|
</div>
|
|
<!-- End Logo -->
|
|
</div>
|
|
<div class="col-6 mt-6">
|
|
<!-- Logo -->
|
|
<div class="d-block avatar avatar-xl rounded-circle shadow-sm p-4 ms-auto" data-aos="fade-up" data-aos-delay="350">
|
|
<img class="avatar-img" src="@@autopath/assets/svg/brands/behance-icon.svg" alt="Image Description">
|
|
</div>
|
|
<!-- End Logo -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
|
|
<!-- Shape -->
|
|
<div class="shape shape-bottom zi-1">
|
|
<svg width="3000" height="500" viewBox="0 0 3000 500" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M0 500H3000V0L0 500Z" fill="#fff"/>
|
|
</svg>
|
|
</div>
|
|
<!-- End Shape -->
|
|
</div>
|
|
<!-- End Hero -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-js1" role="tabpanel" aria-labelledby="nav-jsTab1">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- JS Implementing Plugins -->
|
|
<script src="@@autopath/node_modules/fslightbox/index.js"></script>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
</main>
|
|
<!-- ========== END MAIN CONTENT ========== -->
|
|
|
|
<!-- ========== SECONDARY CONTENTS ========== -->
|
|
<!-- 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-go-to/dist/hs-go-to.min.js"></script>
|
|
<script src="@@autopath/assets/vendor/prism/prism.js"></script>
|
|
<script src="@@autopath/assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>
|
|
<script src="@@autopath/node_modules/fslightbox/index.js"></script>
|
|
|
|
<!-- JS Front -->
|
|
<!-- bundlejs:theme [@@autopath] -->
|
|
<script src="@@autopath/assets/js/hs.core.js"></script>
|
|
|
|
<!-- JS Plugins Init. -->
|
|
<script>
|
|
(function() {
|
|
// INITIALIZATION OF GO TO
|
|
// =======================================================
|
|
new HSGoTo('.js-go-to')
|
|
|
|
|
|
// INITIALIZATION OF MEGA MENU
|
|
// =======================================================
|
|
new HSMegaMenu('.js-mega-menu', {
|
|
desktop: {
|
|
position: 'left'
|
|
}
|
|
})
|
|
})()
|
|
</script>
|
|
</body>
|
|
</html>
|