WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Formulario de inicio de sesión moderno
8884
webleb
Publica tu código
Recomendado
23 November 2024
Página de inicio - Furniture Inc
28 August 2025
Ejemplo de código HTML de la página de inicio de sesión en turco
26 October 2024
Bot de planes (página de inicio)
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
