Webleb - UI Elements - Alternatif bir Giriş sayfası

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

}

Alternatif bir Giriş sayfası

Recommended

Animated Label Input Tag

hover memory recursive colors

Shoes shop

HTML

CSS

JS

Recommended

Animated Label Input Tag

hover memory recursive colors

Shoes shop

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS