Ironhack news Solved lab

index.html

@@ -10,6 +10,7 @@
     <header>
       <h1 class="newspaper-name">Ironhack News</h1>
       <nav>
+        <div class="menu-icon"><img src="/images/menu-icon.png" alt="Menú" /></div>
         <ul class="navbar">
           <li><a href="#">Home</a></li>
           <li><a href="#">News</a></li>

styles/style.css

@@ -175,5 +175,73 @@ header {
 .btn-blue {
   background-color: #007bff;
 }
+
+@media screen and (min-width: 760px) and (max-width: 1024px) {
+
+  .navbar li {
+    width: 100%;
+    border-right: 1px solid #ffffff;
+  }
+
+  .articles-container {
+    gap: 30px;
+  }
+
+  .article {
+    width: 44%;
+  }
+
+}
+
+@media screen and (max-width: 760px) {
+
+  .navbar {
+    flex-direction: column;
+  }
+
+  .navbar li {
+    width: 100%;
+    border-right: none;
+    border-bottom: 1px solid #ffffff;
+  }
+
+  .main-article {
+    flex-direction: column;
+  }
+
+  .main-article .image {
+      width: 100%;
+    }
+
+  .main-article .content {
+    width: 100%;
+    margin-top: 20px;
+  }
+
+  .articles-container {
+    flex-direction: column;
+  }
+
+  .article {
+    width: 100%;
+  }
+}
+
+@media screen and (max-width: 510px) {
+
+  .newspaper-name {
+    border-bottom: none;
+  }
+
+  .navbar {
+    display: none;
+  }
+
+  .menu-icon {
+    display: block;
+  }
 
-/* Write your CSS below */
+  .articles-container {
+    gap: 40px;
+  }
+}