WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Modern Login Form
8486
webleb
Publish Your Code
Recommended
17 July 2025
3D Rotating Login Signup Form HTML CSS
21 July 2024
Animated Sign In Form
23 July 2024
Login with registration
index.html
Copy
<!doctype html> <html lang="en"> <head> <title>Webleb</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous"> <link rel="stylesheet" href="/css/styles.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <div class="container"> <div class="row center" style="margin-top: 48px;"> Your logo here </div> <div class="row" style="margin-top: 80px;"> <div class="center"> <h1 class="title">Welcome back</h1> </div> </div> <div class="row" style="margin-top: 15px;"> <div class="col-12 center"> <input type="text" placeholder="Email address"> </div> </div> <div class="row" style="margin-top: 20px;"> <div> <div class="col-12 center"> <button class="continue">Continue</button> </div> </div> </div> <div class="row" style="margin-top: 8px;"> <div> <div class="col-12 center"> <p>Don't have an account? <a href="https://www.web-leb.com/">Sign up</a></p> </div> </div> </div> <div class="row"> <div> <div class="col-12 center"> <hr style="width: 160px; margin-right: 10px;">OR <hr style="width: 160px; margin-left: 10px;"> </div> </div> </div> <div class="row" style="margin-top: 15px;"> <div> <div class="col-12 center"> <div class="col-12 center"> <button class="continue1"><i class="fab fa-google" style="margin-right: 10px; padding-left: 10px;"></i>Continue with Google</button> </div> </div> </div> </div> <div class="row" style="margin-top: 15px;"> <div> <div class="col-12 center"> <div class="col-12 center"> <button class="continue1"><i class="fab fa-microsoft" style="margin-right: 10px; padding-left: 10px;"></i>Continue with Microsoft</button> </div> </div> </div> </div> </div> <footer> <div> <div class="row" style="margin-top: 430px;"> <div> <div class="col-12 center"> <p style="color: #10a37f;">Terms of use | Privacy policy</p> </div> </div> </div> </div> </footer> </body> </html>
styles.css
Copy
body{ height: 100vh; overflow: hidden; } .center{ display: flex; align-items: center; justify-content: center; } .title{ font-weight: 700; height: 52px; font-size: 35px; font-family: "ColfaxAI",-apple-system,BlinkMacSystemFont,Helvetica,sans-serif; } input{ width:350px; height: 58px; outline: none; padding-left: 18px; } input::placeholder{ font-size: 19px; } .continue{ width: 350px; height: 58px; background: #2410a3; color:white; border: none; font-size: 19px; border-radius: 3px; } a{ text-decoration: none; color:#2410a3; } .continue1{ width: 350px; height: 58px; background: white; color:black; font-size: 19px; border-width: thin; text-align: left; border-color: #10a37f!important; }
main.js
Copy
Nothing to copy
