Modèle HTML de page de paiement par carte Visa

1,410 alejandrokundrah

Ouvrir dans l'éditeur Publiez votre code

Modèle HTML de page de paiement par carte Visa

Recommandé

11 February 2026

Modèle HTML de la communauté chinoise

19 September 2023

Animation de texte au défilement

18 December 2025

Code HTML du jeu Elastic Face

HTML

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Visa Card </title>
		<link rel="stylesheet" href="styles.css" />
		<script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
	</head>
	<body>
		<div class="container">
			<div class="left column">
				<div class="logo"><ion-icon name="finger-print"></ion-icon></div>
				<div class="header"><h1 class="ml12">checkout</h1></div>
				<div class="back-btn">⟵ back to address</div>
				<div class="price">
					<span>total</span>
					<span>$979.80</span>
				</div>
			</div>
			<div class="right column">
				<div class="nav">
					<div class="nav-item">shopping</div>
					➝
					<div class="nav-item">address</div>
					➝
					<div class="nav-item active">checkout</div>
				</div>
				<div class="card-img">
					<img src="https://i.postimg.cc/dtyss76M/card.png" alt="" />
				</div>
				<div class="form">
					<div class="form-row">
						<input type="text" placeholder="card number" />
					</div>
					<div class="form-row">
						<input type="text" placeholder="date" />
						               
						<input type="text" placeholder="cvv" />
					</div>
				</div>
				<div class="btn">
					<button>checkout</button>
				</div>
			</div>
		</div>
		<script>
			var textWrapper = document.querySelector(".ml12");
			textWrapper.innerHTML = textWrapper.textContent.replace(
				/\S/g,
				"<span class='letter'>$&</span>"
			);

anime.timeline().add({
				targets: ".ml12 .letter",
				translateY: [100, 0],
				translateZ: 0,
				opacity: [0, 1],
				easing: "easeOutExpo",
				duration: 2000,
				delay: (el, i) => 1200 + 60 * i,
			});

TweenMax.from(".logo", 3, {
				y: "40",
				opacity: 0,
				ease: Expo.easeInOut,
			});

TweenMax.from(".back-btn", 3, {
				y: "40",
				opacity: 0,
				ease: Expo.easeInOut,
				delay: 0.4,
			});

TweenMax.from(".right", 3, {
				y: "40",
				opacity: 0,
				ease: Expo.easeInOut,
				delay: 0.6,
			});

TweenMax.from(".card-img", 2, {
				y: "60",
				opacity: 0,
				ease: Expo.easeInOut,
				delay: 1.2,
			});

TweenMax.from(".btn", 2, {
				y: "60",
				opacity: 0,
				ease: Expo.easeInOut,
				delay: 1.4,
			});

TweenMax.staggerFrom(
				".price > span",
				1,
				{
					y: "40",
					opacity: 0,
					ease: Power2.easeOut,
					delay: 1.6,
				},
				0.2
			);

TweenMax.staggerFrom(
				".nav > .nav-item",
				1,
				{
					y: "40",
					opacity: 0,
					ease: Power2.easeOut,
					delay: 1.6,
				},
				0.2
			);

TweenMax.staggerFrom(
				".form > div",
				1,
				{
					y: "40",
					opacity: 0,
					ease: Power2.easeOut,
					delay: 2,
				},
				0.2
			);
		</script>
	</body>
</html>

CSS

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body {
	width: 100%;
	height: 100vh;
	background: #131313;
	color: #fff;
	overflow: hidden;
}

@media (min-width: 900px) {
	.container {
		display: flex;
	}
	.left {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
}

.container {
	width: 96%;
	margin: 30px auto;
}

.column {
	width: 50%;
	height: 100vh;
	border: 1px solid rgba(255, 255, 255, 0.1);
	margin: 20px;
	border-radius: 20px;
}

.left {
	flex-direction: column;
	justify-content: space-between;
	padding: 0 0 100px 0;
	font-family: "Ayer Poster";
	border: none;
}

.logo {
	font-size: 24px;
	flex-grow: 1;
}

.header h1 {
	text-transform: uppercase;
	font-size: 160px;
	font-weight: 300;
	flex-grow: 1;
}

.ml12 .letter {
	display: inline-block;
	line-height: 1em;
}

.back-btn {
	color: rgb(104, 104, 104);
	font-family: "Neue Montreal";
	text-transform: uppercase;
	font-size: 20px;
	font-weight: 400;
	padding: 10px;
	flex-grow: 2;
	cursor: pointer;
}

.price {
	display: flex;
	justify-content: space-between;
	color: #fff;
	font-family: "Neue Montreal";
	text-transform: uppercase;
	font-size: 20px;
	font-weight: 400;
	width: 50%;
}

.right {
	padding: 30px;
}

.nav {
	display: flex;
	justify-content: space-between;
	color: #fff;
	font-family: "Neue Montreal";
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 400;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	cursor: pointer;
}

.active {
	color: rgb(104, 104, 104);
}

.card-img {
	display: flex;
	justify-content: center;
	align-items: center;
}

.card-img img {
	width: 125%;
}

.form input {
	width: 100%;
	background: none;
	border: none;
	border-bottom: 1px solid rgb(104, 104, 104);
	outline: none;
	padding: 20px 20px 20px 0;
	margin: 0 0px;
	color: #fff;
	font-family: "Neue Montreal";
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 400;
}

.form-row {
	display: flex;
}

button {
	width: 100%;
	margin: 40px 0;
	padding: 20px 0;
	background: #000;
	color: #fff;
	text-transform: uppercase;
	font-size: 14px;
	border: none;
	font-weight: 400;
	outline: none;
	border-radius: 40px;
	cursor: pointer;
}

@media (max-width: 900px) {
	html,
	body {
		height: 100%;
		overflow: visible;
	}
	.left {
		display: flex;

flex-direction: column;
		justify-content: space-between;
	}

.column {
		width: 94% !important;
	}
}