Süper Üye
Merhaba arkadaşlar bugün Web Tasarıma merakı olan kullanıcılarımız için basit bir Kullanıcı Kayıt Sayfası hazırlamaya çalıştım.Kodları değiştirerek ne işe yaradığını görebilir kendinize göre ekleme veya çıkarma yapabilirsiniz.Şifre bölümünde ayrıca jquery.passwordstrength adlı java scripte ait olan özelliğide kullandım.Dilerseniz
Bağlantıları görmek için lütfen
Giriş Yap
özelliği indirirek web dosyanızın içine koyabilirsiniz.Merak ettiğiniz veya yardımcı olabileceğim konuları özel mesaj yolu ile belirtebilirsiniz.Dosya yolları kendi bilgisayarıma göre ayarlıdır.Lütfen kendi cihazınıza uygun şekilde ayarlamayı unutmayın.
HTML:
<html>
<head>
<title>MemoryHackers.org</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="jquery.passwordstrength.js"></script>
</head>
<body>
<form>
<img src="C:\Users\User\Desktop\Yeni klasör\user.png">
<div class="input-box">
<span><i class="fa fa-user-o"></i></span>
<input type="text" placeholder="Kullanıcı Adı" required>
</div>
<div class="input-box">
<span><i class="fa fa-envelope-o"></i></span>
<input type="eposta" placeholder="E-Posta Adresi " required>
</div>
<div class="input-box">
<span><i class="fa fa-key"></i></span>
<input type="password" id="password" placeholder="Şifre" required>
</div>
<div class="input-box">
<span><i class="fa fa-key"></i></span>
<input type="password" id="password" placeholder="Şifre (Tekrar)" required>
</div>
<div class="input-box">
<span><i class="fa fa-calendar"></i></span>
<input type="date" name="dogumgunu">
</div>
<input type="checkbox"> Kullanıcı kayıt sözleşmesi şartlarını kabul ediyorum.
<br>
<br>
<button type="submit"><i class="fa fa-sign-in"></i>Kayıt OL</button>
</form>
<script type="text/javascript">
$(function(){
$("#password").passwordStrength();
});
</script>
</body>
</html>
CSS:
body{
background: #673AB7;
font-family:sans-serif;
}
form{
width: 500px;
margin:8% auto;
padding: 50px 0;
text-align:center;
box-shadow: 0 20px 40px rgb(0,0,0);
}
.input-box{
margin:30px auto;
width: 80%;
position: relative;
box-shadow: 0 8px 10px -10px rgb(0,0,0);
}
.input-box input{
width:100%;
height:40px;
border:none;
background:#efefef;
padding-left:50px;
}
span{
position:absolute;
left:0;
top:0;
height:40px;
width:40px;
background: linear-gradient(to right,#4CAF50,#00BCD4);
}
span .fa{
padding:10px;
color: #fff;
}
button{
width:130px;
height:40px;
margin-left:10%;
display:block;
color:#fff;
border:0;
font-size:16px;
outline:none;
background:linear-gradient(to right,#4CAF50,#00BCD4);
box-shadow: 0 8px 10px -10px rgb(0,0,0);
cursor:pointer;
}
button .fa{
margin-right:10px;
}
form img{
width: 180px;
margin-top:-100px;
}
.password-strength-indicator{
font-size:12px;
display:inline-block;
height:15px;
min-width:20%;
text-align:center;
transition:1s;
margin:50px 0;
color: #fff;
}
.password-strength-indicator.very-weak{
background:#cf0000;
width:20%;
}
.password-strength-indicator.weak{
background:#f6891f;
width:40%;
}
.password-strength-indicator.mediocre{
background:#eeee00;
width:60%;
}
.password-strength-indicator.strong{
background:#99ff33;
width:80%;
}
.password-strength-indicator.very-strong{
background:#22cf00;
width:100%;
}
Son düzenleme: