Structure du projet
idro-construction/
│── [Link] # Page principale
│── css/
│ └── [Link] # Styles du site
│── js/
│ └── [Link] # Multilingue + interactions
│── assets/
├── images/ # Photos chantiers / logo
└── icons/ # Réseaux sociaux / favicon
[Link]
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>IDRO CONSTRUCTION</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/[Link]">
</head>
<body>
<header>
<div class="logo">
<span>IDRO</span><small>CONSTRUCTION</small>
</div>
<nav>
<a href="#home" data-key="home">Accueil</a>
<a href="#about" data-key="about">À propos</a>
<a href="#services" data-key="services">Services</a>
<a href="#projects" data-key="projects">Réalisations</a>
<a href="#contact" data-key="contact">Contact</a>
</nav>
<select id="languageSwitcher">
<option value="fr">FR</option>
<option value="en">EN</option>
<option value="ln">LN</option>
<option value="pt">PT</option>
</select>
</header>
<section id="home" class="hero">
<h1 data-key="title">Bâtir durablement, construire l’excellence</h1>
<p data-key="subtitle">Entreprise de construction et génie civil</p>
<a href="#contact" class="btn">Nous contacter</a>
</section>
<section id="about">
<h2 data-key="aboutTitle">À propos</h2>
<p data-key="aboutText">
IDRO CONSTRUCTION est une entreprise spécialisée dans la construction,
la rénovation et les travaux de génie civil en RDC.
</p>
</section>
<section id="services">
<h2 data-key="servicesTitle">Nos services</h2>
<ul>
<li data-key="s1">Construction de bâtiments</li>
<li data-key="s2">Rénovation</li>
<li data-key="s3">Génie civil</li>
<li data-key="s4">Travaux publics</li>
</ul>
</section>
<section id="projects">
<h2 data-key="projectsTitle">Nos réalisations</h2>
<div class="projects-grid">
<div class="project">
<img src="assets/images/[Link]" alt="Projet 1">
<p data-key="p1">Construction d’un immeuble résidentiel</p>
</div>
<div class="project">
<img src="assets/images/[Link]" alt="Projet 2">
<p data-key="p2">Travaux de génie civil</p>
</div>
<div class="project">
<img src="assets/images/[Link]" alt="Projet 3">
<p data-key="p3">Rénovation de bâtiment</p>
</div>
</div>
</section>
<section id="contact">
<h2 data-key="contactTitle">Contact</h2>
<p>📍 Matadi / RDC</p>
<p>📧 smartmatondo82@[Link]</p>
<p>📞 +243 844 045 139</p>
<form class="quote-form" id="quoteForm">
<input type="text" id="name" placeholder="Nom complet" required>
<input type="email" id="email" placeholder="Email" required>
<input type="tel" id="phone" placeholder="Téléphone" required>
<select id="service" required>
<option value="">Type de service</option>
<option>Construction</option>
<option>Rénovation</option>
<option>Génie civil</option>
<option>Travaux publics</option>
</select>
<textarea id="message" placeholder="Décrivez votre projet"></textarea>
<button type="submit">Demander un devis</button>
</form>
<div class="socials">
<a href="[Link] target="_blank">WhatsApp</a>
<a href="#" target="_blank">Facebook</a>
<a href="#" target="_blank">TikTok</a>
</div>
</section>
<script src="js/[Link]"></script>
</body>
</html>
CSS/[Link]
* { margin:0; padding:0; box-sizing:border-box; font-family:Arial,sans-serif; }
body { background:#f4f4f4; color:#222; }
header {
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 30px;
background:#0a2a43;
color:white;
.logo span { font-size:24px; font-weight:bold; color:#ff8c00; }
.logo small { display:block; font-size:12px; }
nav a {
color:white;
margin:0 10px;
text-decoration:none;
select { padding:5px; }
.hero {
padding:80px 20px;
text-align:center;
background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),
url('assets/images/[Link]') center/cover;
color:white;
}
.btn {
display:inline-block;
margin-top:20px;
padding:10px 20px;
background:#ff8c00;
color:white;
text-decoration:none;
section {
padding:50px 20px;
text-align:center;
.projects-grid {
display:grid;
grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
gap:20px;
margin-top:30px;
.project {
background:white;
padding:10px;
box-shadow:0 0 10px rgba(0,0,0,.1);
.project img {
width:100%;
height:180px;
object-fit:cover;
.quote-form {
max-width:500px;
margin:30px auto;
display:flex;
flex-direction:column;
.quote-form input,
.quote-form select,
.quote-form textarea {
margin:10px 0;
padding:10px;
border:1px solid #ccc;
.quote-form button {
background:#ff8c00;
color:white;
padding:12px;
border:none;
cursor:pointer;
.socials a {
margin:10px;
display:inline-block;
color:#0a2a43;
font-weight:bold;
JS/[Link]
const translations = {
fr: {
home:"Accueil", about:"À propos", services:"Services", projects:"Réalisations", contact:"Contact",
title:"Bâtir durablement, construire l’excellence",
subtitle:"Entreprise de construction et génie civil",
aboutTitle:"À propos",
aboutText:"IDRO CONSTRUCTION est une entreprise spécialisée dans la construction et le génie civil
en RDC.",
servicesTitle:"Nos services",
s1:"Construction de bâtiments", s2:"Rénovation", s3:"Génie civil", s4:"Travaux publics",
projectsTitle:"Nos réalisations", p1:"Construction d’un immeuble résidentiel", p2:"Travaux de génie
civil", p3:"Rénovation de bâtiment",
contactTitle:"Contact"
},
en: {
home:"Home", about:"About", services:"Services", projects:"Projects", contact:"Contact",
title:"Building durable solutions, constructing excellence",
subtitle:"Construction & civil engineering company",
aboutTitle:"About us",
aboutText:"IDRO CONSTRUCTION is a construction and civil engineering company in DR Congo.",
servicesTitle:"Our services",
s1:"Building construction", s2:"Renovation", s3:"Civil engineering", s4:"Public works",
projectsTitle:"Our projects", p1:"Residential building construction", p2:"Civil engineering works",
p3:"Building renovation",
contactTitle:"Contact"
},
ln: {
home:"Ebandeli", about:"Maye etali biso", services:"Misala", projects:"Misala ya solo",
contact:"Kobenga",
title:"Kotonga malamu, kosala mosala ya malonga",
subtitle:"Entreprise ya construction",
aboutTitle:"Maye etali biso",
aboutText:"IDRO CONSTRUCTION ezali entreprise ya construction na RDC.",
servicesTitle:"Misala na biso",
s1:"Kotonga bandako", s2:"Kobongisa bandako", s3:"Génie civil", s4:"Misala ya Leta",
projectsTitle:"Misala na biso", p1:"Kotonga immeuble", p2:"Misala ya génie civil", p3:"Kobongisa
bâtiment",
contactTitle:"Kobenga"
},
pt: {
home:"Início", about:"Sobre", services:"Serviços", projects:"Projetos", contact:"Contato",
title:"Construindo com qualidade e excelência",
subtitle:"Empresa de construção",
aboutTitle:"Sobre nós",
aboutText:"IDRO CONSTRUCTION é uma empresa de construção na RDC.",
servicesTitle:"Nossos serviços",
s1:"Construção de edifícios", s2:"Renovação", s3:"Engenharia civil", s4:"Obras públicas",
projectsTitle:"Nossos projetos", p1:"Construção de edifício residencial", p2:"Obras de engenharia
civil", p3:"Renovação de edifício",
contactTitle:"Contato"
};
const switcher = [Link]("languageSwitcher");
[Link]("change", () => {
[Link]("[data-key]").forEach(el => {
[Link] = translations[[Link]][[Link]];
});
});
// Formulaire WhatsApp
[Link]("quoteForm").addEventListener("submit", function(e){
[Link]();
let name = [Link]("name").value;
let email = [Link]("email").value;
let phone = [Link]("phone").value;
let service = [Link]("service").value;
let message = [Link]("message").value;
let text = `Demande de devis - IDRO CONSTRUCTION%0A%0ANom: ${name}%0AEmail: ${email}
%0ATéléphone: ${phone}%0AService: ${service}%0AProjet: ${message}`;
[Link](`[Link] "_blank");
});
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>IDRO CONSTRUCTION</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS -->
<link rel="stylesheet" href="css/[Link]">
<!-- Icons -->
<link rel="icon" href="assets/icons/[Link]">
</head>
<body>
<!-- 🔹 MENU UTILISATEUR (3 points) -->
<div class="menu-toggle" onclick="toggleMenu()">☰</div>
<div id="userMenu" class="user-menu">
<a href="[Link]">⚙️Paramétrage</a>
<a href="[Link]">📂 Mes demandes</a>
<a href="[Link]">👤 Mes informations</a>
</div>
<!-- 🔹 HEADER / NAVBAR -->
<header class="navbar">
<div class="logo">IDRO CONSTRUCTION</div>
<nav>
<a href="#home">Accueil</a>
<a href="#services">Services</a>
<a href="#realisations">Réalisations</a>
<a href="#modification">Modification d’immeubles</a>
<a href="#about">À propos</a>
</nav>
<!-- Réseaux sociaux -->
<div class="socials">
<a href="#"><img src="assets/icons/[Link]"></a>
<a href="#"><img src="assets/icons/[Link]"></a>
<a href="#"><img src="assets/icons/[Link]"></a>
</div>
</header>
<!-- 🔹 HERO / ACCUEIL -->
<section id="home" class="hero">
<h1>Construire avec qualité et confiance</h1>
<p>Entreprise professionnelle de construction et de rénovation</p>
<a href="#realisations" class="btn">Voir nos projets</a>
</section>
<!-- 🔹 PROJETS / PUBLICATIONS -->
<section id="realisations" class="projects">
<h2>Nos projets réalisés</h2>
<div class="projects-grid">
<!-- Projet 1 -->
<div class="project-card" onclick="openProject('projet1')">
<img src="assets/images/[Link]">
<h3>Maison moderne R+1</h3>
<p>Matadi – 2024</p>
</div>
<!-- Projet 2 -->
<div class="project-card" onclick="openProject('projet2')">
<img src="assets/images/[Link]">
<h3>Immeuble commercial</h3>
<p>Boma – 2023</p>
</div>
</div>
</section>
<!-- 🔹 FOOTER -->
<footer class="footer">
<div>
<h4>IDRO CONSTRUCTION</h4>
<p>Construire l’avenir avec professionnalisme</p>
</div>
<div>
<h4>Contact</h4>
<p>📍 Matadi, RDC</p>
<p>📧 smartmatondo82@[Link]</p>
</div>
<div class="socials">
<a href="#"><img src="assets/icons/[Link]"></a>
<a href="#"><img src="assets/icons/[Link]"></a>
</div>
<p class="copy">© 2026 IDRO CONSTRUCTION</p>
</footer>
<!-- JS -->
<script src="js/[Link]"></script>
</body>
</html>
/* Icônes réseaux sociaux */
.socials img {
width: 22px; /* taille normale pro */
height: 22px;
object-fit: contain;
}
/* Icônes dans le header */
.navbar .socials img {
width: 20px;
height: 20px;
/* Icônes dans le footer */
.footer .socials img {
width: 24px;
height: 24px;