Webleb - Snippet di Codice - Carta di pagamento

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>

Carta di pagamento

Consigliato

Una homepage perfetta progettata con Leon matrex

Animazione CSS del testo sfumato

HTML

CSS

JS

Consigliato

Una homepage perfetta progettata con Leon matrex

Animazione CSS del testo sfumato

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS