Membangun Kesan Pertama yang Kuat dengan Halaman Login Menggunakan HTML dan CSS
Halaman login adalah titik awal dari setiap interaksi pengguna di berbagai platform seperti aplikasi mobile maupun website. Membangun tampilan yang ramah, intuitif, dan konsisten membantu menciptakan kesan pertama yang positif dan tentunya membangun kepercayaan.
Dalam dunia digital saat ini, halaman login menjadi jembatan yang menghubungkan pengguna dengan akses yang aman dan pribadi ke platform online. Ini bukan sekadar elemen desain, tetapi juga sebagai gerbang pertahanan utama yang melindungi informasi berharga.
Langkah-langkah Penting untuk Membangun Halaman Login yang Responsif :
Dalam era beragam perangkat saat ini, responsivitas adalah kunci. Menjelajahi praktik-praktik terbaik dalam mengembangkan halaman login responsif memastikan tampilan yang optimal di berbagai layar.
Bagaimana cara membuat halaman login sebuah website yang responsif dengan menggunakan HTML dan CSS ?
Pertama kita coba buat perintah HTML sederhana seperti contoh dibawah
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Login</title>
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form action="#" method="post">
<input type="text" class="login-input" placeholder="Username" name="username" required>
<input type="password" class="login-input" placeholder="Password" name="password" required>
<button type="submit" class="login-button">Login</button>
</form>
</div>
</body>
</html>
Sehingga jika kita jalankan script diatas akan muncul halaman web seperti gambar dibawah ini
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.login-container {
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 300px;
text-align: center;
}
.login-container h2 {
margin-bottom: 20px;
}
.login-input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.login-button {
background-color: #007bff;
color: #ffffff;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
}
.login-button:hover {
background-color: #0056b3;
}
</style>
kode CSS diatas akan menghasilkan desain form login yang responsif dan rapi, setelah kita jalankan website akan tampil seperti gambar dibawah :
Berikut potongan program lengkapnya :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Login</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.login-container {
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 300px;
text-align: center;
}
.login-container h2 {
margin-bottom: 20px;
}
.login-input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.login-button {
background-color: #007bff;
color: #ffffff;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
}
.login-button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form action="#" method="post">
<input type="text" class="login-input" placeholder="Username" name="username" required>
<input type="password" class="login-input" placeholder="Password" name="password" required>
<button type="submit" class="login-button">Login</button>
</form>
</div>
</body>
</html>
Anda dapat menyimpan kode di atas dalam file HTML (misalnya: login.html) dan membukanya menggunakan browser untuk melihat hasilnya. Pastikan untuk menyesuaikan desain anda sesuai dengan preferensi dengan memodifikasi CSS dan markup HTML sesuai kebutuhan Anda.
Sekian tutorial kali ini ya, semoga bermanfaat.
0 komentar:
Posting Komentar