Formulário de login moderno + barra lateral deslizante

1126 kevekıbhack

Abrir no Editor Publique Seu Código

Formulário de login moderno + barra lateral deslizante

Recomendado

11 September 2025

Exemplo de bloco de código de animação CSS

31 July 2025

Modelo HTML de página de login do Liquid Drop

19 October 2024

Portfólio do desenvolvedor HTML V2

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Modern Login with Sidebar</title>
<style>
  /* Reset & basics */
  * {
    margin: 0; padding: 0; box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }

body, html {
    height: 100%;
    background: #f0f2f5;
    overflow-x: hidden;
  }

/* Sidebar styles */
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    width: 250px;
    background: #4f46e5;
    color: white;
    padding: 2rem 1.5rem;
    box-shadow: 2px 0 15px rgba(79, 70, 229, 0.5);
    transform: translateX(-260px);
    transition: transform 0.4s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
  }

.sidebar.active {
    transform: translateX(0);
  }

.sidebar h2 {
    margin-bottom: 2rem;
    font-weight: 700;
  }

.sidebar a {
    color: white;
    text-decoration: none;
    margin-bottom: 1.2rem;
    font-weight: 600;
    font-size: 1.1rem;
    transition: color 0.3s ease;
  }

.sidebar a:hover {
    color: #a78bfa;
  }

/* Toggle button */
  .toggle-btn {
    position: fixed;
    top: 20px; left: 20px;
    background: #4f46e5;
    border: none;
    color: white;
    padding: 0.6rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.4rem;
    box-shadow: 0 5px 15px rgba(79, 70, 229, 0.4);
    z-index: 1100;
    transition: background 0.3s ease;
  }

.toggle-btn:hover {
    background: #7c3aed;
  }

/* Login form container */
  .login-container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
  }

.login-form {
    background: white;
    padding: 3rem 2.5rem;
    border-radius: 12px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 400px;
  }

.login-form h2 {
    margin-bottom: 2rem;
    color: #4f46e5;
    font-weight: 700;
    text-align: center;
  }

.form-group {
    margin-bottom: 1.5rem;
  }

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
  }

.form-group input {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1.8px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
  }

.form-group input:focus {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 6px #a78bfa;
  }

button.login-btn {
    width: 100%;
    padding: 0.9rem;
    background: #4f46e5;
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 8px 15px rgba(79, 70, 229, 0.5);
    transition: background 0.3s ease;
  }

button.login-btn:hover {
    background: #7c3aed;
  }

/* Responsive tweaks */
  @media (max-width: 480px) {
    .login-form {
      padding: 2rem 1.5rem;
      width: 90%;
    }
    .toggle-btn {
      font-size: 1.2rem;
      padding: 0.5rem 0.8rem;
    }
  }
</style>
</head>
<body>

<div class="sidebar" id="sidebar">
  <h2>Menu</h2>
  <a href="#">Home</a>
  <a href="#">Features</a>
  <a href="#">Pricing</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</div>

<div class="login-container">
  <form class="login-form" id="loginForm">
    <h2>Login</h2>
    <div class="form-group">
      <label for="email">Email Address</label>
      <input type="email" id="email" required placeholder="you@example.com" />
    </div>
    <div class="form-group">
      <label for="password">Password</label>
      <input type="password" id="password" required placeholder="Enter your password" />
    </div>
    <button type="submit" class="login-btn">Sign In</button>
  </form>
</div>

toggleBtn.addEventListener('click', () => {
    sidebar.classList.toggle('active');
  });

// Optional: close sidebar when clicking outside on small screens
  document.addEventListener('click', (e) => {
    if (!sidebar.contains(e.target) && !toggleBtn.contains(e.target)) {
      sidebar.classList.remove('active');
    }
  });

// Form submission
  document.getElementById('loginForm').addEventListener('submit', e => {
    e.preventDefault();
    alert('Login submitted!');
    e.target.reset();
  });
</script>

</body>
</html>

Recomendado

Exemplo de bloco de código de animação CSS

Modelo HTML de página de login do Liquid Drop

Portfólio do desenvolvedor HTML V2

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS