Modals
Component #1
Sign up
Log in
Don't have an account yet? Sign up here
Log in with Google
Log in
Don't have an account yet? Sign up here
Sign up
Already have an account? Log in here
Sign up
Already have an account? Log in here
Forgot password?
Enter the email address you used when you joined and we'll send you instructions to reset your password.
Trusted by the world's best teams
<!-- Modal Trigger -->
<a class="btn btn-primary" href="javascript:;" role="button" data-bs-toggle="modal" data-bs-target="#signupModal">
<i class="bi-person-circle me-1"></i> Sign up
</a>
<!-- End Modal Trigger -->
<!-- ========== 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="signupModalFormLogin" 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": "#signupModalFormSignup",
"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": "#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">
<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": "#signupModalFormSignup",
"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="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 btn-lg">Log in</button>
</div>
</form>
</div>
<!-- End Log in with Modal -->
<!-- Sign up -->
<div id="signupModalFormSignup">
<!-- 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": "#signupModalFormLogin",
"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": "#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="../page-terms.html">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">
<h4>Sign up</h4>
<p>Already have an account?
<a class="js-animation-link" href="javascript:;" role="button"
data-hs-show-animation-options='{
"targetSelector": "#signupModalFormLogin",
"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="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 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="signupModalFormResetPassword" 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="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 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="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>
</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 ========== -->
<!-- JS Implementing Plugins -->
<!-- bundlejs:vendor [..] -->
<script src="../assets/vendor/hs-show-animation/dist/hs-show-animation.min.js"></script>
<!-- JS Space -->
<!-- bundlejs:theme [..] -->
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SHOW ANIMATIONS
// =======================================================
document.querySelectorAll('.js-animation-link').forEach(item => {
new HSShowAnimation(item).init()
})
// INITIALIZATION OF BOOTSTRAP VALIDATION
// =======================================================
HSBsValidation.init('.js-validate', {
onSubmit: data => {
data.event.preventDefault()
alert('Submited')
}
})
})()
</script>