Voice Lab Login Page: Google Sign-in & Email Form

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Voice Lab - Login</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
  <script src="https://accounts.google.com/gsi/client" async defer></script>
</head>
<body>
  <div class="login-container">
    <div class="login-panel">
      <div class="logo-container">
        <h1 class="logo">Voice Lab</h1>
      </div>

<div class="auth-section">
        <h2>Log in to your account</h2>

<a href="#" class="forgot-password">Forgot Password?</a>

<div class="legal-text">
          By signing up, you agree to our 
          <a href="#">Terms and Conditions</a> and 
          <a href="#">Privacy Policy</a>.
        </div>
      </div>
    </div>

CSS

:root {
  --white: #ffffff;
  --pale-blue: #f0f4f8;
  --dark-gray: #1a1a1a;
  --light-gray: #e0e0e0;
  --accent-blue: #4a90e2;
  --text-primary: #333333;
  --text-secondary: #666666;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--white) 0%, var(--pale-blue) 100%);
  transition: background 0.3s ease;
}

.login-container {
  display: flex;
  width: 90%;
  max-width: 1200px;
  height: 80vh;
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.login-panel {
  width: 50%;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.logo {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 30px;
}

.auth-section h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.google-signin-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 20px 0;
  color: var(--text-secondary);
}

.divider::before, .divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--light-gray);
}

.divider span {
  padding: 0 10px;
  font-size: 14px;
}

.login-form input {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid var(--light-gray);
  border-radius: 8px;
  font-size: 14px;
}

.forgot-password {
  display: block;
  text-align: right;
  color: var(--accent-blue);
  text-decoration: none;
  font-size: 12px;
  margin-bottom: 15px;
}

.button-group {
  display: flex;
  gap: 15px;
}

.signin-btn {
  flex: 1;
  padding: 12px;
  background: linear-gradient(to right, var(--dark-gray), black);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s;
}

.signup-btn {
  flex: 1;
  padding: 12px;
  background: transparent;
  color: var(--text-primary);
  border: 2px solid var(--light-gray);
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.signup-btn:hover {
  background: var(--pale-blue);
  border-color: var(--accent-blue);
}

.legal-text {
  margin-top: 20px;
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
}

.legal-text a {
  color: var(--accent-blue);
  text-decoration: none;
}

.visual-panel {
  width: 50%;
  background: linear-gradient(135deg, var(--white) 0%, var(--pale-blue) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.soundwave-container {
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.soundwave-sphere {
  width: 250px;
  height: 250px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  box-shadow: 
    10px 10px 20px rgba(0, 0, 0, 0.1),
    -10px -10px 20px rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.soundwave-icon {
  width: 100px;
  height: 150px;
  background: linear-gradient(to bottom, var(--accent-blue), var(--pale-blue));
  clip-path: polygon(50% 0%, 80% 20%, 80% 80%, 50% 100%, 20% 80%, 20% 20%);
  animation: pulse 2s infinite;
}

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

.theme-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .login-container {
    flex-direction: column;
    height: auto;
    width: 95%;
  }

.login-panel, .visual-panel {
    width: 100%;
    padding: 30px;
  }

.soundwave-container {
    margin-top: 20px;
  }
}

flex-direction: column;
    height: auto;
    width: 95%;
  }

.auth-panel, .visual-panel {
    width: 100%;
    padding: 30px;
  }

.soundwave-container {
    width: 200px;
    height: 200px;
  }

.soundwave-sphere {
    width: 150px;
    height: 150px;
  }
}

JS

document.addEventListener('DOMContentLoaded', () => {
    const darkModeToggle = document.getElementById('dark-mode-toggle');

darkModeToggle.addEventListener('change', () => {
      document.body.classList.toggle('dark-mode');
      updateTheme();
    });

function updateTheme() {
      const isDarkMode = document.body.classList.contains('dark-mode');

document.documentElement.style.setProperty('--white', isDarkMode ? '#121212' : '#ffffff');
      document.documentElement.style.setProperty('--pale-blue', isDarkMode ? '#1e1e1e' : '#f0f4f8');
      document.documentElement.style.setProperty('--text-primary', isDarkMode ? '#ffffff' : '#333333');
      document.documentElement.style.setProperty('--text-secondary', isDarkMode ? '#b0b0b0' : '#666666');
    }

// Google Sign-In Callback
    window.handleCredentialResponse = (response) => {
      // Verify the token with your backend
      console.log('Credential Response:', response);
      // Implement your authentication logic here
    }
  });
  }
  setInterval(pulsate, 3000);
});

Voice Lab Login Page: Google Sign-in & Email Form

Recommended

Neon Login Form

Newsletter Subscription Form

Modern Login Form V2

HTML

CSS

JS

Recommended

Neon Login Form

Newsletter Subscription Form

Modern Login Form V2

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS