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
9066
webleb
Publica tu código
Recomendado
20 June 2025
Tarjetas de enlaces de redes sociales HTML
27 November 2024
Sitio web de portafolio completo
22 June 2025
Plantilla de blog Tailwind CSS: modo oscuro, adaptable
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
