create a login page in html and css
Oke everyone, now we will learn about how to create a login page in html and css
First, open text editor
Then, create file loginpage.html and style.css
Open html file, then create the html code.
Here I use a form with the title login. And for the login page that will be prepared, namely with a display displaying username and password input. For the username, the input used is text and for the password using the password input type.
To tidy up the input I use a table.
The following is login.html file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="loginpage">
<center>
<form>
<h3>Login</h3>
<table>
<tr>
<td>Username</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name=""></td>
</tr>
</table>
</form>
</center>
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="loginpage">
<center>
<form>
<h3>Login</h3>
<table>
<tr>
<td>Username</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name=""></td>
</tr>
</table>
</form>
</center>
</div>
</div>
</body>
</html>
The following is style.css file:
.container{
background-image: url(bgc.jpg);
background-size: cover;
height: 100%;
}
.loginpage{
width: 500px;
background-color: black;
height: 400px;
border-radius: 10px;
margin: auto;
opacity: 0.8;
}
h3{
color: #fff;
text-align: center;
}
table tr td{
color: #fff;
}
background-image: url(bgc.jpg);
background-size: cover;
height: 100%;
}
.loginpage{
width: 500px;
background-color: black;
height: 400px;
border-radius: 10px;
margin: auto;
opacity: 0.8;
}
h3{
color: #fff;
text-align: center;
}
table tr td{
color: #fff;
}
0 Response to "create a login page in html and css"
Posting Komentar