Template Login Page

Template para página de login

TEMPLATE

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>