Halaman login adalah halaman yang digunakan untuk masuk ke suatu sistem atau layanan dengan menggunakan akun dan kata sandi yang telah terdaftar sebelumnya. Halaman ini biasanya digunakan oleh aplikasi atau situs web yang memerlukan otentikasi pengguna untuk mengakses fitur-fiturnya. Pembuatan halaman login yang baik dan responsif sangatlah penting untuk memberikan pengalaman yang baik bagi pengguna.
Untuk membuat halaman login, kita dapat menggunakan HTML dan CSS. HTML digunakan untuk membuat struktur halaman, sedangkan CSS digunakan untuk membuat tampilan halaman. Kita juga perlu membuat halaman yang responsif agar dapat menyesuaikan diri dengan berbagai ukuran layar yang berbeda, seperti layar desktop, tablet, dan smartphone.
Berikut ini adalah kode HTML untuk membuat halaman login sederhana beserta CSS-nya untuk membuat tampilan responsif:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halaman Login</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
width: 100%;
max-width: 400px;
margin: 0 auto;
margin-top: 50px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
padding: 20px;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
border-radius: 5px;
border: none;
margin-bottom: 20px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
input[type="submit"] {
background-color: #4CAF50;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
@media screen and (max-width: 600px) {
.container {
margin-top: 20px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Halaman Login</h1>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="Login">
</form>
</div>
</body>
</html>
Penjelasan:
Baris 1-9 adalah kode untuk membuat struktur dasar halaman HTML dan menambahkan meta viewport untuk membuat halaman responsif.
Baris 11-31 adalah kode CSS untuk menentukan tampilan halaman login. Body diatur untuk memiliki font-family dan background-color tertentu. Container div digunakan untuk membatasi area halaman login dan membuatnya responsif dengan menetapkan max-width ke 400px dan margin: 0 auto. Selain itu, container div diberi warna latar belakang, radius sudut dan shadow box. H1 digunakan untuk judul halaman. Label dan input digunakan untuk menampilkan form login. Input submit diatur dengan warna latar belakang dan font warna yang sesuai dengan gaya halaman.
Baris 33-45 adalah kode CSS yang digunakan untuk mengubah tampilan halaman ketika layar memiliki lebar maksimum 600px atau kurang. Di sini, margin-top pada container div diperkecil untuk memberikan ruang yang cukup pada layar yang lebih kecil.
Kesimpulan: Dengan menggunakan HTML dan CSS, kita dapat membuat halaman login yang baik dan responsif. Dalam contoh di atas, kita menggunakan CSS untuk mengatur tampilan halaman dan membuatnya responsif agar dapat menyesuaikan diri dengan berbagai ukuran layar. Semoga contoh kode ini dapat membantu dalam membuat halaman login yang bagus dan responsif.
0 Comments
Posting Komentar