diff --git a/projecte-final/assets/css/style.css b/projecte-final/assets/css/style.css index 0bb6977..afb7531 100644 --- a/projecte-final/assets/css/style.css +++ b/projecte-final/assets/css/style.css @@ -1,15 +1,20 @@ +/*Reset básico: Eliminacion del padding y evita que el tamaño crezca por máargenes internos*/ * { padding: 0; box-sizing: border-box; list-style: none; } + +/*Estilo básico del cuerpo*/ body { font-family: 'Manjari', sans-serif; background: linear-gradient(135deg, #0f172a, #1e293b); color: white; } + +/*Barra de navegacion fija. Efecto "glassmorphism"*/ .navbar { position:fixed; @@ -22,6 +27,7 @@ body color: white; z-index: 64; + /*Efecto cristal difuminado*/ backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.2); @@ -31,12 +37,15 @@ body justify-content: space-between; align-items: center; } + +/*Contenedor del logo*/ .logoContainer { display: flex; justify-content: center; } +/*Estilo del texto e icono del logo*/ .logoContainer a { color: white; @@ -45,6 +54,7 @@ body margin-right: 1rem; text-decoration: none; } +/*Aumenta el tamaño del logo en pantallas más grandes*/ @media (min-width: 768px){ .logoContainer a { @@ -52,6 +62,7 @@ body } } +/*Lista de links del menú*/ .navbarLinks { list-style: none; @@ -59,6 +70,7 @@ body padding: 0; flex-grow: 1; } +/*En pantallas grandes, la lista se alinea de manera horizontal*/ @media (min-width: 768px){ .navbarLinks { @@ -68,11 +80,12 @@ body } } - +/*Espacio entre items del menú*/ .navbarLinks li { margin-right: 0.5rem; } +/*En pantallas grandes, los items se muestran en línea con más espacio*/ @media (min-width: 768px) { .navbarLinks li { @@ -81,18 +94,22 @@ body } } +/*Estilos de enlaces del navbar*/ .navbarLinks a { text-decoration: none; color: white; } +/*Contenedor general centrado*/ .container { max-width: 1200px; margin: 0 auto; } + +/*Estilos del footer. Estilo glassmorphism*/ .footer { bottom: 1rem; @@ -103,6 +120,8 @@ body z-index: 50; border-radius: 20px; + /*Efecto cristal difuminado*/ + background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); @@ -114,18 +133,21 @@ body align-items: center; } +/*Fila principal del footer (flex)*/ .footerRow { display: flex; flex-wrap: wrap; } +/*Cada columna del footer*/ .footerLinks { width: 25%; padding: 0 15px; } +/*Titulos de los bloques del footer*/ .footerLinks h4 { font-size: 20px; @@ -137,6 +159,7 @@ body display: inline-block; } +/*Enlaces dentro de las columnas del footer*/ .footerLinks ul li a { font-size: 18px; @@ -147,12 +170,14 @@ body transition: all .3s ease; } +/*Hover del footer*/ .footerLinks ul li a:hover { color:#ffffff; padding-left: 6px; } +/*Iconos redondos de redes sociales*/ .socialLinks a { display: inline-block; @@ -171,7 +196,7 @@ body { background-color: #00C3FF } - +/*Footer responsive para moviles*/ @media(max-width: 991px) { .footerRow { @@ -184,6 +209,8 @@ body } } +/*Zona de Creative Commons*/ + .creativeCommons { width: 100%; @@ -219,6 +246,7 @@ body margin-left: 0.2em; } +/*Espacio para que el contenido no quede oculto por el navbar y el footer*/ .content { padding-top: 7rem;