Login Form Transparan Sederhana

Hai Skom (Sobat Komputer), selamat datang di artikel saya semoga sehat selalu. Kali ini saya akan berbagi informasi bagaimana membuat tampilan login form sederhana yang responsive dan mudah hanya menggunakan CSS dan HTML.

Apa itu Login Form? Login Form sendiri merupakan sebuah halaman website yang ditujukan untuk login atau masuk kedalam website tersebut dengan fitur yang dikhususkan bagi member ataupun admin dari website tersebut.

Langsung saja kita buat halaman Login Formnya.

1. Pertama kita buat terlebih dahulu file .htmlnya

Caranya buka text editor kalian biasa notepad/notepad++, atom ataupun visual studio code

kemudian tinggal kalian copy dan pastekan code dibawah ini :

<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>

<meta charset="utf-8">

<title></title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="login-box">

<h1>Login</h1>

<div class="textbox">

<i class="fas fa-user"></i>

<input type="text" placeholder="Username">

</div>

<div class="textbox">

<i class="fas fa-lock"></i>

<input type="password" placeholder="Password">

</div>

<input type="button" class="btn" value="Sign in">

</div>

</body>

</html>

Pada bagian <title>Isikan Judul Halaman </title> sesuaikan dengan yang kalian inginkan ntah diisi dengan nama website ataupun nama halaman misal nama website kalian contoh <title>Sudut Komputer </title> atau nama halaman misalnya <title>Login</title>

2. Membuat Style Tampilan
Setelah langkah pertama selesai kita buat style tampilan agar menjadi menarik dan enak untuk dilihat. Caranya dengan membuat file baru .css di text editor yang paling kalian suka bebas. Kemudian kalian copy dan pastekan code dibawah ini :

@import "https://use.fontawesome.com/releases/v5.5.0/css/all.css";

body{

margin: 0;

padding: 0;

font-family: sans-serif;

background: url(bg.jpg) no-repeat;

background-size: cover;

}

.login-box{

width: 280px;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

color: white;

}

.login-box h1{

float: left;

font-size: 40px;

border-bottom: 6px solid #4caf50;

margin-bottom: 50px;

padding: 13px 0;

}

.textbox{

width: 100%;

overflow: hidden;

font-size: 20px;

padding: 8px 0;

margin: 8px 0;

border-bottom: 1px solid #4caf50;

}

.textbox i{

width: 26px;

float: left;

text-align: center;

}

.textbox input{

border: none;

outline: none;

background: none;

color: white;

font-size: 18px;

width: 80%;

float: left;

margin: 0 10px;

}

.btn{

width: 100%;

background: none;

border: 2px solid #4caf50;

color: white;

padding: 5px;

font-size: 18px;

cursor: pointer;

margin: 12px 0;

}

Setelah kalian copy ke dalam text edito sesuaikan bagian-bagian berikut dengan yang kalian inginkan:

font-family: sans-serif;

background: url(bg.jpg) no-repeat;

Pada bg.jpg bisa kalian ganti dengan nama file background yang akan kalian gunakan serta pada bagian font family ubah style font yang ingin kalian gunakan, disini saya menggunakan style sans serif.

Kemudian pada tulisan Login bisa kalian ubah juga dengan cara mengubah code dibawah ini :

.login-box h1{

float: left;

font-size: 40px;

border-bottom: 6px solid #4caf50;

margin-bottom: 50px;

padding: 13px 0;

}

code di atas untuk mengedit tampilan dari Judul login form mulai dari ukuran dan warna text yang diinginkan.

Untuk mengedit tombol login kalian bisa ubah code dibawah ini :

.btn{

width: 100%;

background: none;

border: 2px solid #4caf50;

color: white;

padding: 5px;

font-size: 18px;

cursor: pointer;

margin: 12px 0;

}

code di atas untuk mengatur warna test tombol login dan ukuran text yang ingin kalian ubah.

Itulah contoh membuat halaman login form transparan sederhana dan simple dengan CSS dan HTML, semoga artikel ini bermanfaat bagi kalian dan sampai jumpa di artikel selanjutnya.

Login Form Transparan Sederhana

1 Response to "Login Form Transparan Sederhana"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel