Visa Card Checkout Page HTML Template

Open In Editor Publish Your Code

<!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;
	}
}

Visa Card Checkout Page HTML Template

Recommended

card information

Music Streaming App HTML Template with Tailwind

Landing Page

HTML

CSS

JS

Recommended

card information

Music Streaming App HTML Template with Tailwind

Landing Page

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS