Hero Subscribe

Front's form control expands on different styles, layout options, and custom components for creating a wide variety of forms.

Signup #1

hs.show-animation.js plugin used to switch between form windows.

Welcome Back!

Login to manage your account.

Do not have an account? Signup
OR
              
                <form class="js-validate">
                  <!-- Login -->
                  <div id="login" data-target-group="idForm">
                    <!-- Title -->
                    <header class="text-center mb-7">
                      <h2 class="h4 mb-0">Welcome Back!</h2>
                      <p>Login to manage your account.</p>
                    </header>
                    <!-- End Title -->

                    <!-- Form Group -->
                    <div class="form-group">
                      <div class="js-form-message js-focus-state">
                        <label class="sr-only" for="signinEmail">Email</label>
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <span class="input-group-text" id="signinEmailLabel">
                              <span class="fas fa-user"></span>
                            </span>
                          </div>
                          <input type="email" class="form-control" name="email" id="signinEmail" placeholder="Email" aria-label="Email" aria-describedby="signinEmailLabel" 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="signinPassword">Password</label>
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <span class="input-group-text" id="signinPasswordLabel">
                              <span class="fas fa-lock"></span>
                            </span>
                          </div>
                          <input type="password" class="form-control" name="password" id="signinPassword" placeholder="Password" aria-label="Password" aria-describedby="signinPasswordLabel" 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="slideInUp">Forgot Password?</a>
                    </div>

                    <div class="mb-2">
                      <button type="submit" class="btn btn-block btn-sm 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="slideInUp">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>

                  <!-- Signup -->
                  <div id="signup" style="display: none; opacity: 0;" data-target-group="idForm">
                    <!-- Title -->
                    <header class="text-center mb-7">
                      <h2 class="h4 mb-0">Welcome to Front.</h2>
                      <p>Fill out the form to get started.</p>
                    </header>
                    <!-- End Title -->

                    <!-- Form Group -->
                    <div class="form-group">
                      <div class="js-form-message js-focus-state">
                        <label class="sr-only" for="signupEmail">Email</label>
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <span class="input-group-text" id="signupEmailLabel">
                              <span class="fas fa-user"></span>
                            </span>
                          </div>
                          <input type="email" class="form-control" name="email" id="signupEmail" placeholder="Email" aria-label="Email" aria-describedby="signupEmailLabel" 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="signupPassword">Password</label>
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <span class="input-group-text" id="signupPasswordLabel">
                              <span class="fas fa-lock"></span>
                            </span>
                          </div>
                          <input type="password" class="form-control" name="password" id="signupPassword" placeholder="Password" aria-label="Password" aria-describedby="signupPasswordLabel" 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="signupConfirmPassword">Confirm Password</label>
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <span class="input-group-text" id="signupConfirmPasswordLabel">
                              <span class="fas fa-key"></span>
                            </span>
                          </div>
                          <input type="password" class="form-control" name="confirmPassword" id="signupConfirmPassword" placeholder="Confirm Password" aria-label="Confirm Password" aria-describedby="signupConfirmPasswordLabel" 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-sm 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="slideInUp">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>
                  <!-- End Signup -->

                  <!-- Forgot Password -->
                  <div id="forgotPassword" style="display: none; opacity: 0;" data-target-group="idForm">
                    <!-- Title -->
                    <header class="text-center mb-7">
                      <h2 class="h4 mb-0">Recover Password.</h2>
                      <p>Enter your email address and an email with instructions will be sent to you.</p>
                    </header>
                    <!-- End Title -->

                    <!-- Form Group -->
                    <div class="form-group">
                      <div class="js-form-message js-focus-state">
                        <label class="sr-only" for="recoverEmail">Your email</label>
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <span class="input-group-text" id="recoverEmailLabel">
                              <span class="fas fa-user"></span>
                            </span>
                          </div>
                          <input type="email" class="form-control" name="email" id="recoverEmail" placeholder="Your email" aria-label="Your email" aria-describedby="recoverEmailLabel" 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-sm 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="slideInUp">Login
                      </a>
                    </div>
                  </div>
                  <!-- End Forgot Password -->
                </form>
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.validation.js"></script>
                <script src="../../assets/js/components/hs.focus-state.js"></script>
                <script src="../../assets/js/components/hs.show-animation.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // initialization of form validation
                    $.HSCore.components.HSValidation.init('.js-validate', {
                      rules: {
                        confirmPassword: {
                          equalTo: '#signupPassword'
                        }
                      }
                    });

                    // initialization of forms
                    $.HSCore.components.HSFocusState.init();

                    // initialization of show animations
                    $.HSCore.components.HSShowAnimation.init('.js-animation-link');
                  });
                </script>
              
            

Signup #2

Welcome to Front

Fill out the form to get started.

Already have an account? Login
              
                <!-- Form -->
                <form class="js-validate">
                  <!-- Title -->
                  <div class="mb-7">
                    <h1 class="h3 text-primary font-weight-normal mb-0">Welcome to <span class="font-weight-semi-bold">Front</span></h1>
                    <p>Fill out the form to get started.</p>
                  </div>
                  <!-- End Title -->

                  <!-- Form Group -->
                  <div class="js-form-message form-group">
                    <label class="form-label" for="signinSrEmailExample3">Email address</label>
                    <input type="email" class="form-control" name="email" id="signinSrEmailExample3" placeholder="Email address" aria-label="Email address" required
                           data-msg="Please enter a valid email address."
                           data-error-class="u-has-error"
                           data-success-class="u-has-success">
                  </div>
                  <!-- End Form Group -->

                  <!-- Form Group -->
                  <div class="js-form-message form-group">
                    <label class="form-label" for="signinSrPasswordExample2">Password</label>
                    <input type="password" class="form-control" name="password" id="signinSrPasswordExample2" placeholder="********" aria-label="********" required
                           data-msg="Your password is invalid. Please try again."
                           data-error-class="u-has-error"
                           data-success-class="u-has-success">
                  </div>
                  <!-- End Form Group -->

                  <!-- Form Group -->
                  <div class="js-form-message form-group">
                    <label class="form-label" for="signinSrConfirmPassword">Confirm password</label>
                    <input type="password" class="form-control" name="confirmPassword" id="signinSrConfirmPassword" placeholder="********" aria-label="********" required
                           data-msg="Password does not match the confirm password."
                           data-error-class="u-has-error"
                           data-success-class="u-has-success">
                  </div>
                  <!-- End Form Group -->

                  <!-- Checkbox -->
                  <div class="js-form-message mb-5">
                    <div class="custom-control custom-checkbox d-flex align-items-center text-muted">
                      <input type="checkbox" class="custom-control-input" id="termsCheckbox" name="termsCheckbox" required
                             data-msg="Please accept our Terms and Conditions."
                             data-error-class="u-has-error"
                             data-success-class="u-has-success">
                      <label class="custom-control-label" for="termsCheckbox">
                        <small>
                          I agree to the
                          <a class="link-muted" href="../pages/terms.html">Terms and Conditions</a>
                        </small>
                      </label>
                    </div>
                  </div>
                  <!-- End Checkbox -->

                  <!-- Button -->
                  <div class="row align-items-center mb-5">
                    <div class="col-5 col-sm-6">
                      <span class="small text-muted">Already have an account?</span>
                      <a class="small" href="../pages/login-simple.html">Login</a>
                    </div>

                    <div class="col-7 col-sm-6 text-right">
                      <button type="submit" class="btn btn-primary transition-3d-hover">Get Started</button>
                    </div>
                  </div>
                  <!-- End Button -->
                </form>
                <!-- End Form -->
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.validation.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // initialization of form validation
                    $.HSCore.components.HSValidation.init('.js-validate', {
                      rules: {
                        confirmPassword: {
                          equalTo: '#signupPassword'
                        }
                      }
                    });
                  });
                </script>
              
            

Signin #1

Welcome back

Login to manage your account.

Don't have an account? Signup
              
                <!-- Form -->
                <form class="js-validate w-md-50 mx-md-auto">
                  <!-- Title -->
                  <div class="mb-7">
                    <h2 class="h3 text-primary font-weight-normal mb-0">Welcome <span class="font-weight-semi-bold">back</span></h2>
                    <p>Login to manage your account.</p>
                  </div>
                  <!-- End Title -->

                  <!-- Form Group -->
                  <div class="js-form-message form-group">
                    <label class="form-label" for="signinSrEmailExample1">Email address</label>
                    <input type="email" class="form-control" name="email" id="signinSrEmailExample1" placeholder="Email address" aria-label="Email address" required
                           data-msg="Please enter a valid email address."
                           data-error-class="u-has-error"
                           data-success-class="u-has-success">
                  </div>
                  <!-- End Form Group -->

                  <!-- Form Group -->
                  <div class="js-form-message form-group">
                    <label class="form-label" for="signinSrPasswordExample1">
                      <span class="d-flex justify-content-between align-items-center">
                        Password
                        <a class="link-muted text-capitalize font-weight-normal" href="../pages/recover-account-simple.html">Forgot Password?</a>
                      </span>
                    </label>
                    <input type="password" class="form-control" name="password" id="signinSrPasswordExample1" placeholder="********" aria-label="********" required
                           data-msg="Your password is invalid. Please try again."
                           data-error-class="u-has-error"
                           data-success-class="u-has-success">
                  </div>
                  <!-- End Form Group -->

                  <!-- Button -->
                  <div class="row align-items-center mb-5">
                    <div class="col-6">
                      <span class="small text-muted">Don't have an account?</span>
                      <a class="small" href="../pages/signup-simple.html">Signup</a>
                    </div>

                    <div class="col-6 text-right">
                      <button type="submit" class="btn btn-primary transition-3d-hover">Get Started</button>
                    </div>
                  </div>
                  <!-- End Button -->
                </form>
                <!-- End Form -->
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.validation.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // initialization of form validation
                    $.HSCore.components.HSValidation.init('.js-validate');
                  });
                </script>
              
            

Recover account #1

Forgot your password?

Enter your email address below and we'll get you back on track.

              
                <!-- Form -->
                <form class="js-validate w-md-50 mx-md-auto">
                  <!-- Title -->
                  <div class="mb-7">
                    <h1 class="h3 text-primary font-weight-normal mb-0">Forgot your <span class="font-weight-semi-bold">password?</span></h1>
                    <p>Enter your email address below and we'll get you back on track.</p>
                  </div>
                  <!-- End Title -->

                  <!-- Form Group -->
                  <div class="js-form-message form-group">
                    <label class="form-label" for="signinSrEmailExample2">Email address</label>
                    <input type="email" class="form-control" name="email" id="signinSrEmailExample2" placeholder="Email address" aria-label="Email address" required
                           data-msg="Please enter a valid email address."
                           data-error-class="u-has-error"
                           data-success-class="u-has-success">
                  </div>
                  <!-- End Form Group -->

                  <!-- Button -->
                  <div class="row align-items-center mb-5">
                    <div class="col-4 col-sm-6">
                      <a class="small link-muted" href="../pages/login-simple.html">Back to sign in</a>
                    </div>

                    <div class="col-8 col-sm-6 text-right">
                      <button type="submit" class="btn btn-primary transition-3d-hover">Request Reset Link</button>
                    </div>
                  </div>
                  <!-- End Button -->
                </form>
                <!-- End Form -->
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.validation.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // initialization of form validation
                    $.HSCore.components.HSValidation.init('.js-validate');
                  });
                </script>
              
            

Contacts #1

We'll get back to you in 1-2 business days.

              
                <!-- Contacts Form -->
                <form class="js-validate">
                  <div class="row">
                    <!-- Input -->
                    <div class="col-sm-6 mb-6">
                      <div class="js-form-message">
                        <label class="form-label">
                          Your name
                          <span class="text-danger">*</span>
                        </label>

                        <input type="text" class="form-control" name="name" placeholder="Jack Wayley" aria-label="Jack Wayley" required
                               data-msg="Please enter your name."
                               data-error-class="u-has-error"
                               data-success-class="u-has-success">
                      </div>
                    </div>
                    <!-- End Input -->

                    <!-- Input -->
                    <div class="col-sm-6 mb-6">
                      <div class="js-form-message">
                        <label class="form-label">
                          Your email address
                          <span class="text-danger">*</span>
                        </label>

                        <input type="email" class="form-control" name="email" placeholder="jackwayley@gmail.com" aria-label="jackwayley@gmail.com" required
                               data-msg="Please enter a valid email address."
                               data-error-class="u-has-error"
                               data-success-class="u-has-success">
                      </div>
                    </div>
                    <!-- End Input -->

                    <div class="w-100"></div>

                    <!-- Input -->
                    <div class="col-sm-6 mb-6">
                      <div class="js-form-message">
                        <label class="form-label">
                          Subject
                          <span class="text-danger">*</span>
                        </label>

                        <input type="text" class="form-control" name="subject" placeholder="Web design" aria-label="Web design" required
                               data-msg="Please enter a subject."
                               data-error-class="u-has-error"
                               data-success-class="u-has-success">
                      </div>
                    </div>
                    <!-- End Input -->

                    <!-- Input -->
                    <div class="col-sm-6 mb-6">
                      <div class="js-form-message">
                        <label class="form-label">
                          Your Phone Number
                          <span class="text-danger">*</span>
                        </label>

                        <input type="number" class="form-control" name="phone" placeholder="1-800-643-4500" aria-label="1-800-643-4500" required
                               data-msg="Please enter a valid phone number."
                               data-error-class="u-has-error"
                               data-success-class="u-has-success">
                      </div>
                    </div>
                    <!-- End Input -->
                  </div>

                  <!-- Input -->
                  <div class="js-form-message mb-6">
                    <label class="form-label">
                      How can we help you?
                      <span class="text-danger">*</span>
                    </label>

                    <div class="input-group">
                      <textarea class="form-control" rows="4" name="text" placeholder="Hi there, I would like to ..." aria-label="Hi there, I would like to ..." required
                                data-msg="Please enter a reason."
                                data-error-class="u-has-error"
                                data-success-class="u-has-success"></textarea>
                    </div>
                  </div>
                  <!-- End Input -->

                  <div class="text-center">
                    <button type="submit" class="btn btn-primary btn-wide transition-3d-hover mb-4">Submit</button>
                    <p class="small">We'll get back to you in 1-2 business days.</p>
                  </div>
                </form>
                <!-- End Contacts Form -->
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.validation.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // initialization of form validation
                    $.HSCore.components.HSValidation.init('.js-validate');
                  });
                </script>
              
            

Contacts #2

Image Description

Ask me for more information

              
                <!-- Contact Form -->
                <div class="card shadow-sm p-4">
                  <!-- Header -->
                  <div class="media align-items-center mb-4">
                    <div class="u-avatar mr-3">
                      <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img8.jpg" alt="Image Description">
                    </div>
                    <div class="media-body">
                      <h4 class="h6 mb-0">Ask me for more information</h4>
                    </div>
                  </div>
                  <!-- End Header -->

                  <!-- Form -->
                  <form>
                    <select class="custom-select custom-select-sm mb-2">
                      <option selected>Tell me more about this property</option>
                      <option value="aboutProperty1">Request a showing</option>
                      <option value="aboutProperty2">Request neighborhood information</option>
                      <option value="aboutProperty3">Request recent area sales</option>
                    </select>

                    <div class="mb-2">
                      <label class="sr-only" for="firstNameSr">First Name</label>
                      <input type="text" class="form-control form-control-sm" name="text" id="firstNameSr" placeholder="First Name" aria-label="First Name">
                    </div>

                    <div class="mb-2">
                      <label class="sr-only" for="lastNameSr">Last Name</label>
                      <input type="text" class="form-control form-control-sm" name="text" id="lastNameSr" placeholder="Last Name" aria-label="Last Name">
                    </div>

                    <div class="mb-2">
                      <label class="sr-only" for="emailSr">Email</label>
                      <input type="email" class="form-control form-control-sm" name="text" id="emailSr" placeholder="Email" aria-label="Email">
                    </div>

                    <div class="mb-2">
                      <label class="sr-only" for="phoneNumberSr">Phone number</label>
                      <input type="tel" class="form-control form-control-sm" name="tel" id="phoneNumberSr" placeholder="Phone number" aria-label="Phone number">
                    </div>

                    <div class="mb-2">
                      <label class="sr-only" for="propertyQuestionSr">Property question</label>
                      <textarea class="form-control form-control-sm" rows="4" name="answer" id="propertyQuestionSr" placeholder="I would like more information about ..." aria-label="I would like more information about ..."></textarea>
                    </div>

                    <button type="button" class="btn btn-block btn-sm btn-primary btn-wide transition-3d-hover">Submit</button>
                  </form>
                  <!-- End Form -->
                </div>
                <!-- End Contact Form -->
              
            

Hire us #1

We'll get back to you in 1-2 business days.

              
                <!-- Hire Us Form -->
                <form class="js-validate w-lg-50 mx-auto">
                  <!-- Input -->
                  <div class="js-form-message mb-6">
                    <label class="form-label">
                      Your name
                      <span class="text-danger">*</span>
                    </label>

                    <input type="text" class="form-control" name="firstName" placeholder="Jack Wayley" aria-label="Jack Wayley" required
                           data-msg="Please enter your frist name."
                           data-error-class="u-has-error"
                           data-success-class="u-has-success">
                  </div>
                  <!-- End Input -->

                  <!-- Input -->
                  <div class="js-form-message mb-6">
                    <label class="form-label">
                      Your email address
                      <span class="text-danger">*</span>
                    </label>

                    <input type="email" class="form-control" name="emailAddress" placeholder="jackwayley@gmail.com" aria-label="jackwayley@gmail.com" required
                           data-msg="Please enter a valid email address."
                           data-error-class="u-has-error"
                           data-success-class="u-has-success">
                  </div>
                  <!-- End Input -->

                  <!-- Input -->
                  <div class="js-form-message mb-6">
                    <label class="form-label">
                      What is your timeline for this project?
                      <span class="text-danger">*</span>
                    </label>

                    <input type="text" class="form-control" name="timeline" placeholder="1 month" aria-label="1 month" required
                           data-msg="Please enter a valid date."
                           data-error-class="u-has-error"
                           data-success-class="u-has-success">
                  </div>
                  <!-- End Input -->

                  <!-- Input -->
                  <div class="js-focus-state mb-6">
                    <label class="form-label">Your website URL</label>
                    <input type="text" class="form-control" placeholder="https://www.jackwayley.com" aria-label="https://www.jackwayley.com">
                  </div>
                  <!-- End Input -->

                  <!-- Input -->
                  <div class="js-focus-state mb-6">
                    <label class="form-label">Your company name</label>
                    <input type="text" class="form-control" placeholder="JackWayley Inc." aria-label="JackWayley Inc.">
                  </div>
                  <!-- End Input -->

                  <!-- Platform -->
                  <div class="mb-6">
                    <label class="form-label">
                      Choose your platform
                      <span class="text-danger">*</span>
                    </label>

                    <!-- Button Group -->
                    <div class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
                      <label class="btn btn-outline-secondary btn-custom-toggle-primary flex-fill">
                        <input type="checkbox" name="options" id="option1">
                        Shopify
                      </label>
                      <label class="btn btn-outline-secondary btn-custom-toggle-primary flex-fill">
                        <input type="checkbox" name="options" id="option2">
                        Web
                      </label>
                      <label class="btn btn-outline-secondary btn-custom-toggle-primary flex-fill">
                        <input type="checkbox" name="options" id="option3">
                        Other
                      </label>
                    </div>
                    <!-- End Button Group -->
                  </div>
                  <!-- End Platform -->

                  <!-- Budget Custom Select -->
                  <div class="mb-6">
                    <label class="form-label">
                      Tell us about your budget
                      <span class="text-danger">*</span>
                    </label>

                    <div class="js-focus-state">
                      <select class="form-control custom-select" required
                          data-msg="Please select your budget."
                          data-error-class="u-has-error"
                          data-success-class="u-has-success">
                        <option selected>$20,000 to $50,000</option>
                        <option value="budget1">$20,000 to $50,000</option>
                        <option value="budget2">$100,000 to $200,000</option>
                        <option value="budget3">$200,000+</option>
                      </select>
                    </div>
                  </div>
                  <!-- End Budget Custom Select -->

                  <!-- Input -->
                  <div class="js-form-message mb-6">
                    <label class="form-label">
                      Tell us about your project
                      <span class="text-danger">*</span>
                    </label>

                    <textarea class="form-control" rows="4" name="answer" placeholder="Hi there, I would like to ..." aria-label="Hi there, I would like to ..." required
                              data-msg="Please enter a reason."
                              data-error-class="u-has-error"
                              data-success-class="u-has-success"></textarea>
                  </div>
                  <!-- End Input -->

                  <div class="text-center">
                    <div class="mb-2">
                      <button type="submit" class="btn btn-primary transition-3d-hover">Let's Start Working Together</button>
                    </div>
                    <p class="small">We'll get back to you in 1-2 business days.</p>
                  </div>
                </form>
                <!-- End Hire Us Form -->
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.validation.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // initialization of form validation
                    $.HSCore.components.HSValidation.init('.js-validate');
                  });
                </script>
              
            

Apply form #1

Join Front

Apply for this Job

Image Description
              
                <!-- Apply For Job Section -->
                <div id="SVGwave5Top" class="svg-preloader position-relative gradient-half-primary-v1">
                  <div class="container space-top-3 space-top-md-4 space-bottom-2">
                    <div class="w-lg-80 mx-auto">
                      <div id="applyForJob">
                        <!-- Title -->
                        <div class="text-center mb-7">
                          <span class="btn btn-xs btn-soft-white btn-pill mb-2">Join Front</span>
                          <h2 class="h3 text-white font-weight-normal">Apply for this Job</h2>
                        </div>
                        <!-- End Title -->

                        <!-- Apply Form -->
                        <form class="js-validate">
                          <div class="row">
                            <div class="col-sm-6 mb-5">
                              <!-- Input -->
                              <div class="js-form-message">
                                <div class="input-group input-group-borderless">
                                  <input type="text" class="form-control" name="firstName" placeholder="First Name" aria-label="First Name" required
                                         data-msg="Please enter your frist name."
                                         data-error-class="u-has-error"
                                         data-success-class="u-has-success">
                                </div>
                              </div>
                              <!-- End Input -->
                            </div>

                            <div class="col-sm-6 mb-5">
                              <!-- Input -->
                              <div class="js-form-message">
                                <div class="input-group input-group-borderless">
                                  <input type="text" class="form-control" name="lastName" placeholder="Last Name" aria-label="Last Name" required
                                         data-msg="Please enter your last name."
                                         data-error-class="u-has-error"
                                         data-success-class="u-has-success">
                                </div>
                              </div>
                              <!-- End Input -->
                            </div>

                            <div class="col-sm-6 mb-5">
                              <!-- Input -->
                              <div class="js-form-message">
                                <div class="input-group input-group-borderless">
                                  <input type="email" class="form-control" name="emailAddress" placeholder="Email" aria-label="Email" required
                                         data-msg="Please enter a valid email address."
                                         data-error-class="u-has-error"
                                         data-success-class="u-has-success">
                                </div>
                              </div>
                              <!-- End Input -->
                            </div>

                            <div class="col-sm-6 mb-5">
                              <!-- Input -->
                              <div class="js-form-message">
                                <div class="input-group input-group-borderless">
                                  <input type="text" class="form-control" name="URL" placeholder="Linkedin" aria-label="Linkedin" required
                                         data-msg="Please enter a valid URL address."
                                         data-error-class="u-has-error"
                                         data-success-class="u-has-success">
                                </div>
                              </div>
                              <!-- End Input -->
                            </div>

                            <div class="col-sm-6 mb-5">
                              <!-- Title -->
                              <label class="h6 d-block text-white">Resume/CV</label>
                              <!-- End Title -->

                              <!-- Custom File Input -->
                              <div class="file-attachment-link mb-0">
                                <input id="fileAttachment1" name="resumeFileAttachment" type="file" class="file-attachment-link__label">
                                <label class="file-attachment-link__label" for="fileAttachment1">Attach your file</label>
                              </div>
                              <!-- End Custom File Input -->
                            </div>

                            <div class="col-sm-6 mb-5">
                              <!-- Title -->
                              <label class="h6 d-block text-white">Cover letter</label>
                              <!-- End Title -->

                              <!-- Custom File Input -->
                              <div class="file-attachment-link mb-0">
                                <input id="fileAttachment2" name="letterFileAttachment" type="file" class="file-attachment-link__label">
                                <label class="file-attachment-link__label" for="fileAttachment2">Attach your file</label>
                              </div>
                              <!-- End Custom File Input -->
                            </div>

                            <div class="col-sm-6 mb-5">
                              <!-- Input -->
                              <div class="js-form-message">
                                <div class="input-group input-group-borderless">
                                  <textarea class="form-control" rows="4" name="answer" placeholder="How'd you hear about Front?" aria-label="How'd you hear about Front?" required
                                            data-msg="Please enter an answer."
                                            data-error-class="u-has-error"
                                            data-success-class="u-has-success"></textarea>
                                </div>
                              </div>
                              <!-- End Input -->
                            </div>

                            <div class="col-sm-6 align-self-end text-sm-right mb-5">
                              <button type="submit" class="btn btn-white text-primary transition-3d-hover">Submit Application</button>
                            </div>
                          </div>
                        </form>
                        <!-- End Apply Form -->
                      </div>
                    </div>
                  </div>

                  <!-- SVG Top Shape -->
                  <figure class="position-absolute top-0 right-0 left-0 z-index-2">
                    <img class="js-svg-injector" src="../../assets/svg/components/wave-5-top.svg" alt="Image Description"
                         data-parent="#SVGwave5Top">
                  </figure>
                  <!-- End SVG Top Shape -->
                </div>
                <!-- End Apply For Job Section -->
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
                <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.validation.js"></script>
                <script src="../../assets/js/components/hs.svg-injector.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(window).on('load', function () {
                    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                  });

                  $(document).on('ready', function () {
                    // initialization of form validation
                    $.HSCore.components.HSValidation.init('.js-validate');
                  });
                </script>
              
            

Select form #1

              
                <!-- Job Positions - Filter -->
                <div class="row align-items-md-center space-1">
                  <div class="col-lg-4 mb-4 mb-lg-0">
                    <!-- Department Search Field -->
                    <div class="js-focus-state">
                      <label class="sr-only" for="searchJobsSr">Search Jobs</label>
                      <div class="input-group">
                        <div class="input-group-prepend">
                          <span class="input-group-text" id="searchJobs">
                            <span class="fas fa-search"></span>
                          </span>
                        </div>
                        <input type="text" class="form-control" name="text" id="searchJobsSr" placeholder="Search Jobs" aria-label="Search Jobs" aria-describedby="searchJobs">
                      </div>
                    </div>
                    <!-- End Department Search Field -->
                  </div>

                  <div class="col-sm-6 col-lg-3 mb-4 mb-lg-0">
                    <!-- Locations -->
                    <select class="custom-select">
                      <option selected>All locations</option>
                      <option value="location1">Chicago, US</option>
                      <option value="location2">New York, US</option>
                      <option value="location3">Seattle/Kirkland, US</option>
                      <option value="location4">Los Angles, US</option>
                      <option value="location5">Moscow, Russia</option>
                      <option value="location6">Sydney, Australia</option>
                      <option value="location7">Birmingham, UK</option>
                      <option value="location7">Manchester, UK</option>
                      <option value="location8">Beijing, China</option>
                    </select>
                    <!-- End Locations -->
                  </div>

                  <div class="col-sm-6 col-lg-3 mb-4 mb-lg-0">
                    <!-- Departments List -->
                    <select class="custom-select">
                      <option selected>All departments</option>
                      <option value="department1">Analytics</option>
                      <option value="department2">Business Strategy</option>
                      <option value="department3">Data Center & Network</option>
                      <option value="department4">Developer Relations</option>
                      <option value="department5">Engineering</option>
                      <option value="department6">Hardware Engineering</option>
                      <option value="department7">IT & Data Management</option>
                      <option value="department8">Legal & Government Relations</option>
                      <option value="department9">Manufacturing & Supply Chain</option>
                      <option value="department10">Marketing & Communications</option>
                      <option value="department11">Network Engineering</option>
                      <option value="department12">Partnerships</option>
                      <option value="department13">Web</option>
                    </select>
                    <!-- End Departments List -->
                  </div>

                  <div class="col-lg-2 text-lg-right">
                    <a class="link-muted" href="#">22 Open Positions</a>
                  </div>
                </div>
                <!-- End Job Positions - Filter -->
              
            
              
                <!-- JS Front -->
                <script src="../../assets/js/components/hs.focus-state.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // initialization of forms
                    $.HSCore.components.HSFocusState.init();
                  });
                </script>
              
            

Cart form #1

Items Quantity Unit price
Image Description

Hoodie

Small
$29
Image Description

Snapback cap

$9

Total: $42.58

Got a discount code? Add it in the next step.

              
                <form>
                  <!-- Table Content -->
                  <div class="table-responsive-sm mb-6">
                    <table class="table table-borderless bg-white mb-0">
                      <thead>
                        <tr>
                          <th>Items</th>
                          <th>Quantity</th>
                          <th>Unit price</th>
                          <th></th>
                        </tr>
                      </thead>
                      <tbody>
                        <!-- Item Content -->
                        <tr>
                          <td>
                            <div class="media align-items-center">
                              <div class="u-avatar mr-3">
                                <img class="img-fluid rounded" src="../../assets/img/100x100/img14.jpg" alt="Image Description">
                              </div>
                              <div class="media-body">
                                <h2 class="h6 mb-0">Hoodie</h2>
                                <small class="d-block text-secondary">Small</small>
                              </div>
                            </div>
                          </td>
                          <td class="align-middle">
                            <div class="js-quantity input-group u-quantity">
                              <input class="js-result form-control u-quantity__input" type="text" value="1">
                              <div class="u-quantity__arrows">
                                <span class="js-plus u-quantity__arrows-inner fas fa-angle-up"></span>
                                <span class="js-minus u-quantity__arrows-inner fas fa-angle-down"></span>
                              </div>
                            </div>
                          </td>
                          <td class="align-middle">$29</td>
                          <td class="align-middle text-center">
                            <button type="button" class="close float-none">
                              <span aria-hidden="true">×</span>
                            </button>
                          </td>
                        </tr>
                        <!-- End Item Content -->

                        <!-- Item Content -->
                        <tr>
                          <td>
                            <div class="media align-items-center">
                              <div class="u-avatar mr-3">
                                <img class="img-fluid rounded" src="../../assets/img/100x100/img13.jpg" alt="Image Description">
                              </div>
                              <div class="media-body">
                                <h2 class="h6 mb-0">Snapback cap</h2>
                              </div>
                            </div>
                          </td>
                          <td class="align-middle">
                            <div class="js-quantity input-group u-quantity">
                              <input class="js-result form-control u-quantity__input" type="text" value="1">
                              <div class="u-quantity__arrows">
                                <span class="js-plus u-quantity__arrows-inner fas fa-angle-up"></span>
                                <span class="js-minus u-quantity__arrows-inner fas fa-angle-down"></span>
                              </div>
                            </div>
                          </td>
                          <td class="align-middle">$9</td>
                          <td class="align-middle text-center">
                            <button type="button" class="close float-none">
                              <span aria-hidden="true">×</span>
                            </button>
                          </td>
                        </tr>
                        <!-- End Item Content -->
                      </tbody>
                    </table>
                  </div>
                  <!-- End Table Content -->

                  <div class="row justify-content-lg-between">
                    <!-- Delivery -->
                    <div class="col-md-6 col-lg-5 mb-7 mb-md-0">
                      <div class="card border-0 mb-1">
                        <div class="card-body p-3">
                          <div class="custom-control custom-radio d-flex align-items-center small text-muted">
                            <input type="radio" class="custom-control-input" id="deliveryRadio1" name="deliveryRadio" checked>
                            <label class="custom-control-label ml-1" for="deliveryRadio1">
                              <span class="d-block h6 text-dark font-weight-normal mb-1"><span class="font-weight-semi-bold">$4.58</span> - Standard delivery</span>
                              <span class="d-block">Shipment may take 5-6 business days.</span>
                            </label>
                          </div>
                        </div>
                      </div>

                      <div class="card border-0">
                        <div class="card-body p-3">
                          <div class="custom-control custom-radio d-flex align-items-center small text-muted">
                            <input type="radio" class="custom-control-input" id="deliveryRadio2" name="deliveryRadio">
                            <label class="custom-control-label ml-1" for="deliveryRadio2">
                              <span class="d-block h6 text-dark font-weight-normal mb-1"><span class="font-weight-semi-bold">$7.99</span> - Express delivery</span>
                              <span class="d-block">Shipment may take 2-3 business days.</span>
                            </label>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- End Delivery -->

                    <!-- Total -->
                    <div class="col-md-6 col-lg-5 align-self-end">
                      <div class="media">
                        <div class="mr-4">
                          <h3 class="h5 mb-0">Total: $42.58</h3>
                          <p class="small mb-0">Got a discount code? Add it in the next step.</p>
                        </div>
                        <div class="media-body">
                          <a class="btn btn-primary transition-3d-hover" href="checkout.html">Checkout</a>
                        </div>
                      </div>
                    </div>
                    <!-- End Total -->
                  </div>
                </form>
              
            
              
                <!-- JS Front -->
                <script src="../../assets/js/components/hs.quantity-counter.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // initialization of quantity counter
                    $.HSCore.components.HSQantityCounter.init('.js-quantity');
                  });
                </script>
              
            

Checkout form #1

Order summary

Image Description 1

Hoodie

Small
$29
Image Description 1

Snapback cap

$9


Subtotal

$38

Shipping

$4.58

Total

$44.58

Billing address

Payment method

Return to cart
              
                <div class="row">
                  <div class="col-lg-4 order-lg-2 mb-9 mb-lg-0">
                    <!-- Title -->
                    <div class="mb-4">
                      <h2 class="h5">Order summary</h2>
                    </div>
                    <!-- End Title -->

                    <!-- Order Summary -->
                    <div class="card shadow-sm">
                      <div class="card-body p-5">
                        <!-- Product -->
                        <div class="media align-items-center mb-5">
                          <div class="u-avatar position-relative mr-3">
                            <img class="img-fluid rounded" src="../../assets/img/100x100/img14.jpg" alt="Image Description">
                            <span class="badge badge-sm badge-primary badge-pos rounded-circle">1</span>
                          </div>
                          <div class="media-body">
                            <h2 class="h6 mb-0">Hoodie</h2>
                            <small class="d-block text-secondary">Small</small>
                          </div>
                          <div class="media-body text-right">
                            <span>$29</span>
                          </div>
                        </div>
                        <!-- End Product -->

                        <!-- Product -->
                        <div class="media align-items-center">
                          <div class="u-avatar position-relative mr-3">
                            <img class="img-fluid rounded" src="../../assets/img/100x100/img13.jpg" alt="Image Description">
                            <span class="badge badge-sm badge-primary badge-pos rounded-circle">1</span>
                          </div>
                          <div class="media-body">
                            <h2 class="h6 mb-0">Snapback cap</h2>
                          </div>
                          <div class="media-body text-right">
                            <span>$9</span>
                          </div>
                        </div>
                        <!-- End Product -->

                        <hr class="my-5">

                        <!-- Input -->
                        <form class="js-validate">
                          <label class="sr-only" for="discountSrEmail">Discount</label>
                          <div class="input-group">
                            <input type="text" class="form-control" name="name" id="discountSrEmail" placeholder="Discount" aria-label="Discount" aria-describedby="discountEmailButton">
                            <div class="input-group-append">
                              <button type="submit" class="btn btn-primary" id="discountEmailButton">Apply</button>
                            </div>
                          </div>
                        </form>
                        <!-- End Input -->

                        <hr class="my-5">

                        <!-- Total -->
                        <div class="media align-items-center">
                          <h3 class="h6 text-secondary mr-3">Subtotal</h3>
                          <div class="media-body text-right">
                            <span>$38</span>
                          </div>
                        </div>

                        <div class="media align-items-center">
                          <h3 class="h6 text-secondary mr-3">Shipping</h3>
                          <div class="media-body text-right">
                            <span>$4.58</span>
                          </div>
                        </div>
                        <!-- End Total -->

                        <hr class="my-5">

                        <!-- Total -->
                        <div class="media align-items-center">
                          <h3 class="h6 text-secondary mr-3">Total</h3>
                          <div class="media-body text-right">
                            <span class="font-weight-semi-bold">$44.58</span>
                          </div>
                        </div>
                        <!-- End Total -->
                      </div>
                    </div>
                    <!-- End Order Summary -->
                  </div>

                  <div class="col-lg-8 order-lg-1">
                    <form class="js-validate">
                      <!-- Title -->
                      <div class="mb-4">
                        <h2 class="h5">Billing address</h2>
                      </div>
                      <!-- End Title -->

                      <!-- Billing Form -->
                      <div class="row mb-9">
                        <div class="col-md-6">
                          <!-- Input -->
                          <div class="js-form-message mb-6">
                            <label class="form-label">
                              First name
                              <span class="text-danger">*</span>
                            </label>

                            <input type="text" class="form-control" name="firstName" name="cardHolder" placeholder="Jack" aria-label="Jack" required
                                   data-msg="Please enter your frist name."
                                   data-error-class="u-has-error"
                                   data-success-class="u-has-success">
                          </div>
                          <!-- End Input -->
                        </div>

                        <div class="col-md-6">
                          <!-- Input -->
                          <div class="js-form-message mb-6">
                            <label class="form-label">
                              Last name
                              <span class="text-danger">*</span>
                            </label>

                            <input type="text" class="form-control" name="lastName" placeholder="Wayley" aria-label="Wayley" required
                                   data-msg="Please enter your last name."
                                   data-error-class="u-has-error"
                                   data-success-class="u-has-success">
                          </div>
                          <!-- End Input -->
                        </div>

                        <div class="w-100"></div>

                        <div class="col-md-6">
                          <!-- Input -->
                          <div class="js-form-message mb-6">
                            <label class="form-label">
                              Email address
                              <span class="text-danger">*</span>
                            </label>

                            <input type="email" class="form-control" name="emailAddress" placeholder="jackwayley@gmail.com" aria-label="jackwayley@gmail.com" required
                                   data-msg="Please enter a valid email address."
                                   data-error-class="u-has-error"
                                   data-success-class="u-has-success">
                          </div>
                          <!-- End Input -->
                        </div>

                        <div class="col-md-6">
                          <!-- Input -->
                          <div class="js-form-message mb-6">
                            <label class="form-label">
                              Phone
                            </label>

                            <input type="text" class="form-control" placeholder="+1 (062) 109-9222" aria-label="+1 (062) 109-9222"
                                   data-msg="Please enter your last name."
                                   data-error-class="u-has-error"
                                   data-success-class="u-has-success">
                          </div>
                          <!-- End Input -->
                        </div>

                        <div class="w-100"></div>

                        <div class="col-md-8">
                          <!-- Input -->
                          <div class="js-form-message mb-6">
                            <label class="form-label">
                              Street address
                              <span class="text-danger">*</span>
                            </label>

                            <input type="text" class="form-control" name="streetAddress" placeholder="470 Lucy Forks" aria-label="470 Lucy Forks" required
                                   data-msg="Please enter a valid address."
                                   data-error-class="u-has-error"
                                   data-success-class="u-has-success">
                          </div>
                          <!-- End Input -->
                        </div>

                        <div class="col-md-4">
                          <!-- Input -->
                          <div class="js-form-message mb-6">
                            <label class="form-label">
                              Apt, suite, etc.
                            </label>

                            <input type="text" class="form-control" placeholder="YC7B 3UT" aria-label="YC7B 3UT"
                                   data-msg="Please enter a valid address."
                                   data-error-class="u-has-error"
                                   data-success-class="u-has-success">
                          </div>
                          <!-- End Input -->
                        </div>

                        <div class="col-md-12">
                          <!-- Input -->
                          <div class="js-form-message mb-6">
                            <label class="form-label">
                              City
                              <span class="text-danger">*</span>
                            </label>

                            <input type="text" class="form-control" name="cityAddress" placeholder="London" aria-label="London" required
                                   data-msg="Please enter a valid address."
                                   data-error-class="u-has-error"
                                   data-success-class="u-has-success">
                          </div>
                          <!-- End Input -->
                        </div>

                        <div class="w-100"></div>

                        <div class="col-md-6">
                          <!-- Input -->
                          <div class="mb-6">
                            <label class="form-label">
                              Country
                              <span class="text-danger">*</span>
                            </label>

                            <select class="form-control custom-select" required
                                data-msg="Please select country."
                                data-error-class="u-has-error"
                                data-success-class="u-has-success">
                              <option value="">Select country</option>
                              <option value="AF">Afghanistan</option>
                              <option value="AX">Ã…land Islands</option>
                              <option value="AL">Albania</option>
                              <option value="DZ">Algeria</option>
                              <option value="AS">American Samoa</option>
                              <option value="AD">Andorra</option>
                              <option value="AO">Angola</option>
                              <option value="AI">Anguilla</option>
                              <option value="AQ">Antarctica</option>
                              <option value="AG">Antigua and Barbuda</option>
                              <option value="AR">Argentina</option>
                              <option value="AM">Armenia</option>
                              <option value="AW">Aruba</option>
                              <option value="AU">Australia</option>
                              <option value="AT">Austria</option>
                              <option value="AZ">Azerbaijan</option>
                              <option value="BS">Bahamas</option>
                              <option value="BH">Bahrain</option>
                              <option value="BD">Bangladesh</option>
                              <option value="BB">Barbados</option>
                              <option value="BY">Belarus</option>
                              <option value="BE">Belgium</option>
                              <option value="BZ">Belize</option>
                              <option value="BJ">Benin</option>
                              <option value="BM">Bermuda</option>
                              <option value="BT">Bhutan</option>
                              <option value="BO">Bolivia, Plurinational State of</option>
                              <option value="BQ">Bonaire, Sint Eustatius and Saba</option>
                              <option value="BA">Bosnia and Herzegovina</option>
                              <option value="BW">Botswana</option>
                              <option value="BV">Bouvet Island</option>
                              <option value="BR">Brazil</option>
                              <option value="IO">British Indian Ocean Territory</option>
                              <option value="BN">Brunei Darussalam</option>
                              <option value="BG">Bulgaria</option>
                              <option value="BF">Burkina Faso</option>
                              <option value="BI">Burundi</option>
                              <option value="KH">Cambodia</option>
                              <option value="CM">Cameroon</option>
                              <option value="CA">Canada</option>
                              <option value="CV">Cape Verde</option>
                              <option value="KY">Cayman Islands</option>
                              <option value="CF">Central African Republic</option>
                              <option value="TD">Chad</option>
                              <option value="CL">Chile</option>
                              <option value="CN">China</option>
                              <option value="CX">Christmas Island</option>
                              <option value="CC">Cocos (Keeling) Islands</option>
                              <option value="CO">Colombia</option>
                              <option value="KM">Comoros</option>
                              <option value="CG">Congo</option>
                              <option value="CD">Congo, the Democratic Republic of the</option>
                              <option value="CK">Cook Islands</option>
                              <option value="CR">Costa Rica</option>
                              <option value="CI">Côte d'Ivoire</option>
                              <option value="HR">Croatia</option>
                              <option value="CU">Cuba</option>
                              <option value="CW">Curaçao</option>
                              <option value="CY">Cyprus</option>
                              <option value="CZ">Czech Republic</option>
                              <option value="DK">Denmark</option>
                              <option value="DJ">Djibouti</option>
                              <option value="DM">Dominica</option>
                              <option value="DO">Dominican Republic</option>
                              <option value="EC">Ecuador</option>
                              <option value="EG">Egypt</option>
                              <option value="SV">El Salvador</option>
                              <option value="GQ">Equatorial Guinea</option>
                              <option value="ER">Eritrea</option>
                              <option value="EE">Estonia</option>
                              <option value="ET">Ethiopia</option>
                              <option value="FK">Falkland Islands (Malvinas)</option>
                              <option value="FO">Faroe Islands</option>
                              <option value="FJ">Fiji</option>
                              <option value="FI">Finland</option>
                              <option value="FR">France</option>
                              <option value="GF">French Guiana</option>
                              <option value="PF">French Polynesia</option>
                              <option value="TF">French Southern Territories</option>
                              <option value="GA">Gabon</option>
                              <option value="GM">Gambia</option>
                              <option value="GE">Georgia</option>
                              <option value="DE">Germany</option>
                              <option value="GH">Ghana</option>
                              <option value="GI">Gibraltar</option>
                              <option value="GR">Greece</option>
                              <option value="GL">Greenland</option>
                              <option value="GD">Grenada</option>
                              <option value="GP">Guadeloupe</option>
                              <option value="GU">Guam</option>
                              <option value="GT">Guatemala</option>
                              <option value="GG">Guernsey</option>
                              <option value="GN">Guinea</option>
                              <option value="GW">Guinea-Bissau</option>
                              <option value="GY">Guyana</option>
                              <option value="HT">Haiti</option>
                              <option value="HM">Heard Island and McDonald Islands</option>
                              <option value="VA">Holy See (Vatican City State)</option>
                              <option value="HN">Honduras</option>
                              <option value="HK">Hong Kong</option>
                              <option value="HU">Hungary</option>
                              <option value="IS">Iceland</option>
                              <option value="IN">India</option>
                              <option value="ID">Indonesia</option>
                              <option value="IR">Iran, Islamic Republic of</option>
                              <option value="IQ">Iraq</option>
                              <option value="IE">Ireland</option>
                              <option value="IM">Isle of Man</option>
                              <option value="IL">Israel</option>
                              <option value="IT">Italy</option>
                              <option value="JM">Jamaica</option>
                              <option value="JP">Japan</option>
                              <option value="JE">Jersey</option>
                              <option value="JO">Jordan</option>
                              <option value="KZ">Kazakhstan</option>
                              <option value="KE">Kenya</option>
                              <option value="KI">Kiribati</option>
                              <option value="KP">Korea, Democratic People's Republic of</option>
                              <option value="KR">Korea, Republic of</option>
                              <option value="KW">Kuwait</option>
                              <option value="KG">Kyrgyzstan</option>
                              <option value="LA">Lao People's Democratic Republic</option>
                              <option value="LV">Latvia</option>
                              <option value="LB">Lebanon</option>
                              <option value="LS">Lesotho</option>
                              <option value="LR">Liberia</option>
                              <option value="LY">Libya</option>
                              <option value="LI">Liechtenstein</option>
                              <option value="LT">Lithuania</option>
                              <option value="LU">Luxembourg</option>
                              <option value="MO">Macao</option>
                              <option value="MK">Macedonia, the former Yugoslav Republic of</option>
                              <option value="MG">Madagascar</option>
                              <option value="MW">Malawi</option>
                              <option value="MY">Malaysia</option>
                              <option value="MV">Maldives</option>
                              <option value="ML">Mali</option>
                              <option value="MT">Malta</option>
                              <option value="MH">Marshall Islands</option>
                              <option value="MQ">Martinique</option>
                              <option value="MR">Mauritania</option>
                              <option value="MU">Mauritius</option>
                              <option value="YT">Mayotte</option>
                              <option value="MX">Mexico</option>
                              <option value="FM">Micronesia, Federated States of</option>
                              <option value="MD">Moldova, Republic of</option>
                              <option value="MC">Monaco</option>
                              <option value="MN">Mongolia</option>
                              <option value="ME">Montenegro</option>
                              <option value="MS">Montserrat</option>
                              <option value="MA">Morocco</option>
                              <option value="MZ">Mozambique</option>
                              <option value="MM">Myanmar</option>
                              <option value="NA">Namibia</option>
                              <option value="NR">Nauru</option>
                              <option value="NP">Nepal</option>
                              <option value="NL">Netherlands</option>
                              <option value="NC">New Caledonia</option>
                              <option value="NZ">New Zealand</option>
                              <option value="NI">Nicaragua</option>
                              <option value="NE">Niger</option>
                              <option value="NG">Nigeria</option>
                              <option value="NU">Niue</option>
                              <option value="NF">Norfolk Island</option>
                              <option value="MP">Northern Mariana Islands</option>
                              <option value="NO">Norway</option>
                              <option value="OM">Oman</option>
                              <option value="PK">Pakistan</option>
                              <option value="PW">Palau</option>
                              <option value="PS">Palestinian Territory, Occupied</option>
                              <option value="PA">Panama</option>
                              <option value="PG">Papua New Guinea</option>
                              <option value="PY">Paraguay</option>
                              <option value="PE">Peru</option>
                              <option value="PH">Philippines</option>
                              <option value="PN">Pitcairn</option>
                              <option value="PL">Poland</option>
                              <option value="PT">Portugal</option>
                              <option value="PR">Puerto Rico</option>
                              <option value="QA">Qatar</option>
                              <option value="RE">Réunion</option>
                              <option value="RO">Romania</option>
                              <option value="RU">Russian Federation</option>
                              <option value="RW">Rwanda</option>
                              <option value="BL">Saint Barthélemy</option>
                              <option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
                              <option value="KN">Saint Kitts and Nevis</option>
                              <option value="LC">Saint Lucia</option>
                              <option value="MF">Saint Martin (French part)</option>
                              <option value="PM">Saint Pierre and Miquelon</option>
                              <option value="VC">Saint Vincent and the Grenadines</option>
                              <option value="WS">Samoa</option>
                              <option value="SM">San Marino</option>
                              <option value="ST">Sao Tome and Principe</option>
                              <option value="SA">Saudi Arabia</option>
                              <option value="SN">Senegal</option>
                              <option value="RS">Serbia</option>
                              <option value="SC">Seychelles</option>
                              <option value="SL">Sierra Leone</option>
                              <option value="SG">Singapore</option>
                              <option value="SX">Sint Maarten (Dutch part)</option>
                              <option value="SK">Slovakia</option>
                              <option value="SI">Slovenia</option>
                              <option value="SB">Solomon Islands</option>
                              <option value="SO">Somalia</option>
                              <option value="ZA">South Africa</option>
                              <option value="GS">South Georgia and the South Sandwich Islands</option>
                              <option value="SS">South Sudan</option>
                              <option value="ES">Spain</option>
                              <option value="LK">Sri Lanka</option>
                              <option value="SD">Sudan</option>
                              <option value="SR">Suriname</option>
                              <option value="SJ">Svalbard and Jan Mayen</option>
                              <option value="SZ">Swaziland</option>
                              <option value="SE">Sweden</option>
                              <option value="CH">Switzerland</option>
                              <option value="SY">Syrian Arab Republic</option>
                              <option value="TW">Taiwan, Province of China</option>
                              <option value="TJ">Tajikistan</option>
                              <option value="TZ">Tanzania, United Republic of</option>
                              <option value="TH">Thailand</option>
                              <option value="TL">Timor-Leste</option>
                              <option value="TG">Togo</option>
                              <option value="TK">Tokelau</option>
                              <option value="TO">Tonga</option>
                              <option value="TT">Trinidad and Tobago</option>
                              <option value="TN">Tunisia</option>
                              <option value="TR">Turkey</option>
                              <option value="TM">Turkmenistan</option>
                              <option value="TC">Turks and Caicos Islands</option>
                              <option value="TV">Tuvalu</option>
                              <option value="UG">Uganda</option>
                              <option value="UA">Ukraine</option>
                              <option value="AE">United Arab Emirates</option>
                              <option value="GB">United Kingdom</option>
                              <option value="US">United States</option>
                              <option value="UM">United States Minor Outlying Islands</option>
                              <option value="UY">Uruguay</option>
                              <option value="UZ">Uzbekistan</option>
                              <option value="VU">Vanuatu</option>
                              <option value="VE">Venezuela, Bolivarian Republic of</option>
                              <option value="VN">Viet Nam</option>
                              <option value="VG">Virgin Islands, British</option>
                              <option value="VI">Virgin Islands, U.S.</option>
                              <option value="WF">Wallis and Futuna</option>
                              <option value="EH">Western Sahara</option>
                              <option value="YE">Yemen</option>
                              <option value="ZM">Zambia</option>
                              <option value="ZW">Zimbabwe</option>
                            </select>
                          </div>
                          <!-- End Input -->
                        </div>

                        <div class="col-md-6">
                          <!-- Input -->
                          <div class="js-form-message mb-6">
                            <label class="form-label">
                              Postcode/Zip
                              <span class="text-danger">*</span>
                            </label>

                            <input type="text" class="form-control" name="postcode" placeholder="99999" aria-label="99999" required
                                   data-msg="Please enter a postcode or zip code."
                                   data-error-class="u-has-error"
                                   data-success-class="u-has-success">
                          </div>
                          <!-- End Input -->
                        </div>
                      </div>
                      <!-- End Billing Form -->

                      <!-- Title -->
                      <div class="mb-4">
                        <h2 class="h5">Payment method</h2>
                      </div>
                      <!-- End Title -->

                      <!-- Button Group -->
                      <div class="btn-group btn-group-toggle mb-6">
                        <a class="js-animation-link btn btn-sm btn-outline-secondary btn-sm-wide active" href="javascript:;"
                           data-target="#creditCard"
                           data-link-group="paymentMethods"
                           data-animation-in="slideInUp">
                          Credit Card
                        </a>
                        <a class="js-animation-link btn btn-sm btn-outline-secondary btn-sm-wide" href="javascript:;"
                           data-target="#payPal"
                           data-link-group="paymentMethods"
                           data-animation-in="slideInUp">
                          PayPal
                        </a>
                      </div>
                      <!-- End Button Group -->

                      <!-- Credit Card -->
                      <div id="creditCard" data-target-group="paymentMethods">
                        <!-- Input -->
                        <div class="js-form-message mb-6">
                          <label class="form-label">
                            Card number
                          </label>

                          <input type="text" class="form-control" name="cardNumber" placeholder="**** **** **** ***" aria-label="**** **** **** ***" required
                                 data-msg="Please enter a valid card number."
                                 data-error-class="u-has-error"
                                 data-success-class="u-has-success">
                        </div>
                        <!-- End Input -->

                        <div class="row">
                          <div class="col-md-8">
                            <!-- Input -->
                            <div class="js-form-message mb-6">
                              <label class="form-label">
                                Card holder
                              </label>

                              <input type="text" class="form-control" placeholder="Jack Wayley" aria-label="Jack Wayley" required
                                     data-msg="Please enter a valid card holder."
                                     data-error-class="u-has-error"
                                     data-success-class="u-has-success">
                            </div>
                            <!-- End Input -->
                          </div>

                          <div class="col-md-2">
                            <!-- Input -->
                            <div class="js-form-message mb-6">
                              <label class="form-label">
                                Expiration
                              </label>

                              <input type="text" class="form-control" name="cardExpirationDate" placeholder="MM/YY" aria-label="MM/YY" required
                                     data-msg="Please enter a valid date."
                                     data-error-class="u-has-error"
                                     data-success-class="u-has-success">
                            </div>
                            <!-- End Input -->
                          </div>

                          <div class="col-md-2">
                            <!-- Input -->
                            <div class="js-form-message mb-6">
                              <label class="form-label">
                                CVC
                              </label>

                              <input type="text" class="form-control" name="cardCVC" placeholder="***" aria-label="***" required
                                     data-msg="Please enter a valid CVC number."
                                     data-error-class="u-has-error"
                                     data-success-class="u-has-success">
                            </div>
                            <!-- End Input -->
                          </div>
                        </div>

                        <!-- Button -->
                        <div class="d-flex justify-content-between align-items-center">
                          <a href="#"><span class="fas fa-angle-left mr-2"></span> Return to cart</a>
                          <button type="submit" class="btn btn-primary transition-3d-hover">Place order</button>
                        </div>
                        <!-- End Button -->
                      </div>
                      <!-- End Credit Card -->

                      <!-- Credit Card -->
                      <div id="payPal" style="display: none; opacity: 0;" data-target-group="paymentMethods">
                        <button type="submit" class="btn btn-block btn-warning transition-3d-hover">
                          Pay with
                          <img src="../../assets/img/logos/paypal.png" style="width: 70px;" alt="PayPal logo">
                        </button>
                      </div>
                      <!-- End Credit Card -->
                    </form>
                  </div>
                </div>
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.validation.js"></script>
                <script src="../../assets/js/components/hs.quantity-counter.js"></script>
                <script src="../../assets/js/components/hs.show-animation.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // initialization of form validation
                    $.HSCore.components.HSValidation.init('.js-validate');

                    // initialization of quantity counter
                    $.HSCore.components.HSQantityCounter.init('.js-quantity');

                    // initialization of show animations
                    $.HSCore.components.HSShowAnimation.init('.js-animation-link');
                  });
                </script>
              
            

Upload picture #1

Image Description
              
                <!-- Update Avatar Form -->
                <form class="media align-items-center">
                  <div class="u-lg-avatar mr-3">
                    <img class="img-fluid rounded-circle" src="../../assets/img/160x160/img2.jpg" alt="Image Description">
                  </div>

                  <div class="media-body">
                    <label class="btn btn-sm btn-primary transition-3d-hover file-attachment-btn mb-1 mb-sm-0 mr-1" for="fileAttachmentBtn">
                      Upload New Picture
                      <input id="fileAttachmentBtn" name="file-attachment" type="file" class="file-attachment-btn__label">
                    </label>

                    <button type="submit" class="btn btn-sm btn-soft-secondary transition-3d-hover mb-1 mb-sm-0">Delete</button>
                  </div>
                </form>
                <!-- End Update Avatar Form -->
              
            

Upload picture #1

              
                <!-- File Attachment Input -->
                <label class="file-attachment-input mb-7" for="imagesAttachmentInput">
                  <img class="js-svg-injector max-width-10 mb-3" src="../../assets/svg/illustrations/add-file.svg" alt="SVG"
                       data-parent="#uploadForm">
                  <span class="d-block mb-2">Browse your device and upload images</span>
                  <small class="d-block text-muted">Maximum file size is 2MB</small>
                  <input id="imagesAttachmentInput" name="images-attachment" type="file" class="js-custom-file-attach file-attachment-input__label"
                         data-result-text-target="#fileUploadText">
                  <span id="fileUploadText"></span>
                </label>
                <!-- End File Attachment Input -->

                <button type="submit" class="btn btn-primary btn-block transition-3d-hover">Submit</button>
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/js/components/hs.file-attach.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // initialization of file attach module
                    $.HSCore.components.HSFileAttach.init('.js-custom-file-attach');
                  });
                </script>
              
            

User info #1

Displayed on your public profile, notifications and other places.
We'll never share your email with anyone else.
Your home page, blog or company site, e.g. http://example.com
+ Add phone number
              
                <!-- Personal Info Form -->
                <form class="js-validate">
                  <div class="row">
                    <!-- Input -->
                    <div class="col-sm-6 mb-6">
                      <div class="js-form-message">
                        <label id="nameLabel" class="form-label">
                          Name
                          <span class="text-danger">*</span>
                        </label>

                        <div class="js-focus-state form-group">
                          <input type="text" class="form-control" name="name" value="Natalie Curtis" placeholder="Enter your name" aria-label="Enter your name" required aria-describedby="nameLabel"
                                 data-msg="Please enter your name."
                                 data-error-class="u-has-error"
                                 data-success-class="u-has-success">
                          <small class="form-text text-muted">Displayed on your public profile, notifications and other places.</small>
                        </div>
                      </div>
                    </div>
                    <!-- End Input -->

                    <!-- Input -->
                    <div class="col-sm-6 mb-6">
                      <div class="js-form-message">
                        <label id="usernameLabel" class="form-label">
                          Username
                          <span class="text-danger">*</span>
                        </label>

                        <div class="js-focus-state form-group">
                          <input type="text" class="form-control" name="username" value="natalie" placeholder="Enter your username" aria-label="Enter your username" required aria-describedby="usernameLabel"
                                 data-msg="Please enter your username."
                                 data-error-class="u-has-error"
                                 data-success-class="u-has-success">
                        </div>
                      </div>
                    </div>
                    <!-- End Input -->
                  </div>

                  <label class="form-label">
                    Birth date
                    <span class="text-danger">*</span>
                  </label>

                  <div class="row">
                    <!-- Input -->
                    <div class="col-md-6 mb-3 mb-sm-6">
                      <div class="js-form-message">
                        <div class="js-focus-state form-group">
                          <select class="form-control custom-select" required
                              data-msg="Please select month."
                              data-error-class="u-has-error"
                              data-success-class="u-has-success">
                            <option value="">Select month</option>
                            <option value="birthMonthSelect1">January</option>
                            <option value="birthMonthSelect2">February</option>
                            <option value="birthMonthSelect3">March</option>
                            <option value="birthMonthSelect4" selected="selected">April</option>
                            <option value="birthMonthSelect5">May</option>
                            <option value="birthMonthSelect6">June</option>
                            <option value="birthMonthSelect7">July</option>
                            <option value="birthMonthSelect8">August</option>
                            <option value="birthMonthSelect9">September</option>
                            <option value="birthMonthSelect10">October</option>
                            <option value="birthMonthSelect11">November</option>
                            <option value="birthMonthSelect12">December</option>
                          </select>
                        </div>
                      </div>
                    </div>
                    <!-- End Input -->

                    <!-- Input -->
                    <div class="col-sm-4 col-md-2 mb-3 mb-sm-6">
                      <div class="js-form-message">
                        <div class="js-focus-state form-group">
                          <select class="form-control custom-select" required
                              data-msg="Please select date."
                              data-error-class="u-has-error"
                              data-success-class="u-has-success">
                            <option value="">Select date</option>
                            <option value="birthDateSelect1">1</option>
                            <option value="birthDateSelect2">2</option>
                            <option value="birthDateSelect3">3</option>
                            <option value="birthDateSelect4">4</option>
                            <option value="birthDateSelect5">5</option>
                            <option value="birthDateSelect6">6</option>
                            <option value="birthDateSelect7">7</option>
                            <option value="birthDateSelect8">8</option>
                            <option value="birthDateSelect9">9</option>
                            <option value="birthDateSelect10">10</option>
                            <option value="birthDateSelect11">11</option>
                            <option value="birthDateSelect12" selected="selected">12</option>
                            <option value="birthDateSelect13">13</option>
                            <option value="birthDateSelect14">14</option>
                            <option value="birthDateSelect15">15</option>
                            <option value="birthDateSelect16">16</option>
                            <option value="birthDateSelect17">17</option>
                            <option value="birthDateSelect18">18</option>
                            <option value="birthDateSelect19">19</option>
                            <option value="birthDateSelect20">20</option>
                            <option value="birthDateSelect21">21</option>
                            <option value="birthDateSelect22">22</option>
                            <option value="birthDateSelect23">23</option>
                            <option value="birthDateSelect24">24</option>
                            <option value="birthDateSelect25">25</option>
                            <option value="birthDateSelect26">26</option>
                            <option value="birthDateSelect27">27</option>
                            <option value="birthDateSelect28">28</option>
                            <option value="birthDateSelect29">29</option>
                            <option value="birthDateSelect30">30</option>
                            <option value="birthDateSelect31">31</option>
                          </select>
                        </div>
                      </div>
                    </div>
                    <!-- End Input -->

                    <!-- Input -->
                    <div class="col-sm-4 col-md-2 mb-3 mb-sm-6">
                      <div class="js-form-message">
                        <div class="js-focus-state form-group">
                          <select class="form-control custom-select" required
                              data-msg="Please select year."
                              data-error-class="u-has-error"
                              data-success-class="u-has-success">
                            <option value="">Select year</option>
                            <option value="birthYearSelect1900">1900</option>
                            <option value="birthYearSelect1901">1901</option>
                            <option value="birthYearSelect1902">1902</option>
                            <option value="birthYearSelect1903">1903</option>
                            <option value="birthYearSelect1904">1904</option>
                            <option value="birthYearSelect1905">1905</option>
                            <option value="birthYearSelect1906">1906</option>
                            <option value="birthYearSelect1907">1907</option>
                            <option value="birthYearSelect1908">1908</option>
                            <option value="birthYearSelect1909">1909</option>
                            <option value="birthYearSelect1910">1910</option>
                            <option value="birthYearSelect1911">1911</option>
                            <option value="birthYearSelect1912">1912</option>
                            <option value="birthYearSelect1913">1913</option>
                            <option value="birthYearSelect1914">1914</option>
                            <option value="birthYearSelect1915">1915</option>
                            <option value="birthYearSelect1916">1916</option>
                            <option value="birthYearSelect1917">1917</option>
                            <option value="birthYearSelect1918">1918</option>
                            <option value="birthYearSelect1919">1919</option>
                            <option value="birthYearSelect1920">1920</option>
                            <option value="birthYearSelect1921">1921</option>
                            <option value="birthYearSelect1922">1922</option>
                            <option value="birthYearSelect1923">1923</option>
                            <option value="birthYearSelect1924">1924</option>
                            <option value="birthYearSelect1925">1925</option>
                            <option value="birthYearSelect1926">1926</option>
                            <option value="birthYearSelect1927">1927</option>
                            <option value="birthYearSelect1928">1928</option>
                            <option value="birthYearSelect1929">1929</option>
                            <option value="birthYearSelect1930">1930</option>
                            <option value="birthYearSelect1931">1931</option>
                            <option value="birthYearSelect1932">1932</option>
                            <option value="birthYearSelect1933">1933</option>
                            <option value="birthYearSelect1934">1934</option>
                            <option value="birthYearSelect1935">1935</option>
                            <option value="birthYearSelect1936">1936</option>
                            <option value="birthYearSelect1937">1937</option>
                            <option value="birthYearSelect1938">1938</option>
                            <option value="birthYearSelect1939">1939</option>
                            <option value="birthYearSelect1940">1940</option>
                            <option value="birthYearSelect1941">1941</option>
                            <option value="birthYearSelect1942">1942</option>
                            <option value="birthYearSelect1943">1943</option>
                            <option value="birthYearSelect1944">1944</option>
                            <option value="birthYearSelect1945">1945</option>
                            <option value="birthYearSelect1946">1946</option>
                            <option value="birthYearSelect1947">1947</option>
                            <option value="birthYearSelect1948">1948</option>
                            <option value="birthYearSelect1949">1949</option>
                            <option value="birthYearSelect1950">1950</option>
                            <option value="birthYearSelect1951">1951</option>
                            <option value="birthYearSelect1952">1952</option>
                            <option value="birthYearSelect1953">1953</option>
                            <option value="birthYearSelect1954">1954</option>
                            <option value="birthYearSelect1955">1955</option>
                            <option value="birthYearSelect1956">1956</option>
                            <option value="birthYearSelect1957">1957</option>
                            <option value="birthYearSelect1958">1958</option>
                            <option value="birthYearSelect1959">1959</option>
                            <option value="birthYearSelect1960">1960</option>
                            <option value="birthYearSelect1961">1961</option>
                            <option value="birthYearSelect1962">1962</option>
                            <option value="birthYearSelect1963">1963</option>
                            <option value="birthYearSelect1964">1964</option>
                            <option value="birthYearSelect1965">1965</option>
                            <option value="birthYearSelect1966">1966</option>
                            <option value="birthYearSelect1967">1967</option>
                            <option value="birthYearSelect1968">1968</option>
                            <option value="birthYearSelect1969">1969</option>
                            <option value="birthYearSelect1970">1970</option>
                            <option value="birthYearSelect1971">1971</option>
                            <option value="birthYearSelect1972">1972</option>
                            <option value="birthYearSelect1973">1973</option>
                            <option value="birthYearSelect1974">1974</option>
                            <option value="birthYearSelect1975">1975</option>
                            <option value="birthYearSelect1976">1976</option>
                            <option value="birthYearSelect1977">1977</option>
                            <option value="birthYearSelect1978">1978</option>
                            <option value="birthYearSelect1979">1979</option>
                            <option value="birthYearSelect1980">1980</option>
                            <option value="birthYearSelect1981">1981</option>
                            <option value="birthYearSelect1982">1982</option>
                            <option value="birthYearSelect1983">1983</option>
                            <option value="birthYearSelect1984">1984</option>
                            <option value="birthYearSelect1985">1985</option>
                            <option value="birthYearSelect1986" selected="selected">1986</option>
                            <option value="birthYearSelect1987">1987</option>
                            <option value="birthYearSelect1988">1988</option>
                            <option value="birthYearSelect1989">1989</option>
                            <option value="birthYearSelect1990">1990</option>
                            <option value="birthYearSelect1991">1991</option>
                            <option value="birthYearSelect1992">1992</option>
                            <option value="birthYearSelect1993">1993</option>
                            <option value="birthYearSelect1994">1994</option>
                            <option value="birthYearSelect1995">1995</option>
                            <option value="birthYearSelect1996">1996</option>
                            <option value="birthYearSelect1997">1997</option>
                            <option value="birthYearSelect1998">1998</option>
                            <option value="birthYearSelect1999">1999</option>
                            <option value="birthYearSelect2000">2000</option>
                            <option value="birthYearSelect2001">2001</option>
                            <option value="birthYearSelect2002">2002</option>
                            <option value="birthYearSelect2003">2003</option>
                            <option value="birthYearSelect2004">2004</option>
                            <option value="birthYearSelect2005">2005</option>
                            <option value="birthYearSelect2006">2006</option>
                            <option value="birthYearSelect2007">2007</option>
                            <option value="birthYearSelect2008">2008</option>
                            <option value="birthYearSelect2009">2009</option>
                            <option value="birthYearSelect2010">2010</option>
                            <option value="birthYearSelect2011">2011</option>
                            <option value="birthYearSelect2012">2012</option>
                            <option value="birthYearSelect2013">2013</option>
                            <option value="birthYearSelect2014">2014</option>
                            <option value="birthYearSelect2015">2015</option>
                            <option value="birthYearSelect2016">2016</option>
                            <option value="birthYearSelect2017">2017</option>
                          </select>
                        </div>
                      </div>
                    </div>
                    <!-- End Input -->

                    <!-- Input -->
                    <div class="col-sm-4 col-md-2 mb-6">
                      <div class="js-form-message">
                        <div class="js-focus-state form-group">
                          <select class="form-control custom-select" required
                              data-msg="Please select your gender."
                              data-error-class="u-has-error"
                              data-success-class="u-has-success">
                            <option value="">Select gender</option>
                            <option value="genderSelect1" selected>Male</option>
                            <option value="genderSelect2">Female</option>
                            <option value="genderSelect3">Other</option>
                          </select>
                        </div>
                      </div>
                    </div>
                    <!-- End Input -->
                  </div>

                  <div class="row">
                    <!-- Input -->
                    <div class="col-sm-6 mb-6">
                      <div class="js-form-message">
                        <label id="emailLabel" class="form-label">
                          Email address
                          <span class="text-danger">*</span>
                        </label>

                        <div class="form-group">
                          <div class="js-focus-state">
                            <input type="email" class="form-control" name="email" value="natalie.curtis@gmail.com" placeholder="Enter your email address" aria-label="Enter your email address" required aria-describedby="emailLabel"
                                   data-msg="Please enter a valid email address."
                                   data-error-class="u-has-error"
                                   data-success-class="u-has-success">
                          </div>
                          <small class="form-text text-muted">We'll never share your email with anyone else.</small>
                        </div>
                      </div>
                    </div>
                    <!-- End Input -->

                    <!-- Input -->
                    <div class="col-sm-6 mb-6">
                      <div class="js-form-message">
                        <label id="locationLabel" class="form-label">
                          Location
                          <span class="text-danger">*</span>
                        </label>

                        <div class="js-focus-state form-group">
                          <input type="text" class="form-control" name="location" value="London, England" placeholder="Enter your location" aria-label="Enter your location" required aria-describedby="locationLabel"
                                 data-msg="Please enter your location."
                                 data-error-class="u-has-error"
                                 data-success-class="u-has-success">
                        </div>
                      </div>
                    </div>
                    <!-- End Input -->
                  </div>

                  <div class="row">
                    <!-- Input -->
                    <div class="col-sm-6 mb-6">
                      <div class="js-form-message">
                        <label id="organizationLabel" class="form-label">
                          Organization
                          <span class="text-danger">*</span>
                        </label>

                        <div class="js-focus-state form-group">
                          <input type="text" class="form-control" name="organization" value="Pixeel Ltd." placeholder="Enter your organization name" aria-label="Enter your organization name" required aria-describedby="organizationLabel"
                                 data-msg="Please enter your organization name"
                                 data-error-class="u-has-error"
                                 data-success-class="u-has-success">
                        </div>
                      </div>
                    </div>
                    <!-- End Input -->

                    <!-- Input -->
                    <div class="col-sm-6 mb-6">
                      <div class="js-form-message">
                        <label id="websiteLabel" class="form-label">
                          Website
                          <span class="text-danger">*</span>
                        </label>

                        <div class="js-focus-state form-group">
                          <input class="form-control" type="url" name="website" value="https://www.htmlstream.com/natalie" placeholder="Enter your website" aria-label="Enter your website" required aria-describedby="websiteLabel"
                                 data-msg="Password enter a valid website"
                                 data-error-class="u-has-error"
                                 data-success-class="u-has-success">
                          <small class="form-text text-muted">Your home page, blog or company site, e.g. http://example.com</small>
                        </div>
                      </div>
                    </div>
                    <!-- End Input -->
                  </div>

                  <div class="row">
                    <!-- Input -->
                    <div class="col-sm-6 mb-6">
                      <div class="js-form-message">
                        <label id="phoneNumberLabel" class="form-label">
                          Phone number
                          <span class="text-danger">*</span>
                        </label>

                        <div class="js-focus-state form-group">
                          <input class="form-control" type="tel" name="phoneNumber" value="+44 (0161) 347 8854" placeholder="Enter your phone number" aria-label="Enter your phone number" required aria-describedby="phoneNumberLabel"
                                 data-msg="Please enter a valid phone number"
                                 data-error-class="u-has-error"
                                 data-success-class="u-has-success">
                        </div>
                      </div>
                      <a class="d-inline-block u-text-muted" href="#">
                        <span class="mr-1">+</span>
                        Add phone number
                      </a>
                    </div>
                    <!-- End Input -->

                    <!-- Input -->
                    <div class="col-sm-6 mb-6">
                      <div class="js-form-message">
                        <label class="form-label">
                          Preferred language
                          <span class="text-danger">*</span>
                        </label>

                        <div class="js-focus-state form-group">
                          <select class="form-control custom-select" required
                              data-msg="Please select language."
                              data-error-class="u-has-error"
                              data-success-class="u-has-success">
                            <option value="">Select language</option>
                            <option value="languageSelect1" selected>English</option>
                            <option value="languageSelect2">Français</option>
                            <option value="languageSelect3">Deutsch</option>
                            <option value="languageSelect4">Português</option>
                          </select>
                        </div>
                      </div>
                    </div>
                    <!-- End Input -->
                  </div>
                </form>
                <!-- End Personal Info Form -->
              
            

About form #1

About

Tell about yourself in two sentences.

              
                <!-- Personal Info Form -->
                <form class="js-validate">
                  <!-- Title -->
                  <div class="mb-3">
                    <h2 class="h5 mb-0">About</h2>
                    <p>Tell about yourself in two sentences.</p>
                  </div>
                  <!-- End Title -->

                  <div class="mb-6">
                    <label class="form-label">
                      Bio
                    </label>

                    <!-- Text Editor Input -->
                    <div class="u-summernote-editor">
                      <div class="js-summernote-editor" data-height="160"></div>
                    </div>
                    <!-- End Text Editor Input -->
                  </div>

                  <div class="mb-6">
                    <label class="form-label">
                      Skills
                    </label>

                    <!-- Tags Input -->
                    <div class="u-tagsinput">
                      <input type="text" value="HTML5, CSS3, JavaScript, jQuery" data-role="tagsinput">
                    </div>
                    <!-- End Tags Input -->
                  </div>

                  <!-- Buttons -->
                  <button type="submit" class="btn btn-sm btn-primary transition-3d-hover mr-1">Save Changes</button>
                  <button type="submit" class="btn btn-sm btn-soft-secondary transition-3d-hover">Cancel</button>
                  <!-- End Buttons -->
                </form>
                <!-- End Personal Info Form -->
              
            
              
                <link rel="stylesheet" href="../../assets/vendor/summernote/dist/summernote-lite.css">
                <link rel="stylesheet" href="../../assets/vendor/bootstrap-tagsinput/css/bootstrap-tagsinput.css">
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/summernote/dist/summernote-lite.js"></script>
                <script src="../../assets/vendor/bootstrap-tagsinput/js/bootstrap-tagsinput.min.js"></script>

                <!-- JS Implementing Plugins -->
                <script src="../../assets/js/components/hs.summernote-editor.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // initialization of text editors
                    $.HSCore.components.HSSummernoteEditor.init('.js-summernote-editor');
                  });
                </script>
              
            

Experience form #1

Experience

Tell about your work, job, and other experiences.

              
                <!-- Personal Info Form -->
                <form class="js-validate">
                  <!-- Title -->
                  <div class="mb-3">
                    <h2 class="h5 mb-0">Experience</h2>
                    <p>Tell about your work, job, and other experiences.</p>
                  </div>
                  <!-- End Title -->

                  <div class="row">
                    <div class="col-sm-6 mb-6">
                      <!-- Datepicker -->
                      <label class="form-label">From</label>

                      <div id="datepickerWrapperFrom" class="js-focus-state u-datepicker input-group">
                        <div class="input-group-prepend">
                          <span id="calendarFromLabel" class="input-group-text">
                            <span class="fas fa-calendar"></span>
                          </span>
                        </div>
                        <input class="js-range-datepicker form-control bg-white rounded-right" type="text" placeholder="From" aria-label="From" aria-describedby="calendarFromLabel"
                               data-rp-wrapper="#datepickerWrapperFrom"
                               data-rp-date-format="d/m/Y">
                      </div>
                      <!-- End Datepicker -->
                    </div>

                    <div class="col-sm-6 mb-6">
                      <!-- Datepicker -->
                      <label class="form-label">To</label>

                      <div id="datepickerWrapperTo" class="js-focus-state u-datepicker input-group">
                        <div class="input-group-prepend">
                          <span id="calendarToLabel" class="input-group-text">
                            <span class="fas fa-calendar"></span>
                          </span>
                        </div>
                        <input class="js-range-datepicker form-control bg-white rounded-right" type="text" placeholder="To" aria-label="To" aria-describedby="calendarToLabel"
                               data-rp-wrapper="#datepickerWrapperTo"
                               data-rp-date-format="d/m/Y">
                      </div>
                      <!-- End Datepicker -->
                    </div>
                  </div>

                  <div class="row">
                    <div class="col-sm-6 mb-6">
                      <label id="companyLabel" class="form-label">Company</label>

                      <!-- Input -->
                      <div class="input-group">
                        <input type="text" class="form-control" placeholder="Enter your company title" aria-label="Enter your company title" aria-describedby="companyLabel">
                      </div>
                      <!-- End Input -->
                    </div>

                    <div class="col-sm-6 mb-6">
                      <label id="positionLabel" class="form-label">Position</label>

                      <!-- Input -->
                      <div class="input-group">
                        <input type="text" class="form-control" placeholder="Enter your position" aria-label="Enter your position" aria-describedby="positionLabel">
                      </div>
                      <!-- End Input -->
                    </div>
                  </div>

                  <!-- Buttons -->
                  <button type="submit" class="btn btn-sm btn-primary transition-3d-hover mr-1">Save Changes</button>
                  <button type="submit" class="btn btn-sm btn-soft-secondary transition-3d-hover">Cancel</button>
                  <!-- End Buttons -->
                </form>
                <!-- End Personal Info Form -->
              
            
              
                <link rel="stylesheet" href="../../assets/vendor/flatpickr/dist/flatpickr.min.css">
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/flatpickr/dist/flatpickr.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.range-datepicker.js"></script>
                <script src="../../assets/js/components/hs.focus-state.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // initialization of range datepicker
                    $.HSCore.components.HSRangeDatepicker.init('.js-range-datepicker');

                    // initialization of forms
                    $.HSCore.components.HSFocusState.init();
                  });
                </script>
                <!-- JS Front -->
              
            

Social profiles form #1

Social profiles

Add elsewhere links to your profile.

https://dribbble.com/
Add your Dribbble profile name (e.g. AlexBrown)
http://twitter.com/
Add your Twitter username (e.g. alexbrown)
http://www.facebook.com/
Input your Facebook username (e.g. alexbrown)
http://www.behance.net/
Input your Behance username (e.g. alexbrown)
              
                <!-- Title -->
                <div class="mb-5">
                  <h3 class="h5 mb-1">Social profiles</h3>
                  <p>Add elsewhere links to your profile.</p>
                </div>
                <!-- End Title -->

                <!-- Social Profiles Form -->
                <form class="js-validate">
                  <!-- Input Group -->
                  <div class="mb-6">
                    <div class="js-focus-state form-group">
                      <div class="input-group">
                        <div id="dribbleProfileLabel" class="input-group-prepend">
                          <span class="input-group-text">https://dribbble.com/</span>
                        </div>
                        <input type="text" class="form-control" placeholder="Dribbble link" aria-label="Dribbble link" required aria-describedby="dribbleProfileLabel"
                               data-msg="Please enter a valid URL address."
                               data-error-class="u-has-error"
                               data-success-class="u-has-success">
                      </div>
                      <small class="form-text text-muted">Add your Dribbble profile name (e.g. AlexBrown)</small>
                    </div>
                  </div>
                  <!-- End Input Group -->

                  <!-- Input Group -->
                  <div class="mb-6">
                    <div class="js-focus-state form-group">
                      <div class="input-group">
                        <div id="twitterProfileLabel" class="input-group-prepend">
                          <span class="input-group-text">http://twitter.com/</span>
                        </div>
                        <input type="text" class="form-control" placeholder="Twitter profile" aria-label="Twitter profile" required aria-describedby="twitterProfileLabel"
                               data-msg="Please enter a valid URL address."
                               data-error-class="u-has-error"
                               data-success-class="u-has-success">
                      </div>
                      <small class="form-text text-muted">Add your Twitter username (e.g. alexbrown)</small>
                    </div>
                  </div>
                  <!-- End Input Group -->

                  <!-- Input Group -->
                  <div class="mb-6">
                    <div class="js-focus-state form-group">
                      <div class="input-group">
                        <div id="facebookProfileLabel" class="input-group-prepend">
                          <span class="input-group-text">http://www.facebook.com/</span>
                        </div>
                        <input type="text" class="form-control" placeholder="Facebook profile" aria-label="Facebook profile" required aria-describedby="facebookProfileLabel"
                               data-msg="Please enter a valid URL address."
                               data-error-class="u-has-error"
                               data-success-class="u-has-success">
                      </div>
                      <small class="form-text text-muted">Input your Facebook username (e.g. alexbrown)</small>
                    </div>
                  </div>
                  <!-- End Input Group -->

                  <!-- Input Group -->
                  <div class="mb-6">
                    <div class="js-focus-state form-group">
                      <div class="input-group">
                        <div id="behanceProfileLabel" class="input-group-prepend">
                          <span class="input-group-text">http://www.behance.net/</span>
                        </div>
                        <input type="text" class="form-control" placeholder="Behance profile" aria-label="Behance profile" required aria-describedby="behanceProfileLabel"
                               data-msg="Please enter a valid URL address."
                               data-error-class="u-has-error"
                               data-success-class="u-has-success">
                      </div>
                      <small class="form-text text-muted">Input your Behance username (e.g. alexbrown)</small>
                    </div>
                  </div>
                  <!-- End Input Group -->

                  <button type="submit" class="btn btn-sm btn-primary transition-3d-hover mr-1">Update Social Profiles</button>
                  <button type="submit" class="btn btn-sm btn-soft-secondary transition-3d-hover">Cancel</button>
                </form>
                <!-- End Social Profiles Form -->
              
            
              
                <link rel="stylesheet" href="../../assets/vendor/flatpickr/dist/flatpickr.min.css">
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/flatpickr/dist/flatpickr.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.range-datepicker.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // initialization of range datepicker
                    $.HSCore.components.HSRangeDatepicker.init('.js-range-datepicker');
                  });
                </script>
              
            

Change password #1

Password strength:

New password must be 8-20 characters long. Tip: Make it hard to guess (wrong: password123).

              
                <form id="changePasswordForm" class="js-validate">
                  <!-- Input -->
                  <div class="js-form-message mb-6">
                    <label class="form-label">
                      Current password
                    </label>

                    <div class="form-group">
                      <input type="password" class="form-control" name="currentPassword" placeholder="Enter your current password" aria-label="Enter your current password" required
                             data-msg="Password does not match."
                             data-error-class="u-has-error"
                             data-success-class="u-has-success">
                    </div>
                  </div>
                  <!-- End Input -->

                  <!-- Input -->
                  <div class="mb-6">
                    <div class="js-form-message">
                      <label class="form-label">
                        New password
                      </label>

                      <div class="form-group">
                        <input id="newPassword" type="password" class="form-control" name="newPassword" placeholder="Enter your password" aria-label="Enter your password" required
                             data-msg="Please enter your password."
                             data-error-class="u-has-error"
                             data-success-class="u-has-success"
                             data-pwstrength-container="#changePasswordForm"
                             data-pwstrength-progress="#passwordStrengthProgress"
                             data-pwstrength-verdict="#passwordStrengthVerdict"
                             data-pwstrength-progress-extra-classes="bg-white height-4">
                      </div>
                    </div>
                  </div>
                  <!-- End Input -->

                  <!-- Input -->
                  <div class="js-form-message mb-6">
                    <label class="form-label">
                      Confirm password
                    </label>

                    <div class="form-group">
                      <input type="password" class="form-control" name="confirmNewPassword" placeholder="Confirm your password" aria-label="Confirm your password" required
                             data-msg="Password does not match the confirm password."
                             data-error-class="u-has-error"
                             data-success-class="u-has-success">
                    </div>
                  </div>
                  <!-- End Input -->

                  <div class="w-lg-50">
                    <!-- Password Strength -->
                    <div class="mb-6">
                      <div class="d-flex justify-content-between mb-2">
                        <h3 class="h6">Password strength:</h3>
                        <span id="passwordStrengthVerdict"></span>
                      </div>

                      <div id="passwordStrengthProgress" class="mb-2"></div>

                      <p class="small">New password must be 8-20 characters long. Tip: Make it hard to guess (wrong: password123).</p>
                    </div>
                    <!-- End Password Strength -->

                    <!-- Buttons -->
                    <button type="submit" class="btn btn-sm btn-primary transition-3d-hover mr-1">Save Password</button>
                    <button type="submit" class="btn btn-sm btn-soft-secondary transition-3d-hover">Cancel</button>
                    <!-- End Buttons -->
                  </div>
                </form>
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/pwstrength-bootstrap/dist/pwstrength-bootstrap.min.js"></script>
                <script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.focus-state.js"></script>
                <script src="../../assets/js/components/hs.password-strength.js"></script>
                <script src="../../assets/js/components/hs.validation.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // initialization of forms
                    $.HSCore.components.HSFocusState.init();

                    // initialization of password strength module
                    $.HSCore.components.HSPasswordStrength.init('#newPassword');

                    // initialization of form validation
                    $.HSCore.components.HSValidation.init('.js-validate', {
                      rules: {
                        confirmNewPassword: {
                          equalTo: '#newPassword'
                        }
                      }
                    });
                  });
                </script>
              
            

Toggle notifications #1


Send me:




              
                <form>
                  <!-- My Network -->
                  <div class="mb-7">
                    <!-- Title -->
                    <div class="row justify-content-between align-items-end">
                      <div class="col-6">
                        <h2 class="h5 mb-0">My network</h2>
                      </div>
                      <div class="col-6 text-right">
                        <a id="toggleAll1" class="js-toggle-state link-muted" href="javascript:;"
                           data-target="#customSwitch1, #customSwitch2, #customSwitch3, #customSwitch4">
                          <span class="link-muted__toggle-default">Toggle all</span>
                          <span class="link-muted__toggle-toggled">Untoggle all</span>
                        </a>
                      </div>
                    </div>
                    <!-- End Title -->

                    <hr class="mt-2 mb-4">

                    <div class="mb-3">
                      <h3 class="small text-muted">Send me:</h3>
                    </div>

                    <!-- Checkbox Switch -->
                    <div class="custom-control custom-switch">
                      <input type="checkbox" class="custom-control-input" id="customSwitch1">
                      <label class="custom-control-label" for="customSwitch1">
                        <span class="d-block">New for you</span>
                        <small class="d-block text-muted">A weekly email featuring shots from designers you follow</small>
                      </label>
                    </div>
                    <!-- End Checkbox Switch -->

                    <hr class="my-3">

                    <!-- Checkbox Switch -->
                    <div class="custom-control custom-switch">
                      <input type="checkbox" class="custom-control-input" id="customSwitch2" checked>
                      <label class="custom-control-label" for="customSwitch2">
                        <span class="d-block">Account activity <span class="badge badge-success ml-1">New</span></span>
                        <small class="d-block text-muted">Get important notifications about you or activity you've missed</small>
                      </label>
                    </div>
                    <!-- End Checkbox Switch -->

                    <hr class="my-3">

                    <!-- Checkbox Switch -->
                    <div class="custom-control custom-switch">
                      <input type="checkbox" class="custom-control-input" id="customSwitch3">
                      <label class="custom-control-label" for="customSwitch3">
                        <span class="d-block">Meetups near you <span class="badge badge-success ml-1">New</span></span>
                        <small class="d-block text-muted">Get an email when a Dribbble Meetup is posted close to my location</small>
                      </label>
                    </div>
                    <!-- End Checkbox Switch -->

                    <hr class="my-3">

                    <!-- Checkbox Switch -->
                    <div class="custom-control custom-switch">
                      <input type="checkbox" class="custom-control-input" id="customSwitch4" checked>
                      <label class="custom-control-label" for="customSwitch4">
                        <span class="d-block">Opportunities</span>
                        <small class="d-block text-muted">Get a daily email when new design jobs are posted in your area</small>
                      </label>
                    </div>
                    <!-- End Checkbox Switch -->
                  </div>
                  <!-- End My Network -->

                  <button type="submit" class="btn btn-sm btn-primary btn-wide transition-3d-hover">Update Email Notifications</button>
                </form>
              
            
              
                <!-- JS Front -->
                <script src="../../assets/js/components/hs.toggle-state.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // initialization of toggle state
                    $.HSCore.components.HSToggleState.init('.js-toggle-state');
                  });
                </script>
              
            

Checkbox #1

              
                <!-- Radio Checkbox Group -->
                <div class="custom-control custom-radio custom-control-inline checkbox-outline bg-white">
                  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input checkbox-outline__input">
                  <label class="checkbox-outline__label rounded p-1 mb-0" for="customRadioInline1">
                    <img class="max-width-9" src="../../assets/img/100x60/img5.jpg" alt="Image Description">
                  </label>
                </div>
                <div class="custom-control custom-radio custom-control-inline checkbox-outline bg-white">
                  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input checkbox-outline__input">
                  <label class="checkbox-outline__label rounded p-1 mb-0" for="customRadioInline2">
                    <img class="max-width-9" src="../../assets/img/100x60/img4.jpg" alt="Image Description">
                  </label>
                </div>
                <div class="custom-control custom-radio custom-control-inline checkbox-outline bg-white">
                  <input type="radio" id="customRadioInline3" name="customRadioInline1" class="custom-control-input checkbox-outline__input">
                  <label class="checkbox-outline__label rounded p-1 mb-0" for="customRadioInline3">
                    <img class="max-width-9" src="../../assets/img/100x60/img6.jpg" alt="Image Description">
                  </label>
                </div>
                <!-- End Radio Checkbox Group -->
              
            

Checkbox #2

              
                <!-- Radio Checkbox Group -->
                <div class="row mx-gutters-2">
                  <div class="col-6 col-md-3 mb-3 mb-md-0">
                    <div class="custom-control custom-radio custom-control-inline checkbox-outline text-center">
                      <input type="radio" id="typeOfListingRadio1" name="typeOfListingRadio1" class="custom-control-input checkbox-outline__input">
                      <label class="checkbox-outline__label rounded py-3 px-1 mb-0" for="typeOfListingRadio1">
                        <img class="js-svg-injector w-50 mb-3" src="../../assets/svg/flat-icons/small-house.svg" alt="SVG"
                             data-parent="#uploadForm">
                        <span class="d-block">House</span>
                      </label>
                    </div>
                  </div>
                  <div class="col-6 col-md-3 mb-3 mb-md-0">
                    <div class="custom-control custom-radio custom-control-inline checkbox-outline text-center">
                      <input type="radio" id="typeOfListingRadio2" name="typeOfListingRadio1" class="custom-control-input checkbox-outline__input" checked>
                      <label class="checkbox-outline__label rounded py-3 px-1 mb-0" for="typeOfListingRadio2">
                        <img class="js-svg-injector w-50 mb-3" src="../../assets/svg/flat-icons/flat-house.svg" alt="SVG"
                             data-parent="#uploadForm">
                        <span class="d-block">Flat</span>
                      </label>
                    </div>
                  </div>
                  <div class="col-6 col-md-3">
                    <div class="custom-control custom-radio custom-control-inline checkbox-outline text-center">
                      <input type="radio" id="typeOfListingRadio3" name="typeOfListingRadio1" class="custom-control-input checkbox-outline__input">
                      <label class="checkbox-outline__label rounded py-3 px-1 mb-0" for="typeOfListingRadio3">
                        <img class="js-svg-injector w-50 mb-3" src="../../assets/svg/flat-icons/multi-family-house.svg" alt="SVG"
                             data-parent="#uploadForm">
                        <span class="d-block">Multi-family</span>
                      </label>
                    </div>
                  </div>
                  <div class="col-6 col-md-3">
                    <div class="custom-control custom-radio custom-control-inline checkbox-outline text-center">
                      <input type="radio" id="typeOfListingRadio4" name="typeOfListingRadio1" class="custom-control-input checkbox-outline__input">
                      <label class="checkbox-outline__label rounded py-3 px-1 mb-0" for="typeOfListingRadio4">
                        <img class="js-svg-injector w-50 mb-3" src="../../assets/svg/flat-icons/farm-land.svg" alt="SVG"
                             data-parent="#uploadForm">
                        <span class="d-block">Farms/land</span>
                      </label>
                    </div>
                  </div>
                </div>
                <!-- End Radio Checkbox Group -->
              
            

Copy-to-clipboard #1

Copy or share your referral link with friends
              
                <!-- Clipboard Input -->
                <form>
                  <div class="js-focus-state mb-2">
                    <div class="input-group">
                      <input id="referralLink" type="text" class="form-control" value="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/">
                      <div class="input-group-append">
                        <a class="js-clipboard input-group-text" href="javascript:;"
                           data-content-target="#referralLink"
                           data-class-change-target="#linkIcon"
                           data-default-class="fas fa-clone"
                           data-success-class="fas fa-check">
                          <span id="linkIcon" class="fas fa-clone"></span>
                        </a>
                      </div>
                    </div>
                  </div>
                  <small class="form-text text-muted">Copy or share your referral link with friends</small>
                </form>
                <!-- End Clipboard Input -->
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/clipboard/dist/clipboard.min.js"></script>

                <!-- JS Implementing Plugins -->
                <script src="../../assets/js/components/hs.clipboard.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // initialization of clipboard
                    $.HSCore.components.HSClipboard.init('.js-clipboard');
                  });
                </script>
              
            

Search form #1

Get access to millions of company reviews

Find great places to work

Image Description
              
                <!-- Hero Section -->
                <div id="SVGfiles" class="svg-preloader bg-light position-relative z-index-2">
                  <div class="container space-2">
                    <!-- Title -->
                    <div class="mb-7">
                      <span class="d-block text-secondary">Get access to millions of company reviews</span>
                      <h1 class="text-primary font-weight-semi-bold">Find great places to work</h1>
                    </div>
                    <!-- End Title -->

                    <!-- Search Jobs Form -->
                    <form class="row mb-2">
                      <div class="col-lg-5 mb-4 mb-lg-0">
                        <!-- Input -->
                        <label class="d-block">
                          <span class="h6 d-block text-dark font-weight-semi-bold mb-0">Company name or job title</span>
                        </label>
                        <div class="js-focus-state">
                          <div class="input-group">
                            <input type="text" class="form-control" placeholder="Company or title" aria-label="Company or title" aria-describedby="keywordInputAddon">
                            <div class="input-group-append">
                              <span class="input-group-text">
                                <span class="fas fa-search" id="keywordInputAddon"></span>
                              </span>
                            </div>
                          </div>
                        </div>
                        <!-- End Input -->
                      </div>

                      <div class="col-lg-5 mb-4 mb-lg-0">
                        <!-- Input -->
                        <label class="d-block">
                          <span class="h6 d-block text-dark font-weight-semi-bold mb-0">City, state, or zip</span>
                        </label>
                        <div class="js-focus-state">
                          <div class="input-group">
                            <input type="text" class="form-control" placeholder="City, state, or zip" aria-label="City, state, or zip" aria-describedby="locationInputAddon">
                            <div class="input-group-append">
                              <span class="input-group-text">
                                <span class="fas fa-map-marker-alt" id="locationInputAddon"></span>
                              </span>
                            </div>
                          </div>
                        </div>
                        <!-- End Input -->
                      </div>

                      <div class="col-lg-2 align-self-lg-end">
                        <button type="submit" class="btn btn-block btn-primary transition-3d-hover">Search</button>
                      </div>
                      <!-- End Checkbox -->
                    </form>
                    <!-- End Search Jobs Form -->
                  </div>

                  <!-- SVG Icon -->
                  <div class="d-none d-lg-block w-100 position-absolute bottom-0 right-0 z-index-n1 max-width-27">
                    <figure class="ie-files">
                      <img class="js-svg-injector" src="../../assets/svg/illustrations/files.svg" alt="Image Description"
                           data-parent="#SVGfiles">
                    </figure>
                  </div>
                  <!-- End SVG Icon -->
                </div>
                <!-- End Hero Section -->
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.focus-state.js"></script>
                <script src="../../assets/js/components/hs.svg-injector.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // initialization of forms
                    $.HSCore.components.HSFocusState.init();
                  });
                </script>

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('load', function () {
                    // initialization of svg injector module
                    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                  });
                </script>
              
            

Search form #2

              
                <!-- Search Section -->
                <div class="bg-light">
                  <div class="container space-1">
                    <div class="row mx-gutters-2">
                      <div class="col-lg mb-3 mb-lg-0">
                        <!-- Search Property Input -->
                        <div class="js-focus-state">
                          <label class="sr-only" for="searchPropertySr">Search property</label>
                          <div class="input-group input-group-sm">
                            <div class="input-group-prepend">
                              <span class="input-group-text" id="searchProperty">
                                <span class="fas fa-search"></span>
                              </span>
                            </div>
                            <input type="text" class="form-control" name="text" id="searchPropertySr" placeholder="Search property" aria-label="Search property" aria-describedby="searchProperty" value="London">
                          </div>
                        </div>
                        <!-- End Search Property Input -->
                      </div>

                      <div class="col-sm-auto ml-md-auto mb-3 mb-lg-0">
                        <!-- Filter -->
                        <div class="position-relative">
                          <a id="filter2DropdownInvoker" class="btn btn-block btn-sm btn-soft-secondary dropdown-toggle" href="javascript:;" role="button"
                             aria-controls="filter2Dropdown"
                             aria-haspopup="true"
                             aria-expanded="false"
                             data-unfold-event="click"
                             data-unfold-target="#filter2Dropdown"
                             data-unfold-type="css-animation"
                             data-unfold-duration="300"
                             data-unfold-delay="300"
                             data-unfold-animation-in="slidefadeIn"
                             data-unfold-animation-out="fadeOut">
                            <span class="fas fa-home dropdown-item-icon"></span>
                            Property type
                          </a>

                          <div id="filter2Dropdown" class="dropdown-menu dropdown-unfold dropdown-menu-lg-right dropdown-menu-size-md p-5" aria-labelledby="filter2DropdownInvoker">
                            <div class="row">
                              <div class="col-sm-6 u-ver-divider u-ver-divider--none-sm mb-4 mb-sm-0">
                                <!-- Radio Checkbox -->
                                <div class="custom-control custom-radio mb-2">
                                  <input type="radio" class="custom-control-input" id="propertyRadioChechbox1" name="propertyRadioChechbox" checked>
                                  <label class="custom-control-label" for="propertyRadioChechbox1">
                                    Show all
                                  </label>
                                </div>
                                <!-- End Radio Checkbox -->

                                <!-- Radio Checkbox -->
                                <div class="custom-control custom-radio mb-2">
                                  <input type="radio" class="custom-control-input" id="propertyRadioChechbox2" name="propertyRadioChechbox">
                                  <label class="custom-control-label" for="propertyRadioChechbox2">
                                    Houses
                                  </label>
                                </div>
                                <!-- End Radio Checkbox -->

                                <!-- Radio Checkbox -->
                                <div class="custom-control custom-radio mb-2">
                                  <input type="radio" class="custom-control-input" id="propertyRadioChechbox3" name="propertyRadioChechbox">
                                  <label class="custom-control-label" for="propertyRadioChechbox3">
                                    Flats
                                  </label>
                                </div>
                                <!-- End Radio Checkbox -->

                                <!-- Radio Checkbox -->
                                <div class="custom-control custom-radio mb-2">
                                  <input type="radio" class="custom-control-input" id="propertyRadioChechbox4" name="propertyRadioChechbox">
                                  <label class="custom-control-label" for="propertyRadioChechbox4">
                                    Multi-family
                                  </label>
                                </div>
                                <!-- End Radio Checkbox -->

                                <!-- Radio Checkbox -->
                                <div class="custom-control custom-radio">
                                  <input type="radio" class="custom-control-input" id="propertyRadioChechbox5" name="propertyRadioChechbox">
                                  <label class="custom-control-label" for="propertyRadioChechbox5">
                                    Farms/land
                                  </label>
                                </div>
                                <!-- End Radio Checkbox -->
                              </div>

                              <div class="col-sm-6">
                                <!-- Radio Checkbox -->
                                <div class="custom-control custom-radio mb-2">
                                  <input type="radio" class="custom-control-input" id="propertyAddedTimeRadioChechbox1" name="propertyAddedTimeRadioChechbox" checked>
                                  <label class="custom-control-label" for="propertyAddedTimeRadioChechbox1">
                                    Added anytime
                                  </label>
                                </div>
                                <!-- End Radio Checkbox -->

                                <!-- Radio Checkbox -->
                                <div class="custom-control custom-radio mb-2">
                                  <input type="radio" class="custom-control-input" id="propertyAddedTimeRadioChechbox2" name="propertyAddedTimeRadioChechbox">
                                  <label class="custom-control-label" for="propertyAddedTimeRadioChechbox2">
                                    Last 24 hours
                                  </label>
                                </div>
                                <!-- End Radio Checkbox -->

                                <!-- Radio Checkbox -->
                                <div class="custom-control custom-radio mb-2">
                                  <input type="radio" class="custom-control-input" id="propertyAddedTimeRadioChechbox3" name="propertyAddedTimeRadioChechbox">
                                  <label class="custom-control-label" for="propertyAddedTimeRadioChechbox3">
                                    Last 7 days
                                  </label>
                                </div>
                                <!-- End Radio Checkbox -->

                                <!-- Radio Checkbox -->
                                <div class="custom-control custom-radio mb-2">
                                  <input type="radio" class="custom-control-input" id="propertyAddedTimeRadioChechbox4" name="propertyAddedTimeRadioChechbox">
                                  <label class="custom-control-label" for="propertyAddedTimeRadioChechbox4">
                                    Last 14 days
                                  </label>
                                </div>
                                <!-- End Radio Checkbox -->

                                <!-- Radio Checkbox -->
                                <div class="custom-control custom-radio">
                                  <input type="radio" class="custom-control-input" id="propertyAddedTimeRadioChechbox5" name="propertyAddedTimeRadioChechbox">
                                  <label class="custom-control-label" for="propertyAddedTimeRadioChechbox5">
                                    Last 30 days
                                  </label>
                                </div>
                                <!-- End Radio Checkbox -->
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- End Filter -->
                      </div>

                      <div class="col-sm-auto mb-3 mb-lg-0">
                        <!-- Filter -->
                        <div class="position-relative">
                          <a id="filter3DropdownInvoker" class="btn btn-block btn-sm btn-soft-secondary dropdown-toggle" href="javascript:;" role="button"
                             aria-controls="filter3Dropdown"
                             aria-haspopup="true"
                             aria-expanded="false"
                             data-unfold-event="click"
                             data-unfold-target="#filter3Dropdown"
                             data-unfold-type="css-animation"
                             data-unfold-duration="300"
                             data-unfold-delay="300"
                             data-unfold-animation-in="slidefadeIn"
                             data-unfold-animation-out="fadeOut">
                            <span class="fas fa-sliders-h dropdown-item-icon"></span>
                            Refine
                          </a>

                          <div id="filter3Dropdown" class="dropdown-menu dropdown-unfold dropdown-menu-sm-right dropdown-menu-size-lg p-5" aria-labelledby="filter3DropdownInvoker">
                            <div class="row">
                              <div class="col-lg-7 u-ver-divider u-ver-divider--none-lg mb-5 mb-lg-0">
                                <div class="pr-lg-2">
                                  <label class="form-label mb-2">Price range</label>

                                  <!-- Area Charts -->
                                  <div class="position-relative overflow-hidden mb-2" style="height: 80px;">
                                    <div class="js-area-chart position-absolute w-100"
                                         data-height="80px"
                                         data-high="1500"
                                         data-low="0"
                                         data-offset-x="0"
                                         data-offset-y="0"
                                         data-is-show-area="true"
                                         data-is-show-line="false"
                                         data-is-show-point="false"
                                         data-is-full-width="true"

                                         data-is-stack-bars="true"
                                         data-is-show-axis-x="false"
                                         data-is-show-axis-y="false"
                                         data-is-show-tooltips="false"
                                         data-fill-opacity="1"
                                         data-fill-colors='["#e7eaf3"]'
                                         data-stroke-color="#e7eaf3"
                                         data-text-color-x="#77838f"
                                         data-text-offset-top-x="0"

                                         data-text-size-y=".75rem"
                                         data-text-color-y="#77838f"
                                         data-points-colors='["#e7eaf3"]'
                                         data-series='[
                                           [
                                             {"value": 289},
                                             {"value": 100},
                                             {"value": 700},
                                             {"value": 500},
                                             {"value": 1500},
                                             {"value": 200},
                                             {"value": 855},
                                             {"value": 321},
                                             {"value": 75}
                                           ]
                                         ]'></div>

                                      <div id="foregroundAreaChartDoubleResult" class="position-absolute h-100 overflow-hidden">
                                        <div class="js-area-chart position-absolute"
                                             data-height="80px"
                                             data-high="1500"
                                             data-low="0"
                                             data-offset-x="0"
                                             data-offset-y="0"
                                             data-is-show-area="true"
                                             data-is-show-line="false"
                                             data-is-show-point="false"
                                             data-is-full-width="true"

                                             data-is-stack-bars="true"
                                             data-is-show-axis-x="false"
                                             data-is-show-axis-y="false"
                                             data-is-show-tooltips="false"
                                             data-fill-opacity="1"
                                             data-fill-colors='["#377dff"]'
                                             data-stroke-color="#377dff"
                                             data-text-color-x="#77838f"
                                             data-text-offset-top-x="0"

                                             data-text-size-y=".75rem"
                                             data-text-color-y="#77838f"
                                             data-points-colors='["#377dff"]'
                                             data-series='[
                                               [
                                                 {"value": 289},
                                                 {"value": 100},
                                                 {"value": 700},
                                                 {"value": 500},
                                                 {"value": 1500},
                                                 {"value": 200},
                                                 {"value": 855},
                                                 {"value": 321},
                                                 {"value": 75}
                                               ]
                                             ]'></div>
                                      </div>
                                  </div>
                                  <!-- End Area Charts -->

                                  <!-- Range Slider -->
                                  <input class="js-range-slider" type="text"
                                         data-extra-classes="u-range-slider"
                                         data-type="double"
                                         data-foreground-target="#foregroundAreaChartDoubleResult"
                                         data-min="0"
                                         data-max="999000"
                                         data-from="250000"
                                         data-to="750000"
                                         data-result-min="#rangeSliderExample7MinResult"
                                         data-result-max="#rangeSliderExample7MaxResult">

                                  <div class="d-flex justify-content-between align-items-center mt-6">
                                    <div>
                                      <span class="text-muted">Min price:</span>
                                      <span id="rangeSliderExample7MinResult" class="text-muted"></span>
                                    </div>
                                    <div>
                                      <span class="text-muted">Max price:</span>
                                      <span id="rangeSliderExample7MaxResult" class="text-muted"></span>
                                    </div>
                                  </div>
                                </div>
                              </div>

                              <div class="col-lg-5">
                                <div class="pl-lg-2">
                                  <label class="form-label mb-2">Status</label>

                                  <!-- Button Group -->
                                  <div class="btn-group btn-group-toggle d-flex mb-5" data-toggle="buttons">
                                    <label class="btn btn-sm btn-outline-secondary btn-custom-toggle-primary flex-fill active">
                                      <input type="radio" name="options" id="option1" checked>
                                      For sale
                                    </label>
                                    <label class="btn btn-sm btn-outline-secondary btn-custom-toggle-primary flex-fill">
                                      <input type="radio" name="options" id="option2">
                                      For rent
                                    </label>
                                  </div>
                                  <!-- End Button Group -->

                                  <!-- Rooms -->
                                  <div class="row mx-gutters-2">
                                    <div class="col-6">
                                      <label class="form-label mb-2">Beds</label>

                                      <!-- Select -->
                                      <select class="js-select selectpicker dropdown-select"
                                              data-size="10"
                                              data-width="100%"
                                              data-style="btn-soft-secondary btn-sm">
                                        <option value="bedValueAll" selected>All</option>
                                        <option value="bedValueMin1">1</option>
                                        <option value="bedValueMin2">2</option>
                                        <option value="bedValueMin3">3</option>
                                        <option value="bedValueMin4">4</option>
                                        <option value="bedValueMin5">5</option>
                                        <option value="bedValueMin6">6</option>
                                        <option value="bedValueMin7">7</option>
                                        <option value="bedValueMin8">8</option>
                                        <option value="bedValueMin9">9</option>
                                        <option value="bedValueMin10">10</option>
                                      </select>
                                      <!-- End Select -->
                                    </div>

                                    <div class="col-6">
                                      <!-- Select -->
                                      <label for="bathLabel" class="form-label mb-2">Baths</label>

                                      <select id="bathLabel" class="js-select selectpicker dropdown-select"
                                              data-size="10"
                                              data-width="100%"
                                              data-style="btn-soft-secondary btn-sm">
                                        <option value="bedValueAll" selected>All</option>
                                        <option value="bedValueMax1">1</option>
                                        <option value="bedValueMax2">2</option>
                                        <option value="bedValueMax3">3</option>
                                        <option value="bedValueMax4">4</option>
                                        <option value="bedValueMax5">5</option>
                                        <option value="bedValueMax6">6</option>
                                        <option value="bedValueMax7">7</option>
                                        <option value="bedValueMax8">8</option>
                                        <option value="bedValueMax9">9</option>
                                        <option value="bedValueMax10">10</option>
                                      </select>
                                      <!-- End Select -->
                                    </div>
                                  </div>
                                  <!-- End Rooms -->
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- End Filter -->
                      </div>

                      <div class="col-sm-auto">
                        <button type="submit" class="btn btn-sm btn-primary">Search</button>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Search Section -->
              
            
              
                <link rel="stylesheet" href="../../assets/vendor/bootstrap-select/dist/css/bootstrap-select.min.css">
                <link rel="stylesheet" href="../../assets/vendor/ion-rangeslider/css/ion.rangeSlider.css">
                <link rel="stylesheet" href="../../assets/vendor/chartist/dist/chartist.min.css">
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
                <script src="../../assets/vendor/ion-rangeslider/js/ion.rangeSlider.min.js"></script>
                <script src="../../assets/vendor/chartist/dist/chartist.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.unfold.js"></script>
                <script src="../../assets/js/components/hs.selectpicker.js"></script>
                <script src="../../assets/js/components/hs.range-slider.js"></script>
                <script src="../../assets/js/components/hs.chartist-area-chart.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  // initialization of select picker
                  $.HSCore.components.HSSelectPicker.init('.js-select');

                  // initialization of unfold component
                  $.HSCore.components.HSUnfold.init($('[data-unfold-target]:not(#filter3DropdownInvoker)'));

                  $.HSCore.components.HSUnfold.init($('#filter3DropdownInvoker'), {
                    afterOpen: function() {
                      $.HSCore.components.HSRangeSlider.init('.js-range-slider');
                      $.HSCore.components.HSChartistAreaChart.init('.js-area-chart');
                    }
                  });

                  $(window).on('resize', function() {
                    setTimeout(function() {
                      $.HSCore.components.HSChartistAreaChart.init('.js-area-chart');
                    }, 800);
                  });
                </script>
              
            

Payment calculator #1

$37,469 monthly. In association with:
$
$
%
  • Principal and Interest
    $35,943 /mo
  • Property Taxes
    $1,526 /mo
  • Yearly Condo Fees
    n/a

* These results are not provided by Front House and are only indicative based on a repayment mortgage product. Repayments will be subject to the product provided and your circumstances.

              
                <div class="card bg-light p-5">
                  <!-- Total Price -->
                  <div class="mb-4">
                    <span class="h4 font-weight-medium">$37,469</span>
                    <span class="h6 font-weight-medium">monthly.</span>
                    <span class="h6 text-secondary font-weight-normal ml-3">In association with:</span>
                  </div>
                  <!-- End Total Price -->

                  <!-- Stats -->
                  <div class="row mb-2 mb-lg-0">
                    <div class="col-lg-7 mb-2 mb-lg-0">
                      <!-- Calculator Form -->
                      <form class="row">
                        <div class="col-md-6 mb-4">
                          <!-- Input -->
                          <label class="form-label">Price of property</label>

                          <div class="js-focus-state input-group">
                            <div class="input-group-prepend">
                              <span class="input-group-text">$</span>
                            </div>
                            <input class="form-control" type="text" value="$8,999,000" disabled>
                          </div>
                          <!-- End Input -->
                        </div>

                        <div class="col-md-6 mb-4">
                          <!-- Input -->
                          <label class="form-label">Deposit</label>

                          <div class="js-focus-state input-group">
                            <div class="input-group-prepend">
                              <span class="input-group-text">$</span>
                            </div>
                            <input class="form-control" type="text" value="1,799,800">
                          </div>
                          <!-- End Input -->
                        </div>

                        <div class="w-100"></div>

                        <div class="col-md-6 mb-4">
                          <!-- Input -->
                          <label class="form-label">Interest rate</label>

                          <div class="js-focus-state input-group">
                            <div class="input-group-prepend">
                              <span class="input-group-text">%</span>
                            </div>
                            <input class="form-control" type="text" value="3.5">
                          </div>
                          <!-- End Input -->
                        </div>

                        <div class="col-md-6 mb-4">
                          <!-- Input -->
                          <label class="form-label">Amortization</label>

                          <select class="custom-select">
                            <option value="amortization1">30 years</option>
                            <option selected>25 years</option>
                            <option value="amortization2">20 years</option>
                            <option value="amortization3">15 years</option>
                            <option value="amortization4">10 years</option>
                          </select>
                          <!-- End Input -->
                        </div>
                      </form>
                      <!-- End Calculator Form -->
                    </div>

                    <div class="col-lg-5">
                      <!-- Progress -->
                      <div class="progress mb-3" style="height: .5rem;">
                        <div class="progress-bar" role="progressbar" style="width: 60%;" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="progress-bar bg-success" role="progressbar" style="width: 30%;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="progress-bar bg-info" role="progressbar" style="width: 10%;" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                      </div>
                      <!-- End Progress -->

                      <!-- Fact List -->
                      <ul class="list-unstyled font-size-1 mb-0">
                        <li class="d-flex align-items-center py-1">
                          <small class="far fa-circle text-primary mr-2"></small>
                          <span class="font-weight-medium">Principal and Interest</span>
                          <div class="ml-auto">
                            <span class="text-secondary">$35,943 /mo</span>
                          </div>
                        </li>

                        <li class="d-flex align-items-center py-1">
                          <small class="far fa-circle text-success mr-2"></small>
                          <span class="font-weight-medium">Property Taxes</span>
                          <div class="ml-auto">
                            <span class="text-secondary">$1,526 /mo</span>
                          </div>
                        </li>

                        <li class="d-flex align-items-center py-1">
                          <small class="far fa-circle text-info mr-2"></small>
                          <span class="font-weight-medium">Yearly Condo Fees</span>
                          <div class="ml-auto">
                            <span class="text-secondary">n/a</span>
                          </div>
                        </li>
                      </ul>
                      <!-- End Fact List -->
                    </div>
                  </div>
                  <!-- End Stats -->

                  <p class="small">* These results are not provided by Front House and are only indicative based on a repayment mortgage product. Repayments will be subject to the product provided and your circumstances.</p>
                </div>