La mia scuola

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

4 September 2025

Frammento HTML di animazione della porta della stanza CSS

21 September 2024

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>École Maternelle Les Petits Explorateurs</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: '#5D5CDE',
                        secondary: '#FF9F43',
                        accent: '#54C8E8',
                        success: '#5CB85C',
                        info: '#5BC0DE',
                        warning: '#F0AD4E',
                        danger: '#D9534F',
                    },
                    animation: {
                        'float': 'float 6s ease-in-out infinite',
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-10px)' },
                        }
                    }
                }
            }
        }

// Détection du mode sombre
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            document.documentElement.classList.add('dark');
        }
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
            if (event.matches) {
                document.documentElement.classList.add('dark');
            } else {
                document.documentElement.classList.remove('dark');
            }
        });

// Gestionnaire du formulaire de contact
            document.getElementById('contactForm').addEventListener('submit', function(e) {
                e.preventDefault();
                const name = document.getElementById('name').value;
                const email = document.getElementById('email').value;
                const message = document.getElementById('message').value;
                
                const formStatus = document.getElementById('formStatus');
                formStatus.textContent = `Merci ${name} ! Votre message a été envoyé.`;
                formStatus.classList.remove('hidden', 'text-danger');
                formStatus.classList.add('text-success');
                
                // Réinitialiser le formulaire
                this.reset();
                
                // Masquer le message après quelques secondes
                setTimeout(() => {
                    formStatus.classList.add('hidden');
                }, 5000);
            });

// Générer la galerie d'images
            generateGallery();

// Générer le calendrier
            generateCalendar();
        });

// Fonction pour générer des images aléatoires pour la galerie
        function generateGallery() {
            const gallery = document.getElementById('galleryContainer');
            const activities = [
                'Peinture colorée avec les doigts',
                'Atelier de lecture en groupe',
                'Jeux dans le jardin',
                'Éveil musical et danse',
                'Atelier de pâte à modeler',
                'Temps calme et sieste',
                'Sortie au parc',
                'Fête d\'anniversaire',
                'Projection de dessins animés éducatifs'
            ];
            
            // Générer 9 images colorées
            for (let i = 0; i < 9; i++) {
                const randomColor = `hsl(${Math.random() * 360}, 80%, 75%)`;
                const card = document.createElement('div');
                card.className = 'rounded-lg overflow-hidden shadow-lg transition-transform duration-300 hover:scale-105';
                
                // Créer une image colorée
                const canvas = document.createElement('canvas');
                canvas.width = 300;
                canvas.height = 200;
                const ctx = canvas.getContext('2d');
                
                // Dessin de formes aléatoires pour simuler des activités d'enfants
                ctx.fillStyle = randomColor;
                ctx.fillRect(0, 0, 300, 200);
                
                // Dessiner quelques cercles pour simuler des enfants
                for (let j = 0; j < 5; j++) {
                    ctx.beginPath();
                    ctx.fillStyle = `hsl(${Math.random() * 360}, 80%, 60%)`;
                    const x = Math.random() * 300;
                    const y = Math.random() * 200;
                    const radius = 10 + Math.random() * 20;
                    ctx.arc(x, y, radius, 0, Math.PI * 2);
                    ctx.fill();
                }
                
                const img = document.createElement('img');
                img.src = canvas.toDataURL();
                img.alt = activities[i % activities.length];
                img.className = 'w-full h-48 object-cover';
                
                const body = document.createElement('div');
                body.className = 'p-4 bg-white dark:bg-gray-800';
                
                const title = document.createElement('h3');
                title.className = 'text-lg font-semibold mb-2 text-gray-800 dark:text-white';
                title.textContent = activities[i % activities.length];
                
                body.appendChild(title);
                card.appendChild(img);
                card.appendChild(body);
                gallery.appendChild(card);
            }
        }

// Fonction pour générer un calendrier d'événements
        function generateCalendar() {
            const calendarContainer = document.getElementById('calendarContainer');
            const currentDate = new Date();
            const events = [
                { date: '2023-09-04', title: 'Rentrée scolaire', description: 'Accueil des élèves à 8h30' },
                { date: '2023-10-21', title: 'Fête d\'automne', description: 'Activités autour des saisons et dégustation de fruits d\'automne' },
                { date: '2023-12-15', title: 'Spectacle de Noël', description: 'Représentation par les enfants et visite du Père Noël' },
                { date: '2024-02-10', title: 'Carnaval', description: 'Défilé costumé dans l\'école' },
                { date: '2024-03-20', title: 'Journée Portes Ouvertes', description: 'Accueil des futurs élèves et leurs parents' },
                { date: '2024-04-15', title: 'Chasse aux œufs', description: 'Activité de Pâques dans le jardin de l\'école' },
                { date: '2024-06-25', title: 'Fête de fin d\'année', description: 'Spectacle et remise des diplômes' }
            ];
            
            events.forEach(event => {
                const eventDate = new Date(event.date);
                
                // Créer la carte d'événement
                const eventCard = document.createElement('div');
                eventCard.className = 'mb-4 p-4 border-l-4 border-accent bg-white dark:bg-gray-800 rounded shadow-md hover:shadow-lg transition-shadow';
                
                const header = document.createElement('div');
                header.className = 'flex justify-between items-center';
                
                const title = document.createElement('h3');
                title.className = 'text-lg font-semibold text-gray-800 dark:text-white';
                title.textContent = event.title;
                
                const date = document.createElement('span');
                date.className = 'text-sm font-medium text-gray-600 dark:text-gray-300';
                date.textContent = eventDate.toLocaleDateString('fr-FR', { 
                    day: 'numeric', 
                    month: 'long', 
                    year: 'numeric' 
                });
                
                const description = document.createElement('p');
                description.className = 'mt-2 text-gray-600 dark:text-gray-300';
                description.textContent = event.description;
                
                header.appendChild(title);
                header.appendChild(date);
                
                eventCard.appendChild(header);
                eventCard.appendChild(description);
                
                calendarContainer.appendChild(eventCard);
            });
        }
    </script>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 min-h-screen font-sans">
    
    <header class="bg-white dark:bg-gray-800 shadow-md">
        <div class="container mx-auto px-4 py-3">
            <div class="flex justify-between items-center">
                <div class="flex items-center">
                    <div class="text-primary text-4xl mr-3 animate-float">
                        <i class="fas fa-school"></i>
                    </div>
                    <div>
                        <h1 class="text-xl md:text-2xl font-bold text-primary">Les Petits Explorateurs</h1>
                        <p class="text-sm text-gray-600 dark:text-gray-400">École Maternelle</p>
                    </div>
                </div>
                
                
                <nav class="hidden md:flex space-x-1">
                    <a href="#accueil" class="bg-accent text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Accueil</a>
                    <a href="#ecole" class="text-gray-700 dark:text-gray-300 hover:bg-accent hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Notre École</a>
                    <a href="#equipe" class="text-gray-700 dark:text-gray-300 hover:bg-accent hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Équipe</a>
                    <a href="#activites" class="text-gray-700 dark:text-gray-300 hover:bg-accent hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Activités</a>
                    <a href="#calendrier" class="text-gray-700 dark:text-gray-300 hover:bg-accent hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Calendrier</a>
                    <a href="#contact" class="text-gray-700 dark:text-gray-300 hover:bg-accent hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Contact</a>
                </nav>
                
                
                <button id="mobileMenuButton" class="md:hidden text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 p-2 rounded-md">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
            
            
            <div id="mobileMenu" class="md:hidden hidden mt-3 pb-3">
                <nav class="flex flex-col space-y-2">
                    <a href="#accueil" class="bg-accent text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Accueil</a>
                    <a href="#ecole" class="text-gray-700 dark:text-gray-300 hover:bg-accent hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Notre École</a>
                    <a href="#equipe" class="text-gray-700 dark:text-gray-300 hover:bg-accent hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Équipe</a>
                    <a href="#activites" class="text-gray-700 dark:text-gray-300 hover:bg-accent hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Activités</a>
                    <a href="#calendrier" class="text-gray-700 dark:text-gray-300 hover:bg-accent hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Calendrier</a>
                    <a href="#contact" class="text-gray-700 dark:text-gray-300 hover:bg-accent hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Contact</a>
                </nav>
            </div>
        </div>
    </header>
    
    <main class="container mx-auto px-4 py-8">
        
        <section id="accueil" class="mb-12">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
                <div class="md:flex">
                    <div class="md:w-1/2 p-6 md:p-8">
                        <h2 class="text-2xl md:text-3xl font-bold text-primary mb-4">Bienvenue à l'École Maternelle Les Petits Explorateurs</h2>
                        <p class="text-gray-600 dark:text-gray-300 mb-6">Nous accueillons les enfants de 3 à 6 ans dans un environnement bienveillant et stimulant. Notre établissement favorise l'épanouissement et l'apprentissage par le jeu, la créativité et la découverte.</p>
                        <div class="flex space-x-4">
                            <a href="#ecole" class="bg-primary hover:bg-opacity-90 text-white px-4 py-2 rounded-md font-medium transition-colors">Découvrir notre école</a>
                            <a href="#contact" class="bg-secondary hover:bg-opacity-90 text-white px-4 py-2 rounded-md font-medium transition-colors">Nous contacter</a>
                        </div>
                    </div>
                    <div class="md:w-1/2 bg-accent p-8 flex items-center justify-center">
                        <div class="text-center">
                            <div class="text-white text-8xl mb-4 animate-float">
                                <i class="fas fa-child"></i>
                            </div>
                            <h3 class="text-xl font-bold text-white">Inscriptions ouvertes !</h3>
                            <p class="text-white mt-2">Pour l'année scolaire 2023-2024</p>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-100 dark:bg-gray-700 p-4 md:p-6">
                    <div class="flex flex-wrap justify-around text-center">
                        <div class="px-4 py-2">
                            <div class="text-primary text-2xl mb-2">
                                <i class="fas fa-clock"></i>
                            </div>
                            <h4 class="font-semibold">Horaires</h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Lun-Ven: 8h30 - 16h30</p>
                        </div>
                        <div class="px-4 py-2">
                            <div class="text-primary text-2xl mb-2">
                                <i class="fas fa-utensils"></i>
                            </div>
                            <h4 class="font-semibold">Cantine</h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Repas équilibrés</p>
                        </div>
                        <div class="px-4 py-2">
                            <div class="text-primary text-2xl mb-2">
                                <i class="fas fa-user-friends"></i>
                            </div>
                            <h4 class="font-semibold">Effectifs</h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Petites classes</p>
                        </div>
                        <div class="px-4 py-2">
                            <div class="text-primary text-2xl mb-2">
                                <i class="fas fa-music"></i>
                            </div>
                            <h4 class="font-semibold">Activités</h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Éveil artistique</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        
        <section id="ecole" class="mb-12 hidden">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 md:p-8">
                <h2 class="text-2xl md:text-3xl font-bold text-primary mb-6">Notre École</h2>
                
                <div class="space-y-6">
                    <div class="bg-gray-50 dark:bg-gray-700 p-4 md:p-6 rounded-lg">
                        <h3 class="text-xl font-semibold mb-3 flex items-center">
                            <span class="text-secondary mr-2"><i class="fas fa-star"></i></span>
                            Notre philosophie
                        </h3>
                        <p class="text-gray-600 dark:text-gray-300">
                            À l'École Les Petits Explorateurs, nous croyons que chaque enfant est unique et apprend à son rythme. Notre approche pédagogique est centrée sur l'enfant, favorisant sa curiosité naturelle et son désir d'apprendre. Nous privilégions l'apprentissage par le jeu et l'expérimentation.
                        </p>
                    </div>
                    
                    <div class="bg-gray-50 dark:bg-gray-700 p-4 md:p-6 rounded-lg">
                        <h3 class="text-xl font-semibold mb-3 flex items-center">
                            <span class="text-secondary mr-2"><i class="fas fa-building"></i></span>
                            Nos installations
                        </h3>
                        <p class="text-gray-600 dark:text-gray-300">
                            Notre école dispose de salles de classe spacieuses et lumineuses, chacune équipée de matériel pédagogique adapté aux différents âges. Un jardin sécurisé permet aux enfants de profiter d'activités en plein air. Nous disposons également d'une salle de motricité et d'un espace dédié à la sieste.
                        </p>
                    </div>
                    
                    <div class="bg-gray-50 dark:bg-gray-700 p-4 md:p-6 rounded-lg">
                        <h3 class="text-xl font-semibold mb-3 flex items-center">
                            <span class="text-secondary mr-2"><i class="fas fa-book"></i></span>
                            Notre programme
                        </h3>
                        <p class="text-gray-600 dark:text-gray-300">
                            Notre programme éducatif suit les directives de l'Éducation Nationale tout en intégrant des approches pédagogiques innovantes. Nous accordons une importance particulière au langage, à la socialisation, à l'éveil artistique et à la découverte du monde. Des activités d'initiation à l'anglais sont également proposées dès la moyenne section.
                        </p>
                    </div>
                    
                    <div class="grid md:grid-cols-3 gap-4 mt-8">
                        <div class="bg-accent bg-opacity-20 p-4 rounded-lg text-center">
                            <div class="text-accent text-3xl mb-2">
                                <i class="fas fa-paint-brush"></i>
                            </div>
                            <h4 class="font-semibold">Créativité</h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Encouragée par des activités variées</p>
                        </div>
                        <div class="bg-secondary bg-opacity-20 p-4 rounded-lg text-center">
                            <div class="text-secondary text-3xl mb-2">
                                <i class="fas fa-seedling"></i>
                            </div>
                            <h4 class="font-semibold">Autonomie</h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Développée progressivement</p>
                        </div>
                        <div class="bg-primary bg-opacity-20 p-4 rounded-lg text-center">
                            <div class="text-primary text-3xl mb-2">
                                <i class="fas fa-users"></i>
                            </div>
                            <h4 class="font-semibold">Socialisation</h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Au cœur de notre approche</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        
        <section id="equipe" class="mb-12 hidden">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 md:p-8">
                <h2 class="text-2xl md:text-3xl font-bold text-primary mb-6">Notre Équipe</h2>
                
                <p class="text-gray-600 dark:text-gray-300 mb-8">Notre équipe pédagogique est composée de professionnels qualifiés et passionnés par l'éducation de la petite enfance. Chaque membre de l'équipe s'engage à offrir un environnement bienveillant et stimulant pour favoriser l'épanouissement de chaque enfant.</p>
                
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                    
                    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow">
                        <div class="h-48 bg-accent flex items-center justify-center">
                            <span class="text-white text-7xl">
                                <i class="fas fa-user-circle"></i>
                            </span>
                        </div>
                        <div class="p-4">
                            <h3 class="text-lg font-semibold">Marie Dupont</h3>
                            <p class="text-primary font-medium mb-2">Directrice</p>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Avec plus de 15 ans d'expérience en éducation, Marie veille au bon fonctionnement de l'école et à l'application du projet pédagogique.</p>
                        </div>
                    </div>
                    
                    
                    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow">
                        <div class="h-48 bg-secondary flex items-center justify-center">
                            <span class="text-white text-7xl">
                                <i class="fas fa-user-circle"></i>
                            </span>
                        </div>
                        <div class="p-4">
                            <h3 class="text-lg font-semibold">Sophie Martin</h3>
                            <p class="text-primary font-medium mb-2">Enseignante Petite Section</p>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Spécialiste de la petite enfance, Sophie accompagne les plus jeunes dans leurs premiers pas à l'école avec douceur et patience.</p>
                        </div>
                    </div>
                    
                    
                    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow">
                        <div class="h-48 bg-primary flex items-center justify-center">
                            <span class="text-white text-7xl">
                                <i class="fas fa-user-circle"></i>
                            </span>
                        </div>
                        <div class="p-4">
                            <h3 class="text-lg font-semibold">Thomas Bernard</h3>
                            <p class="text-primary font-medium mb-2">Enseignant Moyenne Section</p>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Passionné par les pédagogies alternatives, Thomas intègre des approches innovantes pour stimuler la curiosité des enfants.</p>
                        </div>
                    </div>
                    
                    
                    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow">
                        <div class="h-48 bg-info flex items-center justify-center">
                            <span class="text-white text-7xl">
                                <i class="fas fa-user-circle"></i>
                            </span>
                        </div>
                        <div class="p-4">
                            <h3 class="text-lg font-semibold">Camille Petit</h3>
                            <p class="text-primary font-medium mb-2">Enseignante Grande Section</p>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Spécialisée dans la préparation à l'entrée au CP, Camille accompagne les enfants dans l'acquisition des prérequis à la lecture et à l'écriture.</p>
                        </div>
                    </div>
                    
                    
                    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow">
                        <div class="h-48 bg-success flex items-center justify-center">
                            <span class="text-white text-7xl">
                                <i class="fas fa-user-circle"></i>
                            </span>
                        </div>
                        <div class="p-4">
                            <h3 class="text-lg font-semibold">Laura Blanc</h3>
                            <p class="text-primary font-medium mb-2">ATSEM</p>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Laura assiste les enseignants et veille au bien-être des enfants au quotidien. Elle participe activement aux activités et aux soins des plus petits.</p>
                        </div>
                    </div>
                    
                    
                    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow">
                        <div class="h-48 bg-warning flex items-center justify-center">
                            <span class="text-white text-7xl">
                                <i class="fas fa-user-circle"></i>
                            </span>
                        </div>
                        <div class="p-4">
                            <h3 class="text-lg font-semibold">Nicolas Roux</h3>
                            <p class="text-primary font-medium mb-2">Intervenant Musique</p>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Musicien professionnel, Nicolas anime des ateliers d'éveil musical chaque semaine pour toutes les sections.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        
        <section id="activites" class="mb-12 hidden">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 md:p-8">
                <h2 class="text-2xl md:text-3xl font-bold text-primary mb-6">Nos Activités</h2>
                
                <p class="text-gray-600 dark:text-gray-300 mb-8">À l'École Les Petits Explorateurs, nous proposons une variété d'activités adaptées à chaque tranche d'âge pour stimuler la créativité, la curiosité et le développement global de l'enfant.</p>
                
                <div id="galleryContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    
                </div>
                
                <div class="mt-10 space-y-6">
                    <h3 class="text-xl font-semibold text-primary">Nos ateliers hebdomadaires</h3>
                    <div class="grid md:grid-cols-2 gap-4">
                        <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg flex">
                            <div class="text-accent text-2xl mr-4">
                                <i class="fas fa-music"></i>
                            </div>
                            <div>
                                <h4 class="font-semibold">Éveil musical</h4>
                                <p class="text-sm text-gray-600 dark:text-gray-400">Découverte des instruments, chants et comptines.</p>
                            </div>
                        </div>
                        <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg flex">
                            <div class="text-accent text-2xl mr-4">
                                <i class="fas fa-palette"></i>
                            </div>
                            <div>
                                <h4 class="font-semibold">Arts plastiques</h4>
                                <p class="text-sm text-gray-600 dark:text-gray-400">Exploration de différentes techniques artistiques.</p>
                            </div>
                        </div>
                        <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg flex">
                            <div class="text-accent text-2xl mr-4">
                                <i class="fas fa-running"></i>
                            </div>
                            <div>
                                <h4 class="font-semibold">Psychomotricité</h4>
                                <p class="text-sm text-gray-600 dark:text-gray-400">Développement de la motricité globale et fine.</p>
                            </div>
                        </div>
                        <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg flex">
                            <div class="text-accent text-2xl mr-4">
                                <i class="fas fa-book-reader"></i>
                            </div>
                            <div>
                                <h4 class="font-semibold">Heure du conte</h4>
                                <p class="text-sm text-gray-600 dark:text-gray-400">Découverte de la littérature jeunesse.</p>
                            </div>
                        </div>
                        <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg flex">
                            <div class="text-accent text-2xl mr-4">
                                <i class="fas fa-seedling"></i>
                            </div>
                            <div>
                                <h4 class="font-semibold">Jardin pédagogique</h4>
                                <p class="text-sm text-gray-600 dark:text-gray-400">Découverte de la nature et des plantes.</p>
                            </div>
                        </div>
                        <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg flex">
                            <div class="text-accent text-2xl mr-4">
                                <i class="fas fa-globe-europe"></i>
                            </div>
                            <div>
                                <h4 class="font-semibold">Éveil aux langues</h4>
                                <p class="text-sm text-gray-600 dark:text-gray-400">Initiation à l'anglais par le jeu.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        
        <section id="calendrier" class="mb-12 hidden">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 md:p-8">
                <h2 class="text-2xl md:text-3xl font-bold text-primary mb-6">Calendrier des événements</h2>
                
                <p class="text-gray-600 dark:text-gray-300 mb-8">Retrouvez ci-dessous les dates importantes et les événements à venir pour l'année scolaire.</p>
                
                <div id="calendarContainer" class="space-y-4">
                    
                </div>
                
                <div class="mt-8 bg-primary bg-opacity-10 p-6 rounded-lg">
                    <h3 class="text-lg font-semibold text-primary mb-3">Vacances scolaires 2023-2024</h3>
                    <div class="grid md:grid-cols-2 gap-4">
                        <div>
                            <p class="font-medium">Vacances de la Toussaint</p>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Du 21 octobre au 6 novembre 2023</p>
                        </div>
                        <div>
                            <p class="font-medium">Vacances de Noël</p>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Du 23 décembre 2023 au 8 janvier 2024</p>
                        </div>
                        <div>
                            <p class="font-medium">Vacances d'hiver</p>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Du 10 février au 26 février 2024</p>
                        </div>
                        <div>
                            <p class="font-medium">Vacances de printemps</p>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Du 6 avril au 22 avril 2024</p>
                        </div>
                        <div>
                            <p class="font-medium">Pont de l'Ascension</p>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Du 9 mai au 13 mai 2024</p>
                        </div>
                        <div>
                            <p class="font-medium">Vacances d'été</p>
                            <p class="text-sm text-gray-600 dark:text-gray-400">À partir du 6 juillet 2024</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        
        <section id="contact" class="mb-12 hidden">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 md:p-8">
                <h2 class="text-2xl md:text-3xl font-bold text-primary mb-6">Contactez-nous</h2>
                
                <div class="md:flex gap-8">
                    <div class="md:w-1/2 mb-8 md:mb-0">
                        <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg mb-6">
                            <h3 class="text-xl font-semibold mb-4 flex items-center">
                                <span class="text-primary mr-2"><i class="fas fa-info-circle"></i></span>
                                Informations
                            </h3>
                            <div class="space-y-3">
                                <p class="flex items-start">
                                    <span class="text-primary mr-3 mt-1"><i class="fas fa-map-marker-alt"></i></span>
                                    <span class="text-gray-600 dark:text-gray-300">123 Rue des Écoles, 75001 Paris</span>
                                </p>
                                <p class="flex items-start">
                                    <span class="text-primary mr-3 mt-1"><i class="fas fa-phone"></i></span>
                                    <span class="text-gray-600 dark:text-gray-300">01 23 45 67 89</span>
                                </p>
                                <p class="flex items-start">
                                    <span class="text-primary mr-3 mt-1"><i class="fas fa-envelope"></i></span>
                                    <span class="text-gray-600 dark:text-gray-300">contact@petitsexplorateurs.fr</span>
                                </p>
                                <p class="flex items-start">
                                    <span class="text-primary mr-3 mt-1"><i class="fas fa-clock"></i></span>
                                    <span class="text-gray-600 dark:text-gray-300">
                                        Lundi au vendredi : 8h00 - 18h30<br>
                                        Secrétariat : 8h30 - 12h00 et 13h30 - 16h30
                                    </span>
                                </p>
                            </div>
                        </div>
                        
                        <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg">
                            <h3 class="text-xl font-semibold mb-4 flex items-center">
                                <span class="text-primary mr-2"><i class="fas fa-question-circle"></i></span>
                                Questions fréquentes
                            </h3>
                            <div class="space-y-4">
                                <div>
                                    <h4 class="font-medium text-primary">Comment inscrire mon enfant ?</h4>
                                    <p class="text-sm text-gray-600 dark:text-gray-300">Les inscriptions se font en mairie. N'hésitez pas à nous contacter pour une visite de l'école.</p>
                                </div>
                                <div>
                                    <h4 class="font-medium text-primary">Y a-t-il une garderie ?</h4>
                                    <p class="text-sm text-gray-600 dark:text-gray-300">Oui, nous proposons un accueil périscolaire de 7h30 à 8h30 et de 16h30 à 18h30.</p>
                                </div>
                                <div>
                                    <h4 class="font-medium text-primary">Quelle est la taille des classes ?</h4>
                                    <p class="text-sm text-gray-600 dark:text-gray-300">Nos classes comptent en moyenne 24 élèves, avec un enseignant et une ATSEM en petite et moyenne section.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="md:w-1/2">
                        <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg">
                            <h3 class="text-xl font-semibold mb-4 flex items-center">
                                <span class="text-primary mr-2"><i class="fas fa-paper-plane"></i></span>
                                Formulaire de contact
                            </h3>
                            <form id="contactForm" class="space-y-4">
                                <div>
                                    <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Nom complet</label>
                                    <input type="text" id="name" name="name" required class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-2 focus:ring-primary focus:border-primary dark:bg-gray-800 dark:text-white text-base">
                                </div>
                                <div>
                                    <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label>
                                    <input type="email" id="email" name="email" required class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-2 focus:ring-primary focus:border-primary dark:bg-gray-800 dark:text-white text-base">
                                </div>
                                <div>
                                    <label for="subject" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Sujet</label>
                                    <select id="subject" name="subject" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-2 focus:ring-primary focus:border-primary dark:bg-gray-800 dark:text-white text-base">
                                        <option value="inscription">Inscription</option>
                                        <option value="visite">Demande de visite</option>
                                        <option value="information">Demande d'informations</option>
                                        <option value="autre">Autre</option>
                                    </select>
                                </div>
                                <div>
                                    <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Message</label>
                                    <textarea id="message" name="message" rows="4" required class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-2 focus:ring-primary focus:border-primary dark:bg-gray-800 dark:text-white text-base">

La mia scuola

Consigliato

Frammento HTML di animazione della porta della stanza CSS

Agitare la carta

Lampada animata

HTML

CSS

JS

Consigliato

Frammento HTML di animazione della porta della stanza CSS

Agitare la carta

Lampada animata

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS