Webleb - UI Elements

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Groupe ISM - Institut Supérieur de Management</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

body {
            background: #fff;
            color: #333;
            line-height: 1.6;
            overflow-x: hidden;
        }

.entete {
            padding: 15px 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: rgba(255, 255, 255, 0.95);
            position: fixed;
            width: 100%;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

.logo img {
            transition: transform 0.3s;
        }

.logo img:hover {
            transform: scale(1.1);
        }

.menu-toggle {
            display: none;
            flex-direction: column;
            background: none;
            border: none;
            cursor: pointer;
            padding: 5px;
        }

.menu-toggle span {
            width: 25px;
            height: 3px;
            background: #333;
            margin: 3px 0;
            transition: 0.3s;
        }

.menu-toggle.active span:nth-child(1) {
            transform: rotate(-45deg) translate(-5px, 6px);
        }

.menu-toggle.active span:nth-child(2) {
            opacity: 0;
        }

.menu-toggle.active span:nth-child(3) {
            transform: rotate(45deg) translate(-5px, -6px);
        }

.menu {
            display: flex;
            list-style: none;
            gap: 20px;
        }

.menu li {
            margin: 0;
        }

.menu a {
            text-decoration: none;
            color: #333;
            font-weight: 500;
            padding: 8px 12px;
            border-radius: 4px;
            transition: all 0.3s;
            display: block;
        }

.menu a:hover {
            background-color: #8B0000;
            color: white;
        }

.menu span {
            color: #8B0000;
            font-weight: bold;
        }

.section-hero {
            background: url('https://goamobile.com/logosent/ism@221@-B-2025-03-07_09-56-28ism_dakar_banniere_0_1.jpg') no-repeat center center;
            background-size: cover;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            padding: 80px 20px 20px;
        }

.contenu-hero {
            max-width: 800px;
            padding: 0 20px;
        }

.titre-hero {
            font-size: clamp(2rem, 5vw, 3rem);
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            line-height: 1.2;
        }

.slogan {
            font-size: clamp(1.2rem, 3vw, 1.5rem);
            margin-bottom: 30px;
            font-style: italic;
        }

.boutons-cta {
            display: flex;
            gap: 15px;
            justify-content: center;
            flex-wrap: wrap;
        }

.bouton-cta {
            background-color: #8B0000;
            color: white;
            border: none;
            padding: 12px 25px;
            font-size: 1rem;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s;
            min-width: 160px;
        }

.bouton-cta:hover {
            background-color: #A52A2A;
            transform: translateY(-3px);
        }

.curseur-clignotant {
            border-right: 3px solid white;
            animation: clignoter 0.7s infinite;
        }

@keyframes clignoter {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }

.section-presentation {
            padding: 60px 5%;
            background-color: #F5DEB3;
        }

.titre-section {
            text-align: center;
            color: #8B0000;
            font-size: clamp(1.8rem, 4vw, 2.5rem);
            margin-bottom: 40px;
        }

.conteneur-presentation {
            display: flex;
            flex-wrap: wrap;
            gap: 40px;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
        }

.images-presentation {
            flex: 1;
            min-width: 300px;
            position: relative;
        }

.image-campus {
            width: 100%;
            max-width: 500px;
            height: 300px;
            object-fit: cover;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            transition: 0.5s;
            animation: lo 1s forwards;
            animation-delay: 0.5s;
            opacity: 0;
        }

@keyframes lo {
            from { transform: translateX(-100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

.image-campus:hover {
            transform: scale(1.05);
        }

.image-direction {
            position: absolute;
            width: 60%;
            max-width: 300px;
            right: -10px;
            bottom: -30px;
            height: 200px;
            object-fit: cover;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            border: 3px solid white;
            transition: 0.5s;
            animation: op 1s forwards;
            opacity: 0;
            animation-delay: 1s;
        }

@keyframes op {
            from { transform: translateY(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

.image-direction:hover {
            transform: scale(1.05);
        }

.texte-presentation {
            flex: 1;
            min-width: 300px;
            background-color: rgba(255, 255, 255, 0.9);
            padding: 25px;
            border-radius: 10px;
        }

.texte-presentation h3 {
            color: #8B0000;
            margin-bottom: 15px;
            font-size: 1.5rem;
        }

.texte-presentation p {
            margin-bottom: 15px;
            line-height: 1.6;
        }

.section-formations {
            padding: 60px 5%;
            background-color: #f8f8f8;
        }

.conteneur-cartes {
            display: flex;
            flex-wrap: wrap;
            gap: 25px;
            justify-content: center;
            max-width: 1200px;
            margin: 0 auto;
        }

.carte-formation {
            background: white;
            border-radius: 10px;
            padding: 25px;
            width: 100%;
            max-width: 350px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            transition: transform 0.3s;
            display: flex;
            flex-direction: column;
        }

.carte-formation:hover {
            transform: translateY(-10px);
        }

.carte-formation h3 {
            color: #8B0000;
            margin: 15px 0 10px;
            font-size: 1.4rem;
        }

.carte-formation p {
            flex-grow: 1;
            margin-bottom: 15px;
        }

.liste-diplomes {
            list-style: none;
            margin-top: 15px;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

.liste-diplomes li {
            background-color: #F5DEB3;
            padding: 5px 12px;
            border-radius: 15px;
            font-size: 0.9rem;
        }

.image-dir {
            width: 100%;
            height: 300px;
            object-fit: cover;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            transition: 0.5s;
        }

.image-dir:hover {
            transform: scale(1.05);
        }

.pied-de-page {
            background-color: #333;
            color: white;
            padding: 40px 5% 20px;
        }

.conteneur-footer {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 30px;
            margin-bottom: 30px;
            max-width: 1200px;
            margin: 0 auto 30px;
        }

.bloc-footer {
            flex: 1;
            min-width: 250px;
        }

.bloc-footer h3 {
            color: #F5DEB3;
            margin-bottom: 15px;
            font-size: 1.2rem;
        }

.bloc-footer a {
            color: #ccc;
            text-decoration: none;
            transition: color 0.3s;
        }

.bloc-footer a:hover {
            color: white;
        }

.reseaux-sociaux, .liens-utiles {
            list-style: none;
        }

.reseaux-sociaux li, .liens-utiles li {
            margin-bottom: 8px;
        }

.copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid #555;
            margin-top: 20px;
            color: #aaa;
            font-size: 0.9rem;
        }

.responsive-img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 8px;
        }

/* Animations */
        .top {
            animation: logo 1s forwards;
        }

@keyframes logo {
            from { transform: translateX(-100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

.mar {
            opacity: 0;
            animation: mar 1s forwards;
            animation-delay: 0.5s;
        }

@keyframes mar {
            from { transform: translateY(-100%); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

.top2 {
            animation: bv 1s forwards;
            opacity: 0;
            animation-delay: 0.5s;
        }

@keyframes bv {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

/* Styles pour la section formations détaillées */
        .section-formations-detaillees {
            padding: 60px 5%;
            background-color: burlywood;
        }

.caracter {
            display: flex;
            flex-wrap: wrap;
            gap: 2em;
            margin: 15px 0;
        }

.caracter > div {
            flex: 1;
            min-width: 150px;
        }

.caracter h4 {
            color: #8B0000;
            margin-bottom: 8px;
        }

.caracter ul {
            list-style-type: disc;
            padding-left: 20px;
        }

.caracter li {
            margin-bottom: 5px;
        }

/* Styles pour la section contact */
        .contact-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            padding: 100px 8% 60px;
            background-color: rgba(222, 184, 135, 0.418);
        }
        
        .form-contact {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }
        
        .form-control {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
        }
        
        textarea.form-control {
            min-height: 150px;
            resize: vertical;
        }
        
        .error-message {
            color: #d9534f;
            font-size: 0.9rem;
            margin-top: 5px;
            display: none;
        }
        
        .btn-submit {
            background: #8B0000;
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            transition: background 0.3s;
        }
        
        .btn-submit:hover {
            background: #A52A2A;
        }
        
        .confirmation {
            display: none;
            color: #5cb85c;
            font-weight: bold;
            margin-top: 20px;
        }
        
        .contact-info {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        }
        
        .map-container {
            margin-top: 30px;
            height: 300px;
            border-radius: 10px;
            overflow: hidden;
        }
        
        .map-container iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
        
        .horaires {
            margin-top: 30px;
        }

/* Media Queries */
        @media (max-width: 1024px) {
            .conteneur-presentation {
                gap: 30px;
            }
            
            .carte-formation {
                width: calc(50% - 15px);
            }
            
            .contact-container {
                grid-template-columns: 1fr;
            }
        }

@media (max-width: 768px) {
            .entete {
                padding: 12px 4%;
            }
            
            .menu-toggle {
                display: flex;
            }
            
            .navigation-principale {
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                background: white;
                box-shadow: 0 5px 10px rgba(0,0,0,0.1);
                transform: translateY(-100%);
                opacity: 0;
                visibility: hidden;
                transition: all 0.3s ease;
            }
            
            .navigation-principale.active {
                transform: translateY(0);
                opacity: 1;
                visibility: visible;
            }
            
            .menu {
                flex-direction: column;
                padding: 20px;
                gap: 10px;
            }
            
            .menu li {
                margin: 0;
            }
            
            .menu a {
                padding: 12px;
                text-align: center;
                border-bottom: 1px solid #eee;
            }
            
            .section-hero {
                padding-top: 70px;
                height: 80vh;
            }
            
            .boutons-cta {
                flex-direction: column;
                align-items: center;
            }
            
            .bouton-cta {
                width: 100%;
                max-width: 250px;
            }
            
            .carte-formation {
                width: 100%;
                max-width: 400px;
            }
            
            .image-direction {
                position: relative;
                width: 80%;
                right: auto;
                bottom: auto;
                margin: -40px auto 0;
            }
            
            .conteneur-footer {
                flex-direction: column;
                gap: 25px;
            }
            
            .caracter {
                flex-direction: column;
                gap: 1em;
            }
        }

@media (max-width: 480px) {
            .entete {
                padding: 10px 3%;
            }
            
            .section-hero,
            .section-presentation,
            .section-formations,
            .section-formations-detaillees {
                padding: 40px 3%;
            }
            
            .titre-hero {
                font-size: 1.8rem;
            }
            
            .slogan {
                font-size: 1.1rem;
            }
            
            .conteneur-presentation {
                flex-direction: column;
                gap: 20px;
            }
            
            .images-presentation {
                min-width: 100%;
            }
            
            .image-campus {
                height: 250px;
            }
            
            .image-direction {
                width: 70%;
                height: 150px;
            }
            
            .texte-presentation {
                min-width: 100%;
                padding: 20px;
            }
            
            .carte-formation {
                padding: 20px;
            }
            
            .pied-de-page {
                padding: 30px 3% 15px;
            }
            
            .contact-container {
                padding: 80px 3% 40px;
            }
        }

/* Améliorations pour très petits écrans */
        @media (max-width: 360px) {
            .menu a {
                font-size: 1.3rem;
            }
            
            .bouton-cta {
                padding: 10px 20px;
                font-size: 0.9rem;
            }
            
            .carte-formation {
                padding: 15px;
            }
            
            .liste-diplomes li {
                font-size: 0.8rem;
                padding: 4px 10px;
            }
            
            .form-contact,
            .contact-info {
                padding: 20px;
            }
        }

/* Support pour l'orientation paysage sur mobile */
        @media (max-height: 500px) and (orientation: landscape) {
            .section-hero {
                height: auto;
                min-height: 100vh;
                padding: 100px 20px 40px;
            }
            
            .titre-hero {
                margin-bottom: 15px;
            }
            
            .slogan {
                margin-bottom: 20px;
            }
        }

/* Amélioration de l'accessibilité */
        @media (prefers-reduced-motion: reduce) {
            * {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

/* Support pour les écrans haute résolution */
        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
            .section-hero {
                background-image: url('https://goamobile.com/logosent/ism@221@-B-2025-03-07_09-56-28ism_dakar_banniere_0_1.jpg');
            }
        }
    </style>
</head>
<body>
    <header class="entete">
        <div class="conteneur-logo">
            <div class="logo">
                <img class="top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJqwkYc9ukAkj5foa8J4mp9Wj0OaCY1DM7RA&s" alt="Logo ISM" width="50">
            </div>       
        </div>
        <button class="menu-toggle" aria-label="Menu">
            <span></span>
            <span></span>
            <span></span>
        </button>
        <nav class="navigation-principale">
            <ul class="menu mar">
                <li><a style="font-weight: bold;font-size: 1.5rem;" href="#accueil">Accueil<span>></span></a></li>
                <li><a style="font-weight: bold;font-size: 1.5rem;"  href="#formations">Formations <span>></span></a></li>
                <li><a style="font-weight: bold;font-size: 1.5rem;" href="#contact">Contact<span>></span></a></li> 
            </ul>
        </nav>
    </header>

<section class="section-hero" id="accueil">
        <div class="contenu-hero top2">
            <h1 class="titre-hero">Un Diplôme, un Leader <span class="curseur-clignotant"></span></h1>
            <p class="slogan">« Today ISM, tomorrow the World »</p>
            <div class="boutons-cta">
                <button class="bouton-cta"><a style="color: aliceblue; text-decoration: none;" href="#PROPOS">À PROPOS</a></button>
                <button class="bouton-cta"><a style="color: aliceblue; text-decoration: none;" href="#FORMATIONS">NOS FORMATIONS</a></button>
            </div>
        </div>
    </section>
    
    <section class="section-presentation">
        <h2 class="titre-section " id="PROPOS">À PROPOS</h2>    
        <div class="conteneur-presentation">
            <div class="images-presentation">
                <img class="image-campus" src="https://www.groupeism.sn/sites/default/files/au_senegal-groupe_ism-campus_baobab.png" alt="Campus ISM Dakar">
                <img class="image-direction" src="https://www.ismthies.com/wp-content/uploads/2021/08/2-scaled.jpg" alt="Direction ISM">
            </div>
            <div class="texte-presentation">
                <h3>Présentation du Groupe ISM</h3>
                <p><strong>Mot du Comité de Direction :</strong> Dans un environnement mondialisé où les certitudes s'effondrent, les entreprises s'appuient plus que jamais sur des hommes et des femmes capables de s'adapter en permanence.</p>
                <p><strong>ISM</strong> est un groupe d'instituts qui offre des formations post-bac allant de la Licence aux Masters et MBA dans les domaines du Management, du Droit, de l'Ingénierie informatique et digitale, et en Science politique.</p>
                <p>Avec une douzaine de campus au Sénégal, le groupe compte <strong>10 000 apprenants</strong> et <strong>20 000 diplômés</strong> qui contribuent au dynamisme des économies africaines.</p>
            </div>
        </div>
    </section>

<section class="section-formations" id="formations">
        <h2 class="titre-section" id="FORMATIONS">NOS FORMATIONS</h2>
        <div class="conteneur-cartes">
            <div class="carte-formation">
                <img class="responsive-img" src="https://www.groupeism.sn/sites/default/files/image/inline/block/image/sakoura-9_4_2-compressed_1-2.jpg" alt="">
                <h3>Management</h3>
                <p>Formations en gestion d'entreprise, marketing, finance et ressources humaines.</p>
                <ul class="liste-diplomes">
                    <li>Licence</li>
                    <li>Master</li>
                    <li>MBA</li>
                </ul>
            </div>

<div class="carte-formation">
                <img class="responsive-img" src="https://images.squarespace-cdn.com/content/v1/60c2062f813bbb2a9c8cbcdd/3836a9b7-d8f9-4ea5-ad67-dc4d993c52bc/ISM-Dakar-Senegal-nouveaux-bacheliers-scaled.jpg" alt="">
                <h3>Droit</h3>
                <p>Formations en droit des affaires, droit international et droit public.</p>
                <ul class="liste-diplomes">
                    <li>Licence</li>
                    <li>Master</li>
                </ul>
            </div>
            
            <div class="carte-formation">
                <img class="responsive-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_38U-W0Fw0J0oAjUBS7JZrEBTOKrRt1oL2A&s" alt="">
                <h3>Informatique</h3>
                <p>Formations en développement logiciel, cybersécurité et intelligence artificielle.</p>
                <ul class="liste-diplomes">
                    <li>Licence</li>
                    <li>Master</li>
                    <li>MBA</li>
                </ul>
            </div>
        </div>
    </section>

<section class="section-presentation">
        <h2 class="titre-section ">La Réussite de l'ISM</h2>    
        <div class="conteneur-presentation">
            <div class="images-presentation">
                <img class="image-dir" src="https://www.ismthies.com/wp-content/uploads/2021/08/2-scaled.jpg" alt="Direction ISM">
            </div>
            <div class="texte-presentation">
                <h3>Notre Mission</h3>
                <p><strong>Le Groupe ISM s'engage à former les futurs dirigeants et leaders africains par une éducation d'excellence répondant aux standards nationaux et internationaux.</strong></p>
                <h3>Notre Vision</h3>
                <p><strong>La vision du Groupe ISM est d'être le porte-drapeau d'une éducation d'excellence et d'innovation par la formation de futurs leaders et d'hommes de synthèse, responsables et attentifs aux autres, capables de contribuer efficacement et durablement au développement de l'Afrique.</strong></p>
                <h3>Nos Valeurs</h3>
                <p><strong>La devise du Groupe est "Aujourd'hui ISM, demain le monde" - Today ISM, Tomorrow the World. Elle symbolise l'attachement du Groupe au continent africain et son ouverture vers le monde et se traduit par les valeurs qui se résument en quatre lettres H.A.R.D : Humilité, Autonomie, Respect et Diversité.</strong></p>
            </div>
        </div>
    </section>

<section class="section-formations-detaillees">
        <h2 class="titre-section top">NOS FORMATIONS DÉTAILLÉES</h2>
        <div class="conteneur-cartes">
            <div class="carte-formation mar">
                <img style="width: 100%;" class="responsive-img" src="https://www.groupeism.sn/sites/default/files/image/inline/block/image/sakoura-9_4_2-compressed_1-2.jpg" alt="">
                <h3>Management</h3>
                <p>Formations en gestion d'entreprise, marketing, finance et ressources humaines.</p>
                <div class="caracter">
                    <div>
                        <h4>Programme :</h4>
                        <ul>
                            <li>Gestion </li>
                            <li>Marketing digital</li>
                            <li>Comptabilité </li>
                            <li>Management des RH</li>
                        </ul>
                    </div>
                    <div>
                        <h4>Débouchés :</h4>
                        <ul>
                            <li>Chef projet</li>
                            <li>marketing</li>
                            <li> financier</li>
                        </ul>
                    </div>
                    <div>
                        <h4>Durée :</h4>
                        <ul>
                            <li>Licence (3 ans)</li>
                            <li>Master (2 ans)</li>
                            <li>MBA (1-2 ans)</li>
                        </ul>
                    </div>
                </div>
               
                <ul class="liste-diplomes">
                    <li>Licence</li>
                    <li>Master</li>
                    <li>MBA</li>
                </ul>
                <br>  
                <button class="bouton-cta">S'inscrire</button>
            </div>

<div class="carte-formation top">
                <img style="width: 100%;" class="responsive-img" src="https://images.squarespace-cdn.com/content/v1/60c2062f813bbb2a9c8cbcdd/3836a9b7-d8f9-4ea5-ad67-dc4d993c52bc/ISM-Dakar-Senegal-nouveaux-bacheliers-scaled.jpg" alt="">
                <h3>Droit</h3>
                <p>Formations en droit des affaires, droit international et droit public.</p>
                <div class="caracter">
                    <div>
                        <h4>Programme :</h4>
                        <ul>
                            <li>Droit des contrats</li>
                            <li>Droit fiscal</li>
                            <li>Droit international</li>
                            <li>Procédure civile</li>
                        </ul>
                    </div>
                    <div>
                        <h4>Débouchés :</h4>
                        <ul>
                            <li>Avocat</li>
                            <li>Juriste d'entreprise</li>
                            <li>Conseiller fiscal</li>
                        </ul>
                    </div>
                    <div>
                        <h4>Durée :</h4>
                        <ul>
                            <li>Licence (3 ans)</li>
                            <li>Master (2 ans)</li>
                        </ul>
                    </div>
                </div>
                <ul class="liste-diplomes">
                    <li>Licence</li>
                    <li>Master</li>
                </ul>
                <br>  
                <button class="bouton-cta">S'inscrire</button>
            </div>
            
            <div class="carte-formation mar">
                <img style="width: 100%;" class="responsive-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_38U-W0Fw0J0oAjUBS7JZrEBTOKrRt1oL2A&s" alt="">
                <h3>Informatique</h3>
                <p>Formations en développement logiciel, cybersécurité et intelligence artificielle.</p>
                <div class="caracter">
                    <div>
                        <h4>Programme :</h4>
                        <ul>
                            <li>Programmation avancée</li>
                            <li>Base de données</li>
                            <li>Réseaux et sécurité</li>
                            <li>Intelligence artificielle</li>
                        </ul>
                    </div>
                    <div>
                        <h4>Débouchés :</h4>
                        <ul>
                            <li>Développeur full-stack</li>
                            <li>Expert en cybersécurité</li>
                            <li>Data scientist</li>
                        </ul>
                    </div>
                    <div>
                        <h4>Durée :</h4>
                        <ul>
                            <li>Licence (3 ans)</li>
                            <li>Master (2 ans)</li>
                            <li>MBA (1-2 ans)</li>
                        </ul>
                    </div>
                </div>
                <ul class="liste-diplomes">
                    <li>Licence</li>
                    <li>Master</li>
                    <li>MBA</li>
                </ul>
                <br>  
                <button class="bouton-cta">S'inscrire</button>
            </div>
        </div>
    </section>

<section class="section-presentation">  
        <div class="conteneur-presentation">
            <div class="images-presentation">
                <img class="image-campus" src="https://www.groupeism.sn/sites/default/files/au_senegal-groupe_ism-campus_baobab.png" alt="Campus ISM Dakar">
            </div>
            <div class="texte-presentation">
                <h3>Admission</h3>
                <p><strong>Vous souhaitez postuler à une licence, un master ou un MBA au sein du Groupe ISM ?</strong> Les admissions sont ouvertes </p>
                <p><strong>Licence</strong> - Vous postulez à un Bachelor : Pièces à fournir pour le dossier d'admission : Copie certifiée conforme du bac, Candidat en Bachelor 1 : Copie certifiée conforme des relevés de notes du bac et de la classe de Terminale, Candidat en Bachelor 2 ou 3 : Copie certifiée conforme des bulletins de notes des dernières classes fréquentées après le bac, Copie certifiée conforme des bulletins de notes de la dernière classe fréquentée, Un extrait de naissance, Curriculum vitae, Copie certifiée conforme de la pièce d'identité, Quatre (4) photos d'identité (dont une collée au dossier).</p>
                <p><strong>Master</strong> - Pièces à fournir pour le dossier d'admission : Vous postulez à un Master : Copie certifiée conforme du bac, Candidat en Master 1 : Copies certifiées conformes de l'attestation de réussite de la Licence et des bulletins de notes des 6 semestres de la Licence, Candidat en Master 2 : Copie certifiée conforme de l'attestation de réussite de la Licence, du Master 1 et des bulletins de notes du Master 1, Copie certifiée conforme de la pièce d'identité, Curriculum vitae, Attestation de travail / stage, Quatre (4) photos d'identité (dont une collée au dossier).</p>
            </div>
        </div>
    </section>

<div class="contact-container" id="contact">
        <section class="form-contact top">
            <h2>Nous contacter</h2>
            <form id="contactForm">
                <div class="form-group">
                    <label for="prenom">Prénom *</label>
                    <input type="text" id="prenom" class="form-control" required>
                    <div class="error-message" id="prenom-error">Veuillez entrer un prénom valide (min. 2 lettres)</div>
                </div>
                
                <div class="form-group">
                    <label for="nom">Nom *</label>
                    <input type="text" id="nom" class="form-control" required>
                    <div class="error-message" id="nom-error">Veuillez entrer un nom valide (min. 2 lettres)</div>
                </div>
                
                <div class="form-group">
                    <label for="email">Email *</label>
                    <input type="email" id="email" class="form-control" required>
                    <div class="error-message" id="email-error">Veuillez entrer une adresse email valide</div>
                </div>
                
                <div class="form-group">
                    <label for="message">Message *</label>
                    <input id="message" class="form-control" required/>
                    <div class="error-message" id="message-error">Votre message doit contenir au moins 10 caractères</div>
                </div>
                
                <button type="submit" class="btn-submit">Envoyer</button>
                <div class="confirmation" id="confirmation-message">
                    Merci pour votre message, nous vous répondrons bientôt !
                </div>
            </form>
        </section>
        
        <section class="contact-info top2">
            <h2>Nos coordonnées</h2>
            <address>
                <p><strong>Adresse :</strong> Rue 10, Point E, Dakar, Sénégal</p>
                <p><strong>Téléphone :</strong> +221 33 859 00 00</p>
                <p><strong>Email :</strong> contact@ism.edu.sn</p>
            </address>
            
            <div class="horaires">
                <h3>Horaires d'ouverture :</h3>
                <ul>
                    <li>Lundi - Vendredi : 8h00 - 18h00</li>
                    <li>Samedi : 9h00 - 13h00</li>
                    <li>Dimanche : Fermé</li>
                </ul>
            </div>
            
            <div class="map-container">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3859.227906525682!2d-17.45678292468738!3d14.69323068574914!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMTTCsDQxJzM1LjYiTiAxN8KwMjcnMTkuOSJX!5e0!3m2!1sfr!2ssn!4v1620000000000!5m2!1sfr!2ssn" allowfullscreen="" loading="lazy"></iframe>
            </div>
        </section>
    </div>

<footer class="pied-de-page">
        <div class="conteneur-footer">
            <div class="bloc-footer">
                <h3>Contact</h3>
                <address>
                    <p>Email : contact@ism.edu.sn</p>
                    <p>Téléphone : +221 33 859 00 00</p>
                    <p>Adresse : Rue 10, Point E, Dakar</p>
                </address>
            </div>
            <div class="bloc-footer">
                <h3>Réseaux sociaux</h3>
                <ul class="reseaux-sociaux">
                    <li><a href="#">Facebook</a></li>
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">LinkedIn</a></li>
                </ul>
            </div>
        </div>
        <div class="copyright">
            <p>© 2023 Groupe ISM - Tous droits réservés</p>
        </div>
    </footer>

// Fermer le menu en cliquant sur un lien
        document.querySelectorAll('.menu a').forEach(link => {
            link.addEventListener('click', () => {
                document.querySelector('.navigation-principale').classList.remove('active');
                document.querySelector('.menu-toggle').classList.remove('active');
            });
        });

// Smooth scroll pour les ancres
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

// Validation du formulaire de contact
        document.getElementById('contactForm').addEventListener('submit', function(e) {
            e.preventDefault();
            let isValid = true;

const prenom = document.getElementById('prenom').value.trim();
            const prenomError = document.getElementById('prenom-error');
            if (prenom.length < 2 || /\d/.test(prenom)) {
                prenomError.style.display = 'block';
                isValid = false;
            } else {
                prenomError.style.display = 'none';
            }

const nom = document.getElementById('nom').value.trim();
            const nomError = document.getElementById('nom-error');
            if (nom.length < 2 || /\d/.test(nom)) {
                nomError.style.display = 'block';
                isValid = false;
            } else {
                nomError.style.display = 'none';
            }

const email = document.getElementById('email').value.trim();
            const emailError = document.getElementById('email-error');
            if (!email.includes('@') || !email.includes('.')) {
                emailError.style.display = 'block';
                isValid = false;
            } else {
                emailError.style.display = 'none';
            }

const message = document.getElementById('message').value.trim();
            const messageError = document.getElementById('message-error');
            if (message.length < 10) {
                messageError.style.display = 'block';
                isValid = false;
            } else {
                messageError.style.display = 'none';
            }

if (isValid) {
                document.getElementById('confirmation-message').style.display = 'block';
                this.reset();
            }
        });

document.querySelectorAll('.form-control').forEach(input => {
            input.addEventListener('input', function() {
                const errorId = this.id + '-error';
                document.getElementById(errorId).style.display = 'none';
            });
        });
    </script>
</body>
</html>

Validating your code, please wait...

HTML

CSS