<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <div class="form-bg"> <div class="container"> <div class="row"> <div class="col-md-offset-4 col-md-4 col-sm-offset-3 col-sm-6"> <div class="form-container"> <form class="form-horizontal"> <div class="form-group"> <span class="input-icon"><i class="fa fa-user"></i></span> <input class="form-control" type="email" placeholder="Username"> </div> <div class="form-group"> <span class="input-icon"><i class="fa fa-lock"></i></span> <input class="form-control" type="pswd" placeholder="Password"> </div> <button class="btn signin">Login</button> <div class="remember-me"> <input type="checkbox"> <label>Remember Me</label> </div> <span class="forgot-pass">Forgot Password? <a href="#">Click Here</a></span> </form> </div> </div> </div> </div> </div>

.form-container{ font-family: 'Mukta', sans-serif; } .form-container .form-icon{ color: #fff; font-size: 88px; text-align: center; line-height: 107px; width: 100px; height: 100px; padding: 0 0 0 0.5px; margin: 0 auto 35px; border: 4px solid #87B38D; border-radius: 50%; } .form-container .form-horizontal{ background: #fff; padding: 35px 20px 5px; position: relative; } .form-container .form-horizontal:before{ content: ''; background: linear-gradient(-45deg,transparent 49%, #fff 50%); height: 30px; width: 30px; transform: translateX(-50%) rotate(45deg); position: absolute; left: 50%; top: -15px; } .form-horizontal .form-group{ background-color: #eee; margin: 0 0 15px; border-radius: 10px; overflow: hidden; } .form-horizontal .form-group:nth-child(3){ margin-bottom: 40px; } .form-horizontal .input-icon{ color: #fff; background-color: #CC76A1; font-size: 25px; text-align: center; line-height: 51px; height: 50px; width: 55px; vertical-align: top; display: inline-block; } .form-horizontal .form-control{ color: #555; background-color: transparent; font-size: 18px; letter-spacing: 1px; width: calc(100% - 60px); height: 50px; padding: 10px; box-shadow: none; border: none; border-radius: 0; display: inline-block; transition: all 0.3s; } .form-horizontal .form-control:focus{ box-shadow: none; border: none; } .form-horizontal .form-control::placeholder{ color: #777; font-size: 18px; text-transform: capitalize; } .form-horizontal .btn{ color: #22031F; background-color: #87B38D; font-size: 22px; text-transform: uppercase; width: 190px; padding: 7px 10px 6px; margin: 0 auto 8px; border: none; border-radius: 10px; box-shadow: 0 0 0 2px #fff inset; border: 5px solid #FEDD02; display: block; position: relative; transition: all 0.5s ease 0s; } .form-horizontal .btn:hover, .form-horizontal .btn:focus{ color: #000; background-color: #cecece; box-shadow: 0 0 0 2px #fff inset,0 0 10px rgba(0,0,0,0.1) inset,0 0 10px rgba(0,0,0,0.15); outline: none; } .form-horizontal .remember-me{ color: #999; text-align: center; margin: 0 0 10px; } .form-horizontal .remember-me label{ font-weight: 500; margin: 0 0 0 2px; vertical-align: text-top; } .form-horizontal .forgot-pass{ color: #888; font-size: 15px; font-weight: 500; text-align: center; display: block; } .form-horizontal .forgot-pass a{ color: #666; transition: all 0.3s ease 0s; }