2248 lines
118 KiB
HTML
2248 lines
118 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>E-commerce - Snippets | Front - Multipurpose Responsive Template</title>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="shortcut icon" href="../favicon.ico">
|
|
|
|
<!-- Font -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
|
|
|
<!-- CSS Implementing Plugins -->
|
|
<link rel="stylesheet" href="../assets/vendor/bootstrap-icons/font/bootstrap-icons.css">
|
|
<link rel="stylesheet" href="../assets/vendor/swiper/swiper-bundle.min.css">
|
|
|
|
<!-- CSS Front Template -->
|
|
<link rel="stylesheet" href="../assets/css/theme.min.css">
|
|
<link rel="stylesheet" href="../assets/css/snippets.min.css">
|
|
</head>
|
|
|
|
<body class="navbar-sidebar-aside-lg">
|
|
<!-- ========== HEADER ========== -->
|
|
<header id="header" class="navbar navbar-expand navbar-fixed navbar-end navbar-light navbar-sticky-lg-top bg-white">
|
|
<div class="container-fluid">
|
|
<nav class="navbar-nav-wrap">
|
|
<div class="row flex-grow-1">
|
|
<!-- Default Logo -->
|
|
<div class="docs-navbar-sidebar-container d-flex align-items-center mb-2 mb-lg-0">
|
|
<a class="navbar-brand" href="../snippets/index.html" aria-label="Space">
|
|
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
|
</a>
|
|
<a href="../documentation/changelog.html">
|
|
<span class="badge bg-soft-primary text-primary">v4.1</span>
|
|
</a>
|
|
</div>
|
|
<!-- End Default Logo -->
|
|
|
|
<div class="col-md px-lg-0">
|
|
<div class="d-flex justify-content-between align-items-center px-lg-5 px-xl-10">
|
|
<div class="d-none d-md-block">
|
|
<!-- Search Form -->
|
|
<form id="snippetsSearch" class="position-relative"
|
|
data-hs-list-options='{
|
|
"searchMenu": true,
|
|
"keyboard": true,
|
|
"item": "searchTemplate",
|
|
"valueNames": ["component", "category", {"name": "link", "attr": "href"}],
|
|
"empty": "#searchNoResults"
|
|
}'>
|
|
<!-- Input Group -->
|
|
<div class="input-group input-group-merge navbar-input-group">
|
|
<div class="input-group-prepend input-group-text">
|
|
<i class="bi-search"></i>
|
|
</div>
|
|
|
|
<input type="search" class="search form-control form-control-sm" placeholder="Search in snippets" aria-label="Search in snippets">
|
|
|
|
<a class="input-group-append input-group-text" href="javascript:;">
|
|
<i id="clearSearchResultsIcon" class="bi-x" style="display: none;"></i>
|
|
</a>
|
|
</div>
|
|
<!-- End Input Group -->
|
|
|
|
<!-- List -->
|
|
<div class="list dropdown-menu w-100 overflow-auto" style="max-height: 16rem;"></div>
|
|
<!-- End List -->
|
|
|
|
<!-- Empty -->
|
|
<div id="searchNoResults" style="display: none;">
|
|
<div class="text-center p-4">
|
|
<img class="mb-3" src="../assets/svg/illustrations/oc-error.svg" alt="Image Description" style="width: 10rem;">
|
|
<p class="mb-0">No Results</p>
|
|
</div>
|
|
</div>
|
|
<!-- End Empty -->
|
|
</form>
|
|
<!-- End Search Form -->
|
|
|
|
<!-- List Item Template -->
|
|
<div class="d-none">
|
|
<div id="searchTemplate" class="dropdown-item">
|
|
<a class="d-block link" href="#">
|
|
<span class="category d-block fw-normal text-muted mb-1"></span>
|
|
<span class="component text-dark"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End List Item Template -->
|
|
</div>
|
|
|
|
<!-- Navbar -->
|
|
<ul class="navbar-nav p-0">
|
|
<li class="nav-item">
|
|
<a class="btn btn-ghost-secondary btn-sm" href="https://htmlstream.com/contact-us" target="_blank">
|
|
Get Support <i class="bi-box-arrow-up-right ms-1"></i>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="btn btn-primary btn-sm" href="../index.html">
|
|
<i class="bi-eye me-1"></i> Preview Demo
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Navbar -->
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
<!-- ========== END HEADER ========== -->
|
|
|
|
<!-- ========== MAIN CONTENT ========== -->
|
|
<main id="content" role="main">
|
|
<!-- Navbar -->
|
|
<nav class="js-nav-scroller navbar navbar-expand-lg navbar-sidebar navbar-vertical navbar-light bg-white border-end"
|
|
data-hs-nav-scroller-options='{
|
|
"type": "vertical",
|
|
"target": ".navbar-nav .active",
|
|
"offset": 80
|
|
}'>
|
|
<!-- Navbar Toggle -->
|
|
<button type="button" class="navbar-toggler btn btn-white d-grid w-100" data-bs-toggle="collapse" data-bs-target="#navbarVerticalNavMenu" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarVerticalNavMenu">
|
|
<span class="d-flex justify-content-between align-items-center">
|
|
<span class="h6 mb-0">Nav menu</span>
|
|
|
|
<span class="navbar-toggler-default">
|
|
<i class="bi-list"></i>
|
|
</span>
|
|
|
|
<span class="navbar-toggler-toggled">
|
|
<i class="bi-x"></i>
|
|
</span>
|
|
</span>
|
|
</button>
|
|
<!-- End Navbar Toggle -->
|
|
|
|
<!-- Navbar Collapse -->
|
|
<div id="navbarVerticalNavMenu" class="collapse navbar-collapse">
|
|
<div class="navbar-brand-wrapper border-end" style="height: auto;">
|
|
<!-- Default Logo -->
|
|
<div class="d-flex align-items-center mb-3">
|
|
<a class="navbar-brand" href="../snippets/index.html" aria-label="Space">
|
|
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
|
</a>
|
|
<a class="navbar-brand-badge" href="../documentation/changelog.html">
|
|
<span class="badge bg-soft-primary text-primary ms-2">v4.1</span>
|
|
</a>
|
|
</div>
|
|
<!-- End Default Logo -->
|
|
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment nav-fill nav-justified">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="../documentation/index.html">Docs</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="../snippets/index.html">Snippets</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
|
|
<div class="docs-navbar-sidebar-aside-body navbar-sidebar-aside-body">
|
|
<ul id="navbarSettings" class="navbar-nav nav nav-vertical nav-tabs nav-tabs-borderless nav-sm">
|
|
<li class="nav-item">
|
|
<span class="nav-subtitle">Snippets</span>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/index.html">Introduction</a>
|
|
</li>
|
|
|
|
<li class="nav-item my-2 my-lg-5"></li>
|
|
|
|
<li class="nav-item">
|
|
<span class="nav-subtitle">Navbar / Heroes</span>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/navbar.html">Headers (Navbar)</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/hero-sections.html">Hero Sections</a>
|
|
</li>
|
|
|
|
<li class="nav-item my-2 my-lg-5"></li>
|
|
|
|
<li class="nav-item">
|
|
<span class="nav-subtitle">Content</span>
|
|
</li>
|
|
|
|
<li class="nav-item ">
|
|
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavFeaturesCollapse" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="snippetsSidebarNavFeaturesCollapse">Features</a>
|
|
|
|
<div id="snippetsSidebarNavFeaturesCollapse" class="nav-collapse collapse ">
|
|
<a class="nav-link " href="features-general.html">General</a>
|
|
<a class="nav-link " href="features-stats.html">Stats</a>
|
|
<a class="nav-link " href="features-step.html">Step</a>
|
|
<a class="nav-link " href="features-navs.html">Navs (Tabs)</a>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/icon-blocks.html">Icon Blocks</a>
|
|
</li>
|
|
|
|
<li class="nav-item ">
|
|
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavCardsCollapse" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="snippetsSidebarNavCardsCollapse">Cards</a>
|
|
|
|
<div id="snippetsSidebarNavCardsCollapse" class="nav-collapse collapse ">
|
|
<a class="nav-link " href="cards-grid.html">Grid</a>
|
|
<a class="nav-link " href="cards-list.html">List</a>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="nav-item ">
|
|
<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 active" 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">E-commerce</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 mb-md-9">
|
|
<h2>The better way to shop with Front top-products</h2>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<div class="row mb-2">
|
|
<div class="col-sm-6 col-md-4 mb-4">
|
|
<!-- Card -->
|
|
<div class="card card-bordered shadow-none overflow-hidden">
|
|
<div class="card-body d-flex align-items-center border-bottom p-0">
|
|
<div class="w-65 border-end">
|
|
<img class="img-fluid" src="../assets/img/380x400/img3.jpg" alt="Image Description">
|
|
</div>
|
|
<div class="w-35">
|
|
<div class="border-bottom">
|
|
<img class="img-fluid" src="../assets/img/380x360/img8.jpg" alt="Image Description">
|
|
</div>
|
|
<img class="img-fluid" src="../assets/img/380x360/img7.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-footer text-center">
|
|
<h3 class="card-title">T-shirts</h3>
|
|
<p class="card-text text-muted small">Starting from $29.99</p>
|
|
<a class="btn btn-outline-primary btn-sm btn-transition rounded-pill px-6" href="#">View all</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-md-4 mb-4">
|
|
<!-- Card -->
|
|
<div class="card card-bordered shadow-none overflow-hidden">
|
|
<div class="card-body d-flex align-items-center border-bottom p-0">
|
|
<div class="w-65 border-end">
|
|
<img class="img-fluid" src="../assets/img/380x400/img4.jpg" alt="Image Description">
|
|
</div>
|
|
<div class="w-35">
|
|
<div class="border-bottom">
|
|
<img class="img-fluid" src="../assets/img/380x360/img6.jpg" alt="Image Description">
|
|
</div>
|
|
<img class="img-fluid" src="../assets/img/380x360/img5.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-footer text-center">
|
|
<h3 class="card-title">Tech covers</h3>
|
|
<p class="card-text text-muted small">Starting from $399.99</p>
|
|
<a class="btn btn-outline-primary btn-sm btn-transition rounded-pill px-6" href="#">View all</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-md-4 mb-4">
|
|
<!-- Card -->
|
|
<div class="card card-bordered shadow-none overflow-hidden">
|
|
<div class="card-body d-flex align-items-center border-bottom p-0">
|
|
<div class="w-65 border-end">
|
|
<img class="img-fluid" src="../assets/img/380x400/img2.jpg" alt="Image Description">
|
|
</div>
|
|
<div class="w-35">
|
|
<div class="border-bottom">
|
|
<img class="img-fluid" src="../assets/img/380x360/img4.jpg" alt="Image Description">
|
|
</div>
|
|
<img class="img-fluid" src="../assets/img/380x360/img3.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-footer text-center">
|
|
<h3 class="card-title">Caps</h3>
|
|
<p class="card-text text-muted small">Starting from $13.99</p>
|
|
<a class="btn btn-outline-primary btn-sm btn-transition rounded-pill px-6" href="#">View all</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="text-center">
|
|
<p class="small">Limited time only, while stocks last.</p>
|
|
</div>
|
|
</div>
|
|
<!-- End Card Grid -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html1" role="tabpanel" aria-labelledby="nav-htmlTab1">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Card Grid -->
|
|
<div class="container content-space-2 content-space-lg-3">
|
|
<!-- Heading -->
|
|
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
|
|
<h2>The better way to shop with Front top-products</h2>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<div class="row mb-2">
|
|
<div class="col-sm-6 col-md-4 mb-4">
|
|
<!-- Card -->
|
|
<div class="card card-bordered shadow-none overflow-hidden">
|
|
<div class="card-body d-flex align-items-center border-bottom p-0">
|
|
<div class="w-65 border-end">
|
|
<img class="img-fluid" src="../assets/img/380x400/img3.jpg" alt="Image Description">
|
|
</div>
|
|
<div class="w-35">
|
|
<div class="border-bottom">
|
|
<img class="img-fluid" src="../assets/img/380x360/img8.jpg" alt="Image Description">
|
|
</div>
|
|
<img class="img-fluid" src="../assets/img/380x360/img7.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-footer text-center">
|
|
<h3 class="card-title">T-shirts</h3>
|
|
<p class="card-text text-muted small">Starting from $29.99</p>
|
|
<a class="btn btn-outline-primary btn-sm btn-transition rounded-pill px-6" href="#">View all</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-md-4 mb-4">
|
|
<!-- Card -->
|
|
<div class="card card-bordered shadow-none overflow-hidden">
|
|
<div class="card-body d-flex align-items-center border-bottom p-0">
|
|
<div class="w-65 border-end">
|
|
<img class="img-fluid" src="../assets/img/380x400/img4.jpg" alt="Image Description">
|
|
</div>
|
|
<div class="w-35">
|
|
<div class="border-bottom">
|
|
<img class="img-fluid" src="../assets/img/380x360/img6.jpg" alt="Image Description">
|
|
</div>
|
|
<img class="img-fluid" src="../assets/img/380x360/img5.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-footer text-center">
|
|
<h3 class="card-title">Tech covers</h3>
|
|
<p class="card-text text-muted small">Starting from $399.99</p>
|
|
<a class="btn btn-outline-primary btn-sm btn-transition rounded-pill px-6" href="#">View all</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 col-md-4 mb-4">
|
|
<!-- Card -->
|
|
<div class="card card-bordered shadow-none overflow-hidden">
|
|
<div class="card-body d-flex align-items-center border-bottom p-0">
|
|
<div class="w-65 border-end">
|
|
<img class="img-fluid" src="../assets/img/380x400/img2.jpg" alt="Image Description">
|
|
</div>
|
|
<div class="w-35">
|
|
<div class="border-bottom">
|
|
<img class="img-fluid" src="../assets/img/380x360/img4.jpg" alt="Image Description">
|
|
</div>
|
|
<img class="img-fluid" src="../assets/img/380x360/img3.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-footer text-center">
|
|
<h3 class="card-title">Caps</h3>
|
|
<p class="card-text text-muted small">Starting from $13.99</p>
|
|
<a class="btn btn-outline-primary btn-sm btn-transition rounded-pill px-6" href="#">View all</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="text-center">
|
|
<p class="small">Limited time only, while stocks last.</p>
|
|
</div>
|
|
</div>
|
|
<!-- End Card Grid -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Heading -->
|
|
<h2 id="component-2" class="hs-docs-heading">
|
|
Component #2 <a class="anchorjs-link" href="#component-2" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
|
</h2>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<!-- Header -->
|
|
<div class="card-header">
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment" id="navTab2" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="nav-resultTab2" href="#nav-result2" data-bs-toggle="pill" data-bs-target="#nav-result2" role="tab" aria-controls="nav-result2" aria-selected="true">Preview</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-htmlTab2" href="#nav-html2" data-bs-toggle="pill" data-bs-target="#nav-html2" role="tab" aria-controls="nav-html2" aria-selected="false">HTML</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-jsTab2" href="#nav-js2" data-bs-toggle="pill" data-bs-target="#nav-js2" role="tab" aria-controls="nav-js2" aria-selected="false">JS</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="navTabContent2">
|
|
<div class="tab-pane fade p-4 show active" id="nav-result2" role="tabpanel" aria-labelledby="nav-resultTab2">
|
|
<!-- Hero -->
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-7 mb-7 mb-md-0">
|
|
<div class="pe-md-4">
|
|
<div class="card-pinned">
|
|
<!-- Swiper Main Slider -->
|
|
<div class="js-swiper-shop-product swiper">
|
|
<div class="swiper-wrapper">
|
|
<!-- Slide -->
|
|
<div class="swiper-slide">
|
|
<div class="card card-bordered shadow-none">
|
|
<img class="card-img" src="../assets/img/600x600/img1.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Slide -->
|
|
|
|
<!-- Slide -->
|
|
<div class="swiper-slide">
|
|
<div class="card card-bordered shadow-none">
|
|
<img class="card-img" src="../assets/img/600x600/img2.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Slide -->
|
|
|
|
<!-- Slide -->
|
|
<div class="swiper-slide">
|
|
<div class="card card-bordered shadow-none">
|
|
<img class="card-img" src="../assets/img/600x600/img3.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Slide -->
|
|
</div>
|
|
|
|
<!-- Arrows -->
|
|
<div class="js-swiper-shop-product-button-next swiper-button-next"></div>
|
|
<div class="js-swiper-shop-product-button-prev swiper-button-prev"></div>
|
|
</div>
|
|
<!-- End Swiper Main Slider -->
|
|
|
|
<!-- Swiper Thumb Slider -->
|
|
<div class="position-absolute bottom-0 end-0 start-0 zi-1 p-4">
|
|
<div class="js-swiper-shop-product-thumb swiper" style="max-width: 15rem;">
|
|
<div class="swiper-wrapper">
|
|
<!-- Slide -->
|
|
<div class="swiper-slide">
|
|
<a class="avatar avatar-circle" href="javascript:;">
|
|
<img class="avatar-img" src="../assets/img/160x160/img11.jpg" alt="Image Description">
|
|
</a>
|
|
</div>
|
|
<!-- End Slide -->
|
|
|
|
<!-- Slide -->
|
|
<div class="swiper-slide">
|
|
<a class="avatar avatar-circle" href="javascript:;">
|
|
<img class="avatar-img" src="../assets/img/160x160/img12.jpg" alt="Image Description">
|
|
</a>
|
|
</div>
|
|
<!-- End Slide -->
|
|
|
|
<!-- Slide -->
|
|
<div class="swiper-slide">
|
|
<a class="avatar avatar-circle" href="javascript:;">
|
|
<img class="avatar-img" src="../assets/img/160x160/img13.jpg" alt="Image Description">
|
|
</a>
|
|
</div>
|
|
<!-- End Slide -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Swiper Thumb Slider -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-5">
|
|
<!-- Rating -->
|
|
<a class="d-flex gap-1 mb-4" href="#reviewSection">
|
|
<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">
|
|
<span class="ms-1">287 reviews</span>
|
|
</a>
|
|
<!-- End Rating -->
|
|
|
|
<!-- Heading -->
|
|
<div class="mb-5">
|
|
<h1 class="h2">New Era 9Forty LA Dodgers adjustable cap in black</h1>
|
|
<p>American label New Era manufacturing baseball hats for teams since the 1930s.</p>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Price -->
|
|
<div class="mb-5">
|
|
<span class="d-block mb-2">Total price:</span>
|
|
<div class="d-flex align-items-center">
|
|
<h3 class="mb-0">$159.99</h3>
|
|
<span class="ms-2"><del>$179.99</del></span>
|
|
</div>
|
|
</div>
|
|
<!-- End Price -->
|
|
|
|
<!-- Quantity -->
|
|
<div class="quantity-counter mb-3">
|
|
<div class="js-quantity-counter row align-items-center">
|
|
<div class="col">
|
|
<span class="d-block small">Select quantity</span>
|
|
<input class="js-result form-control form-control-quantity-counter" type="text" value="1">
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<a class="js-minus btn btn-outline-secondary btn-xs btn-icon rounded-circle" href="javascript:;">
|
|
<svg width="8" height="2" viewBox="0 0 8 2" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M0 1C0 0.723858 0.223858 0.5 0.5 0.5H7.5C7.77614 0.5 8 0.723858 8 1C8 1.27614 7.77614 1.5 7.5 1.5H0.5C0.223858 1.5 0 1.27614 0 1Z" fill="currentColor"/>
|
|
</svg>
|
|
</a>
|
|
<a class="js-plus btn btn-outline-secondary btn-xs btn-icon rounded-circle" href="javascript:;">
|
|
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M4 0C4.27614 0 4.5 0.223858 4.5 0.5V3.5H7.5C7.77614 3.5 8 3.72386 8 4C8 4.27614 7.77614 4.5 7.5 4.5H4.5V7.5C4.5 7.77614 4.27614 8 4 8C3.72386 8 3.5 7.77614 3.5 7.5V4.5H0.5C0.223858 4.5 0 4.27614 0 4C0 3.72386 0.223858 3.5 0.5 3.5H3.5V0.5C3.5 0.223858 3.72386 0 4 0Z" fill="currentColor"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Quantity -->
|
|
|
|
<!-- Accordion -->
|
|
<div class="accordion mb-5" id="shopCartAccordion">
|
|
<!-- Collapse -->
|
|
<div class="accordion-item">
|
|
<a class="accordion-button collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCartAccordionCollapseOne" aria-expanded="false" aria-controls="shopCartAccordionCollapseOne">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon svg-icon-sm text-primary">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M20 8H16C15.4 8 15 8.4 15 9V16H10V17C10 17.6 10.4 18 11 18H16C16 16.9 16.9 16 18 16C19.1 16 20 16.9 20 18H21C21.6 18 22 17.6 22 17V13L20 8Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M20 18C20 19.1 19.1 20 18 20C16.9 20 16 19.1 16 18C16 16.9 16.9 16 18 16C19.1 16 20 16.9 20 18ZM15 4C15 3.4 14.6 3 14 3H3C2.4 3 2 3.4 2 4V13C2 13.6 2.4 14 3 14H15V4ZM6 16C4.9 16 4 16.9 4 18C4 19.1 4.9 20 6 20C7.1 20 8 19.1 8 18C8 16.9 7.1 16 6 16Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
Free shipping
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<div id="shopCartAccordionCollapseOne" class="accordion-collapse collapse" data-bs-parent="#shopCartAccordion">
|
|
<div class="accordion-body">
|
|
<p class="mb-0">We offer free shipping anywhere in the U.S. A skilled delivery team will bring the boxes into your office.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Collapse -->
|
|
|
|
<!-- Collapse -->
|
|
<div class="accordion-item">
|
|
<a class="accordion-button collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCartAccordionCollapseTwo" aria-expanded="false" aria-controls="shopCartAccordionCollapseTwo">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon svg-icon-sm text-primary">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<rect opacity="0.3" x="3" y="3" width="18" height="18" rx="9" fill="#035A4B"/>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.42647 12H7.23529C7.23529 14.6315 9.36852 16.7647 12 16.7647C14.6315 16.7647 16.7647 14.6315 16.7647 12C16.7647 9.36853 14.6315 7.23529 12 7.23529C10.8231 7.23529 9.71618 7.66521 8.8607 8.4153L8.70962 8.30952C8.37305 8.07385 7.91166 8.3222 7.92302 8.73291L7.96298 10.178C7.97224 10.5127 8.30136 10.7439 8.61932 10.639L9.99538 10.1855C10.3863 10.0566 10.4628 9.53709 10.1256 9.30103L9.8755 9.12587C10.4798 8.6783 11.2189 8.42647 12 8.42647C13.9736 8.42647 15.5735 10.0264 15.5735 12C15.5735 13.9736 13.9736 15.5735 12 15.5735C10.0264 15.5735 8.42647 13.9736 8.42647 12Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
30 Days return
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<div id="shopCartAccordionCollapseTwo" class="accordion-collapse collapse" data-bs-parent="#shopCartAccordion">
|
|
<div class="accordion-body">
|
|
<p class="mb-0">If you're not satisfied, return it for a full refund. We'll take care of disassembly and return shipping.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Collapse -->
|
|
</div>
|
|
<!-- End Accordion -->
|
|
|
|
<div class="d-grid mb-4">
|
|
<button type="button" class="btn btn-primary btntransition">Add to cart</button>
|
|
</div>
|
|
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="svg-icon svg-icon-sm 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>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-2">
|
|
<span class="small me-1">Need Help?</span>
|
|
<a class="link small" href="#">Chat now</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Hero -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html2" role="tabpanel" aria-labelledby="nav-htmlTab2">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Hero -->
|
|
<div class="container content-space-1">
|
|
<div class="row">
|
|
<div class="col-md-7 mb-7 mb-md-0">
|
|
<div class="pe-md-4">
|
|
<div class="card-pinned">
|
|
<!-- Swiper Main Slider -->
|
|
<div class="js-swiper-shop-product swiper">
|
|
<div class="swiper-wrapper">
|
|
<!-- Slide -->
|
|
<div class="swiper-slide">
|
|
<div class="card card-bordered shadow-none">
|
|
<img class="card-img" src="../assets/img/600x600/img1.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Slide -->
|
|
|
|
<!-- Slide -->
|
|
<div class="swiper-slide">
|
|
<div class="card card-bordered shadow-none">
|
|
<img class="card-img" src="../assets/img/600x600/img2.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Slide -->
|
|
|
|
<!-- Slide -->
|
|
<div class="swiper-slide">
|
|
<div class="card card-bordered shadow-none">
|
|
<img class="card-img" src="../assets/img/600x600/img3.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Slide -->
|
|
</div>
|
|
|
|
<!-- Arrows -->
|
|
<div class="js-swiper-shop-product-button-next swiper-button-next"></div>
|
|
<div class="js-swiper-shop-product-button-prev swiper-button-prev"></div>
|
|
</div>
|
|
<!-- End Swiper Main Slider -->
|
|
|
|
<!-- Swiper Thumb Slider -->
|
|
<div class="position-absolute bottom-0 end-0 start-0 zi-1 p-4">
|
|
<div class="js-swiper-shop-product-thumb swiper" style="max-width: 15rem;">
|
|
<div class="swiper-wrapper">
|
|
<!-- Slide -->
|
|
<div class="swiper-slide">
|
|
<a class="avatar avatar-circle" href="javascript:;">
|
|
<img class="avatar-img" src="../assets/img/160x160/img11.jpg" alt="Image Description">
|
|
</a>
|
|
</div>
|
|
<!-- End Slide -->
|
|
|
|
<!-- Slide -->
|
|
<div class="swiper-slide">
|
|
<a class="avatar avatar-circle" href="javascript:;">
|
|
<img class="avatar-img" src="../assets/img/160x160/img12.jpg" alt="Image Description">
|
|
</a>
|
|
</div>
|
|
<!-- End Slide -->
|
|
|
|
<!-- Slide -->
|
|
<div class="swiper-slide">
|
|
<a class="avatar avatar-circle" href="javascript:;">
|
|
<img class="avatar-img" src="../assets/img/160x160/img13.jpg" alt="Image Description">
|
|
</a>
|
|
</div>
|
|
<!-- End Slide -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Swiper Thumb Slider -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-5">
|
|
<!-- Rating -->
|
|
<a class="d-flex gap-1 mb-4" href="#reviewSection">
|
|
<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">
|
|
<span class="ms-1">287 reviews</span>
|
|
</a>
|
|
<!-- End Rating -->
|
|
|
|
<!-- Heading -->
|
|
<div class="mb-5">
|
|
<h1 class="h2">New Era 9Forty LA Dodgers adjustable cap in black</h1>
|
|
<p>American label New Era manufacturing baseball hats for teams since the 1930s.</p>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Price -->
|
|
<div class="mb-5">
|
|
<span class="d-block mb-2">Total price:</span>
|
|
<div class="d-flex align-items-center">
|
|
<h3 class="mb-0">$159.99</h3>
|
|
<span class="ms-2"><del>$179.99</del></span>
|
|
</div>
|
|
</div>
|
|
<!-- End Price -->
|
|
|
|
<!-- Quantity -->
|
|
<div class="quantity-counter mb-3">
|
|
<div class="js-quantity-counter row align-items-center">
|
|
<div class="col">
|
|
<span class="d-block small">Select quantity</span>
|
|
<input class="js-result form-control form-control-quantity-counter" type="text" value="1">
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<a class="js-minus btn btn-outline-secondary btn-xs btn-icon rounded-circle" href="javascript:;">
|
|
<svg width="8" height="2" viewBox="0 0 8 2" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M0 1C0 0.723858 0.223858 0.5 0.5 0.5H7.5C7.77614 0.5 8 0.723858 8 1C8 1.27614 7.77614 1.5 7.5 1.5H0.5C0.223858 1.5 0 1.27614 0 1Z" fill="currentColor"/>
|
|
</svg>
|
|
</a>
|
|
<a class="js-plus btn btn-outline-secondary btn-xs btn-icon rounded-circle" href="javascript:;">
|
|
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M4 0C4.27614 0 4.5 0.223858 4.5 0.5V3.5H7.5C7.77614 3.5 8 3.72386 8 4C8 4.27614 7.77614 4.5 7.5 4.5H4.5V7.5C4.5 7.77614 4.27614 8 4 8C3.72386 8 3.5 7.77614 3.5 7.5V4.5H0.5C0.223858 4.5 0 4.27614 0 4C0 3.72386 0.223858 3.5 0.5 3.5H3.5V0.5C3.5 0.223858 3.72386 0 4 0Z" fill="currentColor"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Quantity -->
|
|
|
|
<!-- Accordion -->
|
|
<div class="accordion mb-5" id="shopCartAccordion">
|
|
<!-- Collapse -->
|
|
<div class="accordion-item">
|
|
<a class="accordion-button collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCartAccordionCollapseOne" aria-expanded="false" aria-controls="shopCartAccordionCollapseOne">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon svg-icon-sm text-primary">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M20 8H16C15.4 8 15 8.4 15 9V16H10V17C10 17.6 10.4 18 11 18H16C16 16.9 16.9 16 18 16C19.1 16 20 16.9 20 18H21C21.6 18 22 17.6 22 17V13L20 8Z" fill="#035A4B"/>
|
|
<path opacity="0.3" d="M20 18C20 19.1 19.1 20 18 20C16.9 20 16 19.1 16 18C16 16.9 16.9 16 18 16C19.1 16 20 16.9 20 18ZM15 4C15 3.4 14.6 3 14 3H3C2.4 3 2 3.4 2 4V13C2 13.6 2.4 14 3 14H15V4ZM6 16C4.9 16 4 16.9 4 18C4 19.1 4.9 20 6 20C7.1 20 8 19.1 8 18C8 16.9 7.1 16 6 16Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
Free shipping
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<div id="shopCartAccordionCollapseOne" class="accordion-collapse collapse" data-bs-parent="#shopCartAccordion">
|
|
<div class="accordion-body">
|
|
<p class="mb-0">We offer free shipping anywhere in the U.S. A skilled delivery team will bring the boxes into your office.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Collapse -->
|
|
|
|
<!-- Collapse -->
|
|
<div class="accordion-item">
|
|
<a class="accordion-button collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCartAccordionCollapseTwo" aria-expanded="false" aria-controls="shopCartAccordionCollapseTwo">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<span class="svg-icon svg-icon-sm text-primary">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<rect opacity="0.3" x="3" y="3" width="18" height="18" rx="9" fill="#035A4B"/>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.42647 12H7.23529C7.23529 14.6315 9.36852 16.7647 12 16.7647C14.6315 16.7647 16.7647 14.6315 16.7647 12C16.7647 9.36853 14.6315 7.23529 12 7.23529C10.8231 7.23529 9.71618 7.66521 8.8607 8.4153L8.70962 8.30952C8.37305 8.07385 7.91166 8.3222 7.92302 8.73291L7.96298 10.178C7.97224 10.5127 8.30136 10.7439 8.61932 10.639L9.99538 10.1855C10.3863 10.0566 10.4628 9.53709 10.1256 9.30103L9.8755 9.12587C10.4798 8.6783 11.2189 8.42647 12 8.42647C13.9736 8.42647 15.5735 10.0264 15.5735 12C15.5735 13.9736 13.9736 15.5735 12 15.5735C10.0264 15.5735 8.42647 13.9736 8.42647 12Z" fill="#035A4B"/>
|
|
</svg>
|
|
|
|
</span>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
30 Days return
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<div id="shopCartAccordionCollapseTwo" class="accordion-collapse collapse" data-bs-parent="#shopCartAccordion">
|
|
<div class="accordion-body">
|
|
<p class="mb-0">If you're not satisfied, return it for a full refund. We'll take care of disassembly and return shipping.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Collapse -->
|
|
</div>
|
|
<!-- End Accordion -->
|
|
|
|
<div class="d-grid mb-4">
|
|
<button type="button" class="btn btn-primary btntransition">Add to cart</button>
|
|
</div>
|
|
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="svg-icon svg-icon-sm 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>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-2">
|
|
<span class="small me-1">Need Help?</span>
|
|
<a class="link small" href="#">Chat now</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Hero -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-js2" role="tabpanel" aria-labelledby="nav-jsTab2">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- JS Implementing Plugins -->
|
|
<script src="../assets/vendor/swiper/swiper-bundle.min.js"></script>
|
|
<script src="../assets/vendor/hs-quantity-counter/dist/hs-quantity-counter.min.js"></script>
|
|
|
|
<!-- JS Plugins Init. -->
|
|
<script>
|
|
(function() {
|
|
// INITIALIZATION OF SWIPER
|
|
// =======================================================
|
|
var swiper = new Swiper('.js-swiper-shop-product',{
|
|
effect: 'fade',
|
|
autoplay: true,
|
|
loop: true,
|
|
navigation: {
|
|
nextEl: '.js-swiper-shop-product-button-next',
|
|
prevEl: '.js-swiper-shop-product-button-prev',
|
|
},
|
|
thumbs: {
|
|
swiper: sliderThumbs
|
|
}
|
|
});
|
|
|
|
var sliderThumbs = new Swiper('.js-swiper-shop-product-thumb', {
|
|
slidesPerView: 3,
|
|
watchSlidesVisibility: true,
|
|
watchSlidesProgress: true,
|
|
history: false,
|
|
});
|
|
|
|
|
|
// INITIALIZATION OF QUANTITY COUNTER
|
|
// =======================================================
|
|
new HSQuantityCounter('.js-quantity-counter')
|
|
})()
|
|
</script>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Heading -->
|
|
<h2 id="component-3" class="hs-docs-heading">
|
|
Component #3 <a class="anchorjs-link" href="#component-3" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
|
</h2>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<!-- Header -->
|
|
<div class="card-header">
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment" id="navTab3" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="nav-resultTab3" href="#nav-result3" data-bs-toggle="pill" data-bs-target="#nav-result3" role="tab" aria-controls="nav-result3" aria-selected="true">Preview</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-htmlTab3" href="#nav-html3" data-bs-toggle="pill" data-bs-target="#nav-html3" role="tab" aria-controls="nav-html3" aria-selected="false">HTML</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="navTabContent3">
|
|
<div class="tab-pane fade p-4 show active" id="nav-result3" role="tabpanel" aria-labelledby="nav-resultTab3">
|
|
<!-- Content -->
|
|
<div class="container content-space-1">
|
|
<div class="row">
|
|
<div class="col-lg-8 mb-7 mb-lg-0">
|
|
<!-- Heading -->
|
|
<div class="d-flex justify-content-between align-items-end border-bottom pb-3 mb-7">
|
|
<h1 class="h3 mb-0">Shopping cart</h1>
|
|
<span>2 items</span>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Form -->
|
|
<form>
|
|
<!-- List Group -->
|
|
<ul class="list-group list-group-flush list-group-no-gutters mb-5">
|
|
<!-- Item -->
|
|
<li class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-xl avatar-4x3" src="../assets/img/320x320/img2.jpg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="row">
|
|
<div class="col-sm-7 mb-3 mb-sm-0">
|
|
<h5><a class="text-dark" href="#">Originals national backpack</a></h5>
|
|
|
|
<div class="d-block d-sm-none">
|
|
<h5 class="mb-1">$29.99</h5>
|
|
</div>
|
|
|
|
<div class="d-grid gap-1">
|
|
<div class="text-body">
|
|
<span class="small">Gender:</span>
|
|
<span class="fw-semi-bold small">Men</span>
|
|
</div>
|
|
|
|
<div class="text-body">
|
|
<span class="small">Color:</span>
|
|
<span class="fw-semi-bold small">Grey</span>
|
|
</div>
|
|
|
|
<div class="text-body">
|
|
<span class="small">Size:</span>
|
|
<span class="fw-semi-bold small">One size</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-3">
|
|
<div class="row">
|
|
<div class="col-auto">
|
|
<!-- Select -->
|
|
<select class="form-select form-select-sm mb-3">
|
|
<option value="quantity1">1</option>
|
|
<option value="quantity2">2</option>
|
|
<option value="quantity3">3</option>
|
|
<option value="quantity4">4</option>
|
|
<option value="quantity5">5</option>
|
|
<option value="quantity6">6</option>
|
|
<option value="quantity7">7</option>
|
|
<option value="quantity8">8</option>
|
|
<option value="quantity9">9</option>
|
|
<option value="quantity10">10</option>
|
|
</select>
|
|
<!-- End Select -->
|
|
</div>
|
|
|
|
<div class="col-auto">
|
|
<div class="d-grid gap-2">
|
|
<a class="link-sm link-secondary small" href="javascript:;">
|
|
<i class="bi-trash me-1"></i> Remove
|
|
</a>
|
|
|
|
<a class="link-sm link-secondary small" href="javascript:;">
|
|
<i class="bi-heart me-1"></i> Save for later
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-4 col-sm-2 d-none d-sm-inline-block text-right">
|
|
<span class="h5 d-block mb-1">$29.99</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<li class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-xl avatar-4x3" src="../assets/img/320x320/img3.jpg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="row">
|
|
<div class="col-sm-7 mb-3 mb-sm-0">
|
|
<h5><a class="text-dark" href="#">Vans large image t-shirt</a></h5>
|
|
|
|
<div class="d-block d-sm-none">
|
|
<h5 class="mb-1">$43.99</h5>
|
|
</div>
|
|
|
|
<div class="d-grid gap-1">
|
|
<div class="text-body">
|
|
<span class="small">Gender:</span>
|
|
<span class="fw-semi-bold small">Women</span>
|
|
</div>
|
|
|
|
<div class="text-body">
|
|
<span class="small">Color:</span>
|
|
<span class="fw-semi-bold small">Core Black / Carbon</span>
|
|
</div>
|
|
|
|
<div class="text-body">
|
|
<span class="small">Size:</span>
|
|
<span class="fw-semi-bold small">S</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-3">
|
|
<div class="row">
|
|
<div class="col-auto">
|
|
<!-- Select -->
|
|
<select class="form-select form-select-sm mb-3">
|
|
<option value="quantity1">1</option>
|
|
<option value="quantity2">2</option>
|
|
<option value="quantity3">3</option>
|
|
<option value="quantity4">4</option>
|
|
<option value="quantity5">5</option>
|
|
<option value="quantity6">6</option>
|
|
<option value="quantity7">7</option>
|
|
<option value="quantity8">8</option>
|
|
<option value="quantity9">9</option>
|
|
<option value="quantity10">10</option>
|
|
</select>
|
|
<!-- End Select -->
|
|
</div>
|
|
|
|
<div class="col-auto">
|
|
<div class="d-grid gap-2">
|
|
<a class="link-sm link-secondary small" href="javascript:;">
|
|
<i class="bi-trash me-1"></i> Remove
|
|
</a>
|
|
|
|
<a class="link-sm link-secondary small" href="javascript:;">
|
|
<i class="bi-heart me-1"></i> Save for later
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-4 col-sm-2 d-none d-sm-inline-block text-right">
|
|
<span class="h5 d-block mb-1">$29.99</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<!-- End Item -->
|
|
</ul>
|
|
<!-- End List Group -->
|
|
|
|
<div class="d-sm-flex justify-content-end">
|
|
<a class="link" href="../demo-shop/index.html">
|
|
<i class="bi-chevron-left small ms-1"></i> Continue shopping
|
|
</a>
|
|
</div>
|
|
</form>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-4">
|
|
<div class="ps-lg-4">
|
|
<!-- Card -->
|
|
<div class="card card-sm shadow-sm mb-4">
|
|
<div class="card-body">
|
|
<div class="border-bottom pb-4 mb-4">
|
|
<h3 class="card-header-title">Order summary</h3>
|
|
</div>
|
|
|
|
<form>
|
|
<div class="border-bottom pb-4 mb-3">
|
|
<input type="text" class="form-control" name="name" placeholder="Enter promo code" aria-label="Enter promo code">
|
|
</div>
|
|
|
|
<div class="border-bottom pb-4 mb-4">
|
|
<div class="d-grid gap-3">
|
|
<dl class="row">
|
|
<dt class="col-sm-6">Item subtotal (2)</dt>
|
|
<dd class="col-sm-6 text-sm-end mb-0">$73.98</dd>
|
|
</dl>
|
|
<!-- End Row -->
|
|
|
|
<dl class="row">
|
|
<dt class="col-sm-6">Delivery</dt>
|
|
<dd class="col-sm-6 text-sm-end mb-0">Free</dd>
|
|
</dl>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-bottom pb-4 mb-4">
|
|
<div class="d-grid gap-3">
|
|
<!-- Check -->
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="deliveryRadioName" id="deliveryRadio1Eg1" checked>
|
|
<label class="form-check-label text-dark" for="deliveryRadio1Eg1">
|
|
Free - Standard delivery
|
|
<span class="d-block text-muted small">Shipment may take 5-6 business days</span>
|
|
</label>
|
|
</div>
|
|
<!-- End Check -->
|
|
|
|
<!-- Check -->
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="deliveryRadioName" id="deliveryRadio2Eg1">
|
|
<label class="form-check-label text-dark" for="deliveryRadio2Eg1">
|
|
$7.99 - Express delivery
|
|
<span class="d-block text-muted small">Shipment may take 2-3 business days</span>
|
|
</label>
|
|
</div>
|
|
<!-- End Check -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-grid gap-3 mb-4">
|
|
<dl class="row">
|
|
<dt class="col-sm-6">Estimated tax</dt>
|
|
<dd class="col-sm-6 text-sm-end mb-0">$0.00</dd>
|
|
</dl>
|
|
<!-- End Row -->
|
|
|
|
<dl class="row">
|
|
<dt class="col-sm-6">Total</dt>
|
|
<dd class="col-sm-6 text-sm-end mb-0">$73.98</dd>
|
|
</dl>
|
|
<!-- End Row -->
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<a class="btn btn-primary btn-lg" href="../demo-shop/checkout.html">Checkout</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="svg-icon svg-icon-sm 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>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-2">
|
|
<span class="small me-1">Need Help?</span>
|
|
<a class="link small" href="#">Chat now</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Content -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html3" role="tabpanel" aria-labelledby="nav-htmlTab3">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Content -->
|
|
<div class="container content-space-1 content-space-lg-2">
|
|
<div class="row">
|
|
<div class="col-lg-8 mb-7 mb-lg-0">
|
|
<!-- Heading -->
|
|
<div class="d-flex justify-content-between align-items-end border-bottom pb-3 mb-7">
|
|
<h1 class="h3 mb-0">Shopping cart</h1>
|
|
<span>2 items</span>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Form -->
|
|
<form>
|
|
<!-- List Group -->
|
|
<ul class="list-group list-group-flush list-group-no-gutters mb-5">
|
|
<!-- Item -->
|
|
<li class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-xl avatar-4x3" src="../assets/img/320x320/img2.jpg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="row">
|
|
<div class="col-sm-7 mb-3 mb-sm-0">
|
|
<h5><a class="text-dark" href="#">Originals national backpack</a></h5>
|
|
|
|
<div class="d-block d-sm-none">
|
|
<h5 class="mb-1">$29.99</h5>
|
|
</div>
|
|
|
|
<div class="d-grid gap-1">
|
|
<div class="text-body">
|
|
<span class="small">Gender:</span>
|
|
<span class="fw-semi-bold small">Men</span>
|
|
</div>
|
|
|
|
<div class="text-body">
|
|
<span class="small">Color:</span>
|
|
<span class="fw-semi-bold small">Grey</span>
|
|
</div>
|
|
|
|
<div class="text-body">
|
|
<span class="small">Size:</span>
|
|
<span class="fw-semi-bold small">One size</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-3">
|
|
<div class="row">
|
|
<div class="col-auto">
|
|
<!-- Select -->
|
|
<select class="form-select form-select-sm mb-3">
|
|
<option value="quantity1">1</option>
|
|
<option value="quantity2">2</option>
|
|
<option value="quantity3">3</option>
|
|
<option value="quantity4">4</option>
|
|
<option value="quantity5">5</option>
|
|
<option value="quantity6">6</option>
|
|
<option value="quantity7">7</option>
|
|
<option value="quantity8">8</option>
|
|
<option value="quantity9">9</option>
|
|
<option value="quantity10">10</option>
|
|
</select>
|
|
<!-- End Select -->
|
|
</div>
|
|
|
|
<div class="col-auto">
|
|
<div class="d-grid gap-2">
|
|
<a class="link-sm link-secondary small" href="javascript:;">
|
|
<i class="bi-trash me-1"></i> Remove
|
|
</a>
|
|
|
|
<a class="link-sm link-secondary small" href="javascript:;">
|
|
<i class="bi-heart me-1"></i> Save for later
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-4 col-sm-2 d-none d-sm-inline-block text-right">
|
|
<span class="h5 d-block mb-1">$29.99</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<li class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-xl avatar-4x3" src="../assets/img/320x320/img3.jpg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="row">
|
|
<div class="col-sm-7 mb-3 mb-sm-0">
|
|
<h5><a class="text-dark" href="#">Vans large image t-shirt</a></h5>
|
|
|
|
<div class="d-block d-sm-none">
|
|
<h5 class="mb-1">$43.99</h5>
|
|
</div>
|
|
|
|
<div class="d-grid gap-1">
|
|
<div class="text-body">
|
|
<span class="small">Gender:</span>
|
|
<span class="fw-semi-bold small">Women</span>
|
|
</div>
|
|
|
|
<div class="text-body">
|
|
<span class="small">Color:</span>
|
|
<span class="fw-semi-bold small">Core Black / Carbon</span>
|
|
</div>
|
|
|
|
<div class="text-body">
|
|
<span class="small">Size:</span>
|
|
<span class="fw-semi-bold small">S</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-3">
|
|
<div class="row">
|
|
<div class="col-auto">
|
|
<!-- Select -->
|
|
<select class="form-select form-select-sm mb-3">
|
|
<option value="quantity1">1</option>
|
|
<option value="quantity2">2</option>
|
|
<option value="quantity3">3</option>
|
|
<option value="quantity4">4</option>
|
|
<option value="quantity5">5</option>
|
|
<option value="quantity6">6</option>
|
|
<option value="quantity7">7</option>
|
|
<option value="quantity8">8</option>
|
|
<option value="quantity9">9</option>
|
|
<option value="quantity10">10</option>
|
|
</select>
|
|
<!-- End Select -->
|
|
</div>
|
|
|
|
<div class="col-auto">
|
|
<div class="d-grid gap-2">
|
|
<a class="link-sm link-secondary small" href="javascript:;">
|
|
<i class="bi-trash me-1"></i> Remove
|
|
</a>
|
|
|
|
<a class="link-sm link-secondary small" href="javascript:;">
|
|
<i class="bi-heart me-1"></i> Save for later
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-4 col-sm-2 d-none d-sm-inline-block text-right">
|
|
<span class="h5 d-block mb-1">$29.99</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<!-- End Item -->
|
|
</ul>
|
|
<!-- End List Group -->
|
|
|
|
<div class="d-sm-flex justify-content-end">
|
|
<a class="link" href="../demo-shop/index.html">
|
|
<i class="bi-chevron-left small ms-1"></i> Continue shopping
|
|
</a>
|
|
</div>
|
|
</form>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-4">
|
|
<div class="ps-lg-4">
|
|
<!-- Card -->
|
|
<div class="card card-sm shadow-sm mb-4">
|
|
<div class="card-body">
|
|
<div class="border-bottom pb-4 mb-4">
|
|
<h3 class="card-header-title">Order summary</h3>
|
|
</div>
|
|
|
|
<form>
|
|
<div class="border-bottom pb-4 mb-3">
|
|
<input type="text" class="form-control" name="name" placeholder="Enter promo code" aria-label="Enter promo code">
|
|
</div>
|
|
|
|
<div class="border-bottom pb-4 mb-4">
|
|
<div class="d-grid gap-3">
|
|
<dl class="row">
|
|
<dt class="col-sm-6">Item subtotal (2)</dt>
|
|
<dd class="col-sm-6 text-sm-end mb-0">$73.98</dd>
|
|
</dl>
|
|
<!-- End Row -->
|
|
|
|
<dl class="row">
|
|
<dt class="col-sm-6">Delivery</dt>
|
|
<dd class="col-sm-6 text-sm-end mb-0">Free</dd>
|
|
</dl>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-bottom pb-4 mb-4">
|
|
<div class="d-grid gap-3">
|
|
<!-- Check -->
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="deliveryRadioName" id="deliveryRadio1Eg1" checked>
|
|
<label class="form-check-label text-dark" for="deliveryRadio1Eg1">
|
|
Free - Standard delivery
|
|
<span class="d-block text-muted small">Shipment may take 5-6 business days</span>
|
|
</label>
|
|
</div>
|
|
<!-- End Check -->
|
|
|
|
<!-- Check -->
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="deliveryRadioName" id="deliveryRadio2Eg1">
|
|
<label class="form-check-label text-dark" for="deliveryRadio2Eg1">
|
|
$7.99 - Express delivery
|
|
<span class="d-block text-muted small">Shipment may take 2-3 business days</span>
|
|
</label>
|
|
</div>
|
|
<!-- End Check -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-grid gap-3 mb-4">
|
|
<dl class="row">
|
|
<dt class="col-sm-6">Estimated tax</dt>
|
|
<dd class="col-sm-6 text-sm-end mb-0">$0.00</dd>
|
|
</dl>
|
|
<!-- End Row -->
|
|
|
|
<dl class="row">
|
|
<dt class="col-sm-6">Total</dt>
|
|
<dd class="col-sm-6 text-sm-end mb-0">$73.98</dd>
|
|
</dl>
|
|
<!-- End Row -->
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<a class="btn btn-primary btn-lg" href="../demo-shop/checkout.html">Checkout</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="svg-icon svg-icon-sm 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>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-2">
|
|
<span class="small me-1">Need Help?</span>
|
|
<a class="link small" href="#">Chat now</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Content -->
|
|
</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">
|
|
<!-- Content -->
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<div class="ps-lg-4">
|
|
<!-- Card -->
|
|
<div class="card card-sm shadow-sm mb-4">
|
|
<div class="card-body">
|
|
<div class="border-bottom pb-4 mb-4">
|
|
<h3 class="card-header-title">Order summary</h3>
|
|
</div>
|
|
|
|
<form>
|
|
<!-- Product -->
|
|
<div class="border-bottom pb-4 mb-4">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar avatar-lg me-3">
|
|
<img class="avatar-img" src="../assets/img/320x320/img2.jpg" alt="Image Description">
|
|
<sup class="avatar-status avatar-status-primary">1</sup>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-grow-1">
|
|
<h6>Originals national backpack</h6>
|
|
|
|
<div class="d-grid">
|
|
<div class="text-body">
|
|
<span class="small">Gender:</span>
|
|
<span class="small">Men</span>
|
|
</div>
|
|
|
|
<div class="text-body">
|
|
<span class="small">Color:</span>
|
|
<span class="small">Grey</span>
|
|
</div>
|
|
|
|
<div class="text-body">
|
|
<span class="small">Size:</span>
|
|
<span class="small">One size</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Product -->
|
|
|
|
<!-- Product -->
|
|
<div class="border-bottom pb-4 mb-4">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar avatar-lg me-3">
|
|
<img class="avatar-img" src="../assets/img/320x320/img3.jpg" alt="Image Description">
|
|
<sup class="avatar-status avatar-status-primary">1</sup>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-grow-1">
|
|
<h6>Vans large image t-shirt</h6>
|
|
|
|
<div class="d-grid">
|
|
<div class="text-body">
|
|
<span class="small">Gender:</span>
|
|
<span class="small">Women</span>
|
|
</div>
|
|
|
|
<div class="text-body">
|
|
<span class="small">Color:</span>
|
|
<span class="small">Core Black / Carbon</span>
|
|
</div>
|
|
|
|
<div class="text-body">
|
|
<span class="small">Size:</span>
|
|
<span class="small">S</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Product -->
|
|
|
|
<div class="border-bottom pb-4 mb-3">
|
|
<input type="text" class="form-control" name="name" placeholder="Enter promo code" aria-label="Enter promo code">
|
|
</div>
|
|
|
|
<div class="border-bottom pb-4 mb-4">
|
|
<div class="d-grid gap-3">
|
|
<dl class="row">
|
|
<dt class="col-sm-6">Item subtotal (2)</dt>
|
|
<dd class="col-sm-6 text-sm-end mb-0">$73.98</dd>
|
|
</dl>
|
|
<!-- End Row -->
|
|
|
|
<dl class="row">
|
|
<dt class="col-sm-6">Delivery</dt>
|
|
<dd class="col-sm-6 text-sm-end mb-0">Free</dd>
|
|
</dl>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-bottom pb-4 mb-4">
|
|
<div class="d-grid gap-3">
|
|
<!-- Check -->
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="deliveryRadioName" id="deliveryRadio1Eg2" checked>
|
|
<label class="form-check-label text-dark" for="deliveryRadio1Eg2">
|
|
Free - Standard delivery
|
|
<span class="d-block text-muted small">Shipment may take 5-6 business days</span>
|
|
</label>
|
|
</div>
|
|
<!-- End Check -->
|
|
|
|
<!-- Check -->
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="deliveryRadioName" id="deliveryRadio2Eg2">
|
|
<label class="form-check-label text-dark" for="deliveryRadio2Eg2">
|
|
$7.99 - Express delivery
|
|
<span class="d-block text-muted small">Shipment may take 2-3 business days</span>
|
|
</label>
|
|
</div>
|
|
<!-- End Check -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-grid gap-3 mb-4">
|
|
<dl class="row">
|
|
<dt class="col-sm-6">Estimated tax</dt>
|
|
<dd class="col-sm-6 text-sm-end mb-0">$0.00</dd>
|
|
</dl>
|
|
<!-- End Row -->
|
|
|
|
<dl class="row">
|
|
<dt class="col-sm-6">Total</dt>
|
|
<dd class="col-sm-6 text-sm-end mb-0">$73.98</dd>
|
|
</dl>
|
|
<!-- End Row -->
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<a class="btn btn-primary btn-lg" href="../demo-shop/checkout.html">Checkout</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="svg-icon svg-icon-sm 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>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-2">
|
|
<span class="small me-1">Need Help?</span>
|
|
<a class="link small" href="#">Chat now</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Content -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html4" role="tabpanel" aria-labelledby="nav-htmlTab4">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Content -->
|
|
<div class="container content-space-1 content-space-lg-2">
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<div class="ps-lg-4">
|
|
<!-- Card -->
|
|
<div class="card card-sm shadow-sm mb-4">
|
|
<div class="card-body">
|
|
<div class="border-bottom pb-4 mb-4">
|
|
<h3 class="card-header-title">Order summary</h3>
|
|
</div>
|
|
|
|
<form>
|
|
<!-- Product -->
|
|
<div class="border-bottom pb-4 mb-4">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar avatar-lg me-3">
|
|
<img class="avatar-img" src="../assets/img/320x320/img2.jpg" alt="Image Description">
|
|
<sup class="avatar-status avatar-status-primary">1</sup>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-grow-1">
|
|
<h6>Originals national backpack</h6>
|
|
|
|
<div class="d-grid">
|
|
<div class="text-body">
|
|
<span class="small">Gender:</span>
|
|
<span class="small">Men</span>
|
|
</div>
|
|
|
|
<div class="text-body">
|
|
<span class="small">Color:</span>
|
|
<span class="small">Grey</span>
|
|
</div>
|
|
|
|
<div class="text-body">
|
|
<span class="small">Size:</span>
|
|
<span class="small">One size</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Product -->
|
|
|
|
<!-- Product -->
|
|
<div class="border-bottom pb-4 mb-4">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar avatar-lg me-3">
|
|
<img class="avatar-img" src="../assets/img/320x320/img3.jpg" alt="Image Description">
|
|
<sup class="avatar-status avatar-status-primary">1</sup>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-grow-1">
|
|
<h6>Vans large image t-shirt</h6>
|
|
|
|
<div class="d-grid">
|
|
<div class="text-body">
|
|
<span class="small">Gender:</span>
|
|
<span class="small">Women</span>
|
|
</div>
|
|
|
|
<div class="text-body">
|
|
<span class="small">Color:</span>
|
|
<span class="small">Core Black / Carbon</span>
|
|
</div>
|
|
|
|
<div class="text-body">
|
|
<span class="small">Size:</span>
|
|
<span class="small">S</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Product -->
|
|
|
|
<div class="border-bottom pb-4 mb-3">
|
|
<input type="text" class="form-control" name="name" placeholder="Enter promo code" aria-label="Enter promo code">
|
|
</div>
|
|
|
|
<div class="border-bottom pb-4 mb-4">
|
|
<div class="d-grid gap-3">
|
|
<dl class="row">
|
|
<dt class="col-sm-6">Item subtotal (2)</dt>
|
|
<dd class="col-sm-6 text-sm-end mb-0">$73.98</dd>
|
|
</dl>
|
|
<!-- End Row -->
|
|
|
|
<dl class="row">
|
|
<dt class="col-sm-6">Delivery</dt>
|
|
<dd class="col-sm-6 text-sm-end mb-0">Free</dd>
|
|
</dl>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-bottom pb-4 mb-4">
|
|
<div class="d-grid gap-3">
|
|
<!-- Check -->
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="deliveryRadioName" id="deliveryRadio1Eg2" checked>
|
|
<label class="form-check-label text-dark" for="deliveryRadio1Eg2">
|
|
Free - Standard delivery
|
|
<span class="d-block text-muted small">Shipment may take 5-6 business days</span>
|
|
</label>
|
|
</div>
|
|
<!-- End Check -->
|
|
|
|
<!-- Check -->
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="deliveryRadioName" id="deliveryRadio2Eg2">
|
|
<label class="form-check-label text-dark" for="deliveryRadio2Eg2">
|
|
$7.99 - Express delivery
|
|
<span class="d-block text-muted small">Shipment may take 2-3 business days</span>
|
|
</label>
|
|
</div>
|
|
<!-- End Check -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-grid gap-3 mb-4">
|
|
<dl class="row">
|
|
<dt class="col-sm-6">Estimated tax</dt>
|
|
<dd class="col-sm-6 text-sm-end mb-0">$0.00</dd>
|
|
</dl>
|
|
<!-- End Row -->
|
|
|
|
<dl class="row">
|
|
<dt class="col-sm-6">Total</dt>
|
|
<dd class="col-sm-6 text-sm-end mb-0">$73.98</dd>
|
|
</dl>
|
|
<!-- End Row -->
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<a class="btn btn-primary btn-lg" href="../demo-shop/checkout.html">Checkout</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="svg-icon svg-icon-sm 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>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-2">
|
|
<span class="small me-1">Need Help?</span>
|
|
<a class="link small" href="#">Chat now</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Content -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Content -->
|
|
</main>
|
|
<!-- ========== END MAIN CONTENT ========== -->
|
|
|
|
<!-- ========== SECONDARY CONTENTS ========== -->
|
|
<!-- Go To -->
|
|
<a class="js-go-to go-to position-fixed" href="javascript:;" style="visibility: hidden;"
|
|
data-hs-go-to-options='{
|
|
"offsetTop": 700,
|
|
"position": {
|
|
"init": {
|
|
"right": "2rem"
|
|
},
|
|
"show": {
|
|
"bottom": "2rem"
|
|
},
|
|
"hide": {
|
|
"bottom": "-2rem"
|
|
}
|
|
}
|
|
}'>
|
|
<i class="bi-chevron-up"></i>
|
|
</a>
|
|
<!-- ========== END SECONDARY CONTENTS ========== -->
|
|
|
|
<!-- JS Global Compulsory -->
|
|
<script src="../assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<!-- JS Implementing Plugins -->
|
|
<script src="../assets/vendor/hs-header/dist/hs-header.min.js"></script>
|
|
<script src="../assets/vendor/hs-nav-scroller/dist/hs-nav-scroller.min.js"></script>
|
|
<script src="../assets/vendor/list.js/dist/list.min.js"></script>
|
|
<script src="../assets/vendor/hs-go-to/dist/hs-go-to.min.js"></script>
|
|
<script src="../assets/vendor/prism/prism.js"></script>
|
|
<script src="../assets/vendor/swiper/swiper-bundle.min.js"></script>
|
|
<script src="../assets/vendor/hs-quantity-counter/dist/hs-quantity-counter.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-shop-product',{
|
|
effect: 'fade',
|
|
autoplay: true,
|
|
loop: true,
|
|
navigation: {
|
|
nextEl: '.js-swiper-shop-product-button-next',
|
|
prevEl: '.js-swiper-shop-product-button-prev',
|
|
},
|
|
thumbs: {
|
|
swiper: sliderThumbs
|
|
}
|
|
});
|
|
|
|
var sliderThumbs = new Swiper('.js-swiper-shop-product-thumb', {
|
|
slidesPerView: 3,
|
|
watchSlidesVisibility: true,
|
|
watchSlidesProgress: true,
|
|
history: false,
|
|
});
|
|
|
|
|
|
// INITIALIZATION OF QUANTITY COUNTER
|
|
// =======================================================
|
|
new HSQuantityCounter('.js-quantity-counter')
|
|
})()
|
|
</script>
|
|
</body>
|
|
</html>
|