Template Login Page
Template para página de login
Código
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up Today</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!-- Custom Styles -->
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f4f6ff;
margin: 0;
padding: 0;
}
.container-fluid {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.signup-section {
display: flex;
background-color: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.signup-image {
background-color: #f4f6ff;
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
}
.signup-image img {
max-width: 100%;
height: auto;
}
.signup-form {
background-color: #006eff;
color: white;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
max-width: 400px;
}
.signup-form h2 {
font-size: 2rem;
margin-bottom: 30px;
}
.form-control {
border-radius: 50px;
padding: 10px 20px;
margin-bottom: 20px;
background-color: #eaf2ff;
border: none;
color: #333;
}
.form-control:focus {
background-color: #fff;
border-color: #007bff;
box-shadow: none;
}
.password-strength {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
color: #fff;
}
.password-strength span {
width: 25%;
height: 5px;
background-color: #ddd;
}
.password-strength .strong {
background-color: #28a745;
}
.password-strength .medium {
background-color: #ffc107;
}
.password-strength .weak {
background-color: #dc3545;
}
.btn-custom {
border-radius: 50px;
padding: 10px 20px;
font-size: 1rem;
margin-top: 20px;
text-transform: uppercase;
transition: all 0.3s ease;
}
.btn-primary-custom {
background-color: #ff8800;
border: none;
color: white;
}
.btn-outline-custom {
background-color: transparent;
border: 2px solid white;
color: white;
}
.btn-outline-custom:hover {
background-color: white;
color: #006eff;
}
@media (max-width: 768px) {
.signup-section {
flex-direction: column;
}
}
</style>
</head>
<body>
<!-- Main Container -->
<div class="container-fluid">
<div class="signup-section">
<!-- Image Section -->
<div class="signup-image">
<img src="https://via.placeholder.com/300x400" alt="Illustration">
</div>
<!-- Form Section -->
<div class="signup-form">
<h2>Join Us Today!</h2>
<form>
<input type="text" class="form-control" placeholder="Enter your name" required>
<input type="email" class="form-control" placeholder="Enter your email" required>
<input type="password" class="form-control" placeholder="Create a password" required>
<!-- Password Strength Indicator -->
<div class="password-strength">
<span class="weak"></span>
<span class="medium"></span>
<span class="strong"></span>
</div>
<div class="d-flex justify-content-between">
<a href="https://enepta.com" class="btn btn-custom btn-primary-custom">Create Account</a>
<a href="https://enepta.com" class="btn btn-custom btn-outline-custom">Sign In</a>
</div>
</form>
</div>
</div>
</div>
<!-- Bootstrap JS and Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<!-- JavaScript for Password Strength Indicator -->
<script>
const passwordInput = document.querySelector('input[type="password"]');
const strengthBars = document.querySelectorAll('.password-strength span');
passwordInput.addEventListener('input', () => {
const password = passwordInput.value;
if (password.length > 8) {
strengthBars[2].classList.add('strong');
strengthBars[1].classList.remove('medium');
strengthBars[0].classList.remove('weak');
} else if (password.length > 4) {
strengthBars[1].classList.add('medium');
strengthBars[2].classList.remove('strong');
strengthBars[0].classList.remove('weak');
} else {
strengthBars[0].classList.add('weak');
strengthBars[1].classList.remove('medium');
strengthBars[2].classList.remove('strong');
}
});
</script>
</body>
</html>