Cara Membuat Login Sederhana Menggunakan HTML Dan CSS

Halaman login pada situs website merupakan salah satu element yang harus ada dan dimiliki agar pemilik situs dapat masuk dan mudah membuat serta mengedit halaman tertentu. Pada tutorial ini akan mengajarkan bagaimana cara membuat halaman login sederhana dengan HTML dan CSS. Berikut langkahnya.

Sekarang ini kita akan membuat halaman login sederhana menggunakan HTML sebagai Markup dan CSS sebagai style pada halaman kita ini Jangan lupa untuk siapkan Text Editor kalian seperti Visual Studio Code / Sublime Text / Atom.

1. Yang Pertama siapkan 2 file berbeda yaitu : index.html dan style.css. Kemudian hubungkan CSS nya

2. Kamu dapat melihat contoh kode HTML yang telah penulis buat.

> Keterangan : Fungsi dari ” ” Untuk memanggil font dari google, Jika kalian tidak mau bisa dihapus

3. Disini kita mempunya div kotak yang diisi di dalamnya ada kotak : name, pw, button & reset fungsi dari kotak ini sendiri sebagai pembungkus yang akan kita eksekusi di CSS nya

4. Jika sudah buka file style.css kamu dan masukkan kode CSS di bawah ini

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 29%, rgba(0, 212, 255, 1) 100%);
font-size: 25px;
font-family: ‘Oswald’, sans-serif;
text-align: center;
}
.kotak {
width: 550px;
height: 350px;
/* border-radius: 20px; */
margin-left: auto;
margin-right: auto;
margin-top: 20vh;
transition: 0.8 hove
}
.kotak:hover {
background-color: rgba(255, 255, 255, 0.2);
border-radius: 20px;
}
.kotak .name {
padding : 50px;
color : white;
}
.kotak input[type=”text”],
.kotak input[type=”password”] {
height: 25px;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
.kotak .pw {
color : white;
margin-bottom: 40px;
}
.kotak .button,
.kotak .reset {
display: inline-block;
margin: auto;
width: 80px;
border : 2px solid white;
background-color : white;
font-weight: bold;
border-radius: 10px;
cursor: pointer;
}
.reset:hover,
.button:hover {
font-size: 20px;
border-radius: 20px;
}

5. Jika kamu ingin mengubah isi dalam CSS itu silakan, Sesuaikan dengan keinginan kamu saja. Button pada login dan reset ini sama sekali tidak berfungsi jika di klik, Ini hanya tampilannya saja

Berikut hasil yang telah kita buat:

Bagaimana ? Keren bukan, Jangan lupa untuk kreasin CSS kamu juga ya. Selamat mencoba!