shell bypass 403
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title -->
<title> Edmate Learning Dashboard HTML Template</title>
<!-- Favicon -->
<link rel="shortcut icon" href="assets/images/logo/favicon.png">
<!-- Bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- file upload -->
<link rel="stylesheet" href="assets/css/file-upload.css">
<!-- file upload -->
<link rel="stylesheet" href="assets/css/plyr.css">
<!-- DataTables -->
<link rel="stylesheet" href="https://cdn.datatables.net/2.0.8/css/dataTables.dataTables.min.css">
<!-- full calendar -->
<link rel="stylesheet" href="assets/css/full-calendar.css">
<!-- jquery Ui -->
<link rel="stylesheet" href="assets/css/jquery-ui.css">
<!-- editor quill Ui -->
<link rel="stylesheet" href="assets/css/editor-quill.css">
<!-- apex charts Css -->
<link rel="stylesheet" href="assets/css/apexcharts.css">
<!-- calendar Css -->
<link rel="stylesheet" href="assets/css/calendar.css">
<!-- jvector map Css -->
<link rel="stylesheet" href="assets/css/jquery-jvectormap-2.0.5.css">
<!-- Main css -->
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<!--==================== Preloader Start ====================-->
<div class="preloader">
<div class="loader"></div>
</div>
<!--==================== Preloader End ====================-->
<!--==================== Sidebar Overlay End ====================-->
<div class="side-overlay"></div>
<!--==================== Sidebar Overlay End ====================-->
<!-- ============================ Sidebar Start ============================ -->
<aside class="sidebar">
<!-- sidebar close btn -->
<button type="button" class="sidebar-close-btn text-gray-500 hover-text-white hover-bg-main-600 text-md w-24 h-24 border border-gray-100 hover-border-main-600 d-xl-none d-flex flex-center rounded-circle position-absolute"><i class="ph ph-x"></i></button>
<!-- sidebar close btn -->
<a href="index.html" class="sidebar__logo text-center p-20 position-sticky inset-block-start-0 bg-white w-100 z-1 pb-10">
<img src="assets/images/logo/logo.png" alt="Logo">
</a>
<div class="sidebar-menu-wrapper overflow-y-auto scroll-sm">
<div class="p-20 pt-10">
<ul class="sidebar-menu">
<li class="sidebar-menu__item has-dropdown">
<a href="javascript:void(0)" class="sidebar-menu__link">
<span class="icon"><i class="ph ph-squares-four"></i></span>
<span class="text">Dashboard</span>
<span class="link-badge">3</span>
</a>
<!-- Submenu start -->
<ul class="sidebar-submenu">
<li class="sidebar-submenu__item">
<a href="index.html" class="sidebar-submenu__link"> Dashboard One </a>
</li>
<li class="sidebar-submenu__item">
<a href="index-2.html" class="sidebar-submenu__link"> Dashboard Two </a>
</li>
<li class="sidebar-submenu__item">
<a href="index-3.html" class="sidebar-submenu__link"> Dashboard Three </a>
</li>
</ul>
<!-- Submenu End -->
</li>
<li class="sidebar-menu__item has-dropdown">
<a href="javascript:void(0)" class="sidebar-menu__link">
<span class="icon"><i class="ph ph-graduation-cap"></i></span>
<span class="text">Courses</span>
</a>
<!-- Submenu start -->
<ul class="sidebar-submenu">
<li class="sidebar-submenu__item">
<a href="student-courses.html" class="sidebar-submenu__link"> Student Courses </a>
</li>
<li class="sidebar-submenu__item">
<a href="mentor-courses.html" class="sidebar-submenu__link"> Mentor Courses </a>
</li>
<li class="sidebar-submenu__item">
<a href="create-course" class="sidebar-submenu__link"> Create Course </a>
</li>
</ul>
<!-- Submenu End -->
</li>
<li class="sidebar-menu__item">
<a href="students.html" class="sidebar-menu__link">
<span class="icon"><i class="ph ph-users-three"></i></span>
<span class="text">Students</span>
</a>
</li>
<li class="sidebar-menu__item">
<a href="assignment.html" class="sidebar-menu__link">
<span class="icon"><i class="ph ph-clipboard-text"></i></span>
<span class="text">Assignments</span>
</a>
</li>
<li class="sidebar-menu__item">
<a href="mentors.html" class="sidebar-menu__link">
<span class="icon"><i class="ph ph-users"></i></span>
<span class="text">Mentors</span>
</a>
</li>
<li class="sidebar-menu__item">
<a href="resources.html" class="sidebar-menu__link">
<span class="icon"><i class="ph ph-bookmarks"></i></span>
<span class="text">Resources</span>
</a>
</li>
<li class="sidebar-menu__item">
<a href="message.html" class="sidebar-menu__link">
<span class="icon"><i class="ph ph-chats-teardrop"></i></span>
<span class="text">Messages</span>
</a>
</li>
<li class="sidebar-menu__item">
<a href="analytics.html" class="sidebar-menu__link">
<span class="icon"><i class="ph ph-chart-bar"></i></span>
<span class="text">Analytics</span>
</a>
</li>
<li class="sidebar-menu__item">
<a href="event.html" class="sidebar-menu__link">
<span class="icon"><i class="ph ph-calendar-dots"></i></span>
<span class="text">Events</span>
</a>
</li>
<li class="sidebar-menu__item">
<a href="library.html" class="sidebar-menu__link">
<span class="icon"><i class="ph ph-books"></i></span>
<span class="text">Library</span>
</a>
</li>
<li class="sidebar-menu__item">
<a href="pricing-plan.html" class="sidebar-menu__link">
<span class="icon"><i class="ph ph-coins"></i></span>
<span class="text">Pricing</span>
</a>
</li>
<li class="sidebar-menu__item">
<span class="text-gray-300 text-sm px-20 pt-20 fw-semibold border-top border-gray-100 d-block text-uppercase">Settings</span>
</li>
<li class="sidebar-menu__item">
<a href="setting.html" class="sidebar-menu__link">
<span class="icon"><i class="ph ph-gear"></i></span>
<span class="text">Account Settings</span>
</a>
</li>
<li class="sidebar-menu__item has-dropdown">
<a href="javascript:void(0)" class="sidebar-menu__link">
<span class="icon"><i class="ph ph-shield-check"></i></span>
<span class="text">Authetication</span>
</a>
<!-- Submenu start -->
<ul class="sidebar-submenu">
<li class="sidebar-submenu__item">
<a href="sign-in.html" class="sidebar-submenu__link">Sign In</a>
</li>
<li class="sidebar-submenu__item">
<a href="sign-up.html" class="sidebar-submenu__link">Sign Up</a>
</li>
<li class="sidebar-submenu__item">
<a href="forgot-password.html" class="sidebar-submenu__link">Forgot Password</a>
</li>
<li class="sidebar-submenu__item">
<a href="reset-password.html" class="sidebar-submenu__link">Reset Password</a>
</li>
<li class="sidebar-submenu__item">
<a href="verify-email.html" class="sidebar-submenu__link">Verify Email</a>
</li>
<li class="sidebar-submenu__item">
<a href="two-step-verification.html" class="sidebar-submenu__link">Two Step Verification</a>
</li>
</ul>
<!-- Submenu End -->
</li>
</ul>
</div>
<div class="p-20 pt-80">
<div class="bg-main-50 p-20 pt-0 rounded-16 text-center mt-74">
<span class="border border-5 bg-white mx-auto border-primary-50 w-114 h-114 rounded-circle flex-center text-success-600 text-2xl translate-n74">
<img src="assets/images/icons/certificate.png" alt="" class="centerised-img">
</span>
<div class="mt-n74">
<h5 class="mb-4 mt-22">Get Pro Certificate</h5>
<p class="">Explore 400+ courses with lifetime members</p>
<a href="pricing-plan.html" class="btn btn-main mt-16 rounded-pill">Get Access</a>
</div>
</div>
</div>
</div>
</aside>
<!-- ============================ Sidebar End ============================ -->
<div class="dashboard-main-wrapper">
<div class="top-navbar flex-between gap-16">
<div class="flex-align gap-16">
<!-- Toggle Button Start -->
<button type="button" class="toggle-btn d-xl-none d-flex text-26 text-gray-500"><i class="ph ph-list"></i></button>
<!-- Toggle Button End -->
<form action="#" class="w-350 d-sm-block d-none">
<div class="position-relative">
<button type="submit" class="input-icon text-xl d-flex text-gray-100 pointer-event-none"><i class="ph ph-magnifying-glass"></i></button>
<input type="text" class="form-control ps-40 h-40 border-transparent focus-border-main-600 bg-main-50 rounded-pill placeholder-15" placeholder="Search...">
</div>
</form>
</div>
<div class="flex-align gap-16">
<div class="flex-align gap-8">
<!-- Notification Start -->
<div class="dropdown">
<button class="dropdown-btn shaking-animation text-gray-500 w-40 h-40 bg-main-50 hover-bg-main-100 transition-2 rounded-circle text-xl flex-center" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<span class="position-relative">
<i class="ph ph-bell"></i>
<span class="alarm-notify position-absolute end-0"></span>
</span>
</button>
<div class="dropdown-menu dropdown-menu--lg border-0 bg-transparent p-0">
<div class="card border border-gray-100 rounded-12 box-shadow-custom p-0 overflow-hidden">
<div class="card-body p-0">
<div class="py-8 px-24 bg-main-600">
<div class="flex-between">
<h5 class="text-xl fw-semibold text-white mb-0">Notifications</h5>
<div class="flex-align gap-12">
<button type="button" class="bg-white rounded-6 text-sm px-8 py-2 hover-text-primary-600"> New </button>
<button type="button" class="close-dropdown hover-scale-1 text-xl text-white"><i class="ph ph-x"></i></button>
</div>
</div>
</div>
<div class="p-24 max-h-270 overflow-y-auto scroll-sm">
<div class="d-flex align-items-start gap-12">
<img src="assets/images/thumbs/notification-img1.png" alt="" class="w-48 h-48 rounded-circle object-fit-cover">
<div class="border-bottom border-gray-100 mb-24 pb-24">
<div class="flex-align gap-4">
<a href="#" class="fw-medium text-15 mb-0 text-gray-300 hover-text-main-600 text-line-2">Ashwin Bose is requesting access to Design File - Final Project. </a>
<!-- Three Dot Dropdown Start -->
<div class="dropdown flex-shrink-0">
<button class="text-gray-200 rounded-4" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="ph-fill ph-dots-three-outline"></i>
</button>
<div class="dropdown-menu dropdown-menu--md border-0 bg-transparent p-0">
<div class="card border border-gray-100 rounded-12 box-shadow-custom">
<div class="card-body p-12">
<div class="max-h-200 overflow-y-auto scroll-sm pe-8">
<ul>
<li class="mb-0">
<a href="#" class="py-6 text-15 px-8 hover-bg-gray-50 text-gray-300 rounded-8 fw-normal text-xs d-block">
<span class="text">Mark as read</span>
</a>
</li>
<li class="mb-0">
<a href="#" class="py-6 text-15 px-8 hover-bg-gray-50 text-gray-300 rounded-8 fw-normal text-xs d-block">
<span class="text">Delete Notification</span>
</a>
</li>
<li class="mb-0">
<a href="#" class="py-6 text-15 px-8 hover-bg-gray-50 text-gray-300 rounded-8 fw-normal text-xs d-block">
<span class="text">Report</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Three Dot Dropdown End -->
</div>
<div class="flex-align gap-6 mt-8">
<img src="assets/images/icons/google-drive.png" alt="">
<div class="flex-align gap-4">
<p class="text-gray-900 text-sm text-line-1">Design brief and ideas.txt</p>
<span class="text-xs text-gray-200 flex-shrink-0">2.2 MB</span>
</div>
</div>
<div class="mt-16 flex-align gap-8">
<button type="button" class="btn btn-main py-8 text-15 fw-normal px-16">Accept</button>
<button type="button" class="btn btn-outline-gray py-8 text-15 fw-normal px-16">Decline</button>
</div>
<span class="text-gray-200 text-13 mt-8">2 mins ago</span>
</div>
</div>
<div class="d-flex align-items-start gap-12">
<img src="assets/images/thumbs/notification-img2.png" alt="" class="w-48 h-48 rounded-circle object-fit-cover">
<div class="">
<a href="#" class="fw-medium text-15 mb-0 text-gray-300 hover-text-main-600 text-line-2">Patrick added a comment on Design Assets - Smart Tags file:</a>
<span class="text-gray-200 text-13">2 mins ago</span>
</div>
</div>
</div>
<a href="#" class="py-13 px-24 fw-bold text-center d-block text-primary-600 border-top border-gray-100 hover-text-decoration-underline"> View All </a>
</div>
</div>
</div>
</div>
<!-- Notification Start -->
<!-- Language Start -->
<div class="dropdown">
<button class="text-gray-500 w-40 h-40 bg-main-50 hover-bg-main-100 transition-2 rounded-circle text-xl flex-center" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="ph ph-globe"></i>
</button>
<div class="dropdown-menu dropdown-menu--md border-0 bg-transparent p-0">
<div class="card border border-gray-100 rounded-12 box-shadow-custom">
<div class="card-body">
<div class="max-h-270 overflow-y-auto scroll-sm pe-8">
<div class="form-check form-radio d-flex align-items-center justify-content-between ps-0 mb-16">
<label class="ps-0 form-check-label line-height-1 fw-medium text-secondary-light" for="arabic">
<span class="text-black hover-bg-transparent hover-text-primary d-flex align-items-center gap-8">
<img src="assets/images/thumbs/flag1.png" alt="" class="w-32-px h-32-px border borde border-gray-100 rounded-circle flex-shrink-0">
<span class="text-15 fw-semibold mb-0">Arabic</span>
</span>
</label>
<input class="form-check-input" type="radio" name="language" id="arabic">
</div>
<div class="form-check form-radio d-flex align-items-center justify-content-between ps-0 mb-16">
<label class="ps-0 form-check-label line-height-1 fw-medium text-secondary-light" for="germany">
<span class="text-black hover-bg-transparent hover-text-primary d-flex align-items-center gap-8">
<img src="assets/images/thumbs/flag2.png" alt="" class="w-32-px h-32-px border borde border-gray-100 rounded-circle flex-shrink-0">
<span class="text-15 fw-semibold mb-0">Germany</span>
</span>
</label>
<input class="form-check-input" type="radio" name="language" id="germany">
</div>
<div class="form-check form-radio d-flex align-items-center justify-content-between ps-0 mb-16">
<label class="ps-0 form-check-label line-height-1 fw-medium text-secondary-light" for="english">
<span class="text-black hover-bg-transparent hover-text-primary d-flex align-items-center gap-8">
<img src="assets/images/thumbs/flag3.png" alt="" class="w-32-px h-32-px border borde border-gray-100 rounded-circle flex-shrink-0">
<span class="text-15 fw-semibold mb-0">English</span>
</span>
</label>
<input class="form-check-input" type="radio" name="language" id="english">
</div>
<div class="form-check form-radio d-flex align-items-center justify-content-between ps-0">
<label class="ps-0 form-check-label line-height-1 fw-medium text-secondary-light" for="spanish">
<span class="text-black hover-bg-transparent hover-text-primary d-flex align-items-center gap-8">
<img src="assets/images/thumbs/flag4.png" alt="" class="w-32-px h-32-px border borde border-gray-100 rounded-circle flex-shrink-0">
<span class="text-15 fw-semibold mb-0">Spanish</span>
</span>
</label>
<input class="form-check-input" type="radio" name="language" id="spanish">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Language Start -->
</div>
<!-- User Profile Start -->
<div class="dropdown">
<button class="users arrow-down-icon border border-gray-200 rounded-pill p-4 d-inline-block pe-40 position-relative" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<span class="position-relative">
<img src="assets/images/thumbs/user-img.png" alt="Image" class="h-32 w-32 rounded-circle">
<span class="activation-badge w-8 h-8 position-absolute inset-block-end-0 inset-inline-end-0"></span>
</span>
</button>
<div class="dropdown-menu dropdown-menu--lg border-0 bg-transparent p-0">
<div class="card border border-gray-100 rounded-12 box-shadow-custom">
<div class="card-body">
<div class="flex-align gap-8 mb-20 pb-20 border-bottom border-gray-100">
<img src="assets/images/thumbs/user-img.png" alt="" class="w-54 h-54 rounded-circle">
<div class="">
<h4 class="mb-0">Michel John</h4>
<p class="fw-medium text-13 text-gray-200">examplemail@mail.com</p>
</div>
</div>
<ul class="max-h-270 overflow-y-auto scroll-sm pe-4">
<li class="mb-4">
<a href="setting.html" class="py-12 text-15 px-20 hover-bg-gray-50 text-gray-300 rounded-8 flex-align gap-8 fw-medium text-15">
<span class="text-2xl text-primary-600 d-flex"><i class="ph ph-gear"></i></span>
<span class="text">Account Settings</span>
</a>
</li>
<li class="mb-4">
<a href="pricing-plan.html" class="py-12 text-15 px-20 hover-bg-gray-50 text-gray-300 rounded-8 flex-align gap-8 fw-medium text-15">
<span class="text-2xl text-primary-600 d-flex"><i class="ph ph-chart-bar"></i></span>
<span class="text">Upgrade Plan</span>
</a>
</li>
<li class="mb-4">
<a href="analytics.html" class="py-12 text-15 px-20 hover-bg-gray-50 text-gray-300 rounded-8 flex-align gap-8 fw-medium text-15">
<span class="text-2xl text-primary-600 d-flex"><i class="ph ph-chart-line-up"></i></span>
<span class="text">Daily Activity</span>
</a>
</li>
<li class="mb-4">
<a href="message.html" class="py-12 text-15 px-20 hover-bg-gray-50 text-gray-300 rounded-8 flex-align gap-8 fw-medium text-15">
<span class="text-2xl text-primary-600 d-flex"><i class="ph ph-chats-teardrop"></i></span>
<span class="text">Inbox</span>
</a>
</li>
<li class="mb-4">
<a href="email.html" class="py-12 text-15 px-20 hover-bg-gray-50 text-gray-300 rounded-8 flex-align gap-8 fw-medium text-15">
<span class="text-2xl text-primary-600 d-flex"><i class="ph ph-envelope-simple"></i></span>
<span class="text">Email</span>
</a>
</li>
<li class="pt-8 border-top border-gray-100">
<a href="sign-in.html" class="py-12 text-15 px-20 hover-bg-danger-50 text-gray-300 hover-text-danger-600 rounded-8 flex-align gap-8 fw-medium text-15">
<span class="text-2xl text-danger-600 d-flex"><i class="ph ph-sign-out"></i></span>
<span class="text">Log Out</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- User Profile Start -->
</div>
</div>
<div class="dashboard-body">
<!-- Breadcrumb Start -->
<div class="breadcrumb mb-24">
<ul class="flex-align gap-4">
<li><a href="index.html" class="text-gray-200 fw-normal text-15 hover-text-main-600">Home</a></li>
<li> <span class="text-gray-500 fw-normal d-flex"><i class="ph ph-caret-right"></i></span> </li>
<li><span class="text-main-600 fw-normal text-15">Course Details</span></li>
</ul>
</div>
<!-- Breadcrumb End -->
<div class="row gy-4">
<div class="col-md-8">
<!-- Course Card Start -->
<div class="card">
<div class="card-body p-lg-20 p-sm-3">
<div class="flex-between flex-wrap gap-12 mb-20">
<div>
<h3 class="mb-4">The Complete Web Development Course</h3>
<p class="text-gray-600 text-15">Prof. Devonne Wallbridge</p>
</div>
<div class="flex-align flex-wrap gap-24">
<span class="py-6 px-16 bg-main-50 text-main-600 rounded-pill text-15">Web Development</span>
<div class=" share-social position-relative">
<button type="button" class="share-social__button text-gray-200 text-26 d-flex hover-text-main-600"><i class="ph ph-share-network"></i></button>
<div class="share-social__icons bg-white box-shadow-2xl p-16 border border-gray-100 rounded-8 position-absolute inset-block-start-100 inset-inline-end-0">
<ul class="flex-align gap-8">
<li>
<a href="https://www.facebook.com" class="flex-center w-36 h-36 border border-main-600 text-white rounded-circle text-xl bg-main-600 hover-bg-main-800 hover-border-main-800"><i class="ph ph-facebook-logo"></i></a>
</li>
<li>
<a href="https://www.google.com" class="flex-center w-36 h-36 border border-main-600 text-white rounded-circle text-xl bg-main-600 hover-bg-main-800 hover-border-main-800"> <i class="ph ph-twitter-logo"></i></a>
</li>
<li>
<a href="https://www.twitter.com" class="flex-center w-36 h-36 border border-main-600 text-white rounded-circle text-xl bg-main-600 hover-bg-main-800 hover-border-main-800"><i class="ph ph-linkedin-logo"></i></a>
</li>
<li>
<a href="https://www.instagram.com" class="flex-center w-36 h-36 border border-main-600 text-white rounded-circle text-xl bg-main-600 hover-bg-main-800 hover-border-main-800"><i class="ph ph-instagram-logo"></i></a>
</li>
</ul>
</div>
</div>
<button type="button" class="bookmark-icon text-gray-200 text-26 d-flex hover-text-main-600">
<i class="ph ph-bookmarks"></i>
</button>
</div>
</div>
<div class="rounded-16 overflow-hidden">
<video id="player" class="player" playsinline controls data-poster="assets/images/thumbs/course-details.png">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/webm">
</video>
</div>
<div class="mt-24">
<div class="mb-24 pb-24 border-bottom border-gray-100">
<h5 class="mb-12 fw-bold">About this course</h5>
<p class="text-gray-300 text-15">Learn web design in 1 hour with 25+ simple-to-use rules and guidelines — tons of amazing web design resources included!</p>
</div>
<div class="mb-24 pb-24 border-bottom border-gray-100">
<h5 class="mb-12 fw-bold">Description</h5>
<p class="text-gray-300 text-15 mb-8">Lorem ipsum dolor sit amet consectetur. Molestie pharetra gravida morbi eget. Diam quam non pretium malesuada. Elit porta aliquam cursus id. Fermentum adipiscing et nisl dignissim lectus ornare amet metus. Eget leo aliquet diam dictum et sit enim. Diam enim in eu rutrum est. Eu tristique euismod malesuada velit amet tellus. Ornare viverra dignissim odio magna dui fermentum non scelerisque scelerisque. Non pellentesque commodo ut sagittis felis. </p>
<p class="text-gray-300 text-15">Aliquam pharetra a urna varius proin quis. Diam amet blandit ullamcorper diam lectus at eget. Erat molestie purus et vitae lectus aenean in cursus. Arcu gravida tellus purus ultricies tristique. Ac turpis aliquam consectetur sit cras.</p>
</div>
<div class="mb-24 pb-24 border-bottom border-gray-100">
<h5 class="mb-16 fw-bold">This Course Includes</h5>
<div class="row g-20">
<div class="col-md-4 col-sm-6">
<ul>
<li class="flex-align gap-6 text-gray-300 text-15 mb-12">
<span class="flex-shrink-0 text-22 d-flex text-main-600"><i class="ph ph-checks"></i> </span>
1.3 Hours on-demand video
</li>
<li class="flex-align gap-6 text-gray-300 text-15 mb-12">
<span class="flex-shrink-0 text-22 d-flex text-main-600"><i class="ph ph-checks"></i> </span>
7 Design Exercise
</li>
<li class="flex-align gap-6 text-gray-300 text-15 mb-12">
<span class="flex-shrink-0 text-22 d-flex text-main-600"><i class="ph ph-checks"></i> </span>
vide48 Articleso
</li>
<li class="flex-align gap-6 text-gray-300 text-15 mb-12">
<span class="flex-shrink-0 text-22 d-flex text-main-600"><i class="ph ph-checks"></i> </span>
120 Download Resources
</li>
<li class="flex-align gap-6 text-gray-300 text-15 mb-12">
<span class="flex-shrink-0 text-22 d-flex text-main-600"><i class="ph ph-checks"></i> </span>
Access on Mobile
</li>
</ul>
</div>
<div class="col-md-4 col-sm-6">
<ul>
<li class="flex-align gap-6 text-gray-300 text-15 mb-12">
<span class="flex-shrink-0 text-22 d-flex text-main-600"><i class="ph ph-checks"></i> </span>
35 Quizes
</li>
<li class="flex-align gap-6 text-gray-300 text-15 mb-12">
<span class="flex-shrink-0 text-22 d-flex text-main-600"><i class="ph ph-checks"></i> </span>
Lectures: 19
</li>
<li class="flex-align gap-6 text-gray-300 text-15 mb-12">
<span class="flex-shrink-0 text-22 d-flex text-main-600"><i class="ph ph-checks"></i> </span>
Captions: Yes
</li>
<li class="flex-align gap-6 text-gray-300 text-15 mb-12">
<span class="flex-shrink-0 text-22 d-flex text-main-600"><i class="ph ph-checks"></i> </span>
Video: 1.5 total hours
</li>
<li class="flex-align gap-6 text-gray-300 text-15 mb-12">
<span class="flex-shrink-0 text-22 d-flex text-main-600"><i class="ph ph-checks"></i> </span>
Language English
</li>
</ul>
</div>
</div>
</div>
<div class="">
<h5 class="mb-12 fw-bold">Instructor</h5>
<div class="flex-align gap-8">
<img src="assets/images/thumbs/mentor-img1.png" alt="" class="w-44 h-44 rounded-circle object-fit-cover flex-shrink-0">
<div class="d-flex flex-column">
<h6 class="text-15 fw-bold mb-0">Brooklyn Simmons</h6>
<span class="text-13 text-gray-300">Web Design Instructor</span>
<div class="flex-align gap-4 mt-4">
<span class="text-15 fw-bold text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
<span class="text-13 fw-bold text-gray-600">4.9</span>
<span class="text-13 fw-bold text-gray-300">(12k)</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Course Card End -->
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body p-0">
<div class="course-item">
<button type="button" class="course-item__button active flex-align gap-4 w-100 p-16 border-bottom border-gray-100">
<span class="d-block text-start">
<span class="d-block h5 mb-0 text-line-1">The Courses Program</span>
<span class="d-block text-15 text-gray-300">2 / 5 | 4.4 min</span>
</span>
<span class="course-item__arrow ms-auto text-20 text-gray-500"><i class="ph ph-arrow-right"></i></span>
</button>
<div class="course-item-dropdown active border-bottom border-gray-100">
<ul class="course-list p-16 pb-0">
<li class="course-list__item flex-align gap-8 mb-16 active">
<span class="circle flex-shrink-0 text-32 d-flex text-gray-100"><i class="ph ph-circle"></i></span>
<div class="w-100">
<a href="#" class="text-gray-300 fw-medium d-block hover-text-main-600 d-lg-block">
1. Welcome to this course
<span class="text-gray-300 fw-normal d-block">2.4 min</span>
</a>
</div>
</li>
<li class="course-list__item flex-align gap-8 mb-16 active">
<span class="circle flex-shrink-0 text-32 d-flex text-gray-100"><i class="ph ph-circle"></i></span>
<div class="w-100">
<a href="#" class="text-gray-300 fw-medium d-block hover-text-main-600 d-lg-block">
2. Watch before you start
<span class="text-gray-300 fw-normal d-block">4.8 min</span>
</a>
</div>
</li>
<li class="course-list__item flex-align gap-8 mb-16">
<span class="circle flex-shrink-0 text-32 d-flex text-gray-100"><i class="ph ph-circle"></i></span>
<div class="w-100">
<a href="#" class="text-gray-300 fw-medium d-block hover-text-main-600 d-lg-block">
3. Basic development theory
<span class="text-gray-300 fw-normal d-block">5.9 min</span>
</a>
</div>
</li>
<li class="course-list__item flex-align gap-8 mb-16">
<span class="circle flex-shrink-0 text-32 d-flex text-gray-100"><i class="ph ph-circle"></i></span>
<div class="w-100">
<a href="#" class="text-gray-300 fw-medium d-block hover-text-main-600 d-lg-block">
4. Basic front-end fundamentals
<span class="text-gray-300 fw-normal d-block">3.6 min</span>
</a>
</div>
</li>
<li class="course-list__item flex-align gap-8 mb-16">
<span class="circle flex-shrink-0 text-32 d-flex text-gray-100"><i class="ph ph-circle"></i></span>
<div class="w-100">
<a href="#" class="text-gray-300 fw-medium d-block hover-text-main-600 d-lg-block">
5. What is front-end development?
<span class="text-gray-300 fw-normal d-block">10.6 min</span>
</a>
</div>
</li>
</ul>
</div>
</div>
<div class="course-item">
<button type="button" class="course-item__button flex-align gap-4 w-100 p-16 border-bottom border-gray-100">
<span class="d-block text-start">
<span class="d-block h5 mb-0 text-line-1">Web Design for Web Developers</span>
<span class="d-block text-15 text-gray-300">0 / 4 | 4.4 min</span>
</span>
<span class="course-item__arrow ms-auto text-20 text-gray-500"><i class="ph ph-arrow-right"></i></span>
</button>
<div class="course-item-dropdown border-bottom border-gray-100">
<ul class="course-list p-16 pb-0">
<li class="course-list__item flex-align gap-8 mb-16">
<span class="circle flex-shrink-0 text-32 d-flex text-gray-100"><i class="ph ph-circle"></i></span>
<div class="w-100">
<a href="#" class="text-gray-300 fw-medium d-block hover-text-main-600 d-lg-block">
1. Welcome to this course
<span class="text-gray-300 fw-normal d-block">2.4 min</span>
</a>
</div>
</li>
<li class="course-list__item flex-align gap-8 mb-16">
<span class="circle flex-shrink-0 text-32 d-flex text-gray-100"><i class="ph ph-circle"></i></span>
<div class="w-100">
<a href="#" class="text-gray-300 fw-medium d-block hover-text-main-600 d-lg-block">
2. Watch before you start
<span class="text-gray-300 fw-normal d-block">4.8 min</span>
</a>
</div>
</li>
<li class="course-list__item flex-align gap-8 mb-16">
<span class="circle flex-shrink-0 text-32 d-flex text-gray-100"><i class="ph ph-circle"></i></span>
<div class="w-100">
<a href="#" class="text-gray-300 fw-medium d-block hover-text-main-600 d-lg-block">
3. Basic development theory
<span class="text-gray-300 fw-normal d-block">5.9 min</span>
</a>
</div>
</li>
<li class="course-list__item flex-align gap-8 mb-16">
<span class="circle flex-shrink-0 text-32 d-flex text-gray-100"><i class="ph ph-circle"></i></span>
<div class="w-100">
<a href="#" class="text-gray-300 fw-medium d-block hover-text-main-600 d-lg-block">
4. Basic front-end fundamentals
<span class="text-gray-300 fw-normal d-block">3.6 min</span>
</a>
</div>
</li>
<li class="course-list__item flex-align gap-8 mb-16">
<span class="circle flex-shrink-0 text-32 d-flex text-gray-100"><i class="ph ph-circle"></i></span>
<div class="w-100">
<a href="#" class="text-gray-300 fw-medium d-block hover-text-main-600 d-lg-block">
5. What is front-end development?
<span class="text-gray-300 fw-normal d-block">10.6 min</span>
</a>
</div>
</li>
</ul>
</div>
</div>
<div class="course-item">
<button type="button" class="course-item__button flex-align gap-4 w-100 p-16 border-bottom border-gray-100">
<span class="d-block text-start">
<span class="d-block h5 mb-0 text-line-1">Build Beautiful Websites!</span>
<span class="d-block text-15 text-gray-300">0 / 6 | 4.4 min</span>
</span>
<span class="course-item__arrow ms-auto text-20 text-gray-500"><i class="ph ph-arrow-right"></i></span>
</button>
<div class="course-item-dropdown border-bottom border-gray-100">
<ul class="course-list p-16 pb-0">
<li class="course-list__item flex-align gap-8 mb-16">
<span class="circle flex-shrink-0 text-32 d-flex text-gray-100"><i class="ph ph-circle"></i></span>
<div class="w-100">
<a href="#" class="text-gray-300 fw-medium d-block hover-text-main-600 d-lg-block">
1. Welcome to this course
<span class="text-gray-300 fw-normal d-block">2.4 min</span>
</a>
</div>
</li>
<li class="course-list__item flex-align gap-8 mb-16">
<span class="circle flex-shrink-0 text-32 d-flex text-gray-100"><i class="ph ph-circle"></i></span>
<div class="w-100">
<a href="#" class="text-gray-300 fw-medium d-block hover-text-main-600 d-lg-block">
2. Watch before you start
<span class="text-gray-300 fw-normal d-block">4.8 min</span>
</a>
</div>
</li>
<li class="course-list__item flex-align gap-8 mb-16">
<span class="circle flex-shrink-0 text-32 d-flex text-gray-100"><i class="ph ph-circle"></i></span>
<div class="w-100">
<a href="#" class="text-gray-300 fw-medium d-block hover-text-main-600 d-lg-block">
3. Basic development theory
<span class="text-gray-300 fw-normal d-block">5.9 min</span>
</a>
</div>
</li>
<li class="course-list__item flex-align gap-8 mb-16">
<span class="circle flex-shrink-0 text-32 d-flex text-gray-100"><i class="ph ph-circle"></i></span>
<div class="w-100">
<a href="#" class="text-gray-300 fw-medium d-block hover-text-main-600 d-lg-block">
4. Basic front-end fundamentals
<span class="text-gray-300 fw-normal d-block">3.6 min</span>
</a>
</div>
</li>
<li class="course-list__item flex-align gap-8 mb-16">
<span class="circle flex-shrink-0 text-32 d-flex text-gray-100"><i class="ph ph-circle"></i></span>
<div class="w-100">
<a href="#" class="text-gray-300 fw-medium d-block hover-text-main-600 d-lg-block">
5. What is front-end development?
<span class="text-gray-300 fw-normal d-block">10.6 min</span>
</a>
</div>
</li>
</ul>
</div>
</div>
<div class="course-item">
<button type="button" class="course-item__button flex-align gap-4 w-100 p-16">
<span class="d-block text-start">
<span class="d-block h5 mb-0 text-line-1">Final Project</span>
<span class="d-block text-15 text-gray-300">0 / 3 | 4.4 min</span>
</span>
<span class="course-item__arrow ms-auto text-20 text-gray-500"><i class="ph ph-arrow-right"></i></span>
</button>
<div class="course-item-dropdown">
<ul class="course-list p-16 pb-0">
<li class="course-list__item flex-align gap-8 mb-16">
<span class="circle flex-shrink-0 text-32 d-flex text-gray-100"><i class="ph ph-circle"></i></span>
<div class="w-100">
<a href="#" class="text-gray-300 fw-medium d-block hover-text-main-600 d-lg-block">
1. Welcome to this course
<span class="text-gray-300 fw-normal d-block">2.4 min</span>
</a>
</div>
</li>
<li class="course-list__item flex-align gap-8 mb-16">
<span class="circle flex-shrink-0 text-32 d-flex text-gray-100"><i class="ph ph-circle"></i></span>
<div class="w-100">
<a href="#" class="text-gray-300 fw-medium d-block hover-text-main-600 d-lg-block">
2. Watch before you start
<span class="text-gray-300 fw-normal d-block">4.8 min</span>
</a>
</div>
</li>
<li class="course-list__item flex-align gap-8 mb-16">
<span class="circle flex-shrink-0 text-32 d-flex text-gray-100"><i class="ph ph-circle"></i></span>
<div class="w-100">
<a href="#" class="text-gray-300 fw-medium d-block hover-text-main-600 d-lg-block">
3. Basic development theory
<span class="text-gray-300 fw-normal d-block">5.9 min</span>
</a>
</div>
</li>
<li class="course-list__item flex-align gap-8 mb-16">
<span class="circle flex-shrink-0 text-32 d-flex text-gray-100"><i class="ph ph-circle"></i></span>
<div class="w-100">
<a href="#" class="text-gray-300 fw-medium d-block hover-text-main-600 d-lg-block">
4. Basic front-end fundamentals
<span class="text-gray-300 fw-normal d-block">3.6 min</span>
</a>
</div>
</li>
<li class="course-list__item flex-align gap-8 mb-16">
<span class="circle flex-shrink-0 text-32 d-flex text-gray-100"><i class="ph ph-circle"></i></span>
<div class="w-100">
<a href="#" class="text-gray-300 fw-medium d-block hover-text-main-600 d-lg-block">
5. What is front-end development?
<span class="text-gray-300 fw-normal d-block">10.6 min</span>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card mt-24">
<div class="card-body">
<h4 class="mb-20">Featured courses</h4>
<div class="rounded-16 overflow-hidden">
<video id="featuredPlayer" class="player" playsinline controls data-poster="assets/images/thumbs/featured-course.png">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/webm">
</video>
</div>
<h5 class="mb-16 mt-20">Development for Beginners</h5>
<p class="text-gray-300">The Fender Acoustic Guitar is the best choice for both beginners and professionals offering a great sound.</p>
<a href="course-details.html" class="btn btn-main rounded-pill py-11 w-100 mt-16">Upgrade Now</a>
</div>
</div>
</div>
</div>
</div>
<div class="dashboard-footer">
<div class="flex-between flex-wrap gap-16">
<p class="text-gray-300 text-13 fw-normal"> © Copyright Edmate 2024, All Right Reserverd</p>
<div class="flex-align flex-wrap gap-16">
<a href="#" class="text-gray-300 text-13 fw-normal hover-text-main-600 hover-text-decoration-underline">License</a>
<a href="#" class="text-gray-300 text-13 fw-normal hover-text-main-600 hover-text-decoration-underline">More Themes</a>
<a href="#" class="text-gray-300 text-13 fw-normal hover-text-main-600 hover-text-decoration-underline">Documentation</a>
<a href="#" class="text-gray-300 text-13 fw-normal hover-text-main-600 hover-text-decoration-underline">Support</a>
</div>
</div>
</div>
</div>
<!-- Jquery js -->
<script src="assets/js/jquery-3.7.1.min.js"></script>
<!-- Bootstrap Bundle Js -->
<script src="assets/js/boostrap.bundle.min.js"></script>
<!-- Phosphor Js -->
<script src="assets/js/phosphor-icon.js"></script>
<!-- file upload -->
<script src="assets/js/file-upload.js"></script>
<!-- file upload -->
<script src="assets/js/plyr.js"></script>
<!-- dataTables -->
<script src="https://cdn.datatables.net/2.0.8/js/dataTables.min.js"></script>
<!-- full calendar -->
<script src="assets/js/full-calendar.js"></script>
<!-- jQuery UI -->
<script src="assets/js/jquery-ui.js"></script>
<!-- jQuery UI -->
<script src="assets/js/editor-quill.js"></script>
<!-- apex charts -->
<script src="assets/js/apexcharts.min.js"></script>
<!-- Calendar Js -->
<script src="assets/js/calendar.js"></script>
<!-- jvectormap Js -->
<script src="assets/js/jquery-jvectormap-2.0.5.min.js"></script>
<!-- jvectormap world Js -->
<script src="assets/js/jquery-jvectormap-world-mill-en.js"></script>
<!-- main js -->
<script src="assets/js/main.js"></script>
<script>
// Plyr Js Start
const player = new Plyr('#player');
const featuredPlayer = new Plyr('#featuredPlayer');
// Plyr Js End
$('.delete-item-btn').on('click', function () {
$(this).closest('.upload-card-item').addClass('d-none')
});
// ========================= Social Share Js Start ===========================
$('.share-social__button').on('click', function(event) {
event.stopPropagation();
$(this).addClass('active');
$('.share-social__icons').toggleClass('show')
});
$('body').on('click', function(event) {
$('.share-social__icons').removeClass('show');
$('.share-social__button').removeClass('active');
});
// For device width size js start
// let screenSize = screen.width
// alert(' Your Screen Size is: ' + screenSize + 'pixel');
// For device width size js start
let socialShareBtn = $('.share-social');
// Check if the element exists
if (socialShareBtn.length > 0) {
let leftDistance = socialShareBtn.offset().left;
let rightDistance = $(window).width() - (leftDistance + socialShareBtn.outerWidth());
if (leftDistance < rightDistance) {
$('.share-social__icons').addClass('left');
}
}
// ========================= Social Share Js End ===========================
// Bookmark js Start
$('.bookmark-icon').on('click', function () {
$(this).toggleClass('active');
let icon = $(this).children('i');
if($(this).hasClass('active')) {
icon.removeClass('ph ph-bookmarks');
icon.addClass('ph-fill ph-bookmarks text-main-600');
} else {
icon.removeClass('ph-fill ph-bookmarks');
icon.addClass('ph ph-bookmarks');
}
});
// Bookmark js End
</script>
</body>
</html>