Блог

 /*===== VARIABLES CSS =====*/ :root{  /*===== Colores =====*/  --first-color: #1A73E8;  --input-color: #80868B;  --border-color: #DADCE0;   /*===== Fuente y tipografia =====*/  --normal-font-size: 1rem;  --small-font-size: .75rem; }  body{ background: #4b4b4b; } html {  height: 100%; } .container {  min-height: 100%; } /*@media (max-width: 600px) {  .container {  width: 50%;  } }*/  .navbar-brand img {  width: 30%; } /*@media (max-width: 600px) {  .navbar-brand {  width: 50%;  } }*/ .custom-file {  color: blue; } /*La caja de alerta */ .alerta {  padding: 20px;  background-color: hsl(54, 100%, 56%); /* Amarillo */  color: rgb(0, 0, 0);  margin-bottom: 15px;  box-shadow: 0px 0px 20px 10px rgba(241, 255, 39, 0.315);  }  .alertaroja {  padding: 20px;  background-color: hsl(0, 100%, 56%); /* Rojo */  color: rgb(0, 0, 0);  margin-bottom: 15px;  box-shadow: 0px 0px 20px 10px rgba(255, 39, 39, 0.315);  }   /* La cruz de cerrar */  .closebtn {  margin-left: 15px;  color: rgb(0, 0, 0);  font-weight: bold;  float: right;  font-size: 32px;  line-height: 20px;  cursor: pointer;  transition: 0,3s;  }  .closebtn1 {  margin-left: 15px;  color: rgb(0, 0, 0);  font-weight: bold;  float: right;  font-size: 32px;  line-height: 20px;  cursor: pointer;  transition: 0,3s;  }  .closebtn:hover {  color: rgb(229, 255, 0);  }  .closebtn1:hover {  color: rgb(88, 88, 88);  }  /*Login*/  .or {  padding: 24px 0;  }  .or-line {  text-align: center;  font-weight: var(--bold);  border-top: 3px solid #f0f0f0;;  }  .or-or {  margin-top: -12px;  text-align: center;  }  .or-or span {  line-height: 22px;  font-size: 18px;  font-weight: var(--bold);  background: #212529;  padding: 0 6px; }  .create {  padding: 0 0 12px;  }  .btnj:not(.btn-invisible) {  color: #f0f0f0;  }  .btn-huge {  padding: 20px 30px 20px 18px;  font-size: 28px;  }  .btn-main {  background-color: #2b87d3;  }  .btn-block {  width: 100%;  text-align: center;  }  .btn-block {  width: 100%;  text-align: center;  }  .btn-block {  width: 100%;  text-align: center;  }  .btn {  border-radius: 2px;  font-weight: var(--bold,700);  padding: 8px 15px 8px 10px;  font-size: 18px;  margin: 10px 8px 10px 0;  display: inline-block;  transition: background .05s;  cursor: pointer;  white-space: nowrap;  } /* Dropdown Button */ .dropbtn {  background-color: #04AA6D;  color: white;  padding: 16px;  font-size: 16px;  border: none; }  /* The container lt;divgt; - needed to position the dropdown content */ /*.dropdown {  position: relative;  display: inline-block; } */  /* Dropdown Content (Hidden by Default) */ .dropdown-content {  display: none;  position: absolute;  background-color: #f1f1f1;  min-width: 160px;  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  z-index: 1; }  /* Links inside the dropdown */ .dropdown-content a {  color: black;  padding: 12px 16px;  text-decoration: none;  display: block; }  /* Change color of dropdown links on hover */ .dropdown-content a:hover {background-color: #ddd;}  /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content {display: block;}  /* Change the background color of the dropdown button when the dropdown content is shown */ .dropdown:hover .dropbtn {background-color: #3e8e41;}   /*===== BASE =====*/ *,::before,::after{  box-sizing: border-box; }   /*===== FORM =====*/ .l-form{  display: flex;  justify-content: center;  align-items: center;  height: 40vh; } .l2-form{  display: flex;  justify-content: center;  align-items: center;  height: 53vh; } .form{  width: 360px;  padding: 4rem 2rem;  border-radius: 1rem; } .form__title{  font-weight: 400;  margin-bottom: 3rem; } .form__div{  position: relative;  height: 48px;  margin-bottom: 1.5rem; } .input__icon {  color: var(--first-color);  cursor: pointer; } .form__input{  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  font-size: var(--normal-font-size);  border: 1px solid var(--border-color);  border-radius: .5rem;  outline: none;  padding: 1rem;  background: none;  z-index: 1;  color: #f0f0f0; } .form__label{  position: absolute;  left: 1rem;  top: 1rem;  padding: 0 .25rem;  background-color: var(--bs-dark-rgb);  color: var(--input-color);  font-size: var(--normal-font-size);  transition: .3s; } .form__button{  display: block;  margin-left: auto;  padding: .75rem 2rem;  outline: none;  background-color: transparent;  color: #fff;  font-size: var(--normal-font-size);  border-radius: .5rem;  cursor: pointer;  transition: .3s; } .form__button:hover{  box-shadow: 0 10px 36px rgba(0,0,0,.15); }  /*Input focus mover arriba label*/ .form__input:focus   .form__label{  top: -.5rem;  left: .8rem;  color: var(--first-color);  font-size: var(--small-font-size);  font-weight: 500;  z-index: 10;  background-color: #212529; }  /*Input focus mantener arriba label*/ .form__input:not(:placeholder-shown).form__input:not(:focus)  .form__label{  top: -.5rem;  left: .8rem;  font-size: var(--small-font-size);  font-weight: 500;  z-index: 10;  background-color: #212529; }  /*Input focus*/ .form__input:focus{  border: 1.5px solid var(--first-color); }  .bx2 {  font-family: boxicons!important;  font-weight: 400;  font-style: normal;  font-variant: normal;  /*line-height: 3.5;*/  text-rendering: auto;  /*display: inline-block;*/  text-transform: none;  -webkit-font-smoothing: antialiased;  position: absolute;  /* right: 23px; */  left: 19rem;  top: 0.80rem;  -moz-osx-font-smoothing: grayscale; } /*====================================================================================*/  .box2 img {  object-fit: fill; }  .img-thumbnail2 {  /* padding: .25rem; */  /* background-color: #fff; */  /* border: 1px solid #dee2e6; */  /* border-radius: .25rem; */  max-width: 100%;  height: auto; } 

 lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;meta name="viewport" content="width=device-width,initial-scale=1"/gt; lt;headgt;  lt;meta charset="UTF-8"gt;  lt;meta http-equiv="X-UA-Compatible" content="IE=edge"gt;  lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt;  lt;titlegt;Libreratelt;/titlegt;  lt;script src="https://kit.fontawesome.com/4bf3747c2b.js" crossorigin="anonymous"gt;lt;/scriptgt;  lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"gt;  lt;link rel="stylesheet" href="/public/css/styles.css"gt;  lt;link rel="stylesheet" href="/public/css/boton.css"gt;  lt;link rel="stylesheet" href="/public/css/fotousuario.css"gt;  lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css"gt; lt;/headgt; lt;bodygt; lt;!--La barra de botones y logo--gt; lt;nav class="navbar navbar-dark bg-dark"gt;  lt;div class="container" weight="1800px"gt;  lt;a href="/" class="navbar-brand"gt;  lt;img src="/public/img/logo.png" alt="App"gt;  lt;/agt;   lt;div class="create"gt;  lt;a class="create-btn btn btn-main btn-huge btn-no-margin btn-block btnj" href="#uploads" data-bs-toggle="modal" data-bs-target="#uploads"gt;lt;i class="fas fa-upload"gt;lt;/igt; Subir Imagenlt;/agt;  lt;/divgt;  lt;div class="create"gt;  lt;a class="create-btn btn btn-main btn-huge btn-no-margin btn-block btnj" href="#signin" data-bs-toggle="modal" data-bs-target="#signin"gt;lt;i class='bx bx-log-in-circle'gt;lt;/igt; Login Inlt;/agt;  lt;/divgt;  lt;div class="create"gt;  lt;a class="botonimagen btn btn-main btn-huge btn-no-margin btn-block btnj" href="/users/logo"gt;lt;/agt;  lt;/divgt;  lt;/divgt;  lt;!--Uploads Modal (ventana emergente)--gt;  lt;div class="modal fade" id="uploads" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"gt;  lt;div class="modal-dialog bg-dark"gt;  lt;div class="modal-content bg-dark"gt;  lt;div class="modal-header bg-dark"gt;  lt;h5 class="modal-title bg-dark" id="exampleModalLabel"gt;Modal titlelt;/h5gt;  lt;button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"gt;lt;/buttongt;  lt;/divgt;  lt;div class="modal-body"gt;  lt;div class="card text-white bg-dark mb-3" style="max-width: 80rem;"gt;  lt;h3 style="color:#ffffff" class="card-header"gt;lt;i class="far fa-image"gt;lt;/igt; Sube una fotolt;/h3gt;  lt;div class="card-body"gt;  lt;form action="/images" method="POST" enctype="multipart/form-data"gt;  lt;div class="form-group"gt;  lt;div class="form-label mt-4"gt;  lt;div class="input"gt;  lt;div class="custom-file" style="weight:20px"gt;  lt;input type="file" name="image" class="btn btn-outline-light"id="inputGroup"aria-describedby="inputGroupFileAddon" requiredgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;brgt;  lt;div class="form-group"gt;  lt;input type="text" name="username" class="form-control" placeholder="Nombre de Usuario" requiredgt;  lt;/divgt;  lt;brgt;  lt;div class="form-group"gt;  lt;input type="text" name="title" class="form-control" placeholder="Título para la Imagen" requiredgt;  lt;/divgt;  lt;brgt;  lt;div class="form-group"gt;  lt;textarea name="description" rows="3" class="form-control"  placeholder="Descripción de la imagen"gt;lt;/textareagt;  lt;/divgt;  lt;brgt;  lt;div class="form-group"gt;  lt;button class="btn btn-outline-light"gt;  lt;i class="fa fa-upload"gt;lt;/igt;Subir Imagen  lt;/buttongt;  lt;/divgt;  lt;/formgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;div class="modal-footer"gt;  lt;button type="button" class="btn btn-secondary" data-bs-dismiss="modal"gt;Closelt;/buttongt;  lt;button type="button" class="btn btn-primary"gt;Save changeslt;/buttongt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;!--Sign In Modal (Ventana emergente)--gt;  lt;div class="modal fade" id="signin" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"gt;  lt;div class="modal-dialog bg-dark"gt;  lt;div class="modal-content bg-dark"gt;  lt;div class="modal-header"gt;  lt;h3 style="color:#ffffff" class="card-header"gt;Iniciar sesiónlt;/h3gt;  lt;button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"gt;lt;/buttongt;  lt;/divgt;  lt;div class="modal-body"gt;  lt;div class="card text-white bg-dark mb-3; text-center" style="max-width: 80rem;" gt;  lt;div class="card-body"gt;  lt;div class="l-form"gt;  lt;form action="/users/login" method="POST" class="form"gt;   lt;div class="form__div"gt;  lt;input type="text" class="form__input" placeholder=" " autofocus name="Email"gt;  lt;label for="" class="form__label"gt;Emaillt;/labelgt;  lt;/divgt;   lt;div class="form__div"gt;  lt;input type="password" class="form__input" placeholder=" " name="Password" id="forminput"gt;  lt;label for="" class="form__label"gt;Passwordlt;/labelgt;  lt;i class='bx2 bx-hide input__icon' id="inputicon"gt;lt;/igt;   lt;/divgt;   lt;input type="submit" class="btn form__button btn-outline-light" value="Iniciar sesión"gt;  lt;/formgt;  lt;/divgt;  lt;br/gt;  lt;div class="or"gt;  lt;div class="or-line"gt;lt;/divgt;  lt;div class="or-or"gt;  lt;spangt;Olt;/spangt;  lt;/divgt;  lt;/divgt;  lt;h5gt;¿No tienes una cuenta?lt;/h5gt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;div class="modal-footer"gt;  lt;centergt;  lt;div class="create"gt;  lt;a class="create-btn btn btn-main btn-huge btn-no-margin btn-block btnj" href="#signup" data-bs-toggle="modal" data-bs-target="#signup"gt;lt;i class="fas fa-user-plus"gt;lt;/igt; Registratelt;/agt;  lt;/divgt;  lt;/centergt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;!--Register Modal (Ventana emergente)--gt;  lt;!----gt;lt;div class="modal fade" id="signup" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"gt;  lt;div class="modal-dialog bg-dark"gt;  lt;div class="modal-content bg-dark"gt;  lt;div class="modal-header"gt;  lt;h3 style="color:#ffffff" class="card-header"gt;Registrarselt;/h3gt;  lt;button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"gt;lt;/buttongt;  lt;/divgt;  lt;div class="modal-body"gt;  lt;div class="card text-white bg-dark mb-3; text-center" style="max-width: 80rem;" gt;  lt;div class="card-body"gt;  lt;div class="l2-form"gt;  lt;form action="/users/signup" method="POST" class="form"gt;   lt;div class="form__div"gt;  lt;input type="text" class="form__input" placeholder=" " autofocus name="Username" value="{{Username}}"gt;  lt;label for="" class="form__label"gt;Usuariolt;/labelgt;  lt;/divgt;   lt;div class="form__div"gt;  lt;input type="email" class="form__input" placeholder=" " name="Email" value="{{Email}}"gt;  lt;label for="" class="form__label"gt;Emaillt;/labelgt;  lt;/divgt;   lt;div class="form__div"gt;  lt;input type="password" class="form__input" placeholder=" " name="Password" value="{{Password}}" id="forminput1"gt;  lt;label for="" class="form__label"gt;Passwordlt;/labelgt;  lt;i class='bx2 bx-hide input__icon' id="inputicon"gt;lt;/igt;   lt;/divgt;   lt;div class="form__div"gt;  lt;input type="password" class="form__input" placeholder=" " name="confirmPassword" value="{{confirmPassword}}" id="forminput2"gt;  lt;label for="" class="form__label"gt;Passwordlt;/labelgt;  lt;i class='bx2 bx-hide input__icon' id="inputicon"gt;lt;/igt;   lt;/divgt;   lt;input type="submit" class="btn form__button btn-outline-light" value="Registrarse"gt;  lt;/formgt;  lt;/divgt;  lt;br/gt;  lt;div class="or"gt;  lt;div class="or-line"gt;lt;/divgt;  lt;div class="or-or"gt;  lt;spangt;Olt;/spangt;  lt;h3gt;¿Ya tienes una cuenta?lt;/h3gt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;div class="modal-footer"gt;  lt;div class="create"gt;  lt;a class="create-btn btn btn-main btn-huge btn-no-margin btn-block btnj" href="#signin" data-bs-toggle="modal" data-bs-target="#signin"gt;lt;i class="fas fa-user-plus"gt;lt;/igt; Inicia Sesiónlt;/agt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;--gt;  lt;/navgt;  lt;div class="container p-4"gt;  lt;div class="col-md-8"gt;  lt;!--aqui es cuando se mete cada pagina--gt;  {{{ body }}}  lt;/divgt;  lt;div class="col-md-4"gt;    lt;/divgt;  lt;/divgt;  lt;/bodygt; lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"gt;lt;/scriptgt; lt;script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7 zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"gt;lt;/scriptgt; lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"gt;lt;/scriptgt; lt;/htmlgt;