---
layout: default
title: Login
---

<!-- Wrapper -->
<div class="login-wrapper columns is-gapless">
  <!-- Form section -->
  <div class="column is-7">
    <div class="hero is-fullheight">
      <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>
      <div class="hero-body">
        <div class="container">
          <div class="columns">
            <div class="column"></div>
            <div class="column is-5">
              <div class="auth-content">
                <h2>Welcome Back.</h2>
                <p>Please sign in to your account</p>
                <a href="/kit6-signup.html">I do not have an account yet </a>
              </div>

              <!-- Login Form -->
              <form>
                <div
                  id="signin-form"
                  class="login-form animated preFadeInLeft fadeInLeft"
                >
                  <!-- Input -->
                  <div class="field pb-10">
                    <div class="control has-icons-right">
                      <input
                        class="input is-medium has-shadow"
                        type="text"
                        placeholder="Username"
                      />
                      <span class="icon is-medium is-right">
                        <i class="sl sl-icon-user"></i>
                      </span>
                    </div>
                  </div>
                  <!-- Input -->
                  <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>
                  <!-- Submit -->
                  <p class="control login">
                    <button
                      class="
                        button button-cta
                        primary-btn
                        btn-align-lg
                        is-bold is-fullwidth
                        rounded
                        raised
                        no-lh
                      "
                    >
                      Log in
                    </button>
                  </p>
                </div>
              </form>

              <!-- Reset Form -->
              <form>
                <div
                  id="recover-form"
                  class="login-form animated preFadeInLeft fadeInLeft is-hidden"
                >
                  <!-- Input -->
                  <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>
                  <!-- Submit -->
                  <p class="control login">
                    <button
                      class="
                        button button-cta
                        primary-btn
                        btn-align-lg
                        is-bold is-fullwidth
                        rounded
                        raised
                        no-lh
                      "
                    >
                      Reset password
                    </button>
                  </p>
                </div>
              </form>

              <!-- Toggles -->
              <div
                id="recover"
                class="
                  pt-10
                  pb-10
                  forgot-password
                  animated
                  preFadeInLeft
                  fadeInLeft
                "
              >
                <p class="has-text-centered">
                  <a href="#">Forgot password ?</a>
                </p>
              </div>

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

  <!-- Image section (hidden on mobile) -->
  <div class="column login-column is-5 is-hidden-mobile hero-banner">
    <div class="hero login-hero is-fullheight is-theme-primary is-relative">
      <ul class="circles">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
  <!-- /Image section -->
</div>
<!-- /Wrapper -->