Simple Login Form

by Marcelo Martins

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<h1>Login Portal</h1>
<hr />
<p>Enter your Username/Email and Password to log in to your account.</p>
<div class="clearfix"></div>
<form name="LoginForm" runat="server" action="~/Account/Default.aspx">
  <div class="col-md-12 col-sm-12">
    <div class="input-group">
      <span class="input-group-addon" id="UserAccountEmail-addon"><i class="fa fa-users"></i></span>
      <input type="email" id="UserAccountEmailtxt" name="UserAccountEmailAddress" class="form-control" maxlength="250" placeholder="Username or Email" required="required" aria-describedby="UserAccountEmail" />
    </div>
  </div>
  <div class="col-md-12 col-sm-12 clearfix">
    <div class="padding-top-eight-px"></div>
  </div>
  <div class="col-md-12 col-sm-12">
    <div class="input-group">
      <span class="input-group-addon" id="AccountPassword-addon"><i class="fa fa-unlock-alt padding-left-and-right-three-px"></i></span>
      <input type="email" id="AccountPasswordtxt" name="UserAccountPassword" class="form-control" maxlength="50" placeholder="Password" required="required" aria-describedby="AccountPassword" />
    </div>
  </div>
  <div class="col-md-12 col-sm-12 clearfix">
    <div class="padding-top-eight-px"></div>
  </div>
  <div class="center-text">
    <input type="checkbox" id="RememberUsercb" name="RememberMe" class="checkbox-inline" />
    <label for="RememberUsercb" class="mouse-pointer">Remember me</label>
  </div>
  <div class="col-md-12 col-sm-12 clearfix">
    <div class="padding-top-five-px"></div>
  </div>
  <div class="col-md-12 col-sm-12 clearfix">
    <hr />
  </div>
  <div class="col-md-12 col-sm-12 clearfix">
    <div class="padding-top-five-px"></div>
  </div>
  <div...

CSS

.padding-top-five-px {
  padding-top: 5px;
}

.padding-top-eight-px {
  padding-top: 8px;
}

.center-text { text-align: center; }

.padding-left-and-right-three-px {
  padding-left: 3px padding-right: 3px;
}