<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid"> <br> <div class="row"> <div class="col-md-10"> <img src="https://tekkod.net/emuhasebe/public/assets/images/login-logo.png" /> </div> <div class="col-md-2 text-right"> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Hesap Yönetimi </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Oturum Aç</a> <a class="dropdown-item" href="#">Hesap Oluştur</a> <a class="dropdown-item" href="#">Şifremi Unuttum</a> </div> </div> </div> </div> <br> <div class="row"> <div class="col-md-12 nav-link" style="background-color: #007bff;color:#fff;">TEKKOD HESABI</div> </div> <br/> <div class="row"> <div class="col-md-3"></div> <div class="col-md-3 text-right"> <img src="http://tekkod.net/tekkod-logolar/tekkod-emlak-logo.png" class="img-responsive" /> </div> <div class="col-md-3 text-left"> <img src="http://tekkod.net/tekkod-logolar/tekkod-muhasebe-logo.png" class="img-responsive" /> </div> <div class="col-md-3"></div> </div> <hr /> <div class="row"> <div class="col-md-12 text-center"> <h3>Hesabınızı tek bir yerden kontrol edin, koruyun ve güvenliğini sağlayın</h3> </div> </div> <hr /> <div class="row"> <div class="col-md-12 text-center"> <p>TEKKOD Hesabınız ile pek çok ayara ve araca hızlı bir şekilde erişebilirsiniz. Bu ayarlar ve araçlar, verilerinizi teminat altına almanıza ve gizliliğinizi korumanıza yardımcı olur, ayrıca TEKKOD hizmetlerinin sizin için daha iyi çalışmasını sağlayabilmek amacıyla bilgilerinizin nasıl kullanılacağına karar vermenize olanak tanır.</p> </div> </div> </div> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#login"> Oturum Aç </button> <!-- Modal --> <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Oturum Aç</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="account-wall"> <img class="profile-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120" alt=""> <form class="form-signin"> <input type="text" class="form-control" placeholder="Email" required autofocus> <input type="password" class="form-control" placeholder="Password" required> <button class="btn btn-lg btn-primary btn-block" type="submit"> Sign in</button> </form> </div> </div> </div> </div> </div> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#register"> Hesap Oluştur </button> <!-- Modal --> <div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Hesap Oluştur</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="container"> <form class="form-horizontal" role="form" method="POST" action="/register"> <div class="row"> <div class="col-md-3 field-label-responsive"> <label for="ad">Ad</label> </div> <div class="col-md-9"> <div class="form-group"> <div class="input-group mb-2 mr-sm-2 mb-sm-0"> <div class="input-group-addon" style="width: 2.6rem"><i class="fa fa-user"></i></div> <input type="text" name="ad" class="form-control" id="ad" placeholder="John Doe" required autofocus> </div> </div> </div> </div> <div class="row"> <div class="col-md-3 field-label-responsive"> <label for="soyad">Soyad</label> </div> <div class="col-md-9"> <div class="form-group"> <div class="input-group mb-2 mr-sm-2 mb-sm-0"> <div class="input-group-addon" style="width: 2.6rem"><i class="fa fa-user"></i></div> <input type="text" name="soyad" class="form-control" id="soyad" placeholder="John Doe" required autofocus> </div> </div> </div> </div> <div class="row"> <div class="col-md-3 field-label-responsive"> <label for="email">Kullanıcı Adı</label> </div> <div class="col-md-9"> <div class="form-group"> <div class="input-group mb-2 mr-sm-2 mb-sm-0"> <div class="input-group-addon" style="width: 2.6rem"><i class="fa fa-at"></i></div> <input style="direction: ltr;" type="text" name="email" class="form-control" id="email" placeholder="@tekkod.net" required autofocus> </div> </div> </div> <div class="col-md-3"> <div class="form-control-feedback"> <span class="text-danger align-middle"> <!-- Put e-mail validation error messages here --> </span> </div> </div> </div> <div class="row"> <div class="col-md-3 field-label-responsive"> <label for="password">Password</label> </div> <div class="col-md-9"> <div class="form-group has-danger"> <div class="input-group mb-2 mr-sm-2 mb-sm-0"> <div class="input-group-addon" style="width: 2.6rem"><i class="fa fa-key"></i></div> <input type="password" name="password" class="form-control" id="password" placeholder="Password" required> </div> </div> </div> </div> <div class="row"> <div class="col-md-3 field-label-responsive"> <label for="password">Confirm Password</label> </div> <div class="col-md-9"> <div class="form-group"> <div class="input-group mb-2 mr-sm-2 mb-sm-0"> <div class="input-group-addon" style="width: 2.6rem"> <i class="fa fa-repeat"></i> </div> <input type="password" name="password-confirmation" class="form-control" id="password-confirm" placeholder="Password" required> </div> </div> </div> </div> <div class="row"> <div class="col-md-3"></div> <div class="col-md-9 text-right"> <button type="submit" class="btn btn-success"><i class="fa fa-user-plus"></i> Register</button> </div> </div> </form> </div> </div> </div> </div> </div> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#forgot"> Şifremi Unuttum </button> <!-- Modal --> <div class="modal fade" id="forgot" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Şifremi Unuttum</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="account-wall"> <img class="profile-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120" alt=""> <form class="form-signin"> <input type="text" class="form-control" placeholder="Email" required autofocus> <button class="btn btn-lg btn-primary btn-block" type="submit"> Hatırlat</button> </form> </div> </div> </div> </div> </div>

.form-signin { max-width: 330px; padding: 15px; margin: 0 auto; } .form-signin .form-signin-heading, .form-signin .checkbox { margin-bottom: 10px; } .form-signin .checkbox { font-weight: normal; } .form-signin .form-control { position: relative; font-size: 16px; height: auto; padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .form-signin .form-control:focus { z-index: 2; } .form-signin input[type="text"] { margin-bottom: -1px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .form-signin input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; } .account-wall { margin-top: 20px; padding: 40px 0px 20px 0px; background-color: #f7f7f7; -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); } .login-title { color: #555; font-size: 18px; font-weight: 400; display: block; } .profile-img { width: 96px; height: 96px; margin: 0 auto 10px; display: block; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } .need-help { margin-top: 10px; } .new-account { display: block; margin-top: 10px; }