Berikut adalah langkah-langkah cara membuat tampilan login menggunakan HTML dan CSS:
1. Membuat Struktur HTML
Buka program editor teks atau IDE favorit Anda dan buat file HTML baru. Mulai dengan menambahkan struktur HTML dasar seperti berikut:
```
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
</head>
<body>
</body>
</html>
```
2. Membuat Form Login
Tambahkan elemen `<form>` untuk membuat form login. Form login akan berisi elemen-elemen seperti textbox untuk username dan password tombol submit dan tautan untuk lupa password. Berikut adalah contoh kode HTML untuk form login:
```
<form action="" method="post">
<h2>Login Form</h2>
<div>
<input type="text" name="username" placeholder="Username" required />
</div>
<div>
<input type="password" name="password" placeholder="Password" required />
</div>
<div>
<button type="submit" class="btn btn-primary btn-block btn-large">Let me in.</button>
</div>
<div>
<a href="#">Lupa Password?</a>
</div>
</form>
```
3. Membuat Stylesheet CSS
Buka file baru untuk stylesheet CSS Anda dan simpan sebagai `style.css`. Kemudian tambahkan kode berikut untuk membuat tampilan login yang menarik:
```
body {
font-family: Arial Helvetica;
font-size: 14px;
background-color: #e6e6e6;
}
form {
background-color: #fff;
padding: 20px;
width: 350px;
height: 450px;
margin: auto;
margin-top: 50px;
border-radius: 10px;
box-shadow: 0px 0px 20px #888888;
}
h2 {
text-align: center;
color: #666666;
padding-bottom: 20px;
}
input[type="text input[type="password"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}
button[type="submit"]:hover {
background-color: #45a049;
}
a {
text-decoration: none;
color: #666666;
}
a:hover {
color: #000;
}
```
4. Hubungkan HTML dengan CSS
Tambahkan kode berikut di dalam tag `<head>` untuk menghubungkan file HTML dengan stylesheet CSS:
```
<link rel="stylesheet" type="text/css" href="style.css">
```
5. Preview Tampilan Login
Buka file HTML di browser Anda dan lihatlah tampilan login Anda yang baru saja dibuat!
Itulah cara sederhana membuat tampilan login menggunakan HTML dan CSS. Gunakan kreativitas Anda untuk menambahkan lebih banyak elemen atau memodifikasi tampilan agar lebih menarik dan sesuai dengan kebutuhan Anda.