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>

Payment card

Recommended

CodePen Home Stars and Warp Speed

3d Three figures Sliders

Samsung Galaxy S24 Ultra Landing Page

HTML

CSS

JS

Recommended

CodePen Home Stars and Warp Speed

3d Three figures Sliders

Samsung Galaxy S24 Ultra Landing Page

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS