Layout dan Html CSS
1. Pembuatan folder. Pertama lakukan pembuatan folder dengan judul form_login pada folder xampp: Local Disk(C:) > XAMPP > htdocs > new folder (FormLogin)
.png)
2. Buka program VS CODE, pilih Fle > Open Folder > cari folder "FormLogin'
.png)
3. Buat file baru dengan format nama index.html lalu ketik tanda seru (!) klik enter. lalu edit Edit title pada baris 7 dan ganti kata “Document” dengan kata “Membuat Form Login”.
4. Diatas title baris 7 sisipkan kode utk akses CSS
Eksternal.
<!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>Membuat Form Login</title>
</head>
<body>
<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>
<p class="register">
Belum punya akun?
<a href="register.html">Register</a>
</p>
</form>
</div>
</body>
</html>
5. Buat file style.css untuk mengatur layout. lalu isikan kode-kode berikut ini
* {
margin: 0;
padding: 0;
outline: 0;
font-family: "Open Sans", sans-serif;
}
body {
height: 100vh;
background-image: url("5e31159cc77542096517fd0b7b616650.png");
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 #2979ff;
}
.container label {
text-align: left;
color: #90caf9;
}
.container form input {
width: calc(100% - 20px);
padding: 5px 8px;
margin-bottom: 15px;
border: none;
background-color: transparent;
border-bottom: 2px solid #2979ff;
color: #fafafa;
font-size: 20px;
}
.container form button {
width: 100%;
padding: 5px 0;
border: none;
background-color: #2979ff;
font-size: 18px;
color: #fafafa;
}
.register {
color: white;
margin-top: 15px;
}
6. Tampilannya akan
menjadi seperti ini
.png)
6. Selanjutnya buat file baru untuk form register,
buat file baru dengan nama "daftar.html" dan isi sebagai berikut
<!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>Membuat Form Register</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>Prodi</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>Agama</label><br>
<select id="Agama" name="Agama">
<option value="Islam">Islam</option>
<option value="Kristen">Kristen</option>
<option value="Katholik">Katholik</option>
<option value="Hindu">Hindu</option>
<option value="Buddha">Buddha</option>
<option value="Konghucu">Konghucu</option>
</select><br>
<label>Alamat</label><br>
<input type="text"><br>
<button>register</button>
</body>
</html>
7. Selanjutnya buat juga buat file "style2.css" supaya membedakan dengan file sebelumnya bisa ditambahkan angka "2". Isi seperti berikut
* {
margin: 0;
padding: 0;
outline: 0;
font-family: "Open Sans", sans-serif;
}
body {
height: 100vh;
background-image: url("609931bb5334c.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(59, 47, 47, 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 #005eff;
}
.container label {
text-align: left;
color: #ffffff;
}
.container form input {
padding: 5px 8px;
border: none;
background-color: transparent;
border-bottom: 2px solid #2979ff;
color: #fafafa;
font-size: 15px;
}
.container form button {
width: 100%;
margin-top: 25px;
padding: 10px;
border: none;
background-color: #2979ff;
font-size: 18px;
color: #fafafa;
}
8. Tampilannya akan menjadi seperti ini
.png)
Komentar
Posting Komentar