arreglando menu y pie

src/main/resources/templates/buscar.html

@@ -47,6 +47,6 @@
     </div>
 </header>
 
-<footer th:replace="foot/javascript :: javascript"></footer>
+<footer th:replace="foot/pie :: pie"></footer>
 </body>
 </html>

src/main/resources/templates/editar_usuario.html

@@ -38,7 +38,7 @@
 
 
 
-<footer th:replace="~{foot/javascript :: javascript}"></footer>
+<footer th:replace="~{foot/pie :: pie}"></footer>
 
 </body>
 </html>

src/main/resources/templates/foot/javascript.html

@@ -1,7 +1,22 @@
-<footer th:fragment="javascript" class="footer fixed-bottom mt-auto py-3 bg-light">
-    <div class="container">
-        <span class="text-muted">Pie de página.</span>
-    </div>
+<footer th:fragment="javascript"
+        class="footer fixed-bottom mt-auto py-1 bg-dark d-flex justify-content-between" style="--bs-bg-opacity: .8;">
+
+        <!-- Left -->
+        <div class="me-1 text-light">
+            <span> © 2023 Copyright by Perico Palotes SL</span>
+        </div>
+        <!-- Left -->
+
+        <!-- Right -->
+        <div>
+            <a href="" class="text-light me-2"><i class="fab fa-facebook-f"></i></a>
+            <a href="" class="text-light me-2"><i class="fab fa-twitter"></i></a>
+            <a href="" class="text-light me-2"><i class="fab fa-google"></i></a>
+            <a href="" class="text-light me-2"><i class="fab fa-instagram"></i></a>
+            <a href="" class="text-light me-2"><i class="fab fa-linkedin"></i></a>
+        </div>
+        <!-- Right -->
+
     <script src="webjars/jsquery/jquery.min.js"></script>
     <script src="webjars/bootstrap/js/bootstrap.bundle.min.js"></script>
 </footer>

src/main/resources/templates/foot/pie.html

@@ -0,0 +1,100 @@
+<footer th:fragment="pie">
+  <!-- Remove the container if you want to extend the Footer to full width. -->
+  <div class="container my-5">
+
+    <footer class="bg-dark text-center text-lg-start text-white">
+      <!-- Grid container -->
+      <div class="container p-4">
+        <!--Grid row-->
+        <div class="row mt-4">
+          <!--Grid column-->
+          <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
+            <h5 class="text-uppercase">See other books</h5>
+
+            <ul class="list-unstyled mb-0">
+              <li>
+                <a href="#!" class="text-white"><i class="fas fa-book fa-fw fa-sm me-2"></i>Bestsellers</a>
+              </li>
+              <li>
+                <a href="#!" class="text-white"><i class="fas fa-book fa-fw fa-sm me-2"></i>All books</a>
+              </li>
+              <li>
+                <a href="#!" class="text-white"><i class="fas fa-user-edit fa-fw fa-sm me-2"></i>Our authors</a>
+              </li>
+            </ul>
+          </div>
+          <!--Grid column-->
+
+          <!--Grid column-->
+          <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
+            <h5 class="text-uppercase">Execution of the contract</h5>
+
+            <ul class="list-unstyled">
+              <li>
+                <a href="#!" class="text-white"><i class="fas fa-shipping-fast fa-fw fa-sm me-2"></i>Supply</a>
+              </li>
+              <li>
+                <a href="#!" class="text-white"><i class="fas fa-backspace fa-fw fa-sm me-2"></i>Returns</a>
+              </li>
+              <li>
+                <a href="#!" class="text-white"><i class="far fa-file-alt fa-fw fa-sm me-2"></i>Regulations</a>
+              </li>
+              <li>
+                <a href="#!" class="text-white"><i class="far fa-file-alt fa-fw fa-sm me-2"></i>Privacy policy</a>
+              </li>
+            </ul>
+          </div>
+          <!--Grid column-->
+
+          <!--Grid column-->
+          <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
+            <h5 class="text-uppercase">Publishing house</h5>
+
+            <ul class="list-unstyled">
+              <li>
+                <a href="#!" class="text-white">The BookStore</a>
+              </li>
+              <li>
+                <a href="#!" class="text-white">123 Street</a>
+              </li>
+              <li>
+                <a href="#!" class="text-white">05765 NY</a>
+              </li>
+              <li>
+                <a href="#!" class="text-white"><i class="fas fa-briefcase fa-fw fa-sm me-2"></i>Send us a book</a>
+              </li>
+            </ul>
+          </div>
+          <!--Grid column-->
+
+          <!--Grid column-->
+          <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
+            <h5 class="text-uppercase">Write to us</h5>
+
+            <ul class="list-unstyled">
+              <li>
+                <a href="#!" class="text-white"><i class="fas fa-at fa-fw fa-sm me-2"></i>Help in purchasing</a>
+              </li>
+              <li>
+                <a href="#!" class="text-white"><i class="fas fa-shipping-fast fa-fw fa-sm me-2"></i>Check the order status</a>
+              </li>
+              <li>
+                <a href="#!" class="text-white"><i class="fas fa-envelope fa-fw fa-sm me-2"></i>Join the newsletter</a>
+              </li>
+            </ul>
+          </div>
+          <!--Grid column-->
+        </div>
+        <!--Grid row-->
+      </div>
+      <!-- Grid container -->
+
+      <!-- Copyright -->
+
+      <!-- Copyright -->
+    </footer>
+
+  </div>
+  <!-- End of .container -->
+  <footer th:replace="foot/javascript :: javascript"></footer>
+</footer>

src/main/resources/templates/head/head.html

@@ -7,6 +7,12 @@
   <link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <link href="/webjars/font-awesome/css/all.css" rel="stylesheet">
   <style>
-    body { padding-bottom: 70px;}
+    body {
+      padding-bottom: 20px;
+    }
+    .navbar {
+      margin-bottom: 20px;
+    }
+
   </style>
 </head>

src/main/resources/templates/inicio.html

@@ -6,6 +6,6 @@
 <body>
 Hola mundo
 <img src="img/que-significa-sonar-que-muerde-perro_98.avif">
-<footer th:replace="foot/javascript :: javascript"></footer>
+<footer th:replace="foot/pie :: pie"></footer>
 </body>
 </html>

src/main/resources/templates/menu/m1.html

@@ -5,9 +5,9 @@
   <meta charset="UTF-8">
 </head>
 <body>
-<nav th:fragment="usuarios" class="navbar navbar-expand-lg bg-light  navbar-light" style="--bs-bg-opacity: .8;">
+<nav th:fragment="usuarios" class="navbar navbar-expand-lg bg-dark  navbar-dark  fixed-top" style="--bs-bg-opacity: .8;">
   <div class="container-fluid">
-    <a class="navbar-brand" href="#"><i class="fa-solid fa-skull-crossbones fa-fade"></i>CRUD Usuario</a>
+    <a class="navbar-brand" href="/"> <i class="fa-solid fa-leaf fa-fade"></i> CRUD Usuario</a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
             data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
             aria-expanded="false" aria-label="Toggle navigation">

src/main/resources/templates/nuevo_usuario.html

@@ -36,7 +36,7 @@
 
 
 
-<footer th:replace="~{foot/javascript :: javascript}"></footer>
+<footer th:replace="~{foot/pie :: pie}"></footer>
 
 </body>
 </html>

src/main/resources/templates/opcionales.html

@@ -8,6 +8,6 @@ Parámetros opcionales:
 <h1 th:text="${a}">aaaaa</h1>
 <h2 th:text="${b}">bbbb</h2>
 <h3 th:text="${c}">cccc</h3>
-<footer th:replace="foot/javascript :: javascript"></footer>
+<footer th:replace="foot/pie :: pie"></footer>
 </body>
 </html>

src/main/resources/templates/parametros.html

@@ -9,6 +9,6 @@ Parámetros:
 <h2 th:text="${b}">bbbb</h2>
 <h3 th:text="${c}">cccc</h3>
 
-<footer th:replace="foot/javascript :: javascript"></footer>
+<footer th:replace="foot/pie :: pie"></footer>
 </body>
 </html>

src/main/resources/templates/usuarios.html

@@ -43,7 +43,7 @@
 </main>
 
 
-<footer th:replace="~{foot/javascript :: javascript}"></footer>
+<footer th:replace="~{foot/pie :: pie}"></footer>
 
 </body>
 </html>