Below code need to place in HTML Body Tag
----------------------------------------------->
<div class="container bootshape">
    <form class="simple-login" role="form">
        <h1>Simple Login</h1>
        <input type="username" autofocus required placeholder="Username" class="form-control">
        <input type="password" required placeholder="Password" class="form-control">
        <button type="submit" class="btn btn-lg btn-primary btn-block">Login</button>
        <p class="forgot-password"><a href="">Forgot password?</a></p>
    </form>
    <p class="footer">&copy;  All Rights Reserved.  <a href="http://www.pix2apps.com" title="Login Form">pix2apps.com</a></p>
</div>


Below code need to place in header tag or in separate external CSS
-----------------------------------------------------------------
.bootshape {
  font-family: 'Alef', sans-serif;
  background-color: #FFF;
  text-align: center;
  color: #333;
}
.bootshape a,
.bootshape a:hover,
.bootshape a:focus {
  color: #dd745c;
}
.bootshape h1 {
  color: #dd745c;
  font-family: 'Alef', sans-serif;
  padding-bottom: 20px;
  font-weight: bold;
}
.bootshape .form-control {
  background-color: #f1f0f0;
  border-radius: 0;
  border: none;
  margin: 0 0 10px 0;
  color: #333;
  box-shadow: none;
  height: 62px;
  font-family: 'Alef', sans-serif;
  text-align: center;
  font-size: 22px;
}
.bootshape .form-control:focus {
  border-color: #e4e0e0;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.015), 0 0 8px rgba(228, 224, 224, 0.6);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.015), 0 0 8px rgba(228, 224, 224, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.015), 0 0 8px rgba(228, 224, 224, 0.6);
}
.bootshape .btn-lg {
  font-size: 22px;
  height: 62px;
  border-radius: 0;
  background-color: #dd745c;
  border: 0;
  text-transform: uppercase;
}
.bootshape .btn-primary:hover,
.bootshape .btn-primary:focus {
  background-color: #ba523a;
}
.bootshape .forgot-password {
  padding-top: 20px;
  text-decoration: underline;
  color: #333;
  font-size: 18px;
}
.bootshape .forgot-password a {
  color: #333;
}
.bootshape .footer {
  padding: 20px 0;
}
.bootshape .simple-login {
  margin: 0 auto;
  max-width: 500px;
  padding: 100px 15px 15px 15px;
}
Categories:

0 comments:

Post a Comment