<!
DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GROUPE BANA KIKWIT 2 ASBL</title>
<style>
/* Global */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; line-height: 1.6; background: #f8f9fa;
color: #333; }
a { text-decoration: none; }
ul { list-style: none; }
/* Topbar */
.topbar {
background: #111;
color: white;
font-size: 14px;
padding: 8px 40px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.topbar a { color: white; margin-left: 15px; }
/* Navigation */
nav {
background: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 40px;
border-bottom: 1px solid #eee;
position: sticky;
top: 0;
z-index: 1000;
}
nav .logo { font-size: 22px; font-weight: bold; color: #d50000; }
nav ul { display: flex; }
nav ul li { margin: 0 15px; }
nav ul li a { color: #333; font-weight: bold; }
nav ul li a:hover { color: #d50000; }
.donate-btn {
background: #d50000;
color: white;
padding: 8px 15px;
border-radius: 4px;
font-weight: bold;
}
/* Hero section */
.hero {
position: relative;
background: url('[Link]') no-repeat center center/cover;
height: 90vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
overflow: hidden;
}
.hero .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 1;
}
.hero-content {
position: relative;
z-index: 2;
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1200px;
gap: 40px;
}
.hero-text { flex: 1; }
.hero-text .subtitle {
color: #ff6666;
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
letter-spacing: 1px;
}
.hero-text h1 {
font-size: 48px;
line-height: 1.2;
margin: 20px 0;
font-weight: 800;
}
.hero-text .description {
font-size: 18px;
margin-bottom: 25px;
color: #f1f1f1;
}
.hero-text button {
background: #d50000;
border: none;
color: white;
padding: 14px 30px;
cursor: pointer;
font-weight: bold;
font-size: 16px;
border-radius: 6px;
transition: 0.3s;
}
.hero-text button:hover {
background: #a40000;
transform: translateY(-2px);
}
.hero-img img {
max-height: 420px;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
/* Sections */
section { padding: 60px 40px; }
section h2 {
text-align: center;
margin-bottom: 30px;
font-size: 32px;
color: #111;
}
.about, .services, .events, .gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.card {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 3px 8px rgba(0,0,0,0.1);
text-align: center;
}
.card h3 { color: #d50000; margin-bottom: 10px; }
/* Galerie photo et vidéo */
.gallery-item img, .gallery-item video {
width: 100%;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
/* Footer */
footer {
background: #111;
color: white;
text-align: center;
padding: 20px;
margin-top: 40px;
}
</style>
</head>
<body>
<!-- Topbar -->
<div class="topbar">
<div>✉️+243821674749 | banamatongekikwit2@[Link]</div>
<div>📞 +14253140748 | 📞 +243816909850 | 📞 +243824479799 | 📞 +243817855020</div>
<div>
<a href="#">Facebook</a>
<a href="#">Instagram</a>
<a href="#">YouTube</a>
<a href="#">Tiktok</a>
</div>
</div>
<!-- Navbar -->
<nav>
<div class="logo">ASBL</div>
<ul>
<li><a href="#home">HOME</a></li>
<li><a href="#about">A PROPOS</a></li>
<li><a href="#services">ADRESSE</a></li>
<li><a href="#gallery">GALERIE</a></li>
</ul>
</nav>
<!-- Hero -->
<section class="hero" id="home">
<div class="overlay"></div>
<div class="hero-content">
<div class="hero-text">
<p class="subtitle">Que chacun donne comme il l'a résolu en son cœur , sans
tristesse ni contrainte ; Dieu aime celui qui donne avec joie.</p>
<h1>BANA MATONGE KIKWIT2 — ENSEMBLE, TOUT DEVIENT POSSIBLE.</h1>
</div>
<div class="hero-img">
<img src="[Link]" alt="Leader Politique">
</div>
</div>
</section>
<!-- About -->
<section id="about">
<h2>A propos</h2>
<div class="about">
<div class="card">
<h3>Conscient de ces dons ineffables que Dieu nous a fait porter</h3>
<p>Considérant les disposition de déclaration universelle des Droit de
Homme et de la Charte Afrique des Droit de L'Homme et des peuples considérant que
la constitution et les lois de la République Démocratique du Congo reconnaissent à
tout citoyen congolais ainsi qu'à toute personne vivant au Congo la jouissance de
ses libertés et droits fondamentaux tels que la droit à la vie, à la sureté de sa
personne ainsi qu'à la sécurité sociale mus par la volonté d'assister membre de
GROUPE B.M.K. les personne vulnérables, dévalorisés et de restaurer l'unité
territoriale, le développement communautaire, décision de créer une association
dénommée GROUPE BANA MATONGE KIKWIT en sigle GROUPE (B.M.K) régie par un règlement
d'ordre intérieur.</p>
</div>
</section>
<!-- Program -->
<section id="services">
<h2>Adresse</h2>
<div class="services">
<div class="card"><h3>le siege social</h3><p>Le siège social du groupe BANA
MATONGE KIKWIT 2, quartier ndangu est établit sur l'avenue MATADI N°34 dans la
commune de kitambo, ville de Kinshasa. Republique Democratique du Congo.</p></div>
</div>
</section>
<!-- Events -->
<!-- Galerie Photos et Vidéos -->
<section id="gallery">
<h2>Galerie Photos & Vidéos</h2>
<div class="gallery">
<!-- Photos -->
<div class="gallery-item">
<img src="[Link]" alt="Photo 1">
</div>
<div class="gallery-item">
<img src="[Link]" alt="Photo 2">
</div>
<!-- Vidéos -->
<div class="gallery-item">
<video controls>
<source src="biso.mp4" type="video/mp4">
Votre navigateur ne supporte pas la lecture vidéo.
</video>
</div>
<div class="gallery-item">
<iframe width="100%" height="250"
src="[Link] frameborder="0"
allowfullscreen></iframe>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<p>© 2025 ASBL B.M.K | Développeur nathan molangi molembo tous droits
réservés .</p>
</footer>
</body>
</html>