भुगतान कार्ड

398 kevekıbhack

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

अनुशंसित

7 November 2024

कॉलम लेआउट

7 March 2025

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

5 May 2024

रेस्तरां मेनू HTML टेम्पलेट

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