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">© 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;
}
----------------------------------------------->
<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">© 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;
}
0 comments:
Post a Comment