| @ -0,0 +1,73 @@ | |||
| <!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd"> | |||
| <html lang="es" | |||
| xmlns="http://www.w3.org/1999/xhtml" | |||
| xmlns:th="http://www.thymeleaf.org"> | |||
| <head> | |||
| <meta charset="utf-8"> | |||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |||
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |||
| <title th:text="${titulo}">Título de la página</title> | |||
| <meta name="description" content=""> | |||
| <link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet"> | |||
| <link href="/webjars/font-awesome/css/all.css" rel="stylesheet"> | |||
| <link href="/css/login.css" rel="stylesheet"> | |||
| </head> | |||
| <body > | |||
| <section class="login-block"> | |||
| <section class="vh-100"> | |||
| <div class="container py-5 h-100"> | |||
| <div class="row d-flex align-items-center justify-content-center h-100"> | |||
| <div class="col-md-8 col-lg-7 col-xl-6"> | |||
| <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/draw2.svg" | |||
| class="img-fluid" alt="Phone image"> | |||
| </div> | |||
| <div class="col-md-7 col-lg-5 col-xl-5 offset-xl-1"> | |||
| <form> | |||
| <!-- Email input --> | |||
| <div class="form-outline mb-4"> | |||
| <input type="email" id="form1Example13" class="form-control form-control-lg" /> | |||
| <label class="form-label" for="form1Example13">Email address</label> | |||
| </div> | |||
| <!-- Password input --> | |||
| <div class="form-outline mb-4"> | |||
| <input type="password" id="form1Example23" class="form-control form-control-lg" /> | |||
| <label class="form-label" for="form1Example23">Password</label> | |||
| </div> | |||
| <div class="d-flex justify-content-around align-items-center mb-4"> | |||
| <!-- Checkbox --> | |||
| <div class="form-check"> | |||
| <input class="form-check-input" type="checkbox" value="" id="form1Example3" checked /> | |||
| <label class="form-check-label" for="form1Example3"> Remember me </label> | |||
| </div> | |||
| <a href="#!">Forgot password?</a> | |||
| </div> | |||
| <!-- Submit button --> | |||
| <button type="submit" class="btn btn-primary btn-lg btn-block">Sign in</button> | |||
| <div class="divider d-flex align-items-center my-4"> | |||
| <p class="text-center fw-bold mx-3 mb-0 text-muted">OR</p> | |||
| </div> | |||
| <a class="btn btn-primary btn-lg btn-block" style="background-color: #3b5998" href="#!" | |||
| role="button"> | |||
| <i class="fab fa-facebook-f me-2"></i>Continue with Facebook | |||
| </a> | |||
| <a class="btn btn-primary btn-lg btn-block" style="background-color: #55acee" href="#!" | |||
| role="button"> | |||
| <i class="fab fa-twitter me-2"></i>Continue with Twitter</a> | |||
| </form> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </section> | |||
| </section> | |||
| <script src="webjars/jsquery/jquery.min.js"></script> | |||
| <script src="webjars/bootstrap/js/bootstrap.bundle.min.js"></script> | |||
| </body> | |||
| </html> | |||