Une page d'accueil alternative

1082 Metehan

Ouvrir dans l'éditeur Publiez votre code

Recommandé

29 July 2025

Liste des cartes d'entreprise avec image de marque et marketing

18 February 2024

Chute de pluie réaliste

20 October 2024

Bouton de dégradé CSS

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é

Liste des cartes d'entreprise avec image de marque et marketing

Chute de pluie réaliste

Bouton de dégradé CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS