Merhaba HTML ile bir web sitesi yaptım ve bu siteye bir kayıt ol butonu ekledim ve ayrı olarak login ekranı yaptım. Bu siteye login ekranını nasıl ekleyebilirim?
Kayıt ol tuşuna basınca yaptığım login ekranı gelecek bunu nasıl ayarlayabilirim? Yardımcı olursanız sevinirim, teşekkürler.
Bu kodu kullanarak web site giriş sayfası oluşturabilirsin:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Uyarı</title>
<style>
* {
box-sizing: border-box;
}
/* Style the body */
body {
font-family: Arial;
margin: 0;
}
/* Header/logo Title */
.header {
padding: 60px;
text-align: center;
background: #0ec09c;
color: rgb(255, 255, 255);
}
/* Style the top navigation bar */
.navbar {
display: flex;
background-color: #373c3b;
}
/* Style the navigation bar links */
.navbar a {
color: white;
padding: 14px 20px;
text-decoration: none;
text-align: center;
}
/* Change color on hover */
.navbar a:hover {
background-color: #ddd;
color: rgb(69, 73, 73);
}
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
/* Main column */
.main {
flex: 70%;
background-color: white;
padding: 20px;
}
/* Fake image, just for this example */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.row, .navbar {
flex-direction: column;
}
}
</style>
</head>
<body>
<!-- Note -->
<div style="background:rgb(49, 50, 50);padding:5px">
</div>
<!-- Header -->
<div class="header">
<h1></h1>
<b>Car trading site</b>
</div>
<!-- Navigation Bar -->
<div class="navbar">
<a href="twolesson.html">Hakkında</a>
<a href="fourlesson.html">Deneme</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<style>
.button {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
}
.button1 {background-color: #0ec09c;} /* Green */
.button2 {background-color: #0ec09c;} /* Blue */
</style>
<style>
.bold {
font-weight: bold;
}
</style>
</head>
<form>
<h4>Login Information</h4>
<p>
<b>Username:</b><br />
<input type="text" size="50" name="username" placeholder="Username" required>
</p>
<p>
<b>E-mail:</b><br />
<input type="email" size="50" name="eposta" placeholder="E-mail" required>
</p>
<p>
<b>Pasword:</b><br />
<input type="password" size="50" name="parola" placeholder="pasword" required>
</p>
<input type="submit" action="twolesson" class="button button2" value="log in">
</a>
</form>
<a class="button button2" href="sing up.html">Sing up</a>
</body>
</html>
