logo 75ans

75 ans Plantyn75

Cette année scolaire, Plantyn célèbre 75 ans de plaisir d’apprendre, de progrès et de collaboration. Cet anniversaire est surtout l’occasion de vous mettre en lumière, vous et tous ceux qui, au fil des décennies, ont contribué à façonner l'enseignement.

75 ans: laissez-vous inspirer

Header Home 75 ans v2

75 ans video 1

Article 5050 - 75 ans Plantyn - des histoires vraies

<section style="max-width: 1180px; margin: 0 auto; padding: 20px;">

  
  <h2 style="
    font-family: 'Trebuchet MS', Trebuchet, Arial, sans-serif;
    font-size: 32px;
    line-height: 48px;
    font-weight: 400;
    margin-bottom: 24px;
  ">
    Découvrez les sessions
  </h2>

  
  <div style="
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  ">

    
    <iframe 
      width="100%" 
      height="315"
      src="https://www.youtube.com/embed/nHTMEyMMwb8?si=A6JZlpvgbsg5FFvQ"
      title="YouTube video 1"
      frameborder="0"
      allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen>
    </iframe>

    
    <iframe 
      width="100%" 
      height="315"
      src="https://www.youtube.com/embed/CcxeIKp6VK0?si=zC7enHSXUWiSfKHk"
      title="YouTube video 2"
      frameborder="0"
      allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen>
    </iframe>

    
    <iframe 
      width="100%" 
      height="315"
      src="https://www.youtube.com/embed/-SV0vWARZBk?si=4o_B_THObX2k6T7t"
      title="YouTube video 3"
      frameborder="0"
      allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen>
    </iframe>

    
    <iframe 
      width="100%" 
      height="315"
      src="https://www.youtube.com/embed/1G0CLXBEbRg?si=1DrQEpmXvTvm2IR6"
      title="YouTube video 4"
      frameborder="0"
      allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen>
    </iframe>

  </div>

</section>

iFrame - 75 ans sessions

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Plantyn Inspiratie Carrousel</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Trebuchet MS', Trebuchet, Arial, sans-serif;
            background: #ffffff;
            padding: 60px 0;
        }
        .container {
            max-width: 1400px;
            margin: 0 auto;
        }
        .header {
            text-align: Left;
          margin-left: 100px;  
          margin-bottom: 50px;
        }
        .title {
            font-size: 2.25rem;
            color: #1a1a1a;
            margin-bottom: 12px;
            font-weight: 600;
            line-height: 1.2;
        }
        .subtitle {
            font-size: 1.125rem;
            color: #666666;
            font-weight: 400;
            line-height: 1.5;
        }
        .carousel-wrapper {
            position: relative;
            overflow: hidden;
            padding: 0 60px;
        }
        .carousel-container {
            display: flex;
            gap: 12px;
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            padding: 10px 0 30px 0;
        }
        .carousel-item {
            width: 350px;
            height: 350px;
            flex-shrink: 0;
            background: #ffffff;
            border-radius: 0;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
        }
        .carousel-item:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        }
        .carousel-item a {
            text-decoration: none;
            color: inherit;
            display: block;
        }
        .carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .carousel-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid rgba(0, 0, 0, 0.1);
            width: 48px;
            height: 48px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            color: #1a1a1a;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
            transition: all 0.25s ease;
            z-index: 10;
            font-weight: 300;
        }
        .carousel-button:hover:not(:disabled) {
            background: #1a1a1a;
            color: white;
            border-color: #1a1a1a;
            transform: translateY(-50%) scale(1.05);
        }
        .carousel-button:active:not(:disabled) {
            transform: translateY(-50%) scale(0.98);
        }
        .carousel-button.prev {
            left: 10px;
        }
        .carousel-button.next {
            right: 10px;
        }
        .carousel-button:disabled {
            opacity: 0.25;
            cursor: not-allowed;
            background: rgba(255, 255, 255, 0.8);
        }
        .carousel-button:disabled:hover {
            background: rgba(255, 255, 255, 0.8);
            color: #1a1a1a;
            transform: translateY(-50%);
            border-color: rgba(0, 0, 0, 0.1);
        }
        .carousel-dots {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-top: 40px;
        }
        .dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #d9d9d9;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: none;
        }
        .dot:hover {
            background: #999999;
        }
        .dot.active {
            background: #1a1a1a;
            width: 28px;
            border-radius: 5px;
        }
        @media (max-width: 1200px) {
            .carousel-item {
                width: 250px;
                height: 250px;
            }
        }
        @media (max-width: 768px) {
            body {
                padding: 40px 0;
            }
            .title {
                font-size: 1.75rem;
            }
            .subtitle {
                font-size: 1rem;
            }
            .carousel-wrapper {
                padding: 0 55px;
            }
            .carousel-item {
                width: 200px;
                height: 200px;
            }
            .carousel-button {
                width: 42px;
                height: 42px;
                font-size: 24px;
            }
        }
        @media (max-width: 480px) {
            body {
                padding: 30px 0;
            }
            .title {
                font-size: 1.5rem;
            }
            .subtitle {
                font-size: 0.95rem;
            }
            .carousel-wrapper {
                padding: 0 45px;
            }
            .carousel-button {
                width: 38px;
                height: 38px;
            }
            .carousel-button.prev {
                left: 5px;
            }
            .carousel-button.next {
                right: 5px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h2 class="title">Laissez-vous inspirer encore plus</h2>
            <p class="subtitle">Découvrez des articles et des webinaires inspirants</p>
        </div>
        <div class="carousel-wrapper">
            <button class="carousel-button prev" id="prevBtn" aria-label="Précédent">‹</button>
            <div class="carousel-container" id="carouselContainer">
                <div class="carousel-item">
                    <a href="https://www.plantyn.com/fr-BE/blog/echelle-vs-ame-technologie-humanite-educspark-2025-506mO1xbSHzcGxMe5LoUqg" target="_blank" rel="noopener noreferrer">
                        <img src="https://images.ctfassets.net/1kqffs4iocas/v0z5HFyM1q7wVTN4bEYXa/e41d2774284e64e8db61bf9d81854dc1/Voorstel_landingspagina_75_jaar-16.png" alt="Échelle vs âme - EduSpark" loading="lazy">
                    </a>
                </div>
                <div class="carousel-item">
                    <a href="https://www.plantyn.com/fr-BE/pacte-secondaire-objectif-2026#article-5050-pacte-secondaire-objectif-2026-planning" target="_blank" rel="noopener noreferrer">
                        <img src="https://images.ctfassets.net/1kqffs4iocas/1MRaipEFIpAIAr9iBGAN19/bf069b2bccc3400e79b0b0b38a257f4e/Voorstel_landingspagina_75_jaar-24.png" alt="Pacte secondaire" loading="lazy">
                    </a>
                </div>
                <div class="carousel-item">
                    <a href="https://www.plantyn.com/fr-BE/decouvertes" target="_blank" rel="noopener noreferrer">
                        <img src="https://images.ctfassets.net/1kqffs4iocas/22NTknGIExtb23hrVfhMzc/b91a3bb398ab1b5ad7892f473e1abfe7/Voorstel_landingspagina_75_jaar-25.png" alt="Découvertes" loading="lazy">
                    </a>
                </div>
                <div class="carousel-item">
                    <a href="https://www.plantyn.com/fr-BE/secondaire/mathematiques/Croc-math-pacte" target="_blank" rel="noopener noreferrer">
                        <img src="https://images.ctfassets.net/1kqffs4iocas/AIVW0EEvlp56wv9ZCdqiX/e7504c28a7bceb2558d2c2ef7eea298e/Voorstel_landingspagina_75_jaar-26.png" alt="Croc math" loading="lazy">
                    </a>
                </div>
                <div class="carousel-item">
                    <a href="https://www.plantyn.com/fr-BE/blog/eduspark-2025-enseignement-innovation-ia-plantyn-6l4Lu7opqrPwmWlTtxTb5t" target="_blank" rel="noopener noreferrer">
                        <img src="https://images.ctfassets.net/1kqffs4iocas/555l5HT3eVuqjdpGvogjH9/8957ab648924c40a9f047abbeb79993e/Voorstel_landingspagina_75_jaar-17.png" alt="EduSpark 2025 - Innovation et IA" loading="lazy">
                    </a>
                </div>
                <div class="carousel-item">
                    <a href="https://www.plantyn.com/fr-BE/secondaire/neerlandais/boomerang-pacte" target="_blank" rel="noopener noreferrer">
                        <img src="https://images.ctfassets.net/1kqffs4iocas/42u0NcQLi44VAUsMq8yGzL/dd2919541f1b0de947633b88a4ec6bee/Voorstel_landingspagina_75_jaar-27.png" alt="Boomerang néerlandais" loading="lazy">
                    </a>
                </div>
                <div class="carousel-item">
                    <a href="https://www.plantyn.com/fr-BE/secondaire/anglais/boomerang-pacte" target="_blank" rel="noopener noreferrer">
                        <img src="https://images.ctfassets.net/1kqffs4iocas/22c0436IIZrnZKwM4R6mGj/87cd933be8fff7247a793b4255a0ac6b/Voorstel_landingspagina_75_jaar-28.png" alt="Boomerang anglais" loading="lazy">
                    </a>
                </div>
                <div class="carousel-item">
                    <a href="https://www.plantyn.com/fr-BE/secondaire/francais/parcours-et-moi-pacte" target="_blank" rel="noopener noreferrer">
                        <img src="https://images.ctfassets.net/1kqffs4iocas/2IXAKpGSMhRkXJlsyhJdhK/3edc8cf561a08ccccdcdc66a6adc41aa/Voorstel_landingspagina_75_jaar-29.png" alt="Parcours et moi" loading="lazy">
                    </a>
                </div>
                <div class="carousel-item">
                    <a href="https://www.plantyn.com/fr-BE/secondaire/sciences/exploria-pacte" target="_blank" rel="noopener noreferrer">
                        <img src="https://images.ctfassets.net/1kqffs4iocas/7BN5Mo9YrxdkclSpuj6zbT/f49b8fc0ffbd8ab4d3460cec11f6d2a6/Voorstel_landingspagina_75_jaar-30.png" alt="Exploria" loading="lazy">
                    </a>
                </div>
                <div class="carousel-item">
                    <a href="https://www.plantyn.com/fr-BE/secondaire/sciences-humaines/Odyssea-pacte" target="_blank" rel="noopener noreferrer">
                        <img src="https://images.ctfassets.net/1kqffs4iocas/vOaQ6CSDKAl5NtH5bJ6xL/ba00b03cff2950f726a1b562b4eaca4c/Voorstel_landingspagina_75_jaar-31.png" alt="Odyssea" loading="lazy">
                    </a>
                </div>
                <div class="carousel-item">
                    <a href="https://www.plantyn.com/fr-BE/primaire/francais/motopia-lecture" target="_blank" rel="noopener noreferrer">
                        <img src="https://images.ctfassets.net/1kqffs4iocas/4RwENkEwjHxaoZipOsLs6H/d181a33f9376351cbf9c23efba0cc557/Voorstel_landingspagina_75_jaar-32.png" alt="Motopia lecture" loading="lazy">
                    </a>
                </div>
            </div>
            <button class="carousel-button next" id="nextBtn" aria-label="Suivant">›</button>
        </div>
        <div class="carousel-dots" id="carouselDots"></div>
    </div>
    <script>
        const container = document.getElementById('carouselContainer');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');
        const dotsContainer = document.getElementById('carouselDots');
        const items = document.querySelectorAll('.carousel-item');
        let currentIndex = 0;
        let itemsPerView = 3;
        function updateItemsPerView() {
            const width = window.innerWidth;
            if (width <= 768) {
                itemsPerView = 1;
            } else if (width <= 1200) {
                itemsPerView = 2;
            } else {
                itemsPerView = 3;
            }
        }
        function createDots() {
            dotsContainer.innerHTML = '';
            const totalPages = Math.ceil(items.length / itemsPerView);
            for (let i = 0; i < totalPages; i++) {
                const dot = document.createElement('div');
                dot.classList.add('dot');
                if (i === 0) dot.classList.add('active');
                dot.addEventListener('click', () => goToPage(i));
                dotsContainer.appendChild(dot);
            }
        }
        function updateCarousel() {
            const itemWidth = items[0].offsetWidth;
            const gap = 12;
            const offset = currentIndex * (itemWidth + gap);
            container.style.transform = `translateX(-${offset}px)`;
            updateButtons();
            updateDots();
        }
        function updateButtons() {
            const maxIndex = items.length - itemsPerView;
            prevBtn.disabled = currentIndex === 0;
            nextBtn.disabled = currentIndex >= maxIndex;
        }
        function updateDots() {
            const dots = document.querySelectorAll('.dot');
            const currentPage = Math.floor(currentIndex / itemsPerView);
            dots.forEach((dot, index) => {
                dot.classList.toggle('active', index === currentPage);
            });
        }
        function goToPage(pageIndex) {
            currentIndex = pageIndex * itemsPerView;
            if (currentIndex > items.length - itemsPerView) {
                currentIndex = items.length - itemsPerView;
            }
            updateCarousel();
        }
        prevBtn.addEventListener('click', () => {
            if (currentIndex > 0) {
                currentIndex--;
                updateCarousel();
            }
        });
        nextBtn.addEventListener('click', () => {
            const maxIndex = items.length - itemsPerView;
            if (currentIndex < maxIndex) {
                currentIndex++;
                updateCarousel();
            }
        });
        window.addEventListener('resize', () => {
            updateItemsPerView();
            createDots();
            currentIndex = 0;
            updateCarousel();
        });
        // Touch support voor mobiel
        let touchStartX = 0;
        let touchEndX = 0;
        container.addEventListener('touchstart', (e) => {
            touchStartX = e.changedTouches[0].screenX;
        });
        container.addEventListener('touchend', (e) => {
            touchEndX = e.changedTouches[0].screenX;
            handleSwipe();
        });
        function handleSwipe() {
            const swipeThreshold = 50;
            const diff = touchStartX - touchEndX;
            if (Math.abs(diff) > swipeThreshold) {
                if (diff > 0) {
                    nextBtn.click();
                } else {
                    prevBtn.click();
                }
            }
        }
        updateItemsPerView();
        createDots();
        updateCarousel();
    </script>
</body>
</html>

iFrame - encore plus d'inspiration

<section style="max-width: 1180px; margin: 0 auto; padding: 20px;">

  
  <h2 style="
    font-family: 'Trebuchet MS', Trebuchet, Arial, sans-serif;
    font-size: 32px;
    line-height: 48px;
    font-weight: 400;
    margin-bottom: 24px;
  ">
    Donnez également votre avis sur les thèses abordées lors des sessions :
  </h2>
<div style="display: flex; justify-content: center;">
<iframe 
        width="1180" 
        height="950"
        src="https://eu.mar.medallia.com/?e=100012402&d=i&h=BACAAE0503691DB&l=du" 
        title="Partagez votre avis"
        frameborder="0"
        allowfullscreen
        style="display: block;"
        >
</iframe>
</div>

Enseignement fondamental

Enseignement secondaire

Parascolaire

Vers le catalogue pour les clients professionnels

Vers le webshop pour les clients particuliers

75 ans apprendre ensemble

75 ans Plantyn

Des histoires vraies,
qui viennent du cœur

Jetez un coup d'œil dans les coulisses