Simple Login

index.html

<div class="container-fluid">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    
    <div class="col-xs-12 col-sm-8 col-md-6 col-lg-5">
      
      <form class="simple-login card">
        <div class="row"> 
          <span class="sl-title">Simple Login / Registration</span>
        </div>
        <div class="row">
          <div class="input-group">
            <input class="form-control" placeholder="email" type="email">
            <span class="input-group-addon">verify</span>
            <span class="input-group-addon">
              <input type="checkbox">
            </span>
          </div>
        </div>
        <div class="row">
          <div class="input-group">
            <input class="form-control" placeholder="password" type="password">
            <span class="input-group-addon">verify</span>
            <span class="input-group-btn">
              <button class="show-password btn btn-txt" type="button"></button>
            </span>
          </div>
        </div>
        <div class="row">
          <div class="text-right">
            <span class="pull-left forgot-pass">
              <a href="#">forgot password</a>
            </span>
            <input class="btn btn-primary" type="submit" value="login">
            <input class="btn btn-primary" type="submit" value="register">
          </div>
        </div>
      </form>
      
    </div>
    <div class="card col-xs-12 col-sm-4 col-md-6 col-lg-7 pull-right" id="description">
      <p class="bg-success">Simple-Login Builds off of Bootstrap v4 alpha</p>
      <p>This form also uses my Simple-Passwords jQuery plugin for the show-password button.</p>
      <p>I created a new bootstrap button class called 'btn-txt' for optimal display of the Show-Password eye button.</p>
      <p>Add the following to your css to enable that class:</p>
      <code>
        .btn-txt {<br>
          &emsp;&emsp;background: none;<br>
          &emsp;&emsp;border: none;<br>
          &emsp;&emsp;box-shadow: none !important;<br>
          &emsp;&emsp;outline: none !important;<br>
        }
      </code>
    </div>
  </div>
</div>

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://codepen.io/tommyhare/pen/epNKrv.js"></script>

simple-login.markdown

Simple Login

I wanted a more elegant way for users to login, with built-in registration. Also supports my Simple-Password jQuery plugin!

A Pen by Thomas Hare on CodePen.

License.

style.css

body {
  background-color: #444;
  font-family: 'Helvetica Neaue', sans-serif;
  min-width: 25rem;
}

.container-fluid {
  padding: 0;
}

.btn-txt {
  background: none;
  border: none;
  box-shadow: none !important;
  padding: 0 .75rem !important;
  outline: none !important;
}

.simple-login {
  background-color: #555;
  border: none;
  padding: 1rem;
}
.sl-title {
  color: #EEE;
  display: block;
  font-size: 1.5rem;
}
.simple-login .row {
  margin: 1.5rem 0;
}
.simple-login .btn-txt {
  color: #EEE;
}
.simple-login .forgot-pass {
  margin: 0rem 0.5rem 0 0.25rem;
}
.simple-login .forgot-pass a {
  color: #EEE;
}

#description {
  background-color: #333;
  color: #EEE;
  padding: 0.5rem;
}

.simple-login, #description {
  margin-top: 1rem;
}

code {
  display: inline-block;
  padding: 1rem;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet" />