1176 lines
53 KiB
HTML
1176 lines
53 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>Features Step - 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">
|
||
|
||
<!-- 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 active">
|
||
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavFeaturesCollapse" role="button" data-bs-toggle="collapse" aria-expanded="true" aria-controls="snippetsSidebarNavFeaturesCollapse">Features</a>
|
||
|
||
<div id="snippetsSidebarNavFeaturesCollapse" class="nav-collapse collapse show">
|
||
<a class="nav-link " href="features-general.html">General</a>
|
||
<a class="nav-link " href="features-stats.html">Stats</a>
|
||
<a class="nav-link active" 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 " 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">Features Step</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">
|
||
<!-- Step -->
|
||
<div class="container content-space-1">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
||
<span class="text-cap">Always improving</span>
|
||
<h2>Solutions rooted in code and design</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Step -->
|
||
<ul class="step step-md step-centered">
|
||
<li class="step-item">
|
||
<div class="step-content-wrapper">
|
||
<span class="step-icon step-icon-soft-primary">1</span>
|
||
<div class="step-content">
|
||
<h3>Industry-leading designs</h3>
|
||
<p>Achieve virtually any design and layout from within the one template.</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="step-item">
|
||
<div class="step-content-wrapper">
|
||
<span class="step-icon step-icon-soft-primary">2</span>
|
||
<div class="step-content">
|
||
<h3>Learn from the docs</h3>
|
||
<p>Whether you're a startup or a global enterprise, learn how to integrate with Front.</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="step-item">
|
||
<div class="step-content-wrapper">
|
||
<span class="step-icon step-icon-soft-primary">3</span>
|
||
<div class="step-content">
|
||
<h3>Accelerate your business</h3>
|
||
<p>We help power millions of businesses to built and run smoothly.</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<!-- End Step -->
|
||
</div>
|
||
<!-- End Step -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html1" role="tabpanel" aria-labelledby="nav-htmlTab1">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Step -->
|
||
<div class="container content-space-2 content-space-lg-3">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
||
<span class="text-cap">Always improving</span>
|
||
<h2>Solutions rooted in code and design</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Step -->
|
||
<ul class="step step-md step-centered">
|
||
<li class="step-item">
|
||
<div class="step-content-wrapper">
|
||
<span class="step-icon step-icon-soft-primary">1</span>
|
||
<div class="step-content">
|
||
<h3>Industry-leading designs</h3>
|
||
<p>Achieve virtually any design and layout from within the one template.</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="step-item">
|
||
<div class="step-content-wrapper">
|
||
<span class="step-icon step-icon-soft-primary">2</span>
|
||
<div class="step-content">
|
||
<h3>Learn from the docs</h3>
|
||
<p>Whether you're a startup or a global enterprise, learn how to integrate with Front.</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="step-item">
|
||
<div class="step-content-wrapper">
|
||
<span class="step-icon step-icon-soft-primary">3</span>
|
||
<div class="step-content">
|
||
<h3>Accelerate your business</h3>
|
||
<p>We help power millions of businesses to built and run smoothly.</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<!-- End Step -->
|
||
</div>
|
||
<!-- End Step -->
|
||
</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>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-jsTab2" href="#nav-js2" data-bs-toggle="pill" data-bs-target="#nav-js2" role="tab" aria-controls="nav-js2" aria-selected="false">JS</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">
|
||
<!-- Step -->
|
||
<div id="learnSection" class="container content-space-1">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
||
<h2 class="h1">Why Front?</h2>
|
||
<p>Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web – it is the starting point for creative sites.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="w-lg-75 mx-md-auto">
|
||
<!-- Step -->
|
||
<ul class="step step-md step-centered mb-md-9">
|
||
<li class="step-item">
|
||
<div class="step-content-wrapper">
|
||
<span class="step-icon step-icon-sm step-icon-soft-primary step-icon-pseudo"></span>
|
||
<div class="step-content">
|
||
<h5 class="step-title">Basic elements</h5>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="step-item">
|
||
<div class="step-content-wrapper">
|
||
<span class="step-icon step-icon-sm step-icon-soft-primary step-icon-pseudo"></span>
|
||
<div class="step-content">
|
||
<h5 class="step-title">Components</h5>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="step-item">
|
||
<div class="step-content-wrapper">
|
||
<span class="step-icon step-icon-sm step-icon-soft-primary step-icon-pseudo"></span>
|
||
<div class="step-content">
|
||
<h5 class="step-title">Combined components</h5>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="step-item">
|
||
<div class="step-content-wrapper">
|
||
<span class="step-icon step-icon-sm step-icon-soft-primary step-icon-pseudo"></span>
|
||
<div class="step-content">
|
||
<h5 class="step-title">Page layouts</h5>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<!-- End Step -->
|
||
|
||
<!-- Video Block -->
|
||
<div id="youTubeVideoPlayer" class="video-player video-player-inline-btn">
|
||
<img class="img-fluid video-player-preview" src="../assets/img/1920x800/img6.jpg" alt="Image">
|
||
|
||
<!-- Play Button -->
|
||
<a class="js-inline-video-player video-player-btn video-player-centered" href="javascript:;"
|
||
data-hs-video-player-options='{
|
||
"videoId": "d4eDWc8g0e0",
|
||
"parentSelector": "#youTubeVideoPlayer",
|
||
"targetSelector": "#youTubeVideoIframe",
|
||
"isAutoplay": true
|
||
}'>
|
||
<span class="video-player-icon shadow-sm">
|
||
<i class="bi-play-fill"></i>
|
||
</span>
|
||
</a>
|
||
<!-- End Play Button -->
|
||
|
||
<!-- Video Iframe -->
|
||
<div class="ratio ratio-16x9">
|
||
<div id="youTubeVideoIframe"></div>
|
||
</div>
|
||
<!-- End Video Iframe -->
|
||
</div>
|
||
<!-- End Video Block -->
|
||
</div>
|
||
</div>
|
||
<!-- End Step -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html2" role="tabpanel" aria-labelledby="nav-htmlTab2">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Step -->
|
||
<div id="learnSection" class="container content-space-2 content-space-lg-3">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
||
<h2 class="h1">Why Front?</h2>
|
||
<p>Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web – it is the starting point for creative sites.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="w-lg-75 mx-md-auto">
|
||
<!-- Step -->
|
||
<ul class="step step-md step-centered mb-md-9">
|
||
<li class="step-item">
|
||
<div class="step-content-wrapper">
|
||
<span class="step-icon step-icon-sm step-icon-soft-primary step-icon-pseudo"></span>
|
||
<div class="step-content">
|
||
<h5 class="step-title">Basic elements</h5>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="step-item">
|
||
<div class="step-content-wrapper">
|
||
<span class="step-icon step-icon-sm step-icon-soft-primary step-icon-pseudo"></span>
|
||
<div class="step-content">
|
||
<h5 class="step-title">Components</h5>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="step-item">
|
||
<div class="step-content-wrapper">
|
||
<span class="step-icon step-icon-sm step-icon-soft-primary step-icon-pseudo"></span>
|
||
<div class="step-content">
|
||
<h5 class="step-title">Combined components</h5>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="step-item">
|
||
<div class="step-content-wrapper">
|
||
<span class="step-icon step-icon-sm step-icon-soft-primary step-icon-pseudo"></span>
|
||
<div class="step-content">
|
||
<h5 class="step-title">Page layouts</h5>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<!-- End Step -->
|
||
|
||
<!-- Video Block -->
|
||
<div id="youTubeVideoPlayer" class="video-player video-player-inline-btn">
|
||
<img class="img-fluid video-player-preview" src="../assets/img/1920x800/img6.jpg" alt="Image">
|
||
|
||
<!-- Play Button -->
|
||
<a class="js-inline-video-player video-player-btn video-player-centered" href="javascript:;"
|
||
data-hs-video-player-options='{
|
||
"videoId": "d4eDWc8g0e0",
|
||
"parentSelector": "#youTubeVideoPlayer",
|
||
"targetSelector": "#youTubeVideoIframe",
|
||
"isAutoplay": true
|
||
}'>
|
||
<span class="video-player-icon shadow-sm">
|
||
<i class="bi-play-fill"></i>
|
||
</span>
|
||
</a>
|
||
<!-- End Play Button -->
|
||
|
||
<!-- Video Iframe -->
|
||
<div class="ratio ratio-16x9">
|
||
<div id="youTubeVideoIframe"></div>
|
||
</div>
|
||
<!-- End Video Iframe -->
|
||
</div>
|
||
<!-- End Video Block -->
|
||
</div>
|
||
</div>
|
||
<!-- End Step -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-js2" role="tabpanel" aria-labelledby="nav-jsTab2">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- JS Implementing Plugins -->
|
||
<script src="../assets/vendor/hs-video-player/dist/hs-video-player.min.js"></script>
|
||
|
||
<!-- JS Plugins Init. -->
|
||
<script>
|
||
(function() {
|
||
// INITIALIZATION OF VIDEO PLAYER
|
||
// =======================================================
|
||
new HSVideoPlayer('.js-inline-video-player')
|
||
})()
|
||
</script>
|
||
</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>
|
||
</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">
|
||
<!-- Content -->
|
||
<div class="container">
|
||
<!-- Alert -->
|
||
<div class="alert alert-primary mb-5 mb-md-7" role="alert">
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0">
|
||
<i class="bi-question-circle-fill fs-4"></i>
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-3">
|
||
<h4 class="alert-heading">Scheduled Maintenance!</h4>
|
||
<hr/>
|
||
<p>We're currently updating an issue that's preventing Forms, Meetings and Ads from being modified. All existing forms on websites continue working and accepting submissions.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Alert -->
|
||
|
||
<!-- Step Timeline -->
|
||
<ul class="step">
|
||
<!-- Timeline Item -->
|
||
<li class="step-item">
|
||
<div class="step-content-wrapper">
|
||
<span class="step-icon step-icon-soft-dark">
|
||
<i class="bi-calendar3"></i>
|
||
</span>
|
||
|
||
<div class="step-content">
|
||
<span class="step-title">March 9, 2020</span>
|
||
|
||
<h5 class="text-danger">Forms, Meetings and Ads cannot be modified</h5>
|
||
|
||
<div class="mb-4">
|
||
<p class="mb-1"><span class="fw-semi-bold">Resolved</span> - The Front app is now loading properly for all users. We've identified and addressed the cause of the issue as a problem with the Forms, Meetings and Ads tools, and the incident has now been fully resolved.</p>
|
||
<span class="text-muted small">Mar 8, 10:10 EST</span>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<p class="mb-1"><span class="fw-semi-bold">Investigating</span> - We're currently experiencing an issue that's preventing Forms, Meetings and Ads from being modified. All existing forms on websites continue working and accepting submissions. We're actively investigating the cause of this issue and will update this page when more information is available.</p>
|
||
<span class="text-muted small">Mar 8, 01:39 EST</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!-- End Timeline Item -->
|
||
|
||
<!-- Timeline Item -->
|
||
<li class="step-item">
|
||
<div class="step-content-wrapper">
|
||
<span class="step-icon step-icon-soft-dark">
|
||
<i class="bi-calendar3"></i>
|
||
</span>
|
||
|
||
<div class="step-content">
|
||
<span class="step-title">March 8, 2020</span>
|
||
|
||
<h4 class="h5 text-warning">Chatflows cannot be modified</h4>
|
||
|
||
<div class="mb-4">
|
||
<p class="mb-1"><span class="fw-semi-bold">Resolved</span> - Chatflows is now operating properly for all users. We've identified and addressed the cause of the issue and the incident has now been fully resolved.</p>
|
||
<span class="text-muted small">Mar 7, 12:24 EST</span>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<p class="mb-1"><span class="fw-semi-bold">Investigating</span> - Chatflows is now operating properly for all users. We've identified and addressed the cause of the issue and the incident has now been fully resolved.</p>
|
||
<span class="text-muted small">Mar 7, 12:01 EST</span>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<p class="mb-1"><span class="fw-semi-bold">Monitoring</span> - We've identified the issue that's been preventing Chatflows from being modified. We're actively addressing the cause of this issue and will update this page when more information is available.</p>
|
||
<span class="text-muted small">Mar 7, 11:24 EST</span>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<p class="mb-1"><span class="fw-semi-bold">Investigating</span> - We're currently experiencing an issue that's preventing Chatflow settings from being modified. We're actively investigating the cause of this issue and will update this page when more information is available.</p>
|
||
<span class="text-muted small">Mar 7, 11:11 EST</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!-- End Timeline Item -->
|
||
|
||
<!-- Timeline Item -->
|
||
<li class="step-item">
|
||
<div class="step-content-wrapper">
|
||
<span class="step-icon step-icon-soft-dark">
|
||
<i class="bi-calendar3"></i>
|
||
</span>
|
||
|
||
<div class="step-content">
|
||
<span class="step-title">March 7, 2020</span>
|
||
<p class="mb-1">No incidents reported.</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!-- End Timeline Item -->
|
||
|
||
<!-- Timeline Item -->
|
||
<li class="step-item">
|
||
<div class="step-content-wrapper">
|
||
<span class="step-icon step-icon-soft-dark">
|
||
<i class="bi-calendar3"></i>
|
||
</span>
|
||
|
||
<div class="step-content">
|
||
<span class="step-title">March 6, 2020</span>
|
||
<p class="mb-1">No incidents reported.</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!-- End Timeline Item -->
|
||
|
||
<!-- Timeline Item -->
|
||
<li class="step-item">
|
||
<div class="step-content-wrapper">
|
||
<span class="step-icon step-icon-soft-dark">
|
||
<i class="bi-calendar3"></i>
|
||
</span>
|
||
|
||
<div class="step-content">
|
||
<span class="step-title">March 5, 2020</span>
|
||
|
||
<h5 class="text-danger">Infrastructure Alerts</h5>
|
||
|
||
<div class="mb-4">
|
||
<p class="mb-1"><span class="fw-semi-bold">Resolved</span> - Some customers may have experienced delayed Infrastructure alerts. We encourage customers to check the status of their applications and infrastructure during this time frame. Services have returned to their normal operation.</p>
|
||
<span class="text-muted small">Mar 8, 19:51 EST</span>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<p class="mb-1"><span class="fw-semi-bold">Investigating</span> - Some customers may be experiencing an issue with delayed Infrastructure Alerts. Please continue to monitor this page for updates.</p>
|
||
<span class="text-muted small">Mar 8, 17:51 EST</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!-- End Timeline Item -->
|
||
|
||
<!-- Timeline Item -->
|
||
<li class="step-item">
|
||
<div class="step-content-wrapper">
|
||
<span class="step-icon step-icon-soft-dark">
|
||
<i class="bi-calendar3"></i>
|
||
</span>
|
||
|
||
<div class="step-content">
|
||
<span class="step-title">March 4, 2020</span>
|
||
<p class="mb-1">No incidents reported.</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!-- End Timeline Item -->
|
||
</ul>
|
||
<!-- End Step Timeline -->
|
||
</div>
|
||
<!-- End Content -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html3" role="tabpanel" aria-labelledby="nav-htmlTab3">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Content -->
|
||
<div class="container content-space-1">
|
||
<!-- Alert -->
|
||
<div class="alert alert-primary mb-5 mb-md-7" role="alert">
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0">
|
||
<i class="bi-question-circle-fill fs-4"></i>
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-3">
|
||
<h4 class="alert-heading">Scheduled Maintenance!</h4>
|
||
<hr/>
|
||
<p>We're currently updating an issue that's preventing Forms, Meetings and Ads from being modified. All existing forms on websites continue working and accepting submissions.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Alert -->
|
||
|
||
<!-- Step Timeline -->
|
||
<ul class="step">
|
||
<!-- Timeline Item -->
|
||
<li class="step-item">
|
||
<div class="step-content-wrapper">
|
||
<span class="step-icon step-icon-soft-dark">
|
||
<i class="bi-calendar3"></i>
|
||
</span>
|
||
|
||
<div class="step-content">
|
||
<span class="step-title">March 9, 2020</span>
|
||
|
||
<h5 class="text-danger">Forms, Meetings and Ads cannot be modified</h5>
|
||
|
||
<div class="mb-4">
|
||
<p class="mb-1"><span class="fw-semi-bold">Resolved</span> - The Front app is now loading properly for all users. We've identified and addressed the cause of the issue as a problem with the Forms, Meetings and Ads tools, and the incident has now been fully resolved.</p>
|
||
<span class="text-muted small">Mar 8, 10:10 EST</span>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<p class="mb-1"><span class="fw-semi-bold">Investigating</span> - We're currently experiencing an issue that's preventing Forms, Meetings and Ads from being modified. All existing forms on websites continue working and accepting submissions. We're actively investigating the cause of this issue and will update this page when more information is available.</p>
|
||
<span class="text-muted small">Mar 8, 01:39 EST</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!-- End Timeline Item -->
|
||
|
||
<!-- Timeline Item -->
|
||
<li class="step-item">
|
||
<div class="step-content-wrapper">
|
||
<span class="step-icon step-icon-soft-dark">
|
||
<i class="bi-calendar3"></i>
|
||
</span>
|
||
|
||
<div class="step-content">
|
||
<span class="step-title">March 8, 2020</span>
|
||
|
||
<h4 class="h5 text-warning">Chatflows cannot be modified</h4>
|
||
|
||
<div class="mb-4">
|
||
<p class="mb-1"><span class="fw-semi-bold">Resolved</span> - Chatflows is now operating properly for all users. We've identified and addressed the cause of the issue and the incident has now been fully resolved.</p>
|
||
<span class="text-muted small">Mar 7, 12:24 EST</span>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<p class="mb-1"><span class="fw-semi-bold">Investigating</span> - Chatflows is now operating properly for all users. We've identified and addressed the cause of the issue and the incident has now been fully resolved.</p>
|
||
<span class="text-muted small">Mar 7, 12:01 EST</span>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<p class="mb-1"><span class="fw-semi-bold">Monitoring</span> - We've identified the issue that's been preventing Chatflows from being modified. We're actively addressing the cause of this issue and will update this page when more information is available.</p>
|
||
<span class="text-muted small">Mar 7, 11:24 EST</span>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<p class="mb-1"><span class="fw-semi-bold">Investigating</span> - We're currently experiencing an issue that's preventing Chatflow settings from being modified. We're actively investigating the cause of this issue and will update this page when more information is available.</p>
|
||
<span class="text-muted small">Mar 7, 11:11 EST</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!-- End Timeline Item -->
|
||
|
||
<!-- Timeline Item -->
|
||
<li class="step-item">
|
||
<div class="step-content-wrapper">
|
||
<span class="step-icon step-icon-soft-dark">
|
||
<i class="bi-calendar3"></i>
|
||
</span>
|
||
|
||
<div class="step-content">
|
||
<span class="step-title">March 7, 2020</span>
|
||
<p class="mb-1">No incidents reported.</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!-- End Timeline Item -->
|
||
|
||
<!-- Timeline Item -->
|
||
<li class="step-item">
|
||
<div class="step-content-wrapper">
|
||
<span class="step-icon step-icon-soft-dark">
|
||
<i class="bi-calendar3"></i>
|
||
</span>
|
||
|
||
<div class="step-content">
|
||
<span class="step-title">March 6, 2020</span>
|
||
<p class="mb-1">No incidents reported.</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!-- End Timeline Item -->
|
||
|
||
<!-- Timeline Item -->
|
||
<li class="step-item">
|
||
<div class="step-content-wrapper">
|
||
<span class="step-icon step-icon-soft-dark">
|
||
<i class="bi-calendar3"></i>
|
||
</span>
|
||
|
||
<div class="step-content">
|
||
<span class="step-title">March 5, 2020</span>
|
||
|
||
<h5 class="text-danger">Infrastructure Alerts</h5>
|
||
|
||
<div class="mb-4">
|
||
<p class="mb-1"><span class="fw-semi-bold">Resolved</span> - Some customers may have experienced delayed Infrastructure alerts. We encourage customers to check the status of their applications and infrastructure during this time frame. Services have returned to their normal operation.</p>
|
||
<span class="text-muted small">Mar 8, 19:51 EST</span>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<p class="mb-1"><span class="fw-semi-bold">Investigating</span> - Some customers may be experiencing an issue with delayed Infrastructure Alerts. Please continue to monitor this page for updates.</p>
|
||
<span class="text-muted small">Mar 8, 17:51 EST</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!-- End Timeline Item -->
|
||
|
||
<!-- Timeline Item -->
|
||
<li class="step-item">
|
||
<div class="step-content-wrapper">
|
||
<span class="step-icon step-icon-soft-dark">
|
||
<i class="bi-calendar3"></i>
|
||
</span>
|
||
|
||
<div class="step-content">
|
||
<span class="step-title">March 4, 2020</span>
|
||
<p class="mb-1">No incidents reported.</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!-- End Timeline Item -->
|
||
</ul>
|
||
<!-- End Step Timeline -->
|
||
</div>
|
||
<!-- End Content -->
|
||
</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/hs-video-player/dist/hs-video-player.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')
|
||
|
||
|
||
// INITIALIZATION OF VIDEO PLAYER
|
||
// =======================================================
|
||
new HSVideoPlayer('.js-inline-video-player')
|
||
})()
|
||
</script>
|
||
</body>
|
||
</html>
|