From 74ec99ac3a9b12e5dc706310b1f3097f55d064a8 Mon Sep 17 00:00:00 2001
From: bruna <brunaa.martins@gmail.com>
Date: Fri, 17 Oct 2025 15:45:29 +0200
Subject: [PATCH 1/2] Lab Ironhack news done

---
 index.html       |  3 ++-
 styles/style.css | 57 ++++++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 57 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 1b8846b..7514473 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,7 @@ <h1 class="newspaper-name">Ironhack News</h1>
     </header>
 
     <main>
+      <div class="d-flex gap-2 flex-wrap">
       <article class="main-article">
         <div class="image">
           <img src="/images/main-article.jpg" alt="Article 1 Image" />
@@ -37,7 +38,7 @@ <h2>Main Article</h2>
           <button class="btn btn-blue">Read more</button>
         </div>
       </article>
-
+      </div>
       <section class="articles-container">
         <article class="article">
           <img src="images/article-1.jpg" alt="Article 1 Image" />
diff --git a/styles/style.css b/styles/style.css
index 9571ab1..ad97fa2 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -80,11 +80,13 @@ header {
   list-style-type: none;
   width: 100%;
   display: flex;
-  justify-content: flex-start;
+  justify-content: space-between;
 }
 
 .navbar li {
-  width: 130px;
+  width: auto;
+  flex-grow: 1;
+  flex-shrink: 0;
   height: 40px;
   display: flex;
   align-items: center;
@@ -177,3 +179,54 @@ header {
 }
   
 /* Write your CSS below */
+
+.d-flex{
+  display: flex;
+}
+
+@media only screen and (max-width: 768px){
+  .main-article{
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .main-article .image,
+  .main-article .content {
+    width: 100%;
+    padding:0 5px;
+  }
+
+  .main-article .image {
+    max-width: 100%;
+    margin-bottom: 10px;
+  }
+
+  .articles-container {
+    justify-content: center;
+    padding: 10px;
+  }
+
+  .article {
+    width: 100% !important;
+    margin-bottom: 20px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+  .article .btn {
+    width: fit-content;
+  }
+  .navbar {
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+  }
+  .navbar li {
+    width: 100%;
+  
+  }
+
+  }
+

From 2354001ec85834ae2bec29877bc273f27780fa90 Mon Sep 17 00:00:00 2001
From: bruna <brunaa.martins@gmail.com>
Date: Fri, 17 Oct 2025 18:22:38 +0200
Subject: [PATCH 2/2] Ironhack CSS changed

---
 index.html       |  1 +
 styles/style.css | 83 ++++++++++++++++++++++++++++++++++++++----------
 2 files changed, 67 insertions(+), 17 deletions(-)

diff --git a/index.html b/index.html
index 7514473..84c4d0e 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="navegation menu" class="menu-icon">
         <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 ad97fa2..78a614b 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -81,6 +81,8 @@ header {
   width: 100%;
   display: flex;
   justify-content: space-between;
+  margin: 0;
+  padding: 0;
 }
 
 .navbar li {
@@ -104,12 +106,21 @@ header {
   font-weight: bold;
 }
 
+.menu-icon {
+  display: none;
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+  padding: 5px;
+}
+
 /* Articles */
 .main-article {
   margin: 20px;
   padding: 20px;
   border: 1px solid #ccc;
   display: flex;
+  width: auto;
 }
 
 .main-article img {
@@ -134,7 +145,7 @@ header {
   flex-wrap: wrap;
   justify-content: space-between;
   flex-direction: row;
-  align-items: center;
+  align-items: flex-start;
   padding: 20px;
 }
 
@@ -142,6 +153,8 @@ header {
   width: 29%;
   padding: 20px;
   border: 1px solid #ccc;
+  margin-bottom: 20px;
+  box-sizing: border-box;
 }
 
 .article img {
@@ -168,6 +181,7 @@ header {
   font-weight: bold;
   text-decoration: none;
   margin-top: 30px;
+  display: inline-block;
 }
 
 .btn:hover {
@@ -183,31 +197,49 @@ header {
 .d-flex{
   display: flex;
 }
+/*Iteration 2 */
+@media only screen and (min-width: 760px) and (max-width: 1024px){
+  .main-article {
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+    padding: 10px;
+  }
 
-@media only screen and (max-width: 768px){
-  .main-article{
+  .articles-container {
+    padding: 20px;
+  }
+
+  .article {
+    width: 48%;
+  }
+}
+/*Iteration 1*/
+@media only screen and (max-width: 760px) {
+  .navbar {
     flex-direction: column;
+    flex-wrap: wrap;
     align-items: center;
+    justify-content: center;
+    padding: 10px 0;
   }
-
-  .main-article .image,
-  .main-article .content {
+  .navbar li {
     width: 100%;
-    padding:0 5px;
+    border-right: none;
+    border-bottom: 1px solid #ffffff;
   }
 
-  .main-article .image {
-    max-width: 100%;
-    margin-bottom: 10px;
+  .navbar li:last-child {
+    border-bottom: none;
   }
 
   .articles-container {
+    flex-direction: column;
     justify-content: center;
     padding: 10px;
   }
-
   .article {
-    width: 100% !important;
+    width: 100%;
     margin-bottom: 20px;
     box-sizing: border-box;
     display: flex;
@@ -217,16 +249,33 @@ header {
   }
   .article .btn {
     width: fit-content;
+    margin-top: 15px;
   }
-  .navbar {
-    flex-wrap: wrap;
+  .main-article {
+    flex-direction: column;
     align-items: center;
-    justify-content: center;
+    padding: 10px;
   }
-  .navbar li {
-    width: 100%;
   
+  .main-article .image {
+    width: 100%;
+    padding: 0;
+    margin-bottom: 10px;
   }
 
+  .main-article .content {
+    width: 100%;
+    padding: 0;
   }
 
+}
+/*Iteration 3 */
+@media (max-width: 400px) {
+  .navbar li {
+    display: none;
+  }
+  .menu-icon {
+    display: inline-block;
+  }
+}
+