---
layout: default
title: Sign up
---

<!-- Wrapper -->
<div class="login-wrapper columns is-gapless">
  <!-- Form section -->
  <div class="column is-4">
    <div class="hero is-fullheight">
      <!-- Header -->
      <div class="hero-heading">
        <div class="auth-logo">
          <a href="/"
            ><img
              class="top-logo switcher-logo"
              src="assets/img/logos/logo/bulkit-core.svg"
              alt=""
          /></a>
        </div>
      </div>

      <!-- Body -->
      <div class="hero-body">
        <div class="container">
          <div class="columns">
            <div class="column is-8 is-offset-2">
              <div class="auth-content">
                <h2>Hi There.</h2>
                <p>Please start by creating an account.</p>
                <a href="/kit4-signup.html">Have an account? Sign In </a>
              </div>

              <!-- Sign up form -->
              <form>
                <div
                  id="signup-form"
                  class="login-form animated preFadeInLeft fadeInLeft"
                >
                  <div class="field pb-10">
                    <div class="control has-icons-right">
                      <input
                        class="input is-medium has-shadow"
                        type="text"
                        placeholder="Full Name"
                      />
                      <span class="icon is-medium is-right">
                        <i class="sl sl-icon-user"></i>
                      </span>
                    </div>
                  </div>
                  <div class="field pb-10">
                    <div class="control has-icons-right">
                      <input
                        class="input is-medium has-shadow"
                        type="text"
                        placeholder="Email Address"
                      />
                      <span class="icon is-medium is-right">
                        <i class="sl sl-icon-envelope-open"></i>
                      </span>
                    </div>
                  </div>
                  <div class="field pb-10">
                    <div class="control has-icons-right">
                      <input
                        class="input is-medium has-shadow"
                        type="password"
                        placeholder="Password"
                      />
                      <span class="icon is-medium is-right">
                        <i class="sl sl-icon-lock"></i>
                      </span>
                    </div>
                  </div>
                  <p class="control login">
                    <button
                      class="
                        button button-cta
                        primary-btn
                        btn-align-lg btn-outlined
                        is-bold is-fullwidth
                        rounded
                        raised
                        no-lh
                      "
                    >
                      Sign up
                    </button>
                  </p>
                </div>
              </form>

              <!-- Get contacted form -->
              <form>
                <div
                  id="contacted-form"
                  class="login-form animated preFadeInLeft fadeInLeft is-hidden"
                >
                  <div class="field pb-10">
                    <div class="control">
                      <input
                        class="input is-large"
                        type="text"
                        placeholder="Full name *"
                      />
                    </div>
                  </div>
                  <div class="field pb-10">
                    <div class="control">
                      <input
                        class="input is-large"
                        type="email"
                        placeholder="Email address *"
                      />
                    </div>
                  </div>
                  <div class="field pb-10">
                    <div class="control">
                      <input
                        class="input is-large"
                        type="text"
                        placeholder="Phone"
                      />
                    </div>
                  </div>
                  <p class="control login">
                    <button
                      class="
                        button button-cta
                        secondary-btn
                        btn-align-lg btn-outlined
                        is-bold is-fullwidth
                        rounded
                        raised
                        no-lh
                      "
                    >
                      Send info
                    </button>
                  </p>
                </div>
              </form>

              <!-- Toggles-->
              <div
                id="contacted"
                class="
                  pt-10
                  pb-10
                  forgot-password
                  animated
                  preFadeInLeft
                  fadeInLeft
                "
              >
                <p class="has-text-centered">
                  <a href="#">Or, schedule a demo</a>
                </p>
              </div>

              <div
                id="back-to-signup"
                class="
                  pt-10
                  pb-10
                  forgot-password
                  animated
                  preFadeInLeft
                  fadeInLeft
                  is-hidden
                "
              >
                <p class="has-text-centered">
                  <a href="#">Back to Sign up</a>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Image section (hidden on mobile) -->
  <div class="column login-column is-8 is-hidden-mobile hero-banner">
    <div class="hero signup-hero is-fullheight is-theme-primary is-relative">
      <div class="columns has-text-centered">
        <div class="column">
          <h1 class="title is-2 light-text">Start managing now</h1>
          <h3 class="subtitle is-5 light-text">
            Stop struggling with common tasks and focus on the real choke
            points. Discover a full featured HR management platform.
          </h3>
          <!-- App mockup -->
          <img
            class="mockup has-light-shadow"
            src="assets/img/graphics/apps/app-1-core.png"
            data-base-url="assets/img/graphics/apps/app-1"
            data-extension=".png"
            alt=""
          />
          <!-- Link to login page -->
          <div class="already">
            <span>Already have an account ?</span>
            <a
              href="kit4-login.html"
              class="button btn-align btn-outlined is-bold light-btn rounded"
              >Login</a
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</div>