From a6762a39d76b8c786f10f1e2b96158769450c11f Mon Sep 17 00:00:00 2001
From: Amrit Biswal <amrit.k.biswal@gmail.com>
Date: Tue, 18 Nov 2025 15:01:10 +0100
Subject: [PATCH 1/3] css news lab completed

---
 index.html       |  4 +-
 styles/style.css | 99 ++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 102 insertions(+), 1 deletion(-)
diff --git a/index.html b/index.html
index 1b8846b..30fe731 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,9 @@
   <body>
     <header>
       <h1 class="newspaper-name">Ironhack News</h1>
+      <div class="menu-icon">
+        <img src="/images/menu-icon.png" alt="Menu" />
+      </div>
       <nav>
         <ul class="navbar">
           <li><a href="#">Home</a></li>
@@ -71,7 +74,6 @@ <h2>Article 3</h2>
       </section>
     </main>
 
-    
     <!-- DO NOT REMOVE - viewport width label -->
     <span class="viewport-dimensions"></span>
     <!-- DO NOT REMOVE - A simple JS script used to display the viewport width label -->
diff --git a/styles/style.css b/styles/style.css
index 9571ab1..fefa567 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -177,3 +177,102 @@ header {
 }
   
 /* Write your CSS below */
+@media (max-width: 760px) {
+  .navbar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .navbar li {
+    width: 100%;
+    border-right: none;
+    border-bottom: 1px solid #ffffff;
+  }
+
+  .main-article {
+    flex-direction: column;
+    margin: 20px 0;
+  }
+
+  .main-article .image {
+    width: 100%;
+    padding: 10px 0;
+    margin-bottom: 20px;
+  }
+  
+  .main-article .content {
+    width: 100%;
+    padding: 10px 0;
+  }
+
+  .articles-container {
+    flex-direction: column;
+    padding: 20px 0;
+  }
+
+  .article {
+    width: 100%;
+    margin-bottom: 20px;
+  }
+
+}
+
+@media (min-width: 761px) and (max-width: 1024px) {
+  .navbar {
+    justify-content: space-between;
+  }
+
+  .navbar li {
+    flex: 1;
+    width: auto;
+  }
+
+  .main-article {
+    flex-direction: row;
+    width: 100%;
+  }
+
+  .main-article .image {
+    width: 50%;
+  }
+
+  .main-article .content {
+    width: 50%;
+  }
+
+  .articles-container {
+    justify-content: space-between;
+  }
+
+  .article {
+    width: 48%;
+    margin-bottom: 20px;
+  }
+
+  .article:nth-child(3) {
+    width: 48%;
+  }
+}
+
+@media (max-width: 480px) {
+  .navbar {
+    display: none;
+  }
+
+  .menu-icon {
+    display: block;
+    padding: 15px;
+    text-align: center;
+    background-color: #333;
+  }
+
+  .menu-icon img {
+    width: 30px;
+    height: auto;
+  }
+}
+
+@media (min-width: 481px) {
+  .menu-icon {
+    display: none;
+  }
+}
\ No newline at end of file

From 19e8ab724719367c43ac547bd9ca8f555c172991 Mon Sep 17 00:00:00 2001
From: Amrit Biswal <amrit.k.biswal@gmail.com>
Date: Tue, 18 Nov 2025 15:23:17 +0100
Subject: [PATCH 2/3] html code refractor done

---
 index.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 30fe731..0821da5 100644
--- a/index.html
+++ b/index.html
@@ -9,10 +9,10 @@
   <body>
     <header>
       <h1 class="newspaper-name">Ironhack News</h1>
-      <div class="menu-icon">
-        <img src="/images/menu-icon.png" alt="Menu" />
-      </div>
       <nav>
+        <div class="menu-icon">
+          <img src="/images/menu-icon.png" alt="Menu" />
+        </div>
         <ul class="navbar">
           <li><a href="#">Home</a></li>
           <li><a href="#">News</a></li>

From c06eb809dd889f3782f61fa98136889d2c49fd9c Mon Sep 17 00:00:00 2001
From: Amrit Biswal <amrit.k.biswal@gmail.com>
Date: Tue, 18 Nov 2025 15:28:26 +0100
Subject: [PATCH 3/3] Final lab completion

---
 styles/style.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/styles/style.css b/styles/style.css
index fefa567..5f0b024 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -257,6 +257,10 @@ header {
   .navbar {
     display: none;
   }
+  
+  .newspaper-name {
+    border: none
+  }
 
   .menu-icon {
     display: block;
