Bulma Login Form

bulma-login-form.markdown

Bulma Login Form

A Pen by hharzer on CodePen.

License.

index.html

<section class="hero is-fullheight">
  <div class="hero-body">
    <div class="container">
      <div class="columns is-centered">
        <div class="column is-6-tablet is-5-desktop is-4-widescreen">
          <form action="" class="box is-shadowless">  <h1 class="title">Please sign in</h1>          <div class="card">
  <div class="card-content">
            <div class="field">
              <label for="" class="label">Email</label>
              <div class="control has-icons-left">
                <input type="email" placeholder="e.g. bobsmith@gmail.com" class="input" required>
                <span class="icon is-small is-left">
                  <i class="fa fa-envelope"></i>
                </span>
              </div>
            </div>
            <div class="field">
              <label for="" class="label">Password</label>
              <div class="control has-icons-left">
                <input type="password" placeholder="*******" class="input" required>
                <span class="icon is-small is-left">
                  <i class="fa fa-lock"></i>
                </span>
              </div>
            </div>
            <div class="field">
              <label for="" class="checkbox">
                <input type="checkbox">
               Remember me
              </label>
            </div>

            <div class="field buttons">
              <button class="button is-fullwidth is-success">
                <span class="icon"><i class="gg-log-in"></i></span><span>Login</span>
              </button></div></div>
            <div class="card">
  <div class="card-content">
            <div class="field buttons">
              <button class="button is-google is-fullwidth"> <span class="icon">
      <i class="gg-google"></i>
    </span>
                <span>Google</span></button>
              <button class="button is-facebook is-fullwidth"> <span class="icon">
      <i class="gg-facebook"></i>
    </span>
                <span>Facebook</span></button>
              <button class="button is-github is-fullwidth">
                  <span class="icon">
      <i class="fa fa-github"></i>
    </span>
                <span>Github</span></button>
              <button class="button is-microsoft is-fullwidth"> <span class="icon">
      <i class="gg-microsoft"></i>
    </span>
                <span>Microsoft</span></button>
              <button class="button is-twitter is-fullwidth"> <span class="icon">
      <i class="gg-twitter"></i>
    </span>
                <span>Twitter</span></button>
    </div></div></div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.2/css/bulma.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bulma-social@1/bin/bulma-social.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/css.gg/icons/all.css" rel="stylesheet" />