Starter
Header Layouts
Header default: Account modal window - Signin
<!-- ========== HEADER ========== -->
<header id="header" class="u-header">
<div class="u-header__section">
<!-- Topbar -->
<div class="container u-header__hide-content pt-2">
<div class="d-flex align-items-center">
<!-- Language -->
<div class="position-relative">
<a id="languageDropdownInvoker" class="dropdown-nav-link dropdown-toggle d-flex align-items-center" href="javascript:;" role="button"
aria-controls="languageDropdown"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="hover"
data-unfold-target="#languageDropdown"
data-unfold-type="css-animation"
data-unfold-duration="300"
data-unfold-delay="300"
data-unfold-hide-on-scroll="true"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">
<img class="dropdown-item-icon" 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="dropdown-menu dropdown-unfold" aria-labelledby="languageDropdownInvoker">
<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="d-inline-block d-sm-none position-relative mr-2">
<a id="jumpToDropdownInvoker" class="dropdown-nav-link dropdown-toggle d-flex align-items-center" href="javascript:;" role="button"
aria-controls="jumpToDropdown"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="hover"
data-unfold-target="#jumpToDropdown"
data-unfold-type="css-animation"
data-unfold-duration="300"
data-unfold-delay="300"
data-unfold-hide-on-scroll="true"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">
Jump to
</a>
<div id="jumpToDropdown" class="dropdown-menu dropdown-unfold" aria-labelledby="jumpToDropdownInvoker">
<a class="dropdown-item" href="../pages/help.html">Help</a>
<a class="dropdown-item" href="../pages/contacts-agency.html">Contacts</a>
</div>
</div>
<!-- End Jump To -->
<!-- Links -->
<div class="d-none d-sm-inline-block ml-sm-auto">
<ul class="list-inline mb-0">
<li class="list-inline-item mr-0">
<a class="u-header__navbar-link" href="../pages/help.html">Help</a>
</li>
<li class="list-inline-item mr-0">
<a class="u-header__navbar-link" href="../pages/contacts-agency.html">Contacts</a>
</li>
</ul>
</div>
<!-- End Links -->
</div>
<ul class="list-inline ml-2 mb-0">
<!-- Search -->
<li class="list-inline-item">
<a class="btn btn-xs btn-icon btn-text-secondary" href="javascript:;">
<span class="fas fa-search btn-icon__inner"></span>
</a>
</li>
<!-- End Search -->
<li class="list-inline-item position-relative">
<a class="btn btn-xs btn-icon btn-text-secondary" href="javascript:;">
<span class="fas fa-shopping-cart btn-icon__inner"></span>
</a>
</li>
<!-- Account Login -->
<li class="list-inline-item">
<!-- Account Modal Open Button -->
<a class="btn btn-xs btn-icon btn-text-secondary" href="#loginModal"
data-modal-target="#loginModal"
data-overlay-color="#111722">
<span class="fas fa-user-circle btn-icon__inner font-size-1"></span>
</a>
<!-- End Account Modal Open Button -->
</li>
<!-- End Account Login -->
</ul>
</div>
</div>
<!-- End Topbar -->
<div id="logoAndNav" class="container">
<!-- Nav -->
<nav class="js-mega-menu navbar navbar-expand-md u-header__navbar u-header__navbar--no-space">
<!-- Logo -->
<a class="navbar-brand u-header__navbar-brand u-header__navbar-brand-center" href="index.html" aria-label="Front">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="46px" height="46px" viewBox="0 0 46 46" xml:space="preserve" style="margin-bottom: 0;">
<path fill="#3F7DE0" opacity=".65" d="M23,41L23,41c-9.9,0-18-8-18-18v0c0-9.9,8-18,18-18h11.3C38,5,41,8,41,11.7V23C41,32.9,32.9,41,23,41z"/>
<path class="fill-info" opacity=".5" d="M28,35.9L28,35.9c-9.9,0-18-8-18-18v0c0-9.9,8-18,18-18l11.3,0C43,0,46,3,46,6.6V18C46,27.9,38,35.9,28,35.9z"/>
<path class="fill-primary" opacity=".7" d="M18,46L18,46C8,46,0,38,0,28v0c0-9.9,8-18,18-18h11.3c3.7,0,6.6,3,6.6,6.6V28C35.9,38,27.9,46,18,46z"/>
<path class="fill-white" d="M17.4,34V18.3h10.2v2.9h-6.4v3.4h4.8v2.9h-4.8V34H17.4z"/>
</svg>
<span class="u-header__navbar-brand-text">Front</span>
</a>
<!-- End Logo -->
<!-- Responsive Toggle Button -->
<button type="button" class="navbar-toggler btn u-hamburger"
aria-label="Toggle navigation"
aria-expanded="false"
aria-controls="navBar"
data-toggle="collapse"
data-target="#navBar">
<span id="hamburgerTrigger" class="u-hamburger__box">
<span class="u-hamburger__inner"></span>
</span>
</button>
<!-- End Responsive Toggle Button -->
<!-- Navigation -->
<div id="navBar" class="collapse navbar-collapse u-header__navbar-collapse">
<ul class="navbar-nav u-header__navbar-nav">
<!-- Home -->
<li class="nav-item hs-has-mega-menu u-header__nav-item"
data-event="hover"
data-animation-in="slideInUp"
data-animation-out="fadeOut"
data-position="left">
<a id="homeMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Home</a>
<!-- Home - Mega Menu -->
<div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="homeMegaMenu">
<div class="row no-gutters">
<div class="col-lg-6">
<!-- Banner Image -->
<div class="u-header__banner" style="background-image: url(../../assets/img/750x750/img1.jpg);">
<div class="u-header__banner-content">
<div class="mb-4">
<span class="u-header__banner-title">Branding Works</span>
<p class="u-header__banner-text">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 <span class="fas fa-angle-right ml-2"></span></a>
</div>
</div>
<!-- End Banner Image -->
</div>
<div class="col-lg-6">
<div class="row u-header__mega-menu-wrapper">
<div class="col-sm-6 mb-3 mb-sm-0">
<span class="u-header__sub-menu-title">Classic</span>
<ul class="u-header__sub-menu-nav-group mb-3">
<li><a class="nav-link u-header__sub-menu-nav-link" href="index.html">Classic Agency</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="classic-business.html">Classic Business</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="classic-marketing.html">Classic Marketing</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="classic-consulting.html">Classic Consulting</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="classic-start-up.html">Classic Start-up <span class="badge badge-success badge-primary ml-1">New</span></a></li>
</ul>
<span class="u-header__sub-menu-title">Corporate</span>
<ul class="u-header__sub-menu-nav-group">
<li><a class="nav-link u-header__sub-menu-nav-link" href="corporate-agency.html">Corporate Agency</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="corporate-start-up.html">Corporate Start-Up</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="corporate-business.html">Corporate Business</a></li>
</ul>
</div>
<div class="col-sm-6">
<span class="u-header__sub-menu-title">Onepages</span>
<ul class="u-header__sub-menu-nav-group mb-3">
<li><a class="nav-link u-header__sub-menu-nav-link" href="onepage-creative.html">Onepage Creative <span class="badge badge-success badge-primary ml-1">New</span></a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="onepage-saas.html">Onepage SaaS <span class="badge badge-success badge-primary ml-1">New</span></a></li>
</ul>
<span class="u-header__sub-menu-title">Blog</span>
<ul class="u-header__sub-menu-nav-group mb-3">
<li><a class="nav-link u-header__sub-menu-nav-link" href="blog-agency.html">Blog Agency</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="blog-start-up.html">Blog Start-Up</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="blog-business.html">Blog Business</a></li>
</ul>
<span class="u-header__sub-menu-title">Portfolio</span>
<ul class="u-header__sub-menu-nav-group">
<li><a class="nav-link u-header__sub-menu-nav-link" href="portfolio-agency.html">Portfolio Agency</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="portfolio-profile.html">Portfolio Profile</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- End Home - Mega Menu -->
</li>
<!-- End Home -->
<!-- Pages -->
<li class="nav-item hs-has-sub-menu u-header__nav-item"
data-event="hover"
data-animation-in="slideInUp"
data-animation-out="fadeOut">
<a id="pagesMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-labelledby="pagesSubMenu">Pages</a>
<!-- Pages - Submenu -->
<ul id="pagesSubMenu" class="hs-sub-menu u-header__sub-menu" aria-labelledby="pagesMegaMenu" style="min-width: 230px;">
<!-- Account -->
<li class="hs-has-sub-menu">
<a id="navLinkPagesAccount" class="nav-link u-header__sub-menu-nav-link u-header__sub-menu-nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuPagesAccount">Account</a>
<ul id="navSubmenuPagesAccount" class="hs-sub-menu u-header__sub-menu" aria-labelledby="navLinkPagesAccount" style="min-width: 230px;">
<li><a class="nav-link u-header__sub-menu-nav-link" href="../account/dashboard.html">Dashboard</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../account/profile.html">Profile</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../account/my-tasks.html">My tasks</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../account/projects.html">Projects</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../account/members.html">Members</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../account/edit-profile.html">Edit profile</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../account/change-password.html">Change password</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../account/notifications.html">Notifications</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../account/activity.html">Activity</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../account/payment-methods.html">Payment methods</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../account/invite-friends.html">Invite friends</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../account/plans.html">Plans</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../account/api-token.html">API Token</a></li>
</ul>
</li>
<!-- End Account -->
<!-- Portfolio -->
<li class="hs-has-sub-menu">
<a id="navLinkPagesPortfolio" class="nav-link u-header__sub-menu-nav-link u-header__sub-menu-nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuPagesPortfolio">Portfolio</a>
<ul id="navSubmenuPagesPortfolio" class="hs-sub-menu u-header__sub-menu" aria-labelledby="navLinkPagesPortfolio" style="min-width: 230px;">
<li><a class="nav-link u-header__sub-menu-nav-link" href="../portfolio/boxed-classic.html">All layouts</a></li>
<li class="dropdown-divider"></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../portfolio/case-studies-simple.html">Case Studies Simple</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../portfolio/case-studies-modern.html">Case Studies Modern</a></li>
<li class="dropdown-divider"></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../portfolio/single-page-simple.html">Single Page Simple</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../portfolio/single-page-grid.html">Single Page Grid</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../portfolio/single-page-masonry.html">Single Page Masonry</a></li>
</ul>
</li>
<!-- End Portfolio -->
<!-- About -->
<li class="hs-has-sub-menu">
<a id="navLinkPagesAbout" class="nav-link u-header__sub-menu-nav-link u-header__sub-menu-nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuPagesAbout">About</a>
<ul id="navSubmenuPagesAbout" class="hs-sub-menu u-header__sub-menu" aria-labelledby="navLinkPagesAbout" style="min-width: 230px;">
<li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/about-agency.html">About Agency</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/about-start-up.html">About Start-Up</a></li>
</ul>
</li>
<!-- About -->
<!-- Services -->
<li class="hs-has-sub-menu">
<a id="navLinkPagesServices" class="nav-link u-header__sub-menu-nav-link u-header__sub-menu-nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuPagesServices">Services</a>
<ul id="navSubmenuPagesServices" class="hs-sub-menu u-header__sub-menu" aria-labelledby="navLinkPagesServices" style="min-width: 230px;">
<li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/services-agency.html">Services Agency</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/services-start-up.html">Services Start-Up</a></li>
</ul>
</li>
<!-- Services -->
<!-- Careers -->
<li class="hs-has-sub-menu">
<a id="navLinkPagesCareers" class="nav-link u-header__sub-menu-nav-link u-header__sub-menu-nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuPagesCareers">Careers</a>
<ul id="navSubmenuPagesCareers" class="hs-sub-menu u-header__sub-menu" aria-labelledby="navLinkPagesCareers" style="min-width: 230px;">
<li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/careers.html">Careers</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/careers-single.html">Careers Single</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/hire-us.html">Hire Us</a></li>
</ul>
</li>
<!-- Careers -->
<!-- Login -->
<li class="hs-has-sub-menu">
<a id="navLinkPagesLogin" class="nav-link u-header__sub-menu-nav-link u-header__sub-menu-nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuPagesLogin">Login & Signup</a>
<ul id="navSubmenuPagesLogin" class="hs-sub-menu u-header__sub-menu" aria-labelledby="navLinkPagesLogin" style="min-width: 230px;">
<li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/login.html">Login</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/signup.html">Signup</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/recover-account.html">Recover Account</a></li>
<li class="dropdown-divider"></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/login-simple.html">Login Simple</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/signup-simple.html">Signup Simple</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/recover-account-simple.html">Recover Account Simple</a></li>
</ul>
</li>
<!-- Signup -->
<!-- Contacts -->
<li class="hs-has-sub-menu">
<a id="navLinkContactsServices" class="nav-link u-header__sub-menu-nav-link u-header__sub-menu-nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuContactsServices">Contacts</a>
<ul id="navSubmenuContactsServices" class="hs-sub-menu u-header__sub-menu" aria-labelledby="navLinkContactsServices" style="min-width: 230px;">
<li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/contacts-agency.html">Contacts Agency</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/contacts-start-up.html">Contacts Start-Up</a></li>
</ul>
</li>
<!-- Contacts -->
<!-- Utilities -->
<li class="hs-has-sub-menu">
<a id="navLinkPagesUtilities" class="nav-link u-header__sub-menu-nav-link u-header__sub-menu-nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuPagesUtilities">Utilities</a>
<ul id="navSubmenuPagesUtilities" class="hs-sub-menu u-header__sub-menu" aria-labelledby="navLinkPagesUtilities" style="min-width: 230px;">
<li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/help.html">Help</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/pricing.html">Pricing</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/terms.html">Terms & Conditions</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/privacy.html">Privacy & Policy</a></li>
</ul>
</li>
<!-- Utilities -->
<!-- Specialty -->
<li class="hs-has-sub-menu">
<a id="navLinkPagesSpecialty" class="nav-link u-header__sub-menu-nav-link u-header__sub-menu-nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuPagesSpecialty">Specialty</a>
<ul id="navSubmenuPagesSpecialty" class="hs-sub-menu u-header__sub-menu" aria-labelledby="navLinkPagesSpecialty" style="min-width: 230px;">
<li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/cover-page.html">Cover Page</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/coming-soon.html">Coming Soon</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/maintenance-mode.html">Maintenance Mode</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/error-404.html">Error 404</a></li>
</ul>
</li>
<!-- Specialty -->
</ul>
<!-- End Pages - Submenu -->
</li>
<!-- End Pages -->
<!-- Blog -->
<li class="nav-item hs-has-sub-menu u-header__nav-item"
data-event="hover"
data-animation-in="slideInUp"
data-animation-out="fadeOut">
<a id="blogMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-labelledby="blogSubMenu">Blog</a>
<!-- Blog - Submenu -->
<ul id="blogSubMenu" class="hs-sub-menu u-header__sub-menu" aria-labelledby="blogMegaMenu" style="min-width: 230px;">
<!-- Classic -->
<li class="hs-has-sub-menu">
<a id="navLinkBlogClassic" class="nav-link u-header__sub-menu-nav-link u-header__sub-menu-nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuBlogClassic">Classic</a>
<ul id="navSubmenuBlogClassic" class="hs-sub-menu u-header__sub-menu" aria-labelledby="navLinkBlogClassic" style="min-width: 230px;">
<li><a class="nav-link u-header__sub-menu-nav-link" href="../blog/classic-left-sidebar.html">Left Sidebar</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../blog/classic-right-sidebar.html">Right Sidebar</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../blog/classic-full-width.html">Full Width</a></li>
</ul>
</li>
<!-- Classic -->
<!-- Grid -->
<li class="hs-has-sub-menu">
<a id="navLinkBlogGrid" class="nav-link u-header__sub-menu-nav-link u-header__sub-menu-nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuBlogGrid">Grid</a>
<ul id="navSubmenuBlogGrid" class="hs-sub-menu u-header__sub-menu" aria-labelledby="navLinkBlogGrid" style="min-width: 230px;">
<li><a class="nav-link u-header__sub-menu-nav-link" href="../blog/grid-left-sidebar.html">Left Sidebar</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../blog/grid-right-sidebar.html">Right Sidebar</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../blog/grid-full-width.html">Full Width</a></li>
</ul>
</li>
<!-- Grid -->
<!-- List -->
<li class="hs-has-sub-menu">
<a id="navLinkBlogList" class="nav-link u-header__sub-menu-nav-link u-header__sub-menu-nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuBlogList">List</a>
<ul id="navSubmenuBlogList" class="hs-sub-menu u-header__sub-menu" aria-labelledby="navLinkBlogList" style="min-width: 230px;">
<li><a class="nav-link u-header__sub-menu-nav-link" href="../blog/list-left-sidebar.html">Left Sidebar</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../blog/list-right-sidebar.html">Right Sidebar</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../blog/list-full-width.html">Full Width</a></li>
</ul>
</li>
<!-- List -->
<!-- Modern -->
<li class="hs-has-sub-menu">
<a id="navLinkBlogCard" class="nav-link u-header__sub-menu-nav-link u-header__sub-menu-nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuBlogCard">Modern</a>
<ul id="navSubmenuBlogCard" class="hs-sub-menu u-header__sub-menu" aria-labelledby="navLinkBlogCard" style="min-width: 230px;">
<li><a class="nav-link u-header__sub-menu-nav-link" href="../blog/modern-left-sidebar.html">Left Sidebar</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../blog/modern-right-sidebar.html">Right Sidebar</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../blog/modern-full-width.html">Full Width</a></li>
</ul>
</li>
<!-- Grid Modern -->
<!-- Masonry -->
<li class="hs-has-sub-menu">
<a id="navLinkBlogGridMinimal" class="nav-link u-header__sub-menu-nav-link u-header__sub-menu-nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuBlogGridMinimal">Masonry</a>
<ul id="navSubmenuBlogGridMinimal" class="hs-sub-menu u-header__sub-menu" aria-labelledby="navLinkBlogGridMinimal" style="min-width: 230px;">
<li><a class="nav-link u-header__sub-menu-nav-link" href="../blog/masonry-left-sidebar.html">Left Sidebar</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../blog/masonry-right-sidebar.html">Right Sidebar</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../blog/masonry-full-width.html">Full Width</a></li>
</ul>
</li>
<!-- Masonry -->
<!-- Single Article -->
<li class="hs-has-sub-menu">
<a id="navLinkBlogGridMasonry" class="nav-link u-header__sub-menu-nav-link u-header__sub-menu-nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuBlogGridMasonry">Single Article</a>
<ul id="navSubmenuBlogGridMasonry" class="hs-sub-menu u-header__sub-menu" aria-labelledby="navLinkBlogGridMasonry" style="min-width: 230px;">
<li><a class="nav-link u-header__sub-menu-nav-link" href="../blog/single-article-classic.html">Classic</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../blog/single-article-simple.html">Simple</a></li>
</ul>
</li>
<!-- Single Article -->
</ul>
<!-- End Submenu -->
</li>
<!-- End Blog -->
<!-- Shop -->
<li class="nav-item hs-has-mega-menu u-header__nav-item"
data-event="hover"
data-animation-in="slideInUp"
data-animation-out="fadeOut"
data-max-width="440px"
data-position="right">
<a id="shopMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Shop</a>
<!-- Shop - Mega Menu -->
<div class="hs-mega-menu u-header__sub-menu u-header__mega-menu-position-right-fix--md" aria-labelledby="shopMegaMenu">
<div class="u-header__mega-menu-wrapper">
<span class="u-header__sub-menu-title">Shop Elements</span>
<div class="row">
<div class="col-sm-6">
<ul class="u-header__sub-menu-nav-group">
<li><a class="nav-link u-header__sub-menu-nav-link" href="../shop/classic.html">Classic</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../shop/masonry.html">Masonry</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../shop/single-product.html">Single Product</a></li>
</ul>
</div>
<div class="col-sm-6">
<ul class="u-header__sub-menu-nav-group">
<li><a class="nav-link u-header__sub-menu-nav-link" href="../shop/cart.html">Cart</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../shop/checkout.html">Checkout</a></li>
</ul>
</div>
</div>
</div>
<!-- Mega Menu Banner -->
<div class="u-header__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="u-header__product-banner-content">
<div class="mb-4">
<span class="u-header__product-banner-title">Win T-shirt</span>
<p class="u-header__product-banner-text">Win one of our Front brand T-shirts.</p>
</div>
<a class="btn btn-sm btn-soft-primary transition-3d-hover" href="../shop/classic.html">Learn More <span class="fas fa-angle-right ml-2"></span></a>
</div>
</div>
</div>
<!-- End Mega Menu Banner -->
</div>
<!-- End Shop - Mega Menu -->
</li>
<!-- End Shop -->
<!-- Demos -->
<li class="nav-item hs-has-mega-menu u-header__nav-item"
data-event="hover"
data-animation-in="slideInUp"
data-animation-out="fadeOut"
data-max-width="600px"
data-position="right">
<a id="demosMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Demos</a>
<!-- Demos - Mega Menu -->
<div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="demosMegaMenu">
<div class="row no-gutters">
<div class="col-md-6">
<!-- Promo Item -->
<div class="u-header__promo-item">
<a class="u-header__promo-link" href="../house/index.html">
<div class="media align-items-center">
<img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-13.svg" alt="SVG">
<div class="media-body">
<span class="u-header__promo-title">House</span>
<small class="u-header__promo-text">Real estate demo.</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="u-header__promo-item">
<a class="u-header__promo-link" href="../job/index.html">
<div class="media align-items-center">
<img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-19.svg" alt="SVG">
<div class="media-body">
<span class="u-header__promo-title">Job</span>
<small class="u-header__promo-text">Job vacancy demo.</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="u-header__promo-item">
<a class="u-header__promo-link" href="../crypto/index.html">
<div class="media align-items-center">
<img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-5.svg" alt="SVG">
<div class="media-body">
<span class="u-header__promo-title">Crypto landing</span>
<small class="u-header__promo-text">Cryptocurrency demo.</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
</div>
<!-- Promo -->
<div class="col-md-6 u-header__promo">
<a class="d-block u-header__promo-inner" href="#">
<div class="position-relative">
<img class="img-fluid rounded mb-3" src="../../assets/img/380x227/img6.jpg" alt="Image Description">
<span class="badge badge-success badge-pill badge-pos shadow-sm mt-3">New</span>
</div>
<span class="text-secondary 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="nav-item hs-has-mega-menu u-header__nav-item"
data-event="hover"
data-animation-in="slideInUp"
data-animation-out="fadeOut"
data-max-width="260px"
data-position="right">
<a id="docsMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Docs</a>
<!-- Docs - Submenu -->
<div class="hs-mega-menu u-header__sub-menu" aria-labelledby="docsMegaMenu" style="min-width: 330px;">
<!-- Promo Item -->
<div class="u-header__promo-item">
<a class="u-header__promo-link" href="../../documentation/index.html">
<div class="media align-items-center">
<img class="u-header__promo-icon" src="../../assets/svg/icons/icon-2.svg" alt="SVG">
<div class="media-body">
<span class="u-header__promo-title">
Documentation
<span class="badge badge-primary badge-pill ml-1">v2.0</span>
</span>
<small class="u-header__promo-text">Development guides</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="u-header__promo-item">
<a class="u-header__promo-link" href="../index.html">
<div class="media align-items-center">
<img class="u-header__promo-icon" src="../../assets/svg/icons/icon-1.svg" alt="SVG">
<div class="media-body">
<span class="u-header__promo-title">Get started</span>
<small class="u-header__promo-text">Components and snippets</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
<div class="u-header__promo-footer">
<!-- List -->
<div class="row no-gutters">
<div class="col-6">
<div class="u-header__promo-footer-item">
<small class="text-muted d-block">Check what's new</small>
<a class="small" href="../../documentation/getting-started/changelog.html">
Changelog
</a>
</div>
</div>
<div class="col-6 u-header__promo-footer-ver-divider">
<div class="u-header__promo-footer-item">
<small class="text-muted d-block">Have a question?</small>
<a class="small" href="http://htmlstream.com/contact-us">
Contact us
</a>
</div>
</div>
</div>
<!-- End List -->
</div>
</div>
<!-- End Docs - Submenu -->
</li>
<!-- End Docs -->
<!-- Button -->
<li class="nav-item u-header__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>
<!-- End Navigation -->
</nav>
<!-- End Nav -->
</div>
</div>
</header>
<!-- ========== END HEADER ========== -->
<!-- Account Modal Window -->
<div id="loginModal" class="js-login-window u-modal-window" style="width: 400px;">
<div class="card">
<form class="js-validate">
<!-- Login -->
<div id="login" data-target-group="idForm">
<!-- Header -->
<header class="card-header bg-light py-3 px-5">
<div class="d-flex justify-content-between align-items-center">
<h3 class="h6 mb-0">Welcome Back!</h3>
<button type="button" class="close" aria-label="Close" onclick="Custombox.modal.close();">
<span aria-hidden="true">×</span>
</button>
</div>
</header>
<!-- End Header -->
<div class="card-body p-5">
<!-- Form Group -->
<div class="form-group">
<div class="js-form-message js-focus-state">
<label class="sr-only" for="signinSrEmail">Email</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="signinEmail">
<span class="fas fa-user"></span>
</span>
</div>
<input type="email" class="form-control" name="email" id="signinSrEmail" placeholder="Email" aria-label="Email" aria-describedby="signinEmail" required
data-msg="Please enter a valid email address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
<!-- End Form Group -->
<!-- Form Group -->
<div class="form-group">
<div class="js-form-message js-focus-state">
<label class="sr-only" for="signinSrPassword">Password</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="signinPassword">
<span class="fas fa-lock"></span>
</span>
</div>
<input type="password" class="form-control" name="password" id="signinSrPassword" placeholder="Password" aria-label="Password" aria-describedby="signinPassword" required
data-msg="Your password is invalid. Please try again."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
<!-- End Form Group -->
<div class="d-flex justify-content-end mb-4">
<a class="js-animation-link small link-muted" href="javascript:;"
data-target="#forgotPassword"
data-link-group="idForm"
data-animation-in="fadeIn">Forgot Password?</a>
</div>
<div class="mb-2">
<button type="submit" class="btn btn-block btn-primary transition-3d-hover">Login</button>
</div>
<div class="text-center mb-4">
<span class="small text-muted">Do not have an account?</span>
<a class="js-animation-link small" href="javascript:;"
data-target="#signup"
data-link-group="idForm"
data-animation-in="fadeIn">Signup
</a>
</div>
<div class="text-center">
<span class="u-divider u-divider--xs u-divider--text mb-4">OR</span>
</div>
<!-- Login Buttons -->
<div class="d-flex">
<a class="btn btn-block btn-sm btn-soft-facebook transition-3d-hover mr-1" href="#">
<span class="fab fa-facebook-square mr-1"></span>
Facebook
</a>
<a class="btn btn-block btn-sm btn-soft-google transition-3d-hover ml-1 mt-0" href="#">
<span class="fab fa-google mr-1"></span>
Google
</a>
</div>
<!-- End Login Buttons -->
</div>
</div>
<!-- Signup -->
<div id="signup" style="display: none; opacity: 0;" data-target-group="idForm">
<!-- Header -->
<header class="card-header bg-light py-3 px-5">
<div class="d-flex justify-content-between align-items-center">
<h3 class="h6 mb-0">Welcome to Front.</h3>
<button type="button" class="close" aria-label="Close" onclick="Custombox.modal.close();">
<span aria-hidden="true">×</span>
</button>
</div>
</header>
<!-- End Header -->
<div class="card-body p-5">
<!-- Form Group -->
<div class="form-group">
<div class="js-form-message js-focus-state">
<label class="sr-only" for="signupSrEmail">Email</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="signupEmail">
<span class="fas fa-user"></span>
</span>
</div>
<input type="email" class="form-control" name="email" id="signupSrEmail" placeholder="Email" aria-label="Email" aria-describedby="signupEmail" required
data-msg="Please enter a valid email address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
<!-- End Input -->
<!-- Form Group -->
<div class="form-group">
<div class="js-form-message js-focus-state">
<label class="sr-only" for="signupSrPassword">Password</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="signupPassword">
<span class="fas fa-lock"></span>
</span>
</div>
<input type="password" class="form-control" name="password" id="signupSrPassword" placeholder="Password" aria-label="Password" aria-describedby="signupPassword" required
data-msg="Your password is invalid. Please try again."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
<!-- End Input -->
<!-- Form Group -->
<div class="form-group">
<div class="js-form-message js-focus-state">
<label class="sr-only" for="signupSrConfirmPassword">Confirm Password</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="signupConfirmPassword">
<span class="fas fa-key"></span>
</span>
</div>
<input type="password" class="form-control" name="confirmPassword" id="signupSrConfirmPassword" placeholder="Confirm Password" aria-label="Confirm Password" aria-describedby="signupConfirmPassword" required
data-msg="Password does not match the confirm password."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
<!-- End Input -->
<div class="mb-2">
<button type="submit" class="btn btn-block btn-primary transition-3d-hover">Get Started</button>
</div>
<div class="text-center mb-4">
<span class="small text-muted">Already have an account?</span>
<a class="js-animation-link small" href="javascript:;"
data-target="#login"
data-link-group="idForm"
data-animation-in="fadeIn">Login
</a>
</div>
<div class="text-center">
<span class="u-divider u-divider--xs u-divider--text mb-4">OR</span>
</div>
<!-- Login Buttons -->
<div class="d-flex">
<a class="btn btn-block btn-sm btn-soft-facebook transition-3d-hover mr-1" href="#">
<span class="fab fa-facebook-square mr-1"></span>
Facebook
</a>
<a class="btn btn-block btn-sm btn-soft-google transition-3d-hover ml-1 mt-0" href="#">
<span class="fab fa-google mr-1"></span>
Google
</a>
</div>
<!-- End Login Buttons -->
</div>
</div>
<!-- End Signup -->
<!-- Forgot Password -->
<div id="forgotPassword" style="display: none; opacity: 0;" data-target-group="idForm">
<!-- Header -->
<header class="card-header bg-light py-3 px-5">
<div class="d-flex justify-content-between align-items-center">
<h3 class="h6 mb-0">Recover Password.</h3>
<button type="button" class="close" aria-label="Close" onclick="Custombox.modal.close();">
<span aria-hidden="true">×</span>
</button>
</div>
</header>
<!-- End Header -->
<div class="card-body p-5">
<!-- Form Group -->
<div class="form-group">
<div class="js-form-message js-focus-state">
<label class="sr-only" for="recoverSrEmail">Your email</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="recoverEmail">
<span class="fas fa-user"></span>
</span>
</div>
<input type="email" class="form-control" name="email" id="recoverSrEmail" placeholder="Your email" aria-label="Your email" aria-describedby="recoverEmail" required
data-msg="Please enter a valid email address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
<!-- End Form Group -->
<div class="mb-2">
<button type="submit" class="btn btn-block btn-primary transition-3d-hover">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" href="javascript:;"
data-target="#login"
data-link-group="idForm"
data-animation-in="fadeIn">Login
</a>
</div>
</div>
</div>
<!-- End Forgot Password -->
</form>
</div>
</div>
<!-- End Account Modal Window -->
<link rel="stylesheet" href="../../assets/vendor/font-awesome/css/fontawesome-all.min.css">
<link rel="stylesheet" href="../../assets/vendor/animate.css/animate.min.css">
<link rel="stylesheet" href="../../assets/vendor/hs-megamenu/src/hs.megamenu.css">
<link rel="stylesheet" href="../../assets/vendor/custombox/dist/custombox.min.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/hs-megamenu/src/hs.megamenu.js"></script>
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<script src="../../assets/vendor/appear.js"></script>
<script src="../../assets/vendor/custombox/dist/custombox.min.js"></script>
<script src="../../assets/vendor/custombox/dist/custombox.legacy.min.js"></script>
<script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.header.js"></script>
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<script src="../../assets/js/components/hs.unfold.js"></script>
<script src="../../assets/js/components/hs.modal-window.js"></script>
<script src="../../assets/js/components/hs.focus-state.js"></script>
<script src="../../assets/js/components/hs.validation.js"></script>
<script src="../../assets/js/components/hs.show-animation.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of HSMegaMenu component
$('.js-mega-menu').HSMegaMenu({
event: 'hover',
pageContainer: $('.container'),
breakpoint: 767.98,
hideTimeOut: 0
});
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
$(document).on('ready', function () {
// initialization of header
$.HSCore.components.HSHeader.init($('#header'));
// initialization of unfold component
$.HSCore.components.HSUnfold.init($('[data-unfold-target]'));
// initialization of autonomous popups
$.HSCore.components.HSModalWindow.init('[data-modal-target]', '.js-login-window', {
autonomous: true
});
// initialization of forms
$.HSCore.components.HSFocusState.init();
// initialization of form validation
$.HSCore.components.HSValidation.init('.js-validate', {
rules: {
confirmPassword: {
equalTo: '#signupPassword'
}
}
});
// initialization of show animations
$.HSCore.components.HSShowAnimation.init('.js-animation-link');
});
</script>