WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
8186
lebdev
Pubblica il Tuo Codice
Consigliato
31 January 2025
pulsante più
23 August 2025
Modulo di accesso HTML con attivazione/disattivazione della password
26 May 2025
Un codice di mironovbogdan341
index.html
Copy
<html> <head> <meta charset="utf-8" /> <title>Webleb</title> <link href="/css/styles.css" rel="stylesheet" type="text/css" /> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <div id="contact" class="formBtn">Contact</div> <div id="contactForm"> <h1 style="margin-bottom: 10px;">Keep in touch</h1> <form action="#"> <input placeholder="Name" type="text" required /> <input placeholder="Email" type="email" required /> <input placeholder="Subject" type="text" required /> <input placeholder="Message"/> <button class="formBtn" type="submit">Submit</button> </form> </div> <script src="/js/main.js"></script> </body> </html>
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(); } }); });
