From 16a17413038de5e50d1d8b0c701840b3c05eaa70 Mon Sep 17 00:00:00 2001
From: Joan Jimenez <joanjimenezcamps@gmail.com>
Date: Tue, 11 Nov 2025 17:27:15 +0100
Subject: [PATCH] Solve Lab

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

diff --git a/index.html b/index.html
index 1b8846b..df842c1 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,7 @@
     <header>
       <h1 class="newspaper-name">Ironhack News</h1>
       <nav>
+          <img src="./images/menu-icon.png" alt="icono hamburguesa" class= "icono">
         <ul class="navbar">
           <li><a href="#">Home</a></li>
           <li><a href="#">News</a></li>
diff --git a/styles/style.css b/styles/style.css
index 9571ab1..71ada67 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -177,3 +177,88 @@ header {
 }
   
 /* Write your CSS below */
+
+/*Iteration 1*/
+
+@media (max-width: 760px) {
+
+  .navbar{
+    flex-direction: column;
+    align-items: center;
+  }
+.navbar li {
+    width: 100%;
+    border-bottom: 1px solid #fff;
+}
+  .main-article  {
+    flex-direction: column;
+    align-items: center;
+    text-align: left;
+    width: 100%;
+    height: auto;
+
+  }
+
+  .main-article .image,
+  .main-article .content {
+    width: 100%;
+    padding: 10px 0;
+  }
+ 
+  .articles-container {
+    flex-direction: column;
+    align-items: left;
+    
+  }
+
+  .article {
+    width: 100%;
+  }
+}
+
+/*Iteration 2*/
+
+@media (min-width: 760px) and (max-width: 1024px) {
+
+  
+  .navbar {
+    flex-direction: row;
+    justify-content: space-between; 
+  }
+
+  .navbar li {
+    width: 100%; 
+    
+  }
+
+  .main-article {
+    flex-direction: row; 
+    width: 100%;
+    margin: 20px 0;
+  }
+
+  .articles-container {
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 10px
+  }
+
+  .article {
+    width: 48%; 
+    margin-bottom: 20px;
+  }
+}
+ 
+@media (max-width:480px){
+
+.navbar {
+    display: none;
+  }
+  }
+  @media (min-width:480px){
+
+.icono {
+    display: none;
+  }
+  }
\ No newline at end of file