WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Visa Card Checkout Page HTML Template
520
alejandrokundrah
Open In Editor
Publish Your Code
Recommended
10 February 2025
card information
28 August 2025
Music Streaming App HTML Template with Tailwind
17 May 2024
Landing Page
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) */