From 250ebde62544327dee3b569f1f5ba0c700f2c0de Mon Sep 17 00:00:00 2001
From: Guia <guia.sevilla.gs@gmail.com>
Date: Tue, 18 Nov 2025 16:39:10 +0100
Subject: [PATCH 1/2] solved lab

---
 index.html       |  1 +
 styles/style.css | 64 ++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 65 insertions(+)

diff --git a/index.html b/index.html
index 1b8846b..bfca76d 100644
--- a/index.html
+++ b/index.html
@@ -17,6 +17,7 @@ <h1 class="newspaper-name">Ironhack News</h1>
           <li><a href="#">Sports</a></li>
         </ul>
       </nav>
+      <img class="header-image" src="images/menu-icon.png" alt="Header-Image" />
     </header>
 
     <main>
diff --git a/styles/style.css b/styles/style.css
index 9571ab1..10c516a 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -101,6 +101,9 @@ header {
   color: #fff;
   font-weight: bold;
 }
+.header-image {
+  display: none;
+}
 
 /* Articles */
 .main-article {
@@ -139,6 +142,7 @@ header {
 .article {
   width: 29%;
   padding: 20px;
+  margin-bottom: 20px;
   border: 1px solid #ccc;
 }
 
@@ -177,3 +181,63 @@ header {
 }
   
 /* Write your CSS below */
+@media screen and (max-width: 760px) {
+  header .navbar {
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+  }
+
+  .navbar li {
+    width: 100%;
+    border-right: none;
+    border-bottom: 1px solid #ffffff;
+    flex-grow: 1;
+  }
+  
+  .main-article {
+    flex-direction: column;
+  }
+
+  .main-article .image,
+  .main-article .content {
+    width: 100%;
+    padding: 10px 0;
+  }
+
+  .articles-container {
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    height: auto;
+  }
+
+  .article {
+    width: 45%;
+    margin-bottom: 10px 5px;
+  }
+}
+
+@media screen and (min-width: 760px) and (max-width: 1024px) {
+ .navbar {
+    justify-content: center;
+  }
+  .article {
+    width: 45%;
+    height: auto;
+    margin: 20px;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .header-image {
+    display: block;
+    width: 45px;
+    height: auto;
+    margin: auto;
+  }
+
+  .navbar li {
+    display: none;
+  }
+}
\ No newline at end of file

From 18fb22c21fd93d76db0d94e58a421c8694c670ad Mon Sep 17 00:00:00 2001
From: Guia <guia.sevilla.gs@gmail.com>
Date: Sun, 23 Nov 2025 19:31:56 +0100
Subject: [PATCH 2/2] solved lab

---
 styles/style.css | 46 +++++++++++++++++++++++++---------------------
 1 file changed, 25 insertions(+), 21 deletions(-)

diff --git a/styles/style.css b/styles/style.css
index 10c516a..af22040 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -101,13 +101,17 @@ header {
   color: #fff;
   font-weight: bold;
 }
+
 .header-image {
   display: none;
+  margin: auto;
+  height: 40px;
+  width: 40px;
 }
 
 /* Articles */
 .main-article {
-  margin: 20px;
+  margin-bottom: 20px;
   padding: 20px;
   border: 1px solid #ccc;
   display: flex;
@@ -126,7 +130,6 @@ header {
 
 .main-article .content {
   width: 50%;
-  padding: 0 20px;
   height: auto;
 }
 
@@ -136,7 +139,6 @@ header {
   justify-content: space-between;
   flex-direction: row;
   align-items: center;
-  padding: 20px;
 }
 
 .article {
@@ -182,62 +184,64 @@ header {
   
 /* Write your CSS below */
 @media screen and (max-width: 760px) {
-  header .navbar {
+.navbar {
     flex-direction: column;
     align-items: center;
-    width: 100%;
   }
 
   .navbar li {
     width: 100%;
     border-right: none;
     border-bottom: 1px solid #ffffff;
-    flex-grow: 1;
+    width: 100%;
+    height: 50px;
   }
   
   .main-article {
     flex-direction: column;
+    align-items: center;
+    width: 100%;
   }
 
   .main-article .image,
   .main-article .content {
     width: 100%;
-    padding: 10px 0;
+    padding: 10px 20px;
   }
 
   .articles-container {
     flex-direction: column;
     align-items: center;
-    width: 100%;
-    height: auto;
   }
 
   .article {
-    width: 45%;
-    margin-bottom: 10px 5px;
+    width: 100%;
   }
 }
 
 @media screen and (min-width: 760px) and (max-width: 1024px) {
- .navbar {
-    justify-content: center;
+  .navbar {
+    display: flex;
+    justify-content: center
   }
-  .article {
-    width: 45%;
-    height: auto;
-    margin: 20px;
+
+  .navbar li{
+    flex-grow: 1;
   }
+
+.article {
+  flex-direction: column;
+  width: 45%;
+}
+  
 }
 
 @media screen and (max-width: 480px) {
   .header-image {
     display: block;
-    width: 45px;
-    height: auto;
-    margin: auto;
   }
 
-  .navbar li {
+  .navbar {
     display: none;
   }
 }
\ No newline at end of file