5827 lines
298 KiB
HTML
5827 lines
298 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>Card 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/css/vendor.min.css">
|
||
<link rel="stylesheet" href="../assets/vendor/bootstrap-icons/font/bootstrap-icons.css">
|
||
|
||
<!-- CSS Front Template -->
|
||
<link rel="stylesheet" href="../assets/css/theme.min.css?v=1.0">
|
||
<link rel="stylesheet" href="../assets/css/snippets.css">
|
||
</head>
|
||
|
||
<body class="navbar-sidebar-aside-lg">
|
||
<!-- ========== HEADER ========== -->
|
||
<header id="header" class="navbar navbar-expand navbar-fixed navbar-end navbar-light navbar-sticky-lg-top bg-white">
|
||
<div class="container-fluid">
|
||
<nav class="navbar-nav-wrap">
|
||
<div class="row flex-grow-1">
|
||
<!-- Default Logo -->
|
||
<div class="docs-navbar-sidebar-container d-flex align-items-center mb-2 mb-lg-0">
|
||
<a class="navbar-brand" href="../snippets/index.html" aria-label="Space">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
||
</a>
|
||
<a href="../documentation/changelog.html">
|
||
<span class="badge bg-soft-primary text-primary">v4.1</span>
|
||
</a>
|
||
</div>
|
||
<!-- End Default Logo -->
|
||
|
||
<div class="col-md px-lg-0">
|
||
<div class="d-flex justify-content-between align-items-center px-lg-5 px-xl-10">
|
||
<div class="d-none d-md-block">
|
||
<!-- Search Form -->
|
||
<form id="snippetsSearch" class="position-relative"
|
||
data-hs-list-options='{
|
||
"searchMenu": true,
|
||
"keyboard": true,
|
||
"item": "searchTemplate",
|
||
"valueNames": ["component", "category", {"name": "link", "attr": "href"}],
|
||
"empty": "#searchNoResults"
|
||
}'>
|
||
<!-- Input Group -->
|
||
<div class="input-group input-group-merge navbar-input-group">
|
||
<div class="input-group-prepend input-group-text">
|
||
<i class="bi-search"></i>
|
||
</div>
|
||
|
||
<input type="search" class="search form-control form-control-sm" placeholder="Search in snippets" aria-label="Search in snippets">
|
||
|
||
<a class="input-group-append input-group-text" href="javascript:;">
|
||
<i id="clearSearchResultsIcon" class="bi-x" style="display: none;"></i>
|
||
</a>
|
||
</div>
|
||
<!-- End Input Group -->
|
||
|
||
<!-- List -->
|
||
<div class="list dropdown-menu w-100 overflow-auto" style="max-height: 16rem;"></div>
|
||
<!-- End List -->
|
||
|
||
<!-- Empty -->
|
||
<div id="searchNoResults" style="display: none;">
|
||
<div class="text-center p-4">
|
||
<img class="mb-3" src="../assets/svg/illustrations/oc-error.svg" alt="Image Description" style="width: 10rem;">
|
||
<p class="mb-0">No Results</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Empty -->
|
||
</form>
|
||
<!-- End Search Form -->
|
||
|
||
<!-- List Item Template -->
|
||
<div class="d-none">
|
||
<div id="searchTemplate" class="dropdown-item">
|
||
<a class="d-block link" href="#">
|
||
<span class="category d-block fw-normal text-muted mb-1"></span>
|
||
<span class="component text-dark"></span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<!-- End List Item Template -->
|
||
</div>
|
||
|
||
<!-- Navbar -->
|
||
<ul class="navbar-nav p-0">
|
||
<li class="nav-item">
|
||
<a class="btn btn-ghost-secondary btn-sm" href="https://htmlstream.com/contact-us" target="_blank">
|
||
Get Support <i class="bi-box-arrow-up-right ms-1"></i>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="btn btn-primary btn-sm" href="../index.html">
|
||
<i class="bi-eye me-1"></i> Preview Demo
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Navbar -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
<!-- ========== END HEADER ========== -->
|
||
|
||
<!-- ========== MAIN CONTENT ========== -->
|
||
<main id="content" role="main">
|
||
<!-- Navbar -->
|
||
<nav class="js-nav-scroller navbar navbar-expand-lg navbar-sidebar navbar-vertical navbar-light bg-white border-end"
|
||
data-hs-nav-scroller-options='{
|
||
"type": "vertical",
|
||
"target": ".navbar-nav .active",
|
||
"offset": 80
|
||
}'>
|
||
<!-- Navbar Toggle -->
|
||
<button type="button" class="navbar-toggler btn btn-white d-grid w-100" data-bs-toggle="collapse" data-bs-target="#navbarVerticalNavMenu" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarVerticalNavMenu">
|
||
<span class="d-flex justify-content-between align-items-center">
|
||
<span class="h6 mb-0">Nav menu</span>
|
||
|
||
<span class="navbar-toggler-default">
|
||
<i class="bi-list"></i>
|
||
</span>
|
||
|
||
<span class="navbar-toggler-toggled">
|
||
<i class="bi-x"></i>
|
||
</span>
|
||
</span>
|
||
</button>
|
||
<!-- End Navbar Toggle -->
|
||
|
||
<!-- Navbar Collapse -->
|
||
<div id="navbarVerticalNavMenu" class="collapse navbar-collapse">
|
||
<div class="navbar-brand-wrapper border-end" style="height: auto;">
|
||
<!-- Default Logo -->
|
||
<div class="d-flex align-items-center mb-3">
|
||
<a class="navbar-brand" href="../snippets/index.html" aria-label="Space">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
||
</a>
|
||
<a class="navbar-brand-badge" href="../documentation/changelog.html">
|
||
<span class="badge bg-soft-primary text-primary ms-2">v4.1</span>
|
||
</a>
|
||
</div>
|
||
<!-- End Default Logo -->
|
||
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment nav-fill nav-justified">
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="../documentation/index.html">Docs</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="../snippets/index.html">Snippets</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
|
||
<div class="docs-navbar-sidebar-aside-body navbar-sidebar-aside-body">
|
||
<ul id="navbarSettings" class="navbar-nav nav nav-vertical nav-tabs nav-tabs-borderless nav-sm">
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Snippets</span>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/index.html">Introduction</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Navbar / Heroes</span>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/navbar.html">Headers (Navbar)</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/hero-sections.html">Hero Sections</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Content</span>
|
||
</li>
|
||
|
||
<li class="nav-item ">
|
||
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavFeaturesCollapse" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="snippetsSidebarNavFeaturesCollapse">Features</a>
|
||
|
||
<div id="snippetsSidebarNavFeaturesCollapse" class="nav-collapse collapse ">
|
||
<a class="nav-link " href="features-general.html">General</a>
|
||
<a class="nav-link " href="features-stats.html">Stats</a>
|
||
<a class="nav-link " href="features-step.html">Step</a>
|
||
<a class="nav-link " href="features-navs.html">Navs (Tabs)</a>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/icon-blocks.html">Icon Blocks</a>
|
||
</li>
|
||
|
||
<li class="nav-item active">
|
||
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavCardsCollapse" role="button" data-bs-toggle="collapse" aria-expanded="true" aria-controls="snippetsSidebarNavCardsCollapse">Cards</a>
|
||
|
||
<div id="snippetsSidebarNavCardsCollapse" class="nav-collapse collapse show">
|
||
<a class="nav-link active" href="cards-grid.html">Grid</a>
|
||
<a class="nav-link " href="cards-list.html">List</a>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="nav-item ">
|
||
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavDirectoryCollapse" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="snippetsSidebarNavDirectoryCollapse">Directory</a>
|
||
|
||
<div id="snippetsSidebarNavDirectoryCollapse" class="nav-collapse collapse ">
|
||
<a class="nav-link " href="directory-grid.html">Grid</a>
|
||
<a class="nav-link " href="directory-list.html">List</a>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/testimonials.html">Testimonials</a>
|
||
</li>
|
||
|
||
<li class="nav-item ">
|
||
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavBlogsCollapse" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="snippetsSidebarNavBlogsCollapse">Blogs</a>
|
||
|
||
<div id="snippetsSidebarNavBlogsCollapse" class="nav-collapse collapse ">
|
||
<a class="nav-link " href="blogs-grid.html">Grid</a>
|
||
<a class="nav-link " href="blogs-list.html">List</a>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/tables.html">Tables</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/ecommerce.html">E-commerce</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/pricing.html">Pricing</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/team-sections.html">Team Sections</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/breadcrumb.html">Breadcrumb</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/cta.html">Call-to-Action (CTA)</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/modals.html">Modals</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/portfolio.html">Portfolio</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/gallery.html">Gallery</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/clients.html">Clients</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/countdown.html">Countdown</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/faq.html">FAQ</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/lists.html">Lists</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/collapse-accordion.html">Collapse/Accordion</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/comments.html">Comments</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/feedback-and-reviews.html">Feedback & Reviews</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/user-profile.html">User Profile</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="sidebar-examples.html">Sidebar Examples</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="calendar-view.html">Calendar View</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="notification.html">Notification</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="content-sections.html">Content Sections</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle">Forms</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="forms-authentication.html">Authentication</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="forms-feedback.html">Feedback</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="forms-filters.html">Filters</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="forms-search.html">Search</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="forms-directory.html">Directory</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="forms-subscribe.html">Subscribe</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="forms-account.html">Account</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="forms-wizard-and-steps.html">Wizard & Steps</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle">Contact / Footer</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/contact-sections.html">Contact Sections</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../snippets/footer.html">Footer</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- End Navbar Collapse -->
|
||
</nav>
|
||
<!-- End Navbar -->
|
||
|
||
<!-- Content -->
|
||
<div class="navbar-sidebar-aside-content content-space-1 content-space-md-2 px-lg-5 px-xl-10">
|
||
<!-- Page Header -->
|
||
<div class="docs-page-header">
|
||
<div class="row align-items-center">
|
||
<div class="col-sm">
|
||
<h1 class="docs-page-header-title">Card 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 content-space-1">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5">
|
||
<h2>Learn to develop sites with components and design systems</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="text-center mb-10">
|
||
<!-- List Checked -->
|
||
<ul class="list-inline list-checked list-checked-primary">
|
||
<li class="list-inline-item list-checked-item">Asynchronous collaboration</li>
|
||
<li class="list-inline-item list-checked-item">Updates and announcements</li>
|
||
<li class="list-inline-item list-checked-item">Training and team building</li>
|
||
</ul>
|
||
<!-- End List Checked -->
|
||
</div>
|
||
|
||
<div class="row mb-5 mb-md-0">
|
||
<div class="col-sm-6 col-lg-4 mb-4 mb-lg-0">
|
||
<!-- Card -->
|
||
<div class="card card-sm h-100">
|
||
<div class="p-2">
|
||
<img class="card-img" src="../assets/img/480x220/img1.jpg" alt="Image Description">
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<h4 class="card-title">Front App</h4>
|
||
<p class="card-text">Front App is an easier way to search on Android.</p>
|
||
|
||
<!-- List Pointer -->
|
||
<ul class="list-pointer mb-0">
|
||
<li class="list-pointer-item">Advanced Analytics</li>
|
||
<li class="list-pointer-item">Digital Marketing</li>
|
||
<li class="list-pointer-item">Organization</li>
|
||
</ul>
|
||
<!-- End List Pointer -->
|
||
</div>
|
||
|
||
<a class="card-footer card-link border-top" href="#">Learn more <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-4 mb-4 mb-lg-0">
|
||
<!-- Card -->
|
||
<div class="card card-sm h-100">
|
||
<div class="p-2">
|
||
<img class="card-img" src="../assets/img/480x220/img2.jpg" alt="Image Description">
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<h4 class="card-title">Front Chat</h4>
|
||
<p class="card-text">Front Chat is a new way to communicate with your team.</p>
|
||
|
||
<!-- List Pointer -->
|
||
<ul class="list-pointer mb-0">
|
||
<li class="list-pointer-item">Cost Transformation</li>
|
||
<li class="list-pointer-item">Customer Experience</li>
|
||
<li class="list-pointer-item">Mergers and Acquisitions</li>
|
||
</ul>
|
||
<!-- End List Pointer -->
|
||
</div>
|
||
|
||
<a class="card-footer card-link border-top" href="#">Learn more <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-4">
|
||
<!-- Card -->
|
||
<div class="card card-sm h-100">
|
||
<div class="p-2">
|
||
<img class="card-img" src="../assets/img/480x220/img3.jpg" alt="Image Description">
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<h4 class="card-title">Front Calendar</h4>
|
||
<p class="card-text">Discover an easier way to manage contacts, sales and grow lasting relationships.</p>
|
||
|
||
<!-- List Pointer -->
|
||
<ul class="list-pointer mb-0">
|
||
<li class="list-pointer-item">Enterprise Technology</li>
|
||
<li class="list-pointer-item">Private Equity</li>
|
||
<li class="list-pointer-item">Sustainability</li>
|
||
</ul>
|
||
<!-- End List Pointer -->
|
||
</div>
|
||
|
||
<a class="card-footer card-link border-top" href="#">Learn more <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</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-t-xl-3 content-space-b-lg-3">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5">
|
||
<h2>Learn to develop sites with components and design systems</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="text-center mb-10">
|
||
<!-- List Checked -->
|
||
<ul class="list-inline list-checked list-checked-primary">
|
||
<li class="list-inline-item list-checked-item">Asynchronous collaboration</li>
|
||
<li class="list-inline-item list-checked-item">Updates and announcements</li>
|
||
<li class="list-inline-item list-checked-item">Training and team building</li>
|
||
</ul>
|
||
<!-- End List Checked -->
|
||
</div>
|
||
|
||
<div class="row mb-5 mb-md-0">
|
||
<div class="col-sm-6 col-lg-4 mb-4 mb-lg-0">
|
||
<!-- Card -->
|
||
<div class="card card-sm h-100">
|
||
<div class="p-2">
|
||
<img class="card-img" src="../assets/img/480x220/img1.jpg" alt="Image Description">
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<h4 class="card-title">Front App</h4>
|
||
<p class="card-text">Front App is an easier way to search on Android.</p>
|
||
|
||
<!-- List Pointer -->
|
||
<ul class="list-pointer mb-0">
|
||
<li class="list-pointer-item">Advanced Analytics</li>
|
||
<li class="list-pointer-item">Digital Marketing</li>
|
||
<li class="list-pointer-item">Organization</li>
|
||
</ul>
|
||
<!-- End List Pointer -->
|
||
</div>
|
||
|
||
<a class="card-footer card-link border-top" href="#">Learn more <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-4 mb-4 mb-lg-0">
|
||
<!-- Card -->
|
||
<div class="card card-sm h-100">
|
||
<div class="p-2">
|
||
<img class="card-img" src="../assets/img/480x220/img2.jpg" alt="Image Description">
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<h4 class="card-title">Front Chat</h4>
|
||
<p class="card-text">Front Chat is a new way to communicate with your team.</p>
|
||
|
||
<!-- List Pointer -->
|
||
<ul class="list-pointer mb-0">
|
||
<li class="list-pointer-item">Cost Transformation</li>
|
||
<li class="list-pointer-item">Customer Experience</li>
|
||
<li class="list-pointer-item">Mergers and Acquisitions</li>
|
||
</ul>
|
||
<!-- End List Pointer -->
|
||
</div>
|
||
|
||
<a class="card-footer card-link border-top" href="#">Learn more <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-4">
|
||
<!-- Card -->
|
||
<div class="card card-sm h-100">
|
||
<div class="p-2">
|
||
<img class="card-img" src="../assets/img/480x220/img3.jpg" alt="Image Description">
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<h4 class="card-title">Front Calendar</h4>
|
||
<p class="card-text">Discover an easier way to manage contacts, sales and grow lasting relationships.</p>
|
||
|
||
<!-- List Pointer -->
|
||
<ul class="list-pointer mb-0">
|
||
<li class="list-pointer-item">Enterprise Technology</li>
|
||
<li class="list-pointer-item">Private Equity</li>
|
||
<li class="list-pointer-item">Sustainability</li>
|
||
</ul>
|
||
<!-- End List Pointer -->
|
||
</div>
|
||
|
||
<a class="card-footer card-link border-top" href="#">Learn more <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</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">
|
||
<!-- Card Grid -->
|
||
<div class="container content-space-1">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
||
<h2>Analytics solutions</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row">
|
||
<div class="col-sm-6 col-lg-4 mb-3 mb-lg-0">
|
||
<!-- Card -->
|
||
<a class="card card-transition bg-light h-100 shadow-none overflow-hidden" href="#">
|
||
<div class="row align-items-center">
|
||
<div class="col-8 col-md-6">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Analytics you can trust</h4>
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small"></i></span>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-4 col-md-6 bg-img-end h-100 px-0" style="background-image: url(../assets/svg/illustrations/apps.svg);"></div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-4 mb-3 mb-lg-0">
|
||
<!-- Card -->
|
||
<a class="card card-transition bg-light h-100 shadow-none overflow-hidden" href="#">
|
||
<div class="row align-items-center">
|
||
<div class="col-8 col-md-6">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Scheduling made simple</h4>
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small"></i></span>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-4 col-md-6 bg-img-end h-100 px-0" style="background-image: url(../assets/svg/illustrations/calendar.svg);"></div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-4">
|
||
<!-- Card -->
|
||
<a class="card card-transition bg-light h-100 shadow-none overflow-hidden" href="#">
|
||
<div class="row align-items-center">
|
||
<div class="col-8 col-md-6">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Listening made easy</h4>
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small"></i></span>
|
||
</div>
|
||
</div>
|
||
<div class="col-4 col-md-6 bg-img-end h-100 px-0" style="background-image: url(../assets/svg/illustrations/communication.svg);"></div>
|
||
</div>
|
||
<!-- End Row -->
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Card Grid -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html2" role="tabpanel" aria-labelledby="nav-htmlTab2">
|
||
<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-5 mb-md-9">
|
||
<h2>Analytics solutions</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row">
|
||
<div class="col-sm-6 col-lg-4 mb-3 mb-lg-0">
|
||
<!-- Card -->
|
||
<a class="card card-transition bg-light h-100 shadow-none overflow-hidden" href="#">
|
||
<div class="row align-items-center">
|
||
<div class="col-8 col-md-6">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Analytics you can trust</h4>
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small"></i></span>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-4 col-md-6 bg-img-end h-100 px-0" style="background-image: url(../assets/svg/illustrations/apps.svg);"></div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-4 mb-3 mb-lg-0">
|
||
<!-- Card -->
|
||
<a class="card card-transition bg-light h-100 shadow-none overflow-hidden" href="#">
|
||
<div class="row align-items-center">
|
||
<div class="col-8 col-md-6">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Scheduling made simple</h4>
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small"></i></span>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-4 col-md-6 bg-img-end h-100 px-0" style="background-image: url(../assets/svg/illustrations/calendar.svg);"></div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-4">
|
||
<!-- Card -->
|
||
<a class="card card-transition bg-light h-100 shadow-none overflow-hidden" href="#">
|
||
<div class="row align-items-center">
|
||
<div class="col-8 col-md-6">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Listening made easy</h4>
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small"></i></span>
|
||
</div>
|
||
</div>
|
||
<div class="col-4 col-md-6 bg-img-end h-100 px-0" style="background-image: url(../assets/svg/illustrations/communication.svg);"></div>
|
||
</div>
|
||
<!-- End Row -->
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Card Grid -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-3" class="hs-docs-heading">
|
||
Component #3 <a class="anchorjs-link" href="#component-3" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab3" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab3" href="#nav-result3" data-bs-toggle="pill" data-bs-target="#nav-result3" role="tab" aria-controls="nav-result3" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab3" href="#nav-html3" data-bs-toggle="pill" data-bs-target="#nav-html3" role="tab" aria-controls="nav-html3" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent3">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result3" role="tabpanel" aria-labelledby="nav-resultTab3">
|
||
<!-- Card Grid -->
|
||
<div class="container content-space-1">
|
||
<div class="row justify-content-lg-between">
|
||
<div class="col-lg-5 mb-9 mb-lg-0">
|
||
<img class="avatar avatar-xxl avatar-4x3 mb-4" src="../assets/svg/illustrations/app-wreath.svg" alt="SVG">
|
||
|
||
<!-- Heading -->
|
||
<div class="mb-5">
|
||
<h2>Award winning guides and resources</h2>
|
||
<p>Explore and learn more about everything from machine learning and global payments to building marketplaces and scaling your team.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<a class="btn btn-primary btn-transition" href="#">View all guides</a>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-lg-6">
|
||
<div class="row">
|
||
<div class="col-sm-6">
|
||
<!-- Article -->
|
||
<a class="d-block" href="#" data-aos="fade-left" data-aos-delay="100">
|
||
<img class="w-100 rounded-2" src="../assets/img/400x500/img26.jpg" alt="Image Description">
|
||
<div class="py-4">
|
||
<h4 class="text-inherit">Adobe Ai</h4>
|
||
<p class="text-body">Access to the Adobe Illustrator techniques</p>
|
||
<span class="link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Article -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6">
|
||
<!-- Article -->
|
||
<a class="d-block" href="#" data-aos="fade-left">
|
||
<img class="w-100 rounded-2" src="../assets/img/400x500/img25.jpg" alt="Image Description">
|
||
<div class="py-4">
|
||
<h4 class="text-inherit">Canva Schedule</h4>
|
||
<p class="text-body">Create and schedule amazing social content</p>
|
||
<span class="link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Article -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Card Grid -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html3" role="tabpanel" aria-labelledby="nav-htmlTab3">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card Grid -->
|
||
<div class="container content-space-2">
|
||
<div class="row justify-content-lg-between">
|
||
<div class="col-lg-5 mb-9 mb-lg-0">
|
||
<img class="avatar avatar-xxl avatar-4x3 mb-4" src="../assets/svg/illustrations/app-wreath.svg" alt="SVG">
|
||
|
||
<!-- Heading -->
|
||
<div class="mb-5">
|
||
<h2>Award winning guides and resources</h2>
|
||
<p>Explore and learn more about everything from machine learning and global payments to building marketplaces and scaling your team.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<a class="btn btn-primary btn-transition" href="#">View all guides</a>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-lg-6">
|
||
<div class="row">
|
||
<div class="col-sm-6">
|
||
<!-- Article -->
|
||
<a class="d-block" href="#" data-aos="fade-left" data-aos-delay="100">
|
||
<img class="w-100 rounded-2" src="../assets/img/400x500/img26.jpg" alt="Image Description">
|
||
<div class="py-4">
|
||
<h4 class="text-inherit">Adobe Ai</h4>
|
||
<p class="text-body">Access to the Adobe Illustrator techniques</p>
|
||
<span class="link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Article -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6">
|
||
<!-- Article -->
|
||
<a class="d-block" href="#" data-aos="fade-left">
|
||
<img class="w-100 rounded-2" src="../assets/img/400x500/img25.jpg" alt="Image Description">
|
||
<div class="py-4">
|
||
<h4 class="text-inherit">Canva Schedule</h4>
|
||
<p class="text-body">Create and schedule amazing social content</p>
|
||
<span class="link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Article -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Card Grid -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-4" class="hs-docs-heading">
|
||
Component #4 <a class="anchorjs-link" href="#component-4" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab4" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab4" href="#nav-result4" data-bs-toggle="pill" data-bs-target="#nav-result4" role="tab" aria-controls="nav-result4" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab4" href="#nav-html4" data-bs-toggle="pill" data-bs-target="#nav-html4" role="tab" aria-controls="nav-html4" aria-selected="false">HTML</a>
|
||
</li>
|
||
</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">
|
||
<!-- Heading -->
|
||
<div class="w-md-65 mb-5 mb-md-9">
|
||
<span class="text-cap">Featured case studies</span>
|
||
<h2 class="lh-base">We help businesses bring ideas to life in the digital world, by designing and implementing the technology tools that they need to win.</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="overflow-hidden">
|
||
<div class="row justify-content-md-center gx-sm-3 gx-lg-8 pt-md-8 mb-7">
|
||
<div class="col-sm-6 mb-3 mb-sm-0">
|
||
<div class="d-grid gap-3 gap-lg-8 mt-md-n8">
|
||
<!-- Card -->
|
||
<a class="card card-transition bg-soft-primary shadow-none" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/" target="_blank">
|
||
<div class="card-body">
|
||
<div class="mb-5">
|
||
<img class="img-fluid rounded-2" src="../assets/img/1200x900/img1.jpg" alt="Image Description">
|
||
</div>
|
||
|
||
<span class="badge bg-primary rounded-pill mb-2">Front-end</span>
|
||
<h3 class="card-title text-inherit">Front - Multipurpose Responsive Template</h3>
|
||
<span class="d-block text-body mb-3">Landing & Corporate</span>
|
||
<p class="card-text text-dark">Super clean, minimalistic, stylized mockup collection with awesome customization features and huge resolution.</p>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
|
||
<!-- Card -->
|
||
<a class="card card-transition bg-soft-info shadow-none" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/" target="_blank">
|
||
<div class="card-body">
|
||
<div class="mb-5">
|
||
<img class="img-fluid rounded-2" src="../assets/img/1200x900/img3.jpg" alt="Image Description">
|
||
</div>
|
||
|
||
<div class="d-flex align-items-center mb-4">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-xs" src="../assets/svg/brands/figma-icon.svg" alt="Logo">
|
||
</div>
|
||
<div class="flex-grow-1 ms-2">
|
||
<span class="text-body">Compatible with Figma</span>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 class="card-title text-inherit mb-1">Space – Multipurpose Responsive Template</h3>
|
||
<span class="d-block text-body mb-3">Landing & Corporate</span>
|
||
<p class="card-text text-dark">Space – Multipurpose Responsive Template is a fully responsive and yet modern premium Bootstrap theme.</p>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6">
|
||
<div class="d-grid gap-3 gap-lg-8">
|
||
<!-- Card -->
|
||
<a class="card card-transition bg-soft-dark shadow-none" href="https://themes.getbootstrap.com/product/front-admin-dashboard-template/" target="_blank">
|
||
<div class="card-body">
|
||
<div class="mb-5">
|
||
<img class="img-fluid rounded-2" src="../assets/img/1200x900/img2.jpg" alt="Image Description">
|
||
</div>
|
||
|
||
<div class="d-flex align-items-center mb-4">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-xs" src="../assets/svg/brands/figma-icon.svg" alt="Logo">
|
||
</div>
|
||
<div class="flex-grow-1 ms-2">
|
||
<span class="text-body">Figma coming soon</span>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 class="card-title text-inherit mb-0">Front – Admin & Dashboard Template</h3>
|
||
<span class="d-block text-body mb-3">Admin & Dashboard</span>
|
||
<p class="card-text text-dark">Whether you’re creating a web application, dashboard, admin panels, or SASS based interface — Front’s feature-rich components and designed demo pages help you create the best possible web application projects.</p>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
|
||
<!-- Card -->
|
||
<a class="card card-transition bg-soft-dark shadow-none" href="https://themes.getbootstrap.com/product/nova-responsive-webapp-ui-kit/" target="_blank">
|
||
<div class="card-body">
|
||
<div class="mb-5">
|
||
<img class="img-fluid rounded-2" src="../assets/img/1200x900/img4.jpg" alt="Image Description">
|
||
</div>
|
||
|
||
<span class="badge bg-primary rounded-pill mb-2">Admin</span>
|
||
<h3 class="card-title text-inherit mb-1">Nova – Responsive WebApp UI Kit</h3>
|
||
<span class="d-block text-body mb-3">Admin & Dashboard</span>
|
||
<p class="card-text text-dark">Nova is a modern and fully responsive WebApp UI Kit – it is the perfect starting point for any type of Web Applications.</p>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
|
||
<div class="text-center">
|
||
<a class="btn btn-outline-primary btn-transition" href="https://htmlstream.com/" target="_blank">View all works</a>
|
||
</div>
|
||
</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">
|
||
<!-- Heading -->
|
||
<div class="w-md-65 mb-5 mb-md-9">
|
||
<span class="text-cap">Featured case studies</span>
|
||
<h2 class="lh-base">We help businesses bring ideas to life in the digital world, by designing and implementing the technology tools that they need to win.</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="overflow-hidden">
|
||
<div class="row justify-content-md-center gx-sm-3 gx-lg-8 pt-md-8 mb-7">
|
||
<div class="col-sm-6 mb-3 mb-sm-0">
|
||
<div class="d-grid gap-3 gap-lg-8 mt-md-n8">
|
||
<!-- Card -->
|
||
<a class="card card-transition bg-soft-primary shadow-none" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/" target="_blank">
|
||
<div class="card-body">
|
||
<div class="mb-5">
|
||
<img class="img-fluid rounded-2" src="../assets/img/1200x900/img1.jpg" alt="Image Description">
|
||
</div>
|
||
|
||
<span class="badge bg-primary rounded-pill mb-2">Front-end</span>
|
||
<h3 class="card-title text-inherit">Front - Multipurpose Responsive Template</h3>
|
||
<span class="d-block text-body mb-3">Landing & Corporate</span>
|
||
<p class="card-text text-dark">Super clean, minimalistic, stylized mockup collection with awesome customization features and huge resolution.</p>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
|
||
<!-- Card -->
|
||
<a class="card card-transition bg-soft-info shadow-none" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/" target="_blank">
|
||
<div class="card-body">
|
||
<div class="mb-5">
|
||
<img class="img-fluid rounded-2" src="../assets/img/1200x900/img3.jpg" alt="Image Description">
|
||
</div>
|
||
|
||
<div class="d-flex align-items-center mb-4">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-xs" src="../assets/svg/brands/figma-icon.svg" alt="Logo">
|
||
</div>
|
||
<div class="flex-grow-1 ms-2">
|
||
<span class="text-body">Compatible with Figma</span>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 class="card-title text-inherit mb-1">Space – Multipurpose Responsive Template</h3>
|
||
<span class="d-block text-body mb-3">Landing & Corporate</span>
|
||
<p class="card-text text-dark">Space – Multipurpose Responsive Template is a fully responsive and yet modern premium Bootstrap theme.</p>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6">
|
||
<div class="d-grid gap-3 gap-lg-8">
|
||
<!-- Card -->
|
||
<a class="card card-transition bg-soft-dark shadow-none" href="https://themes.getbootstrap.com/product/front-admin-dashboard-template/" target="_blank">
|
||
<div class="card-body">
|
||
<div class="mb-5">
|
||
<img class="img-fluid rounded-2" src="../assets/img/1200x900/img2.jpg" alt="Image Description">
|
||
</div>
|
||
|
||
<div class="d-flex align-items-center mb-4">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-xs" src="../assets/svg/brands/figma-icon.svg" alt="Logo">
|
||
</div>
|
||
<div class="flex-grow-1 ms-2">
|
||
<span class="text-body">Figma coming soon</span>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 class="card-title text-inherit mb-0">Front – Admin & Dashboard Template</h3>
|
||
<span class="d-block text-body mb-3">Admin & Dashboard</span>
|
||
<p class="card-text text-dark">Whether you’re creating a web application, dashboard, admin panels, or SASS based interface — Front’s feature-rich components and designed demo pages help you create the best possible web application projects.</p>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
|
||
<!-- Card -->
|
||
<a class="card card-transition bg-soft-dark shadow-none" href="https://themes.getbootstrap.com/product/nova-responsive-webapp-ui-kit/" target="_blank">
|
||
<div class="card-body">
|
||
<div class="mb-5">
|
||
<img class="img-fluid rounded-2" src="../assets/img/1200x900/img4.jpg" alt="Image Description">
|
||
</div>
|
||
|
||
<span class="badge bg-primary rounded-pill mb-2">Admin</span>
|
||
<h3 class="card-title text-inherit mb-1">Nova – Responsive WebApp UI Kit</h3>
|
||
<span class="d-block text-body mb-3">Admin & Dashboard</span>
|
||
<p class="card-text text-dark">Nova is a modern and fully responsive WebApp UI Kit – it is the perfect starting point for any type of Web Applications.</p>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
|
||
<div class="text-center">
|
||
<a class="btn btn-outline-primary btn-transition" href="https://htmlstream.com/" target="_blank">View all works</a>
|
||
</div>
|
||
</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-65 mb-5 mb-md-9">
|
||
<span class="text-cap">Front services</span>
|
||
<h2 class="lh-base">Improve & boost your services with Front that provides all kinds of services and will help your audience grow through all platforms.</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row">
|
||
<div class="col-md-5 mb-3 mb-md-0">
|
||
<!-- Card -->
|
||
<a class="card card-transition h-100" href="#" data-aos="fade-up">
|
||
<img class="card-img-top" src="../assets/svg/components/card-7.svg" alt="Image Description">
|
||
|
||
<div class="card-body">
|
||
<h3 class="card-title text-inherit">Have a meaningful impact</h3>
|
||
<p class="card-text text-body">We are aggressive about giving opportunities to Fronts who have proven to be good at executing on them.</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md mb-3 mb-md-0">
|
||
<!-- Card -->
|
||
<a class="card card-transition h-100" href="#" data-aos="fade-up" data-aos-delay="150">
|
||
<img class="card-img-top" src="../assets/svg/components/card-8.svg" alt="Image Description">
|
||
|
||
<div class="card-body">
|
||
<h3 class="card-title text-inherit">Documentation</h3>
|
||
<p class="card-text text-body">Whether you're a startup or a global enterprise, learn how to integrate with Front.</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md">
|
||
<!-- Card -->
|
||
<a class="card card-transition h-100" href="#" data-aos="fade-up" data-aos-delay="200">
|
||
<img class="card-img-top" src="../assets/svg/components/card-9.svg" alt="Image Description">
|
||
|
||
<div class="card-body">
|
||
<h3 class="card-title text-inherit">Explore the Snippets tool</h3>
|
||
<p class="card-text text-body">Quickly Front sample components, copy-paste codes.</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</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-65 mb-5 mb-md-9">
|
||
<span class="text-cap">Front services</span>
|
||
<h2 class="lh-base">Improve & boost your services with Front that provides all kinds of services and will help your audience grow through all platforms.</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row">
|
||
<div class="col-md-5 mb-3 mb-md-0">
|
||
<!-- Card -->
|
||
<a class="card card-transition h-100" href="#" data-aos="fade-up">
|
||
<img class="card-img-top" src="../assets/svg/components/card-7.svg" alt="Image Description">
|
||
|
||
<div class="card-body">
|
||
<h3 class="card-title text-inherit">Have a meaningful impact</h3>
|
||
<p class="card-text text-body">We are aggressive about giving opportunities to Fronts who have proven to be good at executing on them.</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md mb-3 mb-md-0">
|
||
<!-- Card -->
|
||
<a class="card card-transition h-100" href="#" data-aos="fade-up" data-aos-delay="150">
|
||
<img class="card-img-top" src="../assets/svg/components/card-8.svg" alt="Image Description">
|
||
|
||
<div class="card-body">
|
||
<h3 class="card-title text-inherit">Documentation</h3>
|
||
<p class="card-text text-body">Whether you're a startup or a global enterprise, learn how to integrate with Front.</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md">
|
||
<!-- Card -->
|
||
<a class="card card-transition h-100" href="#" data-aos="fade-up" data-aos-delay="200">
|
||
<img class="card-img-top" src="../assets/svg/components/card-9.svg" alt="Image Description">
|
||
|
||
<div class="card-body">
|
||
<h3 class="card-title text-inherit">Explore the Snippets tool</h3>
|
||
<p class="card-text text-body">Quickly Front sample components, copy-paste codes.</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</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">
|
||
<!-- Card Grid -->
|
||
<div class="container content-space-1">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
||
<h2 class="h1">Read our latest news</h2>
|
||
<p>We've helped some great companies brand, design and get to market.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row gx-3 mb-5 mb-md-9">
|
||
<div class="col-sm-6 col-lg-3 mb-3 mb-lg-0">
|
||
<!-- Card -->
|
||
<a class="card card-transition h-100" href="#">
|
||
<img class="card-img-top" src="../assets/img/500x280/img9.jpg" alt="Image Description">
|
||
<div class="card-body">
|
||
<span class="card-subtitle text-primary">Product</span>
|
||
<h5 class="card-text lh-base">Better is when everything works together</h5>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-3 mb-3 mb-lg-0">
|
||
<!-- Card -->
|
||
<a class="card card-transition h-100" href="#">
|
||
<img class="card-img-top" src="../assets/img/500x280/img10.jpg" alt="Image Description">
|
||
<div class="card-body">
|
||
<span class="card-subtitle text-primary">Business</span>
|
||
<h5 class="card-text lh-base">What CFR really is about</h5>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-3 mb-3 mb-sm-0">
|
||
<!-- Card -->
|
||
<a class="card card-transition h-100" href="#">
|
||
<img class="card-img-top" src="../assets/img/500x280/img11.jpg" alt="Image Description">
|
||
<div class="card-body">
|
||
<span class="card-subtitle text-primary">Business</span>
|
||
<h5 class="card-text lh-base">Should Product Owners think like entrepreneurs?</h5>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-3">
|
||
<!-- Card -->
|
||
<a class="card card-transition h-100" href="#">
|
||
<img class="card-img-top" src="../assets/img/500x280/img12.jpg" alt="Image Description">
|
||
<div class="card-body">
|
||
<span class="card-subtitle text-primary">Facilitate</span>
|
||
<h5 class="card-text lh-base">Announcing Front Strategies: Ready-to-use rules</h5>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
|
||
<!-- Card Info -->
|
||
<div class="text-center">
|
||
<div class="card card-info-link card-sm">
|
||
<div class="card-body">
|
||
Want to read more? <a class="card-link ms-2" href="#">Go here <span class="bi-chevron-right small ms-1"></span></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Info -->
|
||
</div>
|
||
<!-- End Card Grid -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html6" role="tabpanel" aria-labelledby="nav-htmlTab6">
|
||
<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-5 mb-md-9">
|
||
<h2 class="h1">Read our latest news</h2>
|
||
<p>We've helped some great companies brand, design and get to market.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row gx-3 mb-5 mb-md-9">
|
||
<div class="col-sm-6 col-lg-3 mb-3 mb-lg-0">
|
||
<!-- Card -->
|
||
<a class="card card-transition h-100" href="#">
|
||
<img class="card-img-top" src="../assets/img/500x280/img9.jpg" alt="Image Description">
|
||
<div class="card-body">
|
||
<span class="card-subtitle text-primary">Product</span>
|
||
<h5 class="card-text lh-base">Better is when everything works together</h5>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-3 mb-3 mb-lg-0">
|
||
<!-- Card -->
|
||
<a class="card card-transition h-100" href="#">
|
||
<img class="card-img-top" src="../assets/img/500x280/img10.jpg" alt="Image Description">
|
||
<div class="card-body">
|
||
<span class="card-subtitle text-primary">Business</span>
|
||
<h5 class="card-text lh-base">What CFR really is about</h5>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-3 mb-3 mb-sm-0">
|
||
<!-- Card -->
|
||
<a class="card card-transition h-100" href="#">
|
||
<img class="card-img-top" src="../assets/img/500x280/img11.jpg" alt="Image Description">
|
||
<div class="card-body">
|
||
<span class="card-subtitle text-primary">Business</span>
|
||
<h5 class="card-text lh-base">Should Product Owners think like entrepreneurs?</h5>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-3">
|
||
<!-- Card -->
|
||
<a class="card card-transition h-100" href="#">
|
||
<img class="card-img-top" src="../assets/img/500x280/img12.jpg" alt="Image Description">
|
||
<div class="card-body">
|
||
<span class="card-subtitle text-primary">Facilitate</span>
|
||
<h5 class="card-text lh-base">Announcing Front Strategies: Ready-to-use rules</h5>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
|
||
<!-- Card Info -->
|
||
<div class="text-center">
|
||
<div class="card card-info-link card-sm">
|
||
<div class="card-body">
|
||
Want to read more? <a class="card-link ms-2" href="#">Go here <span class="bi-chevron-right small ms-1"></span></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Info -->
|
||
</div>
|
||
<!-- End Card Grid -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-7" class="hs-docs-heading">
|
||
Component #7 <a class="anchorjs-link" href="#component-7" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab7" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab7" href="#nav-result7" data-bs-toggle="pill" data-bs-target="#nav-result7" role="tab" aria-controls="nav-result7" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab7" href="#nav-html7" data-bs-toggle="pill" data-bs-target="#nav-html7" role="tab" aria-controls="nav-html7" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent7">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result7" role="tabpanel" aria-labelledby="nav-resultTab7">
|
||
<!-- Card Grid -->
|
||
<div class="container content-space-2">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
||
<span class="text-cap">Platforms</span>
|
||
<h2 class="h1">Three platforms – handled by one tool</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row">
|
||
<div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
|
||
<!-- Card -->
|
||
<a class="card card-lg card-transition h-100 text-center" href="#">
|
||
<div class="card-body">
|
||
<div class="mb-4">
|
||
<img class="avatar" src="../assets/svg/brands/facebook-icon.svg" alt="Logo">
|
||
</div>
|
||
<h3 class="card-title">Facebook Ads</h3>
|
||
<p class="card-text text-body">Automated rules, Auto Post Boosting, Bulk Creation and reports in Slack.</p>
|
||
</div>
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
|
||
<!-- Card -->
|
||
<a class="card card-lg card-transition h-100 text-center" href="#">
|
||
<div class="card-body">
|
||
<div class="mb-4">
|
||
<img class="avatar" src="../assets/svg/brands/google-adz-icon.svg" alt="Logo">
|
||
</div>
|
||
<h3 class="card-title">Google Ads</h3>
|
||
<p class="card-text text-body">The best scripts alternative and quick reports for the whole team.</p>
|
||
</div>
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-6 col-lg-4">
|
||
<!-- Card -->
|
||
<a class="card card-lg card-transition h-100 text-center" href="#">
|
||
<div class="card-body">
|
||
<div class="mb-4">
|
||
<img class="avatar" src="../assets/svg/brands/snapchat-icon.svg" alt="Logo">
|
||
</div>
|
||
<h3 class="card-title">Snapchat Ads</h3>
|
||
<p class="card-text text-body">Scale profitable snaps and optimize your cost per swipe by using automated rules.</p>
|
||
</div>
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End 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 class="container content-space-2">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
||
<span class="text-cap">Platforms</span>
|
||
<h2 class="h1">Three platforms – handled by one tool</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row">
|
||
<div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
|
||
<!-- Card -->
|
||
<a class="card card-lg card-transition h-100 text-center" href="#">
|
||
<div class="card-body">
|
||
<div class="mb-4">
|
||
<img class="avatar" src="../assets/svg/brands/facebook-icon.svg" alt="Logo">
|
||
</div>
|
||
<h3 class="card-title">Facebook Ads</h3>
|
||
<p class="card-text text-body">Automated rules, Auto Post Boosting, Bulk Creation and reports in Slack.</p>
|
||
</div>
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
|
||
<!-- Card -->
|
||
<a class="card card-lg card-transition h-100 text-center" href="#">
|
||
<div class="card-body">
|
||
<div class="mb-4">
|
||
<img class="avatar" src="../assets/svg/brands/google-adz-icon.svg" alt="Logo">
|
||
</div>
|
||
<h3 class="card-title">Google Ads</h3>
|
||
<p class="card-text text-body">The best scripts alternative and quick reports for the whole team.</p>
|
||
</div>
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-6 col-lg-4">
|
||
<!-- Card -->
|
||
<a class="card card-lg card-transition h-100 text-center" href="#">
|
||
<div class="card-body">
|
||
<div class="mb-4">
|
||
<img class="avatar" src="../assets/svg/brands/snapchat-icon.svg" alt="Logo">
|
||
</div>
|
||
<h3 class="card-title">Snapchat Ads</h3>
|
||
<p class="card-text text-body">Scale profitable snaps and optimize your cost per swipe by using automated rules.</p>
|
||
</div>
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Card Grid -->
|
||
</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 class="container">
|
||
<div class="row">
|
||
<div class="col-lg-6 mb-4 mb-lg-0">
|
||
<!-- Card -->
|
||
<a class="card card-transition align-items-end flex-wrap flex-row bg-img-start h-100" href="#" style="background-image: url(../assets/svg/components/card-4.svg); min-height: 25rem;" data-aos="fade-up">
|
||
<div class="card-body">
|
||
<h2 class="card-title text-white">Revolutionizing the way start-ups win new customers</h2>
|
||
<p class="card-text text-white">Automate best strategies and focus more on generating hq creatives.</p>
|
||
<span class="card-link link-light">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-3 mb-4 mb-sm-0">
|
||
<!-- Card -->
|
||
<a class="card card-transition align-items-end flex-wrap flex-row bg-img-start h-100" href="#" style="background-image: url(../assets/svg/components/card-5.svg); min-height: 25rem;" data-aos="fade-up" data-aos-delay="100">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-white">How we helped building the industry of the future</h3>
|
||
<span class="card-link link-light">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-3">
|
||
<!-- Card -->
|
||
<a class="card card-transition align-items-end flex-wrap flex-row bg-img-start h-100" href="#" style="background-image: url(../assets/svg/components/card-6.svg); min-height: 25rem;" data-aos="fade-up" data-aos-delay="150">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-white">How to save hundreds of thousands</h3>
|
||
<span class="card-link link-light">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End 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 class="container">
|
||
<div class="row">
|
||
<div class="col-lg-6 mb-4 mb-lg-0">
|
||
<!-- Card -->
|
||
<a class="card card-transition align-items-end flex-wrap flex-row bg-img-start h-100" href="#" style="background-image: url(../assets/svg/components/card-4.svg); min-height: 25rem;" data-aos="fade-up">
|
||
<div class="card-body">
|
||
<h2 class="card-title text-white">Revolutionizing the way start-ups win new customers</h2>
|
||
<p class="card-text text-white">Automate best strategies and focus more on generating hq creatives.</p>
|
||
<span class="card-link link-light">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-3 mb-4 mb-sm-0">
|
||
<!-- Card -->
|
||
<a class="card card-transition align-items-end flex-wrap flex-row bg-img-start h-100" href="#" style="background-image: url(../assets/svg/components/card-5.svg); min-height: 25rem;" data-aos="fade-up" data-aos-delay="100">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-white">How we helped building the industry of the future</h3>
|
||
<span class="card-link link-light">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-3">
|
||
<!-- Card -->
|
||
<a class="card card-transition align-items-end flex-wrap flex-row bg-img-start h-100" href="#" style="background-image: url(../assets/svg/components/card-6.svg); min-height: 25rem;" data-aos="fade-up" data-aos-delay="150">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-white">How to save hundreds of thousands</h3>
|
||
<span class="card-link link-light">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End 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>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-cssTab9" href="#nav-css9" data-bs-toggle="pill" data-bs-target="#nav-css9" role="tab" aria-controls="nav-css9" aria-selected="false">CSS</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-jsTab9" href="#nav-js9" data-bs-toggle="pill" data-bs-target="#nav-js9" role="tab" aria-controls="nav-js9" aria-selected="false">JS</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 class="bg-dark rounded-2 mx-3 mx-xl-10" style="background-image: url(../assets/svg/components/wave-pattern-light.svg);">
|
||
<div class="container-xl container-fluid content-space-1 content-space-md-2 px-4 px-md-8 px-lg-10">
|
||
<div class="px-3">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
||
<span class="text-cap text-white-70">Success stories</span>
|
||
<h2 class="text-white">See how Front is helping teams get organized and work smarter</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Swiper Slider -->
|
||
<div class="js-swiper-card-blocks swiper swiper-equal-height">
|
||
<div class="swiper-wrapper">
|
||
<!-- Slide -->
|
||
<div class="swiper-slide">
|
||
<!-- Card -->
|
||
<div class="card h-100">
|
||
<img class="card-img-top" src="../assets/img/480x320/img7.jpg" alt="Image Description">
|
||
|
||
<div class="card-body">
|
||
<div class="mb-3">
|
||
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/airbnb-dark.svg" alt="Logo">
|
||
</div>
|
||
<p class="card-text">Front Projects has proved to be most efficient cloud based project tracking and bug tracking tool.</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<a class="card-link" href="../page-customer-story.html">Read story <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Slide -->
|
||
|
||
<!-- Slide -->
|
||
<div class="swiper-slide">
|
||
<!-- Card -->
|
||
<div class="card h-100">
|
||
<img class="card-img-top" src="../assets/img/480x320/img6.jpg" alt="Image Description">
|
||
|
||
<div class="card-body">
|
||
<div class="mb-3">
|
||
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/shopify-dark.svg" alt="Logo">
|
||
</div>
|
||
<p class="card-text">Front Projects has proved to be most efficient cloud based project tracking and bug tracking tool.</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<a class="card-link" href="../page-customer-story.html">Read story <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Slide -->
|
||
|
||
<!-- Slide -->
|
||
<div class="swiper-slide">
|
||
<!-- Card -->
|
||
<div class="card h-100">
|
||
<img class="card-img-top" src="../assets/img/480x320/img14.jpg" alt="Image Description">
|
||
|
||
<div class="card-body">
|
||
<div class="mb-3">
|
||
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/forbes-dark.svg" alt="Logo">
|
||
</div>
|
||
<p class="card-text">Front Projects has proved to be most efficient cloud based project tracking and bug tracking tool.</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<a class="card-link" href="../page-customer-story.html">Read story <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Slide -->
|
||
|
||
<!-- Slide -->
|
||
<div class="swiper-slide">
|
||
<!-- Card -->
|
||
<div class="card h-100">
|
||
<img class="card-img-top" src="../assets/img/480x320/img12.jpg" alt="Image Description">
|
||
|
||
<div class="card-body">
|
||
<div class="mb-3">
|
||
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/capsule-dark.svg" alt="Logo">
|
||
</div>
|
||
<p class="card-text">Google is an innovator in public safety technology. First-to-market with TASER conducted energy weapons (CEWs).</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<a class="card-link" href="../page-customer-story.html">Read story <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Slide -->
|
||
|
||
<!-- Slide -->
|
||
<div class="swiper-slide">
|
||
<!-- Card -->
|
||
<div class="card h-100">
|
||
<img class="card-img-top" src="../assets/img/480x320/img27.jpg" alt="Image Description">
|
||
|
||
<div class="card-body">
|
||
<div class="mb-3">
|
||
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/fitbit-dark.svg" alt="Logo">
|
||
</div>
|
||
<p class="card-text">Visitors can build a form or survey before signing up, but in order to save and share it.</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<a class="card-link" href="../page-customer-story.html">Read story <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Slide -->
|
||
</div>
|
||
|
||
<!-- Swiper Pagination -->
|
||
<div class="js-swiper-card-blocks-pagination swiper-pagination swiper-pagination-light"></div>
|
||
</div>
|
||
<!-- End Swiper Slider -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End 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 class="bg-dark rounded-2 mx-3 mx-xl-10" style="background-image: url(../assets/svg/components/wave-pattern-light.svg);">
|
||
<div class="container-xl container-fluid content-space-1 content-space-md-2 px-4 px-md-8 px-lg-10">
|
||
<div class="px-3">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
||
<span class="text-cap text-white-70">Success stories</span>
|
||
<h2 class="text-white">See how Front is helping teams get organized and work smarter</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Swiper Slider -->
|
||
<div class="js-swiper-card-blocks swiper swiper-equal-height">
|
||
<div class="swiper-wrapper">
|
||
<!-- Slide -->
|
||
<div class="swiper-slide">
|
||
<!-- Card -->
|
||
<div class="card h-100">
|
||
<img class="card-img-top" src="../assets/img/480x320/img7.jpg" alt="Image Description">
|
||
|
||
<div class="card-body">
|
||
<div class="mb-3">
|
||
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/airbnb-dark.svg" alt="Logo">
|
||
</div>
|
||
<p class="card-text">Front Projects has proved to be most efficient cloud based project tracking and bug tracking tool.</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<a class="card-link" href="../page-customer-story.html">Read story <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Slide -->
|
||
|
||
<!-- Slide -->
|
||
<div class="swiper-slide">
|
||
<!-- Card -->
|
||
<div class="card h-100">
|
||
<img class="card-img-top" src="../assets/img/480x320/img6.jpg" alt="Image Description">
|
||
|
||
<div class="card-body">
|
||
<div class="mb-3">
|
||
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/shopify-dark.svg" alt="Logo">
|
||
</div>
|
||
<p class="card-text">Front Projects has proved to be most efficient cloud based project tracking and bug tracking tool.</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<a class="card-link" href="../page-customer-story.html">Read story <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Slide -->
|
||
|
||
<!-- Slide -->
|
||
<div class="swiper-slide">
|
||
<!-- Card -->
|
||
<div class="card h-100">
|
||
<img class="card-img-top" src="../assets/img/480x320/img14.jpg" alt="Image Description">
|
||
|
||
<div class="card-body">
|
||
<div class="mb-3">
|
||
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/forbes-dark.svg" alt="Logo">
|
||
</div>
|
||
<p class="card-text">Front Projects has proved to be most efficient cloud based project tracking and bug tracking tool.</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<a class="card-link" href="../page-customer-story.html">Read story <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Slide -->
|
||
|
||
<!-- Slide -->
|
||
<div class="swiper-slide">
|
||
<!-- Card -->
|
||
<div class="card h-100">
|
||
<img class="card-img-top" src="../assets/img/480x320/img12.jpg" alt="Image Description">
|
||
|
||
<div class="card-body">
|
||
<div class="mb-3">
|
||
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/capsule-dark.svg" alt="Logo">
|
||
</div>
|
||
<p class="card-text">Google is an innovator in public safety technology. First-to-market with TASER conducted energy weapons (CEWs).</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<a class="card-link" href="../page-customer-story.html">Read story <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Slide -->
|
||
|
||
<!-- Slide -->
|
||
<div class="swiper-slide">
|
||
<!-- Card -->
|
||
<div class="card h-100">
|
||
<img class="card-img-top" src="../assets/img/480x320/img27.jpg" alt="Image Description">
|
||
|
||
<div class="card-body">
|
||
<div class="mb-3">
|
||
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/fitbit-dark.svg" alt="Logo">
|
||
</div>
|
||
<p class="card-text">Visitors can build a form or survey before signing up, but in order to save and share it.</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<a class="card-link" href="../page-customer-story.html">Read story <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Slide -->
|
||
</div>
|
||
|
||
<!-- Swiper Pagination -->
|
||
<div class="js-swiper-card-blocks-pagination swiper-pagination swiper-pagination-light"></div>
|
||
</div>
|
||
<!-- End Swiper Slider -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Grid -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-css9" role="tabpanel" aria-labelledby="nav-cssTab9">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<link rel="stylesheet" href="../node_modules/swiper/swiper-bundle.min.css">
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-js9" role="tabpanel" aria-labelledby="nav-jsTab9">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- JS Implementing Plugins -->
|
||
<script src="../node_modules/swiper/swiper-bundle.min.js"></script>
|
||
|
||
<!-- JS Plugins Init. -->
|
||
<script>
|
||
(function() {
|
||
// INITIALIZATION OF SWIPER
|
||
// =======================================================
|
||
var swiper = new Swiper('.js-swiper-card-blocks',{
|
||
slidesPerView: 1,
|
||
pagination: {
|
||
el: '.js-swiper-card-blocks-pagination',
|
||
dynamicBullets: true,
|
||
clickable: true,
|
||
},
|
||
breakpoints: {
|
||
620: {
|
||
slidesPerView: 2,
|
||
spaceBetween: 15,
|
||
},
|
||
1024: {
|
||
slidesPerView: 3,
|
||
spaceBetween: 15,
|
||
},
|
||
},
|
||
});
|
||
})()
|
||
</script>
|
||
</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">
|
||
<!-- Card Grid -->
|
||
<div class="container">
|
||
<div class="w-lg-75 mx-lg-auto">
|
||
<div class="row">
|
||
<div class="col-md-6 mb-3 mb-lg-0" data-aos="fade-up">
|
||
<!-- Icon Block -->
|
||
<a class="card card-transition h-100" href="#">
|
||
<div class="card-body">
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0">
|
||
<span class="svg-icon text-primary">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.1671 18.1421C22.4827 18.4577 23.0222 18.2331 23.0206 17.7868L23.0039 13.1053V5.52632C23.0039 4.13107 21.8729 3 20.4776 3H8.68815C7.2929 3 6.16183 4.13107 6.16183 5.52632V9H13C14.6568 9 16 10.3431 16 12V15.6316H19.6565L22.1671 18.1421Z" fill="#035A4B"/>
|
||
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M1.98508 18V13C1.98508 11.8954 2.88051 11 3.98508 11H11.9851C13.0896 11 13.9851 11.8954 13.9851 13V18C13.9851 19.1046 13.0896 20 11.9851 20H4.10081L2.85695 21.1905C2.53895 21.4949 2.01123 21.2695 2.01123 20.8293V18.3243C1.99402 18.2187 1.98508 18.1104 1.98508 18ZM5.99999 14.5C5.99999 14.2239 6.22385 14 6.49999 14H11.5C11.7761 14 12 14.2239 12 14.5C12 14.7761 11.7761 15 11.5 15H6.49999C6.22385 15 5.99999 14.7761 5.99999 14.5ZM9.49999 16C9.22385 16 8.99999 16.2239 8.99999 16.5C8.99999 16.7761 9.22385 17 9.49999 17H11.5C11.7761 17 12 16.7761 12 16.5C12 16.2239 11.7761 16 11.5 16H9.49999Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-4">
|
||
<h4 class="card-title">Ask a question</h4>
|
||
<p class="card-text text-body">Email with support members to get your questions answered.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<!-- End Icon Block -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-6 mb-3 mb-lg-0" data-aos="fade-up" data-aos-delay="100">
|
||
<!-- Icon Block -->
|
||
<a class="card card-transition h-100" href="#">
|
||
<div class="card-body">
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0">
|
||
<span class="svg-icon text-primary">
|
||
<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="M4.85714 1H11.7364C12.0911 1 12.4343 1.12568 12.7051 1.35474L17.4687 5.38394C17.8057 5.66895 18 6.08788 18 6.5292V19.0833C18 20.8739 17.9796 21 16.1429 21H4.85714C3.02045 21 3 20.8739 3 19.0833V2.91667C3 1.12612 3.02045 1 4.85714 1ZM7 13C7 12.4477 7.44772 12 8 12H15C15.5523 12 16 12.4477 16 13C16 13.5523 15.5523 14 15 14H8C7.44772 14 7 13.5523 7 13ZM8 16C7.44772 16 7 16.4477 7 17C7 17.5523 7.44772 18 8 18H11C11.5523 18 12 17.5523 12 17C12 16.4477 11.5523 16 11 16H8Z" fill="#035A4B"/>
|
||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.85714 3H14.7364C15.0911 3 15.4343 3.12568 15.7051 3.35474L20.4687 7.38394C20.8057 7.66895 21 8.08788 21 8.5292V21.0833C21 22.8739 20.9796 23 19.1429 23H6.85714C5.02045 23 5 22.8739 5 21.0833V4.91667C5 3.12612 5.02045 3 6.85714 3ZM7 13C7 12.4477 7.44772 12 8 12H15C15.5523 12 16 12.4477 16 13C16 13.5523 15.5523 14 15 14H8C7.44772 14 7 13.5523 7 13ZM8 16C7.44772 16 7 16.4477 7 17C7 17.5523 7.44772 18 8 18H11C11.5523 18 12 17.5523 12 17C12 16.4477 11.5523 16 11 16H8Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-4">
|
||
<h4 class="card-title">Read documentation</h4>
|
||
<p class="card-text text-body">Dig into the technical details of our products and consensus algorithm.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<!-- End Icon Block -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
<!-- End Card Grid -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html10" role="tabpanel" aria-labelledby="nav-htmlTab10">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card Grid -->
|
||
<div class="container">
|
||
<div class="w-lg-75 mx-lg-auto">
|
||
<div class="row">
|
||
<div class="col-md-6 mb-3 mb-lg-0" data-aos="fade-up">
|
||
<!-- Icon Block -->
|
||
<a class="card card-transition h-100" href="#">
|
||
<div class="card-body">
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0">
|
||
<span class="svg-icon text-primary">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.1671 18.1421C22.4827 18.4577 23.0222 18.2331 23.0206 17.7868L23.0039 13.1053V5.52632C23.0039 4.13107 21.8729 3 20.4776 3H8.68815C7.2929 3 6.16183 4.13107 6.16183 5.52632V9H13C14.6568 9 16 10.3431 16 12V15.6316H19.6565L22.1671 18.1421Z" fill="#035A4B"/>
|
||
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M1.98508 18V13C1.98508 11.8954 2.88051 11 3.98508 11H11.9851C13.0896 11 13.9851 11.8954 13.9851 13V18C13.9851 19.1046 13.0896 20 11.9851 20H4.10081L2.85695 21.1905C2.53895 21.4949 2.01123 21.2695 2.01123 20.8293V18.3243C1.99402 18.2187 1.98508 18.1104 1.98508 18ZM5.99999 14.5C5.99999 14.2239 6.22385 14 6.49999 14H11.5C11.7761 14 12 14.2239 12 14.5C12 14.7761 11.7761 15 11.5 15H6.49999C6.22385 15 5.99999 14.7761 5.99999 14.5ZM9.49999 16C9.22385 16 8.99999 16.2239 8.99999 16.5C8.99999 16.7761 9.22385 17 9.49999 17H11.5C11.7761 17 12 16.7761 12 16.5C12 16.2239 11.7761 16 11.5 16H9.49999Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-4">
|
||
<h4 class="card-title">Ask a question</h4>
|
||
<p class="card-text text-body">Email with support members to get your questions answered.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<!-- End Icon Block -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-6 mb-3 mb-lg-0" data-aos="fade-up" data-aos-delay="100">
|
||
<!-- Icon Block -->
|
||
<a class="card card-transition h-100" href="#">
|
||
<div class="card-body">
|
||
<div class="d-flex">
|
||
<div class="flex-shrink-0">
|
||
<span class="svg-icon text-primary">
|
||
<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="M4.85714 1H11.7364C12.0911 1 12.4343 1.12568 12.7051 1.35474L17.4687 5.38394C17.8057 5.66895 18 6.08788 18 6.5292V19.0833C18 20.8739 17.9796 21 16.1429 21H4.85714C3.02045 21 3 20.8739 3 19.0833V2.91667C3 1.12612 3.02045 1 4.85714 1ZM7 13C7 12.4477 7.44772 12 8 12H15C15.5523 12 16 12.4477 16 13C16 13.5523 15.5523 14 15 14H8C7.44772 14 7 13.5523 7 13ZM8 16C7.44772 16 7 16.4477 7 17C7 17.5523 7.44772 18 8 18H11C11.5523 18 12 17.5523 12 17C12 16.4477 11.5523 16 11 16H8Z" fill="#035A4B"/>
|
||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.85714 3H14.7364C15.0911 3 15.4343 3.12568 15.7051 3.35474L20.4687 7.38394C20.8057 7.66895 21 8.08788 21 8.5292V21.0833C21 22.8739 20.9796 23 19.1429 23H6.85714C5.02045 23 5 22.8739 5 21.0833V4.91667C5 3.12612 5.02045 3 6.85714 3ZM7 13C7 12.4477 7.44772 12 8 12H15C15.5523 12 16 12.4477 16 13C16 13.5523 15.5523 14 15 14H8C7.44772 14 7 13.5523 7 13ZM8 16C7.44772 16 7 16.4477 7 17C7 17.5523 7.44772 18 8 18H11C11.5523 18 12 17.5523 12 17C12 16.4477 11.5523 16 11 16H8Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-4">
|
||
<h4 class="card-title">Read documentation</h4>
|
||
<p class="card-text text-body">Dig into the technical details of our products and consensus algorithm.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<!-- End Icon Block -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
</div>
|
||
<!-- End Card Grid -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-11" class="hs-docs-heading">
|
||
Component #11 <a class="anchorjs-link" href="#component-11" 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="navTab11" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab11" href="#nav-result11" data-bs-toggle="pill" data-bs-target="#nav-result11" role="tab" aria-controls="nav-result11" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab11" href="#nav-html11" data-bs-toggle="pill" data-bs-target="#nav-html11" role="tab" aria-controls="nav-html11" aria-selected="false">HTML</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-jsTab11" href="#nav-js11" data-bs-toggle="pill" data-bs-target="#nav-js11" role="tab" aria-controls="nav-js11" aria-selected="false">JS</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent11">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result11" role="tabpanel" aria-labelledby="nav-resultTab11">
|
||
<!-- Card Grid -->
|
||
<div class="border-top">
|
||
<div class="container content-space-1">
|
||
<!-- Heading -->
|
||
<div class="w-lg-50 text-center mx-lg-auto mb-7">
|
||
<span class="text-cap">What's included</span>
|
||
<h2>3 Color skins included</h2>
|
||
<p>Easily construct new pages using any of 12 pre-made grids and a huge amount of components and elements.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row mb-7">
|
||
<div class="col-sm-6 col-lg-4 mb-5 mb-lg-0">
|
||
<!-- Card -->
|
||
<div class="card bg-soft-primary shadow-none text-center" data-aos="fade-up" data-aos-delay="100">
|
||
<div class="card-body">
|
||
<img class="img-fluid" src="../assets/img/mockups/img7.png" alt="Image Description">
|
||
|
||
<h3 class="card-title">Standard</h3>
|
||
<p class="card-text">Available in:</p>
|
||
|
||
<div class="mb-4">
|
||
<img class="avatar avatar-xss avatar-4x3 me-2" src="../assets/svg/brands/figma-icon.svg" alt="Figma">
|
||
<img class="avatar avatar-xss avatar-4x3" src="../assets/svg/brands/adobe-xd-icon.svg" alt="Adobe XD">
|
||
</div>
|
||
|
||
<div class="d-grid">
|
||
<a class="btn btn-primary btn-transition" href="#">Preview <i class="bi-eye ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-4 mb-5 mb-lg-0">
|
||
<!-- Card -->
|
||
<div class="card bg-soft-dark shadow-none text-center" data-aos="fade-up">
|
||
<div class="card-body">
|
||
<img class="img-fluid" src="../assets/img/mockups/img8.png" alt="Image Description">
|
||
|
||
<h3 class="card-title">Dark</h3>
|
||
<p class="card-text">Available in:</p>
|
||
|
||
<div class="mb-4">
|
||
<img class="avatar avatar-xss avatar-4x3 me-2" src="../assets/svg/brands/figma-icon.svg" alt="Figma">
|
||
</div>
|
||
|
||
<div class="d-grid">
|
||
<a class="btn bg-white btn-transition disabled" href="#">Coming soon ...</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-4">
|
||
<!-- Card -->
|
||
<div class="card bg-soft-success shadow-none text-center" data-aos="fade-up" data-aos-delay="100">
|
||
<div class="card-body">
|
||
<img class="img-fluid" src="../assets/img/mockups/img9.png" alt="Image Description">
|
||
|
||
<h3 class="card-title">Wireframe</h3>
|
||
<p class="card-text">Available in:</p>
|
||
|
||
<div class="mb-4">
|
||
<img class="avatar avatar-xss avatar-4x3 me-2" src="../assets/svg/brands/figma-icon.svg" alt="Figma">
|
||
<img class="avatar avatar-xss avatar-4x3" src="../assets/svg/brands/adobe-xd-icon.svg" alt="Adobe XD">
|
||
</div>
|
||
|
||
<div class="d-grid">
|
||
<a class="btn bg-white btn-transition disabled" href="#">Coming soon ...</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
|
||
<!-- Fancybox -->
|
||
<div class="text-center">
|
||
<a class="video-player btn btn-outline-primary" href="https://www.youtube.com/watch?v=d4eDWc8g0e0" role="button" data-fslightbox="youtube-video">
|
||
<i class="bi-play-circle-fill me-1"></i> Watch and learn how it works
|
||
</a>
|
||
</div>
|
||
<!-- End Fancybox -->
|
||
</div>
|
||
</div>
|
||
<!-- End Card Grid -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html11" role="tabpanel" aria-labelledby="nav-htmlTab11">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card Grid -->
|
||
<div class="border-top">
|
||
<div class="container content-space-2 content-space-lg-3">
|
||
<!-- Heading -->
|
||
<div class="w-lg-50 text-center mx-lg-auto mb-7">
|
||
<span class="text-cap">What's included</span>
|
||
<h2>3 Color skins included</h2>
|
||
<p>Easily construct new pages using any of 12 pre-made grids and a huge amount of components and elements.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row mb-7">
|
||
<div class="col-sm-6 col-lg-4 mb-5 mb-lg-0">
|
||
<!-- Card -->
|
||
<div class="card bg-soft-primary shadow-none text-center" data-aos="fade-up" data-aos-delay="100">
|
||
<div class="card-body">
|
||
<img class="img-fluid" src="../assets/img/mockups/img7.png" alt="Image Description">
|
||
|
||
<h3 class="card-title">Standard</h3>
|
||
<p class="card-text">Available in:</p>
|
||
|
||
<div class="mb-4">
|
||
<img class="avatar avatar-xss avatar-4x3 me-2" src="../assets/svg/brands/figma-icon.svg" alt="Figma">
|
||
<img class="avatar avatar-xss avatar-4x3" src="../assets/svg/brands/adobe-xd-icon.svg" alt="Adobe XD">
|
||
</div>
|
||
|
||
<div class="d-grid">
|
||
<a class="btn btn-primary btn-transition" href="#">Preview <i class="bi-eye ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-4 mb-5 mb-lg-0">
|
||
<!-- Card -->
|
||
<div class="card bg-soft-dark shadow-none text-center" data-aos="fade-up">
|
||
<div class="card-body">
|
||
<img class="img-fluid" src="../assets/img/mockups/img8.png" alt="Image Description">
|
||
|
||
<h3 class="card-title">Dark</h3>
|
||
<p class="card-text">Available in:</p>
|
||
|
||
<div class="mb-4">
|
||
<img class="avatar avatar-xss avatar-4x3 me-2" src="../assets/svg/brands/figma-icon.svg" alt="Figma">
|
||
</div>
|
||
|
||
<div class="d-grid">
|
||
<a class="btn bg-white btn-transition disabled" href="#">Coming soon ...</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-4">
|
||
<!-- Card -->
|
||
<div class="card bg-soft-success shadow-none text-center" data-aos="fade-up" data-aos-delay="100">
|
||
<div class="card-body">
|
||
<img class="img-fluid" src="../assets/img/mockups/img9.png" alt="Image Description">
|
||
|
||
<h3 class="card-title">Wireframe</h3>
|
||
<p class="card-text">Available in:</p>
|
||
|
||
<div class="mb-4">
|
||
<img class="avatar avatar-xss avatar-4x3 me-2" src="../assets/svg/brands/figma-icon.svg" alt="Figma">
|
||
<img class="avatar avatar-xss avatar-4x3" src="../assets/svg/brands/adobe-xd-icon.svg" alt="Adobe XD">
|
||
</div>
|
||
|
||
<div class="d-grid">
|
||
<a class="btn bg-white btn-transition disabled" href="#">Coming soon ...</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
|
||
<!-- Fancybox -->
|
||
<div class="text-center">
|
||
<a class="video-player btn btn-outline-primary" href="https://www.youtube.com/watch?v=d4eDWc8g0e0" role="button" data-fslightbox="youtube-video">
|
||
<i class="bi-play-circle-fill me-1"></i> Watch and learn how it works
|
||
</a>
|
||
</div>
|
||
<!-- End Fancybox -->
|
||
</div>
|
||
</div>
|
||
<!-- End Card Grid -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-js11" role="tabpanel" aria-labelledby="nav-jsTab11">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<script src="../node_modules/fslightbox/index.js"></script>
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-12" class="hs-docs-heading">
|
||
Component #12 <a class="anchorjs-link" href="#component-12" 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="navTab12" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab12" href="#nav-result12" data-bs-toggle="pill" data-bs-target="#nav-result12" role="tab" aria-controls="nav-result12" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab12" href="#nav-html12" data-bs-toggle="pill" data-bs-target="#nav-html12" role="tab" aria-controls="nav-html12" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent12">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result12" role="tabpanel" aria-labelledby="nav-resultTab12">
|
||
<!-- Card Grid -->
|
||
<div class="container content-space-1">
|
||
<!-- Heading -->
|
||
<div class="w-lg-50 text-center mx-lg-auto mb-7">
|
||
<span class="text-cap">Guidelines and Tutorials</span>
|
||
<h2>Learn the ins and outs</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row mb-5 mb-sm-5">
|
||
<div class="col-md-5 mb-3 mb-md-5">
|
||
<!-- Card -->
|
||
<a class="card card-transition h-100" href="#" data-aos="fade-up">
|
||
<div class="card-pinned">
|
||
<img class="card-img-top" src="../assets/svg/components/card-7.svg" alt="Image Description">
|
||
|
||
<span class="card-pinned-top-start">
|
||
<span class="badge bg-primary rounded-pill">Free</span>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<h3 class="card-title text-inherit">Objects and dimensions</h3>
|
||
<p class="card-text text-body">Learn the simplest way to select the object and change dimensions.</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md mb-3 mb-md-5">
|
||
<!-- Card -->
|
||
<a class="card card-transition h-100" href="#" data-aos="fade-up" data-aos-delay="150">
|
||
<div class="card-pinned">
|
||
<img class="card-img-top" src="../assets/svg/components/card-8.svg" alt="Image Description">
|
||
|
||
<span class="card-pinned-top-start">
|
||
<span class="badge bg-primary rounded-pill">$99</span>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<h3 class="card-title text-inherit">Charts in design</h3>
|
||
<p class="card-text text-body">Learn the best ways to create and use charts and data content in web applications.</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md mb-3 mb-md-5">
|
||
<!-- Card -->
|
||
<a class="card card-transition h-100" href="#" data-aos="fade-up" data-aos-delay="200">
|
||
<div class="card-pinned">
|
||
<img class="card-img-top" src="../assets/svg/components/card-9.svg" alt="Image Description">
|
||
|
||
<span class="card-pinned-top-start">
|
||
<span class="badge bg-primary rounded-pill">Free</span>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<h3 class="card-title text-inherit">Layer shadows</h3>
|
||
<p class="card-text text-body">Best tips and guidelines how to use shadows with layers.</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
|
||
<!-- Card Info -->
|
||
<div class="text-center">
|
||
<div class="card card-info-link card-sm">
|
||
<div class="card-body">
|
||
Want to learn more? <a class="card-link ms-2" href="#">View all tutorials <span class="bi-chevron-right small ms-1"></span></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Info -->
|
||
</div>
|
||
<!-- End Card Grid -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html12" role="tabpanel" aria-labelledby="nav-htmlTab12">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card Grid -->
|
||
<div class="container content-space-2 content-space-lg-3">
|
||
<!-- Heading -->
|
||
<div class="w-lg-50 text-center mx-lg-auto mb-7">
|
||
<span class="text-cap">Guidelines and Tutorials</span>
|
||
<h2>Learn the ins and outs</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row mb-5 mb-sm-5">
|
||
<div class="col-md-5 mb-3 mb-md-5">
|
||
<!-- Card -->
|
||
<a class="card card-transition h-100" href="#" data-aos="fade-up">
|
||
<div class="card-pinned">
|
||
<img class="card-img-top" src="../assets/svg/components/card-7.svg" alt="Image Description">
|
||
|
||
<span class="card-pinned-top-start">
|
||
<span class="badge bg-primary rounded-pill">Free</span>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<h3 class="card-title text-inherit">Objects and dimensions</h3>
|
||
<p class="card-text text-body">Learn the simplest way to select the object and change dimensions.</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md mb-3 mb-md-5">
|
||
<!-- Card -->
|
||
<a class="card card-transition h-100" href="#" data-aos="fade-up" data-aos-delay="150">
|
||
<div class="card-pinned">
|
||
<img class="card-img-top" src="../assets/svg/components/card-8.svg" alt="Image Description">
|
||
|
||
<span class="card-pinned-top-start">
|
||
<span class="badge bg-primary rounded-pill">$99</span>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<h3 class="card-title text-inherit">Charts in design</h3>
|
||
<p class="card-text text-body">Learn the best ways to create and use charts and data content in web applications.</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md mb-3 mb-md-5">
|
||
<!-- Card -->
|
||
<a class="card card-transition h-100" href="#" data-aos="fade-up" data-aos-delay="200">
|
||
<div class="card-pinned">
|
||
<img class="card-img-top" src="../assets/svg/components/card-9.svg" alt="Image Description">
|
||
|
||
<span class="card-pinned-top-start">
|
||
<span class="badge bg-primary rounded-pill">Free</span>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<h3 class="card-title text-inherit">Layer shadows</h3>
|
||
<p class="card-text text-body">Best tips and guidelines how to use shadows with layers.</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
|
||
<!-- Card Info -->
|
||
<div class="text-center">
|
||
<div class="card card-info-link card-sm">
|
||
<div class="card-body">
|
||
Want to learn more? <a class="card-link ms-2" href="#">View all tutorials <span class="bi-chevron-right small ms-1"></span></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Info -->
|
||
</div>
|
||
<!-- End Card Grid -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-13" class="hs-docs-heading">
|
||
Component #13 <a class="anchorjs-link" href="#component-13" 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="navTab13" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab13" href="#nav-result13" data-bs-toggle="pill" data-bs-target="#nav-result13" role="tab" aria-controls="nav-result13" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab13" href="#nav-html13" data-bs-toggle="pill" data-bs-target="#nav-html13" role="tab" aria-controls="nav-html13" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent13">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result13" role="tabpanel" aria-labelledby="nav-resultTab13">
|
||
<!-- Features -->
|
||
<div class="bg-dark rounded-2 mx-3 mx-xl-10" style="background-image: url(../assets/svg/components/wave-pattern-light.svg);">
|
||
<div class="container-xl container-fluid content-space-1 content-space-md-2 px-4 px-md-8 px-lg-10">
|
||
<!-- Heading -->
|
||
<div class="text-center mx-md-auto mb-5 mb-md-9">
|
||
<h2 class="h1 text-white">What can you do with Front?</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Swiper Slider -->
|
||
<div class="js-swiper-card-blocks swiper swiper-equal-height mb-7">
|
||
<div class="swiper-wrapper">
|
||
<!-- Slide -->
|
||
<div class="swiper-slide">
|
||
<!-- Card -->
|
||
<div class="card text-center">
|
||
<div class="card-body">
|
||
<div class="mb-4">
|
||
<img class="img-fluid" src="../assets/svg/illustrations/oc-looking-for-answers.svg" alt="Image Description" style="height: 12rem;">
|
||
</div>
|
||
|
||
<h3 class="card-title">Integrations</h3>
|
||
<p class="card-text">Front works with the tools and services you already use every day. Pipe in information or take action without leaving Front.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Slide -->
|
||
|
||
<!-- Slide -->
|
||
<div class="swiper-slide">
|
||
<!-- Card -->
|
||
<div class="card text-center">
|
||
<div class="card-body">
|
||
<div class="mb-4">
|
||
<img class="img-fluid" src="../assets/svg/illustrations/oc-growing.svg" alt="Image Description" style="height: 12rem;">
|
||
</div>
|
||
|
||
<h3 class="card-title">Security</h3>
|
||
<p class="card-text">We take security seriously at Slack. We offer measures like 2FA and SSO to ensure the safety of your data and protect your organization.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Slide -->
|
||
|
||
<!-- Slide -->
|
||
<div class="swiper-slide">
|
||
<!-- Card -->
|
||
<div class="card text-center">
|
||
<div class="card-body">
|
||
<div class="mb-4">
|
||
<img class="img-fluid" src="../assets/svg/illustrations/oc-chatting.svg" alt="Image Description" style="height: 12rem;">
|
||
</div>
|
||
|
||
<h3 class="card-title">Channels</h3>
|
||
<p class="card-text">Communication in Front happens in channels, organized by project, topic, team, or whatever makes sense for you.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Slide -->
|
||
</div>
|
||
|
||
<!-- Swiper Pagination -->
|
||
<div class="js-swiper-card-blocks-pagination swiper-pagination swiper-pagination-light d-lg-none"></div>
|
||
</div>
|
||
<!-- End Swiper Slider -->
|
||
|
||
<div class="text-center">
|
||
<p class="text-white">See Help Front in action. <a class="link link-warning" href="#">Get a demo <i class="bi-arrow-right-circle-fill align-middle fs-3 ms-1"></i></a></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Features -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html13" role="tabpanel" aria-labelledby="nav-htmlTab13">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Features -->
|
||
<div class="bg-dark rounded-2 mx-3 mx-xl-10" style="background-image: url(../assets/svg/components/wave-pattern-light.svg);">
|
||
<div class="container-xl container-fluid content-space-1 content-space-md-2 px-4 px-md-8 px-lg-10">
|
||
<!-- Heading -->
|
||
<div class="text-center mx-md-auto mb-5 mb-md-9">
|
||
<h2 class="h1 text-white">What can you do with Front?</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Swiper Slider -->
|
||
<div class="js-swiper-card-blocks swiper swiper-equal-height mb-7">
|
||
<div class="swiper-wrapper">
|
||
<!-- Slide -->
|
||
<div class="swiper-slide">
|
||
<!-- Card -->
|
||
<div class="card text-center">
|
||
<div class="card-body">
|
||
<div class="mb-4">
|
||
<img class="img-fluid" src="../assets/svg/illustrations/oc-looking-for-answers.svg" alt="Image Description" style="height: 12rem;">
|
||
</div>
|
||
|
||
<h3 class="card-title">Integrations</h3>
|
||
<p class="card-text">Front works with the tools and services you already use every day. Pipe in information or take action without leaving Front.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Slide -->
|
||
|
||
<!-- Slide -->
|
||
<div class="swiper-slide">
|
||
<!-- Card -->
|
||
<div class="card text-center">
|
||
<div class="card-body">
|
||
<div class="mb-4">
|
||
<img class="img-fluid" src="../assets/svg/illustrations/oc-growing.svg" alt="Image Description" style="height: 12rem;">
|
||
</div>
|
||
|
||
<h3 class="card-title">Security</h3>
|
||
<p class="card-text">We take security seriously at Slack. We offer measures like 2FA and SSO to ensure the safety of your data and protect your organization.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Slide -->
|
||
|
||
<!-- Slide -->
|
||
<div class="swiper-slide">
|
||
<!-- Card -->
|
||
<div class="card text-center">
|
||
<div class="card-body">
|
||
<div class="mb-4">
|
||
<img class="img-fluid" src="../assets/svg/illustrations/oc-chatting.svg" alt="Image Description" style="height: 12rem;">
|
||
</div>
|
||
|
||
<h3 class="card-title">Channels</h3>
|
||
<p class="card-text">Communication in Front happens in channels, organized by project, topic, team, or whatever makes sense for you.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Slide -->
|
||
</div>
|
||
|
||
<!-- Swiper Pagination -->
|
||
<div class="js-swiper-card-blocks-pagination swiper-pagination swiper-pagination-light d-lg-none"></div>
|
||
</div>
|
||
<!-- End Swiper Slider -->
|
||
|
||
<div class="text-center">
|
||
<p class="text-white">See Help Front in action. <a class="link link-warning" href="#">Get a demo <i class="bi-arrow-right-circle-fill align-middle fs-3 ms-1"></i></a></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Features -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-14" class="hs-docs-heading">
|
||
Component #14 <a class="anchorjs-link" href="#component-14" 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="navTab14" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab14" href="#nav-result14" data-bs-toggle="pill" data-bs-target="#nav-result14" role="tab" aria-controls="nav-result14" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab14" href="#nav-html14" data-bs-toggle="pill" data-bs-target="#nav-html14" role="tab" aria-controls="nav-html14" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent14">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result14" role="tabpanel" aria-labelledby="nav-resultTab14">
|
||
<!-- Card Grid -->
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-lg-6 mb-3 mb-lg-0">
|
||
<!-- Card -->
|
||
<div class="card h-100 overflow-hidden">
|
||
<div class="row align-items-center">
|
||
<div class="col-7">
|
||
<div class="card-body">
|
||
<h3 class="card-title">Explore the Snippets tools</h3>
|
||
<p class="card-text">Start your business on various platforms with one click.</p>
|
||
<a class="card-link" href="#">Learn more <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-5 bg-img-start h-100 px-0" style="background-image: url(../assets/svg/illustrations/oc-looking-for-answers.svg);"></div>
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-lg-6">
|
||
<!-- Card -->
|
||
<div class="card h-100 overflow-hidden">
|
||
<div class="row align-items-center">
|
||
<div class="col-7">
|
||
<div class="card-body">
|
||
<h3 class="card-title">Front gives every team the freedom to create</h3>
|
||
<p class="card-text">Evaluate your options better and learn more about them.</p>
|
||
<a class="card-link" href="#">Learn more <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-5 bg-img-start h-100 px-0" style="background-image: url(../assets/svg/illustrations/oc-hi-five.svg);"></div>
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Card Grid -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html14" role="tabpanel" aria-labelledby="nav-htmlTab14">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card Grid -->
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-lg-6 mb-3 mb-lg-0">
|
||
<!-- Card -->
|
||
<div class="card h-100 overflow-hidden">
|
||
<div class="row align-items-center">
|
||
<div class="col-7">
|
||
<div class="card-body">
|
||
<h3 class="card-title">Explore the Snippets tools</h3>
|
||
<p class="card-text">Start your business on various platforms with one click.</p>
|
||
<a class="card-link" href="#">Learn more <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-5 bg-img-start h-100 px-0" style="background-image: url(../assets/svg/illustrations/oc-looking-for-answers.svg);"></div>
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-lg-6">
|
||
<!-- Card -->
|
||
<div class="card h-100 overflow-hidden">
|
||
<div class="row align-items-center">
|
||
<div class="col-7">
|
||
<div class="card-body">
|
||
<h3 class="card-title">Front gives every team the freedom to create</h3>
|
||
<p class="card-text">Evaluate your options better and learn more about them.</p>
|
||
<a class="card-link" href="#">Learn more <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-5 bg-img-start h-100 px-0" style="background-image: url(../assets/svg/illustrations/oc-hi-five.svg);"></div>
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Card Grid -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-15" class="hs-docs-heading">
|
||
Component #15 <a class="anchorjs-link" href="#component-15" 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="navTab15" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab15" href="#nav-result15" data-bs-toggle="pill" data-bs-target="#nav-result15" role="tab" aria-controls="nav-result15" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab15" href="#nav-html15" data-bs-toggle="pill" data-bs-target="#nav-html15" role="tab" aria-controls="nav-html15" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent15">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result15" role="tabpanel" aria-labelledby="nav-resultTab15">
|
||
<!-- Features -->
|
||
<div id="featuresSection" class="container content-space-1">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
||
<h2 class="h1">Key benefits</h2>
|
||
<p>Design faster with a growing array of beautiful templates.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row gx-3">
|
||
<div class="col-sm-6 col-lg-3 mb-3 mb-lg-0">
|
||
<!-- Card -->
|
||
<a class="card card-sm card-transition h-100" href="#">
|
||
<div class="card-body">
|
||
<span class="svg-icon text-primary mb-3">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M6 21C6 21.6 6.4 22 7 22H17C17.6 22 18 21.6 18 21V20H6V21Z" fill="#035A4B"/>
|
||
<path opacity="0.3" d="M17 2H7C6.4 2 6 2.4 6 3V20H18V3C18 2.4 17.6 2 17 2Z" fill="#035A4B"/>
|
||
<path d="M12 4C11.4 4 11 3.6 11 3V2H13V3C13 3.6 12.6 4 12 4Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h4 class="card-title">Responsive</h4>
|
||
<p class="card-text text-body">Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web.</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-3 mb-3 mb-lg-0">
|
||
<!-- Card -->
|
||
<a class="card card-sm card-transition h-100" href="#">
|
||
<div class="card-body">
|
||
<span class="svg-icon text-primary mb-3">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M17.5 11H6.5C4 11 2 9 2 6.5C2 4 4 2 6.5 2H17.5C20 2 22 4 22 6.5C22 9 20 11 17.5 11ZM15 6.5C15 7.9 16.1 9 17.5 9C18.9 9 20 7.9 20 6.5C20 5.1 18.9 4 17.5 4C16.1 4 15 5.1 15 6.5Z" fill="#035A4B"/>
|
||
<path opacity="0.3" d="M17.5 22H6.5C4 22 2 20 2 17.5C2 15 4 13 6.5 13H17.5C20 13 22 15 22 17.5C22 20 20 22 17.5 22ZM4 17.5C4 18.9 5.1 20 6.5 20C7.9 20 9 18.9 9 17.5C9 16.1 7.9 15 6.5 15C5.1 15 4 16.1 4 17.5Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h4 class="card-title">Customizable</h4>
|
||
<p class="card-text text-body">Front template can be easily customized with its cutting-edge components and features.</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-3 mb-3 mb-sm-0">
|
||
<!-- Card -->
|
||
<a class="card card-sm card-transition h-100" href="#">
|
||
<div class="card-body">
|
||
<span class="svg-icon text-primary mb-3">
|
||
<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="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 fill-rule="evenodd" clip-rule="evenodd" d="M11.175 14.75C10.9354 14.75 10.6958 14.6542 10.5042 14.4625L8.58749 12.5458C8.20415 12.1625 8.20415 11.5875 8.58749 11.2042C8.97082 10.8208 9.59374 10.8208 9.92915 11.2042L11.175 12.45L14.3375 9.2875C14.7208 8.90417 15.2958 8.90417 15.6792 9.2875C16.0625 9.67083 16.0625 10.2458 15.6792 10.6292L11.8458 14.4625C11.6542 14.6542 11.4146 14.75 11.175 14.75Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h4 class="card-title">Premium <span class="badge badge-success badge-pill ml-1">sketch</span></h4>
|
||
<p class="card-text text-body">Front is not only for developers but also for designers, and includes a Sketch file.</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-3">
|
||
<!-- Card -->
|
||
<a class="card card-sm card-transition h-100" href="#">
|
||
<div class="card-body">
|
||
<span class="svg-icon text-primary mb-3">
|
||
<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="M4.85714 1H11.7364C12.0911 1 12.4343 1.12568 12.7051 1.35474L17.4687 5.38394C17.8057 5.66895 18 6.08788 18 6.5292V19.0833C18 20.8739 17.9796 21 16.1429 21H4.85714C3.02045 21 3 20.8739 3 19.0833V2.91667C3 1.12612 3.02045 1 4.85714 1ZM7 13C7 12.4477 7.44772 12 8 12H15C15.5523 12 16 12.4477 16 13C16 13.5523 15.5523 14 15 14H8C7.44772 14 7 13.5523 7 13ZM8 16C7.44772 16 7 16.4477 7 17C7 17.5523 7.44772 18 8 18H11C11.5523 18 12 17.5523 12 17C12 16.4477 11.5523 16 11 16H8Z" fill="#035A4B"/>
|
||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.85714 3H14.7364C15.0911 3 15.4343 3.12568 15.7051 3.35474L20.4687 7.38394C20.8057 7.66895 21 8.08788 21 8.5292V21.0833C21 22.8739 20.9796 23 19.1429 23H6.85714C5.02045 23 5 22.8739 5 21.0833V4.91667C5 3.12612 5.02045 3 6.85714 3ZM7 13C7 12.4477 7.44772 12 8 12H15C15.5523 12 16 12.4477 16 13C16 13.5523 15.5523 14 15 14H8C7.44772 14 7 13.5523 7 13ZM8 16C7.44772 16 7 16.4477 7 17C7 17.5523 7.44772 18 8 18H11C11.5523 18 12 17.5523 12 17C12 16.4477 11.5523 16 11 16H8Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h4 class="card-title">Documentation</h4>
|
||
<p class="card-text text-body">Every component and plugin is well documented with live examples.</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Features -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html15" role="tabpanel" aria-labelledby="nav-htmlTab15">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Features -->
|
||
<div id="featuresSection" class="container content-space-2 content-space-lg-3">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
||
<h2 class="h1">Key benefits</h2>
|
||
<p>Design faster with a growing array of beautiful templates.</p>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row gx-3">
|
||
<div class="col-sm-6 col-lg-3 mb-3 mb-lg-0">
|
||
<!-- Card -->
|
||
<a class="card card-sm card-transition h-100" href="#">
|
||
<div class="card-body">
|
||
<span class="svg-icon text-primary mb-3">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M6 21C6 21.6 6.4 22 7 22H17C17.6 22 18 21.6 18 21V20H6V21Z" fill="#035A4B"/>
|
||
<path opacity="0.3" d="M17 2H7C6.4 2 6 2.4 6 3V20H18V3C18 2.4 17.6 2 17 2Z" fill="#035A4B"/>
|
||
<path d="M12 4C11.4 4 11 3.6 11 3V2H13V3C13 3.6 12.6 4 12 4Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h4 class="card-title">Responsive</h4>
|
||
<p class="card-text text-body">Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web.</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-3 mb-3 mb-lg-0">
|
||
<!-- Card -->
|
||
<a class="card card-sm card-transition h-100" href="#">
|
||
<div class="card-body">
|
||
<span class="svg-icon text-primary mb-3">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M17.5 11H6.5C4 11 2 9 2 6.5C2 4 4 2 6.5 2H17.5C20 2 22 4 22 6.5C22 9 20 11 17.5 11ZM15 6.5C15 7.9 16.1 9 17.5 9C18.9 9 20 7.9 20 6.5C20 5.1 18.9 4 17.5 4C16.1 4 15 5.1 15 6.5Z" fill="#035A4B"/>
|
||
<path opacity="0.3" d="M17.5 22H6.5C4 22 2 20 2 17.5C2 15 4 13 6.5 13H17.5C20 13 22 15 22 17.5C22 20 20 22 17.5 22ZM4 17.5C4 18.9 5.1 20 6.5 20C7.9 20 9 18.9 9 17.5C9 16.1 7.9 15 6.5 15C5.1 15 4 16.1 4 17.5Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h4 class="card-title">Customizable</h4>
|
||
<p class="card-text text-body">Front template can be easily customized with its cutting-edge components and features.</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-3 mb-3 mb-sm-0">
|
||
<!-- Card -->
|
||
<a class="card card-sm card-transition h-100" href="#">
|
||
<div class="card-body">
|
||
<span class="svg-icon text-primary mb-3">
|
||
<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="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 fill-rule="evenodd" clip-rule="evenodd" d="M11.175 14.75C10.9354 14.75 10.6958 14.6542 10.5042 14.4625L8.58749 12.5458C8.20415 12.1625 8.20415 11.5875 8.58749 11.2042C8.97082 10.8208 9.59374 10.8208 9.92915 11.2042L11.175 12.45L14.3375 9.2875C14.7208 8.90417 15.2958 8.90417 15.6792 9.2875C16.0625 9.67083 16.0625 10.2458 15.6792 10.6292L11.8458 14.4625C11.6542 14.6542 11.4146 14.75 11.175 14.75Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h4 class="card-title">Premium <span class="badge badge-success badge-pill ml-1">sketch</span></h4>
|
||
<p class="card-text text-body">Front is not only for developers but also for designers, and includes a Sketch file.</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6 col-lg-3">
|
||
<!-- Card -->
|
||
<a class="card card-sm card-transition h-100" href="#">
|
||
<div class="card-body">
|
||
<span class="svg-icon text-primary mb-3">
|
||
<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="M4.85714 1H11.7364C12.0911 1 12.4343 1.12568 12.7051 1.35474L17.4687 5.38394C17.8057 5.66895 18 6.08788 18 6.5292V19.0833C18 20.8739 17.9796 21 16.1429 21H4.85714C3.02045 21 3 20.8739 3 19.0833V2.91667C3 1.12612 3.02045 1 4.85714 1ZM7 13C7 12.4477 7.44772 12 8 12H15C15.5523 12 16 12.4477 16 13C16 13.5523 15.5523 14 15 14H8C7.44772 14 7 13.5523 7 13ZM8 16C7.44772 16 7 16.4477 7 17C7 17.5523 7.44772 18 8 18H11C11.5523 18 12 17.5523 12 17C12 16.4477 11.5523 16 11 16H8Z" fill="#035A4B"/>
|
||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.85714 3H14.7364C15.0911 3 15.4343 3.12568 15.7051 3.35474L20.4687 7.38394C20.8057 7.66895 21 8.08788 21 8.5292V21.0833C21 22.8739 20.9796 23 19.1429 23H6.85714C5.02045 23 5 22.8739 5 21.0833V4.91667C5 3.12612 5.02045 3 6.85714 3ZM7 13C7 12.4477 7.44772 12 8 12H15C15.5523 12 16 12.4477 16 13C16 13.5523 15.5523 14 15 14H8C7.44772 14 7 13.5523 7 13ZM8 16C7.44772 16 7 16.4477 7 17C7 17.5523 7.44772 18 8 18H11C11.5523 18 12 17.5523 12 17C12 16.4477 11.5523 16 11 16H8Z" fill="#035A4B"/>
|
||
</svg>
|
||
|
||
</span>
|
||
|
||
<h4 class="card-title">Documentation</h4>
|
||
<p class="card-text text-body">Every component and plugin is well documented with live examples.</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link">Learn more <i class="bi-chevron-right small ms-1"></i></span>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Features -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-16" class="hs-docs-heading">
|
||
Component #16 <a class="anchorjs-link" href="#component-16" 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="navTab16" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab16" href="#nav-result16" data-bs-toggle="pill" data-bs-target="#nav-result16" role="tab" aria-controls="nav-result16" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab16" href="#nav-html16" data-bs-toggle="pill" data-bs-target="#nav-html16" role="tab" aria-controls="nav-html16" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent16">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result16" role="tabpanel" aria-labelledby="nav-resultTab16">
|
||
<!-- Card Grid -->
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-lg-6 mb-3 mb-lg-0">
|
||
<!-- Card -->
|
||
<div class="card bg-primary h-100 overflow-hidden">
|
||
<div class="card-body">
|
||
<div class="w-65 pe-2">
|
||
<h2 class="card-title text-white">Front process</h2>
|
||
<p class="card-text text-white">Once you are invited to Front Agency, you company will be set within days.</p>
|
||
<a class="btn btn-light btn-sm btn-transition" href="#">Learn more <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
|
||
<div class="position-absolute end-0 bottom-0 w-50 mb-n3 me-n7">
|
||
<img class="card-img" src="../assets/svg/illustrations/apps.svg" alt="Image Description">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-lg-6">
|
||
<!-- Card -->
|
||
<div class="card bg-warning h-100 overflow-hidden">
|
||
<div class="card-body">
|
||
<div class="w-65 pe-2">
|
||
<h2 class="card-title text-white">Product design</h2>
|
||
<p class="card-text text-white">Easy and fast adjustments of elements are possible with Front template.</p>
|
||
<a class="btn btn-light btn-sm btn-transition" href="#">Learn more <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
|
||
<div class="position-absolute end-0 bottom-0 w-50 mb-n3 me-n7">
|
||
<img class="card-img" src="../assets/svg/illustrations/calendar.svg" alt="Image Description">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Card Grid -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html16" role="tabpanel" aria-labelledby="nav-htmlTab16">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card Grid -->
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-lg-6 mb-3 mb-lg-0">
|
||
<!-- Card -->
|
||
<div class="card bg-primary h-100 overflow-hidden">
|
||
<div class="card-body">
|
||
<div class="w-65 pe-2">
|
||
<h2 class="card-title text-white">Front process</h2>
|
||
<p class="card-text text-white">Once you are invited to Front Agency, you company will be set within days.</p>
|
||
<a class="btn btn-light btn-sm btn-transition" href="#">Learn more <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
|
||
<div class="position-absolute end-0 bottom-0 w-50 mb-n3 me-n7">
|
||
<img class="card-img" src="../assets/svg/illustrations/apps.svg" alt="Image Description">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-lg-6">
|
||
<!-- Card -->
|
||
<div class="card bg-warning h-100 overflow-hidden">
|
||
<div class="card-body">
|
||
<div class="w-65 pe-2">
|
||
<h2 class="card-title text-white">Product design</h2>
|
||
<p class="card-text text-white">Easy and fast adjustments of elements are possible with Front template.</p>
|
||
<a class="btn btn-light btn-sm btn-transition" href="#">Learn more <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
|
||
<div class="position-absolute end-0 bottom-0 w-50 mb-n3 me-n7">
|
||
<img class="card-img" src="../assets/svg/illustrations/calendar.svg" alt="Image Description">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Card Grid -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-17" class="hs-docs-heading">
|
||
Component #17 <a class="anchorjs-link" href="#component-17" 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="navTab17" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab17" href="#nav-result17" data-bs-toggle="pill" data-bs-target="#nav-result17" role="tab" aria-controls="nav-result17" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab17" href="#nav-html17" data-bs-toggle="pill" data-bs-target="#nav-html17" role="tab" aria-controls="nav-html17" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent17">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result17" role="tabpanel" aria-labelledby="nav-resultTab17">
|
||
<!-- Card Grid -->
|
||
<div class="container content-space-1">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
||
<span class="text-cap">Success stories</span>
|
||
<h2>See how Front is helping teams get organized and work smarter</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 mb-5">
|
||
<div class="col mb-5">
|
||
<!-- Card -->
|
||
<div class="card h-100">
|
||
<img class="card-img-top" src="../assets/img/480x320/img13.jpg" alt="Image Description">
|
||
|
||
<div class="card-body">
|
||
<div class="mb-3">
|
||
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/amazon.svg" alt="Logo">
|
||
</div>
|
||
<p class="card-text">Amazon launched their enterprise platform and built a powerful user experience.</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<a class="card-link" href="../page-customer-story.html">Read story <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col mb-5">
|
||
<!-- Card -->
|
||
<div class="card h-100">
|
||
<img class="card-img-top" src="../assets/img/480x320/img17.jpg" alt="Image Description">
|
||
|
||
<div class="card-body">
|
||
<div class="mb-3">
|
||
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/mapbox.svg" alt="Logo">
|
||
</div>
|
||
<p class="card-text">Mapbox empowers marketers to create digital marketing dashboards easily and share them with their team.</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<a class="card-link" href="../page-customer-story.html">Read story <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col mb-5">
|
||
<!-- Card -->
|
||
<div class="card h-100">
|
||
<img class="card-img-top" src="../assets/img/480x320/img16.jpg" alt="Image Description">
|
||
|
||
<div class="card-body">
|
||
<div class="mb-3">
|
||
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/forbes.svg" alt="Logo">
|
||
</div>
|
||
<p class="card-text">Netflix's mission is to create a planet run by the sun. In order to achieve this goal, they needed to find a way to make solar simple.</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<a class="card-link" href="../page-customer-story.html">Read story <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
|
||
<div class="text-center">
|
||
<a class="btn btn-outline-primary" href="#">View all stories</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Grid -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html17" role="tabpanel" aria-labelledby="nav-htmlTab17">
|
||
<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-5 mb-md-9">
|
||
<span class="text-cap">Success stories</span>
|
||
<h2>See how Front is helping teams get organized and work smarter</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 mb-5">
|
||
<div class="col mb-5">
|
||
<!-- Card -->
|
||
<div class="card h-100">
|
||
<img class="card-img-top" src="../assets/img/480x320/img13.jpg" alt="Image Description">
|
||
|
||
<div class="card-body">
|
||
<div class="mb-3">
|
||
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/amazon.svg" alt="Logo">
|
||
</div>
|
||
<p class="card-text">Amazon launched their enterprise platform and built a powerful user experience.</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<a class="card-link" href="../page-customer-story.html">Read story <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col mb-5">
|
||
<!-- Card -->
|
||
<div class="card h-100">
|
||
<img class="card-img-top" src="../assets/img/480x320/img17.jpg" alt="Image Description">
|
||
|
||
<div class="card-body">
|
||
<div class="mb-3">
|
||
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/mapbox.svg" alt="Logo">
|
||
</div>
|
||
<p class="card-text">Mapbox empowers marketers to create digital marketing dashboards easily and share them with their team.</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<a class="card-link" href="../page-customer-story.html">Read story <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col mb-5">
|
||
<!-- Card -->
|
||
<div class="card h-100">
|
||
<img class="card-img-top" src="../assets/img/480x320/img16.jpg" alt="Image Description">
|
||
|
||
<div class="card-body">
|
||
<div class="mb-3">
|
||
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/forbes.svg" alt="Logo">
|
||
</div>
|
||
<p class="card-text">Netflix's mission is to create a planet run by the sun. In order to achieve this goal, they needed to find a way to make solar simple.</p>
|
||
</div>
|
||
|
||
<div class="card-footer pt-0">
|
||
<a class="card-link" href="../page-customer-story.html">Read story <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
|
||
<div class="text-center">
|
||
<a class="btn btn-outline-primary" href="#">View all stories</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Grid -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-18" class="hs-docs-heading">
|
||
Component #18 <a class="anchorjs-link" href="#component-18" 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="navTab18" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab18" href="#nav-result18" data-bs-toggle="pill" data-bs-target="#nav-result18" role="tab" aria-controls="nav-result18" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab18" href="#nav-html18" data-bs-toggle="pill" data-bs-target="#nav-html18" role="tab" aria-controls="nav-html18" aria-selected="false">HTML</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-cssTab18" href="#nav-css18" data-bs-toggle="pill" data-bs-target="#nav-css18" role="tab" aria-controls="nav-css18" aria-selected="false">CSS</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-jsTab18" href="#nav-js18" data-bs-toggle="pill" data-bs-target="#nav-js18" role="tab" aria-controls="nav-js18" aria-selected="false">JS</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent18">
|
||
<div class="tab-pane fade p-4 show active overflow-hidden" id="nav-result18" role="tabpanel" aria-labelledby="nav-resultTab18">
|
||
<!-- Card Grid -->
|
||
<div class="bg-img-start" style="background: url(../assets/svg/components/shape-5.svg) center no-repeat;">
|
||
<div class="position-relative">
|
||
<div class="container content-space-2">
|
||
<div class="row align-items-md-center mb-7">
|
||
<div class="col-md-6 mb-4 mb-md-0">
|
||
<h2>Check out our newest and most popular programs</h2>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-6 text-md-end">
|
||
<a class="link" href="#">See all programs <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
|
||
<!-- Swiper Slider -->
|
||
<div class="swiper-center-mode-end">
|
||
<div class="js-swiper-course-hero swiper">
|
||
<div class="swiper-wrapper">
|
||
<!-- Slide -->
|
||
<div class="swiper-slide pt-2">
|
||
<!-- Card -->
|
||
<a class="card card-sm card-stretched-vertical card-transition bg-img-start" href="../demo-course/course-overview.html" style="background-image: url(../assets/img/400x500/img14.jpg); min-height: 15rem;">
|
||
<div class="card-body">
|
||
<span class="card-subtitle text-white-70">New</span>
|
||
<h4 class="card-title text-white">Cloud computing</h4>
|
||
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link text-white">Read now</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Slide -->
|
||
|
||
<!-- Slide -->
|
||
<div class="swiper-slide pt-2">
|
||
<!-- Card -->
|
||
<a class="card card-sm card-stretched-vertical card-transition bg-img-start" href="../demo-course/course-overview.html" style="background-image: url(../assets/img/400x500/img13.jpg); min-height: 15rem;">
|
||
<div class="card-body">
|
||
<span class="card-subtitle text-white-70">Phython</span>
|
||
<h4 class="card-title text-white">What's new in Phython 3.7.2</h4>
|
||
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link text-white">Read now</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Slide -->
|
||
|
||
<!-- Slide -->
|
||
<div class="swiper-slide pt-2">
|
||
<!-- Card -->
|
||
<a class="card card-sm card-stretched-vertical card-transition bg-img-start" href="../demo-course/course-overview.html" style="background-image: url(../assets/img/400x500/img15.jpg); min-height: 15rem;">
|
||
<div class="card-body">
|
||
<span class="card-subtitle text-white-70">Tooling</span>
|
||
<h4 class="card-title text-white">Build a staging server</h4>
|
||
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link text-white">Read now</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Slide -->
|
||
|
||
<!-- Slide -->
|
||
<div class="swiper-slide pt-2">
|
||
<!-- Card -->
|
||
<a class="card card-sm card-stretched-vertical card-transition bg-img-start" href="../demo-course/course-overview.html" style="background-image: url(../assets/img/400x500/img16.jpg); min-height: 15rem;">
|
||
<div class="card-body">
|
||
<span class="card-subtitle text-white-70">JavaScript</span>
|
||
<h4 class="card-title text-white">Laravel, Vue and SPAs</h4>
|
||
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link text-white">Read now</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Slide -->
|
||
|
||
<!-- Slide -->
|
||
<div class="swiper-slide pt-2">
|
||
<!-- Card -->
|
||
<a class="card card-sm card-stretched-vertical card-transition bg-img-start" href="../demo-course/course-overview.html" style="background-image: url(../assets/img/400x500/img17.jpg); min-height: 15rem;">
|
||
<div class="card-body">
|
||
<span class="card-subtitle text-white-70">Popular</span>
|
||
<h4 class="card-title text-white">Artificial Intelligence</h4>
|
||
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link text-white">Read now</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Slide -->
|
||
|
||
<!-- Slide -->
|
||
<div class="swiper-slide pt-2">
|
||
<!-- Card -->
|
||
<a class="card card-sm card-stretched-vertical card-transition bg-img-start" href="../demo-course/course-overview.html" style="background-image: url(../assets/img/400x500/img18.jpg); min-height: 15rem;">
|
||
<div class="card-body">
|
||
<span class="card-subtitle text-white-70">PHP</span>
|
||
<h4 class="card-title text-white">Programming terms explained</h4>
|
||
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link text-white">Read now</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Slide -->
|
||
</div>
|
||
|
||
<!-- Arrows -->
|
||
<div class="js-swiper-course-hero-button-next swiper-button-next"></div>
|
||
<div class="js-swiper-course-hero-button-prev swiper-button-prev"></div>
|
||
</div>
|
||
</div>
|
||
<!-- End Swiper Slider -->
|
||
</div>
|
||
|
||
<div class="w-100 w-md-65 bg-light position-absolute top-0 end-0 bottom-0 zi-n1"></div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Grid -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html18" role="tabpanel" aria-labelledby="nav-htmlTab18">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card Grid -->
|
||
<div class="content-space-2 content-space-lg-3 bg-img-start" style="background: url(../assets/svg/components/shape-5.svg) center no-repeat;">
|
||
<div class="position-relative">
|
||
<div class="container content-space-2">
|
||
<div class="row align-items-md-center mb-7">
|
||
<div class="col-md-6 mb-4 mb-md-0">
|
||
<h2>Check out our newest and most popular programs</h2>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-md-6 text-md-end">
|
||
<a class="link" href="#">See all programs <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
|
||
<!-- Swiper Slider -->
|
||
<div class="swiper-center-mode-end">
|
||
<div class="js-swiper-course-hero swiper">
|
||
<div class="swiper-wrapper">
|
||
<!-- Slide -->
|
||
<div class="swiper-slide pt-2">
|
||
<!-- Card -->
|
||
<a class="card card-sm card-stretched-vertical card-transition bg-img-start" href="../demo-course/course-overview.html" style="background-image: url(../assets/img/400x500/img14.jpg); min-height: 15rem;">
|
||
<div class="card-body">
|
||
<span class="card-subtitle text-white-70">New</span>
|
||
<h4 class="card-title text-white">Cloud computing</h4>
|
||
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link text-white">Read now</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Slide -->
|
||
|
||
<!-- Slide -->
|
||
<div class="swiper-slide pt-2">
|
||
<!-- Card -->
|
||
<a class="card card-sm card-stretched-vertical card-transition bg-img-start" href="../demo-course/course-overview.html" style="background-image: url(../assets/img/400x500/img13.jpg); min-height: 15rem;">
|
||
<div class="card-body">
|
||
<span class="card-subtitle text-white-70">Phython</span>
|
||
<h4 class="card-title text-white">What's new in Phython 3.7.2</h4>
|
||
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link text-white">Read now</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Slide -->
|
||
|
||
<!-- Slide -->
|
||
<div class="swiper-slide pt-2">
|
||
<!-- Card -->
|
||
<a class="card card-sm card-stretched-vertical card-transition bg-img-start" href="../demo-course/course-overview.html" style="background-image: url(../assets/img/400x500/img15.jpg); min-height: 15rem;">
|
||
<div class="card-body">
|
||
<span class="card-subtitle text-white-70">Tooling</span>
|
||
<h4 class="card-title text-white">Build a staging server</h4>
|
||
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link text-white">Read now</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Slide -->
|
||
|
||
<!-- Slide -->
|
||
<div class="swiper-slide pt-2">
|
||
<!-- Card -->
|
||
<a class="card card-sm card-stretched-vertical card-transition bg-img-start" href="../demo-course/course-overview.html" style="background-image: url(../assets/img/400x500/img16.jpg); min-height: 15rem;">
|
||
<div class="card-body">
|
||
<span class="card-subtitle text-white-70">JavaScript</span>
|
||
<h4 class="card-title text-white">Laravel, Vue and SPAs</h4>
|
||
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link text-white">Read now</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Slide -->
|
||
|
||
<!-- Slide -->
|
||
<div class="swiper-slide pt-2">
|
||
<!-- Card -->
|
||
<a class="card card-sm card-stretched-vertical card-transition bg-img-start" href="../demo-course/course-overview.html" style="background-image: url(../assets/img/400x500/img17.jpg); min-height: 15rem;">
|
||
<div class="card-body">
|
||
<span class="card-subtitle text-white-70">Popular</span>
|
||
<h4 class="card-title text-white">Artificial Intelligence</h4>
|
||
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link text-white">Read now</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Slide -->
|
||
|
||
<!-- Slide -->
|
||
<div class="swiper-slide pt-2">
|
||
<!-- Card -->
|
||
<a class="card card-sm card-stretched-vertical card-transition bg-img-start" href="../demo-course/course-overview.html" style="background-image: url(../assets/img/400x500/img18.jpg); min-height: 15rem;">
|
||
<div class="card-body">
|
||
<span class="card-subtitle text-white-70">PHP</span>
|
||
<h4 class="card-title text-white">Programming terms explained</h4>
|
||
|
||
<div class="card-footer pt-0">
|
||
<span class="card-link text-white">Read now</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Slide -->
|
||
</div>
|
||
|
||
<!-- Arrows -->
|
||
<div class="js-swiper-course-hero-button-next swiper-button-next"></div>
|
||
<div class="js-swiper-course-hero-button-prev swiper-button-prev"></div>
|
||
</div>
|
||
</div>
|
||
<!-- End Swiper Slider -->
|
||
</div>
|
||
|
||
<div class="w-100 w-md-65 bg-light position-absolute top-0 end-0 bottom-0 zi-n1"></div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Grid -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-css18" role="tabpanel" aria-labelledby="nav-cssTab18">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<link rel="stylesheet" href="../node_modules/swiper/swiper-bundle.min.css">
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-js18" role="tabpanel" aria-labelledby="nav-jsTab18">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- JS Implementing Plugins -->
|
||
<script src="../node_modules/swiper/swiper-bundle.min.js"></script>
|
||
|
||
<!-- JS Plugins Init. -->
|
||
<script>
|
||
(function() {
|
||
// INITIALIZATION OF SWIPER
|
||
// =======================================================
|
||
var swiper = new Swiper('.js-swiper-course-hero',{
|
||
preloaderClass: 'custom-swiper-lazy-preloader',
|
||
navigation: {
|
||
nextEl: '.js-swiper-course-hero-button-next',
|
||
prevEl: '.js-swiper-course-hero-button-prev',
|
||
},
|
||
slidesPerView: 1,
|
||
loop: 1,
|
||
breakpoints: {
|
||
380: {
|
||
slidesPerView: 2,
|
||
spaceBetween: 15,
|
||
},
|
||
580: {
|
||
slidesPerView: 3,
|
||
spaceBetween: 15,
|
||
},
|
||
768: {
|
||
slidesPerView: 4,
|
||
spaceBetween: 15,
|
||
},
|
||
1024: {
|
||
slidesPerView: 6,
|
||
spaceBetween: 15,
|
||
},
|
||
},
|
||
on: {
|
||
'imagesReady': function (swiper) {
|
||
const preloader = swiper.el.querySelector('.js-swiper-course-hero-preloader')
|
||
preloader.parentNode.removeChild(preloader)
|
||
}
|
||
}
|
||
});
|
||
})()
|
||
</script>
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-19" class="hs-docs-heading">
|
||
Component #19 <a class="anchorjs-link" href="#component-19" 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="navTab19" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab19" href="#nav-result19" data-bs-toggle="pill" data-bs-target="#nav-result19" role="tab" aria-controls="nav-result19" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab19" href="#nav-html19" data-bs-toggle="pill" data-bs-target="#nav-html19" role="tab" aria-controls="nav-html19" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent19">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result19" role="tabpanel" aria-labelledby="nav-resultTab19">
|
||
<!-- Card Grid -->
|
||
<div class="container">
|
||
<!-- Title -->
|
||
<div class="w-md-75 text-center mx-md-auto mb-9">
|
||
<h2>Featured courses</h2>
|
||
<p>Discover your perfect program in our courses.</p>
|
||
</div>
|
||
<!-- End Title -->
|
||
|
||
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 mb-5">
|
||
<div class="col mb-5">
|
||
<!-- Card -->
|
||
<div class="card card-bordered h-100">
|
||
<!-- Card Pinned -->
|
||
<div class="card-pinned">
|
||
<img class="card-img-top" src="../assets/svg/components/card-12.svg" alt="Image Description">
|
||
|
||
<div class="card-pinned-top-start">
|
||
<small class="badge bg-success rounded-pill">Bestseller</small>
|
||
</div>
|
||
|
||
<div class="card-pinned-bottom-start">
|
||
<div class="d-flex align-items-center flex-wrap">
|
||
<!-- Rating -->
|
||
<div class="d-flex gap-1">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
</div>
|
||
<!-- End Rating -->
|
||
<div class="ms-1">
|
||
<span class="fw-semi-bold text-white me-1">4.91</span>
|
||
<span class="text-white-70">(1.5k+ reviews)</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Pinned -->
|
||
|
||
<!-- Card Body -->
|
||
<div class="card-body">
|
||
<small class="card-subtitle">Code</small>
|
||
|
||
<div class="mb-3">
|
||
<h3 class="card-title">
|
||
<a class="text-dark" href="../demo-course/course-overview.html">Complete Python Bootcamp: Go from zero to hero in Python</a>
|
||
</h3>
|
||
</div>
|
||
|
||
<div class="row align-items-center">
|
||
<div class="col">
|
||
<div class="avatar-group avatar-group-xs">
|
||
<a class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="Nataly Gaga" href="#">
|
||
<img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="Image Description">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-auto">
|
||
<ul class="list-inline list-separator small ms-auto">
|
||
<li class="list-inline-item">
|
||
<i class="bi-book me-1"></i> 10 lessons
|
||
</li>
|
||
<li class="list-inline-item">
|
||
<i class="bi-clock me-1"></i> 3h 25m
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Card Body -->
|
||
|
||
<!-- Card Footer -->
|
||
<div class="card-footer pt-0">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<div class="me-2">
|
||
<span class="d-block text-muted small"><del>$114.99</del></span>
|
||
<h5 class="card-title">$99.99</h5>
|
||
</div>
|
||
<a class="btn btn-primary btn-sm btn-transition" href="../demo-course/course-overview.html">Preview</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Footer -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col mb-5">
|
||
<!-- Card -->
|
||
<div class="card card-bordered h-100">
|
||
<!-- Card Pinned -->
|
||
<div class="card-pinned">
|
||
<img class="card-img-top" src="../assets/svg/components/card-13.svg" alt="Image Description">
|
||
|
||
<div class="card-pinned-bottom-start">
|
||
<div class="d-flex align-items-center flex-wrap">
|
||
<!-- Rating -->
|
||
<div class="d-flex gap-1">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
</div>
|
||
<!-- End Rating -->
|
||
<div class="ms-1">
|
||
<span class="fw-semi-bold text-white me-1">4.95</span>
|
||
<span class="text-white-70">(1k+ reviews)</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Pinned -->
|
||
|
||
<!-- Card Body -->
|
||
<div class="card-body">
|
||
<small class="card-subtitle">Design & Illustration</small>
|
||
|
||
<div class="mb-3">
|
||
<h3 class="card-title">
|
||
<a class="text-dark" href="../demo-course/course-overview.html">From the Top: Adobe Illustrator for Beginners</a>
|
||
</h3>
|
||
</div>
|
||
|
||
<div class="row align-items-center">
|
||
<div class="col">
|
||
<div class="avatar-group avatar-group-xs">
|
||
<a class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="Emily Milda" href="#">
|
||
<img class="avatar-img" src="../assets/img/160x160/img8.jpg" alt="Image Description">
|
||
</a>
|
||
<a class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="John O'nolan" href="#">
|
||
<img class="avatar-img" src="../assets/img/160x160/img4.jpg" alt="Image Description">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-auto">
|
||
<ul class="list-inline list-separator small ms-auto">
|
||
<li class="list-inline-item">
|
||
<i class="bi-book me-1"></i> 8 lessons
|
||
</li>
|
||
<li class="list-inline-item">
|
||
<i class="bi-clock me-1"></i> 7h 59m
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Card Body -->
|
||
|
||
<!-- Card Footer -->
|
||
<div class="card-footer pt-0">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<div class="me-2">
|
||
<span class="d-block text-muted small"><del>$129.99</del></span>
|
||
<h5 class="card-title">$119.99</h5>
|
||
</div>
|
||
<a class="btn btn-primary btn-sm btn-transition" href="../demo-course/course-overview.html">Preview</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Footer -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col mb-5">
|
||
<!-- Card -->
|
||
<div class="card card-bordered h-100">
|
||
<!-- Card Pinned -->
|
||
<div class="card-pinned">
|
||
<img class="card-img-top" src="../assets/svg/components/card-6.svg" alt="Image Description">
|
||
|
||
<div class="card-pinned-top-start">
|
||
<small class="badge bg-success rounded-pill">Featured</small>
|
||
</div>
|
||
|
||
<div class="card-pinned-bottom-start">
|
||
<div class="d-flex align-items-center flex-wrap">
|
||
<!-- Rating -->
|
||
<div class="d-flex gap-1">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star-half.svg" alt="Review rating" width="16">
|
||
</div>
|
||
<!-- End Rating -->
|
||
<div class="ms-1">
|
||
<span class="fw-semi-bold text-white me-1">4.73</span>
|
||
<span class="text-white-70">(4.7k+ reviews)</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Pinned -->
|
||
|
||
<!-- Card Body -->
|
||
<div class="card-body">
|
||
<small class="card-subtitle">Code</small>
|
||
|
||
<div class="mb-3">
|
||
<h3 class="card-title">
|
||
<a class="text-dark" href="../demo-course/course-overview.html">Get started with Vue.js</a>
|
||
</h3>
|
||
</div>
|
||
|
||
<div class="row align-items-center">
|
||
<div class="col">
|
||
<div class="avatar-group avatar-group-xs">
|
||
<a class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="Aaron Larsson" href="#">
|
||
<img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="Image Description">
|
||
</a>
|
||
<a class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="Hanna Wolfe" href="#">
|
||
<img class="avatar-img" src="../assets/img/160x160/img7.jpg" alt="Image Description">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-auto">
|
||
<ul class="list-inline list-separator small ms-auto">
|
||
<li class="list-inline-item">
|
||
<i class="bi-book me-1"></i> 25 lessons
|
||
</li>
|
||
<li class="list-inline-item">
|
||
<i class="bi-clock me-1"></i> 17h 46m
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Card Body -->
|
||
|
||
<!-- Card Footer -->
|
||
<div class="card-footer pt-0">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<div class="me-2">
|
||
<span class="d-block text-muted small"><del>$169.99</del></span>
|
||
<h5 class="card-title">$129.99</h5>
|
||
</div>
|
||
<a class="btn btn-primary btn-sm btn-transition" href="../demo-course/course-overview.html">Preview</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Footer -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col mb-5">
|
||
<!-- Card -->
|
||
<div class="card card-bordered h-100">
|
||
<!-- Card Pinned -->
|
||
<div class="card-pinned">
|
||
<img class="card-img-top" src="../assets/svg/components/card-15.svg" alt="Image Description">
|
||
|
||
<div class="card-pinned-bottom-start">
|
||
<div class="d-flex align-items-center flex-wrap">
|
||
<!-- Rating -->
|
||
<div class="d-flex gap-1">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
||
</div>
|
||
<!-- End Rating -->
|
||
<div class="ms-1">
|
||
<span class="fw-semi-bold text-white me-1">4.47</span>
|
||
<span class="text-white-70">(3.8k+ reviews)</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Pinned -->
|
||
|
||
<!-- Card Body -->
|
||
<div class="card-body">
|
||
<small class="card-subtitle">Code</small>
|
||
|
||
<div class="mb-3">
|
||
<h3 class="card-title">
|
||
<a class="text-dark" href="../demo-course/course-overview.html">The Ultimate MySQL Bootcamp: Go from SQL Beginner to Expert</a>
|
||
</h3>
|
||
</div>
|
||
|
||
<div class="row align-items-center">
|
||
<div class="col">
|
||
<div class="avatar-group avatar-group-xs">
|
||
<a class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="Hanna Wolfe" href="#">
|
||
<img class="avatar-img" src="../assets/img/160x160/img7.jpg" alt="Image Description">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-auto">
|
||
<ul class="list-inline list-separator small ms-auto">
|
||
<li class="list-inline-item">
|
||
<i class="bi-book me-1"></i> 42 lessons
|
||
</li>
|
||
<li class="list-inline-item">
|
||
<i class="bi-clock me-1"></i> 31h 5m
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Card Body -->
|
||
|
||
<!-- Card Footer -->
|
||
<div class="card-footer pt-0">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<div class="me-2">
|
||
<span class="d-block text-muted small"><del>$159.99</del></span>
|
||
<h5 class="card-title">$111.99</h5>
|
||
</div>
|
||
<a class="btn btn-primary btn-sm btn-transition" href="../demo-course/course-overview.html">Preview</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Footer -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col mb-5">
|
||
<!-- Card -->
|
||
<div class="card card-bordered h-100">
|
||
<!-- Card Pinned -->
|
||
<div class="card-pinned">
|
||
<img class="card-img-top" src="../assets/svg/components/card-4.svg" alt="Image Description">
|
||
|
||
<div class="card-pinned-bottom-start">
|
||
<div class="d-flex align-items-center flex-wrap">
|
||
<!-- Rating -->
|
||
<div class="d-flex gap-1">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star-half.svg" alt="Review rating" width="16">
|
||
</div>
|
||
<!-- End Rating -->
|
||
<div class="ms-1">
|
||
<span class="fw-semi-bold text-white me-1">4.64</span>
|
||
<span class="text-white-70">(723 reviews)</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Pinned -->
|
||
|
||
<!-- Card Body -->
|
||
<div class="card-body">
|
||
<small class="card-subtitle">Code</small>
|
||
|
||
<div class="mb-3">
|
||
<h3 class="card-title">
|
||
<a class="text-dark" href="../demo-course/course-overview.html">Coding block for WordPress</a>
|
||
</h3>
|
||
</div>
|
||
|
||
<div class="row align-items-center">
|
||
<div class="col">
|
||
<div class="avatar-group avatar-group-xs">
|
||
<a class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="Hanna Wolfe" href="#">
|
||
<img class="avatar-img" src="../assets/img/160x160/img7.jpg" alt="Image Description">
|
||
</a>
|
||
<div class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="John O'nolan">
|
||
<img class="avatar-img" src="../assets/img/160x160/img4.jpg" alt="Image Description">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-auto">
|
||
<ul class="list-inline list-separator small ms-auto">
|
||
<li class="list-inline-item">
|
||
<i class="bi-book me-1"></i> 5 lessons
|
||
</li>
|
||
<li class="list-inline-item">
|
||
<i class="bi-clock me-1"></i> 8h 12m
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Card Body -->
|
||
|
||
<!-- Card Footer -->
|
||
<div class="card-footer pt-0">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<div class="me-2">
|
||
<span class="d-block text-muted small"><del>$64.99</del></span>
|
||
<h5 class="card-title">$29.99</h5>
|
||
</div>
|
||
<a class="btn btn-primary btn-sm btn-transition" href="../demo-course/course-overview.html">Preview</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Footer -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col mb-5">
|
||
<!-- Card -->
|
||
<div class="card card-bordered h-100">
|
||
<!-- Card Pinned -->
|
||
<div class="card-pinned">
|
||
<img class="card-img-top" src="../assets/svg/components/card-14.svg" alt="Image Description">
|
||
|
||
<div class="card-pinned-top-start">
|
||
<small class="badge bg-success rounded-pill">Hot</small>
|
||
</div>
|
||
|
||
<div class="card-pinned-bottom-start">
|
||
<div class="d-flex align-items-center flex-wrap">
|
||
<!-- Rating -->
|
||
<div class="d-flex gap-1">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
</div>
|
||
<!-- End Rating -->
|
||
<div class="ms-1">
|
||
<span class="fw-semi-bold text-white me-1">4.9</span>
|
||
<span class="text-white-70">(961 reviews)</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Pinned -->
|
||
|
||
<!-- Card Body -->
|
||
<div class="card-body">
|
||
<small class="card-subtitle">Design & Illustration</small>
|
||
|
||
<div class="mb-3">
|
||
<h3 class="card-title">
|
||
<a class="text-dark" href="../demo-course/course-overview.html">Creative Magazine Layout Design</a>
|
||
</h3>
|
||
</div>
|
||
|
||
<div class="row align-items-center">
|
||
<div class="col">
|
||
<div class="avatar-group avatar-group-xs">
|
||
<a class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="Hanna Wolfe" href="#">
|
||
<img class="avatar-img" src="../assets/img/160x160/img7.jpg" alt="Image Description">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-auto">
|
||
<ul class="list-inline list-separator small ms-auto">
|
||
<li class="list-inline-item">
|
||
<i class="bi-book me-1"></i> 35 lessons
|
||
</li>
|
||
<li class="list-inline-item">
|
||
<i class="bi-clock me-1"></i> 21h
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Card Body -->
|
||
|
||
<!-- Card Footer -->
|
||
<div class="card-footer pt-0">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<div class="me-2">
|
||
<span class="d-block text-muted small"><del>$179.99</del></span>
|
||
<h5 class="card-title">$129.99</h5>
|
||
</div>
|
||
<a class="btn btn-primary btn-sm btn-transition" href="../demo-course/course-overview.html">Preview</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Footer -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
|
||
<div class="text-center">
|
||
<a class="btn btn-link" href="../demo-course/courses.html">See all courses <i class="bi-chevron-right small ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Grid -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html19" role="tabpanel" aria-labelledby="nav-htmlTab19">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card Grid -->
|
||
<div class="container content-space-sm-2">
|
||
<!-- Title -->
|
||
<div class="w-md-75 text-center mx-md-auto mb-9">
|
||
<h2>Featured courses</h2>
|
||
<p>Discover your perfect program in our courses.</p>
|
||
</div>
|
||
<!-- End Title -->
|
||
|
||
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 mb-5">
|
||
<div class="col mb-5">
|
||
<!-- Card -->
|
||
<div class="card card-bordered h-100">
|
||
<!-- Card Pinned -->
|
||
<div class="card-pinned">
|
||
<img class="card-img-top" src="../assets/svg/components/card-12.svg" alt="Image Description">
|
||
|
||
<div class="card-pinned-top-start">
|
||
<small class="badge bg-success rounded-pill">Bestseller</small>
|
||
</div>
|
||
|
||
<div class="card-pinned-bottom-start">
|
||
<div class="d-flex align-items-center flex-wrap">
|
||
<!-- Rating -->
|
||
<div class="d-flex gap-1">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
</div>
|
||
<!-- End Rating -->
|
||
<div class="ms-1">
|
||
<span class="fw-semi-bold text-white me-1">4.91</span>
|
||
<span class="text-white-70">(1.5k+ reviews)</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Pinned -->
|
||
|
||
<!-- Card Body -->
|
||
<div class="card-body">
|
||
<small class="card-subtitle">Code</small>
|
||
|
||
<div class="mb-3">
|
||
<h3 class="card-title">
|
||
<a class="text-dark" href="../demo-course/course-overview.html">Complete Python Bootcamp: Go from zero to hero in Python</a>
|
||
</h3>
|
||
</div>
|
||
|
||
<div class="row align-items-center">
|
||
<div class="col">
|
||
<div class="avatar-group avatar-group-xs">
|
||
<a class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="Nataly Gaga" href="#">
|
||
<img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="Image Description">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-auto">
|
||
<ul class="list-inline list-separator small ms-auto">
|
||
<li class="list-inline-item">
|
||
<i class="bi-book me-1"></i> 10 lessons
|
||
</li>
|
||
<li class="list-inline-item">
|
||
<i class="bi-clock me-1"></i> 3h 25m
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Card Body -->
|
||
|
||
<!-- Card Footer -->
|
||
<div class="card-footer pt-0">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<div class="me-2">
|
||
<span class="d-block text-muted small"><del>$114.99</del></span>
|
||
<h5 class="card-title">$99.99</h5>
|
||
</div>
|
||
<a class="btn btn-primary btn-sm btn-transition" href="../demo-course/course-overview.html">Preview</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Footer -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col mb-5">
|
||
<!-- Card -->
|
||
<div class="card card-bordered h-100">
|
||
<!-- Card Pinned -->
|
||
<div class="card-pinned">
|
||
<img class="card-img-top" src="../assets/svg/components/card-13.svg" alt="Image Description">
|
||
|
||
<div class="card-pinned-bottom-start">
|
||
<div class="d-flex align-items-center flex-wrap">
|
||
<!-- Rating -->
|
||
<div class="d-flex gap-1">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
</div>
|
||
<!-- End Rating -->
|
||
<div class="ms-1">
|
||
<span class="fw-semi-bold text-white me-1">4.95</span>
|
||
<span class="text-white-70">(1k+ reviews)</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Pinned -->
|
||
|
||
<!-- Card Body -->
|
||
<div class="card-body">
|
||
<small class="card-subtitle">Design & Illustration</small>
|
||
|
||
<div class="mb-3">
|
||
<h3 class="card-title">
|
||
<a class="text-dark" href="../demo-course/course-overview.html">From the Top: Adobe Illustrator for Beginners</a>
|
||
</h3>
|
||
</div>
|
||
|
||
<div class="row align-items-center">
|
||
<div class="col">
|
||
<div class="avatar-group avatar-group-xs">
|
||
<a class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="Emily Milda" href="#">
|
||
<img class="avatar-img" src="../assets/img/160x160/img8.jpg" alt="Image Description">
|
||
</a>
|
||
<a class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="John O'nolan" href="#">
|
||
<img class="avatar-img" src="../assets/img/160x160/img4.jpg" alt="Image Description">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-auto">
|
||
<ul class="list-inline list-separator small ms-auto">
|
||
<li class="list-inline-item">
|
||
<i class="bi-book me-1"></i> 8 lessons
|
||
</li>
|
||
<li class="list-inline-item">
|
||
<i class="bi-clock me-1"></i> 7h 59m
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Card Body -->
|
||
|
||
<!-- Card Footer -->
|
||
<div class="card-footer pt-0">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<div class="me-2">
|
||
<span class="d-block text-muted small"><del>$129.99</del></span>
|
||
<h5 class="card-title">$119.99</h5>
|
||
</div>
|
||
<a class="btn btn-primary btn-sm btn-transition" href="../demo-course/course-overview.html">Preview</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Footer -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col mb-5">
|
||
<!-- Card -->
|
||
<div class="card card-bordered h-100">
|
||
<!-- Card Pinned -->
|
||
<div class="card-pinned">
|
||
<img class="card-img-top" src="../assets/svg/components/card-6.svg" alt="Image Description">
|
||
|
||
<div class="card-pinned-top-start">
|
||
<small class="badge bg-success rounded-pill">Featured</small>
|
||
</div>
|
||
|
||
<div class="card-pinned-bottom-start">
|
||
<div class="d-flex align-items-center flex-wrap">
|
||
<!-- Rating -->
|
||
<div class="d-flex gap-1">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star-half.svg" alt="Review rating" width="16">
|
||
</div>
|
||
<!-- End Rating -->
|
||
<div class="ms-1">
|
||
<span class="fw-semi-bold text-white me-1">4.73</span>
|
||
<span class="text-white-70">(4.7k+ reviews)</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Pinned -->
|
||
|
||
<!-- Card Body -->
|
||
<div class="card-body">
|
||
<small class="card-subtitle">Code</small>
|
||
|
||
<div class="mb-3">
|
||
<h3 class="card-title">
|
||
<a class="text-dark" href="../demo-course/course-overview.html">Get started with Vue.js</a>
|
||
</h3>
|
||
</div>
|
||
|
||
<div class="row align-items-center">
|
||
<div class="col">
|
||
<div class="avatar-group avatar-group-xs">
|
||
<a class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="Aaron Larsson" href="#">
|
||
<img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="Image Description">
|
||
</a>
|
||
<a class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="Hanna Wolfe" href="#">
|
||
<img class="avatar-img" src="../assets/img/160x160/img7.jpg" alt="Image Description">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-auto">
|
||
<ul class="list-inline list-separator small ms-auto">
|
||
<li class="list-inline-item">
|
||
<i class="bi-book me-1"></i> 25 lessons
|
||
</li>
|
||
<li class="list-inline-item">
|
||
<i class="bi-clock me-1"></i> 17h 46m
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Card Body -->
|
||
|
||
<!-- Card Footer -->
|
||
<div class="card-footer pt-0">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<div class="me-2">
|
||
<span class="d-block text-muted small"><del>$169.99</del></span>
|
||
<h5 class="card-title">$129.99</h5>
|
||
</div>
|
||
<a class="btn btn-primary btn-sm btn-transition" href="../demo-course/course-overview.html">Preview</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Footer -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col mb-5">
|
||
<!-- Card -->
|
||
<div class="card card-bordered h-100">
|
||
<!-- Card Pinned -->
|
||
<div class="card-pinned">
|
||
<img class="card-img-top" src="../assets/svg/components/card-15.svg" alt="Image Description">
|
||
|
||
<div class="card-pinned-bottom-start">
|
||
<div class="d-flex align-items-center flex-wrap">
|
||
<!-- Rating -->
|
||
<div class="d-flex gap-1">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
||
</div>
|
||
<!-- End Rating -->
|
||
<div class="ms-1">
|
||
<span class="fw-semi-bold text-white me-1">4.47</span>
|
||
<span class="text-white-70">(3.8k+ reviews)</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Pinned -->
|
||
|
||
<!-- Card Body -->
|
||
<div class="card-body">
|
||
<small class="card-subtitle">Code</small>
|
||
|
||
<div class="mb-3">
|
||
<h3 class="card-title">
|
||
<a class="text-dark" href="../demo-course/course-overview.html">The Ultimate MySQL Bootcamp: Go from SQL Beginner to Expert</a>
|
||
</h3>
|
||
</div>
|
||
|
||
<div class="row align-items-center">
|
||
<div class="col">
|
||
<div class="avatar-group avatar-group-xs">
|
||
<a class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="Hanna Wolfe" href="#">
|
||
<img class="avatar-img" src="../assets/img/160x160/img7.jpg" alt="Image Description">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-auto">
|
||
<ul class="list-inline list-separator small ms-auto">
|
||
<li class="list-inline-item">
|
||
<i class="bi-book me-1"></i> 42 lessons
|
||
</li>
|
||
<li class="list-inline-item">
|
||
<i class="bi-clock me-1"></i> 31h 5m
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Card Body -->
|
||
|
||
<!-- Card Footer -->
|
||
<div class="card-footer pt-0">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<div class="me-2">
|
||
<span class="d-block text-muted small"><del>$159.99</del></span>
|
||
<h5 class="card-title">$111.99</h5>
|
||
</div>
|
||
<a class="btn btn-primary btn-sm btn-transition" href="../demo-course/course-overview.html">Preview</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Footer -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col mb-5">
|
||
<!-- Card -->
|
||
<div class="card card-bordered h-100">
|
||
<!-- Card Pinned -->
|
||
<div class="card-pinned">
|
||
<img class="card-img-top" src="../assets/svg/components/card-4.svg" alt="Image Description">
|
||
|
||
<div class="card-pinned-bottom-start">
|
||
<div class="d-flex align-items-center flex-wrap">
|
||
<!-- Rating -->
|
||
<div class="d-flex gap-1">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star-half.svg" alt="Review rating" width="16">
|
||
</div>
|
||
<!-- End Rating -->
|
||
<div class="ms-1">
|
||
<span class="fw-semi-bold text-white me-1">4.64</span>
|
||
<span class="text-white-70">(723 reviews)</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Pinned -->
|
||
|
||
<!-- Card Body -->
|
||
<div class="card-body">
|
||
<small class="card-subtitle">Code</small>
|
||
|
||
<div class="mb-3">
|
||
<h3 class="card-title">
|
||
<a class="text-dark" href="../demo-course/course-overview.html">Coding block for WordPress</a>
|
||
</h3>
|
||
</div>
|
||
|
||
<div class="row align-items-center">
|
||
<div class="col">
|
||
<div class="avatar-group avatar-group-xs">
|
||
<a class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="Hanna Wolfe" href="#">
|
||
<img class="avatar-img" src="../assets/img/160x160/img7.jpg" alt="Image Description">
|
||
</a>
|
||
<div class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="John O'nolan">
|
||
<img class="avatar-img" src="../assets/img/160x160/img4.jpg" alt="Image Description">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-auto">
|
||
<ul class="list-inline list-separator small ms-auto">
|
||
<li class="list-inline-item">
|
||
<i class="bi-book me-1"></i> 5 lessons
|
||
</li>
|
||
<li class="list-inline-item">
|
||
<i class="bi-clock me-1"></i> 8h 12m
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Card Body -->
|
||
|
||
<!-- Card Footer -->
|
||
<div class="card-footer pt-0">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<div class="me-2">
|
||
<span class="d-block text-muted small"><del>$64.99</del></span>
|
||
<h5 class="card-title">$29.99</h5>
|
||
</div>
|
||
<a class="btn btn-primary btn-sm btn-transition" href="../demo-course/course-overview.html">Preview</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Footer -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col mb-5">
|
||
<!-- Card -->
|
||
<div class="card card-bordered h-100">
|
||
<!-- Card Pinned -->
|
||
<div class="card-pinned">
|
||
<img class="card-img-top" src="../assets/svg/components/card-14.svg" alt="Image Description">
|
||
|
||
<div class="card-pinned-top-start">
|
||
<small class="badge bg-success rounded-pill">Hot</small>
|
||
</div>
|
||
|
||
<div class="card-pinned-bottom-start">
|
||
<div class="d-flex align-items-center flex-wrap">
|
||
<!-- Rating -->
|
||
<div class="d-flex gap-1">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
||
</div>
|
||
<!-- End Rating -->
|
||
<div class="ms-1">
|
||
<span class="fw-semi-bold text-white me-1">4.9</span>
|
||
<span class="text-white-70">(961 reviews)</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Pinned -->
|
||
|
||
<!-- Card Body -->
|
||
<div class="card-body">
|
||
<small class="card-subtitle">Design & Illustration</small>
|
||
|
||
<div class="mb-3">
|
||
<h3 class="card-title">
|
||
<a class="text-dark" href="../demo-course/course-overview.html">Creative Magazine Layout Design</a>
|
||
</h3>
|
||
</div>
|
||
|
||
<div class="row align-items-center">
|
||
<div class="col">
|
||
<div class="avatar-group avatar-group-xs">
|
||
<a class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="Hanna Wolfe" href="#">
|
||
<img class="avatar-img" src="../assets/img/160x160/img7.jpg" alt="Image Description">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-auto">
|
||
<ul class="list-inline list-separator small ms-auto">
|
||
<li class="list-inline-item">
|
||
<i class="bi-book me-1"></i> 35 lessons
|
||
</li>
|
||
<li class="list-inline-item">
|
||
<i class="bi-clock me-1"></i> 21h
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Card Body -->
|
||
|
||
<!-- Card Footer -->
|
||
<div class="card-footer pt-0">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<div class="me-2">
|
||
<span class="d-block text-muted small"><del>$179.99</del></span>
|
||
<h5 class="card-title">$129.99</h5>
|
||
</div>
|
||
<a class="btn btn-primary btn-sm btn-transition" href="../demo-course/course-overview.html">Preview</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Footer -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
|
||
<div class="text-center">
|
||
<a class="btn btn-link" href="../demo-course/courses.html">See all courses <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-20" class="hs-docs-heading">
|
||
Component #20 <a class="anchorjs-link" href="#component-20" 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="navTab20" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab20" href="#nav-result20" data-bs-toggle="pill" data-bs-target="#nav-result20" role="tab" aria-controls="nav-result20" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab20" href="#nav-html20" data-bs-toggle="pill" data-bs-target="#nav-html20" role="tab" aria-controls="nav-html20" aria-selected="false">HTML</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-jsTab20" href="#nav-js20" data-bs-toggle="pill" data-bs-target="#nav-js20" role="tab" aria-controls="nav-js20" aria-selected="false">JS</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent20">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result20" role="tabpanel" aria-labelledby="nav-resultTab20">
|
||
<!-- Card Grid -->
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-6 mb-4 mb-md-0">
|
||
<!-- Card -->
|
||
<div class="card card-lg bg-img-start" style="background-image: url(../assets/img/900x900/img3.jpg); min-height: 30rem;">
|
||
<div class="card-body">
|
||
<span class="card-subtitle text-danger">Limited time only</span>
|
||
<h2 class="card-title display-4">70% OFF</h2>
|
||
|
||
<div class="w-md-65">
|
||
<!-- Countdown -->
|
||
<div class="js-countdown row mb-5">
|
||
<div class="col-4 text-center">
|
||
<div class="border border-dark rounded-2 p-2 mb-1">
|
||
<span class="js-cd-days h2"></span>
|
||
</div>
|
||
|
||
<h5 class="card-title">Days</h5>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-4 text-center">
|
||
<div class="border border-dark rounded-2 p-2 mb-1">
|
||
<span class="js-cd-hours h2"></span>
|
||
</div>
|
||
|
||
<h5 class="card-title">Hours</h5>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-4 text-center">
|
||
<div class="border border-dark rounded-2 p-2 mb-1">
|
||
<span class="js-cd-minutes h2"></span>
|
||
</div>
|
||
|
||
<h5 class="card-title">Mins</h5>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-4 d-none text-center">
|
||
<div class="border border-dark rounded-2 p-2 mb-1">
|
||
<span class="js-cd-seconds h2"></span>
|
||
</div>
|
||
|
||
<h5 class="card-title">Sec</h5>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
|
||
<a class="btn btn-light btn-sm btn-transition rounded-pill px-6" href="#">Shop</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<!-- Card -->
|
||
<div class="card card-lg bg-img-start" style="background-image: url(../assets/img/900x900/img4.jpg); min-height: 30rem;">
|
||
<div class="card-body">
|
||
<div class="mb-4">
|
||
<h2 class="card-title text-white">$109.99</h2>
|
||
<h3 class="card-title text-white">Nakto 26 Bicycle</h3>
|
||
<p class="card-text text-white">NAKTO bicycles to save the environment and bring fun to our friends!</p>
|
||
</div>
|
||
|
||
<a class="btn btn-light btn-sm btn-transition rounded-pill px-6" href="#">Shop</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Grid -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html20" role="tabpanel" aria-labelledby="nav-htmlTab20">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- Card Grid -->
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-6 mb-4 mb-md-0">
|
||
<!-- Card -->
|
||
<div class="card card-lg bg-img-start" style="background-image: url(../assets/img/900x900/img3.jpg); min-height: 30rem;">
|
||
<div class="card-body">
|
||
<span class="card-subtitle text-danger">Limited time only</span>
|
||
<h2 class="card-title display-4">70% OFF</h2>
|
||
|
||
<div class="w-md-65">
|
||
<!-- Countdown -->
|
||
<div class="js-countdown row mb-5">
|
||
<div class="col-4 text-center">
|
||
<div class="border border-dark rounded-2 p-2 mb-1">
|
||
<span class="js-cd-days h2"></span>
|
||
</div>
|
||
|
||
<h5 class="card-title">Days</h5>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-4 text-center">
|
||
<div class="border border-dark rounded-2 p-2 mb-1">
|
||
<span class="js-cd-hours h2"></span>
|
||
</div>
|
||
|
||
<h5 class="card-title">Hours</h5>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-4 text-center">
|
||
<div class="border border-dark rounded-2 p-2 mb-1">
|
||
<span class="js-cd-minutes h2"></span>
|
||
</div>
|
||
|
||
<h5 class="card-title">Mins</h5>
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-4 d-none text-center">
|
||
<div class="border border-dark rounded-2 p-2 mb-1">
|
||
<span class="js-cd-seconds h2"></span>
|
||
</div>
|
||
|
||
<h5 class="card-title">Sec</h5>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
|
||
<a class="btn btn-light btn-sm btn-transition rounded-pill px-6" href="#">Shop</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<!-- Card -->
|
||
<div class="card card-lg bg-img-start" style="background-image: url(../assets/img/900x900/img4.jpg); min-height: 30rem;">
|
||
<div class="card-body">
|
||
<div class="mb-4">
|
||
<h2 class="card-title text-white">$109.99</h2>
|
||
<h3 class="card-title text-white">Nakto 26 Bicycle</h3>
|
||
<p class="card-text text-white">NAKTO bicycles to save the environment and bring fun to our friends!</p>
|
||
</div>
|
||
|
||
<a class="btn btn-light btn-sm btn-transition rounded-pill px-6" href="#">Shop</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Grid -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-js20" role="tabpanel" aria-labelledby="nav-jsTab20">
|
||
<pre>
|
||
<code class="language-markup" data-lang="html">
|
||
<!-- JS Implementing Plugins -->
|
||
<script src="../node_modules/countdown/countdown.js"></script>
|
||
|
||
<!-- JS Plugins Init. -->
|
||
<script>
|
||
(function() {
|
||
// INITIALIZATION OF COUNTDOWN
|
||
// =======================================================
|
||
const oneYearFromNow = new Date()
|
||
|
||
document.querySelectorAll('.js-countdown').forEach(item => {
|
||
const days = item.querySelector('.js-cd-days'),
|
||
hours = item.querySelector('.js-cd-hours'),
|
||
minutes = item.querySelector('.js-cd-minutes'),
|
||
seconds = item.querySelector('.js-cd-seconds')
|
||
|
||
countdown(oneYearFromNow.setFullYear(
|
||
oneYearFromNow.getFullYear() + 1),
|
||
ts => {
|
||
days.innerHTML = ts.days
|
||
hours.innerHTML = ts.hours
|
||
minutes.innerHTML = ts.minutes
|
||
seconds.innerHTML = ts.seconds
|
||
},
|
||
countdown.DAYS | countdown.HOURS | countdown.MINUTES | countdown.SECONDS
|
||
)
|
||
})
|
||
})()
|
||
</script>
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-21" class="hs-docs-heading">
|
||
Component #21 <a class="anchorjs-link" href="#component-21" 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="navTab21" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab21" href="#nav-result21" data-bs-toggle="pill" data-bs-target="#nav-result21" role="tab" aria-controls="nav-result21" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab21" href="#nav-html21" data-bs-toggle="pill" data-bs-target="#nav-html21" role="tab" aria-controls="nav-html21" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent21">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result21" role="tabpanel" aria-labelledby="nav-resultTab21">
|
||
<!-- 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>Related works</h2>
|
||
</div>
|
||
<!-- End Title -->
|
||
|
||
<div class="row">
|
||
<div class="col-md-6 mb-3 mb-md-0">
|
||
<!-- Card -->
|
||
<a class="card card-transition bg-soft-danger shadow-none h-100" href="#" style="min-height: 25rem;">
|
||
<div class="card-body">
|
||
<span class="card-subtitle text-danger">Case study</span>
|
||
<div class="mb-5">
|
||
<img class="card-img" src="../assets/img/mockups/img6.png" alt="Image Description">
|
||
</div>
|
||
</div>
|
||
<div class="card-footer pt-0">
|
||
<h2 class="card-title">iPad Pro 2018 Mockups</h2>
|
||
<p class="card-link text-danger">View work <i class="bi-chevron-right small ms-1"></i></p>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<!-- Card -->
|
||
<a class="card card-transition bg-img-start shadow-none h-100" href="#" style="background-image: url(../assets/img/900x900/img9.jpg); min-height: 25rem;">
|
||
<div class="card-body">
|
||
<span class="card-subtitle text-white">Case study</span>
|
||
</div>
|
||
<div class="card-footer pt-0">
|
||
<h2 class="card-title text-white">Expand your mind</h2>
|
||
<p class="card-link text-white">View work <i class="bi-chevron-right small ms-1"></i></p>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Grid -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html21" role="tabpanel" aria-labelledby="nav-htmlTab21">
|
||
<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>Related works</h2>
|
||
</div>
|
||
<!-- End Title -->
|
||
|
||
<div class="row">
|
||
<div class="col-md-6 mb-3 mb-md-0">
|
||
<!-- Card -->
|
||
<a class="card card-transition bg-soft-danger shadow-none h-100" href="#" style="min-height: 25rem;">
|
||
<div class="card-body">
|
||
<span class="card-subtitle text-danger">Case study</span>
|
||
<div class="mb-5">
|
||
<img class="card-img" src="../assets/img/mockups/img6.png" alt="Image Description">
|
||
</div>
|
||
</div>
|
||
<div class="card-footer pt-0">
|
||
<h2 class="card-title">iPad Pro 2018 Mockups</h2>
|
||
<p class="card-link text-danger">View work <i class="bi-chevron-right small ms-1"></i></p>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<!-- Card -->
|
||
<a class="card card-transition bg-img-start shadow-none h-100" href="#" style="background-image: url(../assets/img/900x900/img9.jpg); min-height: 25rem;">
|
||
<div class="card-body">
|
||
<span class="card-subtitle text-white">Case study</span>
|
||
</div>
|
||
<div class="card-footer pt-0">
|
||
<h2 class="card-title text-white">Expand your mind</h2>
|
||
<p class="card-link text-white">View work <i class="bi-chevron-right small ms-1"></i></p>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Card Grid -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="component-22" class="hs-docs-heading">
|
||
Component #22 <a class="anchorjs-link" href="#component-22" 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="navTab22" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-resultTab22" href="#nav-result22" data-bs-toggle="pill" data-bs-target="#nav-result22" role="tab" aria-controls="nav-result22" aria-selected="true">Preview</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-htmlTab22" href="#nav-html22" data-bs-toggle="pill" data-bs-target="#nav-html22" role="tab" aria-controls="nav-html22" aria-selected="false">HTML</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent22">
|
||
<div class="tab-pane fade p-4 show active" id="nav-result22" role="tabpanel" aria-labelledby="nav-resultTab22">
|
||
<!-- Card Grid -->
|
||
<div class="container content-space-1">
|
||
<!-- Heading -->
|
||
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
||
<h2>Browse more projects</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row">
|
||
<div class="col-sm-6 mb-3 mb-sm-0">
|
||
<!-- Card -->
|
||
<a class="card card-transition text-center" href="../blog-article.html">
|
||
<img class="card-img-top" src="../assets/img/600x400/img3.jpg" alt="Image Description">
|
||
<div class="card-body">
|
||
<h3 class="card-title">Vanilla</h3>
|
||
<p class="card-text text-body">Development, Marketing</p>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6">
|
||
<!-- Card -->
|
||
<a class="card card-transition text-center" href="../blog-article.html">
|
||
<img class="card-img-top" src="../assets/img/600x400/img2.jpg" alt="Image Description">
|
||
<div class="card-body">
|
||
<h3 class="card-title">Hubble</h3>
|
||
<p class="card-text text-body">Development, Product</p>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Card Grid -->
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-html22" role="tabpanel" aria-labelledby="nav-htmlTab22">
|
||
<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-5 mb-md-9">
|
||
<h2>Browse more projects</h2>
|
||
</div>
|
||
<!-- End Heading -->
|
||
|
||
<div class="row">
|
||
<div class="col-sm-6 mb-3 mb-sm-0">
|
||
<!-- Card -->
|
||
<a class="card card-transition text-center" href="../blog-article.html">
|
||
<img class="card-img-top" src="../assets/img/600x400/img3.jpg" alt="Image Description">
|
||
<div class="card-body">
|
||
<h3 class="card-title">Vanilla</h3>
|
||
<p class="card-text text-body">Development, Marketing</p>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
|
||
<div class="col-sm-6">
|
||
<!-- Card -->
|
||
<a class="card card-transition text-center" href="../blog-article.html">
|
||
<img class="card-img-top" src="../assets/img/600x400/img2.jpg" alt="Image Description">
|
||
<div class="card-body">
|
||
<h3 class="card-title">Hubble</h3>
|
||
<p class="card-text text-body">Development, Product</p>
|
||
</div>
|
||
</a>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</div>
|
||
<!-- End Card Grid -->
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
</div>
|
||
<!-- End Content -->
|
||
</main>
|
||
<!-- ========== END MAIN CONTENT ========== -->
|
||
|
||
<!-- ========== SECONDARY CONTENTS ========== -->
|
||
<!-- Go To -->
|
||
<a class="js-go-to go-to position-fixed" href="javascript:;" style="visibility: hidden;"
|
||
data-hs-go-to-options='{
|
||
"offsetTop": 700,
|
||
"position": {
|
||
"init": {
|
||
"right": "2rem"
|
||
},
|
||
"show": {
|
||
"bottom": "2rem"
|
||
},
|
||
"hide": {
|
||
"bottom": "-2rem"
|
||
}
|
||
}
|
||
}'>
|
||
<i class="bi-chevron-up"></i>
|
||
</a>
|
||
<!-- ========== END SECONDARY CONTENTS ========== -->
|
||
|
||
|
||
<!-- JS Implementing Plugins -->
|
||
<script src="../assets/js/vendor.min.js"></script>
|
||
|
||
<!-- JS Front -->
|
||
<script src="../assets/js/theme.min.js"></script>
|
||
|
||
<!-- JS Plugins Init. -->
|
||
<script>
|
||
(function() {
|
||
// INITIALIZATION OF HEADER
|
||
// =======================================================
|
||
new HSHeader('#header').init()
|
||
|
||
|
||
// INITIALIZATION OF NAV SCROLLER
|
||
// =======================================================
|
||
new HsNavScroller('.js-nav-scroller', {
|
||
delay: 400,
|
||
offset: 140
|
||
})
|
||
|
||
|
||
// INITIALIZATION OF LISTJS COMPONENT
|
||
// =======================================================
|
||
HSCore.components.HSList.init('#snippetsSearch')
|
||
const snippetsSearch = HSCore.components.HSList.getItem('snippetsSearch')
|
||
|
||
|
||
// GET JSON FILE RESULTS
|
||
// =======================================================
|
||
fetch('../assets/json/snippets-search.json')
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
snippetsSearch.add(data)
|
||
})
|
||
|
||
|
||
// INITIALIZATION OF GO TO
|
||
// =======================================================
|
||
new HSGoTo('.js-go-to')
|
||
|
||
|
||
// INITIALIZATION OF SWIPER
|
||
// =======================================================
|
||
var swiper = new Swiper('.js-swiper-card-blocks',{
|
||
slidesPerView: 1,
|
||
pagination: {
|
||
el: '.js-swiper-card-blocks-pagination',
|
||
dynamicBullets: true,
|
||
clickable: true,
|
||
},
|
||
breakpoints: {
|
||
620: {
|
||
slidesPerView: 2,
|
||
spaceBetween: 15,
|
||
},
|
||
1024: {
|
||
slidesPerView: 3,
|
||
spaceBetween: 15,
|
||
},
|
||
},
|
||
});
|
||
|
||
|
||
// 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,
|
||
},
|
||
}
|
||
});
|
||
|
||
|
||
// INITIALIZATION OF SWIPER
|
||
// =======================================================
|
||
var swiper = new Swiper('.js-swiper-course-hero',{
|
||
preloaderClass: 'custom-swiper-lazy-preloader',
|
||
navigation: {
|
||
nextEl: '.js-swiper-course-hero-button-next',
|
||
prevEl: '.js-swiper-course-hero-button-prev',
|
||
},
|
||
slidesPerView: 1,
|
||
loop: 1,
|
||
breakpoints: {
|
||
380: {
|
||
slidesPerView: 2,
|
||
spaceBetween: 15,
|
||
},
|
||
580: {
|
||
slidesPerView: 3,
|
||
spaceBetween: 15,
|
||
},
|
||
768: {
|
||
slidesPerView: 4,
|
||
spaceBetween: 15,
|
||
},
|
||
1024: {
|
||
slidesPerView: 6,
|
||
spaceBetween: 15,
|
||
},
|
||
},
|
||
on: {
|
||
'imagesReady': function (swiper) {
|
||
const preloader = swiper.el.querySelector('.js-swiper-course-hero-preloader')
|
||
preloader.parentNode.removeChild(preloader)
|
||
}
|
||
}
|
||
});
|
||
|
||
|
||
// INITIALIZATION OF COUNTDOWN
|
||
// =======================================================
|
||
const oneYearFromNow = new Date()
|
||
|
||
document.querySelectorAll('.js-countdown').forEach(item => {
|
||
const days = item.querySelector('.js-cd-days'),
|
||
hours = item.querySelector('.js-cd-hours'),
|
||
minutes = item.querySelector('.js-cd-minutes'),
|
||
seconds = item.querySelector('.js-cd-seconds')
|
||
|
||
countdown(oneYearFromNow.setFullYear(
|
||
oneYearFromNow.getFullYear() + 1),
|
||
ts => {
|
||
days.innerHTML = ts.days
|
||
hours.innerHTML = ts.hours
|
||
minutes.innerHTML = ts.minutes
|
||
seconds.innerHTML = ts.seconds
|
||
},
|
||
countdown.DAYS | countdown.HOURS | countdown.MINUTES | countdown.SECONDS
|
||
)
|
||
})
|
||
})()
|
||
</script>
|
||
</body>
|
||
</html>
|