Webleb - Snippets de Código - Formulário de login com design de interface de cartão de crédito

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>A3 MANAJEMEN PAY</h1>

<p class="subtitle">Masukkan email aktif agar pembayaran tidak terkendala</p>

<label for="username">Email atau pengguna</label>

</div>

<label for="password">Password</label>

</div>

<label for="remember">Remember me</label>

</div>

<a href="#">Situs ini Legal. apabila terkendala coba masukkan email dengan benar</a>

</div>

</form>

</div>

<h2>PEMBAYARAN LEBIH CEPAT DAN MUDAH</h2>

<p class="saved-card-label">TAMBAHKAN DEBITMU DISINI</p>

</div>

<span class="card-label">Card Holder priority</span>

<span class="card-value">MUHAMMAD HAZRADY WIJAYA</span>

</div>

<span class="card-label">VALID THRU MONTH/YEAR</span>

</div>

</div>

</div>

<div class="card-issuer">This card is issued by MyBank under license from Mastercard International</div>

</div>

<button class="card-btn">Bayar Disini</button>

<button class="card-btn">Tambahkan Kartu Debit</button>

</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>

Formulário de login com design de interface de cartão de crédito

Recomendado

Gerador de senhas da SENAPI

Um Código de Metehan

Notificação de brinde

HTML

CSS

JS

Recomendado

Gerador de senhas da SENAPI

Um Código de Metehan

Notificação de brinde

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS