WEBLEB
Accueil
Éditeur
Chat
Connexion
Pro
Français
English
Français
Español
Formulaire de paiement HTML/CSS
14,474
0
Formulaires
webleb
Suivre
0
Remixer
Ouvrir dans l'éditeur
Plein écran
Discuter
Publiez votre code
13
Recommandé
28 August 2025
Modèle de site web dédié au travail du bois | Tailwind CSS, Artisan Design
25 November 2025
Modèle HTML pour site web de films | Responsive et filtrable
29 January 2025
Un code par sheeshokaokayokay
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
Comments
0
Log in to join the discussion
…