<!-- ========== 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="#"><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 -->
<!-- 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>
<!-- 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">Listings</a>
<div class="hs-sub-menu dropdown-menu" aria-labelledby="listingsDropdown" style="min-width: 14rem;">
<a class="dropdown-item" href="#">Listing</a>
<a class="dropdown-item" href="#">Listing (Grid)</a>
</div>
</li>
<!-- End Dropdown -->
<li class="nav-item">
<a class="nav-link " href="#">Product Overview</a>
</li>
<!-- Pages -->
<li class="hs-has-mega-menu nav-item"
data-hs-mega-menu-item-options='{
"desktop": {
"position": "right",
"maxWidth": "27rem"
}
}'>
<a id="pagesMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle " aria-current="page" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Pages</a>
<!-- Mega Menu -->
<div class="hs-mega-menu dropdown-menu" aria-labelledby="pagesMegaMenu" style="min-width: 27rem;">
<div class="navbar-dropdown-menu-inner">
<span class="dropdown-header">Elements</span>
<div class="row">
<div class="col-sm mb-3 mb-sm-0">
<a class="dropdown-item" href="#">Categories</a>
<a class="dropdown-item" href="#">Categories Sidebar</a>
<a class="dropdown-item" href="#">Empty Cart</a>
</div>
<!-- End Col -->
<div class="col-sm">
<a class="dropdown-item" href="#">Cart</a>
<a class="dropdown-item" href="#">Checkout</a>
<a class="dropdown-item" href="#">Order Completed</a>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- Mega Menu Banner -->
<div class="navbar-dropdown-menu-shop-banner">
<div class="d-flex">
<div class="flex-shrink-0">
<img class="navbar-dropdown-menu-shop-banner-img" src="../assets/img/mockups/img4.png" alt="Image Description">
</div>
<div class="flex-grow-1 p-4">
<span class="h4 d-block text-primary">Win T-Shirt</span>
<p>Win one of our Front brand T-shirts.</p>
<a class="btn btn-sm btn-soft-primary btn-transition" href="#">Learn more <i class="bi-chevron-right small"></i></a>
</div>
</div>
</div>
<!-- End Mega Menu Banner -->
</div>
<!-- End Mega Menu -->
</li>
<!-- End Pages -->
<li class="nav-item">
<!-- Search -->
<button class="btn btn-ghost-secondary btn-sm btn-icon" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarSearch" aria-controls="offcanvasNavbarSearch">
<i class="bi-search"></i>
</button>
<!-- End Search -->
</li>
<li class="nav-item">
<!-- Shopping Cart -->
<button type="button" class="btn btn-ghost-secondary btn-sm btn-icon" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarEmptyShoppingCart" aria-controls="offcanvasNavbarEmptyShoppingCart">
<i class="bi-basket"></i>
</button>
<!-- End Shopping Cart -->
</li>
<!-- Button -->
<li class="nav-item">
<a class="btn btn-primary btn-transition" type="button" data-bs-toggle="modal" data-bs-target="#signupModal">Login</a>
</li>
<!-- End Button -->
</ul>
</div>
<!-- End Collapse -->
</nav>
</div>
</header>
<!-- ========== END HEADER ========== -->
<!-- ========== SECONDARY CONTENTS ========== -->
<!-- Sign Up -->
<div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-close">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- End Header -->
<!-- Body -->
<div class="modal-body">
<!-- Log in -->
<div id="signupModalFormLogin" style="display: none; opacity: 0;">
<!-- Heading -->
<div class="text-center mb-7">
<h2>Log in</h2>
<p>Don't have an account yet?
<a class="js-animation-link link" href="javascript:;" role="button"
data-hs-show-animation-options='{
"targetSelector": "#signupModalFormSignup",
"groupName": "idForm"
}'>Sign up</a>
</p>
</div>
<!-- End Heading -->
<div class="d-grid gap-2">
<a class="btn btn-white btn-lg" href="#">
<span class="d-flex justify-content-center align-items-center">
<img class="avatar avatar-xss me-2" src="../assets/svg/brands/google-icon.svg" alt="Image Description">
Log in with Google
</span>
</a>
<a class="js-animation-link btn btn-primary btn-lg" href="#"
data-hs-show-animation-options='{
"targetSelector": "#signupModalFormLoginWithEmail",
"groupName": "idForm"
}'>Log in with Email</a>
</div>
</div>
<!-- End Log in -->
<!-- Log in with Modal -->
<div id="signupModalFormLoginWithEmail" style="display: none; opacity: 0;">
<!-- Heading -->
<div class="text-center mb-7">
<h2>Log in</h2>
<p>Don't have an account yet?
<a class="js-animation-link link" href="javascript:;" role="button"
data-hs-show-animation-options='{
"targetSelector": "#signupModalFormSignup",
"groupName": "idForm"
}'>Sign up</a>
</p>
</div>
<!-- End Heading -->
<form class="js-validate needs-validation" novalidate>
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="signupModalFormLoginEmail">Your email</label>
<input type="email" class="form-control form-control-lg" name="email" id="signupModalFormLoginEmail" placeholder="email@site.com" aria-label="email@site.com" required>
<span class="invalid-feedback">Please enter a valid email address.</span>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-3">
<div class="d-flex justify-content-between align-items-center">
<label class="form-label" for="signupModalFormLoginPassword">Password</label>
<a class="js-animation-link form-label-link" href="javascript:;"
data-hs-show-animation-options='{
"targetSelector": "#signupModalFormResetPassword",
"groupName": "idForm"
}'>Forgot Password?</a>
</div>
<input type="password" class="form-control form-control-lg" name="password" id="signupModalFormLoginPassword" placeholder="8+ characters required" aria-label="8+ characters required" required minlength="8">
<span class="invalid-feedback">Please enter a valid password.</span>
</div>
<!-- End Form -->
<div class="d-grid mb-3">
<button type="submit" class="btn btn-primary form-control-lg">Log in</button>
</div>
</form>
</div>
<!-- End Log in with Modal -->
<!-- Sign up -->
<div id="signupModalFormSignup">
<!-- Heading -->
<div class="text-center mb-7">
<h2>Sign up</h2>
<p>Already have an account?
<a class="js-animation-link link" href="javascript:;" role="button"
data-hs-show-animation-options='{
"targetSelector": "#signupModalFormLogin",
"groupName": "idForm"
}'>Log in</a>
</p>
</div>
<!-- End Heading -->
<div class="d-grid gap-3">
<a class="btn btn-white btn-lg" href="#">
<span class="d-flex justify-content-center align-items-center">
<img class="avatar avatar-xss me-2" src="../assets/svg/brands/google-icon.svg" alt="Image Description">
Sign up with Google
</span>
</a>
<a class="js-animation-link btn btn-primary btn-lg" href="#"
data-hs-show-animation-options='{
"targetSelector": "#signupModalFormSignupWithEmail",
"groupName": "idForm"
}'>Sign up with Email</a>
<div class="text-center">
<p class="small mb-0">By continuing you agree to our <a href="#">Terms and Conditions</a></p>
</div>
</div>
</div>
<!-- End Sign up -->
<!-- Sign up with Modal -->
<div id="signupModalFormSignupWithEmail" style="display: none; opacity: 0;">
<!-- Heading -->
<div class="text-center mb-7">
<h2>Sign up</h2>
<p>Already have an account?
<a class="js-animation-link link" href="javascript:;" role="button"
data-hs-show-animation-options='{
"targetSelector": "#signupModalFormLogin",
"groupName": "idForm"
}'>Log in</a>
</p>
</div>
<!-- End Heading -->
<form class="js-validate need-validate" novalidate>
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="signupModalFormSignupEmail">Your email</label>
<input type="email" class="form-control form-control-lg" name="email" id="signupModalFormSignupEmail" placeholder="email@site.com" aria-label="email@site.com" required>
<span class="invalid-feedback">Please enter a valid email address.</span>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="signupModalFormSignupPassword">Password</label>
<input type="password" class="form-control form-control-lg" name="password" id="signupModalFormSignupPassword" placeholder="8+ characters required" aria-label="8+ characters required" required>
<span class="invalid-feedback">Your password is invalid. Please try again.</span>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-3" data-hs-validation-validate-class>
<label class="form-label" for="signupModalFormSignupConfirmPassword">Confirm password</label>
<input type="password" class="form-control form-control-lg" name="confirmPassword" id="signupModalFormSignupConfirmPassword" placeholder="8+ characters required" aria-label="8+ characters required" required
data-hs-validation-equal-field="#signupModalFormSignupPassword">
<span class="invalid-feedback">Password does not match the confirm password.</span>
</div>
<!-- End Form -->
<div class="d-grid mb-3">
<button type="submit" class="btn btn-primary form-control-lg">Sign up</button>
</div>
<div class="text-center">
<p class="small mb-0">By continuing you agree to our <a href="#">Terms and Conditions</a></p>
</div>
</form>
</div>
<!-- End Sign up with Modal -->
<!-- Reset Password -->
<div id="signupModalFormResetPassword" style="display: none; opacity: 0;">
<!-- Heading -->
<div class="text-center mb-7">
<h2>Forgot password?</h2>
<p>Enter the email address you used when you joined and we'll send you instructions to reset your password.</p>
</div>
<!-- En dHeading -->
<form class="js-validate need-validate" novalidate>
<div class="mb-3">
<!-- Form -->
<div class="d-flex justify-content-between align-items-center">
<label class="form-label" for="signupModalFormResetPasswordEmail" tabindex="0">Your email</label>
<a class="js-animation-link form-label-link" href="javascript:;"
data-hs-show-animation-options='{
"targetSelector": "#signupModalFormLogin",
"groupName": "idForm"
}'>
<i class="bi-chevron-left small"></i> Back to Log in
</a>
</div>
<input type="email" class="form-control form-control-lg" name="email" id="signupModalFormResetPasswordEmail" tabindex="1" placeholder="Enter your email address" aria-label="Enter your email address" required>
<span class="invalid-feedback">Please enter a valid email address.</span>
<!-- End Form -->
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary form-control-lg">Submit</button>
</div>
</form>
</div>
<!-- End Reset Password -->
</div>
<!-- End Body -->
<!-- Footer -->
<div class="modal-footer d-block text-center py-sm-5">
<small class="text-cap mb-4">Trusted by the world's best teams</small>
<div class="w-85 mx-auto">
<div class="row justify-content-between">
<div class="col">
<img class="img-fluid" src="../assets/svg/brands/gitlab-gray.svg" alt="Logo">
</div>
<!-- End Col -->
<div class="col">
<img class="img-fluid" src="../assets/svg/brands/fitbit-gray.svg" alt="Logo">
</div>
<!-- End Col -->
<div class="col">
<img class="img-fluid" src="../assets/svg/brands/flow-xo-gray.svg" alt="Logo">
</div>
<!-- End Col -->
<div class="col">
<img class="img-fluid" src="../assets/svg/brands/layar-gray.svg" alt="Logo">
</div>
<!-- End Col -->
</div>
</div>
<!-- End Row -->
</div>
<!-- End Footer -->
</div>
</div>
</div>
<!-- Offcanvas Search -->
<div class="offcanvas offcanvas-top offcanvas-navbar-search bg-light" tabindex="-1" id="offcanvasNavbarSearch">
<div class="offcanvas-body">
<div class="container">
<div class="w-lg-75 mx-lg-auto">
<div class="d-flex justify-content-end mb-3">
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="mb-7">
<!-- Form -->
<form>
<!-- Input Card -->
<div class="input-card">
<div class="input-card-form">
<input type="text" class="form-control form-control-lg" placeholder="Search Front" aria-label="Search Front">
</div>
<button type="button" class="btn btn-primary btn-lg">Search</button>
</div>
<!-- End Input Card -->
</form>
<!-- End Form -->
</div>
<div class="d-none d-md-block">
<div class="row">
<div class="col-sm-6">
<div class="mb-3">
<h5>Quick Links</h5>
</div>
<div class="row">
<div class="col-6">
<!-- List -->
<ul class="list-pointer list-pointer-primary mb-0">
<li class="list-pointer-item">
<a class="link-sm link-secondary" href="#">Search Results List</a>
</li>
<li class="list-pointer-item">
<a class="link-sm link-secondary" href="#">Search Results Grid</a>
</li>
<li class="list-pointer-item">
<a class="link-sm link-secondary" href="#">About</a>
</li>
<li class="list-pointer-item">
<a class="link-sm link-secondary" href="#">Services</a>
</li>
<li class="list-pointer-item">
<a class="link-sm link-secondary" href="#">Invoice</a>
</li>
</ul>
<!-- End List -->
</div>
<!-- End Col -->
<div class="col-6">
<!-- List -->
<ul class="list-pointer list-pointer-primary mb-0">
<li class="list-pointer-item">
<a class="link-sm link-secondary" href="#">Profile</a>
</li>
<li class="list-pointer-item">
<a class="link-sm link-secondary" href="#">User Contacts</a>
</li>
<li class="list-pointer-item">
<a class="link-sm link-secondary" href="#">Reviews</a>
</li>
<li class="list-pointer-item">
<a class="link-sm link-secondary" href="#">Settings</a>
</li>
</ul>
<!-- End List -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Col -->
<div class="col-sm-6">
<!-- Card -->
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-6">
<img class="img-fluid" src="../assets/img/mockups/img1.png" alt="Image Description">
</div>
<!-- End Col -->
<div class="col-6">
<div class="mb-4">
<h5>Featured Item</h5>
<p>Create astonishing web sites and pages.</p>
</div>
<a class="btn btn-outline-primary btn-xs btn-transition" href="#">Apply now <i class="bi-chevron-right small ms-1"></i></a>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
</div>
</div>
</div>
<!-- Offcanvas Search -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbarEmptyShoppingCart">
<div class="offcanvas-header pb-0">
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="text-center">
<div class="mb-5">
<img class="avatar avatar-xl avatar-4x3" src="../assets/svg/illustrations/oc-empty-cart.svg" alt="SVG">
</div>
<div class="mb-5">
<h3>Your cart is currently empty</h3>
<p>Before proceed to checkout you must add some products to your shopping cart. You will find a lot of interesting products on our "Shop" page.</p>
</div>
<a class="btn btn-primary btn-transition rounded-pill px-6" href="#">Start shopping</a>
</div>
</div>
</div>
<!-- ========== END SECONDARY CONTENTS ========== -->
<!-- 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-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-show-animation/dist/hs-show-animation.min.js"></script>
<!-- JS Front -->
<script src="../assets/js/hs.bs-validation.js"></script>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF HEADER
// =======================================================
new HSHeader('#header').init()
// INITIALIZATION OF MEGA MENU
// =======================================================
new HSMegaMenu('.js-mega-menu', {
desktop: {
position: 'left'
}
})
// INITIALIZATION OF SHOW ANIMATIONS
// =======================================================
new HSShowAnimation('.js-animation-link')
// INITIALIZATION OF BOOTSTRAP VALIDATION
// =======================================================
HSBsValidation.init('.js-validate', {
onSubmit: data => {
data.event.preventDefault()
alert('Submited')
}
})
})()
</script>
Log in with Google
