Webleb - UI Elements - Payment card

HTML

<!DOCTYPE html>

<head>

<title>Secure Login with Saved Card</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;600&family=Poppins:wght@300;400;500;600&display=swap');

:root {

--primary-color: #4361ee;

--secondary-color: #3a0ca3;

--dark-color: #1a1a2e;

--light-color: #f8f9fa;

--success-color: #4cc9f0;

}

* {

box-sizing: border-box;

margin: 0;

padding: 0;

}

body {

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

background-color: #f5f7fa;

color: #333;

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

padding: 20px;

}

.login-container {

display: flex;

max-width: 1000px;

width: 100%;

background: white;

border-radius: 20px;

box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);

overflow: hidden;

}

.login-form {

flex: 1;

padding: 40px;

display: flex;

flex-direction: column;

justify-content: center;

}

.card-display {

flex: 1;

background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

padding: 40px;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

color: white;

}

.logo {

text-align: center;

margin-bottom: 30px;

}

.logo img {

height: 50px;

}

h1 {

font-size: 24px;

margin-bottom: 10px;

font-weight: 600;

}

.subtitle {

color: #666;

margin-bottom: 30px;

font-size: 14px;

}

.form-group {

margin-bottom: 20px;

}

label {

display: block;

margin-bottom: 8px;

font-size: 14px;

font-weight: 500;

}

input {

width: 100%;

padding: 12px 15px;

border: 1px solid #ddd;

border-radius: 8px;

font-size: 14px;

transition: all 0.3s;

}

input:focus {

outline: none;

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

box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);

}

.remember-me {

display: flex;

align-items: center;

margin-bottom: 20px;

}

.remember-me input {

width: auto;

margin-right: 10px;

}

.remember-me label {

margin-bottom: 0;

}

button {

width: 100%;

padding: 12px;

background: var(--primary-color);

color: white;

border: none;

border-radius: 8px;

font-size: 16px;

font-weight: 500;

cursor: pointer;

transition: all 0.3s;

}

button:hover {

background: var(--secondary-color);

transform: translateY(-2px);

}

.forgot-password {

text-align: center;

margin-top: 20px;

}

.forgot-password a {

color: var(--primary-color);

text-decoration: none;

font-size: 14px;

}

/* Card styles */

.card-container {

perspective: 1000px;

width: 100%;

max-width: 400px;

margin-bottom: 30px;

}

.card {

width: 100%;

height: 240px;

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: 15px;

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, var(--dark-color), #16213e);

transform: rotateY(0deg);

}

.card-back {

background: linear-gradient(135deg, #16213e, var(--dark-color));

transform: rotateY(180deg);

}

.flipped {

transform: rotateY(180deg);

}

.card-logo {

display: flex;

justify-content: flex-end;

margin-bottom: 20px;

}

.card-logo img {

height: 40px;

}

.card-number {

font-family: 'Source Code Pro', monospace;

font-size: 22px;

letter-spacing: 3px;

margin-bottom: 30px;

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

word-spacing: 8px;

}

.card-details {

display: flex;

justify-content: space-between;

}

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

}

.card-magnetic-strip {

height: 40px;

background: #000;

margin-top: 20px;

margin-bottom: 15px;

}

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

}

.cvv-strip {

background: #fff;

color: #333;

padding: 5px 10px;

border-radius: 3px;

font-size: 14px;

width: 60px;

text-align: center;

}

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

}

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

}

.saved-card-label {

margin-bottom: 15px;

font-size: 14px;

opacity: 0.9;

}

.card-actions {

display: flex;

justify-content: space-between;

margin-top: 20px;

width: 100%;

max-width: 400px;

}

.card-btn {

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

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

color: white;

padding: 8px 15px;

border-radius: 6px;

font-size: 13px;

cursor: pointer;

transition: all 0.3s;

}

.card-btn:hover {

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

}

@media (max-width: 768px) {

.login-container {

flex-direction: column;

}

.card-display {

order: -1;

padding: 30px;

}

.login-form {

padding: 30px;

}

</style>

</head>

<body>

</div>

<h1>Welcome back</h1>

<p class="subtitle">Sign in to access your account</p>

<label for="username">Email or Username</label>

</div>

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

</div>

<label for="remember">Remember me</label>

</div>

<a href="#">Forgot password?</a>

</div>

</form>

</div>

<h2>Your Saved Card</h2>

<p class="saved-card-label">Flip to see security code</p>

</div>

<span class="card-label">Card Holder</span>

</div>

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

</div>

</div>

</div>

<div class="card-issuer">This card is issued by MyBank under license from Mastercard International</div>

</div>

</div>

// Add tilt effect to card

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

const card = document.querySelector('.card');

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

const cardRect = cardContainer.getBoundingClientRect();

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

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

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

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

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

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

}

});

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

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

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

}

});

// Form submission

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

e.preventDefault();

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

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

// Here you would typically send this to your server

console.log('Login attempt with:', { username, password });

// Simulate successful login

alert('Login successful! Redirecting to your account...');

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

});

</script>

</body>

</html>

CSS

JS

Payment card

Recommended