Una página de inicio alternativa

1,893 Metehan

Remix Abrir en el editor Publica tu código

Recomendado

19 May 2025

SITIO WEB DE APPLE

20 September 2025

Animación de carga de CSS Spinner

28 May 2026

Cargador de juegos Unity WebGL con integración de Firebase

HTML

<!DOCTYPE html>

<head>

<title>Xendre Login</title>

</head>

<body>

<div class="logo">XENDRE</div>

<form>

</div>

</div>

<a href="#" class="forgot-link">Forgot Password?</a>

<button type="submit" class="btn primary">LOGIN</button>

<button type="button" class="btn secondary">SIGNUP</button>

</div>

</form>

</button>

<p>Login with Touch ID</p>

</div>

<p>Scanning...</p>

</div>

</body>

</html>

CSS

/* General Styles */

body {

margin: 0;

font-family: 'Arial', sans-serif;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background: linear-gradient(135deg, #6e45e2, #88d3ce);

}

.container {

display: flex;

gap: 30px;

}

.card {

background: linear-gradient(135deg, #612778, #894ac8);

border-radius: 20px;

box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);

padding: 30px;

text-align: center;

color: white;

width: 300px;

}

.logo {

font-size: 24px;

font-weight: bold;

letter-spacing: 2px;

margin-bottom: 20px;

}

.input-group {

margin-bottom: 15px;

}

input {

width: 100%;

padding: 10px;

border: none;

border-radius: 10px;

background: rgba(255, 255, 255, 0.1);

color: white;

outline: none;

font-size: 14px;

}

input::placeholder {

color: rgba(255, 255, 255, 0.7);

}

.forgot-link {

display: block;

margin: 10px 0;

color: #f4c4f3;

text-decoration: none;

font-size: 12px;

}

.button-group {

display: flex;

justify-content: space-between;

margin: 20px 0;

}

button {

padding: 10px 20px;

border: none;

border-radius: 10px;

cursor: pointer;

font-size: 14px;

}

.btn.primary {

background: #f4c4f3;

color: #612778;

}

.btn.secondary {

background: transparent;

color: white;

border: 2px solid white;

}

.divider {

margin: 20px 0;

font-size: 12px;

opacity: 0.7;

}

.fingerprint-login {

display: flex;

flex-direction: column;

align-items: center;

}

.fingerprint-icon {

width: 60px;

height: 60px;

background: rgba(255, 255, 255, 0.2);

border-radius: 50%;

position: relative;

}

.fingerprint-icon::after {

content: '';

position: absolute;

top: 50%;

left: 50%;

width: 40px;

height: 40px;

background: rgba(255, 255, 255, 0.5);

border-radius: 50%;

transform: translate(-50%, -50%);

}

.scan-card {

display: none;

}

.scan-container {

margin-top: 50px;

}

.fingerprint-scan {

width: 80px;

height: 80px;

border: 4px solid white;

border-radius: 50%;

position: relative;

animation: scan-animation 2s infinite;

}

@keyframes scan-animation {

0% {

border-color: rgba(255, 255, 255, 0.3);

}

50% {

border-color: rgba(255, 255, 255, 1);

}

100% {

border-color: rgba(255, 255, 255, 0.3);

}