आधुनिक लॉगिन

1009 kevekıbhack

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

19 November 2025

Google लॉगिन और रिस्पॉन्सिव मेनू HTML कोड

12 December 2025

CSS और Font Awesome के साथ HTML लॉगिन फॉर्म

15 September 2024

एनिमेटेड लॉगिन फॉर्म

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>

अनुशंसित

Google लॉगिन और रिस्पॉन्सिव मेनू HTML कोड

CSS और Font Awesome के साथ HTML लॉगिन फॉर्म

एनिमेटेड लॉगिन फॉर्म

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS