Página de inicio de sesión HTML CSS con diseño de huella digital

1,326 Metehan

Abrir en el editor Publica tu código

Página de inicio de sesión HTML CSS con diseño de huella digital

Recomendado

13 July 2024

Botón de descarga animado

4 September 2023

Interfaz de usuario para bot de seguidores

27 January 2025

Un sitio de periódico responsivo

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