WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Visa Card Checkout Page HTML Template
52
alejandrokundrah
Open In Editor
Publish Your Code
Recommended
30 March 2025
Glowing Gradient Glassmorphism Card
2 July 2025
Cardiology Clinic: Heart Care, Services & Appointments
14 January 2025
Portfolio Webpage Example
HTML
Copy
Visa Card
checkout
⟵ back to address
total
$979.80
shopping
➝
address
➝
checkout
checkout
CSS
Copy
* { 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; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */