FT_RMT_2507 MAËL & CARLOS

index.html

@@ -16,6 +16,9 @@ <h1 class="newspaper-name">Ironhack News</h1>
           <li><a href="#">Tech</a></li>
           <li><a href="#">Sports</a></li>
         </ul>
+        <div class="hamburguer-menu">
+          <img src="./images/menu-icon.png" alt="Hamburguer menu icon" />
+        </div>
       </nav>
     </header>
 

styles/style.css

@@ -15,7 +15,6 @@ body, h1, h2, h3, h4, h5, h6, p, ol, ul {
   font-weight: lighter;
 }
 
-
 /*  DO NOT REMOVE - Styling for the label showing the viewport width */
 .viewport-dimensions {
   position: fixed;
@@ -177,3 +176,76 @@ header {
 }
 
 /* Write your CSS below */
+@media (width < 760px) {
+  header nav .navbar {
+    flex-direction: column;
+    align-items: center;
+
+    li {
+      width: 100%;
+      border-bottom: #ffffff solid 1px;
+    }
+  }
+
+  main {
+    .articles-container {
+      flex-direction: column;
+      gap: 40px;
+
+      .article {
+        width: 100%;
+      }
+    }
+
+    .main-article {
+      flex-direction: column;
+      align-items: center;
+
+      .content {
+        width: 100%;
+      }
+      .image {
+        width: 100%;
+      }
+    }
+  }
+}
+
+@media (width < 1024px) and (width > 760px) {
+  header nav .navbar {
+    justify-content: space-evenly;
+    justify-items: center;
+
+    li {
+      width: 100%;
+    }
+  }
+
+  main .articles-container {
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 40px;
+
+    .article {
+      width: 45%;
+    }
+  }
+}
+
+@media (width < 480px){
+  header nav {
+    .navbar{
+      display: none
+    }
+
+    .hamburguer-menu {
+      display: block;
+    }    
+  } 
+}
+
+.hamburguer-menu {
+  display: none;
+  padding: 5px
+}