2581 lines
129 KiB
HTML
2581 lines
129 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>Testimonials - 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/vendor/bootstrap-icons/font/bootstrap-icons.css">
|
||
<link rel="stylesheet" href="../assets/vendor/swiper/swiper-bundle.min.css">
|
||
|
||
<!-- CSS Front Template -->
|
||
<link rel="stylesheet" href="../assets/css/theme.min.css">
|
||
<link rel="stylesheet" href="../assets/css/snippets.min.css">
|
||
</head>
|
||
|
||
<body class="navbar-sidebar-aside-lg">
|
||
<!-- ========== HEADER ========== -->
|
||
<header id="header" class="navbar navbar-expand navbar-fixed navbar-end navbar-light navbar-sticky-lg-top bg-white">
|
||
<div class="container-fluid">
|
||
<nav class="navbar-nav-wrap">
|
||
<div class="row flex-grow-1">
|
||
<!-- Default Logo -->
|
||
<div class="docs-navbar-sidebar-container d-flex align-items-center mb-2 mb-lg-0">
|
||
<a class="navbar-brand" href="../snippets/index.html" aria-label="Space">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
||
</a>
|
||
<a href="../documentation/changelog.html">
|
||
<span class="badge bg-soft-primary text-primary">v4.1</span>
|
||
</a>
|
||
</div>
|
||
<!-- End Default Logo -->
|
||
|
||
<div class="col-md px-lg-0">
|
||
<div class="d-flex justify-content-between align-items-center px-lg-5 px-xl-10">
|
||
<div class="d-none d-md-block">
|
||
<!-- Search Form -->
|
||
<form id="snippetsSearch" class="position-relative"
|
||
data-hs-list-options='{
|
||
"searchMenu": true,
|
||
"keyboard": true,
|
||
"item": "searchTemplate",
|
||
"valueNames": ["component", "category", {"name": "link", "attr": "href"}],
|
||
"empty": "#searchNoResults"
|
||
}'>
|
||
<!-- Input Group -->
|
||
<div class="input-group input-group-merge navbar-input-group">
|
||
<div class="input-group-prepend input-group-text">
|
||
<i class="bi-search"></i>
|
||
</div>
|
||
|
||
<input type="search" class="search form-control form-control-sm" placeholder="Search in snippets" aria-label="Search in snippets">
|
||
|
||
<a class="input-group-append input-group-text" href="javascript:;">
|
||
<i id="clearSearchResultsIcon" class="bi-x" style="display: none;"></i>
|
||
</a>
|
||
</div>
|
||
<!-- End Input Group -->
|
||
|
||
<!-- List -->
|
||
<div class="list dropdown-menu w-100 overflow-auto" style="max-height: 16rem;"></div>
|
||
<!-- End List -->
|
||
|
||
<!-- Empty -->
|
||
<div id="searchNoResults" style="display: none;">
|
||
<div class="text-center p-4">
|
||
<img class="mb-3" src="../assets/svg/illustrations/oc-error.svg" alt="Image Description" style="width: 10rem;">
|
||
<p class="mb-0">No Results</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Empty -->
|
||
</form>
|
||
<!-- End Search Form -->
|
||
|
||
<!-- List Item Template -->
|
||
<div class="d-none">
|
||
<div id="searchTemplate" class="dropdown-item">
|
||
<a class="d-block link" href="#">
|
||
<span class="category d-block fw-normal text-muted mb-1"></span>
|
||
<span class="component text-dark"></span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<!-- End List Item Template -->
|
||
</div>
|
||
|
||
<!-- Navbar -->
|
||
<ul class="navbar-nav p-0">
|
||
<li class="nav-item">
|
||
<a class="btn btn-ghost-secondary btn-sm" href="https://htmlstream.com/contact-us" target="_blank">
|
||
Get Support <i class="bi-box-arrow-up-right ms-1"></i>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="btn btn-primary btn-sm" href="../index.html">
|
||
<i class="bi-eye me-1"></i> Preview Demo
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Navbar -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
<!-- ========== END HEADER ========== -->
|
||
|
||
<!-- ========== MAIN CONTENT ========== -->
|
||
<main id="content" role="main">
|
||
<!-- Navbar -->
|
||
<nav class="js-nav-scroller navbar navbar-expand-lg navbar-sidebar navbar-vertical navbar-light bg-white border-end"
|
||
data-hs-nav-scroller-options='{
|
||
"type": "vertical",
|
||
"target": ".navbar-nav .active",
|
||
"offset": 80
|
||
}'>
|
||
<!-- Navbar Toggle -->
|
||
<button type="button" class="navbar-toggler btn btn-white d-grid w-100" data-bs-toggle="collapse" data-bs-target="#navbarVerticalNavMenu" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarVerticalNavMenu">
|
||
<span class="d-flex justify-content-between align-items-center">
|
||
<span class="h6 mb-0">Nav menu</span>
|
||
|
||
<span class="navbar-toggler-default">
|
||
<i class="bi-list"></i>
|
||
</span>
|
||
|
||
<span class="navbar-toggler-toggled">
|
||
<i class="bi-x"></i>
|
||
</span>
|
||
</span>
|
||
</button>
|
||
<!-- End Navbar Toggle -->
|
||
|
||
<!-- Navbar Collapse -->
|
||
<div id="navbarVerticalNavMenu" class="collapse navbar-collapse">
|
||
<div class="navbar-brand-wrapper border-end" style="height: auto;">
|
||
<!-- Default Logo -->
|
||
<div class="d-flex align-items-center mb-3">
|
||
<a class="navbar-brand" href="../snippets/index.html" aria-label="Space">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
||
</a>
|
||
<a class="navbar-brand-badge" href="../documentation/changelog.html">
|
||
<span class="badge bg-soft-primary text-primary ms-2">v4.1</span>
|
||
</a>
|
||
</div>
|
||
<!-- End Default Logo -->
|
||
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment nav-fill nav-justified">
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="../documentation/index.html">Docs</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="../snippets/index.html">Snippets</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
|
||
<div class="docs-navbar-sidebar-aside-body navbar-sidebar-aside-body">
|
||
<ul id="navbarSettings" class="navbar-nav nav nav-vertical nav-tabs nav-tabs-borderless nav-sm">
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Snippets</span>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/index.html">Introduction</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Navbar / Heroes</span>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/navbar.html">Headers (Navbar)</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/hero-sections.html">Hero Sections</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Content</span>
|
||
</li>
|
||
|
||
<li class="nav-item ">
|
||
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavFeaturesCollapse" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="snippetsSidebarNavFeaturesCollapse">Features</a>
|
||
|
||
<div id="snippetsSidebarNavFeaturesCollapse" class="nav-collapse collapse ">
|
||
<a class="nav-link " href="features-general.html">General</a>
|
||
<a class="nav-link " href="features-stats.html">Stats</a>
|
||
<a class="nav-link " href="features-step.html">Step</a>
|
||
<a class="nav-link " href="features-navs.html">Navs (Tabs)</a>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/icon-blocks.html">Icon Blocks</a>
|
||
</li>
|
||
|
||
<li class="nav-item ">
|
||
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavCardsCollapse" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="snippetsSidebarNavCardsCollapse">Cards</a>
|
||
|
||
<div id="snippetsSidebarNavCardsCollapse" class="nav-collapse collapse ">
|
||
<a class="nav-link " href="cards-grid.html">Grid</a>
|
||
<a class="nav-link " href="cards-list.html">List</a>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="nav-item ">
|
||
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavDirectoryCollapse" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="snippetsSidebarNavDirectoryCollapse">Directory</a>
|
||
|
||
<div id="snippetsSidebarNavDirectoryCollapse" class="nav-collapse collapse ">
|
||
<a class="nav-link " href="directory-grid.html">Grid</a>
|
||
<a class="nav-link " href="directory-list.html">List</a>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="../snippets/testimonials.html">Testimonials</a>
|
||
</li>
|
||
|
||
<li class="nav-item ">
|
||
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavBlogsCollapse" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="snippetsSidebarNavBlogsCollapse">Blogs</a>
|
||
|
||
<div id="snippetsSidebarNavBlogsCollapse" class="nav-collapse collapse ">
|
||
<a class="nav-link " href="blogs-grid.html">Grid</a>
|
||
<a class="nav-link " href="blogs-list.html">List</a>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/tables.html">Tables</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/ecommerce.html">E-commerce</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/pricing.html">Pricing</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/team-sections.html">Team Sections</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/breadcrumb.html">Breadcrumb</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/cta.html">Call-to-Action (CTA)</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/modals.html">Modals</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/portfolio.html">Portfolio</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/gallery.html">Gallery</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/clients.html">Clients</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/countdown.html">Countdown</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/faq.html">FAQ</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/lists.html">Lists</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/collapse-accordion.html">Collapse/Accordion</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/comments.html">Comments</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/feedback-and-reviews.html">Feedback & Reviews</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/user-profile.html">User Profile</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="sidebar-examples.html">Sidebar Examples</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="calendar-view.html">Calendar View</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="notification.html">Notification</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="content-sections.html">Content Sections</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle">Forms</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="forms-authentication.html">Authentication</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="forms-feedback.html">Feedback</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="forms-filters.html">Filters</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="forms-search.html">Search</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="forms-directory.html">Directory</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="forms-subscribe.html">Subscribe</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="forms-account.html">Account</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="forms-wizard-and-steps.html">Wizard & Steps</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle">Contact / Footer</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/contact-sections.html">Contact Sections</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/footer.html">Footer</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- End Navbar Collapse -->
|
||
</nav>
|
||
<!-- End Navbar -->
|
||
|
||
<!-- Content -->
|
||
<div class="navbar-sidebar-aside-content content-space-1 content-space-md-2 px-lg-5 px-xl-10">
|
||
<!-- Page Header -->
|
||
<div class="docs-page-header">
|
||
<div class="row align-items-center">
|
||
<div class="col-sm">
|
||
<h1 class="docs-page-header-title">Testimonials</h1>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Page Header -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-1" class="hs-docs-heading">
|
||
Component #1 <a class="anchorjs-link" href="#component-1" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- 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-resultTab1" href="#nav-result1" data-bs-toggle="pill" data-bs-target="#nav-result1" role="tab" aria-controls="nav-result1" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" 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 p-4 show active" id="nav-result1" role="tabpanel" aria-labelledby="nav-resultTab1">
|
||
<!-- Testimonials -->
|
||
<div class="container">
|
||
<div class="row align-items-md-center">
|
||
<div class="col-md-5 d-none d-md-block">
|
||
<img class="img-fluid rounded-2" src="../assets/img/400x500/img31.jpg" alt="Image Description">
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-7">
|
||
<!-- Blockquote -->
|
||
<figure class="pe-md-7">
|
||
<div class="mb-4">
|
||
<img class="avatar avatar-xl avatar-4x3" src="../assets/svg/brands/mailchimp-primary.svg" alt="Image Description">
|
||
</div>
|
||
|
||
<blockquote class="blockquote blockquote-lg">" I'm 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. "</blockquote>
|
||
|
||
<figcaption class="blockquote-footer">
|
||
<div class="d-flex align-items-center">
|
||
<div class="flex-shrink-0 d-md-none">
|
||
<img class="avatar avatar-circle" src="../assets/img/160x160/img4.jpg" alt="Image Description">
|
||
</div>
|
||
<div class="flex-grow-1 ms-3 ms-md-0">
|
||
Lewis
|
||
<span class="blockquote-footer-source">Senior Director of Operations at Mailchimp</span>
|
||
</div>
|
||
</div>
|
||
</figcaption>
|
||
</figure>
|
||
<!-- End Blockquote -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Testimonials -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html1" role="tabpanel" aria-labelledby="nav-htmlTab1">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Testimonials -->
|
||
<div class="container content-space-2 content-space-lg-3">
|
||
<div class="row align-items-md-center">
|
||
<div class="col-md-5 d-none d-md-block">
|
||
<img class="img-fluid rounded-2" src="../assets/img/400x500/img31.jpg" alt="Image Description">
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-7">
|
||
<!-- Blockquote -->
|
||
<figure class="pe-md-7">
|
||
<div class="mb-4">
|
||
<img class="avatar avatar-xl avatar-4x3" src="../assets/svg/brands/mailchimp-primary.svg" alt="Image Description">
|
||
</div>
|
||
|
||
<blockquote class="blockquote blockquote-lg">" I'm 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. "</blockquote>
|
||
|
||
<figcaption class="blockquote-footer">
|
||
<div class="d-flex align-items-center">
|
||
<div class="flex-shrink-0 d-md-none">
|
||
<img class="avatar avatar-circle" src="../assets/img/160x160/img4.jpg" alt="Image Description">
|
||
</div>
|
||
<div class="flex-grow-1 ms-3 ms-md-0">
|
||
Lewis
|
||
<span class="blockquote-footer-source">Senior Director of Operations at Mailchimp</span>
|
||
</div>
|
||
</div>
|
||
</figcaption>
|
||
</figure>
|
||
<!-- End Blockquote -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Testimonials -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-2" class="hs-docs-heading">
|
||
Component #2 <a class="anchorjs-link" href="#component-2" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab2" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab2" href="#nav-result2" data-bs-toggle="pill" data-bs-target="#nav-result2" role="tab" aria-controls="nav-result2" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab2" href="#nav-html2" data-bs-toggle="pill" data-bs-target="#nav-html2" role="tab" aria-controls="nav-html2" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent2">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result2" role="tabpanel" aria-labelledby="nav-resultTab2">
|
||
<!-- Testimonials -->
|
||
<div class="overflow-hidden">
|
||
<div class="container content-space-b-2">
|
||
<div class="position-relative">
|
||
<div class="bg-light text-center rounded-2 p-4 p-md-7">
|
||
<img class="avatar avatar-lg avatar-4x3 mx-auto mb-4" src="../assets/svg/brands/amazon-primary.svg" alt="SVG Logo">
|
||
|
||
<!-- Blockquote -->
|
||
<figure class="w-md-80 w-lg-50 mx-md-auto">
|
||
<blockquote class="blockquote">With Front, we're able to easily track our performance in full detail. It's become an essential tool for us to grow and engage with our audience.</blockquote>
|
||
|
||
<figcaption class="blockquote-footer">
|
||
Christina Kray
|
||
<span class="blockquote-footer-source">Social Media Executive, Mailchimp</span>
|
||
</figcaption>
|
||
</figure>
|
||
<!-- End Blockquote -->
|
||
</div>
|
||
|
||
<!-- SVG Shape -->
|
||
<div class="position-absolute bottom-0 start-0 w-100" style="max-width: 7rem;">
|
||
<div class="mb-n7 ms-n7">
|
||
<img class="img-fluid" src="../assets/svg/components/dots.svg" alt="Image Description">
|
||
</div>
|
||
</div>
|
||
<!-- End SVG Shape -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Testimonials -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html2" role="tabpanel" aria-labelledby="nav-htmlTab2">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Testimonials -->
|
||
<div class="overflow-hidden">
|
||
<div class="container content-space-b-2">
|
||
<div class="position-relative">
|
||
<div class="bg-light text-center rounded-2 p-4 p-md-7">
|
||
<img class="avatar avatar-lg avatar-4x3 mx-auto mb-4" src="../assets/svg/brands/amazon-primary.svg" alt="SVG Logo">
|
||
|
||
<!-- Blockquote -->
|
||
<figure class="w-md-80 w-lg-50 mx-md-auto">
|
||
<blockquote class="blockquote">With Front, we're able to easily track our performance in full detail. It's become an essential tool for us to grow and engage with our audience.</blockquote>
|
||
|
||
<figcaption class="blockquote-footer">
|
||
Christina Kray
|
||
<span class="blockquote-footer-source">Social Media Executive, Mailchimp</span>
|
||
</figcaption>
|
||
</figure>
|
||
<!-- End Blockquote -->
|
||
</div>
|
||
|
||
<!-- SVG Shape -->
|
||
<div class="position-absolute bottom-0 start-0 w-100" style="max-width: 7rem;">
|
||
<div class="mb-n7 ms-n7">
|
||
<img class="img-fluid" src="../assets/svg/components/dots.svg" alt="Image Description">
|
||
</div>
|
||
</div>
|
||
<!-- End SVG Shape -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Testimonials -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-3" class="hs-docs-heading">
|
||
Component #3 <a class="anchorjs-link" href="#component-3" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab3" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab3" href="#nav-result3" data-bs-toggle="pill" data-bs-target="#nav-result3" role="tab" aria-controls="nav-result3" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab3" href="#nav-html3" data-bs-toggle="pill" data-bs-target="#nav-html3" role="tab" aria-controls="nav-html3" aria-selected="false">HTML</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-cssTab3" href="#nav-css3" data-bs-toggle="pill" data-bs-target="#nav-css3" role="tab" aria-controls="nav-css3" aria-selected="false">CSS</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-jsTab3" href="#nav-js3" data-bs-toggle="pill" data-bs-target="#nav-js3" role="tab" aria-controls="nav-js3" aria-selected="false">JS</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent3">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result3" role="tabpanel" aria-labelledby="nav-resultTab3">
|
||
<!-- Testimonials -->
|
||
<div class="container content-space-1">
|
||
<!-- Swiper Slider -->
|
||
<div class="js-swiper-single-testimonials swiper">
|
||
<div class="swiper-wrapper">
|
||
<!-- Slide -->
|
||
<div class="swiper-slide">
|
||
<!-- Blockquote -->
|
||
<figure class="w-md-65 text-center mx-md-auto">
|
||
<div class="mb-3">
|
||
<img class="avatar avatar-xl avatar-circle" src="../assets/img/160x160/img10.jpg" alt="Image Description">
|
||
</div>
|
||
|
||
<blockquote class="blockquote">“ It has many landing page variations to choose from, which one is always a big advantage. ”</blockquote>
|
||
|
||
<figcaption class="blockquote-footer mb-5">
|
||
Lida Reidy
|
||
<span class="blockquote-footer-source">Project Manager</span>
|
||
</figcaption>
|
||
|
||
<img class="avatar avatar-xl avatar-4x3" src="../assets/svg/brands/mailchimp-primary.svg" alt="Logo">
|
||
</figure>
|
||
<!-- End Blockquote -->
|
||
</div>
|
||
<!-- End Slide -->
|
||
|
||
<!-- Slide -->
|
||
<div class="swiper-slide">
|
||
<!-- Blockquote -->
|
||
<figure class="w-md-65 text-center mx-md-auto">
|
||
<div class="mb-3">
|
||
<img class="avatar avatar-xl avatar-circle" src="../assets/img/160x160/img4.jpg" alt="Image Description">
|
||
</div>
|
||
|
||
<blockquote class="blockquote">“ I just wanted to say that I'm very happy with my purchase of Front so far. The documentation is outstanding - clear and detailed. ”</blockquote>
|
||
|
||
<figcaption class="blockquote-footer mb-5">
|
||
Philip
|
||
<span class="blockquote-footer-source">Product Manager</span>
|
||
</figcaption>
|
||
|
||
<img class="avatar avatar-xl avatar-4x3" src="../assets/svg/brands/mailchimp-primary.svg" alt="Logo">
|
||
</figure>
|
||
<!-- End Blockquote -->
|
||
</div>
|
||
<!-- End Slide -->
|
||
|
||
<!-- Slide -->
|
||
<div class="swiper-slide">
|
||
<!-- Blockquote -->
|
||
<figure class="w-md-65 text-center mx-md-auto">
|
||
<div class="mb-3">
|
||
<img class="avatar avatar-xl avatar-circle" src="../assets/img/160x160/img9.jpg" alt="Image Description">
|
||
</div>
|
||
|
||
<blockquote class="blockquote">“ This is a beautiful template with exciting components and endless features. ”</blockquote>
|
||
|
||
<figcaption class="blockquote-footer mb-5">
|
||
Christina Kray
|
||
<span class="blockquote-footer-source">HR Director</span>
|
||
</figcaption>
|
||
|
||
<img class="avatar avatar-xl avatar-4x3" src="../assets/svg/brands/capsule-primary.svg" alt="Logo">
|
||
</figure>
|
||
<!-- End Blockquote -->
|
||
</div>
|
||
<!-- End Slide -->
|
||
</div>
|
||
|
||
<!-- Pagination -->
|
||
<div class="js-swiper-single-testimonials-pagination swiper-pagination"></div>
|
||
</div>
|
||
<!-- End Swiper Slider -->
|
||
</div>
|
||
<!-- End Testimonials -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html3" role="tabpanel" aria-labelledby="nav-htmlTab3">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Testimonials -->
|
||
<div class="container content-space-1 content-space-md-3">
|
||
<!-- Swiper Slider -->
|
||
<div class="js-swiper-single-testimonials swiper">
|
||
<div class="swiper-wrapper">
|
||
<!-- Slide -->
|
||
<div class="swiper-slide">
|
||
<!-- Blockquote -->
|
||
<figure class="w-md-65 text-center mx-md-auto">
|
||
<div class="mb-3">
|
||
<img class="avatar avatar-xl avatar-circle" src="../assets/img/160x160/img10.jpg" alt="Image Description">
|
||
</div>
|
||
|
||
<blockquote class="blockquote">“ It has many landing page variations to choose from, which one is always a big advantage. ”</blockquote>
|
||
|
||
<figcaption class="blockquote-footer mb-5">
|
||
Lida Reidy
|
||
<span class="blockquote-footer-source">Project Manager</span>
|
||
</figcaption>
|
||
|
||
<img class="avatar avatar-xl avatar-4x3" src="../assets/svg/brands/mailchimp-primary.svg" alt="Logo">
|
||
</figure>
|
||
<!-- End Blockquote -->
|
||
</div>
|
||
<!-- End Slide -->
|
||
|
||
<!-- Slide -->
|
||
<div class="swiper-slide">
|
||
<!-- Blockquote -->
|
||
<figure class="w-md-65 text-center mx-md-auto">
|
||
<div class="mb-3">
|
||
<img class="avatar avatar-xl avatar-circle" src="../assets/img/160x160/img4.jpg" alt="Image Description">
|
||
</div>
|
||
|
||
<blockquote class="blockquote">“ I just wanted to say that I'm very happy with my purchase of Front so far. The documentation is outstanding - clear and detailed. ”</blockquote>
|
||
|
||
<figcaption class="blockquote-footer mb-5">
|
||
Philip
|
||
<span class="blockquote-footer-source">Product Manager</span>
|
||
</figcaption>
|
||
|
||
<img class="avatar avatar-xl avatar-4x3" src="../assets/svg/brands/mailchimp-primary.svg" alt="Logo">
|
||
</figure>
|
||
<!-- End Blockquote -->
|
||
</div>
|
||
<!-- End Slide -->
|
||
|
||
<!-- Slide -->
|
||
<div class="swiper-slide">
|
||
<!-- Blockquote -->
|
||
<figure class="w-md-65 text-center mx-md-auto">
|
||
<div class="mb-3">
|
||
<img class="avatar avatar-xl avatar-circle" src="../assets/img/160x160/img9.jpg" alt="Image Description">
|
||
</div>
|
||
|
||
<blockquote class="blockquote">“ This is a beautiful template with exciting components and endless features. ”</blockquote>
|
||
|
||
<figcaption class="blockquote-footer mb-5">
|
||
Christina Kray
|
||
<span class="blockquote-footer-source">HR Director</span>
|
||
</figcaption>
|
||
|
||
<img class="avatar avatar-xl avatar-4x3" src="../assets/svg/brands/capsule-primary.svg" alt="Logo">
|
||
</figure>
|
||
<!-- End Blockquote -->
|
||
</div>
|
||
<!-- End Slide -->
|
||
</div>
|
||
|
||
<!-- Pagination -->
|
||
<div class="js-swiper-single-testimonials-pagination swiper-pagination"></div>
|
||
</div>
|
||
<!-- End Swiper Slider -->
|
||
</div>
|
||
<!-- End Testimonials -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-css3" role="tabpanel" aria-labelledby="nav-cssTab3">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<link rel="stylesheet" href="../assets/vendor/swiper/swiper-bundle.min.css">
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-js3" role="tabpanel" aria-labelledby="nav-jsTab3">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- JS Implementing Plugins -->
|
||
<script src="../assets/vendor/swiper/swiper-bundle.min.js"></script>
|
||
|
||
<!-- JS Plugins Init. -->
|
||
<script>
|
||
(function() {
|
||
// INITIALIZATION OF SWIPER
|
||
// =======================================================
|
||
var swiper = new Swiper('.js-swiper-single-testimonials', {
|
||
pagination: {
|
||
el: '.js-swiper-single-testimonials-pagination',
|
||
clickable: true,
|
||
},
|
||
});
|
||
})()
|
||
</script>
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-4" class="hs-docs-heading">
|
||
Component #4 <a class="anchorjs-link" href="#component-4" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab4" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab4" href="#nav-result4" data-bs-toggle="pill" data-bs-target="#nav-result4" role="tab" aria-controls="nav-result4" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab4" href="#nav-html4" data-bs-toggle="pill" data-bs-target="#nav-html4" role="tab" aria-controls="nav-html4" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent4">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result4" role="tabpanel" aria-labelledby="nav-resultTab4">
|
||
<!-- Testimonials -->
|
||
<div class="overflow-hidden">
|
||
<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="../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="../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="../assets/svg/components/dots.svg" alt="Image Description">
|
||
</figure>
|
||
<!-- End SVG Shape -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Testimonials -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html4" role="tabpanel" aria-labelledby="nav-htmlTab4">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Testimonials -->
|
||
<div class="overflow-hidden">
|
||
<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="../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="../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="../assets/svg/components/dots.svg" alt="Image Description">
|
||
</figure>
|
||
<!-- End SVG Shape -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Testimonials -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-5" class="hs-docs-heading">
|
||
Component #5 <a class="anchorjs-link" href="#component-5" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab5" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab5" href="#nav-result5" data-bs-toggle="pill" data-bs-target="#nav-result5" role="tab" aria-controls="nav-result5" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab5" href="#nav-html5" data-bs-toggle="pill" data-bs-target="#nav-html5" role="tab" aria-controls="nav-html5" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent5">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result5" role="tabpanel" aria-labelledby="nav-resultTab5">
|
||
<!-- Testimonials -->
|
||
<div class="overflow-hidden">
|
||
<div class="container content-space-1">
|
||
<div class="row justify-content-lg-between align-items-md-center">
|
||
<div class="col-md-6 order-md-2 mb-10 mb-md-0">
|
||
<div class="position-relative">
|
||
<img class="img-fluid rounded-2" src="../assets/img/900x900/img5.jpg" alt="Image Description">
|
||
|
||
<!-- SVG Shape -->
|
||
<figure class="position-absolute top-0 start-0 zi-n1 mt-n7 ms-n7" style="width: 12rem;">
|
||
<img class="img-fluid" src="../assets/svg/components/dots-lg.svg" alt="SVG">
|
||
</figure>
|
||
<!-- End SVG Shape -->
|
||
|
||
<!-- SVG Shape -->
|
||
<figure class="position-absolute bottom-0 end-0 zi-n1 mb-n7 me-n7" style="width: 12rem;">
|
||
<img class="img-fluid" src="../assets/svg/components/dots-lg.svg" alt="SVG">
|
||
</figure>
|
||
<!-- End SVG Shape -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6 col-lg-5 order-md-1">
|
||
<div class="mb-4">
|
||
<img class="avatar avatar-xl avatar-4x3" src="../assets/svg/brands/hubspot-primary.svg" alt="Image Description">
|
||
</div>
|
||
|
||
<!-- Blockquote -->
|
||
<figure>
|
||
<blockquote class="blockquote blockquote-lg">" The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you! "</blockquote>
|
||
|
||
<figcaption class="blockquote-footer">
|
||
Tom Lowry
|
||
<span class="blockquote-footer-source">CEO | Hubspot</span>
|
||
</figcaption>
|
||
</figure>
|
||
<!-- End Blockquote -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Testimonials -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html5" role="tabpanel" aria-labelledby="nav-htmlTab5">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Testimonials -->
|
||
<div class="overflow-hidden">
|
||
<div class="container content-space-2 content-space-lg-3">
|
||
<div class="row justify-content-lg-between align-items-md-center">
|
||
<div class="col-md-6 order-md-2 mb-10 mb-md-0">
|
||
<div class="position-relative">
|
||
<img class="img-fluid rounded-2" src="../assets/img/900x900/img5.jpg" alt="Image Description">
|
||
|
||
<!-- SVG Shape -->
|
||
<figure class="position-absolute top-0 start-0 zi-n1 mt-n7 ms-n7" style="width: 12rem;">
|
||
<img class="img-fluid" src="../assets/svg/components/dots-lg.svg" alt="SVG">
|
||
</figure>
|
||
<!-- End SVG Shape -->
|
||
|
||
<!-- SVG Shape -->
|
||
<figure class="position-absolute bottom-0 end-0 zi-n1 mb-n7 me-n7" style="width: 12rem;">
|
||
<img class="img-fluid" src="../assets/svg/components/dots-lg.svg" alt="SVG">
|
||
</figure>
|
||
<!-- End SVG Shape -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6 col-lg-5 order-md-1">
|
||
<div class="mb-4">
|
||
<img class="avatar avatar-xl avatar-4x3" src="../assets/svg/brands/hubspot-primary.svg" alt="Image Description">
|
||
</div>
|
||
|
||
<!-- Blockquote -->
|
||
<figure>
|
||
<blockquote class="blockquote blockquote-lg">" The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you! "</blockquote>
|
||
|
||
<figcaption class="blockquote-footer">
|
||
Tom Lowry
|
||
<span class="blockquote-footer-source">CEO | Hubspot</span>
|
||
</figcaption>
|
||
</figure>
|
||
<!-- End Blockquote -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Testimonials -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-6" class="hs-docs-heading">
|
||
Component #6 <a class="anchorjs-link" href="#component-6" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab6" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab6" href="#nav-result6" data-bs-toggle="pill" data-bs-target="#nav-result6" role="tab" aria-controls="nav-result6" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab6" href="#nav-html6" data-bs-toggle="pill" data-bs-target="#nav-html6" role="tab" aria-controls="nav-html6" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent6">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result6" role="tabpanel" aria-labelledby="nav-resultTab6">
|
||
<!-- Testimonials -->
|
||
<div class="container content-space-1">
|
||
<div class="text-center mb-5">
|
||
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/illustrations/oc-person-3.svg" alt="Illustration">
|
||
</div>
|
||
|
||
<!-- Blockquote -->
|
||
<figure class="w-md-75 text-center mx-md-auto">
|
||
<blockquote class="blockquote">“ I just wanted to say that I'm very happy with my purchase of Space so far. The documentation is outstanding - clear and detailed. ”</blockquote>
|
||
|
||
<figcaption class="blockquote-footer text-center">
|
||
Philip
|
||
<span class="blockquote-footer-source">Product Manager | Mailchimp</span>
|
||
</figcaption>
|
||
</figure>
|
||
<!-- End Blockquote -->
|
||
</div>
|
||
<!-- End Testimonials -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html6" role="tabpanel" aria-labelledby="nav-htmlTab6">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Testimonials -->
|
||
<div class="container content-space-2 content-space-lg-3">
|
||
<div class="text-center mb-5">
|
||
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/illustrations/oc-person-3.svg" alt="Illustration">
|
||
</div>
|
||
|
||
<!-- Blockquote -->
|
||
<figure class="w-md-75 text-center mx-md-auto">
|
||
<blockquote class="blockquote">“ I just wanted to say that I'm very happy with my purchase of Space so far. The documentation is outstanding - clear and detailed. ”</blockquote>
|
||
|
||
<figcaption class="blockquote-footer text-center">
|
||
Philip
|
||
<span class="blockquote-footer-source">Product Manager | Mailchimp</span>
|
||
</figcaption>
|
||
</figure>
|
||
<!-- End Blockquote -->
|
||
</div>
|
||
<!-- End Testimonials -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-7" class="hs-docs-heading">
|
||
Component #7 <a class="anchorjs-link" href="#component-7" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab7" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab7" href="#nav-result7" data-bs-toggle="pill" data-bs-target="#nav-result7" role="tab" aria-controls="nav-result7" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab7" href="#nav-html7" data-bs-toggle="pill" data-bs-target="#nav-html7" role="tab" aria-controls="nav-html7" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent7">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result7" role="tabpanel" aria-labelledby="nav-resultTab7">
|
||
<!-- Testimonials -->
|
||
<div class="container content-space-1">
|
||
<!-- Heading -->
|
||
<div class="w-lg-50 mb-5 mb-md-9">
|
||
<h2>Front worklfow is loved by users worldwide</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row">
|
||
<div class="col-sm-6 col-lg-4 mb-4 mb-lg-0">
|
||
<!-- Card -->
|
||
<div class="card h-100">
|
||
<div class="card-body">
|
||
<!-- Rating -->
|
||
<div class="d-flex gap-1 mb-2">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
</div>
|
||
<!-- End Rating -->
|
||
|
||
<div class="mb-auto">
|
||
<p class="card-text">With Front Pay, you can check out across the web and in apps without having to enter any payment information.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<!-- Media -->
|
||
<div class="d-flex align-items-center">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-circle" src="../assets/img/160x160/img8.jpg" alt="Image Description">
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h5 class="card-title mb-0">Christina Kray</h5>
|
||
<p class="card-text small">Business Manager</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Media -->
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-4 mb-4 mb-lg-0">
|
||
<!-- Card -->
|
||
<div class="card h-100">
|
||
<div class="card-body">
|
||
<!-- Rating -->
|
||
<div class="d-flex gap-1 mb-2">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star-half.svg" alt="Review rating" width="16">
|
||
</div>
|
||
<!-- End Rating -->
|
||
|
||
<div class="mb-auto">
|
||
<p class="card-text">From boarding passes to transit and movie tickets, there's pretty much nothing you can't store with Front Pay.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<!-- Media -->
|
||
<div class="d-flex align-items-center">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-circle" src="../assets/img/160x160/img9.jpg" alt="Image Description">
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h5 class="card-title mb-0">Andrea Gardy</h5>
|
||
<p class="card-text small">CEO at Slack</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Media -->
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-4">
|
||
<!-- Card -->
|
||
<div class="card h-100">
|
||
<div class="card-body">
|
||
<!-- Rating -->
|
||
<div class="d-flex gap-1 mb-2">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
</div>
|
||
<!-- End Rating -->
|
||
|
||
<div class="mb-auto">
|
||
<p class="card-text">I love Front Pay for cash back, reward points and fraud protection – just like when you're swiping your card.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<!-- Media -->
|
||
<div class="d-flex align-items-center">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-circle" src="../assets/img/160x160/img3.jpg" alt="Image Description">
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h5 class="card-title mb-0">Philip Williams</h5>
|
||
<p class="card-text small">Front Pay user</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Media -->
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Testimonials -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html7" role="tabpanel" aria-labelledby="nav-htmlTab7">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Testimonials -->
|
||
<div class="container content-space-2 content-space-lg-3">
|
||
<!-- Heading -->
|
||
<div class="w-lg-50 mb-5 mb-md-9">
|
||
<h2>Front worklfow is loved by users worldwide</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row">
|
||
<div class="col-sm-6 col-lg-4 mb-4 mb-lg-0">
|
||
<!-- Card -->
|
||
<div class="card h-100">
|
||
<div class="card-body">
|
||
<!-- Rating -->
|
||
<div class="d-flex gap-1 mb-2">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
</div>
|
||
<!-- End Rating -->
|
||
|
||
<div class="mb-auto">
|
||
<p class="card-text">With Front Pay, you can check out across the web and in apps without having to enter any payment information.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<!-- Media -->
|
||
<div class="d-flex align-items-center">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-circle" src="../assets/img/160x160/img8.jpg" alt="Image Description">
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h5 class="card-title mb-0">Christina Kray</h5>
|
||
<p class="card-text small">Business Manager</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Media -->
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-4 mb-4 mb-lg-0">
|
||
<!-- Card -->
|
||
<div class="card h-100">
|
||
<div class="card-body">
|
||
<!-- Rating -->
|
||
<div class="d-flex gap-1 mb-2">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star-half.svg" alt="Review rating" width="16">
|
||
</div>
|
||
<!-- End Rating -->
|
||
|
||
<div class="mb-auto">
|
||
<p class="card-text">From boarding passes to transit and movie tickets, there's pretty much nothing you can't store with Front Pay.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<!-- Media -->
|
||
<div class="d-flex align-items-center">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-circle" src="../assets/img/160x160/img9.jpg" alt="Image Description">
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h5 class="card-title mb-0">Andrea Gardy</h5>
|
||
<p class="card-text small">CEO at Slack</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Media -->
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-4">
|
||
<!-- Card -->
|
||
<div class="card h-100">
|
||
<div class="card-body">
|
||
<!-- Rating -->
|
||
<div class="d-flex gap-1 mb-2">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
</div>
|
||
<!-- End Rating -->
|
||
|
||
<div class="mb-auto">
|
||
<p class="card-text">I love Front Pay for cash back, reward points and fraud protection – just like when you're swiping your card.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<!-- Media -->
|
||
<div class="d-flex align-items-center">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-circle" src="../assets/img/160x160/img3.jpg" alt="Image Description">
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h5 class="card-title mb-0">Philip Williams</h5>
|
||
<p class="card-text small">Front Pay user</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Media -->
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Testimonials -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-8" class="hs-docs-heading">
|
||
Component #8 <a class="anchorjs-link" href="#component-8" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab8" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab8" href="#nav-result8" data-bs-toggle="pill" data-bs-target="#nav-result8" role="tab" aria-controls="nav-result8" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab8" href="#nav-html8" data-bs-toggle="pill" data-bs-target="#nav-html8" role="tab" aria-controls="nav-html8" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent8">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result8" role="tabpanel" aria-labelledby="nav-resultTab8">
|
||
<!-- Testimonials -->
|
||
<div class="border-top">
|
||
<div class="container content-space-1">
|
||
<!-- Heading -->
|
||
<div class="w-lg-50 mb-5 mb-md-9">
|
||
<h2>Loved by business and individuals across the globe.</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row">
|
||
<div class="col-sm-6 col-lg-4">
|
||
<!-- Card -->
|
||
<div class="card shadow-none">
|
||
<div class="card-body">
|
||
<!-- Rating -->
|
||
<div class="d-flex gap-1 mb-2">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
</div>
|
||
<!-- End Rating -->
|
||
|
||
<div class="mb-auto">
|
||
<p class="card-text">With Front Pay, you can check out across the web and in apps without having to enter any payment information.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<!-- Media -->
|
||
<div class="d-flex align-items-center">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-circle" src="../assets/img/160x160/img8.jpg" alt="Image Description">
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h5 class="card-title mb-0">Christina Kray</h5>
|
||
<p class="card-text small">Business Manager</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Media -->
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-4">
|
||
<!-- Card -->
|
||
<div class="card bg-primary">
|
||
<div class="card-body">
|
||
<!-- Rating -->
|
||
<div class="d-flex gap-1 mb-2">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star-half.svg" alt="Review rating" width="16">
|
||
</div>
|
||
<!-- End Rating -->
|
||
|
||
<div class="mb-auto">
|
||
<p class="card-text text-white">From boarding passes to transit and movie tickets, there's pretty much nothing you can't store with Front Pay.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<!-- Media -->
|
||
<div class="d-flex align-items-center">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-circle" src="../assets/img/160x160/img9.jpg" alt="Image Description">
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h5 class="card-title text-white mb-0">Andrea Gardy</h5>
|
||
<p class="card-text small text-white-70">CEO at Slack</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Media -->
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-4">
|
||
<!-- Card -->
|
||
<div class="card shadow-none">
|
||
<div class="card-body">
|
||
<!-- Rating -->
|
||
<div class="d-flex gap-1 mb-2">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
</div>
|
||
<!-- End Rating -->
|
||
|
||
<div class="mb-auto">
|
||
<p class="card-text">I love Front Pay for cash back, reward points and fraud protection – just like when you're swiping your card.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<!-- Media -->
|
||
<div class="d-flex align-items-center">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-circle" src="../assets/img/160x160/img3.jpg" alt="Image Description">
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h5 class="card-title mb-0">Philip Williams</h5>
|
||
<p class="card-text small">Front Pay user</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Media -->
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
<!-- End Testimonials -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html8" role="tabpanel" aria-labelledby="nav-htmlTab8">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Testimonials -->
|
||
<div class="border-top">
|
||
<div class="container content-space-2 content-space-lg-3">
|
||
<!-- Heading -->
|
||
<div class="w-lg-50 mb-5 mb-md-9">
|
||
<h2>Loved by business and individuals across the globe.</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row">
|
||
<div class="col-sm-6 col-lg-4">
|
||
<!-- Card -->
|
||
<div class="card shadow-none">
|
||
<div class="card-body">
|
||
<!-- Rating -->
|
||
<div class="d-flex gap-1 mb-2">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
</div>
|
||
<!-- End Rating -->
|
||
|
||
<div class="mb-auto">
|
||
<p class="card-text">With Front Pay, you can check out across the web and in apps without having to enter any payment information.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<!-- Media -->
|
||
<div class="d-flex align-items-center">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-circle" src="../assets/img/160x160/img8.jpg" alt="Image Description">
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h5 class="card-title mb-0">Christina Kray</h5>
|
||
<p class="card-text small">Business Manager</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Media -->
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-4">
|
||
<!-- Card -->
|
||
<div class="card bg-primary">
|
||
<div class="card-body">
|
||
<!-- Rating -->
|
||
<div class="d-flex gap-1 mb-2">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star-half.svg" alt="Review rating" width="16">
|
||
</div>
|
||
<!-- End Rating -->
|
||
|
||
<div class="mb-auto">
|
||
<p class="card-text text-white">From boarding passes to transit and movie tickets, there's pretty much nothing you can't store with Front Pay.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<!-- Media -->
|
||
<div class="d-flex align-items-center">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-circle" src="../assets/img/160x160/img9.jpg" alt="Image Description">
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h5 class="card-title text-white mb-0">Andrea Gardy</h5>
|
||
<p class="card-text small text-white-70">CEO at Slack</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Media -->
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-4">
|
||
<!-- Card -->
|
||
<div class="card shadow-none">
|
||
<div class="card-body">
|
||
<!-- Rating -->
|
||
<div class="d-flex gap-1 mb-2">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
</div>
|
||
<!-- End Rating -->
|
||
|
||
<div class="mb-auto">
|
||
<p class="card-text">I love Front Pay for cash back, reward points and fraud protection – just like when you're swiping your card.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<!-- Media -->
|
||
<div class="d-flex align-items-center">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-circle" src="../assets/img/160x160/img3.jpg" alt="Image Description">
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<h5 class="card-title mb-0">Philip Williams</h5>
|
||
<p class="card-text small">Front Pay user</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Media -->
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
<!-- End Testimonials -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-9" class="hs-docs-heading">
|
||
Component #9 <a class="anchorjs-link" href="#component-9" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab9" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab9" href="#nav-result9" data-bs-toggle="pill" data-bs-target="#nav-result9" role="tab" aria-controls="nav-result9" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab9" href="#nav-html9" data-bs-toggle="pill" data-bs-target="#nav-html9" role="tab" aria-controls="nav-html9" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent9">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result9" role="tabpanel" aria-labelledby="nav-resultTab9">
|
||
<!-- Testimonials -->
|
||
<div class="overflow-hidden">
|
||
<div class="container content-space-1">
|
||
<div class="row justify-content-lg-center align-items-md-center">
|
||
<div class="col-md-5 mb-10 mb-md-0">
|
||
<div class="position-relative">
|
||
<img class="img-fluid rounded-2" src="../assets/img/800x900/img1.jpg" alt="Image Description">
|
||
|
||
<!-- SVG Shape -->
|
||
<div class="position-absolute bottom-0 start-0 zi-n1 mb-n7 ms-n7" style="width: 12rem;">
|
||
<img class="img-fluid" src="../assets/svg/components/dots-lg.svg" alt="Image Description">
|
||
</div>
|
||
<!-- End SVG Shape -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-6 col-lg-5">
|
||
<div class="ps-md-6">
|
||
<div class="mb-4">
|
||
<img class="avatar avatar-xl avatar-4x3" src="../assets/svg/brands/hubspot-dark.svg" alt="Image Description">
|
||
</div>
|
||
|
||
<!-- Blockquote -->
|
||
<figure>
|
||
<blockquote class="blockquote blockquote-lg">" The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you! "</blockquote>
|
||
|
||
<figcaption class="blockquote-footer">
|
||
Christina Kray
|
||
<span class="blockquote-footer-source">CEO | Hubspot</span>
|
||
</figcaption>
|
||
</figure>
|
||
<!-- End Blockquote -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
<!-- End Testimonials -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html9" role="tabpanel" aria-labelledby="nav-htmlTab9">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Testimonials -->
|
||
<div class="overflow-hidden">
|
||
<div class="container content-space-2 content-space-lg-3">
|
||
<div class="row justify-content-lg-center align-items-md-center">
|
||
<div class="col-md-5 mb-10 mb-md-0">
|
||
<div class="position-relative">
|
||
<img class="img-fluid rounded-2" src="../assets/img/800x900/img1.jpg" alt="Image Description">
|
||
|
||
<!-- SVG Shape -->
|
||
<div class="position-absolute bottom-0 start-0 zi-n1 mb-n7 ms-n7" style="width: 12rem;">
|
||
<img class="img-fluid" src="../assets/svg/components/dots-lg.svg" alt="Image Description">
|
||
</div>
|
||
<!-- End SVG Shape -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-6 col-lg-5">
|
||
<div class="ps-md-6">
|
||
<div class="mb-4">
|
||
<img class="avatar avatar-xl avatar-4x3" src="../assets/svg/brands/hubspot-dark.svg" alt="Image Description">
|
||
</div>
|
||
|
||
<!-- Blockquote -->
|
||
<figure>
|
||
<blockquote class="blockquote blockquote-lg">" The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you! "</blockquote>
|
||
|
||
<figcaption class="blockquote-footer">
|
||
Christina Kray
|
||
<span class="blockquote-footer-source">CEO | Hubspot</span>
|
||
</figcaption>
|
||
</figure>
|
||
<!-- End Blockquote -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
<!-- End Testimonials -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-10" class="hs-docs-heading">
|
||
Component #10 <a class="anchorjs-link" href="#component-10" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab10" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab10" href="#nav-result10" data-bs-toggle="pill" data-bs-target="#nav-result10" role="tab" aria-controls="nav-result10" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab10" href="#nav-html10" data-bs-toggle="pill" data-bs-target="#nav-html10" role="tab" aria-controls="nav-html10" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent10">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result10" role="tabpanel" aria-labelledby="nav-resultTab10">
|
||
<!-- Testimonials -->
|
||
<div class="overflow-hidden content-space-1">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-7">
|
||
<h2>Reviews</h2>
|
||
<p>Over 40,000 happy customers. Be the next one.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="container">
|
||
<div class="row justify-content-center align-items-md-center mb-7">
|
||
<div class="col-11 col-md-6 col-lg-4 mb-5 mb-md-0 me-md-n9">
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<span class="svg-icon text-primary mb-3">
|
||
<svg width="36" height="36" 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="#377dff"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<!-- Blockquote -->
|
||
<figure>
|
||
<blockquote class="blockquote blockquote-sm blockquote-left-border">" With Front Real Estate we can be self-reliant, like cooking for ourselves rather than eating out every night. You feel like part of the community rather than a visitor. "</blockquote>
|
||
|
||
<figcaption class="blockquote-footer">
|
||
<div class="d-flex align-items-center">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-circle" src="../assets/img/160x160/img9.jpg" alt="Image Description">
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
Christina Kray
|
||
<span class="blockquote-footer-source">Happy customer</span>
|
||
</div>
|
||
</div>
|
||
</figcaption>
|
||
</figure>
|
||
<!-- End Blockquote -->
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="col-md-6 mt-n9 mt-md-0">
|
||
<img class="img-fluid" src="../assets/img/900x900/img21.jpg" alt="Image Description">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center">
|
||
<h3>See what other people are saying</h3>
|
||
|
||
<!-- Rating -->
|
||
<div class="d-flex justify-content-center align-items-center gap-1 mb-4">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<h4 class="ms-2 mb-0">4.85 / 5.0 <span class="text-body small">(2,594)</span></h4>
|
||
</div>
|
||
<!-- End Rating -->
|
||
|
||
<a class="btn btn-primary px-5" href="#">Read more reviews <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Testimonials -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html10" role="tabpanel" aria-labelledby="nav-htmlTab10">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Testimonials -->
|
||
<div class="overflow-hidden content-space-2 content-space-lg-3">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-7">
|
||
<h2>Reviews</h2>
|
||
<p>Over 40,000 happy customers. Be the next one.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="container">
|
||
<div class="row justify-content-center align-items-md-center mb-7">
|
||
<div class="col-11 col-md-6 col-lg-4 mb-5 mb-md-0 me-md-n9">
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<span class="svg-icon text-primary mb-3">
|
||
<svg width="36" height="36" 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="#377dff"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<!-- Blockquote -->
|
||
<figure>
|
||
<blockquote class="blockquote blockquote-sm blockquote-left-border">" With Front Real Estate we can be self-reliant, like cooking for ourselves rather than eating out every night. You feel like part of the community rather than a visitor. "</blockquote>
|
||
|
||
<figcaption class="blockquote-footer">
|
||
<div class="d-flex align-items-center">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-circle" src="../assets/img/160x160/img9.jpg" alt="Image Description">
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
Christina Kray
|
||
<span class="blockquote-footer-source">Happy customer</span>
|
||
</div>
|
||
</div>
|
||
</figcaption>
|
||
</figure>
|
||
<!-- End Blockquote -->
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="col-md-6 mt-n9 mt-md-0">
|
||
<img class="img-fluid" src="../assets/img/900x900/img21.jpg" alt="Image Description">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center">
|
||
<h3>See what other people are saying</h3>
|
||
|
||
<!-- Rating -->
|
||
<div class="d-flex justify-content-center align-items-center gap-1 mb-4">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<h4 class="ms-2 mb-0">4.85 / 5.0 <span class="text-body small">(2,594)</span></h4>
|
||
</div>
|
||
<!-- End Rating -->
|
||
|
||
<a class="btn btn-primary px-5" href="#">Read more reviews <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Testimonials -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-11" class="hs-docs-heading">
|
||
Component #11 <a class="anchorjs-link" href="#component-11" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab11" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab11" href="#nav-result11" data-bs-toggle="pill" data-bs-target="#nav-result11" role="tab" aria-controls="nav-result11" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab11" href="#nav-html11" data-bs-toggle="pill" data-bs-target="#nav-html11" role="tab" aria-controls="nav-html11" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent11">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result11" role="tabpanel" aria-labelledby="nav-resultTab11">
|
||
<!-- Testimonials -->
|
||
<div class="overflow-hidden gradient-x-three-sm-primary rounded-2 mx-md-10">
|
||
<div class="container content-space-2 content-space-lg-3">
|
||
<div class="row justify-content-center align-items-lg-center">
|
||
<div class="col-10 col-sm-8 col-lg-5 mb-10 mb-lg-0">
|
||
<div class="position-relative">
|
||
<img class="img-fluid rounded-2" src="../assets/img/900x900/img24.jpg" alt="Image Description">
|
||
|
||
<!-- SVG Shape -->
|
||
<div class="position-absolute top-0 start-0 zi-n1 mt-n6 ms-n7" style="width: 10rem;">
|
||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 335.2 335.2" width="100" height="100">
|
||
<circle fill="#FFC107" opacity=".7" cx="167.6" cy="167.6" r="130.1"/>
|
||
</svg>
|
||
</div>
|
||
<!-- End SVG Shape -->
|
||
|
||
<!-- SVG Shape -->
|
||
<div class="position-absolute bottom-0 end-0 zi-n1 mb-n6 me-n10" style="width: 10rem;">
|
||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 335.2 335.2" width="120" height="120">
|
||
<circle fill="none" stroke="#377dff" stroke-width="75" cx="167.6" cy="167.6" r="130.1"/>
|
||
</svg>
|
||
</div>
|
||
<!-- End SVG Shape -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-lg-7">
|
||
<div class="ps-lg-6">
|
||
<div class="mb-3">
|
||
<img class="avatar" src="../assets/svg/brands/capsule-icon.svg" alt="Image Description">
|
||
</div>
|
||
|
||
<!-- Blockquote -->
|
||
<figure class="mb-5">
|
||
<blockquote class="blockquote blockquote-lg">" Save time and effort in your hiring journey. Front's simple and powerful tools let you source, screen, and hire faster. "</blockquote>
|
||
|
||
<figcaption class="blockquote-footer">
|
||
Anna Lowry
|
||
<span class="blockquote-footer-source">HR Director | Capsule</span>
|
||
</figcaption>
|
||
</figure>
|
||
<!-- End Blockquote -->
|
||
|
||
<div class="row">
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-sm-0">
|
||
<h2 class="text-primary mb-1">59%</h2>
|
||
<p class="small mb-0">in budget saved on unconverting ads</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-sm-0">
|
||
<h2 class="text-primary mb-1">27%</h2>
|
||
<p class="small mb-0">in time saved on campaign management</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-md-4">
|
||
<h2 class="text-primary mb-1">2.1x</h2>
|
||
<p class="small mb-0">more split tests and experiments</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
<!-- End Testimonials -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html11" role="tabpanel" aria-labelledby="nav-htmlTab11">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Testimonials -->
|
||
<div class="overflow-hidden gradient-x-three-sm-primary rounded-2 mx-md-10">
|
||
<div class="container content-space-2 content-space-lg-3">
|
||
<div class="row justify-content-center align-items-lg-center">
|
||
<div class="col-10 col-sm-8 col-lg-5 mb-10 mb-lg-0">
|
||
<div class="position-relative">
|
||
<img class="img-fluid rounded-2" src="../assets/img/900x900/img24.jpg" alt="Image Description">
|
||
|
||
<!-- SVG Shape -->
|
||
<div class="position-absolute top-0 start-0 zi-n1 mt-n6 ms-n7" style="width: 10rem;">
|
||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 335.2 335.2" width="100" height="100">
|
||
<circle fill="#FFC107" opacity=".7" cx="167.6" cy="167.6" r="130.1"/>
|
||
</svg>
|
||
</div>
|
||
<!-- End SVG Shape -->
|
||
|
||
<!-- SVG Shape -->
|
||
<div class="position-absolute bottom-0 end-0 zi-n1 mb-n6 me-n10" style="width: 10rem;">
|
||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 335.2 335.2" width="120" height="120">
|
||
<circle fill="none" stroke="#377dff" stroke-width="75" cx="167.6" cy="167.6" r="130.1"/>
|
||
</svg>
|
||
</div>
|
||
<!-- End SVG Shape -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-lg-7">
|
||
<div class="ps-lg-6">
|
||
<div class="mb-3">
|
||
<img class="avatar" src="../assets/svg/brands/capsule-icon.svg" alt="Image Description">
|
||
</div>
|
||
|
||
<!-- Blockquote -->
|
||
<figure class="mb-5">
|
||
<blockquote class="blockquote blockquote-lg">" Save time and effort in your hiring journey. Front's simple and powerful tools let you source, screen, and hire faster. "</blockquote>
|
||
|
||
<figcaption class="blockquote-footer">
|
||
Anna Lowry
|
||
<span class="blockquote-footer-source">HR Director | Capsule</span>
|
||
</figcaption>
|
||
</figure>
|
||
<!-- End Blockquote -->
|
||
|
||
<div class="row">
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-sm-0">
|
||
<h2 class="text-primary mb-1">59%</h2>
|
||
<p class="small mb-0">in budget saved on unconverting ads</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-md-4 mb-3 mb-sm-0">
|
||
<h2 class="text-primary mb-1">27%</h2>
|
||
<p class="small mb-0">in time saved on campaign management</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-md-4">
|
||
<h2 class="text-primary mb-1">2.1x</h2>
|
||
<p class="small mb-0">more split tests and experiments</p>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
<!-- End Testimonials -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-12" class="hs-docs-heading">
|
||
Component #12 <a class="anchorjs-link" href="#component-12" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab12" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab12" href="#nav-result12" data-bs-toggle="pill" data-bs-target="#nav-result12" role="tab" aria-controls="nav-result12" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab12" href="#nav-html12" data-bs-toggle="pill" data-bs-target="#nav-html12" role="tab" aria-controls="nav-html12" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent12">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result12" role="tabpanel" aria-labelledby="nav-resultTab12">
|
||
<!-- Card Grid -->
|
||
<div id="interview-section" class="container">
|
||
<div class="mb-4">
|
||
<h4>What candidates say about the interview process at Capsule</h4>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-md-6 col-lg-4 mb-5">
|
||
<!-- Blockquote -->
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img9.jpg" alt="Image Description">
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<blockquote class="blockquote-left-border blockquote-sm">" My personal details, like, full name, location, and phone numbers. "</blockquote>
|
||
<div class="blockquote-footer blockquote-sm">
|
||
<span class="blockquote-footer-source">Shared on September 9, 2020</span>
|
||
Christina Kray
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Blockquote -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-6 col-lg-4 mb-5">
|
||
<!-- Blockquote -->
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img1.jpg" alt="Image Description">
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<blockquote class="blockquote-left-border blockquote-sm">" What my skills are and what I can offer to them. "</blockquote>
|
||
<div class="blockquote-footer blockquote-sm">
|
||
<span class="blockquote-footer-source">Shared on March 24, 2020</span>
|
||
Brian McManus
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Blockquote -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-6 col-lg-4 mb-5">
|
||
<!-- Blockquote -->
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img1.jpg" alt="Image Description">
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<blockquote class="blockquote-left-border blockquote-sm">" If I know how to do certain job functions. "</blockquote>
|
||
<div class="blockquote-footer blockquote-sm">
|
||
<span class="blockquote-footer-source">Shared on June 2, 2020</span>
|
||
Max Walters
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Blockquote -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- Card Grid -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html12" role="tabpanel" aria-labelledby="nav-htmlTab12">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card Grid -->
|
||
<div id="interview-section" class="container">
|
||
<div class="mb-4">
|
||
<h4>What candidates say about the interview process at Capsule</h4>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-md-6 col-lg-4 mb-5">
|
||
<!-- Blockquote -->
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img9.jpg" alt="Image Description">
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<blockquote class="blockquote-left-border blockquote-sm">" My personal details, like, full name, location, and phone numbers. "</blockquote>
|
||
<div class="blockquote-footer blockquote-sm">
|
||
<span class="blockquote-footer-source">Shared on September 9, 2020</span>
|
||
Christina Kray
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Blockquote -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-6 col-lg-4 mb-5">
|
||
<!-- Blockquote -->
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img1.jpg" alt="Image Description">
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<blockquote class="blockquote-left-border blockquote-sm">" What my skills are and what I can offer to them. "</blockquote>
|
||
<div class="blockquote-footer blockquote-sm">
|
||
<span class="blockquote-footer-source">Shared on March 24, 2020</span>
|
||
Brian McManus
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Blockquote -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-6 col-lg-4 mb-5">
|
||
<!-- Blockquote -->
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img1.jpg" alt="Image Description">
|
||
</div>
|
||
<div class="flex-grow-1 ms-3">
|
||
<blockquote class="blockquote-left-border blockquote-sm">" If I know how to do certain job functions. "</blockquote>
|
||
<div class="blockquote-footer blockquote-sm">
|
||
<span class="blockquote-footer-source">Shared on June 2, 2020</span>
|
||
Max Walters
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Blockquote -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- Card Grid -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-13" class="hs-docs-heading">
|
||
Component #13 <a class="anchorjs-link" href="#component-13" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab13" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab13" href="#nav-result13" data-bs-toggle="pill" data-bs-target="#nav-result13" role="tab" aria-controls="nav-result13" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab13" href="#nav-html13" data-bs-toggle="pill" data-bs-target="#nav-html13" role="tab" aria-controls="nav-html13" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent13">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result13" role="tabpanel" aria-labelledby="nav-resultTab13">
|
||
<!-- Testimonials -->
|
||
<div class="overflow-hidden content-space-1">
|
||
<div class="position-relative bg-light text-center rounded-2 zi-2 mx-3 mx-md-10">
|
||
<div class="container content-space-2">
|
||
<div class="text-center mb-5">
|
||
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/illustrations/oc-person-2.svg" alt="Illustration">
|
||
</div>
|
||
|
||
<!-- Blockquote -->
|
||
<figure class="w-md-75 text-center mx-md-auto">
|
||
<blockquote class="blockquote mb-7">“ The best part about Front Course is the selection. You can find a course for anything you want to learn! Thank you Front Course! You've renewed my passion for learning and my dream of becoming a web developer. ”</blockquote>
|
||
|
||
<figcaption class="blockquote-footer mt-2">
|
||
Martin
|
||
<span class="blockquote-footer-source">Happy customer</span>
|
||
</figcaption>
|
||
</figure>
|
||
<!-- End Blockquote -->
|
||
</div>
|
||
|
||
<!-- SVG Shape -->
|
||
<figure class="position-absolute top-0 start-0 mt-10 ms-10">
|
||
<svg width="70" height="70" 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="#97a4af" 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="#97a4af" 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="../assets/svg/components/dots.svg" alt="Image Description">
|
||
</figure>
|
||
<!-- End SVG Shape -->
|
||
</div>
|
||
</div>
|
||
<!-- End Testimonials -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html13" role="tabpanel" aria-labelledby="nav-htmlTab13">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Testimonials -->
|
||
<div class="overflow-hidden content-space-2">
|
||
<div class="position-relative bg-light text-center rounded-2 zi-2 mx-3 mx-md-10">
|
||
<div class="container content-space-2">
|
||
<div class="text-center mb-5">
|
||
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/illustrations/oc-person-2.svg" alt="Illustration">
|
||
</div>
|
||
|
||
<!-- Blockquote -->
|
||
<figure class="w-md-75 text-center mx-md-auto">
|
||
<blockquote class="blockquote mb-7">“ The best part about Front Course is the selection. You can find a course for anything you want to learn! Thank you Front Course! You've renewed my passion for learning and my dream of becoming a web developer. ”</blockquote>
|
||
|
||
<figcaption class="blockquote-footer mt-2">
|
||
Martin
|
||
<span class="blockquote-footer-source">Happy customer</span>
|
||
</figcaption>
|
||
</figure>
|
||
<!-- End Blockquote -->
|
||
</div>
|
||
|
||
<!-- SVG Shape -->
|
||
<figure class="position-absolute top-0 start-0 mt-10 ms-10">
|
||
<svg width="70" height="70" 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="#97a4af" 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="#97a4af" 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="../assets/svg/components/dots.svg" alt="Image Description">
|
||
</figure>
|
||
<!-- End SVG Shape -->
|
||
</div>
|
||
</div>
|
||
<!-- End Testimonials -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Content -->
|
||
</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 Global Compulsory -->
|
||
<script src="../assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||
|
||
<!-- JS Implementing Plugins -->
|
||
<script src="../assets/vendor/hs-header/dist/hs-header.min.js"></script>
|
||
<script src="../assets/vendor/hs-nav-scroller/dist/hs-nav-scroller.min.js"></script>
|
||
<script src="../assets/vendor/list.js/dist/list.min.js"></script>
|
||
<script src="../assets/vendor/hs-go-to/dist/hs-go-to.min.js"></script>
|
||
<script src="../assets/vendor/prism/prism.js"></script>
|
||
<script src="../assets/vendor/fslightbox/index.js"></script>
|
||
<script src="../assets/vendor/swiper/swiper-bundle.min.js"></script>
|
||
|
||
<!-- JS Front -->
|
||
<script src="../assets/js/theme.min.js"></script>
|
||
|
||
<!-- JS Plugins Init. -->
|
||
<script>
|
||
(function() {
|
||
// INITIALIZATION OF HEADER
|
||
// =======================================================
|
||
new HSHeader('#header').init()
|
||
|
||
|
||
// INITIALIZATION OF NAV SCROLLER
|
||
// =======================================================
|
||
new HsNavScroller('.js-nav-scroller', {
|
||
delay: 400,
|
||
offset: 140
|
||
})
|
||
|
||
|
||
// INITIALIZATION OF LISTJS COMPONENT
|
||
// =======================================================
|
||
HSCore.components.HSList.init('#snippetsSearch')
|
||
const snippetsSearch = HSCore.components.HSList.getItem('snippetsSearch')
|
||
|
||
|
||
// GET JSON FILE RESULTS
|
||
// =======================================================
|
||
fetch('../assets/json/snippets-search.json')
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
snippetsSearch.add(data)
|
||
})
|
||
|
||
|
||
// INITIALIZATION OF GO TO
|
||
// =======================================================
|
||
new HSGoTo('.js-go-to')
|
||
})()
|
||
</script>
|
||
</body>
|
||
</html>
|