Webleb - Snippet di Codice - Carta di pagamento

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>

Carta di pagamento

Consigliato

Un codice di alejandrokundrah

Hacker Login (AGGIORNAMENTO) Edizione Turca

HTML

CSS

JS

Consigliato

Un codice di alejandrokundrah

Hacker Login (AGGIORNAMENTO) Edizione Turca

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS