Logo v3.2.2
Image Description

No Results

  • Get Support
  • Preview Demo
Logo v3.2.2
  • Docs
  • Snippets
  • Snippets
  • Introduction
  • Navbar / Heroes
  • Headers (Navbar)
  • Hero Sections
  • Foundations
  • Features
    General Stats Step Navs (Tabs)
  • Icon Blocks
  • Cards
    Grid List
  • Testimonials
  • Pricing
  • Team Sections
  • Call-to-Action (CTA)
  • Gallery
  • Clients
  • FAQ
  • Comments
  • User Profile
  • Sidebar Examples
  • Content Sections
  • Forms
  • Authentication
  • Feedback
  • Filters
  • Search
  • Subscribe
  • Contact / Footer
  • Contact Sections
  • Footer

Form Layouts: Authentication

Component #1

  • Preview
  • HTML
  • JS

Login to Unify

Image Description Log in with Google OR
Please enter a valid email address.
Please enter a valid password.
Forgot Password?

Don't have an account yet? Sign up here

Build digital products with:
  • All-in-one tool
  • Easily add & manage your services
Learn more
Image Description
Image Description
              
                <!-- Content -->
                <div class="container content-space-1">
                  <div class="mx-lg-auto" style="max-width: 55rem;">
                    <div class="position-relative">
                      <!-- Card -->
                      <div class="card card-shadow card-login">
                        <div class="row">
                          <div class="col-md-8">
                            <div class="card-body">
                              <!-- Form -->
                              <form class="js-validate needs-validation" novalidate>
                                <div class="text-center">
                                  <div class="mb-5">
                                    <h3 class="card-title">Login to Unify</h3>
                                  </div>

                                  <a class="btn btn-white btn-lg d-grid mb-4" 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>

                                  <span class="divider-center text-muted mb-4">OR</span>
                                </div>

                                <!-- Form -->
                                <div class="mb-4">
                                  <label class="form-label" for="signinSrEmail">Your email</label>
                                  <input type="email" class="form-control form-control-lg" name="email" id="signinSrEmail" tabindex="1" placeholder="email@address.com" aria-label="email@address.com" required>
                                  <span class="invalid-feedback">Please enter a valid email address.</span>
                                </div>
                                <!-- End Form -->

                                <!-- Form -->
                                <div class="mb-4">
                                  <label class="form-label" for="signinSrPassword" tabindex="0">Password</label>

                                  <div class="input-group-merge">
                                    <input type="password" class="js-toggle-password form-control form-control-lg" name="password" id="signinSrPassword" placeholder="8+ characters required" aria-label="8+ characters required" required minlength="8"
                                           data-hs-toggle-password-options='{
                                             "target": "#changePassTarget",
                                             "defaultClass": "bi-eye-slash",
                                             "showClass": "bi-eye",
                                             "classChangeTarget": "#changePassIcon"
                                           }'>
                                    <a id="changePassTarget" class="input-group-append input-group-text" href="javascript:;">
                                      <i id="changePassIcon" class="bi-eye"></i>
                                    </a>

                                    <span class="invalid-feedback">Please enter a valid password.</span>
                                  </div>
                                </div>
                                <!-- End Form -->

                                <div class="d-flex justify-content-end mb-4">
                                  <a class="form-label-link" href="../page-reset-password.html">Forgot Password?</a>
                                </div>

                                <div class="d-grid gap-4">
                                  <button type="submit" class="btn btn-primary btn-lg">Sign in</button>
                                  <p class="card-text text-muted">Don't have an account yet? <a class="link" href="../page-signup.html">Sign up here</a></p>
                                </div>
                              </form>
                              <!-- End Form -->
                            </div>
                          </div>
                          <!-- End Col -->
                            
                          <div class="col-md-4 d-md-flex justify-content-center flex-column bg-soft-primary p-8 p-md-5" style="background-image: url(../assets/svg/components/wave-pattern.svg);">
                            <h5 class="mb-4">Build digital products with:</h5>

                            <!-- List Checked -->
                            <ul class="list-checked list-checked-primary list-py-2">
                              <li class="list-checked-item">All-in-one tool</li>
                              <li class="list-checked-item">Easily add & manage your services</li>
                            </ul>
                            <!-- End List Checked -->

                            <span class="d-block">
                              <a class="link link-pointer" href="#">Learn more</a>
                            </span>
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->
                      </div>
                      <!-- End Card -->

                      <!-- SVG Shape -->
                      <figure class="position-absolute top-0 end-0 zi-n1 d-none d-sm-block mt-n7 me-n10" style="width: 4rem;">
                        <img class="img-fluid" src="../assets/svg/components/pointer-up.svg" alt="Image Description">
                      </figure>
                      <!-- End SVG Shape -->

                      <!-- SVG Shape -->
                      <figure class="position-absolute bottom-0 start-0 d-none d-sm-block ms-n10 mb-n10" style="width: 15rem;">
                        <img class="img-fluid" src="../assets/svg/components/curved-shape.svg" alt="Image Description">
                      </figure>
                      <!-- End SVG Shape -->
                    </div>
                  </div>
                </div>
                <!-- End Content -->
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../assets/vendor/hs-toggle-password/dist/js/hs-toggle-password.js"></script>

                <!-- JS Unify -->
                <script src="../assets/js/hs.bs-validation.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF BOOTSTRAP VALIDATION
                    // =======================================================
                    HSBsValidation.init('.js-validate', {
                      onSubmit: data => {
                        data.event.preventDefault()
                        alert('Submited')
                      }
                    })


                    // INITIALIZATION OF TOGGLE PASSWORD
                    // =======================================================
                    new HSTogglePassword('.js-toggle-password')
                  })()
                </script>
              
            

Component #2

  • Preview
  • HTML
  • JS

Create your account

Image Description Sign up with Google OR
Please enter your first name.
Please enter your last name.
Please enter a valid email address.
Your password is invalid. Please try again.
Password does not match the confirm password.
Please accept our Terms and Conditions.

Remember your password? Log in

Build digital products with:
  • All-in-one tool
  • Easily add & manage your services
Learn more
Image Description
Image Description
              
                <!-- Content -->
                <div class="container content-space-1">
                  <div class="mx-lg-auto" style="max-width: 55rem;">
                    <div class="position-relative">
                      <!-- Card -->
                      <div class="card card-shadow card-login">
                        <div class="row">
                          <div class="col-md-8">
                            <div class="card-body">
                              <!-- Form -->
                              <form class="js-validate needs-validation" novalidate>
                                <div class="text-center">
                                  <div class="mb-5">
                                    <h3 class="card-title">Create your account</h3>
                                  </div>

                                  <a class="btn btn-white btn-lg d-grid mb-4" 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>

                                  <span class="divider-center text-muted mb-4">OR</span>
                                </div>

                                <label class="form-label" for="fullNameSrEmail">Full name</label>

                                <!-- Form -->
                                <div class="row">
                                  <div class="col-sm-6">
                                    <!-- Form -->
                                    <div class="mb-4">
                                      <input type="text" class="form-control form-control-lg" name="fullName" id="fullNameSrEmail" placeholder="Mark" aria-label="Mark" required>
                                      <span class="invalid-feedback">Please enter your first name.</span>
                                    </div>
                                    <!-- End Form -->
                                  </div>

                                  <div class="col-sm-6">
                                    <!-- Form -->
                                    <div class="mb-4">
                                      <input type="text" class="form-control form-control-lg" placeholder="Williams" aria-label="Williams" required>
                                      <span class="invalid-feedback">Please enter your last name.</span>
                                    </div>
                                    <!-- End Form -->
                                  </div>
                                </div>
                                <!-- End Form -->

                                <!-- Form -->
                                <div class="mb-4">
                                  <label class="form-label" for="signupSrEmail">Your email</label>
                                  <input type="email" class="form-control form-control-lg" name="email" id="signupSrEmail" placeholder="Markwilliams@site.com" aria-label="Markwilliams@site.com" required>
                                  <span class="invalid-feedback">Please enter a valid email address.</span>
                                </div>
                                <!-- End Form -->

                                <!-- Form -->
                                <div class="mb-4">
                                  <label class="form-label" for="signupSrPassword">Password</label>

                                  <div class="input-group-merge">
                                    <input type="password" class="js-toggle-password form-control form-control-lg" name="password" id="signupSrPassword" placeholder="8+ characters required" aria-label="8+ characters required" required minlength="8"
                                           data-hs-toggle-password-options='{
                                             "target": [".js-toggle-password-target-1", ".js-toggle-password-target-2"],
                                             "defaultClass": "bi-eye-slash",
                                             "showClass": "bi-eye",
                                             "classChangeTarget": ".js-toggle-password-show-icon-1"
                                           }'>
                                    <a class="js-toggle-password-target-1 input-group-append input-group-text" href="javascript:;">
                                      <i class="js-toggle-password-show-icon-1 bi-eye"></i>
                                    </a>
                    
                                    <span class="invalid-feedback">Your password is invalid. Please try again.</span>
                                  </div>
                                </div>
                                <!-- End Form -->

                                <!-- Form -->
                                <div class="mb-4">
                                  <label class="form-label" for="signupSrConfirmPassword">Confirm password</label>

                                  <div class="input-group-merge">
                                    <input type="password" class="js-toggle-password form-control form-control-lg" name="confirmPassword" id="signupSrConfirmPassword" placeholder="8+ characters required" aria-label="8+ characters required" required minlength="8"
                                           data-hs-toggle-password-options='{
                                             "target": [".js-toggle-password-target-1", ".js-toggle-password-target-2"],
                                             "defaultClass": "bi-eye-slash",
                                             "showClass": "bi-eye",
                                             "classChangeTarget": ".js-toggle-password-show-icon-2"
                                           }'>
                                    <a class="js-toggle-password-target-2 input-group-append input-group-text" href="javascript:;">
                                      <i class="js-toggle-password-show-icon-2 bi-eye"></i>
                                    </a>
                    
                                    <span class="invalid-feedback">Password does not match the confirm password.</span>
                                  </div>
                                </div>
                                <!-- End Form -->

                                <!-- Form Check -->
                                <div class="form-check mb-4">
                                  <input class="form-check-input" type="checkbox" value="" id="termsCheckbox" required>
                                  <label class="form-check-label" for="termsCheckbox">I accept the <a href="#">Terms and Conditions</a></label>
                                  <span class="invalid-feedback">Please accept our Terms and Conditions.</span>
                                </div>
                                <!-- End Form Check -->

                                <div class="d-grid gap-4">
                                  <button type="submit" class="btn btn-primary btn-lg">Create an account</button>
                                  <p class="card-text text-muted">Remember your password? <a class="link" href="../page-login.html">Log in</a></p>
                                </div>
                              </form>
                              <!-- End Form -->
                            </div>
                          </div>
                          <!-- End Col -->
                            
                          <div class="col-md-4 d-md-flex justify-content-center flex-column bg-soft-primary p-8 p-md-5" style="background-image: url(../assets/svg/components/wave-pattern.svg);">
                            <h5 class="mb-4">Build digital products with:</h5>

                            <!-- List Checked -->
                            <ul class="list-checked list-checked-primary list-py-2">
                              <li class="list-checked-item">All-in-one tool</li>
                              <li class="list-checked-item">Easily add & manage your services</li>
                            </ul>
                            <!-- End List Checked -->

                            <span class="d-block">
                              <a class="link link-pointer" href="#">Learn more</a>
                            </span>
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->
                      </div>
                      <!-- End Card -->

                      <!-- SVG Shape -->
                      <figure class="position-absolute top-0 end-0 zi-n1 d-none d-sm-block mt-n7 me-n10" style="width: 4rem;">
                        <img class="img-fluid" src="../assets/svg/components/pointer-up.svg" alt="Image Description">
                      </figure>
                      <!-- End SVG Shape -->

                      <!-- SVG Shape -->
                      <figure class="position-absolute bottom-0 start-0 d-none d-sm-block ms-n10 mb-n10" style="width: 15rem;">
                        <img class="img-fluid" src="../assets/svg/components/curved-shape.svg" alt="Image Description">
                      </figure>
                      <!-- End SVG Shape -->
                    </div>
                  </div>
                </div>
                <!-- End Content -->
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../assets/vendor/hs-toggle-password/dist/js/hs-toggle-password.js"></script>

                <!-- JS Unify -->
                <script src="../assets/js/hs.bs-validation.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF BOOTSTRAP VALIDATION
                    // =======================================================
                    HSBsValidation.init('.js-validate', {
                      onSubmit: data => {
                        data.event.preventDefault()
                        alert('Submited')
                      }
                    })


                    // INITIALIZATION OF TOGGLE PASSWORD
                    // =======================================================
                    new HSTogglePassword('.js-toggle-password')
                  })()
                </script>
              
            

Component #3

  • Preview
  • HTML
  • JS

Forgot password?

Please enter a valid email address.

Remember your password? Log in

Build digital products with:
  • All-in-one tool
  • Easily add & manage your services
Learn more
Image Description
Image Description
              
                <!-- Content -->
                <div class="container content-space-1">
                  <div class="mx-lg-auto" style="max-width: 55rem;">
                    <div class="position-relative">
                      <!-- Card -->
                      <div class="card card-shadow card-login">
                        <div class="row">
                          <div class="col-md-8">
                            <div class="card-body">
                              <!-- Form -->
                              <form class="js-validate needs-validation" novalidate>
                                <div class="text-center">
                                  <div class="mb-5">
                                    <h3 class="card-title">Forgot password?</h3>
                                  </div>
                                </div>

                                <!-- Form -->
                                <div class="mb-4">
                                  <label class="form-label" for="resetPasswordSrEmail" tabindex="0">Your email</label>

                                  <input type="email" class="form-control form-control-lg" name="email" id="resetPasswordSrEmail" 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 gap-4">
                                  <button type="submit" class="btn btn-primary btn-lg">Reset password</button>
                                  <p class="card-text text-muted">Remember your password? <a class="link" href="../page-login.html">Log in</a></p>
                                </div>
                              </form>
                              <!-- End Form -->
                            </div>
                          </div>
                          <!-- End Col -->
                            
                          <div class="col-md-4 d-md-flex justify-content-center flex-column bg-soft-primary p-8 p-md-5" style="background-image: url(../assets/svg/components/wave-pattern.svg);">
                            <h5 class="mb-4">Build digital products with:</h5>

                            <!-- List Checked -->
                            <ul class="list-checked list-checked-primary list-py-2">
                              <li class="list-checked-item">All-in-one tool</li>
                              <li class="list-checked-item">Easily add & manage your services</li>
                            </ul>
                            <!-- End List Checked -->

                            <span class="d-block">
                              <a class="link link-pointer" href="#">Learn more</a>
                            </span>
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->
                      </div>
                      <!-- End Card -->

                      <!-- SVG Shape -->
                      <figure class="position-absolute top-0 end-0 zi-n1 d-none d-sm-block mt-n7 me-n10" style="width: 4rem;">
                        <img class="img-fluid" src="../assets/svg/components/pointer-up.svg" alt="Image Description">
                      </figure>
                      <!-- End SVG Shape -->

                      <!-- SVG Shape -->
                      <figure class="position-absolute bottom-0 start-0 d-none d-sm-block ms-n10 mb-n10" style="width: 15rem;">
                        <img class="img-fluid" src="../assets/svg/components/curved-shape.svg" alt="Image Description">
                      </figure>
                      <!-- End SVG Shape -->
                    </div>
                  </div>
                </div>
                <!-- End Content -->
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../assets/vendor/hs-toggle-password/dist/js/hs-toggle-password.js"></script>

                <!-- JS Unify -->
                <script src="../assets/js/hs.bs-validation.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF BOOTSTRAP VALIDATION
                    // =======================================================
                    HSBsValidation.init('.js-validate', {
                      onSubmit: data => {
                        data.event.preventDefault()
                        alert('Submited')
                      }
                    })
                  })()
                </script>