Hello Sobat, mungkin sudah banyak yang liat pada artikel Membuat from login dengan HTML dan CSS yang sangat sederhana, dan kurang mendukung pada ukuran Desktop yang lebih kecil. nahh maka dari itu saya akan memberikan 1 tambahan tutorial membuat tempalate atau tampilan halaman login dengan HTML dan CSS serta dibuat responsive. langsung saja kita mulai pembuatannya.
1. Pertama kamu meyiapkan 1 buah file dengan nama_file.html, Contohnya (index-1.html). kemudian masukkan script berikut pada file yang telah kamu buat.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Template Login | 1</title>
<link rel="stylesheet" href="style-1.css"> <!-- pemanggilan file css untuk style pada file index-1.html -->
<meta name="viewport" content="width=device-width , initial-scale=1">
</head>
<body>
<div id="login"><!-- membuat sebuah div id dengan tujuan sebagai background utama -->
<div class="center"><!-- div dengan class center bertujuan untuk membuat posisi tag form yang akan dibuat akan menjadi rata tengah -->
<h2>Login Code User</h2> <!-- membuat judul pembuka -->
<form class="fl" action="" method="post">
<input class="itpw" type="text" name="username" placeholder="Username or Email"><br>
<input class="itpw" type="password" name="password" placeholder="Password"><br>
<input class="its" type="submit" name="login" value="LOGIN">
</form>
<p><a href="#">Forget your password ?</a> | <a href="#">Created an account</a> </p>
</div>
</div>
</body>
</html>
Note : Jangan lupa di save.
2. kemudian buatlah file kedua sebagai atau untuk mempercantik halaman index-1.html buatnya harus dalam satu folder dengan index-1.html, agar pemanggilannya file style.css lebih mudah.
3. jika sudah membuat file style.css dalam satu folder dengan index-1.html kemudian isikan pada file style.css sebagai berikut :
Note : pada background image yang terdapat pada #login bisa diisi gambar yang kamu inginkan.* {
padding: 0px;
margin: 0px;
font-family: arial;
}
#login {
width: 100%;
height: 100vh;
background-image: url("img/Poly-Lakeside.jpg");
background-size: cover;
background-repeat: no-repeat;
position: absolute;
}
.center {
width: 350px;
height: auto;
margin: 0 auto;
margin-top: 100px;
background-color: #f0f0f0;
box-shadow: 2px 2px 16px 0px #757575;
padding: 40px;
}
.center h2 {
font-size: 40px;
text-align: center;
color: #757575;
padding-bottom: 40px;
}
.fl {
width: 100%;
}
.itpw {
width: 92%;
padding: 13px 10px;
margin: 5px 0px;
background-color: #dbdbdb;
border: 3px solid #dbdbdb;
color: #757575;
transition: all 0.7s;
}
.its {
width: 99.7%;
font-size: 19px;
color: #f5f5f5;
padding: 12px;
margin: 5px 0;
background-color: #004d40;
border: none;
transition: all 0.4s;
}
.itpw:focus {
border-bottom: 3px solid #004d40;
color: #004d40
}
.its:hover , .its:focus {
opacity: 0.7;
cursor: pointer;
}
.center p {
margin: 20px 0;
text-align: center;
font-size: 14px;
}
.center p a {
color: #757575;
}
@media screen and (min-width:1500px) {
.center {
width: 350px;
}
}
@media screen and (max-width:900px) {
#login {
background-size: 100% 100%;
}
.its {
width: 100%;
}
.itpw {
font-size: 14px;
width: 90%;
padding: 13px 3%;
}
.center {
width: 230px;
}
.center p {
font-size: 12px;
}
}
@media screen and (max-width:350px) {
.center {
padding: 20px;
width: 75%;
}
}
4. kemudian save setelah itu jalankan pada browser index-1.htmlnya. maka hasilnya akan seperti gambar dibawah ini :
5. Selamat anda telah berhasil membuat tampilan halaman login.
Jika sobat masih bingung saya telah menyediakan file yang bisa di unduh secara langsung dan gratis.
Terima Kasih sudah Berkunjung, semoga ilmu yang saya berikan bermanfaat.
cara kerja nya gimana?
ReplyDeleteini ga pake database om ??
ReplyDeleteiya ini tidak menggunakan database. hanya tampilannya saja.
Deletekalau memasukan databasenya sekalian dong bang hehe, makasih
ReplyDelete