Pada artikel ini saya akan membuat form login keren dengan HTML dan CSS. Kode script ini saya dapatkan diyoutube yang mana bisa menjadikan sumber referensi anda untuk dijadikan yang lebih bagus lagi
Cara Membuat Login Form Keren
Sebelum memulai membuat halaman login ini, anda perlu menyiapkan alat-alat, sebagai berikut.
- Komputer/PC. kalau tidak punya pinjam pergi ke warnet.
- Text Editor. Bebas pakai yang mana.
- Browser. Pakai Internet Explorer (Rekomendasi pakai Chrome).
- Niat. Agar belajarmu hari ini biar tidak sia-sia.
- Sublime Text
- Notepad++
- Komodo Edit
- Atom
- BlueFish
- Vim
- Emacs
- dan sebagainya.
- Langkah pertama: membuat file "index.html" dan kemudian masukkan script dibawah ini:
- Kemudian buat: sebuah file CSS dan beri nama "style.css", dan masukkan script kode berikut ini:
- Lalu Save: dan tarik file "index.html" kebrowser yang kamu miliki. Perlu kamu ingat! jika ingin mengganti gambar dicss body{}. Dan jangan lupa memindahkan file gambar tersebut ke folder yang telah dibuat.
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form class="box" action="https://hipzulblog.blogspot.com/2020/05/cara-membuat-login-form-keren-dengan.html" method="post">
<h1>Login Here</h1>
<input type="text" name="" placeholder="Username">
<input type="password" name="" placeholder="Password">
<input type="submit" name="" value="Login">
</form>
</body>
</html>body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: url(bg.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.box{
width: 300px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #191919;
text-align: center;
}
.box h1{
color: white;
text-transform: uppercase;
font-weight: 500;
}
.box input[type = "text"], .box input[type = "password"]{
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type = "text"]:focus,.box input[type = "password"]:focus{
width: 280px;
border-color: #2ecc71;
}
.box input[type = "submit"]
{
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type = "submit"]:hover
{
background: #2ecc71;
}Setelah selesai mengikuti panduan diatas, maka tampilan form login seperti dibawah ini.
Penutup
Itulah tadi Cara Membuat Login Form Keren dengan HTML CSS, jika ada pertanyaan atau masih bingung anda bisa berkomentar dikolom komentar. Selamat Ngoding dan sampai jumpa ditutorial berikutnya.
Posting Komentar