4939 lines
259 KiB
HTML
4939 lines
259 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 Grid - Snippets | Front - Multipurpose Responsive Template</title>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="shortcut icon" href="../favicon.ico">
|
|
|
|
<!-- Font -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
|
|
|
<!-- CSS Implementing Plugins -->
|
|
<link rel="stylesheet" href="../assets/vendor/bootstrap-icons/font/bootstrap-icons.css">
|
|
<link rel="stylesheet" href="../assets/vendor/swiper/swiper-bundle.min.css">
|
|
|
|
<!-- CSS Front Template -->
|
|
<link rel="stylesheet" href="../assets/css/theme.min.css">
|
|
<link rel="stylesheet" href="../assets/css/snippets.min.css">
|
|
</head>
|
|
|
|
<body class="navbar-sidebar-aside-lg">
|
|
<!-- ========== HEADER ========== -->
|
|
<header id="header" class="navbar navbar-expand navbar-fixed navbar-end navbar-light navbar-sticky-lg-top bg-white">
|
|
<div class="container-fluid">
|
|
<nav class="navbar-nav-wrap">
|
|
<div class="row flex-grow-1">
|
|
<!-- Default Logo -->
|
|
<div class="docs-navbar-sidebar-container d-flex align-items-center mb-2 mb-lg-0">
|
|
<a class="navbar-brand" href="../snippets/index.html" aria-label="Space">
|
|
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
|
</a>
|
|
<a href="../documentation/changelog.html">
|
|
<span class="badge bg-soft-primary text-primary">v4.1</span>
|
|
</a>
|
|
</div>
|
|
<!-- End Default Logo -->
|
|
|
|
<div class="col-md px-lg-0">
|
|
<div class="d-flex justify-content-between align-items-center px-lg-5 px-xl-10">
|
|
<div class="d-none d-md-block">
|
|
<!-- Search Form -->
|
|
<form id="snippetsSearch" class="position-relative"
|
|
data-hs-list-options='{
|
|
"searchMenu": true,
|
|
"keyboard": true,
|
|
"item": "searchTemplate",
|
|
"valueNames": ["component", "category", {"name": "link", "attr": "href"}],
|
|
"empty": "#searchNoResults"
|
|
}'>
|
|
<!-- Input Group -->
|
|
<div class="input-group input-group-merge navbar-input-group">
|
|
<div class="input-group-prepend input-group-text">
|
|
<i class="bi-search"></i>
|
|
</div>
|
|
|
|
<input type="search" class="search form-control form-control-sm" placeholder="Search in snippets" aria-label="Search in snippets">
|
|
|
|
<a class="input-group-append input-group-text" href="javascript:;">
|
|
<i id="clearSearchResultsIcon" class="bi-x" style="display: none;"></i>
|
|
</a>
|
|
</div>
|
|
<!-- End Input Group -->
|
|
|
|
<!-- List -->
|
|
<div class="list dropdown-menu w-100 overflow-auto" style="max-height: 16rem;"></div>
|
|
<!-- End List -->
|
|
|
|
<!-- Empty -->
|
|
<div id="searchNoResults" style="display: none;">
|
|
<div class="text-center p-4">
|
|
<img class="mb-3" src="../assets/svg/illustrations/oc-error.svg" alt="Image Description" style="width: 10rem;">
|
|
<p class="mb-0">No Results</p>
|
|
</div>
|
|
</div>
|
|
<!-- End Empty -->
|
|
</form>
|
|
<!-- End Search Form -->
|
|
|
|
<!-- List Item Template -->
|
|
<div class="d-none">
|
|
<div id="searchTemplate" class="dropdown-item">
|
|
<a class="d-block link" href="#">
|
|
<span class="category d-block fw-normal text-muted mb-1"></span>
|
|
<span class="component text-dark"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End List Item Template -->
|
|
</div>
|
|
|
|
<!-- Navbar -->
|
|
<ul class="navbar-nav p-0">
|
|
<li class="nav-item">
|
|
<a class="btn btn-ghost-secondary btn-sm" href="https://htmlstream.com/contact-us" target="_blank">
|
|
Get Support <i class="bi-box-arrow-up-right ms-1"></i>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="btn btn-primary btn-sm" href="../index.html">
|
|
<i class="bi-eye me-1"></i> Preview Demo
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Navbar -->
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
<!-- ========== END HEADER ========== -->
|
|
|
|
<!-- ========== MAIN CONTENT ========== -->
|
|
<main id="content" role="main">
|
|
<!-- Navbar -->
|
|
<nav class="js-nav-scroller navbar navbar-expand-lg navbar-sidebar navbar-vertical navbar-light bg-white border-end"
|
|
data-hs-nav-scroller-options='{
|
|
"type": "vertical",
|
|
"target": ".navbar-nav .active",
|
|
"offset": 80
|
|
}'>
|
|
<!-- Navbar Toggle -->
|
|
<button type="button" class="navbar-toggler btn btn-white d-grid w-100" data-bs-toggle="collapse" data-bs-target="#navbarVerticalNavMenu" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarVerticalNavMenu">
|
|
<span class="d-flex justify-content-between align-items-center">
|
|
<span class="h6 mb-0">Nav menu</span>
|
|
|
|
<span class="navbar-toggler-default">
|
|
<i class="bi-list"></i>
|
|
</span>
|
|
|
|
<span class="navbar-toggler-toggled">
|
|
<i class="bi-x"></i>
|
|
</span>
|
|
</span>
|
|
</button>
|
|
<!-- End Navbar Toggle -->
|
|
|
|
<!-- Navbar Collapse -->
|
|
<div id="navbarVerticalNavMenu" class="collapse navbar-collapse">
|
|
<div class="navbar-brand-wrapper border-end" style="height: auto;">
|
|
<!-- Default Logo -->
|
|
<div class="d-flex align-items-center mb-3">
|
|
<a class="navbar-brand" href="../snippets/index.html" aria-label="Space">
|
|
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
|
</a>
|
|
<a class="navbar-brand-badge" href="../documentation/changelog.html">
|
|
<span class="badge bg-soft-primary text-primary ms-2">v4.1</span>
|
|
</a>
|
|
</div>
|
|
<!-- End Default Logo -->
|
|
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment nav-fill nav-justified">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="../documentation/index.html">Docs</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="../snippets/index.html">Snippets</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
|
|
<div class="docs-navbar-sidebar-aside-body navbar-sidebar-aside-body">
|
|
<ul id="navbarSettings" class="navbar-nav nav nav-vertical nav-tabs nav-tabs-borderless nav-sm">
|
|
<li class="nav-item">
|
|
<span class="nav-subtitle">Snippets</span>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/index.html">Introduction</a>
|
|
</li>
|
|
|
|
<li class="nav-item my-2 my-lg-5"></li>
|
|
|
|
<li class="nav-item">
|
|
<span class="nav-subtitle">Navbar / Heroes</span>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/navbar.html">Headers (Navbar)</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/hero-sections.html">Hero Sections</a>
|
|
</li>
|
|
|
|
<li class="nav-item my-2 my-lg-5"></li>
|
|
|
|
<li class="nav-item">
|
|
<span class="nav-subtitle">Content</span>
|
|
</li>
|
|
|
|
<li class="nav-item ">
|
|
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavFeaturesCollapse" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="snippetsSidebarNavFeaturesCollapse">Features</a>
|
|
|
|
<div id="snippetsSidebarNavFeaturesCollapse" class="nav-collapse collapse ">
|
|
<a class="nav-link " href="features-general.html">General</a>
|
|
<a class="nav-link " href="features-stats.html">Stats</a>
|
|
<a class="nav-link " href="features-step.html">Step</a>
|
|
<a class="nav-link " href="features-navs.html">Navs (Tabs)</a>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/icon-blocks.html">Icon Blocks</a>
|
|
</li>
|
|
|
|
<li class="nav-item ">
|
|
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavCardsCollapse" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="snippetsSidebarNavCardsCollapse">Cards</a>
|
|
|
|
<div id="snippetsSidebarNavCardsCollapse" class="nav-collapse collapse ">
|
|
<a class="nav-link " href="cards-grid.html">Grid</a>
|
|
<a class="nav-link " href="cards-list.html">List</a>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="nav-item 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 active" href="directory-grid.html">Grid</a>
|
|
<a class="nav-link " href="directory-list.html">List</a>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/testimonials.html">Testimonials</a>
|
|
</li>
|
|
|
|
<li class="nav-item ">
|
|
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavBlogsCollapse" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="snippetsSidebarNavBlogsCollapse">Blogs</a>
|
|
|
|
<div id="snippetsSidebarNavBlogsCollapse" class="nav-collapse collapse ">
|
|
<a class="nav-link " href="blogs-grid.html">Grid</a>
|
|
<a class="nav-link " href="blogs-list.html">List</a>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/tables.html">Tables</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/ecommerce.html">E-commerce</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/pricing.html">Pricing</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/team-sections.html">Team Sections</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/breadcrumb.html">Breadcrumb</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/cta.html">Call-to-Action (CTA)</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/modals.html">Modals</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/portfolio.html">Portfolio</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/gallery.html">Gallery</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/clients.html">Clients</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/countdown.html">Countdown</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/faq.html">FAQ</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/lists.html">Lists</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/collapse-accordion.html">Collapse/Accordion</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/comments.html">Comments</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/feedback-and-reviews.html">Feedback & Reviews</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/user-profile.html">User Profile</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="sidebar-examples.html">Sidebar Examples</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="calendar-view.html">Calendar View</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="notification.html">Notification</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="content-sections.html">Content Sections</a>
|
|
</li>
|
|
|
|
<li class="nav-item my-2 my-lg-5"></li>
|
|
|
|
<li class="nav-item">
|
|
<small class="nav-subtitle">Forms</small>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="forms-authentication.html">Authentication</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="forms-feedback.html">Feedback</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="forms-filters.html">Filters</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="forms-search.html">Search</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="forms-directory.html">Directory</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="forms-subscribe.html">Subscribe</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="forms-account.html">Account</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="forms-wizard-and-steps.html">Wizard & Steps</a>
|
|
</li>
|
|
|
|
<li class="nav-item my-2 my-lg-5"></li>
|
|
|
|
<li class="nav-item">
|
|
<small class="nav-subtitle">Contact / Footer</small>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/contact-sections.html">Contact Sections</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/footer.html">Footer</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- End Navbar Collapse -->
|
|
</nav>
|
|
<!-- End Navbar -->
|
|
|
|
<!-- Content -->
|
|
<div class="navbar-sidebar-aside-content content-space-1 content-space-md-2 px-lg-5 px-xl-10">
|
|
<!-- Page Header -->
|
|
<div class="docs-page-header">
|
|
<div class="row align-items-center">
|
|
<div class="col-sm">
|
|
<h1 class="docs-page-header-title">Directory Grid</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Page Header -->
|
|
|
|
<!-- Heading -->
|
|
<h2 id="component-1" class="hs-docs-heading">
|
|
Component #1 <a class="anchorjs-link" href="#component-1" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
|
</h2>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<!-- Header -->
|
|
<div class="card-header">
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment" id="navTab1" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="nav-resultTab1" href="#nav-result1" data-bs-toggle="pill" data-bs-target="#nav-result1" role="tab" aria-controls="nav-result1" aria-selected="true">Preview</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-htmlTab1" href="#nav-html1" data-bs-toggle="pill" data-bs-target="#nav-html1" role="tab" aria-controls="nav-html1" aria-selected="false">HTML</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="navTabContent1">
|
|
<div class="tab-pane fade p-4 show active" id="nav-result1" role="tabpanel" aria-labelledby="nav-resultTab1">
|
|
<!-- Card Grid -->
|
|
<div class="container">
|
|
<div class="row mb-5">
|
|
<div class="col-lg-6 mb-3 mb-lg-5">
|
|
<!-- Card -->
|
|
<a class="card card-bordered card-transition h-100" href="../demo-help-desk/listing.html">
|
|
<div class="card-body">
|
|
<!-- Media -->
|
|
<div class="d-block d-sm-flex">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon text-primary mb-2 mb-sm-0">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path opacity="0.3" d="M4.05424 15.1982C8.34524 7.76818 13.5782 3.26318 20.9282 2.01418C21.0729 1.98837 21.2216 1.99789 21.3618 2.04193C21.502 2.08597 21.6294 2.16323 21.7333 2.26712C21.8372 2.37101 21.9144 2.49846 21.9585 2.63863C22.0025 2.7788 22.012 2.92754 21.9862 3.07218C20.7372 10.4222 16.2322 15.6552 8.80224 19.9462L4.05424 15.1982ZM3.81924 17.3372L2.63324 20.4482C2.58427 20.5765 2.5735 20.7163 2.6022 20.8507C2.63091 20.9851 2.69788 21.1082 2.79503 21.2054C2.89218 21.3025 3.01536 21.3695 3.14972 21.3982C3.28408 21.4269 3.42387 21.4161 3.55224 21.3672L6.66524 20.1802L3.81924 17.3372ZM16.5002 5.99818C16.2036 5.99818 15.9136 6.08615 15.6669 6.25097C15.4202 6.41579 15.228 6.65006 15.1144 6.92415C15.0009 7.19824 14.9712 7.49984 15.0291 7.79081C15.0869 8.08178 15.2298 8.34906 15.4396 8.55884C15.6494 8.76862 15.9166 8.91148 16.2076 8.96935C16.4986 9.02723 16.8002 8.99753 17.0743 8.884C17.3484 8.77046 17.5826 8.5782 17.7474 8.33153C17.9123 8.08486 18.0002 7.79485 18.0002 7.49818C18.0002 7.10035 17.8422 6.71882 17.5609 6.43752C17.2796 6.15621 16.8981 5.99818 16.5002 5.99818Z" fill="#035A4B"/>
|
|
<path d="M4.05423 15.1982L2.24723 13.3912C2.15505 13.299 2.08547 13.1867 2.04395 13.0632C2.00243 12.9396 1.9901 12.8081 2.00793 12.679C2.02575 12.5498 2.07325 12.4266 2.14669 12.3189C2.22013 12.2112 2.31752 12.1219 2.43123 12.0582L9.15323 8.28918C7.17353 10.3717 5.4607 12.6926 4.05423 15.1982V15.1982ZM8.80023 19.9442L10.6072 21.7512C10.6994 21.8434 10.8117 21.9129 10.9352 21.9545C11.0588 21.996 11.1903 22.0083 11.3195 21.9905C11.4486 21.9727 11.5718 21.9252 11.6795 21.8517C11.7872 21.7783 11.8765 21.6809 11.9402 21.5672L15.7092 14.8442C13.6269 16.8245 11.3061 18.5377 8.80023 19.9442V19.9442ZM7.04023 18.1832L12.5832 12.6402C12.7381 12.4759 12.8228 12.2577 12.8195 12.032C12.8161 11.8063 12.725 11.5907 12.5653 11.4311C12.4057 11.2714 12.1901 11.1803 11.9644 11.1769C11.7387 11.1736 11.5205 11.2583 11.3562 11.4132L5.81323 16.9562L7.04023 18.1832Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-sm-4">
|
|
<h3 class="card-title">Getting started</h3>
|
|
<p class="card-text text-body">Welcome to Front! We're so glad you're here. Let's get started!</p>
|
|
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<!-- Avatar Group -->
|
|
<div class="avatar-group avatar-group-xs">
|
|
<div class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img1.jpg" alt="Image Description">
|
|
</div>
|
|
<div class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img8.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Avatar Group -->
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-2">
|
|
<p class="card-text text-dark small mb-0">1 article in this collection</p>
|
|
<p class="card-text text-dark small">
|
|
<span class="text-muted">Written by</span>
|
|
Luisa Woodfine
|
|
<span class="text-muted">and</span>
|
|
Neil Galavan
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-6 mb-3 mb-lg-5">
|
|
<!-- Card -->
|
|
<a class="card card-bordered card-transition h-100" href="../demo-help-desk/listing.html">
|
|
<div class="card-body">
|
|
<!-- Media -->
|
|
<div class="d-block d-sm-flex">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon text-primary mb-2 mb-sm-0">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path opacity="0.3" d="M22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2C17.5 2 22 6.5 22 12ZM12 7C10.3 7 9 8.3 9 10C9 11.7 10.3 13 12 13C13.7 13 15 11.7 15 10C15 8.3 13.7 7 12 7Z" fill="#035A4B"/>
|
|
<path d="M12 22C14.6 22 17 21 18.7 19.4C17.9 16.9 15.2 15 12 15C8.8 15 6.09999 16.9 5.29999 19.4C6.99999 21 9.4 22 12 22Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-sm-4">
|
|
<h3 class="card-title">Account</h3>
|
|
<p class="card-text text-body">Adjust your profile and preferences to make Front work just for you!</p>
|
|
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<!-- Avatar Group -->
|
|
<div class="avatar-group avatar-group-xs">
|
|
<div class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img9.jpg" alt="Image Description">
|
|
</div>
|
|
<div class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Avatar Group -->
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-2">
|
|
<p class="card-text text-dark small mb-0">2 article in this collection</p>
|
|
<p class="card-text text-dark small">
|
|
<span class="text-muted">Written by</span>
|
|
Fiona Burke, Luisa Woodfine
|
|
<span class="text-muted">and</span>
|
|
Neil Galavan
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-6 mb-3 mb-lg-5">
|
|
<!-- Card -->
|
|
<a class="card card-bordered card-transition h-100" href="../demo-help-desk/listing.html">
|
|
<div class="card-body">
|
|
<!-- Media -->
|
|
<div class="d-block d-sm-flex">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon text-primary mb-2 mb-sm-0">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<g id="com/com014">
|
|
<path id="vector" opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M4 4L11.6314 2.56911C11.875 2.52343 12.125 2.52343 12.3686 2.56911L20 4V11.9033C20 15.696 18.0462 19.2211 14.83 21.2313L12.53 22.6687C12.2057 22.8714 11.7943 22.8714 11.47 22.6687L9.17001 21.2313C5.95382 19.2211 4 15.696 4 11.9033L4 4Z" fill="#035A4B"/>
|
|
<path id="group" fill-rule="evenodd" clip-rule="evenodd" d="M9.5 10.5C9.5 9.11929 10.6193 8 12 8C13.3807 8 14.5 9.11929 14.5 10.5V11C15.0523 11 15.5 11.4477 15.5 12V15C15.5 15.5523 15.0523 16 14.5 16H9.5C8.94772 16 8.5 15.5523 8.5 15V12C8.5 11.4477 8.94772 11 9.5 11V10.5ZM12 9C11.1716 9 10.5 9.67157 10.5 10.5V11H13.5V10.5C13.5 9.67157 12.8284 9 12 9Z" fill="#035A4B"/>
|
|
</g>
|
|
</svg>
|
|
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-sm-4">
|
|
<h3 class="card-title">Data security</h3>
|
|
<p class="card-text text-body">Detailed information on how our customer data is securely stored.</p>
|
|
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<!-- Avatar Group -->
|
|
<div class="avatar-group avatar-group-xs">
|
|
<div class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img9.jpg" alt="Image Description">
|
|
</div>
|
|
<div class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img4.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Avatar Group -->
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-2">
|
|
<p class="card-text text-dark small mb-0">5 article in this collection</p>
|
|
<p class="card-text text-dark small">
|
|
<span class="text-muted">Written by</span>
|
|
Fiona Burke, Luisa Woodfine, Neil Galavan
|
|
<span class="text-muted">and</span>
|
|
Monica Garcia
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-6 mb-3 mb-lg-5">
|
|
<!-- Card -->
|
|
<a class="card card-bordered card-transition h-100" href="../demo-help-desk/listing.html">
|
|
<div class="card-body">
|
|
<!-- Media -->
|
|
<div class="d-block d-sm-flex">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon text-primary mb-2 mb-sm-0">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path opacity="0.3" d="M18 10V20C18 20.6 18.4 21 19 21C19.6 21 20 20.6 20 20V10H18Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M11 10V17H6V10H4V20C4 20.6 4.4 21 5 21H12C12.6 21 13 20.6 13 20V10H11Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M10 10C10 11.1 9.1 12 8 12C6.9 12 6 11.1 6 10H10Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M18 10C18 11.1 17.1 12 16 12C14.9 12 14 11.1 14 10H18Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M14 4H10V10H14V4Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M17 4H20L22 10H18L17 4Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M7 4H4L2 10H6L7 4Z" fill="#035A4B"/>
|
|
<path d="M6 10C6 11.1 5.1 12 4 12C2.9 12 2 11.1 2 10H6ZM10 10C10 11.1 10.9 12 12 12C13.1 12 14 11.1 14 10H10ZM18 10C18 11.1 18.9 12 20 12C21.1 12 22 11.1 22 10H18ZM19 2H5C4.4 2 4 2.4 4 3V4H20V3C20 2.4 19.6 2 19 2ZM12 17C12 16.4 11.6 16 11 16H6C5.4 16 5 16.4 5 17C5 17.6 5.4 18 6 18H11C11.6 18 12 17.6 12 17Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-sm-4">
|
|
<h3 class="card-title">Market</h3>
|
|
<p class="card-text text-body">Some further explanation on when Front can and cannot be used.</p>
|
|
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<!-- Avatar Group -->
|
|
<div class="avatar-group avatar-group-xs">
|
|
<div class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img7.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Avatar Group -->
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-2">
|
|
<p class="card-text text-dark small mb-0">3 article in this collection</p>
|
|
<p class="card-text text-dark small">
|
|
<span class="text-muted">Written by</span>
|
|
Luisa Woodfine
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-6 mb-3 mb-lg-5">
|
|
<!-- Card -->
|
|
<a class="card card-bordered card-transition h-100" href="../demo-help-desk/listing.html">
|
|
<div class="card-body">
|
|
<!-- Media -->
|
|
<div class="d-block d-sm-flex">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon text-primary mb-2 mb-sm-0">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M22 7H2V11H22V7Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M21 19H3C2.4 19 2 18.6 2 18V6C2 5.4 2.4 5 3 5H21C21.6 5 22 5.4 22 6V18C22 18.6 21.6 19 21 19ZM14 14C14 13.4 13.6 13 13 13H5C4.4 13 4 13.4 4 14C4 14.6 4.4 15 5 15H13C13.6 15 14 14.6 14 14ZM16 15.5C16 16.3 16.7 17 17.5 17H18.5C19.3 17 20 16.3 20 15.5C20 14.7 19.3 14 18.5 14H17.5C16.7 14 16 14.7 16 15.5Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-sm-4">
|
|
<h3 class="card-title">Subscription</h3>
|
|
<p class="card-text text-body">Assistance on how and when you might use the subscription product.</p>
|
|
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<!-- Avatar Group -->
|
|
<div class="avatar-group avatar-group-xs">
|
|
<div class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img9.jpg" alt="Image Description">
|
|
</div>
|
|
<div class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Avatar Group -->
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-2">
|
|
<p class="card-text text-dark small mb-0">2 article in this collection</p>
|
|
<p class="card-text text-dark small">
|
|
<span class="text-muted">Written by</span>
|
|
Fiona Burke, Luisa Woodfine
|
|
<span class="text-muted">and</span>
|
|
Neil Galavan
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-6 mb-3 mb-lg-5">
|
|
<!-- Card -->
|
|
<a class="card card-bordered card-transition h-100" href="../demo-help-desk/listing.html">
|
|
<div class="card-body">
|
|
<!-- Media -->
|
|
<div class="d-block d-sm-flex">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon text-primary mb-2 mb-sm-0">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M12 17C16.4183 17 20 13.4183 20 9C20 4.58172 16.4183 1 12 1C7.58172 1 4 4.58172 4 9C4 13.4183 7.58172 17 12 17Z" fill="#035A4B"/>
|
|
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M6.53819 9L10.568 19.3624L11.976 18.8149L13.3745 19.3674L17.4703 9H6.53819ZM9.46188 11H14.5298L11.9759 17.4645L9.46188 11Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M10 22H14V22C14 23.1046 13.1046 24 12 24V24C10.8954 24 10 23.1046 10 22V22Z" fill="#035A4B"/>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 17C8 16.4477 8.44772 16 9 16H15C15.5523 16 16 16.4477 16 17C16 17.5523 15.5523 18 15 18C15.5523 18 16 18.4477 16 19C16 19.5523 15.5523 20 15 20C15.5523 20 16 20.4477 16 21C16 21.5523 15.5523 22 15 22H9C8.44772 22 8 21.5523 8 21C8 20.4477 8.44772 20 9 20C8.44772 20 8 19.5523 8 19C8 18.4477 8.44772 18 9 18C8.44772 18 8 17.5523 8 17Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-sm-4">
|
|
<h3 class="card-title">Tips, tricks & more</h3>
|
|
<p class="card-text text-body">Tips and tools for beginners and experts alike.</p>
|
|
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<!-- Avatar Group -->
|
|
<div class="avatar-group avatar-group-xs">
|
|
<div class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img7.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Avatar Group -->
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-2">
|
|
<p class="card-text text-dark small mb-0">2 article in this collection</p>
|
|
<p class="card-text text-dark small">
|
|
<span class="text-muted">Written by</span>
|
|
Luisa Woodfine
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="text-center">
|
|
<a class="btn btn-outline-primary btn-transition" href="../demo-help-desk/listing.html">See all topics</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Card Grid -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html1" role="tabpanel" aria-labelledby="nav-htmlTab1">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Card Grid -->
|
|
<div class="container content-space-2 content-space-lg-3">
|
|
<div class="row mb-5">
|
|
<div class="col-lg-6 mb-3 mb-lg-5">
|
|
<!-- Card -->
|
|
<a class="card card-bordered card-transition h-100" href="../demo-help-desk/listing.html">
|
|
<div class="card-body">
|
|
<!-- Media -->
|
|
<div class="d-block d-sm-flex">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon text-primary mb-2 mb-sm-0">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path opacity="0.3" d="M4.05424 15.1982C8.34524 7.76818 13.5782 3.26318 20.9282 2.01418C21.0729 1.98837 21.2216 1.99789 21.3618 2.04193C21.502 2.08597 21.6294 2.16323 21.7333 2.26712C21.8372 2.37101 21.9144 2.49846 21.9585 2.63863C22.0025 2.7788 22.012 2.92754 21.9862 3.07218C20.7372 10.4222 16.2322 15.6552 8.80224 19.9462L4.05424 15.1982ZM3.81924 17.3372L2.63324 20.4482C2.58427 20.5765 2.5735 20.7163 2.6022 20.8507C2.63091 20.9851 2.69788 21.1082 2.79503 21.2054C2.89218 21.3025 3.01536 21.3695 3.14972 21.3982C3.28408 21.4269 3.42387 21.4161 3.55224 21.3672L6.66524 20.1802L3.81924 17.3372ZM16.5002 5.99818C16.2036 5.99818 15.9136 6.08615 15.6669 6.25097C15.4202 6.41579 15.228 6.65006 15.1144 6.92415C15.0009 7.19824 14.9712 7.49984 15.0291 7.79081C15.0869 8.08178 15.2298 8.34906 15.4396 8.55884C15.6494 8.76862 15.9166 8.91148 16.2076 8.96935C16.4986 9.02723 16.8002 8.99753 17.0743 8.884C17.3484 8.77046 17.5826 8.5782 17.7474 8.33153C17.9123 8.08486 18.0002 7.79485 18.0002 7.49818C18.0002 7.10035 17.8422 6.71882 17.5609 6.43752C17.2796 6.15621 16.8981 5.99818 16.5002 5.99818Z" fill="#035A4B"/>
|
|
<path d="M4.05423 15.1982L2.24723 13.3912C2.15505 13.299 2.08547 13.1867 2.04395 13.0632C2.00243 12.9396 1.9901 12.8081 2.00793 12.679C2.02575 12.5498 2.07325 12.4266 2.14669 12.3189C2.22013 12.2112 2.31752 12.1219 2.43123 12.0582L9.15323 8.28918C7.17353 10.3717 5.4607 12.6926 4.05423 15.1982V15.1982ZM8.80023 19.9442L10.6072 21.7512C10.6994 21.8434 10.8117 21.9129 10.9352 21.9545C11.0588 21.996 11.1903 22.0083 11.3195 21.9905C11.4486 21.9727 11.5718 21.9252 11.6795 21.8517C11.7872 21.7783 11.8765 21.6809 11.9402 21.5672L15.7092 14.8442C13.6269 16.8245 11.3061 18.5377 8.80023 19.9442V19.9442ZM7.04023 18.1832L12.5832 12.6402C12.7381 12.4759 12.8228 12.2577 12.8195 12.032C12.8161 11.8063 12.725 11.5907 12.5653 11.4311C12.4057 11.2714 12.1901 11.1803 11.9644 11.1769C11.7387 11.1736 11.5205 11.2583 11.3562 11.4132L5.81323 16.9562L7.04023 18.1832Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-sm-4">
|
|
<h3 class="card-title">Getting started</h3>
|
|
<p class="card-text text-body">Welcome to Front! We're so glad you're here. Let's get started!</p>
|
|
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<!-- Avatar Group -->
|
|
<div class="avatar-group avatar-group-xs">
|
|
<div class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img1.jpg" alt="Image Description">
|
|
</div>
|
|
<div class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img8.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Avatar Group -->
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-2">
|
|
<p class="card-text text-dark small mb-0">1 article in this collection</p>
|
|
<p class="card-text text-dark small">
|
|
<span class="text-muted">Written by</span>
|
|
Luisa Woodfine
|
|
<span class="text-muted">and</span>
|
|
Neil Galavan
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-6 mb-3 mb-lg-5">
|
|
<!-- Card -->
|
|
<a class="card card-bordered card-transition h-100" href="../demo-help-desk/listing.html">
|
|
<div class="card-body">
|
|
<!-- Media -->
|
|
<div class="d-block d-sm-flex">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon text-primary mb-2 mb-sm-0">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path opacity="0.3" d="M22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2C17.5 2 22 6.5 22 12ZM12 7C10.3 7 9 8.3 9 10C9 11.7 10.3 13 12 13C13.7 13 15 11.7 15 10C15 8.3 13.7 7 12 7Z" fill="#035A4B"/>
|
|
<path d="M12 22C14.6 22 17 21 18.7 19.4C17.9 16.9 15.2 15 12 15C8.8 15 6.09999 16.9 5.29999 19.4C6.99999 21 9.4 22 12 22Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-sm-4">
|
|
<h3 class="card-title">Account</h3>
|
|
<p class="card-text text-body">Adjust your profile and preferences to make Front work just for you!</p>
|
|
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<!-- Avatar Group -->
|
|
<div class="avatar-group avatar-group-xs">
|
|
<div class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img9.jpg" alt="Image Description">
|
|
</div>
|
|
<div class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Avatar Group -->
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-2">
|
|
<p class="card-text text-dark small mb-0">2 article in this collection</p>
|
|
<p class="card-text text-dark small">
|
|
<span class="text-muted">Written by</span>
|
|
Fiona Burke, Luisa Woodfine
|
|
<span class="text-muted">and</span>
|
|
Neil Galavan
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-6 mb-3 mb-lg-5">
|
|
<!-- Card -->
|
|
<a class="card card-bordered card-transition h-100" href="../demo-help-desk/listing.html">
|
|
<div class="card-body">
|
|
<!-- Media -->
|
|
<div class="d-block d-sm-flex">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon text-primary mb-2 mb-sm-0">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<g id="com/com014">
|
|
<path id="vector" opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M4 4L11.6314 2.56911C11.875 2.52343 12.125 2.52343 12.3686 2.56911L20 4V11.9033C20 15.696 18.0462 19.2211 14.83 21.2313L12.53 22.6687C12.2057 22.8714 11.7943 22.8714 11.47 22.6687L9.17001 21.2313C5.95382 19.2211 4 15.696 4 11.9033L4 4Z" fill="#035A4B"/>
|
|
<path id="group" fill-rule="evenodd" clip-rule="evenodd" d="M9.5 10.5C9.5 9.11929 10.6193 8 12 8C13.3807 8 14.5 9.11929 14.5 10.5V11C15.0523 11 15.5 11.4477 15.5 12V15C15.5 15.5523 15.0523 16 14.5 16H9.5C8.94772 16 8.5 15.5523 8.5 15V12C8.5 11.4477 8.94772 11 9.5 11V10.5ZM12 9C11.1716 9 10.5 9.67157 10.5 10.5V11H13.5V10.5C13.5 9.67157 12.8284 9 12 9Z" fill="#035A4B"/>
|
|
</g>
|
|
</svg>
|
|
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-sm-4">
|
|
<h3 class="card-title">Data security</h3>
|
|
<p class="card-text text-body">Detailed information on how our customer data is securely stored.</p>
|
|
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<!-- Avatar Group -->
|
|
<div class="avatar-group avatar-group-xs">
|
|
<div class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img9.jpg" alt="Image Description">
|
|
</div>
|
|
<div class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img4.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Avatar Group -->
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-2">
|
|
<p class="card-text text-dark small mb-0">5 article in this collection</p>
|
|
<p class="card-text text-dark small">
|
|
<span class="text-muted">Written by</span>
|
|
Fiona Burke, Luisa Woodfine, Neil Galavan
|
|
<span class="text-muted">and</span>
|
|
Monica Garcia
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-6 mb-3 mb-lg-5">
|
|
<!-- Card -->
|
|
<a class="card card-bordered card-transition h-100" href="../demo-help-desk/listing.html">
|
|
<div class="card-body">
|
|
<!-- Media -->
|
|
<div class="d-block d-sm-flex">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon text-primary mb-2 mb-sm-0">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path opacity="0.3" d="M18 10V20C18 20.6 18.4 21 19 21C19.6 21 20 20.6 20 20V10H18Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M11 10V17H6V10H4V20C4 20.6 4.4 21 5 21H12C12.6 21 13 20.6 13 20V10H11Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M10 10C10 11.1 9.1 12 8 12C6.9 12 6 11.1 6 10H10Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M18 10C18 11.1 17.1 12 16 12C14.9 12 14 11.1 14 10H18Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M14 4H10V10H14V4Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M17 4H20L22 10H18L17 4Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M7 4H4L2 10H6L7 4Z" fill="#035A4B"/>
|
|
<path d="M6 10C6 11.1 5.1 12 4 12C2.9 12 2 11.1 2 10H6ZM10 10C10 11.1 10.9 12 12 12C13.1 12 14 11.1 14 10H10ZM18 10C18 11.1 18.9 12 20 12C21.1 12 22 11.1 22 10H18ZM19 2H5C4.4 2 4 2.4 4 3V4H20V3C20 2.4 19.6 2 19 2ZM12 17C12 16.4 11.6 16 11 16H6C5.4 16 5 16.4 5 17C5 17.6 5.4 18 6 18H11C11.6 18 12 17.6 12 17Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-sm-4">
|
|
<h3 class="card-title">Market</h3>
|
|
<p class="card-text text-body">Some further explanation on when Front can and cannot be used.</p>
|
|
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<!-- Avatar Group -->
|
|
<div class="avatar-group avatar-group-xs">
|
|
<div class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img7.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Avatar Group -->
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-2">
|
|
<p class="card-text text-dark small mb-0">3 article in this collection</p>
|
|
<p class="card-text text-dark small">
|
|
<span class="text-muted">Written by</span>
|
|
Luisa Woodfine
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-6 mb-3 mb-lg-5">
|
|
<!-- Card -->
|
|
<a class="card card-bordered card-transition h-100" href="../demo-help-desk/listing.html">
|
|
<div class="card-body">
|
|
<!-- Media -->
|
|
<div class="d-block d-sm-flex">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon text-primary mb-2 mb-sm-0">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M22 7H2V11H22V7Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M21 19H3C2.4 19 2 18.6 2 18V6C2 5.4 2.4 5 3 5H21C21.6 5 22 5.4 22 6V18C22 18.6 21.6 19 21 19ZM14 14C14 13.4 13.6 13 13 13H5C4.4 13 4 13.4 4 14C4 14.6 4.4 15 5 15H13C13.6 15 14 14.6 14 14ZM16 15.5C16 16.3 16.7 17 17.5 17H18.5C19.3 17 20 16.3 20 15.5C20 14.7 19.3 14 18.5 14H17.5C16.7 14 16 14.7 16 15.5Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-sm-4">
|
|
<h3 class="card-title">Subscription</h3>
|
|
<p class="card-text text-body">Assistance on how and when you might use the subscription product.</p>
|
|
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<!-- Avatar Group -->
|
|
<div class="avatar-group avatar-group-xs">
|
|
<div class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img9.jpg" alt="Image Description">
|
|
</div>
|
|
<div class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Avatar Group -->
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-2">
|
|
<p class="card-text text-dark small mb-0">2 article in this collection</p>
|
|
<p class="card-text text-dark small">
|
|
<span class="text-muted">Written by</span>
|
|
Fiona Burke, Luisa Woodfine
|
|
<span class="text-muted">and</span>
|
|
Neil Galavan
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-6 mb-3 mb-lg-5">
|
|
<!-- Card -->
|
|
<a class="card card-bordered card-transition h-100" href="../demo-help-desk/listing.html">
|
|
<div class="card-body">
|
|
<!-- Media -->
|
|
<div class="d-block d-sm-flex">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon text-primary mb-2 mb-sm-0">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M12 17C16.4183 17 20 13.4183 20 9C20 4.58172 16.4183 1 12 1C7.58172 1 4 4.58172 4 9C4 13.4183 7.58172 17 12 17Z" fill="#035A4B"/>
|
|
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M6.53819 9L10.568 19.3624L11.976 18.8149L13.3745 19.3674L17.4703 9H6.53819ZM9.46188 11H14.5298L11.9759 17.4645L9.46188 11Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M10 22H14V22C14 23.1046 13.1046 24 12 24V24C10.8954 24 10 23.1046 10 22V22Z" fill="#035A4B"/>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 17C8 16.4477 8.44772 16 9 16H15C15.5523 16 16 16.4477 16 17C16 17.5523 15.5523 18 15 18C15.5523 18 16 18.4477 16 19C16 19.5523 15.5523 20 15 20C15.5523 20 16 20.4477 16 21C16 21.5523 15.5523 22 15 22H9C8.44772 22 8 21.5523 8 21C8 20.4477 8.44772 20 9 20C8.44772 20 8 19.5523 8 19C8 18.4477 8.44772 18 9 18C8.44772 18 8 17.5523 8 17Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-sm-4">
|
|
<h3 class="card-title">Tips, tricks & more</h3>
|
|
<p class="card-text text-body">Tips and tools for beginners and experts alike.</p>
|
|
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<!-- Avatar Group -->
|
|
<div class="avatar-group avatar-group-xs">
|
|
<div class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="../assets/img/160x160/img7.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Avatar Group -->
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-2">
|
|
<p class="card-text text-dark small mb-0">2 article in this collection</p>
|
|
<p class="card-text text-dark small">
|
|
<span class="text-muted">Written by</span>
|
|
Luisa Woodfine
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="text-center">
|
|
<a class="btn btn-outline-primary btn-transition" href="../demo-help-desk/listing.html">See all topics</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Card Grid -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Heading -->
|
|
<h2 id="component-2" class="hs-docs-heading">
|
|
Component #2 <a class="anchorjs-link" href="#component-2" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
|
</h2>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<!-- Header -->
|
|
<div class="card-header">
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment" id="navTab2" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="nav-resultTab2" href="#nav-result2" data-bs-toggle="pill" data-bs-target="#nav-result2" role="tab" aria-controls="nav-result2" aria-selected="true">Preview</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-htmlTab2" href="#nav-html2" data-bs-toggle="pill" data-bs-target="#nav-html2" role="tab" aria-controls="nav-html2" aria-selected="false">HTML</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="navTabContent2">
|
|
<div class="tab-pane fade p-4 show active" id="nav-result2" role="tabpanel" aria-labelledby="nav-resultTab2">
|
|
<div class="row gx-3">
|
|
<div class="col-sm-6 col-md-4 mb-3 mb-md-0">
|
|
<!-- Card -->
|
|
<a class="card card-bordered card-transition h-100" href="../demo-app-marketplace/app-overview.html">
|
|
<img class="card-img-top" src="../assets/img/400x200/img5.jpg" alt="Image Description">
|
|
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center mb-2">
|
|
<h4 class="card-title mb-0">Dropbox</h4>
|
|
<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">A workspace to reduce busywork-so you can focus on the things that matter</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-md-4 mb-3 mb-md-0">
|
|
<!-- Card -->
|
|
<a class="card card-bordered card-transition h-100" href="../demo-app-marketplace/app-overview.html">
|
|
<img class="card-img-top" src="../assets/img/400x200/img2.jpg" alt="Image Description">
|
|
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center mb-2">
|
|
<h4 class="card-title mb-0">Asana</h4>
|
|
<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">Track tasks and projects, use agile boards, measure progress</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-md-4">
|
|
<!-- Card -->
|
|
<a class="card card-bordered card-transition h-100" href="../demo-app-marketplace/app-overview.html">
|
|
<img class="card-img-top" src="../assets/img/400x200/img3.jpg" alt="Image Description">
|
|
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center mb-2">
|
|
<h4 class="card-title mb-0">Slack</h4>
|
|
<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">Email collaboration and email service desk made easy</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html2" role="tabpanel" aria-labelledby="nav-htmlTab2">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<div class="row gx-3">
|
|
<div class="col-sm-6 col-md-4 mb-3 mb-md-0">
|
|
<!-- Card -->
|
|
<a class="card card-bordered card-transition h-100" href="../demo-app-marketplace/app-overview.html">
|
|
<img class="card-img-top" src="../assets/img/400x200/img5.jpg" alt="Image Description">
|
|
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center mb-2">
|
|
<h4 class="card-title mb-0">Dropbox</h4>
|
|
<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">A workspace to reduce busywork-so you can focus on the things that matter</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-md-4 mb-3 mb-md-0">
|
|
<!-- Card -->
|
|
<a class="card card-bordered card-transition h-100" href="../demo-app-marketplace/app-overview.html">
|
|
<img class="card-img-top" src="../assets/img/400x200/img2.jpg" alt="Image Description">
|
|
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center mb-2">
|
|
<h4 class="card-title mb-0">Asana</h4>
|
|
<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">Track tasks and projects, use agile boards, measure progress</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-md-4">
|
|
<!-- Card -->
|
|
<a class="card card-bordered card-transition h-100" href="../demo-app-marketplace/app-overview.html">
|
|
<img class="card-img-top" src="../assets/img/400x200/img3.jpg" alt="Image Description">
|
|
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center mb-2">
|
|
<h4 class="card-title mb-0">Slack</h4>
|
|
<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">Email collaboration and email service desk made easy</p>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Heading -->
|
|
<h2 id="component-3" class="hs-docs-heading">
|
|
Component #3 <a class="anchorjs-link" href="#component-3" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
|
</h2>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<!-- Header -->
|
|
<div class="card-header">
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment" id="navTab3" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="nav-resultTab3" href="#nav-result3" data-bs-toggle="pill" data-bs-target="#nav-result3" role="tab" aria-controls="nav-result3" aria-selected="true">Preview</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-htmlTab3" href="#nav-html3" data-bs-toggle="pill" data-bs-target="#nav-html3" role="tab" aria-controls="nav-html3" aria-selected="false">HTML</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-jsTab3" href="#nav-js3" data-bs-toggle="pill" data-bs-target="#nav-js3" role="tab" aria-controls="nav-js3" aria-selected="false">JS</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="navTabContent3">
|
|
<div class="tab-pane fade p-4 show active" id="nav-result3" role="tabpanel" aria-labelledby="nav-resultTab3">
|
|
<!-- Card Grid -->
|
|
<div class="container">
|
|
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3">
|
|
<div class="col mb-3">
|
|
<!-- Card -->
|
|
<div class="card card-flush shadow-none h-100">
|
|
<a class="card-pinned" href="../assets/img/1920x1080/img19.jpg" data-fslightbox="propertyGridGallery1">
|
|
<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>
|
|
|
|
<a class="d-none" href="../assets/img/1920x1080/img20.jpg" data-fslightbox="propertyGridGallery1"></a>
|
|
<a class="d-none" href="../assets/img/1920x1080/img17.jpg" data-fslightbox="propertyGridGallery1"></a>
|
|
<a class="d-none" href="../assets/img/1920x1080/img16.jpg" data-fslightbox="propertyGridGallery1"></a>
|
|
|
|
<!-- Body -->
|
|
<a class="card-body" href="../demo-real-estate/property-overview.html">
|
|
<span class="card-subtitle text-body">For sale</span>
|
|
|
|
<div class="row align-items-center mb-3">
|
|
<div class="col">
|
|
<h4 class="card-title text-inherit">Borrett Close, London</h4>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<h3 class="card-title text-primary">£689,000</h3>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<ul class="list-inline list-separator text-body small">
|
|
<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 24 24"><path d="M22,19.5a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1-.5-.5V16H4v3.5a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1-.5-.5V4.5A.5.5,0,0,1,2.5,4h1a.5.5,0,0,1,.5.5V13H21a1,1,0,0,1,1,1ZM20,8H12a2,2,0,0,0-2,2v1.5a.5.5,0,0,0,.5.5h11a.5.5,0,0,0,.5-.5V10A2,2,0,0,0,20,8ZM5.5,12h3a.5.5,0,0,0,.5-.5V11a2,2,0,0,0-4,0v.5A.5.5,0,0,0,5.5,12Z"/></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>
|
|
</a>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-3">
|
|
<!-- Card -->
|
|
<div class="card card-flush shadow-none h-100">
|
|
<a class="card-pinned" href="../assets/img/1920x1080/img12.jpg" data-fslightbox="propertyGridGallery2">
|
|
<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>
|
|
|
|
<a class="d-none" href="../assets/img/1920x1080/img11.jpg" data-fslightbox="propertyGridGallery2"></a>
|
|
<a class="d-none" href="../assets/img/1920x1080/img14.jpg" data-fslightbox="propertyGridGallery2"></a>
|
|
|
|
<!-- Body -->
|
|
<a class="card-body" href="../demo-real-estate/property-overview.html">
|
|
<span class="card-subtitle text-body">For sale</span>
|
|
|
|
<div class="row align-items-center mb-3">
|
|
<div class="col">
|
|
<h4 class="card-title text-inherit">The Drive, Ilford</h4>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<h3 class="card-title text-primary">£999,000</h3>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<ul class="list-inline list-separator text-body small">
|
|
<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 24 24"><path d="M22,19.5a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1-.5-.5V16H4v3.5a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1-.5-.5V4.5A.5.5,0,0,1,2.5,4h1a.5.5,0,0,1,.5.5V13H21a1,1,0,0,1,1,1ZM20,8H12a2,2,0,0,0-2,2v1.5a.5.5,0,0,0,.5.5h11a.5.5,0,0,0,.5-.5V10A2,2,0,0,0,20,8ZM5.5,12h3a.5.5,0,0,0,.5-.5V11a2,2,0,0,0-4,0v.5A.5.5,0,0,0,5.5,12Z"/></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>
|
|
</a>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
|
|
<div class="col mb-3">
|
|
<!-- Card -->
|
|
<div class="card card-flush shadow-none h-100">
|
|
<a class="card-pinned" href="../assets/img/1920x1080/img26.jpg" data-fslightbox="propertyGridGallery3">
|
|
<img class="card-img" src="../assets/img/480x320/img20.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>
|
|
|
|
<a class="d-none" href="../assets/img/1920x1080/img18.jpg" data-fslightbox="propertyGridGallery3"></a>
|
|
<a class="d-none" href="../assets/img/1920x1080/img15.jpg" data-fslightbox="propertyGridGallery3"></a>
|
|
|
|
<!-- Body -->
|
|
<a class="card-body" href="../demo-real-estate/property-overview.html">
|
|
<span class="card-subtitle text-body">For sale</span>
|
|
|
|
<div class="row align-items-center mb-3">
|
|
<div class="col">
|
|
<h4 class="card-title text-inherit">Alderney House, Enfield</h4>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<h3 class="card-title text-primary">£725,000</h3>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<ul class="list-inline list-separator text-body small">
|
|
<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 24 24"><path d="M22,19.5a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1-.5-.5V16H4v3.5a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1-.5-.5V4.5A.5.5,0,0,1,2.5,4h1a.5.5,0,0,1,.5.5V13H21a1,1,0,0,1,1,1ZM20,8H12a2,2,0,0,0-2,2v1.5a.5.5,0,0,0,.5.5h11a.5.5,0,0,0,.5-.5V10A2,2,0,0,0,20,8ZM5.5,12h3a.5.5,0,0,0,.5-.5V11a2,2,0,0,0-4,0v.5A.5.5,0,0,0,5.5,12Z"/></svg>
|
|
</span>
|
|
1 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> 1,791 sqft
|
|
</li>
|
|
</ul>
|
|
</a>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Card Grid -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html3" role="tabpanel" aria-labelledby="nav-htmlTab3">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Card Grid -->
|
|
<div class="container content-space-1">
|
|
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3">
|
|
<div class="col mb-3">
|
|
<!-- Card -->
|
|
<div class="card card-flush shadow-none h-100">
|
|
<a class="card-pinned" href="../assets/img/1920x1080/img19.jpg" data-fslightbox="propertyGridGallery1">
|
|
<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>
|
|
|
|
<a class="d-none" href="../assets/img/1920x1080/img20.jpg" data-fslightbox="propertyGridGallery1"></a>
|
|
<a class="d-none" href="../assets/img/1920x1080/img17.jpg" data-fslightbox="propertyGridGallery1"></a>
|
|
<a class="d-none" href="../assets/img/1920x1080/img16.jpg" data-fslightbox="propertyGridGallery1"></a>
|
|
|
|
<!-- Body -->
|
|
<a class="card-body" href="../demo-real-estate/property-overview.html">
|
|
<span class="card-subtitle text-body">For sale</span>
|
|
|
|
<div class="row align-items-center mb-3">
|
|
<div class="col">
|
|
<h4 class="card-title text-inherit">Borrett Close, London</h4>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<h3 class="card-title text-primary">£689,000</h3>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<ul class="list-inline list-separator text-body small">
|
|
<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 24 24"><path d="M22,19.5a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1-.5-.5V16H4v3.5a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1-.5-.5V4.5A.5.5,0,0,1,2.5,4h1a.5.5,0,0,1,.5.5V13H21a1,1,0,0,1,1,1ZM20,8H12a2,2,0,0,0-2,2v1.5a.5.5,0,0,0,.5.5h11a.5.5,0,0,0,.5-.5V10A2,2,0,0,0,20,8ZM5.5,12h3a.5.5,0,0,0,.5-.5V11a2,2,0,0,0-4,0v.5A.5.5,0,0,0,5.5,12Z"/></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>
|
|
</a>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-3">
|
|
<!-- Card -->
|
|
<div class="card card-flush shadow-none h-100">
|
|
<a class="card-pinned" href="../assets/img/1920x1080/img12.jpg" data-fslightbox="propertyGridGallery2">
|
|
<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>
|
|
|
|
<a class="d-none" href="../assets/img/1920x1080/img11.jpg" data-fslightbox="propertyGridGallery2"></a>
|
|
<a class="d-none" href="../assets/img/1920x1080/img14.jpg" data-fslightbox="propertyGridGallery2"></a>
|
|
|
|
<!-- Body -->
|
|
<a class="card-body" href="../demo-real-estate/property-overview.html">
|
|
<span class="card-subtitle text-body">For sale</span>
|
|
|
|
<div class="row align-items-center mb-3">
|
|
<div class="col">
|
|
<h4 class="card-title text-inherit">The Drive, Ilford</h4>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<h3 class="card-title text-primary">£999,000</h3>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<ul class="list-inline list-separator text-body small">
|
|
<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 24 24"><path d="M22,19.5a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1-.5-.5V16H4v3.5a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1-.5-.5V4.5A.5.5,0,0,1,2.5,4h1a.5.5,0,0,1,.5.5V13H21a1,1,0,0,1,1,1ZM20,8H12a2,2,0,0,0-2,2v1.5a.5.5,0,0,0,.5.5h11a.5.5,0,0,0,.5-.5V10A2,2,0,0,0,20,8ZM5.5,12h3a.5.5,0,0,0,.5-.5V11a2,2,0,0,0-4,0v.5A.5.5,0,0,0,5.5,12Z"/></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>
|
|
</a>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
|
|
<div class="col mb-3">
|
|
<!-- Card -->
|
|
<div class="card card-flush shadow-none h-100">
|
|
<a class="card-pinned" href="../assets/img/1920x1080/img26.jpg" data-fslightbox="propertyGridGallery3">
|
|
<img class="card-img" src="../assets/img/480x320/img20.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>
|
|
|
|
<a class="d-none" href="../assets/img/1920x1080/img18.jpg" data-fslightbox="propertyGridGallery3"></a>
|
|
<a class="d-none" href="../assets/img/1920x1080/img15.jpg" data-fslightbox="propertyGridGallery3"></a>
|
|
|
|
<!-- Body -->
|
|
<a class="card-body" href="../demo-real-estate/property-overview.html">
|
|
<span class="card-subtitle text-body">For sale</span>
|
|
|
|
<div class="row align-items-center mb-3">
|
|
<div class="col">
|
|
<h4 class="card-title text-inherit">Alderney House, Enfield</h4>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<h3 class="card-title text-primary">£725,000</h3>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<ul class="list-inline list-separator text-body small">
|
|
<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 24 24"><path d="M22,19.5a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1-.5-.5V16H4v3.5a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1-.5-.5V4.5A.5.5,0,0,1,2.5,4h1a.5.5,0,0,1,.5.5V13H21a1,1,0,0,1,1,1ZM20,8H12a2,2,0,0,0-2,2v1.5a.5.5,0,0,0,.5.5h11a.5.5,0,0,0,.5-.5V10A2,2,0,0,0,20,8ZM5.5,12h3a.5.5,0,0,0,.5-.5V11a2,2,0,0,0-4,0v.5A.5.5,0,0,0,5.5,12Z"/></svg>
|
|
</span>
|
|
1 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> 1,791 sqft
|
|
</li>
|
|
</ul>
|
|
</a>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Card Grid -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-js3" role="tabpanel" aria-labelledby="nav-jsTab3">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<script src="../assets/vendor/fslightbox/index.js"></script>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Heading -->
|
|
<h2 id="component-4" class="hs-docs-heading">
|
|
Component #4 <a class="anchorjs-link" href="#component-4" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
|
</h2>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<!-- Header -->
|
|
<div class="card-header">
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment" id="navTab4" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="nav-resultTab4" href="#nav-result4" data-bs-toggle="pill" data-bs-target="#nav-result4" role="tab" aria-controls="nav-result4" aria-selected="true">Preview</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-htmlTab4" href="#nav-html4" data-bs-toggle="pill" data-bs-target="#nav-html4" role="tab" aria-controls="nav-html4" aria-selected="false">HTML</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="navTabContent4">
|
|
<div class="tab-pane fade p-4 show active" id="nav-result4" role="tabpanel" aria-labelledby="nav-resultTab4">
|
|
<!-- Card Grid -->
|
|
<div class="container content-space-1">
|
|
<!-- Title -->
|
|
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
|
<h2>Browse properties by city in the UK</h2>
|
|
<p>Take a deep dive and browse original neighborhood photos, drone footage, resident reviews and local insights to see if the homes for sale are right for you.</p>
|
|
</div>
|
|
<!-- End Title -->
|
|
|
|
<div class="text-center">
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment mb-7" id="featuresTab" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link active" href="#forSale" id="forSale-tab" data-bs-toggle="tab" data-bs-target="#forSale" role="tab" aria-controls="forSale" aria-selected="true">For sale</a>
|
|
</li>
|
|
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" href="#forRent" id="forRent-tab" data-bs-toggle="tab" data-bs-target="#forRent" role="tab" aria-controls="forRent" aria-selected="false">For rent</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="houseHeroTabContent">
|
|
<div class="tab-pane fade show active" id="forSale" role="tabpanel" aria-labelledby="forSale-tab">
|
|
<div class="row gx-3">
|
|
<div class="col-sm-6 col-lg-4 mb-3">
|
|
<!-- Card -->
|
|
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img28.jpg); min-height: 15rem;">
|
|
<div class="card-body">
|
|
<div class="mb-1">
|
|
<span class="badge bg-light text-dark">3521 offers</span>
|
|
</div>
|
|
|
|
<div class="card-footer">
|
|
<h3 class="text-white mb-0">London</h3>
|
|
<span class="d-block text-white">Prices from £5,490,000</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-lg-4 mb-3">
|
|
<!-- Card -->
|
|
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img29.jpg); min-height: 15rem;">
|
|
<div class="card-body">
|
|
<div class="mb-1">
|
|
<span class="badge bg-light text-dark">4659 offers</span>
|
|
</div>
|
|
|
|
<div class="card-footer">
|
|
<h3 class="text-white mb-0">Oxford</h3>
|
|
<span class="d-block text-white">Prices from £3,820,000</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-lg-4 mb-3">
|
|
<!-- Card -->
|
|
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img11.jpg); min-height: 15rem;">
|
|
<div class="card-body">
|
|
<div class="mb-1">
|
|
<span class="badge bg-light text-dark">2471 offers</span>
|
|
</div>
|
|
|
|
<div class="card-footer">
|
|
<h3 class="text-white mb-0">Edinburgh</h3>
|
|
<span class="d-block text-white">Prices from £3,371,000</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-lg-4 mb-3">
|
|
<!-- Card -->
|
|
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img10.jpg); min-height: 15rem;">
|
|
<div class="card-body">
|
|
<div class="mb-1">
|
|
<span class="badge bg-light text-dark">5523 offers</span>
|
|
</div>
|
|
|
|
<div class="card-footer">
|
|
<h3 class="text-white mb-0">Newcastle</h3>
|
|
<span class="d-block text-white">Prices from £2,588,000</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-lg-4 mb-3">
|
|
<!-- Card -->
|
|
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img9.jpg); min-height: 15rem;">
|
|
<div class="card-body">
|
|
<div class="mb-1">
|
|
<span class="badge bg-light text-dark">939 offers</span>
|
|
</div>
|
|
|
|
<div class="card-footer">
|
|
<h3 class="text-white mb-0">Liverpool</h3>
|
|
<span class="d-block text-white">Prices from £1,318,000</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-lg-4 mb-3">
|
|
<!-- Card -->
|
|
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img8.jpg); min-height: 15rem;">
|
|
<div class="card-body">
|
|
<div class="mb-1">
|
|
<span class="badge bg-light text-dark">364 offers</span>
|
|
</div>
|
|
|
|
<div class="card-footer">
|
|
<h3 class="text-white mb-0">Bristol</h3>
|
|
<span class="d-block text-white">Prices from £1,457,000</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="forRent" role="tabpanel" aria-labelledby="forRent-tab">
|
|
<div class="row gx-3">
|
|
<div class="col-sm-6 col-lg-4 mb-3">
|
|
<!-- Card -->
|
|
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img11.jpg); min-height: 15rem;">
|
|
<div class="card-body">
|
|
<div class="mb-1">
|
|
<span class="badge bg-light text-dark">2471 offers</span>
|
|
</div>
|
|
|
|
<div class="card-footer">
|
|
<h3 class="text-white mb-0">Edinburgh</h3>
|
|
<span class="d-block text-white">Prices from £1,000</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-lg-4 mb-3">
|
|
<!-- Card -->
|
|
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img28.jpg); min-height: 15rem;">
|
|
<div class="card-body">
|
|
<div class="mb-1">
|
|
<span class="badge bg-light text-dark">3521 offers</span>
|
|
</div>
|
|
|
|
<div class="card-footer">
|
|
<h3 class="text-white mb-0">London</h3>
|
|
<span class="d-block text-white">Prices from £5,000</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-lg-4 mb-3">
|
|
<!-- Card -->
|
|
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img29.jpg); min-height: 15rem;">
|
|
<div class="card-body">
|
|
<div class="mb-1">
|
|
<span class="badge bg-light text-dark">4659 offers</span>
|
|
</div>
|
|
|
|
<div class="card-footer">
|
|
<h3 class="text-white mb-0">Oxford</h3>
|
|
<span class="d-block text-white">Prices from £7,000</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-lg-4 mb-3">
|
|
<!-- Card -->
|
|
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img9.jpg); min-height: 15rem;">
|
|
<div class="card-body">
|
|
<div class="mb-1">
|
|
<span class="badge bg-light text-dark">939 offers</span>
|
|
</div>
|
|
|
|
<div class="card-footer">
|
|
<h3 class="text-white mb-0">Liverpool</h3>
|
|
<span class="d-block text-white">Prices from £8,000</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-lg-4 mb-3">
|
|
<!-- Card -->
|
|
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img8.jpg); min-height: 15rem;">
|
|
<div class="card-body">
|
|
<div class="mb-1">
|
|
<span class="badge bg-light text-dark">364 offers</span>
|
|
</div>
|
|
|
|
<div class="card-footer">
|
|
<h3 class="text-white mb-0">Bristol</h3>
|
|
<span class="d-block text-white">Prices from £7,000</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-lg-4 mb-3">
|
|
<!-- Card -->
|
|
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img10.jpg); min-height: 15rem;">
|
|
<div class="card-body">
|
|
<div class="mb-1">
|
|
<span class="badge bg-light text-dark">5523 offers</span>
|
|
</div>
|
|
|
|
<div class="card-footer">
|
|
<h3 class="text-white mb-0">Newcastle</h3>
|
|
<span class="d-block text-white">Prices from £5,000</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Card Grid -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html4" role="tabpanel" aria-labelledby="nav-htmlTab4">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Card Grid -->
|
|
<div class="container content-space-2 content-space-lg-3">
|
|
<!-- Title -->
|
|
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
|
<h2>Browse properties by city in the UK</h2>
|
|
<p>Take a deep dive and browse original neighborhood photos, drone footage, resident reviews and local insights to see if the homes for sale are right for you.</p>
|
|
</div>
|
|
<!-- End Title -->
|
|
|
|
<div class="text-center">
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment mb-7" id="featuresTab" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link active" href="#forSale" id="forSale-tab" data-bs-toggle="tab" data-bs-target="#forSale" role="tab" aria-controls="forSale" aria-selected="true">For sale</a>
|
|
</li>
|
|
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" href="#forRent" id="forRent-tab" data-bs-toggle="tab" data-bs-target="#forRent" role="tab" aria-controls="forRent" aria-selected="false">For rent</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="houseHeroTabContent">
|
|
<div class="tab-pane fade show active" id="forSale" role="tabpanel" aria-labelledby="forSale-tab">
|
|
<div class="row gx-3">
|
|
<div class="col-sm-6 col-lg-4 mb-3">
|
|
<!-- Card -->
|
|
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img28.jpg); min-height: 15rem;">
|
|
<div class="card-body">
|
|
<div class="mb-1">
|
|
<span class="badge bg-light text-dark">3521 offers</span>
|
|
</div>
|
|
|
|
<div class="card-footer">
|
|
<h3 class="text-white mb-0">London</h3>
|
|
<span class="d-block text-white">Prices from £5,490,000</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-lg-4 mb-3">
|
|
<!-- Card -->
|
|
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img29.jpg); min-height: 15rem;">
|
|
<div class="card-body">
|
|
<div class="mb-1">
|
|
<span class="badge bg-light text-dark">4659 offers</span>
|
|
</div>
|
|
|
|
<div class="card-footer">
|
|
<h3 class="text-white mb-0">Oxford</h3>
|
|
<span class="d-block text-white">Prices from £3,820,000</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-lg-4 mb-3">
|
|
<!-- Card -->
|
|
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img11.jpg); min-height: 15rem;">
|
|
<div class="card-body">
|
|
<div class="mb-1">
|
|
<span class="badge bg-light text-dark">2471 offers</span>
|
|
</div>
|
|
|
|
<div class="card-footer">
|
|
<h3 class="text-white mb-0">Edinburgh</h3>
|
|
<span class="d-block text-white">Prices from £3,371,000</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-lg-4 mb-3">
|
|
<!-- Card -->
|
|
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img10.jpg); min-height: 15rem;">
|
|
<div class="card-body">
|
|
<div class="mb-1">
|
|
<span class="badge bg-light text-dark">5523 offers</span>
|
|
</div>
|
|
|
|
<div class="card-footer">
|
|
<h3 class="text-white mb-0">Newcastle</h3>
|
|
<span class="d-block text-white">Prices from £2,588,000</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-lg-4 mb-3">
|
|
<!-- Card -->
|
|
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img9.jpg); min-height: 15rem;">
|
|
<div class="card-body">
|
|
<div class="mb-1">
|
|
<span class="badge bg-light text-dark">939 offers</span>
|
|
</div>
|
|
|
|
<div class="card-footer">
|
|
<h3 class="text-white mb-0">Liverpool</h3>
|
|
<span class="d-block text-white">Prices from £1,318,000</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-lg-4 mb-3">
|
|
<!-- Card -->
|
|
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img8.jpg); min-height: 15rem;">
|
|
<div class="card-body">
|
|
<div class="mb-1">
|
|
<span class="badge bg-light text-dark">364 offers</span>
|
|
</div>
|
|
|
|
<div class="card-footer">
|
|
<h3 class="text-white mb-0">Bristol</h3>
|
|
<span class="d-block text-white">Prices from £1,457,000</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="forRent" role="tabpanel" aria-labelledby="forRent-tab">
|
|
<div class="row gx-3">
|
|
<div class="col-sm-6 col-lg-4 mb-3">
|
|
<!-- Card -->
|
|
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img11.jpg); min-height: 15rem;">
|
|
<div class="card-body">
|
|
<div class="mb-1">
|
|
<span class="badge bg-light text-dark">2471 offers</span>
|
|
</div>
|
|
|
|
<div class="card-footer">
|
|
<h3 class="text-white mb-0">Edinburgh</h3>
|
|
<span class="d-block text-white">Prices from £1,000</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-lg-4 mb-3">
|
|
<!-- Card -->
|
|
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img28.jpg); min-height: 15rem;">
|
|
<div class="card-body">
|
|
<div class="mb-1">
|
|
<span class="badge bg-light text-dark">3521 offers</span>
|
|
</div>
|
|
|
|
<div class="card-footer">
|
|
<h3 class="text-white mb-0">London</h3>
|
|
<span class="d-block text-white">Prices from £5,000</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-lg-4 mb-3">
|
|
<!-- Card -->
|
|
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img29.jpg); min-height: 15rem;">
|
|
<div class="card-body">
|
|
<div class="mb-1">
|
|
<span class="badge bg-light text-dark">4659 offers</span>
|
|
</div>
|
|
|
|
<div class="card-footer">
|
|
<h3 class="text-white mb-0">Oxford</h3>
|
|
<span class="d-block text-white">Prices from £7,000</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-lg-4 mb-3">
|
|
<!-- Card -->
|
|
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img9.jpg); min-height: 15rem;">
|
|
<div class="card-body">
|
|
<div class="mb-1">
|
|
<span class="badge bg-light text-dark">939 offers</span>
|
|
</div>
|
|
|
|
<div class="card-footer">
|
|
<h3 class="text-white mb-0">Liverpool</h3>
|
|
<span class="d-block text-white">Prices from £8,000</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-lg-4 mb-3">
|
|
<!-- Card -->
|
|
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img8.jpg); min-height: 15rem;">
|
|
<div class="card-body">
|
|
<div class="mb-1">
|
|
<span class="badge bg-light text-dark">364 offers</span>
|
|
</div>
|
|
|
|
<div class="card-footer">
|
|
<h3 class="text-white mb-0">Bristol</h3>
|
|
<span class="d-block text-white">Prices from £7,000</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-lg-4 mb-3">
|
|
<!-- Card -->
|
|
<a class="card card-stretched-vertical card-transition shadow-none bg-img-start gradient-y-overlay-lg-dark" href="../demo-real-estate/property-grid.html" style="background-image: url(../assets/img/480x320/img10.jpg); min-height: 15rem;">
|
|
<div class="card-body">
|
|
<div class="mb-1">
|
|
<span class="badge bg-light text-dark">5523 offers</span>
|
|
</div>
|
|
|
|
<div class="card-footer">
|
|
<h3 class="text-white mb-0">Newcastle</h3>
|
|
<span class="d-block text-white">Prices from £5,000</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Card Grid -->
|
|
</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">
|
|
<!-- Card Grid -->
|
|
<div class="container content-space-1">
|
|
<!-- Heading -->
|
|
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-7">
|
|
<h2>Explore Startups</h2>
|
|
<p>Find a job you love. <a class="link" href="#">Set your career interests.</a></p>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<div class="row row-cols-1 row-cols-sm-2 1 row-cols-md-3 row-cols-lg-4 mb-5">
|
|
<div class="col mb-3 mb-sm-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-bordered card-transition h-100" href="../demo-jobs/job-overview.html">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h5 class="card-title text-inherit">Management</h5>
|
|
<p class="card-text text-body small">4 job positions</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<span class="text-muted">
|
|
<i class="bi-chevron-right small"></i>
|
|
</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-3 mb-sm-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-bordered card-transition h-100" href="../demo-jobs/job-overview.html">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h5 class="card-title text-inherit">App Development</h5>
|
|
<p class="card-text text-body small">26 job positions</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<span class="text-muted">
|
|
<i class="bi-chevron-right small"></i>
|
|
</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-3 mb-sm-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-bordered card-transition h-100" href="../demo-jobs/job-overview.html">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h5 class="card-title text-inherit">Arts & Entertainment</h5>
|
|
<p class="card-text text-body small">9 job positions</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<span class="text-muted">
|
|
<i class="bi-chevron-right small"></i>
|
|
</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-3 mb-sm-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-bordered card-transition h-100" href="../demo-jobs/job-overview.html">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h5 class="card-title text-inherit">Accounting</h5>
|
|
<p class="card-text text-body small">11 job positions</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<span class="text-muted">
|
|
<i class="bi-chevron-right small"></i>
|
|
</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-3 mb-sm-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-bordered card-transition h-100" href="../demo-jobs/job-overview.html">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h5 class="card-title text-inherit">UI Designer</h5>
|
|
<p class="card-text text-body small">37 job positions</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<span class="text-muted">
|
|
<i class="bi-chevron-right small"></i>
|
|
</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-3 mb-sm-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-bordered card-transition h-100" href="../demo-jobs/job-overview.html">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h5 class="card-title text-inherit">Apps</h5>
|
|
<p class="card-text text-body small">2 job positions</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<span class="text-muted">
|
|
<i class="bi-chevron-right small"></i>
|
|
</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-3 mb-sm-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-bordered card-transition h-100" href="../demo-jobs/job-overview.html">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h5 class="card-title text-inherit">Content Writer</h5>
|
|
<p class="card-text text-body small">10 job positions</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<span class="text-muted">
|
|
<i class="bi-chevron-right small"></i>
|
|
</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-3 mb-sm-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-bordered card-transition h-100" href="../demo-jobs/job-overview.html">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h5 class="card-title text-inherit">Analytics</h5>
|
|
<p class="card-text text-body small">14 job positions</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<span class="text-muted">
|
|
<i class="bi-chevron-right small"></i>
|
|
</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="text-center">
|
|
<a class="btn btn-outline-primary" href="../demo-jobs/job-list.html">View all startups <i class="bi-chevron-right small ms-1"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- End Card Grid -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html5" role="tabpanel" aria-labelledby="nav-htmlTab5">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Card Grid -->
|
|
<div class="container content-space-2 content-space-lg-3">
|
|
<!-- Heading -->
|
|
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-7">
|
|
<h2>Explore Startups</h2>
|
|
<p>Find a job you love. <a class="link" href="#">Set your career interests.</a></p>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<div class="row row-cols-1 row-cols-sm-2 1 row-cols-md-3 row-cols-lg-4 mb-5">
|
|
<div class="col mb-3 mb-sm-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-bordered card-transition h-100" href="../demo-jobs/job-overview.html">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h5 class="card-title text-inherit">Management</h5>
|
|
<p class="card-text text-body small">4 job positions</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<span class="text-muted">
|
|
<i class="bi-chevron-right small"></i>
|
|
</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-3 mb-sm-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-bordered card-transition h-100" href="../demo-jobs/job-overview.html">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h5 class="card-title text-inherit">App Development</h5>
|
|
<p class="card-text text-body small">26 job positions</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<span class="text-muted">
|
|
<i class="bi-chevron-right small"></i>
|
|
</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-3 mb-sm-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-bordered card-transition h-100" href="../demo-jobs/job-overview.html">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h5 class="card-title text-inherit">Arts & Entertainment</h5>
|
|
<p class="card-text text-body small">9 job positions</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<span class="text-muted">
|
|
<i class="bi-chevron-right small"></i>
|
|
</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-3 mb-sm-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-bordered card-transition h-100" href="../demo-jobs/job-overview.html">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h5 class="card-title text-inherit">Accounting</h5>
|
|
<p class="card-text text-body small">11 job positions</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<span class="text-muted">
|
|
<i class="bi-chevron-right small"></i>
|
|
</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-3 mb-sm-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-bordered card-transition h-100" href="../demo-jobs/job-overview.html">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h5 class="card-title text-inherit">UI Designer</h5>
|
|
<p class="card-text text-body small">37 job positions</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<span class="text-muted">
|
|
<i class="bi-chevron-right small"></i>
|
|
</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-3 mb-sm-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-bordered card-transition h-100" href="../demo-jobs/job-overview.html">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h5 class="card-title text-inherit">Apps</h5>
|
|
<p class="card-text text-body small">2 job positions</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<span class="text-muted">
|
|
<i class="bi-chevron-right small"></i>
|
|
</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-3 mb-sm-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-bordered card-transition h-100" href="../demo-jobs/job-overview.html">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h5 class="card-title text-inherit">Content Writer</h5>
|
|
<p class="card-text text-body small">10 job positions</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<span class="text-muted">
|
|
<i class="bi-chevron-right small"></i>
|
|
</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-3 mb-sm-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-bordered card-transition h-100" href="../demo-jobs/job-overview.html">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h5 class="card-title text-inherit">Analytics</h5>
|
|
<p class="card-text text-body small">14 job positions</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<span class="text-muted">
|
|
<i class="bi-chevron-right small"></i>
|
|
</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="text-center">
|
|
<a class="btn btn-outline-primary" href="../demo-jobs/job-list.html">View all startups <i class="bi-chevron-right small ms-1"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- End Card Grid -->
|
|
</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="row row-cols-1 row-cols-sm-2">
|
|
<div class="col mb-5">
|
|
<!-- Card -->
|
|
<div class="card card-bordered h-100">
|
|
<!-- Card Body -->
|
|
<div class="card-body">
|
|
<div class="row mb-3">
|
|
<div class="col">
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center">
|
|
<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="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>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<!-- 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>
|
|
<!-- End Row -->
|
|
|
|
<h3 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">Senior B2B sales consultant</a>
|
|
</h3>
|
|
|
|
<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 Card Body -->
|
|
|
|
<!-- Card Footer -->
|
|
<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>
|
|
<!-- End Card Footer -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-5">
|
|
<!-- Card -->
|
|
<div class="card card-bordered h-100">
|
|
<!-- Card Body -->
|
|
<div class="card-body">
|
|
<div class="row mb-3">
|
|
<div class="col">
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center">
|
|
<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="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>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<!-- 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>
|
|
<!-- End Row -->
|
|
|
|
<h3 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">Office assistant/Social media assistant</a>
|
|
</h3>
|
|
|
|
<span class="d-block small text-body mb-1">$50-$135 hourly</span>
|
|
</div>
|
|
<!-- End Card Body -->
|
|
|
|
<!-- Card Footer -->
|
|
<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>
|
|
<!-- End Card Footer -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-5">
|
|
<!-- Card -->
|
|
<div class="card card-bordered h-100">
|
|
<!-- Card Body -->
|
|
<div class="card-body">
|
|
<div class="row mb-3">
|
|
<div class="col">
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-4x3" src="../assets/svg/brands/dropbox-icon.svg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<h6 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">Dropbox</a>
|
|
</h6>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<!-- Checkbbox Bookmark -->
|
|
<div class="form-check form-check-bookmark">
|
|
<input class="form-check-input" type="checkbox" value="" id="jobsCardBookmarkCheck3">
|
|
<label class="form-check-label" for="jobsCardBookmarkCheck3">
|
|
<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>
|
|
<!-- End Row -->
|
|
|
|
<h3 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">Marketing and Communications Manager</a>
|
|
</h3>
|
|
|
|
<span class="d-block small text-body mb-1">$5k monthly</span>
|
|
</div>
|
|
<!-- End Card Body -->
|
|
|
|
<!-- Card Footer -->
|
|
<div class="card-footer pt-0">
|
|
<ul class="list-inline list-separator small text-body">
|
|
<li class="list-inline-item">Posted 1 day ago</li>
|
|
<li class="list-inline-item">London</li>
|
|
<li class="list-inline-item">Full time</li>
|
|
</ul>
|
|
</div>
|
|
<!-- End Card Footer -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-5">
|
|
<!-- Card -->
|
|
<div class="card card-bordered h-100">
|
|
<!-- Card Body -->
|
|
<div class="card-body">
|
|
<div class="row mb-3">
|
|
<div class="col">
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-4x3" src="../assets/svg/brands/prosperops-icon.svg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<h6 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">Prosperops</a>
|
|
</h6>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<!-- Checkbbox Bookmark -->
|
|
<div class="form-check form-check-bookmark">
|
|
<input class="form-check-input" type="checkbox" value="" id="jobsCardBookmarkCheck4">
|
|
<label class="form-check-label" for="jobsCardBookmarkCheck4">
|
|
<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>
|
|
<!-- End Row -->
|
|
|
|
<h3 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">Senior backend developer</a>
|
|
</h3>
|
|
|
|
<span class="d-block small text-body mb-1">$75k-$85k yearly</span>
|
|
|
|
<span class="badge bg-soft-info text-info me-2">
|
|
<span class="legend-indicator bg-info"></span>Remote
|
|
</span>
|
|
</div>
|
|
<!-- End Card Body -->
|
|
|
|
<!-- Card Footer -->
|
|
<div class="card-footer pt-0">
|
|
<ul class="list-inline list-separator small text-body">
|
|
<li class="list-inline-item">Posted 1 day ago</li>
|
|
<li class="list-inline-item">Liverpool</li>
|
|
<li class="list-inline-item">Full time</li>
|
|
</ul>
|
|
</div>
|
|
<!-- End Card Footer -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</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="row row-cols-1 row-cols-sm-2">
|
|
<div class="col mb-5">
|
|
<!-- Card -->
|
|
<div class="card card-bordered h-100">
|
|
<!-- Card Body -->
|
|
<div class="card-body">
|
|
<div class="row mb-3">
|
|
<div class="col">
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center">
|
|
<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="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>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<!-- 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>
|
|
<!-- End Row -->
|
|
|
|
<h3 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">Senior B2B sales consultant</a>
|
|
</h3>
|
|
|
|
<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 Card Body -->
|
|
|
|
<!-- Card Footer -->
|
|
<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>
|
|
<!-- End Card Footer -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-5">
|
|
<!-- Card -->
|
|
<div class="card card-bordered h-100">
|
|
<!-- Card Body -->
|
|
<div class="card-body">
|
|
<div class="row mb-3">
|
|
<div class="col">
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center">
|
|
<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="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>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<!-- 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>
|
|
<!-- End Row -->
|
|
|
|
<h3 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">Office assistant/Social media assistant</a>
|
|
</h3>
|
|
|
|
<span class="d-block small text-body mb-1">$50-$135 hourly</span>
|
|
</div>
|
|
<!-- End Card Body -->
|
|
|
|
<!-- Card Footer -->
|
|
<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>
|
|
<!-- End Card Footer -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-5">
|
|
<!-- Card -->
|
|
<div class="card card-bordered h-100">
|
|
<!-- Card Body -->
|
|
<div class="card-body">
|
|
<div class="row mb-3">
|
|
<div class="col">
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-4x3" src="../assets/svg/brands/dropbox-icon.svg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<h6 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">Dropbox</a>
|
|
</h6>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<!-- Checkbbox Bookmark -->
|
|
<div class="form-check form-check-bookmark">
|
|
<input class="form-check-input" type="checkbox" value="" id="jobsCardBookmarkCheck3">
|
|
<label class="form-check-label" for="jobsCardBookmarkCheck3">
|
|
<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>
|
|
<!-- End Row -->
|
|
|
|
<h3 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">Marketing and Communications Manager</a>
|
|
</h3>
|
|
|
|
<span class="d-block small text-body mb-1">$5k monthly</span>
|
|
</div>
|
|
<!-- End Card Body -->
|
|
|
|
<!-- Card Footer -->
|
|
<div class="card-footer pt-0">
|
|
<ul class="list-inline list-separator small text-body">
|
|
<li class="list-inline-item">Posted 1 day ago</li>
|
|
<li class="list-inline-item">London</li>
|
|
<li class="list-inline-item">Full time</li>
|
|
</ul>
|
|
</div>
|
|
<!-- End Card Footer -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-5">
|
|
<!-- Card -->
|
|
<div class="card card-bordered h-100">
|
|
<!-- Card Body -->
|
|
<div class="card-body">
|
|
<div class="row mb-3">
|
|
<div class="col">
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-4x3" src="../assets/svg/brands/prosperops-icon.svg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<h6 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">Prosperops</a>
|
|
</h6>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<!-- Checkbbox Bookmark -->
|
|
<div class="form-check form-check-bookmark">
|
|
<input class="form-check-input" type="checkbox" value="" id="jobsCardBookmarkCheck4">
|
|
<label class="form-check-label" for="jobsCardBookmarkCheck4">
|
|
<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>
|
|
<!-- End Row -->
|
|
|
|
<h3 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">Senior backend developer</a>
|
|
</h3>
|
|
|
|
<span class="d-block small text-body mb-1">$75k-$85k yearly</span>
|
|
|
|
<span class="badge bg-soft-info text-info me-2">
|
|
<span class="legend-indicator bg-info"></span>Remote
|
|
</span>
|
|
</div>
|
|
<!-- End Card Body -->
|
|
|
|
<!-- Card Footer -->
|
|
<div class="card-footer pt-0">
|
|
<ul class="list-inline list-separator small text-body">
|
|
<li class="list-inline-item">Posted 1 day ago</li>
|
|
<li class="list-inline-item">Liverpool</li>
|
|
<li class="list-inline-item">Full time</li>
|
|
</ul>
|
|
</div>
|
|
<!-- End Card Footer -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Heading -->
|
|
<h2 id="component-7" class="hs-docs-heading">
|
|
Component #7 <a class="anchorjs-link" href="#component-7" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
|
</h2>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<!-- Header -->
|
|
<div class="card-header">
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment" id="navTab7" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="nav-resultTab7" href="#nav-result7" data-bs-toggle="pill" data-bs-target="#nav-result7" role="tab" aria-controls="nav-result7" aria-selected="true">Preview</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-htmlTab7" href="#nav-html7" data-bs-toggle="pill" data-bs-target="#nav-html7" role="tab" aria-controls="nav-html7" aria-selected="false">HTML</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-cssTab7" href="#nav-css7" data-bs-toggle="pill" data-bs-target="#nav-css7" role="tab" aria-controls="nav-css7" aria-selected="false">CSS</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-jsTab7" href="#nav-js7" data-bs-toggle="pill" data-bs-target="#nav-js7" role="tab" aria-controls="nav-js7" aria-selected="false">JS</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="navTabContent7">
|
|
<div class="tab-pane fade p-4 show active" id="nav-result7" role="tabpanel" aria-labelledby="nav-resultTab7">
|
|
<!-- Card Grid -->
|
|
<div id="jobs-section" class="container">
|
|
<div class="mb-4">
|
|
<h3>Jobs</h3>
|
|
<p>We were not able to detect your location. You can browse through all 105 jobs Capsule has to offer.</p>
|
|
</div>
|
|
|
|
<!-- Swiper Slider -->
|
|
<div class="js-swiper-employer-jobs swiper swiper-equal-height">
|
|
<div class="swiper-wrapper">
|
|
<!-- Slide -->
|
|
<div class="swiper-slide">
|
|
<!-- Card -->
|
|
<div class="card card-bordered shadow-none w-100">
|
|
<!-- Card Body -->
|
|
<div class="card-body">
|
|
<h3 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">Senior B2B sales consultant</a>
|
|
</h3>
|
|
|
|
<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 Card Body -->
|
|
|
|
<!-- Card Footer -->
|
|
<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>
|
|
<!-- End Card Footer -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Slide -->
|
|
|
|
<!-- Slide -->
|
|
<div class="swiper-slide">
|
|
<!-- Card -->
|
|
<div class="card card-bordered shadow-none w-100">
|
|
<!-- Card Body -->
|
|
<div class="card-body">
|
|
<h3 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">Office assistant/Social media assistant</a>
|
|
</h3>
|
|
|
|
<span class="d-block small text-body mb-1">$50-$135 hourly</span>
|
|
</div>
|
|
<!-- End Card Body -->
|
|
|
|
<!-- Card Footer -->
|
|
<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>
|
|
<!-- End Card Footer -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Slide -->
|
|
|
|
<!-- Slide -->
|
|
<div class="swiper-slide">
|
|
<!-- Card -->
|
|
<div class="card card-bordered shadow-none w-100">
|
|
<!-- Card Body -->
|
|
<div class="card-body">
|
|
<h3 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">Marketing and Communications Manager</a>
|
|
</h3>
|
|
|
|
<span class="d-block small text-body mb-1">$5k monthly</span>
|
|
</div>
|
|
<!-- End Card Body -->
|
|
|
|
<!-- Card Footer -->
|
|
<div class="card-footer pt-0">
|
|
<ul class="list-inline list-separator small text-body">
|
|
<li class="list-inline-item">Posted 1 day ago</li>
|
|
<li class="list-inline-item">London</li>
|
|
<li class="list-inline-item">Full time</li>
|
|
</ul>
|
|
</div>
|
|
<!-- End Card Footer -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Slide -->
|
|
|
|
<!-- Slide -->
|
|
<div class="swiper-slide">
|
|
<!-- Card -->
|
|
<div class="card card-bordered shadow-none w-100">
|
|
<!-- Card Body -->
|
|
<div class="card-body">
|
|
<h3 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">Senior backend developer</a>
|
|
</h3>
|
|
|
|
<span class="d-block small text-body mb-1">$75k-$85k yearly</span>
|
|
|
|
<span class="badge bg-soft-info text-info me-2">
|
|
<span class="legend-indicator bg-info"></span>Remote
|
|
</span>
|
|
</div>
|
|
<!-- End Card Body -->
|
|
|
|
<!-- Card Footer -->
|
|
<div class="card-footer pt-0">
|
|
<ul class="list-inline list-separator small text-body">
|
|
<li class="list-inline-item">Posted 1 day ago</li>
|
|
<li class="list-inline-item">Liverpool</li>
|
|
<li class="list-inline-item">Full time</li>
|
|
</ul>
|
|
</div>
|
|
<!-- End Card Footer -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Slide -->
|
|
|
|
<!-- Slide -->
|
|
<div class="swiper-slide">
|
|
<!-- Card -->
|
|
<div class="card card-bordered shadow-none w-100">
|
|
<!-- Card Body -->
|
|
<div class="card-body">
|
|
<h3 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">Senior product manager</a>
|
|
</h3>
|
|
|
|
<span class="d-block small text-body mb-1">$76k-$98k yearly</span>
|
|
</div>
|
|
<!-- End Card Body -->
|
|
|
|
<!-- Card Footer -->
|
|
<div class="card-footer pt-0">
|
|
<ul class="list-inline list-separator small text-body">
|
|
<li class="list-inline-item">Posted 2 days ago</li>
|
|
<li class="list-inline-item">London</li>
|
|
<li class="list-inline-item">Full time</li>
|
|
</ul>
|
|
</div>
|
|
<!-- End Card Footer -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Slide -->
|
|
|
|
<!-- Slide -->
|
|
<div class="swiper-slide">
|
|
<!-- Card -->
|
|
<div class="card card-bordered shadow-none w-100">
|
|
<!-- Card Body -->
|
|
<div class="card-body">
|
|
<h3 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">iOS Engineer</a>
|
|
</h3>
|
|
|
|
<span class="d-block small text-body mb-1">$500-$1000 weekly</span>
|
|
|
|
<span class="badge bg-soft-info text-info me-2">
|
|
<span class="legend-indicator bg-info"></span>Remote
|
|
</span>
|
|
</div>
|
|
<!-- End Card Body -->
|
|
|
|
<!-- Card Footer -->
|
|
<div class="card-footer pt-0">
|
|
<ul class="list-inline list-separator small text-body">
|
|
<li class="list-inline-item">Posted 3 days ago</li>
|
|
<li class="list-inline-item">Manchester</li>
|
|
<li class="list-inline-item">Part time</li>
|
|
</ul>
|
|
</div>
|
|
<!-- End Card Footer -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Slide -->
|
|
</div>
|
|
|
|
<!-- Arrows -->
|
|
<div class="js-swiper-employer-jobs-button-next swiper-button-next"></div>
|
|
<div class="js-swiper-employer-jobs-button-prev swiper-button-prev"></div>
|
|
</div>
|
|
<!-- End Swiper Slider -->
|
|
</div>
|
|
<!-- Card Grid -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html7" role="tabpanel" aria-labelledby="nav-htmlTab7">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Card Grid -->
|
|
<div id="jobs-section" class="container">
|
|
<div class="mb-4">
|
|
<h3>Jobs</h3>
|
|
<p>We were not able to detect your location. You can browse through all 105 jobs Capsule has to offer.</p>
|
|
</div>
|
|
|
|
<!-- Swiper Slider -->
|
|
<div class="js-swiper-employer-jobs swiper swiper-equal-height">
|
|
<div class="swiper-wrapper">
|
|
<!-- Slide -->
|
|
<div class="swiper-slide">
|
|
<!-- Card -->
|
|
<div class="card card-bordered shadow-none w-100">
|
|
<!-- Card Body -->
|
|
<div class="card-body">
|
|
<h3 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">Senior B2B sales consultant</a>
|
|
</h3>
|
|
|
|
<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 Card Body -->
|
|
|
|
<!-- Card Footer -->
|
|
<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>
|
|
<!-- End Card Footer -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Slide -->
|
|
|
|
<!-- Slide -->
|
|
<div class="swiper-slide">
|
|
<!-- Card -->
|
|
<div class="card card-bordered shadow-none w-100">
|
|
<!-- Card Body -->
|
|
<div class="card-body">
|
|
<h3 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">Office assistant/Social media assistant</a>
|
|
</h3>
|
|
|
|
<span class="d-block small text-body mb-1">$50-$135 hourly</span>
|
|
</div>
|
|
<!-- End Card Body -->
|
|
|
|
<!-- Card Footer -->
|
|
<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>
|
|
<!-- End Card Footer -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Slide -->
|
|
|
|
<!-- Slide -->
|
|
<div class="swiper-slide">
|
|
<!-- Card -->
|
|
<div class="card card-bordered shadow-none w-100">
|
|
<!-- Card Body -->
|
|
<div class="card-body">
|
|
<h3 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">Marketing and Communications Manager</a>
|
|
</h3>
|
|
|
|
<span class="d-block small text-body mb-1">$5k monthly</span>
|
|
</div>
|
|
<!-- End Card Body -->
|
|
|
|
<!-- Card Footer -->
|
|
<div class="card-footer pt-0">
|
|
<ul class="list-inline list-separator small text-body">
|
|
<li class="list-inline-item">Posted 1 day ago</li>
|
|
<li class="list-inline-item">London</li>
|
|
<li class="list-inline-item">Full time</li>
|
|
</ul>
|
|
</div>
|
|
<!-- End Card Footer -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Slide -->
|
|
|
|
<!-- Slide -->
|
|
<div class="swiper-slide">
|
|
<!-- Card -->
|
|
<div class="card card-bordered shadow-none w-100">
|
|
<!-- Card Body -->
|
|
<div class="card-body">
|
|
<h3 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">Senior backend developer</a>
|
|
</h3>
|
|
|
|
<span class="d-block small text-body mb-1">$75k-$85k yearly</span>
|
|
|
|
<span class="badge bg-soft-info text-info me-2">
|
|
<span class="legend-indicator bg-info"></span>Remote
|
|
</span>
|
|
</div>
|
|
<!-- End Card Body -->
|
|
|
|
<!-- Card Footer -->
|
|
<div class="card-footer pt-0">
|
|
<ul class="list-inline list-separator small text-body">
|
|
<li class="list-inline-item">Posted 1 day ago</li>
|
|
<li class="list-inline-item">Liverpool</li>
|
|
<li class="list-inline-item">Full time</li>
|
|
</ul>
|
|
</div>
|
|
<!-- End Card Footer -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Slide -->
|
|
|
|
<!-- Slide -->
|
|
<div class="swiper-slide">
|
|
<!-- Card -->
|
|
<div class="card card-bordered shadow-none w-100">
|
|
<!-- Card Body -->
|
|
<div class="card-body">
|
|
<h3 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">Senior product manager</a>
|
|
</h3>
|
|
|
|
<span class="d-block small text-body mb-1">$76k-$98k yearly</span>
|
|
</div>
|
|
<!-- End Card Body -->
|
|
|
|
<!-- Card Footer -->
|
|
<div class="card-footer pt-0">
|
|
<ul class="list-inline list-separator small text-body">
|
|
<li class="list-inline-item">Posted 2 days ago</li>
|
|
<li class="list-inline-item">London</li>
|
|
<li class="list-inline-item">Full time</li>
|
|
</ul>
|
|
</div>
|
|
<!-- End Card Footer -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Slide -->
|
|
|
|
<!-- Slide -->
|
|
<div class="swiper-slide">
|
|
<!-- Card -->
|
|
<div class="card card-bordered shadow-none w-100">
|
|
<!-- Card Body -->
|
|
<div class="card-body">
|
|
<h3 class="card-title">
|
|
<a class="text-dark" href="../demo-jobs/employer.html">iOS Engineer</a>
|
|
</h3>
|
|
|
|
<span class="d-block small text-body mb-1">$500-$1000 weekly</span>
|
|
|
|
<span class="badge bg-soft-info text-info me-2">
|
|
<span class="legend-indicator bg-info"></span>Remote
|
|
</span>
|
|
</div>
|
|
<!-- End Card Body -->
|
|
|
|
<!-- Card Footer -->
|
|
<div class="card-footer pt-0">
|
|
<ul class="list-inline list-separator small text-body">
|
|
<li class="list-inline-item">Posted 3 days ago</li>
|
|
<li class="list-inline-item">Manchester</li>
|
|
<li class="list-inline-item">Part time</li>
|
|
</ul>
|
|
</div>
|
|
<!-- End Card Footer -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Slide -->
|
|
</div>
|
|
|
|
<!-- Arrows -->
|
|
<div class="js-swiper-employer-jobs-button-next swiper-button-next"></div>
|
|
<div class="js-swiper-employer-jobs-button-prev swiper-button-prev"></div>
|
|
</div>
|
|
<!-- End Swiper Slider -->
|
|
</div>
|
|
<!-- Card Grid -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-css7" role="tabpanel" aria-labelledby="nav-cssTab7">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<link rel="stylesheet" href="../assets/vendor/swiper/swiper-bundle.min.css">
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-js7" role="tabpanel" aria-labelledby="nav-jsTab7">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- JS Implementing Plugins -->
|
|
<script src="../assets/vendor/swiper/swiper-bundle.min.js"></script>
|
|
|
|
<!-- JS Plugins Init. -->
|
|
<script>
|
|
(function() {
|
|
// INITIALIZATION OF SWIPER
|
|
// =======================================================
|
|
var swiper = new Swiper('.js-swiper-employer-jobs',{
|
|
slidesPerView: 1,
|
|
navigation: {
|
|
nextEl: '.js-swiper-employer-jobs-button-next',
|
|
prevEl: '.js-swiper-employer-jobs-button-prev',
|
|
},
|
|
breakpoints: {
|
|
480: {
|
|
slidesPerView: 2,
|
|
spaceBetween: 15,
|
|
},
|
|
768: {
|
|
slidesPerView: 3,
|
|
spaceBetween: 15,
|
|
},
|
|
}
|
|
});
|
|
})()
|
|
</script>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Heading -->
|
|
<h2 id="component-8" class="hs-docs-heading">
|
|
Component #8 <a class="anchorjs-link" href="#component-8" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
|
</h2>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<!-- Header -->
|
|
<div class="card-header">
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment" id="navTab8" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="nav-resultTab8" href="#nav-result8" data-bs-toggle="pill" data-bs-target="#nav-result8" role="tab" aria-controls="nav-result8" aria-selected="true">Preview</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-htmlTab8" href="#nav-html8" data-bs-toggle="pill" data-bs-target="#nav-html8" role="tab" aria-controls="nav-html8" aria-selected="false">HTML</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="navTabContent8">
|
|
<div class="tab-pane fade p-4 show active" id="nav-result8" role="tabpanel" aria-labelledby="nav-resultTab8">
|
|
<!-- Card Grid -->
|
|
<div id="interview-section" class="container">
|
|
<div class="mb-4">
|
|
<h3>Interview insights</h3>
|
|
<p>Insights from 209 Front Job users who have interviewed with Capsule within the last 5 years.</p>
|
|
</div>
|
|
|
|
<div class="row mb-5">
|
|
<div class="col-md mb-3">
|
|
<!-- Card -->
|
|
<div class="card card-bordered shadow-none h-100">
|
|
<div class="card-body">
|
|
<p class="card-text">Interview experience:</p>
|
|
<h4 class="card-title">Favorable</h4>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md mb-3">
|
|
<!-- Card -->
|
|
<div class="card card-bordered shadow-none h-100">
|
|
<div class="card-body">
|
|
<p class="card-text">Interview difficulty:</p>
|
|
<h4 class="card-title">Medium</h4>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md mb-3">
|
|
<!-- Card -->
|
|
<div class="card card-bordered shadow-none h-100">
|
|
<div class="card-body">
|
|
<p class="card-text">Interview process length:</p>
|
|
<h4 class="card-title">About a day or two</h4>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="mb-4">
|
|
<h4>Interview process length</h4>
|
|
</div>
|
|
|
|
<div class="row row-cols-2 row-cols-sm-3 row-cols-lg-5 gx-3 mb-7">
|
|
<div class="col mb-3">
|
|
<!-- Card -->
|
|
<div class="card card-sm card-bordered shadow-none h-100">
|
|
<div class="card-body">
|
|
<h6 class="card-title">About a day or two</h6>
|
|
</div>
|
|
|
|
<div class="card-footer pt-0">
|
|
<span class="card-subtitle">43%</span>
|
|
|
|
<div class="progress" style="height: 8px;">
|
|
<div class="progress-bar bg-success" role="progressbar" style="width: 43%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-3">
|
|
<!-- Card -->
|
|
<div class="card card-sm card-bordered shadow-none h-100">
|
|
<div class="card-body">
|
|
<h6 class="card-title">About a week</h6>
|
|
</div>
|
|
|
|
<div class="card-footer pt-0">
|
|
<span class="card-subtitle">28%</span>
|
|
|
|
<div class="progress" style="height: 8px;">
|
|
<div class="progress-bar bg-success" role="progressbar" style="width: 28%" aria-valuenow="28" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-3">
|
|
<!-- Card -->
|
|
<div class="card card-sm card-bordered shadow-none h-100">
|
|
<div class="card-body">
|
|
<h6 class="card-title">About two weeks</h6>
|
|
</div>
|
|
|
|
<div class="card-footer pt-0">
|
|
<span class="card-subtitle">17%</span>
|
|
|
|
<div class="progress" style="height: 8px;">
|
|
<div class="progress-bar bg-success" role="progressbar" style="width: 17%" aria-valuenow="17" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-3">
|
|
<!-- Card -->
|
|
<div class="card card-sm card-bordered shadow-none h-100">
|
|
<div class="card-body">
|
|
<h6 class="card-title">More than one month</h6>
|
|
</div>
|
|
|
|
<div class="card-footer pt-0">
|
|
<span class="card-subtitle">6%</span>
|
|
|
|
<div class="progress" style="height: 8px;">
|
|
<div class="progress-bar bg-success" role="progressbar" style="width: 6%" aria-valuenow="6" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-3">
|
|
<!-- Card -->
|
|
<div class="card card-sm card-bordered shadow-none h-100">
|
|
<div class="card-body">
|
|
<h6 class="card-title">About a month</h6>
|
|
</div>
|
|
|
|
<div class="card-footer pt-0">
|
|
<span class="card-subtitle">5%</span>
|
|
|
|
<div class="progress" style="height: 8px;">
|
|
<div class="progress-bar bg-success" role="progressbar" style="width: 5%" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<a class="btn btn-outline-primary" href="#">View all interviews <i class="bi-chevron-right small ms-1"></i></a>
|
|
</div>
|
|
<!-- Card Grid -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html8" role="tabpanel" aria-labelledby="nav-htmlTab8">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Card Grid -->
|
|
<div id="interview-section" class="container">
|
|
<div class="mb-4">
|
|
<h3>Interview insights</h3>
|
|
<p>Insights from 209 Front Job users who have interviewed with Capsule within the last 5 years.</p>
|
|
</div>
|
|
|
|
<div class="row mb-5">
|
|
<div class="col-md mb-3">
|
|
<!-- Card -->
|
|
<div class="card card-bordered shadow-none h-100">
|
|
<div class="card-body">
|
|
<p class="card-text">Interview experience:</p>
|
|
<h4 class="card-title">Favorable</h4>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md mb-3">
|
|
<!-- Card -->
|
|
<div class="card card-bordered shadow-none h-100">
|
|
<div class="card-body">
|
|
<p class="card-text">Interview difficulty:</p>
|
|
<h4 class="card-title">Medium</h4>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md mb-3">
|
|
<!-- Card -->
|
|
<div class="card card-bordered shadow-none h-100">
|
|
<div class="card-body">
|
|
<p class="card-text">Interview process length:</p>
|
|
<h4 class="card-title">About a day or two</h4>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="mb-4">
|
|
<h4>Interview process length</h4>
|
|
</div>
|
|
|
|
<div class="row row-cols-2 row-cols-sm-3 row-cols-lg-5 gx-3 mb-7">
|
|
<div class="col mb-3">
|
|
<!-- Card -->
|
|
<div class="card card-sm card-bordered shadow-none h-100">
|
|
<div class="card-body">
|
|
<h6 class="card-title">About a day or two</h6>
|
|
</div>
|
|
|
|
<div class="card-footer pt-0">
|
|
<span class="card-subtitle">43%</span>
|
|
|
|
<div class="progress" style="height: 8px;">
|
|
<div class="progress-bar bg-success" role="progressbar" style="width: 43%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-3">
|
|
<!-- Card -->
|
|
<div class="card card-sm card-bordered shadow-none h-100">
|
|
<div class="card-body">
|
|
<h6 class="card-title">About a week</h6>
|
|
</div>
|
|
|
|
<div class="card-footer pt-0">
|
|
<span class="card-subtitle">28%</span>
|
|
|
|
<div class="progress" style="height: 8px;">
|
|
<div class="progress-bar bg-success" role="progressbar" style="width: 28%" aria-valuenow="28" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-3">
|
|
<!-- Card -->
|
|
<div class="card card-sm card-bordered shadow-none h-100">
|
|
<div class="card-body">
|
|
<h6 class="card-title">About two weeks</h6>
|
|
</div>
|
|
|
|
<div class="card-footer pt-0">
|
|
<span class="card-subtitle">17%</span>
|
|
|
|
<div class="progress" style="height: 8px;">
|
|
<div class="progress-bar bg-success" role="progressbar" style="width: 17%" aria-valuenow="17" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-3">
|
|
<!-- Card -->
|
|
<div class="card card-sm card-bordered shadow-none h-100">
|
|
<div class="card-body">
|
|
<h6 class="card-title">More than one month</h6>
|
|
</div>
|
|
|
|
<div class="card-footer pt-0">
|
|
<span class="card-subtitle">6%</span>
|
|
|
|
<div class="progress" style="height: 8px;">
|
|
<div class="progress-bar bg-success" role="progressbar" style="width: 6%" aria-valuenow="6" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-3">
|
|
<!-- Card -->
|
|
<div class="card card-sm card-bordered shadow-none h-100">
|
|
<div class="card-body">
|
|
<h6 class="card-title">About a month</h6>
|
|
</div>
|
|
|
|
<div class="card-footer pt-0">
|
|
<span class="card-subtitle">5%</span>
|
|
|
|
<div class="progress" style="height: 8px;">
|
|
<div class="progress-bar bg-success" role="progressbar" style="width: 5%" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<a class="btn btn-outline-primary" href="#">View all interviews <i class="bi-chevron-right small ms-1"></i></a>
|
|
</div>
|
|
<!-- Card Grid -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Heading -->
|
|
<h2 id="component-9" class="hs-docs-heading">
|
|
Component #9 <a class="anchorjs-link" href="#component-9" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
|
</h2>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<!-- Header -->
|
|
<div class="card-header">
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment" id="navTab9" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="nav-resultTab9" href="#nav-result9" data-bs-toggle="pill" data-bs-target="#nav-result9" role="tab" aria-controls="nav-result9" aria-selected="true">Preview</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-htmlTab9" href="#nav-html9" data-bs-toggle="pill" data-bs-target="#nav-html9" role="tab" aria-controls="nav-html9" aria-selected="false">HTML</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="navTabContent9">
|
|
<div class="tab-pane fade p-4 show active" id="nav-result9" role="tabpanel" aria-labelledby="nav-resultTab9">
|
|
<!-- Card Grid -->
|
|
<div id="locations-section" class="container">
|
|
<div class="mb-4">
|
|
<h3>Capsule locations</h3>
|
|
</div>
|
|
|
|
<div class="row row-cols-1 row-cols-sm-2 1 row-cols-md-3 row-cols-lg-4">
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-bordered card-transition h-100" href="#">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-circle" src="../assets/img/480x320/img28.jpg" alt="SVG">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="card-title text-inherit">London, UK</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<span class="text-muted">
|
|
<i class="bi-chevron-right small"></i>
|
|
</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-bordered card-transition h-100" href="#">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-circle" src="../assets/img/480x320/img8.jpg" alt="SVG">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="card-title text-inherit">Bristol, UK</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<span class="text-muted">
|
|
<i class="bi-chevron-right small"></i>
|
|
</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-bordered card-transition h-100" href="#">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-circle" src="../assets/img/480x320/img29.jpg" alt="SVG">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="card-title text-inherit">Oxford, UK</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<span class="text-muted">
|
|
<i class="bi-chevron-right small"></i>
|
|
</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-bordered card-transition h-100" href="#">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-circle" src="../assets/img/480x320/img11.jpg" alt="SVG">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="card-title text-inherit">Edinburgh, UK</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<span class="text-muted">
|
|
<i class="bi-chevron-right small"></i>
|
|
</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-bordered card-transition h-100" href="#">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-circle" src="../assets/img/480x320/img10.jpg" alt="SVG">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="card-title text-inherit">Newcastle, UK</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<span class="text-muted">
|
|
<i class="bi-chevron-right small"></i>
|
|
</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div id="pageHeaderTabEndPoint" class="col mb-3">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-bordered card-transition h-100" href="#">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-circle" src="../assets/img/480x320/img9.jpg" alt="SVG">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="card-title text-inherit">Liverpool, UK</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<span class="text-muted">
|
|
<i class="bi-chevron-right small"></i>
|
|
</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- Card Grid -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html9" role="tabpanel" aria-labelledby="nav-htmlTab9">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Card Grid -->
|
|
<div id="locations-section" class="container">
|
|
<div class="mb-4">
|
|
<h3>Capsule locations</h3>
|
|
</div>
|
|
|
|
<div class="row row-cols-1 row-cols-sm-2 1 row-cols-md-3 row-cols-lg-4">
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-bordered card-transition h-100" href="#">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-circle" src="../assets/img/480x320/img28.jpg" alt="SVG">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="card-title text-inherit">London, UK</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<span class="text-muted">
|
|
<i class="bi-chevron-right small"></i>
|
|
</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-bordered card-transition h-100" href="#">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-circle" src="../assets/img/480x320/img8.jpg" alt="SVG">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="card-title text-inherit">Bristol, UK</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<span class="text-muted">
|
|
<i class="bi-chevron-right small"></i>
|
|
</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-bordered card-transition h-100" href="#">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-circle" src="../assets/img/480x320/img29.jpg" alt="SVG">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="card-title text-inherit">Oxford, UK</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<span class="text-muted">
|
|
<i class="bi-chevron-right small"></i>
|
|
</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-bordered card-transition h-100" href="#">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-circle" src="../assets/img/480x320/img11.jpg" alt="SVG">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="card-title text-inherit">Edinburgh, UK</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<span class="text-muted">
|
|
<i class="bi-chevron-right small"></i>
|
|
</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-bordered card-transition h-100" href="#">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-circle" src="../assets/img/480x320/img10.jpg" alt="SVG">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="card-title text-inherit">Newcastle, UK</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<span class="text-muted">
|
|
<i class="bi-chevron-right small"></i>
|
|
</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div id="pageHeaderTabEndPoint" class="col mb-3">
|
|
<!-- Card -->
|
|
<a class="card card-sm card-bordered card-transition h-100" href="#">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-circle" src="../assets/img/480x320/img9.jpg" alt="SVG">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="card-title text-inherit">Liverpool, UK</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<span class="text-muted">
|
|
<i class="bi-chevron-right small"></i>
|
|
</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- Card Grid -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Heading -->
|
|
<h2 id="component-10" class="hs-docs-heading">
|
|
Component #10 <a class="anchorjs-link" href="#component-10" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
|
</h2>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<!-- Header -->
|
|
<div class="card-header">
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment" id="navTab10" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="nav-resultTab10" href="#nav-result10" data-bs-toggle="pill" data-bs-target="#nav-result10" role="tab" aria-controls="nav-result10" aria-selected="true">Preview</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-htmlTab10" href="#nav-html10" data-bs-toggle="pill" data-bs-target="#nav-html10" role="tab" aria-controls="nav-html10" aria-selected="false">HTML</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="navTabContent10">
|
|
<div class="tab-pane fade p-4 show active" id="nav-result10" role="tabpanel" aria-labelledby="nav-resultTab10">
|
|
<div class="row row-cols-sm-2 row-cols-md-3">
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<div class="card card-bordered shadow-none text-center h-100">
|
|
<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 class="card-pinned-top-end">
|
|
<button type="button" class="btn btn-outline-secondary btn-xs btn-icon rounded-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="Save for later">
|
|
<i class="bi-heart"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div class="mb-2">
|
|
<a class="link-sm link-secondary" href="#">Accessories</a>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<div class="card-footer pt-0">
|
|
<!-- Rating -->
|
|
<a class="d-inline-flex align-items-center mb-3" 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>
|
|
<!-- End Rating -->
|
|
|
|
<button type="button" class="btn btn-outline-primary btn-sm rounded-pill">Add to cart</button>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<div class="card card-bordered shadow-none text-center h-100">
|
|
<div class="card-pinned">
|
|
<img class="card-img-top" src="../assets/img/300x180/img1.jpg" alt="Image Description">
|
|
|
|
<div class="card-pinned-top-end">
|
|
<button type="button" class="btn btn-outline-secondary btn-xs btn-icon rounded-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="Save for later">
|
|
<i class="bi-heart"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div class="mb-2">
|
|
<a class="link-sm link-secondary" href="#">Clothing</a>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<div class="card-footer pt-0">
|
|
<!-- Rating -->
|
|
<a class="d-inline-flex align-items-center mb-3" 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>
|
|
<!-- End Rating -->
|
|
|
|
<button type="button" class="btn btn-outline-primary btn-sm rounded-pill">Add to cart</button>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<div class="card card-bordered shadow-none text-center h-100">
|
|
<div class="card-pinned">
|
|
<img class="card-img-top" src="../assets/img/300x180/img4.jpg" alt="Image Description">
|
|
|
|
<div class="card-pinned-top-start">
|
|
<span class="badge bg-danger rounded-pill">Out of stock</span>
|
|
</div>
|
|
|
|
<div class="card-pinned-top-end">
|
|
<button type="button" class="btn btn-outline-secondary btn-xs btn-icon rounded-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="Save for later">
|
|
<i class="bi-heart"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div class="mb-2">
|
|
<a class="link-sm link-secondary" href="#">Accessories</a>
|
|
</div>
|
|
|
|
<h4 class="card-title">
|
|
<a class="text-dark" href="../demo-shop/product-overview.html">Herschel backpack in gray</a>
|
|
</h4>
|
|
<p class="card-text text-dark">$29.99 <span class="text-body ms-1"><del>$33.99</del></span></p>
|
|
</div>
|
|
|
|
<div class="card-footer pt-0">
|
|
<!-- Rating -->
|
|
<a class="d-inline-flex align-items-center mb-3" 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-muted.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
</div>
|
|
<span class="small">125</span>
|
|
</a>
|
|
<!-- End Rating -->
|
|
|
|
<button type="button" class="btn btn-outline-primary btn-sm rounded-pill">Add to cart</button>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html10" role="tabpanel" aria-labelledby="nav-htmlTab10">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<div class="row row-cols-sm-2 row-cols-md-3">
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<div class="card card-bordered shadow-none text-center h-100">
|
|
<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 class="card-pinned-top-end">
|
|
<button type="button" class="btn btn-outline-secondary btn-xs btn-icon rounded-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="Save for later">
|
|
<i class="bi-heart"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div class="mb-2">
|
|
<a class="link-sm link-secondary" href="#">Accessories</a>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<div class="card-footer pt-0">
|
|
<!-- Rating -->
|
|
<a class="d-inline-flex align-items-center mb-3" 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>
|
|
<!-- End Rating -->
|
|
|
|
<button type="button" class="btn btn-outline-primary btn-sm rounded-pill">Add to cart</button>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<div class="card card-bordered shadow-none text-center h-100">
|
|
<div class="card-pinned">
|
|
<img class="card-img-top" src="../assets/img/300x180/img1.jpg" alt="Image Description">
|
|
|
|
<div class="card-pinned-top-end">
|
|
<button type="button" class="btn btn-outline-secondary btn-xs btn-icon rounded-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="Save for later">
|
|
<i class="bi-heart"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div class="mb-2">
|
|
<a class="link-sm link-secondary" href="#">Clothing</a>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<div class="card-footer pt-0">
|
|
<!-- Rating -->
|
|
<a class="d-inline-flex align-items-center mb-3" 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>
|
|
<!-- End Rating -->
|
|
|
|
<button type="button" class="btn btn-outline-primary btn-sm rounded-pill">Add to cart</button>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col mb-4">
|
|
<!-- Card -->
|
|
<div class="card card-bordered shadow-none text-center h-100">
|
|
<div class="card-pinned">
|
|
<img class="card-img-top" src="../assets/img/300x180/img4.jpg" alt="Image Description">
|
|
|
|
<div class="card-pinned-top-start">
|
|
<span class="badge bg-danger rounded-pill">Out of stock</span>
|
|
</div>
|
|
|
|
<div class="card-pinned-top-end">
|
|
<button type="button" class="btn btn-outline-secondary btn-xs btn-icon rounded-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="Save for later">
|
|
<i class="bi-heart"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div class="mb-2">
|
|
<a class="link-sm link-secondary" href="#">Accessories</a>
|
|
</div>
|
|
|
|
<h4 class="card-title">
|
|
<a class="text-dark" href="../demo-shop/product-overview.html">Herschel backpack in gray</a>
|
|
</h4>
|
|
<p class="card-text text-dark">$29.99 <span class="text-body ms-1"><del>$33.99</del></span></p>
|
|
</div>
|
|
|
|
<div class="card-footer pt-0">
|
|
<!-- Rating -->
|
|
<a class="d-inline-flex align-items-center mb-3" 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-muted.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
</div>
|
|
<span class="small">125</span>
|
|
</a>
|
|
<!-- End Rating -->
|
|
|
|
<button type="button" class="btn btn-outline-primary btn-sm rounded-pill">Add to cart</button>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Content -->
|
|
</main>
|
|
<!-- ========== END MAIN CONTENT ========== -->
|
|
|
|
<!-- ========== SECONDARY CONTENTS ========== -->
|
|
<!-- Go To -->
|
|
<a class="js-go-to go-to position-fixed" href="javascript:;" style="visibility: hidden;"
|
|
data-hs-go-to-options='{
|
|
"offsetTop": 700,
|
|
"position": {
|
|
"init": {
|
|
"right": "2rem"
|
|
},
|
|
"show": {
|
|
"bottom": "2rem"
|
|
},
|
|
"hide": {
|
|
"bottom": "-2rem"
|
|
}
|
|
}
|
|
}'>
|
|
<i class="bi-chevron-up"></i>
|
|
</a>
|
|
<!-- ========== END SECONDARY CONTENTS ========== -->
|
|
|
|
<!-- JS Global Compulsory -->
|
|
<script src="../assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<!-- JS Implementing Plugins -->
|
|
<script src="../assets/vendor/hs-header/dist/hs-header.min.js"></script>
|
|
<script src="../assets/vendor/hs-nav-scroller/dist/hs-nav-scroller.min.js"></script>
|
|
<script src="../assets/vendor/list.js/dist/list.min.js"></script>
|
|
<script src="../assets/vendor/hs-go-to/dist/hs-go-to.min.js"></script>
|
|
<script src="../assets/vendor/prism/prism.js"></script>
|
|
<script src="../assets/vendor/fslightbox/index.js"></script>
|
|
<script src="../assets/vendor/swiper/swiper-bundle.min.js"></script>
|
|
|
|
<!-- JS Front -->
|
|
<script src="../assets/js/theme.min.js"></script>
|
|
|
|
<!-- JS Plugins Init. -->
|
|
<script>
|
|
(function() {
|
|
// INITIALIZATION OF HEADER
|
|
// =======================================================
|
|
new HSHeader('#header').init()
|
|
|
|
|
|
// INITIALIZATION OF NAV SCROLLER
|
|
// =======================================================
|
|
new HsNavScroller('.js-nav-scroller', {
|
|
delay: 400,
|
|
offset: 140
|
|
})
|
|
|
|
|
|
// INITIALIZATION OF LISTJS COMPONENT
|
|
// =======================================================
|
|
HSCore.components.HSList.init('#snippetsSearch')
|
|
const snippetsSearch = HSCore.components.HSList.getItem('snippetsSearch')
|
|
|
|
|
|
// GET JSON FILE RESULTS
|
|
// =======================================================
|
|
fetch('../assets/json/snippets-search.json')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
snippetsSearch.add(data)
|
|
})
|
|
|
|
|
|
// INITIALIZATION OF GO TO
|
|
// =======================================================
|
|
new HSGoTo('.js-go-to')
|
|
|
|
|
|
// INITIALIZATION OF SWIPER
|
|
// =======================================================
|
|
var swiper = new Swiper('.js-swiper-employer-jobs',{
|
|
slidesPerView: 1,
|
|
navigation: {
|
|
nextEl: '.js-swiper-employer-jobs-button-next',
|
|
prevEl: '.js-swiper-employer-jobs-button-prev',
|
|
},
|
|
breakpoints: {
|
|
480: {
|
|
slidesPerView: 2,
|
|
spaceBetween: 15,
|
|
},
|
|
768: {
|
|
slidesPerView: 3,
|
|
spaceBetween: 15,
|
|
},
|
|
}
|
|
});
|
|
})()
|
|
</script>
|
|
</body>
|
|
</html>
|