inicio de sesión moderno

1,440 kevekıbhack

Abrir en el editor Publica tu código

Recomendado

17 April 2026

Código HTML de animación de corazón CSS

24 December 2025

Cargando página HTML con barra de progreso

14 September 2024

Control deslizante flotante

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>kevakibhack - Login</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
    }

body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: #0f222f;
      overflow: hidden;
    }

section {
      position: relative;
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

section span {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

section span:nth-child(1) {
      clip-path: polygon(0 0, 20% 0, 40% 100%, 0% 100%);
      background: #ff3c3c;
      opacity: 0.8;
      animation: animate 15s linear infinite;
    }

section span:nth-child(2) {
      clip-path: polygon(20% 0, 40% 0, 60% 100%, 0% 100%);
      background: #00ff84;
      opacity: 0.8;
      animation: animate 25s linear infinite;
      animation-delay: -5s;
    }

section span:nth-child(3) {
      clip-path: polygon(40% 0, 60% 0, 80% 100%, 20% 100%);
      background: #ffcc00;
      opacity: 0.8;
      animation: animate 20s linear infinite;
      animation-delay: -10s;
    }

section span:nth-child(4) {
      clip-path: polygon(60% 0, 80% 0, 100% 100%, 40% 100%);
      background: #3c5cff;
      opacity: 0.8;
      animation: animate 30s linear infinite;
      animation-delay: -15s;
    }

@keyframes animate {
      0% {
        transform: translateY(-100%);
      }
      100% {
        transform: translateY(100%);
      }
    }

.signin {
      position: relative;
      z-index: 10;
      width: 380px;
      padding: 40px;
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(10px);
      border-radius: 10px;
      box-shadow: 0 25px 45px rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-right: 1px solid rgba(255, 255, 255, 0.1);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      overflow: hidden;
      transition: 0.5s;
    }

.signin:hover {
      transform: translateY(-10px);
      box-shadow: 0 35px 55px rgba(0, 0, 0, 0.3);
    }

.signin::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.1);
      transform: skewX(-15deg);
      transition: 0.7s;
    }

.signin:hover::before {
      left: 120%;
    }

.signin .content {
      position: relative;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

.signin .content h2 {
      color: #fff;
      font-size: 2em;
      margin-bottom: 30px;
      text-transform: uppercase;
      letter-spacing: 2px;
      text-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

.signin .content .form {
      width: 100%;
    }

.signin .content .form .inputBox {
      position: relative;
      width: 100%;
      margin-bottom: 30px;
    }

.signin .content .form .inputBox input {
      width: 100%;
      padding: 10px 0;
      font-size: 16px;
      color: #fff;
      border: none;
      border-bottom: 1px solid #fff;
      outline: none;
      background: transparent;
      transition: 0.5s;
    }

.signin .content .form .inputBox input:focus,
    .signin .content .form .inputBox input:valid {
      border-bottom-color: #00ff84;
    }

.signin .content .form .inputBox i {
      position: absolute;
      left: 0;
      top: 10px;
      padding: 10px 0;
      font-style: normal;
      color: #fff;
      pointer-events: none;
      transition: 0.5s;
    }

.signin .content .form .inputBox input:focus ~ i,
    .signin .content .form .inputBox input:valid ~ i {
      transform: translateY(-20px);
      font-size: 12px;
      color: #00ff84;
    }

.signin .content .form .inputBox input[type="submit"] {
      background: #fff;
      color: #0f222f;
      border: none;
      padding: 12px;
      cursor: pointer;
      border-radius: 5px;
      font-weight: 600;
      letter-spacing: 1px;
      transition: 0.5s;
    }

.signin .content .form .inputBox input[type="submit"]:hover {
      background: #00ff84;
      color: #fff;
      box-shadow: 0 0 10px #00ff84, 0 0 20px #00ff84;
    }

.signin .content .form .links {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
    }

.signin .content .form .links a {
      color: #fff;
      text-decoration: none;
      font-size: 14px;
      transition: 0.5s;
    }

.signin .content .form .links a:hover {
      color: #00ff84;
      text-decoration: underline;
    }

/* Responsive design */
    @media (max-width: 480px) {
      .signin {
        width: 90%;
        padding: 30px 20px;
      }
      
      .signin .content h2 {
        font-size: 1.5em;
      }
    }

/* Social media icons */
    .social-icons {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }

.social-icons a {
      color: #fff;
      margin: 0 10px;
      font-size: 20px;
      transition: 0.3s;
    }

.social-icons a:hover {
      color: #00ff84;
      transform: translateY(-5px);
    }

/* Password toggle */
    .password-toggle {
      position: absolute;
      right: 0;
      top: 10px;
      cursor: pointer;
      color: #fff;
    }

/* Loading animation */
    .loader {
      display: none;
      width: 20px;
      height: 20px;
      border: 3px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      border-top-color: #00ff84;
      animation: spin 1s ease-in-out infinite;
      margin-left: 10px;
    }

@keyframes spin {
      to { transform: rotate(360deg); }
    }

/* Error message */
    .error-message {
      color: #ff3c3c;
      font-size: 14px;
      margin-top: -20px;
      margin-bottom: 20px;
      display: none;
    }
  </style>
</head>
<body>
  <section>
    <span></span>
    <span></span>
    <span></span>
    <span></span>

<div class="signin">
      <div class="content">
        <h2>Login</h2>
        <div class="form">
          <div class="inputBox">
            <input type="text" required id="username">
            <i>Username</i>
          </div>
          <div class="inputBox">
            <input type="password" required id="password">
            <i>Password</i>
            <span class="password-toggle" id="togglePassword">
              <i class="fas fa-eye"></i>
            </span>
          </div>
          <div class="error-message" id="errorMessage"></div>
          <div class="links">
            <a href="#">Forgot Password</a>
            <a href="#">Sign Up</a>
          </div>
          <div class="inputBox">
            <input type="submit" value="Login" id="loginBtn">
            <div class="loader" id="loader"></div>
          </div>
          <div class="social-icons">
            <a href="#"><i class="fab fa-google"></i></a>
            <a href="#"><i class="fab fa-facebook-f"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-linkedin-in"></i></a>
          </div>
        </div>
      </div>
    </div>
  </section>

// Form validation
      const loginForm = document.querySelector('.form');
      const username = document.querySelector('#username');
      const passwordInput = document.querySelector('#password');
      const errorMessage = document.querySelector('#errorMessage');
      const loginBtn = document.querySelector('#loginBtn');
      const loader = document.querySelector('#loader');

loginForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // Show loading animation
        loginBtn.disabled = true;
        loader.style.display = 'inline-block';
        loginBtn.value = 'Logging in...';
        
        // Simulate API call
        setTimeout(function() {
          // Hide loading animation
          loader.style.display = 'none';
          loginBtn.disabled = false;
          loginBtn.value = 'Login';
          
          // Simple validation
          if(username.value.trim() === '' || passwordInput.value.trim() === '') {
            errorMessage.textContent = 'Please fill in all fields';
            errorMessage.style.display = 'block';
          } else if(passwordInput.value.length < 6) {
            errorMessage.textContent = 'Password must be at least 6 characters';
            errorMessage.style.display = 'block';
          } else {
            errorMessage.style.display = 'none';
            // Here you would typically send the data to your server
            alert('Login successful! Redirecting...');
            // window.location.href = 'dashboard.html';
          }
        }, 1500);
      });

// Input field animations
      const inputBoxes = document.querySelectorAll('.inputBox input');
      
      inputBoxes.forEach(input => {
        input.addEventListener('focus', function() {
          this.parentNode.querySelector('i').style.color = '#00ff84';
        });
        
        input.addEventListener('blur', function() {
          this.parentNode.querySelector('i').style.color = '#fff';
        });
      });

// Background animation
      const spans = document.querySelectorAll('section span');
      
      spans.forEach((span, index) => {
        span.style.animationDuration = `${15 + (index * 5)}s`;
        span.style.animationDelay = `${index * -5}s`;
      });
    });
  </script>
</body>
</html>

CSS