2713 lines
139 KiB
HTML
2713 lines
139 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>Directory List - Snippets | Front - Multipurpose Responsive Template</title>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="shortcut icon" href="../favicon.ico">
|
|
|
|
<!-- Font -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
|
|
|
<!-- CSS Implementing Plugins -->
|
|
<link rel="stylesheet" href="../assets/css/vendor.min.css">
|
|
<link rel="stylesheet" href="../assets/vendor/bootstrap-icons/font/bootstrap-icons.css">
|
|
|
|
<!-- CSS Front Template -->
|
|
<link rel="stylesheet" href="../assets/css/theme.min.css?v=1.0">
|
|
<link rel="stylesheet" href="../assets/css/snippets.css">
|
|
</head>
|
|
|
|
<body 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 active">
|
|
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavDirectoryCollapse" role="button" data-bs-toggle="collapse" aria-expanded="true" aria-controls="snippetsSidebarNavDirectoryCollapse">Directory</a>
|
|
|
|
<div id="snippetsSidebarNavDirectoryCollapse" class="nav-collapse collapse show">
|
|
<a class="nav-link " href="directory-grid.html">Grid</a>
|
|
<a class="nav-link active" href="directory-list.html">List</a>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/testimonials.html">Testimonials</a>
|
|
</li>
|
|
|
|
<li class="nav-item ">
|
|
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavBlogsCollapse" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="snippetsSidebarNavBlogsCollapse">Blogs</a>
|
|
|
|
<div id="snippetsSidebarNavBlogsCollapse" class="nav-collapse collapse ">
|
|
<a class="nav-link " href="blogs-grid.html">Grid</a>
|
|
<a class="nav-link " href="blogs-list.html">List</a>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/tables.html">Tables</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/ecommerce.html">E-commerce</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/pricing.html">Pricing</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/team-sections.html">Team Sections</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/breadcrumb.html">Breadcrumb</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/cta.html">Call-to-Action (CTA)</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/modals.html">Modals</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/portfolio.html">Portfolio</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/gallery.html">Gallery</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/clients.html">Clients</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/countdown.html">Countdown</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/faq.html">FAQ</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/lists.html">Lists</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/collapse-accordion.html">Collapse/Accordion</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/comments.html">Comments</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/feedback-and-reviews.html">Feedback & Reviews</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/user-profile.html">User Profile</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="sidebar-examples.html">Sidebar Examples</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="calendar-view.html">Calendar View</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="notification.html">Notification</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="content-sections.html">Content Sections</a>
|
|
</li>
|
|
|
|
<li class="nav-item my-2 my-lg-5"></li>
|
|
|
|
<li class="nav-item">
|
|
<small class="nav-subtitle">Forms</small>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="forms-authentication.html">Authentication</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="forms-feedback.html">Feedback</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="forms-filters.html">Filters</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="forms-search.html">Search</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="forms-directory.html">Directory</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="forms-subscribe.html">Subscribe</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="forms-account.html">Account</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="forms-wizard-and-steps.html">Wizard & Steps</a>
|
|
</li>
|
|
|
|
<li class="nav-item my-2 my-lg-5"></li>
|
|
|
|
<li class="nav-item">
|
|
<small class="nav-subtitle">Contact / Footer</small>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/contact-sections.html">Contact Sections</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/footer.html">Footer</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- End Navbar Collapse -->
|
|
</nav>
|
|
<!-- End Navbar -->
|
|
|
|
<!-- Content -->
|
|
<div class="navbar-sidebar-aside-content content-space-1 content-space-md-2 px-lg-5 px-xl-10">
|
|
<!-- Page Header -->
|
|
<div class="docs-page-header">
|
|
<div class="row align-items-center">
|
|
<div class="col-sm">
|
|
<h1 class="docs-page-header-title">Directory List</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">
|
|
<!-- Heading -->
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h4 class="mb-0">Featured</h4>
|
|
<a class="link" href="#">View all <i class="bi-chevron-right small ms-1"></i></a>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<div class="row gx-3 mx-n2">
|
|
<div class="col-sm-6 col-md-4 mb-3">
|
|
<!-- Card -->
|
|
<div class="card card-bordered card-transition h-100">
|
|
<a class="card-body" href="../demo-app-marketplace/app-overview.html">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-xs" src="../assets/svg/brands/spotify-icon.svg" alt="Logo">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="d-flex align-items-center">
|
|
<h5 class="card-title mb-0">Spotify</h5>
|
|
<img class="avatar avatar-xss ms-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Image Description" title="Top Vendor">
|
|
</div>
|
|
<p class="card-text text-body small">Entertainment</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-md-4 mb-3">
|
|
<!-- Card -->
|
|
<div class="card card-bordered card-transition h-100">
|
|
<a class="card-body" href="../demo-app-marketplace/app-overview.html">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-xs" src="../assets/svg/brands/slack-icon.svg" alt="Logo">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="d-flex align-items-center">
|
|
<h5 class="card-title mb-0">Slack</h5>
|
|
</div>
|
|
<p class="card-text text-body small">Communication</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-md-4 mb-3">
|
|
<!-- Card -->
|
|
<div class="card card-bordered card-transition h-100">
|
|
<a class="card-body" href="../demo-app-marketplace/app-overview.html">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-xs" src="../assets/svg/brands/google-drive-icon.svg" alt="Logo">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="d-flex align-items-center">
|
|
<h5 class="card-title mb-0">Google Drive</h5>
|
|
<img class="avatar avatar-xss ms-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Image Description" title="Top Vendor">
|
|
</div>
|
|
<p class="card-text text-body small">File management</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-md-4 mb-3">
|
|
<!-- Card -->
|
|
<div class="card card-bordered card-transition h-100">
|
|
<a class="card-body" href="../demo-app-marketplace/app-overview.html">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-xs" src="../assets/svg/brands/atlassian-icon.svg" alt="Logo">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="d-flex align-items-center">
|
|
<h5 class="card-title mb-0">Atlassian</h5>
|
|
</div>
|
|
<p class="card-text text-body small">Developer tools</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-md-4 mb-3">
|
|
<!-- Card -->
|
|
<div class="card card-bordered card-transition h-100">
|
|
<a class="card-body" href="../demo-app-marketplace/app-overview.html">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-xs" src="../assets/svg/brands/behance-icon.svg" alt="Logo">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="d-flex align-items-center">
|
|
<h5 class="card-title mb-0">Behance</h5>
|
|
<img class="avatar avatar-xss ms-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Image Description" title="Top Vendor">
|
|
</div>
|
|
<p class="card-text text-body small">Design tools</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-md-4 mb-3">
|
|
<!-- Card -->
|
|
<div class="card card-bordered card-transition h-100">
|
|
<a class="card-body" href="../demo-app-marketplace/app-overview.html">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-xs" src="../assets/svg/brands/invision-studio-icon.svg" alt="Logo">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="d-flex align-items-center">
|
|
<h5 class="card-title mb-0">InVision Studio</h5>
|
|
</div>
|
|
<p class="card-text text-body small">Design tools</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html1" role="tabpanel" aria-labelledby="nav-htmlTab1">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Heading -->
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h4 class="mb-0">Featured</h4>
|
|
<a class="link" href="#">View all <i class="bi-chevron-right small ms-1"></i></a>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<div class="row gx-3 mx-n2">
|
|
<div class="col-sm-6 col-md-4 mb-3">
|
|
<!-- Card -->
|
|
<div class="card card-bordered card-transition h-100">
|
|
<a class="card-body" href="../demo-app-marketplace/app-overview.html">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-xs" src="../assets/svg/brands/spotify-icon.svg" alt="Logo">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="d-flex align-items-center">
|
|
<h5 class="card-title mb-0">Spotify</h5>
|
|
<img class="avatar avatar-xss ms-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Image Description" title="Top Vendor">
|
|
</div>
|
|
<p class="card-text text-body small">Entertainment</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-md-4 mb-3">
|
|
<!-- Card -->
|
|
<div class="card card-bordered card-transition h-100">
|
|
<a class="card-body" href="../demo-app-marketplace/app-overview.html">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-xs" src="../assets/svg/brands/slack-icon.svg" alt="Logo">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="d-flex align-items-center">
|
|
<h5 class="card-title mb-0">Slack</h5>
|
|
</div>
|
|
<p class="card-text text-body small">Communication</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-md-4 mb-3">
|
|
<!-- Card -->
|
|
<div class="card card-bordered card-transition h-100">
|
|
<a class="card-body" href="../demo-app-marketplace/app-overview.html">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-xs" src="../assets/svg/brands/google-drive-icon.svg" alt="Logo">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="d-flex align-items-center">
|
|
<h5 class="card-title mb-0">Google Drive</h5>
|
|
<img class="avatar avatar-xss ms-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Image Description" title="Top Vendor">
|
|
</div>
|
|
<p class="card-text text-body small">File management</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-md-4 mb-3">
|
|
<!-- Card -->
|
|
<div class="card card-bordered card-transition h-100">
|
|
<a class="card-body" href="../demo-app-marketplace/app-overview.html">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-xs" src="../assets/svg/brands/atlassian-icon.svg" alt="Logo">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="d-flex align-items-center">
|
|
<h5 class="card-title mb-0">Atlassian</h5>
|
|
</div>
|
|
<p class="card-text text-body small">Developer tools</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-md-4 mb-3">
|
|
<!-- Card -->
|
|
<div class="card card-bordered card-transition h-100">
|
|
<a class="card-body" href="../demo-app-marketplace/app-overview.html">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-xs" src="../assets/svg/brands/behance-icon.svg" alt="Logo">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="d-flex align-items-center">
|
|
<h5 class="card-title mb-0">Behance</h5>
|
|
<img class="avatar avatar-xss ms-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Image Description" title="Top Vendor">
|
|
</div>
|
|
<p class="card-text text-body small">Design tools</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-md-4 mb-3">
|
|
<!-- Card -->
|
|
<div class="card card-bordered card-transition h-100">
|
|
<a class="card-body" href="../demo-app-marketplace/app-overview.html">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-xs" src="../assets/svg/brands/invision-studio-icon.svg" alt="Logo">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="d-flex align-items-center">
|
|
<h5 class="card-title mb-0">InVision Studio</h5>
|
|
</div>
|
|
<p class="card-text text-body small">Design tools</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</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">
|
|
<script src="../node_modules/fslightbox/index.js"></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>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-jsTab2" href="#nav-js2" data-bs-toggle="pill" data-bs-target="#nav-js2" role="tab" aria-controls="nav-js2" aria-selected="false">JS</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="navTabContent2">
|
|
<div class="tab-pane fade p-4 show active" id="nav-result2" role="tabpanel" aria-labelledby="nav-resultTab2">
|
|
<!-- Card List -->
|
|
<div class="container content-space-1">
|
|
<div class="d-grid gap-5">
|
|
<!-- Card -->
|
|
<div class="card card-flush card-stretched-vertical">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<!-- Card Pinned -->
|
|
<a class="card-pinned" href="../assets/img/1920x1080/img19.jpg" data-fslightbox="propertyListGallery1">
|
|
<img class="card-img" src="../assets/img/480x320/img23.jpg" alt="Image Description">
|
|
|
|
<div class="card-pinned-top-start">
|
|
<span class="badge bg-success">New</span>
|
|
</div>
|
|
|
|
<div class="card-pinned-bottom-end">
|
|
<span class="btn btn-light btn-xs btn-icon">
|
|
<i class="bi-images"></i>
|
|
</span>
|
|
</div>
|
|
</a>
|
|
<!-- End Card Pinned -->
|
|
|
|
<a class="d-none" href="../assets/img/1920x1080/img20.jpg" data-fslightbox="propertyListGallery1"></a>
|
|
<a class="d-none" href="../assets/img/1920x1080/img17.jpg" data-fslightbox="propertyListGallery1"></a>
|
|
<a class="d-none" href="../assets/img/1920x1080/img16.jpg" data-fslightbox="propertyListGallery1"></a>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-8">
|
|
<div class="card-body">
|
|
<div class="row mb-3">
|
|
<div class="col-md-7">
|
|
<span class="card-subtitle text-body">For sale</span>
|
|
|
|
<h3 class="card-title">
|
|
<a class="text-dark" href="../demo-real-estate/property-overview.html">Borrett Close, London</a>
|
|
</h3>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-5 text-md-end">
|
|
<h3 class="card-title">
|
|
<a href="../demo-real-estate/property-overview.html">£689,000</a>
|
|
</h3>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<ul class="list-inline list-separator text-body small mb-3">
|
|
<li class="list-inline-item">
|
|
<span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 640 512"><path d="M176 256c44.11 0 80-35.89 80-80s-35.89-80-80-80-80 35.89-80 80 35.89 80 80 80zm352-128H304c-8.84 0-16 7.16-16 16v144H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v352c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16v-48h512v48c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V240c0-61.86-50.14-112-112-112z"/></svg>
|
|
</span>
|
|
3 bed
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512"><path d="M304,320a16,16,0,1,0,16,16A16,16,0,0,0,304,320Zm32-96a16,16,0,1,0,16,16A16,16,0,0,0,336,224Zm32,64a16,16,0,1,0-16-16A16,16,0,0,0,368,288Zm-32,32a16,16,0,1,0-16-16A16,16,0,0,0,336,320Zm-32-64a16,16,0,1,0,16,16A16,16,0,0,0,304,256Zm128-32a16,16,0,1,0-16-16A16,16,0,0,0,432,224Zm-48,16a16,16,0,1,0,16-16A16,16,0,0,0,384,240Zm-16-48a16,16,0,1,0,16,16A16,16,0,0,0,368,192Zm96,32a16,16,0,1,0,16,16A16,16,0,0,0,464,224Zm32-32a16,16,0,1,0,16,16A16,16,0,0,0,496,192Zm-64,64a16,16,0,1,0,16,16A16,16,0,0,0,432,256Zm-32,32a16,16,0,1,0,16,16A16,16,0,0,0,400,288Zm-64,64a16,16,0,1,0,16,16A16,16,0,0,0,336,352Zm-32,32a16,16,0,1,0,16,16A16,16,0,0,0,304,384Zm64-64a16,16,0,1,0,16,16A16,16,0,0,0,368,320Zm21.65-218.35-11.3-11.31a16,16,0,0,0-22.63,0L350.05,96A111.19,111.19,0,0,0,272,64c-19.24,0-37.08,5.3-52.9,13.85l-10-10A121.72,121.72,0,0,0,123.44,32C55.49,31.5,0,92.91,0,160.85V464a16,16,0,0,0,16,16H48a16,16,0,0,0,16-16V158.4c0-30.15,21-58.2,51-61.93a58.38,58.38,0,0,1,48.93,16.67l10,10C165.3,138.92,160,156.76,160,176a111.23,111.23,0,0,0,32,78.05l-5.66,5.67a16,16,0,0,0,0,22.62l11.3,11.31a16,16,0,0,0,22.63,0L389.65,124.28A16,16,0,0,0,389.65,101.65Z"/></svg>
|
|
</span>
|
|
2 bath
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<i class="bi-rulers text-muted me-1"></i> 1,428 sqft
|
|
</li>
|
|
</ul>
|
|
|
|
<p class="card-text">This superb one bedroom flat rests a stones throw from Kennington tube station and Elephant and Castle train station as well as the leafy Paisley Park.</p>
|
|
|
|
<div class="card-footer">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg mb-2 mb-lg-0">
|
|
<!-- Media -->
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img9.jpg" alt="Image Description" title="Monica Fox">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<p class="card-text small mb-0">Listed on Jan 4, 2019 by</p>
|
|
<a class="card-link link-dark" href="#">Monica Fox</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-auto">
|
|
<!-- Contacts -->
|
|
<div class="d-flex gap-2">
|
|
<a class="btn btn-ghost-secondary btn-sm" href="javascript:;">
|
|
<i class="bi-telephone-inbound-fill me-1"></i> (0161) 347 8854
|
|
</a>
|
|
<a class="btn btn-ghost-secondary btn-sm" href="javascript:;">
|
|
<i class="bi-envelope-fill me-1"></i> Contact
|
|
</a>
|
|
<a class="btn btn-ghost-secondary btn-sm" href="javascript:;">
|
|
<i class="bi-star-fill me-1"></i> Save
|
|
</a>
|
|
</div>
|
|
<!-- End Contacts -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<div class="card card-flush card-stretched-vertical">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<!-- Card Pinned -->
|
|
<a class="card-pinned" href="../assets/img/1920x1080/img12.jpg" data-fslightbox="propertyListGallery2">
|
|
<img class="card-img" src="../assets/img/480x320/img19.jpg" alt="Image Description">
|
|
|
|
<div class="card-pinned-bottom-end">
|
|
<span class="btn btn-light btn-xs btn-icon">
|
|
<i class="bi-images"></i>
|
|
</span>
|
|
</div>
|
|
</a>
|
|
<!-- End Card Pinned -->
|
|
|
|
<a class="d-none" href="../assets/img/1920x1080/img11.jpg" data-fslightbox="propertyListGallery2"></a>
|
|
<a class="d-none" href="../assets/img/1920x1080/img14.jpg" data-fslightbox="propertyListGallery2"></a>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-8">
|
|
<div class="card-body">
|
|
<div class="row mb-3">
|
|
<div class="col-md-7">
|
|
<span class="card-subtitle text-body">For sale</span>
|
|
|
|
<h3 class="card-title">
|
|
<a class="text-dark" href="../demo-real-estate/property-overview.html">The Drive, Ilford</a>
|
|
</h3>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-5 text-md-end">
|
|
<h3 class="card-title">
|
|
<a href="../demo-real-estate/property-overview.html">£999,000</a>
|
|
</h3>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<ul class="list-inline list-separator text-body small mb-3">
|
|
<li class="list-inline-item">
|
|
<span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 640 512"><path d="M176 256c44.11 0 80-35.89 80-80s-35.89-80-80-80-80 35.89-80 80 35.89 80 80 80zm352-128H304c-8.84 0-16 7.16-16 16v144H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v352c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16v-48h512v48c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V240c0-61.86-50.14-112-112-112z"/></svg>
|
|
</span>
|
|
2 bed
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512"><path d="M304,320a16,16,0,1,0,16,16A16,16,0,0,0,304,320Zm32-96a16,16,0,1,0,16,16A16,16,0,0,0,336,224Zm32,64a16,16,0,1,0-16-16A16,16,0,0,0,368,288Zm-32,32a16,16,0,1,0-16-16A16,16,0,0,0,336,320Zm-32-64a16,16,0,1,0,16,16A16,16,0,0,0,304,256Zm128-32a16,16,0,1,0-16-16A16,16,0,0,0,432,224Zm-48,16a16,16,0,1,0,16-16A16,16,0,0,0,384,240Zm-16-48a16,16,0,1,0,16,16A16,16,0,0,0,368,192Zm96,32a16,16,0,1,0,16,16A16,16,0,0,0,464,224Zm32-32a16,16,0,1,0,16,16A16,16,0,0,0,496,192Zm-64,64a16,16,0,1,0,16,16A16,16,0,0,0,432,256Zm-32,32a16,16,0,1,0,16,16A16,16,0,0,0,400,288Zm-64,64a16,16,0,1,0,16,16A16,16,0,0,0,336,352Zm-32,32a16,16,0,1,0,16,16A16,16,0,0,0,304,384Zm64-64a16,16,0,1,0,16,16A16,16,0,0,0,368,320Zm21.65-218.35-11.3-11.31a16,16,0,0,0-22.63,0L350.05,96A111.19,111.19,0,0,0,272,64c-19.24,0-37.08,5.3-52.9,13.85l-10-10A121.72,121.72,0,0,0,123.44,32C55.49,31.5,0,92.91,0,160.85V464a16,16,0,0,0,16,16H48a16,16,0,0,0,16-16V158.4c0-30.15,21-58.2,51-61.93a58.38,58.38,0,0,1,48.93,16.67l10,10C165.3,138.92,160,156.76,160,176a111.23,111.23,0,0,0,32,78.05l-5.66,5.67a16,16,0,0,0,0,22.62l11.3,11.31a16,16,0,0,0,22.63,0L389.65,124.28A16,16,0,0,0,389.65,101.65Z"/></svg>
|
|
</span>
|
|
1 bath
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<i class="bi-rulers text-muted me-1"></i> 2,123 sqft
|
|
</li>
|
|
</ul>
|
|
|
|
<p class="card-text">Equity estate agents are pleased to offer this modern three Bedroom ground floor split level maisonette situated within easy reach of turkey street and enfield lock Train Stations.</p>
|
|
|
|
<div class="card-footer">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg mb-2 mb-lg-0">
|
|
<!-- Media -->
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<span class="avatar avatar-sm avatar-soft-dark avatar-circle">
|
|
<span class="avatar-initials">EP</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<p class="card-text small mb-0">Listed on Jan 4, 2019 by</p>
|
|
<a class="card-link link-dark" href="#">Equity Property</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-auto">
|
|
<!-- Contacts -->
|
|
<div class="d-flex gap-2">
|
|
<a class="btn btn-ghost-secondary btn-sm" href="javascript:;">
|
|
<i class="bi-telephone-inbound-fill me-1"></i> (0161) 502 9133
|
|
</a>
|
|
<a class="btn btn-ghost-secondary btn-sm" href="javascript:;">
|
|
<i class="bi-envelope-fill me-1"></i> Contact
|
|
</a>
|
|
<a class="btn btn-ghost-secondary btn-sm" href="javascript:;">
|
|
<i class="bi-star-fill me-1"></i> Save
|
|
</a>
|
|
</div>
|
|
<!-- End Contacts -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
</div>
|
|
<!-- End Card List -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html2" role="tabpanel" aria-labelledby="nav-htmlTab2">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Card List -->
|
|
<div class="container content-space-1">
|
|
<div class="d-grid gap-5">
|
|
<!-- Card -->
|
|
<div class="card card-flush card-stretched-vertical">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<!-- Card Pinned -->
|
|
<a class="card-pinned" href="../assets/img/1920x1080/img19.jpg" data-fslightbox="propertyListGallery1">
|
|
<img class="card-img" src="../assets/img/480x320/img23.jpg" alt="Image Description">
|
|
|
|
<div class="card-pinned-top-start">
|
|
<span class="badge bg-success">New</span>
|
|
</div>
|
|
|
|
<div class="card-pinned-bottom-end">
|
|
<span class="btn btn-light btn-xs btn-icon">
|
|
<i class="bi-images"></i>
|
|
</span>
|
|
</div>
|
|
</a>
|
|
<!-- End Card Pinned -->
|
|
|
|
<a class="d-none" href="../assets/img/1920x1080/img20.jpg" data-fslightbox="propertyListGallery1"></a>
|
|
<a class="d-none" href="../assets/img/1920x1080/img17.jpg" data-fslightbox="propertyListGallery1"></a>
|
|
<a class="d-none" href="../assets/img/1920x1080/img16.jpg" data-fslightbox="propertyListGallery1"></a>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-8">
|
|
<div class="card-body">
|
|
<div class="row mb-3">
|
|
<div class="col-md-7">
|
|
<span class="card-subtitle text-body">For sale</span>
|
|
|
|
<h3 class="card-title">
|
|
<a class="text-dark" href="../demo-real-estate/property-overview.html">Borrett Close, London</a>
|
|
</h3>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-5 text-md-end">
|
|
<h3 class="card-title">
|
|
<a href="../demo-real-estate/property-overview.html">£689,000</a>
|
|
</h3>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<ul class="list-inline list-separator text-body small mb-3">
|
|
<li class="list-inline-item">
|
|
<span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 640 512"><path d="M176 256c44.11 0 80-35.89 80-80s-35.89-80-80-80-80 35.89-80 80 35.89 80 80 80zm352-128H304c-8.84 0-16 7.16-16 16v144H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v352c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16v-48h512v48c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V240c0-61.86-50.14-112-112-112z"/></svg>
|
|
</span>
|
|
3 bed
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512"><path d="M304,320a16,16,0,1,0,16,16A16,16,0,0,0,304,320Zm32-96a16,16,0,1,0,16,16A16,16,0,0,0,336,224Zm32,64a16,16,0,1,0-16-16A16,16,0,0,0,368,288Zm-32,32a16,16,0,1,0-16-16A16,16,0,0,0,336,320Zm-32-64a16,16,0,1,0,16,16A16,16,0,0,0,304,256Zm128-32a16,16,0,1,0-16-16A16,16,0,0,0,432,224Zm-48,16a16,16,0,1,0,16-16A16,16,0,0,0,384,240Zm-16-48a16,16,0,1,0,16,16A16,16,0,0,0,368,192Zm96,32a16,16,0,1,0,16,16A16,16,0,0,0,464,224Zm32-32a16,16,0,1,0,16,16A16,16,0,0,0,496,192Zm-64,64a16,16,0,1,0,16,16A16,16,0,0,0,432,256Zm-32,32a16,16,0,1,0,16,16A16,16,0,0,0,400,288Zm-64,64a16,16,0,1,0,16,16A16,16,0,0,0,336,352Zm-32,32a16,16,0,1,0,16,16A16,16,0,0,0,304,384Zm64-64a16,16,0,1,0,16,16A16,16,0,0,0,368,320Zm21.65-218.35-11.3-11.31a16,16,0,0,0-22.63,0L350.05,96A111.19,111.19,0,0,0,272,64c-19.24,0-37.08,5.3-52.9,13.85l-10-10A121.72,121.72,0,0,0,123.44,32C55.49,31.5,0,92.91,0,160.85V464a16,16,0,0,0,16,16H48a16,16,0,0,0,16-16V158.4c0-30.15,21-58.2,51-61.93a58.38,58.38,0,0,1,48.93,16.67l10,10C165.3,138.92,160,156.76,160,176a111.23,111.23,0,0,0,32,78.05l-5.66,5.67a16,16,0,0,0,0,22.62l11.3,11.31a16,16,0,0,0,22.63,0L389.65,124.28A16,16,0,0,0,389.65,101.65Z"/></svg>
|
|
</span>
|
|
2 bath
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<i class="bi-rulers text-muted me-1"></i> 1,428 sqft
|
|
</li>
|
|
</ul>
|
|
|
|
<p class="card-text">This superb one bedroom flat rests a stones throw from Kennington tube station and Elephant and Castle train station as well as the leafy Paisley Park.</p>
|
|
|
|
<div class="card-footer">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg mb-2 mb-lg-0">
|
|
<!-- Media -->
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img9.jpg" alt="Image Description" title="Monica Fox">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<p class="card-text small mb-0">Listed on Jan 4, 2019 by</p>
|
|
<a class="card-link link-dark" href="#">Monica Fox</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-auto">
|
|
<!-- Contacts -->
|
|
<div class="d-flex gap-2">
|
|
<a class="btn btn-ghost-secondary btn-sm" href="javascript:;">
|
|
<i class="bi-telephone-inbound-fill me-1"></i> (0161) 347 8854
|
|
</a>
|
|
<a class="btn btn-ghost-secondary btn-sm" href="javascript:;">
|
|
<i class="bi-envelope-fill me-1"></i> Contact
|
|
</a>
|
|
<a class="btn btn-ghost-secondary btn-sm" href="javascript:;">
|
|
<i class="bi-star-fill me-1"></i> Save
|
|
</a>
|
|
</div>
|
|
<!-- End Contacts -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<div class="card card-flush card-stretched-vertical">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<!-- Card Pinned -->
|
|
<a class="card-pinned" href="../assets/img/1920x1080/img12.jpg" data-fslightbox="propertyListGallery2">
|
|
<img class="card-img" src="../assets/img/480x320/img19.jpg" alt="Image Description">
|
|
|
|
<div class="card-pinned-bottom-end">
|
|
<span class="btn btn-light btn-xs btn-icon">
|
|
<i class="bi-images"></i>
|
|
</span>
|
|
</div>
|
|
</a>
|
|
<!-- End Card Pinned -->
|
|
|
|
<a class="d-none" href="../assets/img/1920x1080/img11.jpg" data-fslightbox="propertyListGallery2"></a>
|
|
<a class="d-none" href="../assets/img/1920x1080/img14.jpg" data-fslightbox="propertyListGallery2"></a>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-8">
|
|
<div class="card-body">
|
|
<div class="row mb-3">
|
|
<div class="col-md-7">
|
|
<span class="card-subtitle text-body">For sale</span>
|
|
|
|
<h3 class="card-title">
|
|
<a class="text-dark" href="../demo-real-estate/property-overview.html">The Drive, Ilford</a>
|
|
</h3>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-5 text-md-end">
|
|
<h3 class="card-title">
|
|
<a href="../demo-real-estate/property-overview.html">£999,000</a>
|
|
</h3>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<ul class="list-inline list-separator text-body small mb-3">
|
|
<li class="list-inline-item">
|
|
<span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 640 512"><path d="M176 256c44.11 0 80-35.89 80-80s-35.89-80-80-80-80 35.89-80 80 35.89 80 80 80zm352-128H304c-8.84 0-16 7.16-16 16v144H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v352c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16v-48h512v48c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V240c0-61.86-50.14-112-112-112z"/></svg>
|
|
</span>
|
|
2 bed
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512"><path d="M304,320a16,16,0,1,0,16,16A16,16,0,0,0,304,320Zm32-96a16,16,0,1,0,16,16A16,16,0,0,0,336,224Zm32,64a16,16,0,1,0-16-16A16,16,0,0,0,368,288Zm-32,32a16,16,0,1,0-16-16A16,16,0,0,0,336,320Zm-32-64a16,16,0,1,0,16,16A16,16,0,0,0,304,256Zm128-32a16,16,0,1,0-16-16A16,16,0,0,0,432,224Zm-48,16a16,16,0,1,0,16-16A16,16,0,0,0,384,240Zm-16-48a16,16,0,1,0,16,16A16,16,0,0,0,368,192Zm96,32a16,16,0,1,0,16,16A16,16,0,0,0,464,224Zm32-32a16,16,0,1,0,16,16A16,16,0,0,0,496,192Zm-64,64a16,16,0,1,0,16,16A16,16,0,0,0,432,256Zm-32,32a16,16,0,1,0,16,16A16,16,0,0,0,400,288Zm-64,64a16,16,0,1,0,16,16A16,16,0,0,0,336,352Zm-32,32a16,16,0,1,0,16,16A16,16,0,0,0,304,384Zm64-64a16,16,0,1,0,16,16A16,16,0,0,0,368,320Zm21.65-218.35-11.3-11.31a16,16,0,0,0-22.63,0L350.05,96A111.19,111.19,0,0,0,272,64c-19.24,0-37.08,5.3-52.9,13.85l-10-10A121.72,121.72,0,0,0,123.44,32C55.49,31.5,0,92.91,0,160.85V464a16,16,0,0,0,16,16H48a16,16,0,0,0,16-16V158.4c0-30.15,21-58.2,51-61.93a58.38,58.38,0,0,1,48.93,16.67l10,10C165.3,138.92,160,156.76,160,176a111.23,111.23,0,0,0,32,78.05l-5.66,5.67a16,16,0,0,0,0,22.62l11.3,11.31a16,16,0,0,0,22.63,0L389.65,124.28A16,16,0,0,0,389.65,101.65Z"/></svg>
|
|
</span>
|
|
1 bath
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<i class="bi-rulers text-muted me-1"></i> 2,123 sqft
|
|
</li>
|
|
</ul>
|
|
|
|
<p class="card-text">Equity estate agents are pleased to offer this modern three Bedroom ground floor split level maisonette situated within easy reach of turkey street and enfield lock Train Stations.</p>
|
|
|
|
<div class="card-footer">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg mb-2 mb-lg-0">
|
|
<!-- Media -->
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<span class="avatar avatar-sm avatar-soft-dark avatar-circle">
|
|
<span class="avatar-initials">EP</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<p class="card-text small mb-0">Listed on Jan 4, 2019 by</p>
|
|
<a class="card-link link-dark" href="#">Equity Property</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-auto">
|
|
<!-- Contacts -->
|
|
<div class="d-flex gap-2">
|
|
<a class="btn btn-ghost-secondary btn-sm" href="javascript:;">
|
|
<i class="bi-telephone-inbound-fill me-1"></i> (0161) 502 9133
|
|
</a>
|
|
<a class="btn btn-ghost-secondary btn-sm" href="javascript:;">
|
|
<i class="bi-envelope-fill me-1"></i> Contact
|
|
</a>
|
|
<a class="btn btn-ghost-secondary btn-sm" href="javascript:;">
|
|
<i class="bi-star-fill me-1"></i> Save
|
|
</a>
|
|
</div>
|
|
<!-- End Contacts -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
</div>
|
|
<!-- End Card List -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-js2" role="tabpanel" aria-labelledby="nav-jsTab2">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<script src="../node_modules/fslightbox/index.js"></script>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Heading -->
|
|
<h2 id="component-3" class="hs-docs-heading">
|
|
Component #3 <a class="anchorjs-link" href="#component-3" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
|
</h2>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<!-- Header -->
|
|
<div class="card-header">
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment" id="navTab3" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="nav-resultTab3" href="#nav-result3" data-bs-toggle="pill" data-bs-target="#nav-result3" role="tab" aria-controls="nav-result3" aria-selected="true">Preview</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-htmlTab3" href="#nav-html3" data-bs-toggle="pill" data-bs-target="#nav-html3" role="tab" aria-controls="nav-html3" aria-selected="false">HTML</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="navTabContent3">
|
|
<div class="tab-pane fade p-4 show active" id="nav-result3" role="tabpanel" aria-labelledby="nav-resultTab3">
|
|
<!-- Card List -->
|
|
<div class="d-grid gap-5">
|
|
<!-- Card -->
|
|
<div class="card card-bordered">
|
|
<div class="card-body">
|
|
<!-- Media -->
|
|
<div class="d-sm-flex">
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center align-items-sm-start mb-3">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-4x3" src="../assets/svg/brands/mailchimp-icon.svg" alt="Image Description">
|
|
</div>
|
|
<div class="d-sm-none flex-grow-1 ms-3">
|
|
<h6 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">Mailchimp</a>
|
|
<img class="avatar avatar-xss ms-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Review rating" data-toggle="tooltip" data-placement="top" title="Claimed profile">
|
|
</h6>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
|
|
<div class="flex-grow-1 ms-sm-3">
|
|
<div class="row">
|
|
<div class="col col-md-8">
|
|
<h3 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">Senior B2B sales consultant</a>
|
|
</h3>
|
|
<div class="d-none d-sm-inline-block">
|
|
<h6 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">Mailchimp</a>
|
|
<img class="avatar avatar-xss ms-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Review rating" data-toggle="tooltip" data-placement="top" title="Claimed profile">
|
|
</h6>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto order-md-3">
|
|
<!-- Checkbbox Bookmark -->
|
|
<div class="form-check form-check-bookmark">
|
|
<input class="form-check-input" type="checkbox" value="" id="jobsCardBookmarkCheck1">
|
|
<label class="form-check-label" for="jobsCardBookmarkCheck1">
|
|
<span class="form-check-bookmark-default" data-bs-toggle="tooltip" data-bs-placement="top" title="Save this job">
|
|
<i class="bi-star"></i>
|
|
</span>
|
|
<span class="form-check-bookmark-active" data-bs-toggle="tooltip" data-bs-placement="top" title="Saved">
|
|
<i class="bi-star-fill"></i>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<!-- End Checkbbox Bookmark -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-12 col-md mt-3 mt-md-0">
|
|
<span class="d-block small text-body mb-1">$125k-$135k yearly</span>
|
|
|
|
<span class="badge bg-soft-info text-info me-2">
|
|
<span class="legend-indicator bg-info"></span>Remote
|
|
</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
|
|
<div class="card-footer pt-0">
|
|
<ul class="list-inline list-separator small text-body">
|
|
<li class="list-inline-item">Posted 7 hours ago</li>
|
|
<li class="list-inline-item">Oxford</li>
|
|
<li class="list-inline-item">Full time</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<div class="card card-bordered">
|
|
<div class="card-body">
|
|
<!-- Media -->
|
|
<div class="d-sm-flex">
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center align-items-sm-start mb-3">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-4x3" src="../assets/svg/brands/capsule-icon.svg" alt="Image Description">
|
|
</div>
|
|
<div class="d-sm-none flex-grow-1 ms-3">
|
|
<h6 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">Capsule</a>
|
|
</h6>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
|
|
<div class="flex-grow-1 ms-sm-3">
|
|
<div class="row">
|
|
<div class="col col-md-8">
|
|
<h3 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">Office assistant/Social media assistant</a>
|
|
</h3>
|
|
<div class="d-none d-sm-inline-block">
|
|
<h6 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">Capsule</a>
|
|
</h6>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto order-md-3">
|
|
<!-- Checkbbox Bookmark -->
|
|
<div class="form-check form-check-bookmark">
|
|
<input class="form-check-input" type="checkbox" value="" id="jobsCardBookmarkCheck2">
|
|
<label class="form-check-label" for="jobsCardBookmarkCheck2">
|
|
<span class="form-check-bookmark-default" data-bs-toggle="tooltip" data-bs-placement="top" title="Save this job">
|
|
<i class="bi-star"></i>
|
|
</span>
|
|
<span class="form-check-bookmark-active" data-bs-toggle="tooltip" data-bs-placement="top" title="Saved">
|
|
<i class="bi-star-fill"></i>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<!-- End Checkbbox Bookmark -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-12 col-md mt-3 mt-md-0">
|
|
<span class="d-block small text-body mb-1">$50-$135 hourly</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
|
|
<div class="card-footer pt-0">
|
|
<ul class="list-inline list-separator small text-body">
|
|
<li class="list-inline-item">Posted 21 hours ago</li>
|
|
<li class="list-inline-item">Newcastle</li>
|
|
<li class="list-inline-item">Part time</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Card List -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html3" role="tabpanel" aria-labelledby="nav-htmlTab3">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Card List -->
|
|
<div class="d-grid gap-5">
|
|
<!-- Card -->
|
|
<div class="card card-bordered">
|
|
<div class="card-body">
|
|
<!-- Media -->
|
|
<div class="d-sm-flex">
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center align-items-sm-start mb-3">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-4x3" src="../assets/svg/brands/mailchimp-icon.svg" alt="Image Description">
|
|
</div>
|
|
<div class="d-sm-none flex-grow-1 ms-3">
|
|
<h6 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">Mailchimp</a>
|
|
<img class="avatar avatar-xss ms-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Review rating" data-toggle="tooltip" data-placement="top" title="Claimed profile">
|
|
</h6>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
|
|
<div class="flex-grow-1 ms-sm-3">
|
|
<div class="row">
|
|
<div class="col col-md-8">
|
|
<h3 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">Senior B2B sales consultant</a>
|
|
</h3>
|
|
<div class="d-none d-sm-inline-block">
|
|
<h6 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">Mailchimp</a>
|
|
<img class="avatar avatar-xss ms-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Review rating" data-toggle="tooltip" data-placement="top" title="Claimed profile">
|
|
</h6>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto order-md-3">
|
|
<!-- Checkbbox Bookmark -->
|
|
<div class="form-check form-check-bookmark">
|
|
<input class="form-check-input" type="checkbox" value="" id="jobsCardBookmarkCheck1">
|
|
<label class="form-check-label" for="jobsCardBookmarkCheck1">
|
|
<span class="form-check-bookmark-default" data-bs-toggle="tooltip" data-bs-placement="top" title="Save this job">
|
|
<i class="bi-star"></i>
|
|
</span>
|
|
<span class="form-check-bookmark-active" data-bs-toggle="tooltip" data-bs-placement="top" title="Saved">
|
|
<i class="bi-star-fill"></i>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<!-- End Checkbbox Bookmark -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-12 col-md mt-3 mt-md-0">
|
|
<span class="d-block small text-body mb-1">$125k-$135k yearly</span>
|
|
|
|
<span class="badge bg-soft-info text-info me-2">
|
|
<span class="legend-indicator bg-info"></span>Remote
|
|
</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
|
|
<div class="card-footer pt-0">
|
|
<ul class="list-inline list-separator small text-body">
|
|
<li class="list-inline-item">Posted 7 hours ago</li>
|
|
<li class="list-inline-item">Oxford</li>
|
|
<li class="list-inline-item">Full time</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<div class="card card-bordered">
|
|
<div class="card-body">
|
|
<!-- Media -->
|
|
<div class="d-sm-flex">
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center align-items-sm-start mb-3">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-4x3" src="../assets/svg/brands/capsule-icon.svg" alt="Image Description">
|
|
</div>
|
|
<div class="d-sm-none flex-grow-1 ms-3">
|
|
<h6 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">Capsule</a>
|
|
</h6>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
|
|
<div class="flex-grow-1 ms-sm-3">
|
|
<div class="row">
|
|
<div class="col col-md-8">
|
|
<h3 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">Office assistant/Social media assistant</a>
|
|
</h3>
|
|
<div class="d-none d-sm-inline-block">
|
|
<h6 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">Capsule</a>
|
|
</h6>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto order-md-3">
|
|
<!-- Checkbbox Bookmark -->
|
|
<div class="form-check form-check-bookmark">
|
|
<input class="form-check-input" type="checkbox" value="" id="jobsCardBookmarkCheck2">
|
|
<label class="form-check-label" for="jobsCardBookmarkCheck2">
|
|
<span class="form-check-bookmark-default" data-bs-toggle="tooltip" data-bs-placement="top" title="Save this job">
|
|
<i class="bi-star"></i>
|
|
</span>
|
|
<span class="form-check-bookmark-active" data-bs-toggle="tooltip" data-bs-placement="top" title="Saved">
|
|
<i class="bi-star-fill"></i>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<!-- End Checkbbox Bookmark -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-12 col-md mt-3 mt-md-0">
|
|
<span class="d-block small text-body mb-1">$50-$135 hourly</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
|
|
<div class="card-footer pt-0">
|
|
<ul class="list-inline list-separator small text-body">
|
|
<li class="list-inline-item">Posted 21 hours ago</li>
|
|
<li class="list-inline-item">Newcastle</li>
|
|
<li class="list-inline-item">Part time</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Card List -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Heading -->
|
|
<h2 id="component-4" class="hs-docs-heading">
|
|
Component #4 <a class="anchorjs-link" href="#component-4" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
|
</h2>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<!-- Header -->
|
|
<div class="card-header">
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment" id="navTab4" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="nav-resultTab4" href="#nav-result4" data-bs-toggle="pill" data-bs-target="#nav-result4" role="tab" aria-controls="nav-result4" aria-selected="true">Preview</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-htmlTab4" href="#nav-html4" data-bs-toggle="pill" data-bs-target="#nav-html4" role="tab" aria-controls="nav-html4" aria-selected="false">HTML</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="navTabContent4">
|
|
<div class="tab-pane fade p-4 show active" id="nav-result4" role="tabpanel" aria-labelledby="nav-resultTab4">
|
|
<div class="d-grid gap-5">
|
|
<!-- Card -->
|
|
<a class="card card-flush" href="../demo-course/course-overview.html">
|
|
<div class="row align-items-md-center">
|
|
<div class="col-sm-5 mb-3 mb-sm-0">
|
|
<!-- Card Pinned -->
|
|
<div class="card-pinned">
|
|
<img class="card-img" src="../assets/svg/components/card-12.svg" alt="Image Description">
|
|
|
|
<div class="card-pinned-top-start">
|
|
<small class="badge bg-success">Bestseller</small>
|
|
</div>
|
|
|
|
<div class="card-pinned-bottom-start">
|
|
<div class="d-flex align-items-center flex-wrap">
|
|
<!-- Rating -->
|
|
<div class="d-flex gap-1">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
</div>
|
|
<!-- End Rating -->
|
|
<div class="ms-1">
|
|
<span class="fw-semi-bold text-white small me-1">4.91</span>
|
|
<span class="text-white-70 small">(1.5k+ reviews)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Card Pinned -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-7">
|
|
<div class="row mb-3">
|
|
<div class="col">
|
|
<small class="card-subtitle text-body">Code</small>
|
|
<h3 class="card-title text-inherit">Complete Python Bootcamp: Go from zero to hero in Python 3</h3>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<div class="text-end">
|
|
<p class="text-muted small mb-0"><del>$114.99</del></p>
|
|
<h5 class="card-title text-primary">$99.99</h5>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="row align-items-center mb-2">
|
|
<div class="col">
|
|
<div class="avatar-group avatar-group-xs">
|
|
<span class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img8.jpg" alt="Image Description">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<ul class="list-inline list-separator text-body small">
|
|
<li class="list-inline-item">
|
|
<i class="bi-book me-1"></i> 10 lessons
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<i class="bi-clock me-1"></i> 3h 25m
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<i class="bi-bar-char-steps me-1"></i> All levels
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<p class="card-text text-body">Learn Python like a Professional! Start from the basics and go all the way to creating your own applications and games!</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</a>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<a class="card card-flush" href="../demo-course/course-overview.html">
|
|
<div class="row align-items-md-center">
|
|
<div class="col-sm-5 mb-3 mb-sm-0">
|
|
<!-- Card Pinned -->
|
|
<div class="card-pinned">
|
|
<img class="card-img" src="../assets/svg/components/card-13.svg" alt="Image Description">
|
|
|
|
<div class="card-pinned-bottom-start">
|
|
<div class="d-flex align-items-center flex-wrap">
|
|
<!-- Rating -->
|
|
<div class="d-flex gap-1">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
</div>
|
|
<!-- End Rating -->
|
|
<div class="ms-1">
|
|
<span class="fw-semi-bold text-white small me-1">4.95</span>
|
|
<span class="text-white-70 small">(1k+ reviews)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Card Pinned -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-7">
|
|
<div class="row mb-3">
|
|
<div class="col">
|
|
<small class="card-subtitle text-body">Design & Illustration</small>
|
|
<h3 class="card-title text-inherit">From the Top: Adobe Illustrator for Beginners</h3>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<div class="text-end">
|
|
<p class="text-muted small mb-0"><del>$129.99</del></p>
|
|
<h5 class="card-title text-primary">$119.99</h5>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="row align-items-center mb-2">
|
|
<div class="col">
|
|
<div class="avatar-group avatar-group-xs">
|
|
<span class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img5.jpg" alt="Image Description">
|
|
</span>
|
|
<span class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img4.jpg" alt="Image Description">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<ul class="list-inline list-separator text-body small">
|
|
<li class="list-inline-item">
|
|
<i class="bi-book me-1"></i> 7 lessons
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<i class="bi-clock me-1"></i> 7h 59m
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<i class="bi-bar-char-steps me-1"></i> All levels
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<p class="card-text text-body">The only course you need to learn Adobe Illustrator.</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html4" role="tabpanel" aria-labelledby="nav-htmlTab4">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<div class="d-grid gap-5">
|
|
<!-- Card -->
|
|
<a class="card card-flush" href="../demo-course/course-overview.html">
|
|
<div class="row align-items-md-center">
|
|
<div class="col-sm-5 mb-3 mb-sm-0">
|
|
<!-- Card Pinned -->
|
|
<div class="card-pinned">
|
|
<img class="card-img" src="../assets/svg/components/card-12.svg" alt="Image Description">
|
|
|
|
<div class="card-pinned-top-start">
|
|
<small class="badge bg-success">Bestseller</small>
|
|
</div>
|
|
|
|
<div class="card-pinned-bottom-start">
|
|
<div class="d-flex align-items-center flex-wrap">
|
|
<!-- Rating -->
|
|
<div class="d-flex gap-1">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
</div>
|
|
<!-- End Rating -->
|
|
<div class="ms-1">
|
|
<span class="fw-semi-bold text-white small me-1">4.91</span>
|
|
<span class="text-white-70 small">(1.5k+ reviews)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Card Pinned -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-7">
|
|
<div class="row mb-3">
|
|
<div class="col">
|
|
<small class="card-subtitle text-body">Code</small>
|
|
<h3 class="card-title text-inherit">Complete Python Bootcamp: Go from zero to hero in Python 3</h3>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<div class="text-end">
|
|
<p class="text-muted small mb-0"><del>$114.99</del></p>
|
|
<h5 class="card-title text-primary">$99.99</h5>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="row align-items-center mb-2">
|
|
<div class="col">
|
|
<div class="avatar-group avatar-group-xs">
|
|
<span class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img8.jpg" alt="Image Description">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<ul class="list-inline list-separator text-body small">
|
|
<li class="list-inline-item">
|
|
<i class="bi-book me-1"></i> 10 lessons
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<i class="bi-clock me-1"></i> 3h 25m
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<i class="bi-bar-char-steps me-1"></i> All levels
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<p class="card-text text-body">Learn Python like a Professional! Start from the basics and go all the way to creating your own applications and games!</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</a>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<a class="card card-flush" href="../demo-course/course-overview.html">
|
|
<div class="row align-items-md-center">
|
|
<div class="col-sm-5 mb-3 mb-sm-0">
|
|
<!-- Card Pinned -->
|
|
<div class="card-pinned">
|
|
<img class="card-img" src="../assets/svg/components/card-13.svg" alt="Image Description">
|
|
|
|
<div class="card-pinned-bottom-start">
|
|
<div class="d-flex align-items-center flex-wrap">
|
|
<!-- Rating -->
|
|
<div class="d-flex gap-1">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
</div>
|
|
<!-- End Rating -->
|
|
<div class="ms-1">
|
|
<span class="fw-semi-bold text-white small me-1">4.95</span>
|
|
<span class="text-white-70 small">(1k+ reviews)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Card Pinned -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-7">
|
|
<div class="row mb-3">
|
|
<div class="col">
|
|
<small class="card-subtitle text-body">Design & Illustration</small>
|
|
<h3 class="card-title text-inherit">From the Top: Adobe Illustrator for Beginners</h3>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<div class="text-end">
|
|
<p class="text-muted small mb-0"><del>$129.99</del></p>
|
|
<h5 class="card-title text-primary">$119.99</h5>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="row align-items-center mb-2">
|
|
<div class="col">
|
|
<div class="avatar-group avatar-group-xs">
|
|
<span class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img5.jpg" alt="Image Description">
|
|
</span>
|
|
<span class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img4.jpg" alt="Image Description">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<ul class="list-inline list-separator text-body small">
|
|
<li class="list-inline-item">
|
|
<i class="bi-book me-1"></i> 7 lessons
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<i class="bi-clock me-1"></i> 7h 59m
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<i class="bi-bar-char-steps me-1"></i> All levels
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<p class="card-text text-body">The only course you need to learn Adobe Illustrator.</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
</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">
|
|
<!-- Content -->
|
|
<div class="container content-space-1">
|
|
<h3 class="mb-4">Students also bought</h3>
|
|
|
|
<div class="d-grid gap-5">
|
|
<!-- Card -->
|
|
<a class="d-block" href="../demo-course/course-overview.html">
|
|
<div class="row">
|
|
<div class="col-sm-5 col-lg-3 mb-3 mb-sm-0">
|
|
<img class="card-img" src="../assets/svg/components/card-6.svg" alt="Image Description">
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-7 col-lg-9">
|
|
<div class="row">
|
|
<div class="col-lg-6 mb-2 mb-lg-0">
|
|
<h5 class="text-inherit">Get started with Vue.js</h5>
|
|
|
|
<div class="d-flex align-items-center flex-wrap">
|
|
<!-- Rating -->
|
|
<div class="d-flex gap-1">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
</div>
|
|
<!-- End Rating -->
|
|
<div class="ms-1">
|
|
<span class="text-body ms-1">4.95</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-6">
|
|
<div class="row">
|
|
<div class="col-7">
|
|
<div class="text-muted small mb-2">
|
|
<i class="bi-book me-1"></i> 10 lessons
|
|
</div>
|
|
<div class="text-muted small">
|
|
<i class="bi-clock me-1"></i> 3h 25m
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-5 text-end">
|
|
<p class="text-muted small mb-0"><del>$114.99</del></p>
|
|
<h5 class="text-primary mb-0">$99.99</h5>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</a>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<a class="d-block" href="../demo-course/course-overview.html">
|
|
<div class="row">
|
|
<div class="col-sm-5 col-lg-3 mb-3 mb-sm-0">
|
|
<img class="card-img" src="../assets/svg/components/card-4.svg" alt="Image Description">
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-7 col-lg-9">
|
|
<div class="row">
|
|
<div class="col-lg-6 mb-2 mb-lg-0">
|
|
<h5 class="text-inherit">Coding block for WordPress</h5>
|
|
|
|
<div class="d-flex align-items-center flex-wrap">
|
|
<!-- Rating -->
|
|
<div class="d-flex gap-1">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
</div>
|
|
<!-- End Rating -->
|
|
<div class="ms-1">
|
|
<span class="text-body ms-1">4.95</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-6">
|
|
<div class="row">
|
|
<div class="col-7">
|
|
<div class="text-muted small mb-2">
|
|
<i class="bi-book me-1"></i> 8 lessons
|
|
</div>
|
|
<div class="text-muted small">
|
|
<i class="bi-clock me-1"></i> 1h 14m
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-5 text-end">
|
|
<p class="text-muted small mb-0"><del>$59.99</del></p>
|
|
<h5 class="text-primary mb-0">$39.99</h5>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</a>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<a class="d-block" href="../demo-course/course-overview.html">
|
|
<div class="row">
|
|
<div class="col-sm-5 col-lg-3 mb-3 mb-sm-0">
|
|
<img class="card-img" src="../assets/svg/components/card-15.svg" alt="Image Description">
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-7 col-lg-9">
|
|
<div class="row">
|
|
<div class="col-lg-6 mb-2 mb-lg-0">
|
|
<h5 class="text-inherit">The Ultimate MySQL Bootcamp: Go from SQL Beginner to Expert</h5>
|
|
|
|
<div class="d-flex align-items-center flex-wrap">
|
|
<!-- Rating -->
|
|
<div class="d-flex gap-1">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
</div>
|
|
<!-- End Rating -->
|
|
<div class="ms-1">
|
|
<span class="text-body ms-1">4.87</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-6">
|
|
<div class="row">
|
|
<div class="col-7">
|
|
<div class="text-muted small mb-2">
|
|
<i class="bi-book me-1"></i> 23 lessons
|
|
</div>
|
|
<div class="text-muted small">
|
|
<i class="bi-clock me-1"></i> 7h 47m
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-5 text-end">
|
|
<p class="text-muted small mb-0"><del>$99.99</del></p>
|
|
<h5 class="text-primary mb-0">$89.99</h5>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
</div>
|
|
<!-- End Content -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html5" role="tabpanel" aria-labelledby="nav-htmlTab5">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Content -->
|
|
<div class="container content-space-1">
|
|
<h3 class="mb-4">Students also bought</h3>
|
|
|
|
<div class="d-grid gap-5">
|
|
<!-- Card -->
|
|
<a class="d-block" href="../demo-course/course-overview.html">
|
|
<div class="row">
|
|
<div class="col-sm-5 col-lg-3 mb-3 mb-sm-0">
|
|
<img class="card-img" src="../assets/svg/components/card-6.svg" alt="Image Description">
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-7 col-lg-9">
|
|
<div class="row">
|
|
<div class="col-lg-6 mb-2 mb-lg-0">
|
|
<h5 class="text-inherit">Get started with Vue.js</h5>
|
|
|
|
<div class="d-flex align-items-center flex-wrap">
|
|
<!-- Rating -->
|
|
<div class="d-flex gap-1">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
</div>
|
|
<!-- End Rating -->
|
|
<div class="ms-1">
|
|
<span class="text-body ms-1">4.95</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-6">
|
|
<div class="row">
|
|
<div class="col-7">
|
|
<div class="text-muted small mb-2">
|
|
<i class="bi-book me-1"></i> 10 lessons
|
|
</div>
|
|
<div class="text-muted small">
|
|
<i class="bi-clock me-1"></i> 3h 25m
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-5 text-end">
|
|
<p class="text-muted small mb-0"><del>$114.99</del></p>
|
|
<h5 class="text-primary mb-0">$99.99</h5>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</a>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<a class="d-block" href="../demo-course/course-overview.html">
|
|
<div class="row">
|
|
<div class="col-sm-5 col-lg-3 mb-3 mb-sm-0">
|
|
<img class="card-img" src="../assets/svg/components/card-4.svg" alt="Image Description">
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-7 col-lg-9">
|
|
<div class="row">
|
|
<div class="col-lg-6 mb-2 mb-lg-0">
|
|
<h5 class="text-inherit">Coding block for WordPress</h5>
|
|
|
|
<div class="d-flex align-items-center flex-wrap">
|
|
<!-- Rating -->
|
|
<div class="d-flex gap-1">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
</div>
|
|
<!-- End Rating -->
|
|
<div class="ms-1">
|
|
<span class="text-body ms-1">4.95</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-6">
|
|
<div class="row">
|
|
<div class="col-7">
|
|
<div class="text-muted small mb-2">
|
|
<i class="bi-book me-1"></i> 8 lessons
|
|
</div>
|
|
<div class="text-muted small">
|
|
<i class="bi-clock me-1"></i> 1h 14m
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-5 text-end">
|
|
<p class="text-muted small mb-0"><del>$59.99</del></p>
|
|
<h5 class="text-primary mb-0">$39.99</h5>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</a>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<a class="d-block" href="../demo-course/course-overview.html">
|
|
<div class="row">
|
|
<div class="col-sm-5 col-lg-3 mb-3 mb-sm-0">
|
|
<img class="card-img" src="../assets/svg/components/card-15.svg" alt="Image Description">
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-7 col-lg-9">
|
|
<div class="row">
|
|
<div class="col-lg-6 mb-2 mb-lg-0">
|
|
<h5 class="text-inherit">The Ultimate MySQL Bootcamp: Go from SQL Beginner to Expert</h5>
|
|
|
|
<div class="d-flex align-items-center flex-wrap">
|
|
<!-- Rating -->
|
|
<div class="d-flex gap-1">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
</div>
|
|
<!-- End Rating -->
|
|
<div class="ms-1">
|
|
<span class="text-body ms-1">4.87</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-6">
|
|
<div class="row">
|
|
<div class="col-7">
|
|
<div class="text-muted small mb-2">
|
|
<i class="bi-book me-1"></i> 23 lessons
|
|
</div>
|
|
<div class="text-muted small">
|
|
<i class="bi-clock me-1"></i> 7h 47m
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-5 text-end">
|
|
<p class="text-muted small mb-0"><del>$99.99</del></p>
|
|
<h5 class="text-primary mb-0">$89.99</h5>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
</div>
|
|
<!-- End Content -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Heading -->
|
|
<h2 id="component-6" class="hs-docs-heading">
|
|
Component #6 <a class="anchorjs-link" href="#component-6" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
|
</h2>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<!-- Header -->
|
|
<div class="card-header">
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment" id="navTab6" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="nav-resultTab6" href="#nav-result6" data-bs-toggle="pill" data-bs-target="#nav-result6" role="tab" aria-controls="nav-result6" aria-selected="true">Preview</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-htmlTab6" href="#nav-html6" data-bs-toggle="pill" data-bs-target="#nav-html6" role="tab" aria-controls="nav-html6" aria-selected="false">HTML</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="navTabContent6">
|
|
<div class="tab-pane fade p-4 show active" id="nav-result6" role="tabpanel" aria-labelledby="nav-resultTab6">
|
|
<div class="d-grid gap-3">
|
|
<!-- Card -->
|
|
<div class="card card-bordered card-stretched-vertical shadow-none">
|
|
<div class="row">
|
|
<div class="col-sm-4">
|
|
<div class="card-pinned">
|
|
<img class="card-img-top" src="../assets/img/300x180/img3.jpg" alt="Image Description">
|
|
|
|
<div class="card-pinned-top-start">
|
|
<span class="badge bg-success rounded-pill">New arrival</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-8">
|
|
<div class="card-body">
|
|
<div class="mb-2">
|
|
<a class="link-sm link-secondary" href="#">Accessories</a>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<h4 class="card-title">
|
|
<a class="text-dark" href="../demo-shop/product-overview.html">Herschel backpack in dark blue</a>
|
|
</h4>
|
|
<p class="card-text text-dark">$56.99</p>
|
|
</div>
|
|
|
|
<!-- Rating -->
|
|
<div class="mb-3">
|
|
<a class="d-inline-flex align-items-center" href="#">
|
|
<div class="d-flex gap-1 me-2">
|
|
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
</div>
|
|
<span class="small">0</span>
|
|
</a>
|
|
</div>
|
|
<!-- End Rating -->
|
|
|
|
<div class="card-footer">
|
|
<div class="d-flex gap-2">
|
|
<button type="button" class="btn btn-outline-primary btn-sm btn-transition rounded-pill">Add to cart</button>
|
|
<button type="button" class="btn btn-soft-secondary btn-sm btn-transition rounded-pill">
|
|
<i class="bi-heart me-1"></i> Wishlist
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<div class="card card-bordered card-stretched-vertical shadow-none">
|
|
<div class="row">
|
|
<div class="col-sm-4">
|
|
<div class="card-pinned">
|
|
<img class="card-img" src="../assets/img/300x180/img1.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-8">
|
|
<div class="card-body">
|
|
<div class="mb-2">
|
|
<a class="link-sm link-secondary" href="#">Clothing</a>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<h4 class="card-title">
|
|
<a class="text-dark" href="../demo-shop/product-overview.html">Front hoodie</a>
|
|
</h4>
|
|
<p class="card-text text-dark">$91.88</p>
|
|
</div>
|
|
|
|
<!-- Rating -->
|
|
<div class="mb-3">
|
|
<a class="d-inline-flex align-items-center" href="#">
|
|
<div class="d-flex gap-1 me-2">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
</div>
|
|
<span class="small">40</span>
|
|
</a>
|
|
</div>
|
|
<!-- End Rating -->
|
|
|
|
<div class="card-footer">
|
|
<div class="d-flex gap-2">
|
|
<button type="button" class="btn btn-outline-primary btn-sm btn-transition rounded-pill">Add to cart</button>
|
|
<button type="button" class="btn btn-soft-secondary btn-sm btn-transition rounded-pill">
|
|
<i class="bi-heart me-1"></i> Wishlist
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</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="d-grid gap-3">
|
|
<!-- Card -->
|
|
<div class="card card-bordered card-stretched-vertical shadow-none">
|
|
<div class="row">
|
|
<div class="col-sm-4">
|
|
<div class="card-pinned">
|
|
<img class="card-img-top" src="../assets/img/300x180/img3.jpg" alt="Image Description">
|
|
|
|
<div class="card-pinned-top-start">
|
|
<span class="badge bg-success rounded-pill">New arrival</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-8">
|
|
<div class="card-body">
|
|
<div class="mb-2">
|
|
<a class="link-sm link-secondary" href="#">Accessories</a>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<h4 class="card-title">
|
|
<a class="text-dark" href="../demo-shop/product-overview.html">Herschel backpack in dark blue</a>
|
|
</h4>
|
|
<p class="card-text text-dark">$56.99</p>
|
|
</div>
|
|
|
|
<!-- Rating -->
|
|
<div class="mb-3">
|
|
<a class="d-inline-flex align-items-center" href="#">
|
|
<div class="d-flex gap-1 me-2">
|
|
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
</div>
|
|
<span class="small">0</span>
|
|
</a>
|
|
</div>
|
|
<!-- End Rating -->
|
|
|
|
<div class="card-footer">
|
|
<div class="d-flex gap-2">
|
|
<button type="button" class="btn btn-outline-primary btn-sm btn-transition rounded-pill">Add to cart</button>
|
|
<button type="button" class="btn btn-soft-secondary btn-sm btn-transition rounded-pill">
|
|
<i class="bi-heart me-1"></i> Wishlist
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<div class="card card-bordered card-stretched-vertical shadow-none">
|
|
<div class="row">
|
|
<div class="col-sm-4">
|
|
<div class="card-pinned">
|
|
<img class="card-img" src="../assets/img/300x180/img1.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-8">
|
|
<div class="card-body">
|
|
<div class="mb-2">
|
|
<a class="link-sm link-secondary" href="#">Clothing</a>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<h4 class="card-title">
|
|
<a class="text-dark" href="../demo-shop/product-overview.html">Front hoodie</a>
|
|
</h4>
|
|
<p class="card-text text-dark">$91.88</p>
|
|
</div>
|
|
|
|
<!-- Rating -->
|
|
<div class="mb-3">
|
|
<a class="d-inline-flex align-items-center" href="#">
|
|
<div class="d-flex gap-1 me-2">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
</div>
|
|
<span class="small">40</span>
|
|
</a>
|
|
</div>
|
|
<!-- End Rating -->
|
|
|
|
<div class="card-footer">
|
|
<div class="d-flex gap-2">
|
|
<button type="button" class="btn btn-outline-primary btn-sm btn-transition rounded-pill">Add to cart</button>
|
|
<button type="button" class="btn btn-soft-secondary btn-sm btn-transition rounded-pill">
|
|
<i class="bi-heart me-1"></i> Wishlist
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
</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 Implementing Plugins -->
|
|
<script src="../assets/js/vendor.min.js"></script>
|
|
|
|
<!-- JS Front -->
|
|
<script src="../assets/js/theme.min.js"></script>
|
|
|
|
<!-- JS Plugins Init. -->
|
|
<script>
|
|
(function() {
|
|
// INITIALIZATION OF HEADER
|
|
// =======================================================
|
|
new HSHeader('#header').init()
|
|
|
|
|
|
// INITIALIZATION OF NAV SCROLLER
|
|
// =======================================================
|
|
new HsNavScroller('.js-nav-scroller', {
|
|
delay: 400,
|
|
offset: 140
|
|
})
|
|
|
|
|
|
// INITIALIZATION OF LISTJS COMPONENT
|
|
// =======================================================
|
|
HSCore.components.HSList.init('#snippetsSearch')
|
|
const snippetsSearch = HSCore.components.HSList.getItem('snippetsSearch')
|
|
|
|
|
|
// GET JSON FILE RESULTS
|
|
// =======================================================
|
|
fetch('../assets/json/snippets-search.json')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
snippetsSearch.add(data)
|
|
})
|
|
|
|
|
|
// INITIALIZATION OF GO TO
|
|
// =======================================================
|
|
new HSGoTo('.js-go-to')
|
|
})()
|
|
</script>
|
|
</body>
|
|
</html>
|