From 19011dae38db5371e641ab8503c219c1c32dd374 Mon Sep 17 00:00:00 2001 From: Lil-Carpi Date: Tue, 25 Nov 2025 22:24:22 +0100 Subject: [PATCH] =?UTF-8?q?Cambio=20de=20fichero=20css=20con=20poco=20orde?= =?UTF-8?q?n=20por=20uno=20limpio=20para=20volver=20a=20empezar=20y=20a?= =?UTF-8?q?=C3=B1adir=20estructura.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- projecte-final/main/assets/css/oldstyle.css | 342 +++++++++++++++++++ projecte-final/main/assets/css/style.css | 348 ++------------------ 2 files changed, 365 insertions(+), 325 deletions(-) create mode 100644 projecte-final/main/assets/css/oldstyle.css diff --git a/projecte-final/main/assets/css/oldstyle.css b/projecte-final/main/assets/css/oldstyle.css new file mode 100644 index 0000000..f3c124b --- /dev/null +++ b/projecte-final/main/assets/css/oldstyle.css @@ -0,0 +1,342 @@ + +/*=============INICIO DE ESTILOS DE PLANTILLA==============*/ + +/*Reset básico: Eliminacion del padding y evita que el tamaño crezca por máargenes internos*/ +* +{ + padding: 0; + margin: 0; + box-sizing: border-box; + list-style: none; + text-decoration: none; +} + +/*Estilo básico del cuerpo*/ +body +{ + font-family: 'Manjari', sans-serif; + background: linear-gradient(135deg, #0f172a, #1e293b); + color: white; + min-height: 100vh; +} + +/*Barra de navegacion fija. Efecto "glassmorphism"*/ +.navbar +{ + position:fixed; + top: 1rem; + left: 1rem; + right: 1rem; + width: calc(100% - 2rem); + padding: 1rem 1.5rem; + border-radius: 20px; + z-index: 100; + + /*Efecto cristal difuminado*/ + background: rgba(255, 255, 255, 0.07); + backdrop-filter: blur(12px) saturate(180%); + -webkit-backdrop-filter: blur(12px) saturate(180%); + border: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); + + display:flex; + justify-content: space-between; + align-items: center; +} + + +/*Estilo del texto e icono del logo*/ +.logoContainer a +{ + color: white; + font-size: 1.125rem; + font-weight: bold; + margin-right: 1rem; + text-decoration: none; +} +/*Aumenta el tamaño del logo en pantallas más grandes*/ +@media (min-width: 768px){ + .logoContainer a + { + font-size: 1.25rem; + } + .navbarLinks + { + display: flex; + justify-content: flex-end; + align-items: center; + margin-right: 1rem; + } + /*Espacio entre items del menú*/ + .navbarLinks li + { + margin-right: 0.5rem; + } +} + +/*Lista de links del menú*/ + +/*En pantallas grandes, la lista se alinea de manera horizontal*/ +@media (min-width: 768px){ + .navbarLinks + { + display: flex; + justify-content: flex-end; + align-items: center; + } +} + +/*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 + { + display: inline-block; + margin-right: 1rem; + } +} + +/*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; + left: 1rem; + right: 1rem; + padding: 1rem; + color: white; + z-index: 50; + border-radius: 20px; + + /*Efecto cristal difuminado*/ + + background: rgba(255, 255, 255, 0.06); + backdrop-filter: blur(20px) saturate(180%); + -webkit-backdrop-filter: blur(20px) saturate(180%); + border: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); + + display: flex; + justify-content: center; + align-items: center; +} + +/*Fila principal del footer (flex)*/ +.footerRow +{ + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +/*Cada columna del footer*/ +.footerLinks +{ + flex: 1 1 200px; + max-width: 300px; +} + +/*Titulos de los bloques del footer*/ +.footerLinks h4 +{ + font-size: 20px; + color: #FFFFFF; + margin-bottom: 25px; + font-weight: 500; + border-bottom: 2px solid #00c3ff; + padding-bottom: 10px; + display: inline-block; +} + +/*Enlaces dentro de las columnas del footer*/ +.footerLinks ul li a +{ + font-size: 18px; + text-decoration: none; + color: #bbbbbb; + display: block; + margin-bottom: 15px; + 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; + min-height: 40px; + width: 40px; + background-color: rgba(255, 255, 255, 0.2); + margin: 0 10px 10px 0; + text-align: center; + line-height: 40px; + border-radius: 50%; + color: #ffffff; + transition: all .5s ease; +} + +.socialLinks a:hover +{ + background-color: #41eb60; +} +/*Footer responsive para moviles*/ +@media(max-width: 991px) { + .footerRow + { + text-align:center; + } + .footerLinks + { + width: 100%; + margin-bottom: 30px; + } +} + +/*Zona de Creative Commons*/ + +.creativeCommons +{ + width: 100%; + text-align: center; + margin-top: 2rem; + font-size: 0.875rem; + color: #bbbbbb; + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + gap: 0.2em; +} + +.creativeCommons a +{ + color: #bbbbbb; + text-decoration: none; + margin: 0 0.2em; + transition: color 0.3s ease; +} + +.creativeCommons a:hover +{ + color: #ffffff; +} + +.creativeCommons img +{ + vertical-align: middle; + max-width: 1em; + max-height: 1em; + margin-left: 0.2em; +} + +/*Espacio para que el contenido no quede oculto por el navbar y el footer*/ + +.content +{ + padding-top: 8rem; + padding-bottom: 12rem; + max-width: 1400px; + margin: 0 auto; + width: 100%; +} + +/*=============FINAL DE ESTILOS DE PLANTILLA==============*/ +/*======================Responsividad=====================*/ +#menu-toggle {display: none;} + +.hamburguer-label +{ + display: none; + font-size:1.5rem; + color: white; + cursor: pointer; +} + +@media (max-width:768px) { + .hamburguer-label { display: block;} + .navbarLinks{ + position: absolute; + top: 80px; + left:0; + right: 0; + display: none; + flex-direction: column; + align-items: center; + gap: 1.5rem; + padding:2rem; + + background: rgba(15, 23, 42, 0.95); + backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 20px; + box-shadow: 0 10px 30px rgba(0,0 ,0 ,0.5) + } + + #menu-toogle:checked ~ .navbarLinks{ + display: flex; + animation: fadeIn 0.4s ease forwards; + } +} + +@keyframes fadeIn { + from { opacity: 0; transform: translateY(-10px); } + to { opacity: 1; transform: translateY(0);} +} + +/*============FINAL DE ESTILOS DE RESPONSIVIDAD===========*/ + + +/*====================Seccion juegos======================*/ +.sectionTitle +{ + text-align: center; + font-size: 2rem; + margin-bottom: 3rem; + color: #00C3FF; + text-transform: uppercase; + letter-spacing: 2px; + text-shadow: 0 0 15px rgba(0, 195, 255, 0.5); +} + +.cardsContainer +{ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2.5rem; + padding: 0 1.5rem; + margin-bottom: 5rem; +} +/*==================Fin seccion juegos====================*/ + + + + + +/*=====================Seccion CTA========================*/ + +/*===================Fin seccion CTA======================*/ + diff --git a/projecte-final/main/assets/css/style.css b/projecte-final/main/assets/css/style.css index 329b045..83c3630 100644 --- a/projecte-final/main/assets/css/style.css +++ b/projecte-final/main/assets/css/style.css @@ -1,337 +1,35 @@ -/*=============INICIO DE ESTILOS DE PLANTILLA==============*/ - -/*Reset básico: Eliminacion del padding y evita que el tamaño crezca por máargenes internos*/ -* +* { - padding: 0; - margin: 0; - box-sizing: border-box; - list-style: none; - text-decoration: none; + padding: 0; + margin: 0; + box-sizing: border-box; + list-style: none; + text-decoration: none; } - -/*Estilo básico del cuerpo*/ body { - font-family: 'Manjari', sans-serif; - background: linear-gradient(135deg, #0f172a, #1e293b); - color: white; - min-height: 100vh; + font-family: 'Manjari', sans-serif; + background-color: linear-gradient(135deg, #0f172a, #1e293b); + color: white; + min-height: 100vh; } -/*Barra de navegacion fija. Efecto "glassmorphism"*/ -.navbar +.content { - position:fixed; - top: 1rem; - left: 1rem; - right: 1rem; - width: calc(100% -2rem); - padding: 1rem 1.5rem; - border-radius: 20px; - 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); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); - - display:flex; - 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; - font-size: 1.125rem; - font-weight: bold; - margin-right: 1rem; - text-decoration: none; -} -/*Aumenta el tamaño del logo en pantallas más grandes*/ -@media (min-width: 768px){ - .logoContainer a - { - font-size: 1.25rem; - } -} - -/*Lista de links del menú*/ -.navbarLinks -{ - list-style: none; - margin-right: 1rem; - padding: 0; - flex-grow: 1; -} -/*En pantallas grandes, la lista se alinea de manera horizontal*/ -@media (min-width: 768px){ - .navbarLinks - { - display: flex; - justify-content: flex-end; - align-items: center; - } -} - -/*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 - { - display: inline-block; - margin-right: 1rem; - } -} - -/*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; - left: 1rem; - right: 1rem; - padding: 1rem; - color: white; - 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%); - border: 1px solid rgba(255, 255, 255, 0.2); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); - - display: flex; - justify-content: center; - align-items: center; -} - -/*Fila principal del footer (flex)*/ -.footerRow -{ - display: flex; - flex-wrap: wrap; - justify-content: center; -} - -/*Cada columna del footer*/ -.footerLinks -{ - flex: 1 1 200px; - max-width: 300px; -} - -/*Titulos de los bloques del footer*/ -.footerLinks h4 -{ - font-size: 20px; - color: #FFFFFF; - margin-bottom: 25px; - font-weight: 500; - border-bottom: 2px solid #00c3ff; - padding-bottom: 10px; - display: inline-block; -} - -/*Enlaces dentro de las columnas del footer*/ -.footerLinks ul li a -{ - font-size: 18px; - text-decoration: none; - color: #bbbbbb; - display: block; - margin-bottom: 15px; - 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; - min-height: 40px; - width: 40px; - background-color: rgba(255, 255, 255, 0.2); - margin: 0 10px 10px 0; - text-align: center; - line-height: 40px; - border-radius: 50%; - color: #ffffff; - transition: all .5s ease; -} - -.socialLinks a:hover -{ - background-color: #41eb60; -} -/*Footer responsive para moviles*/ -@media(max-width: 991px) { - .footerRow - { - text-align:center; - } - .footerLinks - { + padding-top: 8rem; + padding-bottom: 12rem; + max-width: 1400px; + margin: 0 auto; width: 100%; - margin-bottom: 30px; - } } -/*Zona de Creative Commons*/ - -.creativeCommons -{ - width: 100%; - text-align: center; - margin-top: 2rem; - font-size: 0.875rem; - color: #bbbbbb; - display: flex; - justify-content: center; - align-items: center; - flex-wrap: wrap; - gap: 0.2em; -} - -.creativeCommons a -{ - color: #bbbbbb; - text-decoration: none; - margin: 0 0.2em; - transition: color 0.3s ease; -} - -.creativeCommons a:hover -{ - color: #ffffff; -} - -.creativeCommons img -{ - vertical-align: middle; - max-width: 1em; - max-height: 1em; - margin-left: 0.2em; -} - -/*Espacio para que el contenido no quede oculto por el navbar y el footer*/ - -.content -{ - padding-top: 7rem; - padding-bottom: 30rem; - max-width: 1200px; - margin: 0 auto; -} - -/*=============FINAL DE ESTILOS DE PLANTILLA==============*/ -/*======================Responsividad=====================*/ -#menu-toggle {display: none;} - -.hamburguer-label -{ - display: none; - font-size:1.5rem; - color: white; - cursor: pointer; -} - -@media (max-width:768px) { - .hamburguer-label { display: block;} - .navbarLinks{ - position: absolute; - top: 80px; - left:0; - right: 0; - display: none; - flex-direction: column; - align-items: center; - gap: 1.5rem; - padding:2rem; - - background: rgba(15, 23, 42, 0.95); - backdrop-filter: blur(20px); - border: 1px solid rgba(255, 255, 255, 0.2); - border-radius: 20px; - box-shadow: 0 10px 30px rgba(0,0 ,0 ,0.5) - } - - #menu-toogle:checked ~ .navbarLinks{ - display: flex; - animation: fadeIn 0.4s ease forwards; - } -} - -@keyframes fadeIn { - from { opacity: 0; transform: translateY(-10px); } - to { opacity: 1; transform: translateY(0);} -} - -/*============FINAL DE ESTILOS DE RESPONSIVIDAD===========*/ - - -/*====================Seccion juegos======================*/ .sectionTitle { - text-align: center; - font-size: 2rem; - margin-bottom: 3rem; - color: #00C3FF; - text-shadow: 0 0 15px rgba(0, 195, 255, 0.5); -} - -.cardsContainer -{ - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 2.5rem; - padding: 0 1.5rem; - margin-bottom: 5rem; -} -/*==================Fin seccion juegos====================*/ - - - - - -/*=====================Seccion CTA========================*/ - -/*===================Fin seccion CTA======================*/ \ No newline at end of file + text-align: center; + font-size: 2rem; + margin-bottom: 3rem; + color: #00c3ff; + text-transform: uppercase; + letter-spacing: 2px; + text-shadow: 0 0 15px rgba(0, 195, 255, 0.6); +} \ No newline at end of file