From 9c6d75e8ca97fc3fa7282a476c120304ba543a5b Mon Sep 17 00:00:00 2001
From: Lil_Carpi <carpi@mailcarpi.xyz>
Date: Tue, 25 Nov 2025 19:05:08 +0100
Subject: [PATCH] =?UTF-8?q?a=C3=B1adido=20menu=20hamburguesa=20en=20main?=
 =?UTF-8?q?=20(REQUIERE=20APICARLE=20EL=20FUNCIONAMIENTO).?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 projecte-final/main/assets/css/style.css | 51 +++++++++++++++++++++++-
 projecte-final/main/indexSAD.html        |  6 +++
 projecte-final/testing/index.html        |  4 +-
 3 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/projecte-final/main/assets/css/style.css b/projecte-final/main/assets/css/style.css
index fd02c6a..329b045 100644
--- a/projecte-final/main/assets/css/style.css
+++ b/projecte-final/main/assets/css/style.css
@@ -4,8 +4,10 @@
 *
 {
   padding: 0;
+  margin: 0;
   box-sizing: border-box;
   list-style: none;
+  text-decoration: none;
 }
 
 /*Estilo básico del cuerpo*/
@@ -14,6 +16,7 @@ body
   font-family: 'Manjari', sans-serif;
   background: linear-gradient(135deg, #0f172a, #1e293b);
   color: white;
+  min-height: 100vh;
 }
 
 /*Barra de navegacion fija. Efecto "glassmorphism"*/
@@ -251,7 +254,8 @@ body
 
 /*Espacio para que el contenido no quede oculto por el navbar y el footer*/
 
-.content {
+.content 
+{
   padding-top: 7rem;
   padding-bottom: 30rem;
   max-width: 1200px;
@@ -259,6 +263,51 @@ body
 }
 
 /*=============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
 {
diff --git a/projecte-final/main/indexSAD.html b/projecte-final/main/indexSAD.html
index 076b385..211b0a1 100644
--- a/projecte-final/main/indexSAD.html
+++ b/projecte-final/main/indexSAD.html
@@ -17,6 +17,12 @@
           <a href="indexSAD.html">JocsMania</a>
         </div>
 
+        <input type="checkbox" id="menu-toggle">
+        
+          <label for="menu-toggle" class="hamburguer-label">
+            <i class="fa-solid fa-bars"></i>
+          </label>
+
         <ul class="navbarLinks">
           <li><a href="indexSAD.html">Inici</a></li>
           <li><a href="videojocsSAD.html">Videojocs</a></li>
diff --git a/projecte-final/testing/index.html b/projecte-final/testing/index.html
index 4e0a696..63118ef 100644
--- a/projecte-final/testing/index.html
+++ b/projecte-final/testing/index.html
@@ -36,7 +36,7 @@
 
     <main class="content">
       
-<section class="top-sales-section ranking-style">
+      <section class="top-sales-section ranking-style">
         <h2 class="section-title">Top 3 Vendes <span class="highlight-neon">Setmanal</span></h2>
         
         <div class="ranking-container">
@@ -76,10 +76,8 @@
               </div>
             </div>
           </article>
-
         </div>
       </section>
-
     </main>