<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/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"> <div class="col-md-6"> <div id="logbox"> <form id="signup" method="post" action="/signup"> <h1>Hesap Oluştur</h1> <div class="social-buttons"> <a href="#" class="btn btn-fb"><i class="fa fa-facebook"></i> Facebook</a> <a href="#" class="btn btn-tw"><i class="fa fa-twitter"></i> Twitter</a> <a href="#" class="btn btn-gp gp-linkedin"><i class="fa fa-google-plus"></i> Google+</a> <a href="#" class="btn btn-linkedin gp-linkedin"><i class="fa fa-linkedin-square"></i> LinkedIn</a> </div> <p style="text-align:center">veya</p> <input name="user[name]" type="text" placeholder="Adınız" pattern="^[\w]{3,16}$" autofocus="autofocus" required="required" class="input pass"/> <input name="user[surname]" type="text" placeholder="Soyadınız" pattern="^[\w]{3,16}$" autofocus="autofocus" required="required" class="input pass"/> <input name="user[email]" type="email" placeholder="Email adresiniz" class="input pass"/> <input name="user[password2]" type="password" placeholder="Şifreniz" required="required" class="input pass"/> <input type="submit" value="Kayıt Ol" class="inputButton"/> <div class="form-group"> <button type="submit" class="btn btn-primary btn-block">Şifremi Hatırlat</button> </div> <div class="text-center"> Hesabınız var mı? <a href="#" id="login_id">Giriş Yap</a> </div> </form> </div> </div> <!--col-md-6--> <div class="col-md-6"> <div id="logbox"> <form id="signup" method="post" action="/signup"> <h1>Giriş Yap</h1> <input name="user[email]" type="email" placeholder="Email Adresiniz" class="input pass"/> <input name="user[password]" type="password" placeholder="Şifreniz" required="required" class="input pass"/> <input type="submit" value="Giriş Yap" class="inputButton"/> <div class="text-center""> <a href="#" id="">Üye Ol</a> - <a href="#" id="">Şifremi Unuttum</a> </div> </form> </div> </div> </div>

::selection { background-color: #b5e2e7; } ::-moz-selection { background-color: #8ac7d8; } body { background: #3CC; } .container { display: -webkit-flex; display: flex; height: 100%; } #logbox { padding: 10px; margin: 50px auto; width: 340px; background-color: #fff; -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); } h1 { text-align: center; font-size: 175%; color: #757575; font-weight: 300; } h1, input { font-family: "Open Sans", Helvetica, sans-serif; } .input { width: 75%; height: 50px; display: block; margin: 0 auto 15px; padding: 0 15px; border: none; border-bottom: 2px solid #ebebeb; } .input:focus { outline: none; border-bottom-color: #3CC !important; } .input:hover { border-bottom-color: #dcdcdc; } .input:invalid { box-shadow: none; } .pass:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white inset; } .inputButton { position: relative; width: 85%; height: 50px; display: block; margin: 30px auto 30px; color: white; background-color: #3CC; border: none; -webkit-box-shadow: 0 5px 0 #2CADAD; -moz-box-shadow: 0 5px 0 #2CADAD; box-shadow: 0 5px 0 #2CADAD; } .inputButton:hover { top: 2px; -webkit-box-shadow: 0 3px 0 #2CADAD; -moz-box-shadow: 0 3px 0 #2CADAD; box-shadow: 0 3px 0 #2CADAD; } .inputButton:active { top: 5px; box-shadow: none; } .inputButton:focus { outline: none; } .social-buttons{ margin:12px 0 } .social-buttons a{ width: 49%; } .btn-fb{ color: #fff; background-color:#3b5998; } .btn-fb:hover{ color: #fff; background-color:#496ebc } .btn-tw{ color: #fff; background-color:#55acee; } .btn-tw:hover{ color: #fff; background-color:#59b5fa; } .btn-gp{ color: #fff; background-color:#d34836; } .btn-gp:hover{ color: #fff; background-color:#e06055; } .btn-linkedin{ color: #fff; background-color:#0075B2; } .btn-linkedin:hover{ color: #fff; background-color:#32506d; } .gp-linkedin{ margin-top: 5px; }