AE2I Algérie: Industrial Engineering & Recruitment

973 mironovbogdan341

Ouvrir dans l'éditeur Publiez votre code

AE2I Algérie: Industrial Engineering & Recruitment

Recommandé

10 October 2025

Structure HTML du conteneur d'animation CSS

13 March 2026

Baldie's Basics Plus

8 September 2025

Extrait d'animation de point de focalisation CSS

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>AE2I Algérie - Excellence en Ingénierie Industrielle</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
  <style>
    :root {
      --primary: #0066ff;
      --secondary: #0055cc;
      --background: #f9fafc;
      --white: #ffffff;
      --gray-light: #e0e0e0;
      --text-color: #333;
      --border-radius: 8px;
      --transition: all 0.3s ease;
    }

body {
      margin: 0;
      font-family: 'Inter', sans-serif;
      background-color: var(--background);
      color: var(--text-color);
    }

/* Boutons modernes */
    .btn-primary {
      background-color: var(--primary);
      color: var(--white);
      padding: 14px 24px;
      border: none;
      border-radius: var(--border-radius);
      cursor: pointer;
      font-weight: 600;
      font-size: 1rem;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      transition: var(--transition);
    }

.btn-primary:hover {
      background-color: var(--secondary);
      box-shadow: 0 6px 12px rgba(0,0,0,0.2);
      transform: translateY(-2px);
    }

/* Styles pour la modal de consentement */
    .consent-modal {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }

.consent-content {
      background: var(--white);
      padding: 30px;
      border-radius: var(--border-radius);
      max-width: 500px;
      width: 90%;
      box-shadow: 0 8px 16px rgba(0,0,0,0.2);
      text-align: center;
    }

/* Header styling */
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 40px;
      background-color: #fff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      position: sticky;
      top: 0;
      z-index: 1000;
    }

.logo {
      height: 50px;
    }

nav ul {
      list-style: none;
      display: flex;
      gap: 25px;
      margin: 0;
      padding: 0;
    }

nav ul li a {
      text-decoration: none;
      color: #333;
      font-weight: 500;
      transition: color 0.3s;
    }

nav ul li a:hover {
      color: var(--primary);
    }

/* Hero section */
    .hero {
      position: relative;
      height: 90vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

.hero-video {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      z-index: -1;
    }

.hero-overlay {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.4);
    }

.hero-content {
      color: #fff;
      text-align: center;
      padding: 0 20px;
    }

.hero h1 {
      font-size: 3rem;
      margin-bottom: 20px;
    }

.hero p {
      font-size: 1.2rem;
      margin-bottom: 30px;
    }

/* Sections */
    section {
      padding: 60px 20px;
    }

.section-title {
      font-size: 2rem;
      margin-bottom: 30px;
      text-align: center;
      color: var(--primary);
    }

/* About & Services */
    #about p {
      max-width: 800px;
      margin: 0 auto 30px;
      line-height: 1.8;
      font-size: 1.1rem;
      text-align: center;
    }

/* Buttons in sections */
    .btn-secondary {
      background-color: transparent;
      color: var(--primary);
      border: 2px solid var(--primary);
      padding: 12px 24px;
      border-radius: var(--border-radius);
      font-weight: 600;
      cursor: pointer;
      transition: var(--transition);
    }
    .btn-secondary:hover {
      background-color: var(--primary);
      color: #fff;
    }

/* Clients logos */
    .clients {
      padding: 40px 20px;
    }

.clients-logos {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 30px;
    }

.client-logo {
      max-width: 150px;
      height: auto;
      opacity: 0.8;
      transition: opacity 0.3s, transform 0.3s;
    }

.client-logo:hover {
      opacity: 1;
      transform: scale(1.05);
    }

/* Recrutement */
    #recruitment {
      background-color: #f1f5f9;
    }

.jobs-container {
      max-width: 1200px;
      margin: 0 auto;
    }

.filters {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin-bottom: 30px;
      justify-content: center;
    }

.filter-input {
      padding: 12px 15px;
      border: 1px solid #ccc;
      border-radius: var(--border-radius);
      font-size: 1rem;
      outline: none;
      transition: border-color 0.3s;
    }
    .filter-input:focus {
      border-color: var(--primary);
    }

/* Job list */
    #jobsList {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

.job-card {
      background: #fff;
      padding: 20px;
      border-radius: var(--border-radius);
      box-shadow: 0 4px 8px rgba(0,0,0,0.05);
      transition: box-shadow 0.3s, transform 0.3s;
    }

.job-card:hover {
      box-shadow: 0 8px 16px rgba(0,0,0,0.1);
      transform: translateY(-2px);
    }

/* Contact section */
    #contact {
      padding: 80px 20px;
      background-color: var(--primary);
      color: #fff;
      text-align: center;
    }

#contact h2 {
      margin-bottom: 20px;
    }

/* Admin toggle & login */
    #adminToggle {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: #fff;
      color: var(--primary);
      font-size: 1.5rem;
      padding: 10px 15px;
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      transition: background 0.3s;
      z-index: 10000;
    }
    #adminToggle:hover {
      background: #f0f0f0;
    }

#adminLogin {
      position: fixed;
      bottom: 70px;
      right: 20px;
      background: #fff;
      padding: 20px;
      border-radius: var(--border-radius);
      box-shadow: 0 8px 16px rgba(0,0,0,0.3);
      display: none;
      flex-direction: column;
      width: 300px;
      z-index: 9999;
    }

.admin-form {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

.admin-form input {
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: var(--border-radius);
      font-size: 1rem;
      outline: none;
      transition: border-color 0.3s;
    }

.admin-form input:focus {
      border-color: var(--primary);
    }

.admin-submit {
      background-color: var(--primary);
      color: #fff;
      border: none;
      padding: 12px;
      border-radius: var(--border-radius);
      font-weight: 600;
      cursor: pointer;
      transition: background 0.3s;
    }
    .admin-submit:hover {
      background-color: var(--secondary);
    }

/* Modal postuler */
    .job-modal {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      display: none;
    }

.modal-content {
      background: #fff;
      padding: 30px;
      border-radius: var(--border-radius);
      max-width: 500px;
      width: 90%;
      position: relative;
      box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    }

.close-modal {
      position: absolute;
      top: 15px;
      right: 15px;
      font-size: 1.5rem;
      cursor: pointer;
      color: #999;
      transition: color 0.3s;
    }

.close-modal:hover {
      color: var(--primary);
    }

/* Responsive adjustments */
    @media(max-width: 768px) {
      header {
        flex-direction: column;
        align-items: flex-start;
      }
      nav ul {
        flex-direction: column;
        gap: 15px;
        margin-top: 10px;
      }
      .hero h1 {
        font-size: 2.2rem;
      }
    }
  </style>
</head>
<body>
  
  <div class="consent-modal" id="consentModal">
    <div class="consent-content">
      <h2>Confidentialité & Données Personnelles</h2>
      <p>
        Conformément à la loi algérienne 18-07 relative à la protection des données à caractère personnel, 
        nous utilisons des cookies et collectons des informations pour améliorer votre expérience sur notre site.
        En continuant à naviguer, vous acceptez notre politique de confidentialité.
      </p>
      <div class="consent-btns" style="margin-top:20px; display:flex; justify-content: center; gap:15px;">
        <button class="btn-primary" id="acceptConsent">Accepter</button>
        <button class="btn-secondary" id="refuseConsent">Refuser</button>
      </div>
    </div>
  </div>

<header>
    <img src="assets/logo_ae2i.png" alt="AE2I Algérie" class="logo" />
    <nav>
      <ul>
        <li><a href="#home">Accueil</a></li>
        <li><a href="#about">À Propos</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#clients">Clients</a></li>
        <li><a href="#recruitment">Recrutement</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

<section class="hero" id="home">
    <video class="hero-video" autoplay muted loop>
      <source src="assets/business-video.mp4" type="video/mp4" />
      Votre navigateur ne supporte pas la vidéo.
    </video>
    <div class="hero-overlay"></div>
    <div class="hero-content">
      <h1>AE2I Algérie</h1>
      <p>Excellence en Ingénierie Industrielle et Solutions Innovantes pour l'Industrie</p>
      <a href="#services" class="btn-primary">Découvrir Nos Services</a>
    </div>
  </section>

<section id="about">
    <div class="container">
      <h2 class="section-title">À Propos de AE2I</h2>
      <p>
        AE2I Algérie est un leader dans le domaine de l'ingénierie industrielle, offrant des solutions sur mesure 
        pour les secteurs de l'énergie, de la transformation et de l'industrie lourde. 
        Nous combinons expertise technique, innovation et engagement client pour des résultats durables.
      </p>
      <div style="text-align: center;">
        <a href="assets/brochure_ae2i.pdf" download class="btn-primary">Télécharger la Brochure</a>
      </div>
    </div>
  </section>

<section id="services" style="background: #f1f5f9;">
    <div class="container">
      <h2 class="section-title">Nos Services</h2>
      <div style="display: flex; flex-wrap: wrap; gap: 30px; justify-content: center;">
        <div style="background: white; padding: 30px; border-radius: 12px; width: 300px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.3s;">
          <h3 style="color: var(--primary); margin-bottom: 15px;">Ingénierie Mécanique</h3>
          <p>Conception, analyse et optimisation de systèmes mécaniques complexes.</p>
        </div>
        <div style="background: white; padding: 30px; border-radius: 12px; width: 300px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.3s;">
          <h3 style="color: var(--primary); margin-bottom: 15px;">Automatisation Industrielle</h3>
          <p>Intégration de solutions d'automatisation pour une productivité maximale.</p>
        </div>
        <div style="background: white; padding: 30px; border-radius: 12px; width: 300px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.3s;">
          <h3 style="color: var(--primary); margin-bottom: 15px;">Maintenance Prédictive</h3>
          <p>Surveillance et maintenance avancée pour réduire les temps d'arrêt.</p>
        </div>
      </div>
    </div>
  </section>

<section id="clients" class="clients">
    <div class="container">
      <h2 class="section-title">Clients qui nous ont fait confiance</h2>
      <div class="clients-logos">
        <img src="assets/fiat.png" alt="FIAT" class="client-logo" />
        <img src="assets/ge.png" alt="GE GEAT" class="client-logo" />
        <img src="assets/martur.png" alt="MARTUR" class="client-logo" />
        <img src="assets/pcpa.png" alt="PCPA" class="client-logo" />
        <img src="assets/starbucks.png" alt="STARBUCKS" class="client-logo" />
        <img src="assets/jotun.png" alt="JOTUN" class="client-logo" />
        <img src="assets/ge-vernova.png" alt="GE VERNOVA" class="client-logo" />
      </div>
    </div>
  </section>

<section id="recruitment">
    <div class="container">
      <h2 class="section-title">Recrutement</h2>
      <div class="jobs-container">
        <div class="filters">
          <input type="text" class="filter-input" placeholder="Mots-clés..." />
          <input type="text" class="filter-input" placeholder="Localisation..." />
          <select class="filter-input">
            <option value="">Type de contrat</option>
            <option value="cdi">CDI</option>
            <option value="cdd">CDD</option>
            <option value="stage">Stage</option>
          </select>
        </div>
        <div class="jobs-list" id="jobsList">
          
        </div>
      </div>
    </div>
  </section>

<section id="contact" style="background: var(--primary); color: white;">
    <div class="container" style="text-align: center;">
      <h2 class="section-title" style="color: white;">Contactez-nous</h2>
      <p style="max-width: 600px; margin: 0 auto 30px;">
        Vous avez un projet ou une question ? Notre équipe est prête à vous accompagner.
      </p>
      <a href="mailto:contact@ae2i-algerie.com" class="btn-primary" style="background: white; color: var(--primary); text-decoration:none; display:inline-block;">Envoyer un Email</a>
    </div>
  </section>

<div class="admin-toggle" id="adminToggle">⚙️</div>

<div class="admin-login" id="adminLogin">
    <h4 style="margin-bottom: 15px; color: var(--primary); text-align:center;">Accès Administrateur</h4>
    <form class="admin-form">
      <input type="text" placeholder="Email" required />
      <input type="password" placeholder="Mot de passe" required />
      <button type="submit" class="admin-submit">Se connecter</button>
    </form>
  </div>

<div class="job-modal" id="jobModal">
    <div class="modal-content">
      <span class="close-modal" onclick="closeJobModal()">✕</span>
      <h2 style="color: var(--primary); margin-bottom: 20px;">Postuler pour le poste</h2>
      <p>Connectez-vous avec votre profil professionnel :</p>
      
      <div class="social-login" style="display:flex; gap:15px; justify-content:center; margin-top:20px;">
        <div class="social-btn" style="display:flex; align-items:center; gap:8px; padding:10px 15px; border:1px solid #ccc; border-radius:8px; cursor:pointer; transition:background 0.3s;">
          
          <svg height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M19.998 10.221a9.997 9.997 0 0 1-9.997 9.997A9.997 9.997 0 0 1 .004 10.221a9.997 9.997 0 0 1 9.993-9.997A9.997 9.997 0 0 1 19.998 10.221ZM7.376 14.588V7.01h2.087v7.578H7.376ZM8.503 5.828a1.35 1.35 0 1 0 0-2.7 1.35 1.35 0 0 0 0 2.7ZM14.589 14.588a1.349 1.349 0 0 0 1.348-1.348v-3.75c0-1.997-.799-2.796-2.248-2.796-.799 0-1.348.45-1.548 1.099h-.05v-.95H10.04c.05.6.05 1.349.05 2.048v3.75c0 .799.05 1.548.05 2.347h2.048v-3.147c0-.55.05-.8.2-.95.15-.15.4-.15.95-.15h1.148c1.449 0 2.098.749 2.098 2.248v3.097c-.05.7-.05 1.3-.05 1.949h-2.048Z" fill="#0a66c2"></path></svg>
          <span>LinkedIn</span>
        </div>
        
      </div>
      
      
    </div>
  </div>

// Скрипт для согласия cookie
    document.getElementById('acceptConsent').addEventListener('click', () => {
      document.getElementById('consentModal').style.display = 'none';
    });
    document.getElementById('refuseConsent').addEventListener('click', () => {
      document.getElementById('consentModal').style.display = 'none';
    });

function closeJobModal() {
      document.getElementById('jobModal').style.display = 'none';
    }

// Для открытия модального окна "Postuler" можно добавить обработчик при клике на кнопку в списке вакансий
  </script>
</body>
</html>

CSS