Bootstrap 5 Login Form with Social Suttons and Icons

<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Google Fonts - Roboto -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">

<!-- Ionicons -->
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

<style>
  body {
    font-family: 'Roboto', sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    overflow: hidden;
  }

  /* Animated Background Shapes */
  body::before,
  body::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: float 6s ease-in-out infinite;
  }

  body::before {
    width: 300px;
    height: 300px;
    top: -100px;
    right: -100px;
  }

  body::after {
    width: 200px;
    height: 200px;
    bottom: -50px;
    left: -50px;
    animation-delay: 3s;
  }

  @keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
  }

  .login-container {
    max-width: 450px;
    width: 100%;
    position: relative;
    z-index: 1;
  }

  .login-card {
    background: white;
    border-radius: 24px;
    padding: 50px 40px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.6s ease;
  }

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

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

  .login-icon {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
    animation: pulse 2s ease-in-out infinite;
  }

  @keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
  }

  .login-icon ion-icon {
    font-size: 45px;
    color: white;
  }

  .login-header h2 {
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
    font-size: 2rem;
  }

  .login-header p {
    color: #666;
    font-size: 1rem;
  }

  /* Form Groups */
  .form-group {
    position: relative;
    margin-bottom: 25px;
  }

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

  .input-wrapper {
    position: relative;
  }

  .form-control-custom {
    width: 100%;
    padding: 14px 45px 14px 45px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #f9fafb;
  }

  .form-control-custom:focus {
    outline: none;
    border-color: #667eea;
    background: white;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
  }

  .input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: #9ca3af;
    transition: color 0.3s ease;
  }

  .form-control-custom:focus ~ .input-icon {
    color: #667eea;
  }

  .password-toggle {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 22px;
    color: #9ca3af;
    transition: color 0.3s ease;
  }

  .password-toggle:hover {
    color: #667eea;
  }

  /* Remember & Forgot */
  .form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
  }

  .form-check-custom {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .form-check-custom input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    border: 2px solid #e5e7eb;
    border-radius: 4px;
  }

  .form-check-custom input[type="checkbox"]:checked {
    background-color: #667eea;
    border-color: #667eea;
  }

  .form-check-custom label {
    margin: 0;
    color: #666;
    font-size: 0.9rem;
    cursor: pointer;
    font-weight: 400;
  }

  .forgot-link {
    color: #667eea;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.3s ease;
  }

  .forgot-link:hover {
    color: #5568d3;
    text-decoration: underline;
  }

  /* Login Button */
  .btn-login {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
  }

  .btn-login:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(102, 126, 234, 0.4);
  }

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

  /* Divider */
  .divider {
    text-align: center;
    margin: 35px 0;
    position: relative;
  }

  .divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e5e7eb;
  }

  .divider span {
    background: white;
    padding: 0 20px;
    color: #9ca3af;
    position: relative;
    font-size: 0.9rem;
    font-weight: 500;
  }

  /* Social Buttons */
  .social-login {
    display: grid;
    gap: 15px;
  }

  .btn-social {
    padding: 14px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: 500;
    color: #333;
    font-size: 1rem;
  }

  .btn-social:hover {
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  }

  .btn-social ion-icon {
    font-size: 24px;
  }

  .btn-google:hover {
    background: #ea4335;
    color: white;
  }

  .btn-google ion-icon {
    color: #ea4335;
  }

  .btn-google:hover ion-icon {
    color: white;
  }

  .btn-facebook:hover {
    background: #1877f2;
    color: white;
  }

  .btn-facebook ion-icon {
    color: #1877f2;
  }

  .btn-facebook:hover ion-icon {
    color: white;
  }

  .btn-twitter:hover {
    background: #1da1f2;
    color: white;
  }

  .btn-twitter ion-icon {
    color: #1da1f2;
  }

  .btn-twitter:hover ion-icon {
    color: white;
  }

  .btn-apple:hover {
    background: #000;
    color: white;
  }

  .btn-apple ion-icon {
    color: #000;
  }

  .btn-apple:hover ion-icon {
    color: white;
  }

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

  .signup-link a {
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
  }

  .signup-link a:hover {
    color: #5568d3;
    text-decoration: underline;
  }

  /* Responsive */
  @media (max-width: 576px) {
    .login-card {
      padding: 40px 30px;
    }

    .login-header h2 {
      font-size: 1.6rem;
    }

    .form-options {
      flex-direction: column;
      gap: 15px;
      align-items: flex-start;
    }
  }
</style>

<div class="login-container">
  <div class="login-card">
    <!-- Header -->
    <div class="login-header">
      <div class="login-icon">
        <ion-icon name="lock-closed"></ion-icon>
      </div>
      <h2>Welcome Back</h2>
      <p>Sign in to continue to your account</p>
    </div>

    <!-- Login Form -->
    <form id="loginForm">
      <!-- Email -->
      <div class="form-group">
        <label for="email">Email Address</label>
        <div class="input-wrapper">
          <input 
                 type="email" 
                 id="email" 
                 class="form-control-custom" 
                 placeholder="Enter your email"
                 required
                 >
          <ion-icon name="mail-outline" class="input-icon"></ion-icon>
        </div>
      </div>

      <!-- Password -->
      <div class="form-group">
        <label for="password">Password</label>
        <div class="input-wrapper">
          <input 
                 type="password" 
                 id="password" 
                 class="form-control-custom" 
                 placeholder="Enter your password"
                 required
                 >
          <ion-icon name="lock-closed-outline" class="input-icon"></ion-icon>
          <ion-icon name="eye-outline" class="password-toggle" id="togglePassword"></ion-icon>
        </div>
      </div>

      <!-- Remember & Forgot -->
      <div class="form-options">
        <div class="form-check-custom">
          <input type="checkbox" id="remember">
          <label for="remember">Remember me</label>
        </div>
        <a href="#" class="forgot-link">Forgot Password?</a>
      </div>

      <!-- Login Button -->
      <button type="submit" class="btn-login">
        Sign In
        <ion-icon name="arrow-forward"></ion-icon>
      </button>
    </form>

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

    <!-- Social Login Buttons -->
    <div class="social-login">
      <button class="btn-social btn-google">
        <ion-icon name="logo-google"></ion-icon>
        Sign in with Google
      </button>
      <button class="btn-social btn-facebook">
        <ion-icon name="logo-facebook"></ion-icon>
        Sign in with Facebook
      </button>
      <button class="btn-social btn-twitter">
        <ion-icon name="logo-twitter"></ion-icon>
        Sign in with Twitter
      </button>
      <button class="btn-social btn-apple">
        <ion-icon name="logo-apple"></ion-icon>
        Sign in with Apple
      </button>
    </div>

    <!-- Signup Link -->
    <div class="signup-link">
      Don't have an account? <a href="#">Create Account</a>
    </div>
  </div>
</div>

<!-- Bootstrap 5 JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

<script>
  // Password Toggle Functionality
  const togglePassword = document.getElementById('togglePassword');
  const password = document.getElementById('password');

  togglePassword.addEventListener('click', function() {
    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
    password.setAttribute('type', type);
    this.setAttribute('name', type === 'password' ? 'eye-outline' : 'eye-off-outline');
  });

  // Form Submission
  document.getElementById('loginForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const formData = {
      email: document.getElementById('email').value,
      password: password.value,
      remember: document.getElementById('remember').checked
    };

    console.log('Login attempt:', formData);
    alert('Login successful! Check console for details.');

    // You can add your authentication logic here
  });

  // Social Login Handlers
  document.querySelector('.btn-google').addEventListener('click', function() {
    console.log('Google login clicked');
    alert('Google login integration would go here');
  });

  document.querySelector('.btn-facebook').addEventListener('click', function() {
    console.log('Facebook login clicked');
    alert('Facebook login integration would go here');
  });

  document.querySelector('.btn-twitter').addEventListener('click', function() {
    console.log('Twitter login clicked');
    alert('Twitter login integration would go here');
  });

  document.querySelector('.btn-apple').addEventListener('click', function() {
    console.log('Apple login clicked');
    alert('Apple login integration would go here');
  });
</script>