From 04555417e9b89b6f031ac2bf1cd00c51f6b78675 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ricardo=20D=C3=ADaz=20N=C3=BA=C3=B1ez?= Date: Sat, 2 Mar 2024 19:41:31 +0100 Subject: [PATCH 1/4] Add nav.css --- src/main/resources/static/css/nav.css | 60 +++++++++++++++++++ .../resources/templates/fragments/head.html | 1 + 2 files changed, 61 insertions(+) create mode 100644 src/main/resources/static/css/nav.css diff --git a/src/main/resources/static/css/nav.css b/src/main/resources/static/css/nav.css new file mode 100644 index 00000000..7217c4ee --- /dev/null +++ b/src/main/resources/static/css/nav.css @@ -0,0 +1,60 @@ +/* nav.css */ + +/* Estilo para el menú de navegación */ +.navbar { + background: linear-gradient(45deg, #283048, #586776); /* Gradiente de fondo */ + border-bottom: 1px solid #333; /* Borde inferior */ +} + +/* Estilo para el botón del menú desplegable */ +.navbar-toggler { + border: none; + background-color: transparent; /* Fondo transparente */ +} + +/* Estilo para el ícono del botón del menú desplegable */ +.navbar-toggler-icon { + background-image: url('data:image/svg+xml;charset=utf8,'); /* Ícono blanco */ +} + +/* Estilo para los elementos de la barra de navegación */ +.navbar-nav .nav-link { + color: #fff; /* Texto blanco */ + font-size: 16px; + padding: 0.5rem 1rem; + transition: color 0.3s ease-in-out; +} + +/* Estilo para los elementos de la barra de navegación al pasar el ratón */ +.navbar-nav .nav-link:hover { + color: #ccc; /* Texto gris claro al pasar el ratón */ +} + +/* Estilo para los menús desplegables */ +.dropdown-menu { + background-color: #1a1a1a; /* Color de fondo más oscuro */ +} + +/* Estilo para los elementos dentro de los menús desplegables */ +.dropdown-item { + color: #fff; /* Texto blanco */ + transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; +} + +/* Estilo para los elementos dentro de los menús desplegables al pasar el ratón */ +.dropdown-item:hover { + background-color: #333; /* Fondo más oscuro al pasar el ratón */ +} + +/* Animación para los menús desplegables */ +.dropdown-menu { + display: none; + opacity: 0; + transition: opacity 0.3s ease-in-out; +} + +.dropdown:hover .dropdown-menu { + display: block; + opacity: 1; +} + diff --git a/src/main/resources/templates/fragments/head.html b/src/main/resources/templates/fragments/head.html index e977c69e..ba666476 100644 --- a/src/main/resources/templates/fragments/head.html +++ b/src/main/resources/templates/fragments/head.html @@ -15,5 +15,6 @@ + From cbc78c6a41c6eedd77f7463c681638eceb385fe5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ricardo=20D=C3=ADaz=20N=C3=BA=C3=B1ez?= Date: Sat, 2 Mar 2024 20:00:03 +0100 Subject: [PATCH 2/4] Add fotter.css --- src/main/resources/static/css/footer.css | 26 +++++++++++++++++++ src/main/resources/static/css/style.css | 5 ++++ .../resources/templates/fragments/head.html | 3 ++- 3 files changed, 33 insertions(+), 1 deletion(-) create mode 100644 src/main/resources/static/css/footer.css create mode 100644 src/main/resources/static/css/style.css diff --git a/src/main/resources/static/css/footer.css b/src/main/resources/static/css/footer.css new file mode 100644 index 00000000..de408628 --- /dev/null +++ b/src/main/resources/static/css/footer.css @@ -0,0 +1,26 @@ +/* footer.css */ + +/* Estilo para el pie de página */ +.footer { + position: absolute; + bottom: 0; + width: 100%; + height: 60px; + margin: 0; /* Eliminar margen */ + background: linear-gradient(45deg, #283048, #586776); /* Gradiente de fondo */ + color: #fff; /* Texto blanco */ + padding: 0; /* Eliminar relleno */ + text-align: center; /* Alineación del texto */ + display: flex; /* Usar flexbox para centrar verticalmente */ + align-items: center; /* Centrar verticalmente */ +} + +/* Estilo para el texto del pie de página */ +.footer .container { + max-width: 960px; /* Ancho máximo del contenido */ + margin: 0 auto; /* Centrar el contenido */ +} + +.bg-primary { + background-color: transparent !important; +} diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css new file mode 100644 index 00000000..cc180c67 --- /dev/null +++ b/src/main/resources/static/css/style.css @@ -0,0 +1,5 @@ +/* Sticky footer styles-------------------------------------------------- */ +html { + position: relative; + min-height: 100%; +} \ No newline at end of file diff --git a/src/main/resources/templates/fragments/head.html b/src/main/resources/templates/fragments/head.html index ba666476..f870e837 100644 --- a/src/main/resources/templates/fragments/head.html +++ b/src/main/resources/templates/fragments/head.html @@ -14,7 +14,8 @@ - + + From ec70273fd9f60f5e1e2a81563e27903cab91dd18 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ricardo=20D=C3=ADaz=20N=C3=BA=C3=B1ez?= Date: Sat, 2 Mar 2024 20:26:28 +0100 Subject: [PATCH 3/4] Delete nav border --- src/main/resources/static/css/nav.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main/resources/static/css/nav.css b/src/main/resources/static/css/nav.css index 7217c4ee..96983c07 100644 --- a/src/main/resources/static/css/nav.css +++ b/src/main/resources/static/css/nav.css @@ -3,7 +3,7 @@ /* Estilo para el menú de navegación */ .navbar { background: linear-gradient(45deg, #283048, #586776); /* Gradiente de fondo */ - border-bottom: 1px solid #333; /* Borde inferior */ + /* border-bottom: 1px solid #333; /* Borde inferior */ } /* Estilo para el botón del menú desplegable */ From 8610fc547006a0ce873f2d982d3348aa3ecdabcd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ricardo=20D=C3=ADaz=20N=C3=BA=C3=B1ez?= Date: Sat, 2 Mar 2024 20:42:06 +0100 Subject: [PATCH 4/4] Add style.css --- src/main/resources/static/css/style.css | 58 ++++++++++++++++++++++++- 1 file changed, 57 insertions(+), 1 deletion(-) diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css index cc180c67..4b741f5a 100644 --- a/src/main/resources/static/css/style.css +++ b/src/main/resources/static/css/style.css @@ -2,4 +2,60 @@ html { position: relative; min-height: 100%; -} \ No newline at end of file +} + +/* style.css */ + +/* Estilo para el contenedor principal */ +.container { + max-width: 960px; /* Ancho máximo del contenido */ + margin: 50px auto; /* Centrar el contenido y agregar un margen superior e inferior */ +} + +/* Estilo para los títulos */ +h2 { + color: #283048; /* Color de texto azul oscuro */ +} + +/* Estilo para los títulos */ +h3 { + color: #283048; /* Color de texto azul oscuro */ +} + +/* Estilo para las etiquetas 'span' dentro de los párrafos */ +p span { + font-weight: bold; /* Texto en negrita */ +} + +/* Estilo para los campos de entrada */ +.form-control { + border: 1px solid #ced4da; /* Borde gris */ + border-radius: 4px; /* Borde redondeado */ + padding: 10px; /* Agregar relleno */ +} + +/* Estilo para los labels */ +.control-label { + color: #283048; /* Color de texto azul oscuro */ +} + +/* Estilo para los mensajes de error */ +.text-danger { + color: #721c24; /* Color de texto rojo oscuro */ +} + +/* Estilo para el botón de envío */ +.btn-primary { + background-color: #283048; /* Color de fondo azul oscuro */ + border-color: #283048; /* Color del borde */ + color: #fff; /* Texto blanco */ + padding: 10px 20px; /* Agregar relleno */ + border-radius: 4px; /* Borde redondeado */ + cursor: pointer; /* Cambiar el cursor al pasar el ratón */ +} + +/* Estilo para el botón de envío al pasar el ratón */ +.btn-primary:hover { + background-color: #1c2530; /* Color de fondo azul más oscuro */ + border-color: #1c2530; /* Color del borde más oscuro */ +}