Merhaba,
Logın Ekranı Başta Turk Hack Team Forumu Olmak Üzere Bir Çok Sitenin Ve Uygulamanın Vazgeçilmezidir, Kodlar Şahsıma Aittir.
Html Kodlarım (index.html):
Şimdi İse Web sitemin Style.css Dosyasını Kodluyoruz:
[url=https://www.hizliresim.com/8g8uvz9]
Şimdi js Kodlamasını Yapıyoruz:
[url=https://www.hizliresim.com/cwbclft]
Şİmdi İse Newpage Yani Giriş Yapıldıpında Ekranda Çıkmasını İstediğiniz Yazıyı Kodluyoruz:
[url=https://www.hizliresim.com/nbzridp]
Arkaplanda kullandığım resimi paylaşamdım hd photo diye galiba onuda paylaşırsam bu konu içerisinde bildiririm .
Logın Ekranı Başta Turk Hack Team Forumu Olmak Üzere Bir Çok Sitenin Ve Uygulamanın Vazgeçilmezidir, Kodlar Şahsıma Aittir.
Html Kodlarım (index.html):
[/I]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Ekranı | Eagleweb</title>
<link rel="stylesheet" href="style.css">
<script src="eagle.js"></script>
</head>
<body>
<div class="form">
<h1>LOGIN HERE</h1>
<p>username :</p>
<input type="text" name="" placeholder="Name Here">
<P>Password :</P>
<input type="password" name="" placeholder="Password Here" id="pass">
<input type="checkbox" onclick="myFunction()">
<input type="sub" name="" value="LOGIN" onclick="eagledate()">
</div>
<div>
<p id="length"></p>
</div>
</body>
</html>
[I]Şimdi İse Web sitemin Style.css Dosyasını Kodluyoruz:
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
body{
background: linear-gradient(rgba(0,0,0,0.4)50%), rgba(0,0,0,0.4)50%, url(2.jpg) ;
background-position: center;
background-size: cover;
height: 100vh;
}
.form{
width: 250px;
height: 330px;
color: #fff;
background: linear-gradient(to top, rgba(0,0,0,0.8)50%), rgba(0,0,0,0.8)50% ;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
padding: 40px 25px;
border-radius: 10px;
}
.form h1{
width: 220px;
text-align: center;
padding-left: 11px;
font-size: 35px;
color: #66ff00;
margin-bottom: 20px;
}
.form p{
padding-bottom: -15px;
}
.form input{
width: 100%;
height: 35px;
padding-top: 5px;
margin-bottom: 30px;
background: transparent;
border-bottom: 1px solid #fff;
border-top: none;
border-left: none;
border-right: none;
color: #fff;
outline: none;
font-size: 15px;
letter-spacing: 1px;
}
.form input[type="sumbit"]
{
width: 60%;
margin-left: 50px;
border: none;
height: 40px;
color: #000;
background: #fff;
font-size: 16px;
font-weight: bold;
border-radius: 15px;
}
.form input[type="sumbit"]:hover{
cursor: pointer;
background: #66ff00;
color: #fff;
font-weight: bold;
}
[url=https://www.hizliresim.com/8g8uvz9]
Şimdi js Kodlamasını Yapıyoruz:
.function myFunction(){
var x =document.getElementById("pass");
if(x.type === "password"){
x.type = "text"
}
else{
x.type = "password";
}
}
function eagledate(){
var password = document.getElementById("pass");
var length = document.getElementById("lenght");
if(password.eagle.length >=8){
alert("Logın Succesfull");
window.location.replace("newspage.html");
return false;
}
else{
alert("Logın failed");
}
}
[url=https://www.hizliresim.com/cwbclft]
Şİmdi İse Newpage Yani Giriş Yapıldıpında Ekranda Çıkmasını İstediğiniz Yazıyı Kodluyoruz:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Page</title>
</head>
<body>
<h1>WELCOME TO OUT NEW PAGE </h1>
</body>
</html>
[url=https://www.hizliresim.com/nbzridp]
Arkaplanda kullandığım resimi paylaşamdım hd photo diye galiba onuda paylaşırsam bu konu içerisinde bildiririm .
