WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Formulaire de contact CSS
8692
lebdev
Publiez votre code
Recommandé
22 December 2024
annuaires de voitures
15 October 2025
Code HTML JavaScript du jeu de devinettes
20 March 2023
Barre de navigation Bootstrap responsive
index.html
Copy
Webleb
Contact
Keep in touch
Submit
styles.css
Copy
@import "https://fonts.googleapis.com/css?family=Poppins"; * { box-sizing: border-box; } body { margin: 0; padding: 0; background: #333; font-family: Poppins; text-transform: uppercase; font-size: 11px; background: #0f0c29; /* fallback for old browsers */ background: -webkit-linear-gradient( to right, #24243e, #302b63, #0f0c29 ); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient( to right, #24243e, #302b63, #0f0c29 ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } h1 { margin: 0; } #contact { margin: 4em auto; width: 100px; height: 30px; line-height: 30px; font-weight: 700; text-align: center; cursor: pointer; border: 1px solid white; } #contact:hover { background: #000000; } #contact:active { background: #444; } #contactForm { display: none; border: 6px solid 3324be; padding: 2em; width: 400px; text-align: center; background: #fff; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); border-radius: 16px; } input, textarea { outline: 0; background: #f2f2f2; width: 100%; border: 0; margin: 0 0 15px; padding: 15px; box-sizing: border-box; font-size: 14px; border-radius: 15px; } textarea { height: 80px; resize: none; } .formBtn { outline: 0; background: #3324be; width: 140px; height: 30px; border: 0; color: #ffffff; font-size: 1.2em; border-radius: 15px; -webkit-transition: all 0.3 ease; transition: all 0.3 ease; cursor: pointer; }
main.js
Copy
$(function() { $('#contact').click(function() { $('#contactForm').fadeToggle(); }) $(document).mouseup(function (e) { var container = $("#contactForm"); if (!container.is(e.target) && container.has(e.target).length === 0) { container.fadeOut(); } }); });