<!-- ========== HEADER ========== -->
<header id="header" class="navbar navbar-expand-lg navbar-end navbar-sticky-top navbar-show-hide navbar-dark"
data-hs-header-options='{
"fixMoment": 500,
"fixEffect": "slide"
}'>
<div class="container">
<nav class="js-mega-menu navbar-nav-wrap">
<!-- Default Logo -->
<a class="navbar-brand" href="#" aria-label="Space">
<img class="navbar-brand-logo" src="./assets/svg/logos/logo.svg" alt="Image Description">
</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">
<div class="navbar-sticky-top-scroller">
<ul class="navbar-nav">
<!-- Landings -->
<li class="hs-has-mega-menu nav-item"
data-hs-mega-menu-item-options='{
"desktop": {
"maxWidth": "30rem"
}
}'>
<a id="landingsMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle" aria-current="page" href="#" role="button" aria-expanded="false">Landings</a>
<!-- Mega Menu -->
<div class="hs-mega-menu hs-position-right-fix dropdown-menu" aria-labelledby="landingsMegaMenu" style="min-width: 30rem;">
<!-- Main Content -->
<div class="navbar-dropdown-menu-inner">
<div class="row">
<div class="col-sm mb-3 mb-sm-0">
<span class="dropdown-header">Classic</span>
<a class="dropdown-item" href="#">Corporate</a>
<a class="dropdown-item" href="#">Agency</a>
<a class="dropdown-item" href="#">Consulting</a>
<a class="dropdown-item" href="#">Services</a>
<a class="dropdown-item" href="#">Business</a>
</div>
<div class="col-sm">
<span class="dropdown-header">Apps</span>
<a class="dropdown-item" href="#">Growth</a>
<a class="dropdown-item" href="#">SaaS</a>
<a class="dropdown-item" href="#">Wallet</a>
<a class="dropdown-item" href="#">API</a>
</div>
</div>
<!-- End Row -->
</div>
<!-- End Main Content -->
</div>
<!-- End Mega Menu -->
</li>
<!-- End Landings -->
<!-- Pages -->
<li class="hs-has-mega-menu nav-item">
<a id="pagesMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle" href="#" role="button" aria-expanded="false">Pages</a>
<!-- Mega Menu -->
<div class="hs-mega-menu hs-position-right dropdown-menu w-100" aria-labelledby="pagesMegaMenu" style="min-width: 42rem;">
<!-- Main Content -->
<div class="navbar-dropdown-menu-inner">
<div class="row">
<div class="col-sm-6 col-md">
<span class="dropdown-header">Company</span>
<a class="dropdown-item" href="#">About</a>
<a class="dropdown-item" href="#">Services</a>
<a class="dropdown-item" href="#">Customer Stories</a>
<a class="dropdown-item" href="#">Single Customer Story</a>
<a class="dropdown-item" href="#">Help Center</a>
<a class="dropdown-item" href="#">Help Center Categories</a>
<a class="dropdown-item" href="#">Single Help Center</a>
</div>
<div class="col-sm-6 col-md mb-3 mb-md-0">
<span class="dropdown-header invisible">Company</span>
<a class="dropdown-item" href="#">Careers</a>
<a class="dropdown-item" href="#">Careers Single</a>
<a class="dropdown-item" href="#">Hire Us</a>
<a class="dropdown-item" href="#">Contacts</a>
<a class="dropdown-item" href="#">Log In</a>
<a class="dropdown-item" href="#">Sign Up</a>
<a class="dropdown-item" href="#">Forgot Password</a>
</div>
<div class="col-sm-6 col-md mb-3 mb-md-0">
<span class="dropdown-header">Portfolio</span>
<a class="dropdown-item" href="#">Modern</a>
<a class="dropdown-item" href="#">Classic</a>
<a class="dropdown-item" href="#">Case Study</a>
</div>
<div class="col-sm-6 col-md">
<span class="dropdown-header">Specialty pages</span>
<a class="dropdown-item" href="#">Pricing</a>
<a class="dropdown-item" href="#">Coming Soon</a>
<a class="dropdown-item" href="#">Error 404</a>
<a class="dropdown-item" href="#">Terms & Conditions</a>
<a class="dropdown-item" href="#">Privacy & Policy</a>
</div>
</div>
<!-- End Row -->
</div>
<!-- End Main Content -->
</div>
<!-- End Mega Menu -->
</li>
<!-- End Pages -->
<!-- Blog -->
<li class="hs-has-sub-menu nav-item">
<a id="blogMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle" href="#" role="button" aria-expanded="false">Blog</a>
<!-- Mega Menu -->
<div class="hs-sub-menu dropdown-menu" aria-labelledby="blogMegaMenu" style="min-width: 12rem;">
<a class="dropdown-item" href="#">Classic</a>
<a class="dropdown-item" href="#">Author Profile</a>
<a class="dropdown-item" href="#">Single Article</a>
</div>
<!-- End Mega Menu -->
</li>
<!-- End Blog -->
<!-- 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" 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">
@@include("../../assets/vendor/duotone-icons/gen/gen005.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">v1.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">
@@include("../../assets/vendor/duotone-icons/cod/cod010.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 -->
<li class="nav-divider"></li>
<!-- Log in -->
<li class="nav-item">
<a class="js-animation-link btn btn-ghost-secondary btn-no-focus me-2 me-lg-0" href="javascript:;" role="button" data-bs-toggle="modal" data-bs-target="#signupModal"
data-hs-show-animation-options='{
"targetSelector": "#signupModalFormLogin",
"groupName": "idForm"
}'>Log in</a>
<a class="js-animation-link d-lg-none btn btn-primary" href="javascript:;" role="button" data-bs-toggle="modal" data-bs-target="#signupModal"
data-hs-show-animation-options='{
"targetSelector": "#signupModalFormSignup",
"groupName": "idForm"
}'>
<i class="bi-person-circle me-1"></i> Sign up
</a>
</li>
<!-- End Log in -->
<!-- Sign up -->
<li class="nav-item">
<a class="js-animation-link d-none d-lg-inline-block btn btn-primary" href="javascript:;" role="button" data-bs-toggle="modal" data-bs-target="#signupModal"
data-hs-show-animation-options='{
"targetSelector": "#signupModalFormSignup",
"groupName": "idForm"
}'>
<i class="bi-person-circle me-1"></i> Sign up
</a>
</li>
<!-- End Sign up -->
</ul>
</div>
</div>
<!-- End Collapse -->
</nav>
</div>
</header>
<!-- ========== END HEADER ========== -->
<!-- ========== SECONDARY CONTENTS ========== -->
<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 p-sm-5">
<!-- Log in -->
<div id="loginModalForm">
<!-- Heading -->
<div class="text-center mb-7">
<h4>Log in</h4>
<p>Don't have an account yet?
<a class="js-animation-link" href="javascript:;" role="button"
data-hs-show-animation-options='{
"targetSelector": "#signupModalForm",
"groupName": "idForm"
}'>Sign up here</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": "#loginWithEmailModalForm",
"groupName": "idForm"
}'>Log in with Email</a>
</div>
</div>
<!-- End Log in -->
<!-- Log in with Modal -->
<div id="loginWithEmailModalForm" style="display: none; opacity: 0;">
<!-- Heading -->
<div class="text-center mb-7">
<h4>Log in</h4>
<p>Don't have an account yet?
<a class="js-animation-link" href="javascript:;" role="button"
data-hs-show-animation-options='{
"targetSelector": "#signupModalForm",
"groupName": "idForm"
}'>Sign up here</a>
</p>
</div>
<!-- End Heading -->
<form class="js-validate needs-validation" novalidate>
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="loginModalFormEmail">Your email</label>
<input type="email" class="form-control form-control-lg" name="email" id="loginModalFormEmail" 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="loginModalFormPassword">Password</label>
<a class="js-animation-link form-label-link" href="javascript:;"
data-hs-show-animation-options='{
"targetSelector": "#forgotPasswordModalForm",
"groupName": "idForm"
}'>Forgot Password?</a>
</div>
<input type="password" class="form-control form-control-lg" name="password" id="loginModalFormPassword" 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 btn-lg">Log in</button>
</div>
</form>
</div>
<!-- End Log in with Modal -->
<!-- Sign up -->
<div id="signupModalForm" style="display: none; opacity: 0;">
<!-- Heading -->
<div class="text-center mb-7">
<h4>Sign up</h4>
<p>Already have an account?
<a class="js-animation-link" href="javascript:;" role="button"
data-hs-show-animation-options='{
"targetSelector": "#loginModalForm",
"groupName": "idForm"
}'>Log in here</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": "#signupWithEmailModalForm",
"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="signupWithEmailModalForm" style="display: none; opacity: 0;">
<!-- Heading -->
<div class="text-center mb-7">
<h4>Sign up</h4>
<p>Already have an account?
<a class="js-animation-link" href="javascript:;" role="button"
data-hs-show-animation-options='{
"targetSelector": "#loginModalForm",
"groupName": "idForm"
}'>Log in here</a>
</p>
</div>
<!-- End Heading -->
<form class="js-validate need-validate" novalidate>
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="signupModalFormEmail">Your email</label>
<input type="email" class="form-control form-control-lg" name="email" id="signupModalFormEmail" 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="signupModalFormPassword">Password</label>
<input type="password" class="form-control form-control-lg" name="password" id="signupModalFormPassword" 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">
<label class="form-label" for="signupModalFormConfirmPassword">Confirm password</label>
<input type="password" class="form-control form-control-lg" name="confirmPassword" id="signupModalFormConfirmPassword" placeholder="8+ characters required" aria-label="8+ characters required" data-hs-validation-equal-field="#signupModalFormPassword" required>
<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 btn-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 -->
<!-- Forgot Password -->
<div id="forgotPasswordModalForm" style="display: none; opacity: 0;">
<!-- Heading -->
<div class="text-center mb-7">
<h4>Forgot password?</h4>
<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="resetPasswordSrEmailModalForm" tabindex="0">Your email</label>
<a class="js-animation-link form-label-link" href="javascript:;"
data-hs-show-animation-options='{
"targetSelector": "#loginModalForm",
"groupName": "idForm"
}'>
<i class="bi-chevron-left small me-1"></i> Back to Log in
</a>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-3">
<input type="email" class="form-control form-control-lg" name="email" id="resetPasswordSrEmailModalForm" tabindex="1" placeholder="Enter your email address" aria-label="Enter your email address" required data-msg="Please enter a valid email address.">
</div>
<!-- End Form -->
<div class="d-grid">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</div>
</div>
</form>
</div>
<!-- End Forgot 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>
<!-- ========== 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-mega-menu/dist/hs-mega-menu.min.js"></script>
<script src="../assets/vendor/hs-show-animation/dist/hs-show-animation.min.js"></script>
<script src="../assets/vendor/hs-header/dist/hs-header.min.js"></script>
<!-- JS Space -->
<script src="../assets/js/hs.bs-validation.js"></script>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF MEGA MENU
// =======================================================
const megaMenu = 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')
}
})
// INITIALIZATION OF HEADER
// =======================================================
new HSHeader('#header').init()
})()
</script>
Log in with Google
