Webleb - UI Elements - Banking Login Form HTML CSS JavaScript

HTML

<!DOCTYPE html>

<head>

<title>Secure Banking Login</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {

--primary-color: #2E5BFF;

--primary-dark: #1E3DB3;

--secondary-color: #00C6FF;

--dark-color: #1A1D29;

--light-color: #F8F9FC;

--success-color: #00D4A3;

--warning-color: #FFAB2D;

--danger-color: #FF4757;

--gray-100: #F5F7FA;

--gray-200: #E4E7EB;

--gray-500: #8F95B2;

--gray-700: #4A4A68;

--shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

--shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.15);

--radius: 12px;

--transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

}

* {

box-sizing: border-box;

margin: 0;

padding: 0;

}

body {

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

background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);

color: var(--dark-color);

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

padding: 20px;

line-height: 1.6;

}

.login-container {

display: flex;

max-width: 1200px;

width: 100%;

background: white;

border-radius: 20px;

box-shadow: var(--shadow-lg);

overflow: hidden;

position: relative;

}

.login-container::before {

content: '';

position: absolute;

top: 0;

left: 0;

right: 0;

height: 5px;

background: linear-gradient(to right, var(--primary-color), var(--secondary-color));

}

.login-form {

flex: 1;

padding: 50px 40px;

display: flex;

flex-direction: column;

justify-content: center;

background: white;

position: relative;

z-index: 1;

}

.card-display {

flex: 1;

background: linear-gradient(135deg, var(--dark-color) 0%, #2D3047 100%);

padding: 50px 40px;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

color: white;

position: relative;

overflow: hidden;

}

.card-display::before {

content: '';

position: absolute;

top: -50%;

right: -50%;

width: 100%;

height: 200%;

background: radial-gradient(circle, rgba(46, 91, 255, 0.1) 0%, transparent 70%);

}

.logo {

text-align: center;

margin-bottom: 40px;

}

.logo img {

height: 40px;

}

.logo-text {

font-size: 24px;

font-weight: 700;

color: var(--primary-color);

margin-top: 10px;

}

h1 {

font-size: 28px;

margin-bottom: 10px;

font-weight: 700;

color: var(--dark-color);

}

.subtitle {

color: var(--gray-500);

margin-bottom: 40px;

font-size: 16px;

line-height: 1.6;

}

.form-group {

margin-bottom: 24px;

position: relative;

}

label {

display: block;

margin-bottom: 8px;

font-size: 14px;

font-weight: 500;

color: var(--gray-700);

}

.input-container {

position: relative;

}

input {

width: 100%;

padding: 16px 20px 16px 45px;

border: 1px solid var(--gray-200);

border-radius: var(--radius);

font-size: 16px;

transition: var(--transition);

background-color: var(--gray-100);

}

input:focus {

outline: none;

border-color: var(--primary-color);

box-shadow: 0 0 0 3px rgba(46, 91, 255, 0.2);

background-color: white;

}

.input-icon {

position: absolute;

left: 16px;

top: 50%;

transform: translateY(-50%);

color: var(--gray-500);

font-size: 18px;

}

.password-toggle {

position: absolute;

right: 16px;

top: 50%;

transform: translateY(-50%);

color: var(--gray-500);

cursor: pointer;

font-size: 18px;

}

.remember-forgot {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 30px;

}

.remember-me {

display: flex;

align-items: center;

}

.remember-me input {

width: auto;

margin-right: 10px;

}

.remember-me label {

margin-bottom: 0;

font-size: 14px;

}

.forgot-password a {

color: var(--primary-color);

text-decoration: none;

font-size: 14px;

font-weight: 500;

transition: var(--transition);

}

.forgot-password a:hover {

color: var(--primary-dark);

}

button {

width: 100%;

padding: 16px;

background: var(--primary-color);

color: white;

border: none;

border-radius: var(--radius);

font-size: 16px;

font-weight: 600;

cursor: pointer;

transition: var(--transition);

box-shadow: 0 4px 12px rgba(46, 91, 255, 0.3);

}

button:hover {

background: var(--primary-dark);

transform: translateY(-2px);

box-shadow: 0 6px 15px rgba(46, 91, 255, 0.4);

}

.security-notice {

text-align: center;

margin-top: 30px;

padding: 15px;

background-color: var(--gray-100);

border-radius: var(--radius);

font-size: 14px;

color: var(--gray-700);

}

.security-notice i {

color: var(--success-color);

margin-right: 8px;

}

/* Card styles */

.card-container {

perspective: 1200px;

width: 100%;

max-width: 420px;

margin-bottom: 40px;

}

.card {

width: 100%;

height: 260px;

position: relative;

transform-style: preserve-3d;

transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1);

cursor: pointer;

}

.card-front, .card-back {

width: 100%;

height: 100%;

position: absolute;

backface-visibility: hidden;

border-radius: 16px;

box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);

padding: 25px;

box-sizing: border-box;

display: flex;

flex-direction: column;

justify-content: space-between;

color: white;

overflow: hidden;

}

.card-front {

background: linear-gradient(135deg, #1A1D29 0%, #2D3047 100%);

transform: rotateY(0deg);

}

.card-back {

background: linear-gradient(135deg, #2D3047 0%, #1A1D29 100%);

transform: rotateY(180deg);

}

.flipped {

transform: rotateY(180deg);

}

.card-header {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 20px;

}

.card-chip {

width: 50px;

height: 40px;

background: linear-gradient(135deg, #FFD700 0%, #D4AF37 100%);

border-radius: 8px;

position: relative;

overflow: hidden;

}

.card-chip::before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 50%);

}

.card-logo img {

height: 40px;

}

.card-number {

font-family: 'Courier New', monospace;

font-size: 24px;

letter-spacing: 3px;

margin-bottom: 30px;

text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

word-spacing: 8px;

display: flex;

justify-content: space-between;

}

.card-details {

display: flex;

justify-content: space-between;

align-items: flex-end;

}

.card-holder, .expiry-date {

display: flex;

flex-direction: column;

}

.card-label {

font-size: 10px;

opacity: 0.7;

margin-bottom: 5px;

text-transform: uppercase;

letter-spacing: 1px;

}

.card-value {

font-size: 16px;

letter-spacing: 1px;

font-weight: 500;

}

.contactless {

position: absolute;

right: 25px;

bottom: 25px;

width: 30px;

height: 30px;

background: radial-gradient(circle at center,

rgba(255,255,255,0.8) 0%,

rgba(255,255,255,0.4) 50%,

transparent 70%);

border-radius: 50%;

display: flex;

justify-content: center;

align-items: center;

}

.contactless::before {

content: "⌃";

font-size: 18px;

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

transform: rotate(90deg);

}

.card-magnetic-strip {

height: 50px;

background: #000;

margin-top: 20px;

margin-bottom: 20px;

}

.card-signature {

height: 40px;

background: #fff;

border-radius: 4px;

display: flex;

align-items: center;

padding: 0 10px;

color: #333;

font-size: 12px;

position: relative;

margin-bottom: 20px;

}

.card-signature::after {

content: "Authorized Signature - Not Valid Unless Signed";

position: absolute;

right: 10px;

font-size: 6px;

color: #999;

}

.card-cvv {

display: flex;

justify-content: flex-end;

align-items: center;

}

.cvv-label {

font-size: 10px;

margin-right: 10px;

opacity: 0.7;

}

.cvv-strip {

background: #fff;

color: #333;

padding: 5px 10px;

border-radius: 3px;

font-size: 14px;

width: 60px;

text-align: center;

font-family: 'Courier New', monospace;

}

.card-issuer {

font-size: 10px;

text-align: center;

opacity: 0.7;

margin-top: 10px;

}

.holographic {

position: absolute;

width: 60px;

height: 40px;

background: linear-gradient(45deg,

rgba(255,255,255,0.1) 0%,

rgba(255,255,255,0.5) 50%,

rgba(255,255,255,0.1) 100%);

border-radius: 5px;

top: 20px;

left: 20px;

opacity: 0.8;

}

.card-display-title {

font-size: 24px;

font-weight: 700;

margin-bottom: 10px;

text-align: center;

}

.card-display-subtitle {

font-size: 16px;

opacity: 0.8;

margin-bottom: 30px;

text-align: center;

}

.card-actions {

display: flex;

justify-content: space-between;

margin-top: 30px;

width: 100%;

max-width: 420px;

}

.card-btn {

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

border: 1px solid rgba(255,255,255,0.3);

color: white;

padding: 12px 20px;

border-radius: var(--radius);

font-size: 14px;

cursor: pointer;

transition: var(--transition);

flex: 1;

margin: 0 8px;

font-weight: 500;

}

.card-btn:hover {

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

transform: translateY(-2px);

}

.card-btn.primary {

background: var(--primary-color);

border-color: var(--primary-color);

}

.card-btn.primary:hover {

background: var(--primary-dark);

}

@media (max-width: 968px) {

.login-container {

flex-direction: column;

}

.card-display {

order: -1;

padding: 40px 30px;

}

.login-form {

padding: 40px 30px;

}

.card-actions {

flex-direction: column;

gap: 12px;

}

.card-btn {

margin: 0;

}

/* Animations */

@keyframes fadeIn {

from { opacity: 0; transform: translateY(20px); }

to { opacity: 1; transform: translateY(0); }

}

.fade-in {

animation: fadeIn 0.6s ease-out forwards;

}

.delay-1 { animation-delay: 0.1s; }

.delay-2 { animation-delay: 0.2s; }

.delay-3 { animation-delay: 0.3s; }

/* Loading animation for button */

.btn-loading {

position: relative;

color: transparent;

}

.btn-loading::after {

content: '';

position: absolute;

width: 20px;

height: 20px;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

border: 2px solid transparent;

border-top-color: white;

border-radius: 50%;

animation: button-loading-spinner 1s ease infinite;

}

@keyframes button-loading-spinner {

from { transform: rotate(0turn); }

to { transform: rotate(1turn); }

}

</style>

</head>

<body>

<div class="logo-text">A3 MANAJEMEN BANK PAYMENT</div>

</div>

<h1 class="fade-in delay-1">MASUKKAN EMAIL/NO REKENING DENGAN BENAR BIAR TIDAK TERJADI KESALAHAN</h1>

<p class="subtitle fade-in delay-1">Transaksi anda aman dan sudah diawasi oleh pihak yang berwenang.</p>

<label for="username">Pastikan Email Yang Anda Masukkan Aktif</label>

</div>

<label for="password">Masukkan Password</label>

</div>

<label for="remember">Klik Bila Selesai Mengisi Data</label>

</div>

<a href="#">A3 LEGAL SITE</a>

</div>

<button type="submit" class="fade-in delay-3" id="loginButton">Masuk</button>

<span>SITUS AMAN DIAWASI OLEH PIHAK BANK SECARA LANGSUNG</span>

</div>

</form>

</div>

<h2 class="card-display-title">A3 MANAJEMEN BANK PAYMENT</h2>

<p class="card-display-subtitle">(Muhammad Hazrady Wijaya Priority Bank)</p>

</div>

</div>

<span class="card-label">PREMIUM</span>

<span class="card-value">Muhammad Hazrady Wijaya</span>

</div>

<span class="card-label">VALID THRUE</span>

</div>

</div>

<span class="cvv-label">Güvenlik Kodu</span>

</div>

<div class="card-issuer">Bu kart SecureBank tarafından Mastercard International lisansıyla verilmiştir</div>

</div>

<button class="card-btn primary">Masukkan Kartu debit</button>

<button class="card-btn">(8 Digit Terakhir nomor kartu kredit)</button>

</div>

// DOM Elements

const creditCard = document.getElementById('creditCard');

const togglePassword = document.getElementById('togglePassword');

const passwordInput = document.getElementById('password');

const loginForm = document.getElementById('loginForm');

const loginButton = document.getElementById('loginButton');

// Card flip functionality

creditCard.addEventListener('click', function() {

this.classList.toggle('flipped');

});

// Password visibility toggle

togglePassword.addEventListener('click', function() {

const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';

passwordInput.setAttribute('type', type);

this.classList.toggle('fa-eye');

this.classList.toggle('fa-eye-slash');

});

// Add tilt effect to card

const cardContainer = document.querySelector('.card-container');

cardContainer.addEventListener('mousemove', (e) => {

if (creditCard.classList.contains('flipped')) return;

const cardRect = cardContainer.getBoundingClientRect();

const cardCenterX = cardRect.left + cardRect.width / 2;

const cardCenterY = cardRect.top + cardRect.height / 2;

const angleX = (e.clientY - cardCenterY) / 25;

const angleY = (cardCenterX - e.clientX) / 25;

creditCard.style.transform = `rotateY(${angleY}deg) rotateX(${angleX}deg)`;

});

cardContainer.addEventListener('mouseleave', () => {

if (!creditCard.classList.contains('flipped')) {

creditCard.style.transform = 'rotateY(0deg) rotateX(0deg)';

}

});

// Form submission

loginForm.addEventListener('submit', function(e) {

e.preventDefault();

const username = document.getElementById('username').value;

const password = document.getElementById('password').value;

// Show loading state

loginButton.classList.add('btn-loading');

// Simulate API call

setTimeout(() => {

loginButton.classList.remove('btn-loading');

// Basic validation

if (username && password) {

// Simulate successful login

alert('Giriş başarılı! Yönlendiriliyorsunuz...');

// In a real application, you would redirect to the dashboard

// window.location.href = '/dashboard';

} else {

alert('Lütfen tüm alanları doldurun.');

}

}, 1500);

});

// Add some dynamic elements to the card

function updateCardTime() {

const now = new Date();

const timeString = now.toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit' });

document.querySelector('.expiry-date .card-value').textContent = timeString;

}

// Update card time every minute

setInterval(updateCardTime, 60000);

updateCardTime(); // Initial call

</script>

</body>

</html>

Banking Login Form HTML CSS JavaScript

Recommended

HTML Login Form Example

Advanced login screen

Login from TheDOC

HTML

CSS

JS

Recommended

HTML Login Form Example

Advanced login screen

Login from TheDOC

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS