<?php defined('BASEPATH') or exit('Direct access is not allowed'); ?>
<!DOCTYPE html>
<html>
<head>
<?php include 'app/views/common/css.php';?>
</head>
<body>
<!-- **************** MAIN CONTENT START **************** -->

  <!-- =======================
  Header START -->
  <header class="navbar-light fixed-top header-static bg-mode">

    <!-- Logo Nav START -->
    <nav class="navbar navbar-expand-lg">
      <div class="container-fluid">
        <!-- Logo START -->
        <a class="navbar-brand" href="index-2.html">
          <img class="light-mode-item navbar-brand-item" src="app/views/assets/images/logo.png" alt="logo">
				  <img class="dark-mode-item navbar-brand-item" src="app/views/assets/images/logo.png" alt="logo">		
        </a>
        <!-- Logo END -->

        <button class="icon-md btn btn-light p-0 d-block d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarVerticaloffcanvas" aria-controls="navbarVerticaloffcanvas">
          <i class="bi bi-justify-left fs-4"></i>
        </button>

        <!-- Responsive navbar toggler -->
        <button class="navbar-toggler ms-auto icon-md btn btn-light p-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-animation">
          <span></span>
          <span></span>
          <span></span>
        </span>
      </button>

        <!-- Main navbar START -->
        <div class="collapse navbar-collapse" id="navbarCollapse">

          <!-- Nav Search START -->
          <div class="nav mt-3 mt-lg-0 flex-nowrap align-items-center px-4 px-lg-0">
            <div class="nav-item w-100">
              <form class="rounded position-relative">
                <input class="form-control ps-5 bg-light" type="search" placeholder="Search..." aria-label="Search">
                <button class="btn bg-transparent px-2 py-0 position-absolute top-50 start-0 translate-middle-y" type="submit"><i class="bi bi-search fs-5"> </i></button>
              </form>
            </div>
          </div>
          <!-- Nav Search END -->

          <ul class="navbar-nav navbar-nav-scroll mx-auto">
            <!-- Nav item 1 Demos -->
            <li class="nav-item">
              <a class="nav-link active" href="#">Overview</a>
            </li>
            <!-- Nav item 1 Demos -->
            <li class="nav-item">
              <a class="nav-link" href="#">Subscriptions</a>
            </li>
            <!-- Nav item 1 Demos -->
            <li class="nav-item">
              <a class="nav-link" href="#">Streams</a>
            </li>
            <!-- Nav item 1 Demos -->
            <li class="nav-item">
              <a class="nav-link" href="#">Results</a>
            </li>
            <!-- Nav item 2 Pages -->
          </ul>
        </div>
        <!-- Main navbar END -->

        <!-- Nav right START -->
        <ul class="nav flex-nowrap align-items-center ms-lg-3 list-unstyled">
          <li class="nav-item ms-2">
            <a class="nav-link icon-md btn p-0" href="settings.html">
              <i class="bi bi-gear-fill fs-6"> </i>
            </a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link icon-md btn p-0" href="#" id="notifDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
              <i class="bi bi-bell-fill fs-6"> </i>
            </a>
            <div class="dropdown-menu dropdown-animation dropdown-menu-end dropdown-menu-size-md p-0 shadow-lg border-0" aria-labelledby="notifDropdown">
              <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                  <h6 class="m-0">Notifications <span class="badge bg-danger bg-opacity-10 text-danger ms-2">4 new</span></h6>
                  <a class="small" href="#">Clear all</a>
                </div>
                <div class="card-body p-0">
                  <ul class="list-group list-group-flush list-unstyled p-2">
                    <!-- Notif item -->
                    <li>
                      <div class="list-group-item list-group-item-action rounded badge-unread d-flex border-0 mb-1 p-3">
                        <div class="avatar text-center d-none d-sm-inline-block">
                          <img class="avatar-img rounded-circle" src="app/views/assets/images/avatar/01.jpg" alt="">
                        </div>
                        <div class="ms-sm-3">
                          <div class=" d-flex">
                          <p class="small mb-2"><b>Judy Nguyen</b> sent you a friend request.</p>
                          <p class="small ms-3 text-nowrap">Just now</p>
                        </div>
                        <div class="d-flex">
                          <button class="btn btn-sm py-1 btn-primary me-2">Accept </button>
                          <button class="btn btn-sm py-1 btn-danger-soft">Delete </button>
                        </div>
                      </div>
                    </div>
                    </li>
                    <!-- Notif item -->
                    <li>
                      <div class="list-group-item list-group-item-action rounded badge-unread d-flex border-0 mb-1 p-3 position-relative">
                        <div class="avatar text-center d-none d-sm-inline-block">
                          <img class="avatar-img rounded-circle" src="app/views/assets/images/avatar/02.jpg" alt="">
                        </div>
                        <div class="ms-sm-3 d-flex">
                          <div>
                            <p class="small mb-2">Wish <b>Amanda Reed</b> a happy birthday (Nov 12)</p>
                            <button class="btn btn-sm btn-outline-light py-1 me-2">Say happy birthday 🎂</button>
                          </div>
                          <p class="small ms-3">2min</p>
                        </div>
                      </div>
                    </li>
                    <!-- Notif item -->
                    <li>
                      <a href="#" class="list-group-item list-group-item-action rounded d-flex border-0 mb-1 p-3">
                        <div class="avatar text-center d-none d-sm-inline-block">
                          <div class="avatar-img rounded-circle bg-success"><span class="text-white position-absolute top-50 start-50 translate-middle fw-bold">WB</span></div>
                        </div>
                        <div class="ms-sm-3">
                          <div class="d-flex">
                            <p class="small mb-2">Webestica has 15 like and 1 new activity</p>
                            <p class="small ms-3">1hr</p>
                          </div>
                        </div>
                      </a>
                    </li>
                    <!-- Notif item -->
                    <li>
                      <a href="#" class="list-group-item list-group-item-action rounded d-flex border-0 p-3 mb-1">
                        <div class="avatar text-center d-none d-sm-inline-block">
                          <img class="avatar-img rounded-circle" src="app/views/assets/images/logo/12.svg" alt="">
                        </div>
                        <div class="ms-sm-3 d-flex">
                          <p class="small mb-2"><b>Bootstrap in the news:</b> The search giant’s parent company, Alphabet, just joined an exclusive club of tech stocks.</p>
                          <p class="small ms-3">4hr</p>
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>
                <div class="card-footer text-center">
                  <a href="#" class="btn btn-sm btn-primary-soft">See all incoming activity</a>
                </div>
              </div>
            </div>
          </li>
          <!-- Notification dropdown END -->

          <li class="nav-item ms-3 dropdown">
            <a class="nav-link p-0" href="#" id="profileDropdown" role="button" data-bs-auto-close="outside" data-bs-display="static" data-bs-toggle="dropdown" aria-expanded="false">
              <div class="d-flex align-items-center position-relative">
                <!-- Avatar -->
                <div class="avatar avatar-sm me-xl-3">
                  <img class="avatar-img rounded-circle" src="app/views/assets/images/avatar/07.jpg" alt="avatar">
                </div>
                <div class="d-none d-xl-block">
                  <span class="h6 stretched-link">Lori Ferguson</span>
                  <p class="small m-0">Web Developer</p>
                </div>
              </div>
            </a>
            <ul class="dropdown-menu dropdown-animation dropdown-menu-end pt-3 small me-md-n3" aria-labelledby="profileDropdown">
              <!-- Links -->
              <li><a class="dropdown-item" href="/trainingportal/Settings"><i class="bi bi-gear fa-fw me-2"></i>Settings & Privacy</a></li>
              <li> 
                <a class="dropdown-item" href="https://support.webestica.com/" target="_blank">
                  <i class="fa-fw bi bi-life-preserver me-2"></i>Support
                </a> 
              </li>
              <li> 
                <a class="dropdown-item" href="docs/index.html" target="_blank">
                  <i class="fa-fw bi bi-card-text me-2"></i>Documentation
                </a> 
              </li>
              <li class="dropdown-divider"></li>
              <li><a class="dropdown-item bg-danger-soft-hover" href="/trainingportal/Main/Logout"><i class="bi bi-power fa-fw me-2"></i>Sign Out</a></li>
              <li> <hr class="dropdown-divider"></li>
              <!-- Dark mode switch START -->
              <li>
                <div class="modeswitch-wrap" id="darkModeSwitch">
                  <div class="modeswitch-item">
                    <div class="modeswitch-icon"></div>
                  </div>
                  <span>Dark mode</span>
                </div>
              </li> 
              <!-- Dark mode switch END -->
            </ul>
          </li>
          <!-- Profile START -->
          
        </ul>
        <!-- Nav right END -->
      </div>
    </nav>
    <!-- Logo Nav END -->
  </header>
  <!-- =======================
  Header END -->
  
  <main> 

  <!-- Container START -->
  <div class="container-fluid">

    <!-- Sidenav START -->
    <div class="navbar navbar-vertical navbar-light">
      <div class="offcanvas offcanvas-start custom-scrollbar rounded pt-3" tabindex="-1" id="navbarVerticaloffcanvas">
        <div class="offcanvas-body pt-5 pt-lg-0">
          <!-- Card START -->
          
            <!-- Avatar -->
            <div class="avatar avatar-lg mb-3">
              <a href="#!"><img class="avatar-img rounded-circle border border-white border-3" src="app/views/assets/images/avatar/07.jpg" alt=""></a>
            </div>
            <!-- Info -->
            <h5 class="mb-0"> <a href="#!">First  Last </a> </h5>
          <small>Software Eng</small>
          <!-- User stat START -->
          <div class="hstack gap-2 gap-xl-3 mt-3">
            <!-- User stat item -->
            <div>
              <h6 class="mb-0">6</h6>
              <small>Enrolled Courses</small>
            </div>
            <!-- Divider -->
            <div class="vr"></div>
            <!-- User stat item -->
            <div>
              <h6 class="mb-0">8.5</h6>
              <small>Rating</small>
            </div>
            <!-- Divider -->
            <div class="vr"></div>
            <!-- User stat item -->
          </div>
            <!-- User stat END -->

            <!-- Divider -->
            <hr>

            <!-- Side Nav START -->
            <ul class="nav nav-link-secondary flex-column fw-bold gap-2">
              <li class="nav-item">
                <a class="nav-link" href="#!"> <img class="me-2 h-20px fa-fw" src="app/views/assets/images/icon/home-outline-filled.svg" alt=""><span>Feed </span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#!"> <img class="me-2 h-20px fa-fw" src="app/views/assets/images/icon/medal-outline-filled.svg" alt=""><span>Popular </span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#!"> <img class="me-2 h-20px fa-fw" src="app/views/assets/images/icon/clock-outline-filled.svg" alt=""><span>Training Schedules </span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#!"> <img class="me-2 h-20px fa-fw" src="app/views/assets/images/icon/like-outline-filled.svg" alt=""><span>Subscriptions </span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#!"> <img class="me-2 h-20px fa-fw" src="app/views/assets/images/icon/star-outline-filled.svg" alt=""><span>My favorites </span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#!"> <img class="me-2 h-20px fa-fw" src="app/views/assets/images/icon/task-done-outline-filled.svg" alt=""><span>Wishlist </span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#!"> <img class="me-2 h-20px fa-fw" src="app/views/assets/images/icon/notification-outlined-filled.svg" alt=""><span>Notifications </span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#!"> <img class="me-2 h-20px fa-fw" src="app/views/assets/images/icon/cog-outline-filled.svg" alt=""><span>Settings </span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/trainingportal/Main/Logout"> <img class="me-2 h-20px fa-fw" src="app/views/assets/images/icon/arrow-boxed-outline-filled.svg" alt=""><span>Logout </span></a>
              </li>
            </ul>
            <!-- Side Nav END -->
          </div>
        </div>
      </div>
      <!-- Sidenav END -->

      <!-- Main content START -->
      <div class="page-content">
        <!-- Official trailer START -->
   
        <!-- Official trailer END -->

        <div class="row g-3 mb-4">
          <div class="col-10 mt-4">
            <h5>Course 1 </h5>
          </div>
          <div class="col-2 mt-2">
          <h5> Semiconductor </h5>
            <!-- <h5><?= $email ?> </h5> -->
          </div>
          <!-- Story START -->
        <div class="tiny-slider arrow-hover overflow-hidden">
          <div class="tiny-slider-inner d-flex" data-arrow="true" data-dots="true" data-loop="true" data-autoplay="false" data-items-xxl="6" data-items-xl="5" data-items-lg="4" data-items-md="4" data-items-sm="3" data-items-xs="1" data-gutter="12" data-edge="0">
              <div>
                <!-- Video START -->
                <div class="card position-relative h-100">
                  <!-- Video image -->
                  <div class="card-image">
                    <img class="card-img-top" src="app/views/assets/images/post/16by9/large/06.jpg" alt="">
                    <!-- Play icon -->
                    <div class="position-absolute top-50 start-50 translate-middle">
                      <a class="icon-md bg-danger text-white rounded-circle" href="#"> <i class="bi bi-play-fill fs-5"> </i> </a>
                    </div>
                    <!-- Duration -->
                    <div class="position-absolute bottom-0 start-0 p-3 d-flex w-100">
                      <span class="bg-dark bg-opacity-50 px-2 rounded text-white small">10:20</span>
                      <span class="bg-dark bg-opacity-50 px-2 rounded text-white small ms-auto"><i class="fa-solid fa-heart"></i></span>
                    </div>
                  </div>
                  <!-- Video info -->
                  <div class="card-body">
                    <!-- Video title  -->
                    <h6> <a class="stretched-link" href="/trainingportal/Videodetails"> 8 shocking bitcoin crypto predictions for 2022 </a> </h6>
                    <span class="small"> 665.1K views</span>
                  </div>
                </div>
                <!-- Video END -->
              </div>
              <div>
                <!-- Video START -->
                <div class="card position-relative h-100">
                  <!-- Video image -->
                  <div class="card-image">
                    <div class="ratio ratio-16x9 card-img-top overflow-hidden">
                      <iframe src="https://player.vimeo.com/video/169562083?h=5785cc7ede" title="Vimeo video" allowfullscreen></iframe>
                    </div>
                  </div>
                  <!-- Video info -->
                  <div class="card-body position-relative">
                    <!-- Video title  -->
                    <h6> <a class="stretched-link" href="/trainingportal/Videodetails"> A trading platform - an easy start in trading </a> </h6>
                    <span class="small"> 458.3K views</span>
                  </div>
                </div>
                <!-- Video END -->
              </div>
              <div>
                <!-- Video START -->
                <div class="card position-relative h-100">
                  <!-- Video image -->
                  <div class="card-image">
                    <img class="card-img-top" src="app/views/assets/images/post/16by9/large/09.jpg" alt="">
                    <!-- Play icon -->
                    <div class="position-absolute top-50 start-50 translate-middle">
                      <a class="icon-md bg-danger text-white rounded-circle" href="#"> <i class="bi bi-play-fill fs-5"> </i> </a>
                    </div>
                    <!-- Duration -->
                    <div class="position-absolute bottom-0 start-0 p-3 d-flex w-100">
                      <span class="bg-dark bg-opacity-50 px-2 rounded text-white small">03:40</span>
                      <span class="bg-dark bg-opacity-50 px-2 rounded text-white small ms-auto"><i class="fa-solid fa-heart"></i></span>
                    </div>
                  </div>
                  <!-- Video info -->
                  <div class="card-body">
                    <!-- Video title  -->
                    <h6> <a class="stretched-link" href="/trainingportal/Videodetails"> How does the stock market work? </a> </h6>
                    <span class="small"> 985.1K views</span>
                  </div>
                </div>
                <!-- Video END -->
              </div>
              <div>
                <!-- Video START -->
                <div class="card position-relative h-100">
                  <!-- Video image -->
                  <div class="card-image">
                    <img class="card-img-top" src="app/views/assets/images/post/16by9/large/10.jpg" alt="">
                    <!-- Play icon -->
                    <div class="position-absolute top-50 start-50 translate-middle">
                      <a class="icon-md bg-danger text-white rounded-circle" href="#"> <i class="bi bi-play-fill fs-5"> </i> </a>
                    </div>
                    <!-- Duration -->
                    <div class="position-absolute bottom-0 start-0 p-3 d-flex w-100">
                      <span class="bg-dark bg-opacity-50 px-2 rounded text-white small">06:12</span>
                      <span class="bg-dark bg-opacity-50 px-2 rounded text-white small ms-auto"><i class="fa-solid fa-heart"></i></span>
                    </div>
                  </div>
                  <!-- Video info -->
                  <div class="card-body">
                    <!-- Video title  -->
                    <h6> <a class="stretched-link" href="/trainingportal/Videodetails"> How to create a app for your e-commerce website </a> </h6>
                    <span class="small"> 658.2K views</span>
                  </div>
                </div>
                <!-- Video END -->
              </div>
              <div>
                <!-- Video START -->
                <div class="card position-relative h-100">
                  <!-- Video image -->
                  <div class="card-image">
                    <img class="card-img-top" src="app/views/assets/images/post/16by9/large/07.jpg" alt="">
                    <!-- Play icon -->
                    <div class="position-absolute top-50 start-50 translate-middle">
                      <a class="icon-md bg-danger text-white rounded-circle" href="#"> <i class="bi bi-play-fill fs-5"> </i> </a>
                    </div>
                    <!-- Duration -->
                    <div class="position-absolute bottom-0 start-0 p-3 d-flex w-100">
                      <span class="bg-dark bg-opacity-50 px-2 rounded text-white small">03:45</span>
                      <span class="bg-dark bg-opacity-50 px-2 rounded text-white small ms-auto"><i class="fa-solid fa-heart"></i></span>
                    </div>
                  </div>
                  <!-- Video info -->
                  <div class="card-body">
                    <!-- Video title  -->
                    <h6> <a class="stretched-link" href="/trainingportal/Videodetails"> Dilen - When I See You (Official Music) </a> </h6>
                    <span class="small"> 325.1K views</span>
                  </div>
                </div>
                <!-- Video END -->
              </div>
              <div>
                <!-- Video START -->
                <div class="card position-relative h-100">
                  <!-- Video image -->
                  <div class="card-image">
                    <img class="card-img-top" src="app/views/assets/images/post/16by9/large/08.jpg" alt="">
                    <!-- Play icon -->
                    <div class="position-absolute top-50 start-50 translate-middle">
                      <a class="icon-md bg-danger text-white rounded-circle" href="#"> <i class="bi bi-play-fill fs-5"> </i> </a>
                    </div>
                    <!-- Duration -->
                    <div class="position-absolute bottom-0 start-0 p-3 d-flex w-100">
                      <span class="bg-dark bg-opacity-50 px-2 rounded text-white small">10:20</span>
                      <span class="bg-dark bg-opacity-50 px-2 rounded text-white small ms-auto"><i class="fa-solid fa-heart"></i></span>
                    </div>
                  </div>
                  <!-- Video info -->
                  <div class="card-body">
                    <!-- Video title  -->
                    <h6> <a class="stretched-link" href="/trainingportal/Videodetails"> Complete cryptocurrency course - start learning </a> </h6>
                    <span class="small"> 785.9K views</span>
                  </div>
                </div>
                <!-- Video END -->
              </div>
              <div>
                <!-- Video START -->
                <div class="card position-relative h-100">
                  <!-- Video image -->
                  <div class="card-image">
                    <img class="card-img-top" src="app/views/assets/images/post/16by9/large/01.jpg" alt="">
                    <!-- Play icon -->
                    <div class="position-absolute top-50 start-50 translate-middle">
                      <a class="icon-md bg-danger text-white rounded-circle" href="#"> <i class="bi bi-play-fill fs-5"> </i> </a>
                    </div>
                    <!-- Duration -->
                    <div class="position-absolute bottom-0 start-0 p-3 d-flex w-100">
                      <span class="bg-dark bg-opacity-50 px-2 rounded text-white small">10:20</span>
                      <span class="bg-dark bg-opacity-50 px-2 rounded text-white small ms-auto"><i class="fa-solid fa-heart"></i></span>
                    </div>
                  </div>
                  <!-- Video info -->
                  <div class="card-body">
                    <!-- Video title  -->
                    <h6> <a class="stretched-link" href="/trainingportal/Videodetails"> Should you become a web designer in 2022? </a> </h6>
                    <span class="small"> 785.9K views</span>
                  </div>
                </div>
                <!-- Video END -->
              </div>
            </div>
          </div>
        </div>
       <div class="row g-3 mb-4">
          <div class="col-12 mt-4">
          <h5>Course 2 </h5>
          </div>
          <!-- Story START -->
        <div class="tiny-slider arrow-hover overflow-hidden">
          <div class="tiny-slider-inner d-flex" data-arrow="true" data-dots="true" data-loop="true" data-autoplay="false" data-items-xxl="6" data-items-xl="5" data-items-lg="4" data-items-md="4" data-items-sm="3" data-items-xs="1" data-gutter="12" data-edge="0">
              <div>
                <!-- Video START -->
                <div class="card position-relative h-100">
                  <!-- Video image -->
                  <div class="card-image">
                    <img class="card-img-top" src="app/views/assets/images/post/16by9/large/06.jpg" alt="">
                    <!-- Play icon -->
                    <div class="position-absolute top-50 start-50 translate-middle">
                      <a class="icon-md bg-danger text-white rounded-circle" href="#"> <i class="bi bi-play-fill fs-5"> </i> </a>
                    </div>
                    <!-- Duration -->
                    <div class="position-absolute bottom-0 start-0 p-3 d-flex w-100">
                      <span class="bg-dark bg-opacity-50 px-2 rounded text-white small">10:20</span>
                      <span class="bg-dark bg-opacity-50 px-2 rounded text-white small ms-auto"><i class="fa-solid fa-heart"></i></span>
                    </div>
                  </div>
                  <!-- Video info -->
                  <div class="card-body">
                    <!-- Video title  -->
                    <h6> <a class="stretched-link" href="/trainingportal/Videodetails"> 8 shocking bitcoin crypto predictions for 2022 </a> </h6>
                    <span class="small"> 665.1K views</span>
                  </div>
                </div>
                <!-- Video END -->
              </div>
              <div>
                <!-- Video START -->
                <div class="card position-relative h-100">
                  <!-- Video image -->
                  <div class="card-image">
                    <div class="ratio ratio-16x9 card-img-top overflow-hidden">
                      <iframe src="https://player.vimeo.com/video/169562083?h=5785cc7ede" title="Vimeo video" allowfullscreen></iframe>
                    </div>
                  </div>
                  <!-- Video info -->
                  <div class="card-body position-relative">
                    <!-- Video title  -->
                    <h6> <a class="stretched-link" href="/trainingportal/Videodetails"> A trading platform - an easy start in trading </a> </h6>
                    <span class="small"> 458.3K views</span>
                  </div>
                </div>
                <!-- Video END -->
              </div>
              <div>
                <!-- Video START -->
                <div class="card position-relative h-100">
                  <!-- Video image -->
                  <div class="card-image">
                    <img class="card-img-top" src="app/views/assets/images/post/16by9/large/09.jpg" alt="">
                    <!-- Play icon -->
                    <div class="position-absolute top-50 start-50 translate-middle">
                      <a class="icon-md bg-danger text-white rounded-circle" href="#"> <i class="bi bi-play-fill fs-5"> </i> </a>
                    </div>
                    <!-- Duration -->
                    <div class="position-absolute bottom-0 start-0 p-3 d-flex w-100">
                      <span class="bg-dark bg-opacity-50 px-2 rounded text-white small">03:40</span>
                      <span class="bg-dark bg-opacity-50 px-2 rounded text-white small ms-auto"><i class="fa-solid fa-heart"></i></span>
                    </div>
                  </div>
                  <!-- Video info -->
                  <div class="card-body">
                    <!-- Video title  -->
                    <h6> <a class="stretched-link" href="/trainingportal/Videodetails"> How does the stock market work? </a> </h6>
                    <span class="small"> 985.1K views</span>
                  </div>
                </div>
                <!-- Video END -->
              </div>
              <div>
                <!-- Video START -->
                <div class="card position-relative h-100">
                  <!-- Video image -->
                  <div class="card-image">
                    <img class="card-img-top" src="app/views/assets/images/post/16by9/large/10.jpg" alt="">
                    <!-- Play icon -->
                    <div class="position-absolute top-50 start-50 translate-middle">
                      <a class="icon-md bg-danger text-white rounded-circle" href="#"> <i class="bi bi-play-fill fs-5"> </i> </a>
                    </div>
                    <!-- Duration -->
                    <div class="position-absolute bottom-0 start-0 p-3 d-flex w-100">
                      <span class="bg-dark bg-opacity-50 px-2 rounded text-white small">06:12</span>
                      <span class="bg-dark bg-opacity-50 px-2 rounded text-white small ms-auto"><i class="fa-solid fa-heart"></i></span>
                    </div>
                  </div>
                  <!-- Video info -->
                  <div class="card-body">
                    <!-- Video title  -->
                    <h6> <a class="stretched-link" href="/trainingportal/Videodetails"> How to create a app for your e-commerce website </a> </h6>
                    <span class="small"> 658.2K views</span>
                  </div>
                </div>
                <!-- Video END -->
              </div>
              <div>
                <!-- Video START -->
                <div class="card position-relative h-100">
                  <!-- Video image -->
                  <div class="card-image">
                    <img class="card-img-top" src="app/views/assets/images/post/16by9/large/07.jpg" alt="">
                    <!-- Play icon -->
                    <div class="position-absolute top-50 start-50 translate-middle">
                      <a class="icon-md bg-danger text-white rounded-circle" href="#"> <i class="bi bi-play-fill fs-5"> </i> </a>
                    </div>
                    <!-- Duration -->
                    <div class="position-absolute bottom-0 start-0 p-3 d-flex w-100">
                      <span class="bg-dark bg-opacity-50 px-2 rounded text-white small">03:45</span>
                      <span class="bg-dark bg-opacity-50 px-2 rounded text-white small ms-auto"><i class="fa-solid fa-heart"></i></span>
                    </div>
                  </div>
                  <!-- Video info -->
                  <div class="card-body">
                    <!-- Video title  -->
                    <h6> <a class="stretched-link" href="/trainingportal/Videodetails"> Dilen - When I See You (Official Music) </a> </h6>
                    <span class="small"> 325.1K views</span>
                  </div>
                </div>
                <!-- Video END -->
              </div>
              <div>
                <!-- Video START -->
                <div class="card position-relative h-100">
                  <!-- Video image -->
                  <div class="card-image">
                    <img class="card-img-top" src="app/views/assets/images/post/16by9/large/08.jpg" alt="">
                    <!-- Play icon -->
                    <div class="position-absolute top-50 start-50 translate-middle">
                      <a class="icon-md bg-danger text-white rounded-circle" href="#"> <i class="bi bi-play-fill fs-5"> </i> </a>
                    </div>
                    <!-- Duration -->
                    <div class="position-absolute bottom-0 start-0 p-3 d-flex w-100">
                      <span class="bg-dark bg-opacity-50 px-2 rounded text-white small">10:20</span>
                      <span class="bg-dark bg-opacity-50 px-2 rounded text-white small ms-auto"><i class="fa-solid fa-heart"></i></span>
                    </div>
                  </div>
                  <!-- Video info -->
                  <div class="card-body">
                    <!-- Video title  -->
                    <h6> <a class="stretched-link" href="/trainingportal/Videodetails"> Complete cryptocurrency course - start learning </a> </h6>
                    <span class="small"> 785.9K views</span>
                  </div>
                </div>
                <!-- Video END -->
              </div>
              <div>
                <!-- Video START -->
                <div class="card position-relative h-100">
                  <!-- Video image -->
                  <div class="card-image">
                    <img class="card-img-top" src="app/views/assets/images/post/16by9/large/01.jpg" alt="">
                    <!-- Play icon -->
                    <div class="position-absolute top-50 start-50 translate-middle">
                      <a class="icon-md bg-danger text-white rounded-circle" href="#"> <i class="bi bi-play-fill fs-5"> </i> </a>
                    </div>
                    <!-- Duration -->
                    <div class="position-absolute bottom-0 start-0 p-3 d-flex w-100">
                      <span class="bg-dark bg-opacity-50 px-2 rounded text-white small">10:20</span>
                      <span class="bg-dark bg-opacity-50 px-2 rounded text-white small ms-auto"><i class="fa-solid fa-heart"></i></span>
                    </div>
                  </div>
                  <!-- Video info -->
                  <div class="card-body">
                    <!-- Video title  -->
                    <h6> <a class="stretched-link" href="/trainingportal/Videodetails"> Should you become a web designer in 2022? </a> </h6>
                    <span class="small"> 785.9K views</span>
                  </div>
                </div>
                <!-- Video END -->
              </div>
            </div>
          </div>
        </div>
     
        <!-- footer START -->
        <footer class="card card-body">
          <div class="row g-4">
            <div class="col-md-12">
            <?php include 'app/views/common/footer.php';?>
            </div>
        </footer>
        <!-- footer END -->
      </div>
      <!-- Main content END -->

  </div>
  <!-- Container END -->

</main>
<!-- **************** MAIN CONTENT END **************** -->

<!-- =======================
JS libraries, plugins and custom scripts -->
<?php include 'app/views/common/js.php';?>
</body>
</html>