diff --git a/assets/images/Rer.png b/assets/images/Rer.png new file mode 100644 index 0000000..a572b69 Binary files /dev/null and b/assets/images/Rer.png differ diff --git a/assets/images/desiro_1139.avif b/assets/images/desiro_1139.avif new file mode 100644 index 0000000..c2c14f8 Binary files /dev/null and b/assets/images/desiro_1139.avif differ diff --git a/assets/images/desiro_1200.avif b/assets/images/desiro_1200.avif new file mode 100644 index 0000000..1e1b73f Binary files /dev/null and b/assets/images/desiro_1200.avif differ diff --git a/assets/images/desiro_400.avif b/assets/images/desiro_400.avif new file mode 100644 index 0000000..b490789 Binary files /dev/null and b/assets/images/desiro_400.avif differ diff --git a/assets/images/desiro_823.avif b/assets/images/desiro_823.avif new file mode 100644 index 0000000..7e57968 Binary files /dev/null and b/assets/images/desiro_823.avif differ diff --git a/assets/images/m7.jpeg b/assets/images/m7.jpeg new file mode 100644 index 0000000..d0ba663 Binary files /dev/null and b/assets/images/m7.jpeg differ diff --git a/assets/images/map1.png b/assets/images/map1.png new file mode 100644 index 0000000..0dd748e Binary files /dev/null and b/assets/images/map1.png differ diff --git a/assets/svg/car.svg b/assets/svg/car.svg new file mode 100644 index 0000000..85e09fd --- /dev/null +++ b/assets/svg/car.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/svg/euro.svg b/assets/svg/euro.svg new file mode 100644 index 0000000..678d001 --- /dev/null +++ b/assets/svg/euro.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/svg/plane.svg b/assets/svg/plane.svg new file mode 100644 index 0000000..6836c29 --- /dev/null +++ b/assets/svg/plane.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/svg/train-vector.svg b/assets/svg/train-vector.svg new file mode 100644 index 0000000..58775fd --- /dev/null +++ b/assets/svg/train-vector.svg @@ -0,0 +1,3 @@ + + + diff --git a/css/style.css b/css/style.css index 7bf9958..6ec2570 100644 --- a/css/style.css +++ b/css/style.css @@ -335,6 +335,7 @@ section { .company-structure p { max-width: 60ch; + margin-top: 0; } .company-img { @@ -479,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; @@ -578,6 +584,85 @@ section { align-items: center; } +.animation-text__line { + display: flex; + flex-direction: row; + gap: 2rem; +} + +.animation-text h4 { + margin: 0; +} + +.animation-text__line p { + margin-top: 0.7rem; + 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) { @@ -688,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; @@ -715,7 +807,6 @@ section { height: 100vh; } - .investment-img { max-width: 40vw; } @@ -725,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 { @@ -733,7 +826,12 @@ section { color: var(--dark-color); } + .share-button { + margin-top: 3rem; + } + .information-block p { + margin-top: 0; color: var(--orange); } @@ -761,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) { @@ -814,7 +919,6 @@ section { display: flex; } - .radio:checked { color: var(--orange); background-color: var(--orange); @@ -843,6 +947,7 @@ section { top: 50%; left: 50%; transform: translate(-50%, -50%); + margin-top: 0; } .carousel-item img { @@ -911,6 +1016,9 @@ section { cursor: pointer; } + .test-yourself-mobile { + display: none; + } .year-and-description { padding: 5rem 2rem; diff --git a/index.html b/index.html index b5ae554..136042b 100644 --- a/index.html +++ b/index.html @@ -194,7 +194,20 @@

Some events helped to make it happen

Eurotunnel and (LGV Nord)

-
+
+
+
+

Paris - London

+
+ plane +

3:30 hours

+
+
+ train +

2:15 hours

+
+
+

1994

Opened in 1994, the Eurotunnel is an engineering marvel, connecting the UK and France @@ -213,7 +226,20 @@

1994

HSL Leuven - Liège

-
+
+
+
+

Leuven - Liège

+
+ car +

1 hour

+
+
+ train +

0:30 minutes

+
+
+

2002

In 2002, a significant milestone in the development of Belgium's high-speed rail @@ -232,7 +258,20 @@

2002

HSL 4, Amsterdam - Brussels

-
+
+
+
+

Amsterdam - Brussels

+
+ car +

2:12 hours

+
+
+ train +

1:19 hours

+
+
+

2009

2009 witnessed the further expansion of Belgium's high-speed rail capabilities with two @@ -336,7 +375,13 @@

The New Trains

- desiro + + investment-img +
@@ -352,10 +397,41 @@

The Diabolo Project

+ desiro
+ +
+

2015

+
+
+

RER Network

+

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.

+
+
+ RER Suburban Network +
+
+
+ +
+

2020

+
+
+

M7 Carriages

+

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.

+
+
+ M7 Carriages +
+
+
@@ -370,15 +446,15 @@

Test Yourself

Route Distance

-

+

Draw on map

Travel time

-

+

With average speed of 200km/h

Estimated Costs

-

+

With cost of 25 millions / km

Share @@ -387,6 +463,38 @@

Estimated Costs

+
+

Test Yourself

+

Explore these dream routes and learn about their distance, travel time, and estimated cost. +

+ +
+ +
+ Dream Route 1 +
+

Route 1:
Lausanne to Zaragoza

+

Distance: 300 km

+

Travel Time: 1.5 hours

+

Estimated Cost: €7.5 billion

+
+
+ +
+ Dream Route 1 +
+

Route 2:
Lausanne to Zaragoza

+

Distance: 300 km

+

Travel Time: 1.5 hours

+

Estimated Cost: €7.5 billion

+
+
+
+ +
+
+
+

Did you like the interactive experience?

Find out more in TrainWorld!

@@ -403,6 +511,17 @@

Find out more in TrainWorld!

+ +
+
+ Previous +

5. The Golden Sixties and the oil crisis (second half of the 20th century)

+
+
+ Next +

6. Stations

+
+

Practical information

diff --git a/main.js b/main.js index 0126e90..7c59a28 100644 --- a/main.js +++ b/main.js @@ -13,13 +13,12 @@ const init = () => { mobileInteraction(); mobileAnimation(); setupCompanyDragAndDrop(); - // document.addEventListener("DOMContentLoaded", horizontalScroll); - // window.addEventListener("resize", horizontalScroll); horizontalScroll(); map(); animateEvents(); readingTextAnimation(); animateOpinionCards(); + // animateNumbers(); } const readingTextAnimation = () => { @@ -40,7 +39,8 @@ const readingTextAnimation = () => { }; const horizontalScroll = () => { - if (window.innerWidth > 768) { + const mm = gsap.matchMedia(); + mm.add("(min-width: 768px)", () => { gsap.to(".investment-container", { x: () => -( @@ -56,10 +56,11 @@ const horizontalScroll = () => { "+=" + document.querySelector(".investment-container").offsetWidth, }, }); - } + }); }; const animateEvents = () => { + const mm = gsap.matchMedia(); const eventsBlocks = document.querySelectorAll(".events-block"); eventsBlocks.forEach((block) => { @@ -67,38 +68,41 @@ const animateEvents = () => { const animationDiv = block.querySelector("div[class$='-animation']"); const yearAndDescription = block.querySelector(".year-and-description"); - gsap.timeline({ - scrollTrigger: { - trigger: block, - start: "top 80%", - end: "bottom 20%", - scrub: true, - // markers: true, - }, - }) - .from(header, { - x: -100, - autoAlpha: 0, - ease: "power2.out", - }) - .from( - animationDiv, - { - scale: 0.5, - autoAlpha: 0, - ease: "power2.out", - }, - "-=0.5" - ) - .from( - yearAndDescription, - { - x: 100, + mm.add("(min-width: 768px)", () => { + gsap + .timeline({ + scrollTrigger: { + trigger: block, + start: "top 90%", + end: "bottom 60%", + scrub: true, + // markers: true, + }, + }) + .from(header, { + x: -100, autoAlpha: 0, ease: "power2.out", - }, - "-=0.5" - ); + }) + .from( + animationDiv, + { + scale: 0.5, + autoAlpha: 0, + ease: "power2.out", + }, + "-=0.5" + ) + .from( + yearAndDescription, + { + x: 100, + autoAlpha: 0, + ease: "power2.out", + }, + "-=0.5" + ); + }); }); }; @@ -116,7 +120,7 @@ const animateOpinionCards = () => { trigger: card, start: "top 30%", toggleActions: "play none none reverse", - markers: true, + // markers: true, }, ease: "power1.in", onCompleteParams: [card],