---
layout: auth
title: Authentication
---

<div class="auth-nav">
  <a href="/">
    <img
      class="switcher-logo"
      src="assets/img/logos/logo/bulkit-core.svg"
      alt=""
    />
  </a>
</div>

<div class="auth-outer">
  <div class="mobile-auth-toggle">
    <h3 class="title">Have an account?</h3>
    <button type="button" class="button action-btn is-rounded">Register</button>
  </div>

  <div class="auth-box shadow">
    <div class="form-wrapper">
      <div class="login">
        <div class="header">
          <h2 class="title is-4">Login</h2>
        </div>
        <div class="item-list">
          <div class="item shadow">
            <a><i class="fa fa-google"></i></a>
            <a><i class="fa fa-facebook"></i></a>
            <a><i class="fa fa-linkedin"></i></a>
          </div>
        </div>
        <div class="body">
          <form>
            <div class="field">
              <div class="control">
                <input type="text" class="input" placeholder="Email" />
                <div class="form-icon">
                  <i class="sl sl-icon-envelope-open"></i>
                </div>
              </div>
            </div>
            <div class="field">
              <div class="control">
                <input type="password" class="input" placeholder="Password" />
                <div class="form-icon">
                  <i class="sl sl-icon-lock"></i>
                </div>
              </div>
            </div>
            <button
              type="submit"
              class="button primary-btn raised is-rounded is-bold"
            >
              Login
            </button>
            <a href="#" class="forgot-password"> Forgot Password? </a>
          </form>
        </div>
      </div>
      <div class="register">
        <div class="header">
          <h2 class="title is-4">Register</h2>
        </div>
        <div class="item-list">
          <div class="item shadow">
            <a><i class="fa fa-google"></i></a>
            <a><i class="fa fa-facebook"></i></a>
            <a><i class="fa fa-linkedin"></i></a>
          </div>
        </div>
        <div class="body">
          <form>
            <div class="field">
              <div class="control">
                <input type="text" class="input" placeholder="Username" />
                <div class="form-icon">
                  <i class="sl sl-icon-user"></i>
                </div>
              </div>
            </div>
            <div class="field">
              <div class="control">
                <input type="text" class="input" placeholder="Email" />
                <div class="form-icon">
                  <i class="sl sl-icon-envelope-open"></i>
                </div>
              </div>
            </div>
            <div class="field">
              <div class="control">
                <input type="password" class="input" placeholder="Password" />
                <div class="form-icon">
                  <i class="sl sl-icon-lock"></i>
                </div>
              </div>
            </div>
            <div class="d-flex flex-column">
              <button
                type="submit"
                class="button primary-btn raised is-rounded is-bold"
              >
                Register
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <div class="side-box">
      <h3 class="title is-light">Have an account?</h3>
      <button type="button" class="button action-btn is-rounded">
        Register
      </button>
    </div>
  </div>
</div>