Lab Ironhack news done

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>
@@ -20,6 +21,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 +39,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" />

styles/style.css

@@ -80,11 +80,15 @@ header {
   list-style-type: none;
   width: 100%;
   display: flex;
-  justify-content: flex-start;
+  justify-content: space-between;
+  margin: 0;
+  padding: 0;
 }
 
 .navbar li {
-  width: 130px;
+  width: auto;
+  flex-grow: 1;
+  flex-shrink: 0;
   height: 40px;
   display: flex;
   align-items: center;
@@ -102,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 {
@@ -132,14 +145,16 @@ header {
   flex-wrap: wrap;
   justify-content: space-between;
   flex-direction: row;
-  align-items: center;
+  align-items: flex-start;
   padding: 20px;
 }
 
 .article {
   width: 29%;
   padding: 20px;
   border: 1px solid #ccc;
+  margin-bottom: 20px;
+  box-sizing: border-box;
 }
 
 .article img {
@@ -166,6 +181,7 @@ header {
   font-weight: bold;
   text-decoration: none;
   margin-top: 30px;
+  display: inline-block;
 }
 
 .btn:hover {
@@ -177,3 +193,89 @@ header {
 }
 
 /* Write your CSS below */
+
+.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;
+  }
+
+  .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;
+  }
+  .navbar li {
+    width: 100%;
+    border-right: none;
+    border-bottom: 1px solid #ffffff;
+  }
+
+  .navbar li:last-child {
+    border-bottom: none;
+  }
+
+  .articles-container {
+    flex-direction: column;
+    justify-content: center;
+    padding: 10px;
+  }
+  .article {
+    width: 100%;
+    margin-bottom: 20px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+  .article .btn {
+    width: fit-content;
+    margin-top: 15px;
+  }
+  .main-article {
+    flex-direction: column;
+    align-items: center;
+    padding: 10px;
+  }
+
+  .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;
+  }
+}
+