<!-- ========== HEADER ========== -->
<header id="header" class="navbar navbar-expand-lg navbar-end navbar-light">
<!-- Topbar -->
<div class="container navbar-topbar">
<nav class="js-mega-menu navbar-nav-wrap">
<!-- Toggler -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#topbarNavDropdown" aria-controls="topbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="d-flex justify-content-between align-items-center">
<span class="text-dark">Topbar</span>
<span class="navbar-toggler-default">
<i class="bi-list ms-2"></i>
</span>
<span class="navbar-toggler-toggled">
<i class="bi-x ms-2"></i>
</span>
</span>
</button>
<!-- End Toggler -->
<div id="topbarNavDropdown" class="navbar-nav-wrap-collapse collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item me-auto">
<a class="nav-link" href="../index.html"><i class="bi-chevron-left small ms-1"></i> Main demo</a>
</li>
<!-- Demos -->
<li class="hs-has-mega-menu nav-item">
<a id="demosMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle " aria-current="page" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Demos</a>
<!-- Mega Menu -->
<div class="hs-mega-menu dropdown-menu w-100" aria-labelledby="demosMegaMenu" style="min-width: 40rem;">
<!-- Promo -->
<div class="navbar-dropdown-menu-promo">
<!-- Promo Item -->
<div class="navbar-dropdown-menu-promo-item">
<!-- Promo Link -->
<a class="navbar-dropdown-menu-promo-link " href="#">
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M4.06068 22.4249C3.47489 23.0107 3.47489 23.9604 4.06068 24.5462L10.4246 30.9102C11.0104 31.4959 11.9602 31.4959 12.546 30.9102L18.9099 24.5462C19.4957 23.9604 19.4957 23.0107 18.9099 22.4249L12.546 16.0609C11.9602 15.4751 11.0104 15.4751 10.4246 16.0609L4.06068 22.4249ZM28.0607 22.4249C27.4749 23.0107 27.4749 23.9604 28.0607 24.5462L34.4246 30.9102C35.0104 31.4959 35.9602 31.4959 36.546 30.9102L42.9099 24.5462C43.4957 23.9604 43.4957 23.0107 42.9099 22.4249L36.546 16.0609C35.9602 15.4751 35.0104 15.4751 34.4246 16.0609L28.0607 22.4249Z" fill="#000000"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.0607 10.4249C15.4749 11.0107 15.4749 11.9604 16.0607 12.5462L22.4246 18.9102C23.0104 19.496 23.9602 19.496 24.546 18.9102L30.9099 12.5462C31.4957 11.9604 31.4957 11.0107 30.9099 10.4249L24.546 4.06092C23.9602 3.47514 23.0104 3.47514 22.4246 4.06092L16.0607 10.4249ZM16.0607 34.4249C15.4749 35.0107 15.4749 35.9604 16.0607 36.5462L22.4246 42.9102C23.0104 43.496 23.9602 43.496 24.546 42.9102L30.9099 36.5462C31.4957 35.9604 31.4957 35.0107 30.9099 34.4249L24.546 28.0609C23.9602 27.4751 23.0104 27.4751 22.4246 28.0609L16.0607 34.4249Z" fill="#000000"/>
</svg>
</span>
</div>
<div class="flex-grow-1 ms-3">
<span class="navbar-dropdown-menu-media-title">Main</span>
<p class="navbar-dropdown-menu-media-desc">Over 60 corporate, agency, portfolio, account and many more pages.</p>
</div>
</div>
</a>
<!-- End Promo Link -->
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="navbar-dropdown-menu-promo-item">
<!-- Promo Link -->
<a class="navbar-dropdown-menu-promo-link " href="#">
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 6C10.6716 6 10 6.67157 10 7.5V12H5.5C4.67157 12 4 12.6716 4 13.5V16.5C4 17.3284 4.67157 18 5.5 18H10V40.5C10 41.3284 10.6716 42 11.5 42H14.5C15.3284 42 16 41.3284 16 40.5V18H42.5C43.3284 18 44 17.3284 44 16.5V13.5C44 12.6716 43.3284 12 42.5 12H16V7.5C16 6.67157 15.3284 6 14.5 6H11.5Z" fill="#000000"/>
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M42.5 22H20V36.5C20 37.3284 20.6716 38 21.5 38H37.5C41.0899 38 44 35.0899 44 31.5V23.5C44 22.6716 43.3284 22 42.5 22ZM39 24C38.4477 24 38 24.4477 38 25V33C38 33.5523 38.4477 34 39 34H41C41.5523 34 42 33.5523 42 33V25C42 24.4477 41.5523 24 41 24H39Z" fill="#000000"/>
</svg>
</span>
</div>
<div class="flex-grow-1 ms-3">
<span class="navbar-dropdown-menu-media-title">Real Estate</span>
<p class="navbar-dropdown-menu-media-desc">Find the latest homes for sale, real estate market data.</p>
</div>
</div>
</a>
<!-- End Promo Link -->
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="navbar-dropdown-menu-promo-item">
<!-- Promo Link -->
<a class="navbar-dropdown-menu-promo-link " href="#">
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.34717 16C7.2426 16 6.34717 16.8954 6.34717 18V38C6.34717 39.1046 7.2426 40 8.34717 40H39.653C40.7576 40 41.653 39.1046 41.653 38V18C41.653 16.8954 40.7576 16 39.653 16H8.34717ZM20.5 20C20.2238 20 20 20.2239 20 20.5V23.5C20 23.7761 20.2238 24 20.5 24H27.5C27.7761 24 28 23.7761 28 23.5V20.5C28 20.2239 27.7761 20 27.5 20H20.5Z" fill="#000000"/>
<path opacity="0.3" d="M20 16H16V14C16 10.6863 18.6863 8 22 8H26C29.3137 8 32 10.6863 32 14V16H28V14C28 12.8954 27.1046 12 26 12H22C20.8954 12 20 12.8954 20 14V16Z" fill="#000000"/>
</svg>
</span>
</div>
<div class="flex-grow-1 ms-3">
<span class="navbar-dropdown-menu-media-title">Jobs <span class="badge bg-success rounded-pill ms-1">Hot</span></span>
<p class="navbar-dropdown-menu-media-desc">Search millions of jobs online to find the next step in your career.</p>
</div>
</div>
</a>
<!-- End Promo Link -->
</div>
<!-- End Promo Item -->
</div>
<!-- End Promo -->
<!-- Promo -->
<div class="navbar-dropdown-menu-promo">
<!-- Promo Item -->
<div class="navbar-dropdown-menu-promo-item">
<!-- Promo Link -->
<a class="navbar-dropdown-menu-promo-link " href="#">
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M38 4H14C10.5072 4 8 6.61167 8 10V38C8 41.3883 10.5072 44 14 44H38C39.2837 44 40 43.2538 40 42V40H15.6667C14.7462 40 14 39.2538 14 38.3333V37.6667C14 36.7462 14.7462 36 15.6667 36H40V6C40 4.74619 39.2837 4 38 4Z" fill="#000000"/>
<mask maskUnits="userSpaceOnUse" x="8" y="4" width="32" height="40">
<path fill-rule="evenodd" clip-rule="evenodd" d="M38 4H14C10.5072 4 8 6.61167 8 10V38C8 41.3883 10.5072 44 14 44H38C39.2837 44 40 43.2538 40 42V40H15.6667C14.7462 40 14 39.2538 14 38.3333V37.6667C14 36.7462 14.7462 36 15.6667 36H40V6C40 4.74619 39.2837 4 38 4Z" fill="white"/>
</mask>
<g mask="url(#mask0)">
</g>
</svg>
</span>
</div>
<div class="flex-grow-1 ms-3">
<span class="navbar-dropdown-menu-media-title">Course <span class="badge bg-success rounded-pill ms-1">Hot</span></span>
<p class="navbar-dropdown-menu-media-desc">Learn on your schedule. An online learning and teaching demo.</p>
</div>
</div>
</a>
<!-- End Promo Link -->
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="navbar-dropdown-menu-promo-item">
<!-- Promo Link -->
<a class="navbar-dropdown-menu-promo-link " href="#">
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.34717 16C7.2426 16 6.34717 16.8954 6.34717 18V38C6.34717 39.1046 7.2426 40 8.34717 40H39.653C40.7576 40 41.653 39.1046 41.653 38V18C41.653 16.8954 40.7576 16 39.653 16H8.34717ZM20.5 20C20.2238 20 20 20.2239 20 20.5V23.5C20 23.7761 20.2238 24 20.5 24H27.5C27.7761 24 28 23.7761 28 23.5V20.5C28 20.2239 27.7761 20 27.5 20H20.5Z" fill="#000000"/>
<path opacity="0.3" d="M20 16H16V14C16 10.6863 18.6863 8 22 8H26C29.3137 8 32 10.6863 32 14V16H28V14C28 12.8954 27.1046 12 26 12H22C20.8954 12 20 12.8954 20 14V16Z" fill="#000000"/>
</svg>
</span>
</div>
<div class="flex-grow-1 ms-3">
<span class="navbar-dropdown-menu-media-title">E-Commerce</span>
<p class="navbar-dropdown-menu-media-desc">Choose an online store & get your business online today!</p>
</div>
</div>
</a>
<!-- End Promo Link -->
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="navbar-dropdown-menu-promo-item">
<!-- Promo Link -->
<a class="navbar-dropdown-menu-promo-link " href="#">
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.3" d="M8.24219 9C8.24219 8.44772 8.6899 8 9.24219 8H38.7579C39.3102 8 39.7579 8.44772 39.7579 9V40C39.7579 41.1046 38.8625 42 37.7579 42H10.2422C9.13762 42 8.24219 41.1046 8.24219 40V9Z" fill="#000000"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14 14H18C18 17.3137 20.6863 20 24 20C27.3137 20 30 17.3137 30 14H34C34 19.5228 29.5228 24 24 24C18.4772 24 14 19.5228 14 14Z" fill="#000000"/>
</svg>
</span>
</div>
<div class="flex-grow-1 ms-3">
<span class="navbar-dropdown-menu-media-title">App Marketplace</span>
<p class="navbar-dropdown-menu-media-desc">Find apps and integrates seamlessly with popular apps.</p>
</div>
</div>
</a>
<!-- End Promo Link -->
</div>
<!-- End Promo Item -->
</div>
<!-- End Promo -->
<!-- Promo -->
<div class="navbar-dropdown-menu-promo">
<!-- Promo Item -->
<div class="navbar-dropdown-menu-promo-item">
<!-- Promo Link -->
<a class="navbar-dropdown-menu-promo-link " href="#">
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M45.1921 37.1421C45.5077 37.4577 46.0472 37.2331 46.0456 36.7868L46.0079 26.2105V11.0526C46.0079 8.26214 43.7458 6 40.9553 6H17.3764C14.5859 6 12.3237 8.26214 12.3237 11.0526V18H29C30.6569 18 32 19.3431 32 21V31.2632H39.3131L45.1921 37.1421Z" fill="#000000"/>
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M3.97021 36V26C3.97021 23.7909 5.76108 22 7.97021 22H23.9702C26.1794 22 27.9702 23.7909 27.9702 26V36C27.9702 38.2091 26.1794 40 23.9702 40H8.20168L4.86824 43.1905C4.55024 43.4949 4.02252 43.2695 4.02252 42.8293V36.6485C3.98811 36.4374 3.97021 36.2208 3.97021 36ZM12.0001 28.5C12.0001 28.2239 12.2239 28 12.5001 28H23.5001C23.7762 28 24.0001 28.2239 24.0001 28.5V29.5C24.0001 29.7761 23.7762 30 23.5001 30H12.5001C12.2239 30 12.0001 29.7761 12.0001 29.5V28.5ZM18.5001 32C18.2239 32 18.0001 32.2239 18.0001 32.5V33.5C18.0001 33.7761 18.2239 34 18.5001 34H23.5001C23.7762 34 24.0001 33.7761 24.0001 33.5V32.5C24.0001 32.2239 23.7762 32 23.5001 32H18.5001Z" fill="#000000"/>
</svg>
</span>
</div>
<div class="flex-grow-1 ms-3">
<span class="navbar-dropdown-menu-media-title">Help Desk</span>
<p class="navbar-dropdown-menu-media-desc">A customer service demo that helps you balance customer needs.</p>
</div>
</div>
</a>
<!-- End Promo Link -->
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="navbar-dropdown-menu-promo-item">
<!-- Promo Link -->
<a class="navbar-dropdown-menu-promo-link" href="https://htmlstream.com/contact-us" target="_blank">
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M24 34C32.8366 34 40 26.8366 40 18C40 9.16344 32.8366 2 24 2C15.1634 2 8 9.16344 8 18C8 26.8366 15.1634 34 24 34Z" fill="#000000"/>
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M13.0764 18L21.1361 38.7249L23.952 37.6298L26.7491 38.7349L34.9406 18H13.0764ZM18.9238 22H29.0596L23.9518 34.9291L18.9238 22Z" fill="#000000"/>
<path opacity="0.3" d="M20 44H28V46C28 47.1046 27.1046 48 26 48H22C20.8954 48 20 47.1046 20 46V44Z" fill="#000000"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 34C16 32.8954 16.8954 32 18 32H30C31.1046 32 32 32.8954 32 34C32 35.1046 31.1046 36 30 36C31.1046 36 32 36.8954 32 38C32 39.1046 31.1046 40 30 40C31.1046 40 32 40.8954 32 42C32 43.1046 31.1046 44 30 44H18C16.8954 44 16 43.1046 16 42C16 40.8954 16.8954 40 18 40C16.8954 40 16 39.1046 16 38C16 36.8954 16.8954 36 18 36C16.8954 36 16 35.1046 16 34Z" fill="#000000"/>
</svg>
</span>
</div>
<div class="flex-grow-1 ms-3">
<span class="navbar-dropdown-menu-media-title">New demo ideas</span>
<p class="navbar-dropdown-menu-media-desc">Send us your suggestions</p>
</div>
</div>
</a>
<!-- End Promo Link -->
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="navbar-dropdown-menu-promo-item">
</div>
<!-- End Promo Item -->
</div>
<!-- End Promo -->
</div>
<!-- End Mega Menu -->
</li>
<!-- End Demos -->
<!-- Docs -->
<li class="hs-has-mega-menu nav-item"
data-hs-mega-menu-item-options='{
"desktop": {
"maxWidth": "20rem"
}
}'>
<a id="docsMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Docs</a>
<!-- Mega Menu -->
<div class="hs-mega-menu hs-position-right dropdown-menu" aria-labelledby="docsMegaMenu" style="min-width: 20rem;">
<!-- Link -->
<a class="navbar-dropdown-menu-media-link" href="#">
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M26 37.2379C26 37.6013 26.3781 37.8364 26.7161 37.7028C28.725 36.9087 34.8407 34.7498 43.5349 34.0366C43.7956 34.0152 44 33.8124 44 33.5508C44 30.5596 44 13.5944 44 10.4884C44 10.2122 43.7817 10.0015 43.5057 10.0107C41.532 10.076 33.9512 10.542 26.2985 13.8688C26.1173 13.9476 26 14.1221 26 14.3197C26 16.8386 26 33.4617 26 37.2379Z" fill="#000000"/>
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M22 37.2379C22 37.6013 21.6219 37.8364 21.2839 37.7028C19.275 36.9087 13.1593 34.7498 4.46513 34.0366C4.20441 34.0152 3.99997 33.8124 3.99997 33.5508C3.99997 30.5596 3.99997 13.5944 3.99997 10.4884C3.99997 10.2122 4.21827 10.0015 4.49426 10.0107C6.46804 10.076 14.0488 10.542 21.7015 13.8688C21.8827 13.9476 22 14.1221 22 14.3197C22 16.8386 22 33.4617 22 37.2379Z" fill="#000000"/>
</svg>
</span>
</div>
<div class="flex-grow-1 ms-3">
<span class="navbar-dropdown-menu-media-title">Documentation <span class="badge bg-primary rounded-pill ms-1">v4.0</span></span>
<p class="navbar-dropdown-menu-media-desc">Development guides for building projects with Space</p>
</div>
</div>
</a>
<!-- End Link -->
<div class="dropdown-divider"></div>
<!-- Link -->
<a class="navbar-dropdown-menu-media-link" href="#">
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M16 7C16 5.34315 17.3431 4 19 4H25C26.6569 4 28 5.34315 28 7V12H36C37.1046 12 38 12.8954 38 14V22H43C44.6569 22 46 23.3431 46 25V31C46 32.6569 44.6569 34 43 34H38V42C38 43.1046 37.1046 44 36 44H8C6.89543 44 6 43.1046 6 42V34H13C14.6569 34 16 32.6569 16 31V25C16 23.3431 14.6569 22 13 22H6V14C6 12.8954 6.89543 12 8 12H16V7Z" fill="#000000"/>
</svg>
</span>
</div>
<div class="flex-grow-1 ms-3">
<span class="navbar-dropdown-menu-media-title">Snippets</span>
<p class="navbar-dropdown-menu-media-desc">Move quickly with copy-to-clipboard feature</p>
</div>
</div>
</a>
<!-- End Link -->
</div>
<!-- End Mega Menu -->
</li>
<!-- End Docs -->
</ul>
</div>
</nav>
</div>
<!-- End Topbar -->
<div class="container">
<nav class="js-mega-menu navbar-nav-wrap">
<!-- Default Logo -->
<a class="navbar-brand" href="#" aria-label="Front">
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
</a>
<!-- End Default Logo -->
<!-- Secondary Content -->
<div class="navbar-nav-wrap-secondary-content">
<!-- Search -->
<div class="dropdown dropdown-course-search d-lg-none d-inline-block">
<a class="btn btn-ghost-secondary btn-sm btn-icon" href="#" id="navbarCourseSearchDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi-search"></i>
</a>
<div class="dropdown-menu dropdown-card" aria-labelledby="navbarCourseSearchDropdown">
<!-- Card -->
<div class="card card-sm">
<div class="card-body">
<form class="input-group 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 input-group-text">
<i class="bi-search"></i>
</div>
</form>
</div>
</div>
<!-- End Card -->
</div>
</div>
<!-- End Search -->
<!-- Account -->
<div class="dropdown">
<a href="#" id="navbarShoppingCartDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-dropdown-animation>
<img class="avatar avatar-xs avatar-circle" src="../assets/img/160x160/img9.jpg" alt="Image Description">
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarShoppingCartDropdown" style="min-width: 16rem;">
<a class="d-flex align-items-center p-2" href="#">
<div class="flex-shrink-0">
<img class="avatar" src="../assets/img/160x160/img9.jpg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
<span class="d-block fw-semibold">Lida Reidy <span class="badge bg-primary ms-1">Pro</span></span>
<span class="d-block text-muted small">lidareidy@gmail.com</span>
</div>
</a>
<div class="dropdown-divider my-3"></div>
<a class="dropdown-item" href="#">
<span class="dropdown-item-icon">
<i class="bi-chat-left-dots"></i>
</span> Messages
</a>
<a class="dropdown-item" href="#">
<span class="dropdown-item-icon">
<i class="bi-wallet2"></i>
</span> Purchase history
</a>
<a class="dropdown-item" href="#">
<span class="dropdown-item-icon">
<i class="bi-person"></i>
</span> Account
</a>
<a class="dropdown-item" href="#">
<span class="dropdown-item-icon">
<i class="bi-credit-card"></i>
</span> Payment methods
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<span class="dropdown-item-icon">
<i class="bi-question-circle"></i>
</span> Help
</a>
<a class="dropdown-item" href="#">
<span class="dropdown-item-icon">
<i class="bi-box-arrow-right"></i>
</span> Log out
</a>
</div>
</div>
<!-- End Account -->
</div>
<!-- End Secondary Content -->
<!-- Toggler -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-default">
<i class="bi-list"></i>
</span>
<span class="navbar-toggler-toggled">
<i class="bi-x"></i>
</span>
</button>
<!-- End Toggler -->
<!-- Collapse -->
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link " href="#">Home</a>
</li>
<!-- Courses -->
<li class="hs-has-sub-menu nav-item">
<a id="coursesMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="bi-journals me-2"></i> Courses</a>
<!-- Mega Menu -->
<div class="hs-sub-menu dropdown-menu" aria-labelledby="coursesMegaMenu" style="min-width: 17rem;">
<!-- Development -->
<div class="hs-has-sub-menu nav-item">
<a id="developmentMegaMenu" class="hs-mega-menu-invoker dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="bi-code-slash dropdown-item-icon"></i> Development</a>
<div class="hs-sub-menu dropdown-menu" aria-labelledby="developmentMegaMenu" style="min-width: 14rem;">
<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>
<!-- End Development -->
<!-- Business -->
<div class="hs-has-sub-menu nav-item">
<a id="businessMegaMenu" class="hs-mega-menu-invoker dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="bi-briefcase dropdown-item-icon"></i> Business</a>
<div class="hs-sub-menu dropdown-menu" aria-labelledby="businessMegaMenu" style="min-width: 14rem;">
<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 Business -->
<!-- Finance & Accounting -->
<div class="hs-has-sub-menu nav-item">
<a id="financeAccountingMegaMenu" class="hs-mega-menu-invoker dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="bi-graph-up dropdown-item-icon"></i> Finance & Accounting</a>
<div class="hs-sub-menu dropdown-menu" aria-labelledby="financeAccountingMegaMenu" style="min-width: 14rem;">
<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>
<!-- End Finance & Accounting -->
<!-- IT & Software -->
<div class="hs-has-sub-menu nav-item">
<a id="ITSoftwareMegaMenu" class="hs-mega-menu-invoker dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="bi-laptop dropdown-item-icon"></i> IT & Software</a>
<div class="hs-sub-menu dropdown-menu" aria-labelledby="ITSoftwareMegaMenu" style="min-width: 14rem;">
<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>
<!-- End IT & Software -->
<!-- Design -->
<div class="hs-has-sub-menu nav-item">
<a id="designMegaMenu" class="hs-mega-menu-invoker dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="bi-bezier2 dropdown-item-icon"></i> Design</a>
<div class="hs-sub-menu dropdown-menu" aria-labelledby="designMegaMenu" style="min-width: 14rem;">
<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>
<!-- End Design -->
<!-- Music -->
<div class="hs-has-sub-menu nav-item">
<a id="musicMegaMenu" class="hs-mega-menu-invoker dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="bi-music-note-list dropdown-item-icon"></i> Music</a>
<div class="hs-sub-menu dropdown-menu" aria-labelledby="musicMegaMenu" style="min-width: 14rem;">
<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>
<!-- End Music -->
</div>
<!-- End Mega Menu -->
</li>
<!-- End Courses -->
<!-- Search Form -->
<li class="nav-item flex-grow-1 d-none d-lg-inline-block ">
<form class="input-group input-group-merge">
<div class="input-group-prepend input-group-text">
<i class="bi-search"></i>
</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 -->
<!-- Dropdown -->
<li class="hs-has-sub-menu nav-item">
<a id="listingsDropdown" class="hs-mega-menu-invoker nav-link dropdown-toggle " href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Pages</a>
<div class="hs-sub-menu dropdown-menu" aria-labelledby="listingsDropdown" style="min-width: 14rem;">
<a class="dropdown-item " href="#">Courses</a>
<a class="dropdown-item " href="#">Course Overview</a>
<a class="dropdown-item " href="#">Author Profile</a>
</div>
</li>
<!-- End Dropdown -->
<!-- My Courses -->
<li class="hs-has-mega-menu nav-item"
data-hs-mega-menu-item-options='{
"desktop": {
"maxWidth": "20rem"
}
}'>
<a id="myCoursesMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">My Courses</a>
<!-- Mega Menu -->
<div class="hs-mega-menu hs-position-right dropdown-menu" aria-labelledby="myCoursesMegaMenu" style="min-width: 22rem;">
<!-- Course -->
<a class="navbar-dropdown-menu-media-link" href="#">
<div class="d-flex">
<div class="flex-shrink-0">
<img class="avatar" src="../assets/svg/components/card-16.svg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
<div class="mb-3">
<span class="navbar-dropdown-menu-media-title">Java programming masterclass for software developers</span>
<p class="navbar-dropdown-menu-media-desc">By Emily Milda</p>
</div>
<div class="d-flex justify-content-between">
<span class="card-subtitle text-body">Completed</span>
<small class="text-dark fw-semibold">25%</small>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</a>
<!-- End Course -->
<!-- Course -->
<a class="navbar-dropdown-menu-media-link" href="#">
<div class="d-flex">
<div class="flex-shrink-0">
<img class="avatar" src="../assets/svg/components/card-5.svg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
<div class="mb-3">
<span class="navbar-dropdown-menu-media-title">The Ultimate MySQL Bootcamp: Go from SQL Beginner</span>
<p class="navbar-dropdown-menu-media-desc">By Nataly Gaga and 2 others</p>
</div>
<div class="d-flex justify-content-between">
<span class="card-subtitle text-body">Completed</span>
<small class="text-dark fw-semibold">100%</small>
</div>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</a>
<!-- End Course -->
</div>
<!-- End Mega Menu -->
</li>
<!-- End My Courses -->
</ul>
</div>
<!-- End Collapse -->
</nav>
</div>
</header>
<!-- ========== END HEADER ========== -->
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css">
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>
<!-- JS Front -->
<script src="../assets/js/hs.bs-dropdown.js"></script>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF MEGA MENU
// =======================================================
new HSMegaMenu('.js-mega-menu', {
desktop: {
position: 'left'
}
})
// INITIALIZATION OF BOOTSTRAP DROPDOWN
// =======================================================
HSBsDropdown.init()
})()
</script>