Toggle Topbar on Scroll
<!-- ========== HEADER ========== -->
<header id="header" class="header header-abs-top-lg header-show-hide-lg header-show-hide-md"
data-hs-header-options='{
"fixMoment": 1000,
"fixEffect": "slide"
}'>
<!-- Search -->
<div id="searchPushTop" class="search-push-top">
<div class="container position-relative">
<div class="search-push-top-content pt-3">
<!-- Close Button -->
<div class="search-push-top-close-btn">
<div class="hs-unfold">
<a class="js-hs-unfold-invoker btn btn-icon btn-xs btn-soft-secondary mt-2 mr-2" href="javascript:;"
data-hs-unfold-options='{
"target": "#searchPushTop",
"type": "jquery-slide",
"contentSelector": ".search-push-top"
}'>
<svg width="10" height="10" 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>
</a>
</div>
</div>
<!-- End Close Button -->
<!-- Input -->
<form class="input-group">
<input type="search" class="form-control" placeholder="Search Front" aria-label="Search Front">
<div class="input-group-append">
<button type="button" class="btn btn-primary">Search</button>
</div>
</form>
<!-- End Input -->
<!-- Content -->
<div class="row d-none d-md-flex mt-7">
<div class="col-sm-6">
<span class="h5">Quick Links</span>
<div class="row">
<!-- Nav Link -->
<div class="col-6">
<div class="nav nav-sm nav-x-0 flex-column">
<a class="nav-link" href="#">
<i class="fas fa-angle-right mr-1"></i>
Search Results List
</a>
<a class="nav-link" href="#">
<i class="fas fa-angle-right mr-1"></i>
Search Results Grid
</a>
<a class="nav-link" href="#">
<i class="fas fa-angle-right mr-1"></i>
About
</a>
<a class="nav-link" href="#">
<i class="fas fa-angle-right mr-1"></i>
Services
</a>
<a class="nav-link" href="#">
<i class="fas fa-angle-right mr-1"></i>
Invoice
</a>
</div>
</div>
<!-- End Nav Link -->
<!-- Nav Link -->
<div class="col-6">
<div class="nav nav-sm nav-x-0 flex-column">
<a class="nav-link" href="#">
<i class="fas fa-angle-right mr-1"></i>
Profile
</a>
<a class="nav-link" href="#">
<i class="fas fa-angle-right mr-1"></i>
User Contacts
</a>
<a class="nav-link" href="#">
<i class="fas fa-angle-right mr-1"></i>
Reviews
</a>
<a class="nav-link" href="#">
<i class="fas fa-angle-right mr-1"></i>
Settings
</a>
</div>
</div>
<!-- End Nav Link -->
</div>
</div>
<div class="col-sm-6">
<!-- Banner -->
<div class="rounded search-push-top-banner">
<div class="d-flex align-items-center">
<div class="search-push-top-banner-container">
<img class="img-fluid search-push-top-banner-img" src="../../assets/img/mockups/img3.png" alt="Image Description">
<img class="img-fluid search-push-top-banner-img" src="../../assets/img/mockups/img2.png" alt="Image Description">
</div>
<div>
<div class="mb-4">
<span class="h5">Featured Item</span>
<p>Create astonishing web sites and pages.</p>
</div>
<a class="btn btn-xs btn-soft-success transition-3d-hover" href="javascript:;">Apply Now <i class="fas fa-angle-right fa-sm ml-1"></i></a>
</div>
</div>
</div>
<!-- End Banner -->
</div>
</div>
<!-- End Content -->
</div>
</div>
</div>
<!-- End Search -->
<div class="header-section">
<!-- Topbar -->
<div class="container header-hide-content pt-2">
<div class="d-flex align-items-center">
<!-- Language -->
<div class="hs-unfold">
<a class="js-hs-unfold-invoker dropdown-nav-link dropdown-toggle d-flex align-items-center" href="javascript:;"
data-hs-unfold-options='{
"target": "#languageDropdown",
"type": "css-animation",
"event": "hover",
"hideOnScroll": "true"
}'>
<img class="dropdown-item-icon mr-2" src="../../assets/vendor/flag-icon-css/flags/4x3/us.svg" alt="SVG">
<span class="d-inline-block d-sm-none">US</span>
<span class="d-none d-sm-inline-block">United States</span>
</a>
<div id="languageDropdown" class="hs-unfold-content dropdown-menu">
<a class="dropdown-item active" href="#">English</a>
<a class="dropdown-item" href="#">Deutsch</a>
<a class="dropdown-item" href="#">Español</a>
</div>
</div>
<!-- End Language -->
<div class="ml-auto">
<!-- Jump To -->
<div class="hs-unfold d-sm-none mr-2">
<a class="js-hs-unfold-invoker dropdown-nav-link dropdown-toggle d-flex align-items-center" href="javascript:;"
data-hs-unfold-options='{
"target": "#jumpToDropdown",
"type": "css-animation",
"event": "hover",
"hideOnScroll": "true"
}'>
Jump to
</a>
<div id="jumpToDropdown" class="hs-unfold-content dropdown-menu">
<a class="dropdown-item" href="#">Help</a>
<a class="dropdown-item" href="#">Contacts</a>
</div>
</div>
<!-- End Jump To -->
<!-- Links -->
<div class="nav nav-sm nav-y-0 d-none d-sm-flex ml-sm-auto">
<a class="nav-link" href="#">Help</a>
<a class="nav-link" href="#">Contacts</a>
</div>
<!-- End Links -->
</div>
<ul class="list-inline ml-2 mb-0">
<!-- Search -->
<li class="list-inline-item">
<div class="hs-unfold">
<a class="js-hs-unfold-invoker btn btn-xs btn-icon btn-ghost-secondary" href="javascript:;"
data-hs-unfold-options='{
"target": "#searchPushTop",
"type": "jquery-slide",
"contentSelector": ".search-push-top"
}'>
<i class="fas fa-search"></i>
</a>
</div>
</li>
<!-- End Search -->
<!-- Shopping Cart -->
<li class="list-inline-item">
<div class="hs-unfold">
<a class="js-hs-unfold-invoker btn btn-xs btn-icon btn-ghost-secondary" href="javascript:;"
data-hs-unfold-options='{
"target": "#shoppingCartDropdown",
"type": "css-animation",
"event": "hover",
"hideOnScroll": "true"
}'>
<i class="fas fa-shopping-cart"></i>
</a>
<div id="shoppingCartDropdown" class="hs-unfold-content dropdown-menu dropdown-menu-right text-center p-7" style="min-width: 250px;">
<figure class="max-w-9rem mx-auto mb-3">
<img class="img-fluid" src="../../assets/svg/illustrations/empty-cart.svg" alt="SVG">
</figure>
<span class="d-block">Your Cart is Empty</span>
</div>
</div>
</li>
<!-- End Shopping Cart -->
<!-- Account Login -->
<li class="list-inline-item">
<div class="hs-unfold">
<a class="js-hs-unfold-invoker btn btn-icon btn-xs btn-ghost-secondary" href="javascript:;"
data-hs-unfold-options='{
"target": "#sidebarContent",
"type": "css-animation",
"animationIn": "fadeInRight",
"animationOut": "fadeOutRight",
"hasOverlay": "rgba(55, 125, 255, 0.1)",
"smartPositionOff": true
}'>
<i class="fas fa-user-circle"></i>
</a>
</div>
</li>
<!-- End Account Login -->
</ul>
</div>
</div>
<!-- End Topbar -->
<div id="logoAndNav" class="container">
<!-- Nav -->
<nav class="js-mega-menu navbar navbar-expand-lg">
<!-- Logo -->
<a class="navbar-brand" href="#" aria-label="Front">
<img src="../../assets/svg/logos/logo.svg" alt="Logo">
</a>
<!-- End Logo -->
<!-- Responsive Toggle Button -->
<button type="button" class="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="collapse navbar-collapse">
<div class="navbar-body header-abs-top-inner">
<ul class="navbar-nav">
<!-- Home -->
<li class="hs-has-mega-menu navbar-nav-item">
<a id="homeMegaMenu" class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Landings</a>
<!-- Home - Mega Menu -->
<div class="hs-mega-menu dropdown-menu w-100" aria-labelledby="homeMegaMenu">
<div class="row no-gutters">
<div class="col-lg-6">
<!-- Banner Image -->
<div class="navbar-banner" style="background-image: url(../../assets/img/750x750/img1.jpg);">
<div class="navbar-banner-content">
<div class="mb-4">
<span class="h2 d-block text-white">Branding Works</span>
<p class="text-white">Experience a level of our quality in both design & customization works.</p>
</div>
<a class="btn btn-primary btn-sm transition-3d-hover" href="#">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></a>
</div>
</div>
<!-- End Banner Image -->
</div>
<div class="col-lg-6">
<div class="row mega-menu-body">
<div class="col-sm-6 mb-3 mb-sm-0">
<span class="d-block h5">Classic</span>
<a class="dropdown-item" href="#">Agency</a>
<a class="dropdown-item" href="#">Analytics <span class="badge badge-primary badge-pill ml-2">Hot</span></a>
<a class="dropdown-item" href="#">Studio</a>
<a class="dropdown-item" href="#">Marketing</a>
<a class="dropdown-item" href="#">Advertisement <span class="badge badge-primary badge-pill ml-2">Hot</span></a>
<a class="dropdown-item" href="#">Consulting</a>
<a class="dropdown-item" href="#">Portfolio</a>
<a class="dropdown-item" href="#">Software</a>
<a class="dropdown-item" href="#">Business</a>
</div>
<div class="col-sm-6">
<span class="d-block h5">App</span>
<div class="mb-3">
<a class="dropdown-item" href="#">UI Kit</a>
<a class="dropdown-item" href="#">SaaS</a>
<a class="dropdown-item" href="#">Workflow</a>
<a class="dropdown-item" href="#">Payment</a>
<a class="dropdown-item" href="#">Tool</a>
</div>
<span class="d-block h5">Onepages</span>
<a class="dropdown-item" href="#">Corporate</a>
<a class="dropdown-item" href="#">SaaS <span class="badge badge-primary badge-pill ml-2">Hot</span></a>
</div>
</div>
</div>
</div>
</div>
<!-- End Home - Mega Menu -->
</li>
<!-- End Home -->
<!-- Pages -->
<li class="hs-has-sub-menu navbar-nav-item">
<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;">
<!-- Company -->
<div class="hs-has-sub-menu">
<a id="navLinkPagesCompany" class="hs-mega-menu-invoker dropdown-item dropdown-item-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuPagesCompany">Company</a>
<div id="navSubmenuPagesCompany" class="hs-sub-menu dropdown-menu" aria-labelledby="navLinkPagesCompany" style="min-width: 230px;">
<a class="dropdown-item" href="#">About Agency</a>
<a class="dropdown-item" href="#">Services Agency</a>
<a class="dropdown-item" href="#">Customers</a>
<a class="dropdown-item" href="#">Customer story</a>
<a class="dropdown-item" href="#">Careers</a>
<a class="dropdown-item" href="#">Careers Single</a>
<a class="dropdown-item" href="#">Hire Us</a>
</div>
</div>
<!-- Company -->
<!-- Portfolio -->
<div class="hs-has-sub-menu">
<a id="navLinkPagesPortfolio" class="hs-mega-menu-invoker dropdown-item dropdown-item-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuPagesPortfolio">Portfolio</a>
<div id="navSubmenuPagesPortfolio" class="hs-sub-menu dropdown-menu" aria-labelledby="navLinkPagesPortfolio" style="min-width: 230px;">
<a class="dropdown-item" href="#">Grid</a>
<a class="dropdown-item" href="#">Masonry</a>
<a class="dropdown-item" href="#">Modern</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Case Studies Branding</a>
<a class="dropdown-item" href="#">Case Studies Product</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Single Page List</a>
<a class="dropdown-item" href="#">Single Page Grid</a>
<a class="dropdown-item" href="#">Single Page Masonry</a>
</div>
</div>
<!-- End Portfolio -->
<!-- Login -->
<div class="hs-has-sub-menu">
<a id="navLinkPagesLogin" class="hs-mega-menu-invoker dropdown-item dropdown-item-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuPagesLogin">Login & Signup</a>
<div id="navSubmenuPagesLogin" class="hs-sub-menu dropdown-menu" aria-labelledby="navLinkPagesLogin" style="min-width: 230px;">
<a class="dropdown-item" href="#">Login</a>
<a class="dropdown-item" href="#">Signup</a>
<a class="dropdown-item" href="#">Recover Account</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Login Simple</a>
<a class="dropdown-item" href="#">Signup Simple</a>
<a class="dropdown-item" href="#">Recover Account Simple</a>
</div>
</div>
<!-- Signup -->
<!-- Contacts -->
<div class="hs-has-sub-menu">
<a id="navLinkContactsServices" class="hs-mega-menu-invoker dropdown-item dropdown-item-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuContactsServices">Contacts</a>
<div id="navSubmenuContactsServices" class="hs-sub-menu dropdown-menu" aria-labelledby="navLinkContactsServices" style="min-width: 230px;">
<a class="dropdown-item" href="#">Contacts Agency</a>
<a class="dropdown-item" href="#">Contacts Start-Up</a>
</div>
</div>
<!-- Contacts -->
<!-- Utilities -->
<div class="hs-has-sub-menu">
<a id="navLinkPagesUtilities" class="hs-mega-menu-invoker dropdown-item dropdown-item-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuPagesUtilities">Utilities</a>
<div id="navSubmenuPagesUtilities" class="hs-sub-menu dropdown-menu" aria-labelledby="navLinkPagesUtilities" style="min-width: 230px;">
<a class="dropdown-item" href="#">Pricing</a>
<a class="dropdown-item" href="#">FAQ</a>
<a class="dropdown-item" href="#">Terms & Conditions</a>
<a class="dropdown-item" href="#">Privacy & Policy</a>
</div>
</div>
<!-- Utilities -->
<!-- Specialty -->
<div class="hs-has-sub-menu">
<a id="navLinkPagesSpecialty" class="hs-mega-menu-invoker dropdown-item dropdown-item-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuPagesSpecialty">Specialty</a>
<div id="navSubmenuPagesSpecialty" class="hs-sub-menu dropdown-menu" aria-labelledby="navLinkPagesSpecialty" style="min-width: 230px;">
<a class="dropdown-item" href="#">Cover Page</a>
<a class="dropdown-item" href="#">Coming Soon</a>
<a class="dropdown-item" href="#">Maintenance Mode</a>
<a class="dropdown-item" href="#">Status</a>
<a class="dropdown-item" href="#">Invoice</a>
<a class="dropdown-item" href="#">Error 404</a>
</div>
</div>
<!-- Specialty -->
</div>
<!-- End Pages - Submenu -->
</li>
<!-- End Pages -->
<!-- Blog -->
<li class="hs-has-sub-menu navbar-nav-item">
<a id="blogMegaMenu" class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-labelledby="blogSubMenu">Blog</a>
<!-- Blog - Submenu -->
<div id="blogSubMenu" class="hs-sub-menu dropdown-menu" aria-labelledby="blogMegaMenu" style="min-width: 230px;">
<a class="dropdown-item" href="#">Journal</a>
<a class="dropdown-item" href="#">Metro</a>
<a class="dropdown-item" href="#">Newsroom</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Blog Profile</a>
<a class="dropdown-item" href="#">Single Article</a>
</div>
<!-- End Submenu -->
</li>
<!-- End Blog -->
<!-- Shop -->
<li class="hs-has-mega-menu navbar-nav-item"
data-hs-mega-menu-item-options='{
"desktop": {
"position": "right",
"maxWidth": "440px"
}
}'>
<a id="shopMegaMenu" class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Shop</a>
<!-- Shop - Mega Menu -->
<div class="hs-mega-menu dropdown-menu" aria-labelledby="shopMegaMenu">
<div class="mega-menu-body">
<span class="d-block h5">Shop Elements</span>
<div class="row">
<div class="col-sm-6">
<a class="dropdown-item" href="#">Classic</a>
<a class="dropdown-item" href="#">Categories</a>
<a class="dropdown-item" href="#">Categories Sidebar</a>
<a class="dropdown-item" href="#">Products Grid</a>
<a class="dropdown-item" href="#">Products List</a>
</div>
<div class="col-sm-6">
<a class="dropdown-item" href="#">Single Product</a>
<a class="dropdown-item" href="#">Empty Cart</a>
<a class="dropdown-item" href="#">Cart</a>
<a class="dropdown-item" href="#">Checkout</a>
<a class="dropdown-item" href="#">Order Completed</a>
</div>
</div>
</div>
<!-- Mega Menu Banner -->
<div class="navbar-product-banner">
<div class="d-flex align-items-end">
<img class="img-fluid mr-4" src="../../assets/img/mockups/img4.png" alt="Image Description">
<div class="navbar-product-banner-content">
<div class="mb-4">
<span class="h4 d-block text-primary">Win T-shirt</span>
<p>Win one of our Front brand T-shirts.</p>
</div>
<a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></a>
</div>
</div>
</div>
<!-- End Mega Menu Banner -->
</div>
<!-- End Shop - Mega Menu -->
</li>
<!-- End Shop -->
<!-- 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" 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" 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 -->
<!-- Button -->
<li class="navbar-nav-last-item">
<a class="btn btn-sm btn-primary transition-3d-hover" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/" target="_blank">
Buy Now
</a>
</li>
<!-- End Button -->
</ul>
</div>
</div>
<!-- End Navigation -->
</nav>
<!-- End Nav -->
</div>
</div>
</header>
<!-- ========== END HEADER ========== -->
<!-- ========== SECONDARY CONTENTS ========== -->
<!-- Account Sidebar Navigation -->
<aside id="sidebarContent" class="hs-unfold-content sidebar">
<div class="sidebar-scroller">
<div class="sidebar-container">
<div class="sidebar-footer-offset" style="padding-bottom: 7rem;">
<!-- Toggle Button -->
<div class="d-flex justify-content-end align-items-center pt-4 px-4">
<div class="hs-unfold">
<a class="js-hs-unfold-invoker btn btn-icon btn-xs btn-soft-secondary" href="javascript:;"
data-hs-unfold-options='{
"target": "#sidebarContent",
"type": "css-animation",
"animationIn": "fadeInRight",
"animationOut": "fadeOutRight",
"hasOverlay": "rgba(55, 125, 255, 0.1)",
"smartPositionOff": true
}'>
<svg width="10" height="10" 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>
</a>
</div>
</div>
<!-- End Toggle Button -->
<!-- Content -->
<div class="scrollbar sidebar-body">
<div class="sidebar-content py-4 px-7">
<form class="js-validate">
<!-- Login -->
<div id="login">
<!-- Title -->
<div class="text-center mb-7">
<h3 class="mb-0">Sign In to Front</h3>
<p>Login to manage your account.</p>
</div>
<!-- End Title -->
<!-- Input Group -->
<div class="js-form-message mb-4">
<label class="input-label">Email</label>
<div class="input-group input-group-sm mb-2">
<input type="email" class="form-control" name="email" id="signinEmail" placeholder="Email" aria-label="Email" required
data-msg="Please enter a valid email address.">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="js-form-message mb-3">
<label class="input-label">Password</label>
<div class="input-group input-group-sm mb-2">
<input type="password" class="form-control" name="password" id="signinPassword" placeholder="Password" aria-label="Password" required
data-msg="Your password is invalid. Please try again.">
</div>
</div>
<!-- End Input Group -->
<div class="d-flex justify-content-end mb-4">
<a class="js-animation-link small link-underline" href="javascript:;"
data-hs-show-animation-options='{
"targetSelector": "#forgotPassword",
"groupName": "idForm",
"animationType": "css-animation",
"animationIn": "slideInUp",
"duration": 400
}'>Forgot Password?</a>
</div>
<div class="mb-3">
<button type="submit" class="btn btn-sm btn-primary btn-block">Sign In</button>
</div>
<div class="text-center mb-3">
<span class="divider divider-xs divider-text">OR</span>
</div>
<a class="btn btn-sm btn-ghost-secondary btn-block mb-2" href="#">
<span class="d-flex justify-content-center align-items-center">
<img class="mr-2" src="../../assets/img/160x160/img17.png" alt="Image Description" width="14" height="14">
Sign In with Google
</span>
</a>
<div class="text-center">
<span class="small text-muted">Do not have an account?</span>
<a class="js-animation-link small font-weight-bold" href="javascript:;"
data-hs-show-animation-options='{
"targetSelector": "#signup",
"groupName": "idForm",
"animationType": "css-animation",
"animationIn": "slideInUp",
"duration": 400
}'>Sign Up
</a>
</div>
</div>
<!-- Signup -->
<div id="signup" style="display: none; opacity: 0;">
<!-- Title -->
<div class="text-center mb-7">
<h3 class="mb-0">Create your account</h3>
<p>Fill out the form to get started.</p>
</div>
<!-- End Title -->
<!-- Input Group -->
<div class="js-form-message mb-4">
<label class="input-label">Email</label>
<div class="input-group input-group-sm mb-2">
<input type="email" class="form-control" name="email" id="signupEmail" placeholder="Email" aria-label="Email" required
data-msg="Please enter a valid email address.">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="js-form-message mb-4">
<label class="input-label">Password</label>
<div class="input-group input-group-sm mb-2">
<input type="password" class="form-control" name="password" id="signupPassword" placeholder="Password" aria-label="Password" required
data-msg="Your password is invalid. Please try again.">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="js-form-message mb-4">
<label class="input-label">Confirm Password</label>
<div class="input-group input-group-sm mb-2">
<input type="password" class="form-control" name="confirmPassword" id="signupConfirmPassword" placeholder="Confirm Password" aria-label="Confirm Password" required
data-msg="Password does not match the confirm password.">
</div>
</div>
<!-- End Input Group -->
<div class="mb-3">
<button type="submit" class="btn btn-sm btn-primary btn-block">Sign Up</button>
</div>
<div class="text-center mb-3">
<span class="divider divider-xs divider-text">OR</span>
</div>
<a class="btn btn-sm btn-ghost-secondary btn-block mb-2" href="#">
<span class="d-flex justify-content-center align-items-center">
<img class="mr-2" src="../../assets/img/160x160/img17.png" alt="Image Description" width="14" height="14">
Sign Up with Google
</span>
</a>
<div class="text-center">
<span class="small text-muted">Already have an account?</span>
<a class="js-animation-link small font-weight-bold" href="javascript:;"
data-hs-show-animation-options='{
"targetSelector": "#login",
"groupName": "idForm",
"animationType": "css-animation",
"animationIn": "slideInUp",
"duration": 400
}'>Sign In
</a>
</div>
</div>
<!-- End Signup -->
<!-- Forgot Password -->
<div id="forgotPassword" style="display: none; opacity: 0;">
<!-- Title -->
<div class="text-center mb-7">
<h3 class="mb-0">Recover password</h3>
<p>Instructions will be sent to you.</p>
</div>
<!-- End Title -->
<!-- Input Group -->
<div class="js-form-message">
<label class="sr-only" for="recoverEmail">Your email</label>
<div class="input-group input-group-sm mb-2">
<input type="email" class="form-control" name="email" id="recoverEmail" placeholder="Your email" aria-label="Your email" required
data-msg="Please enter a valid email address.">
</div>
</div>
<!-- End Input Group -->
<div class="mb-3">
<button type="submit" class="btn btn-sm btn-primary btn-block">Recover Password</button>
</div>
<div class="text-center mb-4">
<span class="small text-muted">Remember your password?</span>
<a class="js-animation-link small font-weight-bold" href="javascript:;"
data-hs-show-animation-options='{
"targetSelector": "#login",
"groupName": "idForm",
"animationType": "css-animation",
"animationIn": "slideInUp",
"duration": 400
}'>Login
</a>
</div>
</div>
<!-- End Forgot Password -->
</form>
</div>
</div>
<!-- End Content -->
</div>
<!-- Footer -->
<footer class="sidebar-footer border-top py-2 px-7">
<ul class="nav nav-sm">
<li class="nav-item">
<a class="nav-link pl-0" href="#">Privacy</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Terms</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-info-circle la-lg"></i>
</a>
</li>
</ul>
</footer>
<!-- End Footer -->
</div>
</div>
</aside>
<!-- End Account Sidebar Navigation -->
<!-- ========== END SECONDARY CONTENTS ========== -->
<link rel="stylesheet" href="../../assets/vendor/font-awesome/css/all.min.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>
<script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="../../assets/vendor/hs-show-animation/dist/hs-show-animation.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/hs.validation.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();
// initialization of form validation
$('.js-validate').each(function() {
$.HSCore.components.HSValidation.init($(this), {
rules: {
confirmPassword: {
equalTo: '#signupPassword'
}
}
});
});
// initialization of show animations
$('.js-animation-link').each(function () {
var showAnimation = new HSShowAnimation($(this)).init();
});
});
</script>