Cristobal Bernal Mayordomo
1 year ago
6 changed files with 230 additions and 110 deletions
Unified View
Diff Options
-
+0 -17src/main/resources/static/css/css/Anuncio.css
-
+174 -0src/main/resources/static/css/css/loginstyle.css
-
BINsrc/main/resources/static/css/img/listingsignupbar-orbit-1.png
-
+30 -64src/main/resources/templates/backend/login.html
-
+1 -4src/main/resources/templates/bienvenida/bienvenida.html
-
+25 -25src/main/resources/templates/header/nav/principal.html
+ 0
- 17
src/main/resources/static/css/css/Anuncio.css
View File
| @ -1,17 +0,0 @@ | |||||
| body{ | |||||
| box-sizing: border-box; | |||||
| margin: 0px; | |||||
| } | |||||
| .contenedor{ | |||||
| display: flex; | |||||
| background-color: blanchedalmond; | |||||
| justify-content: center; | |||||
| height: 100%; | |||||
| } | |||||
| .caja{ | |||||
| width: 300px; | |||||
| height: 100px; | |||||
| } | |||||
| .caja1{ | |||||
| background-color: blanchedalmond; | |||||
| } | |||||
+ 174
- 0
src/main/resources/static/css/css/loginstyle.css
View File
| @ -0,0 +1,174 @@ | |||||
| html { | |||||
| background: #005b61; | |||||
| /* | |||||
| background: radial-gradient(#fff176, #f57f17); | |||||
| min-height: 100%; | |||||
| */ | |||||
| font-family: "Roboto", sans-serif; | |||||
| } | |||||
| .title { | |||||
| text-transform: uppercase; | |||||
| text-align: center; | |||||
| margin-bottom: 30px; | |||||
| color: #005b61; | |||||
| font-weight: 300; | |||||
| font-size: 24px; | |||||
| letter-spacing: 1px; | |||||
| } | |||||
| .description { | |||||
| text-align: center; | |||||
| color: #666; | |||||
| margin-bottom: 30px; | |||||
| } | |||||
| input[type="text"], | |||||
| input[type="email"], | |||||
| input[type="password"], | |||||
| input[type="con-password"] | |||||
| { | |||||
| padding: 10px 20px; | |||||
| border: 1px solid #999; | |||||
| border-radius: 3px; | |||||
| display: block; | |||||
| width: 100%; | |||||
| margin-bottom: 20px; | |||||
| box-sizing: border-box; | |||||
| outline: none; | |||||
| } | |||||
| input[type="text"]:focus, | |||||
| input[type="email"]:focus { | |||||
| border-color: #005b61; | |||||
| } | |||||
| input[type="radio"] { | |||||
| margin-right: 10px; | |||||
| } | |||||
| label { | |||||
| margin-bottom: 20px; | |||||
| display: block; | |||||
| font-size: 18px; | |||||
| color: #666; | |||||
| border-top: 1px solid #ddd; | |||||
| border-bottom: 1px solid #ddd; | |||||
| padding: 20px 0; | |||||
| cursor: pointer; | |||||
| } | |||||
| label:first-child { | |||||
| margin-bottom: 0; | |||||
| border-bottom: none; | |||||
| } | |||||
| .button, | |||||
| .rerun-button { | |||||
| padding: 10px 20px; | |||||
| border-radius: 3px; | |||||
| background: #005b61; | |||||
| color: white; | |||||
| text-transform: uppercase; | |||||
| letter-spacing: 1px; | |||||
| display: inline-block; | |||||
| cursor: pointer; | |||||
| } | |||||
| .button:hover, | |||||
| .rerun-button:hover { | |||||
| background: #005b61; | |||||
| } | |||||
| .button.rerun-button, | |||||
| .rerun-button.rerun-button { | |||||
| border: 1px solid rgba(255, 255, 255, 0.6); | |||||
| margin-bottom: 50px; | |||||
| box-shadow: 0px 10px 15px -6px rgba(0, 0, 0, 0.2); | |||||
| display: none; | |||||
| } | |||||
| .text-center { | |||||
| text-align: center; | |||||
| } | |||||
| .modal-wrap { | |||||
| max-width: 600px; | |||||
| margin: 50px auto; | |||||
| -webkit-transition: -webkit-transform 300ms ease-in-out; | |||||
| transition: -webkit-transform 300ms ease-in-out; | |||||
| transition: transform 300ms ease-in-out; | |||||
| transition: transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out; | |||||
| } | |||||
| .modal-header { | |||||
| height: 45px; | |||||
| background: white; | |||||
| border-bottom: 1px solid #ccc; | |||||
| display: -webkit-box; | |||||
| display: -ms-flexbox; | |||||
| display: flex; | |||||
| -webkit-box-pack: center; | |||||
| -ms-flex-pack: center; | |||||
| justify-content: center; | |||||
| -webkit-box-align: center; | |||||
| -ms-flex-align: center; | |||||
| align-items: center; | |||||
| } | |||||
| .modal-header span { | |||||
| display: block; | |||||
| height: 12px; | |||||
| width: 12px; | |||||
| margin: 5px; | |||||
| border-radius: 50%; | |||||
| background: rgba(0, 0, 0, 0.2); | |||||
| } | |||||
| .modal-header span.is-active { | |||||
| background: rgba(0, 0, 0, 0.4); | |||||
| background: #FF8F00; | |||||
| } | |||||
| .modal-bodies { | |||||
| position: relative; | |||||
| -webkit-perspective: 1000px; | |||||
| perspective: 1000px; | |||||
| } | |||||
| .modal-body { | |||||
| background: white; | |||||
| padding: 40px 100px; | |||||
| box-shadow: 0px 50px 30px -30px rgba(0, 0, 0, 0.3); | |||||
| margin-bottom: 50px; | |||||
| position: absolute; | |||||
| top: 0; | |||||
| display: none; | |||||
| box-sizing: border-box; | |||||
| width: 100%; | |||||
| -webkit-transform-origin: top left; | |||||
| transform-origin: top left; | |||||
| } | |||||
| .modal-body.is-showing { | |||||
| display: block; | |||||
| } | |||||
| .sign-in28912 a{ | |||||
| text-decoration: none; | |||||
| } | |||||
| .btn-primary3838{ | |||||
| padding: 10px 20px; | |||||
| border-radius: 3px; | |||||
| background: #3071A9; | |||||
| color: white; | |||||
| text-transform: uppercase; | |||||
| letter-spacing: 1px; | |||||
| display: inline-block; | |||||
| cursor: pointer; | |||||
| } | |||||
| .btn-danger37883{ | |||||
| padding: 10px 20px; | |||||
| border-radius: 3px; | |||||
| background: #CF4539; | |||||
| color: white; | |||||
| text-transform: uppercase; | |||||
| letter-spacing: 1px; | |||||
| display: inline-block; | |||||
| cursor: pointer; | |||||
| margin-bottom: 20px; | |||||
| } | |||||
BIN
src/main/resources/static/css/img/listingsignupbar-orbit-1.png
View File
| Before | After |
|---|---|
|
|
| Width: 1800 | Height: 120 | Size: 122 KiB |
+ 30
- 64
src/main/resources/templates/backend/login.html
View File
| @ -1,71 +1,37 @@ | |||||
| <!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"> | |||||
| <!DOCTYPE html> | |||||
| <html > | |||||
| <head> | <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"> | |||||
| <meta charset="UTF-8"> | |||||
| <meta name="title" content="Ask online Form"> | |||||
| <meta name="description" content="The Ask is a bootstrap design help desk, support forum website template coded and designed with bootstrap Design, Bootstrap, HTML5 and CSS. Ask ideal for wiki sites, knowledge base sites, support forum sites"> | |||||
| <meta name="keywords" content="HTML, CSS, JavaScript,Bootstrap,js,Forum,webstagram ,webdesign ,website ,web ,webdesigner ,webdevelopment"> | |||||
| <meta name="robots" content="index, nofollow"> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <meta name="language" content="English"> | |||||
| <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet"> | |||||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> | |||||
| <link rel="stylesheet" th:href="@{/css/css/loginstyle.css}"> | |||||
| <link rel="stylesheet" th:href="@{/css/css/Estilos.css}"> | <link rel="stylesheet" th:href="@{/css/css/Estilos.css}"> | ||||
| </head> | </head> | ||||
| <body > | |||||
| <header th:replace="header/nav :: mimenu"></header> | |||||
| <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> | |||||
| <body> | |||||
| <header th:replace="header/nav :: mimenu"></header> | |||||
| <div class="modal-wrap"> | |||||
| <div class="modal-bodies"> | |||||
| <div class="modal-body modal-body-step-1 is-showing"> | |||||
| <div class="title">Log In</div> | |||||
| <div class="description">Bienvenido a ForoGruas, Log In</div> | |||||
| <form> | |||||
| <input type="text" placeholder="Name"/> | |||||
| <input type="email" placeholder="Email"/> | |||||
| <div class="text-center"> | |||||
| <div class="button">LOG IN</div> | |||||
| <a href="signup.html"><div class="button">Create an account</div></a> | |||||
| </div> | </div> | ||||
| </div> | |||||
| </form> | |||||
| </div> | </div> | ||||
| </section> | |||||
| </section> | |||||
| <script src="webjars/jsquery/jquery.min.js"></script> | |||||
| <script src="webjars/bootstrap/js/bootstrap.bundle.min.js"></script> | |||||
| </div> | |||||
| </div> | |||||
| <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> | |||||
| </body> | </body> | ||||
| </html> | |||||
| </html> | |||||