<body id="register_bg">
<div id="register">
<div class="sign-in-wrapper">
<aside>
<figure>
<a href="index.html"><img src="img/logo_sticky.svg" width="140" height="35" alt=""></a>
</figure>
<div class="access_social">
<a href="#0" class="social_bt facebook">Login with Facebook</a>
<a href="#0" class="social_bt google">Login with Google</a>
</div>
<div class="divider"><span>Or</span></div>
<?=@$cevap?>
<form method="post">
<div class="form-group">
<input class="form-control" type="text" name="kadi" placeholder="Kullanıcı Adınız">
<i class="icon_mail_alt"></i>
</div>
<div class="form-group">
<input class="form-control" type="password" name="pass" id="password" placeholder="Şifreniz">
<i class="icon_lock_alt"></i>
</div>
<div class="clearfix add_bottom_15">
<div class="checkboxes float-left">
<label class="container_check">Beni hatırla
<input type="checkbox">
<span class="checkmark"></span>
</label>
</div>
<div class="float-right"><a id="forgot" href="#0">Forgot Password?</a></div>
</div>
<input type="submit" value="Giriş Yap" class="btn_1 full-width mb_5">
<div class="text-center mt-2"><small>Don't have an acccount? <strong><a href="register.html">Sign Up</a></strong></small></div>
</div>
<div class="copy">© 2020 FooYes</div>
</aside>
</div>
<!-- /login -->
<!-- COMMON SCRIPTS -->
<script src="js/common_scripts.min.js"></script>
<script src="js/common_func.js"></script>
<script src="assets/validate.js"></script>
</body>
</html>css de ki register şu şekilde:
#register_bg {
background: #ccc url(../img/access_bg.jpg) center center no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100vh;
width: 100%;
}
#register {
-webkit-box-shadow: 3px 0 30px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 3px 0 30px rgba(0, 0, 0, 0.2);
box-shadow: 3px 0 30px rgba(0, 0, 0, 0.2);
width: 430px;
padding: 30px 45px;
position: absolute;
left: 0;
top: 0;
overflow-y: auto;
background-color: #fff;
min-height: 100vh;
}
#register figure {
margin: 0;
text-align: center;
border-bottom: 1px solid #ededed;
padding: 0 60px 30px 60px;
}
@media (max-width: 767px) {
#register figure {
margin: -30px -30px 20px -30px;
padding: 20px 30px;
}
}
@media (max-width: 767px) {
#register {
width: 100%;
padding: 30px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
}
#register form {
margin-bottom: 30px;
display: block;
}
#register form .form-group input {
padding-left: 40px;
}
#register form .form-group i {
font-size: 18px;
font-size: 1.125rem;
position: absolute;
left: 12px;
top: 9px;
color: #ccc;
width: 25px;
height: 25px;
display: block;
font-weight: 400 !important;
}
#register form .form-group i.icon_lock_alt {
top: 10px;
}
#register .copy {
text-align: center;
position: absolute;
padding-top: 10px;
height: 30px;
left: 0;
bottom: 30px;
width: 100%;
color: #999;
} 
