Login Page with Background Image in CSS

 <!-- Navigation Dots -->
  <div class="page-nav">
    <div class="nav-dot active" onclick="scrollToPage(0)"></div>
    <div class="nav-dot" onclick="scrollToPage(1)"></div>
    <div class="nav-dot" onclick="scrollToPage(2)"></div>
    <div class="nav-dot" onclick="scrollToPage(3)"></div>
    <div class="nav-dot" onclick="scrollToPage(4)"></div>
  </div>

  <!-- Page 1: Mountain Background -->
  <div class="login-page page-1">
    <div class="login-container">
      <div class="login-header">
        <div class="login-logo">🏔️</div>
        <h1 class="login-title">Welcome Back</h1>
        <p class="login-subtitle">Login to your account</p>
      </div>

      <form class="login-form">
        <div class="form-group">
          <label class="form-label">Email</label>
          <span class="input-icon">📧</span>
          <input type="email" class="form-input" placeholder="Enter your email">
        </div>

        <div class="form-group">
          <label class="form-label">Password</label>
          <span class="input-icon">🔒</span>
          <input type="password" class="form-input" placeholder="Enter your password">
        </div>

        <div class="form-options">
          <label class="remember-me">
            <input type="checkbox">
            <span>Remember me</span>
          </label>
          <a href="#" class="forgot-password">Forgot Password?</a>
        </div>

        <button type="submit" class="submit-btn">Sign In</button>

        <div class="divider">
          <span>Or continue with</span>
        </div>

        <div class="social-login">
          <button type="button" class="social-btn">🌐</button>
          <button type="button" class="social-btn">📘</button>
          <button type="button" class="social-btn">🐦</button>
        </div>

        <div class="signup-link">
          Don't have an account? <a href="#">Sign Up</a>
        </div>
      </form>
    </div>
  </div>

  <!-- Page 2: City Background -->
  <div class="login-page page-2">
    <div class="login-container">
      <div class="login-header">
        <div class="login-logo">🌃</div>
        <h1 class="login-title">Urban Access</h1>
        <p class="login-subtitle">Sign in to continue</p>
      </div>

      <form class="login-form">
        <div class="form-group">
          <label class="form-label">Username</label>
          <span class="input-icon">👤</span>
          <input type="text" class="form-input" placeholder="Enter your username">
        </div>

        <div class="form-group">
          <label class="form-label">Password</label>
          <span class="input-icon">🔑</span>
          <input type="password" class="form-input" placeholder="Enter your password">
        </div>

        <div class="form-options">
          <label class="remember-me">
            <input type="checkbox">
            <span>Keep me signed in</span>
          </label>
          <a href="#" class="forgot-password">Need Help?</a>
        </div>

        <button type="submit" class="submit-btn">Login</button>

        <div class="signup-link">
          New here? <a href="#">Create an account</a>
        </div>
      </form>
    </div>
  </div>

  <!-- Page 3: Nature Background -->
  <div class="login-page page-3">
    <div class="login-container">
      <div class="login-header">
        <div class="login-logo">🌲</div>
        <h1 class="login-title">Nature Portal</h1>
        <p class="login-subtitle">Enter your credentials</p>
      </div>

      <form class="login-form">
        <div class="form-group">
          <span class="input-icon">✉️</span>
          <input type="email" class="form-input" placeholder="Email address">
        </div>

        <div class="form-group">
          <span class="input-icon">🔐</span>
          <input type="password" class="form-input" placeholder="Password">
        </div>

        <div class="form-options">
          <label class="remember-me">
            <input type="checkbox">
            <span>Remember me</span>
          </label>
          <a href="#" class="forgot-password">Forgot?</a>
        </div>

        <button type="submit" class="submit-btn">Sign In</button>

        <div class="divider">
          <span>Or</span>
        </div>

        <div class="social-login">
          <button type="button" class="social-btn">G</button>
          <button type="button" class="social-btn">f</button>
        </div>

        <div class="signup-link">
          New user? <a href="#">Register now</a>
        </div>
      </form>
    </div>
  </div>

  <!-- Page 4: Ocean Background -->
  <div class="login-page page-4">
    <div class="login-container">
      <div class="login-header">
        <div class="login-logo">🌊</div>
        <h1 class="login-title">Ocean Wave</h1>
        <p class="login-subtitle">Dive into your account</p>
      </div>

      <form class="login-form">
        <div class="form-group">
          <label class="form-label">Email Address</label>
          <span class="input-icon">📬</span>
          <input type="email" class="form-input" placeholder="your.email@example.com">
        </div>

        <div class="form-group">
          <label class="form-label">Password</label>
          <span class="input-icon">🔓</span>
          <input type="password" class="form-input" placeholder="••••••••">
        </div>

        <button type="submit" class="submit-btn">Access Account</button>

        <div class="form-options" style="margin-top: 15px;">
          <label class="remember-me">
            <input type="checkbox">
            <span>Stay logged in</span>
          </label>
          <a href="#" class="forgot-password">Reset Password</a>
        </div>

        <div class="signup-link">
          First time? <a href="#">Join us today</a>
        </div>
      </form>
    </div>
  </div>

  <!-- Page 5: Split Layout -->
  <div class="split-layout">
    <div class="split-left">
      <h1>🚀 Welcome to Our Platform</h1>
      <p>Join thousands of users who trust us with their digital experience. Sign in to unlock amazing features.</p>
    </div>
    <div class="split-right">
      <div class="login-container">
        <div class="login-header">
          <h1 class="login-title">Member Login</h1>
          <p class="login-subtitle">Access your dashboard</p>
        </div>

        <form class="login-form">
          <div class="form-group">
            <span class="input-icon">👤</span>
            <input type="text" class="form-input" placeholder="Username or Email">
          </div>

          <div class="form-group">
            <span class="input-icon">🔒</span>
            <input type="password" class="form-input" placeholder="Password">
          </div>

          <div class="form-options">
            <label class="remember-me">
              <input type="checkbox">
              <span>Remember me</span>
            </label>
            <a href="#" class="forgot-password">Forgot?</a>
          </div>

          <button type="submit" class="submit-btn">Sign In</button>

          <div class="signup-link">
            Not a member? <a href="#">Sign up now</a>
          </div>
        </form>
      </div>
    </div>
  </div>

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      overflow-x: hidden;
    }

    /* Navigation */
    .page-nav {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
      display: flex;
      gap: 10px;
    }

    .nav-dot {
      width: 12px;
      height: 12px;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.3s;
      border: 2px solid white;
    }

    .nav-dot:hover,
    .nav-dot.active {
      transform: scale(1.5);
      background: white;
    }

    /* Login Page Container */
    .login-page {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
    }

    .login-page::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(140, 146, 172, 0.7);
    }

    /* Page 1: Mountain Background */
    .page-1 {
      background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920&h=1080&fit=crop');
    }

    /* Page 2: City Background */
    .page-2 {
      background-image: url('https://images.unsplash.com/photo-1514565131-fce0801e5785?w=1920&h=1080&fit=crop');
    }

    .page-2::before {
      background: rgba(140, 146, 172, 0.8);
    }

    /* Page 3: Nature Background */
    .page-3 {
      background-image: url('https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=1920&h=1080&fit=crop');
    }

    .page-3::before {
      background: rgba(140, 146, 172, 0.6);
    }

    /* Page 4: Ocean Background */
    .page-4 {
      background-image: url('https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=1920&h=1080&fit=crop');
    }

    /* Page 5: Abstract Background */
    .page-5 {
      background: linear-gradient(135deg, #8C92AC 0%, #667eea 100%);
      position: relative;
    }

    .page-5::before {
      background: none;
    }

    .page-5::after {
      content: '';
      position: absolute;
      width: 500px;
      height: 500px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      top: -200px;
      right: -200px;
      animation: float 20s infinite ease-in-out;
    }

    @keyframes float {
      0%, 100% { transform: translate(0, 0); }
      50% { transform: translate(-100px, 100px); }
    }

    /* Login Container */
    .login-container {
      position: relative;
      z-index: 10;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      padding: 50px 40px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
      width: 100%;
      max-width: 450px;
      animation: slideInUp 0.8s ease;
    }

    @keyframes slideInUp {
      from {
        opacity: 0;
        transform: translateY(50px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .login-header {
      text-align: center;
      margin-bottom: 40px;
    }

    .login-logo {
      font-size: 3rem;
      margin-bottom: 15px;
    }

    .login-title {
      font-size: 2rem;
      font-weight: 700;
      color: #8C92AC;
      margin-bottom: 8px;
    }

    .login-subtitle {
      font-size: 1rem;
      color: #7f8c8d;
    }

    /* Form */
    .login-form {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .form-group {
      position: relative;
    }

    .form-label {
      display: block;
      color: #555;
      font-weight: 600;
      margin-bottom: 8px;
      font-size: 0.95rem;
    }

    .form-input {
      width: 100%;
      padding: 15px 20px;
      padding-left: 50px;
      border: 2px solid #e0e0e0;
      border-radius: 12px;
      font-size: 1rem;
      transition: all 0.3s ease;
      background: white;
    }

    .form-input:focus {
      outline: none;
      border-color: #8C92AC;
      box-shadow: 0 0 0 4px rgba(140, 146, 172, 0.1);
    }

    .input-icon {
      position: absolute;
      left: 18px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 20px;
      color: #8C92AC;
    }

    .form-label + .input-icon {
      top: calc(50% + 12px);
    }

    .form-options {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 5px;
    }

    .remember-me {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.9rem;
      color: #555;
    }

    .remember-me input[type="checkbox"] {
      width: 18px;
      height: 18px;
      cursor: pointer;
      accent-color: #8C92AC;
    }

    .forgot-password {
      color: #8C92AC;
      text-decoration: none;
      font-size: 0.9rem;
      font-weight: 600;
      transition: all 0.3s;
    }

    .forgot-password:hover {
      color: #667eea;
      text-decoration: underline;
    }

    .submit-btn {
      background: linear-gradient(135deg, #8C92AC 0%, #667eea 100%);
      color: white;
      padding: 16px;
      border: none;
      border-radius: 12px;
      font-size: 1.1rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 6px 20px rgba(140, 146, 172, 0.4);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-top: 10px;
    }

    .submit-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 30px rgba(140, 146, 172, 0.6);
    }

    .submit-btn:active {
      transform: translateY(-1px);
    }

    /* Divider */
    .divider {
      display: flex;
      align-items: center;
      margin: 25px 0;
      color: #7f8c8d;
      font-size: 0.9rem;
    }

    .divider::before,
    .divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: #e0e0e0;
    }

    .divider span {
      padding: 0 15px;
    }

    /* Social Login */
    .social-login {
      display: flex;
      gap: 15px;
    }

    .social-btn {
      flex: 1;
      padding: 12px;
      border: 2px solid #e0e0e0;
      border-radius: 10px;
      background: white;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 1.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .social-btn:hover {
      border-color: #8C92AC;
      background: #f8f9fa;
      transform: translateY(-2px);
    }

    /* Signup Link */
    .signup-link {
      text-align: center;
      margin-top: 25px;
      color: #555;
      font-size: 0.95rem;
    }

    .signup-link a {
      color: #8C92AC;
      text-decoration: none;
      font-weight: 700;
      transition: all 0.3s;
    }

    .signup-link a:hover {
      color: #667eea;
      text-decoration: underline;
    }

    /* Split Layout Variant */
    .split-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 100vh;
    }

    .split-left {
      background: linear-gradient(135deg, rgba(140, 146, 172, 0.95) 0%, rgba(102, 126, 234, 0.95) 100%),
                  url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&h=1080&fit=crop');
      background-size: cover;
      background-position: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px;
      color: white;
      text-align: center;
    }

    .split-left h1 {
      font-size: 3rem;
      margin-bottom: 20px;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }

    .split-left p {
      font-size: 1.3rem;
      opacity: 0.95;
      max-width: 500px;
    }

    .split-right {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px;
      background: white;
    }

    .split-right .login-container {
      background: white;
      box-shadow: none;
    }

    @media (max-width: 968px) {
      .split-layout {
        grid-template-columns: 1fr;
      }

      .split-left {
        min-height: 40vh;
      }

      .split-left h1 {
        font-size: 2rem;
      }

      .split-left p {
        font-size: 1rem;
      }
    }

    @media (max-width: 768px) {
      .login-container {
        padding: 40px 30px;
        margin: 20px;
      }

      .login-title {
        font-size: 1.5rem;
      }

      .page-nav {
        top: 10px;
        right: 10px;
      }
    }

 function scrollToPage(index) {
      const pages = document.querySelectorAll('.login-page, .split-layout');
      pages[index].scrollIntoView({ behavior: 'smooth' });
      
      document.querySelectorAll('.nav-dot').forEach((dot, i) => {
        dot.classList.toggle('active', i === index);
      });
    }

    // Update active dot on scroll
    window.addEventListener('scroll', () => {
      const pages = document.querySelectorAll('.login-page, .split-layout');
      const dots = document.querySelectorAll('.nav-dot');
      
      let current = 0;
      pages.forEach((page, index) => {
        const rect = page.getBoundingClientRect();
        if (rect.top <= window.innerHeight / 2 && rect.bottom >= window.innerHeight / 2) {
          current = index;
        }
      });
      
      dots.forEach((dot, index) => {
        dot.classList.toggle('active', index === current);
      });
    });

    // Prevent form submission
    document.querySelectorAll('form').forEach(form => {
      form.addEventListener('submit', (e) => {
        e.preventDefault();
        alert('Login form submitted!');
      });
    });