भुगतान कार्ड

552 kevekıbhack

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

15 September 2024

एनिमेटेड लॉगिन फॉर्म

28 June 2025

HTML वेबसाइट नेविगेशन बार और हीरो अनुभाग

10 April 2025

डैनियल का ब्लॉग वेबसाइट

HTML

<!DOCTYPE html>

<head>

<title>3D Payment Card</title>

<style>

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

body {

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

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

margin: 0;

padding: 20px;

}

.card-container {

perspective: 1000px;

width: 100%;

max-width: 400px;

}

.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, #1a1a2e, #16213e);

transform: rotateY(0deg);

}

.card-back {

background: linear-gradient(135deg, #16213e, #1a1a2e);

transform: rotateY(180deg);

}

.flipped {

transform: rotateY(180deg);

}

/* Front card styling */

.card-logo {

display: flex;

justify-content: flex-end;

margin-bottom: 20px;

}

.card-logo img {

height: 40px;

}

.card-number {

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;

}

/* Back card styling */

.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 effect */

.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 symbol */

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

}

</style>

</head>

<body>

</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 Example Bank under license from Mastercard International</div>

</div>

// Add slight tilt effect on mouse move

document.querySelector('.card-container').addEventListener('mousemove', (e) => {

const card = e.currentTarget.querySelector('.card');

const cardRect = card.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)`;

}

});

// Reset rotation when mouse leaves

document.querySelector('.card-container').addEventListener('mouseleave', (e) => {

const card = e.currentTarget.querySelector('.card');

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

});

</script>

</body>

</html>

भुगतान कार्ड

अनुशंसित

एनिमेटेड लॉगिन फॉर्म

HTML वेबसाइट नेविगेशन बार और हीरो अनुभाग

डैनियल का ब्लॉग वेबसाइट

HTML

CSS

JS

अनुशंसित

एनिमेटेड लॉगिन फॉर्म

HTML वेबसाइट नेविगेशन बार और हीरो अनुभाग

डैनियल का ब्लॉग वेबसाइट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS