Camilla Schoeser
342 lines
14 KiB
HTML
342 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Erasmus</title>
|
|
|
|
<!-- CSS -->
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
|
|
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
|
|
|
|
<!-- Swiper JS -->
|
|
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Conteneur des images de fond -->
|
|
<div class="bg-container">
|
|
<img src="MesImages/Amsterdam.jpg" class="bg-image active"> <!-- 0 -->
|
|
<img src="MesImages/Amsterdam (1).jpg" class="bg-image active"> <!-- 1 -->
|
|
<img src="MesImages/Amsterdam (2).jpg" class="bg-image active"> <!-- 2 -->
|
|
<img src="MesImages/Amsterdam (3).jpg" class="bg-image active"> <!-- 3 -->
|
|
<img src="MesImages/Amsterdam (4).jpg" class="bg-image active"> <!-- 4 -->
|
|
<img src="MesImages/Amsterdam (5).jpg" class="bg-image active"> <!-- 5 -->
|
|
<img src="MesImages/Amsterdam (6).jpg" class="bg-image active"> <!-- 6 -->
|
|
<img src="MesImages/Amsterdam (7).jpg" class="bg-image active"> <!-- 7 -->
|
|
<img src="MesImages/Amsterdam (8).jpg" class="bg-image active"> <!-- 8 -->
|
|
<img src="MesImages/Amsterdam (9).jpg" class="bg-image active"> <!-- 9 -->
|
|
<img src="MesImages/Amsterdam (10).jpg" class="bg-image active"> <!-- 10 -->
|
|
<img src="MesImages/Amsterdam (11).jpg" class="bg-image active"> <!-- 11 -->
|
|
<img src="MesImages/Amsterdam (12).jpg" class="bg-image active"> <!-- 12 -->
|
|
<img src="MesImages/Dordrecht.jpg" class="bg-image active"> <!-- 13 -->
|
|
<img src="MesImages/Gouda (2).jpg" class="bg-image active"> <!-- 14 -->
|
|
<img src="MesImages/Gouda.jpg" class="bg-image active"> <!-- 15 -->
|
|
<img src="MesImages/Leiden (2).jpg" class="bg-image active"> <!-- 16 -->
|
|
<img src="MesImages/Leiden.jpg" class="bg-image active"> <!-- 17 -->
|
|
<img src="MesImages/Library.jpg" class="bg-image active"> <!-- 18 -->
|
|
<img src="MesImages/Rotterdam.jpg" class="bg-image active"> <!-- 19 -->
|
|
<img src="MesImages/Zaandam.jpg" class="bg-image active"> <!-- 20 -->
|
|
<img src="MesImages/Amsterdam (4)(2).png" class="bg-image active"> <!-- 21 -->
|
|
</div>
|
|
|
|
|
|
<section class="slide" data-bg="11"> <!--1ere page-->
|
|
<h1 data-aos="fade-up">Culture of The Netherlands</h1>
|
|
<h2 data-aos="fade-up"></h2>
|
|
</section>
|
|
|
|
|
|
<section class="slide" data-bg="18"> <!-- 2e page -->
|
|
<div class="columns-container" style="margin:50px">
|
|
<div class="column left" data-aos="fade-right" style="background-color: rgba(205, 189, 161, 0.8); margin-left:50px; padding:10px">
|
|
<h2>Language Skills Before</h2>
|
|
<p style="text-align: center;">My beginnings</p>
|
|
</div>
|
|
<div class="column right" data-aos="fade-left" style="background-color: rgba(37, 149, 50, 0.8); padding:10px; margin-right:50px">
|
|
<h2>Language Skills After</h2>
|
|
<p style="text-align: center;">My progress</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
<section class="slide" data-bg="16"> <!--3e page-->
|
|
<h2 data-aos="fade-left">The culture</h2>
|
|
<div class="animated-images">
|
|
<img src="Images/drapeau.png" class="animated-image">
|
|
<img src="Images/gouda.png" class="animated-image">
|
|
<img src="MesImages/vélo3.png" class="animated-image">
|
|
<img src="Images/vangogh.png" class="animated-image">
|
|
<img src="Images/DelftBlue.png" class="animated-image">
|
|
<img src="Images/Statiegeld.png" class="animated-image">
|
|
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="slide" data-bg="20"> <!--4e page-->
|
|
<h2 data-aos="fade-right" style="margin-bottom: -150px;">A progressive and innovative country</h2>
|
|
<div class="columns-container">
|
|
<div class="column left" data-aos="fade-right" style="background-color:rgb(210, 250, 117); color:rgb(49, 7, 7);">
|
|
<ul>
|
|
<li>1870: death penalty abolition</li>
|
|
<li>1917: the right to vote for women</li>
|
|
<li>Relatively early decriminalization of abortion, prostitution, euthanasia and certain drugs</li>
|
|
<li>2001: first in the world to legalize same-sex marriage</li>
|
|
</ul>
|
|
</div>
|
|
<div class="column right" data-aos="fade-left" style="background-color:rgb(116, 197, 166); color:rgb(49, 7, 7); margin-top:400px">
|
|
<ul>
|
|
<li>2010: one of the most democratic and least corrupt countries in the world</li>
|
|
<li>One of the most developed countries according to the UN's annual HDI report</li>
|
|
<li>One of the leaders in child happiness according to UNICEF</li>
|
|
<li>Among the world leaders in press freedom, according to RSF, and in work-life balance, according to the OECD</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="slide" data-bg="13"> <!--5e page-->
|
|
<h2 data-aos="fade-left">Fest days and traditions</h2>
|
|
<div class="columns-container">
|
|
<div class="column left" style="background-color: beige; color:rgb(26, 1, 1); margin-left:100px">
|
|
<p>Dutch festivities</p>
|
|
<ul>
|
|
<li>Carnaval in the South of the Netherlands</li>
|
|
<li>Sinterklaas in november</li>
|
|
</ul>
|
|
<p>Feestdagen</p>
|
|
<ul>
|
|
<li>One of the countries with the fewest public holidays (8 vs. 11 in France)</li>
|
|
<li>Examples: King's Day, Liberation Day (May 5)</li>
|
|
<li>Holidays for religious reasons</li>
|
|
</ul>
|
|
</div>
|
|
<div class="column right">
|
|
<img src="Images/sinterklaas.png" data-aos="zoom-in" style="width:100%">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="slide" data-bg="2"> <!--6e page-->
|
|
<h2 data-aos="fade-right" style="margin-bottom: -100px; background-color: rgb(253, 218, 103);">Geography</h2>
|
|
|
|
<div class="columns-container" style="margin-top: 0px;">
|
|
<div class="column left" style="background-color: rgb(254, 229, 220); color:black; margin-left:200px">
|
|
<div><p>Holland vs. Netherlands</p></div>
|
|
<br>
|
|
<div>
|
|
<ul>
|
|
<li>1/4 of the country below sea level and 1/5 under water</li>
|
|
<li>The dutch were able to flood their country during the war to halt the advance of enemy troops</li>
|
|
<li>3500 km of dikes</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="column right">
|
|
<section class="slide" data-bg="3" style="width:100%">
|
|
<!-- Swiper Slider -->
|
|
<div class="slider-container">
|
|
<div class="swiper mySwiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide"><img src="Images/hollandvsNetherlands.png" alt="Image 1"></div>
|
|
<div class="swiper-slide"><img src="Images/Flevoland.png" alt="Image 2"></div>
|
|
<div class="swiper-slide"><img src="Images/HollandWithDams.png" alt="Image 3"></div>
|
|
<div class="swiper-slide"><img src="Images/HollandWithoutDams.png" alt="Image 4"></div>
|
|
</div>
|
|
|
|
<!-- Flèches de navigation -->
|
|
<div class="swiper-button-next"></div>
|
|
<div class="swiper-button-prev"></div>
|
|
|
|
<!-- Pagination -->
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
|
|
|
|
</section>
|
|
|
|
<section class="slide" data-bg="21"> <!--7e page-->
|
|
<div style="position:absolute; top:200px; right:150px">
|
|
<h2 data-aos="fade-left">Dutch behaviour</h2>
|
|
<div>
|
|
<ul>
|
|
<li>Direct and open communication</li>
|
|
<li>Honesty and clarity</li>
|
|
<li>Calm and disciplined</li>
|
|
<li>Trust</li>
|
|
<li>Greedy ?</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="slide" data-bg="19"> <!--8e page-->
|
|
<h2 data-aos="fade-right">Geert Hofstede Cultural Dimensions</h2>
|
|
<div class="columns-container">
|
|
<div class="column left">
|
|
<ul style="background-color: rgb(224, 203, 98); color:rgb(79, 79, 79); width: max-content; border-radius: 10px; padding:20px; padding-left:40px">
|
|
<li>PDI : Power Distance Index</li>
|
|
<li>IDV : Individualism</li>
|
|
<li>MAS : Masculinity</li>
|
|
<li>UAI : Uncertainty Avoidance Index</li>
|
|
<li>LTO : Long-Term Orientation </li>
|
|
<li>IVR : Indulgence</li>
|
|
</ul>
|
|
</div>
|
|
<div class="column right">
|
|
<img src="Images/cultural dimensiosn Netherlands vs France.png" style="width:700px; background-color: aliceblue; border-radius: 10px; padding: 20px;">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="slide" data-bg="1"> <!--9e page-->
|
|
<h2 data-aos="fade-left">Influence on my intercultural skills</h2>
|
|
|
|
</section>
|
|
|
|
<section class="slide" data-bg="17"> <!--10e page-->
|
|
<h2 data-aos="fade-right">Influence of France</h2>
|
|
<div class="columns-container">
|
|
<div class="column left">
|
|
<ul style="background-color: rgb(158, 250, 163); color:black; border-radius: 10px; padding:20px; padding-left:40px">
|
|
<li>In the 19th century, Napoleon invaded the Netherlands, which were then part of the First French Empire</li>
|
|
<li>French became the language of administration </li>
|
|
<li>This led to changes in the Dutch legal and administrative system </li>
|
|
<li>Influence of French language : cooking (restaurant, menu, chef ➝ chef-kok), mode (boutique ➝ boetiek, couture, chic)</li>
|
|
</ul>
|
|
<a href="https://www.youtube.com/watch?v=oM41O0NxbSg" style="color:rgb(49, 49, 65)">Parijs</a>
|
|
|
|
|
|
</div>
|
|
<div class="column right">
|
|
<img src="Images/FranceNapoleon.png" style="width:700px; background-color: aliceblue; border-radius: 10px; padding: 20px;">
|
|
</div>
|
|
</div>
|
|
<!-- une frame avec la vidéo -->
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- TOUT LE JAVASCRIPT ICI -->
|
|
|
|
|
|
|
|
|
|
<!-- AOS Animations -->
|
|
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
|
|
<script>
|
|
AOS.init();
|
|
</script>
|
|
|
|
<!-- Script pour changement d'image fluide -->
|
|
<script>
|
|
const images = document.querySelectorAll(".bg-image");
|
|
const sections = document.querySelectorAll(".slide");
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
let bgIndex = entry.target.getAttribute('data-bg');
|
|
images.forEach((img, index) => {
|
|
img.classList.toggle("active", index == bgIndex);
|
|
});
|
|
}
|
|
});
|
|
}, { threshold: 0.5 });
|
|
|
|
sections.forEach(section => {
|
|
observer.observe(section);
|
|
});
|
|
</script>
|
|
|
|
<!-- Script Swiper -->
|
|
<script>
|
|
var swiper = new Swiper(".mySwiper", {
|
|
loop: true,
|
|
navigation: {
|
|
nextEl: ".swiper-button-next",
|
|
prevEl: ".swiper-button-prev",
|
|
},
|
|
pagination: {
|
|
el: ".swiper-pagination",
|
|
clickable: true,
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
console.log("DOM chargé, script lancé.");
|
|
|
|
const images = document.querySelectorAll(".animated-image");
|
|
const slide = document.querySelector(".image-animation");
|
|
|
|
if (!slide) {
|
|
console.error("❌ ERREUR : La section .image-animation n'a pas été trouvée !");
|
|
return;
|
|
}
|
|
|
|
console.log("✅ Section .image-animation trouvée !");
|
|
console.log("🔍 Nombre d'images trouvées :", images.length);
|
|
|
|
const observer = new IntersectionObserver(entries => {
|
|
entries.forEach(entry => {
|
|
console.log("👀 Détection de la slide :", entry.isIntersecting);
|
|
|
|
if (entry.isIntersecting) {
|
|
console.log("🚀 Slide visible, animation déclenchée !");
|
|
images.forEach((img, i) => {
|
|
setTimeout(() => {
|
|
console.log(`🎬 Animation de l'image ${i + 1}`);
|
|
img.style.opacity = "1";
|
|
img.style.visibility = "visible";
|
|
img.style.transition = "opacity 1s ease-in-out";
|
|
}, i * 500); // Délai progressif entre chaque image
|
|
});
|
|
|
|
observer.unobserve(slide); // Empêche de rejouer l'animation
|
|
}
|
|
});
|
|
}, { threshold: 0.3 });
|
|
|
|
observer.observe(slide);
|
|
});
|
|
|
|
function loadVideo() {
|
|
document.querySelector(".video-wrapper").innerHTML = `
|
|
<iframe width="560" height="315"
|
|
src="https://www.youtube.com/embed/ID_DE_LA_VIDEO?autoplay=1"
|
|
frameborder="0"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowfullscreen>
|
|
</iframe>`;
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|