<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-md-offset-4">
<div class="account-wall content-box">
<div id="ribbon-container">
<a href="#" id="ribbon">PLEASE LOGIN</a>
</div>
<img class="profile-img img-circle" src="images/baby.JPG" alt="">
<form class="form-signin">
<div class="form-group">
<div class="icon-addon addon-lg">
<input type="text" placeholder="Email or User Name" class="form-control" id="email" required>
<label for="email" class="glyphicon glyphicon-user" rel="tooltip" title="email"></label>
</div>
</div>
<div class="form-group">
<div class="icon-addon addon-lg">
<input type="password" placeholder="Password" class="form-control" id="pwd" required>
<label for="password" class="glyphicon glyphicon-lock" rel="tooltip" title="password"></label>
</div>
</div>
<label class="checkbox pull-left" style="padding-left:25px; color:#fff;">
<input type="checkbox" value="remember-me">
Remember me
</label>
<a href="#" class="pull-right need-help" style="color:#89b426;">Forgot password</a><span class="clearfix"></span>
<div class="buttons">
<button class="btn btn-lg btn-primary" type="submit">
Login</button>
<button class="btn btn-lg btn-primary" type="submit">
Create an Account</button>
</div>
</form>
</div>
</div>
</div>
</div>
body{
background-image:url(../images/pattern/patternbg2.png);
}
.container{
margin:0 auto;
height:700px;
}
.login {
background: #89b426;
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
margin-bottom: 10px;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.login h1 {
font-size: 20px;
font-weight: bolder;
text-align: center;
padding-top: 15px;
color: #fff;
}
.buttons {
text-align: center;
padding-top: 10px;
}
.btn-primary {
background: #89b426 !important;
border: 1px solid #89b426 !important;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);
}
.btn-primary:hover{
background:#E67E22 !important;
border: 1px solid #E67E22 !important;
}
.icon-addon {
position: relative;
color: #999;
display: block;
}
.icon-addon.addon-md .glyphicon, .icon-addon .glyphicon, .icon-addon.addon-md .fa, .icon-addon .fa {
position: absolute;
z-index: 2;
left: 10px;
font-size: 14px;
width: 20px;
margin-left: -2.5px;
text-align: center;
padding: 10px 0;
top: 1px
}
.icon-addon.addon-lg .form-control {
line-height: 1.33;
height: 46px;
font-size: 13px;
padding: 10px 16px 10px 40px;
}
.icon-addon.addon-lg .fa, .icon-addon.addon-lg .glyphicon {
font-size: 18px;
margin-left: 0;
left: 11px;
top: 4px;
}
.icon-addon .form-control:focus + .glyphicon, .icon-addon:hover .glyphicon, .icon-addon .form-control:focus + .fa, .icon-addon:hover .fa {
color: #89b426;
}
.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-signin .form-signin-heading, .form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin .checkbox {
font-weight: normal;
}
.form-signin .form-control {
position: relative;
font-size: 16px;
height: auto;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="text"] {
margin-bottom: 20px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.account-wall {
margin-top: 20px;
padding: 10px 0px 20px 0px;
border-radius:5px;
background:#ccc;
background-image: url(../images/pattern/pattern11.png);
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}
.login-title {
color: #555;
font-size: 18px;
font-weight: 400;
display: block;
}
.profile-img {
width: 100px;
height: 100px;
margin: 90px auto 10px;
display: block;
border: 1px solid #89b426;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.need-help {
margin-top: 10px;
}
.new-account {
display: block;
margin-top: 10px;
}
.content-box {
}
#ribbon-container {
position: absolute;
top: 40px;
right: 0px;
overflow: visible;
font-size: 18px;
line-height: 18px;
}
#ribbon-container:before {
content:"";
height: 0;
width: 0;
display: block;
position: absolute;
top: 3px;
left: 0;
border-top: 29px solid rgba(0,0,0,.3);
border-bottom: 29px solid rgba(0,0,0,.3);
border-right: 29px solid rgba(0,0,0,.3);
border-left: 29px solid transparent;
}
#ribbon-container:after {
height: 3px;
background: rgba(0,0,0,.3);
display: block;
position: absolute;
bottom: -3px;
left: 58px;
right:3px;
}
#ribbon-container a {
display:block;
padding:20px;
padding-left:120px;
position:relative;
background:#89b426;
overflow:visible;
margin-left:31px;
color:#fff;
text-decoration:none;
}
#ribbon-container a:after {
content:"";
display:block;
position:absolute;
bottom:-15px;
right:0;
border-top: 15px solid #690;
border-right: 15px solid transparent;
}
#ribbon-container a:before {
content:"";
display:block;
position:absolute;
top:0;
left:-29px;
border-top: 29px solid #89b426;
border-bottom: 29px solid #89b426;
border-right: 29px solid transparent;
border-left: 29px solid transparent;
}
#ribbon-container a:hover {
background:#E67E22;
}
#ribbon-container a:hover:before {
border-top: 29px solid #E67E22;
border-bottom: 29px solid #E67E22;
}
