467 lines
22 KiB
HTML
467 lines
22 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 Customer Stories - Snippets | Front - Multipurpose Responsive Template</title>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="shortcut icon" href="../favicon.ico">
|
|
|
|
<!-- Font -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
|
|
|
<!-- CSS Implementing Plugins -->
|
|
<link rel="stylesheet" href="../assets/css/vendor.min.css">
|
|
<link rel="stylesheet" href="../assets/vendor/bootstrap-icons/font/bootstrap-icons.css">
|
|
|
|
<!-- CSS Front Template -->
|
|
<link rel="stylesheet" href="../assets/css/theme.min.css?v=1.0">
|
|
<link rel="stylesheet" href="../assets/css/snippets.css">
|
|
</head>
|
|
|
|
<body>
|
|
<!-- ========== HEADER ========== -->
|
|
<header id="header" class="navbar navbar-expand-lg navbar-end navbar-light bg-white">
|
|
<div class="container">
|
|
<nav class="js-mega-menu navbar-nav-wrap">
|
|
<!-- Default Logo -->
|
|
<a class="navbar-brand" href="../index.html" aria-label="Front">
|
|
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
|
</a>
|
|
<!-- End Default Logo -->
|
|
|
|
<!-- Toggler -->
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-default">
|
|
<i class="bi-list"></i>
|
|
</span>
|
|
<span class="navbar-toggler-toggled">
|
|
<i class="bi-x"></i>
|
|
</span>
|
|
</button>
|
|
<!-- End Toggler -->
|
|
|
|
<!-- Collapse -->
|
|
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
|
<ul class="navbar-nav">
|
|
<!-- Landings -->
|
|
<li class="hs-has-mega-menu nav-item">
|
|
<a id="landingsMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle " aria-current="page" href="#" role="button" aria-expanded="false">Landings</a>
|
|
|
|
<!-- Mega Menu -->
|
|
<div class="hs-mega-menu dropdown-menu w-100" aria-labelledby="landingsMegaMenu" style="min-width: 30rem;">
|
|
<div class="row">
|
|
<div class="col-lg-6 d-none d-lg-block">
|
|
<!-- Banner Image -->
|
|
<div class="navbar-dropdown-menu-banner" style="background-image: url(../assets/svg/components/shape-3.svg);">
|
|
<div class="navbar-dropdown-menu-banner-content">
|
|
<div class="mb-4">
|
|
<span class="h2 d-block">Branding Works</span>
|
|
<p>Experience a level of our quality in both design & customization works.</p>
|
|
</div>
|
|
<a class="btn btn-primary btn-transition" href="#">Learn more <i class="bi-chevron-right small"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- End Banner Image -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-6">
|
|
<div class="navbar-dropdown-menu-inner">
|
|
<div class="row">
|
|
<div class="col-sm mb-3 mb-sm-0">
|
|
<span class="dropdown-header">Classic</span>
|
|
<a class="dropdown-item " href="../landing-classic-corporate.html">Corporate</a>
|
|
<a class="dropdown-item " href="../landing-classic-analytics.html">Analytics <span class="badge bg-primary rounded-pill ms-1">Hot</span></a>
|
|
<a class="dropdown-item " href="../landing-classic-studio.html">Studio</a>
|
|
<a class="dropdown-item " href="../landing-classic-marketing.html">Marketing</a>
|
|
<a class="dropdown-item " href="../landing-classic-advertisement.html">Advertisement</a>
|
|
<a class="dropdown-item " href="../landing-classic-consulting.html">Consulting</a>
|
|
<a class="dropdown-item " href="../landing-classic-portfolio.html">Portfolio</a>
|
|
<a class="dropdown-item " href="../landing-classic-software.html">Software</a>
|
|
<a class="dropdown-item " href="../landing-classic-business.html">Business</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm">
|
|
<div class="mb-3">
|
|
<span class="dropdown-header">App</span>
|
|
<a class="dropdown-item " href="../landing-app-ui-kit.html">UI Kit</a>
|
|
<a class="dropdown-item " href="../landing-app-saas.html">SaaS</a>
|
|
<a class="dropdown-item " href="../landing-app-workflow.html">Workflow</a>
|
|
<a class="dropdown-item " href="../landing-app-payment.html">Payment</a>
|
|
<a class="dropdown-item " href="../landing-app-tool.html">Tool</a>
|
|
</div>
|
|
|
|
<span class="dropdown-header">Onepage</span>
|
|
<a class="dropdown-item " href="../landing-onepage-corporate.html">Corporate</a>
|
|
<a class="dropdown-item " href="../landing-onepage-saas.html">SaaS <span class="badge bg-primary rounded-pill ms-1">Hot</span></a>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Mega Menu -->
|
|
</li>
|
|
<!-- End Landings -->
|
|
|
|
<!-- Company -->
|
|
<li class="hs-has-sub-menu nav-item">
|
|
<a id="companyMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle " href="#" role="button" aria-expanded="false">Company</a>
|
|
|
|
<!-- Mega Menu -->
|
|
<div class="hs-sub-menu dropdown-menu" aria-labelledby="companyMegaMenu" style="min-width: 14rem;">
|
|
<a class="dropdown-item " href="../page-about.html">About</a>
|
|
<a class="dropdown-item " href="../page-services.html">Services</a>
|
|
<a class="dropdown-item " href="../page-customer-stories.html">Customer Stories</a>
|
|
<a class="dropdown-item " href="../page-customer-story.html">Customer Story</a>
|
|
<a class="dropdown-item " href="../page-careers.html">Careers</a>
|
|
<a class="dropdown-item " href="../page-careers-overview.html">Careers Overview</a>
|
|
<a class="dropdown-item " href="../page-hire-us.html">Hire Us</a>
|
|
<a class="dropdown-item " href="../page-pricing.html">Pricing</a>
|
|
<a class="dropdown-item " href="../page-contacts-agency.html">Contacts: Agency</a>
|
|
<a class="dropdown-item " href="../page-contacts-startup.html">Contacts: Startup</a>
|
|
</div>
|
|
<!-- End Mega Menu -->
|
|
</li>
|
|
<!-- End Company -->
|
|
|
|
<!-- Account -->
|
|
<li class="hs-has-sub-menu nav-item">
|
|
<a id="accountMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle " href="#" role="button" aria-expanded="false">Account</a>
|
|
|
|
<!-- Mega Menu -->
|
|
<div class="hs-sub-menu dropdown-menu" aria-labelledby="accountMegaMenu" style="min-width: 14rem;">
|
|
<!-- Authentication -->
|
|
<div class="hs-has-sub-menu nav-item">
|
|
<a id="authenticationMegaMenu" class="hs-mega-menu-invoker dropdown-item dropdown-toggle " href="#" role="button" aria-expanded="false">Authentication</a>
|
|
|
|
<div class="hs-sub-menu dropdown-menu" aria-labelledby="authenticationMegaMenu" style="min-width: 14rem;">
|
|
<a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#signupModal">Signup Modal</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item " href="../page-login.html">Login</a>
|
|
<a class="dropdown-item " href="../page-signup.html">Signup</a>
|
|
<a class="dropdown-item " href="../page-reset-password.html">Reset Password</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item " href="../page-login-simple.html">Login Simple</a>
|
|
<a class="dropdown-item " href="../page-signup-simple.html">Signup Simple</a>
|
|
<a class="dropdown-item " href="../page-reset-password-simple.html">Reset Password Simple</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Authentication -->
|
|
|
|
<a class="dropdown-item " href="../account-overview.html">Personal Info</a>
|
|
<a class="dropdown-item " href="../account-security.html">Security</a>
|
|
<a class="dropdown-item " href="../account-notifications.html">Notifications</a>
|
|
<a class="dropdown-item " href="../account-preferences.html">Preferences</a>
|
|
<a class="dropdown-item " href="../account-orders.html">Orders</a>
|
|
<a class="dropdown-item " href="../account-wishlist.html">Wishlist</a>
|
|
<a class="dropdown-item " href="../account-payments.html">Payments</a>
|
|
<a class="dropdown-item " href="../account-address.html">Address</a>
|
|
<a class="dropdown-item " href="../account-teams.html">Teams</a>
|
|
</div>
|
|
<!-- End Mega Menu -->
|
|
</li>
|
|
<!-- End Account -->
|
|
|
|
<!-- Pages -->
|
|
<li class="hs-has-sub-menu nav-item">
|
|
<a id="pagesMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle " href="#" role="button" aria-expanded="false">Pages</a>
|
|
|
|
<!-- Mega Menu -->
|
|
<div class="hs-sub-menu dropdown-menu" aria-labelledby="pagesMegaMenu" style="min-width: 14rem;">
|
|
<a class="dropdown-item " href="../page-faq.html">FAQ</a>
|
|
<a class="dropdown-item " href="../page-terms.html">Terms & Conditions</a>
|
|
<a class="dropdown-item " href="../page-privacy.html">Privacy & Policy</a>
|
|
<a class="dropdown-item " href="../page-coming-soon.html">Coming Soon</a>
|
|
<a class="dropdown-item " href="../page-coming-soon-simple.html">Coming Soon: Simple</a>
|
|
<a class="dropdown-item " href="../page-maintenance-mode.html">Maintenance Mode</a>
|
|
<a class="dropdown-item " href="../page-status.html">Status</a>
|
|
<a class="dropdown-item " href="../page-invoice.html">Invoice</a>
|
|
<a class="dropdown-item " href="../page-error-404.html">Error 404</a>
|
|
</div>
|
|
<!-- End Mega Menu -->
|
|
</li>
|
|
<!-- End Pages -->
|
|
|
|
<!-- Blog -->
|
|
<li class="hs-has-sub-menu nav-item">
|
|
<a id="blogMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle " href="#" role="button" aria-expanded="false">Blog</a>
|
|
|
|
<!-- Mega Menu -->
|
|
<div class="hs-sub-menu dropdown-menu" aria-labelledby="blogMegaMenu" style="min-width: 14rem;">
|
|
<a class="dropdown-item " href="../blog-journal.html">Journal</a>
|
|
<a class="dropdown-item " href="../blog-metro.html">Metro</a>
|
|
<a class="dropdown-item " href="../blog-newsroom.html">Newsroom</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item " href="../blog-article.html">Article</a>
|
|
<a class="dropdown-item " href="../blog-author-profile.html">Author Profile</a>
|
|
</div>
|
|
<!-- End Mega Menu -->
|
|
</li>
|
|
<!-- End Blog -->
|
|
|
|
<!-- Portfolio -->
|
|
<li class="hs-has-sub-menu nav-item">
|
|
<a id="portfolioMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle " href="#" role="button" aria-expanded="false">Portfolio</a>
|
|
|
|
<!-- Mega Menu -->
|
|
<div class="hs-sub-menu dropdown-menu" aria-labelledby="portfolioMegaMenu" style="min-width: 14rem;">
|
|
<a class="dropdown-item " href="../portfolio-grid.html">Grid</a>
|
|
<a class="dropdown-item " href="../portfolio-product-article.html">Product Article</a>
|
|
<a class="dropdown-item " href="../portfolio-case-studies-branding.html">Case Studies: Branding</a>
|
|
<a class="dropdown-item " href="../portfolio-case-studies-product.html">Case Studies: Product</a>
|
|
</div>
|
|
<!-- End Mega Menu -->
|
|
</li>
|
|
<!-- End Portfolio -->
|
|
|
|
<!-- Button -->
|
|
<li class="nav-item">
|
|
<a class="btn btn-primary btn-transition" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/" target="_blank">Buy now</a>
|
|
</li>
|
|
<!-- End Button -->
|
|
</ul>
|
|
</div>
|
|
<!-- End Collapse -->
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ========== END HEADER ========== -->
|
|
|
|
<!-- ========== MAIN CONTENT ========== -->
|
|
<main id="content" role="main">
|
|
<!-- Hero -->
|
|
<div class="position-relative bg-img-start" style="background-image: url(../assets/img/1920x1080/img6.jpg);">
|
|
<div class="container content-space-t-2 content-space-t-md-3 content-space-3 content-space-b-lg-5">
|
|
<div class="w-lg-50">
|
|
<h1>You're in good company.</h1>
|
|
<h2 class="h1 text-primary">Join millions of businesses on Front.</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Shape -->
|
|
<div class="shape shape-bottom zi-1" style="margin-bottom: -.125rem">
|
|
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1920 100.1">
|
|
<path fill="#fff" d="M0,0c0,0,934.4,93.4,1920,0v100.1H0L0,0z"></path>
|
|
</svg>
|
|
</div>
|
|
<!-- End Shape -->
|
|
</div>
|
|
<!-- End Hero -->
|
|
|
|
<!-- Clients -->
|
|
<div class="container position-relative zi-2">
|
|
<div class="row justify-content-center mt-n5">
|
|
<div class="col-3 col-lg-2 d-none d-sm-inline-block mt-n10">
|
|
<!-- Logo -->
|
|
<div class="avatar avatar-xl avatar-circle shadow-sm p-4 mx-auto">
|
|
<img class="avatar-img" src="../assets/svg/brands/behance-icon.svg" alt="Image Description">
|
|
</div>
|
|
<!-- End Logo -->
|
|
</div>
|
|
|
|
<div class="col-lg-2 d-none d-lg-inline-block mt-lg-n8">
|
|
<!-- Logo -->
|
|
<div class="avatar avatar-xxl avatar-circle shadow-sm p-4 mx-auto">
|
|
<img class="avatar-img" src="../assets/svg/brands/google-icon.svg" alt="Image Description">
|
|
</div>
|
|
<!-- End Logo -->
|
|
</div>
|
|
|
|
<div class="col-3 col-lg-2 d-none d-sm-inline-block mt-n4">
|
|
<!-- Logo -->
|
|
<div class="avatar avatar-xl avatar-circle shadow-sm p-4 mx-auto">
|
|
<img class="avatar-img" src="../assets/svg/brands/asana-icon.svg" alt="Image Description">
|
|
</div>
|
|
<!-- End Logo -->
|
|
</div>
|
|
|
|
<div class="col-3 col-lg-2 d-none d-sm-inline-block mt-n7">
|
|
<!-- Logo -->
|
|
<div class="avatar avatar-xl avatar-circle shadow-sm p-4 mx-auto">
|
|
<img class="avatar-img" src="../assets/svg/brands/slack-icon.svg" alt="Image Description">
|
|
</div>
|
|
<!-- End Logo -->
|
|
</div>
|
|
|
|
<div class="col-lg-2 d-none d-lg-inline-block mt-lg-n10">
|
|
<!-- Logo -->
|
|
<div class="avatar avatar-xxl avatar-circle shadow-sm p-4 mx-auto">
|
|
<img class="avatar-img" src="../assets/svg/brands/dropbox-icon.svg" alt="Image Description">
|
|
</div>
|
|
<!-- End Logo -->
|
|
</div>
|
|
|
|
<div class="col-3 col-lg-2 d-none d-sm-inline-block">
|
|
<!-- Logo -->
|
|
<div class="avatar avatar-xl avatar-circle shadow-sm p-4 mx-auto">
|
|
<img class="avatar-img" src="../assets/svg/brands/spotify-icon.svg" alt="Image Description">
|
|
</div>
|
|
<!-- End Logo -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Clients -->
|
|
|
|
<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>
|
|
</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(../assets/img/1920x1080/img6.jpg);">
|
|
<div class="container content-space-t-2 content-space-t-md-3 content-space-3 content-space-b-lg-5">
|
|
<div class="w-lg-50">
|
|
<h1>You're in good company.</h1>
|
|
<h2 class="h1 text-primary">Join millions of businesses on Front.</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Shape -->
|
|
<div class="shape shape-bottom zi-1" style="margin-bottom: -.125rem">
|
|
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1920 100.1">
|
|
<path fill="#fff" d="M0,0c0,0,934.4,93.4,1920,0v100.1H0L0,0z"></path>
|
|
</svg>
|
|
</div>
|
|
<!-- End Shape -->
|
|
</div>
|
|
<!-- End Hero -->
|
|
|
|
<!-- Clients -->
|
|
<div class="container position-relative zi-2">
|
|
<div class="row justify-content-center mt-n5">
|
|
<div class="col-3 col-lg-2 d-none d-sm-inline-block mt-n10">
|
|
<!-- Logo -->
|
|
<div class="avatar avatar-xl avatar-circle shadow-sm p-4 mx-auto">
|
|
<img class="avatar-img" src="../assets/svg/brands/behance-icon.svg" alt="Image Description">
|
|
</div>
|
|
<!-- End Logo -->
|
|
</div>
|
|
|
|
<div class="col-lg-2 d-none d-lg-inline-block mt-lg-n8">
|
|
<!-- Logo -->
|
|
<div class="avatar avatar-xxl avatar-circle shadow-sm p-4 mx-auto">
|
|
<img class="avatar-img" src="../assets/svg/brands/google-icon.svg" alt="Image Description">
|
|
</div>
|
|
<!-- End Logo -->
|
|
</div>
|
|
|
|
<div class="col-3 col-lg-2 d-none d-sm-inline-block mt-n4">
|
|
<!-- Logo -->
|
|
<div class="avatar avatar-xl avatar-circle shadow-sm p-4 mx-auto">
|
|
<img class="avatar-img" src="../assets/svg/brands/asana-icon.svg" alt="Image Description">
|
|
</div>
|
|
<!-- End Logo -->
|
|
</div>
|
|
|
|
<div class="col-3 col-lg-2 d-none d-sm-inline-block mt-n7">
|
|
<!-- Logo -->
|
|
<div class="avatar avatar-xl avatar-circle shadow-sm p-4 mx-auto">
|
|
<img class="avatar-img" src="../assets/svg/brands/slack-icon.svg" alt="Image Description">
|
|
</div>
|
|
<!-- End Logo -->
|
|
</div>
|
|
|
|
<div class="col-lg-2 d-none d-lg-inline-block mt-lg-n10">
|
|
<!-- Logo -->
|
|
<div class="avatar avatar-xxl avatar-circle shadow-sm p-4 mx-auto">
|
|
<img class="avatar-img" src="../assets/svg/brands/dropbox-icon.svg" alt="Image Description">
|
|
</div>
|
|
<!-- End Logo -->
|
|
</div>
|
|
|
|
<div class="col-3 col-lg-2 d-none d-sm-inline-block">
|
|
<!-- Logo -->
|
|
<div class="avatar avatar-xl avatar-circle shadow-sm p-4 mx-auto">
|
|
<img class="avatar-img" src="../assets/svg/brands/spotify-icon.svg" alt="Image Description">
|
|
</div>
|
|
<!-- End Logo -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Clients -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
</main>
|
|
<!-- ========== END MAIN CONTENT ========== -->
|
|
|
|
<!-- ========== SECONDARY CONTENTS ========== -->
|
|
<!-- Go To -->
|
|
<a class="js-go-to go-to position-fixed" href="javascript:;" style="visibility: hidden;"
|
|
data-hs-go-to-options='{
|
|
"offsetTop": 700,
|
|
"position": {
|
|
"init": {
|
|
"right": "2rem"
|
|
},
|
|
"show": {
|
|
"bottom": "2rem"
|
|
},
|
|
"hide": {
|
|
"bottom": "-2rem"
|
|
}
|
|
}
|
|
}'>
|
|
<i class="bi-chevron-up"></i>
|
|
</a>
|
|
<!-- ========== END SECONDARY CONTENTS ========== -->
|
|
|
|
|
|
<!-- JS Implementing Plugins -->
|
|
<script src="../assets/js/vendor.min.js"></script>
|
|
|
|
<!-- JS Front -->
|
|
<script src="../assets/js/theme.min.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>
|