2717 lines
141 KiB
HTML
2717 lines
141 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>Sidebar Examples - 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 " 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 active" 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">Sidebar Examples</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>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-jsTab1" href="#nav-js1" data-bs-toggle="pill" data-bs-target="#nav-js1" role="tab" aria-controls="nav-js1" aria-selected="false">JS</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="navTabContent1">
|
|
<div class="tab-pane fade p-4 show active" id="nav-result1" role="tabpanel" aria-labelledby="nav-resultTab1">
|
|
<!-- Card Grid -->
|
|
<div class="container content-space-1">
|
|
<div class="row justify-content-lg-between">
|
|
<div class="col-lg-3">
|
|
<div class="mb-7">
|
|
<div class="mb-3">
|
|
<h3>Newsletter</h3>
|
|
</div>
|
|
|
|
<!-- Form -->
|
|
<form>
|
|
<div class="mb-2">
|
|
<input type="text" class="form-control" placeholder="Enter email" aria-label="Enter email">
|
|
</div>
|
|
<div class="d-grid">
|
|
<button type="button" class="btn btn-primary">Subscribe</button>
|
|
</div>
|
|
</form>
|
|
<!-- End Form -->
|
|
|
|
<p class="form-text">Get special offers on the latest developments from Front.</p>
|
|
</div>
|
|
|
|
<div class="mb-7">
|
|
<div class="mb-3">
|
|
<h3>Productivity</h3>
|
|
</div>
|
|
|
|
<!-- List Group -->
|
|
<ul class="list-group list-group-lg">
|
|
<!-- Item -->
|
|
<li class="list-group-item">
|
|
<a href="#">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h5 class="mb-1">Here's how to dodge distractions</h5>
|
|
<p class="text-body small mb-0">Feb 08, 2020</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<i class="bi-chevron-right"></i>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</a>
|
|
</li>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<li class="list-group-item">
|
|
<a href="#">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h5 class="mb-1">Ideas to stay productive</h5>
|
|
<p class="text-body small mb-0">Feb 09, 2020</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<i class="bi-chevron-right"></i>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</a>
|
|
</li>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<li class="list-group-item">
|
|
<a href="#">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h5 class="mb-1">Classic design principles</h5>
|
|
<p class="text-body small mb-0">Feb 10, 2020</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<i class="bi-chevron-right"></i>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</a>
|
|
</li>
|
|
<!-- End Item -->
|
|
</ul>
|
|
<!-- End List Group -->
|
|
</div>
|
|
|
|
<!-- Sticky Block Start Point -->
|
|
<div id="stickyBlockStartPointEg5"></div>
|
|
|
|
<div class="js-sticky-block"
|
|
data-hs-sticky-block-options='{
|
|
"parentSelector": "#stickyBlockStartPointEg5",
|
|
"targetSelector": "#header",
|
|
"breakpoint": "md",
|
|
"startPoint": "#stickyBlockStartPointEg5",
|
|
"endPoint": "#stickyBlockEndPoint",
|
|
"stickyOffsetTop": 80
|
|
}'>
|
|
<div class="mb-7">
|
|
<div class="mb-3">
|
|
<h3>Front culture</h3>
|
|
</div>
|
|
|
|
<div class="d-grid gap-2">
|
|
<!-- Card -->
|
|
<a class="d-block" href="../blog-article.html">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar avatar-lg">
|
|
<img class="avatar-img" src="../assets/img/320x320/img1.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="text-inherit mb-0">Announcing a free plan for small teams</h5>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<a class="d-block" href="../blog-article.html">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar avatar-lg">
|
|
<img class="avatar-img" src="../assets/img/320x320/img10.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="text-inherit mb-0">Mapping the first family tree for Front office</h5>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<a class="d-block" href="../blog-article.html">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar avatar-lg">
|
|
<img class="avatar-img" src="../assets/img/320x320/img9.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="text-inherit mb-0">Felling eyeing first major Classic win in 2018</h5>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-7">
|
|
<div class="mb-3">
|
|
<h3>Tags</h3>
|
|
</div>
|
|
|
|
<a class="btn btn-soft-secondary btn-xs mb-1" href="#">Business</a>
|
|
<a class="btn btn-soft-secondary btn-xs mb-1" href="#">Adventure</a>
|
|
<a class="btn btn-soft-secondary btn-xs mb-1" href="#">Community</a>
|
|
<a class="btn btn-soft-secondary btn-xs mb-1" href="#">Announcements</a>
|
|
<a class="btn btn-soft-secondary btn-xs mb-1" href="#">Tutorials</a>
|
|
<a class="btn btn-soft-secondary btn-xs mb-1" href="#">Resources</a>
|
|
<a class="btn btn-soft-secondary btn-xs mb-1" href="#">Classic</a>
|
|
<a class="btn btn-soft-secondary btn-xs mb-1" href="#">Photography</a>
|
|
<a class="btn btn-soft-secondary btn-xs mb-1" href="#">Interview</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<!-- Sticky Block End Point -->
|
|
<div id="stickyBlockEndPoint"></div>
|
|
</div>
|
|
<!-- End Card Grid -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html1" role="tabpanel" aria-labelledby="nav-htmlTab1">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Card Grid -->
|
|
<div class="container content-space-2 content-space-lg-3">
|
|
<div class="row justify-content-lg-between">
|
|
<div class="col-lg-3">
|
|
<div class="mb-7">
|
|
<div class="mb-3">
|
|
<h3>Newsletter</h3>
|
|
</div>
|
|
|
|
<!-- Form -->
|
|
<form>
|
|
<div class="mb-2">
|
|
<input type="text" class="form-control" placeholder="Enter email" aria-label="Enter email">
|
|
</div>
|
|
<div class="d-grid">
|
|
<button type="button" class="btn btn-primary">Subscribe</button>
|
|
</div>
|
|
</form>
|
|
<!-- End Form -->
|
|
|
|
<p class="form-text">Get special offers on the latest developments from Front.</p>
|
|
</div>
|
|
|
|
<div class="mb-7">
|
|
<div class="mb-3">
|
|
<h3>Productivity</h3>
|
|
</div>
|
|
|
|
<!-- List Group -->
|
|
<ul class="list-group list-group-lg">
|
|
<!-- Item -->
|
|
<li class="list-group-item">
|
|
<a href="#">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h5 class="mb-1">Here's how to dodge distractions</h5>
|
|
<p class="text-body small mb-0">Feb 08, 2020</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<i class="bi-chevron-right"></i>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</a>
|
|
</li>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<li class="list-group-item">
|
|
<a href="#">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h5 class="mb-1">Ideas to stay productive</h5>
|
|
<p class="text-body small mb-0">Feb 09, 2020</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<i class="bi-chevron-right"></i>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</a>
|
|
</li>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<li class="list-group-item">
|
|
<a href="#">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h5 class="mb-1">Classic design principles</h5>
|
|
<p class="text-body small mb-0">Feb 10, 2020</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<i class="bi-chevron-right"></i>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</a>
|
|
</li>
|
|
<!-- End Item -->
|
|
</ul>
|
|
<!-- End List Group -->
|
|
</div>
|
|
|
|
<!-- Sticky Block Start Point -->
|
|
<div id="stickyBlockStartPointEg5"></div>
|
|
|
|
<div class="js-sticky-block"
|
|
data-hs-sticky-block-options='{
|
|
"parentSelector": "#stickyBlockStartPointEg5",
|
|
"targetSelector": "#header",
|
|
"breakpoint": "md",
|
|
"startPoint": "#stickyBlockStartPointEg5",
|
|
"endPoint": "#stickyBlockEndPoint",
|
|
"stickyOffsetTop": 80
|
|
}'>
|
|
<div class="mb-7">
|
|
<div class="mb-3">
|
|
<h3>Front culture</h3>
|
|
</div>
|
|
|
|
<div class="d-grid gap-2">
|
|
<!-- Card -->
|
|
<a class="d-block" href="../blog-article.html">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar avatar-lg">
|
|
<img class="avatar-img" src="../assets/img/320x320/img1.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="text-inherit mb-0">Announcing a free plan for small teams</h5>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<a class="d-block" href="../blog-article.html">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar avatar-lg">
|
|
<img class="avatar-img" src="../assets/img/320x320/img10.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="text-inherit mb-0">Mapping the first family tree for Front office</h5>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<a class="d-block" href="../blog-article.html">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar avatar-lg">
|
|
<img class="avatar-img" src="../assets/img/320x320/img9.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="text-inherit mb-0">Felling eyeing first major Classic win in 2018</h5>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-7">
|
|
<div class="mb-3">
|
|
<h3>Tags</h3>
|
|
</div>
|
|
|
|
<a class="btn btn-soft-secondary btn-xs mb-1" href="#">Business</a>
|
|
<a class="btn btn-soft-secondary btn-xs mb-1" href="#">Adventure</a>
|
|
<a class="btn btn-soft-secondary btn-xs mb-1" href="#">Community</a>
|
|
<a class="btn btn-soft-secondary btn-xs mb-1" href="#">Announcements</a>
|
|
<a class="btn btn-soft-secondary btn-xs mb-1" href="#">Tutorials</a>
|
|
<a class="btn btn-soft-secondary btn-xs mb-1" href="#">Resources</a>
|
|
<a class="btn btn-soft-secondary btn-xs mb-1" href="#">Classic</a>
|
|
<a class="btn btn-soft-secondary btn-xs mb-1" href="#">Photography</a>
|
|
<a class="btn btn-soft-secondary btn-xs mb-1" href="#">Interview</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<!-- Sticky Block End Point -->
|
|
<div id="stickyBlockEndPoint"></div>
|
|
</div>
|
|
<!-- End Card Grid -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-js1" role="tabpanel" aria-labelledby="nav-jsTab1">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- JS Implementing Plugins -->
|
|
<script src="../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 -->
|
|
|
|
<!-- 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">
|
|
<!-- Content Section -->
|
|
<div class="container content-space-1">
|
|
<div class="row">
|
|
<div class="col-lg-3">
|
|
<!-- Navbar -->
|
|
<div class="navbar-expand-lg navbar-light">
|
|
<div id="sidebarNav" class="collapse navbar-collapse navbar-vertical">
|
|
<!-- Card -->
|
|
<div class="card flex-grow-1 mb-5">
|
|
<div class="card-body">
|
|
<!-- Avatar -->
|
|
<div class="d-none d-lg-block text-center mb-5">
|
|
<div class="avatar avatar-xxl avatar-circle mb-3">
|
|
<img class="avatar-img" src="../assets/img/160x160/img9.jpg" alt="Image Description">
|
|
<img class="avatar-status avatar-lg-status" src="../assets/svg/illustrations/top-vendor.svg" alt="Image Description" data-bs-toggle="tooltip" data-bs-placement="top" title="Verified user">
|
|
</div>
|
|
|
|
<h4 class="card-title mb-0">Natalie Curtis</h4>
|
|
<p class="card-text small">natalie@example.com</p>
|
|
</div>
|
|
<!-- End Avatar -->
|
|
|
|
<!-- Nav -->
|
|
<span class="text-cap">Account</span>
|
|
|
|
<!-- List -->
|
|
<ul class="nav nav-sm nav-tabs nav-vertical mb-4">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="../account-overview.html">
|
|
<i class="bi-person-badge nav-icon"></i> Personal info
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../account-security.html">
|
|
<i class="bi-shield-shaded nav-icon"></i> Security
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../account-notifications.html">
|
|
<i class="bi-bell nav-icon"></i> Notifications
|
|
<span class="badge bg-soft-dark text-dark rounded-pill nav-link-badge">1</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../account-preferences.html">
|
|
<i class="bi-sliders nav-icon"></i> Preferences
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End List -->
|
|
|
|
<span class="text-cap">Shopping</span>
|
|
|
|
<!-- List -->
|
|
<ul class="nav nav-sm nav-tabs nav-vertical mb-4">
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../account-orders.html">
|
|
<i class="bi-basket nav-icon"></i> Your orders
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../account-wishlist.html">
|
|
<i class="bi-heart nav-icon"></i> Wishlist
|
|
<span class="badge bg-soft-dark text-dark rounded-pill nav-link-badge">2</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End List -->
|
|
|
|
<span class="text-cap">Billing</span>
|
|
|
|
<!-- List -->
|
|
<ul class="nav nav-sm nav-tabs nav-vertical">
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../account-payments.html">
|
|
<i class="bi-credit-card nav-icon"></i> Payments
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../account-address.html">
|
|
<i class="bi-geo-alt nav-icon"></i> Address
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../account-teams.html">
|
|
<i class="bi-people nav-icon"></i> Teams
|
|
<span class="badge bg-soft-dark text-dark rounded-pill nav-link-badge">+2 new users</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End List -->
|
|
|
|
<div class="d-lg-none">
|
|
<div class="dropdown-divider"></div>
|
|
|
|
<!-- List -->
|
|
<ul class="nav nav-sm nav-tabs nav-vertical">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">
|
|
<i class="bi-box-arrow-right nav-icon"></i> Log out
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End List -->
|
|
</div>
|
|
<!-- End Nav -->
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
</div>
|
|
<!-- End Navbar -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Content Section -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html2" role="tabpanel" aria-labelledby="nav-htmlTab2">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Content Section -->
|
|
<div class="container content-space-1">
|
|
<div class="row">
|
|
<div class="col-lg-3">
|
|
<!-- Navbar -->
|
|
<div class="navbar-expand-lg navbar-light">
|
|
<div id="sidebarNav" class="collapse navbar-collapse navbar-vertical">
|
|
<!-- Card -->
|
|
<div class="card flex-grow-1 mb-5">
|
|
<div class="card-body">
|
|
<!-- Avatar -->
|
|
<div class="d-none d-lg-block text-center mb-5">
|
|
<div class="avatar avatar-xxl avatar-circle mb-3">
|
|
<img class="avatar-img" src="../assets/img/160x160/img9.jpg" alt="Image Description">
|
|
<img class="avatar-status avatar-lg-status" src="../assets/svg/illustrations/top-vendor.svg" alt="Image Description" data-bs-toggle="tooltip" data-bs-placement="top" title="Verified user">
|
|
</div>
|
|
|
|
<h4 class="card-title mb-0">Natalie Curtis</h4>
|
|
<p class="card-text small">natalie@example.com</p>
|
|
</div>
|
|
<!-- End Avatar -->
|
|
|
|
<!-- Nav -->
|
|
<span class="text-cap">Account</span>
|
|
|
|
<!-- List -->
|
|
<ul class="nav nav-sm nav-tabs nav-vertical mb-4">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="../account-overview.html">
|
|
<i class="bi-person-badge nav-icon"></i> Personal info
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../account-security.html">
|
|
<i class="bi-shield-shaded nav-icon"></i> Security
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../account-notifications.html">
|
|
<i class="bi-bell nav-icon"></i> Notifications
|
|
<span class="badge bg-soft-dark text-dark rounded-pill nav-link-badge">1</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../account-preferences.html">
|
|
<i class="bi-sliders nav-icon"></i> Preferences
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End List -->
|
|
|
|
<span class="text-cap">Shopping</span>
|
|
|
|
<!-- List -->
|
|
<ul class="nav nav-sm nav-tabs nav-vertical mb-4">
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../account-orders.html">
|
|
<i class="bi-basket nav-icon"></i> Your orders
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../account-wishlist.html">
|
|
<i class="bi-heart nav-icon"></i> Wishlist
|
|
<span class="badge bg-soft-dark text-dark rounded-pill nav-link-badge">2</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End List -->
|
|
|
|
<span class="text-cap">Billing</span>
|
|
|
|
<!-- List -->
|
|
<ul class="nav nav-sm nav-tabs nav-vertical">
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../account-payments.html">
|
|
<i class="bi-credit-card nav-icon"></i> Payments
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../account-address.html">
|
|
<i class="bi-geo-alt nav-icon"></i> Address
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../account-teams.html">
|
|
<i class="bi-people nav-icon"></i> Teams
|
|
<span class="badge bg-soft-dark text-dark rounded-pill nav-link-badge">+2 new users</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End List -->
|
|
|
|
<div class="d-lg-none">
|
|
<div class="dropdown-divider"></div>
|
|
|
|
<!-- List -->
|
|
<ul class="nav nav-sm nav-tabs nav-vertical">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">
|
|
<i class="bi-box-arrow-right nav-icon"></i> Log out
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End List -->
|
|
</div>
|
|
<!-- End Nav -->
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
</div>
|
|
<!-- End Navbar -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Content Section -->
|
|
</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">
|
|
<!-- Card Grid -->
|
|
<div class="container content-space-1">
|
|
<div class="row col-lg-divider">
|
|
<div class="col-lg-3">
|
|
<!-- Navbar -->
|
|
<div class="navbar-expand-lg">
|
|
<!-- Navbar Toggle -->
|
|
<div class="d-grid">
|
|
<button type="button" class="navbar-toggler btn btn-white mb-3" data-bs-toggle="collapse" data-bs-target="#navbarVerticalNavMenuEg1" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarVerticalNavMenuEg1">
|
|
<span class="d-flex justify-content-between align-items-center">
|
|
<span class="text-dark">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>
|
|
</div>
|
|
<!-- End Navbar Toggle -->
|
|
|
|
<!-- Navbar Collapse -->
|
|
<div id="navbarVerticalNavMenuEg1" class="collapse navbar-collapse">
|
|
<div class="d-grid gap-4 flex-grow-1">
|
|
<div class="d-grid">
|
|
<h5 class="dropdown-header">Explore</h5>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">All <span class="badge text-dark border rounded-pill">30+</span></a>
|
|
<a class="dropdown-item" href="#">Top rated</a>
|
|
<a class="dropdown-item" href="#">Featured</a>
|
|
<a class="dropdown-item" href="#">Daily tools</a>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">New <span class="badge text-dark border rounded-pill">18</span></a>
|
|
<a class="dropdown-item" href="#">Channels</a>
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<h5 class="dropdown-header">Categories</h5>
|
|
<a class="dropdown-item" href="#">API management</a>
|
|
<a class="dropdown-item" href="#">Code quality</a>
|
|
<a class="dropdown-item" href="#">Code review</a>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">Integration <span class="badge text-dark border rounded-pill">4</span></a>
|
|
<a class="dropdown-item" href="#">File management</a>
|
|
<a class="dropdown-item" href="#">Mobile</a>
|
|
<a class="dropdown-item" href="#">Monitoring</a>
|
|
<a class="dropdown-item" href="#">Publishing</a>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">Security <span class="badge text-dark border rounded-pill">20</span></a>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">File management <span class="badge text-dark border rounded-pill">1</span></a>
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<h5 class="dropdown-header">Filters</h5>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">Free <span class="badge text-dark border rounded-pill">9+</span></a>
|
|
<a class="dropdown-item" href="#">Free trial</a>
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<h5 class="dropdown-header">Verification</h5>
|
|
<a class="dropdown-item" href="#">Verified</a>
|
|
<a class="dropdown-item" href="#">Unverified</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Navbar Collapse -->
|
|
</div>
|
|
<!-- End Navbar -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-9">
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Card Grid -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html3" role="tabpanel" aria-labelledby="nav-htmlTab3">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Card Grid -->
|
|
<div class="container content-space-2 content-space-lg-3">
|
|
<div class="row col-lg-divider">
|
|
<div class="col-lg-3">
|
|
<!-- Navbar -->
|
|
<div class="navbar-expand-lg">
|
|
<!-- Navbar Toggle -->
|
|
<div class="d-grid">
|
|
<button type="button" class="navbar-toggler btn btn-white mb-3" data-bs-toggle="collapse" data-bs-target="#navbarVerticalNavMenuEg1" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarVerticalNavMenuEg1">
|
|
<span class="d-flex justify-content-between align-items-center">
|
|
<span class="text-dark">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>
|
|
</div>
|
|
<!-- End Navbar Toggle -->
|
|
|
|
<!-- Navbar Collapse -->
|
|
<div id="navbarVerticalNavMenuEg1" class="collapse navbar-collapse">
|
|
<div class="d-grid gap-4 flex-grow-1">
|
|
<div class="d-grid">
|
|
<h5 class="dropdown-header">Explore</h5>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">All <span class="badge text-dark border rounded-pill">30+</span></a>
|
|
<a class="dropdown-item" href="#">Top rated</a>
|
|
<a class="dropdown-item" href="#">Featured</a>
|
|
<a class="dropdown-item" href="#">Daily tools</a>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">New <span class="badge text-dark border rounded-pill">18</span></a>
|
|
<a class="dropdown-item" href="#">Channels</a>
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<h5 class="dropdown-header">Categories</h5>
|
|
<a class="dropdown-item" href="#">API management</a>
|
|
<a class="dropdown-item" href="#">Code quality</a>
|
|
<a class="dropdown-item" href="#">Code review</a>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">Integration <span class="badge text-dark border rounded-pill">4</span></a>
|
|
<a class="dropdown-item" href="#">File management</a>
|
|
<a class="dropdown-item" href="#">Mobile</a>
|
|
<a class="dropdown-item" href="#">Monitoring</a>
|
|
<a class="dropdown-item" href="#">Publishing</a>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">Security <span class="badge text-dark border rounded-pill">20</span></a>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">File management <span class="badge text-dark border rounded-pill">1</span></a>
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<h5 class="dropdown-header">Filters</h5>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">Free <span class="badge text-dark border rounded-pill">9+</span></a>
|
|
<a class="dropdown-item" href="#">Free trial</a>
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<h5 class="dropdown-header">Verification</h5>
|
|
<a class="dropdown-item" href="#">Verified</a>
|
|
<a class="dropdown-item" href="#">Unverified</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Navbar Collapse -->
|
|
</div>
|
|
<!-- End Navbar -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-9">
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Card Grid -->
|
|
</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>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-jsTab4" href="#nav-js4" data-bs-toggle="pill" data-bs-target="#nav-js4" role="tab" aria-controls="nav-js4" aria-selected="false">JS</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">
|
|
<!-- Content -->
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-5 col-lg-4">
|
|
<!-- Sticky Block -->
|
|
<div id="stickyBlockStartPointEg1">
|
|
<div class="js-sticky-block"
|
|
data-hs-sticky-block-options='{
|
|
"parentSelector": "#stickyBlockStartPointEg1",
|
|
"breakpoint": "md",
|
|
"startPoint": "#stickyBlockStartPointEg1",
|
|
"endPoint": "#stickyBlockEndPoint",
|
|
"stickyOffsetTop": 12,
|
|
"stickyOffsetBottom": 12
|
|
}'>
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<!-- Card Header -->
|
|
<div class="card-header text-center">
|
|
<div class="mb-3">
|
|
<img class="avatar avatar-xxl avatar-circle avatar-centered" src="../assets/img/160x160/img10.jpg" alt="Image Description">
|
|
</div>
|
|
|
|
<span class="d-block text-body small mb-3">Joined in 2017</span>
|
|
|
|
<a class="btn btn-outline-primary btn-transition" href="#">
|
|
<i class="bi-envelope me-2"></i> Send Message
|
|
</a>
|
|
</div>
|
|
<!-- End Card Header -->
|
|
|
|
<!-- Card Body -->
|
|
<div class="card-body">
|
|
<div class="row mb-7">
|
|
<div class="col-6 col-md-12 col-lg-6 mb-4">
|
|
<!-- Icon Block -->
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<span class="avatar avatar-xs">
|
|
<img class="avatar-img" src="../assets/svg/illustrations/review-rating-shield.svg" alt="Image Description">
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<span class="text-body small">533 Reviews</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Icon Block -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md-12 col-lg-6 mb-4">
|
|
<!-- Icon Block -->
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<span class="avatar avatar-xs">
|
|
<img class="avatar-img" src="../assets/svg/illustrations/star.svg" alt="Image Description">
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<span class="text-body small">4.87 rating</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Icon Block -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md-12 col-lg-6 mb-4 col-6 col-md-12 mb-lg-0">
|
|
<!-- Icon Block -->
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<span class="avatar avatar-xs">
|
|
<img class="avatar-img" src="../assets/svg/illustrations/medal.svg" alt="Image Description">
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<span class="text-body small">Top teacher</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Icon Block -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md-12 col-lg-6">
|
|
<!-- Icon Block -->
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<span class="avatar avatar-xs">
|
|
<img class="avatar-img" src="../assets/svg/illustrations/add-file.svg" alt="Image Description">
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<span class="text-body small">29 courses</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Icon Block -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="mb-4">
|
|
<h4>Connected accounts</h4>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-6 col-md-12 col-lg-6 mb-4">
|
|
<!-- Media -->
|
|
<a class="d-flex" href="#">
|
|
<div class="flex-shrink-0">
|
|
<div class="icon icon-xs icon-soft-secondary">
|
|
<i class="bi-github"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 mt-n1 ms-3">
|
|
<span class="d-block small fw-semi-bold">Behance</span>
|
|
<small class="d-block text-body">1.2k followers</small>
|
|
</div>
|
|
</a>
|
|
<!-- End Media -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md-12 col-lg-6 mb-4">
|
|
<!-- Media -->
|
|
<a class="d-flex" href="#">
|
|
<div class="flex-shrink-0">
|
|
<div class="icon icon-xs icon-soft-secondary">
|
|
<i class="bi-slack"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 mt-n1 ms-3">
|
|
<span class="d-block small fw-semi-bold">Slack</span>
|
|
<small class="d-block text-body">4.5k followers</small>
|
|
</div>
|
|
</a>
|
|
<!-- End Media -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md-12 col-lg-6 mb-0 mb-md-4 mb-lg-0">
|
|
<!-- Media -->
|
|
<a class="d-flex" href="#">
|
|
<div class="flex-shrink-0">
|
|
<div class="icon icon-xs icon-soft-secondary">
|
|
<i class="bi-twitter"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 mt-n1 ms-3">
|
|
<span class="d-block small fw-semi-bold">Twitter</span>
|
|
<small class="d-block text-body">2.7k followers</small>
|
|
</div>
|
|
</a>
|
|
<!-- End Media -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md-12 col-lg-6">
|
|
<!-- Media -->
|
|
<a class="d-flex" href="#">
|
|
<div class="flex-shrink-0">
|
|
<div class="icon icon-xs icon-soft-secondary">
|
|
<i class="bi-facebook"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 mt-n1 ms-3">
|
|
<span class="d-block small fw-semi-bold">Facebook</span>
|
|
<small class="d-block text-body">3k followers</small>
|
|
</div>
|
|
</a>
|
|
<!-- End Media -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Card Body -->
|
|
|
|
<a class="card-footer text-body small text-center" href="#">
|
|
<i class="bi-flag me-1"></i> Report this author
|
|
</a>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
</div>
|
|
<!-- End Sticky Block -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Content -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html4" role="tabpanel" aria-labelledby="nav-htmlTab4">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Content -->
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-5 col-lg-4">
|
|
<!-- Sticky Block -->
|
|
<div id="stickyBlockStartPointEg1">
|
|
<div class="js-sticky-block"
|
|
data-hs-sticky-block-options='{
|
|
"parentSelector": "#stickyBlockStartPointEg1",
|
|
"breakpoint": "md",
|
|
"startPoint": "#stickyBlockStartPointEg1",
|
|
"endPoint": "#stickyBlockEndPoint",
|
|
"stickyOffsetTop": 12,
|
|
"stickyOffsetBottom": 12
|
|
}'>
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<!-- Card Header -->
|
|
<div class="card-header text-center">
|
|
<div class="mb-3">
|
|
<img class="avatar avatar-xxl avatar-circle avatar-centered" src="../assets/img/160x160/img10.jpg" alt="Image Description">
|
|
</div>
|
|
|
|
<span class="d-block text-body small mb-3">Joined in 2017</span>
|
|
|
|
<a class="btn btn-outline-primary btn-transition" href="#">
|
|
<i class="bi-envelope me-2"></i> Send Message
|
|
</a>
|
|
</div>
|
|
<!-- End Card Header -->
|
|
|
|
<!-- Card Body -->
|
|
<div class="card-body">
|
|
<div class="row mb-7">
|
|
<div class="col-6 col-md-12 col-lg-6 mb-4">
|
|
<!-- Icon Block -->
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<span class="avatar avatar-xs">
|
|
<img class="avatar-img" src="../assets/svg/illustrations/review-rating-shield.svg" alt="Image Description">
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<span class="text-body small">533 Reviews</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Icon Block -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md-12 col-lg-6 mb-4">
|
|
<!-- Icon Block -->
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<span class="avatar avatar-xs">
|
|
<img class="avatar-img" src="../assets/svg/illustrations/star.svg" alt="Image Description">
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<span class="text-body small">4.87 rating</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Icon Block -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md-12 col-lg-6 mb-4 col-6 col-md-12 mb-lg-0">
|
|
<!-- Icon Block -->
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<span class="avatar avatar-xs">
|
|
<img class="avatar-img" src="../assets/svg/illustrations/medal.svg" alt="Image Description">
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<span class="text-body small">Top teacher</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Icon Block -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md-12 col-lg-6">
|
|
<!-- Icon Block -->
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<span class="avatar avatar-xs">
|
|
<img class="avatar-img" src="../assets/svg/illustrations/add-file.svg" alt="Image Description">
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<span class="text-body small">29 courses</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Icon Block -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="mb-4">
|
|
<h4>Connected accounts</h4>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-6 col-md-12 col-lg-6 mb-4">
|
|
<!-- Media -->
|
|
<a class="d-flex" href="#">
|
|
<div class="flex-shrink-0">
|
|
<div class="icon icon-xs icon-soft-secondary">
|
|
<i class="bi-github"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 mt-n1 ms-3">
|
|
<span class="d-block small fw-semi-bold">Behance</span>
|
|
<small class="d-block text-body">1.2k followers</small>
|
|
</div>
|
|
</a>
|
|
<!-- End Media -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md-12 col-lg-6 mb-4">
|
|
<!-- Media -->
|
|
<a class="d-flex" href="#">
|
|
<div class="flex-shrink-0">
|
|
<div class="icon icon-xs icon-soft-secondary">
|
|
<i class="bi-slack"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 mt-n1 ms-3">
|
|
<span class="d-block small fw-semi-bold">Slack</span>
|
|
<small class="d-block text-body">4.5k followers</small>
|
|
</div>
|
|
</a>
|
|
<!-- End Media -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md-12 col-lg-6 mb-0 mb-md-4 mb-lg-0">
|
|
<!-- Media -->
|
|
<a class="d-flex" href="#">
|
|
<div class="flex-shrink-0">
|
|
<div class="icon icon-xs icon-soft-secondary">
|
|
<i class="bi-twitter"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 mt-n1 ms-3">
|
|
<span class="d-block small fw-semi-bold">Twitter</span>
|
|
<small class="d-block text-body">2.7k followers</small>
|
|
</div>
|
|
</a>
|
|
<!-- End Media -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md-12 col-lg-6">
|
|
<!-- Media -->
|
|
<a class="d-flex" href="#">
|
|
<div class="flex-shrink-0">
|
|
<div class="icon icon-xs icon-soft-secondary">
|
|
<i class="bi-facebook"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 mt-n1 ms-3">
|
|
<span class="d-block small fw-semi-bold">Facebook</span>
|
|
<small class="d-block text-body">3k followers</small>
|
|
</div>
|
|
</a>
|
|
<!-- End Media -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Card Body -->
|
|
|
|
<a class="card-footer text-body small text-center" href="#">
|
|
<i class="bi-flag me-1"></i> Report this author
|
|
</a>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
</div>
|
|
<!-- End Sticky Block -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Content -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-js4" role="tabpanel" aria-labelledby="nav-jsTab4">
|
|
<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 -->
|
|
|
|
<!-- 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">
|
|
<!-- Sidebar -->
|
|
<div class="container content-space-1">
|
|
<div class="row">
|
|
<div class="col-lg-3 mb-5 mb-lg-0">
|
|
<!-- Navbar -->
|
|
<div class="navbar-expand-lg">
|
|
<!-- Navbar Toggle -->
|
|
<div class="d-grid">
|
|
<button type="button" class="navbar-toggler btn btn-white mb-3" data-bs-toggle="collapse" data-bs-target="#navbarVerticalNavMenuEg2" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarVerticalNavMenuEg2">
|
|
<span class="d-flex justify-content-between align-items-center">
|
|
<span class="text-dark">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>
|
|
</div>
|
|
<!-- End Navbar Toggle -->
|
|
|
|
<!-- Navbar Collapse -->
|
|
<div id="navbarVerticalNavMenuEg2" class="collapse navbar-collapse">
|
|
<div class="d-grid gap-4 flex-grow-1">
|
|
<div class="d-grid">
|
|
<h5 class="dropdown-header">Artificial Intelligence</h5>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">AI Product Manager <span class="badge text-dark border rounded-pill">30+</span></a>
|
|
<a class="dropdown-item" href="#">AI Programming with Python</a>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">Computer Vision <span class="badge bg-success rounded-pill">New</span></a>
|
|
<a class="dropdown-item" href="#">Deep Learning</a>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">Deep Reinforcement Learning <span class="badge text-dark border rounded-pill">18</span></a>
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<h5 class="dropdown-header">Data Science</h5>
|
|
<a class="dropdown-item" href="#">Business Analytics</a>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">Data Analyst <span class="badge bg-success rounded-pill">New</span></a>
|
|
<a class="dropdown-item" href="#">Data Engineer</a>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">Data Scientist <span class="badge text-dark border rounded-pill">4</span></a>
|
|
<a class="dropdown-item" href="#">Data Visualization</a>
|
|
<a class="dropdown-item" href="#">Predictive Analytics for Business</a>
|
|
<a class="dropdown-item" href="#">Programming for Data Science</a>
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<h5 class="dropdown-header">Programming and Development</h5>
|
|
<a class="dropdown-item" href="#">AI Programming with Python</a>
|
|
<a class="dropdown-item" href="#">Android Basics</a>
|
|
<a class="dropdown-item" href="#">Android Developer</a>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">Blockchain <span class="badge text-dark border rounded-pill">7</span></a>
|
|
<a class="dropdown-item" href="#">C++</a>
|
|
<a class="dropdown-item" href="#">Front End Web Developer</a>
|
|
<a class="dropdown-item" href="#">Java Developer</a>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">iOS <span class="badge bg-success rounded-pill">New</span></a>
|
|
<a class="dropdown-item" href="#">Intro to Programming</a>
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<h5 class="dropdown-header">Cloud Computing</h5>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">Cloud Developer <span class="badge text-dark border rounded-pill">9+</span></a>
|
|
<a class="dropdown-item" href="#">Cloud Dev Ops Engineer</a>
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<h5 class="dropdown-header">Business</h5>
|
|
<a class="dropdown-item" href="#">Business Analytics</a>
|
|
<a class="dropdown-item" href="#">Digital Marketing</a>
|
|
<a class="dropdown-item" href="#">Marketing Analytics</a>
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<h5 class="dropdown-header">Career</h5>
|
|
<a class="dropdown-item" href="#">Applying to Jobs</a>
|
|
<a class="dropdown-item" href="#">Interviewing</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Navbar Collapse -->
|
|
</div>
|
|
<!-- End Navbar -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Sidebar -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html5" role="tabpanel" aria-labelledby="nav-htmlTab5">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Sidebar Example -->
|
|
<div class="container content-space-2 content-space-lg-3">
|
|
<div class="row">
|
|
<div class="col-lg-3 mb-5 mb-lg-0">
|
|
<!-- Navbar -->
|
|
<div class="navbar-expand-lg">
|
|
<!-- Navbar Toggle -->
|
|
<div class="d-grid">
|
|
<button type="button" class="navbar-toggler btn btn-white mb-3" data-bs-toggle="collapse" data-bs-target="#navbarVerticalNavMenuEg2" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarVerticalNavMenuEg2">
|
|
<span class="d-flex justify-content-between align-items-center">
|
|
<span class="text-dark">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>
|
|
</div>
|
|
<!-- End Navbar Toggle -->
|
|
|
|
<!-- Navbar Collapse -->
|
|
<div id="navbarVerticalNavMenuEg2" class="collapse navbar-collapse">
|
|
<div class="d-grid gap-4 flex-grow-1">
|
|
<div class="d-grid">
|
|
<h5 class="dropdown-header">Artificial Intelligence</h5>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">AI Product Manager <span class="badge text-dark border rounded-pill">30+</span></a>
|
|
<a class="dropdown-item" href="#">AI Programming with Python</a>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">Computer Vision <span class="badge bg-success rounded-pill">New</span></a>
|
|
<a class="dropdown-item" href="#">Deep Learning</a>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">Deep Reinforcement Learning <span class="badge text-dark border rounded-pill">18</span></a>
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<h5 class="dropdown-header">Data Science</h5>
|
|
<a class="dropdown-item" href="#">Business Analytics</a>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">Data Analyst <span class="badge bg-success rounded-pill">New</span></a>
|
|
<a class="dropdown-item" href="#">Data Engineer</a>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">Data Scientist <span class="badge text-dark border rounded-pill">4</span></a>
|
|
<a class="dropdown-item" href="#">Data Visualization</a>
|
|
<a class="dropdown-item" href="#">Predictive Analytics for Business</a>
|
|
<a class="dropdown-item" href="#">Programming for Data Science</a>
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<h5 class="dropdown-header">Programming and Development</h5>
|
|
<a class="dropdown-item" href="#">AI Programming with Python</a>
|
|
<a class="dropdown-item" href="#">Android Basics</a>
|
|
<a class="dropdown-item" href="#">Android Developer</a>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">Blockchain <span class="badge text-dark border rounded-pill">7</span></a>
|
|
<a class="dropdown-item" href="#">C++</a>
|
|
<a class="dropdown-item" href="#">Front End Web Developer</a>
|
|
<a class="dropdown-item" href="#">Java Developer</a>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">iOS <span class="badge bg-success rounded-pill">New</span></a>
|
|
<a class="dropdown-item" href="#">Intro to Programming</a>
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<h5 class="dropdown-header">Cloud Computing</h5>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">Cloud Developer <span class="badge text-dark border rounded-pill">9+</span></a>
|
|
<a class="dropdown-item" href="#">Cloud Dev Ops Engineer</a>
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<h5 class="dropdown-header">Business</h5>
|
|
<a class="dropdown-item" href="#">Business Analytics</a>
|
|
<a class="dropdown-item" href="#">Digital Marketing</a>
|
|
<a class="dropdown-item" href="#">Marketing Analytics</a>
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<h5 class="dropdown-header">Career</h5>
|
|
<a class="dropdown-item" href="#">Applying to Jobs</a>
|
|
<a class="dropdown-item" href="#">Interviewing</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Navbar Collapse -->
|
|
</div>
|
|
<!-- End Navbar -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Sidebar Example -->
|
|
</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>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-jsTab6" href="#nav-js6" data-bs-toggle="pill" data-bs-target="#nav-js6" role="tab" aria-controls="nav-js6" aria-selected="false">JS</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">
|
|
<div class="position-relative">
|
|
<!-- Sidebar -->
|
|
<div class="container">
|
|
<div class="row justify-content-end">
|
|
<div class="col-md-5 col-lg-4 position-relative zi-2 mb-7 mb-md-0">
|
|
<!-- Sticky Block -->
|
|
<div id="stickyBlockStartPointEg4">
|
|
<div>
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<div class="p-1">
|
|
<!-- Fancybox -->
|
|
<div class="bg-img-start text-center rounded-2 py-10 px-5" style="background-image: url(../assets/svg/components/card-4.svg);">
|
|
<a class="video-player video-player-btn" href="https://www.youtube.com/watch?v=d4eDWc8g0e0" role="button" data-fslightbox="youtube-video">
|
|
<span class="d-flex justify-content-center align-items-center">
|
|
<span class="video-player-icon shadow-sm">
|
|
<i class="bi-play-fill"></i>
|
|
</span>
|
|
</span>
|
|
<span class="text-white">Preview this course</span>
|
|
</a>
|
|
</div>
|
|
<!-- End Fancybox -->
|
|
</div>
|
|
|
|
<!-- Card Body -->
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<span class="card-title h2">$99.99</span>
|
|
<span class="text-muted"><del>$114.99</del></span>
|
|
</div>
|
|
|
|
<div class="d-grid mb-2">
|
|
<a class="btn btn-primary btn-transition" href="#">Buy now</a>
|
|
</div>
|
|
|
|
<div class="text-center mb-4">
|
|
<p class="card-text small">30-day money-back guarantee</p>
|
|
</div>
|
|
|
|
<h4 class="card-title">This course includes</h4>
|
|
|
|
<ul class="list-unstyled list-py-1">
|
|
<li><i class="bi-camera-video nav-icon"></i> 46.5 hours on-demand video</li>
|
|
<li><i class="bi-file-text nav-icon"></i> 77 articles</li>
|
|
<li><i class="bi-file-earmark-arrow-down nav-icon"></i> 85 downloadable resources</li>
|
|
<li><i class="bi-stopwatch nav-icon"></i> Full time access</li>
|
|
<li><i class="bi-phone nav-icon"></i> Access on mobile and Tablet</li>
|
|
<li><i class="bi-award nav-icon"></i> Certificate of Completion</li>
|
|
</ul>
|
|
</div>
|
|
<!-- End Card Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
</div>
|
|
<!-- End Sticky Block -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Sidebar -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html6" role="tabpanel" aria-labelledby="nav-htmlTab6">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<div class="position-relative">
|
|
<!-- Sidebar -->
|
|
<div class="container content-space-t-md-2 position-md-absolute top-0 start-0 end-0">
|
|
<div class="row justify-content-end">
|
|
<div class="col-md-5 col-lg-4 position-relative zi-2 mb-7 mb-md-0">
|
|
<!-- Sticky Block -->
|
|
<div id="stickyBlockStartPointEg4">
|
|
<div class="js-sticky-block"
|
|
data-hs-sticky-block-options='{
|
|
"parentSelector": "#stickyBlockStartPointEg4",
|
|
"breakpoint": "md",
|
|
"startPoint": "#stickyBlockStartPointEg4",
|
|
"endPoint": "#stickyBlockEndPoint",
|
|
"stickyOffsetTop": 12,
|
|
"stickyOffsetBottom": 12
|
|
}'>
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<div class="p-1">
|
|
<!-- Fancybox -->
|
|
<div class="bg-img-start text-center rounded-2 py-10 px-5" style="background-image: url(../assets/svg/components/card-4.svg);">
|
|
<a class="video-player video-player-btn" href="https://www.youtube.com/watch?v=d4eDWc8g0e0" role="button" data-fslightbox="youtube-video">
|
|
<span class="d-flex justify-content-center align-items-center">
|
|
<span class="video-player-icon shadow-sm">
|
|
<i class="bi-play-fill"></i>
|
|
</span>
|
|
</span>
|
|
<span class="text-white">Preview this course</span>
|
|
</a>
|
|
</div>
|
|
<!-- End Fancybox -->
|
|
</div>
|
|
|
|
<!-- Card Body -->
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<span class="card-title h2">$99.99</span>
|
|
<span class="text-muted"><del>$114.99</del></span>
|
|
</div>
|
|
|
|
<div class="d-grid mb-2">
|
|
<a class="btn btn-primary btn-transition" href="#">Buy now</a>
|
|
</div>
|
|
|
|
<div class="text-center mb-4">
|
|
<p class="card-text small">30-day money-back guarantee</p>
|
|
</div>
|
|
|
|
<h4 class="card-title">This course includes</h4>
|
|
|
|
<ul class="list-unstyled list-py-1">
|
|
<li><i class="bi-camera-video nav-icon"></i> 46.5 hours on-demand video</li>
|
|
<li><i class="bi-file-text nav-icon"></i> 77 articles</li>
|
|
<li><i class="bi-file-earmark-arrow-down nav-icon"></i> 85 downloadable resources</li>
|
|
<li><i class="bi-stopwatch nav-icon"></i> Full time access</li>
|
|
<li><i class="bi-phone nav-icon"></i> Access on mobile and Tablet</li>
|
|
<li><i class="bi-award nav-icon"></i> Certificate of Completion</li>
|
|
</ul>
|
|
</div>
|
|
<!-- End Card Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
</div>
|
|
<!-- End Sticky Block -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Sidebar -->
|
|
</div>
|
|
|
|
<!-- Sticky Block End Point -->
|
|
<div id="stickyBlockEndPoint"></div>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-js6" role="tabpanel" aria-labelledby="nav-jsTab6">
|
|
<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 -->
|
|
|
|
<!-- 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">
|
|
<!-- Categories Section -->
|
|
<div class="container content-space-1">
|
|
<div class="row">
|
|
<div class="col-lg-3 mb-5 mb-lg-0">
|
|
<!-- Navbar -->
|
|
<div class="navbar-expand-lg">
|
|
<!-- Navbar Toggle -->
|
|
<div class="d-grid">
|
|
<button type="button" class="navbar-toggler btn btn-white mb-3" data-bs-toggle="collapse" data-bs-target="#navbarVerticalNavMenuEg3" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarVerticalNavMenuEg3">
|
|
<span class="d-flex justify-content-between align-items-center">
|
|
<span class="text-dark">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>
|
|
</div>
|
|
<!-- End Navbar Toggle -->
|
|
|
|
<!-- Navbar Collapse -->
|
|
<div id="navbarVerticalNavMenuEg3" class="collapse navbar-collapse">
|
|
<div id="shopNavCategories" class="nav nav-pills nav-vertical">
|
|
<!-- Collapse -->
|
|
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCategoriesTwo" aria-expanded="true" aria-controls="shopCategoriesTwo">
|
|
<i class="bi-tv nav-icon"></i> TV & home appliances
|
|
</a>
|
|
|
|
<div id="shopCategoriesTwo" class="nav-collapse collapse show" data-bs-parent="#shopNavCategories">
|
|
<div id="shopNavCategoriesTwo">
|
|
<!-- Collapse -->
|
|
<a class="nav-link dropdown-toggle collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCategoriesTwoSubOne" aria-expanded="true" aria-controls="shopCategoriesTwoSubOne">
|
|
TV & video devices
|
|
</a>
|
|
|
|
<div id="shopCategoriesTwoSubOne" class="nav-collapse collapse show" data-bs-parent="#shopNavCategoriesTwo">
|
|
<a class="nav-link active" href="#">Accessories</a>
|
|
<a class="nav-link" href="#">Kitchen</a>
|
|
<a class="nav-link" href="#">Living room</a>
|
|
</div>
|
|
<!-- End Collapse -->
|
|
|
|
<a class="nav-link" href="#">Cooling & air treatment</a>
|
|
<a class="nav-link" href="#">Vacuums & floor care</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Collapse -->
|
|
|
|
<!-- Collapse -->
|
|
<a class="nav-link dropdown-toggle collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCategoriesOne" aria-expanded="false" aria-controls="shopCategoriesOne">
|
|
<i class="bi-display nav-icon"></i> Electronic devices
|
|
</a>
|
|
|
|
<div id="shopCategoriesOne" class="nav-collapse collapse" data-bs-parent="#shopNavCategories">
|
|
<div id="shopNavCategoriesOne">
|
|
<!-- Collapse -->
|
|
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCategoriesOneSubOne" aria-expanded="false" aria-controls="shopCategoriesOneSubOne">
|
|
Electronic accessories
|
|
</a>
|
|
|
|
<div id="shopCategoriesOneSubOne" class="nav-collapse collapse" data-bs-parent="#shopNavCategoriesOne">
|
|
<a class="nav-link" href="#">Mobile accessories</a>
|
|
<a class="nav-link" href="#">Portable audio</a>
|
|
<a class="nav-link" href="#">Wearable</a>
|
|
<a class="nav-link" href="#">Console accessories</a>
|
|
<a class="nav-link" href="#">Camera accessories</a>
|
|
<a class="nav-link" href="#">Computer accessories</a>
|
|
<a class="nav-link" href="#">Storage</a>
|
|
<a class="nav-link" href="#">Printers</a>
|
|
<a class="nav-link" href="#">Computer components</a>
|
|
</div>
|
|
<!-- End Collapse -->
|
|
|
|
<a class="nav-link" href="#">Mobiles</a>
|
|
<a class="nav-link" href="#">Tablets</a>
|
|
<a class="nav-link" href="#">Laptops</a>
|
|
<a class="nav-link" href="#">Desktops</a>
|
|
<a class="nav-link" href="#">Gaming consoles</a>
|
|
<a class="nav-link" href="#">Car cameras</a>
|
|
<a class="nav-link" href="#">Security cameras</a>
|
|
<a class="nav-link" href="#">Digital cameras</a>
|
|
<a class="nav-link" href="#">Gadgets</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Collapse -->
|
|
|
|
<a class="nav-link" href="#">
|
|
<i class="bi-shop nav-icon"></i> Clothing
|
|
</a>
|
|
|
|
<!-- Collapse -->
|
|
<a class="nav-link dropdown-toggle collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCategoriesThree" aria-expanded="false" aria-controls="shopCategoriesThree">
|
|
<i class="bi-heart nav-icon"></i> Health & beauty
|
|
</a>
|
|
|
|
<div id="shopCategoriesThree" class="nav-collapse collapse" data-bs-parent="#shopNavCategories">
|
|
<div id="shopNavCategoriesThree">
|
|
<a class="nav-link" href="#">Food supplements</a>
|
|
<a class="nav-link" href="#">Skincare</a>
|
|
<a class="nav-link" href="#">Makeup</a>
|
|
|
|
<!-- Collapse -->
|
|
<a class="nav-link dropdown-toggle collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCategoriesThreeSubOne" aria-expanded="false" aria-controls="shopCategoriesThreeSubOne">
|
|
Beauty tools
|
|
</a>
|
|
|
|
<div id="shopCategoriesThreeSubOne" class="nav-collapse collapse" data-bs-parent="#shopNavCategoriesThree">
|
|
<a class="nav-link" href="#">Men</a>
|
|
<a class="nav-link" href="#">Women</a>
|
|
</div>
|
|
<!-- End Collapse -->
|
|
|
|
<!-- Collapse -->
|
|
<a class="nav-link dropdown-toggle collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCategoriesThreeSubTwo" aria-expanded="false" aria-controls="shopCategoriesThreeSubTwo">
|
|
Medical supplies
|
|
</a>
|
|
|
|
<div id="shopCategoriesThreeSubTwo" class="nav-collapse collapse" data-bs-parent="#shopNavCategoriesThree">
|
|
<a class="nav-link" href="#">Men</a>
|
|
<a class="nav-link" href="#">Women</a>
|
|
</div>
|
|
<!-- End Collapse -->
|
|
</div>
|
|
</div>
|
|
<!-- End Collapse -->
|
|
|
|
<a class="nav-link" href="#">
|
|
<i class="bi-earbuds nav-icon"></i> Accessories
|
|
</a>
|
|
|
|
<a class="nav-link" href="#">
|
|
<i class="bi-speaker-fill nav-icon"></i> Sound System
|
|
</a>
|
|
|
|
<a class="nav-link" href="#">
|
|
<i class="bi-smartwatch nav-icon"></i> Smartwatch
|
|
</a>
|
|
|
|
<!-- Collapse -->
|
|
<a class="nav-link dropdown-toggle collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCategoriesFour" aria-expanded="false" aria-controls="shopCategoriesFour">
|
|
<i class="bi-piggy-bank nav-icon"></i> Babies & toys
|
|
</a>
|
|
|
|
<div id="shopCategoriesFour" class="nav-collapse collapse" data-bs-parent="#shopNavCategories">
|
|
<div id="shopNavCategoriesFour">
|
|
<!-- Collapse -->
|
|
<a class="nav-link dropdown-toggle collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCategoriesFourSubOne" aria-expanded="false" aria-controls="shopCategoriesFourSubOne">
|
|
Foods
|
|
</a>
|
|
|
|
<div id="shopCategoriesFourSubOne" class="nav-collapse collapse" data-bs-parent="#shopNavCategoriesFour">
|
|
<a class="nav-link" href="#">Feeding</a>
|
|
<a class="nav-link" href="#">Milk formula</a>
|
|
</div>
|
|
<!-- End Collapse -->
|
|
|
|
<a class="nav-link" href="#">Diapering & potty</a>
|
|
<a class="nav-link" href="#">Nursery</a>
|
|
<a class="nav-link" href="#">Baby personal care</a>
|
|
<a class="nav-link" href="#">Clothing & accessories</a>
|
|
<a class="nav-link" href="#">Baby and & toys</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Collapse -->
|
|
|
|
<a class="nav-link" href="#">
|
|
<i class="bi-tools nav-icon"></i> Tools
|
|
</a>
|
|
|
|
<a class="nav-link" href="#">
|
|
<i class="bi-eyeglasses nav-icon"></i> Glasses
|
|
</a>
|
|
|
|
<!-- Collapse -->
|
|
<a class="nav-link dropdown-toggle collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCategoriesFive" aria-expanded="false" aria-controls="shopCategoriesFive">
|
|
<i class="bi-truck nav-icon"></i> Automotive & motorcycles
|
|
</a>
|
|
|
|
<div id="shopCategoriesFive" class="nav-collapse collapse" data-bs-parent="#shopNavCategories">
|
|
<!-- Collapse -->
|
|
<a class="nav-link dropdown-toggle collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCategoriesFiveSubOne" aria-expanded="false" aria-controls="shopCategoriesFiveSubOne">
|
|
Automotive
|
|
</a>
|
|
|
|
<div id="shopCategoriesFiveSubOne" class="nav-collapse collapse" data-bs-parent="#shopNavCategoriesFour">
|
|
<a class="nav-link" href="#">Services & installations</a>
|
|
<a class="nav-link" href="#">Auto oils & fluids</a>
|
|
</div>
|
|
<!-- End Collapse -->
|
|
|
|
<a class="nav-link" href="#">Interior accessories</a>
|
|
<a class="nav-link" href="#">Exterior accessories</a>
|
|
<a class="nav-link" href="#">Car audio</a>
|
|
<a class="nav-link" href="#">Auto care</a>
|
|
<a class="nav-link" href="#">Riding gear</a>
|
|
</div>
|
|
<!-- End Collapse -->
|
|
</div>
|
|
</div>
|
|
<!-- End Navbar Collapse -->
|
|
</div>
|
|
<!-- End Navbar -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Categories Section -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html7" role="tabpanel" aria-labelledby="nav-htmlTab7">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Categories Section -->
|
|
<div class="container content-space-2 content-space-lg-3">
|
|
<div class="row">
|
|
<div class="col-lg-3 mb-5 mb-lg-0">
|
|
<!-- Navbar -->
|
|
<div class="navbar-expand-lg">
|
|
<!-- Navbar Toggle -->
|
|
<div class="d-grid">
|
|
<button type="button" class="navbar-toggler btn btn-white mb-3" data-bs-toggle="collapse" data-bs-target="#navbarVerticalNavMenuEg3" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarVerticalNavMenuEg3">
|
|
<span class="d-flex justify-content-between align-items-center">
|
|
<span class="text-dark">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>
|
|
</div>
|
|
<!-- End Navbar Toggle -->
|
|
|
|
<!-- Navbar Collapse -->
|
|
<div id="navbarVerticalNavMenuEg3" class="collapse navbar-collapse">
|
|
<div id="shopNavCategories" class="nav nav-pills nav-vertical">
|
|
<!-- Collapse -->
|
|
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCategoriesTwo" aria-expanded="true" aria-controls="shopCategoriesTwo">
|
|
<i class="bi-tv nav-icon"></i> TV & home appliances
|
|
</a>
|
|
|
|
<div id="shopCategoriesTwo" class="nav-collapse collapse show" data-bs-parent="#shopNavCategories">
|
|
<div id="shopNavCategoriesTwo">
|
|
<!-- Collapse -->
|
|
<a class="nav-link dropdown-toggle collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCategoriesTwoSubOne" aria-expanded="true" aria-controls="shopCategoriesTwoSubOne">
|
|
TV & video devices
|
|
</a>
|
|
|
|
<div id="shopCategoriesTwoSubOne" class="nav-collapse collapse show" data-bs-parent="#shopNavCategoriesTwo">
|
|
<a class="nav-link active" href="#">Accessories</a>
|
|
<a class="nav-link" href="#">Kitchen</a>
|
|
<a class="nav-link" href="#">Living room</a>
|
|
</div>
|
|
<!-- End Collapse -->
|
|
|
|
<a class="nav-link" href="#">Cooling & air treatment</a>
|
|
<a class="nav-link" href="#">Vacuums & floor care</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Collapse -->
|
|
|
|
<!-- Collapse -->
|
|
<a class="nav-link dropdown-toggle collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCategoriesOne" aria-expanded="false" aria-controls="shopCategoriesOne">
|
|
<i class="bi-display nav-icon"></i> Electronic devices
|
|
</a>
|
|
|
|
<div id="shopCategoriesOne" class="nav-collapse collapse" data-bs-parent="#shopNavCategories">
|
|
<div id="shopNavCategoriesOne">
|
|
<!-- Collapse -->
|
|
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCategoriesOneSubOne" aria-expanded="false" aria-controls="shopCategoriesOneSubOne">
|
|
Electronic accessories
|
|
</a>
|
|
|
|
<div id="shopCategoriesOneSubOne" class="nav-collapse collapse" data-bs-parent="#shopNavCategoriesOne">
|
|
<a class="nav-link" href="#">Mobile accessories</a>
|
|
<a class="nav-link" href="#">Portable audio</a>
|
|
<a class="nav-link" href="#">Wearable</a>
|
|
<a class="nav-link" href="#">Console accessories</a>
|
|
<a class="nav-link" href="#">Camera accessories</a>
|
|
<a class="nav-link" href="#">Computer accessories</a>
|
|
<a class="nav-link" href="#">Storage</a>
|
|
<a class="nav-link" href="#">Printers</a>
|
|
<a class="nav-link" href="#">Computer components</a>
|
|
</div>
|
|
<!-- End Collapse -->
|
|
|
|
<a class="nav-link" href="#">Mobiles</a>
|
|
<a class="nav-link" href="#">Tablets</a>
|
|
<a class="nav-link" href="#">Laptops</a>
|
|
<a class="nav-link" href="#">Desktops</a>
|
|
<a class="nav-link" href="#">Gaming consoles</a>
|
|
<a class="nav-link" href="#">Car cameras</a>
|
|
<a class="nav-link" href="#">Security cameras</a>
|
|
<a class="nav-link" href="#">Digital cameras</a>
|
|
<a class="nav-link" href="#">Gadgets</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Collapse -->
|
|
|
|
<a class="nav-link" href="#">
|
|
<i class="bi-shop nav-icon"></i> Clothing
|
|
</a>
|
|
|
|
<!-- Collapse -->
|
|
<a class="nav-link dropdown-toggle collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCategoriesThree" aria-expanded="false" aria-controls="shopCategoriesThree">
|
|
<i class="bi-heart nav-icon"></i> Health & beauty
|
|
</a>
|
|
|
|
<div id="shopCategoriesThree" class="nav-collapse collapse" data-bs-parent="#shopNavCategories">
|
|
<div id="shopNavCategoriesThree">
|
|
<a class="nav-link" href="#">Food supplements</a>
|
|
<a class="nav-link" href="#">Skincare</a>
|
|
<a class="nav-link" href="#">Makeup</a>
|
|
|
|
<!-- Collapse -->
|
|
<a class="nav-link dropdown-toggle collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCategoriesThreeSubOne" aria-expanded="false" aria-controls="shopCategoriesThreeSubOne">
|
|
Beauty tools
|
|
</a>
|
|
|
|
<div id="shopCategoriesThreeSubOne" class="nav-collapse collapse" data-bs-parent="#shopNavCategoriesThree">
|
|
<a class="nav-link" href="#">Men</a>
|
|
<a class="nav-link" href="#">Women</a>
|
|
</div>
|
|
<!-- End Collapse -->
|
|
|
|
<!-- Collapse -->
|
|
<a class="nav-link dropdown-toggle collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCategoriesThreeSubTwo" aria-expanded="false" aria-controls="shopCategoriesThreeSubTwo">
|
|
Medical supplies
|
|
</a>
|
|
|
|
<div id="shopCategoriesThreeSubTwo" class="nav-collapse collapse" data-bs-parent="#shopNavCategoriesThree">
|
|
<a class="nav-link" href="#">Men</a>
|
|
<a class="nav-link" href="#">Women</a>
|
|
</div>
|
|
<!-- End Collapse -->
|
|
</div>
|
|
</div>
|
|
<!-- End Collapse -->
|
|
|
|
<a class="nav-link" href="#">
|
|
<i class="bi-earbuds nav-icon"></i> Accessories
|
|
</a>
|
|
|
|
<a class="nav-link" href="#">
|
|
<i class="bi-speaker-fill nav-icon"></i> Sound System
|
|
</a>
|
|
|
|
<a class="nav-link" href="#">
|
|
<i class="bi-smartwatch nav-icon"></i> Smartwatch
|
|
</a>
|
|
|
|
<!-- Collapse -->
|
|
<a class="nav-link dropdown-toggle collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCategoriesFour" aria-expanded="false" aria-controls="shopCategoriesFour">
|
|
<i class="bi-piggy-bank nav-icon"></i> Babies & toys
|
|
</a>
|
|
|
|
<div id="shopCategoriesFour" class="nav-collapse collapse" data-bs-parent="#shopNavCategories">
|
|
<div id="shopNavCategoriesFour">
|
|
<!-- Collapse -->
|
|
<a class="nav-link dropdown-toggle collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCategoriesFourSubOne" aria-expanded="false" aria-controls="shopCategoriesFourSubOne">
|
|
Foods
|
|
</a>
|
|
|
|
<div id="shopCategoriesFourSubOne" class="nav-collapse collapse" data-bs-parent="#shopNavCategoriesFour">
|
|
<a class="nav-link" href="#">Feeding</a>
|
|
<a class="nav-link" href="#">Milk formula</a>
|
|
</div>
|
|
<!-- End Collapse -->
|
|
|
|
<a class="nav-link" href="#">Diapering & potty</a>
|
|
<a class="nav-link" href="#">Nursery</a>
|
|
<a class="nav-link" href="#">Baby personal care</a>
|
|
<a class="nav-link" href="#">Clothing & accessories</a>
|
|
<a class="nav-link" href="#">Baby and & toys</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Collapse -->
|
|
|
|
<a class="nav-link" href="#">
|
|
<i class="bi-tools nav-icon"></i> Tools
|
|
</a>
|
|
|
|
<a class="nav-link" href="#">
|
|
<i class="bi-eyeglasses nav-icon"></i> Glasses
|
|
</a>
|
|
|
|
<!-- Collapse -->
|
|
<a class="nav-link dropdown-toggle collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCategoriesFive" aria-expanded="false" aria-controls="shopCategoriesFive">
|
|
<i class="bi-truck nav-icon"></i> Automotive & motorcycles
|
|
</a>
|
|
|
|
<div id="shopCategoriesFive" class="nav-collapse collapse" data-bs-parent="#shopNavCategories">
|
|
<!-- Collapse -->
|
|
<a class="nav-link dropdown-toggle collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCategoriesFiveSubOne" aria-expanded="false" aria-controls="shopCategoriesFiveSubOne">
|
|
Automotive
|
|
</a>
|
|
|
|
<div id="shopCategoriesFiveSubOne" class="nav-collapse collapse" data-bs-parent="#shopNavCategoriesFour">
|
|
<a class="nav-link" href="#">Services & installations</a>
|
|
<a class="nav-link" href="#">Auto oils & fluids</a>
|
|
</div>
|
|
<!-- End Collapse -->
|
|
|
|
<a class="nav-link" href="#">Interior accessories</a>
|
|
<a class="nav-link" href="#">Exterior accessories</a>
|
|
<a class="nav-link" href="#">Car audio</a>
|
|
<a class="nav-link" href="#">Auto care</a>
|
|
<a class="nav-link" href="#">Riding gear</a>
|
|
</div>
|
|
<!-- End Collapse -->
|
|
</div>
|
|
</div>
|
|
<!-- End Navbar Collapse -->
|
|
</div>
|
|
<!-- End Navbar -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Categories Section -->
|
|
</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>
|