added more sections and content

css/style.css

@@ -480,6 +480,11 @@ section {
   color: var(--dark-color);
 }
 
+.final-section h2 {
+  margin-bottom: 2rem;
+  line-height: 1.2;
+}
+
 .discount-text {
   font-family: var(--helvetica);
   font-weight: 500;
@@ -594,6 +599,70 @@ section {
   margin-bottom: 0.7rem;
 }
 
+.carousel-item img {
+  width: clamp(6em, 10vw, 8em);
+  height: auto;
+}
+
+.company-list p {
+  color: var(--orange);
+  text-align: center;
+  margin: 0.4rem;
+}
+
+.carousel-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  text-align: center;
+  margin-top: 4rem;
+  margin-bottom: 4rem;
+}
+
+.radio {
+  display: none;
+}
+
+.stories-links a {
+  color: var(--orange);
+  text-decoration: underline;
+  font-family: var(--helvetica);
+  font-size: var(--font-size-heading);
+  transition: all 0.25s;
+}
+
+.stories-links a:hover {
+  color: var(--light-color);
+}
+
+.stories-links {
+  text-align: center;
+}
+
+.footer h2 {
+  margin-top: 4rem;
+}
+
+.map-img {
+  width: 100%;
+  height: auto;
+}
+
+.test-yourself-mobile {
+  color: var(--dark-color);
+}
+
+.mobile-map-content .route {
+  text-align: center;
+}
+
+.route {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+
+}
+
 /* * css media query  */
 
 @media (min-width: 768px) {
@@ -704,23 +773,30 @@ section {
   .investment-item {
     flex: 0 0 auto; 
     margin-right: 2rem;
+    margin-top: 0;
     justify-content: space-around;
     align-items: center;
     width: 100vw;
     flex-shrink: 0; 
   }
 
-  .investment-flex {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-  }
-
   .investment-left, .investment-right {
     width: 50%;
   }
+
+  .stories-links {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    gap: 2rem;
+    color: var(--orange);
+    text-align: left;
+  }
 
+  .stories-links p {
+    margin-top: 0;
+  }
 
   .investment-container {
     overflow-x: hidden;
@@ -731,7 +807,6 @@ section {
     height: 100vh;
   }
 
-
   .investment-img {
     max-width: 40vw;
   }
@@ -741,7 +816,9 @@ section {
     flex-direction: row;
     justify-content: space-around;
     align-items: center;
-    gap: 7rem;
+    background-color: var(--light-color);
+    color: var(--dark-color);
+    padding: 3rem;
   }
 
   .test-yourself {
@@ -782,11 +859,18 @@ section {
   }
 
   .radio {
+    display: block;
     color: var(--orange);
     height: 1.5rem;
     width: 1.5rem;
     margin: 0;
     border-radius: 50%;
+    transition: all 0.25s;
+  }
+
+  .radio:hover {
+    cursor: pointer;
+    scale: 1.4;
   }
 
   .radio:nth-of-type(1) {
@@ -835,7 +919,6 @@ section {
     display: flex;
   }
 
-
   .radio:checked {
     color: var(--orange);
     background-color: var(--orange);
@@ -864,6 +947,7 @@ section {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
+    margin-top: 0;
   }
 
   .carousel-item img {
@@ -932,6 +1016,9 @@ section {
     cursor: pointer;
   }
 
+  .test-yourself-mobile {
+    display: none;
+  }
 
   .year-and-description {
     padding: 5rem 2rem;

index.html

@@ -402,6 +402,36 @@ <h2 class="project-heading">The Diabolo Project</h2>
           </div>
         </div>
       </div>
+
+      <div class="investment-item">
+        <h3 class="accent-year">2015</h3>
+        <div class="invetment-flex">
+          <div class="investment-left">
+            <h2 class="project-heading">RER Network</h2>
+            <p>Major works since 2006 have been undertaken for the Brussels RER (Réseau Express Régional), including the
+              expansion of various lines to four tracks and the construction of the Schuman-Josaphat Tunnel. Officially opened
+              on December 13, 2015, it aims to enhance the suburban transport network.</p>
+          </div>
+          <div class="investment-right">
+            <img src="assets/images/Rer.png" alt="RER Suburban Network" class="investment-img">
+          </div>
+        </div>
+      </div>
+
+      <div class="investment-item">
+        <h3 class="accent-year">2020</h3>
+        <div class="invetment-flex">
+          <div class="investment-left">
+            <h2 class="project-heading">M7 Carriages</h2>
+            <p>In 2020, NMBS/SNCB introduced the first M7 carriages, with 445 double-decker carriages ordered to provide
+              50,000 seats. These new carriages, designed based on comprehensive traveller surveys, boast modern safety
+              systems and enhanced comfort.</p>
+          </div>
+          <div class="investment-right">
+            <img src="assets/images/m7.jpeg" alt="M7 Carriages" class="investment-img">
+          </div>
+        </div>
+      </div>
     </div>
   </section>
 
@@ -433,6 +463,38 @@ <h3>Estimated Costs</h3>
     </div>
   </section>
 
+  <section class="test-yourself-mobile">
+    <h2>Test Yourself</h2>
+    <p class="test-yourself-p">Explore these dream routes and learn about their distance, travel time, and estimated cost.
+    </p>
+
+    <div class="mobile-map-content">
+
+      <div class="route">
+        <img src="assets/images/map1.png" alt="Dream Route 1" class="map-img">
+        <div class="route-details">
+          <h3>Route 1:<br> Lausanne to Zaragoza</h3>
+          <p>Distance: 300 km</p>
+          <p>Travel Time: 1.5 hours</p>
+          <p>Estimated Cost: €7.5 billion</p>
+        </div>
+      </div>
+
+      <div class="route">
+        <img src="assets/images/map1.png" alt="Dream Route 1" class="map-img">
+        <div class="route-details">
+          <h3>Route 2:<br> Lausanne to Zaragoza</h3>
+          <p>Distance: 300 km</p>
+          <p>Travel Time: 1.5 hours</p>
+          <p>Estimated Cost: €7.5 billion</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="route-information">
+    </div>
+  </section>
+
   <section class="final-section">
     <h2>Did you like the interactive experience?</h2>
     <h3>Find out more in <span>TrainWorld!</span></h3>
@@ -449,6 +511,17 @@ <h3>Find out more in <span>TrainWorld!</span></h3>
   </section>
 
   <section class="footer">
+
+    <div class="stories-links">
+      <div class="stories-link">
+        <a href="#">Previous</a>
+        <p>5. The Golden Sixties and the oil crisis (second half of the 20th century)</p>
+      </div>
+      <div class="stories-link">
+        <a href="">Next</a>
+        <p>6. Stations</p>
+      </div>
+    </div>
     <h2>Practical information</h2>
 
     <div class="practicals">