MEMBUAT LAYOUT LOGIN DAN REGISTRASI DENGAN HTML & CSS
Membuat Layout Login dan Registrasi Dengan HTML&CSS
Di sini saya menggunakan program VS CODE untuk melakukan coding, pastikan juga untuk sudah menginstal XAMPP untuk melihat hasil coddingnya.
LAYOUT LOGIN
1. Membuat file
Pertama Membuat folder baru yang bernama Form_login
2. Buka program VS CODE, pilih Fle > Open Folder > cari folder form_login
Untuk file gambar, pastikan satu folder dengan file-file yang akan di pakai, atau jadi satu di dalam file form_login.
3. Buat file baru dengan nama "index.html"
Lalu membuat koddingan pada index.html seperti ini:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
form_login
<div class="container">
<h1>Login</h1>
<form>
<label>Username</label><br />
<input type="text" /><br />
<label>Password</label><br />
<input type="password" /><br />
<button>Log in</button>
<button>
<a href="register.html">Daftar di sini</a>
</button>
</form>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
outline: 0;
font-family: "Open Sans", sans-serif;
}
body {
height: 100vh;
background-image: url(perpustakaan.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 20px 25px;
width: 300px;
background-color: rgba(0, 0, 0, 0.7);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
.container h1 {
text-align: left;
color: #fafafa;
margin-bottom: 30px;
text-transform: uppercase;
border-bottom: 4px solid #9652ee;
}
.container label {
text-align: left;
color: #ac90f9;
}
.container form input {
width: calc(100% - 20px);
padding: 8px 10px;
margin-bottom: 15px;
border: none;
background-color: transparent;
border-bottom: 2px solid #891eec;
color: rgb(186, 129, 197);
font-size: 20px;
}
.container form button {
width: 100%;
padding: 6px 0;
border: none;
background-color: #1b0255;
font-size: 18px;
color: #5e3680;
}
Kemudian tampilan hasil layout login yang dibuat:
LAYOUT REGISTRASI
1. Membuat file
Pertama Membuat folder baru yang bernama Form_registrasi
2. Buka program VS CODE, pilih Fle > Open Folder > cari folder form_login
Untuk file gambar, pastikan satu folder dengan file-file yang akan di pakai, atau jadi satu di dalam file form_login.
3. Buat file baru dengan nama "index.html"
Lalu membuat koddingan pada index.html seperti ini:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style2.css" />
<title>Document</title>
</head>
<body>
<div class="container">
<h1>Register</h1>
<form>
<label>NIM</label><br />
<input type="text" /><br />
<label>Nama Mahasiswa</label><br />
<input type="text" /><br />
<label>Tanggal Lahir</label><br />
<input type="date" /><br />
<label>Jenis Kelamin</label><br />
<input type="radio" id="Laki-laki" name="gender" value="Laki-laki" />
<label label for="Laki-laki">Laki-laki</label><br />
<input type="radio" id="Perempuan" name="gender" value="perempuan" />
<label label for="Perempuan">Perempuan</label><br />
<label>Prodi</label><br />
<select>
<option>Bisnis Digital</option>
<option>Multimedia</option>
<option>Keamanan Cyber</option></select
><br />
<label>Alamat</label><br />
<input type="text" /><br />
<button>
<a href="index.html">Register</a>
</button>
</form>
</div>
</body>
</html>
Serta style yg digunakan untuk mengkoding:
* {
margin: 0;
padding: 0;
outline: 0;
font-family: "Open Sans", sans-serif;
}
body {
height: 100vh;
background-image: url(perpustakaan.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 20px 25px;
width: 300px;
background-color: rgba(51, 2, 2, 0.7);
box-shadow: 0 0 10px rgba(158, 102, 165, 0.3);
}
.container h1 {
text-align: left;
color: #9b7a0d;
margin-bottom: 30px;
text-transform: uppercase;
border-bottom: 4px solid #311403;
}
.container label {
text-align: left;
color: #e7e3de;
}
.container form button {
width: 100%;
margin-top: 6px;
padding: 6px 0;
border: none;
background-color: #301c02;
font-size: 18px;
color: #72600e;
}
Kemudian tampilan hasil layout registrasi yang dibuat:
.png)
Komentar
Posting Komentar