WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un codice di efficientapp58
1556
efficientapp58
Apri nell'Editor
Video
Pubblica il Tuo Codice
0
Consigliato
15 October 2025
Codice HTML JavaScript del gioco di indovinelli
29 May 2025
Un codice di mathieu.ratro
26 December 2024
Un codice di efficientcloud646
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