WEBLEB
Home
AI Editor
Chat
Challenge
Login
Pro
English
English
Français
Español
A Code by efficientapp58
1,977
0
Websites
efficientapp58
Follow
0
Remix
Open In Editor
Fullscreen
Discuss
Publish Your Code
0
Recommended
13 June 2025
A Code by ashimadison8
10 February 2026
Subway Surfers
13 June 2025
A Code by ashimadison8
HTML
Copy
Webleb
OR
Card holder name
Card Number
Expiry Date / CVV
Checkout
CSS
Copy
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300&display=swap'); body{ height: 100vh; overflow: hidden; background: #0f0c29; background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29); background: linear-gradient(to right, #24243e, #302b63, #0f0c29); display: flex; align-items: center; justify-content: center; font-family: "Poppins"; } .modal { background: #FFFFFF; box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1); border-radius: 16px; max-width: 450px; } .form { display: flex; flex-direction: column; gap: 20px; padding: 20px; } .paymentother { display: grid; grid-template-columns: 50% 50%; gap: 20px; padding: 10px; justify-content: center; } .paymentother button { height: 55px; background: #F2F2F2; border-radius: 11px; padding: 0; border: 0; outline: none; } .paymentother button svg { height: 18px; } .paymentother button:last-child svg { height: 22px; } .separator { width: calc(100% - 20px); display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 10px; color: #8B8E98; margin: 0 10px; } .separator p { display: block; text-align: center; font-weight: 600; font-size: 12px; margin: auto; } .separator .line { display: inline-block; width: 100%; height: 1px; border: 0; background-color: #e8e8e8; } .card-info{ display: flex; flex-direction: column; gap: 15px; } .input_container { width: 100%; height: fit-content; display: flex; flex-direction: column; gap: 5px; } .split { display: grid; grid-template-columns: 4fr 2fr; gap: 15px; } .split input { width: 100%; } .input_label { font-size: 12px; color: #8B8E98; font-weight: 600; } .input_field { width: auto; height: 40px; padding: 0 0 0 16px; border-radius: 9px; outline: none; background-color: #F2F2F2; border: 1px solid #e5e5e500; transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1); } .input_field:focus { border: 1px solid transparent; box-shadow: 0px 0px 0px 2px #242424; background-color: transparent; } /* Reset input number styles */ .input_field::-webkit-outer-spin-button, .input_field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .checkout { position: relative; font-family: inherit; font-weight: 500; font-size: 18px; letter-spacing: 0.05em; border-radius: 0.8em; border: none; background: #302b63; color: ghostwhite; overflow: hidden; } .checkout span { position: relative; transition: color 0.6s; display: inline-flex; align-items: center; padding: 0.8em 1.2em 0.8em 1.05em; } .checkout::before, .checkout::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .checkout::before { content: ""; background: #000; width: 120%; left: -10%; transform: skew(30deg); transition: transform 0.5s cubic-bezier(0.3, 1, 0.8, 1); } .checkout:hover::before { transform: translate3d(100%, 0, 0); } .checkout:active { transform: scale(0.95); }
JS
Copy
Nothing to copy
Comments
0
Log in to join the discussion
…