<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="//code.jquery.com/jquery-1.11.1.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"> <!-- instagram: www.instagram.com/programmingtutorial site: programlamadersleri.net --> <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> <!-- right-box --> </div> <!--col-lg-8--> </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:0px; 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 30px; text-transform: uppercase; width:100%; } .btn:hover{ border:2px solid #fc4a48; background:#FFF; }