@ -1,50 +0,0 @@ | |||||
*{ | |||||
margin: 0; | |||||
padding: 0; | |||||
} | |||||
.encabezado{ | |||||
background-color: #008A93; | |||||
} | |||||
img{ | |||||
width: 400px; | |||||
} | |||||
.encabezado nav{ | |||||
display: flex; | |||||
justify-content: space-around; | |||||
align-items: center; | |||||
padding: 15px; | |||||
} | |||||
.encabezado nav ul{ | |||||
list-style: none; | |||||
display: flex; | |||||
justify-content: space-between; | |||||
} | |||||
a{ | |||||
text-decoration: none; | |||||
font-size: 25px; | |||||
color: white; | |||||
padding: 12px 20px; | |||||
display: block; | |||||
} | |||||
a:hover{ | |||||
background: rgb(44,44,44); | |||||
} | |||||
.encabezado nav ul li ul{ | |||||
display: flex; | |||||
flex-direction: column; | |||||
} | |||||
.encabezado nav ul li ul{ | |||||
position: absolute; | |||||
background: #008A93; | |||||
} | |||||
.encabezado nav ul li ul li{ | |||||
width: 180px; | |||||
position: relative; | |||||
} | |||||
.encabezado nav ul li ul{ | |||||
display: none; | |||||
} | |||||
.encabezado nav ul li:hover>ul{ | |||||
display: block; | |||||
} |
@ -0,0 +1,10 @@ | |||||
<!DOCTYPE html> | |||||
<html lang="en"> | |||||
<head> | |||||
<meta charset="UTF-8"> | |||||
<title>Title</title> | |||||
</head> | |||||
<body> | |||||
</body> | |||||
</html> |
@ -1,71 +0,0 @@ | |||||
<!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"> | |||||
</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> |
@ -0,0 +1,12 @@ | |||||
<!DOCTYPE html> | |||||
<html lang="en"> | |||||
<head> | |||||
<meta charset="UTF-8"> | |||||
<title>Title</title> | |||||
</head> | |||||
<body> | |||||
<header th:fragment="mimenu"> | |||||
<nav th:replace="header/nav/principal :: menu1"></nav> | |||||
</header> | |||||
</body> | |||||
</html> |
@ -0,0 +1,38 @@ | |||||
<!DOCTYPE html> | |||||
<html lang="en"> | |||||
<head> | |||||
<meta charset="UTF-8"> | |||||
<link rel="stylesheet" th:href="@{/css/css/Estilos.css}"> | |||||
<title></title> | |||||
</head> | |||||
<body> | |||||
<nav th:fragment="menu1"> | |||||
<header class="encabezado"> | |||||
<nav> | |||||
<img src="/css/img/7036beab6be979a346c98c7e2e686aee.png" alt=""> | |||||
<ul> | |||||
<li><a href="#">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> | |||||
</nav> | |||||
</body> | |||||
</html> |
@ -1,38 +0,0 @@ | |||||
<!DOCTYPE html> | |||||
<html lang="en"> | |||||
<head> | |||||
<meta charset="UTF-8"> | |||||
<title>Foro</title> | |||||
<link rel="icon" href="/css/img/7036beab6be979a346c98c7e2e686aee.png"> | |||||
<link rel="stylesheet" th:href="@{/css/css/Estilos.css}"> | |||||
</head> | |||||
<body> | |||||
<header class="encabezado"> | |||||
<nav> | |||||
<img src="/css/img/7036beab6be979a346c98c7e2e686aee.png" alt=""> | |||||
<ul> | |||||
<li><a href="#">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> | |||||
</body> | |||||
</html> |