Lycée Les Lauriers: School Info, Cycles, & Enrollment

649 spiiddev

Ouvrir dans l'éditeur Publiez votre code

Lycée Les Lauriers: School Info, Cycles, & Enrollment

Recommandé

28 August 2025

Site Web d'architecture et de conception avec Tailwind CSS

19 November 2024

code de test de l'iPhone 16

23 June 2026

Cinq nuits sous le manteau d'Epstein

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lycée Polyvalent Les Lauriers</title>
    <style>
        /* Styles de base */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }
        
        body {
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
        }
        
        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        /* Header */
        header {
            background: linear-gradient(135deg, #1e3c72, #2a5298);
            color: white;
            padding: 20px 0;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .logo {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            margin-bottom: 10px;
        }
        
        .logo i {
            font-size: 2.5em;
            color: #ffd700;
        }
        
        .logo h1 {
            font-size: 2.2em;
        }
        
        .subtitle {
            font-size: 1.1em;
            opacity: 0.9;
            margin-bottom: 15px;
        }
        
        /* Navigation */
        nav {
            background-color: #2a5298;
            padding: 10px 0;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .nav-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 20px;
        }
        
        nav a {
            color: white;
            text-decoration: none;
            padding: 8px 15px;
            border-radius: 4px;
            transition: all 0.3s;
            font-weight: bold;
        }
        
        nav a:hover {
            background-color: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }
        
        /* Sections */
        section {
            background-color: white;
            margin: 25px 0;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        }
        
        h2 {
            color: #1e3c72;
            border-bottom: 3px solid #ffd700;
            padding-bottom: 10px;
            margin-bottom: 20px;
            font-size: 1.8em;
        }
        
        h3 {
            color: #2a5298;
            margin: 15px 0 10px 0;
        }
        
        /* Cycle scolaire */
        .cycle {
            border-left: 4px solid #1e3c72;
            padding-left: 15px;
            margin: 20px 0;
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 0 5px 5px 0;
        }
        
        .cycle-title {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }
        
        .cycle-title i {
            color: #1e3c72;
            font-size: 1.2em;
        }
        
        .niveaux {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }
        
        .niveau {
            background-color: white;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            border-top: 3px solid #2a5298;
        }
        
        .niveau h4 {
            color: #2a5298;
            margin-bottom: 5px;
        }
        
        /* Filières */
        .filieres {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        
        .filiere {
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            padding: 20px;
            border-radius: 8px;
            border-left: 4px solid #1e3c72;
        }
        
        .filiere h4 {
            color: #1e3c72;
            margin-bottom: 10px;
        }
        
        /* Liste des matières */
        .matieres {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 15px;
        }
        
        .matiere {
            background-color: #e9ecef;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 0.9em;
            color: #333;
        }
        
        /* Équipe */
        .equipe-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        
        .membre {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            border-top: 3px solid #2a5298;
        }
        
        .membre i {
            font-size: 2em;
            color: #1e3c72;
            margin-bottom: 10px;
        }
        
        /* Infrastructure */
        .infra-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        
        .infra-item {
            text-align: center;
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 8px;
            transition: transform 0.3s;
        }
        
        .infra-item:hover {
            transform: translateY(-5px);
        }
        
        .infra-item i {
            font-size: 2em;
            color: #1e3c72;
            margin-bottom: 15px;
        }
        
        /* Tableau des horaires */
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            background-color: white;
        }
        
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        
        th {
            background-color: #1e3c72;
            color: white;
        }
        
        tr:nth-child(even) {
            background-color: #f8f9fa;
        }
        
        /* Contact */
        .contact-info {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }
        
        .contact-item {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 5px;
        }
        
        .contact-item i {
            color: #1e3c72;
            font-size: 1.5em;
        }
        
        /* Formulaire */
        form {
            margin-top: 20px;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #333;
        }
        
        input, select, textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1em;
        }
        
        button {
            background-color: #1e3c72;
            color: white;
            padding: 12px 30px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1em;
            font-weight: bold;
            transition: background-color 0.3s;
        }
        
        button:hover {
            background-color: #2a5298;
        }
        
        /* Footer */
        footer {
            background-color: #1e3c72;
            color: white;
            padding: 40px 0 20px 0;
            margin-top: 40px;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 30px;
            margin-bottom: 30px;
        }
        
        .footer-section h4 {
            color: #ffd700;
            margin-bottom: 15px;
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 8px;
        }
        
        .footer-links a {
            color: white;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-links a:hover {
            color: #ffd700;
        }
        
        .copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.8);
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .container {
                width: 95%;
                padding: 10px;
            }
            
            .logo h1 {
                font-size: 1.8em;
            }
            
            section {
                padding: 20px;
                margin: 15px 0;
            }
            
            .nav-container {
                flex-direction: column;
                align-items: center;
                gap: 10px;
            }
            
            nav a {
                width: 100%;
                text-align: center;
            }
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    
    <header>
        <div class="container">
            <div class="logo">
                <i class="fas fa-graduation-cap"></i>
                <h1>Lycée Polyvalent Les Lauriers</h1>
            </div>
            <p class="subtitle">Établissement scolaire de la Maternelle à la Terminale</p>
            <p>Excellence académique - Épanouissement personnel - Ouverture internationale</p>
        </div>
    </header>

<nav>
        <div class="container nav-container">
            <a href="#presentation">Présentation</a>
            <a href="#cycles">Cycles scolaires</a>
            <a href="#filieres">Filières du lycée</a>
            <a href="#equipe">Équipe pédagogique</a>
            <a href="#infrastructure">Infrastructure</a>
            <a href="#horaires">Horaires</a>
            <a href="#contact">Contact</a>
            <a href="#inscription">Inscription</a>
        </div>
    </nav>

<div class="container">
        
        <section id="presentation">
            <h2>Présentation de l'établissement</h2>
            <p>Fondé en 1975, le Lycée Polyvalent Les Lauriers est un établissement d'enseignement complet qui accueille les élèves de la maternelle (3 ans) jusqu'à la terminale (18 ans).</p>
            
            <div class="cycle">
                <div class="cycle-title">
                    <i class="fas fa-school"></i>
                    <h3>Notre mission</h3>
                </div>
                <p>Nous nous engageons à offrir un parcours éducatif cohérent et progressif, permettant à chaque élève de développer son plein potentiel dans un environnement bienveillant et stimulant.</p>
            </div>
            
            <div class="cycle">
                <div class="cycle-title">
                    <i class="fas fa-chart-line"></i>
                    <h3>Nos résultats</h3>
                </div>
                <ul>
                    <li>95% de réussite au baccalauréat (2023)</li>
                    <li>87% de mentions au baccalauréat</li>
                    <li>100% de réussite au brevet des collèges</li>
                    <li>92% de passage en 2nde générale</li>
                </ul>
            </div>
        </section>

<section id="cycles">
            <h2>Les cycles scolaires</h2>
            <p>Notre établissement couvre l'ensemble du parcours scolaire français :</p>
            
            
            <div class="cycle">
                <div class="cycle-title">
                    <i class="fas fa-child"></i>
                    <h3>Cycle 1 - Maternelle</h3>
                </div>
                <p><strong>Âges : 3 à 6 ans</strong></p>
                <p>Apprentissage par le jeu, socialisation, développement du langage et des compétences motrices.</p>
                <div class="niveaux">
                    <div class="niveau">
                        <h4>Petite Section (PS)</h4>
                        <p>3-4 ans</p>
                    </div>
                    <div class="niveau">
                        <h4>Moyenne Section (MS)</h4>
                        <p>4-5 ans</p>
                    </div>
                    <div class="niveau">
                        <h4>Grande Section (GS)</h4>
                        <p>5-6 ans</p>
                    </div>
                </div>
            </div>
            
            
            <div class="cycle">
                <div class="cycle-title">
                    <i class="fas fa-book-reader"></i>
                    <h3>Cycle 2 - Élémentaire</h3>
                </div>
                <p><strong>Âges : 6 à 11 ans</strong></p>
                <p>Apprentissage des fondamentaux : lire, écrire, compter.</p>
                <div class="niveaux">
                    <div class="niveau">
                        <h4>CP</h4>
                        <p>6-7 ans</p>
                    </div>
                    <div class="niveau">
                        <h4>CE1</h4>
                        <p>7-8 ans</p>
                    </div>
                    <div class="niveau">
                        <h4>CE2</h4>
                        <p>8-9 ans</p>
                    </div>
                    <div class="niveau">
                        <h4>CM1</h4>
                        <p>9-10 ans</p>
                    </div>
                    <div class="niveau">
                        <h4>CM2</h4>
                        <p>10-11 ans</p>
                    </div>
                </div>
            </div>
            
            
            <div class="cycle">
                <div class="cycle-title">
                    <i class="fas fa-user-graduate"></i>
                    <h3>Cycle 3 - Collège</h3>
                </div>
                <p><strong>Âges : 11 à 15 ans</strong></p>
                <p>Approfondissement des connaissances et préparation au lycée.</p>
                <div class="niveaux">
                    <div class="niveau">
                        <h4>6ème</h4>
                        <p>11-12 ans</p>
                    </div>
                    <div class="niveau">
                        <h4>5ème</h4>
                        <p>12-13 ans</p>
                    </div>
                    <div class="niveau">
                        <h4>4ème</h4>
                        <p>13-14 ans</p>
                    </div>
                    <div class="niveau">
                        <h4>3ème</h4>
                        <p>14-15 ans</p>
                    </div>
                </div>
            </div>
            
            
            <div class="cycle">
                <div class="cycle-title">
                    <i class="fas fa-university"></i>
                    <h3>Cycle 4 - Lycée</h3>
                </div>
                <p><strong>Âges : 15 à 18 ans</strong></p>
                <p>Spécialisation progressive et préparation aux études supérieures.</p>
                <div class="niveaux">
                    <div class="niveau">
                        <h4>Seconde</h4>
                        <p>15-16 ans</p>
                    </div>
                    <div class="niveau">
                        <h4>Première</h4>
                        <p>16-17 ans</p>
                    </div>
                    <div class="niveau">
                        <h4>Terminale</h4>
                        <p>17-18 ans</p>
                    </div>
                </div>
            </div>
        </section>

<section id="filieres">
            <h2>Filières du lycée</h2>
            <p>Nos formations au lycée :</p>
            
            <div class="filieres">
                
                <div class="filiere">
                    <h4>Voie Générale</h4>
                    <p><strong>Baccalauréat Général</strong></p>
                    <p>Spécialités proposées :</p>
                    <div class="matieres">
                        <span class="matiere">Mathématiques</span>
                        <span class="matiere">Physique-Chimie</span>
                        <span class="matiere">SVT</span>
                        <span class="matiere">SES</span>
                        <span class="matiere">Histoire-Géo</span>
                        <span class="matiere">Langues</span>
                        <span class="matiere">Humanités</span>
                        <span class="matiere">Numérique</span>
                    </div>
                </div>
                
                
                <div class="filiere">
                    <h4>Voie Technologique</h4>
                    <p><strong>Baccalauréat Technologique</strong></p>
                    <p>Séries proposées :</p>
                    <div class="matieres">
                        <span class="matiere">STI2D</span>
                        <span class="matiere">STL</span>
                        <span class="matiere">ST2S</span>
                        <span class="matiere">STMG</span>
                        <span class="matiere">STD2A</span>
                    </div>
                </div>
                
                
                <div class="filiere">
                    <h4>Voie Professionnelle</h4>
                    <p><strong>Baccalauréat Professionnel</strong></p>
                    <p>Domaines proposés :</p>
                    <div class="matieres">
                        <span class="matiere">Commerce</span>
                        <span class="matiere">Gestion</span>
                        <span class="matiere">Électronique</span>
                        <span class="matiere">Maintenance</span>
                        <span class="matiere">Santé</span>
                    </div>
                </div>
            </div>
        </section>

<section id="equipe">
            <h2>Équipe pédagogique</h2>
            <p>Plus de 150 professionnels dévoués à la réussite de nos élèves :</p>
            
            <div class="equipe-grid">
                <div class="membre">
                    <i class="fas fa-chalkboard-teacher"></i>
                    <h4>Enseignants</h4>
                    <p>120 professeurs certifiés et agrégés</p>
                </div>
                
                <div class="membre">
                    <i class="fas fa-user-shield"></i>
                    <h4>Vie scolaire</h4>
                    <p>15 conseillers principaux d'éducation et assistants</p>
                </div>
                
                <div class="membre">
                    <i class="fas fa-user-md"></i>
                    <h4>Santé et orientation</h4>
                    <p>Infirmières, psychologues, conseillers d'orientation</p>
                </div>
                
                <div class="membre">
                    <i class="fas fa-user-tie"></i>
                    <h4>Direction et administration</h4>
                    <p>15 personnes dont le proviseur et son adjoint</p>
                </div>
            </div>
        </section>

<section id="infrastructure">
            <h2>Infrastructure et équipements</h2>
            
            <div class="infra-grid">
                <div class="infra-item">
                    <i class="fas fa-laptop-house"></i>
                    <h4>Salles informatiques</h4>
                    <p>6 salles avec 200 ordinateurs</p>
                </div>
                
                <div class="infra-item">
                    <i class="fas fa-flask"></i>
                    <h4>Laboratoires</h4>
                    <p>Physique, chimie, SVT, technologie</p>
                </div>
                
                <div class="infra-item">
                    <i class="fas fa-book"></i>
                    <h4>CDI</h4>
                    <p>Centre de documentation informatisé</p>
                </div>
                
                <div class="infra-item">
                    <i class="fas fa-utensils"></i>
                    <h4>Restauration</h4>
                    <p>2 self-services et 1 restaurant scolaire</p>
                </div>
                
                <div class="infra-item">
                    <i class="fas fa-running"></i>
                    <h4>Installations sportives</h4>
                    <p>Gymnase, terrain de sport, dojo</p>
                </div>
                
                <div class="infra-item">
                    <i class="fas fa-music"></i>
                    <h4>Salles spécialisées</h4>
                    <p>Musique, arts plastiques, théâtre</p>
                </div>
            </div>
        </section>

<section id="horaires">
            <h2>Horaires et organisation</h2>
            
            <h3>Emploi du temps type</h3>
            <table>
                <thead>
                    <tr>
                        <th>Période</th>
                        <th>Lundi - Vendredi</th>
                        <th>Maternelle</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Accueil</td>
                        <td>7h30 - 8h20</td>
                        <td>8h20 - 8h30</td>
                    </tr>
                    <tr>
                        <td>Cours matin</td>
                        <td>8h30 - 12h00</td>
                        <td>8h30 - 11h30</td>
                    </tr>
                    <tr>
                        <td>Pause déjeuner</td>
                        <td>12h00 - 13h30</td>
                        <td>11h30 - 13h30</td>
                    </tr>
                    <tr>
                        <td>Cours après-midi</td>
                        <td>13h30 - 16h30</td>
                        <td>13h30 - 16h00</td>
                    </tr>
                    <tr>
                        <td>Étude/Garderie</td>
                        <td>16h30 - 18h30</td>
                        <td>16h00 - 18h30</td>
                    </tr>
                </tbody>
            </table>
            
            <h3>Calendrier scolaire</h3>
            <ul>
                <li><strong>Rentrée :</strong> 2 septembre 2024</li>
                <li><strong>Vacances de Toussaint :</strong> 19 octobre - 3 novembre 2024</li>
                <li><strong>Vacances de Noël :</strong> 21 décembre 2024 - 5 janvier 2025</li>
                <li><strong>Vacances d'hiver :</strong> 15 février - 2 mars 2025</li>
                <li><strong>Vacances de printemps :</strong> 12 avril - 28 avril 2025</li>
                <li><strong>Vacances d'été :</strong> Début le 7 juillet 2025</li>
            </ul>
        </section>

<section id="contact">
            <h2>Contact et informations</h2>
            
            <div class="contact-info">
                <div class="contact-item">
                    <i class="fas fa-map-marker-alt"></i>
                    <div>
                        <h4>Adresse</h4>
                        <p>123 Avenue de l'Éducation<br>75000 Paris</p>
                    </div>
                </div>
                
                <div class="contact-item">
                    <i class="fas fa-phone"></i>
                    <div>
                        <h4>Téléphone</h4>
                        <p>01 23 45 67 89</p>
                    </div>
                </div>
                
                <div class="contact-item">
                    <i class="fas fa-envelope"></i>
                    <div>
                        <h4>Email</h4>
                        <p>contact@lycee-les-lauriers.fr</p>
                    </div>
                </div>
                
                <div class="contact-item">
                    <i class="fas fa-clock"></i>
                    <div>
                        <h4>Horaires secrétariat</h4>
                        <p>Lun-Ven: 8h-12h / 13h30-17h</p>
                    </div>
                </div>
            </div>
        </section>

<section id="inscription">
            <h2>Demande d'inscription</h2>
            <p>Pour toute demande d'inscription, veuillez remplir ce formulaire :</p>
            
            <form>
                <div class="form-group">
                    <label for="nom">Nom de l'élève :</label>
                    <input type="text" id="nom" required>
                </div>
                
                <div class="form-group">
                    <label for="prenom">Prénom de l'élève :</label>
                    <input type="text" id="prenom" required>
                </div>
                
                <div class="form-group">
                    <label for="naissance">Date de naissance :</label>
                    <input type="date" id="naissance" required>
                </div>
                
                <div class="form-group">
                    <label for="niveau">Niveau demandé :</label>
                    <select id="niveau" required>
                        <option value="">Sélectionnez un niveau</option>
                        <optgroup label="Maternelle">
                            <option value="ps">Petite Section (PS)</option>
                            <option value="ms">Moyenne Section (MS)</option>
                            <option value="gs">Grande Section (GS)</option>
                        </optgroup>
                        <optgroup label="Élémentaire">
                            <option value="cp">CP</option>
                            <option value="ce1">CE1</option>
                            <option value="ce2">CE2</option>
                            <option value="cm1">CM1</option>
                            <option value="cm2">CM2</option>
                        </optgroup>
                        <optgroup label="Collège">
                            <option value="6e">6ème</option>
                            <option value="5e">5ème</option>
                            <option value="4e">4ème</option>
                            <option value="3e">3ème</option>
                        </optgroup>
                        <optgroup label="Lycée">
                            <option value="2nde">Seconde</option>
                            <option value="1ere">Première</option>
                            <option value="term">Terminale</option>
                        </optgroup>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="parent">Nom du parent :</label>
                    <input type="text" id="parent" required>
                </div>
                
                <div class="form-group">
                    <label for="email">Email :</label>
                    <input type="email" id="email" required>
                </div>
                
                <div class="form-group">
                    <label for="tel">Téléphone :</label>
                    <input type="tel" id="tel" required>
                </div>
                
                <div class="form-group">
                    <label for="message">Message complémentaire :</label>
                    <input id="message" rows="4"/>
                </div>
                
                <button type="submit">Envoyer la demande</button>
            </form>
        </section>
    </div>

<footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h4>Lycée Les Lauriers</h4>
                    <p>Établissement scolaire complet de la maternelle à la terminale.</p>
                    <p>Excellence - Bienveillance - Réussite</p>
                </div>
                
                <div class="footer-section">
                    <h4>Liens rapides</h4>
                    <ul class="footer-links">
                        <li><a href="#presentation">Présentation</a></li>
                        <li><a href="#cycles">Cycles scolaires</a></li>
                        <li><a href="#filieres">Filières</a></li>
                        <li><a href="#inscription">Inscription</a></li>
                    </ul>
                </div>
                
                <div class="footer-section">
                    <h4>Informations</h4>
                    <ul class="footer-links">
                        <li><a href="#horaires">Horaires</a></li>
                        <li><a href="#infrastructure">Équipements</a></li>
                        <li><a href="#equipe">Équipe</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
                
                <div class="footer-section">
                    <h4>Nous suivre</h4>
                    <ul class="footer-links">
                        <li><a href="#"><i class="fab fa-facebook"></i> Facebook</a></li>
                        <li><a href="#"><i class="fab fa-twitter"></i> Twitter</a></li>
                        <li><a href="#"><i class="fab fa-instagram"></i> Instagram</a></li>
                        <li><a href="#"><i class="fab fa-youtube"></i> YouTube</a></li>
                    </ul>
                </div>
            </div>
            
            <div class="copyright">
                <p>© 2024 Lycée Polyvalent Les Lauriers - Tous droits réservés</p>
                <p>123 Avenue de l'Éducation - 75000 Paris - Tél: +225 05 74 09 82 82</p>
              <p> codé avec passion par spid_dev</p>
            </div>
        </div>
    </footer>

CSS