Project Gallery

Explore Modern Responsive Login & Register in detail
1 /1
Use mouse wheel or pinch gesture to zoom on touch devices

Project Overview

Modern Responsive Login & Register

Project Description

I have created a modern and responsive login & register page using HTML, CSS, and JavaScript. The page features a clean and attractive UI design with proper alignment and spacing. A modern color scheme makes the layout visually appealing and user-friendly. The login form includes fields for email/username and password along with a stylish button. It is fully responsive, ensuring smooth display on both desktop and mobile devices. Basic form validation is also implemented with JavaScript for a better user experience.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Login & Register | Modern UI</title>
  <link
    href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap"
    rel="stylesheet"
  />
  <link
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    rel="stylesheet"
  />

</head>
<body>
  <div class="container">
    <div class="left-panel" id="leftPanel">
      <h1 id="panelTitle">Welcome Back!</h1>
      <p id="panelText">
        To keep connected with us please login with your personal info
      </p>
      <button class="btn-toggle" id="toggleBtn">Sign Up</button>
    </div>
    <div class="right-panel">
      <div class="forms">
        <!-- Login Form -->
        <form id="loginForm" class="visible" novalidate>
          <h2>Sign In</h2>
          <p class="subtitle">Enter your credentials to access your account</p>

          <div class="input-group">
            <i class="fas fa-envelope"></i>
            <input
              type="email"
              id="loginEmail"
              placeholder="Email"
              required
              autocomplete="username"
            />
          </div>
          <div class="input-group">
            <i class="fas fa-lock"></i>
            <input
              type="password"
              id="loginPassword"
              placeholder="Password"
              required
              autocomplete="current-password"
            />
            <span class="toggle-password" onclick="togglePassword('loginPassword')">
              <i class="fas fa-eye"></i>
            </span>
          </div>

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

          <div class="social-buttons">
            <button type="button" class="social-btn google">
              <i class="fab fa-google"></i> Google
            </button>
            <button type="button" class="social-btn facebook">
              <i class="fab fa-facebook-f"></i> Facebook
            </button>
          </div>

          <p class="toggle-text">
            Don't have an account?
            <button type="button" id="toRegisterBtn">Sign Up</button>
          </p>
        </form>

        <!-- Register Form -->
        <form id="registerForm" class="hidden" novalidate>
          <h2>Create Account</h2>
          <p class="subtitle">Fill in your details to create a new account</p>

          <div class="input-group">
            <i class="fas fa-user"></i>
            <input
              type="text"
              id="registerName"
              placeholder="Full Name"
              required
              autocomplete="name"
            />
          </div>
          <div class="input-group">
            <i class="fas fa-envelope"></i>
            <input
              type="email"
              id="registerEmail"
              placeholder="Email"
              required
              autocomplete="email"
            />
          </div>
          <div class="input-group">
            <i class="fas fa-lock"></i>
            <input
              type="password"
              id="registerPassword"
              placeholder="Password"
              required
              autocomplete="new-password"
            />
            <span class="toggle-password" onclick="togglePassword('registerPassword')">
              <i class="fas fa-eye"></i>
            </span>
          </div>
          <div class="input-group">
            <i class="fas fa-lock"></i>
            <input
              type="password"
              id="registerConfirmPassword"
              placeholder="Confirm Password"
              required
              autocomplete="new-password"
            />
            <span class="toggle-password" onclick="togglePassword('registerConfirmPassword')">
              <i class="fas fa-eye"></i>
            </span>
          </div>

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

          <div class="social-buttons">
            <button type="button" class="social-btn google">
              <i class="fab fa-google"></i> Google
            </button>
            <button type="button" class="social-btn facebook">
              <i class="fab fa-facebook-f"></i> Facebook
            </button>
          </div>

          <p class="toggle-text">
            Already have an account?
            <button type="button" id="toLoginBtn">Sign In</button>
          </p>
        </form>
      </div>
    </div>
  </div>
</body>
</html>
CSS
<style>
    /* Reset & base */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Poppins', sans-serif;
    }
    body,
    html {
      height: 100%;
      background: #f0f2f5;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }
    a {
      text-decoration: none;
      color: #4a90e2;
      font-weight: 600;
      transition: color 0.3s ease;
    }
    a:hover {
      color: #357ABD;
    }

    /* Container */
    .container {
      width: 900px;
      max-width: 95vw;
      height: 600px;
      background: #fff;
      border-radius: 15px;
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
      display: flex;
      overflow: hidden;
      position: relative;
    }

    /* Left panel */
    .left-panel {
      flex: 1;
      background: linear-gradient(135deg, #667eea, #764ba2);
      color: white;
      padding: 60px 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .left-panel h1 {
      font-size: 2.8rem;
      font-weight: 700;
      margin-bottom: 20px;
      line-height: 1.1;
    }
    .left-panel p {
      font-size: 1.1rem;
      opacity: 0.85;
      margin-bottom: 40px;
      max-width: 320px;
      line-height: 1.5;
    }
    .left-panel .btn-toggle {
      background: transparent;
      border: 2px solid white;
      color: white;
      padding: 12px 30px;
      font-weight: 600;
      border-radius: 30px;
      cursor: pointer;
      width: max-content;
      transition: background 0.3s ease, color 0.3s ease;
      user-select: none;
    }
    .left-panel .btn-toggle:hover {
      background: white;
      color: #764ba2;
    }

    /* Right panel */
    .right-panel {
      flex: 1.2;
      background: #f7f9fc;
      padding: 60px 50px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      transition: transform 0.6s ease;
    }

    /* Forms container */
    .forms {
      position: relative;
      width: 100%;
      height: 100%;
    }

    /* Form base styles */
    form {
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      transition: opacity 0.6s ease, transform 0.6s ease;
      background: transparent;
    }
    form.hidden {
      opacity: 0;
      pointer-events: none;
      transform: translateX(50px);
    }
    form.visible {
      opacity: 1;
      pointer-events: all;
      transform: translateX(0);
    }

    /* Form heading */
    form h2 {
      font-weight: 700;
      font-size: 2rem;
      margin-bottom: 10px;
      color: #333;
    }
    form p.subtitle {
      font-weight: 400;
      font-size: 1rem;
      color: #666;
      margin-bottom: 30px;
    }

    /* Input group */
    .input-group {
      position: relative;
      margin-bottom: 25px;
    }
    .input-group input {
      width: 100%;
      padding: 15px 50px 15px 45px;
      border-radius: 30px;
      border: 2px solid #ddd;
      font-size: 1rem;
      transition: border-color 0.3s ease;
      background: #fff;
      outline: none;
    }
    .input-group input:focus {
      border-color: #667eea;
      box-shadow: 0 0 8px rgba(102, 126, 234, 0.3);
    }
    .input-group i {
      position: absolute;
      top: 50%;
      left: 15px;
      transform: translateY(-50%);
      color: #999;
      font-size: 1.2rem;
      pointer-events: none;
    }
    .input-group .toggle-password {
      position: absolute;
      top: 50%;
      right: 15px;
      transform: translateY(-50%);
      cursor: pointer;
      color: #999;
      font-size: 1.2rem;
      user-select: none;
    }

    /* Submit button */
    .btn-submit {
      width: 100%;
      padding: 15px;
      border-radius: 30px;
      border: none;
      background: linear-gradient(135deg, #667eea, #764ba2);
      color: white;
      font-weight: 700;
      font-size: 1.1rem;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
      transition: background 0.3s ease, box-shadow 0.3s ease;
    }
    .btn-submit:hover {
      background: linear-gradient(135deg, #5a67d8, #6b46c1);
      box-shadow: 0 10px 25px rgba(90, 103, 216, 0.5);
    }
    .btn-submit:disabled {
      background: #a0aec0;
      cursor: not-allowed;
      box-shadow: none;
    }

    /* Social buttons */
    .social-buttons {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-top: 30px;
    }
    .social-btn {
      flex: 1;
      padding: 12px 0;
      border-radius: 30px;
      border: 2px solid #ddd;
      background: white;
      font-weight: 600;
      font-size: 1rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .social-btn i {
      font-size: 1.3rem;
    }
    .social-btn.google {
      color: #db4437;
      border-color: #db4437;
    }
    .social-btn.google:hover {
      background: #db4437;
      color: white;
      box-shadow: 0 5px 15px rgba(219, 68, 55, 0.4);
    }
    .social-btn.facebook {
      color: #4267b2;
      border-color: #4267b2;
    }
    .social-btn.facebook:hover {
      background: #4267b2;
      color: white;
      box-shadow: 0 5px 15px rgba(66, 103, 178, 0.4);
    }

    /* Toggle text */
    .toggle-text {
      margin-top: 25px;
      text-align: center;
      font-size: 0.95rem;
      color: #666;
    }
    .toggle-text button {
      background: none;
      border: none;
      color: #4a90e2;
      font-weight: 600;
      cursor: pointer;
      margin-left: 5px;
      transition: color 0.3s ease;
      user-select: none;
    }
    .toggle-text button:hover {
      color: #357ABD;
    }

    /* Responsive */
    @media (max-width: 900px) {
      .container {
        flex-direction: column;
        height: auto;
        max-width: 400px;
      }
      .left-panel {
        flex: none;
        padding: 40px 30px;
        text-align: center;
        border-radius: 15px 15px 0 0;
      }
      .right-panel {
        flex: none;
        padding: 40px 30px;
        max-height: none;
        transform: none !important;
      }
      form {
        position: relative;
        opacity: 1 !important;
        pointer-events: all !important;
        transform: none !important;
      }
    }
  </style>
JavaScript
<script>
    // Toggle password visibility
    function togglePassword(inputId) {
      const input = document.getElementById(inputId);
      const icon = input.nextElementSibling.querySelector('i');
      if (input.type === 'password') {
        input.type = 'text';
        icon.classList.remove('fa-eye');
        icon.classList.add('fa-eye-slash');
      } else {
        input.type = 'password';
        icon.classList.remove('fa-eye-slash');
        icon.classList.add('fa-eye');
      }
    }

    // Elements
    const container = document.querySelector('.container');
    const leftPanel = document.getElementById('leftPanel');
    const toggleBtn = document.getElementById('toggleBtn');
    const loginForm = document.getElementById('loginForm');
    const registerForm = document.getElementById('registerForm');
    const toRegisterBtn = document.getElementById('toRegisterBtn');
    const toLoginBtn = document.getElementById('toLoginBtn');
    const panelTitle = document.getElementById('panelTitle');
    const panelText = document.getElementById('panelText');

    // Show register form
    function showRegister() {
      loginForm.classList.replace('visible', 'hidden');
      registerForm.classList.replace('hidden', 'visible');
      toggleBtn.textContent = 'Sign In';
      panelTitle.textContent = 'Hello, Friend!';
      panelText.textContent =
        'Enter your personal details and start your journey with us.';
    }

    // Show login form
    function showLogin() {
      registerForm.classList.replace('visible', 'hidden');
      loginForm.classList.replace('hidden', 'visible');
      toggleBtn.textContent = 'Sign Up';
      panelTitle.textContent = 'Welcome Back!';
      panelText.textContent =
        'To keep connected with us please login with your personal info';
    }

    // Toggle button click
    toggleBtn.addEventListener('click', () => {
      if (loginForm.classList.contains('visible')) {
        showRegister();
      } else {
        showLogin();
      }
    });

    // Buttons inside forms
    toRegisterBtn.addEventListener('click', showRegister);
    toLoginBtn.addEventListener('click', showLogin);

    // Simple form validation and demo submission
    loginForm.addEventListener('submit', (e) => {
      e.preventDefault();
      const email = document.getElementById('loginEmail');
      const password = document.getElementById('loginPassword');

      if (!email.value.trim() || !password.value.trim()) {
        alert('Please fill in all fields.');
        return;
      }
      // Demo: simulate login
      alert(`Logged in as ${email.value.trim()}`);
      loginForm.reset();
    });

    registerForm.addEventListener('submit', (e) => {
      e.preventDefault();
      const name = document.getElementById('registerName');
      const email = document.getElementById('registerEmail');
      const password = document.getElementById('registerPassword');
      const confirmPassword = document.getElementById('registerConfirmPassword');

      if (
        !name.value.trim() ||
        !email.value.trim() ||
        !password.value.trim() ||
        !confirmPassword.value.trim()
      ) {
        alert('Please fill in all fields.');
        return;
      }
      if (password.value !== confirmPassword.value) {
        alert('Passwords do not match.');
        return;
      }
      if (password.value.length < 6) {
        alert('Password should be at least 6 characters.');
        return;
      }
      // Demo: simulate registration
      alert(`Account created for ${name.value.trim()}`);
      registerForm.reset();
      showLogin();
    });
  </script>
Back to Portfolio