Webleb - Extraits de Code - Une page d'accueil alternative

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

}

Une page d'accueil alternative

Recommandé

Bouton de téléchargement

Calculateur de taxes Robux

Animation fantôme CSS

HTML

CSS

JS

Recommandé

Bouton de téléchargement

Calculateur de taxes Robux

Animation fantôme CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS