Card
Geek's cards provide a flexible and extensible content container with multiple variants and options.
Course Card
$199
<div class="card card-lift col-lg-3">
<a href="#!">
<img src="../assets/images/course/aws.jpg" alt="figma" class="card-img-top img-fluid w-100" />
</a>
<div class="card-body d-flex flex-column gap-4">
<div class="d-flex flex-column gap-2">
<div>
<span class="badge text-light-emphasis bg-light-subtle border border-light-subtle rounded-pill">Web Development</span>
</div>
<h3 class="mb-0 h4">
<a href="#!" class="text-inherit">AWS Fundamentals Specialization</a>
</h3>
<small class="text-secondary">Anita Parmar</small>
<div class="lh-1">
<span class="text-secondary fw-semibold">4.5</span>
<span class="align-text-top">
<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-gray-500">(13,245)</span>
</div>
</div>
<div>
<span class="fw-semibold text-dark">$199</span>
</div>
</div>
</div>Icon Card
Data Science
10 CoursesUI/UX Design
14 CoursesWeb Development
22 CoursesMarketing
8 Courses<!-- Icon Card -->
<section class="py-xl-8 py-6">
<div class="row g-4">
<div class="col-12 col-md-6 col-lg-3">
<div class="card-hover-svg card card-body d-flex flex-column gap-4 h-100">
<div>
<span class="icon-shape icon-xxl">
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="32" cy="32" r="22" stroke="currentColor" stroke-width="4" class="text-primary"></circle>
<path d="M22 34l6 6 14-18" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="text-primary"></path>
</svg>
</span>
</div>
<div>
<h3 class="mb-0">Data Science</h3>
<span class="text-gray-500"><span class="fw-bold">10</span> Courses</span>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="card-hover-svg card card-body d-flex flex-column gap-4 h-100">
<div>
<span class="icon-shape icon-xxl">
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="32" cy="32" r="22" stroke="currentColor" stroke-width="4" class="text-primary"></circle>
<path d="M22 34l6 6 14-18" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="text-primary"></path>
</svg>
</span>
</div>
<div>
<h3 class="mb-0">UI/UX Design</h3>
<span class="text-gray-500"><span class="fw-bold">14</span> Courses</span>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="card-hover-svg card card-body d-flex flex-column gap-4 h-100">
<div>
<span class="icon-shape icon-xxl">
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="32" cy="32" r="22" stroke="currentColor" stroke-width="4" class="text-primary"></circle>
<path d="M22 34l6 6 14-18" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="text-primary"></path>
</svg>
</span>
</div>
<div>
<h3 class="mb-0">Web Development</h3>
<span class="text-gray-500"><span class="fw-bold">22</span> Courses</span>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="card-hover-svg card card-body d-flex flex-column gap-4 h-100">
<div>
<span class="icon-shape icon-xxl">
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="32" cy="32" r="22" stroke="currentColor" stroke-width="4" class="text-primary"></circle>
<path d="M22 34l6 6 14-18" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="text-primary"></path>
</svg>
</span>
</div>
<div>
<h3 class="mb-0">Marketing</h3>
<span class="text-gray-500"><span class="fw-bold">8</span> Courses</span>
</div>
</div>
</div>
</div>
</section>
<!-- End Icon Card -->Category
<!-- Category -->
<section class="py-xl-8 py-6">
<div class="row g-4">
<div class="col-12 col-md-6 col-lg-3">
<a href="#!" class="card card-border-primary rounded-4 h-100">
<div class="card-body d-flex flex-column gap-4 text-center">
<div>
<div class="icon-shape icon-xxl bg-light-primary rounded-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-gear text-primary" viewBox="0 0 16 16">
<path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0"></path>
<path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115z"></path>
</svg>
</div>
</div>
<div>
<h3 class="mb-0">Engineering</h3>
<span>21 Mentors</span>
</div>
</div>
</a>
</div>
<div class="col-12 col-md-6 col-lg-3">
<a href="#!" class="card card-border-primary rounded-4 h-100">
<div class="card-body d-flex flex-column gap-4 text-center">
<div>
<div class="icon-shape icon-xxl bg-light-primary rounded-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-gear text-primary" viewBox="0 0 16 16">
<path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0"></path>
<path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115z"></path>
</svg>
</div>
</div>
<div>
<h3 class="mb-0">Design</h3>
<span>12 Mentors</span>
</div>
</div>
</a>
</div>
<div class="col-12 col-md-6 col-lg-3">
<a href="#!" class="card card-border-primary rounded-4 h-100">
<div class="card-body d-flex flex-column gap-4 text-center">
<div>
<div class="icon-shape icon-xxl bg-light-primary rounded-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-gear text-primary" viewBox="0 0 16 16">
<path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0"></path>
<path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.520l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115z"></path>
</svg>
</div>
</div>
<div>
<h3 class="mb-0">Development</h3>
<span>18 Mentors</span>
</div>
</div>
</a>
</div>
<div class="col-12 col-md-6 col-lg-3">
<a href="#!" class="card card-border-primary rounded-4 h-100">
<div class="card-body d-flex flex-column gap-4 text-center">
<div>
<div class="icon-shape icon-xxl bg-light-primary rounded-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-gear text-primary" viewBox="0 0 16 16">
<path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0"></path>
<path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.520l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115z"></path>
</svg>
</div>
</div>
<div>
<h3 class="mb-0">Business</h3>
<span>9 Mentors</span>
</div>
</div>
</a>
</div>
</div>
</section>
<!-- End Category -->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="@@webRoot/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="14" height="14" 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>4 Card icon with hover
<!-- Card icon with hover -->
<section class="py-xl-8 py-6">
<div class="py-lg-14 bg-light pt-8 pb-8">
<div class="container">
<div class="row gy-4">
<div class="col-xl-3 col-lg-6 col-md-6 col-12">
<div class="card border-top border-4 card-hover-with-icon border-0">
<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-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>
<h4 class="mb-0">Analtyics</h4>
<p class="mb-0">2k 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">
<div class="card border-top border-4 card-hover-with-icon border-0">
<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-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>
<h4 class="mb-0">UI / UX Design</h4>
<p class="mb-0">1k 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">
<div class="card border-top border-4 card-hover-with-icon border-0">
<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>
<h4 class="mb-0">Developer</h4>
<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">
<div class="card border-top border-4 card-hover-with-icon border-0">
<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-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>
<h4 class="mb-0">Product Manager</h4>
<p class="mb-0">1.2K 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>
</div>
</div>
</section>
<!-- End Card icon with hover -->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="@@webRoot/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="@@webRoot/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="@@webRoot/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="@@webRoot/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="@@webRoot/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="@@webRoot/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="@@webRoot/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="@@webRoot/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="@@webRoot/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="@@webRoot/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="@@webRoot/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="@@webRoot/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 Course Thumbnail -->
<section class="py-xl-8 py-6">
<div class="row g-4">
<div class="col-lg-3 col-md-6 col-12">
<div class="card mb-4 card-hover h-100">
<a href="#"><img src="../assets/images/course/course-bootstrap.jpg" alt="course" class="card-img-top"></a>
<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">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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>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.730-.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>
<div class="card-footer mt-auto">
<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="text-reset bookmark"><i class="fe fe-bookmark fs-4"></i></a></div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-12">...duplicate card...</div>
<div class="col-lg-3 col-md-6 col-12">...duplicate card...</div>
<div class="col-lg-3 col-md-6 col-12">...duplicate card...</div>
</div>
</section>
<!-- End Card Course Thumbnail -->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="@@webRoot/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="@@webRoot/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(@@webRoot/assets/images/blog/blogpost-2.jpg);">
<img src="@@webRoot/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="@@webRoot/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>Our Training & Courses
Study in Country
Our Training & Courses
At [Your Company Name] , we offer a range of specialized training and courses designed to help you succeed in your academic and professional goals. Our offerings include:
PTE Course
Master the Pearson Test of English with our targeted practice and expert instruction.
View Details
IELTS Course
Achieve your desired score with comprehensive study materials and practice tests for the International English Language Testing System.
View Details
TOEFL Course
Enhance your English proficiency for academic success with our thorough preparation resources and personalized support.
View Details
GRE Course
Excel in the Graduate Record Examination with our in-depth practice, strategic insights, and expert guidance.
View Details
<section class="py-lg-8 py-5">
<div class="container py-lg-8">
<div class="row">
<div class="col-xl-5 col-lg-6">
<div class="mb-5 mb-lg-8">
<span class="fw-semibold text-primary">Study in Country</span>
<h2 class="h1 mt-3">Our Training & Courses</h2>
<p class="mb-0">
At
<span class="text-primary">[Your Company Name]</span>
, we offer a range of specialized training and courses designed to help you succeed in your academic and professional goals. Our offerings include:
</p>
</div>
</div>
<div class="col-xl-7 col-lg-6 d-lg-flex justify-content-end d-none">
<div>
<img src="../assets/images/landing-immigration/plane.png" alt="" style="transform: rotate(226deg); filter: opacity(0.5)" />
</div>
</div>
</div>
<div class="row gy-4 gy-xl-0">
<div class="col-xl-3 col-md-6 col-12">
<div class="card card-lift h-100 text-center text-lg-start">
<div class="p-2">
<a href="#"><img src="../assets/images/landing-immigration/course-1.jpg" alt="" class="img-fluid rounded-3 w-100" /></a>
</div>
<div class="card-body pt-2">
<h3><a class="text-inherit" href="#!">PTE Course</a></h3>
<p>Master the Pearson Test of English with our targeted practice and expert instruction.</p>
<a href="#!" class="icon-link icon-link-hover link-primary fw-semibold">
<span>View Details</span>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"></path>
</svg>
</a>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-12">
<div class="card card-lift h-100 text-center text-lg-start">
<div class="p-2">
<a href="#"><img src="../assets/images/landing-immigration/course-2.jpg" alt="" class="img-fluid rounded-3 w-100" /></a>
</div>
<div class="card-body pt-2">
<h3><a class="text-inherit" href="#!">IELTS Course</a></h3>
<p>Achieve your desired score with comprehensive study materials and practice tests for the International English Language Testing System.</p>
<a href="#!" class="icon-link icon-link-hover link-primary fw-semibold">
<span>View Details</span>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"></path>
</svg>
</a>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-12">
<div class="card card-lift h-100 text-center text-lg-start">
<div class="p-2">
<a href="#"><img src="../assets/images/landing-immigration/course-3.jpg" alt="" class="img-fluid rounded-3 w-100" /></a>
</div>
<div class="card-body pt-2">
<h3><a class="text-inherit" href="#!">TOEFL Course</a></h3>
<p>Enhance your English proficiency for academic success with our thorough preparation resources and personalized support.</p>
<a href="#!" class="icon-link icon-link-hover link-primary fw-semibold">
<span>View Details</span>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"></path>
</svg>
</a>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-12">
<div class="card card-lift h-100 text-center text-lg-start">
<div class="p-2">
<a href="#"><img src="../assets/images/landing-immigration/course-4.jpg" alt="" class="img-fluid rounded-3 w-100" /></a>
</div>
<div class="card-body pt-2">
<h3><a class="text-inherit" href="#!">GRE Course</a></h3>
<p>Excel in the Graduate Record Examination with our in-depth practice, strategic insights, and expert guidance.</p>
<a href="#!" class="icon-link icon-link-hover link-primary fw-semibold">
<span>View Details</span>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
Study in Country
Study in Country
Best Country to Study
Choosing the best country to study depends on your personal goals and preferences.
Canada
Choose Canada for a world-class education and a bright future. Canada is renowned for its high-quality education
Study in CanadaAustralia
Embark on your educational journey in Australia for a dynamic and enriching experience.
Study in AustraliaUK
The UK offers a prestigious education with its renowned universities and rich academic heritage.
Study in UKUSA
The USA is home to some of the world’s prestigious universities and offers a diverse range of programs and research opportunities.
Study in USA
<section class="py-5 py-lg-8 bg-light" style="background-image: url(../assets/images/landing-immigration/map.svg); background-position: right; background-repeat: no-repeat">
<div class="container py-lg-8">
<div class="row">
<div class="col-12">
<div class="text-center mb-lg-8 mb-4">
<span class="fw-semibold text-primary">Study in Country</span>
<h2 class="h1 mt-3 mb-0">Best Country to Study</h2>
<p class="mb-0">Choosing the best country to study depends on your personal goals and preferences.</p>
</div>
</div>
</div>
<div class="row gy-4 gy-xl-0">
<div class="col-xl-3 col-md-6">
<div class="card card-lift h-100 text-center text-lg-start">
<div class="card-body">
<div class="mb-4">
<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_8060_1993)">
<path d="M36 72C55.8823 72 72 55.8823 72 36C72 16.1177 55.8823 0 36 0C16.1177 0 0 16.1177 0 36C0 55.8823 16.1177 72 36 72Z" fill="#F0F0F0" />
<path d="M72.0027 36.003C72.0027 21.7304 63.6966 9.39819 51.6548 3.5752V68.4307C63.6966 62.6079 72.0027 50.2756 72.0027 36.003Z" fill="#D80027" />
<path d="M0.00146484 36.0011C0.00146484 50.2737 8.30748 62.6059 20.3493 68.4289V3.57324C8.30748 9.39624 0.00146484 21.7285 0.00146484 36.0011Z" fill="#D80027" />
<path
d="M42.2626 40.6985L48.5233 37.5681L45.393 36.0029V32.8724L39.1321 36.0029L42.2626 29.742H39.1321L36.0017 25.0464L32.8712 29.742H29.7407L32.8712 36.0029L26.6103 32.8724V36.0029L23.48 37.5681L29.7407 40.6985L28.1756 43.829H34.4365V48.5246H37.5668V43.829H43.8277L42.2626 40.6985Z"
fill="#D80027" />
</g>
<defs>
<clipPath id="clip0_8060_1993">
<rect width="72" height="72" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<h3>Canada</h3>
<p>Choose Canada for a world-class education and a bright future. Canada is renowned for its high-quality education</p>
<a href="#!" class="icon-link icon-link-hover fw-semibold">
<span>Study in Canada</span>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"></path>
</svg>
</a>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6">
<div class="card card-lift h-100 text-center text-lg-start">
<div class="card-body">
<div class="mb-4">
<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_8060_2001)">
<path d="M72 36C72 55.8821 55.8821 72 36 72C16.1179 72 0 55.8821 0 36C0 36.0084 36 0.00407812 36 0C55.8821 0 72 16.1179 72 36Z" fill="#0052B4" />
<path d="M35.9033 36.0013H35.9998C35.9998 35.9686 35.9998 35.9373 35.9998 35.9048C35.9677 35.937 35.9356 35.9692 35.9033 36.0013Z" fill="#F0F0F0" />
<path
d="M35.9995 18.785C35.9995 12.4506 35.9995 8.29974 35.9995 0.00244141H35.9934C16.114 0.00567578 -0.000488281 16.122 -0.000488281 36.0023H18.7821V25.4256L29.3588 36.0023H35.9033C35.9355 35.9702 35.9676 35.9382 35.9996 35.906C35.9996 33.4806 35.9996 31.3165 35.9996 29.3618L25.4228 18.785H35.9995Z"
fill="#F0F0F0" />
<path
d="M18.2132 4.69702C12.5828 7.90313 7.90191 12.584 4.6958 18.2145V36.0014H14.0872V14.0885V14.0884H36.0002C36.0002 11.1264 36.0002 8.30462 36.0002 4.69702H18.2132V4.69702Z"
fill="#D80027" />
<path
d="M36.001 31.5746L23.2107 18.7845H18.7837C18.7837 18.7843 18.7837 18.7845 18.7837 18.7845L36.0008 36.0016H36.001C36.001 36.0016 36.001 32.9494 36.001 31.5746Z"
fill="#D80027" />
<path
d="M21.7128 42.2593L23.6886 46.3906L28.1502 45.3594L26.1522 49.4799L29.7401 52.3252L25.2729 53.3321L25.2854 57.9114L21.7128 55.0464L18.1404 57.9114L18.1529 53.3321L13.6855 52.3252L17.2736 49.4799L15.2753 45.3594L19.7372 46.3906L21.7128 42.2593Z"
fill="#F0F0F0" />
<path
d="M53.9013 50.0862L54.8892 52.1518L57.12 51.6362L56.1209 53.6964L57.915 55.1192L55.6813 55.6226L55.6875 57.9122L53.9013 56.4797L52.1151 57.9122L52.1212 55.6226L49.8877 55.1192L51.6816 53.6964L50.6826 51.6362L52.9134 52.1518L53.9013 50.0862Z"
fill="#F0F0F0" />
<path
d="M44.7105 28.1743L45.6982 30.2401L47.9291 29.7243L46.9301 31.7846L48.7241 33.2073L46.4905 33.7107L46.4966 36.0004L44.7105 34.5678L42.9243 36.0004L42.9303 33.7107L40.6968 33.2073L42.4907 31.7846L41.4917 29.7243L43.7226 30.2401L44.7105 28.1743Z"
fill="#F0F0F0" />
<path
d="M53.9013 15.6528L54.8892 17.7186L57.12 17.2029L56.121 19.2632L57.9148 20.6858L55.6813 21.1894L55.6875 23.479L53.9013 22.0465L52.1151 23.479L52.1212 21.1894L49.8877 20.6858L51.6815 19.2632L50.6826 17.2029L52.9134 17.7186L53.9013 15.6528Z"
fill="#F0F0F0" />
<path
d="M61.9268 25.0432L62.9145 27.109L65.1454 26.5932L64.1464 28.6535L65.9404 30.0762L63.7067 30.5798L63.7129 32.8693L61.9268 31.4369L60.1406 32.8693L60.1466 30.5798L57.9131 30.0762L59.707 28.6535L58.708 26.5932L60.9388 27.109L61.9268 25.0432Z"
fill="#F0F0F0" />
<path
d="M56.1876 36.001L56.9646 38.3924H59.4792L57.4448 39.8706L58.222 42.2619L56.1876 40.7839L54.1533 42.2619L54.9303 39.8706L52.896 38.3924H55.4105L56.1876 36.001Z"
fill="#F0F0F0" />
</g>
<defs>
<clipPath id="clip0_8060_2001">
<rect width="72" height="72" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<h3>Australia</h3>
<p>Embark on your educational journey in Australia for a dynamic and enriching experience.</p>
<a href="#" class="icon-link icon-link-hover fw-semibold">
Study in Australia
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"></path>
</svg>
</a>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6">
<div class="card card-lift h-100 text-center text-lg-start">
<div class="card-body">
<div class="mb-4">
<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_8060_2009)">
<path d="M36 72C55.8823 72 72 55.8823 72 36C72 16.1177 55.8823 0 36 0C16.1177 0 0 16.1177 0 36C0 55.8823 16.1177 72 36 72Z" fill="#F0F0F0" />
<path d="M7.44193 14.0791C4.61411 17.7583 2.48181 21.9988 1.24023 26.6056H19.9684L7.44193 14.0791Z" fill="#0052B4" />
<path d="M70.7611 26.6059C69.5195 21.9993 67.3871 17.7588 64.5594 14.0796L52.0332 26.6059H70.7611Z" fill="#0052B4" />
<path d="M1.24023 45.3906C2.48195 49.9972 4.61425 54.2378 7.44194 57.9168L19.968 45.3906H1.24023Z" fill="#0052B4" />
<path d="M57.9165 7.4394C54.2373 4.61157 49.9969 2.47927 45.3901 1.23755V19.9656L57.9165 7.4394Z" fill="#0052B4" />
<path d="M14.0815 64.5531C17.7607 67.381 22.0013 69.5132 26.6079 70.755V52.0271L14.0815 64.5531Z" fill="#0052B4" />
<path d="M26.6077 1.23755C22.0011 2.47927 17.7606 4.61156 14.0815 7.43925L26.6077 19.9654V1.23755Z" fill="#0052B4" />
<path d="M45.3901 70.755C49.9967 69.5132 54.2373 67.3809 57.9163 64.5533L45.3901 52.0271V70.755Z" fill="#0052B4" />
<path d="M52.0332 45.3906L64.5594 57.9169C67.3871 54.2379 69.5195 49.9972 70.7611 45.3906H52.0332Z" fill="#0052B4" />
<path
d="M71.6953 31.3044H40.6959H40.6957V0.304734C39.1586 0.104625 37.5915 0 36 0C34.4083 0 32.8414 0.104625 31.3044 0.304734V31.3041V31.3043H0.304734C0.104625 32.8414 0 34.4085 0 36C0 37.5917 0.104625 39.1586 0.304734 40.6956H31.3041H31.3043V71.6953C32.8414 71.8954 34.4083 72 36 72C37.5915 72 39.1586 71.8955 40.6956 71.6953V40.6959V40.6957H71.6953C71.8954 39.1586 72 37.5917 72 36C72 34.4085 71.8954 32.8414 71.6953 31.3044Z"
fill="#D80027" />
<path d="M45.3911 45.3937L61.4556 61.4581C62.1944 60.7196 62.8992 59.9474 63.5717 59.147L49.8183 45.3936H45.3911V45.3937Z" fill="#D80027" />
<path d="M26.6085 45.3936H26.6082L10.5439 61.4579C11.2825 62.1967 12.0547 62.9015 12.8551 63.574L26.6085 49.8203V45.3936Z" fill="#D80027" />
<path d="M26.6083 26.6073V26.6071L10.5439 10.5425C9.80502 11.281 9.1002 12.0532 8.42773 12.8537L22.1813 26.6072H26.6083V26.6073Z" fill="#D80027" />
<path d="M45.3911 26.6106L61.4557 10.5459C60.7171 9.80707 59.945 9.10226 59.1445 8.42993L45.3911 22.1835V26.6106V26.6106Z" fill="#D80027" />
</g>
<defs>
<clipPath id="clip0_8060_2009">
<rect width="72" height="72" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<h3>UK</h3>
<p>The UK offers a prestigious education with its renowned universities and rich academic heritage.</p>
<a href="#" class="icon-link icon-link-hover fw-semibold">
Study in UK
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"></path>
</svg>
</a>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6">
<div class="card card-lift h-100 text-center text-lg-start">
<div class="card-body">
<div class="mb-4">
<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_8060_2017)">
<path d="M36 72C55.8823 72 72 55.8823 72 36C72 16.1177 55.8823 0 36 0C16.1177 0 0 16.1177 0 36C0 55.8823 16.1177 72 36 72Z" fill="#F0F0F0" />
<path d="M8.229 13.0892H63.7714C61.7199 10.6051 59.3406 8.40218 56.7012 6.54382H15.2992C12.6598 8.4019 10.2806 10.6049 8.229 13.0892Z" fill="#F0F0F0" />
<path
d="M0 36.0016C0 37.1051 0.0524531 38.1961 0.149625 39.2744H71.8504C71.9475 38.1961 72 37.1051 72 36.0016C72 34.8982 71.9475 33.8072 71.8504 32.729H0.149625C0.0524531 33.8072 0 34.8982 0 36.0016Z"
fill="#F0F0F0" />
<path d="M3.92651 52.3638H68.0751C69.1352 50.2902 69.9997 48.1005 70.6452 45.8186H1.35645C2.00177 48.1005 2.86662 50.2903 3.92651 52.3638Z" fill="#F0F0F0" />
<path d="M15.2992 65.4544H56.701C59.3404 63.596 61.7198 61.3931 63.7712 58.9089H8.229C10.2806 61.3928 12.6598 63.596 15.2992 65.4544Z" fill="#F0F0F0" />
<path d="M1.35645 26.1836H70.6455C70 23.9015 69.1353 21.7117 68.0753 19.6382H3.92665C2.86676 21.7117 2.00191 23.9015 1.35645 26.1836Z" fill="#F0F0F0" />
<path d="M17.2153 6.54563H56.6989C50.8433 2.42279 43.7037 0.000244141 35.9979 0.000244141C31.3023 0.000244141 23.071 2.42279 17.2153 6.54563Z" fill="#D80027" />
<path d="M34.4346 19.636H68.074C66.8769 17.2941 65.431 15.1005 63.7709 13.0906H34.4346V19.636Z" fill="#D80027" />
<path d="M34.4346 32.7255H71.8501C71.6476 30.4781 71.2406 28.2894 70.6442 26.1802H34.4346V32.7255Z" fill="#D80027" />
<path d="M1.35444 45.821H70.6432C71.2397 43.7119 71.6467 41.5231 71.8492 39.2756H0.148438C0.350938 41.5231 0.757906 43.7118 1.35444 45.821Z" fill="#D80027" />
<path d="M8.22793 58.9106H63.7703C65.4304 56.9004 66.8763 54.7069 68.0734 52.3652H3.9248C5.12195 54.7071 6.56785 56.9007 8.22793 58.9106Z" fill="#D80027" />
<path d="M35.9979 72.0015C43.7037 72.0015 50.8432 69.5789 56.6988 65.4561H15.2969C21.1525 69.5789 28.292 72.0015 35.9979 72.0015Z" fill="#D80027" />
<path d="M1.35576 26.1806C0.75923 28.29 0.352402 30.4785 0.149902 32.726H36.0003V-0.0012207C19.5218 -0.0012207 5.62963 11.0705 1.35576 26.1806Z" fill="#0052B4" />
<path
d="M21.4307 9.3916L23.7616 16.5656H31.3055L25.2027 20.9998L27.5334 28.1742L21.4307 23.7403L15.3277 28.1742L17.659 20.9998L11.5562 16.5656H19.0997L21.4307 9.3916Z"
fill="#F0F0F0" />
</g>
<defs>
<clipPath id="clip0_8060_2017">
<rect width="72" height="72" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<h3>USA</h3>
<p>The USA is home to some of the world’s prestigious universities and offers a diverse range of programs and research opportunities.</p>
<a href="#" class="icon-link icon-link-hover fw-semibold">
Study in USA
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</section>