फ़िंगरप्रिंट डिज़ाइन के साथ HTML CSS लॉगिन पृष्ठ

1090 Metehan

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

फ़िंगरप्रिंट डिज़ाइन के साथ HTML CSS लॉगिन पृष्ठ

अनुशंसित

19 September 2025

एनिमेटेड CSS ड्रॉपडाउन मेनू के उदाहरण

16 January 2026

रफ़ल फ़्लैश गेम प्लेयर HTML टेम्पलेट

24 June 2025

एलारा आयडिन: व्यक्तिगत ब्लॉग HTML टेम्पलेट

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login Page</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Arial', sans-serif;
    }

body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background: linear-gradient(135deg, #e0558e, #8341c1);
    }

.container {
      display: flex;
      width: 600px;
      height: 400px;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }

.login-section {
      flex: 1;
      padding: 20px;
      background: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

.login-section h1 {
      color: #8341c1;
      font-size: 32px;
      margin-bottom: 20px;
    }

.login-section input {
      width: 80%;
      padding: 10px;
      margin: 10px 0;
      border: 1px solid #ddd;
      border-radius: 5px;
      outline: none;
      font-size: 16px;
    }

.login-section button {
      width: 80%;
      padding: 10px;
      border: none;
      background: #8341c1;
      color: white;
      font-size: 18px;
      border-radius: 5px;
      cursor: pointer;
      transition: 0.3s;
    }

.login-section button:hover {
      background: #6c32a8;
    }

.fingerprint-section {
      flex: 1;
      background: linear-gradient(135deg, #8341c1, #e0558e);
      display: flex;
      justify-content: center;
      align-items: center;
    }

.fingerprint-box {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }

.fingerprint-box::before {
      content: '';
      width: 100px;
      height: 100px;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 50%;
      position: absolute;
      animation: pulse 2s infinite;
    }

@keyframes pulse {
      0% {
        transform: scale(1);
        opacity: 1;
      }
      100% {
        transform: scale(1.5);
        opacity: 0;
      }
    }

.fingerprint {
      width: 80px;
      height: 80px;
      background: white;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="login-section">
      <h1>ZENDA</h1>
      <input type="text" placeholder="Username">
      <input type="password" placeholder="Password">
      <button>Login</button>
    </div>
    <div class="fingerprint-section">
      <div class="fingerprint-box">
        <div class="fingerprint"></div>
      </div>
    </div>
  </div>
</body>
</html>

अनुशंसित

एनिमेटेड CSS ड्रॉपडाउन मेनू के उदाहरण

रफ़ल फ़्लैश गेम प्लेयर HTML टेम्पलेट

एलारा आयडिन: व्यक्तिगत ब्लॉग HTML टेम्पलेट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS