<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-12 login-box"> <div class="col-lg-6 left-box"></div> <div class="col-lg-6 right-box"> <h1>LOGIN</h1> <div class="form"> <div class="form-group"> <label for="username">Your usersname </label> <input type="text" id="username" class="form-control"> </div> <div class="form-group"> <label for="password">Your password</label> <input type="password" id="password" class="form-control"> </div> <div class="login-button"> <button class="btn btn-default">Login</button> </div> </div> </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: #fbfbfb; padding: 40px 0px; } label { font-weight: 400; font-size: 15px; } .login-box { -webkit-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.24); -moz-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.24); box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.24); padding: 0; background: url("https://images.pexels.com/photos/33999/pexels-photo.jpg?w=1260&h=750&auto=compress&cs=tinysrgb"); } .right-box { background: #FFF; min-height: 520px; } .right-box h1 { font-weight:600; font-family: 'Josefin Sans', sans-serif; color: #444; padding: 20px 0px; text-align: center; } .form { padding: 20px 30px; } .form-control { box-shadow: none; outline: 0; border-radius:0; color: #565656; font-size: 14px; padding: 20px 10px; margin-bottom: 30px; border: 1px solid #f2f2f2; background: #f2f2f2; } .btn { background: #fc4a48; border: none; border-radius: 0; color: #FFF; font-size: 16px; font-weight: 600; padding: 15px 0; text-transform: uppercase; width: 100%; } .btn:hover { border: 2px solid #fc4a48; background: #FFF; }