1919 lines
94 KiB
HTML
1919 lines
94 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>Feedback & Reviews - Snippets | Front - Multipurpose Responsive Template</title>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="shortcut icon" href="../favicon.ico">
|
|
|
|
<!-- Font -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
|
|
|
<!-- CSS Implementing Plugins -->
|
|
<link rel="stylesheet" href="../assets/css/vendor.min.css">
|
|
<link rel="stylesheet" href="../assets/vendor/bootstrap-icons/font/bootstrap-icons.css">
|
|
|
|
<!-- CSS Front Template -->
|
|
<link rel="stylesheet" href="../assets/css/theme.min.css?v=1.0">
|
|
<link rel="stylesheet" href="../assets/css/snippets.css">
|
|
</head>
|
|
|
|
<body class="navbar-sidebar-aside-lg">
|
|
<!-- ========== HEADER ========== -->
|
|
<header id="header" class="navbar navbar-expand navbar-fixed navbar-end navbar-light navbar-sticky-lg-top bg-white">
|
|
<div class="container-fluid">
|
|
<nav class="navbar-nav-wrap">
|
|
<div class="row flex-grow-1">
|
|
<!-- Default Logo -->
|
|
<div class="docs-navbar-sidebar-container d-flex align-items-center mb-2 mb-lg-0">
|
|
<a class="navbar-brand" href="../snippets/index.html" aria-label="Space">
|
|
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
|
</a>
|
|
<a href="../documentation/changelog.html">
|
|
<span class="badge bg-soft-primary text-primary">v4.1</span>
|
|
</a>
|
|
</div>
|
|
<!-- End Default Logo -->
|
|
|
|
<div class="col-md px-lg-0">
|
|
<div class="d-flex justify-content-between align-items-center px-lg-5 px-xl-10">
|
|
<div class="d-none d-md-block">
|
|
<!-- Search Form -->
|
|
<form id="snippetsSearch" class="position-relative"
|
|
data-hs-list-options='{
|
|
"searchMenu": true,
|
|
"keyboard": true,
|
|
"item": "searchTemplate",
|
|
"valueNames": ["component", "category", {"name": "link", "attr": "href"}],
|
|
"empty": "#searchNoResults"
|
|
}'>
|
|
<!-- Input Group -->
|
|
<div class="input-group input-group-merge navbar-input-group">
|
|
<div class="input-group-prepend input-group-text">
|
|
<i class="bi-search"></i>
|
|
</div>
|
|
|
|
<input type="search" class="search form-control form-control-sm" placeholder="Search in snippets" aria-label="Search in snippets">
|
|
|
|
<a class="input-group-append input-group-text" href="javascript:;">
|
|
<i id="clearSearchResultsIcon" class="bi-x" style="display: none;"></i>
|
|
</a>
|
|
</div>
|
|
<!-- End Input Group -->
|
|
|
|
<!-- List -->
|
|
<div class="list dropdown-menu w-100 overflow-auto" style="max-height: 16rem;"></div>
|
|
<!-- End List -->
|
|
|
|
<!-- Empty -->
|
|
<div id="searchNoResults" style="display: none;">
|
|
<div class="text-center p-4">
|
|
<img class="mb-3" src="../assets/svg/illustrations/oc-error.svg" alt="Image Description" style="width: 10rem;">
|
|
<p class="mb-0">No Results</p>
|
|
</div>
|
|
</div>
|
|
<!-- End Empty -->
|
|
</form>
|
|
<!-- End Search Form -->
|
|
|
|
<!-- List Item Template -->
|
|
<div class="d-none">
|
|
<div id="searchTemplate" class="dropdown-item">
|
|
<a class="d-block link" href="#">
|
|
<span class="category d-block fw-normal text-muted mb-1"></span>
|
|
<span class="component text-dark"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End List Item Template -->
|
|
</div>
|
|
|
|
<!-- Navbar -->
|
|
<ul class="navbar-nav p-0">
|
|
<li class="nav-item">
|
|
<a class="btn btn-ghost-secondary btn-sm" href="https://htmlstream.com/contact-us" target="_blank">
|
|
Get Support <i class="bi-box-arrow-up-right ms-1"></i>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="btn btn-primary btn-sm" href="../index.html">
|
|
<i class="bi-eye me-1"></i> Preview Demo
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Navbar -->
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
<!-- ========== END HEADER ========== -->
|
|
|
|
<!-- ========== MAIN CONTENT ========== -->
|
|
<main id="content" role="main">
|
|
<!-- Navbar -->
|
|
<nav class="js-nav-scroller navbar navbar-expand-lg navbar-sidebar navbar-vertical navbar-light bg-white border-end"
|
|
data-hs-nav-scroller-options='{
|
|
"type": "vertical",
|
|
"target": ".navbar-nav .active",
|
|
"offset": 80
|
|
}'>
|
|
<!-- Navbar Toggle -->
|
|
<button type="button" class="navbar-toggler btn btn-white d-grid w-100" data-bs-toggle="collapse" data-bs-target="#navbarVerticalNavMenu" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarVerticalNavMenu">
|
|
<span class="d-flex justify-content-between align-items-center">
|
|
<span class="h6 mb-0">Nav menu</span>
|
|
|
|
<span class="navbar-toggler-default">
|
|
<i class="bi-list"></i>
|
|
</span>
|
|
|
|
<span class="navbar-toggler-toggled">
|
|
<i class="bi-x"></i>
|
|
</span>
|
|
</span>
|
|
</button>
|
|
<!-- End Navbar Toggle -->
|
|
|
|
<!-- Navbar Collapse -->
|
|
<div id="navbarVerticalNavMenu" class="collapse navbar-collapse">
|
|
<div class="navbar-brand-wrapper border-end" style="height: auto;">
|
|
<!-- Default Logo -->
|
|
<div class="d-flex align-items-center mb-3">
|
|
<a class="navbar-brand" href="../snippets/index.html" aria-label="Space">
|
|
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
|
</a>
|
|
<a class="navbar-brand-badge" href="../documentation/changelog.html">
|
|
<span class="badge bg-soft-primary text-primary ms-2">v4.1</span>
|
|
</a>
|
|
</div>
|
|
<!-- End Default Logo -->
|
|
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment nav-fill nav-justified">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="../documentation/index.html">Docs</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="../snippets/index.html">Snippets</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
|
|
<div class="docs-navbar-sidebar-aside-body navbar-sidebar-aside-body">
|
|
<ul id="navbarSettings" class="navbar-nav nav nav-vertical nav-tabs nav-tabs-borderless nav-sm">
|
|
<li class="nav-item">
|
|
<span class="nav-subtitle">Snippets</span>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/index.html">Introduction</a>
|
|
</li>
|
|
|
|
<li class="nav-item my-2 my-lg-5"></li>
|
|
|
|
<li class="nav-item">
|
|
<span class="nav-subtitle">Navbar / Heroes</span>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/navbar.html">Headers (Navbar)</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/hero-sections.html">Hero Sections</a>
|
|
</li>
|
|
|
|
<li class="nav-item my-2 my-lg-5"></li>
|
|
|
|
<li class="nav-item">
|
|
<span class="nav-subtitle">Content</span>
|
|
</li>
|
|
|
|
<li class="nav-item ">
|
|
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavFeaturesCollapse" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="snippetsSidebarNavFeaturesCollapse">Features</a>
|
|
|
|
<div id="snippetsSidebarNavFeaturesCollapse" class="nav-collapse collapse ">
|
|
<a class="nav-link " href="features-general.html">General</a>
|
|
<a class="nav-link " href="features-stats.html">Stats</a>
|
|
<a class="nav-link " href="features-step.html">Step</a>
|
|
<a class="nav-link " href="features-navs.html">Navs (Tabs)</a>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/icon-blocks.html">Icon Blocks</a>
|
|
</li>
|
|
|
|
<li class="nav-item ">
|
|
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavCardsCollapse" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="snippetsSidebarNavCardsCollapse">Cards</a>
|
|
|
|
<div id="snippetsSidebarNavCardsCollapse" class="nav-collapse collapse ">
|
|
<a class="nav-link " href="cards-grid.html">Grid</a>
|
|
<a class="nav-link " href="cards-list.html">List</a>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="nav-item ">
|
|
<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 active" 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">Feedback & Reviews</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">
|
|
<!-- Content -->
|
|
<div class="container content-space-1">
|
|
<div class="mb-4">
|
|
<h3>Student feedback</h3>
|
|
</div>
|
|
|
|
<div class="row mb-5">
|
|
<div class="col-lg-4">
|
|
<!-- Card -->
|
|
<div class="card card-sm bg-primary text-center mb-3">
|
|
<div class="card-body">
|
|
<span class="display-4 text-white">4.7</span>
|
|
|
|
<div class="d-flex justify-content-center gap-2 mb-2">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="22">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="22">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="22">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="22">
|
|
<img src="../assets/svg/illustrations/star-half.svg" alt="Review rating" width="22">
|
|
</div>
|
|
<span class="text-white">Course rating</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-8">
|
|
<!-- Ratings -->
|
|
<div class="d-grid gap-2">
|
|
<a class="row align-items-center" href="#">
|
|
<div class="col-7">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-2 text-end">
|
|
<div class="d-flex">
|
|
<div class="d-flex gap-1 me-2">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
</div>
|
|
<span>205</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</a>
|
|
<!-- End Row -->
|
|
|
|
<a class="row align-items-center" href="#">
|
|
<div class="col-7">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 53%;" aria-valuenow="53" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-2 text-end">
|
|
<div class="d-flex">
|
|
<div class="d-flex gap-1 me-2">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
</div>
|
|
<span>55</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</a>
|
|
<!-- End Row -->
|
|
|
|
<a class="row align-items-center" href="#">
|
|
<div class="col-7">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 20%;" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-2 text-end">
|
|
<div class="d-flex">
|
|
<div class="d-flex gap-1 me-2">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
</div>
|
|
<span>23</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</a>
|
|
<!-- End Row -->
|
|
|
|
<a class="row align-items-center" href="#">
|
|
<div class="col-7">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-2 text-end">
|
|
<div class="d-flex">
|
|
<div class="d-flex gap-1 me-2">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
</div>
|
|
<span>0</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</a>
|
|
<!-- End Row -->
|
|
|
|
<a class="row align-items-center" href="#">
|
|
<div class="col-7">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 1%;" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-2 text-end">
|
|
<div class="d-flex">
|
|
<div class="d-flex gap-1 me-2">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
</div>
|
|
<span>4</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</a>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Ratings -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<!-- Heading -->
|
|
<div class="border-bottom pb-4 mb-4">
|
|
<div class="row align-items-center">
|
|
<div class="col-sm-6 mb-2 mb-sm-0">
|
|
<h3 class="mb-0">Reviews</h3>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<form>
|
|
<div class="input-group input-group-merge">
|
|
<input type="search" class="form-control" placeholder="Search reviews" aria-label="Search reviews">
|
|
<div class="input-group-append input-group-text">
|
|
<i class="bi-search"></i>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Comment -->
|
|
<ul class="list-comment list-comment-divider mb-7">
|
|
<!-- Item -->
|
|
<li class="list-comment-item">
|
|
<div class="d-flex gap-1 mb-3">
|
|
<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>
|
|
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img3.jpg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0">Dave Austin</h5>
|
|
<span class="d-block small text-muted">April 3, 2019</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
|
|
<div class="mb-5">
|
|
<p>This course helped me in learning python in a very simple and effective way & boosts up my confidence. Concepts have been explained in a crystal clear way.</p>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<span class="text-dark fw-semi-bold">Dave</span>
|
|
<span>- Verified Purchase</span>
|
|
</div>
|
|
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center">
|
|
<span class="small me-2">Was this helpful?</span>
|
|
|
|
<div class="d-flex gap-2">
|
|
<a class="btn btn-white btn-xs" href="javascript:;">
|
|
<i class="bi-hand-thumbs-up me-1"></i> Yes <span>(45)</span>
|
|
</a>
|
|
<a class="btn btn-white btn-xs" href="javascript:;">
|
|
<i class="bi-hand-thumbs-down me-1"></i> No <span>(21)</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</li>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<li class="list-comment-item">
|
|
<div class="d-flex gap-1 mb-3">
|
|
<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>
|
|
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img1.jpg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0">Hailey</h5>
|
|
<span class="d-block small text-muted">January 19, 2019</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
|
|
<div class="mb-5">
|
|
<p>HUUUUUUUUUUUGE fan of Emily Milda</p>
|
|
<p>Master of Python, I took other classes also. I was very impressed, a very good teacher, in detail explanations, easy to understand. I owe him many thanks and hopefully. THAAAANK YOUU!</p>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<span class="text-dark fw-semi-bold">Hailey</span>
|
|
<span>- Verified Purchase</span>
|
|
</div>
|
|
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center">
|
|
<span class="small me-2">Was this helpful?</span>
|
|
|
|
<div class="d-flex gap-2">
|
|
<a class="btn btn-white btn-xs" href="javascript:;">
|
|
<i class="bi-hand-thumbs-up me-1"></i> Yes <span>(2)</span>
|
|
</a>
|
|
<a class="btn btn-white btn-xs" href="javascript:;">
|
|
<i class="bi-hand-thumbs-down me-1"></i> No <span>(0)</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</li>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<li class="list-comment-item">
|
|
<div class="d-flex gap-1 mb-3">
|
|
<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>
|
|
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img8.jpg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0">Chrizelle</h5>
|
|
<span class="d-block small text-muted">December 21, 2018</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
|
|
<div class="mb-5">
|
|
<p>Section 19 needs to be addressed. the 1st topic in the section tells us it is optional and can be skipped. this is not true and your instructions tell us to contact udemy support if there is an issue. we did and they told us to contact you.</p>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<span class="text-dark fw-semi-bold">Chrizelle</span>
|
|
<span>- Verified Purchase</span>
|
|
</div>
|
|
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center">
|
|
<span class="small me-2">Was this helpful?</span>
|
|
|
|
<div class="d-flex gap-2">
|
|
<a class="btn btn-white btn-xs" href="javascript:;">
|
|
<i class="bi-hand-thumbs-up me-1"></i> Yes <span>(0)</span>
|
|
</a>
|
|
<a class="btn btn-white btn-xs" href="javascript:;">
|
|
<i class="bi-hand-thumbs-down me-1"></i> No <span>(0)</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</li>
|
|
<!-- End Item -->
|
|
</ul>
|
|
<!-- End Comment -->
|
|
|
|
<div class="text-center">
|
|
<a class="btn btn-outline-primary btn-transition" href="#">See all reviews</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Content -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html1" role="tabpanel" aria-labelledby="nav-htmlTab1">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Content -->
|
|
<div class="container content-space-1">
|
|
<div class="mb-4">
|
|
<h3>Student feedback</h3>
|
|
</div>
|
|
|
|
<div class="row mb-5">
|
|
<div class="col-lg-4">
|
|
<!-- Card -->
|
|
<div class="card card-sm bg-primary text-center mb-3">
|
|
<div class="card-body">
|
|
<span class="display-4 text-white">4.7</span>
|
|
|
|
<div class="d-flex justify-content-center gap-2 mb-2">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="22">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="22">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="22">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="22">
|
|
<img src="../assets/svg/illustrations/star-half.svg" alt="Review rating" width="22">
|
|
</div>
|
|
<span class="text-white">Course rating</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-8">
|
|
<!-- Ratings -->
|
|
<div class="d-grid gap-2">
|
|
<a class="row align-items-center" href="#">
|
|
<div class="col-7">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-2 text-end">
|
|
<div class="d-flex">
|
|
<div class="d-flex gap-1 me-2">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
</div>
|
|
<span>205</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</a>
|
|
<!-- End Row -->
|
|
|
|
<a class="row align-items-center" href="#">
|
|
<div class="col-7">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 53%;" aria-valuenow="53" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-2 text-end">
|
|
<div class="d-flex">
|
|
<div class="d-flex gap-1 me-2">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
</div>
|
|
<span>55</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</a>
|
|
<!-- End Row -->
|
|
|
|
<a class="row align-items-center" href="#">
|
|
<div class="col-7">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 20%;" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-2 text-end">
|
|
<div class="d-flex">
|
|
<div class="d-flex gap-1 me-2">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
</div>
|
|
<span>23</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</a>
|
|
<!-- End Row -->
|
|
|
|
<a class="row align-items-center" href="#">
|
|
<div class="col-7">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-2 text-end">
|
|
<div class="d-flex">
|
|
<div class="d-flex gap-1 me-2">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
</div>
|
|
<span>0</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</a>
|
|
<!-- End Row -->
|
|
|
|
<a class="row align-items-center" href="#">
|
|
<div class="col-7">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 1%;" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-2 text-end">
|
|
<div class="d-flex">
|
|
<div class="d-flex gap-1 me-2">
|
|
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
<img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
</div>
|
|
<span>4</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</a>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Ratings -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<!-- Heading -->
|
|
<div class="border-bottom pb-4 mb-4">
|
|
<div class="row align-items-center">
|
|
<div class="col-sm-6 mb-2 mb-sm-0">
|
|
<h3 class="mb-0">Reviews</h3>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<form>
|
|
<div class="input-group input-group-merge">
|
|
<input type="search" class="form-control" placeholder="Search reviews" aria-label="Search reviews">
|
|
<div class="input-group-append input-group-text">
|
|
<i class="bi-search"></i>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Comment -->
|
|
<ul class="list-comment list-comment-divider mb-7">
|
|
<!-- Item -->
|
|
<li class="list-comment-item">
|
|
<div class="d-flex gap-1 mb-3">
|
|
<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>
|
|
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img3.jpg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0">Dave Austin</h5>
|
|
<span class="d-block small text-muted">April 3, 2019</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
|
|
<div class="mb-5">
|
|
<p>This course helped me in learning python in a very simple and effective way & boosts up my confidence. Concepts have been explained in a crystal clear way.</p>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<span class="text-dark fw-semi-bold">Dave</span>
|
|
<span>- Verified Purchase</span>
|
|
</div>
|
|
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center">
|
|
<span class="small me-2">Was this helpful?</span>
|
|
|
|
<div class="d-flex gap-2">
|
|
<a class="btn btn-white btn-xs" href="javascript:;">
|
|
<i class="bi-hand-thumbs-up me-1"></i> Yes <span>(45)</span>
|
|
</a>
|
|
<a class="btn btn-white btn-xs" href="javascript:;">
|
|
<i class="bi-hand-thumbs-down me-1"></i> No <span>(21)</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</li>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<li class="list-comment-item">
|
|
<div class="d-flex gap-1 mb-3">
|
|
<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>
|
|
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img1.jpg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0">Hailey</h5>
|
|
<span class="d-block small text-muted">January 19, 2019</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
|
|
<div class="mb-5">
|
|
<p>HUUUUUUUUUUUGE fan of Emily Milda</p>
|
|
<p>Master of Python, I took other classes also. I was very impressed, a very good teacher, in detail explanations, easy to understand. I owe him many thanks and hopefully. THAAAANK YOUU!</p>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<span class="text-dark fw-semi-bold">Hailey</span>
|
|
<span>- Verified Purchase</span>
|
|
</div>
|
|
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center">
|
|
<span class="small me-2">Was this helpful?</span>
|
|
|
|
<div class="d-flex gap-2">
|
|
<a class="btn btn-white btn-xs" href="javascript:;">
|
|
<i class="bi-hand-thumbs-up me-1"></i> Yes <span>(2)</span>
|
|
</a>
|
|
<a class="btn btn-white btn-xs" href="javascript:;">
|
|
<i class="bi-hand-thumbs-down me-1"></i> No <span>(0)</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</li>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<li class="list-comment-item">
|
|
<div class="d-flex gap-1 mb-3">
|
|
<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>
|
|
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img8.jpg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0">Chrizelle</h5>
|
|
<span class="d-block small text-muted">December 21, 2018</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
|
|
<div class="mb-5">
|
|
<p>Section 19 needs to be addressed. the 1st topic in the section tells us it is optional and can be skipped. this is not true and your instructions tell us to contact udemy support if there is an issue. we did and they told us to contact you.</p>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<span class="text-dark fw-semi-bold">Chrizelle</span>
|
|
<span>- Verified Purchase</span>
|
|
</div>
|
|
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center">
|
|
<span class="small me-2">Was this helpful?</span>
|
|
|
|
<div class="d-flex gap-2">
|
|
<a class="btn btn-white btn-xs" href="javascript:;">
|
|
<i class="bi-hand-thumbs-up me-1"></i> Yes <span>(0)</span>
|
|
</a>
|
|
<a class="btn btn-white btn-xs" href="javascript:;">
|
|
<i class="bi-hand-thumbs-down me-1"></i> No <span>(0)</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</li>
|
|
<!-- End Item -->
|
|
</ul>
|
|
<!-- End Comment -->
|
|
|
|
<div class="text-center">
|
|
<a class="btn btn-outline-primary btn-transition" href="#">See all reviews</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Content -->
|
|
</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">
|
|
<!-- Review Section -->
|
|
<div id="reviewSection" class="container">
|
|
<div class="row">
|
|
<div class="col-md-4 mb-7 mb-md-0">
|
|
<div class="border-bottom pb-4 mb-4">
|
|
<!-- Card -->
|
|
<div class="card bg-primary mb-3">
|
|
<div class="card-body">
|
|
<!-- Media -->
|
|
<div class="d-flex justify-content-center">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<span class="display-4 text-white">4.7</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<!-- Rating -->
|
|
<div class="d-flex gap-1 small">
|
|
<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 -->
|
|
<span class="text-white">287 reviews</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<h3>Rating breakdown</h3>
|
|
|
|
<!-- Ratings -->
|
|
<div class="d-grid gap-1">
|
|
<a class="row align-items-center" href="#" style="max-width: 25rem;">
|
|
<div class="col-3">
|
|
<span class="text-dark">5 stars</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-7">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-2 text-end">
|
|
<span>205</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</a>
|
|
<!-- End Row -->
|
|
|
|
<a class="row align-items-center" href="#" style="max-width: 25rem;">
|
|
<div class="col-3">
|
|
<span class="text-dark">4 stars</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-7">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 53%;" aria-valuenow="53" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-2 text-end">
|
|
<span>55</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</a>
|
|
<!-- End Row -->
|
|
|
|
<a class="row align-items-center" href="#" style="max-width: 25rem;">
|
|
<div class="col-3">
|
|
<span class="text-dark">3 stars</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-7">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 20%;" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-2 text-end">
|
|
<span>23</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</a>
|
|
<!-- End Row -->
|
|
|
|
<a class="row align-items-center" href="#" style="max-width: 25rem;">
|
|
<div class="col-3">
|
|
<span class="text-dark">2 stars</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-7">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-2 text-end">
|
|
<span>0</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</a>
|
|
<!-- End Row -->
|
|
|
|
<a class="row align-items-center" href="#" style="max-width: 25rem;">
|
|
<div class="col-3">
|
|
<span class="text-dark">1 stars</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-7">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 1%;" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-2 text-end">
|
|
<span>4</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</a>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Ratings -->
|
|
</div>
|
|
|
|
<h4 class="display-4 text-primary">77%</h4>
|
|
<p class="small">of customers recommend this product</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-8">
|
|
<div class="ps-md-4">
|
|
<!-- Heading -->
|
|
<div class="border-bottom pb-4 mb-4">
|
|
<div class="row align-items-center">
|
|
<div class="col-sm mb-2 mb-sm-0">
|
|
<h4 class="mb-0">Sort on</h4>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-auto">
|
|
<!-- Select -->
|
|
<select class="form-select form-select-sm">
|
|
<option value="mostRecent" selected>Most recent</option>
|
|
<option value="relevant">Relevant</option>
|
|
<option value="helpful">Helpful</option>
|
|
<option value="newest">Newest</option>
|
|
</select>
|
|
<!-- End Select -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Comment -->
|
|
<ul class="list-comment list-comment-divider mb-5">
|
|
<!-- Item -->
|
|
<li class="list-comment-item">
|
|
<div class="d-flex gap-1 mb-3">
|
|
<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>
|
|
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img9.jpg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0">Christina Kray</h5>
|
|
<span class="d-block small text-muted">April 3, 2019</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
|
|
<div class="mb-5">
|
|
<p>I bought this hat for my boyfriend, but then i found out he cheated on me so I kept it and I love it!! I wear it all the time and there is no problem with the fit even though its a “mens” hat.</p>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<span class="text-dark fw-semi-bold">Christina</span>
|
|
<span>- Verified Purchase</span>
|
|
</div>
|
|
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center">
|
|
<span class="small me-2">Was this helpful?</span>
|
|
|
|
<div class="d-flex gap-2">
|
|
<a class="btn btn-white btn-xs" href="javascript:;">
|
|
<i class="bi-hand-thumbs-up me-1"></i> Yes <span>(45)</span>
|
|
</a>
|
|
<a class="btn btn-white btn-xs" href="javascript:;">
|
|
<i class="bi-hand-thumbs-down me-1"></i> No <span>(21)</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</li>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<li class="list-comment-item">
|
|
<div class="d-flex gap-1 mb-3">
|
|
<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>
|
|
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img1.jpg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0">Hailey</h5>
|
|
<span class="d-block small text-muted">January 19, 2019</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
|
|
<div class="mb-5">
|
|
<p>Material is great and the hat is comfortable and stylish.</p>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<span class="text-dark fw-semi-bold">Hailey</span>
|
|
<span>- Verified Purchase</span>
|
|
</div>
|
|
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center">
|
|
<span class="small me-2">Was this helpful?</span>
|
|
|
|
<div class="d-flex gap-2">
|
|
<a class="btn btn-white btn-xs" href="javascript:;">
|
|
<i class="bi-hand-thumbs-up me-1"></i> Yes <span>(2)</span>
|
|
</a>
|
|
<a class="btn btn-white btn-xs" href="javascript:;">
|
|
<i class="bi-hand-thumbs-down me-1"></i> No <span>(0)</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</li>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<li class="list-comment-item">
|
|
<div class="d-flex gap-1 mb-3">
|
|
<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>
|
|
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img8.jpg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0">Chrizelle</h5>
|
|
<span class="d-block small text-muted">December 21, 2018</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
|
|
<div class="mb-5">
|
|
<p>A really well built cap. It looks great and wears just as well. A great staple in ball caps.</p>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<span class="text-dark fw-semi-bold">Chrizelle</span>
|
|
<span>- Verified Purchase</span>
|
|
</div>
|
|
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center">
|
|
<span class="small me-2">Was this helpful?</span>
|
|
|
|
<div class="d-flex gap-2">
|
|
<a class="btn btn-white btn-xs" href="javascript:;">
|
|
<i class="bi-hand-thumbs-up me-1"></i> Yes <span>(0)</span>
|
|
</a>
|
|
<a class="btn btn-white btn-xs" href="javascript:;">
|
|
<i class="bi-hand-thumbs-down me-1"></i> No <span>(0)</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</li>
|
|
<!-- End Item -->
|
|
</ul>
|
|
<!-- End Comment -->
|
|
|
|
<div class="d-sm-flex justify-content-sm-end gap-2">
|
|
<a class="btn btn-link" href="#">Read more <i class="bi-chevron-right small ms-1"></i></a>
|
|
<button type="button" class="btn btn-primary btn-transition rounded-pill">Write a review</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Review Section -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html2" role="tabpanel" aria-labelledby="nav-htmlTab2">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Review Section -->
|
|
<div id="reviewSection" class="container content-space-2 content-space-lg-3">
|
|
<div class="row">
|
|
<div class="col-md-4 mb-7 mb-md-0">
|
|
<div class="border-bottom pb-4 mb-4">
|
|
<!-- Card -->
|
|
<div class="card bg-primary mb-3">
|
|
<div class="card-body">
|
|
<!-- Media -->
|
|
<div class="d-flex justify-content-center">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<span class="display-4 text-white">4.7</span>
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<!-- Rating -->
|
|
<div class="d-flex gap-1 small">
|
|
<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 -->
|
|
<span class="text-white">287 reviews</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<h3>Rating breakdown</h3>
|
|
|
|
<!-- Ratings -->
|
|
<div class="d-grid gap-1">
|
|
<a class="row align-items-center" href="#" style="max-width: 25rem;">
|
|
<div class="col-3">
|
|
<span class="text-dark">5 stars</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-7">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-2 text-end">
|
|
<span>205</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</a>
|
|
<!-- End Row -->
|
|
|
|
<a class="row align-items-center" href="#" style="max-width: 25rem;">
|
|
<div class="col-3">
|
|
<span class="text-dark">4 stars</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-7">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 53%;" aria-valuenow="53" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-2 text-end">
|
|
<span>55</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</a>
|
|
<!-- End Row -->
|
|
|
|
<a class="row align-items-center" href="#" style="max-width: 25rem;">
|
|
<div class="col-3">
|
|
<span class="text-dark">3 stars</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-7">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 20%;" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-2 text-end">
|
|
<span>23</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</a>
|
|
<!-- End Row -->
|
|
|
|
<a class="row align-items-center" href="#" style="max-width: 25rem;">
|
|
<div class="col-3">
|
|
<span class="text-dark">2 stars</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-7">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-2 text-end">
|
|
<span>0</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</a>
|
|
<!-- End Row -->
|
|
|
|
<a class="row align-items-center" href="#" style="max-width: 25rem;">
|
|
<div class="col-3">
|
|
<span class="text-dark">1 stars</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-7">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 1%;" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-2 text-end">
|
|
<span>4</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</a>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Ratings -->
|
|
</div>
|
|
|
|
<h4 class="display-4 text-primary">77%</h4>
|
|
<p class="small">of customers recommend this product</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-8">
|
|
<div class="ps-md-4">
|
|
<!-- Heading -->
|
|
<div class="border-bottom pb-4 mb-4">
|
|
<div class="row align-items-center">
|
|
<div class="col-sm mb-2 mb-sm-0">
|
|
<h4 class="mb-0">Sort on</h4>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-auto">
|
|
<!-- Select -->
|
|
<select class="form-select form-select-sm">
|
|
<option value="mostRecent" selected>Most recent</option>
|
|
<option value="relevant">Relevant</option>
|
|
<option value="helpful">Helpful</option>
|
|
<option value="newest">Newest</option>
|
|
</select>
|
|
<!-- End Select -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Comment -->
|
|
<ul class="list-comment list-comment-divider mb-5">
|
|
<!-- Item -->
|
|
<li class="list-comment-item">
|
|
<div class="d-flex gap-1 mb-3">
|
|
<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>
|
|
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img9.jpg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0">Christina Kray</h5>
|
|
<span class="d-block small text-muted">April 3, 2019</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
|
|
<div class="mb-5">
|
|
<p>I bought this hat for my boyfriend, but then i found out he cheated on me so I kept it and I love it!! I wear it all the time and there is no problem with the fit even though its a “mens” hat.</p>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<span class="text-dark fw-semi-bold">Christina</span>
|
|
<span>- Verified Purchase</span>
|
|
</div>
|
|
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center">
|
|
<span class="small me-2">Was this helpful?</span>
|
|
|
|
<div class="d-flex gap-2">
|
|
<a class="btn btn-white btn-xs" href="javascript:;">
|
|
<i class="bi-hand-thumbs-up me-1"></i> Yes <span>(45)</span>
|
|
</a>
|
|
<a class="btn btn-white btn-xs" href="javascript:;">
|
|
<i class="bi-hand-thumbs-down me-1"></i> No <span>(21)</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</li>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<li class="list-comment-item">
|
|
<div class="d-flex gap-1 mb-3">
|
|
<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>
|
|
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img1.jpg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0">Hailey</h5>
|
|
<span class="d-block small text-muted">January 19, 2019</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
|
|
<div class="mb-5">
|
|
<p>Material is great and the hat is comfortable and stylish.</p>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<span class="text-dark fw-semi-bold">Hailey</span>
|
|
<span>- Verified Purchase</span>
|
|
</div>
|
|
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center">
|
|
<span class="small me-2">Was this helpful?</span>
|
|
|
|
<div class="d-flex gap-2">
|
|
<a class="btn btn-white btn-xs" href="javascript:;">
|
|
<i class="bi-hand-thumbs-up me-1"></i> Yes <span>(2)</span>
|
|
</a>
|
|
<a class="btn btn-white btn-xs" href="javascript:;">
|
|
<i class="bi-hand-thumbs-down me-1"></i> No <span>(0)</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</li>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<li class="list-comment-item">
|
|
<div class="d-flex gap-1 mb-3">
|
|
<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>
|
|
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img8.jpg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0">Chrizelle</h5>
|
|
<span class="d-block small text-muted">December 21, 2018</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
|
|
<div class="mb-5">
|
|
<p>A really well built cap. It looks great and wears just as well. A great staple in ball caps.</p>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<span class="text-dark fw-semi-bold">Chrizelle</span>
|
|
<span>- Verified Purchase</span>
|
|
</div>
|
|
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center">
|
|
<span class="small me-2">Was this helpful?</span>
|
|
|
|
<div class="d-flex gap-2">
|
|
<a class="btn btn-white btn-xs" href="javascript:;">
|
|
<i class="bi-hand-thumbs-up me-1"></i> Yes <span>(0)</span>
|
|
</a>
|
|
<a class="btn btn-white btn-xs" href="javascript:;">
|
|
<i class="bi-hand-thumbs-down me-1"></i> No <span>(0)</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</li>
|
|
<!-- End Item -->
|
|
</ul>
|
|
<!-- End Comment -->
|
|
|
|
<div class="d-sm-flex justify-content-sm-end gap-2">
|
|
<a class="btn btn-link" href="#">Read more <i class="bi-chevron-right small ms-1"></i></a>
|
|
<button type="button" class="btn btn-primary btn-transition rounded-pill">Write a review</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Review Section -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Content -->
|
|
</main>
|
|
<!-- ========== END MAIN CONTENT ========== -->
|
|
|
|
<!-- ========== SECONDARY CONTENTS ========== -->
|
|
<!-- Go To -->
|
|
<a class="js-go-to go-to position-fixed" href="javascript:;" style="visibility: hidden;"
|
|
data-hs-go-to-options='{
|
|
"offsetTop": 700,
|
|
"position": {
|
|
"init": {
|
|
"right": "2rem"
|
|
},
|
|
"show": {
|
|
"bottom": "2rem"
|
|
},
|
|
"hide": {
|
|
"bottom": "-2rem"
|
|
}
|
|
}
|
|
}'>
|
|
<i class="bi-chevron-up"></i>
|
|
</a>
|
|
<!-- ========== END SECONDARY CONTENTS ========== -->
|
|
|
|
|
|
<!-- JS Implementing Plugins -->
|
|
<script src="../assets/js/vendor.min.js"></script>
|
|
|
|
<!-- JS Front -->
|
|
<script src="../assets/js/theme.min.js"></script>
|
|
|
|
<!-- JS Plugins Init. -->
|
|
<script>
|
|
(function() {
|
|
// INITIALIZATION OF HEADER
|
|
// =======================================================
|
|
new HSHeader('#header').init()
|
|
|
|
|
|
// INITIALIZATION OF NAV SCROLLER
|
|
// =======================================================
|
|
new HsNavScroller('.js-nav-scroller', {
|
|
delay: 400,
|
|
offset: 140
|
|
})
|
|
|
|
|
|
// INITIALIZATION OF LISTJS COMPONENT
|
|
// =======================================================
|
|
HSCore.components.HSList.init('#snippetsSearch')
|
|
const snippetsSearch = HSCore.components.HSList.getItem('snippetsSearch')
|
|
|
|
|
|
// GET JSON FILE RESULTS
|
|
// =======================================================
|
|
fetch('../assets/json/snippets-search.json')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
snippetsSearch.add(data)
|
|
})
|
|
|
|
|
|
// INITIALIZATION OF GO TO
|
|
// =======================================================
|
|
new HSGoTo('.js-go-to')
|
|
})()
|
|
</script>
|
|
</body>
|
|
</html>
|