824 lines
38 KiB
HTML
824 lines
38 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="@@languageDirection.lang" dir="@@if(languageDirection.isRTL){rtl}">
|
|
<head>
|
|
<!-- Required Meta Tags Always Come First -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
<!-- Title -->
|
|
<title>Course: Courses | Front - Multipurpose Responsive Template</title>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="shortcut icon" href="@@autopath/favicon.ico">
|
|
|
|
<!-- Font -->
|
|
<link href="@@vars.themeFont" rel="stylesheet">
|
|
|
|
<!-- CSS Implementing Plugins -->
|
|
<!-- bundlecss:vendor [@@autopath] -->
|
|
<link rel="stylesheet" href="@@autopath/node_modules/bootstrap-icons/font/bootstrap-icons.css">
|
|
<link rel="stylesheet" href="@@autopath/assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css">
|
|
|
|
<!-- CSS Front Template -->
|
|
<!-- bundlecss:theme [@@autopath] @@vars.version -->
|
|
<link rel="stylesheet" href="@@autopath/assets/css/theme.css">
|
|
</head>
|
|
|
|
<body>
|
|
<!-- ========== HEADER ========== -->
|
|
@@include("@@autopath/partials/navbar/demo-course-inner.html", {
|
|
"topbarcategory": "demos",
|
|
"topbarlink": "course",
|
|
"category": "pages",
|
|
"subcategory": "",
|
|
"link": "courses.html"
|
|
})
|
|
<!-- ========== END HEADER ========== -->
|
|
|
|
<!-- ========== MAIN CONTENT ========== -->
|
|
<main id="content" role="main">
|
|
<!-- Banner -->
|
|
<div class="container content-space-t-1">
|
|
<div class="bg-primary rounded-2" style="background: url(@@autopath/assets/svg/illustrations/master-adobe-ai-book.svg) right bottom no-repeat;">
|
|
<div class="w-lg-50 py-8 px-6">
|
|
<h1 class="display-4 text-white">Course catalog</h1>
|
|
<p class="lead text-white mb-0">Front Course includes over <span class="fw-semi-bold">20,000</span> courses.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Banner -->
|
|
|
|
<!-- Card List -->
|
|
<div class="container content-space-2 content-space-b-lg-3">
|
|
<div class="row">
|
|
<div class="col-lg-3 mb-5 mb-lg-0">
|
|
<!-- Navbar -->
|
|
<div class="navbar-expand-lg">
|
|
<!-- Navbar Toggle -->
|
|
<div class="d-grid">
|
|
<button type="button" class="navbar-toggler btn btn-white mb-3" data-bs-toggle="collapse" data-bs-target="#navbarVerticalNavMenu" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarVerticalNavMenu">
|
|
<span class="d-flex justify-content-between align-items-center">
|
|
<span class="text-dark">Menu</span>
|
|
|
|
<span class="navbar-toggler-default">
|
|
<i class="bi-list"></i>
|
|
</span>
|
|
|
|
<span class="navbar-toggler-toggled">
|
|
<i class="bi-x"></i>
|
|
</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<!-- End Navbar Toggle -->
|
|
|
|
<!-- Navbar Collapse -->
|
|
<div id="navbarVerticalNavMenu" class="collapse navbar-collapse">
|
|
<div class="d-grid gap-4 flex-grow-1">
|
|
<div class="d-grid">
|
|
<h5 class="dropdown-header">Artificial Intelligence</h5>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">AI Product Manager <span class="badge text-dark border rounded-pill">30+</span></a>
|
|
<a class="dropdown-item" href="#">AI Programming with Python</a>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">Computer Vision <span class="badge bg-success rounded-pill">New</span></a>
|
|
<a class="dropdown-item" href="#">Deep Learning</a>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">Deep Reinforcement Learning <span class="badge text-dark border rounded-pill">18</span></a>
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<h5 class="dropdown-header">Data Science</h5>
|
|
<a class="dropdown-item" href="#">Business Analytics</a>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">Data Analyst <span class="badge bg-success rounded-pill">New</span></a>
|
|
<a class="dropdown-item" href="#">Data Engineer</a>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">Data Scientist <span class="badge text-dark border rounded-pill">4</span></a>
|
|
<a class="dropdown-item" href="#">Data Visualization</a>
|
|
<a class="dropdown-item" href="#">Predictive Analytics for Business</a>
|
|
<a class="dropdown-item" href="#">Programming for Data Science</a>
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<h5 class="dropdown-header">Programming and Development</h5>
|
|
<a class="dropdown-item" href="#">AI Programming with Python</a>
|
|
<a class="dropdown-item" href="#">Android Basics</a>
|
|
<a class="dropdown-item" href="#">Android Developer</a>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">Blockchain <span class="badge text-dark border rounded-pill">7</span></a>
|
|
<a class="dropdown-item" href="#">C++</a>
|
|
<a class="dropdown-item" href="#">Front End Web Developer</a>
|
|
<a class="dropdown-item" href="#">Java Developer</a>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">iOS <span class="badge bg-success rounded-pill">New</span></a>
|
|
<a class="dropdown-item" href="#">Intro to Programming</a>
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<h5 class="dropdown-header">Cloud Computing</h5>
|
|
<a class="dropdown-item d-flex justify-content-between" href="#">Cloud Developer <span class="badge text-dark border rounded-pill">9+</span></a>
|
|
<a class="dropdown-item" href="#">Cloud Dev Ops Engineer</a>
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<h5 class="dropdown-header">Business</h5>
|
|
<a class="dropdown-item" href="#">Business Analytics</a>
|
|
<a class="dropdown-item" href="#">Digital Marketing</a>
|
|
<a class="dropdown-item" href="#">Marketing Analytics</a>
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<h5 class="dropdown-header">Career</h5>
|
|
<a class="dropdown-item" href="#">Applying to Jobs</a>
|
|
<a class="dropdown-item" href="#">Interviewing</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Navbar Collapse -->
|
|
</div>
|
|
<!-- End Navbar -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-lg-9">
|
|
<!-- Filter -->
|
|
<div class="border-bottom pb-3 mb-5">
|
|
<div class="row justify-content-md-start align-items-md-center">
|
|
<div class="col-md-4 mb-3 mb-md-0">
|
|
<h5 class="mb-0"><span class="text-dark fw-semi-bold">195 courses</span> to get started</h5>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-8 text-md-end">
|
|
<div class="row gx-2">
|
|
<div class="col-auto mb-2">
|
|
<!-- Select -->
|
|
<select class="form-select form-select-sm">
|
|
<option value="sort1">Highest rated</option>
|
|
<option value="sort2">Newest</option>
|
|
<option value="sort3">Lowest price</option>
|
|
<option value="sort4">Highest price</option>
|
|
</select>
|
|
<!-- End Select -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto mb-2">
|
|
<!-- Select -->
|
|
<select class="form-select form-select-sm">
|
|
<option value="price1" selected>Paid</option>
|
|
<option value="price2">Free</option>
|
|
</select>
|
|
<!-- End Select -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto mb-2">
|
|
<!-- Select -->
|
|
<select class="form-select form-select-sm">
|
|
<option value="duration1">0-3 hours</option>
|
|
<option value="duration2">3-9 hours</option>
|
|
<option value="duration3">9-24 hours</option>
|
|
<option value="duration4" selected>24+ hours</option>
|
|
</select>
|
|
<!-- End Select -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto mb-2">
|
|
<!-- Select -->
|
|
<select class="form-select form-select-sm">
|
|
<option value="beginner" selected>Beginner</option>
|
|
<option value="intermediate">Intermediate</option>
|
|
<option value="advanced">Advanced</option>
|
|
</select>
|
|
<!-- End Select -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Filter -->
|
|
|
|
<div class="d-grid gap-5 mb-10">
|
|
<!-- Card -->
|
|
<a class="card card-flush" href="@@autopath/demo-course/course-overview.html">
|
|
<div class="row align-items-md-center">
|
|
<div class="col-sm-5 mb-3 mb-sm-0">
|
|
<!-- Card Pinned -->
|
|
<div class="card-pinned">
|
|
<img class="card-img" src="@@autopath/assets/svg/components/card-12.svg" alt="Image Description">
|
|
|
|
<div class="card-pinned-top-start">
|
|
<small class="badge bg-success">Bestseller</small>
|
|
</div>
|
|
|
|
<div class="card-pinned-bottom-start">
|
|
<div class="d-flex align-items-center flex-wrap">
|
|
<!-- Rating -->
|
|
<div class="d-flex gap-1">
|
|
<img src="@@autopath/assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="@@autopath/assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="@@autopath/assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="@@autopath/assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="@@autopath/assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
</div>
|
|
<!-- End Rating -->
|
|
<div class="ms-1">
|
|
<span class="fw-semi-bold text-white small me-1">4.91</span>
|
|
<span class="text-white-70 small">(1.5k+ reviews)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Card Pinned -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-7">
|
|
<div class="row mb-3">
|
|
<div class="col">
|
|
<small class="card-subtitle text-body">Code</small>
|
|
<h3 class="card-title text-inherit">Complete Python Bootcamp: Go from zero to hero in Python 3</h3>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<div class="text-end">
|
|
<p class="text-muted small mb-0"><del>$114.99</del></p>
|
|
<h5 class="card-title text-primary">$99.99</h5>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="row align-items-center mb-2">
|
|
<div class="col">
|
|
<div class="avatar-group avatar-group-xs">
|
|
<span class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img8.jpg" alt="Image Description">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<ul class="list-inline list-separator text-body small">
|
|
<li class="list-inline-item">
|
|
<i class="bi-book me-1"></i> 10 lessons
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<i class="bi-clock me-1"></i> 3h 25m
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<i class="bi-bar-char-steps me-1"></i> All levels
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<p class="card-text text-body">Learn Python like a Professional! Start from the basics and go all the way to creating your own applications and games!</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</a>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<a class="card card-flush" href="@@autopath/demo-course/course-overview.html">
|
|
<div class="row align-items-md-center">
|
|
<div class="col-sm-5 mb-3 mb-sm-0">
|
|
<!-- Card Pinned -->
|
|
<div class="card-pinned">
|
|
<img class="card-img" src="@@autopath/assets/svg/components/card-13.svg" alt="Image Description">
|
|
|
|
<div class="card-pinned-bottom-start">
|
|
<div class="d-flex align-items-center flex-wrap">
|
|
<!-- Rating -->
|
|
<div class="d-flex gap-1">
|
|
<img src="@@autopath/assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="@@autopath/assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="@@autopath/assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="@@autopath/assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="@@autopath/assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
</div>
|
|
<!-- End Rating -->
|
|
<div class="ms-1">
|
|
<span class="fw-semi-bold text-white small me-1">4.95</span>
|
|
<span class="text-white-70 small">(1k+ reviews)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Card Pinned -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-7">
|
|
<div class="row mb-3">
|
|
<div class="col">
|
|
<small class="card-subtitle text-body">Design & Illustration</small>
|
|
<h3 class="card-title text-inherit">From the Top: Adobe Illustrator for Beginners</h3>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<div class="text-end">
|
|
<p class="text-muted small mb-0"><del>$129.99</del></p>
|
|
<h5 class="card-title text-primary">$119.99</h5>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="row align-items-center mb-2">
|
|
<div class="col">
|
|
<div class="avatar-group avatar-group-xs">
|
|
<span class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img5.jpg" alt="Image Description">
|
|
</span>
|
|
<span class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img4.jpg" alt="Image Description">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<ul class="list-inline list-separator text-body small">
|
|
<li class="list-inline-item">
|
|
<i class="bi-book me-1"></i> 7 lessons
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<i class="bi-clock me-1"></i> 7h 59m
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<i class="bi-bar-char-steps me-1"></i> All levels
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<p class="card-text text-body">The only course you need to learn Adobe Illustrator.</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</a>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<a class="card card-flush" href="@@autopath/demo-course/course-overview.html">
|
|
<div class="row align-items-md-center">
|
|
<div class="col-sm-5 mb-3 mb-sm-0">
|
|
<!-- Card Pinned -->
|
|
<div class="card-pinned">
|
|
<img class="card-img" src="@@autopath/assets/svg/components/card-6.svg" alt="Image Description">
|
|
|
|
<div class="card-pinned-top-start">
|
|
<small class="badge bg-success rounded-pill">Featured</small>
|
|
</div>
|
|
|
|
<div class="card-pinned-bottom-start">
|
|
<div class="d-flex align-items-center flex-wrap">
|
|
<!-- Rating -->
|
|
<div class="d-flex gap-1">
|
|
<img src="@@autopath/assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="@@autopath/assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="@@autopath/assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="@@autopath/assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="@@autopath/assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
</div>
|
|
<!-- End Rating -->
|
|
<div class="ms-1">
|
|
<span class="fw-semi-bold text-white small me-1">4.73</span>
|
|
<span class="text-white-70 small">(4.7k+ reviews)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Card Pinned -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-7">
|
|
<div class="row mb-3">
|
|
<div class="col">
|
|
<small class="card-subtitle text-body">Code</small>
|
|
<h3 class="card-title text-inherit">Get started with Vue.js</h3>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<div class="text-end">
|
|
<p class="text-muted small mb-0"><del>$169.99</del></p>
|
|
<h5 class="card-title text-primary">$129.99</h5>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="row align-items-center mb-2">
|
|
<div class="col">
|
|
<div class="avatar-group avatar-group-xs">
|
|
<span class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img3.jpg" alt="Image Description">
|
|
</span>
|
|
<span class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img7.jpg" alt="Image Description">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<ul class="list-inline list-separator text-body small">
|
|
<li class="list-inline-item">
|
|
<i class="bi-book me-1"></i> 25 lessons
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<i class="bi-clock me-1"></i> 17h 46m
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<i class="bi-bar-char-steps me-1"></i> All levels
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<p class="card-text text-body">Master Vue.js and build awesome, web apps with the successor of Vue.js</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</a>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<a class="card card-flush" href="@@autopath/demo-course/course-overview.html">
|
|
<div class="row align-items-md-center">
|
|
<div class="col-sm-5 mb-3 mb-sm-0">
|
|
<!-- Card Pinned -->
|
|
<div class="card-pinned">
|
|
<img class="card-img" src="@@autopath/assets/svg/components/card-15.svg" alt="Image Description">
|
|
|
|
<div class="card-pinned-bottom-start">
|
|
<div class="d-flex align-items-center flex-wrap">
|
|
<!-- Rating -->
|
|
<div class="d-flex gap-1">
|
|
<img src="@@autopath/assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="@@autopath/assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="@@autopath/assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="@@autopath/assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="@@autopath/assets/svg/illustrations/star-half.svg" alt="Review rating" width="16">
|
|
</div>
|
|
<!-- End Rating -->
|
|
<div class="ms-1">
|
|
<span class="fw-semi-bold text-white small me-1">4.47</span>
|
|
<span class="text-white-70 small">(3.8k+ reviews)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Card Pinned -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-7">
|
|
<div class="row mb-3">
|
|
<div class="col">
|
|
<small class="card-subtitle text-body">Code</small>
|
|
<h3 class="card-title text-inherit">The Ultimate MySQL Bootcamp: Go from SQL Beginner to Expert</h3>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<div class="text-end">
|
|
<p class="text-muted small mb-0"><del>$159.99</del></p>
|
|
<h5 class="card-title text-primary">$119.99</h5>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="row align-items-center mb-2">
|
|
<div class="col">
|
|
<div class="avatar-group avatar-group-xs">
|
|
<span class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img5.jpg" alt="Image Description">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<ul class="list-inline list-separator text-body small">
|
|
<li class="list-inline-item">
|
|
<i class="bi-book me-1"></i> 42 lessons
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<i class="bi-clock me-1"></i> 31h 5m
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<i class="bi-bar-char-steps me-1"></i> All levels
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<p class="card-text text-body">Learn MSQL like a Professional! Start from the basics and go all the way to creating your own applications and games!</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</a>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<a class="card card-flush" href="@@autopath/demo-course/course-overview.html">
|
|
<div class="row align-items-md-center">
|
|
<div class="col-sm-5 mb-3 mb-sm-0">
|
|
<!-- Card Pinned -->
|
|
<div class="card-pinned">
|
|
<img class="card-img" src="@@autopath/assets/svg/components/card-4.svg" alt="Image Description">
|
|
|
|
<div class="card-pinned-bottom-start">
|
|
<div class="d-flex align-items-center flex-wrap">
|
|
<!-- Rating -->
|
|
<div class="d-flex gap-1">
|
|
<img src="@@autopath/assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="@@autopath/assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="@@autopath/assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="@@autopath/assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="@@autopath/assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
|
|
</div>
|
|
<!-- End Rating -->
|
|
<div class="ms-1">
|
|
<span class="fw-semi-bold text-white small me-1">4.64</span>
|
|
<span class="text-white-70 small">(723 reviews)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Card Pinned -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-7">
|
|
<div class="row mb-3">
|
|
<div class="col">
|
|
<small class="card-subtitle text-body">Code</small>
|
|
<h3 class="card-title text-inherit">Coding block for WordPress</h3>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<div class="text-end">
|
|
<p class="text-muted small mb-0"><del>$159.99</del></p>
|
|
<h5 class="card-title text-primary">$119.99</h5>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="row align-items-center mb-2">
|
|
<div class="col">
|
|
<div class="avatar-group avatar-group-xs">
|
|
<span class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img8.jpg" alt="Image Description">
|
|
</span>
|
|
<span class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img6.jpg" alt="Image Description">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<ul class="list-inline list-separator text-body small">
|
|
<li class="list-inline-item">
|
|
<i class="bi-book me-1"></i> 5 lessons
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<i class="bi-clock me-1"></i> 8h 12m
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<i class="bi-bar-char-steps me-1"></i> All levels
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<p class="card-text text-body">Learn coding block from basics. Make your first 4 blocks in Unreal engine. Interactive tutorial.</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</a>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<a class="card card-flush" href="@@autopath/demo-course/course-overview.html">
|
|
<div class="row align-items-md-center">
|
|
<div class="col-sm-5 mb-3 mb-sm-0">
|
|
<!-- Card Pinned -->
|
|
<div class="card-pinned">
|
|
<img class="card-img" src="@@autopath/assets/svg/components/card-14.svg" alt="Image Description">
|
|
|
|
<div class="card-pinned-bottom-start">
|
|
<div class="d-flex align-items-center flex-wrap">
|
|
<!-- Rating -->
|
|
<div class="d-flex gap-1">
|
|
<img src="@@autopath/assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="@@autopath/assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="@@autopath/assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="@@autopath/assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
<img src="@@autopath/assets/svg/illustrations/star.svg" alt="Review rating" width="16">
|
|
</div>
|
|
<!-- End Rating -->
|
|
<div class="ms-1">
|
|
<span class="fw-semi-bold text-white small me-1">4.9</span>
|
|
<span class="text-white-70 small">(961 reviews)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Card Pinned -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-7">
|
|
<div class="row mb-3">
|
|
<div class="col">
|
|
<small class="card-subtitle text-body">Design & Illustration</small>
|
|
<h3 class="card-title text-inherit">Creative Magazine Layout Design</h3>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<div class="text-end">
|
|
<p class="text-muted small mb-0"><del>$179.99</del></p>
|
|
<h5 class="card-title text-primary">$129.99</h5>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="row align-items-center mb-2">
|
|
<div class="col">
|
|
<div class="avatar-group avatar-group-xs">
|
|
<span class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img4.jpg" alt="Image Description">
|
|
</span>
|
|
<span class="avatar avatar-xs avatar-circle">
|
|
<img class="avatar-img" src="@@autopath/assets/img/160x160/img3.jpg" alt="Image Description">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<ul class="list-inline list-separator text-body small">
|
|
<li class="list-inline-item">
|
|
<i class="bi-book me-1"></i> 33 lessons
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<i class="bi-clock me-1"></i> 22h 14m
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<i class="bi-bar-char-steps me-1"></i> All levels
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<p class="card-text text-body">Master magazine layout design and publish awesome layout designs.</p>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<small class="d-none d-sm-inline-block text-body">Page 1 out of 6</small>
|
|
|
|
<nav aria-label="Page navigation">
|
|
<ul class="pagination justify-content-center">
|
|
<li class="page-item disabled">
|
|
<a class="page-link" href="#" aria-label="Previous">
|
|
<span aria-hidden="true">
|
|
<i class="bi-chevron-double-left small"></i>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
|
<li class="page-item disabled"><a class="page-link" href="#">...</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">5</a></li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#" aria-label="Next">
|
|
<span aria-hidden="true">
|
|
<i class="bi-chevron-double-right small"></i>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<!-- End Pagination -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Card List -->
|
|
|
|
<!-- CTA -->
|
|
<div class="container content-space-b-2">
|
|
<div class="text-center bg-img-start py-6" style="background: url(@@autopath/assets/svg/components/shape-6.svg) center no-repeat;">
|
|
<div class="mb-5">
|
|
<h2>Find the right learning path for you</h2>
|
|
<p>Answer a few questions and match your goals to our programs.</p>
|
|
</div>
|
|
|
|
<a class="btn btn-primary btn-transition" href="#">Explore by category</a>
|
|
</div>
|
|
</div>
|
|
<!-- End CTA -->
|
|
</main>
|
|
<!-- ========== END MAIN CONTENT ========== -->
|
|
|
|
<!-- ========== FOOTER ========== -->
|
|
@@include("@@autopath/partials/footer/main-dark.html")
|
|
<!-- ========== END FOOTER ========== -->
|
|
|
|
<!-- ========== SECONDARY CONTENTS ========== -->
|
|
<!-- Go To -->
|
|
@@include("@@autopath/partials/layouts-components/go-to.html")
|
|
<!-- ========== END SECONDARY CONTENTS ========== -->
|
|
|
|
<!-- JS Global Compulsory @@deleteLine:build -->
|
|
<script src="@@autopath/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<!-- JS Implementing Plugins -->
|
|
<!-- bundlejs:vendor [@@autopath] -->
|
|
<script src="@@autopath/assets/vendor/hs-header/dist/hs-header.min.js"></script>
|
|
<script src="@@autopath/assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>
|
|
<script src="@@autopath/assets/vendor/hs-go-to/dist/hs-go-to.min.js"></script>
|
|
|
|
<!-- JS Front -->
|
|
<!-- bundlejs:theme [@@autopath] -->
|
|
<script src="@@autopath/assets/js/hs.core.js"></script>
|
|
<script src="@@autopath/assets/js/hs.bs-dropdown.js"></script>
|
|
|
|
<!-- JS Plugins Init. -->
|
|
<script>
|
|
(function() {
|
|
// INITIALIZATION OF HEADER
|
|
// =======================================================
|
|
new HSHeader('#header').init()
|
|
|
|
|
|
// INITIALIZATION OF MEGA MENU
|
|
// =======================================================
|
|
new HSMegaMenu('.js-mega-menu', {
|
|
desktop: {
|
|
position: 'left'
|
|
}
|
|
})
|
|
|
|
|
|
// INITIALIZATION OF BOOTSTRAP DROPDOWN
|
|
// =======================================================
|
|
HSBsDropdown.init()
|
|
|
|
|
|
// INITIALIZATION OF GO TO
|
|
// =======================================================
|
|
new HSGoTo('.js-go-to')
|
|
})()
|
|
</script>
|
|
</body>
|
|
</html>
|