1217 lines
56 KiB
HTML
1217 lines
56 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>Comments - 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 ">
|
||
<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 " 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 active" 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">Comments</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">
|
||
<!-- Comment -->
|
||
<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">
|
||
<h2>3 comments</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row justify-content-lg-center">
|
||
<div class="col-lg-8">
|
||
<!-- Comment -->
|
||
<ul class="list-comment">
|
||
<!-- Item -->
|
||
<li class="list-comment-item">
|
||
<!-- Media -->
|
||
<div class="d-flex align-items-center mb-3">
|
||
<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">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<h6>Dave Austin</h6>
|
||
<span class="d-block small text-muted">1 day ago</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Media -->
|
||
|
||
<p>As a Special Education teacher this resonates so well with me. Fighting with gen ed teachers to flatten for the students with learning disabilities. It also confirms some things for me in my writing.</p>
|
||
|
||
<a class="link" href="#">Reply</a>
|
||
|
||
<!-- Comment -->
|
||
<ul class="list-comment">
|
||
<!-- Item -->
|
||
<li class="list-comment-item">
|
||
<!-- Media -->
|
||
<div class="d-flex align-items-center mb-3">
|
||
<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">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<h6>Christina Kray</h6>
|
||
<span class="d-block small text-muted">1 day ago</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Media -->
|
||
|
||
<p>Love it Dave! We're all about keeping it up.</p>
|
||
|
||
<a class="link" href="#">Reply</a>
|
||
</li>
|
||
<!-- End Item -->
|
||
</ul>
|
||
<!-- End Comment -->
|
||
</li>
|
||
<!-- End Item -->
|
||
|
||
<!-- Item -->
|
||
<li class="list-comment-item">
|
||
<!-- Media -->
|
||
<div class="d-flex align-items-center mb-3">
|
||
<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">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<h6>Hanna Wolfe</h6>
|
||
<span class="d-block small text-muted">2 days ago</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Media -->
|
||
|
||
<p>Since our attention spans seem to be shrinking by the day — keeping it simple is more important than ever.</p>
|
||
|
||
<a class="link" href="#">Reply</a>
|
||
</li>
|
||
<!-- End Item -->
|
||
</ul>
|
||
<!-- End Comment -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Comment -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html1" role="tabpanel" aria-labelledby="nav-htmlTab1">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Comment -->
|
||
<div class="container content-space-1 content-space-lg-3">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
||
<h2>3 comments</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row justify-content-lg-center">
|
||
<div class="col-lg-8">
|
||
<!-- Comment -->
|
||
<ul class="list-comment">
|
||
<!-- Item -->
|
||
<li class="list-comment-item">
|
||
<!-- Media -->
|
||
<div class="d-flex align-items-center mb-3">
|
||
<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">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<h6>Dave Austin</h6>
|
||
<span class="d-block small text-muted">1 day ago</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Media -->
|
||
|
||
<p>As a Special Education teacher this resonates so well with me. Fighting with gen ed teachers to flatten for the students with learning disabilities. It also confirms some things for me in my writing.</p>
|
||
|
||
<a class="link" href="#">Reply</a>
|
||
|
||
<!-- Comment -->
|
||
<ul class="list-comment">
|
||
<!-- Item -->
|
||
<li class="list-comment-item">
|
||
<!-- Media -->
|
||
<div class="d-flex align-items-center mb-3">
|
||
<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">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<h6>Christina Kray</h6>
|
||
<span class="d-block small text-muted">1 day ago</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Media -->
|
||
|
||
<p>Love it Dave! We're all about keeping it up.</p>
|
||
|
||
<a class="link" href="#">Reply</a>
|
||
</li>
|
||
<!-- End Item -->
|
||
</ul>
|
||
<!-- End Comment -->
|
||
</li>
|
||
<!-- End Item -->
|
||
|
||
<!-- Item -->
|
||
<li class="list-comment-item">
|
||
<!-- Media -->
|
||
<div class="d-flex align-items-center mb-3">
|
||
<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">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<h6>Hanna Wolfe</h6>
|
||
<span class="d-block small text-muted">2 days ago</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Media -->
|
||
|
||
<p>Since our attention spans seem to be shrinking by the day — keeping it simple is more important than ever.</p>
|
||
|
||
<a class="link" href="#">Reply</a>
|
||
</li>
|
||
<!-- End Item -->
|
||
</ul>
|
||
<!-- End Comment -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Comment -->
|
||
</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">
|
||
<!-- Reviews -->
|
||
<div id="reviews-section" class="container">
|
||
<div class="mb-4">
|
||
<h3>Reviews</h3>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-md-8 mb-7 mb-md-0">
|
||
<div class="row mb-6">
|
||
<div class="col-sm-6 mb-3 mb-sm-0">
|
||
<!-- Media -->
|
||
<div class="d-flex align-items-center">
|
||
<div class="flex-shrink-0">
|
||
<span class="display-4 text-dark">4.5</span>
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-4">
|
||
<!-- Rating -->
|
||
<div class="d-flex gap-1 mb-2">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
|
||
<img src="../assets/svg/illustrations/star-half.svg" alt="Review rating" width="14">
|
||
</div>
|
||
<!-- End Rating -->
|
||
|
||
<span class="d-block">2,391 reviews</span>
|
||
</div>
|
||
</div>
|
||
<!-- End Media -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6">
|
||
<div class="d-flex align-items-center">
|
||
<div class="flex-shrink-0">
|
||
<span class="display-4 text-dark">90%</span>
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-4">
|
||
<span class="font-size-1">of customers<br>recommend this company</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
|
||
<!-- Comment -->
|
||
<ul class="list-comment mb-7">
|
||
<!-- Item -->
|
||
<li class="list-comment-item">
|
||
<!-- Media -->
|
||
<div class="d-flex mb-3">
|
||
<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>Dave Austin</h5>
|
||
|
||
<div class="d-flex align-items-center mb-3">
|
||
<span class="fw-semi-bold text-dark me-1">5.0</span>
|
||
<img class="me-2" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
|
||
<small class="d-block">on November 12, 2020</small>
|
||
</div>
|
||
|
||
<h5>Fun place to work at</h5>
|
||
<p>You work at your own time. No stress. Although finding jobs are really hard as an entry-level individual with no experience. But I have found 2 jobs without needing any experience.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Media -->
|
||
</li>
|
||
<!-- End Item -->
|
||
|
||
<!-- Item -->
|
||
<li class="list-comment-item">
|
||
<!-- Media -->
|
||
<div class="d-flex mb-3">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-circle" src="../assets/img/160x160/img1.jpg" alt="Image Description">
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-3">
|
||
<h5>Brian Ortega</h5>
|
||
|
||
<div class="d-flex align-items-center mb-3">
|
||
<span class="fw-semi-bold text-dark me-1">3.0</span>
|
||
<img class="me-2" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
|
||
<small class="d-block">on October 25, 2020</small>
|
||
</div>
|
||
|
||
<h5>Capsule is for contracted freelance writers</h5>
|
||
<p>It was difficult getting the person I was reporting to to explain what it was they wanted me to do. Trello board was all over the place. Some use word, some use Google docs. There was more time spent *hours* researching and minimal pay for articles. 1 cent per word is not acceptable compared to the research behind it. Applying for jobs costs "contacts" and it's very difficult to get anyone who posts jobs to answer you once you apply, therefore you waste contacts applying. There are alot of unverified payments from people searching for writing help. Be leery and watch what you apply for.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Media -->
|
||
</li>
|
||
<!-- End Item -->
|
||
|
||
<!-- Item -->
|
||
<li class="list-comment-item">
|
||
<!-- Media -->
|
||
<div class="d-flex mb-3">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-circle" src="../assets/img/160x160/img7.jpg" alt="Image Description">
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-3">
|
||
<h5>Maria Williams</h5>
|
||
|
||
<div class="d-flex align-items-center mb-3">
|
||
<span class="fw-semi-bold text-dark me-1">5.0</span>
|
||
<img class="me-2" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
|
||
<small class="d-block">on October 19, 2020</small>
|
||
</div>
|
||
|
||
<h5>Excellent Company</h5>
|
||
<p>They have a great training program, I felt very comfortable with my day to day tasks. Very low turn over, management always is available if you have any questions.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Media -->
|
||
</li>
|
||
<!-- End Item -->
|
||
|
||
<!-- Item -->
|
||
<li class="list-comment-item">
|
||
<!-- Media -->
|
||
<div class="d-flex mb-3">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-circle" src="../assets/img/160x160/img6.jpg" alt="Image Description">
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-3">
|
||
<h5>Alex Walters</h5>
|
||
|
||
<div class="d-flex align-items-center mb-3">
|
||
<span class="fw-semi-bold text-dark me-1">4.0</span>
|
||
<img class="me-2" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
|
||
<small class="d-block">on July 04, 2020</small>
|
||
</div>
|
||
|
||
<h5>Productive and fun Workplace</h5>
|
||
<p>I'm Diplomatic, personable, and adept at managing sensitive situations. Highly organized, self-motivated, with computers. I'm likeable delecated student of Software Engineering.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Media -->
|
||
</li>
|
||
<!-- End Item -->
|
||
|
||
<!-- Item -->
|
||
<li class="list-comment-item">
|
||
<!-- Media -->
|
||
<div class="d-flex mb-3">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-circle" src="../assets/img/160x160/img5.jpg" alt="Image Description">
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-3">
|
||
<h5>Kurtis Blade</h5>
|
||
|
||
<div class="d-flex align-items-center mb-3">
|
||
<span class="fw-semi-bold text-dark me-1">5.0</span>
|
||
<img class="me-2" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
|
||
<small class="d-block">on March 01, 2020</small>
|
||
</div>
|
||
|
||
<h5>Nice place</h5>
|
||
<p>I learned a lot of things while working at this job. A decent workplace to be. Managment is okay and my coworkers we just fine. Very good for beginners.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Media -->
|
||
</li>
|
||
<!-- End Item -->
|
||
</ul>
|
||
<!-- End Comment -->
|
||
|
||
<a class="btn btn-outline-primary" href="#">View all reviews <i class="bi-chevron-right small ms-1"></i></a>
|
||
|
||
<!-- Sticky Block End Point -->
|
||
<div id="stickyBlockEndPoint"></div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-4">
|
||
<div class="ps-md-4">
|
||
<!-- Sticky Block -->
|
||
<div id="stickyBlockStartPoint">
|
||
<div class="js-sticky-block"
|
||
data-hs-sticky-block-options='{
|
||
"parentSelector": "#stickyBlockStartPoint",
|
||
"breakpoint": "md",
|
||
"startPoint": "#stickyBlockStartPoint",
|
||
"endPoint": "#stickyBlockEndPoint",
|
||
"stickyOffsetTop": 20,
|
||
"stickyOffsetBottom": 20
|
||
}'>
|
||
<!-- Card -->
|
||
<div class="card card-bordered">
|
||
<div class="card-body">
|
||
<div class="mb-5">
|
||
<h3 class="card-title">What would you say about your employer?</h3>
|
||
<p class="card-text">Help fellow job seekers by sharing your unique experience.</p>
|
||
</div>
|
||
|
||
<div class="d-grid mb-5">
|
||
<a class="btn btn-primary btn-sm" href="#">Select a subscription</a>
|
||
</div>
|
||
|
||
<img class="card-img-bottom" src="../assets/svg/illustrations/oc-chatting.svg" alt="Image Description">
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
</div>
|
||
<!-- End Sticky Block -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- Reviews -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html2" role="tabpanel" aria-labelledby="nav-htmlTab2">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Reviews -->
|
||
<div id="reviews-section" class="container">
|
||
<div class="mb-4">
|
||
<h3>Reviews</h3>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-md-8 mb-7 mb-md-0">
|
||
<div class="row mb-6">
|
||
<div class="col-sm-6 mb-3 mb-sm-0">
|
||
<!-- Media -->
|
||
<div class="d-flex align-items-center">
|
||
<div class="flex-shrink-0">
|
||
<span class="display-4 text-dark">4.5</span>
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-4">
|
||
<!-- Rating -->
|
||
<div class="d-flex gap-1 mb-2">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
|
||
<img src="../assets/svg/illustrations/star-half.svg" alt="Review rating" width="14">
|
||
</div>
|
||
<!-- End Rating -->
|
||
|
||
<span class="d-block">2,391 reviews</span>
|
||
</div>
|
||
</div>
|
||
<!-- End Media -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6">
|
||
<div class="d-flex align-items-center">
|
||
<div class="flex-shrink-0">
|
||
<span class="display-4 text-dark">90%</span>
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-4">
|
||
<span class="font-size-1">of customers<br>recommend this company</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
|
||
<!-- Comment -->
|
||
<ul class="list-comment mb-7">
|
||
<!-- Item -->
|
||
<li class="list-comment-item">
|
||
<!-- Media -->
|
||
<div class="d-flex mb-3">
|
||
<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>Dave Austin</h5>
|
||
|
||
<div class="d-flex align-items-center mb-3">
|
||
<span class="fw-semi-bold text-dark me-1">5.0</span>
|
||
<img class="me-2" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
|
||
<small class="d-block">on November 12, 2020</small>
|
||
</div>
|
||
|
||
<h5>Fun place to work at</h5>
|
||
<p>You work at your own time. No stress. Although finding jobs are really hard as an entry-level individual with no experience. But I have found 2 jobs without needing any experience.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Media -->
|
||
</li>
|
||
<!-- End Item -->
|
||
|
||
<!-- Item -->
|
||
<li class="list-comment-item">
|
||
<!-- Media -->
|
||
<div class="d-flex mb-3">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-circle" src="../assets/img/160x160/img1.jpg" alt="Image Description">
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-3">
|
||
<h5>Brian Ortega</h5>
|
||
|
||
<div class="d-flex align-items-center mb-3">
|
||
<span class="fw-semi-bold text-dark me-1">3.0</span>
|
||
<img class="me-2" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
|
||
<small class="d-block">on October 25, 2020</small>
|
||
</div>
|
||
|
||
<h5>Capsule is for contracted freelance writers</h5>
|
||
<p>It was difficult getting the person I was reporting to to explain what it was they wanted me to do. Trello board was all over the place. Some use word, some use Google docs. There was more time spent *hours* researching and minimal pay for articles. 1 cent per word is not acceptable compared to the research behind it. Applying for jobs costs "contacts" and it's very difficult to get anyone who posts jobs to answer you once you apply, therefore you waste contacts applying. There are alot of unverified payments from people searching for writing help. Be leery and watch what you apply for.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Media -->
|
||
</li>
|
||
<!-- End Item -->
|
||
|
||
<!-- Item -->
|
||
<li class="list-comment-item">
|
||
<!-- Media -->
|
||
<div class="d-flex mb-3">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-circle" src="../assets/img/160x160/img7.jpg" alt="Image Description">
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-3">
|
||
<h5>Maria Williams</h5>
|
||
|
||
<div class="d-flex align-items-center mb-3">
|
||
<span class="fw-semi-bold text-dark me-1">5.0</span>
|
||
<img class="me-2" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
|
||
<small class="d-block">on October 19, 2020</small>
|
||
</div>
|
||
|
||
<h5>Excellent Company</h5>
|
||
<p>They have a great training program, I felt very comfortable with my day to day tasks. Very low turn over, management always is available if you have any questions.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Media -->
|
||
</li>
|
||
<!-- End Item -->
|
||
|
||
<!-- Item -->
|
||
<li class="list-comment-item">
|
||
<!-- Media -->
|
||
<div class="d-flex mb-3">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-circle" src="../assets/img/160x160/img6.jpg" alt="Image Description">
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-3">
|
||
<h5>Alex Walters</h5>
|
||
|
||
<div class="d-flex align-items-center mb-3">
|
||
<span class="fw-semi-bold text-dark me-1">4.0</span>
|
||
<img class="me-2" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
|
||
<small class="d-block">on July 04, 2020</small>
|
||
</div>
|
||
|
||
<h5>Productive and fun Workplace</h5>
|
||
<p>I'm Diplomatic, personable, and adept at managing sensitive situations. Highly organized, self-motivated, with computers. I'm likeable delecated student of Software Engineering.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Media -->
|
||
</li>
|
||
<!-- End Item -->
|
||
|
||
<!-- Item -->
|
||
<li class="list-comment-item">
|
||
<!-- Media -->
|
||
<div class="d-flex mb-3">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-circle" src="../assets/img/160x160/img5.jpg" alt="Image Description">
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-3">
|
||
<h5>Kurtis Blade</h5>
|
||
|
||
<div class="d-flex align-items-center mb-3">
|
||
<span class="fw-semi-bold text-dark me-1">5.0</span>
|
||
<img class="me-2" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
|
||
<small class="d-block">on March 01, 2020</small>
|
||
</div>
|
||
|
||
<h5>Nice place</h5>
|
||
<p>I learned a lot of things while working at this job. A decent workplace to be. Managment is okay and my coworkers we just fine. Very good for beginners.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Media -->
|
||
</li>
|
||
<!-- End Item -->
|
||
</ul>
|
||
<!-- End Comment -->
|
||
|
||
<a class="btn btn-outline-primary" href="#">View all reviews <i class="bi-chevron-right small ms-1"></i></a>
|
||
|
||
<!-- Sticky Block End Point -->
|
||
<div id="stickyBlockEndPoint"></div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-4">
|
||
<div class="ps-md-4">
|
||
<!-- Sticky Block -->
|
||
<div id="stickyBlockStartPoint">
|
||
<div class="js-sticky-block"
|
||
data-hs-sticky-block-options='{
|
||
"parentSelector": "#stickyBlockStartPoint",
|
||
"breakpoint": "md",
|
||
"startPoint": "#stickyBlockStartPoint",
|
||
"endPoint": "#stickyBlockEndPoint",
|
||
"stickyOffsetTop": 20,
|
||
"stickyOffsetBottom": 20
|
||
}'>
|
||
<!-- Card -->
|
||
<div class="card card-bordered">
|
||
<div class="card-body">
|
||
<div class="mb-5">
|
||
<h3 class="card-title">What would you say about your employer?</h3>
|
||
<p class="card-text">Help fellow job seekers by sharing your unique experience.</p>
|
||
</div>
|
||
|
||
<div class="d-grid mb-5">
|
||
<a class="btn btn-primary btn-sm" href="#">Select a subscription</a>
|
||
</div>
|
||
|
||
<img class="card-img-bottom" src="../assets/svg/illustrations/oc-chatting.svg" alt="Image Description">
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
</div>
|
||
<!-- End Sticky Block -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- Reviews -->
|
||
</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-sticky-block/dist/hs-sticky-block.min.js"></script>
|
||
|
||
<!-- JS Plugins Init. -->
|
||
<script>
|
||
(function() {
|
||
// INITIALIZATION OF STICKY BLOCKS
|
||
// =======================================================
|
||
new HSStickyBlock('.js-sticky-block', {
|
||
targetSelector: document.getElementById('header').classList.contains('navbar-fixed') ? '#header' : null
|
||
})
|
||
})()
|
||
</script>
|
||
</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-sticky-block/dist/hs-sticky-block.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 STICKY BLOCKS
|
||
// =======================================================
|
||
new HSStickyBlock('.js-sticky-block', {
|
||
targetSelector: document.getElementById('header').classList.contains('navbar-fixed') ? '#header' : null
|
||
})
|
||
})()
|
||
</script>
|
||
</body>
|
||
</html>
|