Une page d'accueil alternative

1448 Metehan

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

25 August 2024

Découverte des produits d'animation d'interface utilisateur

16 December 2025

Émulateur de jeu Street Fighter II Turbo HTML5

7 November 2024

Effet d'animation de survol de texte

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);

}

Recommandé

Découverte des produits d'animation d'interface utilisateur

Émulateur de jeu Street Fighter II Turbo HTML5

Effet d'animation de survol de texte

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS