Login Page Template

A modern login page with centered card, form validation, social login buttons, and remember me option. Perfect for authentication pages.

Template Features

Centered card layout

Real form inputs

Social login buttons

Alert component

Gradient background

Mobile-responsive

Live Preview

Welcome Back

Full Template Code

Copy this complete HTML to use the login page template. The template includes a beautiful gradient background and all necessary form elements.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login - My App</title>
  <link rel="stylesheet" href="path/to/focus-ui.css">
  <style>
    body {
      background: linear-gradient(135deg, rgba(var(--focus-color-primary-rgb), 0.1), rgba(var(--focus-color-info-rgb), 0.1));
      min-height: 100vh;
      display: flex;
      align-items: center;
    }
  </style>
</head>
<body>
  <div class="focus-container">
    <div class="focus-row focus-row-center">
      <div class="focus-col-12 focus-col-md-6 focus-col-lg-5 focus-col-xl-4">
        <!-- Login Card -->
        <div class="focus-card focus-card-shadow">
          <div class="focus-card-body focus-p-5">
            <!-- Logo/Icon -->
            <div class="focus-text-center focus-mb-4">
              <div class="focus-mb-3">
                <i class="fa fa-lock focus-text-primary" style="font-size: 4rem;"></i>
              </div>
              <h2 class="focus-text-3xl focus-text-bold focus-mb-2">Welcome Back</h2>
              <p class="focus-text-secondary">Sign in to your account to continue</p>
            </div>

            <!-- Social Login Buttons -->
            <div class="focus-mb-4">
              <button class="focus-btn focus-btn-outline focus-btn-block focus-mb-2">
                <i class="fab fa-google focus-mr-2"></i> Continue with Google
              </button>
              <button class="focus-btn focus-btn-outline focus-btn-block">
                <i class="fab fa-github focus-mr-2"></i> Continue with GitHub
              </button>
            </div>

            <!-- Divider -->
            <div class="focus-divider focus-my-4" style="position: relative;">
              <span style="position: absolute; left: 50%; transform: translateX(-50%) translateY(-50%); background: var(--focus-color-surface); padding: 0 1rem;">
                or
              </span>
            </div>

            <!-- Login Form -->
            <form>
              <div class="focus-form-group">
                <label class="focus-form-label">Email Address</label>
                <input type="email" class="focus-input" placeholder="name@example.com" required>
              </div>

              <div class="focus-form-group">
                <label class="focus-form-label">Password</label>
                <input type="password" class="focus-input" placeholder="Enter your password" required>
              </div>

              <div class="focus-flex focus-justify-between focus-items-center focus-mb-4">
                <label class="focus-form-check-label">
                  <input type="checkbox" class="focus-form-check">
                  Remember me
                </label>
                <a href="#" class="focus-text-primary focus-text-sm">Forgot password?</a>
              </div>

              <button type="submit" class="focus-btn focus-btn-primary focus-btn-block focus-btn-lg focus-mb-3">
                Sign In
              </button>

              <div class="focus-alert focus-alert-info focus-mb-3" style="display: none;" id="errorAlert">
                <strong>Error:</strong> Invalid email or password.
              </div>

              <div class="focus-text-center focus-text-secondary focus-text-sm">
                Don't have an account?
                <a href="#" class="focus-text-primary focus-text-bold">Sign up for free</a>
              </div>
            </form>
          </div>
        </div>

        <!-- Footer -->
        <div class="focus-text-center focus-mt-4 focus-text-secondary focus-text-sm">
          <p>© 2026 MyApp. All rights reserved.
            <a href="#" class="focus-text-secondary">Privacy</a> ·
            <a href="#" class="focus-text-secondary">Terms</a>
          </p>
        </div>
      </div>
    </div>
  </div>

  <script src="path/to/focus-ui.js"></script>
</body>
</html>

Customization Tips

Background Gradients

Adjust background gradient colors using CSS variables like --focus-color-primary-rgb in the inline style to match your brand.

Form Styling

Customize form inputs with .focus-input, .focus-form-label, and add validation states using form feedback classes.

Error Alerts

Show validation feedback with .focus-alert-danger or .focus-alert-warning for errors, and .focus-alert-success for confirmations.

Brand Logo

Replace the lock icon with your brand logo image using <img src="logo.png" alt="Logo"> for a personalized touch.

Back to Templates