Course demo inner Header

              
                <!-- ========== HEADER ========== -->
                <header id="header" class="header left-aligned-navbar">
                  <div class="header-section">
                    <!-- Topbar -->
                    <div class="container">
                      <nav class="js-mega-menu navbar navbar-expand-lg z-index-999">
                        <!-- Responsive Toggle Button -->
                        <button type="button" class="navbar-toggler btn btn-xs btn-outline-secondary ml-auto"
                                aria-label="Toggle navigation"
                                aria-expanded="false"
                                aria-controls="topBar"
                                data-toggle="collapse"
                                data-target="#topBar">
                          Topbar
                          <i class="fa fa-angle-down ml-2"></i>
                        </button>
                        <!-- End Responsive Toggle Button -->

                        <div id="topBar" class="collapse navbar-collapse">
                          <ul class="navbar-nav w-100">
                            <li class="navbar-nav-item mr-auto">
                              <a class="nav-link font-size-1 py-2 pl-0" href="#">
                                <i class="fa fa-angle-left mr-1"></i>
                                Main Demo
                              </a>
                            </li>

                            <!-- Demos -->
                            <li class="hs-has-mega-menu navbar-nav-item"
                                data-hs-mega-menu-item-options='{
                                  "desktop": {
                                    "position": "right",
                                    "maxWidth": "900px"
                                  }
                                }'>
                              <a id="demosMegaMenu" class="hs-mega-menu-invoker nav-link nav-link-toggle font-size-1 py-2" href="javascript:;" aria-haspopup="true" aria-expanded="false">Demos</a>

                              <!-- Demos - Mega Menu -->
                              <div class="hs-mega-menu dropdown-menu w-100" aria-labelledby="demosMegaMenu">
                                <div class="row no-gutters">
                                  <div class="col-lg-8">
                                    <div class="navbar-promo-card-deck">
                                      <!-- Promo Item -->
                                      <div class="navbar-promo-card navbar-promo-item">
                                        <a class="navbar-promo-link" href="#">
                                          <div class="media align-items-center">
                                            <img class="navbar-promo-icon" src="../../assets/svg/icons/icon-67.svg" alt="SVG">
                                            <div class="media-body">
                                              <span class="navbar-promo-title">Course <span class="badge badge-success badge-pill ml-1">New</span></span>
                                              <span class="navbar-promo-text">Learn On-demand demo</span>
                                            </div>
                                          </div>
                                        </a>
                                      </div>
                                      <!-- End Promo Item -->

                                      <!-- Promo Item -->
                                      <div class="navbar-promo-card navbar-promo-item">
                                        <a class="navbar-promo-link" href="#">
                                          <div class="media align-items-center">
                                            <img class="navbar-promo-icon" src="../../assets/svg/icons/icon-45.svg" alt="SVG">
                                            <div class="media-body">
                                              <span class="navbar-promo-title">App Marketplace</span>
                                              <span class="navbar-promo-text">Marketplace app demo</span>
                                            </div>
                                          </div>
                                        </a>
                                      </div>
                                      <!-- End Promo Item -->
                                    </div>

                                    <div class="navbar-promo-card-deck">
                                      <!-- Promo Item -->
                                      <div class="navbar-promo-card navbar-promo-item">
                                        <a class="navbar-promo-link" href="#">
                                          <div class="media align-items-center">
                                            <img class="navbar-promo-icon" src="../../assets/svg/icons/icon-4.svg" alt="SVG">
                                            <div class="media-body">
                                              <span class="navbar-promo-title">Help Desk</span>
                                              <span class="navbar-promo-text">Help desk demo</span>
                                            </div>
                                          </div>
                                        </a>
                                      </div>
                                      <!-- End Promo Item -->

                                      <!-- Promo Item -->
                                      <div class="navbar-promo-card navbar-promo-item">
                                        <a class="navbar-promo-link disabled" href="#">
                                          <div class="media align-items-center">
                                            <img class="navbar-promo-icon" src="../../assets/svg/icons/icon-5.svg" alt="SVG">
                                            <div class="media-body">
                                              <span class="navbar-promo-title">Account</span>
                                              <span class="navbar-promo-text">Coming soon...</span>
                                            </div>
                                          </div>
                                        </a>
                                      </div>
                                      <!-- End Promo Item -->
                                    </div>

                                    <div class="navbar-promo-card-deck">
                                      <!-- Promo Item -->
                                      <div class="navbar-promo-card navbar-promo-item">
                                        <a class="navbar-promo-link disabled" href="#">
                                          <div class="media align-items-center">
                                            <img class="navbar-promo-icon" src="../../assets/svg/icons/icon-19.svg" alt="SVG">
                                            <div class="media-body">
                                              <span class="navbar-promo-title">Job</span>
                                              <span class="navbar-promo-text">Coming soon...</span>
                                            </div>
                                          </div>
                                        </a>
                                      </div>
                                      <!-- End Promo Item -->

                                      <!-- Promo Item -->
                                      <div class="navbar-promo-card navbar-promo-item">
                                        <a class="navbar-promo-link disabled" href="#">
                                          <div class="media align-items-center">
                                            <img class="navbar-promo-icon" src="../../assets/svg/icons/icon-13.svg" alt="SVG">
                                            <div class="media-body">
                                              <span class="navbar-promo-title">House</span>
                                              <span class="navbar-promo-text">Coming soon...</span>
                                            </div>
                                          </div>
                                        </a>
                                      </div>
                                      <!-- End Promo Item -->
                                    </div>
                                  </div>

                                  <!-- Promo -->
                                  <div class="col-lg-4 navbar-promo d-none d-lg-block">
                                    <a class="d-block navbar-promo-inner" href="#">
                                      <div class="position-relative">
                                        <img class="img-fluid rounded mb-3" src="../../assets/img/380x227/img1.jpg" alt="Image Description">
                                      </div>
                                      <span class="navbar-promo-text font-size-1">Front makes you look at things from a different perspectives.</span>
                                    </a>
                                  </div>
                                  <!-- End Promo -->
                                </div>
                              </div>
                              <!-- End Demos - Mega Menu -->
                            </li>
                            <!-- End Demos -->

                            <!-- Docs -->
                            <li class="hs-has-mega-menu navbar-nav-item"
                                data-hs-mega-menu-item-options='{
                                  "desktop": {
                                    "position": "right",
                                    "maxWidth": "260px"
                                  }
                                }'>
                              <a id="docsMegaMenu" class="hs-mega-menu-invoker nav-link nav-link-toggle font-size-1 py-2 pr-0" href="javascript:;" aria-haspopup="true" aria-expanded="false">Docs</a>

                              <!-- Docs - Submenu -->
                              <div class="hs-mega-menu dropdown-menu" aria-labelledby="docsMegaMenu" style="min-width: 330px;">
                                <!-- Promo Item -->
                                <div class="navbar-promo-item">
                                  <a class="navbar-promo-link" href="#">
                                    <div class="media align-items-center">
                                      <img class="navbar-promo-icon" src="../../assets/svg/icons/icon-2.svg" alt="SVG">
                                      <div class="media-body">
                                        <span class="navbar-promo-title">
                                          Documentation
                                          <span class="badge badge-primary badge-pill ml-1">v3.0</span>
                                        </span>
                                        <small class="navbar-promo-text">Development guides</small>
                                      </div>
                                    </div>
                                  </a>
                                </div>
                                <!-- End Promo Item -->

                                <!-- Promo Item -->
                                <div class="navbar-promo-item">
                                  <a class="navbar-promo-link" href="#">
                                    <div class="media align-items-center">
                                      <img class="navbar-promo-icon" src="../../assets/svg/icons/icon-1.svg" alt="SVG">
                                      <div class="media-body">
                                        <span class="navbar-promo-title">Snippets</span>
                                        <small class="navbar-promo-text">Start building</small>
                                      </div>
                                    </div>
                                  </a>
                                </div>
                                <!-- End Promo Item -->

                                <div class="navbar-promo-footer">
                                  <!-- List -->
                                  <div class="row no-gutters">
                                    <div class="col-6">
                                      <div class="navbar-promo-footer-item">
                                        <span class="navbar-promo-footer-text">Check what's new</span>
                                        <a class="navbar-promo-footer-text" href="#">
                                          Changelog
                                        </a>
                                      </div>
                                    </div>
                                    <div class="col-6 navbar-promo-footer-ver-divider">
                                      <div class="navbar-promo-footer-item">
                                        <span class="navbar-promo-footer-text">Have a question?</span>
                                        <a class="navbar-promo-footer-text" href="#">
                                          Contact us
                                        </a>
                                      </div>
                                    </div>
                                  </div>
                                  <!-- End List -->
                                </div>
                              </div>
                              <!-- End Docs - Submenu -->
                            </li>
                            <!-- End Docs -->
                          </ul>
                        </div>
                      </nav>
                    </div>
                    <!-- End Topbar -->

                    <div id="logoAndNav" class="container mt-lg-n2">
                      <!-- Nav -->
                      <nav class="js-mega-menu navbar navbar-expand-lg">
                        <div class="navbar-nav-wrap">
                          <!-- Logo -->
                          <a class="navbar-brand navbar-nav-wrap-brand" href="#" aria-label="Front">
                            <img src="../../assets/svg/logos/logo.svg" alt="Logo">
                          </a>
                          <!-- End Logo -->

                          <!-- Secondary Content -->
                          <div class="navbar-nav-wrap-content">
                            <!-- Search Classic -->
                            <div class="hs-unfold d-lg-none d-inline-block position-static">
                              <a class="js-hs-unfold-invoker btn btn-xs btn-icon rounded-circle" href="javascript:;"
                                 data-hs-unfold-options='{
                                  "target": "#searchClassic",
                                  "type": "css-animation",
                                  "animationIn": "slideInUp"
                                 }'>
                                <i class="fas fa-search"></i>
                              </a>

                              <div id="searchClassic" class="hs-unfold-content dropdown-menu w-100 border-0 rounded-0 px-3 mt-0">
                                <form class="input-group input-group-sm input-group-merge">
                                  <input type="text" class="form-control" placeholder="What do you want to learn?" aria-label="What do you want to learn?">
                                  <div class="input-group-append">
                                    <div class="input-group-text">
                                      <i class="fas fa-search"></i>
                                    </div>
                                  </div>
                                </form>
                              </div>
                            </div>
                            <!-- End Search Classic -->

                            <!-- Account -->
                            <div class="hs-unfold">
                              <a class="js-hs-unfold-invoker rounded-circle" href="javascript:;"
                                 data-hs-unfold-options='{
                                  "target": "#accountDropdown",
                                  "type": "css-animation",
                                  "event": "hover",
                                  "duration": 50,
                                  "delay": 0,
                                  "hideOnScroll": "true"
                                 }'>
                                <span class="avatar avatar-xs avatar-circle">
                                  <img class="avatar-img" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
                                </span>
                              </a>

                              <div id="accountDropdown" class="hs-unfold-content dropdown-menu dropdown-menu-sm-right dropdown-menu-no-border-on-mobile p-0" style="min-width: 245px;">
                                <div class="card">
                                  <!-- Header -->
                                  <div class="card-header p-4">
                                    <a class="media align-items-center" href="#">
                                      <div class="avatar mr-3">
                                        <img class="avatar-img" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
                                      </div>
                                      <div class="media-body">
                                        <span class="d-block font-weight-bold">Nataly Gaga <span class="badge badge-success ml-1">Pro</span></span>
                                        <span class="d-block small text-muted">natalygaga@gmail.com</span>
                                      </div>
                                    </a>
                                  </div>
                                  <!-- End Header -->

                                  <!-- Body -->
                                  <div class="card-body py-3">
                                    <a class="dropdown-item px-0" href="#">
                                      <span class="dropdown-item-icon">
                                        <i class="fas fa-comments"></i>
                                      </span>
                                      Messages
                                    </a>
                                    <a class="dropdown-item d-lg-none" href="#">
                                      <span class="dropdown-item-icon">
                                        <i class="fas fa-tasks"></i>
                                      </span>
                                      My courses
                                    </a>
                                    <a class="dropdown-item px-0" href="#">
                                      <span class="dropdown-item-icon">
                                        <i class="fas fa-database"></i>
                                      </span>
                                      Purchase history
                                    </a>
                                    <a class="dropdown-item px-0" href="#">
                                      <span class="dropdown-item-icon">
                                        <i class="fas fa-user"></i>
                                      </span>
                                      Account
                                    </a>
                                    <a class="dropdown-item px-0" href="#">
                                      <span class="dropdown-item-icon">
                                        <i class="fas fa-credit-card"></i>
                                      </span>
                                      Payment methods
                                    </a>

                                    <div class="dropdown-divider"></div>

                                    <a class="dropdown-item px-0" href="#">
                                      <span class="dropdown-item-icon">
                                        <i class="fas fa-question-circle"></i>
                                      </span>
                                      Help
                                    </a>
                                    <a class="dropdown-item px-0" href="#">
                                      <span class="dropdown-item-icon">
                                        <i class="fas fa-power-off"></i>
                                      </span>
                                      Log out
                                    </a>
                                  </div>
                                  <!-- End Body -->
                                </div>
                              </div>
                            </div>
                            <!-- End Account -->
                          </div>
                          <!-- End Secondary Content -->

                          <!-- Responsive Toggle Button -->
                          <button type="button" class="navbar-toggler navbar-nav-wrap-navbar-toggler btn btn-icon btn-sm rounded-circle"
                                  aria-label="Toggle navigation"
                                  aria-expanded="false"
                                  aria-controls="navBar"
                                  data-toggle="collapse"
                                  data-target="#navBar">
                            <span class="navbar-toggler-default">
                              <svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                                <path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
                              </svg>
                            </span>
                            <span class="navbar-toggler-toggled">
                              <svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                                <path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
                              </svg>
                            </span>
                          </button>
                          <!-- End Responsive Toggle Button -->

                          <!-- Navigation -->
                          <div id="navBar" class="navbar-nav-wrap-navbar collapse navbar-collapse">
                            <ul class="navbar-nav">
                              <!-- Courses -->
                              <li class="hs-has-sub-menu navbar-nav-item">
                                <a id="coursesMegaMenu" class="hs-mega-menu-invoker nav-link" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-labelledby="coursesSubMenu">
                                  <i class="fa fa-th font-size-1 mr-1"></i>
                                  Courses
                                </a>

                                <!-- Courses - Submenu -->
                                <div id="coursesSubMenu" class="hs-sub-menu dropdown-menu" aria-labelledby="coursesMegaMenu" style="min-width: 270px;">
                                  <!-- Development -->
                                  <div class="hs-has-sub-menu">
                                    <a id="navLinkCoursesDevelopment" class="hs-mega-menu-invoker dropdown-item dropdown-item-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuCoursesDevelopment">
                                      <span class="min-w-4rem text-center opacity-lg mr-1">
                                        <i class="fa fa-laptop-code font-size-1 mr-1"></i>
                                      </span>
                                      Development
                                    </a>

                                    <div id="navSubmenuCoursesDevelopment" class="hs-sub-menu dropdown-menu" aria-labelledby="navLinkCoursesDevelopment" style="min-width: 270px;">
                                      <a class="dropdown-item" href="#">All Web Development</a>
                                      <a class="dropdown-item" href="#">Web Development</a>
                                      <a class="dropdown-item" href="#">Mobile apps</a>
                                      <a class="dropdown-item" href="#">Programming languages</a>
                                      <a class="dropdown-item" href="#">Game development</a>
                                      <a class="dropdown-item" href="#">Databases</a>
                                      <a class="dropdown-item" href="#">Software testing</a>
                                      <a class="dropdown-item" href="#">Other</a>
                                    </div>
                                  </div>
                                  <!-- End Development -->

                                  <!-- Business -->
                                  <div class="hs-has-sub-menu">
                                    <a id="navLinkCoursesBusiness" class="hs-mega-menu-invoker dropdown-item dropdown-item-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuCoursesBusiness">
                                      <span class="min-w-4rem text-center opacity-lg mr-1">
                                        <i class="fa fa-chart-bar font-size-1 mr-1"></i>
                                      </span>
                                      Business
                                    </a>

                                    <div id="navSubmenuCoursesBusiness" class="hs-sub-menu dropdown-menu" aria-labelledby="navLinkCoursesBusiness" style="min-width: 270px;">
                                      <a class="dropdown-item" href="#">All Business</a>
                                      <a class="dropdown-item" href="#">Finance</a>
                                      <a class="dropdown-item" href="#">Entrepreneurship</a>
                                      <a class="dropdown-item" href="#">Communications</a>
                                      <a class="dropdown-item" href="#">Management</a>
                                      <a class="dropdown-item" href="#">Sales</a>
                                      <a class="dropdown-item" href="#">Strategy</a>
                                      <a class="dropdown-item" href="#">Operations</a>
                                      <a class="dropdown-item" href="#">Project management</a>
                                      <a class="dropdown-item" href="#">Business law</a>
                                      <a class="dropdown-item" href="#">Data & Analytics</a>
                                      <a class="dropdown-item" href="#">Other</a>
                                    </div>
                                  </div>
                                  <!-- Business -->

                                  <!-- Finance & Accounting -->
                                  <div class="hs-has-sub-menu">
                                    <a id="navLinkCoursesFinanceAccounting" class="hs-mega-menu-invoker dropdown-item dropdown-item-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuCoursesFinanceAccounting">
                                      <span class="min-w-4rem text-center opacity-lg mr-1">
                                        <i class="fa fa-wallet font-size-1 mr-1"></i>
                                      </span>
                                      Finance & Accounting
                                    </a>

                                    <div id="navSubmenuCoursesFinanceAccounting" class="hs-sub-menu dropdown-menu" aria-labelledby="navLinkCoursesFinanceAccounting" style="min-width: 270px;">
                                      <a class="dropdown-item" href="#">All Finance & Accounting</a>
                                      <a class="dropdown-item" href="#">Accounting & Bookkeeping</a>
                                      <a class="dropdown-item" href="#">Compliance</a>
                                      <a class="dropdown-item" href="#">Economics</a>
                                      <a class="dropdown-item" href="#">Finance</a>
                                      <a class="dropdown-item" href="#">Other</a>
                                    </div>
                                  </div>
                                  <!-- End Finance & Accounting -->

                                  <!-- IT & Software -->
                                  <div class="hs-has-sub-menu">
                                    <a id="navLinkCoursesITSoftware" class="hs-mega-menu-invoker dropdown-item dropdown-item-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuCoursesITSoftware">
                                      <span class="min-w-4rem text-center opacity-lg mr-1">
                                        <i class="fa fa-desktop font-size-1 mr-1"></i>
                                      </span>
                                      IT & Software
                                    </a>

                                    <div id="navSubmenuCoursesITSoftware" class="hs-sub-menu dropdown-menu" aria-labelledby="navLinkCoursesITSoftware" style="min-width: 270px;">
                                      <a class="dropdown-item" href="#">All IT & Software</a>
                                      <a class="dropdown-item" href="#">IT Sertification</a>
                                      <a class="dropdown-item" href="#">Network & security</a>
                                      <a class="dropdown-item" href="#">Hardware</a>
                                      <a class="dropdown-item" href="#">Operating systems</a>
                                      <a class="dropdown-item" href="#">Other</a>
                                    </div>
                                  </div>
                                  <!-- IT & Software -->

                                  <!-- Design -->
                                  <div class="hs-has-sub-menu">
                                    <a id="navLinkDesignServices" class="hs-mega-menu-invoker dropdown-item dropdown-item-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuDesignServices">
                                      <span class="min-w-4rem text-center opacity-lg mr-1">
                                        <i class="fa fa-pencil-ruler font-size-1 mr-1"></i>
                                      </span>
                                      Design
                                    </a>

                                    <div id="navSubmenuDesignServices" class="hs-sub-menu dropdown-menu" aria-labelledby="navLinkDesignServices" style="min-width: 270px;">
                                      <a class="dropdown-item" href="#">All Design</a>
                                      <a class="dropdown-item" href="#">Web design</a>
                                      <a class="dropdown-item" href="#">Graphic design</a>
                                      <a class="dropdown-item" href="#">Design tools</a>
                                      <a class="dropdown-item" href="#">User experience</a>
                                      <a class="dropdown-item" href="#">Game design</a>
                                      <a class="dropdown-item" href="#">Design thinking</a>
                                      <a class="dropdown-item" href="#">3D & animation</a>
                                      <a class="dropdown-item" href="#">Fashion</a>
                                      <a class="dropdown-item" href="#">Architectural design</a>
                                      <a class="dropdown-item" href="#">Interior design</a>
                                      <a class="dropdown-item" href="#">Other</a>
                                    </div>
                                  </div>
                                  <!-- Design -->

                                  <!-- Marketing -->
                                  <div class="hs-has-sub-menu">
                                    <a id="navLinkCoursesMarketing" class="hs-mega-menu-invoker dropdown-item dropdown-item-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuCoursesMarketing">
                                      <span class="min-w-4rem text-center opacity-lg mr-1">
                                        <i class="fa fa-mail-bulk font-size-1 mr-1"></i>
                                      </span>
                                      Marketing
                                    </a>

                                    <div id="navSubmenuCoursesMarketing" class="hs-sub-menu dropdown-menu" aria-labelledby="navLinkCoursesMarketing" style="min-width: 270px;">
                                      <a class="dropdown-item" href="#">All Marketing</a>
                                      <a class="dropdown-item" href="#">Digital marketing</a>
                                      <a class="dropdown-item" href="#">Branding</a>
                                      <a class="dropdown-item" href="#">Advertising</a>
                                      <a class="dropdown-item" href="#">Other</a>
                                    </div>
                                  </div>
                                  <!-- Marketing -->

                                  <!-- Music -->
                                  <div class="hs-has-sub-menu">
                                    <a id="navLinkCoursesMusic" class="hs-mega-menu-invoker dropdown-item dropdown-item-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuCoursesMusic">
                                      <span class="min-w-4rem text-center opacity-lg mr-1">
                                        <i class="fa fa-music font-size-1 mr-1"></i>
                                      </span>
                                      Music
                                    </a>

                                    <div id="navSubmenuCoursesMusic" class="hs-sub-menu dropdown-menu" aria-labelledby="navLinkCoursesMusic" style="min-width: 270px;">
                                      <a class="dropdown-item" href="#">All Musics</a>
                                      <a class="dropdown-item" href="#">Instrument</a>
                                      <a class="dropdown-item" href="#">Production</a>
                                      <a class="dropdown-item" href="#">Music fundamentals</a>
                                      <a class="dropdown-item" href="#">Vocal</a>
                                      <a class="dropdown-item" href="#">Music techniques</a>
                                      <a class="dropdown-item" href="#">Music software</a>
                                      <a class="dropdown-item" href="#">Other</a>
                                    </div>
                                  </div>
                                  <!-- Music -->

                                  <div class="dropdown-divider my-3"></div>

                                  <div class="px-4">
                                    <a class="btn btn-block btn-sm btn-primary transition-3d-hover" href="#">All Courses</a>
                                  </div>
                                </div>
                                <!-- End Courses - Submenu -->
                              </li>
                              <!-- End Courses -->

                              <!-- Search Form -->
                              <li class="d-none d-lg-inline-block navbar-nav-item flex-grow-1 mx-2">
                                <form class="input-group input-group-sm input-group-merge w-75">
                                  <div class="input-group-prepend">
                                    <div class="input-group-text">
                                      <i class="fa fa-search"></i>
                                    </div>
                                  </div>
                                  <input type="text" class="form-control" placeholder="What do you want to learn?" aria-label="What do you want to learn?">
                                </form>
                              </li>
                              <!-- End Search Form -->

                              <!-- Pages -->
                              <li class="hs-has-sub-menu navbar-nav-item mr-lg-auto">
                                <a id="pagesMegaMenu" class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-labelledby="pagesSubMenu">Pages</a>

                                <!-- Pages - Submenu -->
                                <div id="pagesSubMenu" class="hs-sub-menu dropdown-menu" aria-labelledby="pagesMegaMenu" style="min-width: 230px;">
                                  <a class="dropdown-item" href="#">Courses</a>
                                  <a class="dropdown-item" href="#">Course description</a>
                                  <a class="dropdown-item" href="#">Author</a>
                                </div>
                                <!-- End Pages - Submenu -->
                              </li>
                              <!-- End Pages -->

                              <!-- My Courses -->
                              <li class="hs-has-mega-menu navbar-nav-item d-none d-lg-inline-block"
                                  data-hs-mega-menu-item-options='{
                                    "desktop": {
                                      "position": "right",
                                      "maxWidth": "350px"
                                    }
                                  }'>
                                <a id="myCoursesMegaMenu" class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">My courses</a>

                                <!-- My Courses - Submenu -->
                                <div class="hs-mega-menu dropdown-menu" aria-labelledby="myCoursesMegaMenu">
                                  <div class="card">
                                    <div class="card-header py-3">
                                      <span class="text-dark font-weight-bold">My courses</span>
                                    </div>

                                    <div class="card-body">
                                      <!-- Course -->
                                      <a class="media" href="#">
                                        <div class="mt-1 mr-3">
                                          <div class="avatar">
                                            <img class="avatar-img rounded-sm" src="../../assets/svg/components/graphics-8.svg" alt="Image Description">
                                          </div>
                                        </div>
                                        <div class="media-body">
                                          <div class="mb-2">
                                            <span class="d-block text-dark text-hover-primary font-size-1 font-weight-bold mb-1">Java programming masterclass for software developers</span>
                                            <small class="d-block text-body">By Emily Milda</small>
                                          </div>
                                          <div class="d-flex justify-content-between mb-1">
                                            <span class="d-block text-body small text-cap">Completed</span>
                                            <small class="text-dark font-weight-bold">25%</small>
                                          </div>
                                          <div class="progress" style="height: 6px;">
                                            <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                          </div>
                                        </div>
                                      </a>
                                      <!-- End Course -->

                                      <!-- Course -->
                                      <a class="media mt-5" href="#">
                                        <div class="mt-1 mr-3">
                                          <div class="avatar">
                                            <img class="avatar-img rounded-sm" src="../../assets/svg/components/graphics-7.svg" alt="Image Description">
                                          </div>
                                        </div>
                                        <div class="media-body">
                                          <div class="mb-2">
                                            <span class="d-block text-dark text-hover-primary font-size-1 font-weight-bold mb-1">The Ultimate MySQL Bootcamp: Go from SQL Beginner</span>
                                            <small class="d-block text-body">By Nataly Gaga and 2 others</small>
                                          </div>
                                          <div class="d-flex justify-content-between mb-1">
                                            <span class="d-block text-body small text-cap">Completed</span>
                                            <small class="text-dark font-weight-bold">100%</small>
                                          </div>
                                          <div class="progress" style="height: 6px;">
                                            <div class="progress-bar bg-success" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                          </div>
                                        </div>
                                      </a>
                                      <!-- End Course -->
                                    </div>

                                    <div class="card-footer text-center py-3">
                                      <a class="font-size-1" href="#">
                                        See all
                                        <i class="fa fa-angle-right ml-1"></i>
                                      </a>
                                    </div>
                                  </div>
                                </div>
                                <!-- End My Courses - Submenu -->
                              </li>
                              <!-- End My Courses -->
                            </ul>
                          </div>
                          <!-- End Navigation -->
                        </div>
                      </nav>
                      <!-- End Nav -->
                    </div>
                  </div>
                </header>
                <!-- ========== END HEADER ========== -->
              
            
              
                <link rel="stylesheet" href="./node_modules/@fortawesome/fontawesome-free/css/all.css">
                <link rel="stylesheet" href="./assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css">
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="./assets/vendor/hs-header/dist/hs-header.min.js"></script>
                <script src="./assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>
                <script src="./assets/vendor/hs-unfold/dist/hs-unfold.min.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // INITIALIZATION OF HEADER
                    // =======================================================
                    var header = new HSHeader($('#header')).init();


                    // INITIALIZATION OF HSMEGAMENU COMPONENT
                    // =======================================================
                    var megaMenu = new HSMegaMenu($('.js-mega-menu')).init();


                    // INITIALIZATION OF UNFOLD
                    // =======================================================
                    var unfold = new HSUnfold('.js-hs-unfold-invoker').init();
                  });
                </script>