WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
5626
webleb
Pubblica il Tuo Codice
Consigliato
12 October 2025
Esempio HTML di mockup dell'interfaccia utente di Facebook
24 May 2025
finanziario
index.html
Copy
<html lang="en-US"> <head> <meta charset="utf-8" /> <title>Webleb</title> <link rel="stylesheet" href="/css/styles.css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" /> </head> <body style=" height:100%;display:flex ; justify-content: center; align-items: center;"> <div id="login"> <form name="form-login"> <input type="text" class="input" id="user" placeholder="Username" /> <input type="password" class="input" id="pass" placeholder="Password" /> <button type="submit" class="submitbtn">Login</button> </form> </div> </body> </html>
styles.css
Copy
body { background: #2c3338; color: #606468; font: 87.5%/1.5em 'Open Sans', sans-serif; margin: 0; height: 100vh; } input { border: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 16px; line-height: 1.5em; padding: 0; } p { line-height: 1.5em; } after { clear: both; } #login { margin: 50px auto; width: 320px; } #login form { margin: auto; padding: 30px; border-radius: 10px; background: #22272a; } .input{ background-color: #3b4148; border-radius:10px; color: #a9a9a9; margin-bottom: 1em; padding: 0 16px; width: 100%; outline: 0; height: 50px; } .submitbtn { background: #0c787d; border: 0; width: 100%; height: 40px; border-radius: 10px; color: white; cursor: pointer; transition: background 0.3s ease-in-out; } .submitbtn:hover { background: #076064; }
main.js
Copy
// Nothing to Copy
