WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Simple Login Form
5374
webleb
Publish Your Code
Recommended
23 March 2024
HTML Login Page
12 March 2023
Sign Up/Login Form
5 July 2025
Glassy Login & Register Panel V2 from TheDoc
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
