MEMBUAT LAYOUT LOGIN DENGAN HTML & CSS
MEMBUAT LAYOUT LOGIN DENGAN HTML & CSS
Hello besties! di sini Briele menggunakan program atau aplikasi Visual Sudio Code untuk melakukan coding, pastikan juga besties sudah menginstal XAMPP.
1. Yang pertama Pembuatan folder. Pada step ini besties bisa melakukan pembuatan folder dengan judul form_login pada folder xampp: Local Disk(C:) > XAMPP > htdocs > new folder (FormLogin).
.png)
2. Yang kedua Buka aplikasi Visual Studio Code, pilih Fle > Open Folder > cari folder form_login.
.png)
Untuk file gambar, pastikan satu folder dengan file-file yang akan di pakai, atau jadi satu di dalam file form_login.
3. Step ketiga besties bisa buat file baru dengan nama "index.html". Maka isinya akan seperti ini :
.png)
4. Selanjutnya besties buat juga buat file "style.css". Isinya seperti berikut besties!
* {
margin: 0;
padding: 0;
outline: 0;
font-family: "Open Sans", sans-serif;
}
body {
height: 100vh;
background-image: url("2612498771.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 #2979ff;
}
.container label {
text-align: left;
color: #90caf9;
}
.container form input {
width: calc(100% - 20px);
padding: 8px 10px;
margin-bottom: 15px;
border: none;
background-color: transparent;
border-bottom: 2px solid #2979ff;
color: #fff;
font-size: 20px;
}
.container form button {
width: 100%;
padding: 5px 0;
border: none;
background-color: #2979ff;
font-size: 18px;
color: #fafafa;
}
5. Setelah besties ketik style css tersebut, maka tampilannya akan menjadi seperti ini
.png)
6. Step Selanjutnya besties bisa 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" />
</head>
<body>
<div class="container">
<h1>Daftar</h1>
<form>
<label>NIM</label><br />
<input type="text" /><br />
<label>Nama Mahasiswa</label><br />
<label>Agama</label><br />
<select>
<option>Islam</option>
<option>Kristen</option>
<option>Katolik</option>
<option>Budha</option>
<option>Hindu</option>
<option>Konghucu</option></select
><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>
7. Step Terakhir besties perlu 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(“login-img.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 #2979ff;
}
.container label {
text-align: left;
color: #90caf9;
}
.container form input {
width: calc(100% - 20px);
padding: 8px 10px;
margin-bottom: 15px;
border: none;
background-color: transparent;
border-bottom: 2px solid #2979ff;
color: #fff;
font-size: 20px;
}
.container form button {
width: 100%;
padding: 5px 0;
border: none;
background-color: #2979ff;
font-size: 18px;
color: #fafafa;
}
body {
background-image: url("713688.jpg");
}
8.Maka tampilannya akhirnya akan seperti ini besties!
.png)
.png)
Tidak ada komentar: