Bootstrap
link : Klik disini!
CSS:
/* style.css */
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.container-fluid {
padding: 0; /* Pastikan tidak ada padding di container-fluid */
}
img {
width: 100%;
height: 100px;
object-fit: cover;
}
@media (max-width: 576px) {
.responsive-img {
height: 200px;
object-fit: cover;
}
}
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login Page</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main>
<img src="./Desktop - 2.png" class="img-fluid responsive-img" alt="" />
<div class="container mt-4">
<h3 class="login-heading mb-3 text-center">Selamat Datang!</h3>
<h6 class="login-heading mb-5 text-center">
Silahkan login terlebih dahulu
</h6>
<form
action="#"
method="POST"
class="mx-auto w-100"
style="max-width: 600px"
>
<div class="mb-3">
<label for="input1" class="form-label">Email</label>
<input
type="email"
class="form-control"
id="input1"
placeholder="Masukkan email"
/>
</div>
<div class="mb-3">
<label for="input2" class="form-label">Password</label>
<input
type="password"
class="form-control"
id="input2"
placeholder="Masukkan password"
/>
</div>
<div class="mb-3">
<input class="form-check-input" type="checkbox" id="gridCheck" />
<label class="form-check-label" for="gridCheck">
Simpan password
</label>
</div>
<button type="button" class="btn btn-primary mb-2">Login</button>
<div>
<a class="small" href="#">Lupa password?</a>
</div>
</form>
</div>
</main>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</body>
</html>
Comments
Post a Comment