Tobal
/
SpringBoot-Foro
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

Login cambiado

master
Cristobal Bernal Mayordomo 1 year ago
parent
67306d0354
commit
8a918aa91b
6 changed files with 230 additions and 110 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +0
    -17
      src/main/resources/static/css/css/Anuncio.css
  2. +174
    -0
      src/main/resources/static/css/css/loginstyle.css
  3. BIN
      src/main/resources/static/css/img/listingsignupbar-orbit-1.png
  4. +30
    -64
      src/main/resources/templates/backend/login.html
  5. +1
    -4
      src/main/resources/templates/bienvenida/bienvenida.html
  6. +25
    -25
      src/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>
<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}">
</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>
</form>
</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>
</html>
</html>

+ 1
- 4
src/main/resources/templates/bienvenida/bienvenida.html View File

@ -3,13 +3,10 @@
<head>
<meta charset="UTF-8">
<title>PaginaBienvenida</title>
<link rel="stylesheet" href="../../static/css/css/Anuncio.css">
</head>
<body>
<nav th:fragment="anuncio">
<div class="contenedor">
<div class="caja caja1">Caja1</div>
</div>
</nav>
</body>
</html>

+ 25
- 25
src/main/resources/templates/header/nav/principal.html View File

@ -7,32 +7,32 @@
</head>
<body>
<nav th:fragment="menu1">
<header class="encabezado">
<nav>
<img src="/css/img/7036beab6be979a346c98c7e2e686aee.png" alt="">
<ul>
<li><a href="/home">Home</a></li>
<li><a href="#">Novedades</a>
<ul>
<li><a href="#">SubItem</a></li>
<li><a href="#">SubItem</a></li>
<li><a href="#">SubItem</a></li>
</ul>
</li>
<li>
<a href="#">Recursos</a>
<ul>
<li><a href="#">SubItem</a></li>
<li><a href="#">SubItem</a></li>
<li><a href="#">SubItem</a></li>
</ul>
</li>
<li><a href="/entrar">Acceder</a></li>
<li><a href="#">Registrarse</a></li>
<header class="encabezado">
<nav>
<img src="/css/img/7036beab6be979a346c98c7e2e686aee.png" alt="">
<ul>
<li><a href="/home">Home</a></li>
<li><a href="#">Novedades</a>
<ul>
<li><a href="#">SubItem</a></li>
<li><a href="#">SubItem</a></li>
<li><a href="#">SubItem</a></li>
</ul>
</li>
<li>
<a href="#">Recursos</a>
<ul>
<li><a href="#">SubItem</a></li>
<li><a href="#">SubItem</a></li>
<li><a href="#">SubItem</a></li>
</ul>
</li>
<li><a href="/entrar">Acceder</a></li>
<li><a href="#">Registrarse</a></li>
</ul>
</nav>
</header>
</ul>
</nav>
</header>
</nav>
</body>
</html>

Write Preview
Loading…
Cancel
Save