Card
Geek's cards provide a flexible and extensible content container with multiple variants and options.
Card Image Styled Webinar
<section class="py-6">
<div class="container">
<div class="row">
<div class="col-xxl-4 col-xl-6 col-lg-12">
<div class="card mb-4 mb-xl-0 card-hover border">
<a href="#!">
<img src="../assets/images/education/edu-webinar-1.jpg" alt="webinar-1" class="img-fluid w-100 rounded-top-3">
</a>
<div class="card-body">
<h3 class="mb-4 text-truncate">
<a href="#!" class="text-inherit">Education Edition Deployment And Set Up</a>
</h3>
<div class="mb-4">
<div class="mb-3 lh-1">
<span class="me-1">
<i class="bi bi-calendar-check"></i>
</span>
<span>Thu, November 10, 2023</span>
</div>
<div class="lh-1">
<span class="align-text-top me-1">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-clock" viewBox="0 0 16 16">
<path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
</svg> </span>
<span>6:00 PM – 8:00 PM GMT</span>
</div>
</div>
<a href="#!" class="btn btn-light-primary text-primary">Register Now</a>
</div>
</div>
</div>
</div>
</div>
</section>Card Top Image
<section class="py-6">
<div class="container">
<div class="row">
<div class="col-xxl-3 col-xl-6 col-12">
<div class="card mb-4 card-hover border">
<a href="#!">
<img src="../assets/images/education/edu-img-1.jpg" alt="writing"
class="img-fluid card-img-top">
</a>
<div class="card-body">
<h4 class="mb-3">
<a href="#!" class="text-inherit">Content Writing</a>
</h4>
<div class="d-flex align-items-center mb-5 lh-1">
<div>
<span class="text-inherit fw-semibold">4.9</span>
<span class="ms-1"><svg xmlns="http://www.w3.org/2000/svg" width="12"
height="12" fill="var(--gk-success)"
class="bi bi-star-fill align-baseline" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z">
</path>
</svg>
(31)
</span>
</div>
<div class=" mx-1"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="var(--gk-gray-400)" class="bi bi-dot" viewBox="0 0 16 16">
<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"></path>
</svg></div>
<div>
<span class="text-inherit fw-semibold me-1">8</span> Hours
</div>
</div>
<a href="#!">Enroll Today <span class=""><svg xmlns="http://www.w3.org/2000/svg"
width="20" height="20" fill="currentColor" class="bi bi-arrow-right-short"
viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z">
</path>
</svg></span></a>
</div>
</div>
</div>
<div class="col-xxl-3 col-xl-6 col-12">
<div class="card mb-4 card-hover border">
<a href="#!">
<img src="../assets/images/education/edu-img-2.jpg" alt="design"
class="img-fluid card-img-top">
</a>
<div class="card-body">
<h4 class="mb-3">
<a href="#!" class="text-inherit">UI / UX Design</a>
</h4>
<div class="d-flex align-items-center mb-5 lh-1">
<span class="badge bg-success me-2">New</span>
<div>
<span class="text-inherit fw-semibold">4.9</span>
<span class="ms-1"><svg xmlns="http://www.w3.org/2000/svg" width="12"
height="12" fill="var(--gk-success)"
class="bi bi-star-fill align-baseline" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z">
</path>
</svg>
(23)
</span>
</div>
<div class=" mx-1"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="var(--gk-gray-400)" class="bi bi-dot" viewBox="0 0 16 16">
<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"></path>
</svg></div>
<div>
<span class="text-inherit fw-semibold me-1">12</span>Hours
</div>
</div>
<a href="#!">Enroll Today <span class=""><svg xmlns="http://www.w3.org/2000/svg"
width="20" height="20" fill="currentColor" class="bi bi-arrow-right-short"
viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z">
</path>
</svg></span></a>
</div>
</div>
</div>
</div>
</div>
</section>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-8">
<!-- 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-8 mb-8 mt-6">
<!-- text -->
<span class="text-uppercase text-primary fw-semibold 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-xl-3 col-lg-6 col-md-6 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 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 ">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-xl-3 col-lg-6 col-md-6 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 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 ">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-xl-3 col-lg-6 col-md-6 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 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 ">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-xl-3 col-lg-6 col-md-6 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 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 ">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-xl-3 col-lg-6 col-md-6 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 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 ">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-xl-3 col-lg-6 col-md-6 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 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 ">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-xl-3 col-lg-6 col-md-6 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 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 ">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-xl-3 col-lg-6 col-md-6 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 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 ">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>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"><img
src="../assets/images/course/course-javascript.jpg" alt=""
class=" 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=" 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="mt-3 d-flex align-baseline lh-1">
<span class="fs-6">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
</span>
<span class="text-warning mx-1">4.5</span>
<span class="fs-6 ">(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 me-2"></i>Get Enrolled
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<!-- Card -->
<div class="card card-hover">
<a href="../course-single.html"><img
src="../assets/images/course/course-css.jpg" alt=""
class="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-danger-soft">Beginner</span>
<a href="#" class=" 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="mt-3 d-flex align-baseline lh-1">
<span class="fs-6">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
</span>
<span class="text-warning mx-1">4.5</span>
<span class="fs-6 ">(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 me-2"></i>Get Enrolled
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<!-- Card -->
<div class="card card-hover">
<a href="../course-single.html"><img
src="../assets/images/course/course-gatsby.jpg" alt=""
class="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=" 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="mt-3 d-flex align-baseline lh-1">
<span class="fs-6">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
</span>
<span class="text-warning mx-1">4.5</span>
<span class="fs-6 ">(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">$34.00</h5>
</div>
<div class="col-auto">
<a href="#" class="text-inherit">
<i class="fe fe-shopping-cart text-primary align-middle me-2"></i>Get Enrolled
</a>
</div>
</div>
</div>
</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-semibold 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="icon"
class="bg-primary icon-shape icon-xxl rounded-circle">
</div>
<!-- Content -->
<div class="ms-md-4">
<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-semibold 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="icon"
class="bg-primary icon-shape icon-xxl rounded-circle">
</div>
<div class="ms-md-4">
<h2 class="fw-bold mb-1">JavaScript Beginning</h2>
<p class="text-uppercase fs-6 fw-semibold 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="icon"
class="bg-primary icon-shape icon-xxl rounded-circle">
</div>
<div class="ms-md-4">
<h2 class="fw-bold mb-1">Variables and Constants</h2>
<p class="text-uppercase fs-6 fw-semibold 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="icon"
class="bg-primary icon-shape icon-xxl rounded-circle">
</div>
<div class="ms-md-4">
<h2 class="fw-bold mb-1">Types and Operators</h2>
<p class="text-uppercase fs-6 fw-semibold 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 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"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"
fill="currentColor" class="bi bi-mortarboard text-primary" viewBox="0 0 16 16">
<path
d="M8.211 2.047a.5.5 0 0 0-.422 0l-7.5 3.5a.5.5 0 0 0 .025.917l7.5 3a.5.5 0 0 0 .372 0L14 7.14V13a1 1 0 0 0-1 1v2h3v-2a1 1 0 0 0-1-1V6.739l.686-.275a.5.5 0 0 0 .025-.917l-7.5-3.5ZM8 8.46 1.758 5.965 8 3.052l6.242 2.913L8 8.46Z" />
<path
d="M4.176 9.032a.5.5 0 0 0-.656.327l-.5 1.7a.5.5 0 0 0 .294.605l4.5 1.8a.5.5 0 0 0 .372 0l4.5-1.8a.5.5 0 0 0 .294-.605l-.5-1.7a.5.5 0 0 0-.656-.327L8 10.466 4.176 9.032Zm-.068 1.873.22-.748 3.496 1.311a.5.5 0 0 0 .352 0l3.496-1.311.22.748L8 12.46l-3.892-1.556Z" />
</svg></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">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor"
class="bi bi-people-fill text-primary" viewBox="0 0 16 16">
<path
d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7Zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm-5.784 6A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216ZM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" />
</svg>
</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"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"
fill="currentColor" class="bi bi-graph-up-arrow text-primary" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M0 0h1v15h15v1H0V0Zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5Z" />
</svg></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>List groups
Create lists of content in a card with a flush list group.
<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 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 ">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 ">
<div class="text-truncate">
<span
class="icon-shape bg-success text-white icon-sm rounded-circle me-2"><svg
xmlns="http://www.w3.org/2000/svg" width="14" height="14"
fill="currentColor" class="bi bi-play-fill" viewBox="0 0 16 16">
<path
d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z" />
</svg></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 ">
<div class="text-truncate">
<span
class="icon-shape bg-light text-primary icon-sm rounded-circle me-2"><svg
xmlns="http://www.w3.org/2000/svg" width="14" height="14"
fill="currentColor" class="bi bi-play-fill" viewBox="0 0 16 16">
<path
d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z" />
</svg></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 ">
<div class="text-truncate">
<span
class="icon-shape bg-light text-primary icon-sm rounded-circle me-2"><svg
xmlns="http://www.w3.org/2000/svg" width="14" height="14"
fill="currentColor" class="bi bi-play-fill" viewBox="0 0 16 16">
<path
d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z" />
</svg></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 ">
<div class="text-truncate">
<span class="icon-shape bg-light 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 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 ">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 ">
<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 ">
<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 ">
<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 ">
<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 ">
<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 ">
<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 ">
<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 ">
<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 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 ">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 ">
<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 ">
<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 ">
<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 ">
<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 ">
<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 ">
<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 ">
<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 ">
<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 ">
<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 ">
<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 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 ">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 ">
<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 ">
<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 ">
<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 ">
<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 ">
<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 ">
<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 ">
<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 ">
<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 ">
<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 ">
<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 ">
<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>Profile
Jenny Wilson
Front-end Developer, Designer
4.5 Instructor 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.
View Details<div class="col-lg-6 col-md-6 col-12">
<!-- Card -->
<div class="card">
<!-- 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="Verifed">
<img src="../assets/images/svg/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 d-flex align-items-center">
<span class=" text-warning">4.5</span><span class="mx-1">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
</span>Instructor Rating
</p>
<p class="fs-6 "><span class="me-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-secondary btn-sm">
View Details
</a>
</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.svg" 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>Card Course Horizontal
<!-- 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>
<!-- List inline -->
<ul class="mb-5 list-inline">
<li class="list-inline-item"><span class="">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor"
class="bi bi-clock align-baseline" viewBox="0 0 16 16">
<path
d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z" />
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z" />
</svg>
</span><span>2h
46m</span>
</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 class="align-top lh-1">
<span class="fs-6 ">
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="currentColor"
class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="currentColor"
class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="currentColor"
class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="currentColor"
class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="currentColor"
class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
</span>
</span>
<span class="text-warning">4.5</span>
<span class="fs-6 ">(7,900)</span>
</li>
</ul>
<!-- Row -->
<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=" bookmark">
<i class="fe fe-bookmark fs-4 "></i>
</a>
</div>
</div>
<div>
</div>
</div>Card Course Thumbnail
<!-- Card -->
<div class="card mb-4 card-hover">
<a href="#"><img src="../assets/images/course/course-bootstrap.jpg" alt="course"
class="card-img-top"></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>
<!-- List inline -->
<ul class="mb-3 list-inline">
<li class="list-inline-item"><span class="">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor"
class="bi bi-clock align-baseline" viewBox="0 0 16 16">
<path
d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z" />
<path
d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z" />
</svg>
</span><span>3h
56m</span>
</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 class="d-flex align-baseline lh-1">
<span class="fs-6">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor"
class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor"
class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor"
class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor"
class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor"
class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z">
</path>
</svg>
</span>
<span class="text-warning mx-1">4.5</span>
<span class="fs-6 ">(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="avatar">
</div>
<div class="col ms-2">
<span>Morris Mccoy</span>
</div>
<div class="col-auto">
<a href="#" class=" bookmark">
<i class="fe fe-bookmark fs-4 "></i>
</a>
</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=" card-img-top"
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>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>