Membuat Desain Login Form Dengan HTML & CSS - Razzer Hacker

Halo Sobat, Pada kesempatan kali ini saya akan membagikan script form login yang di buat dengan HTML dan CSS. Sebelum nya saya akan menjelaskan terlebih dahulu.

Setiap website pasti menggunakan halaman login untuk masuk kehalaman admin. Halaman login biasnya berisi akun email dan password untuk melakukan login. selain itu, biasanya juga terdapat fitur register dan lupa kata sandi.

Pada tutorial kali ini kita akan membuat desain form login seperti gambar di bawah :

Sekarang kita mencoba membuat dengan step step dibawah ini.

1. Silahkan sobat membuat Folder.

2. Buka aplikasi code editor kalian lalu di save dan diberi nama index.html simpan di dalam folder yang sudah kalian buat tadi.

3. Lalu masukkan script dibawah ini pada file index.html


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE-edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
<title>Razzer Form Login</title> 
<link rel="stylesheet" type="text/css" href="login.css"> 
</head> 
<body> 
<div class="razzer-login"> 
<h2>Sign In</h2>
<form> 
<div class="input-group"> 
<input type="text" name="" required="required"> 
<span>Username</span> 
</div> 
<div class="input-group"> 
<input type="password" name="" required="required"> 
<span>Password</span> 
</div> 
<div class="input-group"> 
<input type="submit" name="" value="login"> 
</div> 
</form> 
<a href="#" style="text-align: center;">Forgot Password?</a> 
</div> 
</body> 
</html>

4. Silahkan buka pada pada web browser kalian maka hasilnya akan seperti dibawah.

5. Sekarang kita desain login form nya dengan Style CSS nya agar menjadi bagus dengan ada nya Style CSS.

6. Buat file login.css lalu simpan di dalam folder yang tadi.

7. Lalu masukkan script di bawah ini pada file login.css


body {
margin: 0;
padding:0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: poppins,sans-serif;
background-color:#1d1f21;
}

.razzer-login {
text-align: center;
width: 350px;
box-sizing: border-box;
padding: 40px;
background:#fff;
border: 2px solid black;
}

.razzer-login h2 {
margin: 0 0 20px;
padding: 0;
font-size: 30px;
text-transform: uppercase;
}

.razzer-login .input-group {
position: relative;
width: 100%;
margin-bottom: 25px;
}

.razzer-login .input-group input {
height: 50px;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
font-size: 18px;
outline: none;
border:1px solid #000;
}

.razzer-login .input-group span {
position: absolute;
top:12px;
left: 20px;
padding: 0;
transition: 0.5s;
pointer-events: none;
background:#fff; 
text-transform: uppercase;
}

.razzer-login .input-group input:focus~span,
.razzer-login .input-group input:valid~span {
top:-12px;
left: -12px;
font-size: 12px;
padding: 2px 4px;
border: 1px solid #000;
background:#42f4c2; 
}

.razzer-login .input-group input[type="submit"] {
background: #42f4c2;
border: none;
box-shadow: none;
text-transform: uppercase;
cursor: pointer;
font-weight: 600;
}

.razzer-login .input-group input[type="submit"]:hover {
background: #ffc107;
}

.razzer-login a {
color: #262626;
display: block;
text-align: left;
color: #666;
}

.razzer-login a span{
color: #262626;
font-weight: 600;
}

8. Kemudian refresh index.html pada web browser kalian , maka hasilnya akan seperti dibawah.