Berliana Panca Dewi Nurhidayah
5053231028
Membuat page Sign in dan Register
Kode yang digunakan untuuk membuat page tersebut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up</title>
<!-- Tambahkan Link ke Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f2f2f2;
}
.signup-container {
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
max-width: 500px;
width: 100%;
}
.signup-container h2 {
text-align: center;
color: #333;
}
.signup-container input[type="text"],
.signup-container input[type="email"],
.signup-container input[type="password"] {
width: 100%;
padding: 10px;
margin: 8px 0;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
}
.signup-container input[type="checkbox"] {
margin-right: 8px;
}
.signup-container label {
font-size: 14px;
color: #666;
}
.signup-container .buttons {
display: flex;
justify-content: space-between;
margin-top: 15px;
}
.signup-container button {
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
color: white;
}
.signup-container .register-btn {
background-color: #007bff;
}
.signup-container .signin-btn {
background-color: #28a745;
}
.signup-container .terms {
font-size: 12px;
color: #888;
text-align: center;
margin-top: 15px;
}
.signup-container .terms a {
color: #007bff;
text-decoration: none;
}
.signup-container .terms a:hover {
text-decoration: underline;
}
body {
background-color: #ffffff;
background-image: url('bgawan.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="signup-container">
<h2>Create an Account</h2>
<form action="#" method="post">
<div class="mb-3">
<input type="text" name="first_name" class="form-control" placeholder="First Name" required>
</div>
<div class="mb-3">
<input type="text" name="last_name" class="form-control" placeholder="Last Name" required>
</div>
<div class="mb-3">
<input type="text" name="display_name" class="form-control" placeholder="Display Name" required>
</div>
<div class="mb-3">
<input type="email" name="email" class="form-control" placeholder="Email Address" required>
</div>
<div class="mb-3">
<input type="password" name="password" class="form-control" placeholder="Password" required>
</div>
<div class="mb-3">
<input type="password" name="confirm_password" class="form-control" placeholder="Confirm Password" required>
</div>
<div class="form-check mb-3">
<input type="checkbox" class="form-check-input" name="terms" required>
<label class="form-check-label" for="terms">I agree to the <a href="#">Terms and Conditions</a></label>
</div>
<div class="buttons">
<button type="submit" class="btn register-btn">Register</button>
<button type="button" class="btn signin-btn">Sign In</button>
</div>
</form>
<div class="terms">
By clicking Register, you agree to our <a href="#">Terms and Conditions</a>.
</div>
</div>
<!-- Tambahkan Link ke Bootstrap JS dan Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>
Tidak ada komentar:
Posting Komentar