<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <div class="login"> <div class="container"> <div class="col-lg-6 col-lg-offset-3"> <h1 class="horizontal">Contact Us</h1> <div class="inner-form"> <form role="form"> <div class="row"> <div class="icon text-center"> <i class="fa fa-paper-plane fa-2x" aria-hidden="true"></i> </div> <div class="col-lg-12"> <label>Email</label> <div class="form-group"> <input type="email" name="email" id="email" class="form-control" placeholder=""> </div> </div> <div class="col-lg-12"> <label>Password</label> <div class="form-group"> <input type="password" name="password" id="password" class="form-control" placeholder=""> </div> </div> <div class="col-lg-12"> <button type="submit" class="btn btn-default"> <span>LOGIN</span> </button> </div> <div class="col-lg-12"> <div class="forgot"> <p>Forgot Password or Email ?</p> </div> </div> </div> </form> </div> </div> </div> </div>

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:100,300,400,600,700'); .login { font-family: 'Josefin Sans', sans-serif; background: #24acb3; padding: 40px 0px; } h1 { font-family: 'Josefin Sans', sans-serif; font-weight: 600; text-transform: capitalize; text-align: center; color: #FFF; } .inner-form { background: #FFF; padding: 80px; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.4); margin-top: 30px; } label { font-weight:400; font-size:15px; } .form-control { background-color: #f5f5f5; box-shadow: none; color: #565656; font-size: 14px; padding: 30px 10px; margin-bottom: 30px; border: 1px solid #f1f1f1; } .btn { background: #24acb3; color: #FFF; border-radius: 6px; margin: 0 auto; height: 48px; line-height: 38px; display: table; font-size: 15px; width: 100%; } .forgot { text-align: center; margin-top: 30px; font-size: 16px; } .nav-tabs { border: none; margin: 0 auto; display: table; } .icon { margin-bottom: 30px; } .fa { color: #FFF; background: #24acb3; padding: 40px; border-radius: 50%; } .fa:hover { color: #24acb3; background: #FFF; border: 2px solid #24acb3; margin-top: -4px; } .inner-form:hover { transform: scale(1.05); box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.2); transition: all 2s ease-in-out; }