Halo teman-teman! Pada artikel ini, kita akan belajar cara membuat halaman login menggunakan hanya HTML dan CSS. Sebelumnya, saya telah membagikan snippet lain tentang cara membuat formulir sign-in sederhana. Kali ini, kita akan fokus pada desain halaman login yang responsif dan menarik.
Apa Itu Halaman Login?
Halaman login sangat umum digunakan dalam berbagai jenis aplikasi yang memerlukan autentikasi pengguna. Misalnya, untuk menggunakan Facebook, Anda harus memasukkan kredensial login sebelum mendapatkan akses ke platformnya.
Autentikasi pengguna dilakukan melalui halaman login yang meminta Anda memasukkan email dan kata sandi. Setelah validasi berhasil, Anda dapat mengakses bagian aplikasi yang aman.
Struktur Formulir HTML
Dalam HTML, formulir dibuat menggunakan tag <form></form>, yang berisi berbagai elemen input untuk menerima data dari pengguna. Formulir web sangat fleksibel dan dapat berisi berbagai jenis input seperti text field, password field, radio button, combo box, dan lainnya.
Formulir ini digunakan untuk mengumpulkan informasi pengguna seperti nama, alamat email, nomor telepon, dan data lainnya. Berikut ini adalah contoh halaman login yang dapat Anda gunakan dalam proyek Anda.
Kode Sumber
Jika Anda menyukai desain halaman login ini, silakan gunakan dalam proyek Anda. Salin kode di bawah ini dan simpan dalam dua file, yaitu HTML dan CSS.
File HTML (index.html)
<span style="font-family: verdana, geneva, sans-serif;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login Form | By Rebelsec.id </title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="login">
<form>
<h1>Login In</h1>
<hr />
<p>Explore the World!</p>
<label>Email</label>
<input type="text" placeholder="Email" />
<label>Password</label>
<input type="password" placeholder="Password" />
<button><span>Submit</span></button>
<p><a href="#">Forgot Password?</a></p>
</form>
</div>
<div class="pic">
<img src="logo.png" />
</div>
</div>
</body>
</html></span>
File CSS (style.css)
body {
background: rgb(214, 214, 214);
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}
.container {
width: 1000px;
height: 550px;
margin: 30px auto;
display: flex;
background: rgb(214, 214, 214);
border-radius: 10px;
box-shadow: 5px 5px 7px gray, -5px -5px 7px gray;
}
.login {
width: 500px;
}
form {
width: 230px;
margin: 100px auto;
}
form h1 {
text-align: center;
text-transform: uppercase;
font-weight: bolder;
}
p {
text-align: center;
}
form label {
display: block;
font-size: 16px;
font-weight: 600;
padding: 8px;
}
input {
width: 100%;
padding: 8px;
margin: 8px;
outline: none;
border: none;
border: 1px solid gray;
border-radius: 5px;
}
button {
width: 250px;
margin: 8px;
padding: 8px;
background: purple;
outline: none;
border: none;
border-radius: 20px;
color: white;
font-size: 17px;
cursor: pointer;
transition: 0.5s;
}
button span {
display: inline-block;
position: relative;
transition: 0.5s;
}
button span:after {
content: "\00bb";
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
button:hover span {
padding-right: 30px;
}
button:hover span:after {
opacity: 1;
right: 0;
}
p a {
text-decoration: none;
color: black;
}
hr {
border-top: 2px solid purple;
}
.pic {
width: 75%;
background: violet;
}
.pic img {
width: 400px;
margin: 70px 0 0 100px;
}
img:hover {
padding: 3px;
cursor: pointer;
}
Kesimpulan
Dengan menggunakan HTML dan CSS, Anda dapat dengan mudah membuat halaman login yang sederhana dan menarik. Jika Anda menyukai tutorial ini, bagikan artikel ini dan ikuti kami di media sosial agar tidak ketinggalan update terbaru.
Posting Komentar