<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>

<!-- 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>

<!-- 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>

<!-- 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 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>

<!-- 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 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 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>

<!-- 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>

<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>