<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<!-- login-form -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="content">
<div class="container">
<div class="box">
<div class="row">
<div class="col-lg-offset-1 col-lg-5 col-md-offset-1 col-md-5 col-sm-12 col-xs-12 ">
<div class="box-body">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-6 col-xs-12 mb20">
<h3 class="mb10">Login</h3>
</div>
<!-- form -->
<form>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label class="control-label sr-only" for="email"></label>
<div class="login-input">
<input id="email" name="emaol" type="text" class="form-control" placeholder="Enter your email id" required>
<div class="login-icon"><i class="fa fa-user"></i></div>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label class="control-label sr-only"></label>
<div class="login-input">
<input name="password" type="password" class="form-control" placeholder="******" required>
<div class="login-icon"><i class="fa fa-lock"></i></div>
<div class="eye-icon"><i class="fa fa-eye"></i></div>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 mb20 ">
<button class="btn btn-primary btn-block mb10">Register</button>
<div>
<p>Have an Acount? <a href="#">Login</a></p>
</div>
</div>
</form>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
<h4 class="mb20">Login With</h4>
<div class="social-media">
<a href="#" class="btn-social-rectangle btn-facebook"><i class="fa fa-facebook"></i><span class="social-text">Facebook</span></a>
<a href="#" class="btn-social-rectangle btn-twitter"><i class="fa fa-twitter"></i><span class="social-text">Twitter</span> </a>
<a href="#" class="btn-social-rectangle btn-googleplus"><i class="fa fa-google-plus"></i><span class="social-text">Google Plus</span></a>
</div>
</div>
<!-- /.form -->
</div>
</div>
</div>
<!-- features -->
<div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 ">
<div class="box-body">
<div class="feature-left">
<div class="feature-icon">
<img src="https://easetemplate.com/free-website-templates/mobistore/images/feature_icon_1.png" alt="">
</div>
<div class="feature-content">
<h4>Loyalty Points</h4>
<p>Aenean lacinia dictum risvitae pulvinar disamer seronorem ipusm dolor sit manert.</p>
</div>
</div>
<div class="feature-left">
<div class="feature-icon">
<img src="https://easetemplate.com/free-website-templates/mobistore/images/feature_icon_2.png" alt="">
</div>
<div class="feature-content">
<h4>Instant Checkout</h4>
<p>Aenean lacinia dictum risvitae pulvinar disamer seronorem ipusm dolor sit manert.</p>
</div>
</div>
<div class="feature-left">
<div class="feature-icon">
<img src="https://easetemplate.com/free-website-templates/mobistore/images/feature_icon_3.png" alt="">
</div>
<div class="feature-content">
<h4>Exculsive Offers</h4>
<p>Aenean lacinia dictum risvitae pulvinar disamer seronorem ipusm dolor sit manert.</p>
</div>
</div>
</div>
</div>
<!-- /.features -->
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
Created for <a href="https://goo.gl/mwiEhG" target="_blank">easetemplate</a>
</div></div>
</div>
</div>
</div>
<!-- /.login-form -->
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: 'Roboto Condensed', sans-serif; letter-spacing: 0px; font-size: 16px; color: #848687; font-weight: 400; line-height: 30px; background-color: #f3f5f7; }
h1, h2, h3, h4, h5, h6 { color: #1c1e1e; margin: 0px 0px 15px 0px; font-weight: 400; font-family: 'Roboto Condensed', sans-serif; }
h1 { font-size: 30px; line-height: 42px; }
h2 { font-size: 24px; line-height: 32px; }
h3 { font-size: 22px; line-height: 30px; }
h4 { font-size: 18px; line-height: 26px; }
h5 { font-size: 14px; font-weight: 400; }
h6 { font-size: 12px; font-weight: 400; }
p { margin: 0 0 24px; line-height: 1.8; }
p:last-child { margin: 0px; }
ul, ol { list-style: none; margin: 0; padding: 0; }
a { text-decoration: none; color: #1c1e1e; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }
a:focus, a:hover { text-decoration: none; color: #fb730f; }
.box { }
.box-head { background-color: #ffffff; border-bottom: 1px solid #f3f5f7 }
.head-title { padding: 16px 30px; margin-bottom: 0px; }
.box-body { background-color: #ffffff; padding: 30px; margin-bottom: 30px; }
.mb20{margin-bottom:20px;}
.mb10{margin-bottom:10px;}
.content{padding-top:40px; padding-bottom:40px;}
label { }
.control-label { font-size: 13px; text-transform: capitalize; color: #3c424b; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
.form-control:focus { }
.textarea.form-control { }
.required { }
.form-group { margin-bottom: 5px; }
.form-control { border-radius: 3px; color: #656869; font-size: 13px; font-weight: 400; width: 100%; height: 52px; padding: 12px 16px; line-height: 1.42857143; border: 2px solid #e8ecf0; background-color: #fff; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075); box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075); }
.form-control:focus { border-color: #a5a8ab; outline: 0; -webkit-box-shadow: none; box-shadow: none; }
.input-group { position: relative; display: table; border-collapse: separate; }
input[type=checkbox], input[type=radio] { margin: 8px 0 0; margin-top: 1px\9; line-height: normal; }
input::-webkit-input-placeholder {color: #a6a7a8 !important; opacity: 1; }
input:focus::-webkit-input-placeholder {
opacity: 0;
transition: 1s ease;
}
textarea::-webkit-input-placeholder { color: #a6a7a8 !important; }
.input-group-addon { background-color: transparent; border: 1px solid #e8ecf0; border-radius: 0px; }
.focus { border: 2px solid #e8ecf0; background-color: #fff; }
.focus:focus { border-color: #e8ecf0; outline: 0; -webkit-box-shadow: none; box-shadow: none; }
.login-input { position: relative; margin-bottom: -21px; }
.login-input .form-control { background-color: #f4f7f9; padding-left: 35px; }
.login-icon { display: inline-block; position: relative; bottom: 51px; left: 18px; font-size: 14px }
.eye-icon { position: absolute; bottom: 52px; right: 18px; font-size: 14px }
.btn-social-rectangle, .btn-facebook .btn-twitter .btn-googleplus { font-size: 14px; margin-right: 6px; display: inline-block; line-height: 1.2; padding: 14px 16px; margin-bottom: 10px; border-radius: 3px; }
.social-text { font-size: 14px; text-transform: uppercase; padding-left: 6px; letter-spacing: 1px; }
.btn-twitter { background: #00aced; color: #fff; }
.btn-twitter:hover, .btn-twitter:active { background: #0084b4; color: #fff; }
.btn-facebook { background: #3B5997; color: #fff; }
.btn-facebook:hover, .btn-facebook:active { background: #2d4372; color: #fff; }
.btn-googleplus { background: #D64937; color: #fff; }
.btn-googleplus { background: #D64937; color: #fff; }
.btn-googleplus:hover, .btn-googleplus:active { background: #b53525; color: #fff; }
.btn { font-family: 'Roboto Condensed', sans-serif; font-size: 15px; text-transform: uppercase; font-weight: 700; padding: 14px 26px; border-radius: 4px; line-height: 2; letter-spacing: 2px; border: transparent; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; word-wrap: break-word; white-space: normal !important; }
.btn-primary { background-color: #fb730f; color: #fff; }
.btn-primary:hover { background-color: #ed6908; color: #fff; }
.btn-primary.focus,.btn-primary:focus { background-color: #ed6908; color: #fff; }
.feature-left { margin-bottom: 20px; border-bottom: 1px solid #f4f7f9; }
.feature-left:last-child { margin-bottom: 0px; border-bottom: transparent; }
.feature-left .feature-icon { float: left; padding-top: 16px; }
.feature-left .feature-content { padding-top: 8px; padding-left: 70px; padding-bottom: 20px; }
