Card
Geek's cards provide a flexible and extensible content container with multiple variants and options.
Horizontal Card with Image
Courses
Getting started the Web App JavaScript in 2020
Our features, journey, tips and us being us. Lorem ipsum dolor sit amet, accumsan in, tempor dictum neque.
Dustin Warren
September 13, 2020
6 Min Read
<div class="card mb-4 card-hover ">
<div class="row g-0">
<!-- Image -->
<a href="blog-single.html" class="col-lg-8 col-md-12 col-12 bg-cover img-left-rounded" style="background-image: url(../assets/images/blog/blogpost-2.jpg);">
<img src="../assets/images/blog/blogpost-2.jpg" class="img-fluid d-lg-none invisible" alt=""></a>
<div class="col-lg-4 col-md-12 col-12">
<!-- Card Body -->
<div class="card-body">
<a href="#" class="badge bg-warning mb-3">Courses</a>
<h1 class="mb-4"> <a href="blog-single.html" class="text-inherit">
Getting started the Web App JavaScript in 2020
</a>
</h1>
<p>Our features, journey, tips and us being us. Lorem ipsum dolor sit amet, accumsan
in, tempor dictum neque.
</p>
<!-- Media Content -->
<div class="row align-items-center g-0 mt-7">
<div class="col-auto">
<img src="../assets/images/avatar/avatar-6.jpg" alt="" class="rounded-circle avatar-sm me-2">
</div>
<div class="col lh-1 ">
<h5 class="mb-1">Dustin Warren</h5>
<p class="fs-6 mb-0">September 13, 2020</p>
</div>
<div class="col-auto">
<p class="fs-6 mb-0">6 Min Read</p>
</div>
</div>
</div>
</div>
</div>
</div>Card Thumbnail
Courses
How to become modern Stack Developer in 2020
Lorem ipsum dolor sit amet, accu msan in, tempor dictum nequrem ipsum...
Reva Yokk
September 05, 2020
20 Min Read
<div class="col-xl-4 col-lg-4 col-md-6 col-12">
<!-- Card -->
<div class="card card-hover ">
<a href="blog-single.html">
<img src="../assets/images/blog/blogpost-2.jpg" class="img-fluid rounded-top-md" alt=""></a>
<!-- Card Body -->
<div class="card-body">
<a href="#" class="badge bg-info mb-3">Courses</a>
<h3><a href="blog-single.html" class="text-inherit">
How to become modern Stack Developer in 2020
</a>
</h3>
<p>Lorem ipsum dolor sit amet, accu msan in, tempor dictum nequrem ipsum...</p>
<!-- Media Content -->
<div class="row align-items-center g-0 mt-4">
<div class="col-auto">
<img src="../assets/images/avatar/avatar-7.jpg" alt="" class="rounded-circle avatar-sm me-2">
</div>
<div class="col lh-1">
<h5 class="mb-1">Reva Yokk</h5>
<p class="fs-6 mb-0">September 05, 2020</p>
</div>
<div class="col-auto">
<p class="fs-6 mb-0">20 Min Read</p>
</div>
</div>
</div>
</div>
</div>Card Course Thumbnail
<div class="row">
<div class="col-lg-3 col-md-6 col-12">
<!-- Card -->
<div class="card card-hover">
<a href="#"><img src="../assets/images/course/course-bootstrap.jpg" alt=""
class="img-fluid w-100 rounded-top-md"></a>
<!-- Card Body -->
<div class="card-body">
<h3 class="h4 mb-2 text-truncate-line-2 "><a href="#" class="text-inherit">An Ultimate
Guide for
Beginners Bootstrap 5</a>
</h3>
<ul class="mb-3 list-inline">
<li class="list-inline-item"><i class="mdi mdi-clock-time-four-outline text-muted me-1"></i>3h 56m
</li>
<li class="list-inline-item"><svg class="me-1 mt-n1" width="16" height="16"
viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3" y="8" width="2" height="6" rx="1" fill="#754FFE">
</rect>
<rect x="7" y="5" width="2" height="9" rx="1" fill="#DBD8E9">
</rect>
<rect x="11" y="2" width="2" height="12" rx="1" fill="#DBD8E9">
</rect>
</svg>Beginner </li>
</ul>
<div>
<span>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning"></i>
</span>
<span class="text-warning">4.5</span>
<span class="fs-6 text-muted">(9,300)</span>
</div>
</div>
<!-- Card Footer -->
<div class="card-footer">
<div class="row align-items-center g-0">
<div class="col-auto">
<img src="../assets/images/avatar/avatar-3.jpg" class="rounded-circle avatar-xs" alt="">
</div>
<div class="col ms-2">
<span>Morris Mccoy</span>
</div>
<div class="col-auto">
<a href="#" class="text-muted bookmark">
<i class="fe fe-bookmark "></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>Card Course Horizontal
<div class="px-4">
<div class="card mb-4 card-hover ">
<div class="row">
<a class="col-12 col-md-12 col-xl-3 col-lg-3 bg-cover rounded-start"
style="background-image: url(../assets/images/course/course-bootstrap.jpg);" href="#">
</a>
<div class="col-lg-9 col-md-12 col-12">
<!-- Card Body -->
<div class="card-body">
<h3 class="mb-2 text-truncate-line-2 "><a href="#" class="text-inherit">Bootstrap 5
Beginner
Tutorial</a></h3>
<ul class="mb-5 list-inline">
<li class="list-inline-item"><i class="mdi mdi-clock-time-four-outline text-muted me-1"></i>2h 46m
</li>
<li class="list-inline-item"><svg class="me-1 mt-n1" width="16" height="16"
viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3" y="8" width="2" height="6" rx="1" fill="#754FFE">
</rect>
<rect x="7" y="5" width="2" height="9" rx="1" fill="#754FFE">
</rect>
<rect x="11" y="2" width="2" height="12" rx="1" fill="#754FFE">
</rect>
</svg>Advance </li>
<li class="list-inline-item"> <span>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning"></i>
</span>
<span class="text-warning">4.5</span>
<span class="fs-6 text-muted">(7,900)</span>
</li>
</ul>
<div class="row align-items-center g-0">
<div class="col-auto">
<img src="../assets/images/avatar/avatar-2.jpg" class="rounded-circle avatar-xs" alt="">
</div>
<div class="col ms-2">
<span>Ted Hawkins</span>
</div>
<div class="col-auto">
<a href="#" class="text-muted bookmark">
<i class="fe fe-bookmark "></i>
</a>
</div>
</div>
<div>
</div>
</div>
</div>
</div>
</div>
</div>Card
<div class="card card-hover">
<div
class="d-flex justify-content-between align-items-center p-4">
<div class="d-flex">
<a href="course-path-single.html"> <img
src="../assets/images/path/path-bootstrap.jpg" alt=""
class="avatar-md"></a>
<div class="ms-3">
<h4 class="mb-1">
<a href="course-path-single.html"
class="text-inherit">
</a>
Bootstrap
</h4>
<p class="mb-0 fs-6"> <span
class="me-2"><span
class="text-dark fw-medium">12</span>
Courses</span>
<span><span
class="text-dark fw-medium">34
</span> Hours</span>
</p>
</div>
</div>
</div>
</div>Profile
Jenny Wilson
Front-end Developer, Designer
4.5Instructor Rating
42 Courses 1,10,124 Students
I start my development and digital career studying digital design. After taking a couple of programming classes I realize that code is what I wanted to be doing, so I start learning by myself.
View Details<div class="col-lg-6 col-md-6 col-12">
<!-- Card -->
<div class="card mb-4">
<!-- Card Body -->
<div class="card-body">
<div class="d-lg-flex">
<div class="position-relative">
<img src="../assets/images/avatar/avatar-1.jpg" alt="" class="rounded-circle
avatar-xl mb-3 mb-lg-0 ">
<a href="#" class="position-absolute
mt-2 ms-n3" data-bs-toggle="tooltip" data-placement="top" title="" data-original-title="Verifed">
<img src="../assets/images/checked-mark.svg" alt="" height="30" width="30">
</a>
</div>
<div class="ms-lg-4">
<h4 class="mb-0">Jenny Wilson</h4>
<p class="mb-0 fs-6">Front-end Developer, Designer</p>
<p class="fs-6 mb-1 text-warning"><span>4.5</span><span class="mdi mdi-star text-warning
me-2"></span>Instructor Rating</p>
<p class="fs-6 text-muted"><span class="ms-2"><span class="text-dark fw-medium">42</span>
Courses</span><span class="ms-2"><span class="text-dark fw-medium">1,10,124 </span>
Students</span>
</p>
<p>I start my development and digital career studying digital
design. After taking a couple of programming classes I realize
that code is what I wanted to be doing, so I start learning by
myself.
</p>
<a href="#" class="btn btn-outline-white btn-sm">
View Details
</a>
</div>
</div>
</div>
</div>
</div>List groups
Create lists of content in a card with a flush list group.
<div class="col-xl-4 col-lg-6 col-md-12 col-12">
<div class="card" id="courseAccordion">
<!-- List group -->
<ul class="list-group list-group-flush">
<li class="list-group-item p-0 bg-transparent">
<!-- Toggle -->
<a class="d-flex align-items-center text-inherit text-decoration-none py-3 px-4" data-bs-toggle="collapse" href="#courseTwo" role="button" aria-expanded="false" aria-controls="courseTwo">
<div class="me-auto">
<h4 class="mb-0">Course Overview</h4>
<p class="mb-0 text-muted">14 videos (1 hour and 17 minutes)</p>
</div>
<!-- Chevron -->
<span class="chevron-arrow ms-4">
<i class="fe fe-chevron-down fs-4"></i>
</span>
</a>
<!-- / .row -->
<!-- Collapse -->
<div class="collapse show" id="courseTwo" data-bs-parent="#courseAccordion">
<!-- List group -->
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div>
<div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 10%;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small>5% Completed</small>
</div>
</li>
<!-- List group -->
<li class="list-group-item">
<a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
<div class="text-truncate">
<span class="icon-shape bg-success text-white icon-sm rounded-circle me-2"><i class="mdi mdi-play fs-4"></i></span>
<span>Introduction</span>
</div>
<div class="text-truncate">
<span>1m 7s</span>
</div>
</a>
</li>
<!-- List group -->
<li class="list-group-item list-group-item-action active">
<a href="#" class="d-flex justify-content-between align-items-center text-white text-decoration-none">
<div class="text-truncate">
<span class="icon-shape bg-light text-primary icon-sm rounded-circle me-2"><i class="mdi mdi-play fs-4"></i></span>
<span>Installing Development Software</span>
</div>
<div class="text-truncate">
<span>3m 11s</span>
</div>
</a>
</li>
<!-- List group -->
<li class="list-group-item">
<a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
<div class="text-truncate">
<span class="icon-shape bg-light text-primary icon-sm rounded-circle me-2"><i class="mdi mdi-play fs-4"></i></span>
<span>Hello World Project from GitHub</span>
</div>
<div class="text-truncate">
<span>2m 33s</span>
</div>
</a>
</li>
<!-- List group -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
<div class="text-truncate">
<span class="icon-shape bg-light text-muted icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
<span>Our Sample Website</span>
</div>
<div class="text-truncate">
<span>2m 15s</span>
</div>
</a>
</li>
</ul>
</div>
</li>
<li class="list-group-item p-0">
<!-- Toggle -->
<a class="d-flex align-items-center text-inherit text-decoration-none py-3 px-4" data-bs-toggle="collapse" href="#courseThree" role="button" aria-expanded="false" aria-controls="courseThree">
<div class="me-auto">
<!-- Title -->
<h4 class="mb-0">JavaScript Beginning</h4>
<p class="mb-0 text-muted">6 videos (34 minutes)</p>
</div>
<!-- Chevron -->
<span class="chevron-arrow ms-4">
<i class="fe fe-chevron-down fs-4"></i>
</span>
</a>
<!-- / .row -->
<!-- Collapse -->
<div class="collapse" id="courseThree" data-bs-parent="#courseAccordion">
<!-- List group item -->
<ul class="list-group list-group-flush">
<li class="list-group-item disabled" aria-disabled="true">
<div>
<div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small>25% Completed</small>
</div>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
<div class="text-truncate">
<span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
<span>Introduction</span>
</div>
<div class="text-truncate">
<span>1m 41s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
<div class="text-truncate">
<span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
<span>Adding JavaScript Code to a Web Page</span>
</div>
<div class="text-truncate">
<span>3m 39s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
<div class="text-truncate">
<span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
<span> Working with JavaScript Files </span>
</div>
<div class="text-truncate">
<span>6m 18s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
<div class="text-truncate">
<span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
<span>Formatting Code </span>
</div>
<div class="text-truncate">
<span>2m 18s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
<div class="text-truncate">
<span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
<span> Detecting and Fixing Errors </span>
</div>
<div class="text-truncate">
<span>3m 14s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
<div class="text-truncate">
<span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
<span>Case Sensitivity </span>
</div>
<div class="text-truncate">
<span>1m 48s</span>
</div>
</a>
</li>
<li class="list-group-item disabled" aria-disabled="true">
<a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
<div class="text-truncate">
<span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
<span>Commenting Code </span>
</div>
<div class="text-truncate">
<span>2m 24s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
<div class="text-truncate">
<span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
<span>Summary</span>
</div>
<div class="text-truncate">
<span>2m 14s</span>
</div>
</a>
</li>
</ul>
</div>
</li>
<li class="list-group-item p-0">
<!-- Toggle -->
<a class="d-flex align-items-center text-inherit text-decoration-none py-3 px-4" data-bs-toggle="collapse" href="#courseFour" role="button" aria-expanded="false" aria-controls="courseFour">
<div class="me-auto">
<!-- Title -->
<h4 class="mb-0">Variables and Constants</h4>
<p class="mb-0 text-muted">6 videos (3 hour and 24 minutes)</p>
</div>
<!-- Chevron -->
<span class="chevron-arrow ms-4">
<i class="fe fe-chevron-down fs-4"></i>
</span>
</a>
<!-- / .row -->
<!-- Collapse -->
<div class="collapse" id="courseFour" data-bs-parent="#courseAccordion">
<!-- List group -->
<ul class="list-group list-group-flush">
<li class="list-group-item disabled" aria-disabled="true">
<div>
<div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small>0% Completed</small>
</div>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
<div class="text-truncate">
<span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
<span>Introduction</span>
</div>
<div class="text-truncate">
<span>1m 19s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
<div class="text-truncate">
<span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
<span>What Is a Variable?</span>
</div>
<div class="text-truncate">
<span>2m 11s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
<div class="text-truncate">
<span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
<span>Declaring Variables </span>
</div>
<div class="text-truncate">
<span>2m 30s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
<div class="text-truncate">
<span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
<span>Using let to Declare Variables </span>
</div>
<div class="text-truncate">
<span>3m 28s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
<div class="text-truncate">
<span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
<span>Naming Variables </span>
</div>
<div class="text-truncate">
<span>3m 14s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
<div class="text-truncate">
<span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
<span>Common Errors Using Variables </span>
</div>
<div class="text-truncate">
<span>3m 30s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
<div class="text-truncate">
<span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
<span>Changing Variable Values </span>
</div>
<div class="text-truncate">
<span>2m 4s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
<div class="text-truncate">
<span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
<span>Constants </span>
</div>
<div class="text-truncate">
<span>3m 15s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
<div class="text-truncate">
<span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
<span>The var Keyword </span>
</div>
<div class="text-truncate">
<span>2m 20s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
<div class="text-truncate">
<span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
<span>Summary</span>
</div>
<div class="text-truncate">
<span>1m 49s</span>
</div>
</a>
</li>
</ul>
</div>
</li>
<li class="list-group-item p-0">
<!-- Toggle -->
<a class="d-flex align-items-center text-inherit text-decoration-none py-3 px-4" data-bs-toggle="collapse" href="#courseSix" role="button" aria-expanded="false" aria-controls="courseSix">
<div class="me-auto">
<!-- Title -->
<h4 class="mb-0">Program Flow</h4>
<p class="mb-0 text-muted">5 videos (2 hour and 10 minutes)</p>
</div>
<!-- Chevron -->
<span class="chevron-arrow ms-4">
<i class="fe fe-chevron-down fs-4"></i>
</span>
</a>
<!-- / .row -->
<!-- Collapse -->
<div class="collapse" id="courseSix" data-bs-parent="#courseAccordion">
<!-- List group -->
<ul class="list-group list-group-flush">
<li class="list-group-item disabled" aria-disabled="true">
<div>
<div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small>0% Completed</small>
</div>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
<div class="text-truncate">
<span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
<span>Introduction</span>
</div>
<div class="text-truncate">
<span>1m 52s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
<div class="text-truncate">
<span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
<span>Clip Watched </span>
</div>
<div class="text-truncate">
<span>4m 27s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
<div class="text-truncate">
<span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
<span>Conditionals Using if() </span>
</div>
<div class="text-truncate">
<span>4m 25s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
<div class="text-truncate">
<span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
<span>Truthy and Falsy</span>
</div>
<div class="text-truncate">
<span>3m 30s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
<div class="text-truncate">
<span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
<span>if ... else </span>
</div>
<div class="text-truncate">
<span>3m 30s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
<div class="text-truncate">
<span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
<span>Comparing === and == </span>
</div>
<div class="text-truncate">
<span>1m 52s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
<div class="text-truncate">
<span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
<span>The Ternary Operator </span>
</div>
<div class="text-truncate">
<span>2m 47s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
<div class="text-truncate">
<span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
<span>Block Scope Using let </span>
</div>
<div class="text-truncate">
<span>2m 21s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
<div class="text-truncate">
<span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
<span>Looping with for() </span>
</div>
<div class="text-truncate">
<span>5m 30s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#" class="d-flex justify-content-between align-items-center text-inherit text-decoration-none">
<div class="text-truncate">
<span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
<span>Looping with do ... while() </span>
</div>
<div class="text-truncate">
<span>1m 58s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a class="mb-0 d-flex justify-content-between align-items-center text-inherit text-decoration-none">
<div class="text-truncate">
<span class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i class="fe fe-lock fs-4"></i></span>
<span>Summary </span>
</div>
<div class="text-truncate">
<span>2m 21s</span>
</div>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>Card with Icon
Make Education Accessible
Quis cursus turpis in habitant sagittis amet dolor malesuada ut. Volutpat nunc id blanvolutpat nunc.
Learn and Grow
Quis cursus turpis in habitant sagittis amet dolor malesuada ut. Volutpat nunc id blanvolutpat nunc.
Make Education Accessible
Quis cursus turpis in habitant sagittis amet dolor malesuada ut. Volutpat nunc id blanvolutpat nunc.
<div class="container">
<div class="row">
<div class="col-md-4 col-12">
<!-- card -->
<div class="card mb-4 mb-lg-0">
<!-- card body -->
<div class="card-body p-5">
<!-- icon -->
<div class="mb-3"><i class="mdi mdi-school-outline mdi-48px text-primary lh-1 "></i></div>
<h3 class="mb-2">Make Education Accessible</h3>
<p class="mb-0">Quis cursus turpis in habitant sagittis amet dolor malesuada ut. Volutpat nunc id
blanvolutpat nunc.
</p>
</div>
</div>
</div>
<div class="col-md-4 col-12">
<!-- card -->
<div class="card mb-4 mb-lg-0">
<!-- card body -->
<div class="card-body p-5">
<!-- icon -->
<div class="mb-3"><i class="mdi mdi-account-group mdi-48px text-primary lh-1 "></i></div>
<h3 class="mb-2">Learn and Grow</h3>
<p class="mb-0">Quis cursus turpis in habitant sagittis amet dolor malesuada ut. Volutpat nunc id
blanvolutpat nunc.
</p>
</div>
</div>
</div>
<div class="col-md-4 col-12">
<!-- card -->
<div class="card mb-4 mb-lg-0">
<!-- card body -->
<div class="card-body p-5">
<!-- icon -->
<div class="mb-3"><i class="mdi mdi-finance mdi-48px text-primary lh-1 "></i></div>
<h3 class="mb-2">Make Education Accessible</h3>
<p class="mb-0">Quis cursus turpis in habitant sagittis amet dolor malesuada ut. Volutpat nunc id
blanvolutpat nunc.
</p>
</div>
</div>
</div>
</div>
</div>Card 2 Column
Course Description
What will you learn?
Vanilla JS is a fast, lightweight, cross-platformframework for building incredible, powerful JavaScript applications.
Introduction to JavaScript Free
Courses - 1 6 Lessons 1 Hour 12 Min
In et tempus dui, in porta dolor. Donec molestie a purus ut interdum. Donec quis felis dignissim, luctus libero ornare.
View Chapter Details
JavaScript Beginning
Courses - 2 4 Lessons 32 Min
Malesuada fames ac turpis egesta mpor tempus tincidunt. Aliquam congue lacus ac tellus consectetur malesuada.
View Chapter Details
Variables and Constants
Courses - 3 8 Lessons 10 Min
Aliquam pulvinar eros a dictur vitae diam imperdiet, ornare turpis vequet elit nec, imperdiet lectuna liquam qs.
View Chapter Details
Types and Operators
Courses - 4 10 Lessons 32 Min
In lobortis quam eu augue spendisse imperdiet nec orci ipsum, tempus pharetra posuere imperdiet, lacinia a nisl.
View Chapter Details<div class="py-8 bg-light">
<div class="container">
<div class="row mb-8 justify-content-center">
<div class="col-lg-8 col-md-12 col-12 text-center">
<!-- caption -->
<span class="text-primary mb-3 d-block text-uppercase fw-semi-bold ls-xl">Course Description</span>
<h2 class="mb-2 display-4 fw-bold">What will you learn?</h2>
<p class="lead">Vanilla JS is a fast, lightweight, cross-platformframework for building incredible, powerful
JavaScript applications.</p>
</div>
</div>
<!-- row -->
<div class="row">
<div class="col-lg-6 col-md-12 col-12">
<!-- Features -->
<div class="card mb-4">
<!-- Card body -->
<div class="card-body p-6">
<div class="d-md-flex mb-4">
<div class="mb-3 mb-md-0">
<!-- Img -->
<img src="../assets/images/svg/feature-icon-1.svg" alt="" class=" bg-primary icon-shape icon-xxl rounded-circle">
</div>
<!-- Content -->
<div class="ms-md-3">
<h2 class="fw-bold mb-1">Introduction to JavaScript <span class="badge bg-warning ms-2">Free</span></h2>
<p class="text-uppercase fs-6 fw-semi-bold mb-0"><span class="text-dark">Courses -
1</span> <span class="ms-3">6 Lessons</span> <span class="ms-3">1 Hour 12 Min</span></p>
</div>
</div>
<p class="mb-4 fs-4">In et tempus dui, in porta dolor. Donec molestie a purus ut interdum. Donec
quis felis dignissim, luctus libero ornare.</p>
<a href="#" class="btn-link" data-bs-toggle="modal" data-bs-target="#courseModal">View Chapter Details <i class="fe fe-plus"></i></a>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-12">
<!-- features -->
<div class="card mb-4">
<div class="card-body p-6">
<div class="d-md-flex mb-4">
<div class="mb-3 mb-md-0">
<img src="../assets/images/svg/feature-icon-2.svg" alt="" class=" bg-primary icon-shape icon-xxl rounded-circle">
</div>
<div class="ms-md-3">
<h2 class="fw-bold mb-1">JavaScript Beginning</h2>
<p class="text-uppercase fs-6 fw-semi-bold mb-0"><span class="text-dark">Courses -
2</span> <span class="ms-3">4 Lessons</span> <span class="ms-3">32 Min</span></p>
</div>
</div>
<p class="mb-4 fs-4">Malesuada fames ac turpis egesta mpor tempus tincidunt. Aliquam congue lacus
ac tellus consectetur malesuada.</p>
<a href="#" class="btn-link" data-bs-toggle="modal" data-bs-target="#courseModal">View Chapter Details <i class="fe fe-plus"></i></a>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-12">
<!-- features -->
<div class="card mb-4">
<div class="card-body p-6">
<div class="d-md-flex mb-4">
<div class="mb-3 mb-md-0">
<img src="../assets/images/svg/feature-icon-3.svg" alt="" class=" bg-primary icon-shape icon-xxl rounded-circle">
</div>
<div class="ms-md-3">
<h2 class="fw-bold mb-1">Variables and Constants</h2>
<p class="text-uppercase fs-6 fw-semi-bold mb-0"><span class="text-dark">Courses -
3</span> <span class="ms-3">8 Lessons</span> <span class="ms-3">10 Min</span></p>
</div>
</div>
<p class="mb-4 fs-4">Aliquam pulvinar eros a dictur vitae diam imperdiet, ornare turpis vequet
elit nec, imperdiet lectuna liquam qs.</p>
<a href="#" class="btn-link" data-bs-toggle="modal" data-bs-target="#courseModal">View Chapter Details <i class="fe fe-plus"></i></a>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-12">
<!-- features -->
<div class="card mb-4">
<div class="card-body p-6">
<div class="d-md-flex mb-4">
<div class="mb-3 mb-md-0">
<img src="../assets/images/svg/feature-icon-4.svg" alt="" class=" bg-primary icon-shape icon-xxl rounded-circle">
</div>
<div class="ms-md-3">
<h2 class="fw-bold mb-1">Types and Operators</h2>
<p class="text-uppercase fs-6 fw-semi-bold mb-0"><span class="text-dark">Courses -
4</span> <span class="ms-3">10 Lessons</span> <span class="ms-3">32 Min</span></p>
</div>
</div>
<p class="mb-4 fs-4">In lobortis quam eu augue spendisse imperdiet nec orci ipsum, tempus pharetra
posuere imperdiet, lacinia a nisl.</p>
<a href="#" class="btn-link" data-bs-toggle="modal" data-bs-target="#courseModal">View Chapter Details <i class="fe fe-plus"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>Card Thumbnail V2
<div class="py-8">
<div class="container">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<!-- Card -->
<div class="card card-hover">
<a href="../course-single.html" class="card-img-top"><img src="../../assets/images/course/course-javascript.jpg" alt="" class="rounded-top-md card-img-top"></a>
<!-- Card Body -->
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-3">
<span class="badge bg-info-soft">Intermediate</span>
<a href="#" class="text-muted fs-5"><i class="fe fe-heart align-middle"></i></a>
</div>
<h4 class="mb-2 text-truncate-line-2 "><a href="../course-single.html" class="text-inherit">How to
easily create a website with JavaScript </a></h4>
<small>By: Claire Evans</small>
<div class="lh-1 mt-3">
<span>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning"></i>
</span>
<span class="text-warning">4.5</span>
<span class="fs-6 text-muted">(9,300)</span>
</div>
</div>
<!-- Card Footer -->
<div class="card-footer">
<div class="row align-items-center g-0">
<div class="col">
<h5 class="mb-0">$39.00</h5>
</div>
<div class="col-auto">
<a href="#" class="text-inherit">
<i class="fe fe-shopping-cart text-primary align-middle ms-2"></i>Get Enrolled
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<!-- Card -->
<div class="card card-hover">
<a href="../course-single.html" class="card-img-top"><img src="../../assets/images/course/course-css.jpg" alt="" class="card-img-top rounded-top-md"></a>
<!-- Card Body -->
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-3">
<span class="badge bg-danger-soft">Beginner</span>
<a href="#" class="text-muted fs-5"><i class="fe fe-heart align-middle"></i></a>
</div>
<h4 class="mb-2 text-truncate-line-2 "><a href="../course-single.html" class="text-inherit">CSS:
ultimate CSS course from beginner to advanced</a></h4>
<small>By: Carolyn Welborn</small>
<div class="lh-1 mt-3">
<span>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning"></i>
</span>
<span class="text-warning">4.5</span>
<span class="fs-6 text-muted">(8,890)</span>
</div>
</div>
<!-- Card Footer -->
<div class="card-footer">
<div class="row align-items-center g-0">
<div class="col">
<h5 class="mb-0">$30.00</h5>
</div>
<div class="col-auto">
<a href="#" class="text-inherit">
<i class="fe fe-shopping-cart text-primary align-middle ms-2"></i>Get Enrolled
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<!-- Card -->
<div class="card card-hover">
<a href="../course-single.html" class="card-img-top"><img src="../../assets/images/course/course-gatsby.jpg" alt="" class="card-img-top rounded-top-md"></a>
<!-- Card Body -->
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-3">
<span class="badge bg-info-soft">Intermediate</span>
<a href="#" class="text-muted fs-5"><i class="fe fe-heart align-middle"></i></a>
</div>
<h4 class="mb-2 text-truncate-line-2 "><a href="../course-single.html" class="text-inherit">The
Gatsby
Course: build web application</a></h4>
<small>By: Floyd Amall</small>
<div class="lh-1 mt-3">
<span>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning"></i>
</span>
<span class="text-warning">4.5</span>
<span class="fs-6 text-muted">(13,245)</span>
</div>
</div>
<!-- Card Footer -->
<div class="card-footer">
<div class="row align-items-center g-0">
<div class="col">
<h5 class="mb-0">$34.00</h5>
</div>
<div class="col-auto">
<a href="#" class="text-inherit">
<i class="fe fe-shopping-cart text-primary align-middle ms-2"></i>Get Enrolled
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Card icon with hover
Browse Category
Discover jobs across popular roles
Select a role and we'll show you relevant jobs for it!
<div class="py-lg-14 bg-light pt-8 pb-10">
<!-- container -->
<div class="container">
<div class="row">
<!-- col -->
<div class="col-md-12 col-12">
<div class="row text-center">
<div class="col-md-12 px-lg-10 mb-8 mt-6">
<!-- text -->
<span class="text-uppercase text-primary fw-semi-bold ls-md">Browse Category
</span>
<!-- heading -->
<h2 class="h1 fw-bold mt-3">Discover jobs across popular roles
</h2>
<!-- text -->
<p class="mb-0 fs-4">Select a role and we'll show you relevant jobs for it!</p>
</div>
</div>
<div class="row gy-4">
<div class="col-lg-3 col-md-4 col-12">
<!-- card -->
<div class="card border-top border-muted border-4 card-hover-with-icon">
<!-- card body -->
<div class="card-body">
<!-- icon -->
<div class="icon-shape icon-lg rounded-circle bg-light text-muted mb-3 card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-activity" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M6 2a.5.5 0 0 1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0 1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964 4.47 8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5 0 0 1 6 2Z"></path>
</svg></div>
<div class="d-flex align-items-center justify-content-between">
<div>
<!-- heading -->
<h4 class="mb-0">Analtyics</h4>
<!-- text -->
<p class="mb-0 text-muted">2k Jobs</p>
</div>
<!-- arrow -->
<a href="#" class="text-inherit">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-12">
<!-- card -->
<div class="card border-top border-muted border-4 card-hover-with-icon">
<!-- card body -->
<div class="card-body">
<!-- icon -->
<div class="icon-shape icon-lg rounded-circle bg-light text-muted mb-3 card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-palette" viewBox="0 0 16 16">
<path d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"></path>
<path d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8zm-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7z"></path>
</svg></div>
<div class="d-flex align-items-center justify-content-between">
<div>
<!-- heading -->
<h4 class="mb-0">UI / UX Design</h4>
<!-- text -->
<p class="mb-0 text-muted">1k Jobs</p>
</div>
<!-- icon -->
<a href="#" class="text-inherit">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-12">
<!-- card -->
<div class="card border-top border-muted border-4 card-hover-with-icon">
<!-- card body -->
<div class="card-body">
<div class="icon-shape icon-lg rounded-circle bg-light text-muted mb-3 card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-code-slash" viewBox="0 0 16 16">
<path d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294l4-13zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z"></path>
</svg></div>
<div class="d-flex align-items-center justify-content-between">
<div>
<!-- heading -->
<h4 class="mb-0">Developer</h4>
<!-- text -->
<p class="mb-0 text-muted">800 Jobs</p>
</div>
<a href="#" class="text-inherit">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-12">
<!-- card -->
<div class="card border-top border-muted border-4 card-hover-with-icon">
<!-- card body -->
<div class="card-body">
<!-- icon -->
<div class="icon-shape icon-lg rounded-circle bg-light text-muted mb-3 card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-people" viewBox="0 0 16 16">
<path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"></path>
</svg></div>
<div class="d-flex align-items-center justify-content-between">
<div>
<!-- heading -->
<h4 class="mb-0">Product Manager</h4>
<!-- text -->
<p class="mb-0 text-muted">1.2K Jobs</p>
</div>
<!-- icon -->
<a href="#" class="text-inherit">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-12">
<!-- card -->
<div class="card border-top border-muted border-4 card-hover-with-icon">
<!-- card body -->
<div class="card-body">
<div class="icon-shape icon-lg rounded-circle bg-light text-muted mb-3 card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"></path>
</svg></div>
<div class="d-flex align-items-center justify-content-between">
<div>
<!-- heading -->
<h4 class="mb-0">SEO</h4>
<!-- text -->
<p class="mb-0 text-muted">1200 Jobs</p>
</div>
<!-- icon -->
<a href="#" class="text-inherit">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-12">
<!-- card -->
<div class="card border-top border-muted border-4 card-hover-with-icon">
<!-- card body -->
<div class="card-body">
<!-- icon -->
<div class="icon-shape icon-lg rounded-circle bg-light text-muted mb-3 card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-bar-chart" viewBox="0 0 16 16">
<path d="M4 11H2v3h2v-3zm5-4H7v7h2V7zm5-5v12h-2V2h2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-2zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm-5 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3z"></path>
</svg></div>
<div class="d-flex align-items-center justify-content-between">
<div>
<!-- heading -->
<h4 class="mb-0">Data Analytics</h4>
<p class="mb-0 text-muted">200 Jobs</p>
</div>
<!-- icon -->
<a href="#" class="text-inherit">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-12">
<!-- card -->
<div class="card border-top border-muted border-4 card-hover-with-icon ">
<!-- card body -->
<div class="card-body">
<div class="icon-shape icon-lg rounded-circle bg-light text-muted mb-3 card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-phone" viewBox="0 0 16 16">
<path d="M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z"></path>
<path d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path>
</svg></div>
<div class="d-flex align-items-center justify-content-between">
<div>
<!-- heading -->
<h4 class="mb-0">Mobile Developer
</h4>
<!-- text -->
<p class="mb-0 text-muted">120 Jobs</p>
</div>
<a href="#" class="text-inherit">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-12">
<!-- card -->
<div class="card border-top border-muted border-4 card-hover-with-icon">
<!-- card body -->
<div class="card-body">
<!-- icon -->
<div class="icon-shape icon-lg rounded-circle bg-light text-muted mb-3 card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-bank" viewBox="0 0 16 16">
<path d="M8 .95 14.61 4h.89a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5H15v7a.5.5 0 0 1 .485.379l.5 2A.5.5 0 0 1 15.5 17H.5a.5.5 0 0 1-.485-.621l.5-2A.5.5 0 0 1 1 14V7H.5a.5.5 0 0 1-.5-.5v-2A.5.5 0 0 1 .5 4h.89L8 .95zM3.776 4h8.447L8 2.05 3.776 4zM2 7v7h1V7H2zm2 0v7h2.5V7H4zm3.5 0v7h1V7h-1zm2 0v7H12V7H9.5zM13 7v7h1V7h-1zm2-1V5H1v1h14zm-.39 9H1.39l-.25 1h13.72l-.25-1z"></path>
</svg></div>
<div class="d-flex align-items-center justify-content-between">
<div>
<!-- heading -->
<h4 class="mb-0">Finance
</h4>
<!-- text -->
<p class="mb-0 text-muted">5k Jobs</p>
</div>
<div>
<!-- icon -->
<a href="#" class="text-inherit">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- button -->
<div class="col-12 mt-8 text-center">
<a href="#" class="btn btn-outline-primary">View All Category</a>
</div>
</div>
</div>
</div>
</div>
</div>