Week 9 - Bootstrap
Implementasi Login / Register simple menggunakan Bootstrap, Implementasi ini menggunakan card yang didalamnya diisikan tab dengan class nav pada card-header lalu diberikan kelas tab-content pada card-bodynya dengan id sesuai dengan href yang digunakan pada tag <a> pada nav card tadi
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<title>Document</title>
<style>
html, body{
margin: 0;
width: 100%;
height: 100%;
background-color: white;
}
.col-md-8{
padding-left: 10px;
}
.col-md-8 .nav-underline{
padding:0;
}
.card-body{
display:flex;
flex-direction: column;
justify-content: center;
}
.full-page{
display: flex;
width: 100%;
height: 100vh;
justify-content: center;
align-items: center;
}
input{
width: auto;
max-width: 80%;
}
</style>
</head>
<body>
<div class="full-page">
<div class="card m-3" >
<div class="row g-0">
<div class="col-md-4">
<img src="./src/vista-wei-OiERUvVrioU-unsplash.jpg" class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8 d-flex align-center">
<div class="card-body">
<ul class="nav nav-underline">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#login" aria-selected="true">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#register" aria-selected="false">Register</a>
</li>
</ul>
<div class="tab-content mt-3">
<div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab">
<form action="POST">
<label for="email" class="form-label">Email Address</label>
<input type="email" name="email" class="form-control" id="email" placeholder="Please enter your email">
<label for="password" class="form-label">Password</label>
<input type="password" name="password" class="form-control" id="password" placeholder="Please enter your password">
<div class="mt-3">
<button type="submit" class="btn btn-primary">Submit</button>
</div> </form>
</div>
<div class="tab-pane fade" id="register" role="tabpanel" aria-labelledby="register-tab">
<form action="POST">
<label for="fullName" class="form-label">Full Name</label>
<input type="text" class="form-control" id="fullName" placeholder="Please enter your full name">
<label for="registerEmail" class="form-label">Email Address</label>
<input type="email" class="form-control" id="registerEmail" placeholder="Please enter your email">
<label for="registerPassword" class="form-label">Password</label>
<input type="password" class="form-control" id="registerPassword" placeholder="Please enter your password">
<label for="confirmPassword" class="form-label">Confirm Password</label>
<input type="password" class="form-control" id="confirmPassword" placeholder="Please re-enter your password">
<div class="mt-3">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</html>
Comments
Post a Comment